/* SGL Flour · hoja de estilos de la web pública (29/10/2026). Tokens --sg-* sacados del logo (docs/DISENO.md §2).
   Reglas de la casa: nada se esconde sin .js; reduced-motion apaga todo; solo se anima transform/opacity/clip-path/stroke-dashoffset. */
/* fuentes propias (Barlow, OFL: /licencias/barlow-OFL.txt), bloques latin y latin-ext */
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/barlow-400i-latin-ext.woff2?v=09509d4e) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/barlow-400i-latin.woff2?v=6e048a19) 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:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-400-latin-ext.woff2?v=496c8946) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-400-latin.woff2?v=4f0f26f1) 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:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-600-latin-ext.woff2?v=a0168553) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-600-latin.woff2?v=800311e3) 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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-600-latin-ext.woff2?v=34541021) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-600-latin.woff2?v=0a7db401) 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:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-800-latin-ext.woff2?v=e7487e13) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-800-latin.woff2?v=db5ae356) 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}

:root{
  --sg-harina:#FBF8EE; --sg-trigo:#F3EBD6; --sg-grano:#FCEBB0; --sg-verde:#055224; --sg-noche:#0B2A17;
  --sg-carbon:#1E2A22; --sg-tinta2:#4A5A4E; --sg-sol:#F7B904; --sg-sol-hondo:#E99606; --sg-tierra:#B5640A;
  --sg-tierra-texto:#8A4706; --sg-brote:#7FB069; --sg-sombra:2px 2px 0 var(--sg-noche);
  --sg-cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif; --sg-cuerpo:"Barlow",system-ui,sans-serif;
  --sg-ease:cubic-bezier(.16,1,.3,1); --sg-ancho:1180px; --sg-gut:clamp(16px,4vw,40px);
  --cab-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--cab-h) + 8px)}
body{margin:0;background:var(--sg-harina);color:var(--sg-carbon);font:400 1.0625rem/1.6 var(--sg-cuerpo);overflow-x:clip}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--sg-verde)}
h1,h2,h3{font-family:var(--sg-cond);font-weight:800;color:var(--sg-verde);line-height:1;margin:0;letter-spacing:.01em}
h2{font-size:clamp(2.1rem,6vw,3.6rem);text-transform:uppercase;margin-bottom:.35em}
h3{font-size:1.45rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
p{margin:0 0 1em}
::selection{background:var(--sg-grano);color:var(--sg-noche)}
:focus-visible{outline:3px solid var(--sg-verde);outline-offset:2px;border-radius:4px}
/* foco: verde en los fondos claros (8,8:1; el amarillo daba 1,5:1); amarillo solo dentro de lo oscuro */
.sec--noche :focus-visible,.pie :focus-visible,.barra :focus-visible,.cinta :focus-visible{outline-color:var(--sg-sol)}
.sec--noche .form :focus-visible{outline-color:var(--sg-verde)}
.nw{white-space:nowrap}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:24px;height:24px;flex:none;--i2:var(--sg-sol)}
.logo3{width:20px;height:20px;flex:none}
.envoltura{max-width:var(--sg-ancho);margin:0 auto;padding:0 var(--sg-gut)}
.envoltura--estrecha{max-width:860px}
.saltar{position:absolute;left:8px;top:-60px;z-index:100;background:var(--sg-noche);color:var(--sg-harina);padding:10px 14px;border-radius:6px}
.saltar:focus{top:8px}
.rotulo{font:600 .95rem/1.2 var(--sg-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--sg-tierra-texto);margin:0 0 14px}

/* ---------- texto corrido: justificado con guiones (justo.js lo afina) ---------- */
.intro,.hero__bajada,.histoire__p,.faq__r p,.e404__p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;max-width:62ch}
@media (max-width:480px){.intro,.hero__bajada,.histoire__p,.faq__r p,.e404__p{hyphenate-limit-chars:5 2 2}}
.justo .justo__vis{display:block}
.justo .justo__l{display:block;white-space:nowrap;text-align:left}
.justo .justo__l--llena{text-align:justify;text-align-last:justify}
.justo .justo__l--guion::after{content:"-"}
.justo__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;-webkit-user-select:none;user-select:none}
/* sin JS, el justificado del navegador abre calles a 360: va a la izquierda (regla de Fuego Verde) */
html:not(.js) :is(.intro,.hero__bajada,.histoire__p,.faq__r p,.e404__p){text-align:left}

/* ---------- botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;
  font:600 1rem/1.1 var(--sg-cuerpo);text-decoration:none;border:2px solid var(--sg-noche);box-shadow:var(--sg-sombra);cursor:pointer;
  transition:transform .12s var(--sg-ease),box-shadow .12s var(--sg-ease),background-color .2s}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--sg-noche)}
.btn--sol{background:var(--sg-sol);color:var(--sg-noche)}
.btn--sol:hover{background:var(--sg-sol-hondo)}
.btn--verde{background:var(--sg-verde);color:var(--sg-harina);border-color:var(--sg-noche)}
.btn--verde:hover{background:#06652c}
.btn--linea{background:transparent;color:var(--sg-verde);border-color:var(--sg-verde);box-shadow:2px 2px 0 var(--sg-verde)}
.btn--linea:hover{background:var(--sg-grano)}
.btn--claro{background:var(--sg-harina);color:var(--sg-noche)}
.btn--pill{min-height:42px;padding:0 16px}
.btn .logo3--whatsapp{width:20px;height:20px}
/* trazo que recorre el borde (Basado en «Seamless Stroke Button» de Forever Components, MIT): solo al pasar o enfocar */
.trazo{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);overflow:visible;pointer-events:none}
.trazo__r{fill:none;stroke:var(--sg-noche);stroke-width:2.5;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1),opacity .2s}
.btn--trazo:hover .trazo__r,.btn--trazo:focus-visible .trazo__r{stroke-dashoffset:0;opacity:1}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:50;background:var(--sg-harina)}
.cab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sg-verde);opacity:0;transition:opacity .3s}
.cab.baja::after{opacity:.35}
.cab__in{max-width:1280px;margin:0 auto;height:var(--cab-h);padding:0 var(--sg-gut);display:flex;align-items:center;gap:14px}
.cab__logo{flex:none;display:block;transform-origin:left center;transition:transform .3s var(--sg-ease)}
.cab__logo img{width:auto;height:46px}
.cab.baja .cab__logo{transform:scale(.88)}
.cab__nav{margin-left:auto}
.cab__links{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.cab__links a{display:block;padding:10px 10px;font:600 1rem/1 var(--sg-cuerpo);color:var(--sg-carbon);text-decoration:none;border-radius:6px}
.cab__links a:hover{color:var(--sg-verde);background:var(--sg-trigo)}
.cab__panel-extra{display:none}
.idioma{display:flex;align-items:center;gap:2px;margin:0;font:600 .95rem/1 var(--sg-cuerpo)}
.idioma a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--sg-tinta2);text-decoration:none}
.idioma a::after{content:"";position:absolute;left:8px;right:8px;bottom:9px;height:3px;border-radius:2px;background:var(--sg-sol);transform:scaleX(0);transition:transform .3s var(--sg-ease)}
.idioma a[aria-current]{color:var(--sg-verde)}
.idioma a[aria-current]::after,.idioma a:hover::after{transform:scaleX(1)}
.idioma__sep{color:var(--sg-tinta2);opacity:.5}
.espacio{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;color:var(--sg-tinta2);text-decoration:none;font:600 .95rem/1 var(--sg-cuerpo);border-radius:6px}
.espacio:hover{color:var(--sg-verde);background:var(--sg-trigo)}
.espacio .ico{width:20px;height:20px}
.cab__menu{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:2px solid var(--sg-verde);border-radius:10px;background:transparent;color:var(--sg-verde);cursor:pointer}
.cab__i-fermer{display:none}
.cab__menu[aria-expanded="true"] .cab__i-menu{display:none}
.cab__menu[aria-expanded="true"] .cab__i-fermer{display:block}
@media (max-width:1279px){.cab__espacio span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (max-width:1079px){
  .cab__in{gap:8px}
  .cab__logo img{height:40px}
  .cab__menu{display:inline-flex}
  .cab__espacio,.cab__cta{display:none}
  .cab__nav{order:5;margin-left:0}
  .cab__idioma{margin-left:auto}
  /* con JS: panel desplegable; sin JS: los enlaces van en una fila debajo */
  html:not(.js) .cab__in{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px}
  html:not(.js) .cab__menu{display:none}
  html:not(.js) .cab__nav{width:100%}
  html:not(.js) .cab__links{flex-wrap:wrap}
  .js .cab__nav{position:fixed;left:0;right:0;top:var(--cab-h);bottom:0;background:var(--sg-harina);padding:20px var(--sg-gut) 32px;overflow:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .3s var(--sg-ease),visibility 0s .3s}
  .js .cab.abierto .cab__nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s var(--sg-ease)}
  .js .cab__links{flex-direction:column;gap:0}
  .js .cab__links a{font:800 1.9rem/1.1 var(--sg-cond);text-transform:uppercase;color:var(--sg-verde);padding:12px 0;border-bottom:1px solid rgba(5,82,36,.15);border-radius:0}
  .js .cab__panel-extra{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:22px}
}
@media (max-width:360px){.cab__logo img{height:36px}}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:clamp(18px,4vw,40px);overflow:hidden}
.hero__in{display:grid;gap:18px;align-items:center}
.hero__logo{position:relative;width:min(220px,62vw,26svh);margin:0 auto;order:-1}   /* alto = 1,3 × ancho: ≤ 34svh */
/* teléfonos de 640 de alto (lo común en Bukavu): h1, bajada y los dos botones entran sin bajar */
@media (max-width:899px) and (max-height:700px){.hero{padding-top:10px}.hero__in{gap:10px}.hero__logo{width:min(220px,62vw,18svh)}.hero__h1{margin-bottom:12px}}
.logo-hero{display:block;width:100%;height:auto}
.hero__h1{font-size:clamp(2.6rem,9vw,5.6rem);line-height:.92;text-transform:uppercase;margin:0 0 18px}
.hero__h1 .m{display:inline-block;vertical-align:bottom}
.hero__h1 .m>span{display:inline-block}
.hero__yk{display:inline-block;vertical-align:baseline}
.yk{display:inline-block;height:.86em;width:auto;aspect-ratio:483/117;vertical-align:-.08em;fill:var(--sg-verde);overflow:visible}
.hero__punto{display:inline-block;color:var(--sg-verde);margin-left:-.1em}
.hero__bajada{font-size:1.12rem;color:var(--sg-carbon)}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.campo{position:relative;height:96px;margin-top:8px}
.campo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
html:not(.js) .campo{height:24px}
@media (min-width:900px){
  .hero__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px}
  .hero__logo{order:0;width:min(360px,100%);justify-self:center}
  .campo{height:130px}
}

/* ---------- cinta ---------- */
.cinta{background:var(--sg-verde);overflow:hidden;padding:14px 0;position:relative;z-index:1}
.cinta__pista{display:flex;width:max-content;animation:cinta 35s linear infinite}
.cinta:hover .cinta__pista,.cinta.pausa .cinta__pista{animation-play-state:paused}
.cinta__grupo{display:flex;align-items:center;gap:22px;padding-right:22px}
.cinta__grupo span{font:800 clamp(1.6rem,4vw,2.4rem)/1 var(--sg-cond);text-transform:uppercase;letter-spacing:.03em;color:transparent;-webkit-text-stroke:1.4px var(--sg-grano);white-space:nowrap}
.cinta__ico{width:30px;height:30px;color:var(--sg-grano)}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ---------- secciones y bordes ---------- */
.sec{position:relative;padding:clamp(56px,8vw,96px) 0}
.sec--trigo{background:var(--sg-trigo)}
.sec--noche{background:var(--sg-noche);color:var(--sg-harina)}
.sec--noche h2,.sec--noche h3{color:var(--sg-harina)}
.borde{position:absolute;left:0;top:-35px;width:100%;height:36px;display:block;fill:var(--sg-harina);pointer-events:none}
.sec--trigo>.borde{fill:var(--sg-trigo)}
.sec--noche>.borde,.pie>.borde{fill:var(--sg-noche)}
.borde--arco{top:-89px;height:90px}
.intro{font-size:1.08rem;margin-bottom:2em}

/* ---------- reveal genérico (solo con .js) ---------- */
.js [data-rev]{opacity:0;transform:translateY(16px)}
.js [data-rev].visto{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:calc(min(var(--i,0),5)*80ms)}

/* ---------- du champ au sac ---------- */
.parcours{padding-top:40px}
.pasos{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:34px}
.pasos>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.paso{position:relative;z-index:1;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start}
.paso__ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--sg-harina);border:2px solid var(--sg-verde);box-shadow:var(--sg-sombra);color:var(--sg-verde)}
.paso__ico .ico{width:30px;height:30px}
.paso__n{display:block;font:800 1rem/1 var(--sg-cond);color:var(--sg-tierra-texto);letter-spacing:.1em;margin:6px 0 6px}
.paso h3{font-size:1.7rem;margin-bottom:6px}
.paso p{margin:0;max-width:38ch}
.js .paso__ico path{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .paso__ico .grano{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center}
.js .paso.tocado .paso__ico path{stroke-dashoffset:0;transition:stroke-dashoffset .8s cubic-bezier(.65,0,.35,1)}
.js .paso.tocado .paso__ico .grano{opacity:1;transform:none;transition:opacity .3s .6s,transform .4s var(--sg-ease) .6s}
@media (min-width:900px){
  .pasos{gap:10px}
  .paso{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:28px}
  .paso__ico{grid-column:2;width:72px;height:72px}
  .paso__ico .ico{width:38px;height:38px}
  .paso__txt{grid-column:3;grid-row:1;padding-top:8px}
  .paso:nth-child(even) .paso__txt{grid-column:1;text-align:right;justify-self:end}
  .paso:nth-child(even) .paso__txt p{margin-left:auto}
  .paso{min-height:150px}
}

/* ---------- nos sacs ---------- */
.sacs{overflow:hidden}
.polvo{position:absolute;inset:0;pointer-events:none}
.polvo canvas{position:absolute;inset:0;width:100%;height:100%}
.sacs .envoltura{position:relative}
.sacs__lista{list-style:none;margin:70px 0 0;padding:0;display:grid;gap:96px 28px}
.sac-t{position:relative;background:var(--sg-trigo);border:1px solid var(--sg-verde);border-radius:14px;box-shadow:var(--sg-sombra);padding:0 22px 24px;text-align:center}
.sac-t__img{margin:-78px auto 4px;width:62%;transition:transform .35s var(--sg-ease)}
.sac-t--10 .sac-t__img{width:54%}
.sac-t--5 .sac-t__img{width:46%}
.sac-t:hover .sac-t__img{transform:rotate(-2deg) translateY(-4px)}
.saco{display:block;width:100%;height:auto;overflow:visible}
.saco__cuerpo{fill:#FFFDF6;stroke:var(--sg-verde);stroke-width:2.5;stroke-linejoin:round}
.saco__tejido{opacity:.9}
.saco__orejas,.saco__costura{fill:none;stroke:var(--sg-verde);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.saco__costura{stroke-dasharray:5 5;stroke-width:2}
.saco__banda{fill:var(--sg-verde)}
.saco__farine{font:800 17px var(--sg-cond);letter-spacing:.06em;fill:var(--sg-harina)}
.saco__kg{font:800 26px var(--sg-cond);fill:var(--sg-verde)}
.sac-t__kg{font:800 clamp(3.4rem,10vw,4.6rem)/.9 var(--sg-cond);color:var(--sg-verde);margin:8px 0 8px}
.sac-t__kg span{color:var(--sg-verde)}
.sac-t__uso{min-height:3.2em;margin-bottom:10px}
.sac-t__prix{font:800 1.05rem/1 var(--sg-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--sg-tierra-texto);margin-bottom:16px}
.js .sac-t[data-rev]{transform:translateY(24px)}
.js .sac-t[data-rev].visto{transform:none;transition:opacity .5s,transform .6s var(--sg-ease);transition-delay:calc(var(--i,0)*80ms)}
@media (max-width:899px){
  /* 29/10: en el teléfono, una fila deslizable (se asoma el saco siguiente) en vez de 3 tarjetas apiladas */
  .sacs__lista{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1 * var(--sg-gut));padding:82px var(--sg-gut) 10px;scroll-padding:0 var(--sg-gut);align-items:stretch}
  .sacs__lista::-webkit-scrollbar{display:none}
  .sac-t{flex:0 0 min(78%,300px);scroll-snap-align:start}
}
@media (min-width:900px){.sacs__lista{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}}

/* ---------- pourquoi ---------- */
.sellos{list-style:none;margin:0;padding:0;display:grid;gap:26px 56px;max-width:980px}
.sello-t{display:flex;gap:16px;align-items:flex-start}
.sello-t__ico{flex:none;color:var(--sg-verde);padding-top:2px}
.sello-t__ico .ico{width:36px;height:36px}
.sello-t h3{font-size:1.4rem;margin-bottom:4px}
.sello-t p{font-size:.9375rem;margin:0;color:var(--sg-carbon);max-width:40ch}
.js .sello-t .ico path{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .sello-t.visto .ico path{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) calc(.15s + var(--i,0)*90ms)}
@media (min-width:760px){.sellos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.certs{margin-top:40px}

/* ---------- grossistes ---------- */
.gros__in{display:grid;gap:40px}
.gros .intro{color:var(--sg-harina)}
.contador{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:4px 0 26px}
.contador__num{margin:0;font:800 clamp(4.6rem,16vw,7.4rem)/1 var(--sg-cond);color:var(--sg-sol);font-variant-numeric:tabular-nums}
.od{display:inline-flex;gap:6px}
.od__d{position:relative;display:inline-block;height:1em;overflow:hidden;width:.62em;border:1px solid rgba(247,185,4,.35);border-radius:8px;background:rgba(255,255,255,.04)}
.od__r{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center}
.od__r span{display:block;height:1em;line-height:1}
.contador__et{margin:0;display:flex;flex-direction:column;gap:4px;max-width:20ch}
.contador__et strong{font:800 1.7rem/1 var(--sg-cond);text-transform:uppercase;color:var(--sg-harina)}
.contador__et span{color:var(--sg-grano)}
.gros__lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gros__lista li{display:flex;gap:12px;align-items:flex-start}
.gros__lista .ico{color:var(--sg-brote);margin-top:2px}
.form{background:var(--sg-harina);color:var(--sg-carbon);border:2px solid var(--sg-sol);border-radius:16px;box-shadow:4px 4px 0 var(--sg-sol);padding:22px 18px}
.form h3{font-size:1.8rem;margin-bottom:6px;color:var(--sg-verde)}
.form__sub{font-size:.95rem;color:var(--sg-tinta2)}
.form__fila{display:grid;gap:14px;margin-bottom:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem}
.form input,.form select{font:400 1rem var(--sg-cuerpo);min-height:48px;padding:0 12px;border:1.5px solid var(--sg-tinta2);border-radius:10px;background:#fff;color:var(--sg-carbon);width:100%}
.form input:focus-visible,.form select:focus-visible{outline:3px solid var(--sg-verde);outline-offset:1px;border-color:var(--sg-verde)}
.form__aviso{display:flex;gap:10px;align-items:flex-start;background:var(--sg-grano);padding:10px 12px;border-radius:10px;font-size:.95rem;color:var(--sg-noche)}
.form__aviso[hidden]{display:none}
.form__aviso .ico{color:var(--sg-tierra-texto);width:22px;height:22px}
.form__btn{width:100%;margin-top:6px}
.form__saco{position:absolute;right:16px;opacity:0;transform:translateY(6px) scale(.7)}
.form__btn.envia .form__saco{animation:saco .6s var(--sg-ease)}
@keyframes saco{30%{opacity:1;transform:none}70%{opacity:1;transform:scaleY(.8)}100%{opacity:0;transform:translateY(-4px) scale(.7)}}
.form__alt{margin:8px 0 0;text-align:center;font-size:.95rem}
.form__alt a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600}
@media (min-width:600px){.form__fila{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.gros__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}.form{padding:28px}}

/* ---------- où acheter ---------- */
.acheter__in{display:grid;gap:36px}
.acheter h2{margin-bottom:.7em}
.acheter h3{font-size:1.5rem;margin-bottom:16px}
.canales{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.canales li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--sg-trigo);border-radius:12px;border:1px solid rgba(5,82,36,.25)}
.canales .ico{color:var(--sg-verde);width:28px;height:28px}
.canales strong{display:block;font-weight:600;color:var(--sg-verde)}
.canales span{display:block;font-size:.98rem;color:var(--sg-tinta2)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;background:#fff;border:1.5px solid var(--sg-verde);font-weight:600;font-size:.95rem;color:var(--sg-carbon)}
.chips .ico{color:var(--sg-verde)}
.chips .logo3--mpesa{width:auto;height:40px;margin:0 -6px}
.chips .logo3--airtel{width:22px;height:22px}
@media (min-width:640px){.canales{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.canales{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- notre histoire ---------- */
.histoire{padding-top:0}
.colinas{position:relative;height:clamp(200px,32vw,380px);background:linear-gradient(var(--sg-harina),var(--sg-grano));overflow:hidden}
.colinas canvas,.colinas__fijo{position:absolute;inset:0;width:100%;height:100%;display:block}
.histoire .envoltura{padding-top:clamp(40px,6vw,64px)}
.cita{margin:0 0 28px;padding:0}
.cita p{font:600 clamp(1.7rem,4.6vw,2.8rem)/1.12 var(--sg-cond);color:var(--sg-verde);margin:0 0 10px;max-width:30ch}
.cita footer{font:600 .95rem/1 var(--sg-cuerpo);letter-spacing:.1em;text-transform:uppercase;color:var(--sg-tierra-texto)}
.triada{list-style:none;margin:30px 0;padding:0;display:grid;gap:18px}
.triada li{padding:20px;border:1px solid var(--sg-verde);border-radius:14px;background:var(--sg-trigo);box-shadow:var(--sg-sombra)}
.triada .ico{width:36px;height:36px;color:var(--sg-verde);margin-bottom:10px}
.triada h3{margin-bottom:6px}
.triada p{margin:0;font-size:.98rem}
@media (min-width:900px){.triada{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hito{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin:0}
.hito__an{font:800 2.6rem/1 var(--sg-cond);color:var(--sg-tierra-texto)}
.hito span:last-child{font-weight:600;color:var(--sg-verde)}

/* ---------- partenaires ---------- */

/* ---------- FAQ ---------- */
.faq__lista{display:grid;gap:10px}
.faq details{border:1px solid var(--sg-verde);border-radius:12px;background:#fff}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;cursor:pointer;font-weight:600;color:var(--sg-verde);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq__mas{transition:transform .3s var(--sg-ease)}
.faq details[open] .faq__mas{transform:rotate(45deg)}
.faq__r{padding:0 16px 6px}
.faq details[open] .faq__r{animation:abre .35s var(--sg-ease) backwards}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}}

/* ---------- contact ---------- */
.contacto__in{display:grid;gap:32px}
.lugares{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:16px}
.lugares li{display:flex;gap:14px;align-items:flex-start}
.lugares .ico{width:30px;height:30px;color:var(--sg-verde)}
.lugares strong{display:block;color:var(--sg-verde);font-weight:600}
.lugares span{display:block;color:var(--sg-tinta2)}
.enlace{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600}
.enlace .ico{width:18px;height:18px}
.contacto__btns{display:flex;flex-wrap:wrap;gap:12px}
.mapa{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.mapa__relieve path{fill:none;stroke:var(--sg-tinta2);stroke-width:1.2;opacity:.25;stroke-linecap:round}
.mapa__agua{fill:#DCE6CF;stroke:#9DB58C;stroke-width:1.5}
.mapa__rio{fill:none;stroke:#7FA06E;stroke-width:3.5;stroke-linecap:round}
.mapa__lago{font:italic 400 15px var(--sg-cuerpo);fill:var(--sg-tinta2)}
.mapa__lago--t{font-size:12.5px}
.mapa__nrio{font:italic 400 14px var(--sg-cuerpo);fill:#4f6e44}
.mapa__ref circle{fill:var(--sg-tinta2)}
.mapa__ref text{font:600 13px var(--sg-cuerpo);fill:var(--sg-tinta2)}
.marca path{fill:var(--sg-verde)}
.marca circle{fill:var(--sg-harina)}
.marca--moulin path{fill:var(--sg-verde)}
.marca__grano{fill:var(--sg-sol)}
.marca text{font:800 20px var(--sg-cond);fill:var(--sg-noche);letter-spacing:.02em}
.marca .marca__sub{font:600 13px var(--sg-cuerpo);fill:var(--sg-tierra-texto);letter-spacing:.04em;text-transform:uppercase}
.js .mapa .marca{opacity:0;transform:translateY(-10px) scale(.6);transform-box:fill-box;transform-origin:50% 100%}
.js .mapa.visto .marca{opacity:1;transform:none;transition:opacity .4s,transform .5s var(--sg-ease);transition-delay:calc(.5s + var(--i)*.25s)}
.js .mapa .mapa__rio{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .mapa.visto .mapa__rio{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1)}
@media (min-width:900px){.contacto__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}}

/* ---------- pie (efecto «pie-ensacado») ---------- */
.pie{position:relative;background:var(--sg-noche);color:var(--sg-harina);padding:56px 0 28px;text-align:center}
.pie__in{max-width:var(--sg-ancho);margin:0 auto;padding:0 var(--sg-gut);display:flex;flex-direction:column;align-items:center;gap:18px}
.pie__savana{position:relative;margin:0;width:auto;font:800 clamp(64px,14vw,160px)/.8 var(--sg-cond);letter-spacing:.01em;padding-top:.06em}
.pie__base,.pie__lleno{display:block}
.pie__base{color:transparent;-webkit-text-stroke:2px var(--sg-grano)}
.pie__lleno{position:absolute;left:0;right:0;top:.06em;color:var(--sg-grano)}
.pie__granos{position:absolute;inset:0;pointer-events:none}
.pie__granos i{position:absolute;left:var(--x);top:-14%;width:10px;height:14px;border-radius:50%;background:var(--sg-sol);opacity:0}
.pie__sol{position:absolute;right:-11%;top:-16%;width:19%;z-index:-1;fill:var(--sg-sol);stroke:var(--sg-sol);stroke-width:4;stroke-linecap:round}
.pie__savana{isolation:isolate}
.js .pie__savana.listo .pie__lleno{clip-path:inset(100% 0 0 0)}
.js .pie__savana.listo .pie__sol{transform:translateY(60%);opacity:0}
.js .pie__savana.lleno .pie__lleno{clip-path:inset(0);transition:clip-path 1.4s cubic-bezier(.45,0,.2,1) .7s}
.js .pie__savana.lleno .pie__granos i{animation:cae 1.1s cubic-bezier(.5,0,.75,0) backwards;animation-delay:calc(var(--i)*70ms)}
.js .pie__savana.lleno .pie__sol{transform:none;opacity:1;transition:transform 1s var(--sg-ease) 2s,opacity .6s 2s}
@keyframes cae{0%{opacity:0;transform:translateY(-40px) rotate(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(220%) rotate(160deg)}}
.pie--corto .pie__savana{font-size:clamp(44px,8vw,84px)}
.pie__frase{font-size:1.1rem;color:var(--sg-grano);margin:0}
.pie__contacto{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px;margin:0}
.pie__contacto a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;color:var(--sg-harina);text-decoration:none}
.pie__contacto a:hover{text-decoration:underline;text-decoration-color:var(--sg-sol);text-underline-offset:4px}
.pie__contacto .ico{color:var(--sg-brote)}
.pie__redes{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.pie__redes a{display:grid;place-items:center;width:44px;height:44px;color:var(--sg-harina)}
.pie__barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 18px;margin-top:10px;padding-top:16px;border-top:1px solid rgba(252,235,176,.18);width:100%;font-size:.92rem;color:rgba(251,248,238,.8)}
.pie__barra a{color:rgba(251,248,238,.85)}
.pie__barra>a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.pie .espacio,.pie .idioma a{color:rgba(251,248,238,.85)}
.pie .espacio:hover{background:rgba(255,255,255,.06);color:#fff}
.pie .idioma a[aria-current]{color:var(--sg-sol)}
.pie .idioma__sep{color:var(--sg-harina)}
.pie-cred{margin:0}
.pie-cred a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 6px;color:rgba(255,255,255,.6);text-decoration:none;border-radius:4px;white-space:nowrap;font-size:.88rem}
.pie-cred [translate]{color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.25)}
.pie-cred a:hover,.pie-cred a:focus-visible,.pie-cred a:hover [translate]{color:#fff}
.pie-cred a:hover [translate],.pie-cred a:focus-visible [translate]{border-color:var(--sg-sol)}
.pie-cuy{flex:none;width:auto;height:22px;transition:transform .35s var(--sg-ease)}
.pie-cred a:hover .pie-cuy,.pie-cred a:focus-visible .pie-cuy{transform:translateY(-1px) rotate(-8deg)}

/* ---------- barra móvil ---------- */
.barra{display:none}
@media (max-width:899px){
  .barra{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(11,42,23,.96);transition:transform .35s var(--sg-ease)}
  .barra .btn{min-height:46px;padding:0 10px;box-shadow:none}
  .js .barra:not(.ver){transform:translateY(110%)}
  html:not(.js) body{padding-bottom:70px}
}

/* ---------- 404 ---------- */
.e404{padding:clamp(32px,6vw,80px) 0 40px}
.e404__in{display:grid;gap:32px;align-items:center}
.e404 h1{font-size:clamp(2.8rem,10vw,5.4rem);text-transform:uppercase;margin-bottom:16px}
.e404__btns{display:flex;flex-direction:column;align-items:stretch;gap:12px;max-width:360px}
.ico--vuelta{transform:scaleX(-1)}
.caido{position:relative;width:min(340px,86vw);margin:0 auto}
.caido .polvo{inset:-10% -6% 0}
.caido__svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.caido__sombra{fill:rgba(11,42,23,.12)}
.caido__harina{fill:var(--sg-grano);stroke:var(--sg-tierra);stroke-width:1.2;stroke-linejoin:round}
.caido__granos{fill:#EBCF84}
.caido__saco{transform-box:fill-box;transform-origin:0 100%}
/* momento de autor de la 404: el saco se cae de lado (gravedad, sin rebote) y la harina se derrama */
.js .caido__saco{animation:vuelca .75s cubic-bezier(.55,0,.85,.35) .35s backwards}
.js .caido__harina,.js .caido__granos{transform-box:fill-box;transform-origin:0 100%;animation:derrama .7s var(--sg-ease) 1.05s backwards}
.js .caido .polvo{animation:aparece .9s ease-out 1.1s backwards}
@keyframes vuelca{from{transform:rotate(-90deg)}}
@keyframes derrama{from{opacity:0;transform:scale(.1,.3)}}
.p404 .barra{display:none}
html:not(.js) .p404{padding-bottom:0}
@media (min-width:900px){.e404__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.caido{width:min(400px,100%)}.e404__btns{flex-direction:row;flex-wrap:wrap;max-width:none}}

/* ---------- H1 que sube por palabras (Basado en «Stagger Rise» de Forever Components, MIT) ---------- */
.js .hero__h1 .m>span{animation:sube .32s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i)*60ms)}
.js .hero__yk,.js .hero__punto{animation:aparece .5s ease-out .22s backwards}
@keyframes sube{from{opacity:0;transform:translateY(.22em)}}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}}

/* ---------- movimiento reducido: todo quieto y en su estado final ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-rev]{opacity:1!important;transform:none!important}
  .js .paso__ico path,.js .sello-t .ico path,.js .mapa .mapa__rio{stroke-dashoffset:0!important}
  .js .paso__ico .grano,.js .mapa .marca{opacity:1!important;transform:none!important}
  .js .pie__savana.listo .pie__lleno{clip-path:none!important}
  .js .pie__savana.listo .pie__sol{transform:none!important;opacity:1!important}
  .pie__granos{display:none}
}
/* bucles en pausa fuera de pantalla (sgl.js pone .pausa) */
.hero.pausa #sgl-solcito{animation-play-state:paused}