/* ============================================================
   TecnoCity SV — hoja de estilos
   Paleta derivada del logo y de los flyers reales del cliente.
   Mobile-first. Sin desbordes horizontales.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:#09090B;
  --ink-2:#0E0E12;
  --surface:#141419;
  --surface-2:#1B1B22;

  --line:rgba(229,185,60,.16);
  --line-soft:rgba(255,255,255,.08);

  --gold:#E5B93C;        /* oro de marca */
  --gold-b:#FFCE1F;      /* amarillo de precio (sus flyers) */
  --gold-s:#E3D99A;      /* oro pálido del logo */
  --red:#E11D2E;         /* solo etiqueta "precio especial" */
  --wa:#25D366;

  --text:#F4F1E8;        /* 16.4:1 sobre --ink */
  --muted:#A6A6B0;       /* 7.7:1 sobre --ink */

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;
  --nav-h:64px;
  --pad:clamp(20px,5vw,48px);
  --sp:clamp(64px,9vw,132px);       /* ritmo vertical entre secciones */
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px -24px rgba(0,0,0,.9);
}
@media (min-width:900px){ :root{ --nav-h:76px; } }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
html,body{ max-width:100%; overflow-x:clip; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3{ margin:0; font-family:Archivo,system-ui,sans-serif; line-height:1.08; letter-spacing:-.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:#09090B; }

/* ---------- Ajustes para iOS y Android ----------
   Sin esto: destello gris al tocar en Android, retardo de 300 ms en algunos
   navegadores, scroll que se "escapa" al fondo con overlays abiertos, y texto
   pegado al borde en los iPhone con notch en horizontal. */
html{ -webkit-tap-highlight-color:rgba(229,185,60,.18); }
button,.btn,a,label,select,summary{ touch-action:manipulation; }
.mmenu,.lbox{ overscroll-behavior:contain; }
.wrap,.nav__in,.mmenu__in{
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}
input,textarea{ -webkit-appearance:none; appearance:none; border-radius:var(--r-sm); }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold-b);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:absolute; left:12px; top:-100px; z-index:200;
  background:var(--gold-b); color:#09090B; font-weight:700;
  padding:12px 18px; border-radius:10px; transition:top .2s;
}
.skip-link:focus{ top:12px; }

.wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Tipografía ---------- */
.h1{ font-size:clamp(2.15rem,7.4vw,4.15rem); font-weight:800; }
/* Entre 900 y 1180 px el hero ya es de dos columnas: el titular necesita
   una escala menor o se parte en cuatro líneas. */
@media (min-width:900px) and (max-width:1180px){ .h1{ font-size:clamp(2.4rem,3.4vw,3.3rem); } }
.h2{ font-size:clamp(1.72rem,4.6vw,2.9rem); font-weight:700; }
.grad{
  display:block;
  background:linear-gradient(96deg,var(--gold-b) 0%,var(--gold) 45%,var(--gold-s) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{ font-size:clamp(1.02rem,2.2vw,1.18rem); color:var(--muted); max-width:52ch; }
.kicker{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.82rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--gold);
  margin-bottom:14px;
}
.muted-s{ color:var(--muted); font-size:.93rem; margin-top:6px; }
.link{ color:var(--gold-b); font-weight:600; border-bottom:1px solid rgba(255,206,31,.35);
  cursor:pointer; display:inline-block; padding-block:10px; }
.link:hover{ border-bottom-color:var(--gold-b); }

/* ---------- Botones ---------- */
.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--bh); padding:0 22px;
  border:1px solid transparent; border-radius:999px;
  font-family:Archivo,sans-serif; font-weight:700; font-size:.97rem; letter-spacing:.005em;
  cursor:pointer; text-align:center;
  transition:transform .22s var(--ease), background .22s, border-color .22s, box-shadow .22s;
  max-width:100%;
}
.btn svg{ width:20px; height:20px; flex:0 0 auto; }
.btn span{ min-width:0; }
.btn--gold{
  background:linear-gradient(180deg,var(--gold-b),var(--gold));
  color:#09090B;
  box-shadow:0 10px 30px -12px rgba(229,185,60,.65);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(229,185,60,.8); }
.btn--ghost{
  background:rgba(255,255,255,.035);
  border-color:var(--line);
  color:var(--text);
}
.btn--ghost:hover{ background:rgba(229,185,60,.1); border-color:var(--gold); transform:translateY(-2px); }
.btn--ghost svg{ width:18px; height:18px; color:var(--gold); }
.btn--sm{ --bh:44px; padding:0 18px; font-size:.9rem; }
.btn--sm svg{ width:17px; height:17px; }
.btn--lg{ --bh:58px; font-size:1.03rem; }
.btn--block{ display:flex; width:100%; }
.btn:active{ transform:translateY(0) scale(.985); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--nav-h);
  background:rgba(9,9,11,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
.nav.is-stuck{ background:rgba(9,9,11,.94); border-bottom-color:var(--line-soft); }
.nav__in{
  height:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; margin-right:auto;
  min-height:44px; padding-block:5px; }
.brand__mark{ width:auto; height:34px; flex:0 0 auto; }
.brand__txt{ display:flex; flex-direction:column; min-width:0; }
.brand__name{
  font-family:Archivo,sans-serif; font-weight:800; font-size:1.02rem;
  line-height:1.1; letter-spacing:-.01em; color:var(--text); white-space:nowrap;
}
.brand__name em{ font-style:normal; color:var(--gold); }
.brand__tag{
  font-size:.7rem; line-height:1.2; color:var(--muted);
  letter-spacing:.04em; white-space:nowrap;
  display:none;
}
.nav__links{ display:none; }
.nav__cta{ display:none; }

.burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; flex:0 0 auto;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  border-radius:12px; cursor:pointer;
}
.burger span{ display:block; height:2px; width:100%; background:var(--text); border-radius:2px; transition:transform .28s var(--ease), opacity .18s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Panel a pantalla completa: si no, se ve el hero por debajo y parecen
   dos botones dorados duplicados. */
.mmenu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:89;
  background:var(--ink);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:mIn .26s var(--ease);
}
@keyframes mIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.mmenu__in{
  display:flex; flex-direction:column; gap:2px;
  min-height:100%; padding:12px var(--pad) calc(28px + env(safe-area-inset-bottom));
  max-width:1200px; margin-inline:auto;
}
.mmenu__in > a:not(.btn){
  font-family:Archivo,sans-serif; font-weight:600; font-size:1.08rem;
  padding:15px 4px; border-bottom:1px solid rgba(255,255,255,.06);
}
.mmenu__in > a:not(.btn):hover{ color:var(--gold); }
.mmenu__in .btn{ margin-top:22px; }
.mmenu__foot{
  margin-top:auto; padding-top:26px;
  display:flex; flex-direction:column; gap:8px;
  font-size:.9rem; color:var(--muted);
}
.mmenu__foot b{ display:block; color:var(--gold); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:2px; }
.mmenu__foot a{ color:var(--muted); display:inline-block; padding-block:7px; }
.mmenu__soc{ display:flex; gap:18px; margin-top:6px; }
.mmenu__soc a{ color:var(--gold-s); font-weight:600; padding-block:8px; display:inline-block; }

@media (min-width:980px){
  .brand__mark{ height:42px; }
  .nav__links{ display:flex; align-items:center; gap:clamp(16px,2vw,30px); }
  .nav__links a{ font-size:.94rem; font-weight:500; color:var(--muted); position:relative; padding:11px 0; white-space:nowrap; }
  .nav__links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:6px; height:1.5px;
    background:var(--gold); transition:right .3s var(--ease);
  }
  .nav__links a:hover{ color:var(--text); }
  .nav__links a:hover::after{ right:0; }
  .nav__cta{ display:inline-flex; }
  .burger{ display:none; }
  .mmenu{ display:none !important; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:calc(var(--nav-h) + clamp(40px,9vw,86px)); padding-bottom:clamp(48px,8vw,96px); overflow:clip; }
.hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(140vw,1100px); aspect-ratio:1; left:50%; top:-16%;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(229,185,60,.20) 0%,rgba(229,185,60,.07) 34%,transparent 68%);
}
.hero__in{ position:relative; z-index:1; display:grid; gap:clamp(36px,7vw,56px); }
.hero__copy{ display:flex; flex-direction:column; align-items:flex-start; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  background:rgba(229,185,60,.06);
  font-size:.86rem; font-weight:500; color:var(--gold-s);
  margin-bottom:20px; max-width:100%;
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-b); flex:0 0 auto; box-shadow:0 0 0 0 rgba(255,206,31,.6); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(255,206,31,0); } 100%{ box-shadow:0 0 0 0 rgba(255,206,31,0); } }

.h1{ margin-bottom:18px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; width:100%; }
.hero__cta .btn{ flex:1 1 240px; }

.stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 18px;
  margin-top:36px; padding-top:26px; border-top:1px solid var(--line-soft); width:100%;
}
@media (min-width:520px){ .stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 26px; } }
.stats li{ display:flex; flex-direction:column; gap:2px; }
.stats__n{ font-family:Archivo,sans-serif; font-weight:800; font-size:clamp(1.5rem,4.4vw,2rem); color:var(--gold-b); line-height:1; display:flex; align-items:baseline; gap:3px; }
.stars{ font-size:.72em; color:var(--gold); }
.stats__l{ font-size:.86rem; color:var(--muted); line-height:1.35; }

/* escenario de producto */
.hero__stage{ position:relative; display:grid; place-items:center; min-height:min(58vw,330px); }
.stage__ring{
  position:absolute; width:min(78vw,360px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(229,185,60,.22),rgba(229,185,60,.05) 55%,transparent 72%);
  border:1px solid rgba(229,185,60,.14);
}
.stage__main{ position:relative; width:min(74vw,340px); height:auto; filter:drop-shadow(0 30px 45px rgba(0,0,0,.75)); }
.stage__chip{ display:none; }

/* Tablet: el escenario todavía va apilado, pero con más presencia */
@media (min-width:620px) and (max-width:899.98px){
  .hero__stage{ min-height:440px; }
  .stage__ring{ width:430px; }
  .stage__main{ width:400px; }
}

@media (min-width:900px){
  .hero__in{ grid-template-columns:1.06fr .94fr; align-items:center; gap:40px; }
  .hero__cta .btn{ flex:0 1 auto; }
  .hero__stage{ min-height:520px; }
  .stage__ring{ width:min(36vw,460px); }
  .stage__main{ width:min(34vw,430px); }
  .stage__chip{
    display:inline-block; position:absolute;
    padding:10px 16px; border-radius:999px;
    background:rgba(20,20,25,.92); border:1px solid var(--line);
    backdrop-filter:blur(8px); box-shadow:0 10px 26px -14px rgba(0,0,0,.9);
    font-size:.82rem; font-weight:600; color:var(--gold-s); white-space:nowrap;
  }
  .stage__chip--a{ right:0; top:10%; }
  .stage__chip--b{ left:0; bottom:12%; }
}

/* ---------- Marquee ---------- */
.marq{
  overflow:hidden; border-block:1px solid var(--line-soft);
  background:linear-gradient(90deg,rgba(229,185,60,.05),transparent 30%,transparent 70%,rgba(229,185,60,.05));
  padding-block:16px;
}
.marq__track{ display:flex; width:max-content; will-change:transform; animation:marq 42s linear infinite; }
.marq__set{ display:flex; align-items:center; gap:26px; padding-right:26px; flex:0 0 auto; }
.marq__set span{
  font-family:Archivo,sans-serif; font-weight:700;
  font-size:clamp(.95rem,2.4vw,1.28rem); letter-spacing:-.01em;
  color:var(--text); white-space:nowrap;
}
.marq__set i{ color:var(--gold); font-style:normal; font-size:.6em; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marq:hover .marq__track{ animation-play-state:paused; }

/* ---------- Secciones ---------- */
.sec{ padding-block:var(--sp); }
.sec--alt{ background:var(--ink-2); border-block:1px solid var(--line-soft); }
.sec__head{ max-width:62ch; margin-bottom:clamp(34px,5vw,58px); }
.sec__sub{ margin-top:16px; color:var(--muted); font-size:clamp(1rem,2vw,1.1rem); }
.sec__sub b{ color:var(--text); font-weight:600; }

/* ---------- Filtros de categoría ---------- */
.sec__count{ display:block; margin-top:8px; font-size:.9rem; color:var(--gold-s); font-weight:600; }

.chips{
  display:flex; flex-wrap:wrap; gap:9px;
  margin:0 0 clamp(22px,3.4vw,34px);
}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  min-height:42px; padding:0 15px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  border-radius:999px; cursor:pointer;
  font-family:Archivo,sans-serif; font-weight:600; font-size:.9rem;
  color:var(--muted); white-space:nowrap;
  transition:background .22s, border-color .22s, color .22s, transform .22s var(--ease);
}
.chip span{
  display:inline-grid; place-items:center; min-width:21px; height:21px; padding:0 5px;
  border-radius:999px; background:rgba(255,255,255,.07);
  font-size:.74rem; font-weight:700; color:var(--muted);
}
.chip:hover{ color:var(--text); border-color:var(--line); transform:translateY(-1px); }
.chip.is-on{ background:var(--gold); border-color:var(--gold); color:#09090B; }
.chip.is-on span{ background:rgba(9,9,11,.18); color:#09090B; }
.card[hidden]{ display:none !important; }

/* ---------- Grid de productos ---------- */
/* En teléfono van 2 columnas: con 32 productos en una sola columna el scroll
   se hacía eterno. Las tarjetas se compactan para que quepan bien. */
.grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:600px){ .grid{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (min-width:1000px){ .grid{ grid-template-columns:repeat(3,1fr); gap:24px; } }

.tf[hidden], .fly[hidden], .rev[hidden]{ display:none !important; }

.grid__more{ margin-top:20px; }
.grid__more .btn{ --bh:54px; }
@media (min-width:600px){ .grid__more{ display:flex; justify-content:center; } .grid__more .btn{ width:auto; min-width:280px; } }
.grid__more svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.grid__more .btn.is-open svg{ transform:rotate(180deg); }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  overflow:hidden; transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.card:hover{ border-color:var(--line); transform:translateY(-4px); box-shadow:var(--shadow); }
.card--feat{ border-color:var(--line); }

/* Alto fijo + imagen absoluta: así `contain` siempre tiene una caja definida
   (con `height:100%` dentro de grid el porcentaje queda indefinido y desborda). */
.card__media{
  position:relative; overflow:hidden;
  height:270px;
  background:radial-gradient(120% 90% at 50% 22%,rgba(229,185,60,.13),transparent 62%),var(--surface-2);
  border-bottom:1px solid var(--line-soft);
}
.card__media img{
  position:absolute; top:18px; left:18px;
  width:calc(100% - 36px); height:calc(100% - 36px);
  object-fit:contain; object-position:center;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.6));
  transition:transform .45s var(--ease);
}
.card:hover .card__media img{ transform:translateY(-4px); }   /* sin zoom: el zoom recortaba el producto */
@media (min-width:600px){ .card__media{ height:300px; } }

.tag{
  position:absolute; z-index:2; top:12px; left:12px;
  padding:6px 13px; border-radius:999px;
  font-family:Archivo,sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--gold-b); color:#09090B;
}
.tag--red{ background:var(--red); color:#fff; }

.card__body{ display:flex; flex-direction:column; flex:1; padding:20px; gap:10px; }
.card__cat{ font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.card__title{ font-size:1.12rem; font-weight:700; line-height:1.22; }
.card__specs{ display:flex; flex-direction:column; gap:6px; margin-top:2px; }
.card__specs li{ position:relative; padding-left:18px; font-size:.94rem; color:var(--muted); line-height:1.45; }
.card__specs li::before{
  content:""; position:absolute; left:2px; top:.6em;
  width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.85;
}
.card__spec{
  font-size:.93rem; line-height:1.5; color:var(--muted);
  margin-top:2px; margin-bottom:16px;
}
.card__body > .btn{ margin-top:auto; }
.card__foot{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft);
}
.price{ font-family:Archivo,sans-serif; font-weight:800; font-size:2rem; line-height:1; color:var(--gold-b); }
.price__cur{ font-size:.55em; vertical-align:.42em; margin-right:1px; }
.card__foot .btn{ flex:0 0 auto; }

.grid__note{ margin-top:30px; color:var(--muted); font-size:.98rem; }

/* ---------- Reservar ---------- */
.resv{ display:grid; gap:clamp(34px,6vw,60px); }
@media (min-width:960px){ .resv{ grid-template-columns:1fr 1fr; align-items:start; gap:60px; } }
.resv__points{ display:flex; flex-direction:column; gap:12px; margin-top:28px; }
.resv__points li{ display:flex; align-items:flex-start; gap:12px; font-size:.98rem; }
.resv__points svg{ width:19px; height:19px; flex:0 0 auto; margin-top:3px; color:var(--gold-b); }

.resv__form{
  display:flex; flex-direction:column; gap:16px;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-xl); padding:clamp(20px,4.5vw,32px);
}
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field label{ font-size:.87rem; font-weight:600; color:var(--gold-s); }
.field .opt{ color:var(--muted); font-weight:400; }
.field input,.field select,.field textarea{
  width:100%; min-height:50px; padding:12px 14px;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-sm);
  font-size:16px; /* evita el zoom automático en iOS */
  transition:border-color .2s, background .2s;
}
.field textarea{ min-height:92px; resize:vertical; line-height:1.5; }
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5B93C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
.field input::placeholder,.field textarea::placeholder{ color:#7B7B85; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold); background:#20202899; outline-offset:1px; }
.field-row{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:440px){ .field-row{ grid-template-columns:.72fr 1fr; } }
.field.has-err input,.field.has-err select{ border-color:#F0616F; }
.err{ font-size:.87rem; color:#F0616F; }
.resv__legal{ font-size:.88rem; color:var(--muted); text-align:center; margin-top:2px; }

/* ---------- Beneficios ---------- */
.bens{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:620px){ .bens{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (min-width:1000px){ .bens{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.ben{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:clamp(22px,3.4vw,28px);
  transition:border-color .3s, transform .3s var(--ease);
}
.ben:hover{ border-color:var(--line); transform:translateY(-3px); }
.ben__ic{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:16px;
  border-radius:13px; background:rgba(229,185,60,.11); border:1px solid var(--line); color:var(--gold-b);
}
.ben__ic svg{ width:23px; height:23px; }
.ben h3{ font-size:1.09rem; font-weight:700; margin-bottom:8px; }
.ben p{ color:var(--muted); font-size:.97rem; }

/* ---------- Opiniones ---------- */
.rate{ display:inline-flex; align-items:center; gap:8px; margin-right:8px; }
.rate__n{ font-family:Archivo,sans-serif; font-weight:800; font-size:1.35rem; color:var(--gold-b); }
.rate__st{ color:var(--gold); letter-spacing:2px; }

.revs{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:620px){ .revs{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (min-width:1000px){ .revs{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.rev{
  margin:0; display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:clamp(20px,3.2vw,26px);
  transition:border-color .3s, transform .3s var(--ease);
}
.rev:hover{ border-color:var(--line); transform:translateY(-3px); }
.rev__st{ color:var(--gold-b); letter-spacing:2px; font-size:.98rem; }
.rev blockquote{ margin:0; font-size:1rem; line-height:1.6; color:var(--text); }
.rev figcaption{ display:flex; flex-direction:column; margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft); font-weight:600; font-size:.94rem; }
.rev figcaption span{ font-weight:400; font-size:.85rem; color:var(--muted); }

/* ---------- En tienda (fotos reales del local) ----------
   Mampostería por columnas: cada foto se ve COMPLETA, con su proporción real.
   Con `cover` y alto fijo se recortaban las horizontales. */
.tienda{ columns:2; column-gap:12px; }
@media (min-width:700px){ .tienda{ columns:3; column-gap:16px; } }
@media (min-width:1050px){ .tienda{ columns:4; column-gap:18px; } }

.tf{
  position:relative; display:block; margin:0 0 12px; break-inside:avoid;
  border:1px solid var(--line-soft); border-radius:var(--r);
  overflow:hidden; background:var(--surface);
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
@media (min-width:700px){ .tf{ margin-bottom:16px; } }
@media (min-width:1050px){ .tf{ margin-bottom:18px; } }
.tf img{ width:100%; height:auto; display:block; }
.tf:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow); }
.tf figcaption{
  position:absolute; inset:auto 0 0 0; z-index:1;
  padding:30px 12px 11px;
  background:linear-gradient(to top,rgba(6,6,8,.95) 14%,rgba(6,6,8,.74) 58%,transparent);
  font-size:.86rem; font-weight:600; line-height:1.3; color:var(--text);
}
@media (min-width:700px){ .tf figcaption{ font-size:.92rem; padding:34px 15px 13px; } }

/* ---------- Ofertas / flyers ---------- */
/* Las promociones se ven ENTERAS: alto natural, sin recorte por `cover`. */
.flyers{ columns:2; column-gap:12px; }
@media (min-width:700px){ .flyers{ columns:3; column-gap:16px; } }
@media (min-width:1050px){ .flyers{ column-gap:20px; } }
.fly{
  position:relative; display:block; width:100%; margin:0 0 12px; padding:0;
  break-inside:avoid; border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden; background:var(--surface); cursor:zoom-in;
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
@media (min-width:700px){ .fly{ margin-bottom:16px; } }
@media (min-width:1050px){ .fly{ margin-bottom:20px; } }
.fly img{ width:100%; height:auto; display:block; }
.fly:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow); }

.socials{ display:grid; gap:12px; grid-template-columns:1fr; margin-top:26px; }
@media (min-width:620px){ .socials{ grid-template-columns:repeat(3,1fr); } }
.soc{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  transition:border-color .3s, transform .3s var(--ease);
}
.soc:hover{ border-color:var(--gold); transform:translateY(-3px); }
.soc svg{ width:24px; height:24px; flex:0 0 auto; color:var(--gold); }
.soc span{ display:flex; flex-direction:column; font-size:.89rem; color:var(--muted); min-width:0; }
.soc b{ font-family:Archivo,sans-serif; font-size:1rem; color:var(--text); }

/* ---------- Ubicación ---------- */
.loc{ display:grid; gap:22px; }
@media (min-width:960px){ .loc{ grid-template-columns:1.15fr .85fr; gap:30px; align-items:stretch; } }
.loc__map{
  position:relative; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface); min-height:320px;
}
.loc__map iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:grayscale(.3) contrast(1.05) brightness(.97);
}
@media (min-width:960px){ .loc__map{ min-height:460px; } }

.loc__info{
  display:flex; flex-direction:column; gap:24px;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:clamp(22px,4vw,32px);
}
.loc__list{ display:flex; flex-direction:column; gap:22px; }
.loc__list li{ display:flex; gap:14px; }
.loc__ic{
  display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto;
  border-radius:11px; background:rgba(229,185,60,.11); border:1px solid var(--line); color:var(--gold-b);
}
.loc__ic svg{ width:20px; height:20px; }
.loc__list h3{ font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.loc__list p{ font-size:.98rem; line-height:1.55; }
.loc__list p a.link{ padding-block:9px; font-size:1.05rem; }
.loc__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.loc__cta .btn{ flex:1 1 190px; }

/* ---------- Footer ---------- */
.foot{ background:var(--ink-2); border-top:1px solid var(--line-soft); padding-top:clamp(48px,7vw,80px); }
.foot__in{ display:grid; gap:34px; grid-template-columns:1fr; }
@media (min-width:640px){ .foot__in{ grid-template-columns:repeat(2,1fr); gap:36px 30px; } }
@media (min-width:1000px){ .foot__in{ grid-template-columns:1.5fr 1fr 1.2fr 1fr; gap:40px; } }
.foot__brand img{ width:112px; height:auto; margin-bottom:16px; }
.foot__brand p{ color:var(--muted); font-size:.94rem; max-width:34ch; }
.foot__col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.foot__col h3{ font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.foot__col a{ color:var(--muted); font-size:.95rem; cursor:pointer; transition:color .2s;
  padding-block:8px; min-height:40px; display:flex; align-items:center; }
.foot__col a:hover{ color:var(--gold-b); }
.foot__addr{ color:var(--muted); font-size:.93rem; line-height:1.55; margin-top:4px; }
.foot__bar{
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
  margin-top:clamp(38px,5vw,56px); padding-block:22px;
  border-top:1px solid var(--line-soft);
  color:var(--muted); font-size:.89rem;
}
.foot__bar a{ color:var(--muted); display:inline-block; padding-block:11px; }
.foot__bar a:hover{ color:var(--gold-b); }

/* ---------- Burbuja WhatsApp ---------- */
.wafab{
  position:fixed; z-index:80;
  right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom));
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:50%; background:var(--wa); color:#fff; cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transform:translateY(90px); opacity:0;
  transition:transform .4s var(--ease), opacity .3s, box-shadow .3s;
}
.wafab.is-on{ transform:translateY(0); opacity:1; }
.wafab:hover{ box-shadow:0 16px 38px -8px rgba(37,211,102,.8); }
.wafab svg{ width:30px; height:30px; }
@media (min-width:900px){ .wafab{ width:60px; height:60px; right:26px; bottom:26px; } }

/* ---------- Lightbox ---------- */
/* [hidden] debe ganarle a display:flex — si no, el overlay tapa la página */
.lbox[hidden], .mmenu[hidden]{ display:none !important; }
.lbox{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center; gap:clamp(4px,2vw,18px);
  padding:clamp(14px,4vw,40px);
  background:rgba(6,6,8,.95); backdrop-filter:blur(8px);
  animation:fadeIn .22s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.lbox__fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0; max-height:100%; }
.lbox__fig img{
  max-width:100%; max-height:calc(100dvh - 150px);
  width:auto; border-radius:var(--r); border:1px solid var(--line-soft);
}
.lbox__fig figcaption{ color:var(--gold-s); font-size:.94rem; text-align:center; max-width:44ch; }
.lbox__x{
  position:absolute; top:max(12px,env(safe-area-inset-top)); right:14px;
  width:46px; height:46px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid var(--line-soft);
  border-radius:50%; color:var(--text); cursor:pointer;
}
.lbox__x:hover{ background:rgba(229,185,60,.18); border-color:var(--gold); }
.lbox__nav{
  width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line-soft);
  border-radius:50%; color:var(--text); cursor:pointer;
}
.lbox__nav:hover{ background:rgba(229,185,60,.18); border-color:var(--gold); }
.lbox__nav svg{ width:22px; height:22px; }
.lbox__nav--next svg{ transform:rotate(180deg); }
@media (max-width:600px){
  .lbox__nav{ position:absolute; bottom:max(18px,env(safe-area-inset-bottom)); }
  .lbox__nav--prev{ left:22%; }
  .lbox__nav--next{ right:22%; }
  .lbox__fig img{ max-height:calc(100dvh - 190px); }
}
body.no-scroll{ overflow:hidden; }

/* ---------- Reveal ----------
   Solo se oculta si JS está vivo (clase .js en <html>). Si el JS falla o el CDN
   está bloqueado, el contenido se ve igual: nunca queda una sección invisible. */
.js [data-rv]{ opacity:0; transform:translateY(22px); }
.js [data-rv].rv-done{ opacity:1; transform:none; }

/* ---------- Compactado para teléfono ----------
   Sin esto la página eran 18 pantallas de scroll. */
@media (max-width:599px){
  /* tarjeta de producto compacta: a 2 columnas medía 535 px de alto */
  .card__media{ height:150px; }
  .card__media img{ top:12px; left:12px; width:calc(100% - 24px); height:calc(100% - 24px); }
  .card__body{ padding:13px 13px 14px; gap:5px; }
  .card__cat{ font-size:.79rem; letter-spacing:.1em; }
  .card__title{ font-size:.94rem; line-height:1.25; }
  .card__spec{
    font-size:.83rem; line-height:1.4; margin-bottom:11px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .card__body .btn{ --bh:44px; padding:0 10px; font-size:.85rem; gap:7px; }
  .card__body .btn svg{ width:16px; height:16px; }
  .btn__more{ display:none; }        /* "Consultar" en vez de "Consultar precio" */

  .ben{ padding:16px 14px; }
  .ben__ic{ width:38px; height:38px; margin-bottom:11px; border-radius:11px; }
  .ben__ic svg{ width:19px; height:19px; }
  .ben h3{ font-size:.98rem; margin-bottom:5px; }
  .ben p{ font-size:.88rem; line-height:1.45; }

  .rev{ padding:16px 16px 18px; gap:9px; }
  .rev blockquote{ font-size:.95rem; line-height:1.5; }

  /* los 10 filtros ocupaban 5 filas: ahora una sola fila que se desliza */
  .chips{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad); padding-bottom:4px;
    scroll-snap-type:x proximity;
  }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; scroll-snap-align:start; }

  /* pie en dos columnas en vez de cuatro apiladas */
  .foot__in{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px; }
  .foot__brand{ grid-column:1 / -1; }
  .foot__brand img{ width:88px; margin-bottom:12px; }
  .foot__col a{ padding-block:10px; min-height:44px; font-size:.92rem; }
  .sec__head{ margin-bottom:26px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .marq__track{ animation:none; }
  .dot{ animation:none; }
}

/* La bajada de marca solo cuando hay espacio real en la barra */
@media (min-width:1180px){ .brand__tag{ display:block; } }