:root{
  --ground:#FBF8F7; --surface:#FFFFFF; --surface-2:#F4EEEC;
  --ink:#1A1413; --ink-2:#584B49; --ink-3:#8A7B78;
  --line:#E7DCD9; --line-2:#D8C9C5;
  --marca:#1F5140; --marca-fuerte:#163B2F; --marca-suave:#E9F2EE;
  --amber:#9A6F1E; --amber-tint:#F6EEDB;
  --forest:#2F6B4F;
  --tachado:#D92B2B;
  --vino:#931A25;
  --p-tedivina-a:#F4E8CE; --p-tedivina-b:#E2CEA2; --p-tedivina-ink:#7A5714;
  --p-cafe-a:#EDE2DA;     --p-cafe-b:#D5C1B3;     --p-cafe-ink:#4A2E22;
  --p-suple-a:#F7E4E5;    --p-suple-b:#E7C7CA;    --p-suple-ink:#8A1C26;
  --p-extra-a:#E3EEE7;    --p-extra-b:#C6DCD0;    --p-extra-ink:#255843;
  --p-kits-a:#EBE8E7;     --p-kits-b:#D2CBC9;     --p-kits-ink:#2A2221;
  --p-peso-a:#E2EEF4;     --p-peso-b:#BFD8E7;     --p-peso-ink:#1F4E68;
  --shadow:0 1px 2px rgba(26,20,19,.05), 0 8px 24px -12px rgba(26,20,19,.18);
  --radius:14px;
  --maxw:1340px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#141010; --surface:#1D1817; --surface-2:#262020;
    --ink:#F2EAE8; --ink-2:#BDAEAB; --ink-3:#8E7F7C;
    --line:#332B2A; --line-2:#463B39;
    --marca:#348A66; --marca-fuerte:#46A57D; --marca-suave:#14291F;
    --amber:#D9A441; --amber-tint:#2C2213;
    --forest:#6FB392;
    --tachado:#FF7A7A;
    --vino:#B8323F;
    --p-tedivina-a:#3A2F17; --p-tedivina-b:#241C0D; --p-tedivina-ink:#E6C98B;
    --p-cafe-a:#33251E;     --p-cafe-b:#1F1612;     --p-cafe-ink:#DCC3B2;
    --p-suple-a:#3A1E21;    --p-suple-b:#231114;    --p-suple-ink:#EFB2B7;
    --p-extra-a:#1E3229;    --p-extra-b:#131F1A;    --p-extra-ink:#9DD3B9;
    --p-kits-a:#2B2423;     --p-kits-b:#191413;     --p-kits-ink:#CEC2BF;
    --p-peso-a:#1C2F3A;     --p-peso-b:#111D24;     --p-peso-ink:#9CCBE2;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#141010; --surface:#1D1817; --surface-2:#262020;
  --ink:#F2EAE8; --ink-2:#BDAEAB; --ink-3:#8E7F7C;
  --line:#332B2A; --line-2:#463B39;
  --marca:#348A66; --marca-fuerte:#46A57D; --marca-suave:#14291F;
  --amber:#D9A441; --amber-tint:#2C2213;
  --forest:#6FB392;
  --tachado:#FF7A7A;
  --vino:#B8323F;
  --p-tedivina-a:#3A2F17; --p-tedivina-b:#241C0D; --p-tedivina-ink:#E6C98B;
  --p-cafe-a:#33251E;     --p-cafe-b:#1F1612;     --p-cafe-ink:#DCC3B2;
  --p-suple-a:#3A1E21;    --p-suple-b:#231114;    --p-suple-ink:#EFB2B7;
  --p-extra-a:#1E3229;    --p-extra-b:#131F1A;    --p-extra-ink:#9DD3B9;
  --p-kits-a:#2B2423;     --p-kits-b:#191413;     --p-kits-ink:#CEC2BF;
  --p-peso-a:#1C2F3A;     --p-peso-b:#111D24;     --p-peso-ink:#9CCBE2;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Titillium Web", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:"Fjalla One", "Titillium Web", Impact, sans-serif; font-weight:400; letter-spacing:.005em; text-wrap:balance; margin:0}
a{color:inherit}
button{font:inherit; cursor:pointer}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
.eyebrow{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- top bar ---------- */
.topbar{background:var(--marca); color:#fff; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.topbar .wrap{display:flex; gap:14px; align-items:center; justify-content:center; padding-block:9px; text-align:center}
.topbar svg{flex:none}

/* ---------- header ---------- */
.site-header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; gap:22px; padding-block:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.brand-mark{width:auto; height:42px; flex:none}
.brand-name{font-family:"Fjalla One",sans-serif; font-size:1.32rem; line-height:1; letter-spacing:.01em}
.mainnav{display:flex; gap:26px}
.mainnav a{text-decoration:none; font-weight:600; font-size:.95rem; color:var(--ink-2); padding-block:4px; border-bottom:2px solid transparent}
.mainnav a:hover,.mainnav a:focus-visible{color:var(--ink); border-bottom-color:var(--marca)}
.header-actions{display:flex; align-items:center; gap:8px}
.icon-btn{display:inline-flex; align-items:center; gap:7px; background:none; border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:8px 14px; font-weight:600; font-size:.88rem}
.icon-btn:hover{border-color:var(--line-2); background:var(--surface-2)}
.cart-count{background:var(--marca); color:#fff; border-radius:999px; min-width:20px; height:20px; display:inline-grid; place-items:center; font-size:.72rem; font-weight:700; padding-inline:6px}
@media (max-width:900px){ .mainnav{display:none} }

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,76px) clamp(36px,5vw,64px)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem); line-height:.98; margin-block:14px 18px}
.hero h1 em{font-style:normal; color:var(--marca)}
.hero p.lede{font-size:1.1rem; color:var(--ink-2); max-width:44ch; margin:0 0 26px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px}
.btn{display:inline-flex; align-items:center; gap:9px; border-radius:999px; padding:13px 26px; font-weight:700; font-size:.95rem; text-decoration:none; border:2px solid transparent; transition:transform .15s ease, background .15s ease, color .15s ease}
.btn-primary{background:var(--marca); color:#fff}
.btn-primary:hover{background:var(--marca-fuerte); transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2); color:var(--ink); background:var(--surface)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-1px)}
.trust-row{display:flex; flex-wrap:wrap; gap:10px 26px; border-top:1px solid var(--line); padding-top:20px}
.trust-item{display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--ink-2); font-weight:600}
.trust-item svg{color:var(--marca); flex:none}

/* hero visual: banner de TeDivina */
.hero-art{margin:0 auto; align-self:center; max-width:780px}
.hero-art img{width:100%; height:auto; display:block}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr} .hero-art{order:-1; max-width:520px; margin-inline:auto} }

/* ---------- líneas ---------- */
.section{padding-block:clamp(34px,4.5vw,58px)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap}
.section-head h2,.section-head h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.section-head p{margin:6px 0 0; color:var(--ink-2); max-width:56ch}
.lines{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.line-tile{display:flex; flex-direction:column; gap:10px; text-decoration:none; padding:18px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); transition:border-color .15s, transform .15s}
.line-tile:hover{border-color:var(--marca); transform:translateY(-2px)}
.line-tile .mk{width:38px; height:38px}
.line-tile strong{font-family:"Fjalla One",sans-serif; font-weight:400; font-size:1.12rem; line-height:1.15}
.line-tile span{font-size:.8rem; color:var(--ink-3); font-weight:600}
@media (max-width:980px){ .lines{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .lines{grid-template-columns:repeat(2,1fr)} }

/* ---------- catálogo ---------- */
.toolbar{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:20px; position:sticky; top:calc(env(safe-area-inset-top, 0px) + 74px); z-index:20}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:7px 15px; font-size:.86rem; font-weight:600}
.chip:hover{border-color:var(--line-2); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--marca); border-color:var(--marca); color:#fff}
.tools-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.field{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:7px 14px; background:var(--surface)}
.field input,.field select{border:none; background:none; color:var(--ink); font:inherit; font-size:.88rem; outline:none; min-width:0}
.field input{width:150px}
.field svg{color:var(--ink-3); flex:none}
.switch{display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:var(--ink-2); cursor:pointer}
.switch input{accent-color:var(--marca); width:16px; height:16px}
.result-line{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px; flex-wrap:wrap}
.result-line .count{font-size:.9rem; color:var(--ink-2); font-weight:600}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; list-style:none; margin:0; padding:0}
@media (max-width:1080px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .grid{grid-template-columns:repeat(2,1fr); gap:14px} }
@media (max-width:440px){ .grid{grid-template-columns:1fr} }

.card{display:flex; flex-direction:column; height:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease}
.card:hover{border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--shadow)}
.card-media{position:relative; aspect-ratio:1/1; display:grid; place-items:center; padding:18px; background:linear-gradient(155deg, var(--pa), var(--pb)); border-bottom:1px solid var(--line)}
.card-media .mk{width:46%; max-width:104px; height:auto; color:var(--pi); opacity:.92}
.card-media .plabel{position:absolute; left:0; right:0; bottom:0; padding:10px 14px; font-family:"Fjalla One",sans-serif; font-size:.9rem; line-height:1.1; color:var(--pi); text-transform:uppercase; letter-spacing:.04em; text-align:center; background:linear-gradient(to top, color-mix(in srgb, var(--pb) 88%, transparent), transparent)}
.badge{position:absolute; top:10px; left:10px; border-radius:999px; padding:4px 11px; font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase}
.badge-sale{background:var(--marca); color:#fff}
.badge-out{background:var(--ink); color:var(--ground)}
.card-body{display:flex; flex-direction:column; gap:7px; padding:16px 16px 18px; flex:1}
.card-line{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
.card h3{font-size:1.14rem; line-height:1.15}
.card p{margin:0; font-size:.88rem; color:var(--ink-2); line-height:1.45}
.price{display:flex; align-items:baseline; gap:9px; margin-top:auto; padding-top:10px}
.price .now{font-family:"Fjalla One",sans-serif; font-size:1.34rem; color:var(--ink)}
/* La línea va más delgada y más tenue que el número: a 2px y del mismo tono
   tapaba las cifras y el precio anterior no se alcanzaba a leer. */
.price .was{font-size:1rem; font-weight:600; color:var(--tachado); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--tachado) 60%, transparent); text-decoration-thickness:1px}
.price .save{font-size:.74rem; font-weight:700; color:var(--forest); letter-spacing:.04em}
.add{width:100%; margin-top:12px; border-radius:999px; border:2px solid var(--marca); background:var(--marca); color:#fff; padding:11px 16px; font-weight:700; font-size:.9rem; transition:background .15s, color .15s}
.add:hover:not(:disabled){background:var(--marca-fuerte); border-color:var(--marca-fuerte)}
.add:disabled{background:transparent; color:var(--ink-3); border-color:var(--line-2); cursor:not-allowed}
.empty{padding:50px 20px; text-align:center; color:var(--ink-2); border:1px dashed var(--line-2); border-radius:var(--radius)}


/* ---------- garantía ---------- */
.guarantee{background:var(--surface); border-block:1px solid var(--line)}
.guarantee .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:34px; padding-block:clamp(32px,4vw,52px)}
.g-item h3{font-size:1.15rem; margin-bottom:6px}
.g-item p{margin:0; color:var(--ink-2); font-size:.92rem}
.g-item .g-seal{width:auto; height:72px; display:block; margin-bottom:8px}
.g-item .num{font-family:"Fjalla One",sans-serif; font-size:2.1rem; color:var(--marca); line-height:1; display:block; margin-bottom:8px}
@media (max-width:760px){ .guarantee .wrap{grid-template-columns:1fr; gap:24px} }

/* ---------- footer ---------- */
.site-footer{background:var(--surface-2); border-top:1px solid var(--line); margin-top:0}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:34px; padding-block:clamp(34px,4vw,54px)}
/* Pie de la tienda real, sin la columna de suscripción: el formulario no
   guardaba el correo en ningún lado. Vuelve a 4 columnas si se conecta a un
   servicio de correo. La tienda de anuncios sigue con las 4. */
.footer-grid-3{grid-template-columns:1.4fr 1fr 1fr}
.site-footer h4{font-family:"Fjalla One",sans-serif; font-weight:400; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.site-footer a{color:var(--ink-2); text-decoration:none; font-size:.92rem}
.site-footer a:hover{color:var(--marca)}
.site-footer p{color:var(--ink-2); font-size:.92rem; margin:0 0 12px}
.news{display:flex; gap:8px; margin-top:12px}
.news input{flex:1; min-width:0; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); border-radius:999px; padding:10px 16px; font:inherit; font-size:.9rem}
.news input:focus-visible{outline:2px solid var(--marca); outline-offset:1px}
.news button{border:none; background:var(--ink); color:var(--ground); border-radius:999px; padding:10px 20px; font-weight:700; font-size:.9rem}
.legal{border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; padding-block:18px; font-size:.84rem; color:var(--ink-3)}
.legal nav{display:flex; flex-wrap:wrap; gap:8px 18px}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:540px){ .footer-grid{grid-template-columns:1fr} }

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 22px); transform:translate(-50%, 12px); background:var(--ink); color:var(--ground); padding:12px 22px; border-radius:999px; font-weight:600; font-size:.9rem; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:60}
.toast.on{opacity:1; transform:translate(-50%,0)}

:focus-visible{outline:2px solid var(--marca); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ---------- página de producto ---------- */
.crumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.85rem; color:var(--ink-3); padding-block:22px 4px}
.crumbs a{color:var(--ink-2); text-decoration:none}
.crumbs a:hover{color:var(--marca)}
.crumbs [aria-current]{color:var(--ink); font-weight:600}

.p-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; padding-block:clamp(20px,3vw,34px)}
.p-media{position:relative; margin:0; aspect-ratio:1/1; display:grid; place-items:center; padding:28px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:linear-gradient(155deg, var(--pa), var(--pb))}
.p-media .mk{width:52%; max-width:240px; height:auto; color:var(--pi); opacity:.92}
.p-media figcaption{position:absolute; left:0; right:0; bottom:0; padding:14px 18px; text-align:center; font-family:"Fjalla One",sans-serif; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; color:var(--pi); background:linear-gradient(to top, color-mix(in srgb, var(--pb) 90%, transparent), transparent)}

.p-info h1{font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.05; margin-block:8px 14px}
.p-price{margin:0 0 16px; padding-top:0}
.p-price .now{font-size:1.9rem}
.p-desc{color:var(--ink-2); font-size:1.02rem; margin:0 0 24px; max-width:52ch}
.p-cta{width:100%; justify-content:center; padding-block:15px; font-size:1rem}
.p-nota{font-size:.85rem; color:var(--ink-3); margin:10px 0 0; text-align:center}
.p-trust{margin-top:26px; flex-direction:column; gap:12px}

.p-bloque{border-top:1px solid var(--line); padding-block:26px; max-width:68ch}
.p-bloque h2{font-size:1.3rem; margin-bottom:8px}
.p-bloque p{margin:0; color:var(--ink-2)}

.grid-rel{grid-template-columns:repeat(3,1fr)}
.card-link{text-decoration:none; color:inherit; display:block}
.card-body h3 .card-link:hover{color:var(--marca)}

@media (max-width:820px){
  .p-grid{grid-template-columns:1fr}
  .p-media{max-width:460px}
  .grid-rel{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:440px){ .grid-rel{grid-template-columns:1fr} }

/* ---------- carrito ---------- */
.cart-count-cero{background:var(--line-2); color:var(--ink-2)}
.cart-fondo{position:fixed; inset:0; background:rgba(26,20,19,.5); opacity:0; transition:opacity .2s ease; z-index:70}
.cart-fondo.on{opacity:1}
.cart-cajon{position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--surface); border-left:1px solid var(--line); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s ease; z-index:71; padding-bottom:env(safe-area-inset-bottom,0px)}
.cart-cajon.on{transform:none}
.cart-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line)}
.cart-top h2{font-size:1.3rem}
.cart-x{background:none; border:none; color:var(--ink-2); padding:6px; border-radius:8px; display:inline-flex}
.cart-x:hover{background:var(--surface-2); color:var(--ink)}

.cart-lista{list-style:none; margin:0; padding:0; overflow-y:auto; flex:1}
.cart-item{display:grid; grid-template-columns:1fr auto; grid-template-areas:"txt sub" "qty quitar"; gap:8px 12px; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line)}
.cart-item-txt{grid-area:txt; display:flex; flex-direction:column; gap:2px; min-width:0}
.cart-item-txt strong{font-size:.95rem; line-height:1.25}
.cart-item-txt span{font-size:.8rem; color:var(--ink-3)}
.cart-item-sub{grid-area:sub; font-family:"Fjalla One",sans-serif; font-weight:400; font-size:1.1rem; white-space:nowrap}
.cart-qty{grid-area:qty; display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; justify-self:start}
.cart-qty button{background:none; border:none; color:var(--ink); width:32px; height:30px; font-size:1.05rem; line-height:1}
.cart-qty button:hover{background:var(--surface-2)}
.cart-qty span{min-width:26px; text-align:center; font-weight:700; font-size:.9rem}
.cart-quitar{grid-area:quitar; justify-self:end; background:none; border:none; color:var(--ink-3); font-size:.8rem; font-weight:600; text-decoration:underline; padding:4px}
.cart-quitar:hover{color:var(--marca)}

.cart-vacio{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:40px 20px; text-align:center; color:var(--ink-2)}
.cart-pie{border-top:1px solid var(--line); padding:18px 20px; background:var(--surface-2)}
.cart-total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px}
.cart-total span{font-weight:600; color:var(--ink-2)}
.cart-total b{font-family:"Fjalla One",sans-serif; font-weight:400; font-size:1.7rem}
.cart-envio{margin:0 0 14px; font-size:.82rem; color:var(--forest); font-weight:600}
.cart-nota{margin:10px 0 0; font-size:.8rem; color:var(--ink-3); text-align:center}

/* ---------- páginas de texto legal ---------- */
.legal-page{max-width:74ch; padding-block:clamp(26px,4vw,48px)}
.legal-page h1{font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.05; margin-bottom:10px}
.legal-page .actualizado{color:var(--ink-3); font-size:.88rem; margin:0 0 30px}
.legal-page h2{font-size:1.25rem; margin:30px 0 8px}
.legal-page p,.legal-page li{color:var(--ink-2); font-size:.98rem}
.legal-page ul{padding-left:20px; display:flex; flex-direction:column; gap:7px}
/* Excluye los botones: esta regla pesa más que .btn-primary y le pintaba
   el texto del color de marca, o sea verde sobre verde. */
.legal-page a:not(.btn){color:var(--marca); font-weight:600}
.pendiente{background:var(--amber-tint); border-bottom:2px solid var(--amber); color:var(--ink); font-weight:700; padding:1px 5px; border-radius:3px}
.contacto-vias{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:26px 0; padding:0; list-style:none}
.contacto-via{display:flex; flex-direction:column; gap:5px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.contacto-via strong{font-family:"Fjalla One",sans-serif; font-weight:400; font-size:1.05rem}
.contacto-via span{font-size:.88rem; color:var(--ink-2)}
.p-cta-add{margin-top:0; padding-block:15px; font-size:1rem}
.p-cta2,.p-comprar{width:100%; justify-content:center; margin-top:10px; padding-block:13px; font-size:.95rem; display:inline-flex; align-items:center; gap:9px}

/* ---------- fotos de producto ---------- */
.card-media.con-foto,.p-media.con-foto{background:var(--surface); padding:0}
.card-media.con-foto img,.p-media.con-foto img{width:100%; height:100%; object-fit:cover; display:block}
.p-bloque ul{margin:10px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:7px}
.p-bloque li{color:var(--ink-2)}

/* ---------- llamada bajo el banner del hero ---------- */
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; margin-top:16px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.hero-cta strong{font-family:"Fjalla One",sans-serif; font-weight:400; font-size:1.18rem; line-height:1.2; letter-spacing:.01em}
.hero-cta-link{display:inline-flex; align-items:center; gap:7px; flex:none; text-decoration:none; font-weight:700; font-size:.92rem; color:#fff; background:var(--vino); border-radius:999px; padding:10px 20px; text-transform:uppercase; letter-spacing:.05em; transition:background .15s ease, transform .15s ease}
.hero-cta-link:hover{background:color-mix(in srgb, var(--vino) 82%, #000); transform:translateY(-1px)}
.hero-cta-link svg{flex:none}
/* Los dos testimonios del hero, lado a lado en cualquier pantalla. Son fotos
   horizontales de antes/después: se igualan a 3:2 para que queden parejas. */
.hero-testis{display:grid; grid-template-columns:1fr 1fr; gap:10px; list-style:none; margin:14px 0 0; padding:0}
.hero-testis a{display:block; position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface-2)}
.hero-testis img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform .2s ease}
.hero-testis a:hover img{transform:scale(1.04)}
.hero-testis a:focus-visible{outline:3px solid var(--marca); outline-offset:2px}

/* ---------- testimonios ---------- */
#testimonios{scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 86px)}
.testimonios{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; list-style:none; margin:0; padding:0}
.testimonio{margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.testimonio img{width:100%; height:auto; display:block}
/* ---------- opiniones en miniatura + minigalería (tienda de anuncios) ---------- */
.op-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; list-style:none; margin:0; padding:0}
@media (max-width:900px){ .op-grid{grid-template-columns:repeat(3,1fr); gap:10px} }
/* La miniatura enseña la parte de abajo de la captura, que es donde va el
   mensaje; las más anchas que altas (un renglón) se ven completas. */
.op-mini{display:block; position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface-2)}
.op-mini img{width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block; transition:transform .2s ease}
.op-mini.ancha img{object-fit:contain; object-position:center}
.op-mini:hover img{transform:scale(1.04)}
.op-mini:focus-visible{outline:3px solid var(--marca); outline-offset:2px}
.op-lupa{position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; background:rgba(0,0,0,.55); color:#fff}

.galeria{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:calc(env(safe-area-inset-top,0px) + 64px) 12px calc(env(safe-area-inset-bottom,0px) + 76px); background:rgba(12,9,9,.96); opacity:0; transition:opacity .18s ease}
.galeria.on{opacity:1}
.gal-foto{max-width:min(94vw,760px); max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.5); touch-action:pan-y}
.gal-btn{position:absolute; width:48px; height:48px; border-radius:999px; border:0; display:grid; place-items:center; background:rgba(255,255,255,.14); color:#fff; transition:background .15s}
.gal-btn:hover{background:rgba(255,255,255,.26)}
.gal-btn:focus-visible{outline:3px solid #fff; outline-offset:2px}
.gal-cerrar{top:calc(env(safe-area-inset-top,0px) + 10px); right:12px}
.gal-ant{left:14px; top:50%; transform:translateY(-50%)}
.gal-sig{right:14px; top:50%; transform:translateY(-50%)}
.gal-cuenta{position:absolute; top:calc(env(safe-area-inset-top,0px) + 22px); left:50%; transform:translateX(-50%); margin:0; color:#fff; font-weight:700; font-size:.92rem; letter-spacing:.04em}
/* En celular las flechas bajan, al alcance del pulgar y sin tapar la imagen. */
@media (max-width:640px){
  .gal-ant,.gal-sig{top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 14px); transform:none}
  .gal-ant{left:calc(50% - 60px)} .gal-sig{right:calc(50% - 60px)}
}
html.galeria-abierta{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .galeria,.op-mini img{transition:none} }
@media (max-width:820px){ .testimonios{grid-template-columns:repeat(2,1fr); gap:12px} }
@media (max-width:440px){ .testimonios{grid-template-columns:1fr} }

@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
.cart-tarjeta{width:100%; justify-content:center; padding-block:14px; display:inline-flex; align-items:center; gap:9px}
.cart-tarjeta:disabled{opacity:.6; cursor:not-allowed}
/* Datos de envío: segunda vista del cajón, antes de ir a Mercado Pago. */
.cart-datos{flex:1; display:flex; flex-direction:column; min-height:0}
.cart-datos[hidden],.cart-lista[hidden]{display:none}
.cart-datos-cuerpo{flex:1; overflow-y:auto; padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px}
.cart-datos-intro{margin:0 0 2px; font-size:.9rem; color:var(--ink-2)}
.cd-campo{display:flex; flex-direction:column; gap:5px; font-size:.8rem; font-weight:600; color:var(--ink-2); min-width:0}
.cd-campo em{font-style:normal; font-weight:400; color:var(--ink-3)}
/* 16px: con menos, el iPhone hace zoom al tocar el campo. */
.cd-campo input,.cd-campo select{width:100%; min-width:0; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); border-radius:10px; padding:11px 12px; font:inherit; font-size:16px; font-weight:400}
.cd-campo input::placeholder{color:var(--ink-3)}
.cd-campo input:focus-visible,.cd-campo select:focus-visible{outline:2px solid var(--marca); outline-offset:1px}
.cd-fila{display:grid; grid-template-columns:8.5em 1fr; gap:10px}
.cart-datos-priv{margin:2px 0 0; font-size:.76rem; color:var(--ink-3)}
.cart-continuar{width:100%; justify-content:center; padding-block:14px}
.cart-continuar:disabled{opacity:.6; cursor:wait}
.cart-volver{display:block; margin:10px auto 0; background:none; border:none; color:var(--ink-2); font:inherit; font-size:.85rem; font-weight:600; text-decoration:underline; padding:4px}
.cart-volver:hover{color:var(--marca)}
.cart-qty button:disabled{opacity:.35; cursor:not-allowed}
.cart-qty button:disabled:hover{background:none}

/* ---------- ajustes de celular ---------- */
/* Los precios se partían a media cifra: "$1,699" en un renglón y "MXN" en el
   siguiente. Cada precio se mantiene entero y, si no caben los tres, bajan
   completos al renglón de abajo. */
.price{flex-wrap:wrap}
.price .now,.price .was,.price .save{white-space:nowrap}

@media (max-width:430px){
  /* El nombre de la marca se partía en dos y quedaba pegado al botón de tema.
     En celular ese botón sobra: el sistema ya avisa si el usuario usa modo
     oscuro y la página lo respeta sola. */
  #themeBtn{display:none}
  .brand-name{font-size:1.12rem}
  .site-header .wrap{gap:12px}
  .price .save{font-size:.72rem}
}

/* La barra de filtros es fija, así que en celular su altura se descuenta de la
   pantalla útil. Apilada ocupaba 250px, el 40% junto con el encabezado. Aquí
   se compacta: los filtros pasan a una fila que se desliza de lado, y buscador
   y orden comparten renglón.

   min-width:0 en los hijos no es opcional: en flex, un elemento no se encoge
   por debajo de su contenido sin eso, y la fila de filtros desbordaba la
   página entera. */
@media (max-width:640px){
  .toolbar{flex-direction:column; align-items:stretch; gap:9px; padding:10px 12px}

  .chips{flex-wrap:nowrap; overflow-x:auto; min-width:0; scrollbar-width:none;
         margin-inline:-12px; padding-inline:12px; scroll-padding-inline:12px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}

  .tools-right{min-width:0; flex-wrap:wrap; gap:8px}
  .switch{order:-1; width:100%; font-size:.84rem}
  .tools-right .field{flex:1 1 0; min-width:0; padding-inline:12px}
  .tools-right .field input{width:100%; min-width:0}
  .tools-right .field select{min-width:0; flex:1}
}

/* ---------- explicación del producto ---------- */
.explica{padding-block:clamp(28px,4vw,48px)}
.explica h2{font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.1; margin-block:8px 20px; max-width:20ch}
.explica p{color:var(--ink-2); font-size:1.02rem; max-width:58ch; margin-block:0 14px}
.sintomas{display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0 0 22px; padding:0}
/* Vino sólido con letra blanca: es lo que más resalta sobre el fondo claro de
   la página. En tema oscuro el vino se aclara para no perderse contra el
   fondo. Contraste con la letra: 8.7:1 en claro, 5.9:1 en oscuro. */
.sintomas li{border:1px solid var(--vino); border-radius:999px; padding:9px 18px;
  font-size:.95rem; font-weight:700; letter-spacing:.01em;
  color:#fff; background:var(--vino)}
.explica-golpe{font-family:"Fjalla One",sans-serif; font-size:clamp(1.15rem,2.2vw,1.45rem); color:var(--marca) !important; letter-spacing:.01em}
.explica-cierre{margin-top:26px; padding:20px 22px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface)}
.explica-cierre p{margin-bottom:16px; color:var(--ink)}
.explica-cta{display:flex; flex-wrap:wrap; gap:10px}
/* Vino solo en esta llamada, no en el resto del sitio: acompaña a las
   etiquetas de síntomas y separa este bloque del verde de la marca. */
.explica-cta .btn-primary{background:var(--vino); border-color:var(--vino)}
.explica-cta .btn-primary:hover{background:color-mix(in srgb, var(--vino) 82%, #000); border-color:color-mix(in srgb, var(--vino) 82%, #000)}
@media (max-width:560px){ .explica-cta .btn{width:100%; justify-content:center} }

/* ---------- preguntas frecuentes ---------- */
/* <details> nativo: abre sin JavaScript, responde al teclado y los lectores
   de pantalla lo anuncian solos. */
.preguntas{border-top:1px solid var(--line)}
.pregunta{border-bottom:1px solid var(--line)}
.pregunta summary{display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; padding:18px 2px; font-weight:700; font-size:1.02rem; color:var(--ink)}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:""; flex:none; width:11px; height:11px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg) translateY(-3px); transition:transform .18s ease}
.pregunta[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.pregunta summary:hover{color:var(--marca)}
.pregunta summary:hover::after{border-color:var(--marca)}
.respuesta{padding:0 2px 20px; max-width:72ch}
.respuesta p{margin:0; color:var(--ink-2); font-size:.98rem; line-height:1.6}

/* ---------- aviso de cookies ---------- */
.cookies{position:fixed; left:14px; right:14px; bottom:14px; z-index:80; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; padding:16px 20px; border:1px solid var(--line-2); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:opacity .22s ease, transform .22s ease; max-width:760px; margin-inline:auto; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
.cookies.on{opacity:1; transform:none}

/* ---------- botón flotante de WhatsApp ----------
   z-index 50: por debajo del carrito (70/71) y del aviso de cookies (80),
   por encima del contenido. Así el cajón lo tapa en vez de encimarse. */
.wa-flota{position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index:50; display:inline-flex; align-items:center; gap:0; overflow:hidden;
  height:56px; padding:0 16px; border-radius:999px; background:#25D366; color:#fff;
  text-decoration:none; font-weight:700; font-size:.95rem; white-space:nowrap;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.35);
  transition:gap .2s ease, padding .2s ease, transform .2s ease, opacity .2s ease}
.wa-flota svg{width:30px; height:30px; flex:none}
/* El texto empieza plegado y se abre al pasar el cursor: la burbuja sola se
   reconoce, y el rótulo estorba menos sobre el catálogo. */
.wa-flota-txt{max-width:0; opacity:0; transition:max-width .2s ease, opacity .2s ease}
.wa-flota:hover, .wa-flota:focus-visible{gap:10px}
.wa-flota:hover .wa-flota-txt, .wa-flota:focus-visible .wa-flota-txt{max-width:140px; opacity:1}
.wa-flota:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
/* Mientras el aviso de cookies ocupa la parte baja, la burbuja se quita de
   en medio; el aviso se borra del DOM al responderlo y vuelve sola. */
body:has(.cookies) .wa-flota{opacity:0; transform:scale(.8); pointer-events:none}
@media (prefers-reduced-motion:reduce){ .wa-flota{transition:none} }
@media (max-width:560px){
  .wa-flota{height:52px; padding:0 14px; right:14px}
  .wa-flota svg{width:27px; height:27px}
}
.cookies p{margin:0; font-size:.9rem; color:var(--ink-2); max-width:56ch}
.cookies a{color:var(--marca); font-weight:600}
.cookies-btns{display:flex; gap:9px; flex:none}
.cookies-btns .btn{padding:10px 20px; font-size:.88rem}
@media (max-width:560px){ .cookies-btns{width:100%} .cookies-btns .btn{flex:1; justify-content:center} }

/* En celular la frase y el botón caben mal en un renglón: se apilan y se
   centran para que el botón quede a la vista y no pegado a una orilla. */
@media (max-width:560px){
  .hero-cta{flex-direction:column; text-align:center; gap:14px}
  /* A ancho completo y con más cuerpo: en el teléfono es el único botón de
     esta zona y compite con la foto de arriba. */
  .hero-cta-link{align-self:stretch; justify-content:center; width:100%;
    flex:none; padding-block:16px; font-size:1.02rem; letter-spacing:.07em;
    box-shadow:0 6px 18px -8px color-mix(in srgb, var(--vino) 70%, transparent)}
  .hero-cta-link svg{width:17px; height:17px}
}
/* ---------- landing de anuncios ---------- */
.ads-hero{padding-block:clamp(30px,5vw,58px) clamp(24px,3vw,38px); max-width:62ch}
.ads-hero h1{font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.05; margin-block:12px 16px}
.ads-hero .lede{font-size:1.06rem; color:var(--ink-2); margin:0 0 24px}
.ads-cta{margin-bottom:26px}
.ads-add{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; text-align:center}
.ads-pie{display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; justify-content:space-between; padding-block:clamp(26px,3vw,38px)}
.ads-pie p{margin:0; max-width:64ch; color:var(--ink-2); font-size:.9rem}
.ads-pie nav{display:flex; flex-wrap:wrap; gap:8px 20px}
.ads-pie a{color:var(--ink-2); text-decoration:none; font-size:.9rem; font-weight:600}
.ads-pie a:hover{color:var(--marca)}
.ads-ayuda{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,38px); text-align:center}
.ads-ayuda h2{margin:0 0 10px}
.ads-ayuda p{margin:0 auto 22px; max-width:52ch; color:var(--ink-2)}
.ads-ayuda .ads-cta{margin-bottom:0}
.grupo-portada{margin-top:28px}
.grupo-portada h3{font-size:clamp(1.3rem,2.6vw,1.8rem); margin:0 0 18px}
/* Arriba del catálogo el espacio va abajo, para separarlo del título. */
.grupo-catalogo{margin:0 0 34px}

/* ---------- menú Categorías de la cabecera ---------- */
.cat-wrap{position:relative}
.cat-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:250px; z-index:45; display:flex; flex-direction:column; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.cat-menu a{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:11px 12px; border-radius:10px; text-decoration:none; font-weight:600; color:var(--ink)}
.cat-menu a b{font-size:.82rem; color:var(--ink-3)}
.cat-menu a:hover,.cat-menu a:focus-visible{background:var(--surface-2); outline:none}
.result-line{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 90px)}
#verTodos{margin-left:auto}
/* En celular no caben el nombre, "Categorías" y "Carrito" en un renglón: el
   nombre se partía en dos y se encimaba con el botón. Ahí los dos botones
   quedan solo con su ícono (el texto sigue para lectores de pantalla). */
.brand-name{white-space:nowrap}
@media (max-width:560px){
  .site-header .wrap{gap:12px}
  .cat-txt,.cart-txt{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
  #catBtn,#cartBtn{padding:9px 12px}
}

/* Gracias: el paso que falta (mandar la dirección) tiene que verse como paso. */
.gracias-paso{margin:22px 0; padding:20px 22px; border:2px solid var(--marca); border-radius:var(--radius); background:var(--marca-suave)}
.gracias-paso h2{margin-top:0}
.gracias-dir{white-space:pre-line; font-weight:600; line-height:1.55; margin:0 0 12px}
.gracias-corrige{margin:0; font-size:.88rem; color:var(--ink-2)}

/* Página de entrega local con pago contra entrega (guadalajara.html). */
.local-pasos{list-style:none; counter-reset:paso; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.local-pasos li{counter-increment:paso; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; color:var(--ink-2); font-size:.95rem}
.local-pasos li::before{content:counter(paso); display:grid; place-items:center; width:30px; height:30px; border-radius:999px; background:var(--marca); color:#fff; font-weight:700; margin-bottom:10px}
.local-pasos b{color:var(--ink)}
.local-pago{border:1px solid var(--line-2); border-radius:10px; padding:10px 14px; margin:0; display:flex; gap:22px; flex-wrap:wrap}
.local-pago legend{font-size:.8rem; font-weight:600; color:var(--ink-2); padding:0 6px}
.local-pago label{display:inline-flex; align-items:center; gap:8px; font-size:.95rem}
.local-pago input{accent-color:var(--marca); width:18px; height:18px}
.local-enviar{width:100%; justify-content:center; padding-block:15px; display:inline-flex; align-items:center; gap:9px}
.local-ir{gap:8px; text-decoration:none}
@media (max-width:860px){
  .local-pasos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){ .local-pasos{grid-template-columns:1fr} }
.local-foto{width:100%; border:0; border-bottom:1px solid var(--line); font:inherit; cursor:zoom-in; border-radius:0}
.local-foto img{transition:transform .2s ease}
.local-foto:hover img{transform:scale(1.03)}
.local-lupa{position:absolute; right:10px; bottom:10px; display:grid; place-items:center; width:32px; height:32px; border-radius:999px; background:var(--surface); color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.15)}
.card .local-add{margin-top:auto}
/* Vista previa bajo "Mi pedido" al añadir: dice dónde seguir. */
.header-actions{position:relative}
.local-previa{position:absolute; top:calc(100% + 10px); right:0; z-index:65; width:min(290px, calc(100vw - 32px)); display:flex; flex-direction:column; gap:3px; text-align:left; padding:13px 15px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); box-shadow:0 10px 30px rgba(26,20,19,.18); font:inherit; cursor:pointer}
.local-previa::before{content:""; position:absolute; top:-7px; right:34px; width:12px; height:12px; background:var(--surface); border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg)}
.local-previa.on{animation:local-entra .22s ease}
.local-previa-ok{font-weight:700; font-size:.9rem}
.local-previa-tot{font-size:.82rem; color:var(--ink-2)}
.local-previa-ir{margin-top:4px; font-weight:700; font-size:.88rem; color:var(--marca)}
@keyframes local-entra{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.local-salto{animation:local-salto .5s ease}
@keyframes local-salto{0%,100%{transform:none}30%{transform:scale(1.12)}60%{transform:scale(.96)}}
/* Foto en grande con el detalle del producto. */
.local-modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px; background:rgba(26,20,19,.6)}
.local-modal-caja{position:relative; width:min(860px,100%); max-height:calc(100vh - 32px); overflow:auto; display:grid; grid-template-columns:1fr 1fr; background:var(--surface); border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.35)}
.local-modal-foto{background:#fff; display:grid; place-items:center; padding:16px}
.local-modal-foto img{width:100%; height:auto; display:block}
.local-modal-txt{padding:26px 24px 24px; display:flex; flex-direction:column; gap:10px}
.local-modal-txt h3{margin:0; font-size:1.5rem; padding-right:36px}
.local-modal-desc{margin:0; color:var(--ink-2)}
.local-modal-info{font-size:.9rem; color:var(--ink-2)}
.local-modal-info h4{margin:12px 0 4px; font-size:.92rem; color:var(--ink)}
.local-modal-info p{margin:0 0 6px}
.local-modal-info ul{margin:0 0 6px; padding-left:18px}
.local-modal-x{position:absolute; top:10px; right:10px; z-index:1; background:var(--surface)}
@media (max-width:700px){
  .local-modal-caja{grid-template-columns:1fr}
  .local-modal-foto{max-height:46vh}
  .local-modal-foto img{max-height:calc(46vh - 32px); width:auto; max-width:100%}
}
.local-modal-ficha{text-align:center; font-weight:700; font-size:.9rem; color:var(--marca)}
.local-volver{text-align:center; margin:30px 0 10px}