/* ══════ 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}}