:root{
  --rosa:#F89DB7; --blush:#FAD9E0; --menta:#ABE2CF; --crema:#F7DDD4; --lavanda:#DCD3FA;
  --mantequilla:#FDECC9; --fondo:#FFF8F3; --blanco:#fff;
  --coral:#C93B63; --coral-txt:#B03A5F; --coral-hover:#A82F53;
  --lav-cta:#6B4BC4; --lav-txt:#5B3FB0;
  --verde:#1F6B4F; --ambar:#8A5A0B; --rojo:#A11F3C;
  --tinta:#50313D; --tinta2:#393536; --suave:#7A5A66; --tenue:#8A757F;
  --linea:#F0DED7; --linea2:#EBD7CF;
  --r:24px; --r2:18px; --r3:14px;
  --sombra:0 2px 14px rgba(80,49,61,.06); --sombra2:0 10px 34px rgba(80,49,61,.13);
  --max:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","DM Sans",system-ui,Arial,sans-serif;font-weight:700;
  margin:0;line-height:1.13;letter-spacing:-.02em;text-wrap:pretty}
h1{font-size:clamp(30px,7.4vw,54px)} h2{font-size:clamp(23px,5.2vw,36px)} h3{font-size:clamp(18px,3.6vw,23px)}
p{margin:0} img{max-width:100%;display:block}
a{color:var(--coral-txt);text-decoration:none} a:hover{color:var(--coral-hover)}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}
.env{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
@media(min-width:900px){.env{padding:0 34px}}
.pill{border-radius:999px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--coral-txt)}
.tarj{background:var(--blanco);border-radius:var(--r);box-shadow:var(--sombra)}
.silencio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── botones ── */
.b{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 26px;
  border-radius:999px;font-weight:700;font-size:16.5px;text-align:center;
  transition:transform .18s cubic-bezier(.22,.75,.3,1),box-shadow .18s ease,background-color .18s ease,color .18s ease}
.b:active{transform:scale(.975)}
.b-1{background:var(--coral);color:#fff}.b-1:hover{background:var(--coral-hover);color:#fff;transform:translateY(-2px);box-shadow:var(--sombra2)}
.b-2{background:var(--blanco);color:var(--coral-txt);border:1.6px solid #F0C6D2}.b-2:hover{background:#FFF2F5;color:var(--coral-hover);transform:translateY(-2px)}
.b-v{background:var(--verde);color:#fff}.b-v:hover{background:#17553E;color:#fff;transform:translateY(-2px);box-shadow:var(--sombra2)}
.b-l{background:var(--lav-cta);color:#fff}.b-l:hover{background:#573BA6;color:#fff;transform:translateY(-2px);box-shadow:var(--sombra2)}
.b-o{background:var(--rosa);color:var(--tinta)}.b-o:hover{background:#F58FA6;color:var(--tinta);transform:translateY(-2px)}
.b-full{width:100%}
.ico-b{width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;border:1px solid var(--linea);
  background:var(--blanco);display:inline-flex;align-items:center;justify-content:center;flex:none;
  transition:transform .18s,background-color .18s}
.ico-b:hover{background:#FFF2F5;transform:translateY(-2px)}

/* ── cabecera ── */
.cab{position:sticky;top:0;z-index:60;background:rgba(255,248,243,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.cab.pegada{border-bottom-color:var(--linea);box-shadow:0 2px 18px rgba(80,49,61,.05)}
.cab-in{display:flex;align-items:center;gap:12px;justify-content:space-between;padding-block:12px}
.logo{display:inline-flex;align-items:center;gap:9px;flex:none;min-height:46px}
.logo-t{font-family:"Bricolage Grotesque",Arial,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--tinta);line-height:1}
.nav-esc{display:none}
@media(min-width:960px){
  .nav-esc{display:flex;align-items:center;gap:4px;flex-grow:1;justify-content:center}
  .nav-esc a{padding:11px 15px;border-radius:999px;font-weight:600;font-size:15.5px;color:var(--tinta);transition:background-color .18s}
  .nav-esc a:hover,.nav-esc a.act{background:var(--blush);color:var(--coral-hover)}
  .men-b{display:none!important}
}
.cab-acc{display:flex;align-items:center;gap:9px;flex:none}
.badge{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;border-radius:999px;background:var(--coral);
  color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--fondo)}

/* ── menú móvil ── */
.men{position:fixed;inset:0;z-index:200;background:var(--tinta);color:var(--fondo);
  display:flex;flex-direction:column;padding:14px 0 30px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .26s,transform .26s,visibility .26s}
.men.abierto{opacity:1;visibility:visible;transform:none}
.men a{color:var(--fondo)}
.men-nav a{display:block;font-family:"Bricolage Grotesque",Arial,sans-serif;font-size:31px;font-weight:700;
  line-height:1.15;padding:15px 0;border-bottom:1px solid #6A4655}
.men-nav a:last-child{border-bottom:none}

/* ── movimiento ── */
@keyframes flotar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-2deg)}}
@keyframes flotar2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes surgir{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes latir{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes brillar{0%{background-position:-420px 0}100%{background-position:420px 0}}
@keyframes entraToast{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.flota{animation:flotar 5s ease-in-out infinite;display:inline-block;will-change:transform}
.flota2{animation:flotar2 6.2s ease-in-out infinite;display:inline-block;will-change:transform}
.late{animation:latir 2.6s ease-in-out infinite}
.barrido{background:linear-gradient(100deg,#F7EDE7 30%,#FFF6F1 50%,#F7EDE7 70%);background-size:760px 100%;animation:brillar 1.6s linear infinite}
.surge{opacity:0}
.surge.visto{animation:surgir .74s cubic-bezier(.22,.75,.3,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}.d5{animation-delay:.4s}.d6{animation-delay:.48s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .surge{opacity:1!important}
  html{scroll-behavior:auto}
}

/* ── botones flotantes ── */
.fabs{position:fixed;right:16px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:11px;align-items:flex-end}
.fab{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra2);transition:transform .2s}
.fab:hover{transform:translateY(-3px) scale(1.04)}
.fab-wa{background:var(--verde)}
.fab-ag{background:var(--coral);width:auto;padding:0 22px;height:56px;border-radius:999px;color:#fff;font-weight:700;font-size:15.5px;gap:9px}
@media(min-width:960px){.fabs{right:26px;bottom:26px}}

/* ── retícula de productos ── */
.rej{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.rej{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:960px){.rej{grid-template-columns:repeat(4,1fr);gap:20px}}
.pcard{background:var(--blanco);border-radius:var(--r2);padding:11px;display:flex;flex-direction:column;gap:7px;
  min-width:0;transition:transform .2s,box-shadow .2s;box-shadow:var(--sombra)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sombra2)}
.pimg{aspect-ratio:1;border-radius:var(--r3);background:#FFFCF9;border:1px solid #F4EAE5;overflow:hidden;display:block}
.pimg img{width:100%;height:100%;object-fit:contain;padding:7px}
.pmarca{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#855A67;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptit{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--tinta);
  /* alto exacto de dos renglones: sin esto asoma media línea por debajo.
     El relleno lleva el área táctil a 44 px sin tocar el recorte del texto. */
  /* min-height, nunca height: con height la caja recorta y asoma media línea.
     Con min-height el recorte de 2 líneas manda y la caja se ajusta a ellas. */
  box-sizing:content-box;min-height:2.7em;margin:0;display:block;
  padding-block:max(3px, calc((44px - 2.7em) / 2))}
/* El recorte va en un hijo, no en el enlace: Chromium convierte -webkit-box a
   flow-root cuando el elemento es hijo de un flex, y ahí -webkit-line-clamp
   deja de recortar por líneas y corta a mitad de renglón. */
.ptit > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:inherit}
.pprec{font-family:"Bricolage Grotesque",Arial,sans-serif;font-size:17px;font-weight:800;color:var(--tinta)}

/* ── fichas y formularios ── */
.campo{display:flex;flex-direction:column;gap:6px}
.campo>span:first-child{font-size:14.5px;font-weight:600}
.campo input,.campo textarea,.campo select{width:100%;min-height:54px;border-radius:16px;border:1.5px solid var(--linea2);
  background:var(--blanco);padding:14px 16px;font-size:16px;font-family:inherit;color:var(--tinta)}
.campo textarea{min-height:110px;resize:vertical;line-height:1.5}
.campo small{font-size:13px;color:var(--suave);line-height:1.45}
.chips{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;background:var(--blanco);border:1.4px solid var(--linea);color:var(--tinta);
  font-size:14.5px;font-weight:600;padding:11px 17px;border-radius:999px;white-space:nowrap;transition:all .18s}
.chip:hover{border-color:#E2BFCB}
.chip.act{background:var(--coral);border-color:var(--coral);color:#fff}
.aviso{border-radius:var(--r2);padding:17px 19px;display:flex;gap:12px;align-items:flex-start;line-height:1.55;font-size:15px}
.aviso svg{flex:none;margin-top:2px}
.a-calma{background:#EDF1F5;color:#3C4A58}
.a-verde{background:#E8F5EE;color:#1A5C44}
.a-ambar{background:var(--mantequilla);color:#6B4708}
.enl{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-weight:700;font-size:15.5px}
.sec{padding-block:46px}
@media(min-width:900px){.sec{padding-block:70px}}
.hilo{height:1px;background:var(--linea);border:none;margin:0}

/* ── toast ── */
.toasts{position:fixed;left:16px;right:16px;bottom:92px;z-index:150;display:flex;flex-direction:column;gap:9px;pointer-events:none}
@media(min-width:640px){.toasts{left:auto;right:26px;width:340px;bottom:100px}}
.toast{border-radius:var(--r2);padding:15px 17px;display:flex;gap:12px;align-items:center;color:#fff;
  box-shadow:var(--sombra2);animation:entraToast .3s cubic-bezier(.22,.75,.3,1) both;pointer-events:auto;font-size:15.5px;font-weight:600}
.t-ok{background:var(--verde)} .t-err{background:var(--rojo)} .t-info{background:var(--tinta)}

/* ── pie ── */
.pie{background:var(--tinta);color:var(--fondo);padding-block:48px 30px;margin-top:20px}
.pie a{color:#F3DFE5}.pie a:hover{color:#fff}
.pie h4{color:var(--fondo);font-size:16px;margin-bottom:12px}
.pie-rej{display:grid;grid-template-columns:1fr 1fr;gap:30px 24px}
@media(min-width:820px){.pie-rej{grid-template-columns:2fr 1fr 1fr 1.4fr}}

details summary::-webkit-details-marker{display:none}
details[open] .faq-x{transform:rotate(45deg)}
.faq-x{transition:transform .22s cubic-bezier(.22,.75,.3,1);display:inline-flex}
details summary:hover{background:#FFF6F2}
details[open]>summary{border-bottom:1px solid var(--linea)}
blockquote{quotes:none}

/* ═══════════ v2 · respiración, modernidad y flow ═══════════ */
:root{
  --gutter:26px;        /* aire lateral: nada toca el borde */
  --r:28px; --r2:22px; --r3:16px;
  --band:78px;          /* separación entre bandas */
}
@media(min-width:640px){ :root{--gutter:40px; --band:96px} }
@media(min-width:1100px){ :root{--gutter:64px; --band:120px; --max:1240px} }

.env{padding:0 var(--gutter)}
@media(min-width:900px){.env{padding:0 var(--gutter)}}
.sec{padding-block:var(--band)}
@media(min-width:900px){.sec{padding-block:var(--band)}}

/* grano: le da textura de papel, pesa 0 KB */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* barra de progreso de lectura */
.progreso{position:fixed;top:0;left:0;height:3px;z-index:120;
  background:linear-gradient(90deg,var(--coral),var(--rosa),var(--lav-cta));
  transform-origin:0 50%;transform:scaleX(0);width:100%}
@supports (animation-timeline: scroll()){
  .progreso{animation:crecer linear both;animation-timeline:scroll(root block)}
  @keyframes crecer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ── botones con presencia ── */
.b{min-height:58px;padding:0 30px;font-size:17px;box-shadow:0 3px 0 rgba(80,49,61,.09);letter-spacing:-.01em}
.b-1{box-shadow:0 5px 20px rgba(201,59,99,.28), 0 2px 0 rgba(120,25,52,.22)}
.b-1:hover{box-shadow:0 12px 30px rgba(201,59,99,.36), 0 2px 0 rgba(120,25,52,.22)}
.b-v{box-shadow:0 5px 20px rgba(31,107,79,.26), 0 2px 0 rgba(16,64,47,.22)}
.b-v:hover{box-shadow:0 12px 30px rgba(31,107,79,.34), 0 2px 0 rgba(16,64,47,.22)}
.b-l{box-shadow:0 5px 20px rgba(107,75,196,.26), 0 2px 0 rgba(60,38,120,.22)}
.b-o{box-shadow:0 5px 20px rgba(248,157,183,.4), 0 2px 0 rgba(180,90,115,.2)}
.b-2{box-shadow:0 2px 0 rgba(80,49,61,.06)}
.b:active{box-shadow:0 1px 0 rgba(80,49,61,.14)}
.ico-b{width:52px;height:52px;min-height:52px;box-shadow:0 2px 10px rgba(80,49,61,.07)}

/* ── hero editorial a pantalla completa ── */
.hero{position:relative;min-height:min(88svh,760px);display:flex;align-items:flex-end;
  border-radius:var(--r);overflow:hidden;isolation:isolate;margin:0 var(--gutter)}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;transform:scale(1.06)}
@supports (animation-timeline: view()){
  .hero-img img{animation:desliza linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes desliza{from{transform:scale(1.12) translateY(-3%)}to{transform:scale(1.12) translateY(5%)}}
}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(45,22,32,.10) 0%,rgba(45,22,32,.22) 42%,rgba(45,22,32,.80) 100%)}
.hero-txt{position:relative;z-index:2;padding:34px 26px 32px;color:#FFF8F3;width:100%;max-width:760px}
.hero-txt h1{color:#fff;font-size:clamp(34px,8.6vw,72px);letter-spacing:-.035em;line-height:1.02}
.hero-txt p{color:#F6E4E9;font-size:clamp(16.5px,2.2vw,21px);line-height:1.55;max-width:520px}
@media(min-width:900px){.hero-txt{padding:56px 54px 52px}}

/* ── marquesina cinética ── */
.marq{overflow:hidden;white-space:nowrap;padding:16px 0;background:var(--tinta);color:var(--fondo);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq-p{display:inline-flex;gap:34px;align-items:center;animation:corre 34s linear infinite;padding-right:34px}
.marq:hover .marq-p{animation-play-state:paused}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq span{font-family:"Bricolage Grotesque",Arial,sans-serif;font-size:clamp(19px,3.4vw,30px);font-weight:700;
  letter-spacing:-.02em;display:inline-flex;align-items:center;gap:34px}
.marq b{color:var(--rosa);font-size:.7em}

/* ── bento ── */
.bento{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:820px){
  .bento{grid-template-columns:1.35fr 1fr;grid-auto-rows:minmax(210px,auto);gap:18px}
  .bento>*:nth-child(1){grid-row:span 2}
}
.bento-c{border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;transition:transform .28s cubic-bezier(.22,.75,.3,1),box-shadow .28s}
.bento-c:hover{transform:translateY(-5px)}
.bento-c .deco{position:absolute;right:-14px;bottom:-10px;opacity:.85;transition:transform .4s cubic-bezier(.22,.75,.3,1)}
.bento-c:hover .deco{transform:translateY(-6px) rotate(-6deg) scale(1.06)}

/* ── formas orgánicas para las fotos ── */
.blob{border-radius:58% 42% 46% 54% / 46% 52% 48% 54%;overflow:hidden}
.blob2{border-radius:44% 56% 60% 40% / 55% 44% 56% 45%;overflow:hidden}

/* ── bandas de color alternas ── */
.banda{background:var(--blanco)}
.banda-menta{background:linear-gradient(180deg,#EEF8F3,#E7F4EE)}
.banda-blush{background:linear-gradient(180deg,#FFF1F5,#FDE8EE)}
.banda-tinta{background:var(--tinta);color:var(--fondo)}
.banda-tinta h2,.banda-tinta h3{color:var(--fondo)}

/* ── cifras ── */
.cifra{font-family:"Bricolage Grotesque",Arial,sans-serif;font-size:clamp(38px,8vw,62px);font-weight:800;
  letter-spacing:-.04em;line-height:1;display:block}

/* ── títulos con más carácter ── */
h1{letter-spacing:-.035em}
h2{font-size:clamp(26px,5.4vw,44px);letter-spacing:-.03em}
.eyebrow{letter-spacing:.2em;font-size:12.5px}

/* ── tarjetas de producto con más aire ── */
.pcard{padding:13px;border-radius:var(--r2)}
.rej{gap:14px}
@media(min-width:960px){.rej{gap:22px}}

/* ── los chips no pegados al borde ── */
.chips{padding-left:2px;padding-right:var(--gutter);margin-right:calc(var(--gutter)*-1)}

/* ── enlace subrayado animado ── */
.enl{position:relative}
.enl::after{content:"";position:absolute;left:0;bottom:9px;height:2px;width:0;background:currentColor;
  transition:width .28s cubic-bezier(.22,.75,.3,1)}
.enl:hover::after{width:calc(100% - 24px)}

/* ── la cabecera se despega ── */
.cab-in{padding-block:14px}
.cab.pegada{background:rgba(255,248,243,.86)}

.pie-rej{grid-template-columns:1fr;gap:32px}
@media(min-width:520px){.pie-rej{grid-template-columns:1fr 1fr;gap:34px 26px}}
@media(min-width:900px){.pie-rej{grid-template-columns:2fr 1fr 1fr 1.4fr;gap:34px 30px}}
.pie{padding-block:58px 34px}

.hero-esc{display:none}
@media(min-width:900px){ .hero-mov{display:none} .hero-esc{display:block} }
.hero-txt h1{text-wrap:balance}
.hero-mov h1{text-wrap:balance}
.marq{margin-top:34px}

.hero-mov{overflow:hidden}

.blob{border-radius:38% 30% 34% 32% / 30% 34% 30% 36%;overflow:hidden}
.blob2{border-radius:32% 38% 36% 30% / 36% 30% 38% 32%;overflow:hidden}
.hero-txt .eyebrow{letter-spacing:.16em}
.bento-c .deco{opacity:.9}
@media(min-width:820px){ .bento-c .deco{right:22px;bottom:20px} }

:root{--gutter:30px}
@media(min-width:640px){:root{--gutter:44px}}
@media(min-width:1100px){:root{--gutter:72px}}
/* las tarjetas también respiran por dentro */
.tarj{padding:0}
.bento-c{padding:30px 26px}
.pcard{padding:14px}
.hero{margin:0 var(--gutter)}
.marq{margin-left:0;margin-right:0}

/* ═══════════ marco general de la página ═══════════ */
html{background:#F2E3DC}
body{background:#F2E3DC;overflow-x:clip}
.hoja{background:var(--fondo);margin:10px;border-radius:30px;overflow:clip;
  box-shadow:0 1px 3px rgba(80,49,61,.06), 0 18px 50px rgba(80,49,61,.07);
  min-height:calc(100svh - 20px)}
@media(min-width:900px){ .hoja{margin:18px;border-radius:38px;min-height:calc(100svh - 36px)} }
@media(min-width:1400px){ .hoja{margin:26px} }
.cab{border-radius:30px 30px 0 0}
@media(min-width:900px){.cab{border-radius:38px 38px 0 0}}
.pie{margin-top:0;border-radius:0}
.progreso{border-radius:0 3px 3px 0}

/* aire interno más generoso, ahora que hay marco */
:root{--gutter:24px}
@media(min-width:640px){:root{--gutter:40px}}
@media(min-width:1100px){:root{--gutter:68px}}

/* el héroe ya no necesita margen propio: la hoja se lo da */
.hero{margin:0 var(--gutter);border-radius:var(--r)}

/* nada puede desbordar de lado, pase lo que pase */
main,.pie,.cab{max-width:100%}
img,video,iframe,table,pre{max-width:100%}

/* ═══════════ v3 · sistema de movimiento ═══════════ */

/* 1 · entradas diferenciadas por tipo de elemento */
@keyframes subeSuave{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes entraEscala{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes entraIzq{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:none}}
@keyframes entraDer{from{opacity:0;transform:translate3d(30px,0,0)}to{opacity:1;transform:none}}
@keyframes cortina{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes subePalabra{from{opacity:0;transform:translate3d(0,.6em,0) rotate(2deg)}to{opacity:1;transform:none}}

.surge.visto{animation:subeSuave .78s cubic-bezier(.16,.84,.32,1) both}
.escala{opacity:0}.escala.visto{animation:entraEscala .8s cubic-bezier(.16,.84,.32,1) both}
.izq{opacity:0}.izq.visto{animation:entraIzq .8s cubic-bezier(.16,.84,.32,1) both}
.der{opacity:0}.der.visto{animation:entraDer .8s cubic-bezier(.16,.84,.32,1) both}
.cort{clip-path:inset(0 0 100% 0)}.cort.visto{animation:cortina .95s cubic-bezier(.16,.84,.32,1) both}

/* 2 · titulares que entran palabra por palabra */
.pal{display:inline-block;opacity:0;will-change:transform,opacity}
.visto .pal{animation:subePalabra .72s cubic-bezier(.16,.84,.32,1) both}

/* 3 · Ken Burns: las fotos respiran */
@keyframes kenburns{0%{transform:scale(1.02) translate3d(0,0,0)}50%{transform:scale(1.09) translate3d(-1.4%,-1.2%,0)}100%{transform:scale(1.02) translate3d(0,0,0)}}
.kb img,img.kb{animation:kenburns 26s ease-in-out infinite;will-change:transform}
.kb-l img{animation-duration:34s}
.kb-r img{animation-duration:30s;animation-direction:reverse}

/* 4 · las formas orgánicas se transforman despacio */
@keyframes morfa{
  0%,100%{border-radius:38% 30% 34% 32% / 30% 34% 30% 36%}
  33%{border-radius:32% 40% 30% 36% / 36% 30% 38% 30%}
  66%{border-radius:36% 32% 40% 30% / 32% 38% 30% 34%}
}
.blob,.blob2{animation:morfa 18s ease-in-out infinite;will-change:border-radius}
.blob2{animation-duration:22s;animation-direction:reverse}

/* 5 · degradado vivo detrás del héroe móvil */
@keyframes mueveMalla{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,-4%,0) scale(1.14)}}
.malla{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(46px);opacity:.55;
  background:
    radial-gradient(38% 42% at 22% 26%, #F89DB7 0%, transparent 62%),
    radial-gradient(36% 40% at 78% 18%, #DCD3FA 0%, transparent 62%),
    radial-gradient(40% 44% at 62% 76%, #ABE2CF 0%, transparent 62%);
  animation:mueveMalla 22s ease-in-out infinite}

/* 6 · tarjetas con inclinación 3D */
.tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,.84,.32,1),box-shadow .4s}
.tilt.act{transition:transform .12s linear}

/* 7 · botones magnéticos */
.b,.ico-b,.fab{will-change:transform}
.iman{transition:transform .32s cubic-bezier(.16,.84,.32,1)}

/* 8 · la foto del producto se acerca al pasar */
.pimg img{transition:transform .55s cubic-bezier(.16,.84,.32,1)}
.pcard:hover .pimg img{transform:scale(1.09) rotate(-1deg)}
.pcard:hover .pmarca{color:var(--coral-txt)}

/* 9 · la cabecera se encoge al bajar */
.cab{transition:padding .3s cubic-bezier(.16,.84,.32,1),background-color .3s,box-shadow .3s,border-color .3s}
.cab.pegada .cab-in{padding-block:8px}
.cab .logo{transition:transform .3s cubic-bezier(.16,.84,.32,1)}
.cab.pegada .logo{transform:scale(.9)}

/* 10 · transición al cambiar de página */
@keyframes entraPagina{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
#app.cambia{animation:entraPagina .5s cubic-bezier(.16,.84,.32,1) both}
@view-transition{navigation:auto}
::view-transition-old(root){animation:saleVT .28s ease both}
::view-transition-new(root){animation:entraVT .42s cubic-bezier(.16,.84,.32,1) both}
@keyframes saleVT{to{opacity:0;transform:translateY(-8px)}}
@keyframes entraVT{from{opacity:0;transform:translateY(14px)}}

/* 11 · segunda marquesina, al revés */
.marq-inv .marq-p{animation-direction:reverse;animation-duration:40s}

/* 12 · el guía ilustrado saluda al pasar el cursor */
@keyframes saluda{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.bento-c:hover .deco{animation:saluda .9s ease-in-out}

/* 13 · brillo que recorre el botón principal */
.b-1,.b-v{position:relative;overflow:hidden}
.b-1::after,.b-v::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);
  animation:pasaBrillo 4.6s ease-in-out infinite;pointer-events:none}
@keyframes pasaBrillo{0%,72%{left:-60%}92%,100%{left:130%}}

/* 14 · las cifras suben al aparecer */
.cifra{display:inline-block}
.cifra.visto{animation:entraEscala .7s cubic-bezier(.16,.84,.32,1) both}

/* 15 · desplazamiento por scroll en los adornos */
@supports (animation-timeline: view()){
  .par-lento{animation:parLento linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes parLento{from{transform:translate3d(0,-22px,0)}to{transform:translate3d(0,22px,0)}}
  .par-rapido{animation:parRapido linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes parRapido{from{transform:translate3d(0,46px,0)}to{transform:translate3d(0,-46px,0)}}
  .escalaScroll{animation:escSc linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes escSc{from{transform:scale(.9);opacity:.55}to{transform:scale(1);opacity:1}}
}

/* 16 · foco visible con estilo */
.b:focus-visible,.ico-b:focus-visible,.chip:focus-visible{outline:3px solid var(--coral);outline-offset:4px}

/* ── todo se apaga si el sistema pide menos movimiento ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .surge,.escala,.izq,.der,.pal{opacity:1!important;transform:none!important}
  .cort{clip-path:none!important}
  .malla{display:none}
  @view-transition{navigation:none}
}

/* will-change solo cuando hace falta: en móviles de gama baja cuesta memoria */
.b,.ico-b,.fab{will-change:auto}
.b:hover,.ico-b:hover,.fab:hover,.tilt.act{will-change:transform}
.pal{will-change:auto}
.visto .pal{will-change:transform,opacity}

/* aire lateral definitivo: ningún atajo de padding puede pisarlo */
:root{--gutter:26px}
@media(min-width:400px){:root{--gutter:32px}}
@media(min-width:640px){:root{--gutter:44px}}
@media(min-width:1100px){:root{--gutter:72px}}
.env{padding-inline:var(--gutter)!important;padding-block:0}
.sec{padding-block:var(--band)}
.cab-in{padding-block:14px}
.cab.pegada .cab-in{padding-block:9px}
.pie{padding-block:58px 34px}
.hero{margin-inline:var(--gutter)}

/* ═══════════ el navegador no puede oscurecer la marca ═══════════ */
:root{color-scheme:light}
html,body,input,select,textarea,button{color-scheme:light}
@media(prefers-color-scheme:dark){
  html{background:#F2E3DC} body{background:#F2E3DC;color:var(--tinta)}
  .hoja{background:var(--fondo)}
}
/* si el navegador fuerza el modo oscuro igual, mantenemos el contraste */
@media (forced-colors: active){
  .b,.ico-b,.chip{border:1px solid ButtonBorder}
  .hoja{border:1px solid CanvasText}
}

/* ═══════════ el contenido existe antes de animarse ═══════════ */
/* sin JavaScript todo se ve; el estado oculto solo vive dentro de .js */
.surge,.escala,.izq,.der{opacity:1}
.cort{clip-path:none}
.pal{opacity:1}
html.js .surge,html.js .escala,html.js .izq,html.js .der{opacity:0}
html.js .cort{clip-path:inset(0 0 100% 0)}
html.js .visto .pal{opacity:0}
html.js .surge.visto,html.js .escala.visto,html.js .izq.visto,html.js .der.visto{opacity:1}
html.js .cort.visto{clip-path:inset(0 0 0 0)}
/* red de seguridad: pasados 2,5 s todo aparece pase lo que pase */
html.revelar .surge,html.revelar .escala,html.revelar .izq,html.revelar .der,
html.revelar .pal{opacity:1!important;animation:none!important;transform:none!important}
html.revelar .cort{clip-path:none!important}
@media(prefers-reduced-motion:reduce){
  html.js .surge,html.js .escala,html.js .izq,html.js .der,html.js .pal{opacity:1!important}
  html.js .cort{clip-path:none!important}
}

/* la fila de categorías avisa de que sigue */
.chips-env{position:relative}
.chips-env::after{content:"";position:absolute;right:0;top:0;bottom:6px;width:44px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--fondo) 78%)}

/* ¿Qué necesita tu familia hoy? — enrutador por situación */
.nec-g{display:grid;grid-template-columns:1fr;gap:12px}
.nec{display:flex;flex-direction:column;gap:7px;padding:20px 20px 18px;border-radius:22px;
  color:var(--tinta);text-decoration:none;position:relative;overflow:hidden;
  border:1px solid rgba(80,49,61,.07);transition:transform .34s cubic-bezier(.2,.8,.25,1),box-shadow .34s}
.nec:hover,.nec:focus-visible{transform:translateY(-5px);box-shadow:0 16px 34px rgba(80,49,61,.13)}
.nec-t{font-family:'Bricolage Grotesque',Arial,sans-serif;font-size:19px;font-weight:700;
  line-height:1.18;letter-spacing:-.02em}
.nec-d{font-size:15px;line-height:1.55}
.nec-f{margin-top:4px;font-size:14.5px}
@media(min-width:640px){ .nec-g{grid-template-columns:1fr 1fr;gap:14px} }
@media(min-width:1100px){
  .nec-g{grid-template-columns:repeat(3,1fr);gap:16px}
  .nec{padding:26px 26px 22px;border-radius:26px}
  .nec-t{font-size:21.5px}
}
/* barra inferior de contacto: aparece cuando el botón del encabezado ya salió de pantalla */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,248,243,.92);backdrop-filter:blur(14px);border-top:1px solid rgba(80,49,61,.10);
  transform:translateY(115%);transition:transform .38s cubic-bezier(.2,.8,.25,1);pointer-events:none}
.barra.ver{transform:translateY(0);pointer-events:auto}
.barra a{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;
  border-radius:15px;background:var(--coral);color:#fff;text-decoration:none;font-weight:700;font-size:16px}
@media(min-width:900px){ .barra{display:none} }
@media(prefers-reduced-motion:reduce){ .barra{transition:none} }

/* ── la ruta de cuidado: el hilo que conecta las etapas ── */
.linea{position:relative;display:grid;grid-template-columns:1fr;gap:0}
.linea-hilo{position:absolute;left:7px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--coral),#8B6FD8 46%,var(--verde));border-radius:2px;opacity:.35}
.etapa{position:relative;padding:0 0 26px 30px;display:flex;flex-direction:column;gap:4px}
.etapa:last-child{padding-bottom:0}
.etapa-pt{position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;
  box-shadow:0 0 0 4px var(--hoja)}
.etapa-n{font-family:'Bricolage Grotesque',Arial,sans-serif;font-size:18px;font-weight:700;
  line-height:1.2;letter-spacing:-.02em}
.etapa-d{font-size:15px;color:#5C4450;line-height:1.55}
@media(min-width:760px){
  .linea{grid-template-columns:repeat(3,1fr);gap:26px 22px}
  .linea-hilo{left:8px;right:8px;top:7px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--coral),#8B6FD8 46%,var(--verde))}
  .etapa{padding:34px 6px 0 0}
  .etapa-pt{top:0;left:0}
}
@media(min-width:1100px){ .linea{grid-template-columns:repeat(6,1fr);gap:0 18px} .etapa-n{font-size:17px} }

/* ── bloque de autoridad ── */
.aut{display:flex;flex-direction:column}
.aut-img{aspect-ratio:4/3;overflow:hidden}
.aut-img img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.aut-txt{padding:24px 22px 26px;display:flex;flex-direction:column}
@media(min-width:860px){
  .aut{flex-direction:row;align-items:stretch}
  .aut-img{flex:0 0 40%;aspect-ratio:auto}
  .aut-txt{padding:38px 38px 40px;justify-content:center}
}

/* ── Vacunas ── */
.vac-g{display:grid;grid-template-columns:1fr;gap:10px}
.vac{background:var(--hoja);border:1px solid rgba(80,49,61,.08);border-radius:18px;
  padding:16px 18px;display:flex;flex-direction:column;gap:5px;
  transition:transform .3s cubic-bezier(.2,.8,.25,1),box-shadow .3s}
.vac:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(80,49,61,.10)}
.vac-t{font-family:'Bricolage Grotesque',Arial,sans-serif;font-size:17.5px;font-weight:700;line-height:1.22}
.vac-d{font-size:14.5px;color:#5C4450;line-height:1.5}
.vac-p{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:5px}
.vac-lab{font-size:12.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.vac-p b{font-family:'Bricolage Grotesque',Arial,sans-serif;font-size:19px;letter-spacing:-.02em}
@media(min-width:620px){ .vac-g{grid-template-columns:1fr 1fr;gap:12px} }
@media(min-width:1100px){ .vac-g{grid-template-columns:repeat(3,1fr);gap:14px} }

/* ── el hilo de la ruta avanza con el scroll, sin JavaScript ── */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .linea-hilo{transform-origin:top center;animation:crece linear both;
      animation-timeline:view();animation-range:entry 22% cover 62%}
    @keyframes crece{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    .etapa-pt{animation:brota linear both;animation-timeline:view();animation-range:entry 26% cover 46%}
    @keyframes brota{from{transform:scale(.2);opacity:.2}to{transform:scale(1);opacity:1}}
    @media(min-width:760px){
      .linea-hilo{transform-origin:left center;animation-name:crecex}
      @keyframes crecex{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    }
  }
}
/* ── las superficies responden al dedo, no solo al puntero ── */
.tarj,.nec,.vac,.bento-c,.pcard{-webkit-tap-highlight-color:transparent}
.tarj:active,.nec:active,.vac:active,.bento-c:active{transform:scale(.985)}
.b{transition:transform .2s cubic-bezier(.2,.8,.25,1),box-shadow .24s,background .24s}
.b:active{transform:scale(.96)}
/* brillo que recorre el botón principal al pasar el dedo o el puntero */
.b-1,.b-l{position:relative;overflow:hidden;isolation:isolate}
.b-1::after,.b-l::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.30) 47%,transparent 66%);
  transform:translateX(-120%);transition:transform .78s cubic-bezier(.2,.75,.3,1)}
.b-1:hover::after,.b-l:hover::after,.b-1:focus-visible::after{transform:translateX(120%)}
@media(prefers-reduced-motion:reduce){
  .b-1::after,.b-l::after{display:none}
  .tarj:active,.nec:active,.vac:active,.bento-c:active,.b:active{transform:none}
  .linea-hilo,.etapa-pt{animation:none!important}
}

/* ── el pie de la tarjeta de producto: el precio nunca se pisa con el botón ──
   Por defecto va apilado, que siempre cabe. Solo si la tarjeta tiene ancho de
   sobra se ponen lado a lado. Un navegador viejo se queda en el apilado, que
   es el estado seguro. */
.pcard{container-type:inline-size}
.pfoot{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:8px}
.pprec{flex:0 1 auto;min-width:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.pagr{flex:1 1 100%;min-width:0;min-height:46px;padding:0 14px;background:var(--blush);
  color:#8E2A4A;font-weight:700;font-size:14.5px;border:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.pagr>span{overflow:hidden;text-overflow:ellipsis}
@container (min-width: 236px){
  .pfoot{flex-wrap:nowrap}
  .pagr{flex:0 0 auto}
}
@supports not (container-type: inline-size){
  @media(min-width:620px){ .pfoot{flex-wrap:nowrap} .pagr{flex:0 0 auto} }
}
.pagr:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){ .pagr:active{transform:none} }

/* ── tarjetas angostas: que la marca y el botón entren enteros ──
   A dos columnas en un teléfono de 320 px la tarjeta mide ~106 px por dentro.
   Con el tamaño normal, «Nordic Naturals» perdía 57 px y «Agregar» 22 px. */
.pmarca{white-space:normal;overflow:hidden;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  height:1.35em;line-height:1.35}
@container (max-width: 168px){
  .pmarca{letter-spacing:.03em;-webkit-line-clamp:2;height:2.7em}
  .pagr{padding:0 6px;font-size:13px;gap:3px}
  .pagr svg{width:15px;height:15px}
  .ptit{font-size:14px}
}
@container (min-width: 169px) and (max-width: 200px){
  .pmarca{letter-spacing:.05em}
  .pagr{padding:0 11px;font-size:14px}
}

/* Una palabra larguísima («Psiconeuroinmunología») no puede romper una tarjeta. */
h1,h2,h3,h4,.nec-t,.vac-t,.etapa-n{overflow-wrap:anywhere}
.ptit{overflow-wrap:break-word}
/* una marca larga se corta con puntos suspensivos, nunca partida a la mitad */
.pmarca{overflow-wrap:normal;word-break:normal;text-overflow:ellipsis}
.tarj span,.nec span,.vac span{overflow-wrap:break-word}
:lang(es) h1,:lang(es) h2,:lang(es) h3{hyphens:auto}

/* ═══════════ flujo: la página se mueve sola con el scroll ═══════════
   Todo esto va sobre contenido que ya es visible, y se apaga entero con
   prefers-reduced-motion. Corre en el compositor: no toca el hilo principal. */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){

    /* Aquí NO se animan las tarjetas ni los títulos: ya tienen su animación de
       entrada por JavaScript (.surge/.escala + .visto). Poner una segunda
       animación sobre el mismo elemento reemplaza a la primera, la clase .visto
       deja de tener efecto y la tarjeta se queda en opacidad 0. El movimiento
       ligado al scroll se reserva para lo que no usa ese sistema. */

    /* las fotos respiran: se acercan despacio mientras pasan por la pantalla */
    .pimg img,.blob img,.hero-img img,.aut-img img{
      animation:respira linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%}
    @keyframes respira{
      from{transform:scale(1.14) translateY(-1.2%)}
      to{transform:scale(1.01) translateY(1.2%)}}

    /* la marquesina de credenciales acelera con el scroll */
    .marq-p{animation-timeline:auto}

    /* la cabecera se afina cuando la página avanza */
    .cab{animation:afina linear both;animation-timeline:scroll(root);animation-range:0 140px}
    @keyframes afina{
      from{box-shadow:none;background:rgba(255,248,243,.94)}
      to{box-shadow:0 2px 20px rgba(80,49,61,.07);background:rgba(255,248,243,.99)}}
  }
}

/* Guardia: nada que use el sistema de entrada puede recibir además una
   animación ligada al scroll. Si algún día se agrega por descuido, esta regla
   devuelve el control al sistema de entrada. */
html.js .surge,html.js .escala,html.js .izq,html.js .der,html.js .cort{animation-timeline:auto}

/* barra de progreso de lectura: fina, arriba del todo, sin JavaScript */
.progreso{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--coral),#8B6FD8 52%,var(--verde));transform:scaleX(0);
  pointer-events:none}
@supports (animation-timeline: scroll()){
  @media(prefers-reduced-motion:no-preference){
    .progreso{animation:avanza linear both;animation-timeline:scroll(root)}
    @keyframes avanza{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
@media(prefers-reduced-motion:reduce){ .progreso{display:none} }

/* el desplazamiento entre secciones se siente continuo */
@media(prefers-reduced-motion:no-preference){
  .sec{scroll-margin-top:84px}
}

/* ── encabezado de página, con el color de su sección ── */
.cabpag{position:relative;overflow:hidden;padding-top:44px;padding-bottom:18px;isolation:isolate}
.cabpag-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:15px;max-width:700px}
.cabpag-b1{position:absolute;right:-74px;top:-62px;width:260px;height:260px;border-radius:50%;
  background:var(--acento);opacity:.72;z-index:0}
.cabpag-b2{position:absolute;right:56px;top:96px;width:130px;height:130px;border-radius:50%;
  background:var(--acento2);opacity:.55;z-index:0}
@media(min-width:900px){
  .cabpag{padding-top:58px;padding-bottom:26px}
  .cabpag-b1{right:-40px;top:-96px;width:360px;height:360px}
  .cabpag-b2{right:250px;top:110px;width:180px;height:180px}
}
@media(prefers-reduced-motion:reduce){ .cabpag-b1,.cabpag-b2{animation:none} }

/* ── cinta de credenciales ──
   Antes era una marquesina de texto corrido sobre fondo oscuro: al cortarse en
   el borde se leía «Maestría en Enfermería Pe» y parecía roto. En piezas
   redondeadas, una pieza cortada se lee como «sigue», que es lo que se busca. */
.cinta{position:relative;overflow:hidden;margin-top:30px;padding:15px 0;
  background:linear-gradient(90deg,#FFF1F5,#F3EDFF 46%,#EAF6F0);
  border-block:1px solid rgba(80,49,61,.07);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cinta-p{display:inline-flex;gap:10px;align-items:center;white-space:nowrap;
  animation:corre 42s linear infinite;will-change:transform}
.cinta:hover .cinta-p,.cinta:focus-within .cinta-p{animation-play-state:paused}
.cred{flex:none;background:var(--blanco);border:1px solid rgba(80,49,61,.09);
  border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700;color:var(--tinta);
  box-shadow:0 1px 6px rgba(80,49,61,.05)}
@media(min-width:900px){ .cinta{margin-top:40px;padding:18px 0} .cred{font-size:15px;padding:10px 19px} }
@media(prefers-reduced-motion:reduce){
  .cinta{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .cinta-p{animation:none;padding-inline:var(--gutter)}
}

/* un dibujo por situación: seis tarjetas del mismo color ya no se leen iguales */
.nec{position:relative;isolation:isolate}
.nec-dib{position:absolute;right:10px;bottom:8px;z-index:0;opacity:.5;
  transition:transform .42s cubic-bezier(.2,.8,.25,1),opacity .42s;pointer-events:none}
.nec:hover .nec-dib{transform:translateY(-5px) rotate(-5deg) scale(1.06);opacity:.75}
.nec-t,.nec-d,.nec-f{position:relative;z-index:1}
.nec-d{max-width:78%}
@media(min-width:1100px){ .nec-dib{right:14px;bottom:10px} }
@media(prefers-reduced-motion:reduce){ .nec:hover .nec-dib{transform:none} }

/* ── franja de cifras: cada número es también una puerta ── */
.cif-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cif{background:var(--blanco);border:1px solid rgba(80,49,61,.07);border-radius:20px;
  padding:18px 16px 16px;display:flex;flex-direction:column;gap:6px;color:var(--tinta);
  transition:transform .34s cubic-bezier(.2,.8,.25,1),box-shadow .34s}
.cif:hover,.cif:focus-visible{transform:translateY(-5px);box-shadow:0 16px 32px rgba(80,49,61,.12)}
.cif .cifra{font-family:"Bricolage Grotesque",Arial,sans-serif;font-size:clamp(34px,8vw,46px);
  font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cif-d{font-size:14.5px;color:#6B4655;line-height:1.5}
.cif-v{font-size:14px;font-weight:700;margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:5px}
@media(min-width:700px){ .cif-g{grid-template-columns:repeat(3,1fr);gap:16px} .cif{padding:24px 22px 20px} .cif-d{font-size:15.5px} }

/* ── ritmo vertical: una sola escala para todo el sitio ──
   Las separaciones estaban en 6, 16, 18, 20, 22, 26 y 30 px sin criterio.
   Ahora todo cae en múltiplos de 8, que es lo que hace que una página se lea
   compuesta y no armada a ojo. */
:root{--r1:8px; --r2v:16px; --r3v:24px; --r4:32px; --r5:40px}
.sec + .sec{padding-top:0}
.env.sec > h2 + p{margin-bottom:var(--r3v)}
.env.sec > h2{margin-bottom:var(--r1)}

/* ── el color de la sección llega también a la navegación ──
   El enrutador marca <body data-sec="…">, así que la pestaña activa, el foco y
   los detalles se tiñen del mismo tono que el encabezado de esa sección. */
.nav-esc a.act,.men-nav a.act{background:var(--sec-suave,var(--blush));color:var(--sec-fuerte,var(--coral-hover))}
body[data-sec="vacunas"],body[data-sec="tienda"],body[data-sec="carrito"],
body[data-sec="contacto"],body[data-sec="seguros"],body[data-sec="producto"]{--sec-suave:var(--menta);--sec-fuerte:#155E45}
body[data-sec="nanny"],body[data-sec="cobertura"]{--sec-suave:var(--lavanda);--sec-fuerte:var(--lav-txt)}
body[data-sec="guias"],body[data-sec="guia"],body[data-sec="preguntas"]{--sec-suave:var(--mantequilla);--sec-fuerte:var(--ambar)}
body[data-sec="legal"]{--sec-suave:#EDE4E8;--sec-fuerte:var(--suave)}
/* la línea de la cabecera al pegarse toma el tono de la sección */
.cab.pegada{border-bottom-color:var(--sec-suave,var(--linea))}

/* El titular de escritorio repite el de móvil: uno solo puede ser h1, si no
   la página tiene dos y el buscador no sabe cuál manda. Este hereda el aspecto. */
.h1-esc{font-family:"Bricolage Grotesque","DM Sans",system-ui,Arial,sans-serif;font-weight:700;
  margin:0;line-height:1.13;letter-spacing:-.02em;text-wrap:pretty;
  font-size:clamp(30px,7.4vw,54px);overflow-wrap:anywhere}

.alc-g{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){ .alc-g{grid-template-columns:1fr 1fr;gap:14px} }
@media(min-width:1200px){ .alc-g{grid-template-columns:repeat(3,1fr)} }

/* ── galería de la historia ── */
.galeria{display:grid;grid-template-columns:1fr;gap:14px}
.galeria figure{margin:0;display:flex;flex-direction:column;gap:9px}
.galeria img{width:100%;height:100%;object-fit:cover;border-radius:22px;aspect-ratio:4/3;
  transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.galeria figure:hover img{transform:scale(1.03)}
.galeria figcaption{font-size:14.5px;color:var(--suave);line-height:1.5;padding-inline:4px}
@media(min-width:760px){
  .galeria{grid-template-columns:1fr 1fr;gap:18px}
  .gal-a{grid-column:1/-1} .gal-a img{aspect-ratio:16/9}
}
@media(min-width:1100px){
  .galeria{grid-template-columns:repeat(6,1fr);gap:20px}
  .gal-a{grid-column:1/4} .gal-b{grid-column:4/7}
  .gal-c{grid-column:1/3} .gal-d{grid-column:3/5}
  .gal-a img,.gal-b img{aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){ .galeria figure:hover img{transform:none} }

/* ── el animalito de cada sección, asomando en el encabezado ── */
.cabpag-bicho{position:absolute;right:calc(var(--gutter) - 6px);bottom:6px;z-index:1;
  opacity:.9;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(80,49,61,.14))}
@media(min-width:640px){ .cabpag-bicho{right:calc(var(--gutter) + 8px);bottom:14px;transform:scale(1.25)} }
@media(min-width:1100px){ .cabpag-bicho{right:calc(var(--gutter) + 40px);bottom:22px;transform:scale(1.7)} }
@media(max-width:400px){ .cabpag-bicho{transform:scale(.82);bottom:2px;opacity:.75} }

/* ── más vida: los dibujos reaccionan al scroll y al dedo ── */
@keyframes saluda{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-8deg)}96%{transform:rotate(6deg)}}
.cabpag-bicho{animation:flotar 5.4s ease-in-out infinite, saluda 9s ease-in-out infinite}
.nec:hover .nec-dib,.nec:focus-visible .nec-dib{animation:saluda 1.1s ease-in-out}
.bento-c .deco{transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.bento-c:hover .deco{transform:translateY(-7px) rotate(-6deg) scale(1.1)}
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .cabpag-b2{animation:gira linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes gira{from{transform:translateY(-14px) scale(.9)}to{transform:translateY(18px) scale(1.06)}}
  }
}
@media(prefers-reduced-motion:reduce){
  .cabpag-bicho{animation:none}
  .bento-c:hover .deco{transform:none}
}

/* selector de idioma, discreto pero visible */
.idioma{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:.04em;
  color:var(--suave);border:1.4px solid var(--linea);transition:background-color .2s,color .2s}
.idioma b{color:var(--tinta);font-weight:800}
.idioma:hover{background:var(--sec-suave,var(--blush));color:var(--tinta)}
@media(max-width:520px){ .idioma{padding:0 9px;font-size:12.5px} }

/* ══════════════════════════════════════════════════════════════
   CAPA DE BRILLO — 4 de setiembre
   Resaltados brillantes, luz de fondo y más movimiento.
   Tres reglas que no se rompen:
     1. nada nace transparente sin que .visto (JS) lo encienda,
        si no Google y quien no hace scroll ven una página en blanco;
     2. un elemento no lleva dos declaraciones de animation, la
        segunda reemplaza a la primera y mata el sistema de reveal;
     3. todo se apaga entero con prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */

:root{
  --neon:#00B39A;          /* turquesa vivo, el acento nuevo */
  --neon-claro:#5FE3CB;
  --oro:#FFC24B;           /* dorado cálido para el subrayado */
  --oro-claro:#FFE7A8;
  --fucsia:#FF5C8A;
}

/* ── resaltado: subrayado de marcador que se pinta al entrar ── */
.res{position:relative;display:inline;color:inherit;font-weight:inherit;
  background-image:linear-gradient(120deg, var(--oro-claro) 0%, var(--oro) 55%, var(--neon-claro) 100%);
  background-repeat:no-repeat;
  background-size:100% .34em;              /* visible siempre: no depende del scroll */
  background-position:0 88%;
  border-radius:3px;
  transition:background-size .5s cubic-bezier(.2,.8,.25,1)}
h1 .res,h2 .res{background-size:100% .32em;background-position:0 80%}
.visto .res{animation:pintaRes .85s cubic-bezier(.2,.8,.25,1) .12s both}
@keyframes pintaRes{from{background-size:0 .34em}to{background-size:100% .34em}}

/* variante llena, para una palabra suelta */
.res-lleno{background-image:linear-gradient(120deg,var(--neon) 0%,#0FCBAF 100%);
  background-size:100% 100%;background-position:0 0;color:#fff;
  padding:.06em .34em;border-radius:7px;
  box-shadow:0 3px 14px rgba(0,179,154,.34)}
.visto .res-lleno{animation:none}

/* ── luz de fondo: manchas de color que respiran ── */
.aurora{position:relative}
/* la luz vive por detrás de todo el contenido, nunca encima de una foto */
.aurora::before{content:"";position:absolute;inset:-14% -8% auto -8%;height:min(62vh,520px);
  z-index:-1;pointer-events:none;filter:blur(64px);opacity:.42;
  background:
    radial-gradient(38% 46% at 18% 32%, rgba(0,179,154,.42), transparent 68%),
    radial-gradient(34% 42% at 78% 22%, rgba(255,194,75,.40), transparent 68%),
    radial-gradient(40% 40% at 52% 78%, rgba(248,157,183,.44), transparent 70%);
  animation:respiraAurora 17s ease-in-out infinite}
@keyframes respiraAurora{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%    {transform:translate3d(3.5%,-2.5%,0) scale(1.09)}
  66%    {transform:translate3d(-3%,2%,0) scale(1.04)}}

/* ── tarjetas: se levantan con un halo de luz ── */
.tarj{transition:transform .42s cubic-bezier(.2,.8,.25,1), box-shadow .42s cubic-bezier(.2,.8,.25,1)}
.tarj:hover{transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(80,49,61,.14), 0 0 0 1.5px rgba(0,179,154,.22)}

.pcard{position:relative;transition:transform .38s cubic-bezier(.2,.8,.25,1), box-shadow .38s}
.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1.6px transparent;transition:box-shadow .38s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(80,49,61,.15)}
.pcard:hover::after{box-shadow:inset 0 0 0 1.6px rgba(0,179,154,.38)}
.pcard img{transition:transform .55s cubic-bezier(.2,.8,.25,1)}
.pcard:hover img{transform:scale(1.055)}

/* ── botón principal: destello que cruza cada tanto ── */
.b-1{position:relative;overflow:hidden}
.b-1::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:cruzaDestello 6.5s ease-in-out infinite}
@keyframes cruzaDestello{0%,70%{left:-60%}88%,100%{left:130%}}
.b:hover{transform:translateY(-3px)}
.b:active{transform:translateY(0) scale(.985)}

/* ── eyebrow: degradado vivo en vez de coral plano ── */
.eyebrow{background:linear-gradient(96deg,var(--coral-txt),var(--neon) 62%,var(--oro));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:correEyebrow 9s ease-in-out infinite}
@keyframes correEyebrow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ── chips y píldoras: se encienden al pasar ── */
.chip{transition:transform .22s, border-color .22s, background-color .22s, box-shadow .22s}
.chip:hover{transform:translateY(-2px);border-color:var(--neon);
  box-shadow:0 5px 16px rgba(0,179,154,.2)}
.chip.act{box-shadow:0 5px 18px rgba(201,59,99,.3)}

/* ── enlaces de texto: subrayado que crece ── */
.enl{position:relative}
.enl::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--neon),var(--oro));
  transition:right .34s cubic-bezier(.2,.8,.25,1)}
.enl:hover::after{right:0}

/* ── entrada escalonada de rejillas: cada hijo entra un pelo después.
   Corto en el cuarto y con paso corto: con 314 tarjetas en la tienda, un
   escalonado largo deja fichas a medio aparecer cuando alguien baja rápido. ── */
.escalonado > *{--pasoEsc:.04s}
.escalonado > *:nth-child(2){animation-delay:calc(var(--pasoEsc)*1)}
.escalonado > *:nth-child(3){animation-delay:calc(var(--pasoEsc)*2)}
.escalonado > *:nth-child(n+4){animation-delay:calc(var(--pasoEsc)*3)}

/* ── cifras: brillo dorado al aterrizar ── */
.cif-v{background:linear-gradient(120deg,var(--coral-txt),var(--neon));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── barra de progreso de lectura: degradado vivo ── */
.progreso{background:linear-gradient(90deg,var(--neon),var(--oro) 50%,var(--fucsia))}

/* ── separador con luz ── */
.hilo{background:linear-gradient(90deg,transparent,var(--linea2) 18%,var(--neon-claro) 50%,var(--linea2) 82%,transparent);
  height:1.5px;opacity:.75}

/* ── el bicho de cabecera flota un poco más vivo ── */
.cabpag-bicho{filter:drop-shadow(0 6px 14px rgba(0,179,154,.22))}

/* ── apagón total con movimiento reducido ── */
@media(prefers-reduced-motion:reduce){
  .aurora::before{animation:none}
  .eyebrow{animation:none;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--coral-txt)}
  .b-1::after{animation:none;display:none}
  .visto .res{animation:none}
  .tarj:hover,.pcard:hover,.chip:hover,.b:hover{transform:none}
  .pcard:hover img{transform:none}
  .escalonado > *{animation-delay:0s!important}
}

/* ── segunda pasada de brillo ── */

/* la luz de fondo se nota más, y aparece también a media página */
.aurora::before{opacity:.62;filter:blur(60px)}
.aurora-baja::before{inset:auto -8% -18% -8%;height:min(52vh,440px);top:auto}

/* precio: chip vivo, se lee de lejos en las 314 tarjetas */
.pprec{background:linear-gradient(120deg,#0A7D6C,#12A189);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:17.5px;letter-spacing:-.01em}
.pcard:hover .pprec{background:linear-gradient(120deg,var(--coral),var(--fucsia));
  -webkit-background-clip:text;background-clip:text}

/* botón de agregar: se enciende */
.pagr{transition:background-color .22s, box-shadow .22s, transform .22s}
.pcard:hover .pagr{background:#FFE1EA;box-shadow:0 4px 14px rgba(201,59,99,.22)}

/* cinta de credenciales con un hilo de luz que recorre */
.cred{position:relative;overflow:hidden}
.cred::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(0,179,154,.16) 50%,transparent 60%);
  background-size:260% 100%;animation:recorreCinta 7s linear infinite}
@keyframes recorreCinta{from{background-position:120% 0}to{background-position:-60% 0}}

/* etapas del recorrido: el punto late */
.etapa::before{box-shadow:0 0 0 0 rgba(0,179,154,.45);animation:pulsoEtapa 3.4s ease-out infinite}
@keyframes pulsoEtapa{0%{box-shadow:0 0 0 0 rgba(0,179,154,.45)}70%,100%{box-shadow:0 0 0 12px rgba(0,179,154,0)}}

/* tarjetas de servicio: borde que se ilumina de un lado al otro */
.tarj{position:relative}
.tarj::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2.5px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--neon),var(--oro),var(--fucsia));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.25,1);pointer-events:none}
.tarj:hover::before{transform:scaleX(1)}

/* el carrito flotante respira */
.js-badge{animation:latir 2.6s ease-in-out infinite}

/* menú de escritorio: la pestaña activa lleva su hilo de luz */
.nav-esc a.act{position:relative}
.nav-esc a.act::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--neon),var(--oro));
  animation:apareceHilo .5s cubic-bezier(.2,.8,.25,1) both}
@keyframes apareceHilo{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  .cred::after,.etapa::before,.js-badge,.nav-esc a.act::after{animation:none}
  .tarj:hover::before{transform:scaleX(1);transition:none}
  .pcard:hover .pagr{box-shadow:none}
}

@media(min-width:700px){ .rej-2{grid-template-columns:1fr 1fr!important} .rej-serv{grid-template-columns:1fr 1fr!important} .rej-guias{grid-template-columns:1fr 1fr!important} }
@media(min-width:1000px){ .rej-guias{grid-template-columns:repeat(3,1fr)!important} }