/* Fuentes autoalojadas (SIL Open Font License). Sin Google Fonts. */
@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/fraunces-latin-opsz-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/fraunces-latin-ext-opsz-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-display:swap;font-weight:100 900;
  src:url(../fonts/fraunces-latin-opsz-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-display:swap;font-weight:100 900;
  src:url(../fonts/fraunces-latin-ext-opsz-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/manrope-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;
  src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;
  src:url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Árabe (Amiri, SIL OFL): solo se descarga si la página contiene texto árabe */
@font-face{font-family:"Amiri";font-style:normal;font-display:swap;font-weight:700;
  src:url(../fonts/amiri-arabic-700-normal.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* Fallbacks con métricas ajustadas: mientras carga la tipografía, el texto ocupa lo mismo y no mueve la página (CLS) */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");size-adjust:96.6%;ascent-override:101.2%;descent-override:26.4%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Helvetica");size-adjust:102%;ascent-override:104.6%;descent-override:29.4%;line-gap-override:0%}

/* Árabe para el cuerpo y titulares de /ar/ (IBM Plex Sans Arabic, SIL OFL): solo se descarga si hay texto árabe */
@font-face{font-family:"Plex Arabic";font-style:normal;font-display:swap;font-weight:400;
  src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-style:normal;font-display:swap;font-weight:500 700;
  src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ══════ 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","Fraunces Fallback",Georgia,serif; --body:"Manrope","Manrope Fallback",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 .95s .1s 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 .95s .1s 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 .95s .1s 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}

/* selector de idioma EN · ES */
.lang-sw{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(31,41,96,.18);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;line-height:1}
.lang-sw a{padding:6px 9px;border-radius:999px;color:var(--deep);opacity:.65;transition:opacity .3s,background .3s,color .3s}
.lang-sw a:hover{opacity:1}
.lang-sw a[aria-current]{background:var(--deep);color:#fff;opacity:1}
#mob .lang-sw{display:none}
body.menu header.site .lang-sw,body.dark-top header.site:not(.solid) .lang-sw{border-color:rgba(255,255,255,.35)}
body.menu header.site .lang-sw a,body.dark-top header.site:not(.solid) .lang-sw a{color:#fff}
body.menu header.site .lang-sw a[aria-current],body.dark-top header.site:not(.solid) .lang-sw a[aria-current]{background:#fff;color:var(--deep-2)}
@media(max-width:1080px){header.site .lang-sw{margin-left:auto;margin-right:14px}}

/* ══════ COMPONENTES COMPARTIDOS (home y páginas interiores) ══════ */
/* valores, pilares y certificaciones */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(46px,6vw,90px)}
.val{background:#fff;border:1px solid var(--line-soft);border-radius:4px;padding:clamp(24px,2.4vw,34px);transition:.55s var(--ease)}
.val:hover{transform:translateY(-8px);box-shadow:0 34px 58px -34px rgba(31,41,96,.35);border-color:var(--line)}
.val img{width:58px;margin-bottom:20px;transition:transform .55s var(--ease)}
.val:hover img{transform:scale(1.12) rotate(-5deg)}
.val h3{color:var(--deep);margin-bottom:10px}
.val p{font-size:14.5px;color:var(--muted)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);padding:clamp(34px,4vw,60px) var(--pad) 0}
.pillar{background:rgba(255,255,255,.75);backdrop-filter:blur(6px);border:1px solid rgba(47,107,79,.12);border-radius:4px;padding:clamp(22px,2.4vw,32px);transition:.5s var(--ease)}
.pillar:hover{background:#fff;transform:translateY(-6px)}
.pillar img{width:52px;margin-bottom:18px}
.pillar h3{color:var(--deep);margin-bottom:10px}
.pillar p{font-size:14.5px;color:#4A5A52}
.pillar .tlink{margin-top:16px}
.certs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:clamp(30px,3.6vw,52px) var(--pad) clamp(46px,5vw,80px)}
.certs .lbl{margin-right:10px;color:#41564C}
.cert{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;padding:9px 14px;border-radius:100px;background:#fff;border:1px solid rgba(47,107,79,.18);color:var(--deep)}
.cert::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-2)}

/* productos */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,26px)}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.4vw,66px);align-items:center;margin-top:clamp(38px,5vw,80px);
  background:radial-gradient(90% 120% at 85% 50%,#3A4AA6 0%,var(--deep-2) 62%);color:#fff;border-radius:4px;overflow:hidden;padding:clamp(28px,3.6vw,62px)}
.feature .h2{color:#fff;max-width:12ch;margin-top:20px;font-size:clamp(36px,4.6vw,70px);line-height:1.02}
.feature p:not(.h2){color:rgba(255,255,255,.8);margin-top:22px;max-width:42ch;font-size:clamp(16px,1.35vw,19.5px);line-height:1.6}
.feature .eyebrow{font-size:12px}
.feature .chip{font-size:12px;padding:8px 13px}
.feature .chips{margin-top:26px;gap:8px}
.feature .btn{margin-top:32px;padding:16px 28px;font-size:14.5px}
.orbit{position:relative;display:grid;place-items:center;aspect-ratio:1/1}
.orbit svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit svg circle{fill:none;stroke:rgba(255,255,255,.14)}
.orbit svg .dot{fill:var(--honey);stroke:none}
.orbit .tins{position:relative;z-index:2;width:78%;height:70%}
.orbit .tins img{position:absolute;bottom:0;filter:drop-shadow(0 30px 34px rgba(0,0,0,.45));transition:transform 1.2s var(--ease)}
.orbit .tins .t1{width:46%;left:27%;z-index:2}
.orbit .tins .t2{width:38%;left:2%;bottom:4%;opacity:.95}
.orbit .tins .t3{width:38%;right:2%;bottom:4%;opacity:.95}
.feature:hover .tins .t2{transform:translateX(-6%) rotate(-3deg)}
.feature:hover .tins .t3{transform:translateX(6%) rotate(3deg)}
.orbit .lab{position:absolute;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.78);text-transform:uppercase;z-index:3}

/* mapa mundial */
#world{background:var(--deep-2);color:#fff}
.maprow{display:grid;grid-template-columns:1.55fr .45fr;gap:clamp(26px,3.4vw,56px);align-items:start}
.mapbox{position:relative}
#worldmap{width:100%;height:auto;display:block}
#worldmap .grat{fill:none;stroke:rgba(255,255,255,.06);stroke-width:.5}
#worldmap .cty{fill:rgba(255,255,255,.085);stroke:rgba(255,255,255,.16);stroke-width:.45;transition:fill .3s}
#worldmap .cty:hover{fill:rgba(255,255,255,.16)}
#worldmap .cty.on{fill:rgba(196,146,60,.36);stroke:var(--honey);stroke-width:.7;cursor:pointer}
#worldmap .cty.opp{fill:rgba(169,176,218,.22);stroke:var(--sky);stroke-dasharray:2 2;cursor:pointer}
#worldmap .cty.on:hover,#worldmap .cty.act{fill:rgba(196,146,60,.7)}
#worldmap .cty.opp.act,#worldmap .cty.opp:hover{fill:rgba(169,176,218,.45)}
#worldmap .arc{fill:none;stroke:rgba(196,146,60,.45);stroke-width:1;stroke-linecap:round}
#worldmap .mk{fill:var(--honey);cursor:pointer}
#worldmap .mk.opp{fill:var(--sky)}
#worldmap .mk:hover{fill:#fff}
#worldmap .ring{fill:none;stroke:var(--honey);stroke-width:.8;opacity:.5;pointer-events:none}
#worldmap .hq{fill:#fff}
#tip{position:absolute;pointer-events:none;background:rgba(18,23,65,.96);border:1px solid var(--dline);border-radius:3px;padding:6px 10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s;transform:translate(-50%,-155%);white-space:nowrap;z-index:5}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;color:rgba(255,255,255,.6)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.panel{background:rgba(255,255,255,.05);border:1px solid var(--dline);border-radius:4px;padding:24px;min-height:300px}
.panel .flag{width:48px;border-radius:2px;box-shadow:0 4px 12px rgba(0,0,0,.4);margin-bottom:16px}
.panel h3{color:#fff;margin-bottom:16px}
.panel dl{display:grid;gap:12px}
.panel dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.panel dd{font-size:14.5px;color:rgba(255,255,255,.88)}
.panel .pend{margin-top:4px}
.panel .btn{margin-top:20px}
.panel .hint{color:rgba(255,255,255,.55);font-size:14px}
.flags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,40px)}
.fbtn{display:flex;align-items:center;gap:9px;border:1px solid var(--dline);border-radius:100px;padding:7px 14px 7px 7px;transition:.35s var(--ease);cursor:pointer;color:#fff}
.fbtn:hover,.fbtn.act{background:rgba(255,255,255,.1);border-color:var(--honey)}
.fbtn.opp{border-style:dashed}
.fbtn img{width:22px;height:16px;object-fit:cover;border-radius:2px}
.fbtn span{font-size:13px;color:rgba(255,255,255,.88);white-space:nowrap}

/* ferias */
.fairs-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.fairs-top img{height:46px;width:auto}
.fairs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.fair{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:16/10;background:#DDE1EE;clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease)}
.fair.on{clip-path:inset(0)}
.fair:nth-child(3n+2){transition-delay:.11s}.fair:nth-child(3n+3){transition-delay:.22s}
.fair img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.fair:hover img{transform:scale(1.07)}
.fair .cap{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;background:linear-gradient(transparent,rgba(18,23,65,.88))}

/* trabajo con importadores */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.6vw,44px)}
.tile{border-top:1px solid var(--line);padding-top:20px}
.tile img{width:46px;margin-bottom:16px}
.tile h3{font-size:clamp(17px,1.4vw,21px);margin-bottom:9px;color:var(--deep)}
.tile p{font-size:14.5px;color:var(--muted)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);margin-top:clamp(42px,5vw,80px)}
.dos>*{display:flex;gap:20px;align-items:center;background:#fff;border:1px solid var(--line-soft);padding:18px;border-radius:3px;transition:.5s var(--ease)}
.dos a:hover{border-color:var(--deep);transform:translateY(-5px);box-shadow:0 28px 48px -30px rgba(31,41,96,.45)}
.dos img{width:124px;aspect-ratio:16/10;object-fit:cover;border-radius:2px;flex:0 0 auto}
.dos h3{font-size:19px;color:var(--deep);margin-bottom:4px}
.dos p{font-size:13.5px;color:var(--muted)}
.dos .k{color:var(--honey)}

/* contacto */
#contact{background:var(--deep-2);color:#fff;overflow:hidden}
#contact::before{content:"";position:absolute;right:-12%;top:-30%;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(196,146,60,.16),transparent 60%);pointer-events:none}
.cwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,86px);position:relative}
#contact .h2{color:#fff;max-width:12ch;margin-top:18px}
.info{display:grid;gap:22px;align-content:start;margin-top:32px}
.info span{display:block;color:var(--sky);margin-bottom:5px}
.info p,.info a,.info address{color:rgba(255,255,255,.85);font-size:15px;font-style:normal}
.info a:hover{color:var(--honey)}

@media(max-width:1080px){
  .feature,.cwrap,.dos,.maprow{grid-template-columns:1fr}
  .four{grid-template-columns:repeat(2,1fr)}
  .cards,.fairs,.pillars{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .cards,.fairs,.four,.pillars,.values{grid-template-columns:1fr}
  .dos img{width:88px}
  .panel{min-height:0}
  .fairs-top img{height:34px}
}

/* mercados escritos en el HTML (debajo del mapa) */
.mkts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:clamp(24px,3vw,40px)}
.mkt{border:1px solid var(--dline);border-radius:6px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;transition:.35s var(--ease)}
.mkt:hover,.mkt.act{background:rgba(255,255,255,.07);border-color:var(--honey)}
.mkt.opp{border-style:dashed}
.mbtn{display:flex;align-items:center;gap:10px;text-align:left;color:#fff;padding:0}
.mbtn img{width:28px;height:21px;object-fit:cover;border-radius:2px;flex:0 0 auto}
.mname{font-family:var(--display);font-size:19px;line-height:1.1}
.mpart{font-size:13.5px;color:rgba(255,255,255,.82)}
.mstat{font-size:9.5px;color:var(--sky);letter-spacing:.1em}
.mkt .pend{align-self:flex-start;margin-top:2px}
.mlink{font-size:13px;color:var(--honey);margin-top:auto;padding-top:4px}
.mlink:hover{color:#fff}

/* aviso de cookies (solo aparece si Microsoft Clarity está configurado) */
.consent-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:150;max-width:760px;margin-inline:auto;background:var(--night);color:#fff;
  border:1px solid var(--dline);border-radius:8px;padding:18px 20px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.consent-bar[hidden]{display:none}
.consent-bar p{font-size:14px;color:rgba(255,255,255,.8);flex:1 1 320px}
.consent-bar a{text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;gap:10px}
.consent-actions .btn{padding:11px 20px}

@media(max-width:1080px){.mkts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mkts{grid-template-columns:1fr}}

/* sede central (España) en rojo corporativo */
#worldmap .cty.hqc{fill:rgba(237,28,36,.42);stroke:#FF6B70;stroke-width:.7;cursor:pointer}
#worldmap .cty.hqc:hover,#worldmap .cty.hqc.act{fill:rgba(237,28,36,.7)}
#worldmap .mk.hqm{fill:var(--brand-red);stroke:#fff;stroke-width:1}
.mkt.hq{border-color:rgba(237,28,36,.55);background:rgba(237,28,36,.08)}
.mkt.hq .mstat{color:#FF9A9E}
.mkt.hq .mlink{color:#FF9A9E}
.dos.one{grid-template-columns:1fr;max-width:760px}

/* Turnstile: solo ocupa espacio si pide interacción */
.ts-box:empty{display:none}.ts-box{margin:6px 0 4px}

/* ══════ HOME ══════ */

/* hero */
#hero{min-height:100svh;background:
  radial-gradient(120% 90% at 78% 8%,rgba(255,241,214,.85),transparent 58%),
  linear-gradient(180deg,#FDFBF7 0%,#F7F5EC 46%,#EDF2EA 100%);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
#net{position:absolute;inset:0;width:100%;height:100%}
#hero .haze{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
#hero .hz1{width:46vw;height:46vw;right:-6%;top:-12%;background:rgba(240,208,140,.42)}
#hero .hz2{width:40vw;height:40vw;left:-10%;bottom:-16%;background:rgba(127,176,140,.3)}
#hero .hz3{width:30vw;height:30vw;right:26%;bottom:-10%;background:rgba(169,176,218,.32)}
#hero .flora{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#hero .flora .stem{fill:none;stroke:rgba(47,107,79,.34);stroke-width:1.6;stroke-linecap:round}
#hero .flora .leaf{fill:rgba(70,138,99,.17);stroke:rgba(47,107,79,.28);stroke-width:1}
#hero .sprig{transform-box:fill-box;transform-origin:bottom center;animation:sway 9s ease-in-out infinite}
#hero .sprig.b{animation-duration:11s;animation-delay:-3s}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
#hero .inner{position:relative;z-index:3;padding:150px var(--pad) clamp(34px,5vw,58px)}
#hero h1{max-width:13ch;margin:0 0 22px;color:var(--deep);font-size:clamp(40px,6vw,92px)}
#hero h1 em{color:var(--honey)}
.slogan{font-family:var(--display);font-size:clamp(19px,1.9vw,27px);line-height:1.3;color:#3E4566;max-width:30ch;margin-bottom:34px;letter-spacing:-.01em}
.slogan b{font-weight:500;color:var(--deep)}
@media(min-width:1100px){#hero .inner{padding-right:min(44vw,760px)}}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:26px 40px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{max-width:38ch;font-size:15px;color:var(--muted);border-left:1px solid var(--line);padding-left:18px}
.scrollhint{position:absolute;right:var(--pad);bottom:26px;color:var(--muted);writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;z-index:3}
.scrollhint::after{content:"";width:1px;height:44px;background:var(--line);animation:drip 2.2s infinite var(--ease)}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* biberón */
#hero .glow{position:absolute;right:0;top:50%;width:min(820px,78vw);aspect-ratio:1;transform:translateY(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,236,199,.7),rgba(127,176,140,.14) 46%,transparent 68%)}
#hero .bottle{position:absolute;right:7%;top:50%;height:min(80vh,680px);z-index:1;pointer-events:none;transform:translateY(-50%);transform-origin:50% 78%;will-change:transform}
#hero .bottle svg{height:100%;width:auto;overflow:visible}
.bottle .ln{fill:none;stroke:rgba(47,61,144,.45);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.bottle .teat{fill:rgba(214,164,86,.5)}
.bottle .collar{fill:rgba(47,61,144,.08)}
.bottle .seam{stroke:rgba(47,61,144,.22);stroke-width:2;fill:none}
.bottle .milk{fill:url(#milkGrad);stroke:rgba(196,146,60,.4);stroke-width:2.2}
.bottle .body-bg{fill:rgba(169,176,218,.16)}
.bottle .bub{fill:rgba(169,176,218,.5)}
.bottle .lead{stroke:rgba(196,146,60,.75);stroke-width:1.3;fill:none}
.bottle .lab{font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:2.4px;fill:rgba(47,61,144,.6)}
#milkG{animation:fillUp 2s .55s cubic-bezier(.22,1,.36,1) both}
#wave{animation:waveGo 5s linear infinite}
.bottle .bub{animation:bubUp 5s ease-in infinite}
.bottle .bub:nth-of-type(2){animation-duration:6.4s;animation-delay:1.1s}
.bottle .bub:nth-of-type(3){animation-duration:7.2s;animation-delay:2.4s}
.bottle .bub:nth-of-type(4){animation-duration:5.8s;animation-delay:3.3s}
@keyframes fillUp{from{transform:translateY(370px)}to{transform:translateY(0)}}
@keyframes waveGo{to{transform:translateX(-104px)}}
@keyframes bubUp{0%{transform:translateY(0);opacity:0}15%{opacity:.55}85%{opacity:.35}100%{transform:translateY(-250px);opacity:0}}
/* móvil y tablet: el biberón pasa a ser fondo y pierde las etiquetas → nunca se monta sobre el H1 */
@media(max-width:1099px){
  #hero .bottle{right:-12%;top:auto;bottom:-4%;transform:none;height:56vh;opacity:.22}
  #hero .bottle .lab,#hero .bottle .lead{display:none}
  #hero .glow{opacity:.5}
}

/* cifras */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.stats div{padding:clamp(26px,3.6vw,48px) var(--pad);border-right:1px solid var(--line-soft)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:var(--display);font-size:clamp(38px,5.2vw,76px);font-weight:300;color:var(--deep);line-height:.92;letter-spacing:-.04em}
.stats span{color:var(--muted);margin-top:12px;display:block}

/* marquesina */
.bigmarq{overflow:hidden;padding-block:clamp(16px,2.2vw,30px);border-bottom:1px solid var(--line)}
.bigmarq .row{display:flex;width:max-content;animation:slide 46s linear infinite}
.bigmarq span{font-family:var(--display);font-size:clamp(30px,5vw,74px);letter-spacing:-.03em;color:var(--deep);
  white-space:nowrap;display:flex;align-items:center;gap:clamp(18px,2.6vw,42px);padding-right:clamp(18px,2.6vw,42px);font-weight:300}
.bigmarq span i{width:9px;height:9px;border-radius:50%;background:var(--honey);display:block;flex:0 0 auto}
.bigmarq span i:nth-of-type(3n){background:var(--brand-red)}
@keyframes slide{to{transform:translateX(-50%)}}

/* foto a sangre anclada */
.bleed{height:185vh;position:relative}
.bleed .stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.bleed .stick>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;will-change:transform}
.bleed .scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(31,41,96,.92) 0%,rgba(31,41,96,.72) 42%,rgba(31,41,96,.12) 100%)}
.bleed .txt{position:relative;z-index:2;padding-inline:var(--pad);color:#fff;max-width:min(900px,88vw)}
.bleed .h2{color:#fff;margin-top:22px;max-width:13ch}
.bleed .h2 em{color:var(--honey)}
.bleed p.body{margin-top:22px;color:rgba(255,255,255,.76);max-width:44ch;font-size:16px}
.bleed .num{position:absolute;right:var(--pad);bottom:8vh;z-index:2;font-family:var(--display);font-size:clamp(70px,14vw,220px);color:rgba(255,255,255,.08);line-height:.8;letter-spacing:-.05em}

/* about */
#about{background:linear-gradient(180deg,#FBF8F3,#F5F1E8)}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,90px);align-items:center}
.about-grid blockquote{font-family:var(--display);font-size:clamp(28px,3.6vw,54px);line-height:1.12;letter-spacing:-.025em;color:var(--deep);max-width:15ch;margin-top:22px}
.about-grid blockquote em{color:var(--honey)}
.about-copy{margin-top:26px;display:grid;gap:14px;color:#4A5275;font-size:15.5px;max-width:52ch}
.about-copy+.tlink{margin-top:26px}
.about-ph{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/5;background:#ECEFF7}
.about-ph img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.about-ph.on img{transform:scale(1)}
.about-ph .tag{position:absolute;left:18px;bottom:18px;background:rgba(251,248,243,.92);backdrop-filter:blur(8px);padding:12px 16px;border-radius:3px;color:var(--deep)}

/* compromiso: prados */
#commitment{background:linear-gradient(180deg,#F4F7F2,#EAF0EA);overflow:hidden}
.scene{width:100%;height:clamp(240px,36vw,470px);display:block}
.hill{will-change:transform}
.cow{transform-box:fill-box;transform-origin:center}
.commit-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,5vw,80px);align-items:end;padding:0 var(--pad)}
.commit-head .h2{max-width:14ch;margin-top:18px;color:var(--deep)}
.commit-head p:not(.h2){color:#41564C;max-width:46ch;font-size:15.5px}

/* palabra de marca con foto dentro */
#brandword{padding-block:clamp(46px,7vw,110px);text-align:center;overflow:hidden}
#brandword .word{font-family:var(--display);font-weight:600;letter-spacing:-.045em;line-height:.86;font-size:clamp(60px,17vw,270px);
  background-color:var(--deep);
  background-image:url(../img/brandword-1400.webp),linear-gradient(120deg,var(--deep) 0%,#5A67B8 45%,var(--honey) 100%);
  background-size:130% auto,100% 100%;background-position:center 50%,center;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;will-change:background-position}
#brandword .sub{margin-top:16px;color:var(--muted)}

/* approach */
.appr{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,100px);align-items:center}
.appr p.big{font-family:var(--display);font-size:clamp(26px,3.5vw,52px);line-height:1.2;letter-spacing:-.025em;max-width:18ch;margin-top:26px}
.appr .w{color:rgba(22,27,58,.16);transition:color .3s}
.appr .w.lit{color:var(--deep)}
.appr ul{list-style:none}
.appr li{display:flex;gap:18px;align-items:baseline;padding:19px 0;border-bottom:1px solid var(--line-soft);font-size:16px;color:#3B4366}
.appr li b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--honey);font-weight:500}

/* proceso de calidad (scroll horizontal anclado) */
#line{background:var(--deep-2);color:#fff}
#line .pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
#line .wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,88vw);opacity:.05}
#line .head{padding:0 var(--pad);margin-bottom:clamp(20px,3.2vw,42px);position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
#line .head .h2{color:#fff;max-width:15ch;margin-top:18px}
#line .track{display:flex;gap:clamp(16px,2vw,32px);padding-inline:var(--pad);will-change:transform;position:relative;z-index:2}
.step{flex:0 0 clamp(262px,27vw,380px);border-top:1px solid var(--dline);padding-top:20px;position:relative}
.step svg.ico{width:40px;height:40px;stroke:var(--honey);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.step svg.ico *{stroke-dasharray:var(--l,300);stroke-dashoffset:var(--l,300);transition:stroke-dashoffset 1.3s var(--ease)}
.step.lit svg.ico *{stroke-dashoffset:0}
.step .n{position:absolute;right:0;top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.35)}
.step h3{color:#fff;margin-bottom:9px}
.step p{font-size:14.5px;color:rgba(255,255,255,.66)}
.step::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--honey);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.step.lit::before{transform:scaleX(1)}
#line .bar{margin:clamp(22px,3.4vw,42px) var(--pad) 0;height:1px;background:var(--dline);position:relative;z-index:2}
#line .bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--honey);width:0}

/* logística */
#logi{background:#1A2257;color:#fff;overflow:hidden;padding-block:clamp(60px,7vw,110px)}
#logi .head{padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,70px);align-items:end}
#logi .h2{color:#fff;max-width:13ch;margin-top:18px}
#logi p.sub{color:rgba(255,255,255,.66);max-width:44ch;font-size:15.5px}
.route{width:100%;height:clamp(200px,26vw,340px);display:block;margin-top:clamp(10px,2vw,24px)}
.route .sea{stroke:rgba(255,255,255,.16);stroke-width:1.2;fill:none;stroke-dasharray:5 7}
.route .done{stroke:var(--honey);stroke-width:1.8;fill:none;stroke-linecap:round}
.route .port{fill:rgba(255,255,255,.4)}
.route .portlab{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:1.6px;fill:rgba(255,255,255,.5)}
.route .ship{fill:#fff}
.route .box{fill:var(--honey);opacity:.9}
.route .box.r{fill:var(--brand-red);opacity:.85}
.logi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,44px);padding:clamp(14px,2vw,30px) var(--pad) 0}
.logi-grid div{border-top:1px solid var(--dline);padding-top:18px}
.logi-grid b{display:block;font-family:var(--display);font-size:clamp(22px,2.4vw,34px);font-weight:300;color:var(--honey);letter-spacing:-.03em;line-height:1.1}
.logi-grid span{color:rgba(255,255,255,.6);display:block;margin-top:10px;font-size:14px}

@media(max-width:1080px){
  .appr,.feature,.cwrap,.dos,.maprow,.commit-head,.about-grid,#logi .head{grid-template-columns:1fr}
  .four,.logi-grid{grid-template-columns:repeat(2,1fr)}
  .cards,.fairs,.pillars{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr 1fr}
  .about-ph{aspect-ratio:16/10}
}
@media(max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .cards,.fairs,.four,.logi-grid,.pillars,.values{grid-template-columns:1fr}
  .scrollhint{display:none}
  #hero .inner{padding-top:118px}
  .dos img{width:88px}
  .bleed{height:160vh}
  .panel{min-height:0}
  .fairs-top img{height:34px}
  /* proceso: en móvil sin anclaje ni scroll horizontal → sin pantallas vacías */
  #line .pin{position:static;height:auto;padding-block:70px 60px}
  #line .track{flex-direction:column;gap:30px;transform:none!important}
  .step{flex:none}
  #line .bar{display:none}
}

/* carrusel de normativas (más pequeño, con banderas por zona) */
.regmarq{overflow:hidden;padding-block:clamp(14px,1.6vw,22px);border-bottom:1px solid var(--line);background:#fff}
.regmarq .row{display:flex;width:max-content;animation:slide 52s linear infinite}
.regmarq:hover .row{animation-play-state:paused}
.reg{display:inline-flex;align-items:center;gap:12px;padding-right:clamp(28px,3.4vw,56px);margin-right:clamp(28px,3.4vw,56px);border-right:1px solid var(--line-soft);white-space:nowrap}
.reg .fl{display:inline-flex;gap:3px}
.reg .fl img{width:24px;height:18px;object-fit:cover;border-radius:2px;box-shadow:0 1px 3px rgba(31,41,96,.25)}
.reg .rt{font-family:var(--display);font-size:clamp(18px,1.7vw,25px);color:var(--deep);letter-spacing:-.01em}
.reg .rs{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.reg .hal{font-family:Georgia,serif;font-size:15px;color:#2F6B4F;background:#E6F1EA;border-radius:4px;padding:1px 6px;font-weight:400}
.reg .glob{font-size:20px;color:var(--honey);font-weight:400;line-height:1}

/* proceso: escena animada propia de cada etapa */
.scn{width:150px;height:94px;margin-bottom:14px;overflow:visible}
.scn .ln,.scn .fan path,.scn .can rect,.scn .can path{fill:none;stroke:var(--honey);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.scn *{animation-play-state:paused}
.step.lit .scn *{animation-play-state:running}
/* 1 · recepción y control: cae una gota, sube el nivel, aparece el visto bueno */
.s1 .liq{fill:rgba(255,255,255,.85);transform-box:fill-box;transform-origin:bottom;animation:liqUp 3.2s var(--ease) infinite}
.s1 .drop{fill:#fff;animation:drop 3.2s ease-in infinite}
.s1 .ok{fill:none;stroke:#7FB08C;stroke-width:1.6;opacity:0;animation:okIn 3.2s infinite}
.s1 .tick{fill:none;stroke:#7FB08C;stroke-width:2;stroke-linecap:round;stroke-dasharray:20;stroke-dashoffset:20;animation:tick 3.2s infinite}
@keyframes drop{0%{transform:translateY(0);opacity:0}10%{opacity:1}45%{transform:translateY(56px);opacity:1}50%,100%{transform:translateY(60px);opacity:0}}
@keyframes liqUp{0%,40%{transform:scaleY(.55)}60%,100%{transform:scaleY(1)}}
@keyframes okIn{0%,55%{opacity:0}65%,90%{opacity:1}100%{opacity:0}}
@keyframes tick{0%,60%{stroke-dashoffset:20}75%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}
/* 2 · fabricación: torre de secado con ventilador y polvo que cae */
.s2 .fan{transform-box:fill-box;transform-origin:center;animation:rot 2.4s linear infinite}
.s2 .fan circle{fill:var(--honey)}
.s2 .pw{fill:#fff;animation:fall 2s ease-in infinite}
.s2 .p2{animation-delay:.4s}.s2 .p3{animation-delay:.8s}.s2 .p4{animation-delay:1.2s}.s2 .p5{animation-delay:1.6s}
.s2 .heat{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.4;stroke-linecap:round;animation:heat 1.8s ease-in-out infinite alternate}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes fall{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}100%{transform:translateY(26px);opacity:0}}
@keyframes heat{from{transform:translateY(0);opacity:.3}to{transform:translateY(-6px);opacity:.8}}
/* 3 · envasado: latas en la cinta pasando por el escáner */
.s3 .cans{animation:belt 3.6s linear infinite}
.s3 .can rect{fill:rgba(255,255,255,.12)}
.s3 .beam{fill:rgba(169,176,218,.35);animation:scan 1.2s ease-in-out infinite alternate}
@keyframes belt{from{transform:translateX(-40px)}to{transform:translateX(0)}}
@keyframes scan{from{opacity:.15}to{opacity:.7}}
/* 4 · expedición: buque con contenedores sobre las olas */
.s4 .ship{animation:bob 3s ease-in-out infinite}
.s4 .box{fill:var(--honey);opacity:.85}.s4 .box.r{fill:var(--brand-red)}
.s4 .wave{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.4;animation:wav 2.4s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-1deg)}}
@keyframes wav{to{transform:translateX(40px)}}
@media(prefers-reduced-motion:reduce){.scn *{animation:none!important}.s1 .ok,.s1 .tick{opacity:1;stroke-dashoffset:0}}

/* ══ hero con foto real (opción D) ══
   Foto original de 8.400 px servida a 960/1600/2560 px; zoom máximo 6 % para que nunca pierda nitidez */
#hero.hero-photo{min-height:min(88svh,920px);background:#F4EFE7;justify-content:center;isolation:isolate}
.hp-img{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hp-img img{width:100%;height:100%;object-fit:cover;object-position:68% 38%;transform:scale(1.06);transform-origin:70% 40%;animation:kenburns 16s cubic-bezier(.33,0,.2,1) forwards}
@keyframes kenburns{to{transform:scale(1)}}
.hp-veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(251,248,243,.8) 0%,rgba(251,248,243,0) 16%),
  linear-gradient(90deg,rgba(251,248,243,.97) 0%,rgba(251,248,243,.9) 30%,rgba(251,248,243,.45) 52%,rgba(251,248,243,0) 72%),
  linear-gradient(0deg,rgba(251,248,243,.65) 0%,rgba(251,248,243,0) 26%)}
#hero.hero-photo .inner{padding-top:150px;padding-bottom:clamp(40px,6vw,80px)}
#hero.hero-photo .hero-note{color:#55607F;border-color:rgba(47,61,144,.2)}
@media(min-width:1100px){#hero.hero-photo .inner{padding-right:50vw}}
@media(max-width:760px){
  #hero.hero-photo{min-height:auto;justify-content:flex-end}
  .hp-img{bottom:auto;height:62vh}
  .hp-img img{object-position:50% 30%}
  .hp-veil{background:linear-gradient(180deg,rgba(251,248,243,0) 0%,rgba(251,248,243,0) 34%,rgba(251,248,243,.92) 52%,#FBF8F3 64%)}
  #hero.hero-photo .inner{padding-top:44vh}
}
@media(prefers-reduced-motion:reduce){.hp-img img{animation:none;transform:none}}