/* ══════ PRONUBEN BABY — sistema visual común a todas las páginas ══════
   Colores corporativos confirmados por Jorge (6 nov 2026): azul #2F3D90 · rojo #ED1C24 */
:root{
  --brand:#2F3D90;      /* azul corporativo */
  --brand-red:#ED1C24;  /* rojo corporativo (logo "BABY") — usar con moderación */
  --deep:#2F3D90;       /* titulares y botones */
  --deep-2:#1F2960;     /* secciones oscuras */
  --night:#121741;      /* pie */
  --sky:#A9B0DA;        /* azul claro del tema corporativo, etiquetas sobre oscuro */
  --honey:#C4923C;      /* dorado cálido */
  --milk:#FBF8F3; --ink:#161B3A; --muted:#626A85;
  --line:rgba(47,61,144,.15); --line-soft:rgba(47,61,144,.08); --dline:rgba(255,255,255,.16);
  --green:#2F6B4F; --green-2:#468A63; --green-3:#7FB08C;
  --display:"Fraunces",Georgia,serif; --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(20px,5vw,90px); --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--milk);color:var(--ink);font-family:var(--body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--honey);color:#fff}
:focus-visible{outline:2px solid var(--honey);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:300;background:var(--deep);color:#fff;padding:10px 16px;border-radius:4px}
.skip:focus{left:8px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--deep);font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;line-height:1.4}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--honey)}
.dark .eyebrow,.over .eyebrow{color:var(--sky)}
h1,h2,h3,.h1,.h2,.h3{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.025em}
h1,.h1{font-size:clamp(40px,6.4vw,96px)}
.h2{font-size:clamp(30px,4.4vw,64px)}
h3,.h3{font-size:clamp(18px,1.8vw,25px);line-height:1.15}
h2.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;line-height:1.4}
em{font-style:italic}
section{position:relative}
.wrap{padding-inline:var(--pad)}
.band{padding-block:clamp(70px,9vw,140px)}
.rule{height:1px;background:var(--line-soft);margin-inline:var(--pad)}
.lead{font-size:clamp(16px,1.25vw,18px);color:var(--muted);max-width:52ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* marcador de dato pendiente: visible a propósito, se elimina cuando Jorge lo confirme */
.pend{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:none;line-height:1.4;
  color:#9E1C22;background:#FFF0F0;border:1px dashed var(--brand-red);padding:3px 7px;border-radius:3px;font-weight:500}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--deep);color:#fff;
  padding:14px 24px;border-radius:100px;font-size:13.5px;font-weight:600;transition:.4s var(--ease);white-space:nowrap}
.btn:hover{background:var(--deep-2);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(31,41,96,.7)}
.btn.light{background:var(--honey);color:#fff}
.btn.light:hover{background:#B07F2E}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--deep);box-shadow:none}
.btn.ghost:hover{background:rgba(47,61,144,.06)}
.btn.ghostw{background:transparent;border:1px solid var(--dline);color:#fff;box-shadow:none}
.btn.ghostw:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.tlink{display:inline-flex;align-items:center;gap:8px;color:var(--deep);font-weight:600;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:3px;transition:.35s var(--ease)}
.tlink:hover{border-color:var(--honey);gap:12px}
.dark .tlink{color:#fff;border-color:var(--dline)}

/* preloader — el logo se "llena" de abajo arriba como un biberón; CSS lo retira solo aunque falle el JS */
#pre{position:fixed;inset:0;z-index:200;background:radial-gradient(80% 70% at 50% 45%,#36449C,var(--deep-2));display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;transition:clip-path .95s var(--ease);clip-path:inset(0);animation:preFail 0s 4.2s forwards}
#pre.gone{clip-path:inset(0 0 100% 0)}
.pre-logo{position:relative;width:min(300px,62vw);opacity:0;transform:scale(.96);animation:logoIn .7s .05s var(--ease) forwards}
.pre-logo img{display:block;width:100%;height:auto}
.pre-logo .base{opacity:.16}
.pre-logo .fill{position:absolute;inset:0;clip-path:inset(100% 0 0 0);animation:logoFill 1.9s .35s cubic-bezier(.45,.05,.25,1) forwards}
.pre-logo::after{content:"";position:absolute;left:-6%;right:-6%;height:14%;bottom:0;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,236,199,.55),transparent 70%);filter:blur(4px);animation:logoLine 1.9s .35s cubic-bezier(.45,.05,.25,1) forwards}
.pre-bar{width:min(180px,40vw);height:1px;background:rgba(255,255,255,.18);overflow:hidden}
.pre-bar i{display:block;height:100%;background:var(--honey);transform-origin:left;transform:scaleX(0);animation:barFill 1.9s .35s cubic-bezier(.45,.05,.25,1) forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
@keyframes logoFill{to{clip-path:inset(0 0 0 0)}}
@keyframes logoLine{from{bottom:0;opacity:1}90%{opacity:1}to{bottom:100%;opacity:0}}
@keyframes barFill{to{transform:scaleX(1)}}
@keyframes preFail{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.no-pre #pre{display:none}

/* header */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;transition:.5s var(--ease)}
header.site .inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--pad);transition:.45s var(--ease)}
header.site .logo{width:178px;transition:.45s var(--ease)}
header.site.solid{background:rgba(251,248,243,.9);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid var(--line-soft)}
header.site.solid .inner{padding-block:10px}
header.site.solid .logo{width:150px}
header.site.hide{transform:translateY(-105%)}
nav.main{display:flex;gap:24px}
nav.main a{font-size:13.5px;font-weight:500;color:#3E4566;position:relative;padding-block:4px;transition:color .3s}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
nav.main a:hover::after,nav.main a[aria-current]::after{transform:scaleX(1);transform-origin:left}
nav.main a[aria-current]{color:var(--deep)}
.burger{display:none;width:30px;height:18px;position:relative}
.burger i{position:absolute;left:0;right:0;height:1.5px;background:var(--deep);transition:.4s var(--ease)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:8px}.burger i:nth-child(3){top:16px}
body.menu .burger i{background:#fff!important}
body.menu .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0}
body.menu .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
header.site .brandlink{position:relative;display:block}
header.site .logo.w{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s}
body.menu header.site .logo.w{opacity:1}
body.menu header.site .logo.c{opacity:0}
#mob{position:fixed;inset:0;z-index:99;background:var(--deep-2);display:flex;flex-direction:column;justify-content:center;
  gap:2px;padding:0 var(--pad);clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease);visibility:hidden}
body.menu #mob{clip-path:inset(0);visibility:visible}
#mob a{font-family:var(--display);font-size:clamp(26px,7vw,44px);color:#fff;padding-block:8px;border-bottom:1px solid var(--dline)}
#mob a.btn{font-family:var(--body);font-size:15px;border:0;margin-top:24px;align-self:flex-start;padding:14px 24px}

/* barra lateral de progreso */
#spine{position:fixed;left:0;top:0;bottom:0;width:52px;z-index:90;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;pointer-events:none}
#spine .track{width:1px;flex:0 0 30vh;background:var(--line);position:relative}
#spine .track i{position:absolute;top:0;left:-1px;width:3px;background:var(--deep);height:0}
#spine .lbl{writing-mode:vertical-rl;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
#spine.inv .track{background:var(--dline)}#spine.inv .track i{background:var(--honey)}
#spine.inv .lbl{color:rgba(255,255,255,.55)}

/* aviso de lactancia (Código OMS) */
.who{background:#EEF1F8;color:#55607F;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:14px var(--pad);text-align:center;
  font-family:var(--body);font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none;font-style:italic}

/* revelado */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}.rv[data-d="2"]{transition-delay:.2s}
.rv[data-d="3"]{transition-delay:.3s}.rv[data-d="4"]{transition-delay:.4s}.rv[data-d="5"]{transition-delay:.5s}
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask>span{display:block;transform:translateY(103%);opacity:0;transition:transform 1.05s var(--ease),opacity 1.05s var(--ease)}
.on .mask>span{transform:none;opacity:1}
.on .mask:nth-child(2)>span{transition-delay:.1s}
.on .mask:nth-child(3)>span{transition-delay:.2s}
.on .mask:nth-child(4)>span{transition-delay:.3s}

/* cabeceras de sección */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(34px,4.4vw,66px)}
.sec-head .h2{max-width:16ch;margin-top:20px;color:var(--deep)}
.dark .sec-head .h2{color:#fff}
.sec-head .side{max-width:42ch;color:var(--muted);font-size:15.5px}
.dark .sec-head .side{color:rgba(255,255,255,.66)}

/* tarjetas */
.card{background:#fff;border:1px solid var(--line-soft);border-radius:4px;overflow:hidden;transition:.6s var(--ease);display:flex;flex-direction:column}
.card:hover{transform:translateY(-9px);box-shadow:0 36px 62px -34px rgba(31,41,96,.38);border-color:var(--line)}
.card .ph{aspect-ratio:16/11;overflow:hidden;background:linear-gradient(140deg,#EAEDF7,#F7F2EA)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .ph img{transform:scale(1.06)}
.card .bd{padding:24px 24px 28px;display:flex;flex-direction:column;gap:9px;flex:1}
.card .no{color:var(--honey)}
.card h3{color:var(--deep)}
.card p{font-size:14.5px;color:var(--muted)}
.card .tlink{margin-top:auto;align-self:flex-start;padding-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:5px 9px;border-radius:100px;background:rgba(47,61,144,.08);color:var(--deep)}
.dark .chip,.feature .chip{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9)}

/* formulario */
.form{display:grid;gap:24px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fld{position:relative}
.fld input,.fld textarea,.fld select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--dline);color:#fff;
  font-family:var(--body);font-size:15.5px;padding:12px 0 11px;transition:.4s var(--ease);border-radius:0}
.fld textarea{resize:vertical;min-height:96px}
.fld label{position:absolute;left:0;top:12px;color:rgba(255,255,255,.55);font-size:15.5px;pointer-events:none;transition:.35s var(--ease)}
.fld input:focus,.fld textarea:focus{outline:0;border-bottom-color:var(--honey)}
.fld input:focus+label,.fld textarea:focus+label,
.fld input:not(:placeholder-shown)+label,.fld textarea:not(:placeholder-shown)+label{
  top:-13px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);color:var(--sky)}
.fld input:user-invalid{border-bottom-color:#FF8A8A}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:rgba(255,255,255,.7)}
.consent input{margin-top:3px;accent-color:var(--honey);width:16px;height:16px;flex:0 0 auto}
.consent a{text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form .btn{justify-self:start;padding:15px 28px}
.form .btn[disabled]{opacity:.6;pointer-events:none}
.fnote{color:rgba(255,255,255,.55);font-size:13px;min-height:1.4em}
.fnote.ok{color:#9FE0B7}.fnote.err{color:#FFB4B4}

/* pie */
footer.site{background:var(--night);color:rgba(255,255,255,.62);padding:clamp(50px,6vw,90px) var(--pad) 30px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px;padding-bottom:40px;border-bottom:1px solid var(--dline)}
footer.site .logo{width:210px;margin-bottom:20px}
footer.site p{font-size:14px;max-width:38ch}
.fgrid .fh{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);font-weight:500;margin-bottom:14px}
.fgrid ul{list-style:none;display:grid;gap:8px;font-size:14px}
.fgrid a:hover{color:var(--honey)}
.fgrid address{font-style:normal;font-size:14px;line-height:1.7}
.brands{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.45)}
.fbot{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:22px;font-size:12px;line-height:1.6}
.fbot nav{display:flex;gap:18px;flex-wrap:wrap}
.fbot a:hover{color:var(--honey)}
.legal-copy{margin-top:14px;font-size:11.5px;color:rgba(255,255,255,.38);max-width:none!important}

@media(max-width:1080px){
  #spine{display:none}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  nav.main,header.site .btn{display:none}
  .burger{display:block}
}
@media(max-width:760px){
  .f2,.fgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv,.mask>span{opacity:1;transform:none}
  #pre{display:none}
}

.fbot nav button{font:inherit;color:inherit;font-size:12px;padding:0}
.fbot nav button:hover{color:var(--honey)}

@media(max-width:860px){header.site .logo{width:150px}header.site.solid .logo{width:132px}}

/* cabecera sobre portada oscura (p. ej. /lactonic-lactolac): logo blanco y menú claro hasta que se vuelve sólida */
body.dark-top header.site:not(.solid) .logo.c{opacity:0}
body.dark-top header.site:not(.solid) .logo.w{opacity:1}
body.dark-top header.site:not(.solid) nav.main a{color:rgba(255,255,255,.85)}
body.dark-top header.site:not(.solid) nav.main a[aria-current]{color:#fff}
body.dark-top header.site:not(.solid) .burger i{background:#fff}
body.dark-top header.site:not(.solid) .btn{background:#C9A24E;color:#141A45}