/* ==========================================================================
   LA FAVORITA — styles.css
   Tema de librería: papel cuadriculado con los colores del logo, cian y
   magenta.

   Los dos colores de la marca son muy vivos y por eso no valen para todo:
   sobre blanco, el cian da 2.5:1 de contraste y el magenta 4.25:1, o sea que
   ninguno llega al minimo legible (4.5:1) para texto normal. La regla aqui
   es sencilla:

     --cyan y --pink   ->  solo decoracion: sellos, degradados, subrayados,
                           la cuadricula del papel. Nunca texto encima.
     --blue            ->  6.2:1, para enlaces y texto.
     --pink-deep       ->  5.8:1, para botones y chips con texto blanco.

   Asi el sitio se ve como el logo sin volverse ilegible.
   ========================================================================== */

:root{
  --ink:#0a2444;
  --ink-2:#0f3560;
  --ink-soft:#33506f;
  --mute:#5a6a7d;
  --paper:#ffffff;
  --paper-2:#f2f8fc;
  --paper-3:#e2f0f9;
  --blue:#0a63a8;
  --blue-deep:#074a80;
  --cyan:#00aeef;
  --pink:#ec008c;
  --pink-deep:#c40077;
  --pink-hover:#d6007f;
  --pink-light:#ff3da5;   /* texto pequeno sobre fondo oscuro: 4.79:1 */
  --red:#e0342b;
  --green:#0f9d6a;
  --wa:#25d366;
  --line:rgba(10,36,68,.12);
  --line-2:rgba(10,36,68,.07);
  --photo-bg:#ffffff;
  --grid:rgba(0,174,239,.12);
  --ff:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-d:"Outfit","Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:16px;
  --r-lg:26px;
  --sh:0 12px 34px -18px rgba(10,36,68,.45);
  --sh-lg:0 32px 70px -34px rgba(10,36,68,.55);
  --nav-h:66px;
}
html[data-bg-tone="crema"]{ --paper-2:#faf7f0; --paper-3:#f3ede1; }
html[data-bg-tone="arena"]{ --paper-2:#f6f2ea; --paper-3:#ece5d8; }

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
img,picture,svg{ display:block; max-width:100%; }
svg{ width:1em; height:1em; }
button,input,textarea,select{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
:focus-visible{ outline:3px solid var(--pink); outline-offset:2px; border-radius:6px; }

body{
  font-family:var(--ff);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}

.wrap{ width:min(1200px,92vw); margin-inline:auto; }
section{ position:relative; }

/* --- papel cuadriculado, motivo de la marca --- */
.grid-bg{
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
}

/* --- tipografía --- */
h1,h2,h3,h4,h5{ font-family:var(--ff-d); line-height:1.12; font-weight:700; letter-spacing:-.02em; }
h2{ font-size:clamp(1.7rem,3.4vw,2.7rem); }
h3{ font-size:1.15rem; }
p{ color:var(--ink-soft); }

.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--ff-d); font-weight:600; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  margin-bottom:.7rem;
}
.kicker::before{ content:""; width:22px; height:3px; border-radius:3px; background:var(--pink); flex:none; }
.kicker.light{ color:var(--pink-light); }
.kicker.light::before{ background:var(--pink); }

.section-head{ text-align:center; margin-bottom:2.4rem; }
.section-head h2{ margin-top:.1rem; }
.section-head p{ max-width:60ch; margin:.8rem auto 0; color:var(--mute); }

/* --- botones --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--ff-d); font-weight:600; font-size:.95rem;
  padding:.78em 1.5em; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .2s, color .2s;
  white-space:nowrap;
}
.btn svg{ width:1.15em; height:1.15em; }
.btn:hover{ transform:translateY(-2px); }
.btn-pink{ background:var(--pink-deep); color:#fff; box-shadow:0 12px 26px -14px rgba(196,0,119,.9); }
.btn-pink:hover{ background:var(--pink-hover); }
.btn-wa{ background:var(--wa); color:#04331a; box-shadow:0 12px 26px -14px rgba(37,211,102,.9); }
.btn-wa:hover{ background:#31e274; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--ink-2); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-ghost.light{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn-ghost.light:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

/* ==========================================================================
   SPLASH
   ========================================================================== */
.splash{
  position:fixed; inset:0; z-index:200; display:grid; place-content:center;
  background:var(--ink);
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:26px 26px;
  transition:opacity .5s var(--ease), visibility .5s;
}
.splash.is-out{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-mark{ text-align:center; color:#fff; }
.splash-mark .m{ font-family:var(--ff-d); font-weight:800; font-size:clamp(1.6rem,6vw,2.6rem); letter-spacing:.06em; }
.splash-mark .m b{ color:var(--pink); }
.splash-mark .s{ font-size:.85rem; color:rgba(255,255,255,.6); margin-top:.3rem; letter-spacing:.08em; }
.splash-bar{ width:150px; height:3px; border-radius:3px; background:rgba(255,255,255,.16); margin:1.2rem auto 0; overflow:hidden; }
.splash-bar::after{ content:""; display:block; width:40%; height:100%; background:var(--pink); animation:splashRun 1.1s var(--ease) infinite; }
@keyframes splashRun{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(360%); } }

/* ==========================================================================
   TOPBAR + NAV
   ========================================================================== */
.topbar{ background:var(--ink); color:#fff; font-size:.78rem; }
.topbar-in{
  width:min(1200px,92vw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:36px; padding:.3rem 0;
}
.tb-msg{ color:rgba(255,255,255,.82); }
.tb-links{ display:flex; gap:1.1rem; flex:none; }
.tb-links a{ display:inline-flex; align-items:center; gap:.35rem; color:rgba(255,255,255,.8); transition:color .2s; }
.tb-links a:hover{ color:var(--pink-light); }
.tb-links svg{ width:.95em; height:.95em; }

.nav{
  position:sticky; top:0; z-index:90;
  display:flex; align-items:center; gap:1.2rem;
  min-height:var(--nav-h);
  padding:.5rem clamp(1rem,4vw,2.4rem);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s, border-color .25s;
}
.nav.is-solid{ box-shadow:0 8px 26px -22px rgba(10,36,68,.9); border-bottom-color:var(--line-2); }

.brandmark{ display:flex; align-items:center; gap:.6rem; flex:none; }
.brandmark .seal{ width:34px; height:34px; }
.brand-logo-img{ height:36px; width:auto; object-fit:contain; }
/* Como en el logotipo: "LA" en azul y "FAVORITA" en magenta. Se usan las
   versiones oscuras de ambos porque aqui son texto sobre blanco. */
.brandmark .bn{ font-family:var(--ff-d); font-weight:800; font-size:1.02rem; letter-spacing:.05em; color:var(--blue); }
.brandmark .bn b{ color:var(--pink-deep); }

.nav-links{ display:flex; align-items:center; gap:1.35rem; margin-left:auto; }
.nav-links a.link{ position:relative; font-family:var(--ff-d); font-weight:500; font-size:.93rem; color:var(--ink-soft); padding:.2rem 0; }
.nav-links a.link::after{ content:""; position:absolute; left:0; bottom:-3px; height:3px; width:0; border-radius:3px; background:var(--pink); transition:width .25s var(--ease); }
.nav-links a.link:hover{ color:var(--ink); }
.nav-links a.link:hover::after{ width:100%; }
.menu-extra{ display:none; }

.cart-btn{
  position:relative; flex:none; display:grid; place-content:center;
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; transition:border-color .2s, transform .2s;
}
.cart-btn:hover{ border-color:var(--blue); transform:translateY(-1px); }
.cart-btn svg{ width:20px; height:20px; color:var(--ink); }
.cart-badge{
  position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--red); color:#fff; font-size:.68rem; font-weight:700;
  display:none; align-items:center; justify-content:center;
}
.cart-badge.show{ display:flex; }

.nav-burger{ display:none; flex:none; width:42px; height:42px; border:1.5px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after{
  display:block; width:18px; height:2px; border-radius:2px; background:var(--ink);
  margin-inline:auto; position:relative; transition:transform .28s var(--ease), opacity .2s;
}
.nav-burger span::before{ content:""; position:absolute; top:-6px; }
.nav-burger span::after{ content:""; position:absolute; top:6px; }
body.menu-open .nav-burger span{ background:transparent; }
body.menu-open .nav-burger span::before{ transform:translateY(6px) rotate(45deg); }
body.menu-open .nav-burger span::after{ transform:translateY(-6px) rotate(-45deg); }

.nav-overlay{ position:fixed; inset:0; z-index:80; background:rgba(10,36,68,.5); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.nav-overlay.open{ opacity:1; visibility:visible; }
body.menu-open{ overflow:hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 85% 10%, rgba(10,99,168,.55), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, #0d2350 55%, #10306c 100%);
  color:#fff;
  padding:clamp(3rem,7vw,5.4rem) clamp(1rem,4vw,2.4rem) clamp(6rem,9vw,7.5rem);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom, #000 0%, transparent 85%);
}
.hero-in{
  position:relative; width:min(1200px,100%); margin-inline:auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.hero-copy{ max-width:36rem; }
.hero-title{ font-size:clamp(2.2rem,5.6vw,4rem); font-weight:800; letter-spacing:-.03em; }
.hero-title span{ display:block; }
.hero-title mark{
  display:inline-block; background:none; color:var(--pink);
  position:relative; padding:0 .1em;
}
.hero-title mark::after{
  content:""; position:absolute; left:0; right:0; bottom:.12em; height:.28em;
  background:rgba(236,0,140,.22); border-radius:4px; z-index:-1;
}
.hero-sub{ color:rgba(255,255,255,.75); font-size:1.03rem; margin-top:1rem; max-width:44ch; }

.hero-search{
  display:flex; align-items:center; gap:.4rem;
  background:#fff; border-radius:999px; padding:.34rem .34rem .34rem 1rem;
  margin-top:1.6rem; box-shadow:var(--sh-lg); max-width:32rem;
}
.hero-search .ic{ width:20px; height:20px; color:var(--mute); flex:none; }
.hero-search input{ flex:1; min-width:0; border:0; background:transparent; padding:.7rem .2rem; color:var(--ink); }
.hero-search input::placeholder{ color:#98a1b5; }
.hero-search input:focus{ outline:none; }
.hero-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.hero-search button{
  flex:none; border:0; border-radius:999px; background:var(--blue); color:#fff;
  font-family:var(--ff-d); font-weight:600; padding:.72em 1.4em; cursor:pointer; transition:background .2s;
}
.hero-search button:hover{ background:var(--blue-deep); }

.hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:2.2rem; margin-top:2.2rem; }
.hero-stats div{ display:flex; flex-direction:column; }
.hero-stats b{ font-family:var(--ff-d); font-size:1.5rem; font-weight:700; color:var(--pink); line-height:1.1; }
.hero-stats span{ font-size:.78rem; color:rgba(255,255,255,.6); letter-spacing:.02em; }

.hero-visual{ position:relative; min-height:320px; }
.shelf{ position:relative; height:320px; }
.sh-card{
  position:absolute; width:132px; padding:1.1rem .9rem;
  background:#fff; border-radius:18px; box-shadow:var(--sh-lg);
  display:flex; flex-direction:column; gap:.55rem; color:var(--ink);
  animation:floaty 6s ease-in-out infinite;
}
.sh-card svg{ width:30px; height:30px; }
.sh-card span{ font-family:var(--ff-d); font-weight:600; font-size:.85rem; }
.sh-card.c1{ left:2%;  top:6%;   --c:var(--blue);  transform:rotate(-6deg);  animation-delay:0s; }
.sh-card.c2{ left:36%; top:0;    --c:var(--green); transform:rotate(3deg);   animation-delay:.6s; }
.sh-card.c3{ left:12%; top:44%;  --c:var(--red);   transform:rotate(4deg);   animation-delay:1.2s; }
.sh-card.c4{ left:48%; top:38%;  --c:var(--pink-deep); transform:rotate(-3deg); animation-delay:1.8s; }
.sh-card svg{ color:var(--c); }
.sh-plank{
  position:absolute; left:-4%; right:-4%; bottom:14%; height:12px; border-radius:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.08));
  box-shadow:0 18px 34px -22px rgba(0,0,0,.9);
}
@keyframes floaty{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
.hero-photo{ width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-lg); }
.hero-visual:has(.hero-photo:not([hidden])) .shelf{ display:none; }

/* ==========================================================================
   BENEFICIOS (montados sobre el hero)
   ========================================================================== */
.benefits-wrap{ padding:0 clamp(1rem,4vw,2.4rem); }
.benefits{
  width:min(1200px,100%); margin:-4.2rem auto 0; position:relative; z-index:5;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
}
.benefit{
  display:flex; gap:.85rem; align-items:flex-start;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r);
  padding:1.1rem 1.1rem; box-shadow:var(--sh);
}
.benefit-ic{ flex:none; display:grid; place-content:center; width:40px; height:40px; border-radius:12px; background:var(--paper-3); color:var(--blue); }
.benefit-ic svg{ width:20px; height:20px; }
.benefit h4{ font-size:.95rem; }
.benefit p{ font-size:.81rem; color:var(--mute); line-height:1.45; margin-top:.15rem; }

/* ==========================================================================
   CATEGORÍAS
   ========================================================================== */
.cats{ padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem); }
.cat-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.cat-tile{
  position:relative; display:flex; align-items:center; gap:.9rem;
  padding:1.15rem 1.1rem; border-radius:var(--r);
  background:#fff; border:1px solid var(--line-2);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  overflow:hidden;
}
.cat-tile::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tile); }
.cat-tile:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:transparent; }
.cat-tile-ic{ flex:none; display:grid; place-content:center; width:46px; height:46px; border-radius:14px; color:#fff; background:var(--tile); }
.cat-tile-ic svg{ width:24px; height:24px; }
.cat-tile-tx{ display:flex; flex-direction:column; min-width:0; }
.cat-tile-tx b{ font-family:var(--ff-d); font-size:.98rem; }
.cat-tile-tx em{ font-style:normal; font-size:.78rem; color:var(--mute); }
.cat-tile-n{
  margin-left:auto; flex:none; font-family:var(--ff-d); font-weight:600; font-size:.74rem;
  background:var(--paper-3); color:var(--ink-soft); padding:.2em .6em; border-radius:999px;
}

/* ==========================================================================
   CARRUSEL DE OFERTAS
   ========================================================================== */
.rail-sec{ padding:clamp(2rem,4vw,3rem) 0; background:var(--paper-2); }
.rail-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; }
.rail-nav{ display:flex; gap:.5rem; flex:none; }
.rail-nav button{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; display:grid; place-content:center; transition:border-color .2s, color .2s;
}
.rail-nav button:hover{ border-color:var(--blue); color:var(--blue); }
.rail-nav svg{ width:18px; height:18px; }
.rail{
  display:flex !important; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:.8rem; scrollbar-width:thin;
}
.rail > .card{ flex:0 0 clamp(230px,26vw,280px); scroll-snap-align:start; }

/* ==========================================================================
   LISTA ESCOLAR
   ========================================================================== */
.lista{ padding:clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,2.4rem); }
.lista-card{
  width:min(1200px,100%); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,4vw,3rem); align-items:center;
  background:linear-gradient(140deg,var(--ink),#14336f);
  border-radius:var(--r-lg); padding:clamp(1.8rem,4vw,3.2rem); color:#fff;
  box-shadow:var(--sh-lg); overflow:hidden; position:relative;
}
.lista-card::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:24px 24px;
}
.lista-copy{ position:relative; }
.lista-copy h2{ margin-bottom:.7rem; }
.lista-copy p{ color:rgba(255,255,255,.76); margin-bottom:1.4rem; max-width:46ch; }
.lista-visual{ position:relative; }
.paper{
  background:#fff; color:var(--ink); border-radius:14px; padding:1.4rem 1.3rem;
  box-shadow:var(--sh-lg); transform:rotate(-1.6deg);
  display:flex; flex-direction:column; gap:.7rem;
}
.paper .ln{ display:flex; align-items:center; gap:.7rem; font-size:.9rem; border-bottom:1px dashed var(--line); padding-bottom:.55rem; }
.paper .ln i{ flex:none; width:16px; height:16px; border-radius:4px; border:2px solid var(--blue); position:relative; }
.paper .ln i::after{ content:""; position:absolute; inset:2px; border-radius:2px; background:var(--blue); }
.paper .ln.pend{ color:var(--mute); font-style:italic; border-bottom:0; }
.paper .ln.pend i{ border-color:var(--line); }
.paper .ln.pend i::after{ display:none; }
.lista-photo{ width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-lg); }
.lista-visual:has(.lista-photo:not([hidden])) .paper{ display:none; }

/* ==========================================================================
   CATÁLOGO: controles
   ========================================================================== */
.catalogo{ padding:clamp(3.5rem,7vw,5.5rem) 0; }
.cat-controls{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.search{ position:relative; flex:1 1 320px; max-width:460px; }
.search .ic{ position:absolute; left:1rem; top:50%; translate:0 -50%; width:19px; height:19px; color:var(--mute); pointer-events:none; }
.search input{
  width:100%; padding:.82em 2.6rem .82em 2.9rem; border-radius:999px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.search input::placeholder{ color:#98a1b5; }
.search input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(10,99,168,.12); }
.search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.search-clear{
  position:absolute; right:.5rem; top:50%; translate:0 -50%;
  width:30px; height:30px; border:0; border-radius:50%; background:var(--paper-3);
  display:none; place-content:center; cursor:pointer; color:var(--mute);
}
.search-clear.show{ display:grid; }
.search-clear svg{ width:14px; height:14px; }
.search-clear:hover{ background:var(--line); color:var(--ink); }

.sortbox{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--mute); }
.sortbox select{
  border:1.5px solid var(--line); border-radius:999px; padding:.6em 1em; background:#fff;
  font-family:var(--ff-d); font-weight:500; cursor:pointer;
}
.sortbox select:focus{ outline:none; border-color:var(--blue); }

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1rem; }
.filter{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1.5px solid var(--line); background:#fff; color:var(--ink-soft);
  border-radius:999px; padding:.55em 1.05em; cursor:pointer;
  font-family:var(--ff-d); font-weight:500; font-size:.86rem;
  transition:border-color .2s, background .2s, color .2s, transform .2s;
}
.filter svg{ width:15px; height:15px; }
.filter:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.filter.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.result-count{ text-align:center; font-size:.82rem; color:var(--mute); margin-bottom:1.6rem; }
.no-results{ display:none; text-align:center; color:var(--mute); margin-top:2.4rem; }

/* ==========================================================================
   TARJETA DE PRODUCTO
   ========================================================================== */
.grid-products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:1.1rem; }
.card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:transparent; }
.card-media{
  position:relative; display:block; aspect-ratio:4/3; background:var(--photo-bg); overflow:hidden;
  border-bottom:1px solid var(--line-2);
}
.card-media img{ width:100%; height:100%; object-fit:contain; padding:.6rem; transition:transform .5s var(--ease); }
.card:hover .card-media img{ transform:scale(1.05); }

.card-flags{ position:absolute; top:.6rem; left:.6rem; z-index:2; display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; }
.card-flag{ font-family:var(--ff-d); font-weight:700; font-size:.7rem; padding:.25em .6em; border-radius:999px; color:#fff; letter-spacing:.02em; }
.card-flag.is-off{ background:var(--red); }
.card-flag.is-new{ background:var(--green); }
.card-flag.is-out{ background:var(--mute); }

/* --- disponibilidad --- */
.stock{ display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:600; font-family:var(--ff-d); }
.stock svg{ width:13px; height:13px; }
.stock.is-ok{ color:var(--green); }
.stock.is-low{ color:#c96122; }
.stock.is-out{ color:var(--mute); }
.card.is-out .card-media img,
.card.is-out .card-tile{ filter:grayscale(1); opacity:.55; }
.card.is-out .p-now{ color:var(--mute); }
.btn-add.is-out{ background:var(--wa); color:#04331a; text-decoration:none; flex:1; justify-content:center; }
.btn-add.is-out:hover{ background:#31e274; }
.pd-out{ background:#fff4f3; border:1px solid #f6c9c5; color:#8c221b; border-radius:12px; padding:.8rem 1rem; font-size:.87rem; margin-bottom:1rem; }
.pd-low{ color:#c96122; font-size:.85rem; font-weight:600; margin-bottom:.9rem; }

/* sello cuando el producto todavía no tiene foto */
.card-tile{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  background:linear-gradient(150deg,var(--accent,#1f4fd8),var(--accent-2,#16389c)); color:#fff;
}
.card-tile .ct-ic{ width:38px; height:38px; opacity:.9; }
.card-tile .ct-name{ font-family:var(--ff-d); font-weight:700; font-size:1.02rem; letter-spacing:.02em; }
.card-tile .ct-sub{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; opacity:.7; }

.card-social{ position:absolute; top:.6rem; right:.6rem; z-index:3; display:flex; gap:.35rem; }
.card-social button{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line-2);
  background:rgba(255,255,255,.94); display:grid; place-content:center; cursor:pointer;
  color:var(--ink-soft); transition:color .2s, transform .2s, background .2s;
}
.card-social button svg{ width:15px; height:15px; }
.card-social button:hover{ transform:translateY(-1px); color:var(--blue); }
.like-btn{ gap:.2rem; }
.like-btn span{ font-size:.7rem; font-weight:600; }
.like-btn.is-liked{ color:var(--red); }
.like-btn.is-liked svg{ fill:var(--red); }
.like-pop{ animation:pop .35s var(--ease); }
@keyframes pop{ 50%{ transform:scale(1.25); } }
.share-menu{
  position:absolute; top:2.6rem; right:.6rem; z-index:6;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-lg);
  padding:.35rem; display:flex; flex-direction:column; min-width:160px;
}
.share-menu a, .share-menu button{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem; border:0; background:none;
  cursor:pointer; border-radius:8px; font-size:.85rem; text-align:left; color:var(--ink);
}
.share-menu a:hover, .share-menu button:hover{ background:var(--paper-2); }
.share-menu svg{ width:16px; height:16px; }

.card-body{ display:flex; flex-direction:column; gap:.35rem; padding:.9rem 1rem 1rem; flex:1; }
.card-kicker{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); font-weight:600; }
.card-title-link h3{ font-size:.98rem; line-height:1.28; }
.card-title-link:hover h3{ color:var(--blue); }
.card-desc{ font-size:.82rem; color:var(--mute); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.price{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; margin-top:auto; padding-top:.5rem; }
.price .p-from{ font-size:.7rem; color:var(--mute); }
.price .p-now{ font-family:var(--ff-d); font-weight:800; font-size:1.22rem; color:var(--ink); letter-spacing:-.02em; }
.price .p-was{ font-size:.82rem; color:var(--mute); text-decoration:line-through; }
.price .p-ask{ font-family:var(--ff-d); font-weight:600; font-size:.92rem; color:var(--blue); }
.price.is-big .p-now{ font-size:2rem; }
.price.is-big .p-was{ font-size:1rem; }

.card-buy{ display:flex; gap:.4rem; margin-top:.6rem; }
.card-size{
  flex:1; min-width:0; border:1.5px solid var(--line); border-radius:10px;
  padding:.5em .6em; font-size:.78rem; background:#fff; cursor:pointer;
}
.card-size:focus-visible{ border-color:var(--blue); }
.btn-add{
  flex:none; display:inline-flex; align-items:center; gap:.35rem;
  border:0; border-radius:10px; background:var(--ink); color:#fff;
  font-family:var(--ff-d); font-weight:600; font-size:.8rem; padding:.55em .85em; cursor:pointer;
  transition:background .2s, transform .2s;
}
.btn-add svg{ width:15px; height:15px; }
.btn-add:hover{ background:var(--blue); transform:translateY(-1px); }
.btn-add.added{ background:var(--green); }

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.servicios{ padding:clamp(3.5rem,7vw,5.5rem) 0; background:var(--paper-2); }
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; }
.service{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r); padding:1.5rem 1.3rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.service:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.service-ic{ display:grid; place-content:center; width:46px; height:46px; border-radius:14px; background:var(--ink); color:var(--pink); margin-bottom:.3rem; }
.service-ic svg{ width:23px; height:23px; }
.service p{ font-size:.87rem; color:var(--mute); }
.service-price{ margin-top:auto; padding-top:.6rem; font-family:var(--ff-d); font-weight:700; color:var(--blue); font-size:.9rem; }

/* ==========================================================================
   NOSOTROS
   ========================================================================== */
.nosotros{ padding:clamp(3.5rem,7vw,5.5rem) clamp(1rem,4vw,2.4rem); }
.nosotros-grid{ width:min(1200px,100%); margin-inline:auto; display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.nosotros-figure{ position:relative; }
.ns-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); background:var(--paper-3); }
.ns-frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.ns-placeholder{
  aspect-ratio:4/3; display:grid; grid-template-columns:1fr 1fr; place-items:center; gap:.6rem; padding:2rem;
  background:linear-gradient(140deg,var(--blue),var(--ink)); color:rgba(255,255,255,.85);
}
.ns-placeholder svg{ width:52px; height:52px; }
.ns-frame:has(img:not([hidden])) .ns-placeholder{ display:none; }
.tagchip{
  position:absolute; left:1rem; bottom:-.9rem;
  background:var(--pink-deep); color:#fff; font-family:var(--ff-d); font-weight:600; font-size:.8rem;
  padding:.5em 1em; border-radius:999px; box-shadow:var(--sh);
}
.nosotros h2 b{ color:var(--blue); }
.nosotros p{ margin-top:.9rem; }
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.8rem 0; }
.pillar{ border-left:3px solid var(--pink); padding-left:.9rem; }
.pillar .n{ font-family:var(--ff-d); font-weight:800; font-size:.78rem; color:var(--blue); letter-spacing:.1em; }
.pillar h4{ font-size:.95rem; margin-top:.2rem; }
.pillar p{ font-size:.81rem; color:var(--mute); margin-top:.15rem; line-height:1.45; }

/* ==========================================================================
   MARCAS
   ========================================================================== */
.clients{ padding:clamp(2.5rem,5vw,4rem) 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.clients .kicker{ display:flex; }
.clients p.lead{ text-align:center; color:var(--mute); max-width:56ch; margin:0 auto 1.6rem; }
.client-row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.client-chip{
  font-family:var(--ff-d); font-weight:600; font-size:.86rem; color:var(--ink-soft);
  border:1.5px solid var(--line); border-radius:999px; padding:.45em 1.1em; background:#fff;
  transition:border-color .2s, color .2s;
}
.client-chip:hover{ border-color:var(--blue); color:var(--blue); }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto{ padding:clamp(3.5rem,7vw,5.5rem) clamp(1rem,4vw,2.4rem); }
.contacto-card{
  width:min(1200px,100%); margin-inline:auto; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,4vw,3rem);
  background:linear-gradient(140deg,var(--ink),#14336f); color:#fff;
  border-radius:var(--r-lg); padding:clamp(1.8rem,4vw,3.2rem); box-shadow:var(--sh-lg);
}
.contacto-card::after{
  content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(236,0,140,.22),transparent 70%);
}
.contacto-card h2{ margin-bottom:.7rem; }
.contacto-card h2 b{ color:var(--pink); }
.contacto-card p{ color:rgba(255,255,255,.76); margin-bottom:1.4rem; max-width:46ch; }
.contacto-actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
.contact-list{ position:relative; display:flex; flex-direction:column; gap:1rem; justify-content:center; }
.contact-item{ display:flex; gap:.8rem; align-items:flex-start; }
.contact-item svg{ width:20px; height:20px; color:var(--pink); flex:none; margin-top:.2rem; }
.contact-item .lbl{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.contact-item .val{ color:#fff; font-size:.95rem; }
.contact-item a.val:hover{ color:var(--pink-light); }

/* modal de contacto */
.cf-overlay{ position:fixed; inset:0; z-index:120; background:rgba(10,36,68,.62); backdrop-filter:blur(3px); display:grid; place-items:center; padding:1.2rem; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.cf-overlay.open{ opacity:1; visibility:visible; }
.cf-modal{ width:min(520px,100%); max-height:90vh; overflow-y:auto; transform:translateY(14px) scale(.98); opacity:0; transition:transform .34s var(--ease), opacity .34s; }
.cf-modal.open{ transform:none; opacity:1; }
.contact-form{ position:relative; background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:2rem 1.7rem 1.7rem; box-shadow:var(--sh-lg); }
.cf-close{ position:absolute; top:.8rem; right:.9rem; width:32px; height:32px; border:0; border-radius:50%; background:var(--paper-2); cursor:pointer; color:var(--mute); }
.cf-close:hover{ background:var(--line); color:var(--ink); }
.contact-form h3{ font-size:1.3rem; margin-bottom:.2rem; }
.contact-form .cf-sub{ font-size:.87rem; color:var(--mute); margin-bottom:1.1rem; }
.cf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.cf-field{ margin-bottom:.8rem; display:flex; flex-direction:column; gap:.3rem; }
.cf-field label{ font-size:.78rem; font-weight:600; color:var(--ink-soft); }
.cf-field label .opt{ font-weight:400; color:var(--mute); }
.cf-field label .req, .cf-req-note .req{ color:var(--red); }
.cf-req-note{ font-size:.74rem; color:var(--mute); margin-bottom:.9rem; }
.cf-field input, .contact-form textarea{
  border:1.5px solid var(--line); border-radius:12px; padding:.7em .85em; background:#fff; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.contact-form textarea{ min-height:112px; resize:vertical; }
.cf-field input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(10,99,168,.1); }
.contact-form .btn{ width:100%; margin-top:.3rem; }
.contact-form .btn + .btn{ margin-top:.5rem; }
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cf-status{ font-size:.83rem; margin-top:.7rem; text-align:center; min-height:1.2em; }
.cf-status.err{ color:var(--red); }
.cf-status.ok{ color:var(--green); }
.cf-success{ text-align:center; padding:1rem 0; }
.cf-success-ic{ font-size:2.4rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--ink); color:rgba(255,255,255,.72); padding:clamp(2.6rem,5vw,4rem) clamp(1rem,4vw,2.4rem) 1.4rem; }
.footer-grid{ width:min(1200px,100%); margin-inline:auto; display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1fr; gap:2rem; }
.footer .brandmark .bn{ color:#fff; }
.footer .brandmark .bn b{ color:var(--pink-light); }
.footer-about{ font-size:.85rem; color:rgba(255,255,255,.6); margin-top:.8rem; max-width:42ch; }
.footer h5{ font-family:var(--ff-d); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-light); margin-bottom:.8rem; }
.footer-links{ display:flex; flex-direction:column; gap:.5rem; font-size:.87rem; }
.footer-links a{ color:rgba(255,255,255,.72); transition:color .2s; }
.footer-links a:hover{ color:var(--pink-light); }
.socials{ display:flex; gap:.5rem; margin-top:1rem; }
.socials a,.socials button{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-content:center; transition:border-color .2s, color .2s, transform .2s; background:none; color:inherit; padding:0; font:inherit; cursor:pointer; }
.socials a svg,.socials button svg{ width:16px; height:16px; }
.socials a:hover,.socials button:hover{ border-color:var(--pink-light); color:var(--pink-light); transform:translateY(-2px); }

/* Libro de Reclamaciones */
.libro{
  display:inline-flex; flex-direction:column; gap:.35rem; align-items:flex-start;
  margin-top:1.1rem; padding:.55rem .7rem; border-radius:12px;
  background:#fff; border:1px solid rgba(255,255,255,.2);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.libro img{ width:118px; height:auto; }
.libro span{ font-size:.68rem; font-weight:600; color:var(--ink); letter-spacing:.02em; }
.libro:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(0,0,0,.8); }

.footer-base{
  width:min(1200px,100%); margin:2.4rem auto 0; padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between;
  font-size:.78rem; color:rgba(255,255,255,.5);
}
.footer-base-right{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-base-icons{ margin-top:0; }
.footer-base-icons a,.footer-base-icons button{ width:30px; height:30px; }

/* ==========================================================================
   PÁGINA DE PRODUCTO
   ========================================================================== */
.pd{ padding:1.4rem clamp(1rem,4vw,2.4rem) clamp(2.5rem,5vw,4rem); width:min(1200px,100%); margin-inline:auto; }
.breadcrumb{ font-size:.8rem; color:var(--mute); display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb .sep{ opacity:.5; }
.pd-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(1.6rem,4vw,3rem); align-items:start; }
.pd-gallery{ position:sticky; top:calc(var(--nav-h) + 14px); }
.pd-main{
  position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--photo-bg);
  border:1px solid var(--line-2); aspect-ratio:1/1; display:grid; place-items:center;
}
.pd-main img{ width:100%; height:100%; object-fit:contain; padding:1.2rem; }
.pd-main .card-tile{ border-radius:0; }
.pd-thumbs{ display:flex; gap:.5rem; margin-top:.7rem; flex-wrap:wrap; }
.pd-thumb{ width:66px; height:66px; border-radius:12px; overflow:hidden; border:1.5px solid var(--line); background:var(--photo-bg); cursor:pointer; padding:0; }
.pd-thumb img{ width:100%; height:100%; object-fit:contain; padding:.25rem; }
.pd-thumb.is-active{ border-color:var(--blue); }
.pd-info h1{ font-size:clamp(1.5rem,3vw,2.1rem); margin:.2rem 0 .4rem; }
.pd-marca{ font-size:.85rem; color:var(--mute); margin-bottom:.6rem; }
.pd-marca b{ color:var(--ink); }
.pd-social{ position:static; margin-bottom:.6rem; }
.pd-rating{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem; }
.stars{ display:flex; gap:.1rem; }
.star{ border:0; background:none; cursor:pointer; font-size:1.15rem; line-height:1; color:var(--line); padding:0 .05rem; transition:color .15s, transform .15s; }
.star.is-filled{ color:var(--pink); }
.stars:hover .star{ color:var(--pink); }
.star:hover ~ .star{ color:var(--line); }
.pd-rating.is-rated .star{ cursor:default; }
.pd-rating-info{ font-size:.78rem; color:var(--mute); }
.pd-rating-info .sep{ margin:0 .35rem; opacity:.6; }
.pd-lead{ font-size:1rem; color:var(--ink-soft); margin-bottom:1rem; }
.pd-attrs{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.2rem; }
.attr-badge{ display:flex; flex-direction:column; align-items:center; gap:.3rem; width:82px; text-align:center; }
.attr-badge-circle{ width:46px; height:46px; border-radius:50%; background:var(--paper-2); border:1.5px solid var(--line-2); display:grid; place-content:center; color:var(--blue); }
.attr-badge-circle svg{ width:21px; height:21px; }
.attr-badge-caption{ font-size:.66rem; line-height:1.25; color:var(--mute); }
.pd-desc{ font-size:.93rem; margin-bottom:.9rem; }
.pd-uses{ font-size:.88rem; color:var(--mute); margin-bottom:1.2rem; }
.pd-uses b{ color:var(--ink); }
.pd-spec{ border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; margin-bottom:1.4rem; }
.pd-spec .row{ display:grid; grid-template-columns:34% 1fr; gap:1rem; padding:.7rem 1rem; font-size:.86rem; }
.pd-spec .row:nth-child(odd){ background:var(--paper-2); }
.pd-spec .row .k{ color:var(--mute); }
.pd-spec .row .v{ color:var(--ink); font-weight:500; }

.pd-buy{ border:1px solid var(--line-2); border-radius:var(--r-lg); padding:1.3rem; background:var(--paper-2); }
.pd-price{ margin-bottom:1rem; }
.pd-price .price{ margin-top:0; padding-top:0; }
.pd-buy-row{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:1rem; }
.pd-field{ display:flex; flex-direction:column; gap:.45rem; }
.pd-flabel{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); font-weight:600; }
.size-pills{ display:flex; flex-wrap:wrap; gap:.4rem; }
.size-pill{
  display:flex; flex-direction:column; align-items:flex-start; gap:.05rem;
  border:1.5px solid var(--line); background:#fff; border-radius:12px;
  padding:.45em .8em; cursor:pointer; transition:border-color .2s, background .2s, color .2s;
}
.size-pill b{ font-family:var(--ff-d); font-weight:600; font-size:.83rem; }
.size-pill em{ font-style:normal; font-size:.75rem; color:var(--mute); }
.size-pill:hover{ border-color:var(--blue); }
.size-pill.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.size-pill.active em{ color:var(--pink-deep); }
.stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.stepper button{ width:36px; height:38px; border:0; background:none; cursor:pointer; font-size:1.1rem; color:var(--ink-soft); }
.stepper button:hover{ background:var(--paper-3); color:var(--blue); }
.stepper .q{ min-width:36px; text-align:center; font-weight:600; font-family:var(--ff-d); }
.pd-subtotal{ display:flex; align-items:baseline; justify-content:space-between; padding:.7rem 0 1rem; border-top:1px dashed var(--line); font-size:.88rem; color:var(--mute); }
.pd-subtotal b{ font-family:var(--ff-d); font-size:1.3rem; color:var(--ink); }
.pd-buy-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pd-buy-actions .btn{ flex:1 1 190px; }
.pd-back{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; font-size:.85rem; color:var(--mute); }
.pd-back svg{ width:16px; height:16px; }
.pd-back:hover{ color:var(--blue); }

.related{ padding:clamp(2.5rem,5vw,4rem) 0; background:var(--paper-2); }

/* ==========================================================================
   CARRITO
   ========================================================================== */
.cart-overlay{ position:fixed; inset:0; z-index:110; background:rgba(10,36,68,.55); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.cart-overlay.open{ opacity:1; visibility:visible; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:115; width:min(420px,94vw);
  background:#fff; display:flex; flex-direction:column;
  transform:translateX(102%); box-shadow:var(--sh-lg);
  /* visibility, además de la animación: si solo se desplazara fuera de
     pantalla, sus botones seguirían siendo alcanzables con el tabulador. */
  visibility:hidden;
  transition:transform .36s var(--ease), visibility .36s;
}
.cart-drawer.open{ transform:none; visibility:visible; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 1.3rem; border-bottom:1px solid var(--line-2); }
.cart-head h3{ font-size:1.15rem; }
.cart-head .count{ font-size:.78rem; color:var(--mute); }
.cart-close{ width:34px; height:34px; border:0; border-radius:50%; background:var(--paper-2); cursor:pointer; display:grid; place-content:center; color:var(--mute); }
.cart-close:hover{ background:var(--line); color:var(--ink); }
.cart-close svg{ width:15px; height:15px; }
.cart-items{ flex:1; overflow-y:auto; padding:1rem 1.3rem; display:flex; flex-direction:column; gap:1rem; }
.cart-empty{ text-align:center; color:var(--mute); padding:3rem 0; }
.cart-empty svg{ width:42px; height:42px; margin:0 auto .8rem; opacity:.35; }
.cart-line{ display:grid; grid-template-columns:66px 1fr; gap:.8rem; padding-bottom:1rem; border-bottom:1px solid var(--line-2); }
.cart-line .thumb{ width:66px; height:66px; border-radius:12px; overflow:hidden; background:var(--photo-bg); border:1px solid var(--line-2); }
.cart-line .thumb img{ width:100%; height:100%; object-fit:contain; padding:.25rem; }
.cart-line .thumb.seal{ display:grid; place-content:center; font-family:var(--ff-d); font-weight:800; background:var(--paper-3); }
.cart-line h4{ font-size:.9rem; line-height:1.3; }
.cl-size{ margin:.35rem 0; }
.cl-size select{ border:1.5px solid var(--line); border-radius:9px; padding:.35em .5em; font-size:.76rem; background:#fff; max-width:100%; }
.cl-controls{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.cl-remove{ display:inline-flex; align-items:center; gap:.3rem; border:0; background:none; cursor:pointer; font-size:.76rem; color:var(--mute); }
.cl-remove svg{ width:14px; height:14px; }
.cl-remove:hover{ color:var(--red); }
.cl-price{ display:flex; align-items:baseline; gap:.5rem; margin-top:.45rem; font-size:.78rem; color:var(--mute); }
.cl-price b{ font-family:var(--ff-d); font-size:1rem; color:var(--ink); margin-left:auto; }
.cart-foot{ border-top:1px solid var(--line-2); padding:1.1rem 1.3rem 1.3rem; }
.cart-total{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.7rem; font-size:.88rem; color:var(--mute); }
.cart-total b{ font-family:var(--ff-d); font-size:1.5rem; color:var(--ink); }
.cart-note{ display:flex; gap:.5rem; align-items:flex-start; font-size:.76rem; color:var(--mute); margin-bottom:.9rem; }
.cart-note svg{ width:15px; height:15px; color:var(--green); flex:none; margin-top:.15rem; }
.cart-foot .btn{ width:100%; }
.cart-clear{ text-align:center; margin-top:.7rem; }
.cart-clear button{ border:0; background:none; cursor:pointer; font-size:.78rem; color:var(--mute); text-decoration:underline; }
.cart-clear button:hover{ color:var(--red); }

/* ==========================================================================
   FLOTANTES
   ========================================================================== */
.wa-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:70;
  width:54px; height:54px; border-radius:50%; background:var(--wa); color:#04331a;
  display:grid; place-content:center; box-shadow:0 14px 30px -12px rgba(37,211,102,.9);
  transition:transform .22s var(--ease);
}
.wa-float svg{ width:27px; height:27px; }
.wa-float:hover{ transform:scale(1.07); }
.wa-float::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:waPulse 2.4s ease-out infinite; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.6); opacity:0; } }

.toast{
  position:fixed; left:50%; bottom:1.4rem; translate:-50% 0; z-index:130;
  display:flex; align-items:center; gap:.5rem;
  background:var(--ink); color:#fff; border-radius:999px; padding:.7em 1.3em; font-size:.86rem;
  opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .25s, transform .25s;
  box-shadow:var(--sh-lg);
}
.toast.show{ opacity:1; transform:none; }
.toast svg{ width:17px; height:17px; color:var(--wa); }

.preview-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:140;
  display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap;
  background:var(--pink-deep); color:#fff; padding:.6rem 1rem; font-size:.85rem; font-weight:500;
}
.preview-bar button{ border:1.5px solid #fff; background:#fff; color:var(--pink-deep); border-radius:999px; padding:.35em 1em; cursor:pointer; font-size:.8rem; font-weight:600; }
.preview-bar .pv-ghost{ background:transparent; color:#fff; }
.preview-bar .pv-ghost:hover{ background:rgba(0,0,0,.08); }

/* ==========================================================================
   REVEALS
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-revealed{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .benefits{ grid-template-columns:repeat(2,1fr); }
  .cat-tiles{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1.2fr; }
  .footer-grid > div:last-child{ grid-column:1/-1; }
}
@media (max-width:940px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; min-height:250px; }
  .shelf{ height:250px; }
  .sh-card{ width:112px; padding:.9rem .75rem; }
  .lista-card, .contacto-card, .nosotros-grid, .pd-grid{ grid-template-columns:1fr; }
  .pd-gallery{ position:static; }
  .cat-tiles{ grid-template-columns:repeat(2,1fr); }
  .pillars{ grid-template-columns:1fr; gap:.8rem; }

  .nav-links{
    position:fixed; top:0; right:0; bottom:0; width:min(330px,86vw); z-index:85;
    background:#fff; flex-direction:column; align-items:flex-start; gap:1rem;
    padding:calc(var(--nav-h) + 1.4rem) 1.6rem 1.6rem; overflow-y:auto;
    transform:translateX(102%); box-shadow:var(--sh-lg);
    /* igual que el carrito: fuera de pantalla y fuera del orden de tabulación */
    visibility:hidden;
    transition:transform .36s var(--ease), visibility .36s;
  }
  body.menu-open .nav-links{ transform:none; visibility:visible; }
  .nav-links a.link{ font-size:1.05rem; }
  .menu-extra{ display:block; }
  .menu-eyebrow{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
  .menu-foot{ margin-top:auto; width:100%; display:flex; flex-direction:column; gap:1rem; padding-top:1.4rem; border-top:1px solid var(--line-2); }
  .menu-foot .btn{ width:100%; }
  .menu-contact{ display:flex; flex-direction:column; gap:.35rem; font-size:.83rem; color:var(--mute); }
  .menu-social{ display:flex; gap:.5rem; margin-top:.5rem; }
  .menu-social a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-content:center; color:var(--ink-soft); }
  .nav-burger{ display:grid; place-content:center; }
}
@media (max-width:700px){
  .topbar .tb-links{ display:none; }
  .topbar-in{ justify-content:center; text-align:center; }
  .benefits{ grid-template-columns:1fr; margin-top:-3rem; }
  .footer-grid{ grid-template-columns:1fr; }
  .cf-grid{ grid-template-columns:1fr; }
  .grid-products{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.8rem; }
  .card-buy{ flex-direction:column; }
  .btn-add{ justify-content:center; }
  .hero-stats{ gap:1.4rem; }
  .footer-base{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px){
  .cat-tiles{ grid-template-columns:1fr; }
  .price .p-now{ font-size:1.05rem; }
  .pd-buy-actions .btn{ flex:1 1 100%; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}