/* ==========================================================================
   LA ALACENA — Minimercado de barrio, Centro de Montevideo.
   Hoja de estilos. Sin frameworks: solo CSS a mano.

   ÍNDICE
     00. TOKENS
     01. RESET Y BASE
     02. UTILIDADES (contenedor, botones)
     03. HEADER Y NAV
     04. HERO
     05. TIRA DE CONFIANZA
     06. ENCABEZADOS DE SECCIÓN (sin eyebrow — número + regla)
     07. FILTROS DE CATEGORÍA
     08. GRILLA DE PRODUCTOS
     09. ENTREGA EN EL BARRIO
     10. UBICACIÓN Y HORARIO
     11. FOOTER
     12. CARRITO (panel lateral)
     13. WHATSAPP FLOTANTE
     14. ANIMACIÓN AL SCROLL Y HERO
     15. RESPONSIVE
   ========================================================================== */

/* ==========================================================================
   00. TOKENS
   ========================================================================== */
:root{
  --bg:#16181A;
  --bg-soft:#1B1E20;
  --surface:#202325;
  --surface-2:#262A2C;
  --line:rgba(232,237,234,.09);
  --line-strong:rgba(232,237,234,.18);
  --text:#ECEFED;
  --muted:#9CA3A0;
  --muted-dim:#6C7371;

  --accent:#3E8161;
  --accent-bright:#5CAE85;
  --accent-deep:#255943;
  --accent-soft:rgba(62,129,97,.16);
  --on-accent:#F2FBF6;

  --head:'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  --sans:'Inter', -apple-system, 'Segoe UI', sans-serif;

  --shell:min(1240px, 100% - 3rem);
  --shell-narrow:min(760px, 100% - 3rem);
  --ease:cubic-bezier(.18,.9,.28,1);

  --step--1:clamp(.78rem,.76rem + .1vw,.85rem);
  --step-0:clamp(.95rem,.92rem + .16vw,1.04rem);
  --step-1:clamp(1.08rem,1.02rem + .3vw,1.28rem);
  --step-2:clamp(1.5rem,1.3rem + .8vw,2rem);
  --step-3:clamp(2.1rem,1.6rem + 2vw,3.1rem);
  --step-4:clamp(2.6rem,1.8rem + 3.8vw,4.6rem);
}

/* ==========================================================================
   01. RESET Y BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* Sin esto, cualquier regla nuestra con "display" en una clase le gana al
   atributo hidden del navegador (misma especificidad, y el nuestro carga
   después). Pasa con .cart__empty, .cart__list, etc. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;padding:0}
input{font:inherit;color:inherit}
h1,h2,h3{line-height:1.1;letter-spacing:-.01em;font-weight:600;text-wrap:balance;font-family:var(--head)}
p{text-wrap:pretty}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}

.shell{width:var(--shell);margin-inline:auto}
.shell--narrow{width:var(--shell-narrow);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;z-index:1000}
.skip:focus{left:1rem;top:1rem;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem}

/* ==========================================================================
   02. UTILIDADES
   ========================================================================== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;
  font-family:var(--sans);font-size:var(--step--1);font-weight:700;letter-spacing:.01em;
  white-space:nowrap;border:1px solid transparent;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--solid{background:var(--accent);color:var(--on-accent)}
.btn--solid:hover{background:var(--accent-bright);transform:translateY(-2px)}
.btn--outline{border-color:var(--line-strong);color:var(--text)}
.btn--outline:hover{border-color:var(--accent);color:var(--accent-bright)}
.btn--block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none}
.btn:active:not(:disabled){transform:scale(.98)}

/* ==========================================================================
   03. HEADER Y NAV
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:120;
  padding:1.3rem 0;
  border-bottom:1px solid transparent;
  transition:padding .4s var(--ease), background-color .4s ease, border-color .4s ease;
}
.header.is-stuck{
  padding:.85rem 0;
  background:rgba(22,24,26,.86);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  border-bottom-color:var(--line);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.brand{display:inline-flex;align-items:baseline;gap:.5rem}
.brand__word{
  font-family:var(--head);font-size:1.4rem;font-weight:700;letter-spacing:-.01em;
  color:var(--text);
}
.brand__word b{color:var(--accent-bright);font-weight:800}
.brand__tag{
  display:none;font-family:var(--sans);font-size:.68rem;letter-spacing:.06em;color:var(--muted-dim);
}
@media (min-width:680px){.brand__tag{display:inline}}

.nav{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.6rem)}
.nav__list{display:none;align-items:center;gap:clamp(1.4rem,2.6vw,2.4rem)}
@media (min-width:860px){.nav__list{display:flex}}
.nav__list a{
  font-size:var(--step--1);color:var(--muted);letter-spacing:.01em;font-weight:500;
  padding-bottom:.2rem;border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.nav__list a:hover{color:var(--text);border-color:var(--line-strong)}

.header__actions{display:flex;align-items:center;gap:.9rem}

.cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem .7rem;border:1px solid var(--line-strong);
  color:var(--text);transition:border-color .25s ease, color .25s ease;
}
.cart-btn:hover{border-color:var(--accent);color:var(--accent-bright)}
.cart-btn svg{width:1.15em;height:1.15em}
.cart-btn__label{display:none;font-size:var(--step--1);font-weight:600}
@media (min-width:680px){.cart-btn__label{display:inline}}
.cart-btn__count{
  position:absolute;top:-.5rem;right:-.5rem;
  min-width:1.3rem;height:1.3rem;padding:0 .3rem;
  display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);
  font-size:.66rem;font-weight:800;
  border-radius:50%;
  transform:scale(0);transition:transform .3s var(--ease);
}
.cart-btn__count.is-visible{transform:scale(1)}

.nav-toggle{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;
  border:1px solid var(--line-strong);
}
@media (min-width:860px){.nav-toggle{display:none}}
.nav-toggle__bars{position:relative;width:16px;height:11px}
.nav-toggle__bars span{
  position:absolute;left:0;width:100%;height:1px;background:var(--text);
  transition:transform .3s var(--ease), opacity .3s ease, top .3s var(--ease);
}
.nav-toggle__bars span:nth-child(1){top:0}
.nav-toggle__bars span:nth-child(2){top:5px}
.nav-toggle__bars span:nth-child(3){top:10px}
.nav-toggle.is-open .nav-toggle__bars span:nth-child(1){top:5px;transform:rotate(45deg)}
.nav-toggle.is-open .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle.is-open .nav-toggle__bars span:nth-child(3){top:5px;transform:rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0 0 auto 0;z-index:110;
  background:var(--bg-soft);border-bottom:1px solid var(--line);
  padding:5.5rem 1.5rem 2.5rem;
  transform:translateY(-100%);opacity:0;
  transition:transform .45s var(--ease), opacity .3s ease;
  pointer-events:none;
}
.mobile-nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-nav ul{display:grid;gap:1.4rem}
.mobile-nav a{font-family:var(--head);font-size:1.5rem;font-weight:700;color:var(--text)}
@media (min-width:860px){.mobile-nav{display:none}}

/* ==========================================================================
   04. HERO
   ========================================================================== */
.hero{padding:clamp(2.6rem,6vw,4.5rem) 0 clamp(4rem,8vw,6rem)}
.hero__grid{
  display:grid;gap:clamp(2.2rem,5vw,4rem);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){.hero__grid{grid-template-columns:1.05fr .95fr}}

.hero__body{position:relative}
.hero__kicker{
  font-family:var(--head);font-style:italic;font-weight:600;font-size:var(--step--1);
  color:var(--accent-bright);margin-bottom:1.2rem;letter-spacing:.01em;
}
.hero h1{
  font-size:var(--step-4);font-weight:700;
  display:flex;flex-direction:column;gap:.05em;
}
.hero h1 .line{overflow:hidden;padding-bottom:.06em}
.hero h1 .line span{display:block;transform:translateY(105%);transition:transform .9s var(--ease)}
.hero.is-ready h1 .line:nth-child(1) span{transition-delay:.05s}
.hero.is-ready h1 .line:nth-child(2) span{transition-delay:.18s}
.hero.is-ready h1 .line span{transform:translateY(0)}
.hero h1 em{font-style:italic;color:var(--accent-bright)}

.hero__sub{
  margin-top:1.5rem;max-width:46ch;color:var(--muted);font-size:var(--step-1);line-height:1.65;
  opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s;
}
.hero.is-ready .hero__sub{opacity:1;transform:none}

.hero__cta{
  display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem;
  opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease) .62s, transform .8s var(--ease) .62s;
}
.hero.is-ready .hero__cta{opacity:1;transform:none}

.hero__facts{
  display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid var(--line);
  opacity:0;transition:opacity .8s ease .74s;
}
.hero.is-ready .hero__facts{opacity:1}
.hero__facts li{font-size:var(--step--1);color:var(--muted-dim)}
.hero__facts b{display:block;font-family:var(--head);font-size:1.1rem;font-weight:700;color:var(--text)}

.hero__media{position:relative}
.hero__frame{
  position:relative;overflow:hidden;aspect-ratio:4/5;
  border:1px solid var(--line-strong);
}
.hero__frame img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);transition:transform 1.8s var(--ease);
}
.hero.is-ready .hero__frame img{transform:scale(1)}
.hero__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(15,17,18,.6));
}
.hero__tag{
  position:absolute;left:1.1rem;bottom:1.1rem;z-index:1;
  padding:.5rem .85rem;background:rgba(22,24,26,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line-strong);
  font-size:.72rem;letter-spacing:.02em;color:var(--muted);
}

/* ==========================================================================
   05. TIRA DE CONFIANZA
   ========================================================================== */
.trust{border-block:1px solid var(--line);background:var(--bg-soft)}
.trust__row{
  display:flex;flex-wrap:wrap;gap:.7rem 2.5rem;justify-content:center;
  padding:1.1rem 0;text-align:center;
}
.trust__row li{font-size:var(--step--1);color:var(--muted-dim)}
.trust__row li strong{color:var(--muted);font-weight:700}

/* ==========================================================================
   06. ENCABEZADOS DE SECCIÓN
   ------------------------------------------------------------------------
   Sin etiqueta en mayúsculas: un número editorial en itálica y una
   regla fina hacen de "kicker".
   ========================================================================== */
.section{padding:clamp(4.2rem,9vw,7.5rem) 0}
.section-head{
  display:flex;gap:clamp(1.2rem,4vw,2.5rem);align-items:flex-end;
  justify-content:space-between;flex-wrap:wrap;
  margin-bottom:clamp(2.4rem,5vw,3.6rem);
  padding-top:1.4rem;border-top:1px solid var(--line);
}
.section-head__num{
  font-family:var(--head);font-style:italic;font-weight:700;font-size:var(--step-0);color:var(--accent-bright);
  flex:none;margin-top:-1.4rem;padding-top:1.4rem;
}
.section-head h2{font-size:var(--step-3);max-width:18ch;font-weight:700}
.section-head p{max-width:38ch;color:var(--muted);font-size:var(--step-0)}

/* ==========================================================================
   07. FILTROS DE CATEGORÍA Y BÚSQUEDA
   ========================================================================== */
.catalog-controls{
  display:flex;flex-wrap:wrap;gap:1.1rem 2rem;align-items:flex-end;justify-content:space-between;
  margin-bottom:1.1rem;
}
.filters{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
.filters button{
  position:relative;padding:.3rem 0;
  font-size:var(--step--1);color:var(--muted-dim);letter-spacing:.01em;font-weight:500;
  border-bottom:1px solid transparent;transition:color .3s ease, border-color .3s ease;
}
.filters button:hover{color:var(--text)}
.filters button.is-active{color:var(--accent-bright);border-color:var(--accent);font-weight:600}

.search{
  position:relative;display:flex;align-items:center;gap:.55rem;
  flex:0 1 240px;min-width:0;
  padding-bottom:.5rem;border-bottom:1px solid var(--line-strong);
  transition:border-color .3s ease;
}
.search:focus-within{border-color:var(--accent)}
.search svg:first-child{width:1.05em;height:1.05em;color:var(--muted-dim);flex:none}
.search:focus-within svg:first-child{color:var(--accent-bright)}
.search input{
  flex:1;min-width:0;background:none;border:0;padding:0;
  color:var(--text);font-size:var(--step--1);
}
.search input::placeholder{color:var(--muted-dim)}
.search input:focus{outline:none}
.search input::-webkit-search-cancel-button{display:none}
.search__clear{flex:none;display:none;color:var(--muted-dim);padding:.15rem}
.search__clear:hover{color:var(--accent-bright)}
.search.has-value .search__clear{display:inline-flex}
.search__clear svg{width:.85em;height:.85em}

.grid-empty{
  padding:2.6rem 0;text-align:center;color:var(--muted-dim);font-size:var(--step-0);
  border-top:1px solid var(--line);
}

/* ==========================================================================
   08. GRILLA DE PRODUCTOS
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,3vw,2.2rem)}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.grid{grid-template-columns:repeat(4,1fr)}}

.card{display:flex;flex-direction:column;transition:opacity .35s ease}
.card[hidden]{display:none}
.card__frame{
  position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--surface);
  border:1px solid var(--line);
}
.card__frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
@media (hover:hover){.card:hover .card__frame img{transform:scale(1.045)}}
.card:hover .card__frame{border-color:var(--line-strong)}

.card__cat{margin-top:.9rem;font-size:.72rem;color:var(--muted-dim);letter-spacing:.02em;font-weight:500}
.card__name{margin-top:.25rem;font-size:var(--step-1);font-weight:600}
.card__price{
  margin-top:.35rem;font-family:var(--sans);font-size:var(--step-0);font-weight:800;color:var(--accent-bright);
  font-variant-numeric:tabular-nums;
}
.card__unit{margin-top:.4rem;font-size:.75rem;color:var(--muted-dim)}

.card__opts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.opt-chip{
  padding:.35rem .55rem;
  border:1px solid var(--line-strong);
  font-size:.72rem;font-weight:600;color:var(--muted);text-align:center;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.opt-chip:hover{border-color:var(--accent)}
.opt-chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.card__add{
  margin-top:1rem;padding:.7rem 1rem;
  border:1px solid var(--line-strong);
  font-size:.76rem;font-weight:700;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.card__add:hover{border-color:var(--accent);color:var(--accent-bright)}
.card__add.is-added{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.card__add svg{width:1em;height:1em}

/* ==========================================================================
   09. ENTREGA EN EL BARRIO
   ========================================================================== */
.entrega{
  display:grid;gap:clamp(2.2rem,5vw,4rem);align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){.entrega{grid-template-columns:.85fr 1.15fr}}
.entrega__frame{position:relative;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line-strong)}
.entrega__frame img{width:100%;height:100%;object-fit:cover}
.entrega__body p{margin-top:1.1rem;color:var(--muted);max-width:56ch;line-height:1.75}

.entrega__points{display:grid;gap:1.1rem;margin-top:1.8rem}
.entrega__points li{display:flex;gap:.9rem;align-items:flex-start}
.entrega__points svg{
  flex:none;width:1.3rem;height:1.3rem;color:var(--accent-bright);margin-top:.15rem;
}
.entrega__points strong{display:block;font-size:var(--step-0);font-weight:700;color:var(--text)}
.entrega__points span{display:block;margin-top:.2rem;font-size:var(--step--1);color:var(--muted)}

/* ==========================================================================
   10. UBICACIÓN Y HORARIO
   ========================================================================== */
.location{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:820px){.location{grid-template-columns:1fr 1fr}}
.location__block{padding-top:1.4rem;border-top:1px solid var(--line)}
.location__block h3{font-size:var(--step-1);font-weight:700;margin-bottom:.9rem;display:flex;align-items:center}
.location__block p{color:var(--muted);line-height:1.8}
.location__block a.link{
  display:inline-block;margin-top:.9rem;color:var(--accent-bright);
  border-bottom:1px solid var(--accent-deep);
}
.hours{display:grid;gap:.6rem}
.hours li{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:var(--step--1);color:var(--muted);
  padding-bottom:.6rem;border-bottom:1px solid var(--line);
}
.hours li strong{color:var(--text);font-weight:700}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.footer{border-top:1px solid var(--line);padding:clamp(3rem,6vw,4rem) 0 2rem;background:var(--bg-soft)}
.footer__grid{display:grid;gap:2.4rem;grid-template-columns:1fr}
@media (min-width:760px){.footer__grid{grid-template-columns:1.3fr 1fr 1fr}}
.footer__about p{margin-top:1.1rem;max-width:34ch;color:var(--muted);font-size:var(--step--1);line-height:1.7}
.footer h4{
  margin-bottom:1rem;font-family:var(--head);font-style:italic;font-weight:700;
  font-size:var(--step-0);color:var(--muted);
}
.footer ul{display:grid;gap:.7rem}
.footer a{color:var(--muted);font-size:var(--step--1);transition:color .25s ease}
.footer a:hover{color:var(--accent-bright)}
.footer__socials{display:flex;gap:.8rem;margin-top:1.3rem}
.footer__socials a{display:grid;place-items:center;width:2.3rem;height:2.3rem;border:1px solid var(--line-strong)}
.footer__socials a:hover{border-color:var(--accent)}
.footer__socials svg{width:1.05em;height:1.05em}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.75rem;color:var(--muted-dim);
}

/* ==========================================================================
   12. CARRITO — panel lateral
   ========================================================================== */
.cart-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(8,9,10,.6);
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.cart-overlay.is-open{opacity:1;pointer-events:auto}

.cart{
  position:fixed;top:0;right:0;bottom:0;z-index:201;
  width:min(420px,100%);
  background:var(--bg-soft);border-left:1px solid var(--line-strong);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .45s var(--ease);
}
.cart.is-open{transform:translateX(0)}

.cart__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.5rem 1.5rem 1.2rem;border-bottom:1px solid var(--line);
}
.cart__head h2{font-size:var(--step-2);font-weight:700}
.cart__close{
  display:grid;place-items:center;width:2.2rem;height:2.2rem;
  border:1px solid var(--line-strong);flex:none;
}
.cart__close:hover{border-color:var(--accent)}
.cart__close svg{width:1em;height:1em}

.cart__body{flex:1;overflow-y:auto;padding:1.2rem 1.5rem}
.cart__empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem;
  padding:3rem 1rem;color:var(--muted-dim);
}
.cart__empty svg{width:2.6rem;height:2.6rem;opacity:.5}

.cart__list{display:grid;gap:1.3rem}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem}
.cart-line__frame{width:64px;height:80px;overflow:hidden;border:1px solid var(--line)}
.cart-line__frame img{width:100%;height:100%;object-fit:cover}
.cart-line__name{font-size:var(--step--1);font-weight:700}
.cart-line__meta{margin-top:.15rem;font-size:.72rem;color:var(--muted-dim)}
.cart-line__row{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;gap:.6rem}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-strong)}
.stepper button{width:1.7rem;height:1.7rem;display:grid;place-items:center;font-size:.9rem;color:var(--muted)}
.stepper button:hover{color:var(--accent-bright)}
.stepper span{min-width:1.6rem;text-align:center;font-size:.78rem;font-weight:700}
.cart-line__price{font-size:var(--step--1);font-weight:800;color:var(--accent-bright);white-space:nowrap;font-variant-numeric:tabular-nums}
.cart-line__remove{
  grid-column:3;justify-self:end;
  font-size:.68rem;color:var(--muted-dim);letter-spacing:.02em;
  border-bottom:1px solid transparent;
}
.cart-line__remove:hover{color:var(--text);border-color:var(--line-strong)}

.cart__foot{border-top:1px solid var(--line);padding:1.3rem 1.5rem 1.6rem}
.cart__totals{display:grid;gap:.5rem;margin-bottom:1.2rem}
.cart__totals .cart__total-row{display:flex;justify-content:space-between;font-size:var(--step-1);color:var(--text);font-weight:800;padding-top:.2rem;font-variant-numeric:tabular-nums}
.cart__note{margin-top:1rem;font-size:.72rem;line-height:1.6;color:var(--muted-dim)}

/* ==========================================================================
   13. WHATSAPP FLOTANTE
   ========================================================================== */
.wa-float{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:130;
  display:grid;place-items:center;width:52px;height:52px;
  background:#25D366;color:#0B1F14;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.6);
  transform:translateY(140%);transition:transform .5s var(--ease);
}
.wa-float.is-visible{transform:translateY(0)}
.wa-float svg{width:26px;height:26px}

/* ==========================================================================
   14. ANIMACIÓN AL SCROLL
   ========================================================================== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .hero h1 .line span{transform:none}
  .hero__sub,.hero__cta,.hero__facts{opacity:1;transform:none}
  .hero__frame img{transform:none}
}

/* ==========================================================================
   15. RESPONSIVE — ajustes puntuales
   ========================================================================== */
@media (max-width:539px){
  .hero__facts{gap:.5rem 1.4rem}
  .cart-line{grid-template-columns:52px 1fr auto}
  .cart-line__frame{width:52px;height:65px}
}