/* ==========================================================
   STMQ · Probiotic Pop — sistema visual compartido
   Mobile-first. Base neutra (crema + tinta) + UN golpe: rosa.
   Los colores de sabor solo aparecen donde el producto manda.
   ========================================================== */

:root{
  /* color */
  --tinta:#1E1A2A;        /* off-black */
  --tinta-2:#2B2639;
  --crema:#F7EFDD;        /* off-white */
  --crema-2:#EFE3C8;
  --papel:#FBF6EA;
  --muted:#5E5770;
  --rosa:#F0417E;         /* el único acento de marca */
  --rosa-ink:#C41D58;     /* rosa para texto chico (AA sobre crema) */

  --f-frutilla:#F9CFD7; --c-frutilla:#E8336F;
  --f-pomelo:#FDD2AF;   --c-pomelo:#EE7A1F;
  --f-uva:#DACDF6;      --c-uva:#6E43B8;
  --f-lima:#D0EBCD;     --c-lima:#2F9E57;

  /* sistema de forma: un radio, un borde, una sombra (dura, sin blur) */
  --r-s:10px;
  --r:22px;
  --pill:999px;
  --line:1.5px solid var(--tinta);
  --pop:4px 4px 0 var(--tinta);

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --gutter:clamp(16px,5vw,56px);
  --max:1280px;
  --nav-h:64px;

  --display:"Fraunces", Georgia, serif;
  --body:"Hanken Grotesk", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--body);font-size:1.0625rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none !important}
.d-only{display:none}
@media (min-width:960px){.d-only{display:inline}.m-only{display:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--rosa-ink);outline-offset:3px;border-radius:6px}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico--fill{fill:currentColor;stroke:none}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(4rem,11vw,8.5rem)}

/* ---------- tipografía ---------- */
.display{
  font-family:var(--display);font-weight:900;
  font-variation-settings:"SOFT" 100,"WONK" 0;
  letter-spacing:-.035em;line-height:.92;
}
.h2{
  font-family:var(--display);font-weight:800;
  font-variation-settings:"SOFT" 100,"WONK" 0;
  font-size:clamp(2.35rem,7vw + .6rem,5rem);
  line-height:.96;letter-spacing:-.03em;
}
.h3{font-family:var(--display);font-weight:700;font-variation-settings:"SOFT" 100;font-size:clamp(1.4rem,2vw + 1rem,1.85rem);line-height:1.1;letter-spacing:-.015em}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rosa);border:1.5px solid var(--tinta)}
.lead{font-size:clamp(1.0625rem,.5vw + 1rem,1.25rem);line-height:1.5;max-width:52ch}
.muted{color:var(--muted)}
.it{font-style:italic}
.mark{background:linear-gradient(transparent 58%,var(--rosa) 58% 88%,transparent 88%);padding-inline:.06em}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:54px;padding:0 1.6rem;border-radius:var(--pill);border:var(--line);
  font-weight:800;font-size:1.0625rem;letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  box-shadow:var(--pop);background:var(--papel);color:var(--tinta);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tinta)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--tinta)}
.btn--rosa{background:var(--rosa);color:#171320}
.btn--tinta{background:var(--tinta);color:var(--crema);box-shadow:4px 4px 0 var(--rosa)}
.btn--tinta:hover{box-shadow:6px 6px 0 var(--rosa)}
.btn--tinta:active{box-shadow:1px 1px 0 var(--rosa)}
.btn--block{width:100%}
.btn .ico{transition:transform .3s var(--ease)}
.btn:hover .ico--arrow{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:800;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.25em}

/* ---------- ticker ---------- */
.ticker{background:var(--tinta);color:var(--crema);overflow:hidden;font-size:.875rem;font-weight:700;letter-spacing:.04em}
.ticker__track{display:flex;width:max-content;animation:ticker 32s linear infinite}
.ticker__track span{display:inline-flex;align-items:center;gap:1.25rem;padding:.6rem 0 .6rem 1.25rem;white-space:nowrap}
.ticker__track span::after{content:"✦";color:var(--rosa)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--crema);border-bottom:var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:1rem}
.logo{display:inline-flex;align-items:baseline;gap:.3rem;text-decoration:none;font-weight:800;font-size:1.45rem;letter-spacing:-.02em}
.logo em{font-family:var(--display);font-weight:800;font-style:italic;font-variation-settings:"SOFT" 100;color:var(--rosa-ink);font-size:1.15rem;letter-spacing:-.02em}
.nav__links{display:none}
.nav__side{display:flex;align-items:center;gap:.25rem}
.icon-btn{position:relative;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:var(--pill);background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.icon-btn:hover{background:var(--crema-2)}
.cart-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 .75rem;border-radius:var(--pill);border:0;background:transparent;cursor:pointer;font-weight:800}
.cart-btn__label{display:none}
.cart-count{
  display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;
  background:var(--rosa);color:#171320;border:1.5px solid var(--tinta);font-size:.8125rem;font-weight:800;line-height:1;
  transition:transform .35s var(--ease);
}
.cart-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35) rotate(-8deg)}}

.menu{
  position:fixed;inset:0;z-index:80;background:var(--rosa);display:flex;flex-direction:column;
  padding:0 var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  transform:translateY(-102%);transition:transform .55s var(--ease-io);visibility:hidden;
}
.menu.is-open{transform:none;visibility:visible}
.menu__top{display:flex;justify-content:space-between;align-items:center;height:var(--nav-h);border-bottom:var(--line)}
.menu .logo em{color:var(--tinta)}
.menu__links{display:grid;gap:.25rem;margin-top:2rem}
.menu__links a{font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100;font-size:clamp(2.75rem,12vw,4rem);letter-spacing:-.035em;line-height:1.05;text-decoration:none;display:flex;justify-content:space-between;align-items:center;padding-block:.35rem;border-bottom:1.5px solid rgba(30,26,42,.25)}
.menu__cans{margin-top:auto;display:flex;justify-content:center;align-items:flex-end;gap:0;height:150px}
.menu__cans img{height:130px;width:auto;margin-inline:-10px}
.menu__cans img:nth-child(odd){transform:rotate(-7deg)}
.menu__cans img:nth-child(even){transform:rotate(6deg) translateY(-8px)}

@media (min-width:960px){
  .nav__links{display:flex;gap:2rem;font-weight:700}
  .nav__links a{text-decoration:none;position:relative;padding-block:.5rem}
  .nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--rosa);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
  .nav__links a:hover::after{transform:scaleX(1)}
  .menu-toggle{display:none}
  .cart-btn{border:var(--line);padding:0 .6rem 0 1.1rem;box-shadow:var(--pop);background:var(--papel);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .cart-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tinta)}
  .cart-btn__label{display:inline}
  .cart-btn .ico{display:none}
}

/* ---------- placeholders (imágenes que faltan) ---------- */
.ph{
  position:relative;display:grid;place-content:center;justify-items:center;gap:.4rem;text-align:center;padding:1rem;
  aspect-ratio:var(--ar,4/5);border:2px dashed rgba(30,26,42,.4);border-radius:var(--r);color:var(--muted);
  background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(30,26,42,.045) 14px 28px),var(--papel);
}
.ph .ico{width:28px;height:28px;color:var(--tinta);opacity:.7}
.ph strong{display:block;color:var(--tinta);font-size:.95rem;line-height:1.25}
.ph span{font-size:.8125rem;line-height:1.35;max-width:26ch}
.ph__tag{position:absolute;top:10px;left:10px;font-size:.6875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--tinta);color:var(--crema);padding:.25rem .5rem;border-radius:6px}
.note-demo{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:700;color:var(--muted);border:1.5px dashed rgba(30,26,42,.4);border-radius:var(--pill);padding:.3rem .8rem}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.is-in{opacity:1;transform:none}

/* ==========================================================
   HOME
   ========================================================== */

/* hero */
.hero{position:relative;overflow:hidden;background:var(--f-frutilla);border-bottom:var(--line)}
.hero__in{position:relative;z-index:1;display:grid;gap:1.5rem;padding-block:1.75rem 3rem}
.hero__head{display:grid;gap:1rem;justify-items:start}
.hero__title{font-size:clamp(3.4rem,15vw,8.25rem);max-width:10.5ch}
.hero__title em{font-style:italic;font-weight:800;color:var(--rosa-ink)}
.hero__body{display:grid;gap:1.5rem}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.hero__facts{display:flex;flex-wrap:wrap;gap:.5rem}
.hero__facts li{font-size:.875rem;font-weight:700;border:var(--line);border-radius:var(--pill);padding:.3rem .8rem;background:rgba(251,246,234,.6)}

.pop-art{position:relative;display:flex;align-items:center;justify-content:center;padding-block:.5rem 1rem;isolation:isolate}
.pop-art__p{
  font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 1;
  font-size:clamp(8.25rem,40vw,15rem);line-height:.8;color:var(--rosa);letter-spacing:0;
  text-shadow:.035em .035em 0 var(--tinta);transform:translateY(-.1em);user-select:none;
}
.pop-art__can{position:relative;width:clamp(124px,33vw,236px);margin-inline:-.2rem;z-index:1}
.pop-art__can img{width:100%;animation:float 5.5s var(--ease-io) infinite alternate}
.pop-art__can::after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(30,26,42,.28),transparent);z-index:-1;animation:shadow 5.5s var(--ease-io) infinite alternate}
@keyframes float{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes shadow{from{transform:scaleX(1);opacity:1}to{transform:scaleX(.82);opacity:.6}}

.spin{position:absolute;top:-2%;right:0;width:clamp(92px,24vw,150px);aspect-ratio:1;z-index:2}
.spin svg{width:100%;height:100%;animation:spin 22s linear infinite}
.spin__core{position:absolute;inset:30%;display:grid;place-items:center;border-radius:50%;background:var(--rosa);border:var(--line);font-family:var(--display);font-weight:900;font-size:clamp(1rem,4vw,1.5rem);line-height:.9;text-align:center}
.spin__core small{display:block;font-family:var(--body);font-size:.5em;font-weight:800;letter-spacing:.06em}
@keyframes spin{to{transform:rotate(360deg)}}

.bubbles{position:absolute;inset:0;pointer-events:none;z-index:0}
.bubbles i{position:absolute;bottom:-40px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;border:1.5px solid rgba(30,26,42,.22);background:rgba(251,246,234,.35);animation:rise var(--t) var(--dl) infinite cubic-bezier(.45,.05,.55,.95)}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(var(--w,14px),-115vh);opacity:0}}

@media (min-width:960px){
  .hero__in{grid-template-columns:1.05fr 1fr;grid-template-areas:"head art" "body art";align-content:center;column-gap:3rem;row-gap:2rem;min-height:min(calc(100svh - var(--nav-h) - 36px),820px);padding-block:3rem}
  .hero__head{grid-area:head;align-self:end}
  .hero__body{grid-area:body;align-self:start}
  .pop-art{grid-area:art}
}

/* manifiesto */
.manifesto__text{font-family:var(--display);font-weight:500;font-variation-settings:"SOFT" 100;font-size:clamp(1.85rem,4.6vw + .6rem,4.15rem);line-height:1.1;letter-spacing:-.022em;max-width:23ch}
.manifesto__text .it{font-weight:700;color:var(--rosa-ink)}
.inline-can{display:inline-block;height:1.05em;width:auto;vertical-align:-.16em;transform:rotate(-10deg);margin-inline:.05em}
.manifesto__foot{display:flex;flex-wrap:wrap;gap:.75rem 2rem;margin-top:clamp(2rem,5vw,3.5rem);padding-top:1.25rem;border-top:var(--line);font-weight:700}
.manifesto__foot span{display:inline-flex;align-items:center;gap:.5rem}
.manifesto__grid{display:grid;gap:2rem}
@media (min-width:960px){
  .manifesto__grid{grid-template-columns:auto 1fr;gap:4rem;align-items:start}
  .manifesto__grid .eyebrow{position:sticky;top:120px;margin-top:1rem}
}

/* sabores (switcher) */
.sabores{--fbg:var(--f-frutilla);--fc:var(--c-frutilla);background:var(--fbg);border-block:var(--line);transition:background-color .7s var(--ease);overflow:hidden}
.sabores__head{display:grid;gap:1rem;margin-bottom:2rem}
.flav-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.flav-tab{
  display:flex;align-items:center;gap:.6rem;min-height:50px;padding:0 1rem;border:var(--line);border-radius:var(--pill);
  background:var(--papel);font-weight:800;cursor:pointer;text-align:left;
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.flav-tab .dot{width:14px;height:14px;border-radius:50%;background:var(--c);border:1.5px solid var(--tinta);flex:none}
.flav-tab[aria-selected="true"]{background:var(--tinta);color:var(--crema);box-shadow:3px 3px 0 var(--fc)}
.flav-tab[aria-selected="true"] .dot{border-color:var(--crema)}

.flav-stage{display:grid;gap:1.5rem;margin-top:1.75rem;touch-action:pan-y}
.flav-name{font-size:clamp(3.6rem,17vw,7.5rem)}
.flav-body{display:grid;grid-template-columns:1.05fr 1fr;gap:1rem;align-items:center}
.flav-can{position:relative;display:grid;place-items:center;min-height:300px}
.flav-can::before{content:"";position:absolute;width:88%;aspect-ratio:1;border-radius:50%;background:var(--papel);border:var(--line);opacity:.55}
.flav-can img{position:relative;height:300px;width:auto;max-width:none;filter:drop-shadow(0 18px 18px rgba(30,26,42,.18))}
.meter{display:grid;gap:1rem}
.meter dt{font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.meter dd{display:flex;gap:5px;margin-top:.35rem}
.meter dd i{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--tinta)}
.meter dd i.on{background:var(--tinta)}
.flav-ideal{font-family:var(--display);font-style:italic;font-weight:600;font-size:1.125rem;line-height:1.2}
.flav-info{display:grid;gap:1.25rem}
.flav-buy{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem}
.flav-price{font-weight:800;font-size:1.25rem}
.flav-price small{display:block;font-weight:600;font-size:.875rem;color:var(--muted)}
.swap-out{opacity:0;transform:translateY(10px)}
.flav-swap{transition:opacity .28s var(--ease),transform .28s var(--ease)}

.variedad{
  position:relative;display:grid;gap:1.25rem;margin-top:3.5rem;padding:1.5rem;border:var(--line);border-radius:var(--r);
  background:var(--papel);box-shadow:var(--pop);overflow:hidden;
}
.variedad__fan{position:relative;height:190px;display:flex;justify-content:center;align-items:flex-end}
.variedad__fan img{height:170px;width:auto;margin-inline:-18px;transition:transform .5s var(--ease)}
.variedad__fan img:nth-child(1){transform:rotate(-12deg) translateY(6px)}
.variedad__fan img:nth-child(2){transform:rotate(-4deg) translateY(-6px)}
.variedad__fan img:nth-child(3){transform:rotate(4deg) translateY(-6px)}
.variedad__fan img:nth-child(4){transform:rotate(12deg) translateY(6px)}
.variedad:hover .variedad__fan img:nth-child(1){transform:rotate(-18deg) translate(-10px,4px)}
.variedad:hover .variedad__fan img:nth-child(4){transform:rotate(18deg) translate(10px,4px)}
.variedad__tag{position:absolute;top:1rem;left:1rem;z-index:1;background:var(--rosa);border:var(--line);border-radius:var(--pill);padding:.3rem .8rem;font-size:.8125rem;font-weight:800;transform:rotate(-4deg)}

@media (min-width:960px){
  .sabores__head{grid-template-columns:1fr auto;align-items:end}
  .sabores__grid{display:grid;grid-template-columns:260px 1fr;gap:3rem;align-items:center}
  .flav-tabs{grid-template-columns:1fr;gap:.25rem}
  .flav-tab{min-height:auto;padding:.5rem 0;border:0;border-bottom:1.5px solid rgba(30,26,42,.25);border-radius:0;background:transparent;font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100;font-size:2rem;letter-spacing:-.03em}
  .flav-tab .dot{width:18px;height:18px}
  .flav-tab[aria-selected="true"]{background:transparent;color:var(--tinta);box-shadow:none;transform:translateX(10px)}
  .flav-tab:hover{transform:translateX(10px)}
  .flav-stage{margin-top:0;grid-template-columns:1.1fr 1fr;grid-template-areas:"can name" "can info";column-gap:3rem;row-gap:1.5rem}
  .flav-name{grid-area:name;align-self:end}
  .flav-body{grid-area:can;grid-template-columns:1fr;justify-items:center}
  .flav-info{grid-area:info;align-self:start}
  .flav-body .meter{display:none}
  .flav-can{min-height:520px;width:100%}
  .flav-can img{height:500px}
  .flav-info .meter{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:1.5rem}
  .variedad{grid-template-columns:320px 1fr auto;align-items:center;padding:1.5rem 2.5rem}
}
.flav-info .meter{display:none}
@media (min-width:960px){.flav-info .meter{display:grid}}

/* adentro */
.adentro__head{display:grid;gap:1rem;margin-bottom:2.25rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;min-height:200px;padding:1.25rem;border:var(--line);border-radius:var(--r);background:var(--papel)}
.tile p{font-size:1rem;line-height:1.4}
.tile__num{font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100;font-size:clamp(3.6rem,17vw,8.5rem);line-height:.82;letter-spacing:-.05em}
.tile__num sup{font-size:.4em;vertical-align:.95em;letter-spacing:0;margin-left:.05em}
.tile--big{grid-column:span 2;background:var(--rosa);min-height:280px}
.tile--big .tile__num{font-size:clamp(7rem,40vw,15rem)}
.tile--big p{font-size:1.125rem;max-width:26ch}
.tile--dark{grid-column:span 2;background:var(--tinta);color:var(--crema)}
.tile--dark .tile__name{font-family:var(--display);font-style:italic;font-weight:700;font-size:clamp(2rem,7vw,3rem);line-height:1;letter-spacing:-.02em}
.sin{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.sin li{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:0 1rem;border:var(--line);border-radius:var(--pill);font-weight:700;font-size:.9375rem}
.sin .ico{width:18px;height:18px}
@media (min-width:960px){
  .adentro__head{grid-template-columns:1fr 1fr;align-items:end}
  .tiles{grid-template-columns:repeat(4,1fr);gap:16px}
  .tile{padding:1.75rem;min-height:250px}
  .tile--big{grid-row:span 2}
}

/* heladera */
.heladera{background:var(--tinta);color:var(--crema);display:grid;border-block:var(--line)}
.heladera__img{aspect-ratio:4/5;overflow:hidden}
.heladera__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.heladera:hover .heladera__img img{transform:scale(1.03)}
.heladera__txt{display:grid;gap:1.5rem;align-content:center;padding:3rem var(--gutter) 3.5rem}
.heladera .eyebrow::before{border-color:var(--crema)}
.packs-list{border-top:1.5px solid rgba(247,239,221,.25)}
.packs-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:64px;border-bottom:1.5px solid rgba(247,239,221,.25);font-weight:700}
.packs-list b{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.packs-list .chip{display:inline-block;margin-left:.5rem;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--rosa);color:#171320;padding:.2rem .55rem;border-radius:var(--pill);vertical-align:.15em}
.packs-list small{display:block;font-weight:500;color:rgba(247,239,221,.72);font-size:.875rem}
@media (min-width:960px){
  .heladera{grid-template-columns:1.1fr 1fr}
  .heladera__img{aspect-ratio:auto;min-height:760px;border-right:var(--line)}
  .heladera__txt{padding:4rem clamp(2rem,5vw,5rem)}
}

/* reseñas */
.resenas{background:var(--crema-2)}
.resenas__head{display:grid;gap:1rem;margin-bottom:1.5rem}
.res-track{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px var(--gutter) 30px;margin-inline:calc(var(--gutter) * -1);scrollbar-width:none}
.res-track::-webkit-scrollbar{display:none}
.res-card{scroll-snap-align:center;display:flex;flex-direction:column;gap:1rem;justify-content:space-between;padding:1.5rem;border:var(--line);border-radius:var(--r);background:var(--bg,var(--papel));box-shadow:var(--pop);transform:rotate(var(--rot,0deg));transition:transform .4s var(--ease)}
.res-card:hover{transform:rotate(0) translateY(-4px)}
.res-card blockquote{font-family:var(--display);font-weight:500;font-variation-settings:"SOFT" 100;font-size:1.375rem;line-height:1.25;letter-spacing:-.01em}
.res-card footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-weight:700;font-size:.9375rem}
.res-card footer span{border:var(--line);border-radius:var(--pill);padding:.15rem .6rem;font-size:.8125rem;background:var(--papel)}
.stars{display:flex;gap:2px;color:var(--tinta)}
.stars .ico{width:18px;height:18px}
@media (min-width:960px){
  .resenas__head{grid-template-columns:1fr auto;align-items:end}
  .res-track{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin-inline:0;padding-inline:0;gap:20px}
  .res-card:nth-child(even){margin-top:2.5rem}
}

/* marca */
.marca__grid{display:grid;gap:3rem}
.collage{position:relative;padding-bottom:22%}
.collage__a{width:74%;border:var(--line);border-radius:var(--r);overflow:hidden}
.collage__b{position:absolute;right:0;bottom:0;width:50%;border:var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--pop);transform:rotate(3deg)}
.collage__sticker{position:absolute;top:6%;right:4%;z-index:2;display:grid;place-items:center;width:96px;aspect-ratio:1;border-radius:50%;background:var(--rosa);border:var(--line);font-weight:800;font-size:.8125rem;line-height:1.1;text-align:center;letter-spacing:.02em;transform:rotate(12deg);padding:.5rem}
.marca__txt{display:grid;gap:1.25rem;align-content:center}
.marca__txt p{max-width:48ch}
@media (min-width:960px){.marca__grid{grid-template-columns:1fr 1fr;gap:5rem;align-items:center}}

/* final */
.final{background:var(--rosa);border-top:var(--line);overflow:hidden}
.final__in{display:grid;gap:1.5rem;padding-top:clamp(4rem,10vw,7rem)}
.final__word{font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(9rem,44vw,31rem);line-height:1;letter-spacing:-.05em;color:var(--tinta);white-space:nowrap;margin-top:-.25em;margin-bottom:-.1em;user-select:none}
.final__row{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}

/* footer */
.footer{background:var(--tinta);color:var(--crema);padding-block:3.5rem calc(2rem + env(safe-area-inset-bottom))}
.footer__grid{display:grid;gap:2.5rem}
.footer .logo{font-size:2rem}
.footer .logo em{color:var(--rosa)}
.footer h4{font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,239,221,.7);margin-bottom:.75rem}
.footer li a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none}
.footer li a:hover{text-decoration:underline;text-underline-offset:.25em}
.news{display:grid;gap:.75rem;max-width:420px}
.news__row{display:flex;gap:.5rem}
.news input{flex:1;min-width:0;min-height:52px;padding:0 1.1rem;border-radius:var(--pill);border:1.5px solid rgba(247,239,221,.5);background:transparent;color:var(--crema)}
.news input::placeholder{color:rgba(247,239,221,.6)}
.news .btn{min-height:52px;box-shadow:none;padding:0 1.2rem}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1.5px solid rgba(247,239,221,.2);font-size:.875rem;color:rgba(247,239,221,.7)}
.social{display:flex;gap:.5rem}
.social a{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid rgba(247,239,221,.4);border-radius:50%}
.footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1.5rem}
.footer__grid>*{min-width:0}
.news input{width:100%}
.footer__grid>:first-child,.footer__grid>.news{grid-column:1 / -1}
@media (min-width:768px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.4fr}.footer__grid>:first-child,.footer__grid>.news{grid-column:auto}}

/* ==========================================================
   CARRITO (drawer)
   ========================================================== */
.drawer{position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility 0s .5s}
.drawer.is-open{visibility:visible;transition:visibility 0s}
.drawer__scrim{position:absolute;inset:0;background:rgba(30,26,42,.55);opacity:0;transition:opacity .45s var(--ease);border:0;width:100%;cursor:pointer}
.drawer__panel{position:absolute;top:0;right:0;display:flex;flex-direction:column;width:min(100%,440px);height:100%;background:var(--crema);border-left:var(--line);transform:translateX(100%);transition:transform .5s var(--ease-io)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;justify-content:space-between;align-items:center;min-height:var(--nav-h);padding:0 .5rem 0 var(--gutter);border-bottom:var(--line)}
.drawer__head h2{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100;font-size:1.75rem;letter-spacing:-.025em}
.drawer__head h2 span{font-family:var(--body);font-size:1rem;font-weight:700;color:var(--muted);margin-left:.35rem;letter-spacing:0}
.ship{padding:1rem var(--gutter);border-bottom:var(--line);background:var(--papel)}
.ship p{font-size:.9375rem;font-weight:600;margin-bottom:.6rem}
.ship__bar{height:12px;border:var(--line);border-radius:var(--pill);overflow:hidden;background:var(--crema)}
.ship__bar i{display:block;height:100%;width:var(--p,0%);background:var(--rosa);border-right:1.5px solid var(--tinta);transition:width .6s var(--ease)}
.drawer__body{flex:1;overflow-y:auto;padding:.5rem var(--gutter) 1rem;overscroll-behavior:contain}
.line{display:grid;grid-template-columns:76px 1fr;gap:.9rem;padding-block:1rem;border-bottom:1.5px solid rgba(30,26,42,.15)}
.line__thumb{position:relative;display:grid;place-items:center;height:96px;border:var(--line);border-radius:var(--r-s);background:var(--bg);overflow:hidden}
.line__thumb img{height:84px;width:auto}
.line__top{display:flex;justify-content:space-between;gap:.5rem;align-items:start}
.line__name{font-weight:800;line-height:1.2}
.line__meta{font-size:.875rem;color:var(--muted);margin-top:.15rem}
.line__price{font-weight:800;white-space:nowrap}
.line__price s{display:block;font-weight:500;color:var(--muted);font-size:.8125rem;text-align:right}
.line__bottom{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem}
.qty{display:inline-flex;align-items:center;border:var(--line);border-radius:var(--pill);background:var(--papel)}
.qty button{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;border-radius:var(--pill);cursor:pointer}
.qty button .ico{width:18px;height:18px}
.qty output,.qty span{min-width:2ch;text-align:center;font-weight:800}
.remove{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;border:0;background:transparent;color:var(--muted);font-size:.875rem;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.upsell{display:grid;grid-template-columns:56px 1fr auto;gap:.75rem;align-items:center;margin-top:1.25rem;padding:.75rem;border:1.5px dashed rgba(30,26,42,.45);border-radius:var(--r-s)}
.upsell__thumb{display:grid;place-items:center;height:64px;border-radius:8px;background:var(--bg)}
.upsell__thumb img{height:56px;width:auto}
.upsell p{font-size:.9375rem;line-height:1.3}
.upsell b{display:block}
.upsell button{min-height:44px;padding:0 1rem;border:var(--line);border-radius:var(--pill);background:var(--papel);font-weight:800;cursor:pointer}
.drawer__foot{padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));border-top:var(--line);background:var(--papel);display:grid;gap:.75rem}
.drawer__total{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:1.125rem}
.drawer__total b{font-family:var(--display);font-size:1.75rem;letter-spacing:-.02em}
.drawer__fine{font-size:.8125rem;color:var(--muted);text-align:center}
.empty{display:grid;justify-items:center;gap:1rem;text-align:center;padding:3rem 1rem}
.empty img{height:150px;width:auto;transform:rotate(-10deg);opacity:.9}
.empty p{font-family:var(--display);font-weight:600;font-size:1.375rem;line-height:1.2;max-width:20ch}
html.lock{overflow:hidden}

/* ==========================================================
   PDP — página de producto
   ========================================================== */
.pdp{display:grid;gap:1.75rem;padding-bottom:3.5rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.875rem;font-weight:600;color:var(--muted);padding-block:.9rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* galería */
.gal{position:relative;margin-inline:calc(var(--gutter) * -1)}
.gal__main{position:relative}
.gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--fbg,var(--f-frutilla));border-block:var(--line);transition:background-color .6s var(--ease)}
.gal__track::-webkit-scrollbar{display:none}
.pdp>*{min-width:0}
.gal__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;aspect-ratio:4/5;position:relative;display:grid;place-items:center;overflow:hidden}
.gal__slide>img{width:100%;height:100%;object-fit:cover}
.gal__slide--contain{background:#fff}
.gal__slide--contain>img{object-fit:contain}
.gal__slide .ph{position:absolute;inset:1rem;aspect-ratio:auto;background-color:var(--papel)}
.gal__slide .ph__tag{top:auto;bottom:10px}
.gal__count{position:absolute;right:calc(var(--gutter));bottom:14px;background:var(--tinta);color:var(--crema);font-size:.8125rem;font-weight:800;padding:.3rem .7rem;border-radius:var(--pill)}
.gal__badge{position:absolute;top:14px;left:var(--gutter);z-index:1;display:grid;place-items:center;width:86px;aspect-ratio:1;border-radius:50%;background:var(--rosa);border:var(--line);font-family:var(--display);font-weight:900;font-size:1.5rem;line-height:.85;text-align:center;transform:rotate(-10deg);pointer-events:none}
.gal__badge small{display:block;font-family:var(--body);font-size:.6875rem;font-weight:800;letter-spacing:.06em}
.gal__dots{display:flex;justify-content:center;gap:6px;padding-top:12px}
.gal__dots button{width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid var(--tinta);background:transparent;cursor:pointer;position:relative;transition:width .35s var(--ease),background-color .3s}
.gal__dots button::before{content:"";position:absolute;inset:-17px -6px}
.gal__dots button[aria-current="true"]{width:26px;border-radius:6px;background:var(--tinta)}
.gal__thumbs{display:none}
.gal__arrows{display:none}

/* caja de compra */
.buy{display:grid;gap:1.35rem}
.buy__kicker{font-size:.875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.buy h1{font-size:clamp(2.75rem,11vw,4.5rem);margin-top:.3rem}
.buy h1 span{display:block;font-style:italic;font-weight:800;color:var(--rosa-ink)}
.rating{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:.9375rem}
.rating a{color:var(--muted)}
.hook{font-family:var(--display);font-style:italic;font-weight:500;font-variation-settings:"SOFT" 100;font-size:clamp(1.3rem,1.5vw + 1rem,1.6rem);line-height:1.2;letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{display:inline-flex;align-items:center;gap:.35rem;min-height:36px;padding:0 .8rem;border:var(--line);border-radius:var(--pill);background:var(--papel);font-size:.9375rem;font-weight:700}
.chips b{font-family:var(--display);font-weight:900;font-size:1.05rem}
.price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .8rem}
.price{font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100;font-size:2.4rem;letter-spacing:-.03em;line-height:1}
.price-row s{color:var(--muted);font-weight:600}
.price-row .off{background:var(--rosa);border:var(--line);border-radius:var(--pill);padding:.15rem .6rem;font-weight:800;font-size:.8125rem}
.price-row .unit{width:100%;color:var(--muted);font-size:.9375rem;font-weight:600}

.opt{border:0;padding:0;margin:0;display:grid;gap:.6rem}
.opt legend{font-weight:800;margin-bottom:.6rem;padding:0}
.opt legend span{font-weight:600;color:var(--muted)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.swatch{position:relative;display:grid;justify-items:center;gap:.25rem;padding:.55rem .25rem .6rem;border:var(--line);border-radius:var(--r-s);background:var(--bg);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.swatch img{height:74px;width:auto;transition:transform .35s var(--ease)}
.swatch span{font-size:.8125rem;font-weight:800;line-height:1.1;text-align:center}
.swatch:hover img{transform:translateY(-3px) rotate(-4deg)}
.swatch[aria-checked="true"]{box-shadow:var(--pop);transform:translate(-2px,-2px)}
.swatch[aria-checked="true"]::after{content:"";position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;background:var(--tinta);box-shadow:0 0 0 2.5px var(--papel)}

.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pack{position:relative;display:grid;gap:.15rem;justify-items:center;text-align:center;padding:1rem .25rem .8rem;border:var(--line);border-radius:var(--r-s);background:var(--papel);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s}
.pack b{font-family:var(--display);font-weight:900;font-size:1.6rem;line-height:1;letter-spacing:-.02em}
.pack span{font-size:.875rem;font-weight:700}
.pack small{font-size:.8125rem;color:var(--muted);font-weight:600}
.pack[aria-checked="true"]{background:var(--tinta);color:var(--crema);box-shadow:3px 3px 0 var(--rosa)}
.pack[aria-checked="true"] small{color:rgba(247,239,221,.75)}
.pack__tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--rosa);color:#171320;border:var(--line);border-radius:var(--pill);padding:.05rem .5rem;font-size:.6875rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

.modes{display:grid;gap:8px}
.mode{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;min-height:64px;padding:.8rem 1rem;border:var(--line);border-radius:var(--r-s);background:var(--papel);cursor:pointer;text-align:left;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.mode__radio{width:22px;height:22px;border-radius:50%;border:var(--line);display:grid;place-items:center;background:var(--crema)}
.mode[aria-checked="true"]{box-shadow:var(--pop);transform:translate(-2px,-2px)}
.mode[aria-checked="true"] .mode__radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--rosa-ink)}
.mode b{display:block;line-height:1.2}
.mode small{display:block;font-size:.875rem;color:var(--muted);font-weight:600;line-height:1.3;margin-top:.15rem}
.mode__price{font-weight:800;white-space:nowrap}
.freq{display:none;align-items:center;gap:.6rem;padding:.25rem 0 0 2.4rem;font-size:.9375rem;font-weight:700}
.freq.is-on{display:flex}
.freq select{min-height:44px;padding:0 2.2rem 0 .9rem;border:var(--line);border-radius:var(--pill);background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E1A2A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center;appearance:none;font-weight:700;cursor:pointer}

.atc{display:grid;grid-template-columns:auto 1fr;gap:.6rem}
.atc .qty{height:58px}
.atc .qty button{height:56px}
.atc .btn{min-height:58px;white-space:nowrap;padding:0 1.1rem}
@media (max-width:359px){.atc__total{display:none}}
.trust{display:grid;gap:.1rem;border-top:var(--line);padding-top:.6rem}
.trust li{display:flex;align-items:center;gap:.75rem;min-height:44px;font-size:.9375rem;font-weight:600}
.trust .ico{color:var(--rosa-ink)}

@media (min-width:960px){
  .pdp{grid-template-columns:1.15fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start;padding-top:.5rem}
  .gal{margin-inline:0;position:sticky;top:calc(var(--nav-h) + 20px)}
  .gal__track{border:var(--line);border-radius:var(--r)}
  .gal__count{right:16px}
  .gal__badge{left:16px}
  .gal__dots{display:none}
  .gal__thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:10px}
  .gal__thumbs button{aspect-ratio:1;padding:0;border:var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--papel);cursor:pointer;opacity:.6;transition:opacity .25s,transform .25s var(--ease)}
  .gal__thumbs button img{width:100%;height:100%;object-fit:cover}
  .gal__thumbs button .ico{margin:auto;width:20px;height:20px}
  .gal__thumbs button[aria-current="true"]{opacity:1;box-shadow:3px 3px 0 var(--tinta);transform:translate(-1px,-1px)}
  .gal__arrows{display:flex;gap:8px;position:absolute;right:16px;top:16px}
  .gal__arrows button{display:grid;place-items:center;width:48px;height:48px;border:var(--line);border-radius:50%;background:var(--papel);cursor:pointer;box-shadow:3px 3px 0 var(--tinta)}
  .buy{padding-top:1rem}
}

/* sticky add-to-cart (solo mobile) */
.sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:.75rem;padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));background:var(--crema);border-top:var(--line);transform:translateY(110%);transition:transform .45s var(--ease)}
.sticky-atc.is-on{transform:none}
.sticky-atc__thumb{display:grid;place-items:center;width:48px;height:56px;border:var(--line);border-radius:8px;background:var(--bg);flex:none}
.sticky-atc__thumb img{height:48px;width:auto}
.sticky-atc__txt{flex:1;min-width:0;line-height:1.2}
.sticky-atc__txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-atc__txt span{font-size:.875rem;color:var(--muted);font-weight:600}
.sticky-atc .btn{min-height:50px;padding:0 1.2rem;box-shadow:3px 3px 0 var(--tinta)}
@media (min-width:960px){.sticky-atc{display:none}}

/* te suena (dolores, en chat) */
.suena{background:var(--tinta);color:var(--crema)}
.suena__grid{display:grid;gap:3rem}
.chat{display:grid;gap:.6rem;max-width:560px;padding:1.25rem;border:1.5px solid rgba(247,239,221,.25);border-radius:var(--r);background:var(--tinta-2)}
.chat__head{display:flex;align-items:center;gap:.75rem;padding-bottom:.85rem;margin-bottom:.4rem;border-bottom:1.5px solid rgba(247,239,221,.15)}
.chat__avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--rosa);color:#171320;font-weight:800;border:1.5px solid var(--crema)}
.chat__head b{display:block;line-height:1.1}
.chat__head small{color:rgba(247,239,221,.65);font-size:.8125rem}
.msg{justify-self:start;max-width:86%;padding:.7rem .95rem .5rem;border-radius:18px 18px 18px 5px;background:var(--papel);color:var(--tinta);font-size:1.0625rem;line-height:1.35}
.msg cite{display:block;font-style:normal;font-size:.8125rem;font-weight:800;color:var(--rosa-ink);margin-bottom:.1rem}
.msg time{display:block;text-align:right;font-size:.75rem;color:var(--muted);margin-top:.2rem}
.msg--me{justify-self:end;background:var(--rosa);color:#171320;border-radius:18px 18px 5px 18px}
.msg--me time{color:rgba(23,19,32,.7)}
.suena__txt{display:grid;gap:1.5rem;align-content:center}
.suena__txt .h2 em{font-style:italic;color:var(--rosa)}
.suena__txt p{color:rgba(247,239,221,.85);max-width:46ch}
.suena .eyebrow::before{border-color:var(--crema)}
@media (min-width:960px){.suena__grid{grid-template-columns:1fr 1fr;gap:5rem;align-items:center}}

/* beneficios */
.ben__grid{display:grid;gap:2.5rem}
.ben__img{border:var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-height:72svh}
.ben__img img{width:100%;height:100%;object-fit:cover}
.ben__list li{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.25rem;padding-block:1.6rem;border-top:var(--line)}
.ben__list li:last-child{border-bottom:var(--line)}
.ben__num{font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100;font-size:2.75rem;line-height:.85;color:var(--rosa-ink);letter-spacing:-.03em;min-width:1.6em}
.ben__list h3{margin-bottom:.45rem}
.ben__list p{max-width:48ch}
@media (min-width:960px){
  .ben__grid{grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:start}
  .ben__img{position:sticky;top:calc(var(--nav-h) + 24px);max-height:none}
}

/* comparativa */
.cmp-wrap{margin-top:2.25rem;border:var(--line);border-radius:var(--r);background:var(--papel);overflow:hidden;box-shadow:var(--pop)}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed}
.cmp th,.cmp td{padding:.95rem .5rem;text-align:center;border-bottom:1.5px solid rgba(30,26,42,.15);font-size:1rem;line-height:1.25;vertical-align:middle}
.cmp thead th{font-size:.8125rem;font-weight:800;padding:1.1rem .3rem;vertical-align:bottom}
.cmp tbody th{text-align:left;font-weight:700;padding-left:1rem;font-size:.9375rem}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp .us{background:var(--rosa);font-weight:800;border-inline:var(--line)}
.cmp thead .us{font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em}
.cmp .ico{margin:auto;width:20px;height:20px}
.cmp col.c0{width:31%}
@media (min-width:768px){.cmp th,.cmp td{padding:1.1rem 1rem;font-size:1.0625rem}.cmp thead th{font-size:1rem}.cmp-wrap{max-width:900px}}

/* adentro de la lata */
.lata__grid{display:grid;gap:2.5rem}
.ingr{font-size:1.125rem;line-height:1.55;max-width:56ch}
.ingr b{background:linear-gradient(transparent 60%,rgba(240,65,126,.45) 60%)}
.nutri{border:var(--line);border-radius:var(--r);overflow:hidden;background:var(--papel)}
.nutri table{width:100%;border-collapse:collapse}
.nutri__head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap;padding:1rem 1.1rem;font-weight:800;background:var(--tinta);color:var(--crema)}
.nutri__head span{font-weight:600;color:rgba(247,239,221,.72);font-size:.875rem}
.nutri th,.nutri td{padding:.8rem 1.1rem;border-bottom:1.5px solid rgba(30,26,42,.12);text-align:left;font-weight:600}
.nutri td{text-align:right;font-weight:800;white-space:nowrap}
.nutri tr.sub th{padding-left:2rem;font-weight:500}
.nutri tr:last-child th,.nutri tr:last-child td{border-bottom:0}
.lata__img{border:var(--line);border-radius:var(--r);overflow:hidden;background:var(--f-frutilla)}
@media (min-width:960px){.lata__grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}}

/* ritual */
.ritual{background:var(--crema-2);border-block:var(--line)}
.ritual__grid{display:grid;gap:2.5rem}
.steps{display:grid;gap:12px;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding:1.25rem;border:var(--line);border-radius:var(--r);background:var(--papel)}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--rosa);border:var(--line);font-family:var(--display);font-weight:900;font-size:1.5rem}
.step h3{margin-bottom:.3rem}
.ritual__media{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ritual__media img{border:var(--line);border-radius:var(--r);aspect-ratio:9/16;object-fit:cover;width:100%;height:100%}
.ritual__media .ph{--ar:9/16}
@media (min-width:960px){.ritual__grid{grid-template-columns:1fr 1fr;gap:5rem;align-items:center}}

/* reseñas PDP */
.rev__grid{display:grid;gap:2rem}
.rev__sum{display:grid;gap:1rem;align-content:start;padding:1.5rem;border:var(--line);border-radius:var(--r);background:var(--papel)}
.rev__score{display:flex;align-items:baseline;gap:.75rem}
.rev__score b{font-family:var(--display);font-weight:900;font-size:4.5rem;line-height:.85;letter-spacing:-.04em}
.bars{display:grid;gap:.45rem}
.bars li{display:grid;grid-template-columns:2.2em 1fr 2.6em;gap:.6rem;align-items:center;font-size:.875rem;font-weight:700}
.bars i{height:10px;border:1.5px solid var(--tinta);border-radius:var(--pill);overflow:hidden;background:var(--crema)}
.bars i::after{content:"";display:block;height:100%;width:var(--w);background:var(--tinta)}
.rev__list{display:grid;gap:14px}
.rev{display:grid;gap:.85rem;padding:1.25rem;border:var(--line);border-radius:var(--r);background:var(--papel)}
.rev__top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.rev__who{font-weight:800}
.rev__who small{display:block;font-weight:600;color:var(--muted);font-size:.8125rem}
.rev h3{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.2}
.rev .ph{--ar:1/1;max-width:140px;padding:.5rem;border-radius:var(--r-s)}
.rev .ph .ico{width:22px;height:22px}
.rev .ph span{font-size:.75rem}
@media (min-width:960px){
  .rev__grid{grid-template-columns:340px 1fr;gap:3rem;align-items:start}
  .rev__sum{position:sticky;top:calc(var(--nav-h) + 24px)}
  .rev__list{grid-template-columns:1fr 1fr}
}

/* FAQ */
.faq__grid{display:grid;gap:2rem}
.faq details{border-top:var(--line)}
.faq details:last-child{border-bottom:var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:68px;padding-block:.9rem;cursor:pointer;list-style:none;font-weight:800;font-size:1.125rem;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{display:grid;place-items:center;width:36px;height:36px;border:var(--line);border-radius:50%;flex:none;transition:transform .35s var(--ease),background-color .3s}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--rosa)}
.faq details p{padding:0 0 1.35rem;max-width:62ch;color:var(--tinta)}
@media (min-width:960px){.faq__grid{grid-template-columns:.8fr 1.2fr;gap:5rem}}

/* cross-sell */
.otros{background:var(--papel);border-top:var(--line)}
.otros__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:2rem}
.otro{display:grid;justify-items:center;gap:.5rem;padding:1rem .5rem 1.1rem;border:var(--line);border-radius:var(--r);background:var(--bg);text-decoration:none;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.otro:hover{transform:translate(-2px,-4px);box-shadow:var(--pop)}
.otro img{height:clamp(120px,32vw,260px);width:auto;transition:transform .45s var(--ease)}
.otro:hover img{transform:rotate(-6deg) scale(1.03)}
.otro b{font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,3.5vw,1.6rem);letter-spacing:-.02em;line-height:1.05}
.otro span{font-size:.875rem;font-weight:700;color:var(--muted)}
@media (min-width:960px){.otros__grid{gap:20px}}

.sec-head{display:grid;gap:1rem;margin-bottom:2.25rem}
.sec-head p{max-width:52ch}

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