/** Shopify CDN: Minification failed

Line 497:0 Unexpected "}"

**/
/* Natugo — home custom. Generado desde el mockup aprobado. */
/* ============================================================
   NATUGO · CONCEPTO D — "LA HISTORIA EN COLORES"
   El scrollytelling en 4 capítulos del Concepto C,
   contado en el mundo de color alegre y maximalista del Concepto A.
   Arco: suave/apagado → explosión de color. Nunca oscuro.
   Type: Superclarendon (slab narrativa) + Avenir Next (humanista)
   + rounded para botones, kickers y stickers (energía A).
   ============================================================ */
:root{
  --teal:#6DB69B; --viridian:#2EA27B; --olive:#6A744C; --deep:#153F38;
  --mint:#A7D3C3; --sand:#D3C6A9; --cream:#FBF7EE; --ink:#20302B;
  --yellow:#FFC93C; --coral:#FF5A5F; --aqua:#37C7CE; --orange:#FF8A3D;
  --purple:#9B5DE5; --pink:#FF9EC4; --blue:#4D8FE8;
  --hush:#ECE8DA;            /* capítulo 1: la duda — crema desaturada, cálida */
  --page-bg:var(--hush);     /* la página cambia de color al scrollear */
  --display:"Fraunces","Big Caslon","Georgia",serif;
  --lime:#C8E302; --wmint:#DDF3EA; --lav:#CDBBEF;
  --body:"Nunito Sans","Avenir Next","Trebuchet MS",sans-serif;
  --round:"Nunito","Avenir Next Rounded",ui-rounded,"Trebuchet MS",sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-pop:0 18px 40px -18px rgba(21,63,56,.3);
  --r-lg:28px; --r-xl:40px; --r-md:18px; --r-sm:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
html{background:var(--page-bg,#FBF7EE)}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--page-bg);
  transition:background-color .9s ease;
  overflow-x:hidden;
  line-height:1.6;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- type scale ---------- */
.h-giant{font-family:var(--display);font-weight:900;font-size:clamp(4rem,8vw,9.6rem);line-height:1.03;letter-spacing:-.015em}
.h-xl{font-family:var(--display);font-weight:900;font-size:clamp(3.2rem,5.2vw,5.92rem);line-height:1.07;letter-spacing:-.01em}
.h-lg{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,3.4vw,3.84rem);line-height:1.12}
.kicker{
  display:inline-flex;align-items:center;gap:0.8rem;
  font-family:var(--round);font-size:1.28rem;letter-spacing:.14em;text-transform:uppercase;
  padding:0.72rem 1.76rem;border-radius:999px;
}
.lead{font-size:clamp(1.68rem,1.6vw,2.048rem);line-height:1.6;max-width:58ch}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.76rem,4vw,3.52rem)}

/* ---------- botones (energía A) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:0.88rem;
  font-family:var(--round);font-size:1.6rem;font-weight:700;
  padding:1.52rem 3.04rem;border-radius:999px;
  transition:transform .45s var(--spring),box-shadow .3s ease,background .25s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-4px) scale(1.04)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn-sun{background:#3D9BFF;color:#fff;box-shadow:0 14px 30px -12px rgba(61,155,255,.6)}
.btn-sun:hover{box-shadow:0 20px 36px -12px rgba(61,155,255,.8)}
.btn-vir{background:var(--viridian);color:#fff;box-shadow:0 10px 24px -10px rgba(46,162,123,.65)}
.btn-vir:hover{box-shadow:0 18px 32px -10px rgba(46,162,123,.8)}
.btn-ghost{background:transparent;color:var(--deep);box-shadow:inset 0 0 0 2.5px var(--deep)}
.btn-ghost:hover{background:var(--deep);color:var(--cream)}
.btn-light{background:#fff;color:var(--ink);box-shadow:0 8px 22px rgba(21,63,56,.18)}
.btn-dark{background:var(--deep);color:#fff;box-shadow:0 8px 22px rgba(21,63,56,.3)}

/* ---------- barra de progreso de la historia ---------- */
.progress-track{position:fixed;top:0;left:0;right:0;height:5px;z-index:200;background:rgba(21,63,56,.12)}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--coral),var(--yellow),var(--aqua),var(--purple),var(--viridian));
  border-radius:0 4px 4px 0;
}

/* intro historia */
.story-intro{position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(21,63,56,.05) 1.6px,transparent 1.6px);
  background-size:26px 26px}
.si-bub{position:absolute;border-radius:50%;filter:saturate(.55);opacity:.4;animation:siBob 9s ease-in-out infinite}
.si-bub.b1{width:220px;height:220px;background:var(--pink);top:-60px;left:-70px}
.si-bub.b2{width:150px;height:150px;background:var(--yellow);bottom:-40px;right:8%;animation-delay:2s}
.si-bub.b3{width:90px;height:90px;background:var(--aqua);top:18%;right:22%;animation-delay:4s}
@keyframes siBob{0%,100%{translate:0 0}50%{translate:0 -16px}}
.si-mark{position:absolute;top:-30px;left:4%;font-family:var(--display);font-size:24rem;line-height:1;color:rgba(21,63,56,.07);pointer-events:none}

.story-intro{padding:8.8rem 0 1.6rem;text-align:center}
.story-intro h2{margin-top:1.44rem}
.story-intro p{max-width:580px;margin:1.6rem auto 0;color:#57604F;font-size:1.68rem}
/* marcas */
.brands-strip{background:#fff;padding:4.16rem 0;border-top:1px solid rgba(21,63,56,.06);border-bottom:1px solid rgba(21,63,56,.06)}
.brands-kicker{text-align:center;color:var(--olive);font-size:1.632rem;margin-bottom:1.92rem}
.brands-row{display:flex;flex-wrap:wrap;gap:1.12rem;justify-content:center}
.brands-row span{font-family:var(--round);font-weight:700;font-size:1.36rem;color:var(--deep);background:var(--cream);border:2px solid rgba(21,63,56,.1);border-radius:999px;padding:0.88rem 1.92rem;transition:transform .3s var(--spring),background .3s}
.brands-row span:hover{transform:translateY(-4px) rotate(-2deg);background:var(--mint)}

/* ---------- raíl de capítulos (derecha) — visible solo durante la historia ---------- */








body[data-chapter="turn"] .chapter-rail a.active .dot{background:var(--yellow);border-color:var(--yellow)}
@media(max-width:820px){.chapter-rail{display:none}}

/* ---------- header + mega-menú ---------- */
header.site{
  position:sticky;top:0;z-index:150;
  background:rgba(251,247,238,.93);
  backdrop-filter:blur(10px);
  transition:box-shadow .3s ease;
}
header.site.scrolled{box-shadow:0 6px 24px rgba(21,63,56,.12)}
.nav-row{
  max-width:1320px;margin:0 auto;padding:1.12rem clamp(1.76rem,4vw,3.52rem);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.92rem;
}
.nav-row nav.main{justify-self:start}
.nav-row .logo{justify-self:center}
.nav-row .nav-actions{justify-self:stretch}
@media(max-width:900px){
  .nav-row{grid-template-columns:auto 1fr auto;padding:0.96rem 1.6rem}
  .nav-row nav.main{display:none}
  .nav-row .logo{justify-self:start;order:-1}
  .nav-row .logo img{height:28px}
  .btn-nav-cta{font-size:1.28rem;padding:.6em 1em}
}
.nav-row .logo img{height:34px;width:auto}
nav.main{display:flex;gap:0.32rem;align-items:center;flex:1}
nav.main>div{position:relative}
nav.main .navlink{
  /* white-space:nowrap — sin esto "Diario Natugo" partía en dos líneas y la
     flecha de "Tienda" caía debajo del texto, descuadrando toda la fila. */
  display:inline-block;white-space:nowrap;padding:0.88rem 1.52rem;border-radius:999px;
  font-family:var(--round);font-size:1.28rem;font-weight:800;color:var(--deep);
  text-transform:uppercase;letter-spacing:.08em;
  transition:background .25s ease,transform .35s var(--spring);
}
nav.main .navlink:hover{background:var(--mint);transform:translateY(-2px)}
nav.main .navlink .caret{font-size:.65em;opacity:.6;margin-left:.25em}
.mega{
  position:absolute;left:0;top:calc(100% + 10px);transform:translateY(12px) scale(.97);
  width:min(680px,92vw);
  background:#fff;border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(21,63,56,.22);
  padding:2.08rem;display:grid;grid-template-columns:1.4fr 1fr;gap:1.76rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,transform .4s var(--spring),visibility 0s .3s;
}
nav.main div:hover>.mega, nav.main div:focus-within>.mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s;
}
.mega-cats{display:grid;grid-template-columns:1fr 1fr;gap:0.64rem}
.mega-cats a{
  display:flex;align-items:center;gap:1.12rem;padding:0.88rem 1.12rem;border-radius:16px;
  font-weight:600;font-size:1.488rem;color:var(--deep);
  transition:background .2s ease,transform .3s var(--spring);
}
.mega-cats a:hover{background:var(--cream);transform:translateX(4px)}
.cat-dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:1.84rem;flex:none}
.mega-feature{background:var(--mint);border-radius:20px;padding:1.92rem;display:flex;flex-direction:column;justify-content:center;gap:0.8rem}
.mega-feature strong{font-family:var(--display);font-weight:800;font-size:1.68rem;color:var(--deep)}
.mega-feature p{font-size:1.376rem;color:var(--deep)}
.mega-feature a{font-family:var(--round);font-size:1.44rem;color:var(--deep);text-decoration:underline;text-underline-offset:3px}
.nav-actions{display:flex;gap:0.8rem;align-items:center}
.icon-btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;box-shadow:0 3px 10px rgba(21,63,56,.1);
  transition:transform .4s var(--spring),background .25s ease;position:relative;
}
.icon-btn:hover{transform:translateY(-3px) rotate(-6deg);background:var(--yellow)}
.icon-btn svg{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cart-count{
  position:absolute;top:-4px;right:-4px;background:var(--coral);color:#fff;
  font-family:var(--round);font-size:1.12rem;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;border:2px solid var(--cream);
}
.cart-count.bump{animation:bump .5s var(--spring)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.55)}100%{transform:scale(1)}}
.btn-nav-cta{
  background:var(--coral);color:#fff;font-family:var(--round);font-size:1.44rem;
  padding:0.992rem 2rem;border-radius:999px;box-shadow:0 8px 18px -8px rgba(255,90,95,.65);
  transition:transform .4s var(--spring),box-shadow .25s;white-space:nowrap;
}
.btn-nav-cta:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 24px -10px rgba(255,90,95,.75)}
.nav-drawer-cta{background:var(--coral) !important;box-shadow:0 14px 30px -12px rgba(255,90,95,.6) !important}
@media(max-width:920px){ nav.main .hide-m{display:none} .btn-nav-cta{display:none} }

/* ---------- marquee amarillo (bajo el menú, estilo A) ---------- */
.marquee{
  background:var(--yellow,#FFC93C);color:var(--deep,#153F38);overflow:hidden;white-space:nowrap;
  font-family:var(--round);font-weight:800;font-size:1.52rem;letter-spacing:.06em;
  padding:1.04rem 0;position:relative;z-index:60;
}
.marquee i{color:var(--deep,#153F38);opacity:.75}
.marquee-track{display:inline-flex;animation:slide 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:2.24rem;padding-right:2.24rem}
.marquee i{font-style:normal;font-size:1.6rem;transform:translateY(-1px)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- reveals genéricos (spring de A) ---------- */
.rv{opacity:0;transform:translateY(32px) scale(.985);transition:opacity .7s var(--ease),transform .8s var(--spring)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
.rv.d4{transition-delay:.4s}.rv.d5{transition-delay:.5s}
/* las tarjetas de beneficios entran desde la izquierda, no desde abajo */
.cert.rv{transform:translateX(-26px) scale(.97)}
.cert.rv.in{transform:none}

/* palabras cinemáticas (C) */
.words .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.words .w i{
  display:inline-block;font-style:normal;transform:translateY(110%);
  transition:transform .9s cubic-bezier(.2,.75,.15,1);
}
.words.in .w i{transform:none}
.words .w:nth-child(2) i{transition-delay:.08s}.words .w:nth-child(3) i{transition-delay:.16s}
.words .w:nth-child(4) i{transition-delay:.24s}.words .w:nth-child(5) i{transition-delay:.32s}
.words .w:nth-child(6) i{transition-delay:.4s}.words .w:nth-child(7) i{transition-delay:.48s}
.words .w:nth-child(8) i{transition-delay:.56s}.words .w:nth-child(9) i{transition-delay:.64s}

/* burbujas y confetti flotantes (A) */
.float{position:absolute;will-change:transform;animation:floaty 6s ease-in-out infinite}
.float.f2{animation-duration:7.5s;animation-delay:-2s}
.float.f3{animation-duration:5.4s;animation-delay:-1s}
.float.f4{animation-duration:8.4s;animation-delay:-3.4s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(3deg)}}
.bub{border-radius:50%;position:absolute;pointer-events:none}
.confetti-bit{position:absolute;border-radius:4px;pointer-events:none}
.seal-spin{animation:spin 18s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}

/* dividers ondulados / festoneados (A) */
.divider{display:block;width:100%;height:64px;line-height:0}
.divider svg{width:100%;height:100%;display:block}

/* ============================================================
   CAPÍTULO 1 — LA DUDA (crema desaturada, cálida — nunca oscura)
   ============================================================ */
.ch1-hero{
  min-height:92svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;color:var(--deep);padding:7.2rem 0 11.2rem;overflow:hidden;
}
.ch1-hero .wrap{position:relative;z-index:2;width:100%}
/* burbujas desaturadas: color contenido, esperando estallar */
.hush-bub{opacity:.3;filter:saturate(.55);z-index:1}
/* marcas: stickers volteables */
.fbrand-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1.6rem}
@media(max-width:1300px){.fbrand-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:900px){.fbrand-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.fbrand-grid{grid-template-columns:repeat(2,1fr)}}
.fbrand{aspect-ratio:.86;perspective:900px;cursor:pointer}
.fbrand:nth-child(odd){rotate:-2deg}.fbrand:nth-child(even){rotate:2deg}
.fbrand:nth-child(3n){rotate:-1deg}
.fb-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s var(--spring)}
.fbrand:hover .fb-inner,.fbrand:focus .fb-inner{transform:rotateY(180deg)}
.fb-front,.fb-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:1.6rem;box-shadow:0 16px 34px -16px rgba(21,63,56,.35)}
.fb-front span{font-size:4.16rem}
.fb-front b{font-family:var(--round);font-weight:800;font-size:1.472rem;color:#153F38;margin-top:0.8rem;line-height:1.15}
.fb-back{background:#fff;transform:rotateY(180deg);border:2px solid rgba(21,63,56,.08)}
.fb-back p{font-size:1.216rem;color:#4c5a52;line-height:1.45}
.fb-back a{margin-top:0.8rem;font-family:var(--round);font-weight:800;font-size:1.184rem;color:var(--viridian)}
.fb-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.64rem;text-align:center;
  border:3px dashed rgba(21,63,56,.28);border-radius:20px;background:var(--cream);
  font-family:var(--round);font-weight:800;color:var(--deep);transition:background .25s,transform .25s}
.fb-cta:hover{background:var(--wmint);transform:translateY(-4px)}
.fb-cta span{font-size:3.52rem}
.fb-cta b{font-size:1.44rem;line-height:1.2}
.fb-cta i{font-style:normal;font-size:2.08rem;color:var(--viridian)}

/* juego tóxico o seguro */
.game{padding:7.2rem 0}
.game-blob{position:relative;max-width:860px;margin:0 auto;background:var(--lav);border-radius:56px;
  padding:5.76rem 3.2rem 5.44rem;text-align:center}
.game-blob::before,.game-blob::after{content:"";position:absolute;left:26px;right:26px;height:26px;background-size:52px 26px;background-repeat:repeat-x}
.game-blob::before{top:-15px;background-image:radial-gradient(circle 15px at 26px 26px,var(--lav) 14px,transparent 15px)}
.game-blob::after{bottom:-15px;background-image:radial-gradient(circle 15px at 26px 0,var(--lav) 14px,transparent 15px)}
.game-sticker{position:absolute;top:-40px;right:8%;width:96px;height:96px;border-radius:50%;background:var(--yellow);
  display:grid;place-items:center;font-size:3.2rem;rotate:10deg;box-shadow:0 14px 30px -12px rgba(21,63,56,.35)}
.game-lead{color:#4a4066;max-width:44ch;margin:0.96rem auto 2.56rem}
.game-card{background:#fff;border-radius:24px;max-width:560px;margin:0 auto;padding:2.88rem 2.56rem;box-shadow:0 24px 50px -22px rgba(21,63,56,.35)}
.g-progress{display:flex;gap:0.72rem;justify-content:center;margin-bottom:1.76rem}
.g-progress i{width:34px;height:7px;border-radius:999px;background:#E8E3F4}
.g-progress i.on{background:var(--purple)}
.g-progress i.good{background:var(--viridian)}
.g-progress i.bad{background:var(--coral)}
.g-q{font-family:var(--display);font-weight:600;font-size:clamp(1.84rem,2.4vw,2.32rem);color:var(--deep);line-height:1.3;min-height:3.6em}
.g-btns{display:flex;gap:1.28rem;justify-content:center;margin:1.92rem 0 0.96rem}
.g-btn{font-family:var(--round);font-weight:800;font-size:1.68rem;border:none;border-radius:999px;padding:.85em 2em;cursor:pointer;
  transition:transform .2s var(--spring),box-shadow .2s}
.g-btn:hover{transform:translateY(-3px) rotate(-1deg)}
.g-yes{background:var(--viridian);color:#fff;box-shadow:0 12px 26px -12px rgba(46,162,123,.7)}
.g-no{background:var(--coral);color:#fff;box-shadow:0 12px 26px -12px rgba(255,90,95,.7)}
.g-fb{min-height:3.2em;font-size:1.472rem;color:#4c5a52;margin-top:0.64rem}
.g-fb.ok{color:var(--viridian);font-weight:700}
.g-fb.err{color:var(--coral);font-weight:700}
.g-fb small{display:block;font-weight:500;color:#4c5a52;margin-top:0.32rem}
.g-end h3{font-family:var(--display);font-size:clamp(2.4rem,3vw,3.36rem);color:var(--deep);margin-bottom:0.64rem}
.g-end p{color:#4a4066}
.g-msg{max-width:40ch;margin:0.96rem auto 1.92rem}
.g-end-cta{display:flex;gap:1.28rem;justify-content:center;flex-wrap:wrap}
.g-end .btn-ghost{color:var(--deep);border-color:rgba(21,63,56,.4)}
.g-conf{position:relative;height:0}
.g-conf span{position:absolute;font-size:2.56rem;animation:confPop 1.6s ease-out infinite}
.g-conf span:nth-child(1){left:10%;animation-delay:0s}.g-conf span:nth-child(2){left:26%;animation-delay:.3s}
.g-conf span:nth-child(3){left:44%;animation-delay:.15s}.g-conf span:nth-child(4){left:60%;animation-delay:.45s}
.g-conf span:nth-child(5){left:76%;animation-delay:.25s}.g-conf span:nth-child(6){left:90%;animation-delay:.5s}
@keyframes confPop{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(-90px) scale(1.15) rotate(14deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.g-conf span{animation:none;opacity:.8}.fb-inner{transition:none}}

/* arma tu pack: animación de arrastre */
.pack-stage{position:relative;height:min(64vh,520px)}
.pk-item{position:absolute;width:21%;text-align:center}
.pk-item img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(0,0,0,.42))}
.pk-item b{display:inline-block;font-family:var(--round);font-size:0.96rem;color:#153F38;background:rgba(255,255,255,.92);
  border-radius:999px;padding:.28em .8em;margin-top:0.56rem;white-space:nowrap}
.pk1{left:2%;top:4%}.pk2{left:27%;top:0}.pk3{left:52%;top:4%}.pk4{left:77%;top:0}
.pk-box{position:absolute;left:26%;top:56%;width:48%;aspect-ratio:1.5;background:#F4E8C9;border-radius:20px;
  border:4px solid #E2CFA0;box-shadow:0 26px 60px -20px rgba(0,0,0,.5)}
.pk-box::before{content:"";position:absolute;left:-4%;right:-4%;top:-12%;height:26%;background:#EAD9AE;border-radius:12px;
  border:4px solid #E2CFA0}
.pk-box-lbl{position:absolute;left:50%;top:-34px;translate:-50% 0;background:var(--lime);color:#153F38;
  font-family:var(--round);font-weight:800;font-size:1.2rem;padding:.3em .9em;border-radius:999px;z-index:3}
.pk-thumbs{position:absolute;inset:18% 8% 10%;display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center}
.pk-thumbs img{width:100%;aspect-ratio:1;object-fit:contain;opacity:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.pk-done{position:absolute;left:50%;top:38%;translate:-50% -50%;background:var(--viridian);color:#fff;
  font-family:var(--round);font-weight:800;font-size:1.6rem;padding:.5em 1.1em;border-radius:999px;
  rotate:-6deg;opacity:0;scale:.6;z-index:4;box-shadow:0 14px 30px -10px rgba(0,0,0,.4)}
.pk-hand{position:absolute;font-size:3.52rem;z-index:8;left:8%;top:10%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.pack-wiz{display:flex;flex-direction:column;gap:1.44rem;max-width:520px;margin:0 auto}
.pw-head{display:flex;justify-content:space-between;align-items:center}
.pw-step{font-family:var(--round);font-weight:900;font-size:1.28rem;letter-spacing:.14em;text-transform:uppercase;color:#f3eaff}
.pw-dots{display:flex;gap:0.64rem}
.pw-dots i{width:26px;height:7px;border-radius:999px;background:rgba(255,255,255,.28)}
.pw-dots i.on{background:var(--lime)}
.pw-dots i.done{background:var(--viridian)}
.pw-title{font-family:var(--display);font-size:clamp(2.08rem,2.6vw,2.72rem);color:#fff;margin:0}
.pw-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.12rem;min-height:190px}
.pw-opt{background:#fff;border:3px solid transparent;border-radius:16px;padding:0.88rem;text-align:center;cursor:pointer;
  transition:transform .18s var(--spring),border-color .18s;box-shadow:0 12px 26px -14px rgba(0,0,0,.45)}
.pw-opt:hover{transform:translateY(-4px)}
.pw-opt.sel{border-color:var(--lime);transform:scale(1.04)}
.pw-opt img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.pw-opt b{display:block;font-family:var(--round);font-size:1.088rem;color:var(--deep);margin:0.56rem 0 0.16rem;line-height:1.15;
  height:2.3em;overflow:hidden}
.pw-opt span{font-weight:900;color:var(--viridian);font-size:1.36rem}
.pw-end{text-align:center}
.pw-restart{display:block;margin:0.96rem auto 0;background:none;border:none;color:#6b5327;font-family:var(--round);
  font-weight:800;font-size:1.36rem;cursor:pointer;text-decoration:underline}
.pack-builder-old{display:flex;flex-direction:column;gap:1.6rem;max-width:520px;margin:0 auto}
.pb-items{display:grid;grid-template-columns:repeat(2,1fr);gap:1.28rem}
.pb-item{background:#fff;border-radius:18px;padding:1.12rem;text-align:center;box-shadow:0 14px 30px -16px rgba(0,0,0,.4)}
.pb-item img{width:100%;aspect-ratio:1.35;object-fit:cover;border-radius:12px}
.pb-item b{display:block;font-family:var(--round);font-size:1.248rem;color:var(--deep);margin:0.64rem 0 0.16rem;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-price{font-weight:900;color:var(--deep);font-size:1.44rem}
.pb-add{display:block;width:100%;margin-top:0.8rem;font-family:var(--round);font-weight:800;font-size:1.248rem;
  border:none;border-radius:999px;padding:.6em;cursor:pointer;background:var(--lime);color:#153F38;transition:background .2s,transform .15s}
.pb-add:hover{transform:translateY(-2px)}
.pb-add.added{background:var(--viridian);color:#fff}
.pb-box{background:#F4E8C9;border:4px solid #E2CFA0;border-radius:20px;padding:1.6rem 1.92rem}
.pb-head{display:flex;justify-content:space-between;align-items:center}
.pb-lbl{font-family:var(--round);font-weight:800;color:#6b5327}
.pb-count{font-family:var(--round);font-weight:900;background:var(--coral);color:#fff;border-radius:999px;padding:.2em .8em;font-size:1.36rem}
.pb-slots{display:flex;gap:1.12rem;justify-content:center;margin:1.28rem 0}
.pb-slot{position:relative;width:58px;height:58px;border-radius:14px;border:2.5px dashed #C9B27E;background:rgba(255,255,255,.5);
  display:grid;place-items:center;overflow:hidden}
.pb-slot i{font-style:normal;font-family:var(--round);font-weight:900;color:#C9B27E}
.pb-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.pb-slot.full{border-style:solid;border-color:var(--viridian);cursor:pointer}
.pb-slot.full::after{content:"✕";position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  background:var(--coral);color:#fff;font-size:0.992rem;font-weight:900;display:grid;place-items:center;z-index:2}
.pb-slot.full img{display:block}
.pb-total{text-align:center;font-size:1.68rem;color:#6b5327}
.pb-total b{font-size:2.08rem;color:var(--deep)}
.pb-note{display:block;text-align:center;color:#8a7346;margin-top:0.32rem}
.pb-cart-link{
  display:block;width:fit-content;margin:1rem auto 0;
  font-family:var(--round);font-weight:800;font-size:1.35rem;color:var(--deep);
  background:#fff;border-radius:999px;padding:.7rem 1.8rem;
  box-shadow:0 6px 16px -6px rgba(21,63,56,.25);
  transition:transform .2s var(--spring), box-shadow .2s;
}
.pb-cart-link:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(21,63,56,.35)}
.old-pack-cycle-unused{position:relative;width:100%;max-width:480px;aspect-ratio:1;margin:0 auto}
.pcy{position:absolute;inset:0;margin:0;opacity:0;animation:pcyFade 16s infinite}
.pcy img{width:100%;height:100%;object-fit:cover;border-radius:28px;box-shadow:0 30px 60px -22px rgba(0,0,0,.5)}
.pcy figcaption{position:absolute;left:50%;bottom:18px;translate:-50% 0;background:rgba(21,63,56,.88);color:#fff;
  font-family:var(--round);font-weight:800;font-size:1.408rem;padding:.5em 1.2em;border-radius:999px;white-space:nowrap}
.pcy.f1{animation-delay:0s}.pcy.f2{animation-delay:4s}.pcy.f3{animation-delay:8s}.pcy.f4{animation-delay:12s}
@keyframes pcyFade{0%{opacity:0}3%{opacity:1}25%{opacity:1}31%{opacity:0}100%{opacity:0}}
.pcy-badge{position:absolute;right:-10px;top:-16px;z-index:3;background:var(--lime);color:#153F38;
  font-family:var(--round);font-weight:800;font-size:1.248rem;padding:.5em 1em;border-radius:999px;rotate:6deg;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.3)}
@media(prefers-reduced-motion:reduce){.pcy{animation:none}.pcy.f1{opacity:1}}
/* móvil: elementos que expandían el viewport */
@media(max-width:900px){.mega{display:none!important}}
@media(max-width:700px){.milk-orbit{width:94vw!important}.sunburst{width:140vw!important}}
/* composición del pack (CSS puro) */
.pack-compo{position:relative;height:min(60vh,500px)}
.pc-it{position:absolute;width:26%;filter:drop-shadow(0 22px 26px rgba(0,0,0,.4));animation:pcBob 5.5s ease-in-out infinite}
.pc-it.a{left:2%;top:2%}
.pc-it.b{left:37%;top:0;animation-delay:1.2s}
.pc-it.c{right:4%;top:6%;animation-delay:.6s}
.pc-it.d{left:18%;top:30%;animation-delay:1.8s;width:23%}
@keyframes pcBob{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -12px;rotate:2deg}}
.pc-plus{position:absolute;font-family:var(--round);font-weight:900;font-size:3.2rem;color:var(--lime);
  text-shadow:0 4px 10px rgba(0,0,0,.3)}
.pc-plus.p1{left:32%;top:12%}.pc-plus.p2{left:68%;top:10%}.pc-plus.p3{left:44%;top:36%}
.pc-box{position:absolute;left:22%;bottom:2%;width:56%;aspect-ratio:1.6;background:#F4E8C9;border-radius:18px;
  border:4px solid #E2CFA0;box-shadow:0 26px 60px -20px rgba(0,0,0,.5)}
.pc-box::before{content:"";position:absolute;left:-5%;right:-5%;top:-14%;height:28%;background:#EAD9AE;border-radius:10px;border:4px solid #E2CFA0}
.pc-lbl{position:absolute;left:50%;top:38%;translate:-50% -50%;background:var(--lime);color:#153F38;
  font-family:var(--round);font-weight:800;font-size:1.52rem;padding:.45em 1.1em;border-radius:999px;white-space:nowrap;
  rotate:-4deg;box-shadow:0 10px 24px -8px rgba(0,0,0,.35)}
.pc-sticker{position:absolute;right:-6px;top:-30px;z-index:3;background:var(--yellow);color:#153F38;text-align:center;
  font-family:var(--round);font-weight:800;font-size:1.28rem;line-height:1.2;padding:1em;border-radius:50%;
  width:110px;height:110px;display:grid;place-items:center;rotate:10deg;box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
@media(max-width:900px){.pack-compo{height:330px}.pc-sticker{width:92px;height:92px;font-size:1.12rem;top:-22px}}
@media(prefers-reduced-motion:reduce){.pc-it{animation:none}}

/* marcas ricas */
.brands-rich{padding:6.4rem 0;background:#fff}
.brands-lead{max-width:640px;color:#57604F;margin:-0.64rem 0 2.88rem}
.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.92rem}
.bcard{background:var(--cream);border-radius:22px;padding:2.56rem;border:2px solid rgba(21,63,56,.07);transition:transform .3s var(--spring),box-shadow .3s}
.bcard:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 20px 44px -20px rgba(21,63,56,.35)}
.bemo{font-size:3.2rem;display:block}
.bcard h3{font-family:var(--round);font-weight:800;font-size:1.68rem;color:var(--deep);margin:0.8rem 0 0.64rem}
.bcard p{font-size:1.392rem;color:#57604F;line-height:1.55}
.bcard a{display:inline-block;margin-top:1.12rem;font-family:var(--round);font-weight:800;font-size:1.28rem;color:var(--viridian)}
@media(max-width:1100px){.brand-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.brand-grid{grid-template-columns:1fr}}

.wrap-wide{max-width:1760px;width:min(96vw,1760px)}
/* hover: segunda foto */
.ph{position:relative}
.ph img.alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.pcard:hover .ph img.alt{opacity:1}
/* ver todo con collage */
.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:72%;margin:0 auto}
.mc-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;opacity:.92}
.mc-lbl{font-family:var(--round);font-weight:800;color:var(--deep);font-size:1.52rem;margin-top:1.12rem}
.mc-lbl b{font-size:1.92rem}
/* filas con scroll lateral */
.prod-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(230px,17.6%,270px);gap:1.92rem;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:0.32rem 0.32rem 1.28rem;scrollbar-width:none}
.prod-scroll::-webkit-scrollbar{display:none}
.prod-scroll .pcard{scroll-snap-align:start}
.prod-scroll.two-rows{grid-template-rows:repeat(2,auto);grid-auto-columns:clamp(165px,12vw,200px);gap:1.44rem}
.prod-scroll.two-rows .more-card{grid-row:span 2;min-height:0}
.prod-scroll.two-rows .pbody{padding:0.8rem 0.88rem 0.96rem;gap:0.24rem}
.prod-scroll.two-rows .pbody h3{font-size:1.248rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.prod-scroll.two-rows .pbody .tag{display:none}
.prod-scroll.two-rows .pbody .stars{font-size:1.04rem}
.prod-scroll.two-rows .price{font-size:1.44rem}
.prod-scroll.two-rows .badge{font-size:0.992rem}
.prod-scroll.two-rows .quick-add{font-size:1.152rem;padding:.5em}
@media(max-width:820px){.prod-scroll.two-rows{grid-auto-columns:38vw;gap:0.96rem}}
@media(max-width:820px){.prod-scroll{grid-auto-columns:46vw;gap:1.28rem}}
.row-nav{display:flex;gap:0.8rem}
.ra{width:44px;height:44px;border-radius:50%;border:2px solid rgba(21,63,56,.18);background:#fff;color:var(--deep);
  font-size:2.4rem;line-height:1;cursor:pointer;transition:transform .2s var(--spring),background .2s}
.ra:hover{background:var(--lime);transform:scale(1.08)}
@media(max-width:820px){.row-nav{display:none}}
.more-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.96rem;min-height:280px;
  border:3px dashed rgba(21,63,56,.25);border-radius:24px;text-align:center;font-family:var(--round);font-weight:800;
  color:var(--deep);scroll-snap-align:start;transition:background .25s,transform .25s}
.more-card:hover{background:#fff;transform:translateY(-4px)}
.more-card b{font-size:2.56rem}
/* card móvil: ~70% foto / 30% copy */
  .pbody{padding:0.8rem 0.88rem 1.04rem;gap:0.288rem}
  .pbody .tag{display:none}
  .pbody h3{font-size:1.312rem;line-height:1.22;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.44em}
  .pbody .stars{font-size:1.088rem}
  .price{font-size:1.568rem}
  .quick-add{font-size:1.2rem;padding:.55em}
}
/* filas de producto alternadas */
.prow{padding:5.12rem 0}
.prow .sec-head{margin-bottom:2.56rem}
.row-mint{background:#EAF5EF}
.row-sand{background:#F7F1E3}
/* ── hero split Welly (carrusel) ── */
.hero-car{position:relative;overflow:hidden}
.hc-track{display:flex;transition:transform .75s cubic-bezier(.77,0,.18,1)}
.hc-slide{flex:0 0 100%;min-height:72svh;position:relative;display:grid;grid-template-columns:38% 62%}
.hc-left{background:var(--blk);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:1.92rem;padding:6.4rem clamp(2.4rem,5vw,7.2rem);position:relative;z-index:2}
.hc-h{font-family:var(--display);font-weight:600;font-size:clamp(3.68rem,4.6vw,6.72rem);line-height:1.04;color:#fff;text-wrap:balance}
.hc-sub{font-size:clamp(1.6rem,1.4vw,1.84rem);color:rgba(255,255,255,.88);max-width:36ch}
.hc-cta{display:inline-flex;background:var(--coral);color:#fff;font-family:var(--round);font-weight:800;
  font-size:1.472rem;letter-spacing:.14em;text-transform:uppercase;padding:1.05em 2.2em;border-radius:999px;
  transition:transform .25s var(--spring),box-shadow .25s;box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}
.hc-cta:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 22px 40px -16px rgba(0,0,0,.5)}
.hc-cta-soft{background:#FFE9C2;color:#153F38}
.hc-cta-coral{background:#FF5A5F;color:#fff}
.hc-cta-aqua{background:var(--aqua,#37C7CE);color:var(--deep,#153F38)}
.hc-left .g-logo{width:17px;height:17px;flex:0 0 auto;vertical-align:middle}
.rev-card{position:relative}
.rev-card .g-logo{position:absolute;right:14px;bottom:12px;width:14px;height:14px}
.rating-pill{margin-top:0.32rem}
.hc-right{position:relative;overflow:hidden;min-height:40svh}
.hc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-mint{background:var(--wmint)}
.hc-sand{background:#F4E8C9}
.hc-ph{position:absolute;width:48%;aspect-ratio:1;object-fit:cover;border-radius:26px;background:#fff;box-shadow:0 26px 60px -22px rgba(21,63,56,.45)}
.hc-ph.a{top:8%;left:10%;rotate:-6deg;z-index:2}
.hc-ph.b{bottom:8%;right:8%;rotate:5deg;z-index:3}
.hc-ph.c{top:30%;right:38%;rotate:2deg;z-index:1}
.hc-cut{object-fit:contain;background:transparent;box-shadow:none;filter:drop-shadow(0 24px 30px rgba(21,63,56,.4))}
.hc-wave{position:absolute;top:0;bottom:0;left:44%;translate:-45% 0;width:64px;height:100%;fill:var(--blk);z-index:3;pointer-events:none}
.hc-full{display:block;position:relative}
.hc-full .hc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* desktop: el video ocupa la mitad derecha (llena el espacio, sin el zoom extremo del full-bleed) */
@media(min-width:901px){
  /* el lado de color deja de ser plano: mismo tono, difuminado con luz arriba-izq y
     profundidad abajo-der. Funciona con cualquier --blk porque son capas neutras. */
  /* Base comun de los 3 slides: el color deja de ser plano (luz arriba-izq,
     profundidad abajo-der). Cada slide agrega ENCIMA su propia textura. */
  .hc-slide.hc-full{
    background-color:var(--blk);
    background-image:
      radial-gradient(115% 85% at 18% 12%, rgba(255,255,255,.20), rgba(255,255,255,0) 58%),
      radial-gradient(95% 85% at 88% 96%, rgba(0,0,0,.22), rgba(0,0,0,0) 62%);
    background-repeat:no-repeat;
  }

  /* Slide 1 · burbujas de distinto tamano */
  .hc-slide.hc-full:nth-child(1){
    background-image:
      radial-gradient(circle 118px at 8% 26%,  rgba(255,255,255,.17) 60%, rgba(255,255,255,0) 71%),
      radial-gradient(circle 60px  at 31% 15%, rgba(255,255,255,.15) 60%, rgba(255,255,255,0) 72%),
      radial-gradient(circle 92px  at 15% 75%, rgba(255,255,255,.14) 62%, rgba(255,255,255,0) 73%),
      radial-gradient(circle 46px  at 35% 61%, rgba(255,255,255,.13) 58%, rgba(255,255,255,0) 70%),
      radial-gradient(circle 150px at 2% 50%,  rgba(0,0,0,.10)       62%, rgba(0,0,0,0) 74%),
      radial-gradient(circle 36px  at 26% 91%, rgba(255,255,255,.12) 58%, rgba(255,255,255,0) 70%),
      radial-gradient(115% 85% at 18% 12%, rgba(255,255,255,.20), rgba(255,255,255,0) 58%),
      radial-gradient(95% 85% at 88% 96%, rgba(0,0,0,.22), rgba(0,0,0,0) 62%);
  }

  /* Slide 2 · lineas diagonales suaves, como olas */
  .hc-slide.hc-full:nth-child(2){
    background-image:
      repeating-linear-gradient(126deg,
        rgba(255,255,255,.055) 0 10px, rgba(255,255,255,0) 10px 58px),
      radial-gradient(115% 85% at 18% 12%, rgba(255,255,255,.20), rgba(255,255,255,0) 58%),
      radial-gradient(95% 85% at 88% 96%, rgba(0,0,0,.22), rgba(0,0,0,0) 62%);
  }

  /* Slide 3 · lunares */
  .hc-slide.hc-full:nth-child(3){
    background-image:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.115) 4.5px, rgba(255,255,255,0) 5.7px),
      radial-gradient(115% 85% at 18% 12%, rgba(255,255,255,.20), rgba(255,255,255,0) 58%),
      radial-gradient(95% 85% at 88% 96%, rgba(0,0,0,.22), rgba(0,0,0,0) 62%);
    background-size:56px 56px, 100% 100%, 100% 100%;
    background-repeat:repeat, no-repeat, no-repeat;
  }
  .hc-slide.hc-full .hc-media{
    left:38% !important;right:0 !important;width:62% !important;
    object-fit:cover !important;object-position:center 35% !important;
  }
  /* la sombra solo sobre el video, para que el texto quede en color plano */
  .hc-slide.hc-full .hc-shade{left:38%;background:linear-gradient(90deg,rgba(21,63,56,.45) 0%,rgba(21,63,56,.12) 40%,rgba(21,63,56,0) 100%)}
  /* Divisoria ondulada. En vez de pintar una ola de color plano ENCIMA del video
     (que ya no calzaria con el degradado + burbujas del panel), le recortamos el
     borde izquierdo al video con una mascara. Lo que asoma en la ola es el propio
     fondo del slide, asi que el color coincide siempre por construccion. */
  .hc-slide.hc-full .hc-wave{display:none}
  .hc-slide.hc-full .hc-media,
  .hc-slide.hc-full .hc-shade{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M52%2C0%20C84%2C125%2020%2C250%2052%2C375%20C84%2C500%2020%2C625%2052%2C750%20C84%2C875%2024%2C940%2052%2C1000%20L100%2C1000%20L100%2C0%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(#000,#000);
            mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M52%2C0%20C84%2C125%2020%2C250%2052%2C375%20C84%2C500%2020%2C625%2052%2C750%20C84%2C875%2024%2C940%2052%2C1000%20L100%2C1000%20L100%2C0%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(#000,#000);
    -webkit-mask-size:90px 100%,calc(100% - 89px) 100%;
            mask-size:90px 100%,calc(100% - 89px) 100%;
    -webkit-mask-position:left top,right top;
            mask-position:left top,right top;
    -webkit-mask-repeat:no-repeat,no-repeat;
            mask-repeat:no-repeat,no-repeat;
  }
}
/* en móvil no hay divisoria (el video va a pantalla completa) */
.hc-wave{display:none}
.hc-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,63,56,.62) 0%,rgba(21,63,56,.3) 48%,rgba(21,63,56,.08) 100%);z-index:1}
.hc-onvid{position:relative;z-index:2;background:transparent;height:100%;max-width:720px}
@media(max-width:900px){.hc-shade{background:linear-gradient(180deg,rgba(21,63,56,.15) 0%,rgba(21,63,56,.65) 70%)}
  .hc-full .hc-onvid{justify-content:flex-end;padding-bottom:5.44rem;max-width:none}}
.hc-dots{position:absolute;bottom:2.08rem;left:50%;translate:-50% 0;display:flex;gap:0.88rem;z-index:5}
.hc-dots button{width:12px;height:12px;border-radius:999px;border:2px solid #fff;background:transparent;cursor:pointer;padding:0;transition:background .3s,transform .3s;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hc-dots button.on{background:#3D9BFF;border-color:#3D9BFF;transform:scale(1.2)}
@media(max-width:900px){
  /* en móvil el slide ocupa casi todo el alto visible, no solo lo que mide el texto */
  .hc-slide{grid-template-columns:1fr;min-height:79svh}
  .hc-left{padding:4.8rem 2.4rem 4rem;align-items:center;text-align:center}
  .hc-right{min-height:50svh;order:-1}
  .hc-wave{display:none}
}
.ch1-hero .cap-tag{
  display:inline-flex;align-items:center;gap:0.96rem;
  background:#fff;border-radius:999px;box-shadow:0 6px 18px -8px rgba(21,63,56,.25);
  padding:0.8rem 1.84rem;font-family:var(--round);font-size:1.184rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--olive);margin-bottom:2.56rem;
}
.ch1-hero .cap-tag .pulse{width:9px;height:9px;border-radius:50%;background:var(--coral);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
.ch1-hero h1 em{font-style:normal;position:relative;white-space:nowrap;color:var(--viridian)}
.ch1-hero h1 em::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.05em;height:.3em;z-index:-1;
  background:var(--yellow);border-radius:999px;
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .9s;
}
.ch1-hero h1.in em::after{transform:scaleX(1)}
.ch1-hero .sub{max-width:560px;margin-top:2.4rem;color:#57604F;font-size:clamp(1.6rem,1.5vw,1.92rem)}
.hero-ctas{display:flex;gap:1.44rem;flex-wrap:wrap;margin-top:3.52rem;align-items:center}
.rating-pill{
  display:inline-flex;align-items:center;gap:0.96rem;margin-top:2.4rem;font-size:1.6rem;
  background:#fff;border-radius:999px;box-shadow:0 10px 26px -14px rgba(21,63,56,.35);
  padding:0.96rem 2rem;font-size:1.44rem;font-weight:700;color:var(--deep);
}
/* La píldora puede renderizarse como <a> si hay link a las reseñas: sin subrayado,
   sin color de enlace, y con una reacción sutil al pasar el mouse para que se note
   que es clickeable. Como <div> estas reglas simplemente no aplican. */
a.rating-pill{text-decoration:none;color:var(--deep);transition:transform .25s ease,box-shadow .25s ease}
a.rating-pill:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(21,63,56,.45)}
.rating-pill .stars{color:var(--orange);letter-spacing:.1em}
.rating-pill small{font-weight:500;color:var(--olive)}
.scroll-hint{
  position:absolute;bottom:3.2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0.8rem;color:var(--olive);
  font-family:var(--round);font-size:1.12rem;letter-spacing:.28em;text-transform:uppercase;z-index:2;
}
.scroll-hint .mouse{width:26px;height:42px;border:2px solid var(--olive);border-radius:14px;position:relative}
.scroll-hint .mouse::after{
  content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;
  background:var(--coral);border-radius:2px;animation:wheel 1.8s infinite;
}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* ---------- scrollytelling: EL PROBLEMA (sticky, suave) ---------- */
.scrolly{position:relative;color:var(--ink)}
.scrolly-graphic{
  position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;pointer-events:none;
}
.scrolly-steps{position:relative;z-index:3;margin-top:-100svh}
.scrolly-steps .step{min-height:100svh;display:flex;align-items:flex-end;justify-content:center;padding:0 2rem 11svh}
.step-card{
  max-width:520px;background:#fff;border-radius:var(--r-lg);
  padding:2.56rem 2.88rem;box-shadow:0 24px 50px -20px rgba(21,63,56,.35);
  border-top:6px solid var(--coral);
}
.step[data-step="2"] .step-card{border-top-color:var(--orange)}
.step[data-step="3"] .step-card{border-top-color:var(--viridian)}
.step-card .n{
  font-family:var(--round);font-size:1.184rem;letter-spacing:.28em;
  color:var(--coral);text-transform:uppercase;
}
.step[data-step="2"] .step-card .n{color:var(--orange)}
.step[data-step="3"] .step-card .n{color:var(--viridian)}
.step-card h3{font-family:var(--display);font-weight:800;font-size:clamp(2.08rem,2.6vw,2.88rem);margin:0.8rem 0 0.96rem;line-height:1.15;color:var(--deep)}
.step-card p{font-size:1.568rem;color:#4c5a52}

/* escena: plato apagado + etiquetas tóxicas → estalla en color */
.toy-scene{position:relative;width:min(560px,84vw);aspect-ratio:1}
.toy-scene::before{content:"";position:absolute;inset:-8%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 62%)}
.toy-scene::after{content:"";position:absolute;inset:2%;border-radius:50%;
  border:2px dashed rgba(21,63,56,.14);animation:spin 60s linear infinite}
.toy-plate{
  position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#DDD8C4,#C9C3AC 60%,#BAB49C);
  box-shadow:inset 0 -18px 40px rgba(106,116,76,.25),0 30px 70px -20px rgba(21,63,56,.3);
  display:grid;place-items:center;
  transition:background 1s ease,box-shadow 1s ease,transform 1s var(--spring);
}
.toy-plate::after{
  content:"";position:absolute;inset:18%;border-radius:50%;
  border:2px dashed rgba(21,63,56,.16);
}
.toy-q{
  font-family:var(--display);font-weight:900;font-size:clamp(6.4rem,12vw,12rem);color:rgba(21,63,56,.28);
  transition:color .8s,transform .8s var(--spring);
}
.hazard{
  position:absolute;background:#fff;border:2.5px solid;border-radius:999px;
  font-family:var(--round);
  padding:0.8rem 1.76rem;font-size:clamp(1.2rem,1.4vw,1.52rem);letter-spacing:.06em;
  opacity:0;transform:translateY(18px) scale(.85) rotate(-3deg);
  transition:opacity .7s,transform .7s var(--spring);
  box-shadow:0 12px 30px -12px rgba(21,63,56,.35);
}
.hazard.hz-a{top:8%;left:6%;color:var(--coral);border-color:var(--coral);transition-delay:.05s}
.hazard.hz-b{top:16%;right:4%;color:var(--orange);border-color:var(--orange);transition-delay:.15s;transform:translateY(18px) scale(.85) rotate(4deg)}
.hazard.hz-c{bottom:22%;left:0;color:var(--purple);border-color:var(--purple);transition-delay:.25s}
.hazard.hz-d{bottom:8%;right:10%;color:var(--blue);border-color:var(--blue);transition-delay:.35s;transform:translateY(18px) scale(.85) rotate(-5deg)}
.scrolly[data-state="1"] .hazard.hz-a{opacity:1;transform:rotate(-3deg)}
.scrolly[data-state="1"] .hazard.hz-b{opacity:1;transform:rotate(4deg)}
.scrolly[data-state="2"] .hazard.hz-a{opacity:1;transform:rotate(-3deg)}
.scrolly[data-state="2"] .hazard.hz-b{opacity:1;transform:rotate(4deg)}
.scrolly[data-state="2"] .hazard.hz-c{opacity:1;transform:rotate(2deg)}
.scrolly[data-state="2"] .hazard.hz-d{opacity:1;transform:rotate(-5deg)}
.scrolly[data-state="3"] .hazard{opacity:0;transform:translateY(-26px) scale(.75)}
.scrolly[data-state="3"] .toy-plate{
  background:radial-gradient(circle at 35% 30%,var(--mint),var(--teal) 62%,var(--viridian));
  box-shadow:inset 0 -18px 40px rgba(21,63,56,.22),0 40px 90px -20px rgba(46,162,123,.6);
  transform:scale(1.05);
}
.scrolly[data-state="3"] .toy-q{color:var(--cream);transform:rotate(180deg)} /* ¿ → ¡ */
/* chispas de color que aparecen en el giro */
.spark{
  position:absolute;border-radius:50%;opacity:0;transform:scale(.3);
  transition:opacity .8s ease .2s,transform .9s var(--spring) .2s;pointer-events:none;
}
.spark.s1{width:26px;height:26px;background:var(--yellow);top:10%;left:38%}
.spark.s2{width:18px;height:18px;background:var(--coral);top:26%;right:14%}
.spark.s3{width:22px;height:22px;background:var(--aqua);bottom:16%;left:16%}
.spark.s4{width:14px;height:14px;background:var(--purple);bottom:28%;right:6%}
.spark.s5{width:16px;height:16px;background:var(--pink);top:44%;left:2%}
.scrolly[data-state="3"] .spark{opacity:1;transform:scale(1)}

/* ============================================================
   CAPÍTULO 2 — EL CAMBIO: mundo sin tóxicos (teal luminoso + fiesta A)
   ============================================================ */
.turn .h-giant{font-size:clamp(3.2rem,4.6vw,5.76rem)}
.turn .lead{font-size:1.6rem;max-width:52ch;margin-left:auto;margin-right:auto}
.turn{position:relative;padding:4.8rem 0;text-align:center;color:var(--deep);overflow:hidden;background:var(--cream)!important}
.turn .wblob{position:relative;max-width:960px;margin:0 auto;background:#FFE9C2;border-radius:48px;padding:5.12rem 3.2rem 5.76rem}
.turn .wblob::before,.turn .wblob::after{content:"";position:absolute;left:26px;right:26px;height:26px;background-size:52px 26px;background-repeat:repeat-x}
.turn .wblob::before{top:-15px;background-image:radial-gradient(circle 15px at 26px 26px,#FFE9C2 14px,transparent 15px)}
.turn .wblob::after{bottom:-15px;background-image:radial-gradient(circle 15px at 26px 0,#FFE9C2 14px,transparent 15px)}
.turn .wsticker{position:absolute;top:-44px;left:8%;width:104px;height:104px;border-radius:50%;background:var(--lav);display:grid;place-items:center;font-size:3.52rem;rotate:-12deg;box-shadow:0 14px 30px -12px rgba(21,63,56,.35);z-index:3}
.turn .sunburst{
  position:absolute;left:50%;top:-260px;transform:translateX(-50%);
  width:900px;height:900px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,201,60,.55),rgba(255,201,60,0) 62%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.08)}}
.turn .wrap{position:relative;max-width:960px;z-index:2}
.turn .kicker{background:#fff;color:var(--viridian);box-shadow:0 8px 20px -10px rgba(21,63,56,.35)}
.turn h2 em{font-style:normal;position:relative;white-space:nowrap}
.turn h2 em::after{
  content:"";position:absolute;left:-2%;bottom:.04em;width:104%;height:.32em;z-index:-1;
  background:var(--yellow);border-radius:6px;transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.8,.2,1) .5s;
}
.turn h2.in em::after{transform:scaleX(1)}
.turn .lead{max-width:640px;margin:2.56rem auto 0;color:var(--deep)}
.turn-seal{position:absolute;top:8%;right:4%;width:126px;filter:drop-shadow(0 8px 18px rgba(21,63,56,.25));z-index:2}
@media(max-width:820px){.turn-seal{width:88px;top:3%;right:3%}}
@media(max-width:900px){.cert-belt{flex-wrap:wrap!important}}
.cert-belt{display:flex;flex-wrap:nowrap;gap:0.96rem;justify-content:center;margin-top:2.56rem}
.cert span b,.cert>span:last-child{font-size:1.248rem}
.cert small{font-size:1.024rem}
.cert .ic{width:30px;height:30px;font-size:1.52rem}
.cert{display:inline-flex;align-items:center;gap:0.8rem;background:#fff;border-radius:999px;padding:0.8rem 1.44rem;
  box-shadow:0 10px 24px -14px rgba(21,63,56,.3);text-align:left;white-space:nowrap;flex:0 1 auto;min-width:0}
.cert:hover{transform:translateY(-5px) rotate(-1.5deg);box-shadow:0 22px 44px -18px rgba(21,63,56,.4)}
.cert .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;color:#fff;flex:0 0 auto}
.cert:nth-child(1) .ic{background:var(--coral)}.cert:nth-child(2) .ic{background:var(--aqua)}
.cert:nth-child(3) .ic{background:var(--blue)}.cert:nth-child(4) .ic{background:var(--purple)}
.cert:nth-child(5) .ic{background:var(--orange)}
.cert small{display:block;font-family:var(--body);font-weight:600;font-size:1.152rem;color:var(--olive)}

/* ============================================================
   CAPÍTULO 3 — LA PRUEBA: RE-PLAY (sticky pinned, crema alegre)
   ============================================================ */
.replay-scrolly{position:relative;color:var(--ink)}
.replay-graphic{
  position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;max-width:1240px;margin:0 auto;padding:0 clamp(1.76rem,4vw,3.52rem);gap:3.2rem;pointer-events:none;
}
@media(max-width:860px){.replay-graphic{grid-template-columns:1fr;align-content:center;gap:0.8rem;text-align:center}}
.plate-stage{position:relative;height:min(64vh,520px);display:flex;align-items:center;justify-content:center}
.plate{
  position:absolute;width:min(340px,64vw);aspect-ratio:1;border-radius:50%;
  box-shadow:inset 0 -22px 0 rgba(0,0,0,.12), 0 30px 60px -18px rgba(21,63,56,.35);
  display:grid;place-items:center;
  transition:transform .9s var(--spring),opacity .7s;
}
.plate{background:transparent;box-shadow:none;border-radius:0}
.plate img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 34px 34px rgba(21,63,56,.35))}
.plate::after{display:none}
.plate .pl-lbl{
  position:relative;z-index:2;font-family:var(--round);
  font-size:1.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(21,63,56,.75);
}
.plate.p1,.plate.p2,.plate.p3,.plate.p4{background:transparent}
.replay-scrolly[data-state="0"] .plate{transform:translateY(0) scale(.92);opacity:0}
.replay-scrolly[data-state="0"] .plate.p1{opacity:1;transform:none}
.replay-scrolly[data-state="1"] .plate.p1{transform:translateY(34px) scale(.97)}
.replay-scrolly[data-state="1"] .plate.p2{opacity:1;transform:translateY(-6px)}
.replay-scrolly[data-state="1"] .plate.p3,.replay-scrolly[data-state="1"] .plate.p4{opacity:0;transform:translateY(60px)}
.replay-scrolly[data-state="2"] .plate.p1{transform:translateY(64px) scale(.94);opacity:1}
.replay-scrolly[data-state="2"] .plate.p2{transform:translateY(22px) scale(.97);opacity:1}
.replay-scrolly[data-state="2"] .plate.p3{opacity:1;transform:translateY(-18px)}
.replay-scrolly[data-state="2"] .plate.p4{opacity:0;transform:translateY(60px)}
.replay-scrolly[data-state="3"] .plate.p1{transform:translateY(90px) scale(.92);opacity:1}
.replay-scrolly[data-state="3"] .plate.p2{transform:translateY(48px) scale(.95);opacity:1}
.replay-scrolly[data-state="3"] .plate.p3{transform:translateY(8px) scale(.98);opacity:1}
.replay-scrolly[data-state="3"] .plate.p4{opacity:1;transform:translateY(-36px) rotate(-4deg)}
.milk-orbit{position:absolute;inset:0;animation:spin 22s linear infinite}
.milk-orbit i{position:absolute;font-style:normal;font-size:2.4rem;filter:drop-shadow(0 6px 10px rgba(21,63,56,.25))}
.milk-orbit i:nth-child(1){top:0;left:50%}
.milk-orbit i:nth-child(2){bottom:6%;left:12%}
.milk-orbit i:nth-child(3){top:32%;right:2%}
/* sticker + sello girando (energía A) sobre la escena */
.stage-sticker{
  position:absolute;top:4%;left:-2%;z-index:3;
  font-family:var(--round);font-size:1.44rem;background:var(--yellow);color:var(--ink);
  border-radius:999px;padding:0.96rem 1.84rem;transform:rotate(-7deg);
  box-shadow:0 10px 24px rgba(21,63,56,.25);white-space:nowrap;
}
.stage-seal{position:absolute;bottom:2%;right:-2%;width:110px;z-index:3;filter:drop-shadow(0 8px 18px rgba(21,63,56,.25))}
@media(max-width:860px){.stage-sticker{left:2%}.stage-seal{width:84px;right:2%}}
.replay-copy{pointer-events:auto}
.replay-copy .kicker{background:var(--aqua);color:var(--deep)}
.replay-caption{position:relative;min-height:10.5em;margin-top:1.6rem}
.replay-caption .cap{
  position:absolute;inset:0;opacity:0;transform:translateY(18px);
  transition:opacity .6s,transform .6s var(--spring);
}
.replay-caption .cap h3{font-family:var(--display);font-weight:900;font-size:clamp(2.56rem,3.4vw,4rem);line-height:1.1;margin-bottom:1.12rem;color:var(--deep)}
.replay-caption .cap h3 em{font-style:normal;color:var(--viridian);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:6px;text-underline-offset:5px}
.replay-caption .cap p{color:#41544c;max-width:44ch}
@media(max-width:860px){.replay-caption .cap p{margin:0 auto}}
.replay-scrolly[data-state="0"] .cap.c0,.replay-scrolly[data-state="1"] .cap.c1,
.replay-scrolly[data-state="2"] .cap.c2,.replay-scrolly[data-state="3"] .cap.c3{opacity:1;transform:none}
.replay-cta-inline{margin-top:1.6rem;display:inline-flex}
.replay-steps .step{align-items:center}
.replay-steps .step .step-spacer{width:1px;height:1px}

/* ============================================================
   CATEGORÍAS (tiles A: emoji en círculo, hover elástico)
   ============================================================ */
.section{padding:8.8rem 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2.4rem;margin-bottom:3.84rem;flex-wrap:wrap}
.sec-head h2{margin-top:1.12rem;color:var(--deep)}
.sec-link{font-family:var(--round);font-size:1.52rem;color:var(--viridian);border-bottom:2.5px solid var(--viridian);padding-bottom:2px;transition:color .2s,border-color .2s}
.sec-link:hover{color:var(--deep);border-color:var(--deep)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.76rem}
@media(max-width:980px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
.cat{
  border-radius:var(--r-lg);padding:2.56rem 2.08rem 2.24rem;min-height:168px;color:var(--deep);
  display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem;position:relative;overflow:hidden;
  font-family:var(--round);
  transition:transform .5s var(--spring),box-shadow .35s ease;
  box-shadow:0 6px 18px rgba(21,63,56,.1);
}
.cat:hover{transform:translateY(-8px) rotate(-1.6deg) scale(1.03);box-shadow:0 20px 40px rgba(21,63,56,.2)}
.cat .blob{
  position:absolute;right:-34px;bottom:-34px;width:112px;height:112px;border-radius:50%;
  background:rgba(255,255,255,.24);transition:transform .5s var(--spring);
}
.cat:hover .blob{transform:scale(1.55)}
.cat-emoji{
  width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-size:2.4rem;box-shadow:0 4px 12px rgba(21,63,56,.18);
  transition:transform .5s var(--spring);
}
.cat:hover .cat-emoji{transform:rotate(-12deg) scale(1.12)}
.cat b{font-size:1.84rem;display:flex;align-items:center;justify-content:space-between;gap:0.8rem}
.cat b .arr{transition:transform .4s var(--spring)}
.cat:hover .arr{transform:translateX(6px)}
.cat small{font-family:var(--body);font-weight:600;font-size:1.28rem;opacity:.8;display:block;margin-top:0.32rem}
.cat.c-bebe{background:var(--pink)}
.cat.c-alim{background:var(--yellow)}
.cat.c-jug{background:var(--blue);color:#fff}.cat.c-jug .cat-emoji{background:rgba(255,255,255,.92)}
.cat.c-hig{background:var(--aqua)}
.cat.c-mama{background:var(--purple);color:#fff}
.cat.c-reg{background:var(--orange)}
.cat.c-ofe{background:var(--coral);color:#fff}
.cat.c-all{background:var(--deep);color:var(--cream)}

/* ============================================================
   BESTSELLERS
   ============================================================ */
.prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.92rem}
@media(max-width:1500px){.prod-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1150px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.prod-grid{grid-template-columns:repeat(2,1fr);gap:1.28rem}}

.pcard{
  background:#fff;border-radius:var(--r-lg);padding:1.6rem;position:relative;
  box-shadow:0 10px 30px -18px rgba(21,63,56,.3);
  transition:transform .5s var(--spring),box-shadow .35s;display:flex;flex-direction:column;
}
.pcard:hover{transform:translateY(-9px) rotate(-.8deg);box-shadow:0 26px 50px -20px rgba(21,63,56,.35)}
.pcard .ph{position:relative;border-radius:20px;overflow:hidden;background:var(--cream)}
.pcard .ph img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s var(--spring)}
.pcard:hover .ph img{transform:scale(1.06) rotate(1deg)}
.badge{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--round);font-size:1.184rem;letter-spacing:.04em;
  padding:0.64rem 1.36rem;border-radius:999px;color:var(--deep);
  transform:rotate(-4deg);box-shadow:0 4px 10px rgba(21,63,56,.18);
}
.badge.b-top{background:var(--yellow)}
.badge.b-new{background:var(--aqua)}
.badge.b-off{background:var(--coral);color:#fff}
.badge.b-eco{background:var(--mint)}
.badge.b-fav{background:var(--pink)}
.quick-add{
  position:absolute;right:12px;bottom:12px;z-index:2;
  background:var(--deep);color:#fff;font-family:var(--round);font-size:1.36rem;
  padding:1.04rem 1.84rem;border-radius:999px;box-shadow:0 8px 20px rgba(21,63,56,.3);
  transition:transform .45s var(--spring),background .25s ease,opacity .3s ease;
  opacity:0;transform:translateY(10px);
}
.pcard:hover .quick-add,.quick-add:focus-visible{opacity:1;transform:translateY(0)}
.quick-add:hover{background:var(--viridian);transform:translateY(-3px) scale(1.05)}
.quick-add.added{background:var(--viridian)}
.pbody{padding:1.6rem 0.64rem 0.64rem;display:flex;flex-direction:column;gap:0.56rem;flex:1}
.pbody .stars{color:var(--orange);font-size:1.44rem;letter-spacing:.1em}
.pbody .stars small{color:var(--olive);letter-spacing:0;margin-left:0.64rem;font-weight:600}
.pbody h3{font-family:var(--display);font-weight:800;font-size:1.728rem;line-height:1.25;color:var(--deep)}
.pbody .tag{font-size:1.248rem;font-weight:700;color:var(--viridian)}
.pbody .price{margin-top:auto;padding-top:0.64rem;font-family:var(--round);font-size:1.84rem;color:var(--deep)}
.pbody .price s{color:#9aa6a0;font-family:var(--body);font-weight:600;font-size:1.44rem;margin-left:0.8rem}
.price-note{margin-top:2.56rem;text-align:center;font-size:1.248rem;color:var(--olive)}

/* ============================================================
   ARMA TU PACK (bloque morado A, full-bleed)
   ============================================================ */
.pack{background:var(--purple);color:#fff;position:relative;padding:clamp(5.76rem,6vw,8.96rem) 0 clamp(7.36rem,8vw,11.2rem);overflow:hidden}
.pack .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3.2rem,4vw,6.4rem);align-items:center;position:relative;z-index:2}
@media(max-width:900px){.pack .wrap{grid-template-columns:1fr}}
.pack .kicker{background:var(--yellow);color:var(--ink)}
.pack h2{color:#fff;margin:1.28rem 0 1.6rem}
.pack .lead{color:#f3eaff}
.pack-steps{display:grid;gap:1.44rem;margin:2.56rem 0 3.2rem}
.pack-steps .ps{
  display:flex;gap:1.6rem;align-items:center;background:rgba(255,255,255,.14);
  border-radius:20px;padding:1.52rem 1.84rem;
  transition:transform .45s var(--spring),background .3s ease;
}
.pack-steps .ps:hover{transform:translateX(8px);background:rgba(255,255,255,.22)}
.ps-num{
  flex:none;width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--ink);
  font-family:var(--round);font-size:1.84rem;display:grid;place-items:center;
}
.pack-steps b{font-family:var(--round);display:block;font-size:1.6rem}
.pack-steps span.det{font-size:1.408rem;opacity:.9}
.pack-cta-row{display:flex;align-items:center;gap:1.92rem;flex-wrap:wrap}
.pack-cta-row small{color:#e6d9fb;font-weight:600}
.pack-visual{position:relative;display:grid;place-items:center;min-height:380px}
@media(max-width:900px){.pack-visual{min-height:340px;margin-top:1.6rem}}
.pack-box{
  width:min(330px,80%);aspect-ratio:1;border-radius:var(--r-xl);background:#fff;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.3);transform:rotate(3deg);
  transition:transform .5s var(--spring);
}
.pack-box:hover{transform:rotate(0) scale(1.03)}
.pack-box>div{border-radius:22px;overflow:hidden;background:var(--cream)}
.pack-box img{width:100%;height:100%;object-fit:cover}
.pack-save{
  position:absolute;top:2%;right:6%;width:120px;height:120px;border-radius:50%;
  background:var(--yellow);color:var(--ink);display:grid;place-items:center;text-align:center;
  font-family:var(--round);transform:rotate(9deg);box-shadow:0 14px 30px rgba(0,0,0,.25);
  animation:floaty 5.5s ease-in-out infinite;
}
.pack-save b{font-size:2.72rem;display:block;line-height:1}
.pack-save span{font-size:1.088rem;letter-spacing:.08em}
.pack-plus{
  position:absolute;bottom:6%;left:4%;font-family:var(--round);font-size:4.8rem;color:var(--yellow);
  transform:rotate(-10deg);text-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* ============================================================
   CAPÍTULO 4 — LA TRIBU (rosa fiesta → reseñas viridian → mint)
   ============================================================ */
.tribe{background:var(--pink);color:var(--ink);position:relative;padding:clamp(6.08rem,7vw,9.6rem) 0 clamp(7.36rem,8vw,11.2rem);overflow:hidden}
.tribe .wrap{position:relative;z-index:2;text-align:center;max-width:900px}
.tribe .kicker{background:#fff;color:var(--coral)}
.tribe .big-rating{
  font-family:var(--display);font-weight:900;font-size:clamp(4.8rem,8vw,8.32rem);color:var(--deep);line-height:1;margin-top:1.92rem;
}
.tribe .big-rating span{color:var(--orange)}
.tribe .sub-rating{font-family:var(--round);color:#8a4a63;margin-top:0.8rem}
.tribe p.lead{margin:1.92rem auto 0;color:#3d2b33}
.g-badge{
  display:inline-flex;align-items:center;gap:0.8rem;background:#fff;border-radius:999px;
  padding:0.88rem 1.92rem;font-family:var(--round);font-size:1.36rem;color:var(--deep);
  box-shadow:0 8px 20px -12px rgba(61,43,51,.5);margin-top:2.24rem;
}
.g-badge .g{background:linear-gradient(90deg,var(--blue),var(--coral),var(--yellow),var(--viridian));-webkit-background-clip:text;background-clip:text;color:transparent}
.tribe-photos{position:absolute;inset:0;pointer-events:none}
.sticker{
  position:absolute;border-radius:24px;overflow:hidden;background:#fff;
  border:5px solid #fff;box-shadow:var(--shadow-pop);width:110px;aspect-ratio:1;
}
.sticker img{width:100%;height:100%;object-fit:cover}
.tribe-photos .sp1{top:14%;left:4%;transform:rotate(-10deg)}
.tribe-photos .sp2{bottom:16%;left:9%;transform:rotate(6deg);width:92px}
.tribe-photos .sp3{top:20%;right:6%;transform:rotate(9deg);width:100px}
.tribe-seal{position:absolute;bottom:7%;right:5%;width:126px;z-index:2;filter:drop-shadow(0 8px 18px rgba(61,43,51,.25))}
@media(max-width:820px){.tribe-photos .sp1,.tribe-photos .sp2{display:none}.tribe-seal{width:88px}}
@media(max-width:640px){.tribe-photos{display:none}}

/* reseñas — carrusel lateral sobre bloque viridian (A) */
.reviews{background:var(--viridian);color:#fff;padding:clamp(5.44rem,6vw,8.64rem) 0 clamp(6.08rem,7vw,9.28rem);position:relative;overflow:hidden}
.reviews-head{text-align:center;margin-bottom:3.84rem;position:relative;z-index:2;padding:0 2rem}
.reviews-head .kicker{background:var(--yellow);color:var(--ink)}
.reviews-head h2{color:#fff;margin-top:1.28rem}
.reviews-rating{display:flex;align-items:center;justify-content:center;gap:1.28rem;font-size:1.68rem;margin-top:0.96rem}
.reviews-rating .stars{color:var(--yellow);font-size:2.24rem;letter-spacing:.1em}
.rev-belt{overflow:hidden;position:relative;padding:0.96rem 0 1.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.rev-track{display:flex;gap:2.08rem;width:max-content;animation:revmove 48s linear infinite}
.rev-belt:hover .rev-track{animation-play-state:paused}
@keyframes revmove{to{transform:translateX(-50%)}}
.rev-card{
  width:min(360px,80vw);flex:none;background:#fff;color:var(--ink);border-radius:var(--r-lg);
  padding:2.56rem 2.4rem 2.24rem;box-shadow:0 14px 34px rgba(13,58,53,.28);
  display:flex;flex-direction:column;gap:1.2rem;border-top:6px solid;
  transition:transform .45s var(--spring);
}
.rev-card:hover{transform:translateY(-6px) rotate(-1deg)}
.rev-card:nth-child(6n+1){border-color:var(--coral)}.rev-card:nth-child(6n+2){border-color:var(--yellow)}
.rev-card:nth-child(6n+3){border-color:var(--aqua)}.rev-card:nth-child(6n+4){border-color:var(--purple)}
.rev-card:nth-child(6n+5){border-color:var(--orange)}.rev-card:nth-child(6n+6){border-color:var(--blue)}
.rev-card .stars{color:var(--orange);letter-spacing:.14em;font-size:1.52rem}
.rev-card p{font-size:1.52rem;color:#3c4f47;line-height:1.55}
.rev-card .who{display:flex;align-items:center;gap:1.12rem;margin-top:auto}
.rev-card .av{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--round);color:#fff;font-size:1.52rem;flex:0 0 auto;
}
.rev-card:nth-child(6n+1) .av{background:var(--coral)}.rev-card:nth-child(6n+2) .av{background:var(--orange)}
.rev-card:nth-child(6n+3) .av{background:var(--aqua)}.rev-card:nth-child(6n+4) .av{background:var(--purple)}
.rev-card:nth-child(6n+5) .av{background:var(--blue)}.rev-card:nth-child(6n+6) .av{background:var(--viridian)}
.rev-card .who b{font-family:var(--round);font-size:1.44rem;color:var(--deep);display:block;line-height:1.25}
.rev-card .who small{display:block;color:var(--olive);font-size:1.152rem;font-weight:600}
.g-mark{display:inline-flex;gap:2px;margin-right:0.48rem;transform:translateY(1px)}
.g-mark i{width:6px;height:6px;border-radius:50%}

/* IG feed */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.44rem}
@media(max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
.ig{
  position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;display:grid;place-items:center;
  transition:transform .5s var(--spring),box-shadow .35s ease;
}
.ig:hover{transform:translateY(-6px) rotate(-2deg) scale(1.04);box-shadow:0 18px 36px rgba(21,63,56,.2);z-index:2}
.ig img{width:100%;height:100%;object-fit:cover}
.ig .ov{
  position:absolute;inset:0;background:rgba(21,63,56,.55);display:grid;place-items:center;
  color:#fff;font-size:2.24rem;opacity:0;transition:opacity .3s;
}
.ig:hover .ov{opacity:1}
.ig.tile{font-family:var(--round);color:var(--deep);font-size:clamp(1.36rem,1.5vw,1.68rem);text-align:center;padding:1.6rem;line-height:1.3}
.ig.t1{background:var(--yellow)}
.ig.t2{background:var(--coral);color:#fff}
.ig.t3{background:var(--blue);color:#fff}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.24rem}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
.bcard{
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 12px 30px -18px rgba(21,63,56,.28);
  transition:transform .5s var(--spring),box-shadow .35s;display:flex;flex-direction:column;
}
.bcard:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 26px 44px -20px rgba(21,63,56,.35)}
.bcard .bhero img{width:100%;height:100%;object-fit:cover}
.bhero{height:160px;position:relative;display:grid;place-items:center}
.bcard .bhero .big-emoji{font-size:5.12rem;filter:drop-shadow(0 6px 12px rgba(21,63,56,.25));transition:transform .5s var(--spring)}
.bcard:hover .big-emoji{transform:scale(1.2) rotate(-8deg)}
.bcard:nth-child(1) .bhero{background:linear-gradient(135deg,var(--aqua),var(--mint))}
.bcard:nth-child(2) .bhero{background:linear-gradient(135deg,var(--yellow),var(--orange))}
.bcard:nth-child(3) .bhero{background:linear-gradient(135deg,var(--pink),var(--purple))}
.bcard .bb{padding:2.24rem;display:flex;flex-direction:column;gap:0.8rem;flex:1}
.bcard .cat-tag{font-family:var(--round);font-size:1.12rem;letter-spacing:.14em;text-transform:uppercase;color:var(--viridian)}
.bcard h3{font-family:var(--display);font-weight:800;font-size:1.84rem;line-height:1.3;color:var(--deep)}
.bcard p{font-size:1.44rem;color:#54655d;flex:1}
.bcard .read{margin-top:auto;padding-top:1.28rem;font-family:var(--round);font-size:1.408rem;color:var(--viridian)}
.bcard .read i{font-style:normal;display:inline-block;transition:transform .3s var(--spring)}
.bcard:hover .read i{transform:translateX(6px)}

/* ============================================================
   NEWSLETTER (bloque naranja A, full-bleed)
   ============================================================ */
.news{background:#3D9BFF;color:var(--ink);position:relative;padding:clamp(5.76rem,6vw,8.64rem) 0;overflow:hidden;text-align:center}
.news .wrap{position:relative;z-index:2;max-width:760px}
.news .kicker{background:var(--deep);color:#fff}
.news h2{color:#fff;margin:1.44rem auto 1.6rem;max-width:18ch}
/* el párrafo es SOLO texto — antes tenía pegados los estilos de la píldora del form */
.news p{max-width:50ch;margin:0 auto 2.88rem;color:rgba(255,255,255,.92)}
/* la píldora blanca corresponde al formulario */
.news form{
  display:flex;align-items:center;gap:0.96rem;max-width:520px;margin:0 auto;position:relative;z-index:2;
  background:#fff;padding:0.72rem;border-radius:999px;box-shadow:0 20px 40px -18px rgba(74,47,20,.5);
}
.news input{
  flex:1;border:1.5px solid rgba(21,63,56,.16);background:#FBF9F3;border-radius:999px;
  padding:1.28rem 1.92rem;font-family:inherit;font-size:1.6rem;color:var(--ink);min-width:0;
  transition:border-color .2s,background .2s;
}
.news input::placeholder{color:#8a9691;opacity:1}
.news input:focus{border-color:var(--viridian,#2EA27B);background:#fff}
.news input:focus{outline:none}
.news button{
  background:var(--deep);color:var(--cream);font-family:var(--round);border-radius:999px;padding:1.36rem 2.56rem;
  transition:background .25s,transform .4s var(--spring);white-space:nowrap;
}
.news button:hover{background:var(--viridian);transform:scale(1.05)}
.news .ok-msg{display:none;font-family:var(--round);font-size:1.92rem;color:var(--deep);margin-top:2.24rem}
.news small{display:block;margin-top:1.6rem;color:#6b4a26;font-weight:600;font-size:1.248rem;position:relative;z-index:2}
@media(max-width:520px){.news form{flex-direction:column;border-radius:28px}.news button{width:100%}}

/* ============================================================
   FOOTER premium
   ============================================================ */
footer.site{
  background:var(--foot-bg,#FFE9C2);
  color:var(--foot-text,#2C2C2C);
  padding:8rem 0 3.2rem;
  border-top:6px solid var(--foot-border,#2EA27B);
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:4.8rem}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid .fimg{height:58px;width:auto}
/* los textos derivan del color elegido → siempre legibles en cualquier fondo */
.foot-grid .tagline{margin-top:1.92rem;color:var(--foot-text,#2C2C2C);opacity:.7;font-size:1.52rem;max-width:30ch}
.foot-grid h4{
  font-family:var(--round);font-size:1.36rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--foot-text,#2C2C2C);opacity:.55;margin-bottom:1.76rem;
}
.foot-grid ul{display:flex;flex-direction:column;gap:0.88rem}
.foot-grid ul a{color:var(--foot-text,#2C2C2C);opacity:.82;font-size:1.472rem;transition:opacity .2s,padding-left .3s var(--spring)}
.foot-grid ul a:hover{opacity:1;padding-left:5px}
.foot-contact{display:flex;flex-direction:column;gap:1.28rem}
.foot-contact a{display:inline-flex;align-items:center;gap:0.96rem;font-weight:700;font-size:1.472rem;color:var(--foot-text,#2C2C2C);opacity:.82;transition:opacity .2s}
.foot-contact a:hover{opacity:1}
.foot-contact .ci{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb, var(--foot-text,#2C2C2C) 12%, transparent);display:grid;place-items:center;flex:0 0 auto}
.pay-row{display:flex;gap:0.88rem;flex-wrap:wrap;margin-top:1.92rem}
.pay-card{display:inline-flex;border-radius:6px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.pay-card svg{height:30px;width:auto;display:block}
.pay{
  background:#fff;color:var(--deep);font-family:var(--round);font-size:1.152rem;
  border-radius:10px;padding:0.672rem 1.28rem;letter-spacing:.03em;
}
.pay.wp{background:var(--yellow)}
.pay.mp{background:#a8d8f0;color:#0f4a6b}
.foot-base{
  margin-top:5.6rem;padding-top:2.56rem;
  border-top:1px solid color-mix(in srgb, var(--foot-text,#2C2C2C) 14%, transparent);
  display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  font-size:1.248rem;color:var(--foot-text,#2C2C2C);opacity:.6;
}

/* WhatsApp flotante */
.wsp-float{
  position:fixed;bottom:22px;right:22px;z-index:180;
  width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 16px 34px -10px rgba(37,211,102,.65);
  transition:transform .45s var(--spring);
}
.wsp-float:hover{transform:scale(1.12) rotate(-8deg)}
.wsp-float svg{width:30px;height:30px;fill:#fff}

/* badge de concepto */
.concept-badge{
  position:fixed;bottom:22px;left:22px;z-index:180;
  background:var(--deep);color:var(--cream);font-family:var(--round);font-size:1.12rem;letter-spacing:.05em;
  padding:0.88rem 1.6rem;border-radius:999px;box-shadow:0 10px 26px -10px rgba(0,0,0,.5);
  display:flex;align-items:center;gap:0.8rem;
}
.concept-badge .dotp{width:9px;height:9px;border-radius:50%;background:var(--yellow)}
@media(max-width:640px){.concept-badge{font-size:0.992rem;padding:0.72rem 1.28rem}}

/* ============================================================
   PREFERS-REDUCED-MOTION — revelado estático
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv,.words .w i{opacity:1 !important;transform:none !important}
  .turn h2 em::after,.ch1-hero h1 em::after{transform:scaleX(1)}
  .quick-add{opacity:1;transform:none}
  .marquee-track,.rev-track{animation:none !important;flex-wrap:wrap;width:auto;justify-content:center}
  .scrolly .hazard,.scrolly .spark{opacity:1;transform:none}
  .replay-scrolly .plate{opacity:1 !important}
  .replay-caption .cap{position:static;opacity:1 !important;transform:none !important;margin-bottom:2.24rem}
  .replay-caption{min-height:0}
  .float,.bub,.seal-spin,.pack-save,.milk-orbit{animation:none !important}
  body{transition:none}
}
@media(max-width:640px){.quick-add{opacity:1;transform:none}}

/* ═══════════ MENÚ MÓVIL (nuevo — no existía en el mockup) ═══════════ */
.nav-burger{display:none}
.pcard-link{display:block;position:absolute;inset:0}
.pcard .ph{position:relative}
.quick-add--out{opacity:.55;pointer-events:none}
.pbody h3 a{color:inherit;text-decoration:none}

.nav-drawer{position:fixed;inset:0;z-index:200;background:rgba(20,28,26,.45);backdrop-filter:blur(2px)}
.nav-drawer[hidden]{display:none!important}
.nav-drawer-panel{position:absolute;top:0;left:0;bottom:0;width:min(86vw,340px);background:var(--page-bg,#FBF7EE);
  padding:2.24rem 1.92rem 3.2rem;display:flex;flex-direction:column;gap:0.56rem;overflow-y:auto;
  box-shadow:14px 0 40px rgba(0,0,0,.18);animation:navIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes navIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.nav-drawer-close{align-self:flex-end;background:none;border:0;font-size:2.4rem;cursor:pointer;color:var(--ink);padding:0.32rem 0.64rem}
.nav-drawer-logo{width:130px;height:auto;margin:0.32rem 0 1.92rem}
.nav-drawer-link{display:block;font-family:var(--round);font-weight:800;font-size:1.84rem;color:var(--ink);
  text-decoration:none;padding:1.12rem 0;border-bottom:1px solid rgba(44,44,44,.08)}
.nav-drawer-sub{display:flex;align-items:center;gap:0.96rem;font-size:1.6rem;color:var(--ink);
  text-decoration:none;padding:0.88rem 0 0.88rem 0.48rem;opacity:.85}
.nav-drawer-cta{margin-top:2.24rem;text-align:center}

@media(max-width:900px){
  .nav-burger{display:inline-flex}
  .nav-row .main{display:none}
}

/* ═══════════ BARRA DE ENVÍO GRATIS (reemplaza a DealEasy) ═══════════ */
.nship{background:#fff;border:1.5px solid var(--mint,#A7D3C3);border-radius:14px;
  padding:1.36rem 1.6rem;margin:1.6rem 0;box-shadow:0 3px 12px rgba(44,44,44,.05)}
.nship-msg{margin:0 0 0.88rem;font-size:1.472rem;color:var(--ink,#2C2C2C);line-height:1.35}
.nship-msg b{font-weight:800}
.nship-track{height:9px;border-radius:99px;background:#EDEFEA;overflow:hidden}
.nship-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--viridian,#2EA27B),var(--lime,#C8E302));
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.nship.is-free .nship-fill{background:linear-gradient(90deg,#2EA27B,#3D9BFF)}
.nship.is-free{border-color:var(--viridian,#2EA27B);background:#F2FBF7}
.nship-note{display:block;margin-top:0.72rem;font-size:1.184rem;opacity:.6}

/* ═══════════ PÁGINA DE COLECCIÓN ═══════════ */
.ncol{padding:3.2rem 0 6.4rem;background:var(--page-bg,#FBF7EE)}
.ncol-head{max-width:760px;margin-bottom:2.88rem}
.ncol-crumbs{font-size:1.28rem;opacity:.6;margin-bottom:1.12rem;display:flex;gap:0.64rem;align-items:center}
.ncol-crumbs a{color:inherit;text-decoration:none}
.ncol-crumbs a:hover{text-decoration:underline}
.ncol-intro{font-size:1.52rem;line-height:1.65;opacity:.85;margin-top:1.28rem}
.ncol-intro p{margin:0 0 0.96rem}
.ncol-count{display:inline-block;margin-top:1.28rem;font-size:1.28rem;font-weight:700;
  background:var(--mint,#A7D3C3);color:var(--deep,#153F38);padding:0.4rem 1.12rem;border-radius:99px}

/* filtros */
.ncol-bar{display:flex;flex-wrap:wrap;gap:0.8rem;align-items:center;margin-bottom:2.4rem;
  padding-bottom:1.76rem;border-bottom:1px solid rgba(44,44,44,.1)}
.ncol-fdrop{position:relative}
.ncol-fdrop summary{list-style:none;cursor:pointer;padding:0.8rem 1.52rem;border-radius:99px;
  border:1.5px solid rgba(44,44,44,.18);background:#fff;font-size:1.376rem;font-weight:600;white-space:nowrap}
.ncol-fdrop summary::-webkit-details-marker{display:none}
.ncol-fdrop summary::after{content:' ▾';opacity:.5}
.ncol-fdrop[open] summary{border-color:var(--viridian,#2EA27B)}
.ncol-fmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:220px;max-height:300px;
  overflow-y:auto;background:#fff;border-radius:14px;padding:0.8rem;
  box-shadow:0 12px 34px rgba(44,44,44,.16);border:1px solid rgba(44,44,44,.08)}
.ncol-fopt{display:flex;align-items:center;gap:0.88rem;padding:0.72rem 0.96rem;border-radius:9px;cursor:pointer;font-size:1.408rem}
.ncol-fopt:hover{background:rgba(44,44,44,.04)}
.ncol-fopt small{margin-left:auto;opacity:.45;font-size:1.216rem}
.ncol-fopt.is-off{opacity:.35;cursor:not-allowed}
.ncol-sort{margin-left:auto;padding:0.8rem 1.44rem;border-radius:99px;border:1.5px solid rgba(44,44,44,.18);
  background:#fff;font-size:1.376rem;font-weight:600;cursor:pointer;font-family:inherit}

/* grilla */
.ncol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.76rem}
.ncol-grid .pcard{width:auto;flex:none}

/* paginación */
.ncol-pag{display:flex;justify-content:center;gap:0.64rem;margin-top:4rem;flex-wrap:wrap}
.ncol-pag a,.ncol-pag span{padding:0.8rem 1.36rem;border-radius:10px;text-decoration:none;
  color:var(--ink,#2C2C2C);font-weight:600;font-size:1.408rem}
.ncol-pag a:hover{background:rgba(44,44,44,.06)}
.ncol-pag .on{background:var(--ink,#2C2C2C);color:#fff}
.ncol-empty{text-align:center;padding:4.8rem 0;opacity:.7}

@media(max-width:1100px){ .ncol-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:760px){
  .ncol-grid{grid-template-columns:repeat(2,1fr);gap:1.12rem}
  .ncol-sort{margin-left:0;width:100%}
}

/* ══════════════════════════════════════════════════════════════
   REVISIÓN DE TIPOGRAFÍA Y MÓVIL
   ══════════════════════════════════════════════════════════════ */

/* ---------- Fraunces con carácter (eje WONK + SOFT) ---------- */
.h-giant,.h-xl,.h-lg,.hc-h,.pbody h3,.pdp-title{
  font-variation-settings:"SOFT" 40,"WONK" 1;
  letter-spacing:-.018em;
}

/* ---------- HERO: mucho más grande y con peso ---------- */
.hc-h{
  font-weight:900;
  font-size:clamp(4.24rem,5.6vw,8rem);
  line-height:.98;
  text-shadow:0 2px 24px rgba(0,0,0,.18);
}
.hc-sub{
  font-size:clamp(1.76rem,1.75vw,2.272rem);
  line-height:1.5;
  font-weight:600;
  color:rgba(255,255,255,.94);
  max-width:34ch;
}
.hc-cta{font-size:1.6rem;padding:1.1em 2.5em;font-weight:900}
.hc-left{gap:2.16rem}
.rating-pill{font-size:1.52rem;padding:0.96rem 1.76rem}

/* ---------- Títulos de sección con más presencia ---------- */
.h-xl{font-weight:900;font-size:clamp(3.6rem,5.6vw,6.4rem);line-height:1.03}
.lead{font-size:clamp(1.76rem,1.7vw,2.16rem);line-height:1.62;font-weight:500}
.kicker{font-size:1.312rem;font-weight:900;letter-spacing:.12em}

/* ---------- Tarjeta de producto: texto más legible ---------- */
.pbody h3{font-size:1.824rem;font-weight:900;line-height:1.22}
.pbody .price{font-size:1.984rem;font-weight:900}
.pbody .tag{font-size:1.28rem;font-weight:800}

/* ══════════════════ MÓVIL ══════════════════ */
@media(max-width:820px){


  /* Tarjetas más grandes y respirando */
  .prod-scroll{grid-auto-columns:56vw;gap:1.36rem}
  .prod-scroll.two-rows{grid-auto-columns:46vw;gap:1.2rem}

  .pcard{padding:1.04rem;border-radius:22px}
  .pcard .ph{border-radius:16px}
  .pbody{padding:1.12rem 0.48rem 0.4rem;gap:0.48rem}
  .pbody h3{font-size:1.6rem;line-height:1.24}
  .pbody .price{font-size:1.76rem}
  .pbody .tag{font-size:1.184rem}

  /* la grilla de 2 filas también con texto legible */
  .prod-scroll.two-rows .pbody h3{font-size:1.472rem;min-height:2.3em}
  .prod-scroll.two-rows .price{font-size:1.6rem}
  .prod-scroll.two-rows .quick-add{font-size:1.28rem;padding:0.96rem}
  .prod-scroll.two-rows .pbody .tag{display:none}

  /* hero: que el copy no se ahogue */
  .hc-h{font-size:clamp(3.76rem,9.2vw,5.44rem);line-height:1.02}
  .hc-sub{font-size:1.696rem;max-width:30ch}
  .hc-cta{font-size:1.52rem;padding:1em 2.1em}

  /* títulos de sección */
  .h-xl{font-size:clamp(3.2rem,7.6vw,4.64rem)}
  .lead{font-size:1.696rem}

  /* colección: tarjetas decentes */
  .ncol-grid{gap:1.2rem}
  .ncol-grid .pcard{padding:1.04rem}
}

/* pantallas muy chicas */
@media(max-width:400px){
  .prod-scroll{grid-auto-columns:62vw}
  .prod-scroll.two-rows{grid-auto-columns:50vw}
}

/* ══════════ HERO v2: los 3 slides a pantalla completa con video ══════════ */
.hc-slide.hc-full{
  display:block;position:relative;
  min-height:min(86svh,760px);
  grid-template-columns:none;
}
.hc-slide.hc-full .hc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* tinte de marca sobre el video: color a la izquierda, video limpio a la derecha */
.hc-shade--tint{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--blk) 88%, transparent) 0%,
      color-mix(in srgb, var(--blk) 62%, transparent) 38%,
      color-mix(in srgb, var(--blk) 18%, transparent) 66%,
      rgba(0,0,0,.12) 100%);
}
/* fallback si el navegador no soporta color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .hc-shade--tint{background:linear-gradient(100deg,var(--blk) 0%,rgba(21,63,56,.45) 55%,rgba(0,0,0,.15) 100%);opacity:.9}
}

.hc-full .hc-onvid{
  position:relative;z-index:2;height:100%;max-width:640px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:2.08rem;padding:clamp(3.2rem,5vw,7.2rem);
  background:transparent;
}

/* etiqueta pequeña arriba del título */
.hc-kicker{
  display:inline-flex;align-items:center;
  font-family:var(--round);font-weight:900;font-size:1.248rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.35);
  padding:0.72rem 1.6rem;border-radius:999px;
  backdrop-filter:blur(6px);
}

/* la onda decorativa ya no aplica en full-bleed */
.hc-full .hc-wave{display:none}

@media(max-width:900px){
  .hc-slide.hc-full{min-height:78svh}
  .hc-shade--tint{
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--blk) 30%, transparent) 0%,
      color-mix(in srgb, var(--blk) 55%, transparent) 45%,
      color-mix(in srgb, var(--blk) 92%, transparent) 100%);
  }
  @supports not (background: color-mix(in srgb, red 50%, blue)){
    .hc-shade--tint{background:linear-gradient(180deg,rgba(21,63,56,.25) 0%,var(--blk) 100%);opacity:.92}
  }
  .hc-full .hc-onvid{
    justify-content:flex-end;max-width:none;
    padding:3.2rem 2.24rem 5.76rem;gap:1.6rem;
  }
}

/* ══════════ FIX: overflow del ticker (se salía 1981px en móvil) ══════════ */
.marquee{overflow:hidden!important;max-width:100vw}
.marquee-track{will-change:transform}

/* ══════════ Títulos de tarjeta legibles también en la fila de 2 ══════════ */
.prod-scroll.two-rows .pbody h3{font-size:1.55rem;line-height:1.25;min-height:2.5em}
.prod-scroll.two-rows .price{font-size:1.75rem;font-weight:900}
.prod-scroll.two-rows .stars{font-size:1.15rem}
.prod-scroll.two-rows .badge{font-size:1.1rem}
.prod-scroll.two-rows .quick-add{font-size:1.3rem}
/* dar más aire a la fila de 2 en desktop */
.prod-scroll.two-rows{grid-auto-columns:clamp(200px,14.5vw,240px);gap:1.2rem}

@media(max-width:820px){
  .prod-scroll.two-rows .pbody h3{font-size:1.5rem;min-height:2.4em}
  .prod-scroll.two-rows .price{font-size:1.65rem}
  .prod-scroll.two-rows .quick-add{font-size:1.3rem;padding:.95rem}
}

/* cinturón: nada puede provocar scroll horizontal */
html{overflow-x:clip}
body{overflow-x:clip}

/* ══════════════════════════════════════════════════════════════════════
   FIX CRÍTICO — Dawn oculta TODO elemento vacío en su reset:
     a:empty, div:empty, section:empty, p:empty… { display:none }
   Mis elementos decorativos son divs/spans vacíos por diseño:
   el velo del hero, burbujas, confeti, blobs, y los rellenos de las
   barras de progreso (historia y envío gratis). Los devolvemos a la vida.
   ══════════════════════════════════════════════════════════════════════ */
div:empty, span:empty, i:empty, b:empty { display: revert; }

/* pero en texto enriquecido sí queremos que los vacíos no ensucien */
.rte div:empty, .rte p:empty, .pdp-desc .rte div:empty { display: none; }

/* y explícitos, por si acaso */
.hc-shade, .hc-shade--tint { display: block !important; }
.progress-fill, .nship-fill { display: block !important; }
.bub, .blob, .confetti-bit, .spark, .cat-dot { display: revert !important; }

/* ══════════════════════════════════════════════════════════════════════
   FIX CRÍTICO — Dawn no normaliza img{height:auto}, así que el atributo
   height="600" del HTML se aplica como ALTO FIJO: la foto se estiraba a
   600px, el contenedor la recortaba, y quedaba un hueco enorme en la
   tarjeta. Devolvemos la proporción real.
   ══════════════════════════════════════════════════════════════════════ */
.pcard img, .more-card img, .bcard img, .ig-grid img,
.ncol-grid img, .fbrand img, .cat img, .pw-opt img, .pb-slot img,
.pdp-main img, .pdp-thumb img, .nav-drawer-logo, .fimg, .logo img {
  height: auto;
}

/* la foto manda: no se comprime dentro de la tarjeta */
.pcard .ph { flex: 0 0 auto; }
.pcard .ph img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
.more-card .mc-grid img { aspect-ratio: 1 / 1; object-fit: cover; }
.bcard .bhero img { aspect-ratio: 1 / 1; object-fit: cover; }
.ig-grid img { aspect-ratio: 1 / 1; object-fit: cover; }

/* el cuerpo ya no necesita empujar el precio con un vacío gigante */
.pbody { padding-top: 1.1rem; }
.pbody .price { margin-top: 0.8rem; padding-top: 0; }

/* ══════════════════════════════════════════════════════════════════════
   FIX — el <a> que envuelve la foto estaba en position:absolute, así que
   las imágenes salían del flujo y el contenedor .ph quedaba sin altura
   (la foto se veía como una franja recortada). El link ahora envuelve la
   foto en flujo normal; el badge y el "+ Agregar" siguen flotando encima.
   ══════════════════════════════════════════════════════════════════════ */
.pcard-link{
  position: static !important;
  inset: auto !important;
  display: block;
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.pcard .ph{ position: relative; overflow: hidden; }
.pcard .ph .badge{ position: absolute; }
.pcard .ph .quick-add{ z-index: 3; }

/* la 2ª foto (hover) sí va encima de la 1ª — con fondo propio para que no se transparente */
.pcard .ph img.alt{
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  background: #fff;
  transition: opacity .45s ease;
}
.pcard:hover .ph img.alt{ opacity: 1; }

/* ══════ "+ Agregar": pastilla flotante sobre la foto, visible en móvil ══════ */
@media(max-width:820px){
  .quick-add{
    position:absolute; right:0.8rem; bottom:0.8rem; z-index:3;
    opacity:1; transform:none;
    display:inline-flex; width:auto; align-items:center;
    background:rgba(21,63,56,.94); color:#fff;
    backdrop-filter:blur(6px);
    font-size:1.25rem; font-weight:900; letter-spacing:.02em;
    padding:0.75rem 1.25rem; border-radius:999px;
    box-shadow:0 6px 18px rgba(21,63,56,.32);
    white-space:nowrap;
  }
  .prod-scroll.two-rows .quick-add{
    font-size:1.15rem; padding:0.65rem 1rem; right:0.6rem; bottom:0.6rem;
  }
  .quick-add--out{background:rgba(120,120,120,.9)}
}

/* ══════════════════════════════════════════════════════════════════════
   FIX — el ticker (banner rotativo) quedaba ENCIMA del mega-menú y no
   dejaba clickear ninguna categoría. El menú vive dentro del header,
   pero cada sección de Shopify tiene su propio contenedor: el del ticker
   se pintaba después. Le damos al header/menú una capa superior.
   ══════════════════════════════════════════════════════════════════════ */
#shopify-section-natugo-header,
.shopify-section-group-header-group #shopify-section-natugo-header{
  position:relative; z-index:300;
}
#shopify-section-natugo-marquee{ position:relative; z-index:10; }

header.site{ z-index:300; }
.mega{ z-index:400; }
.nav-row nav.main > div{ position:relative; z-index:400; }

/* el menú móvil por encima de todo */
.nav-drawer{ z-index:500; }

/* el ticker debe quedar SIEMPRE por debajo del header y su mega-menú */
.marquee{ z-index:1 !important; position:relative; }
header.site{ z-index:900 !important; }
.mega{ z-index:950 !important; }
[id*="natugo-header"]{ position:relative; z-index:900; }
[id*="natugo-marquee"]{ position:relative; z-index:1; }

/* ══════ FIX: el logo de Google en el rating de "Mamitas felices" salía
   gigante porque el SVG no tenía tamaño. Lo fijamos pequeño en todos lados. ══════ */
.g-logo{width:1.4rem !important;height:1.4rem !important;flex:0 0 auto;vertical-align:middle}
.reviews-rating .g-logo{width:1.5rem !important;height:1.5rem !important}
.rev-card .g-logo{width:1.3rem !important;height:1.3rem !important}

/* ══════════════════════════════════════════════════════════════════════
   AJUSTE HERO — el H1 estaba demasiado grande (hasta 8rem) y en móvil el
   contenido quedaba pegado abajo. Lo bajamos a un tamaño cómodo y lo
   centramos verticalmente para que se lea bien en pantallas normales.
   ══════════════════════════════════════════════════════════════════════ */
.hc-h{
  font-size:clamp(2.8rem, 3.6vw, 4.6rem) !important;
  line-height:1.05 !important;
  font-weight:900;
}
.hc-sub{
  font-size:clamp(1.5rem, 1.3vw, 1.8rem) !important;
  max-width:38ch;
}
/* el bloque de texto centrado, no pegado a un borde */
.hc-full .hc-onvid{
  justify-content:center !important;
  gap:1.6rem;
  padding:clamp(2.4rem,4.5vw,5.5rem);
}

@media(max-width:900px){
  .hc-h{
    font-size:clamp(2.5rem, 8vw, 3.6rem) !important;
    line-height:1.06 !important;
  }
  .hc-sub{ font-size:1.55rem !important; max-width:32ch; }
  /* en móvil: texto hacia abajo pero con aire, no pegado al borde */
  .hc-full .hc-onvid{
    justify-content:flex-end !important;
    padding:2rem 1.6rem 4.5rem !important;
    gap:1.2rem;
  }
  .hc-slide.hc-full{ min-height:72svh; }
}

/* ══════════════════════════════════════════════════════════════════════
   AJUSTES MÓVIL — header + hero
   ══════════════════════════════════════════════════════════════════════ */

/* 1) el burger tenía el ícono pegado a la izquierda (inline-flex sin centrar) */
@media(max-width:900px){
  .nav-burger{ display:inline-flex !important; align-items:center; justify-content:center; }
}

/* 2) círculos del header más suaves e integrados (no blanco sólido pesado) */
.icon-btn, .nav-burger{
  background:rgba(255,255,255,.62) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(44,44,44,.06);
  box-shadow:0 2px 8px rgba(21,63,56,.06) !important;
}
.icon-btn:hover, .nav-burger:hover{ background:rgba(255,255,255,.9) !important; }
@media(max-width:900px){
  .icon-btn, .nav-burger{ width:42px; height:42px; }
}

/* 3) el copy del hero estaba demasiado abajo → lo subimos al centro-bajo */
@media(max-width:900px){
  .hc-full .hc-onvid{
    justify-content:center !important;
    padding:6rem 1.6rem 3rem !important;
  }
  /* reforzar el velo para que el texto centrado se lea bien sobre el video */
  .hc-shade--tint{
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--blk) 45%, transparent) 0%,
      color-mix(in srgb, var(--blk) 55%, transparent) 55%,
      color-mix(in srgb, var(--blk) 78%, transparent) 100%) !important;
  }
  @supports not (background: color-mix(in srgb, red 50%, blue)){
    .hc-shade--tint{ background:linear-gradient(180deg, rgba(21,63,56,.45) 0%, var(--blk) 100%) !important; opacity:.9; }
  }
}

/* ══════ FIX: en móvil el hero mezclaba centrado (texto) e izquierda (etiqueta/botón).
   Lo dejamos TODO centrado y consistente. ══════ */
@media(max-width:900px){
  .hc-full .hc-onvid{
    align-items:center !important;
    text-align:center !important;
  }
  .hc-full .hc-onvid .hc-sub{ margin-left:auto; margin-right:auto; }
  .hc-full .hc-onvid .rating-pill{ margin-left:auto; margin-right:auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   ESPACIADO ENTRE SECCIONES — eran 88px arriba/abajo sin reducción en
   móvil (176px de aire entre secciones). Lo achicamos bastante.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  .section{ padding:4rem 0 !important; }
  .prow{ padding:3rem 0 !important; }
  .pack, .tribe, .reviews, .news{ padding:3.6rem 0 !important; }
  .sec-head{ margin-bottom:1.8rem !important; }
  .prow .sec-head{ margin-bottom:1.4rem !important; }
  .pkp-hero{ padding:2.2rem 0 1rem !important; }
  .pkp-ready, .pkp-builder{ padding:1.4rem 0 !important; }
}
/* también un poco más ajustado en desktop */
@media(min-width:821px){
  .section{ padding:6rem 0; }
  .prow{ padding:4rem 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL: los catálogos dejan de ser tira con scroll horizontal y pasan a
   GRILLA de 2 columnas (doble fila), mostrando 6 productos + "Ver todo".
   Sin scroll lateral. El auto-scroll queda solo en desktop.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  .prow .prod-scroll,
  .prow .prod-scroll.two-rows{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:none !important;
    grid-auto-flow:row !important;
    grid-auto-columns:auto !important;
    gap:.9rem !important;
    overflow:visible !important;      /* nada de scroll horizontal */
    scroll-snap-type:none !important;
  }
  /* mostrar solo los primeros 6 productos */
  .prow .prod-scroll .pcard:nth-of-type(n+7){ display:none; }
  /* "Ver todo" ocupa el ancho completo, al final */
  .prow .prod-scroll .more-card{
    display:flex !important;
    grid-column:1 / -1;
    flex-direction:row; align-items:center; justify-content:space-between;
    min-height:auto; padding:1.2rem 1.4rem;
  }
  .prow .prod-scroll .more-card .mc-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem; width:12rem; flex:0 0 auto;
  }
  /* las flechas ‹ › no sirven sin scroll → ocultarlas en móvil */
  .prow .row-nav{ display:none !important; }
}

/* ── flip de marcas también con TAP en móvil (antes solo :hover) ── */
.fbrand.flipped .fb-inner{ transform:rotateY(180deg); }

/* ── el ítem "🌿 Ecológico y consciente" del footer estaba desalineado ── */
.foot-contact .ci-static{
  display:inline-flex; align-items:center; gap:0.96rem;
  font-weight:700; font-size:1.472rem; color:var(--foot-text,#2C2C2C); opacity:.82;
}


/* ── botón "Arma tu pack" en el header (entre logo y buscador) ── */
.btn-pack{
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:var(--deep);
  font-family:var(--round); font-weight:800; font-size:1.3rem;
  padding:.65rem 1.25rem; border-radius:999px; white-space:nowrap;
  box-shadow:inset 0 0 0 2px var(--coral);
  margin-left:auto; margin-right:auto;
  transition:background .25s, transform .25s var(--spring);
}
.btn-pack:hover{ background:var(--coral); color:#fff; transform:translateY(-2px); }
.btn-pack-emoji{ font-size:1.5rem; }
.btn-pack-short{ display:none; }
/* móvil: compacto, "🎁 Pack" */
@media(max-width:900px){
  .btn-pack{ font-size:1.2rem; padding:.6rem 1rem; gap:.35rem; }
  .btn-pack-text{ display:none; }
  .btn-pack-short{ display:inline; }
}

/* ══════════════════ POPUP DE RECUPERACIÓN ══════════════════ */
.nrec{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.nrec[hidden]{ display:none !important; }
.nrec-overlay{ position:absolute; inset:0; background:rgba(20,49,42,.55); backdrop-filter:blur(3px); }
.nrec-box{
  position:relative; z-index:2; width:min(42rem,100%);
  background:var(--cream,#FBF7EE); border-radius:26px; padding:2.6rem 2.4rem 2.2rem;
  text-align:center; box-shadow:0 30px 70px -20px rgba(20,49,42,.5);
  animation:nrecIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes nrecIn{ from{ transform:scale(.9) translateY(20px); opacity:0; } to{ transform:none; opacity:1; } }
.nrec-close{
  position:absolute; top:1.2rem; right:1.4rem; width:3.2rem; height:3.2rem;
  border:0; background:rgba(20,49,42,.08); border-radius:50%; cursor:pointer; font-size:1.5rem; color:var(--ink,#2C2C2C);
}
.nrec-tag{
  display:inline-block; font-family:var(--round); font-weight:900; font-size:1.15rem;
  letter-spacing:.06em; background:var(--coral,#FF5A5F); color:#fff; padding:.4rem 1.1rem; border-radius:999px;
}
.nrec-title{ font-family:var(--display); font-weight:900; font-size:clamp(2rem,4vw,2.8rem); line-height:1.1; margin:1.2rem 0 .5rem; }
.nrec-sub{ font-size:1.5rem; opacity:.82; margin-bottom:1.6rem; }
.nrec-product{
  display:flex; align-items:center; gap:1.2rem; text-align:left;
  background:#fff; border-radius:16px; padding:1rem; margin-bottom:1.4rem;
  box-shadow:0 6px 18px -8px rgba(20,49,42,.2);
}
.nrec-product img{ width:9rem; height:9rem; border-radius:12px; object-fit:cover; flex:0 0 auto; background:var(--mint,#A7D3C3); }
.nrec-product b{ display:block; font-size:1.5rem; color:var(--ink,#2C2C2C); }
.nrec-product small{ font-size:1.4rem; color:var(--viridian,#2EA27B); font-weight:800; }
.nrec-code{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  background:#fff; border:2px dashed var(--viridian,#2EA27B); border-radius:12px;
  padding:.9rem 1.2rem; font-size:1.5rem; margin-bottom:1.2rem;
}
.nrec-code b{ font-family:var(--round); font-size:1.8rem; letter-spacing:.05em; }
.nrec-copy{ border:0; background:var(--ink,#2C2C2C); color:#fff; border-radius:8px; padding:.5rem 1rem; font-size:1.2rem; cursor:pointer; font-weight:700; }
.nrec-cta{ display:block; padding:1.2rem; border-radius:999px; font-size:1.6rem; margin-bottom:.8rem; }
.nrec-skip{ background:none; border:0; color:var(--ink,#2C2C2C); opacity:.55; font-size:1.3rem; cursor:pointer; text-decoration:underline; }

/* ── descripción de colección: recortada en móvil con "ver más" (el texto completo
      sigue en el HTML para SEO, solo se oculta visualmente) ── */
.ncol-more{
  display:none; margin-top:.6rem; border:0; background:none; cursor:pointer;
  font-family:var(--round); font-weight:800; font-size:1.35rem; color:var(--viridian);
  text-decoration:underline; padding:.2rem 0;
}
@media(max-width:820px){
  .ncol-intro.is-clamped{
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .ncol-more:not([hidden]){ display:inline-block; }
}

/* ── Preguntas frecuentes ─────────────────────────────── */
.nfaq{padding:4.5rem 1.25rem;background:var(--wmint,#DDF3EA)}
.nfaq-wrap{max-width:800px;margin:0 auto}
.nfaq-kicker{display:inline-block;background:var(--aqua,#37C7CE);color:var(--deep,#153F38);
  font-family:var(--round);font-weight:800;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.42rem 1.05rem;border-radius:99px;margin-bottom:.9rem}
.nfaq-h{font-family:var(--serif,inherit);font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.12;
  color:var(--deep,#153F38);margin:0 0 2rem}
.nfaq-list{display:flex;flex-direction:column;gap:.85rem}
.nfaq-item{background:#fff;border:2px solid transparent;border-radius:18px;padding:0 2.16rem;
  box-shadow:0 10px 26px -18px rgba(21,63,56,.35);transition:border-color .18s}
.nfaq-item[open]{border-color:var(--mint,#A7D3C3)}
.nfaq-q{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;cursor:pointer;
  list-style:none;padding:2rem 0;font-family:var(--round);font-weight:800;
  font-size:1.63rem;color:var(--deep,#153F38)}
.nfaq-q::-webkit-details-marker{display:none}
.nfaq-chev{width:22px;height:22px;flex:0 0 22px;color:var(--viridian,#2EA27B);transition:transform .22s}
.nfaq-item[open] .nfaq-chev{transform:rotate(180deg)}
.nfaq-a{padding:0 0 2.16rem;color:#4a5a54;line-height:1.65;font-size:1.55rem}
.nfaq-a p{margin:0 0 .6rem}.nfaq-a p:last-child{margin:0}
.nfaq-a a{color:var(--viridian,#2EA27B);font-weight:700}
.nfaq-cta{display:inline-flex;margin-top:1.8rem;background:var(--viridian,#2EA27B);color:#fff;
  font-family:var(--round);font-weight:800;padding:.95em 2em;border-radius:99px;text-decoration:none}
@media(max-width:640px){
  .nfaq{padding:3rem 1rem}
  .nfaq-q{font-size:1.52rem;padding:1.68rem 0}
  .nfaq-a{font-size:1.47rem}
}

/* swatch sin foto: círculo con el color de marca */
.stc-sw-dot{display:grid;place-items:center}
.stc-sw-dot i{display:block;width:70%;aspect-ratio:1;border-radius:50%;
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.12)}


/* ══════ Hero en móvil: pantalla completa ══════
   Va al final y con la misma especificidad que .hc-slide.hc-full,
   porque esas reglas fijan 72/78svh y le ganaban a un .hc-slide suelto. */
@media(max-width:900px){
  .hc-slide,
  .hc-slide.hc-full{ min-height:85svh; }  /* 79 → 83 → 85svh: +5% y luego +2%, 2026-07-21 */
  .hc-slide.hc-full .hc-media{ height:100%; }
}

/* "224 reseñas en Google / todas de familias reales" — el salto solo en pantallas
   angostas, para que no quede "reales" colgando solo en la segunda línea */
.sub-rating .sr-br{display:none}
@media(max-width:760px){ .sub-rating .sr-br{display:block} .sub-rating{text-wrap:balance} }


/* ══════ Empresas / venta al por mayor ══════ */
.emp{background:var(--cream,#FBF9F3);padding:clamp(4.8rem,6vw,8rem) 1.6rem}
.emp-wrap{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,4vw,5rem);align-items:start}
.emp-kicker{display:inline-block;background:var(--aqua,#37C7CE);color:var(--deep,#153F38);
  font-family:var(--round);font-weight:800;font-size:1.28rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.56rem 1.44rem;border-radius:999px;margin-bottom:1.6rem}
.emp-h{font-family:var(--display);font-size:clamp(2.9rem,4.4vw,4.4rem);line-height:1.1;color:var(--deep,#153F38);margin:0 0 1.6rem}
.emp-lead{font-size:1.68rem;line-height:1.6;color:#4a5a54;max-width:46ch}
.emp-lead p{margin:0 0 1rem}
.emp-bene{list-style:none;padding:0;margin:3.2rem 0 0;display:grid;gap:1.76rem}
.emp-bene li{display:flex;gap:1.44rem;align-items:flex-start}
.emp-ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-size:2rem;box-shadow:0 6px 16px -8px rgba(21,63,56,.3)}
.emp-bene b{display:block;font-family:var(--round);font-weight:800;font-size:1.6rem;color:var(--deep,#153F38)}
.emp-bene small{display:block;font-size:1.44rem;color:#5b6862;line-height:1.5;margin-top:.32rem}

.emp-form{background:#fff;border-radius:26px;padding:clamp(2.4rem,3vw,3.6rem);
  box-shadow:0 24px 54px -28px rgba(21,63,56,.4);position:sticky;top:11rem}
.emp-fh{font-family:var(--round);font-weight:800;font-size:2rem;color:var(--deep,#153F38);margin:0 0 2rem}
.emp-form label{display:block;font-family:var(--round);font-weight:700;font-size:1.36rem;
  color:var(--deep,#153F38);margin-bottom:1.6rem}
.emp-form .opt{font-weight:600;color:#8a9691}
.emp-form input,.emp-form textarea{
  display:block;width:100%;margin-top:.64rem;border:1.5px solid rgba(21,63,56,.16);background:#FBF9F3;
  border-radius:14px;padding:1.2rem 1.44rem;font-family:inherit;font-size:1.52rem;color:var(--ink);
  transition:border-color .2s,background .2s}
.emp-form input:focus,.emp-form textarea:focus{outline:none;border-color:var(--viridian,#2EA27B);background:#fff}
.emp-form input::placeholder,.emp-form textarea::placeholder{color:#9aa5a0}
.emp-btn{width:100%;background:var(--viridian,#2EA27B);color:#fff;border:0;border-radius:999px;
  font-family:var(--round);font-weight:800;font-size:1.68rem;padding:1.36rem 2rem;cursor:pointer;
  transition:transform .25s var(--spring),background .25s}
.emp-btn:hover{background:var(--deep,#153F38);transform:translateY(-2px)}
.emp-fine{display:block;margin-top:1.44rem;font-size:1.28rem;color:#7d8a84;line-height:1.5;text-align:center}
.emp-ok{background:#E8F7EF;border:2px solid var(--viridian,#2EA27B);border-radius:16px;padding:1.76rem;
  font-family:var(--round);font-weight:800;font-size:1.6rem;color:var(--deep,#153F38);margin:0 0 2rem;text-align:center}
.emp-ok small{display:block;font-weight:600;font-size:1.36rem;margin-top:.48rem;color:#4a5a54}
.emp-err{background:#ffe3e3;color:#8a2b2b;border-radius:12px;padding:1.2rem;font-size:1.44rem;margin:0 0 1.6rem}
@media(max-width:860px){
  .emp-wrap{grid-template-columns:1fr}
  .emp-form{position:static}
  .emp-bene{margin-top:2.4rem}
}

/* franja de empresas en el home */
.empcta{background:var(--deep,#153F38);color:#fff;padding:clamp(3.2rem,4vw,4.8rem) 1.6rem;text-align:center}
.empcta h2{font-family:var(--display);font-size:clamp(2.4rem,3.4vw,3.4rem);color:#fff;margin:0 0 1.2rem;line-height:1.15}
.empcta p{font-size:1.6rem;color:rgba(255,255,255,.85);max-width:52ch;margin:0 auto 2.4rem;line-height:1.55}
.empcta a{display:inline-flex;background:var(--yellow,#FFC93C);color:var(--deep,#153F38);
  font-family:var(--round);font-weight:800;font-size:1.6rem;padding:1.2rem 2.8rem;border-radius:999px;
  text-decoration:none;transition:transform .25s var(--spring)}
.empcta a:hover{transform:translateY(-3px) scale(1.03)}


/* ══════ Blog: la foto ya no tapa el título ══════
   .bhero tenía height:160px fijo pero la img llevaba aspect-ratio:1/1 (~325px),
   así que se desbordaba y cubría la etiqueta y el h3. El contenedor manda. */
.bcard .bhero{ height:auto; aspect-ratio:4/3; overflow:hidden; }
.bcard .bhero img{ width:100%; height:100%; aspect-ratio:auto; object-fit:cover; display:block; }
.bcard .bb{ position:relative; z-index:1; }