@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;}
:root{
  /* Verdes girados de H=163 (verde azulado) a H~100 para acordar con el logotipo:
     su follaje esta en H=60 y su fruto en H=23. El azulado anterior quedaba a 140
     grados del dorado y la terracota, y hacia vibrar los acentos. */
  --bosque:#223319; --hoja:#4E6A3E; --verde-claro:#A5C28E;
  --crema:#F4F0E4; --crema-alta:#FAF8F0; --nuez:#6B4423;
  --dorado:#C9A55A; --dorado-vivo:#DDBC77; --carbon:#20211D;
  --terracota:#B4552D;     /* color del logotipo oficial */

  --fondo:var(--crema); --superficie:var(--crema-alta);
  --tinta:#22271F; --tinta-suave:#4C544B; --tinta-tenue:#687064;
  --linea:#DBD3BE; --linea-fuerte:#BFB69E;

  --sobre-verde:rgba(248,245,235,.94);
  --sobre-verde-2:rgba(240,236,222,.86);

  --serif:'Fraunces',"Iowan Old Style",Georgia,serif;
  --sans:'Manrope',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --gut:clamp(20px,5vw,72px); --max:1280px; --r:16px;
  --ease:cubic-bezier(.22,.68,.28,1);
}

/* ══ Ilustraciones ══
   Paleta del estándar de grabado editorial agrícola. Las ocho estampas usan
   var(--ilu-*) con respaldo, así que los ficheros de assets/ilustraciones/
   también funcionan sueltos. Cambiar aquí las recolorea todas a la vez.
   El generador vive en scripts/generar-grabados.py. */
:root{
  --ilu-papel:#EFE7D4;   --ilu-tinta:#223319;   --ilu-medio:#3E5230;
  --ilu-olivo:#7A8C63;   --ilu-dorado:#C9A55A;  --ilu-terracota:#B4552D;
}
*{box-sizing:border-box;}
/* Sin esto, cualquier regla de autor con display (flex, grid…) vence al
   display:none que el navegador aplica a [hidden], y el elemento sigue
   viéndose aunque el JS lo haya ocultado. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--sans); font-size:17.5px; line-height:1.66;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img,svg{max-width:100%;}
h1,h2,h3,h4{font-family:var(--serif); color:var(--bosque); margin:0; text-wrap:balance;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40,"wght" 600; letter-spacing:0;}
a{color:var(--bosque); text-decoration:none;}
:focus-visible{
  /* Anillo de dos tonos: el dorado se ve sobre verde, el halo oscuro sobre crema.
     Un solo color no alcanza 3:1 contra los dos fondos del sitio. */
  outline:3px solid var(--dorado);
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(34,51,25,.55);
  border-radius:6px;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut);}
.saltar{position:absolute; left:-9999px; top:0; z-index:200; background:var(--bosque);
  color:var(--crema); padding:14px 20px; border-radius:0 0 10px 0; font-weight:600;}
.saltar:focus{left:0;}
.solo-mov{display:none;}
@media(max-width:860px){.solo-desk{display:none !important;} .solo-mov{display:block;}}

/* ── Texturas ── */
.grano{position:relative;}
.grano::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.42; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");}
.topo{position:relative; overflow:hidden;}
.topo::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320' viewBox='0 0 420 320'%3E%3Cg fill='none' stroke='%236B4423' stroke-width='1' opacity='.30'%3E%3Cpath d='M-20 250 C 80 205, 150 285, 250 235 S 400 175, 460 220'/%3E%3Cpath d='M-20 215 C 80 170, 150 250, 250 200 S 400 140, 460 185'/%3E%3Cpath d='M-20 180 C 80 135, 150 215, 250 165 S 400 105, 460 150'/%3E%3Cpath d='M-20 145 C 80 100, 150 180, 250 130 S 400 70, 460 115'/%3E%3Cpath d='M-20 110 C 80 65, 150 145, 250 95 S 400 35, 460 80'/%3E%3Cpath d='M-20 75 C 80 30, 150 110, 250 60 S 400 0, 460 45'/%3E%3C/g%3E%3C/svg%3E");
  background-size:min(46vw,520px) auto;}
section.oscuro.grano::before{mix-blend-mode:overlay; opacity:.5;}

/* El velo topográfico de .topo se pinta encima del contenido de la sección.
   Con las ilustraciones oscuras no se notaba; sobre el papel claro de las
   estampas sí, así que éstas se elevan por encima del velo. */
figure.foto, .banda-ilu, .banda-col{position:relative; z-index:1;}

/* Etiqueta de sección. Estaba duplicada en cinco páginas con tres variantes
   que sólo diferían en medio píxel, y faltaba en recursos.html, donde se usa:
   allí la píldora salía sin forma. Una sola definición. */
.etiqueta{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:0;
  text-transform:uppercase; color:var(--dorado-vivo); font-weight:700; margin:0 0 18px;
  border:1.5px solid rgba(201,165,90,.5); border-radius:999px; padding:8px 18px;}

/* ══ Tarjeta de portada ══
   Componente reutilizable de la biblioteca: la estampa arriba, y debajo
   categoría, título, resumen y acción. El SVG no lleva texto; todo el texto
   es HTML, así que se traduce, se busca y lo lee un lector de pantalla.
   El hover apenas eleva y pasa el borde a dorado. */
.tarjeta-portada{display:flex; flex-direction:column; background:var(--superficie);
  border:1px solid var(--linea); border-radius:var(--r); overflow:hidden;
  text-align:left; width:100%; padding:0; font:inherit; color:inherit; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);}
.tarjeta-portada:hover{transform:translateY(-3px); border-color:var(--dorado);
  box-shadow:0 20px 42px -30px rgba(32,33,29,.42);}
.tarjeta-portada:focus-visible{transform:translateY(-3px); border-color:var(--dorado);}
.tp-ilu{line-height:0; border-bottom:1px solid var(--linea); background:var(--ilu-papel,#EFE7D4);}
.tp-ilu svg{display:block; width:100%; height:auto;}
.tp-cuerpo{padding:clamp(18px,2.4vw,26px); display:flex; flex-direction:column; gap:9px; flex:1;}
.tp-cat{font-size:11px; font-weight:800; letter-spacing:0; text-transform:uppercase;
  color:var(--hoja); margin:0;}
.tp-tit{font-family:var(--serif); font-size:20px; line-height:1.24; color:var(--bosque); margin:0;
  font-variation-settings:"opsz" 30,"wght" 600;}
.tp-res{margin:0; font-size:15.5px; line-height:1.6; color:var(--tinta-suave); flex:1;}
.tp-accion{display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  font-size:15px; font-weight:700; color:var(--hoja);}
.tp-accion em{font-style:normal; transition:transform .25s var(--ease);}
.tarjeta-portada:hover .tp-accion em{transform:translateX(4px);}
@media(prefers-reduced-motion:reduce){
  .tarjeta-portada,.tp-accion em{transition:none;}
  .tarjeta-portada:hover{transform:none;}
}

/* ── Trío de #quienes ──
   Los pies nombraban lo que la lámina ya muestra ("Huerto al amanecer / Zona
   productora"), así que no informaban, y nada declaraba qué relación tenían
   las tres. Ahora la rúbrica va primero y declara qué aporta la lámina, y cada
   pie nombra lo que queda fuera del encuadre. En --hoja, no en --dorado:
   el dorado sobre crema da 2,05:1 y no llega al mínimo AA; --hoja da 5,33:1
   sobre crema y 4,94:1 sobre el papel de las secciones suaves.
   Rige en las cuatro secciones con lámina rotulada -- portada #quienes y
   #comunidad, macadamia #origen y quienes-somos #personas -- por eso cuelga
   de figure.foto y no de un id. */
.escenas-intro{max-width:64ch; margin:0 0 clamp(20px,2.4vw,28px);}
.escenas-intro h3{font-family:var(--serif); font-size:19px; line-height:1.3;
  color:var(--bosque); margin:0 0 8px; font-variation-settings:"opsz" 30,"wght" 600;}
.escenas-intro p{font-size:15px; line-height:1.65; color:var(--tinta-suave); margin:0;}
figure.foto .pie-s{color:var(--hoja);}
figure.foto .pie-x{margin-top:5px; font-size:14px; line-height:1.56; color:var(--tinta-suave);
  max-width:68ch;}  /* a 14 px una lámina panorámica daría ~130 caracteres por línea */
.cta-quienes{margin:clamp(24px,3vw,34px) 0 0;}
.cta-quienes a{font-size:16px; font-weight:700; color:var(--hoja);
  border-bottom:1px solid rgba(78,106,62,.4);}
.cta-quienes a:hover{border-bottom-color:var(--hoja);}

/* ── Revelado ── */
.rv{opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease);}
.rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none;}}

/* ── Botones ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:none;
  cursor:pointer; font-family:var(--sans); font-weight:700; border-radius:999px; text-align:center;
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
  font-size:15.5px; padding:14px 26px; line-height:1.2;}
.btn.grande{font-size:16.5px; padding:17px 34px;}
.btn-oro{background:var(--dorado); color:#241B08; box-shadow:0 10px 24px -14px rgba(201,165,90,.9);}
.btn-oro:hover{background:var(--dorado-vivo); transform:translateY(-2px);}
.btn-linea{background:transparent; color:var(--crema); border:2px solid rgba(244,240,228,.55);}
.btn-linea:hover{border-color:var(--dorado); color:var(--dorado-vivo);}
@media(max-width:560px){.btn,.btn.grande{width:100%; padding:17px 24px;}}

/* ── Cabecera ── */
header{position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(244,240,228,.95); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--linea); transition:box-shadow .35s var(--ease);}
header.solid{box-shadow:0 6px 24px -18px rgba(32,33,29,.5);}
header .bar{max-width:var(--max); margin:0 auto; padding:15px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative;}
.logo{display:flex; align-items:center; flex-shrink:0;}
.logo img{display:block; height:46px; width:auto;}
@media(max-width:620px){.logo img{height:38px;}}
nav.principal{display:flex; align-items:center; gap:25px;}
nav.principal a{font-size:15px; font-weight:600; color:var(--tinta-suave); transition:color .25s; position:relative;}
nav.principal a:hover{color:var(--bosque);}
nav.principal a:not(.cta-nav)::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--dorado); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);}
nav.principal a:not(.cta-nav):hover::after{transform:scaleX(1);}
.hamb{display:none; background:none; border:none; cursor:pointer; padding:10px; border-radius:8px;}
.hamb span{display:block; width:25px; height:2.4px; background:var(--bosque); margin:5.5px 0;
  border-radius:2px; transition:transform .3s var(--ease), opacity .25s;}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
@media(max-width:1080px){
  nav.principal{display:none;}
  .hamb{display:block;}
  nav.principal.abierta{display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0; background:var(--crema-alta);
    border-bottom:1px solid var(--linea); padding:10px var(--gut) 26px;
    box-shadow:0 22px 48px -26px rgba(32,33,29,.45); max-height:calc(100vh - 70px); overflow-y:auto;}
  nav.principal.abierta a{color:var(--tinta); font-size:18px; padding:15px 0; border-bottom:1px solid var(--linea);}
  nav.principal.abierta a::after{display:none;}
  nav.principal.abierta .cta-nav{border-bottom:none; padding-top:20px;}
  nav.principal.abierta .btn{width:100%;}
}

/* ── Hero ── */
.hero{position:relative; min-height:min(100vh,940px); display:flex; align-items:flex-end;
  padding:0 0 clamp(48px,7vw,90px); overflow:hidden; background:var(--bosque);}
.hero .escena{position:absolute; inset:0;}
.hero .escena svg{width:100%; height:100%; display:block;}
.hero .velo{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,39,13,.66) 0%, rgba(22,39,13,.26) 32%, rgba(22,39,13,.82) 78%, rgba(22,39,13,.95) 100%);}
.hero .wrap{position:relative; z-index:3; width:100%;}
.hero .kicker{display:flex; align-items:center; gap:13px; font-size:12.5px; letter-spacing:0;
  text-transform:uppercase; color:var(--dorado-vivo); font-weight:700; margin:0 0 22px;}
.hero .kicker::before{content:""; width:36px; height:2px; background:var(--dorado); flex-shrink:0;}
.hero h1{font-size:38px; line-height:1.02; color:#FCFAF3;
  font-variation-settings:"opsz" 120,"wght" 600,"SOFT" 12; max-width:16ch; margin:0 0 26px;
  text-shadow:0 2px 24px rgba(14,24,8,.4);}
.hero p.entrada{font-size:17px; line-height:1.62; color:var(--sobre-verde);
  max-width:58ch; margin:0 0 36px; text-shadow:0 1px 14px rgba(14,24,8,.45);}
.hero .acciones{display:flex; gap:14px; flex-wrap:wrap;}
.ruta{margin-top:clamp(40px,6vw,66px); max-width:560px;}
.ruta svg{width:100%; height:auto; display:block;}
.ruta .paso{font-family:var(--sans); font-size:13.5px; font-weight:700; letter-spacing:0;
  text-transform:uppercase; fill:#FCFAF3;}
.ruta .trazo{stroke:var(--dorado-vivo); stroke-width:1.8; fill:none; stroke-dasharray:var(--L); stroke-dashoffset:var(--L);}
.ruta.in .trazo{animation:dibujar 2.1s var(--ease) forwards;}
@keyframes dibujar{to{stroke-dashoffset:0;}}
.ruta .nodo{fill:var(--dorado-vivo); opacity:0; transform-box:fill-box; transform-origin:center;}
.ruta.in .nodo{animation:brotar .5s var(--ease) forwards;}
.ruta.in .nodo:nth-of-type(2){animation-delay:.75s;} .ruta.in .nodo:nth-of-type(3){animation-delay:1.5s;}
@keyframes brotar{from{opacity:0; transform:scale(.3);} to{opacity:1; transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.ruta .trazo{stroke-dashoffset:0; animation:none;} .ruta .nodo{opacity:1; animation:none;}}

/* ── Secciones ── */
section.bloque{padding:clamp(72px,10vw,148px) 0; position:relative;}
section.oscuro{background:var(--bosque); color:var(--sobre-verde);}
section.oscuro h2,section.oscuro h3,section.oscuro h4{color:#FCFAF3;}
section.suave{background:var(--crema-alta);}
.encabezado{max-width:64ch; margin-bottom:clamp(40px,5vw,64px);}
.eyebrow{display:flex; align-items:center; gap:13px; font-size:12.5px; letter-spacing:0;
  text-transform:uppercase; color:var(--hoja); font-weight:700; margin:0 0 18px;}
.eyebrow::before{content:""; width:28px; height:2px; background:var(--dorado); flex-shrink:0;}
section.oscuro .eyebrow{color:var(--verde-claro);}
h2.titulo{font-size:30px; line-height:1.06; margin:0 0 22px; max-width:19ch;
  font-variation-settings:"opsz" 90,"wght" 600,"SOFT" 8;}
h3.sub{font-size:23px; margin:0 0 16px;}
.entradilla{font-size:17px; line-height:1.7; color:var(--tinta-suave); margin:0 0 20px;}
section.oscuro .entradilla{color:var(--sobre-verde-2);}
.entradilla:last-child{margin-bottom:0;}
.subtitulo-serif{font-family:var(--serif); font-size:21px; line-height:1.3;
  color:#FCFAF3; font-variation-settings:"opsz" 50,"wght" 500,"SOFT" 14; margin:6px 0 0;}
.dos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
  gap:clamp(32px,5vw,76px); align-items:center;}
.tres{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:20px;}

/* ── Divisor ── */
.divisor{padding:0; line-height:0;}
.divisor svg{width:100%; height:auto; display:block;}
.divisor .raiz{stroke:var(--terracota); stroke-width:1.5; fill:none; opacity:.5;}
.divisor .dato{stroke:var(--hoja); stroke-width:1.5; fill:none; opacity:.9;}
.divisor .pt{fill:var(--dorado);}

/* ── Cita ── */
.cita{border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  padding:clamp(34px,4.4vw,54px) 0; margin:clamp(42px,5vw,66px) 0 0;}
.cita p{font-family:var(--serif); font-size:24px; line-height:1.18;
  color:var(--bosque); margin:0; max-width:22ch; font-variation-settings:"opsz" 90,"wght" 500,"SOFT" 20;}

/* ── Fotografías / escenas ── */
.escenas{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:18px;}
/* Las ilustraciones son estampas sobre papel claro: la leyenda va debajo,
   no encima. Un degradado oscuro sobre papel crema sería un parche. */
figure.foto{margin:0; background:none; box-shadow:none;}
figure.foto svg{display:block; width:100%; height:auto; border-radius:5px;
  box-shadow:0 14px 30px -22px rgba(32,33,29,.5);}
figure.foto figcaption{padding:12px 2px 0; display:grid; gap:3px;}
figure.foto .pie-t{font-family:var(--serif); font-size:16.5px; color:var(--bosque);
  font-variation-settings:"opsz" 24,"wght" 600;}
figure.foto .pie-s{font-size:11.5px; font-weight:700;
  letter-spacing:0; text-transform:uppercase;}

/* ── Colectivo ── */
/* Banda ilustrada: el titular ocupa el tercio izquierdo que la estampa dejó
   libre. Por debajo de 900 px no cabe superpuesto y se apila. */
.banda-col{position:relative; margin:0 0 clamp(30px,4vw,50px);}
.banda-ilu{margin:0; line-height:0;}
/* La estampa que va sola, sin titular encima, sí necesita aire debajo. */
.banda-ilu.sola{margin-bottom:clamp(26px,3.4vw,44px);}
.banda-ilu svg{display:block; width:100%; height:auto; border-radius:6px;}
/* z-index:2 obligatorio: .banda-ilu lleva z-index:1 para superar el velo de
   .topo, y sin esto la ilustración se pinta encima del titular. */
.banda-txt{position:absolute; z-index:2; left:0; top:50%; transform:translateY(-50%);
  width:33%; padding:0 clamp(14px,2.4vw,34px) 0 clamp(18px,3vw,42px); margin:0;}
.banda-txt .titulo{font-size:21px; line-height:1.1;}
.banda-txt .entradilla{font-size:13px; line-height:1.55; margin-top:12px;}
@media(max-width:900px){
  .banda-txt{position:static; transform:none; width:auto; padding:22px 0 0;}
  .banda-txt .titulo{font-size:25px;}
  .banda-txt .entradilla{font-size:16.5px;}
}

.bloque-col{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r);
  overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.bloque-col:hover{transform:translateY(-4px); box-shadow:0 28px 54px -34px rgba(32,33,29,.45);}
.col-ilu{line-height:0; border-bottom:1px solid var(--linea);}
.col-ilu svg{display:block; width:100%; height:auto;}
.bloque-col h3{font-size:22px; margin:24px clamp(22px,2.6vw,28px) 10px;}
.bloque-col p{margin:0 clamp(22px,2.6vw,28px) 26px; font-size:16px; line-height:1.64; color:var(--tinta-suave);}

/* ── Datos ── */
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:18px;}
.dato-card{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r);
  padding:clamp(26px,3vw,34px); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;}
.dato-card:hover{transform:translateY(-4px); box-shadow:0 28px 54px -34px rgba(32,33,29,.45); border-color:var(--verde-claro);}
.dato-card .cifra{font-family:var(--serif); font-size:40px; line-height:1;
  color:var(--bosque); font-variation-settings:"opsz" 100,"wght" 600; letter-spacing:0;
  font-variant-numeric:tabular-nums; margin-bottom:14px;}
.dato-card .cifra.chico{font-size:25px; line-height:1.16;}
.dato-card .cifra small{font-size:.42em; font-variation-settings:"wght" 500; color:var(--hoja); letter-spacing:0; margin-left:4px;}
.dato-card .desc{font-size:16px; line-height:1.6; color:var(--tinta-suave);}
.leyenda-datos{font-size:14.5px; color:var(--tinta-tenue); margin-top:28px; padding-left:18px;
  border-left:3px solid var(--linea-fuerte); max-width:66ch;}
section.oscuro .leyenda-datos{color:rgba(240,236,222,.72); border-left-color:rgba(165,194,142,.5);}
.leyenda{display:flex; gap:22px; flex-wrap:wrap; margin-top:20px; font-size:15px; color:var(--tinta-suave);}
.leyenda span{display:flex; align-items:center; gap:10px;}
.leyenda i{width:12px; height:12px; border-radius:3px; display:block;}
.mapa-gt{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r); padding:clamp(22px,3vw,34px);}
.mapa-gt svg{display:block; width:100%; height:auto;}
.pie-mapa{font-size:14px; color:var(--tinta-tenue); margin:14px 0 0;}
.pie-mapa.claro{color:rgba(240,236,222,.74); margin-top:18px;}

/* ── Pilares ── */
.portico{margin-bottom:clamp(34px,4vw,48px);}
.portico svg{display:block; width:100%; height:auto;}
.pilares{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:18px;}
.pilar{background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r);
  padding:clamp(26px,3vw,34px); border-top:4px solid var(--hoja);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.pilar:hover{transform:translateY(-4px); box-shadow:0 28px 54px -34px rgba(32,33,29,.45);}
.pilar .ico{width:46px; height:46px; color:var(--hoja); margin-bottom:18px;}
.pilar h3{font-size:21px; margin:0 0 10px; font-variation-settings:"opsz" 30,"wght" 600;}
.pilar p{margin:0; font-size:16px; line-height:1.64; color:var(--tinta-suave);}

/* ── SGMP ── */
.flujo{background:rgba(255,253,246,.07); border:1px solid rgba(165,194,142,.32);
  border-radius:var(--r); padding:clamp(24px,3.2vw,38px); margin-bottom:clamp(30px,4vw,44px); overflow-x:auto;}
.flujo svg{display:block; width:100%; min-width:680px; height:auto;}
.flujo .fl-lin{fill:none; stroke-width:1.9; stroke-dasharray:var(--L); stroke-dashoffset:var(--L);}
.flujo.in .fl-lin{animation:dibujar 2.4s var(--ease) forwards;}
@media (prefers-reduced-motion:reduce){.flujo .fl-lin{stroke-dashoffset:0; animation:none;}}
.flujo .fl-et{font-family:var(--sans); font-size:13px; font-weight:700; fill:#FCFAF3;}
.flujo .fl-n{font-family:var(--mono); font-size:11.5px; fill:var(--verde-claro);}
.pasos-mov{list-style:none; margin:0 0 34px; padding:0; display:grid; gap:10px;}
.pasos-mov li{display:flex; align-items:center; gap:16px; background:rgba(255,253,246,.07);
  border:1px solid rgba(165,194,142,.3); border-radius:12px; padding:16px 18px;}
.pasos-mov .n{width:34px; height:34px; border-radius:50%; background:var(--dorado); color:#241B08;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0;}
.pasos-mov .t{font-size:17px; font-weight:600; color:#FCFAF3;}
.beneficios{list-style:none; padding:0; margin:0 0 32px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:2px 28px;}
.beneficios li{display:flex; gap:14px; align-items:flex-start; padding:13px 0;
  border-bottom:1px solid rgba(165,194,142,.26); font-size:16.5px; line-height:1.55; color:var(--sobre-verde);}
.beneficios li svg{flex-shrink:0; margin-top:3px; color:var(--dorado-vivo);}
.frase-sgmp{margin:28px 0 0; padding:22px 0 4px 26px; border-left:3px solid var(--dorado);
  font-family:var(--serif); font-size:19px; line-height:1.36; color:#FCFAF3;
  font-variation-settings:"opsz" 40,"wght" 500,"SOFT" 14;}

/* ── Ciclo ── */
.ciclo{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(30px,4.4vw,60px); align-items:center;}
.rueda svg{display:block; width:100%; height:auto;}
.etapa{cursor:pointer;}
.etapa circle.base{fill:var(--superficie); stroke:var(--linea-fuerte); stroke-width:1.6; transition:fill .3s, stroke .3s;}
.etapa:hover circle.base,.etapa[aria-selected="true"] circle.base{fill:var(--hoja); stroke:var(--bosque);}
.etapa text{font-family:var(--sans); font-size:12px; font-weight:700; fill:var(--tinta-suave); transition:fill .3s;}
.etapa:hover text,.etapa[aria-selected="true"] text{fill:var(--bosque);}
.etapa .glifo{color:var(--hoja); transition:color .3s;}
.etapa:hover .glifo,.etapa[aria-selected="true"] .glifo{color:#FCFAF3;}
.ficha{background:var(--superficie); border:1px solid var(--linea); border-left:4px solid var(--dorado);
  border-radius:0 var(--r) var(--r) 0; padding:clamp(26px,3.4vw,38px); min-height:240px;}
.ficha .paso-n{font-family:var(--mono); font-size:13px; letter-spacing:0; color:var(--hoja); font-weight:700; margin-bottom:10px;}
.ficha h3{font-size:22px; margin:0 0 12px;}
.ficha p{margin:0; font-size:16.5px; line-height:1.68; color:var(--tinta-suave);}
.suave-in{animation:aparecer .4s var(--ease);}
@keyframes aparecer{from{opacity:0; transform:translateY(9px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.suave-in{animation:none;}}
.etapas-mov{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.etapas-mov li{background:var(--superficie); border:1px solid var(--linea); border-left:4px solid var(--dorado);
  border-radius:0 12px 12px 0; padding:20px 22px;}
.etapas-mov .cab{display:flex; align-items:center; gap:13px; margin-bottom:8px;}
.etapas-mov .n{width:32px; height:32px; border-radius:50%; background:var(--hoja); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14.5px; flex-shrink:0;}
.etapas-mov h3{font-size:19px; margin:0;}
.etapas-mov p{margin:0; font-size:16px; line-height:1.62; color:var(--tinta-suave);}

/* ── Sostenibilidad ── */
.sost{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:16px;
  margin-bottom:clamp(34px,4.4vw,52px);}
.sost-item{display:flex; gap:16px; align-items:flex-start; padding:22px 24px;
  background:var(--superficie); border:1px solid var(--linea); border-radius:13px;}
.sost-item svg{flex-shrink:0; color:var(--hoja); margin-top:1px;}
.sost-item b{display:block; font-family:var(--serif); font-size:18px; color:var(--bosque);
  font-variation-settings:"opsz" 24,"wght" 600; margin-bottom:4px;}
.sost-item span{font-size:15.5px; line-height:1.55; color:var(--tinta-suave);}
.iso{background:var(--bosque); border-radius:var(--r); padding:clamp(20px,3vw,34px); overflow:hidden;}
.iso svg{display:block; width:100%; height:auto;}
.declara{background:var(--bosque); color:#FCFAF3; border-radius:var(--r);
  padding:clamp(28px,3.4vw,40px); margin-top:clamp(28px,3.6vw,42px); display:flex; gap:22px; align-items:flex-start;}
.declara svg{flex-shrink:0; color:var(--dorado-vivo); margin-top:2px;}
.declara p{margin:0; font-family:var(--serif); font-size:19px; line-height:1.34;
  font-variation-settings:"opsz" 40,"wght" 500;}

/* ── Mundo ── */
.mundo{background:rgba(255,253,246,.06); border:1px solid rgba(165,194,142,.3);
  border-radius:var(--r); padding:clamp(22px,3vw,36px);}
.mundo svg{display:block; width:100%; height:auto;}
.etiquetas{display:flex; gap:11px; flex-wrap:wrap; margin-top:26px;}
.etiquetas span{border:1.5px solid rgba(165,194,142,.5); color:var(--verde-claro);
  border-radius:999px; padding:10px 20px; font-size:14.5px; font-weight:600;}

/* ── Comunidad ── */
.comunidad-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(28px,4vw,56px); align-items:center;}
.cita-com{margin:0 0 22px; padding-left:26px; border-left:3px solid var(--dorado);
  font-family:var(--serif); font-size:21px; line-height:1.26; color:var(--bosque);
  font-variation-settings:"opsz" 60,"wght" 500,"SOFT" 16;}

/* ── Recursos ── */
.recurso{display:flex; flex-direction:column; background:var(--superficie); border:1px solid var(--linea);
  border-radius:var(--r); padding:clamp(26px,3vw,34px); color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;}
.recurso:hover{transform:translateY(-4px); box-shadow:0 28px 54px -34px rgba(32,33,29,.45); border-color:var(--verde-claro);}
.recurso .ico{width:42px; height:42px; color:var(--hoja); margin-bottom:18px;}
.recurso h3{font-size:21px; margin:0 0 10px;}
.recurso p{margin:0 0 20px; font-size:16px; line-height:1.62; color:var(--tinta-suave); flex:1;}
.recurso .ir{font-size:15px; font-weight:700; color:var(--hoja); display:inline-flex; gap:8px; align-items:center;}
.recurso:hover .ir em{transform:translateX(4px);}
.recurso .ir em{font-style:normal; transition:transform .25s var(--ease);}

/* ── Contacto ── */
.datos-contacto{list-style:none; margin:34px 0 12px; padding:0; display:grid; gap:18px;}
.datos-contacto li{display:flex; gap:16px; align-items:flex-start;}
.datos-contacto svg{flex-shrink:0; color:var(--dorado-vivo); margin-top:3px;}
.datos-contacto .et{display:block; font-size:12px; letter-spacing:0; text-transform:uppercase;
  color:var(--verde-claro); font-weight:700; margin-bottom:3px;}
.datos-contacto a,.datos-contacto .val{color:#FCFAF3; font-size:17px; font-weight:600;}
.datos-contacto a:hover{color:var(--dorado-vivo);}
.redes-inline{display:flex; gap:16px; flex-wrap:wrap;}
.redes-inline a{font-size:15.5px; border-bottom:1px solid rgba(201,165,90,.5);}
.editable{font-size:13.5px; color:rgba(240,236,222,.66); margin:16px 0 0; font-style:italic;}
.form{background:rgba(255,253,246,.07); border:1px solid rgba(165,194,142,.32);
  border-radius:var(--r); padding:clamp(26px,3.6vw,42px);}
.form-tit{font-family:var(--serif); font-size:25px; color:#FCFAF3; margin:0 0 22px;
  font-variation-settings:"opsz" 40,"wght" 600;}
.campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:20px;}
.campo{display:flex; flex-direction:column; gap:9px;}
.campo.ancho{grid-column:1/-1;}
.campo label{font-size:13px; letter-spacing:0; text-transform:uppercase; font-weight:700; color:var(--verde-claro);}
.campo input,.campo select,.campo textarea{font-family:var(--sans); font-size:16.5px; color:#FCFAF3;
  background:rgba(19,32,12,.6); border:1.5px solid rgba(165,194,142,.4); border-radius:10px;
  padding:15px 17px; transition:border-color .25s, background .25s;}
.campo textarea{resize:vertical; min-height:130px;}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--dorado); background:rgba(19,32,12,.82); outline:none;}
.campo select option{background:var(--bosque); color:#FCFAF3;}
.enviar{margin-top:28px; width:100%; font-size:17.5px; padding:19px 30px;}
.confianza{margin:16px 0 0; font-size:15px; color:var(--verde-claro); text-align:center; font-weight:600;}
.exito{display:none; background:rgba(165,194,142,.16); border:1.5px solid var(--verde-claro);
  border-radius:11px; padding:17px 20px; margin-top:20px; font-size:15.5px; color:#FCFAF3;}
.exito.ver{display:block; animation:aparecer .4s var(--ease);}
.form .casilla{display:flex; align-items:flex-start; gap:12px; margin-top:24px; cursor:pointer;}
.form .casilla input{flex:0 0 22px; width:22px; height:22px; margin:2px 0 0; accent-color:var(--dorado);}

/* ── Footer ── */
footer{background:var(--carbon); color:rgba(244,240,228,.82); padding:clamp(44px,5.5vw,70px) 0 34px;}
.aliados{padding-bottom:38px; margin-bottom:38px; border-bottom:1px solid rgba(244,240,228,.14);}
.al-tit{font-size:12.5px; letter-spacing:0; text-transform:uppercase; color:var(--verde-claro);
  font-weight:700; margin:0 0 20px;}
.al-fila{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
.al-slot{border:1.5px dashed rgba(244,240,228,.24); border-radius:11px; height:82px;
  display:flex; align-items:center; justify-content:center;}
.al-slot span{font-size:12.5px; letter-spacing:0; text-transform:uppercase; color:rgba(244,240,228,.42);}
.al-nota{font-size:13.5px; color:rgba(244,240,228,.5); margin:16px 0 0; font-style:italic;}
.f-grid{display:grid; grid-template-columns:minmax(230px,1.5fr) repeat(auto-fit,minmax(160px,1fr));
  gap:38px; padding-bottom:34px; border-bottom:1px solid rgba(244,240,228,.14);}
@media(max-width:600px){.f-grid{grid-template-columns:minmax(0,1fr);}}
footer h4{font-size:12.5px; letter-spacing:0; text-transform:uppercase; color:var(--verde-claro);
  font-family:var(--sans); font-weight:700; margin:0 0 16px;}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
footer a{color:rgba(244,240,228,.82); font-size:15.5px; transition:color .25s;}
footer a:hover{color:var(--dorado-vivo);}
footer .marca-pie{display:flex; align-items:center; gap:13px; margin-bottom:16px;}
footer .marca-pie img{display:block; height:44px; width:auto;}
footer .marca-pie .txt{font-family:var(--serif); font-size:22px; color:#FCFAF3;
  font-variation-settings:"wght" 700,"opsz" 20; letter-spacing:0;}
footer .lema{font-size:15.5px; line-height:1.62; max-width:36ch; margin:0;}
.redes{display:flex; gap:12px; margin-top:22px;}
.redes a{width:40px; height:40px; border:1.5px solid rgba(244,240,228,.24); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:border-color .25s, color .25s;}
.redes a:hover{border-color:var(--dorado);}
.f-legal{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:26px; font-size:14px; color:rgba(244,240,228,.62);}
.f-links{display:flex; gap:20px; flex-wrap:wrap;}
.f-links a{font-size:14px; color:rgba(244,240,228,.62);}

/* Campo trampa para robots: invisible para personas, fuera del orden de tabulación. */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}


/* ══ Componentes de páginas internas ══════════════════════
   Estaban repetidos en cada página; viven aquí para que no se
   desincronicen. Los ajustes propios de cada hero siguen en su página. */
nav.principal a.activo{color:var(--bosque); font-weight:700;}
nav.principal a.activo::after{transform:scaleX(1); background:var(--hoja);}
.hero-int .escena{position:absolute; inset:0;}
.hero-int .escena svg{width:100%; height:100%; display:block;}
.hero-int .wrap{position:relative; z-index:3; width:100%;}
.miga{display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(240,236,222,.78); margin:0 0 22px;}
.miga a{color:rgba(240,236,222,.78); border-bottom:1px solid rgba(201,165,90,.5);}
.miga a:hover{color:var(--dorado-vivo);}
.miga span[aria-current]{color:var(--dorado-vivo); font-weight:600;}
.hero-int .acciones{display:flex; gap:14px; flex-wrap:wrap;}
.btn-bosque:hover{background:#2E4622; transform:translateY(-2px);}
/* ── Acordeón ── */
.acordeon{display:grid; gap:12px; max-width:88ch;}
.acordeon details[open]{border-color:var(--verde-claro);}
.acordeon summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:22px 26px; font-family:var(--serif); font-size:17.5px;
  color:var(--bosque); font-variation-settings:"opsz" 30,"wght" 600;}
.acordeon summary::-webkit-details-marker{display:none;}
.acordeon summary:hover{background:rgba(165,194,142,.12);}
.acordeon summary i{position:relative; width:20px; height:20px; flex-shrink:0;}
.acordeon summary i::before{left:0; top:9px; width:20px; height:2.4px;}
.acordeon summary i::after{left:9px; top:0; width:2.4px; height:20px;}
.acordeon details[open] summary i::after{transform:scaleY(0);}
.acordeon .resp{padding:0 26px 24px;}
.acordeon .resp p{margin:0; font-size:16.5px; line-height:1.68; color:var(--tinta-suave); max-width:72ch;}
.final-caja{max-width:74ch; margin:0 auto;}
.final-caja .eyebrow{justify-content:center;}
.final-caja h2.titulo{max-width:none; margin-left:auto; margin-right:auto;}
.final-caja .entradilla{margin-left:auto; margin-right:auto;}
.final-caja .acciones{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:32px;}