/* ADEP portada · CSS extraido de index.html (R5, 2026-09-23).
   El CSS critico de la primera pantalla sigue incrustado en index.html. */

/* ===== adep-global ===== */

/* ============================================================
   ADEP "Energia Tipografica" — Editorial Brutalista Suave
   Inyectar en <head> DESPUES de los estilos base para ganar
   la cascada sin tocar los bloques. Token-first absoluto.
   Archivo "Expanded" se simula con font-stretch (eje width del
   variable font) -> una sola familia, cero coste de carga extra.
   ============================================================ */

/* ---------- 1. TOKENS: extiende las vars existentes ---------- */
:root{
  /* Los estilos base ya definen --brand --accent --fondo --tinta.
     Los re-anclamos a la paleta ADEP por si vienen genericos. */
  --brand:#1f5d3a;                 /* verde quirurgico (rayo, reglas, numeros, fill CTA) */
  --accent:#54b435;                /* verde hover/pressed, estados */
  --fondo:#f4efe4;                 /* CREMA calido — plancha dominante */
  --tinta:#0b1410;                 /* casi-negro verdoso — body sobre crema */

  /* derivados ADEP (no hardcodear en bloques: usar estas vars) */
  --crema:var(--fondo);
  --bosque:#0e2419;                /* plancha oscura para momentos emocionales */
  --crema-2:color-mix(in srgb, var(--fondo) 92%, var(--tinta));
  --linea:color-mix(in srgb, var(--tinta) 14%, transparent);
  --linea-bosque:color-mix(in srgb, #ffffff 18%, transparent);

  /* CTA blindado (injerto Dir 3) */
  --cta-bg:var(--brand);
  --cta-fg:#f4efe4;                /* texto crema sobre verde solido = AA */
  --cta-bg-hover:var(--accent);

  /* duotono fotografico (injerto Dir 2) */
  --duotone-sombra:var(--bosque);
  --duotone-luz:var(--fondo);

  /* tipografia — resuelve el bloqueante (system-ui = boilerplate) */
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;

  /* ritmo / escala fluida */
  --col:minmax(0,1fr);
  --gutter:clamp(16px, 2.4vw, 32px);
  --bleed:clamp(20px, 5vw, 88px);
  --sp-section:clamp(64px, 9vw, 144px);
  --measure:62ch;
  --fs-mega:clamp(2.75rem, 8.5vw, 8.5rem);
  --fs-h2:clamp(1.9rem, 4.6vw, 3.6rem);
  --fs-h3:clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-body:clamp(1rem, 1.05vw, 1.125rem);
  --fs-small:0.85rem;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. BASE TIPOGRAFICA ---------- */
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--tinta);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.adep-mega{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.96;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
h1,.adep-mega{
  font-size:var(--fs-mega);
  font-weight:900;
  font-stretch:125%;            /* Archivo Expanded via eje width */
  letter-spacing:-0.035em;
}
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); letter-spacing:-0.01em; }
p,li{ max-inline-size:var(--measure); }
a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:.08em; }

/* numeracion editorial 01·02·03 — Archivo Condensed simulado */
.adep-num,[data-adep="num"]{
  font-family:var(--font-display);
  font-weight:700;
  font-stretch:75%;
  font-variant-numeric:tabular-nums;
  color:var(--brand);
  letter-spacing:.02em;
}
/* cifras de transparencia — tabular, AA en tinta no en verde */
.adep-stat,[data-adep="stat"]{
  font-family:var(--font-display);
  font-weight:800;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-0.02em;
}

/* ---------- 3. RITMO DE SECCION ---------- */
section, [data-adep-section]{
  padding-block:var(--sp-section);
  position:relative;
}
.adep-wrap{
  width:min(100% - var(--bleed)*2, 1320px);
  margin-inline:auto;
}

/* ---------- 4. NAV refinada ---------- */
header nav, .adep-nav{
  display:flex; align-items:center; gap:clamp(16px,2vw,32px);
  font-family:var(--font-display);
  font-weight:600; font-stretch:90%;
  font-size:.95rem; letter-spacing:.01em;
  backdrop-filter:saturate(1.1) blur(8px);
}
.adep-nav a{ text-decoration:none; opacity:.8; transition:opacity .2s var(--ease); }
.adep-nav a:hover{ opacity:1; }

/* Donar en la nav = CTA solido, nunca condicionado al reveal */
.adep-nav .adep-cta, .adep-nav [data-cta], a[href*="dona" i].adep-cta{
  margin-inline-start:auto;
}

/* ---------- 5. BOTONES / CTA (blindaje Dir 3) ---------- */
.adep-cta, [data-cta], a.btn-donar, button.btn-donar{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-weight:700; font-stretch:100%;
  font-size:1rem; letter-spacing:.005em; line-height:1;
  min-block-size:44px; padding:.85em 1.5em;     /* area tactil >=44px */
  border:0; border-radius:2px; cursor:pointer;
  text-decoration:none;
  color:var(--cta-fg); background:var(--cta-bg);
  transition:background .2s var(--ease), transform .12s var(--ease);
}
.adep-cta::before, [data-cta]::before{               /* rayo glifo en el CTA */
  content:""; width:.6em; height:1em; flex:0 0 auto;
  background:var(--cta-fg);
  clip-path:polygon(58% 0,12% 56%,46% 56%,30% 100%,88% 40%,52% 40%);
}
.adep-cta:hover, [data-cta]:hover{ background:var(--cta-bg-hover); }
.adep-cta:active, [data-cta]:active{ transform:translateY(1px); }

/* secundario / ghost */
.adep-cta--ghost{
  background:transparent; color:var(--brand);
  box-shadow:inset 0 0 0 2px var(--brand);
}
.adep-cta--ghost::before{ background:var(--brand); }
.adep-cta--ghost:hover{ background:color-mix(in srgb,var(--brand) 10%,transparent); }

/* microcopy de confianza junto al CTA */
.adep-cta-trust{
  font-size:var(--fs-small); line-height:1.4; color:var(--tinta); opacity:.7;
  max-inline-size:34ch;
}

/* CTA sticky discreto (movil, scroll largo) */
.adep-cta-sticky{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:60;
  display:none; justify-content:center; padding:.6rem var(--bleed);
  background:color-mix(in srgb,var(--fondo) 88%, transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);
}
@media (max-width:760px){ .adep-cta-sticky{ display:flex; } }

/* ---------- 6. FIRMAS ---------- */
/* 6a. divider-rayo: marca cada cambio de plancha */
.adep-rayo, [data-adep="rayo"]{
  display:block; height:clamp(48px,7vw,96px); margin-block:0;
  color:var(--brand);<span class="counter">760px00</span>
}
.adep-rayo::before{
  content:""; display:block; height:100%; width:100%;
  background:currentColor;
  -webkit-mask:var(--rayo-svg) center/auto 100% no-repeat;
          mask:var(--rayo-svg) center/auto 100% no-repeat;
}
:root{
  --rayo-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100'%3E%3Cpath d='M23 0 5 56h14L12 100l24-62H21z' fill='%760px0000'/%3E%3C/svg%3E");
}

/* 6b. grain sutil — textura editorial, no ruido */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 6c. cursor con rayo (pointers finos, respeta touch) */
@media (hover:hover) and (pointer:fine){
  .adep-cta, [data-cta], a[href]{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 40 100'%3E%3Cpath d='M23 0 5 56h14L12 100l24-62H21z' fill='%231f5d3a'/%3E%3C/svg%3E") 6 2, pointer;
  }
}

/* ---------- 7. DUOTONO fotografico (injerto Dir 2) ---------- */
/* fallback CSS robusto: grayscale + multiply sobre capa bosque */
.adep-duotone, [data-adep="duotone"]{ position:relative; overflow:hidden; isolation:isolate; }
.adep-duotone img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05) brightness(1.02);
  mix-blend-mode:multiply;
}
.adep-duotone::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--duotone-luz); }
.adep-duotone::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--duotone-sombra); mix-blend-mode:screen; opacity:.85;
}
/* refuerzo SVG si el navegador lo soporta (precision del duotono) */
@supports (filter:url(#adep-duo)){
  .adep-duotone img{ filter:url(#adep-duo); mix-blend-mode:normal; }
  .adep-duotone::after{ display:none; }
}

/* ---------- 8. ACCESIBILIDAD AA (injerto Dir 3) ---------- */
:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:1px;
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* --- ENFORCE tipografia sobre el CSS que los bloques inyectan en runtime
   (va despues del mio en el DOM): necesita !important para ganar --- */
[class^="adep-"],[class*=" adep-"],body,p,li,a,button,input,select,textarea{
  font-family:var(--font-body) !important;
}
h1,h2,h3,h4,.adep-mega,
[class*="titulo"],[class*="title"],[class*="kicker"],[class*="mega"],[class*="heading"],
[class*="num"],[data-adep="num"],[data-adep="stat"]{
  font-family:var(--font-display) !important;
}


/* ============================================================
   ADEP — PAQUETE DE ELEVACION (anadir al FINAL de sitio.estilos.css)
   Todo ataca selectores .adep-* reales con !important porque el CSS
   de bloques se inyecta en runtime DESPUES de este style. Token-first.
   ============================================================ */

/* ---------- A. MEDIDA HORIZONTAL: mata el aire lateral muerto ---------- */
/* el host de cada bloque recibe ancho maximo editorial en vez de estirarse */
.bloque-host{
  width:min(100% - var(--bleed)*2, 1320px) !important;
  margin-inline:auto !important;
}
/* bloques tipograficos: ancho de lectura mas estrecho (no columnas gigantes) */
.adep-hero__inner,.adep-svi,.adep-reveal,.adep-contador,
.adep-marquee,.adep-htrack__sticky{
  width:min(100%, 1180px) !important;
  margin-inline:auto !important;
}
/* columnas: reparto FIJO en anchas (no auto-fit 1fr que deja huecos) */
@media (min-width:1100px){
  .adep-reveal--cards{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .adep-contador{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:clamp(20px,3vw,40px) !important;
  }
}
/* el fallback SEO (ul auto-fit) tambien se limita para no estirar antes de montar */
.bloque-host>ul{max-width:1180px !important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important}

/* ---------- B. RITMO VERTICAL CONSOLIDADO: una sola fuente ---------- */
/* neutraliza la triple cuenta de padding. cadencia respira/comprime por plancha */
section.bloque--flujo{padding-block:clamp(56px,7vw,112px) !important}
section.bloque--flujo>.bloque-host{padding-block:0 !important}
/* planchas bosque algo mas compactas, crema con algo mas de aire = cadencia */
section[data-bloque="htrack"],
section[data-bloque="galeria-scroll-distorsion"]{
  padding-block:clamp(48px,6vw,96px) !important;
}

/* ---------- D. DIVISOR RAYO: solo en cambios reales de plancha ---------- */
/* sello del logo al SALIR de una plancha bosque hacia crema (restraint: no en
   cada seccion). Estatico, reduced-motion no se ve afectado. ::before en el
   borde superior del bloque crema que sigue a un bloque bosque. */
section[data-bloque="contador-impacto"]::before{      /* tras galeria/viaje (bosque) */
  content:"";display:block;position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  width:clamp(34px,5vw,60px);height:clamp(40px,6vw,80px);
  -webkit-mask:var(--rayo-svg) center/auto 100% no-repeat;
          mask:var(--rayo-svg) center/auto 100% no-repeat;
  background:var(--brand);
  opacity:.9;pointer-events:none;
}
/* micro-solape: mata la costura del corte bosque->crema */
section[data-bloque="contador-impacto"]{margin-top:-4px}

/* ---------- E. CTA BLINDADO: el boton de CONVERTIR luce la marca ---------- */
/* hero + selector-valor-impacto reciben fill verde marca, radio editorial 2px,
   texto crema AA, y el glifo rayo. Gana por !important (orden runtime). */
.adep-hero__cta,.adep-svi__cta{
  background:var(--cta-bg) !important;
  color:var(--cta-fg) !important;
  border-radius:2px !important;
  font-family:var(--font-display) !important;
  font-weight:700 !important;
  min-block-size:44px !important;        /* area tactil AA */
  display:inline-flex !important;align-items:center !important;gap:.5em !important;
  transition:background .2s var(--ease),transform .12s var(--ease) !important;
}
.adep-hero__cta:hover,.adep-svi__cta:hover{background:var(--cta-bg-hover) !important}
.adep-hero__cta:active,.adep-svi__cta:active{transform:translateY(1px)}
.adep-hero__cta::before,.adep-svi__cta::before{
  content:"";width:.6em;height:1em;flex:0 0 auto;
  background:var(--cta-fg);
  clip-path:polygon(58% 0,12% 56%,46% 56%,30% 100%,88% 40%,52% 40%);
}
/* garantiza AA del texto del CTA del selector via su propia var de tinte */
.adep-svi{--svi-cta-tinta:var(--cta-fg)}
/* el CTA de la nav tambien adopta el radio editorial (coherencia de boton) */
.nav__cta{border-radius:2px !important;background:var(--brand) !important;color:var(--cta-fg) !important}

/* ---------- F. JERARQUIA TIPOGRAFICA: mega-display + numeracion editorial ---------- */
/* hero a mega-display (Archivo Expanded simulado via font-stretch) */
.adep-hero__titulo{
  font-size:var(--fs-mega) !important;
  font-stretch:125% !important;
  font-weight:900 !important;
  letter-spacing:-.035em !important;
  line-height:.96 !important;
}
/* htrack YA pinta .adep-htrack__idx (01/02/03): NO anadir counter, solo estilarlo */
.adep-htrack__idx{
  font-family:var(--font-display) !important;
  font-weight:700 !important;font-stretch:75% !important;
  font-variant-numeric:tabular-nums !important;
  color:color-mix(in srgb,var(--accent) 70%,#fff) !important; /* sobre bosque */
  letter-spacing:.02em !important;
}
/* reveal cards SIN numeracion propia -> se la damos por counter (restraint:
   solo en transparencia/contribuye/contacto, no en todo) */
.adep-reveal--cards{counter-reset:adepcard}
.adep-reveal__card{counter-increment:adepcard;position:relative}
.adep-reveal__card::before{
  content:counter(adepcard,decimal-leading-zero);
  font-family:var(--font-display);font-weight:700;font-stretch:75%;
  font-variant-numeric:tabular-nums;color:var(--brand);
  letter-spacing:.02em;font-size:.95rem;display:block;margin-bottom:.4em;opacity:.85;
}
/* cifras de impacto: tabulares, empaque editorial */
.adep-contador__cifra{
  font-family:var(--font-display) !important;
  font-weight:800 !important;font-stretch:100% !important;
  font-variant-numeric:tabular-nums lining-nums !important;
  font-feature-settings:"tnum" 1 !important;
  letter-spacing:-.02em !important;
}

/* ---------- G. DUOTONO VERDE en fotos clave (CSS puro, sin SVG filter) ---------- */
/* hero y galeria: grayscale + capa bosque/crema. Restraint: solo personas/aulas.
   No depende de <svg id=adep-duo> (no lo emite ningun bloque), funciona standalone. */
.adep-hero__media{position:relative;isolation:isolate}
.adep-hero__media img{
  filter:grayscale(1) contrast(1.04) brightness(1.03) !important;
}
.adep-hero__media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--bosque);mix-blend-mode:screen;opacity:.78;
}
.adep-galeria,.adep-galeria__item{isolation:isolate}
.adep-galeria img,.adep-galeria canvas{
  filter:grayscale(.92) contrast(1.04) brightness(1.02) !important;
}
/* el verde de marca tinta las sombras sin deshumanizar las caras (opacidad baja) */
.adep-galeria__item::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--brand);mix-blend-mode:screen;opacity:.5;
}

/* ---------- H. ATERRIZAJE DE ANCLAS: titulo justo bajo la nav fija ---------- */
section[id],.bloque[id]{scroll-margin-top:clamp(64px,10vh,96px) !important}

/* ---------- I. NAV FEATURES: progreso, volver-arriba, skip-link ---------- */
/* barra de progreso de scroll (3px, accent sobre track linea) */
.adep-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  transform-origin:0 50%;transform:scaleX(0);
  background:var(--accent);z-index:1001;pointer-events:none;
  will-change:transform;
}
/* boton volver-arriba: aparece tras pasar el hero */
.adep-top{
  position:fixed;right:clamp(16px,4vw,32px);bottom:clamp(16px,4vw,32px);
  width:44px;height:44px;border-radius:999px;border:0;
  display:grid;place-items:center;cursor:pointer;
  background:var(--brand);color:var(--cta-fg);font-size:18px;line-height:1;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  z-index:55;
}
.adep-top.is-visible{opacity:1;pointer-events:auto;transform:none}
@media (max-width:760px){.adep-top{bottom:calc(56px + clamp(16px,4vw,32px))}} /* sobre el sticky de conversion */
/* skip-link 'saltar al contenido' */
.adep-skip{
  position:fixed;top:8px;left:8px;z-index:1002;
  padding:.6em 1em;background:var(--brand);color:var(--cta-fg);
  border-radius:2px;text-decoration:none;font-family:var(--font-display);font-weight:700;
  transform:translateY(-150%);transition:transform .2s var(--ease);
}
.adep-skip:focus{transform:none}
/* reduced-motion ya neutraliza transitions en la seccion 8 del CSS base */

/* ---------- G2. galeria duotono: fix selector real (la galeria NO usa .adep-galeria, emite canvas + .adep-galeria-sd__seo) ---------- */
section[data-bloque="galeria-scroll-distorsion"]{isolation:isolate}
section[data-bloque="galeria-scroll-distorsion"] canvas,
section[data-bloque="galeria-scroll-distorsion"] img{
  filter:grayscale(.9) contrast(1.04) brightness(1.02) !important;
}
section[data-bloque="galeria-scroll-distorsion"]::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--brand);mix-blend-mode:screen;opacity:.3;
}


/* ============================================================
   ADEP — POLISH DONACIONES + CARDS (apartados terminados)
   selectores reales verificados (aria-pressed / is-sel / __card)
   ============================================================ */

/* ---------- A. Calculadora de donacion (#donar / .adep-svi--tarjetas) ---------- */
.adep-svi{--svi-acento:var(--brand);--svi-cta-tinta:var(--cta-fg)}
#donar .adep-svi__titulo{
  font-family:var(--font-display)!important;font-weight:800!important;
  font-size:clamp(1.6rem,3vw,2.5rem)!important;letter-spacing:-.02em!important;
  line-height:1.05!important;max-width:20ch;margin-bottom:clamp(22px,3vw,38px)!important;
}
.adep-svi__opciones{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(14px,1.6vw,22px)!important;list-style:none!important;padding:0!important;margin:0!important;
}
@media(max-width:760px){.adep-svi__opciones{grid-template-columns:1fr!important}}
.adep-svi__opcion{
  display:flex!important;flex-direction:column!important;gap:.55em!important;align-items:flex-start!important;
  padding:clamp(18px,2vw,26px)!important;border-radius:8px!important;text-align:left!important;
  background:color-mix(in srgb,var(--fondo) 60%,#fff)!important;
  border:1.5px solid var(--linea)!important;cursor:pointer!important;width:100%!important;
  transition:border-color .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease)!important;
  position:relative!important;overflow:hidden!important;
}
.adep-svi__opcion:hover{
  transform:translateY(-3px)!important;
  border-color:color-mix(in srgb,var(--brand) 55%,var(--linea))!important;
  box-shadow:0 12px 32px -18px rgba(11,20,16,.4)!important;
}
.adep-svi__opcion[aria-pressed="true"]{
  border-color:var(--brand)!important;background:color-mix(in srgb,var(--brand) 7%,#fff)!important;
}
.adep-svi__opcion[aria-pressed="true"]::before{
  content:""!important;position:absolute!important;top:0;left:0;right:0;height:3px!important;background:var(--brand)!important;
}
.adep-svi__valor{
  font-family:var(--font-display)!important;font-weight:900!important;
  font-size:clamp(1.8rem,3.2vw,2.5rem)!important;line-height:1!important;
  letter-spacing:-.03em!important;color:var(--brand)!important;
}
.adep-svi__beneficio-op{
  font-size:.95rem!important;line-height:1.45!important;
  color:color-mix(in srgb,var(--tinta) 78%,transparent)!important;
}
.adep-svi__salida{
  margin-top:clamp(20px,2.4vw,32px)!important;font-size:1.02rem!important;line-height:1.5!important;
  padding:clamp(14px,1.6vw,20px)!important;border-radius:8px!important;
  background:color-mix(in srgb,var(--brand) 6%,transparent)!important;
  border-left:3px solid var(--brand)!important;
}
.adep-svi__custom{margin-top:clamp(14px,1.6vw,20px)!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:.6em!important}
.adep-svi__custom-input{
  padding:.7em .9em!important;border:1.5px solid var(--linea)!important;border-radius:5px!important;
  font-size:1rem!important;background:#fff!important;min-width:8em!important;
}
.adep-svi__custom-input:focus{outline:2px solid var(--brand)!important;outline-offset:1px!important;border-color:var(--brand)!important}
.adep-svi__cta{margin-top:clamp(22px,2.6vw,32px)!important;padding:.95em 2em!important;font-size:1.05rem!important}

/* ---------- B. Panel de donacion (modal .adep-pc, estado .is-sel) ---------- */
.adep-pc__panel{
  border-radius:12px!important;padding:clamp(26px,3vw,42px)!important;
  max-width:min(92vw,520px)!important;background:var(--fondo)!important;position:relative!important;
  box-shadow:0 40px 120px -40px rgba(11,20,16,.6)!important;
}
.adep-pc__titulo{
  font-family:var(--font-display)!important;font-weight:800!important;
  font-size:clamp(1.4rem,2.6vw,2rem)!important;letter-spacing:-.02em!important;margin:0 0 .5em!important;
}
.adep-pc__importes{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:.6em!important;margin:1em 0!important;list-style:none!important;padding:0!important}
.adep-pc__importe{
  padding:.85em .4em!important;border:1.5px solid var(--linea)!important;border-radius:7px!important;
  background:#fff!important;font-family:var(--font-display)!important;font-weight:700!important;
  cursor:pointer!important;transition:all .15s var(--ease)!important;
}
.adep-pc__importe.is-sel,.adep-pc__importe[aria-pressed="true"]{
  border-color:var(--brand)!important;background:color-mix(in srgb,var(--brand) 10%,#fff)!important;color:var(--brand)!important;
}
.adep-pc__frec{display:inline-flex!important;border:1.5px solid var(--linea)!important;border-radius:999px!important;overflow:hidden!important;margin:.2em 0 1em!important}
.adep-pc__frec-opt{padding:.55em 1.3em!important;cursor:pointer!important;background:transparent!important;border:0!important;font-weight:600!important;color:var(--tinta)!important}
.adep-pc__frec-opt.is-sel,.adep-pc__frec-opt[aria-pressed="true"]{background:var(--brand)!important;color:var(--cta-fg)!important}
.adep-pc__campo,.adep-pc__grupo{margin-bottom:.85em!important}
.adep-pc__label{display:block!important;font-size:.85rem!important;font-weight:600!important;margin-bottom:.3em!important;color:color-mix(in srgb,var(--tinta) 72%,transparent)!important}
.adep-pc__input{width:100%!important;padding:.78em .9em!important;border:1.5px solid var(--linea)!important;border-radius:6px!important;font-size:1rem!important;background:#fff!important;box-sizing:border-box!important}
.adep-pc__input:focus{outline:2px solid var(--brand)!important;outline-offset:1px!important;border-color:var(--brand)!important}
.adep-pc__confirmar{
  width:100%!important;margin-top:.7em!important;padding:1em!important;font-size:1.05rem!important;
  background:var(--cta-bg)!important;color:var(--cta-fg)!important;border:0!important;border-radius:7px!important;
  font-family:var(--font-display)!important;font-weight:700!important;cursor:pointer!important;
}
.adep-pc__confirmar:hover{background:var(--cta-bg-hover)!important}
.adep-pc__nota,.adep-pc__leyenda{font-size:.8rem!important;color:color-mix(in srgb,var(--tinta) 58%,transparent)!important;margin-top:.6em!important}
.adep-pc__cerrar{position:absolute!important;top:14px!important;right:16px!important;background:none!important;border:0!important;font-size:24px!important;line-height:1!important;cursor:pointer!important;color:var(--tinta)!important}

/* ---------- C. Cards de cierre = apartados terminados (contribuye / transparencia / contacto) ---------- */
.adep-reveal__card{
  background:color-mix(in srgb,var(--fondo) 58%,#fff)!important;
  border:1px solid var(--linea)!important;border-top:3px solid var(--brand)!important;
  border-radius:10px!important;padding:clamp(24px,2.6vw,34px)!important;
  gap:.55em!important;transition:transform .2s var(--ease),box-shadow .2s var(--ease)!important;
}
.adep-reveal__card:hover{transform:translateY(-4px)!important;box-shadow:0 18px 44px -24px rgba(11,20,16,.42)!important}
.adep-reveal__card-titulo{
  font-family:var(--font-display)!important;font-weight:800!important;
  font-size:clamp(1.2rem,1.9vw,1.55rem)!important;letter-spacing:-.01em!important;line-height:1.2!important;
}
.adep-reveal__card-texto{
  font-size:1rem!important;line-height:1.55!important;
  color:color-mix(in srgb,var(--tinta) 82%,transparent)!important;opacity:1!important;
}


/* ===== FUNNEL: resumen panel + titulo logo visible ===== */
.adep-pc__resumen{margin:.2em 0 1.1em;font-family:var(--font-display);font-weight:700;color:var(--brand);font-size:1.05rem;min-height:1.3em}


/* ============================================================
   ADEP — DASHBOARD DE DONACION + CARDS CON ESTRUCTURA  (v2)
   Selectores .adep-* reales. !important: el <style> del bloque
   se inyecta en <head> DESPUES de #adep-global. Token-first.
   ============================================================ */

.adep-svi{
  --dash-panel:var(--bosque);
  --dash-panel-fg:var(--fondo);
  --dash-card-bg:color-mix(in srgb,var(--fondo) 55%,#fff);
  --dash-card-bg-sel:color-mix(in srgb,var(--brand) 8%,#fff);
  --dash-radio:14px;
  --dash-gap:clamp(16px,1.8vw,26px);
  --svi-acento:var(--brand);
  --svi-cta-tinta:var(--cta-fg);
}

/* ---------- 1. DONAR = DASHBOARD A DOS COLUMNAS ---------- */
#donar .bloque-host{align-items:stretch !important}
#donar .adep-svi{
  display:grid !important;
  gap:0 !important;
  grid-template-columns:1fr !important;
  grid-template-areas:
    "titulo"
    "impacto"
    "opciones"
    "custom"
    "cta" !important;
  align-items:start !important;
  background:transparent !important;
}
#donar .adep-svi__titulo  {grid-area:titulo}
#donar .adep-svi__salida  {grid-area:impacto}
#donar .adep-svi__opciones{grid-area:opciones}
#donar .adep-svi__custom  {grid-area:custom}
#donar .adep-svi__cta     {grid-area:cta}

@media (min-width:960px){
  #donar .adep-svi{
    grid-template-columns:minmax(300px,0.92fr) minmax(0,1.15fr) !important;
    column-gap:clamp(28px,3.4vw,56px) !important;
    row-gap:0 !important;
    grid-template-areas:
      "panel   opciones"
      "panel   custom"
      "panel   cta" !important;
  }
  #donar .adep-svi__titulo{grid-area:panel; align-self:start}
  #donar .adep-svi__salida{grid-area:panel; align-self:start}
  #donar .adep-svi{grid-auto-flow:row}
}

/* ---------- 1a. PANEL DE IMPACTO (izquierda, sticky) ---------- */
@media (min-width:960px){
  #donar .adep-svi__titulo,
  #donar .adep-svi__salida{
    position:sticky !important;
    z-index:1;
  }
  #donar .adep-svi__titulo{
    top:clamp(72px,11vh,104px) !important;
    margin:0 !important;
    padding:clamp(26px,2.6vw,38px) clamp(24px,2.4vw,34px) 0 !important;
    background:var(--dash-panel) !important;
    color:var(--dash-panel-fg) !important;
    border-radius:var(--dash-radio) var(--dash-radio) 0 0 !important;
  }
  #donar .adep-svi__salida{
    top:calc(clamp(72px,11vh,104px) + 1px) !important;
    margin:0 !important;
    align-self:start;
  }
}
#donar .adep-svi__titulo{
  font-family:var(--font-display) !important;
  font-weight:900 !important;
  font-stretch:110% !important;
  font-size:clamp(1.55rem,2.7vw,2.35rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.025em !important;
  text-wrap:balance;
  max-width:18ch;
  color:var(--dash-panel-fg) !important;
}
@media (max-width:959.98px){
  #donar .adep-svi__titulo{
    color:var(--tinta) !important;
    margin-bottom:clamp(18px,3vw,26px) !important;
    max-width:22ch;
  }
}

#donar .adep-svi__salida{
  font-size:clamp(1.05rem,1.5vw,1.35rem) !important;
  line-height:1.4 !important;
  color:var(--dash-panel-fg) !important;
  background:var(--dash-panel) !important;
  padding:clamp(16px,2vw,24px) clamp(24px,2.4vw,34px) clamp(26px,2.8vw,38px) !important;
  border:0 !important;
  border-radius:0 0 var(--dash-radio) var(--dash-radio) !important;
  min-height:0 !important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
#donar .adep-svi__salida::before{
  content:"TU IMPACTO";
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-stretch:80%;
  font-size:.7rem;
  letter-spacing:.18em;
  margin-bottom:.7em;
  color:color-mix(in srgb,var(--accent) 75%,#fff);
  opacity:.95;
}
#donar .adep-svi__salida::after{
  content:"";
  position:absolute;
  right:clamp(-10px,-1vw,-4px);
  bottom:clamp(-14px,-1.4vw,-8px);
  width:clamp(90px,11vw,150px);
  height:clamp(110px,13vw,180px);
  -webkit-mask:var(--rayo-svg) center/contain no-repeat;
          mask:var(--rayo-svg) center/contain no-repeat;
  background:color-mix(in srgb,var(--accent) 70%,#fff);
  opacity:.12;
  z-index:-1;
  pointer-events:none;
}
#donar .adep-svi__salida strong{
  color:#fff !important;
  font-weight:700 !important;
}

/* ---------- 1b. CONTROLES (derecha) ---------- */
#donar .adep-svi__opciones{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:var(--dash-gap) !important;
  list-style:none !important;margin:0 !important;padding:0 !important;
}
@media (max-width:560px){
  #donar .adep-svi__opciones{grid-template-columns:1fr !important}
}
#donar .adep-svi__opcion{
  display:flex !important;flex-direction:column !important;gap:.5em !important;
  align-items:flex-start !important;text-align:left !important;width:100% !important;
  padding:clamp(16px,1.8vw,22px) !important;
  background:var(--dash-card-bg) !important;
  border:1.5px solid var(--linea) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  cursor:pointer !important;position:relative !important;overflow:hidden !important;
  transition:border-color .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease) !important;
}
#donar .adep-svi__opcion:hover{
  transform:translateY(-3px) !important;
  border-color:color-mix(in srgb,var(--brand) 55%,var(--linea)) !important;
  box-shadow:0 14px 34px -20px rgba(11,20,16,.45) !important;
}
#donar .adep-svi__opcion[aria-pressed="true"]{
  border-color:var(--brand) !important;
  background:var(--dash-card-bg-sel) !important;
  box-shadow:inset 0 0 0 1px var(--brand) !important;
}
#donar .adep-svi__opcion[aria-pressed="true"]::before{
  content:"" !important;position:absolute !important;inset:0 0 auto 0 !important;
  height:3px !important;background:var(--brand) !important;
}
#donar .adep-svi__opcion[aria-pressed="true"]::after{
  content:"" !important;position:absolute !important;top:11px !important;right:11px !important;
  width:16px !important;height:16px !important;border-radius:50% !important;
  background:var(--brand) !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l2.8 2.8 6-6.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l2.8 2.8 6-6.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow:0 0 0 3px var(--brand);
}
#donar .adep-svi__valor{
  font-family:var(--font-display) !important;font-weight:900 !important;
  font-size:clamp(1.7rem,3vw,2.3rem) !important;line-height:1 !important;
  letter-spacing:-.03em !important;color:var(--brand) !important;
}
#donar .adep-svi__beneficio-op{
  font-size:.9rem !important;line-height:1.45 !important;opacity:1 !important;
  color:color-mix(in srgb,var(--tinta) 74%,transparent) !important;
}

#donar .adep-svi__custom{
  display:flex !important;flex-wrap:wrap !important;align-items:center !important;
  gap:.7em !important;
  margin-top:clamp(14px,1.6vw,20px) !important;
  padding-top:clamp(14px,1.6vw,20px) !important;
  border-top:1px solid var(--linea) !important;
}
#donar .adep-svi__custom-label{
  font-family:var(--font-display) !important;font-weight:600 !important;
  font-stretch:90% !important;font-size:.9rem !important;opacity:.9 !important;
  letter-spacing:.01em;
}
#donar .adep-svi__custom-input{
  flex:1 1 8em !important;min-width:8em !important;
  padding:.72em .9em !important;background:#fff !important;
  border:1.5px solid var(--linea) !important;border-radius:8px !important;
  font-size:1rem !important;
}
#donar .adep-svi__custom-input:focus{
  outline:2px solid var(--brand) !important;outline-offset:1px !important;
  border-color:var(--brand) !important;
}

#donar .adep-svi__cta{
  align-self:stretch !important;justify-content:center !important;
  margin-top:clamp(20px,2.4vw,30px) !important;
  padding:1em 2em !important;font-size:1.05rem !important;
  border-radius:10px !important;width:100% !important;
}
@media (min-width:960px){
  #donar .adep-svi__cta{justify-self:start;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  #donar .adep-svi__opcion{transition:none !important}
  #donar .adep-svi__opcion:hover{transform:none !important}
}

/* ---------- 2. CARDS DE CIERRE CON ESTRUCTURA ---------- */
.adep-reveal--cards{
  display:grid !important;
  gap:clamp(18px,2vw,28px) !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  counter-reset:adepcard;
  align-items:stretch !important;
}
@media (max-width:880px){.adep-reveal--cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:560px){.adep-reveal--cards{grid-template-columns:1fr !important}}

.adep-reveal__card{
  counter-increment:adepcard;
  position:relative !important;
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  grid-template-areas:
    "num   icono"
    "titulo titulo"
    "texto texto"
    "cta   cta" !important;
  column-gap:clamp(12px,1.4vw,18px) !important;
  row-gap:.5em !important;
  align-content:start !important;
  padding:clamp(24px,2.6vw,36px) !important;
  background:color-mix(in srgb,var(--fondo) 52%,#fff) !important;
  border:1px solid var(--linea) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease) !important;
}
.adep-reveal__card::after{
  content:"" !important;position:absolute !important;inset:0 0 auto 0 !important;height:4px !important;
  background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--accent) 80%,var(--brand))) !important;
  opacity:.85 !important;transform-origin:left !important;
  transition:opacity .25s var(--ease) !important;
}
.adep-reveal__card:hover{
  transform:translateY(-5px) !important;
  border-color:color-mix(in srgb,var(--brand) 35%,var(--linea)) !important;
  box-shadow:0 22px 50px -26px rgba(11,20,16,.5) !important;
}
.adep-reveal__card:hover::after{opacity:1 !important}

.adep-reveal__card::before{
  content:counter(adepcard,decimal-leading-zero) !important;
  grid-area:num !important;
  font-family:var(--font-display) !important;font-weight:700 !important;font-stretch:75% !important;
  font-variant-numeric:tabular-nums !important;
  font-size:clamp(1.15rem,1.5vw,1.45rem) !important;
  line-height:1 !important;letter-spacing:.02em !important;
  color:var(--brand) !important;opacity:.55 !important;
  margin:0 !important;align-self:center !important;
}
.adep-reveal__card-icono{
  grid-area:icono !important;justify-self:end !important;align-self:center !important;
  width:clamp(30px,2.6vw,40px) !important;height:clamp(30px,2.6vw,40px) !important;
  color:var(--brand) !important;margin:0 !important;opacity:.9;
}
.adep-reveal__card-icono svg{width:100% !important;height:100% !important}
.adep-reveal__card-titulo{
  grid-area:titulo !important;
  font-family:var(--font-display) !important;font-weight:800 !important;
  font-size:clamp(1.18rem,1.9vw,1.5rem) !important;
  letter-spacing:-.015em !important;line-height:1.18 !important;
  margin:.35em 0 0 !important;padding-top:.7em !important;
  border-top:1px solid var(--linea) !important;
  color:var(--tinta) !important;
}
.adep-reveal__card-texto{
  grid-area:texto !important;
  font-size:1rem !important;line-height:1.55 !important;margin:0 !important;
  opacity:1 !important;color:color-mix(in srgb,var(--tinta) 80%,transparent) !important;
  max-width:42ch;
}
.adep-reveal__card-cta{
  grid-area:cta !important;align-self:start !important;justify-self:start !important;
  margin-top:clamp(14px,1.6vw,20px) !important;
  display:inline-flex !important;align-items:center !important;gap:.45em !important;
  font-family:var(--font-display) !important;font-weight:700 !important;font-size:.95rem !important;
  text-decoration:none !important;padding:.7em 1.2em !important;border-radius:8px !important;
  color:var(--brand) !important;background:transparent !important;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,var(--linea)) !important;
  transition:background-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease) !important;
}
.adep-reveal__card-cta:hover{
  background:var(--brand) !important;color:var(--cta-fg) !important;
  box-shadow:inset 0 0 0 1.5px var(--brand) !important;filter:none !important;
}

/* ---------- 2a. CARD PRIMARIA DESTACADA (Donar, 1a de #contribuye) ---------- */
@media (min-width:881px){
  #contribuye .adep-reveal__card:first-child{
    grid-column:span 2 !important;
    grid-template-areas:
      "num    icono"
      "titulo titulo"
      "texto  cta" !important;
    grid-template-columns:auto 1fr !important;
    align-content:center !important;
    background:var(--bosque) !important;
    border-color:transparent !important;
  }
  #contribuye .adep-reveal__card:first-child .adep-reveal__card-cta{
    align-self:center !important;justify-self:end !important;margin-top:0 !important;
  }
}
#contribuye .adep-reveal__card:first-child{
  background:var(--bosque) !important;border-color:transparent !important;
}
#contribuye .adep-reveal__card:first-child::before{
  color:color-mix(in srgb,var(--accent) 78%,#fff) !important;opacity:.85 !important;
}
#contribuye .adep-reveal__card:first-child .adep-reveal__card-icono{
  color:color-mix(in srgb,var(--accent) 78%,#fff) !important;
}
#contribuye .adep-reveal__card:first-child .adep-reveal__card-titulo{
  color:var(--fondo) !important;
  border-top-color:color-mix(in srgb,#fff 18%,transparent) !important;
  font-size:clamp(1.5rem,2.6vw,2.1rem) !important;
}
#contribuye .adep-reveal__card:first-child .adep-reveal__card-texto{
  color:color-mix(in srgb,var(--fondo) 82%,transparent) !important;max-width:46ch;
}
#contribuye .adep-reveal__card:first-child .adep-reveal__card-cta{
  background:var(--accent) !important;color:var(--bosque) !important;
  box-shadow:none !important;padding:.85em 1.6em !important;font-size:1.02rem !important;
}
#contribuye .adep-reveal__card:first-child .adep-reveal__card-cta:hover{
  background:#fff !important;color:var(--bosque) !important;
}
#contribuye .adep-reveal__card:first-child::after{
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#fff)) !important;
}

@media (prefers-reduced-motion:reduce){
  .adep-reveal__card{transition:none !important}
  .adep-reveal__card:hover{transform:none !important}
}


/* ===== FIX donar dashboard: panel apilado sin solape, sin sticky ===== */
@media (min-width:960px){
  #donar .adep-svi{
    grid-template-areas:
      "titulo opciones"
      "salida custom"
      "salida cta" !important;
  }
  #donar .adep-svi__titulo{grid-area:titulo !important;position:static !important;border-radius:14px 14px 0 0 !important;padding-bottom:clamp(14px,1.6vw,20px) !important}
  #donar .adep-svi__salida{grid-area:salida !important;position:static !important;align-self:stretch !important;border-radius:0 0 14px 14px !important;top:auto !important}
}


/* ADEP CONSOLIDACION DIRECTOR — anadir al FINAL de sitio.estilos.css.
   DEROGA por cascada: cursor 6c, ritmo B, divisor-rayo D, duotono galeria G2,
   MOMENTO LOGO y FUNNEL #esencia. Va al final -> gana la cascada sobre el bloque. */

:root{
  --cur-rayo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 40 100'%3E%3Cpath d='M23 0 5 56h14L12 100l24-62H21z' fill='%231f5d3a' stroke='%23f4efe4' stroke-width='3'/%3E%3C/svg%3E") 6 2;
  --cur-rayo-bosque:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 40 100'%3E%3Cpath d='M23 0 5 56h14L12 100l24-62H21z' fill='%2354b435' stroke='%230e2419' stroke-width='3'/%3E%3C/svg%3E") 6 2;
  --cur-rayo-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 40 100'%3E%3Cpath d='M23 0 5 56h14L12 100l24-62H21z' fill='%2354b435' stroke='%23f4efe4' stroke-width='3'/%3E%3C/svg%3E") 6 2;
  counter-reset:adep-cap;
}

/* 1) CURSOR RAYO GLOBAL (queja 1) */
@media (hover:hover) and (pointer:fine){
  html,body{cursor:var(--cur-rayo), default}
  section[data-bloque="htrack"],section[data-bloque="htrack"] *,section[data-bloque="galeria-scroll-distorsion"],section[data-bloque="galeria-scroll-distorsion"] *{cursor:var(--cur-rayo-bosque), default}
  a[href],button,[role="button"],[data-cta],.adep-cta,.nav__cta,.nav__link,.adep-hero__cta,.adep-svi__cta,.adep-svi__opcion,.adep-pc__importe,.adep-pc__frec-opt,.adep-pc__confirmar,.adep-pc__cerrar,summary,label[for],select,.adep-top{cursor:var(--cur-rayo-on), pointer !important}
  input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),textarea,.adep-svi__custom-input,.adep-pc__input{cursor:text !important}
}
::selection{background:var(--accent);color:var(--bosque)}
::-moz-selection{background:var(--accent);color:var(--bosque)}
section[data-bloque="htrack"] ::selection,section[data-bloque="galeria-scroll-distorsion"] ::selection{background:color-mix(in srgb,var(--accent) 85%,#fff);color:var(--bosque)}
section[data-bloque="htrack"] :focus-visible,section[data-bloque="galeria-scroll-distorsion"] :focus-visible{outline-color:color-mix(in srgb,var(--accent) 70%,#fff)}

/* 2) PLANCHAS BOSQUE FULL-BLEED (queja 3, RAIZ) */
section[data-bloque="htrack"],section[data-bloque="galeria-scroll-distorsion"]{background:var(--bosque) !important;color:var(--fondo) !important;isolation:isolate;overflow:clip}
section[data-bloque="htrack"] > .bloque-host,section[data-bloque="galeria-scroll-distorsion"] > .bloque-host{width:100% !important;max-width:none !important;margin-inline:0 !important;background:transparent !important}
section[data-bloque="galeria-scroll-distorsion"] canvas{width:100% !important;left:0 !important;right:0 !important;background:transparent}
section[data-bloque="htrack"] .adep-htrack{width:100% !important;left:0 !important;right:0 !important;background:transparent !important}
section[data-bloque="htrack"] .adep-htrack__sticky{width:min(100% - var(--bleed)*2, 1180px);margin-inline:auto}

/* 3) RITMO VERTICAL UNICO (queja 3) — deroga ritmo B + margin:-4px de D */
section.bloque{padding-block:clamp(72px,9vw,128px) !important;margin-block:0 !important}
section[data-bloque="htrack"],section[data-bloque="galeria-scroll-distorsion"]{padding-block:0 !important}
section[data-bloque="contador-impacto"]{padding-block:clamp(80px,10vw,144px) !important}
section[id]{scroll-margin-top:clamp(64px,10vh,96px) !important}

/* 4) FUNDIDOS ENTRE PLANCHAS (queja 3) */
section[data-bloque="htrack"],section[data-bloque="galeria-scroll-distorsion"]{margin-block:-1px !important}
section[data-bloque="htrack"]::before,section[data-bloque="galeria-scroll-distorsion"]::before{content:"";position:absolute;top:0;left:0;right:0;height:clamp(60px,9vh,140px);z-index:2;pointer-events:none;background:linear-gradient(to bottom, var(--fondo) 0%, color-mix(in srgb,var(--fondo) 35%, var(--bosque)) 55%, transparent 100%)}
section[data-bloque="galeria-scroll-distorsion"]::after{content:"";position:absolute;bottom:0;left:0;right:0;height:clamp(60px,9vh,140px);z-index:2;pointer-events:none;background:linear-gradient(to top, var(--fondo) 0%, color-mix(in srgb,var(--fondo) 35%, var(--bosque)) 55%, transparent 100%)}
section[data-bloque="marquee-infinito"]{background:linear-gradient(to bottom, var(--fondo) 0%, var(--fondo) 60%, color-mix(in srgb,var(--fondo) 55%, var(--bosque)) 100%) !important}
section[data-bloque="contador-impacto"]{background:linear-gradient(to bottom, color-mix(in srgb,var(--fondo) 55%, var(--bosque)) 0%, var(--fondo) clamp(80px,10vh,150px)) !important}

/* 5) DIVISOR RAYO COHERENTE bosque->crema (queja 3) — deroga D. Usa --rayo-svg existente */
section[data-bloque="contador-impacto"]::before{content:"" !important;display:block;position:absolute;top:clamp(-24px,-2vw,-12px);left:50%;transform:translateX(-50%);z-index:6;width:clamp(34px,5vw,58px);height:clamp(44px,6.5vw,82px);-webkit-mask:var(--rayo-svg) center/auto 100% no-repeat;mask:var(--rayo-svg) center/auto 100% no-repeat;background:var(--brand);opacity:.92;pointer-events:none}

/* 6) HILO CONDUCTOR capitulos (queja 3) */
section[data-bloque="htrack"],section[data-bloque="contador-impacto"],section[data-bloque="galeria-scroll-distorsion"]{counter-increment:adep-cap}
section[data-bloque="contador-impacto"]::after{content:"CAP " counter(adep-cap,decimal-leading-zero);position:absolute;top:clamp(20px,4vh,48px);left:clamp(24px,6vw,88px);z-index:5;font-family:var(--font-display);font-weight:700;font-stretch:75%;letter-spacing:.28em;font-size:.72rem;text-transform:uppercase;color:var(--brand);opacity:.7;font-variant-numeric:tabular-nums}

/* 7) ANCHO DE LECTURA UNICO (queja 3) */
.adep-hero__sub,.adep-svi__beneficio-op,.adep-reveal__card-texto,.adep-htrack__sticky p{max-inline-size:60ch !important}
.adep-reveal--cards,.adep-svi__opciones,.adep-contador{width:min(100% - var(--bleed)*2, 1180px) !important;margin-inline:auto !important}

/* 8b) GALERIA duotono al host + texto legible (queja 4) — deroga G2 */
section[data-bloque="galeria-scroll-distorsion"] canvas,section[data-bloque="galeria-scroll-distorsion"] img{filter:grayscale(.55) contrast(1.05) brightness(.96) saturate(.9) !important}
section[data-bloque="galeria-scroll-distorsion"] > .bloque-host{position:relative;isolation:isolate}
section[data-bloque="galeria-scroll-distorsion"] > .bloque-host::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg, rgba(14,36,25,0) 30%, rgba(14,36,25,.55) 100%)}
section[data-bloque="galeria-scroll-distorsion"] .adep-galeria-sd__seo,section[data-bloque="galeria-scroll-distorsion"] h2,section[data-bloque="galeria-scroll-distorsion"] figcaption{position:relative;z-index:3;color:var(--fondo) !important;text-shadow:0 2px 24px rgba(0,0,0,.7);font-family:var(--font-display) !important;font-weight:800 !important}

/* 9) HERO titulo deja de pisar/clipear la foto (queja 4) */
@media (min-width:900px){
  .adep-hero__inner{display:grid !important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) !important;align-items:center !important;gap:clamp(32px,4.5vw,80px) !important;width:min(100% - var(--bleed)*2,1320px) !important;margin-inline:auto !important}
  .adep-hero__texto,.adep-hero__inner>div:first-child{grid-column:1;min-width:0}
  .adep-hero__media{grid-column:2;align-self:center !important;margin:0 !important;max-width:none !important}
  .adep-hero__titulo{max-inline-size:14ch !important;padding-right:clamp(8px,1.5vw,24px) !important}
}
.adep-hero__titulo{font-size:clamp(2.6rem,6.4vw,6.2rem) !important;line-height:.98 !important;overflow-wrap:break-word;hyphens:none;margin:0 !important}
.adep-hero__media{position:relative;z-index:1;overflow:hidden;border-radius:6px}
.adep-hero__media img{filter:grayscale(1) contrast(1.06) brightness(1.0) !important}
.adep-hero__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg, var(--brand) 0%, var(--bosque) 100%) !important;mix-blend-mode:screen !important;opacity:.55 !important}

/* 13) HOVER COHERENTE (microdetalle pro) */
.nav__link,.nav__cta,.adep-cta,[data-cta]{transition:opacity .2s var(--ease),color .2s var(--ease),background .2s var(--ease),transform .14s var(--ease) !important}
.nav__cta:hover{transform:translateY(-2px) !important}
.nav__link{position:relative}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--brand);transition:right .25s var(--ease)}
.nav__link:hover::after,.nav__link.is-active::after{right:0}
.adep-reveal__card,.adep-svi__opcion{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease) !important}

/* HERO TITULO no-break: resetea font-stretch (la seccion F lo dejaba en 125% y rompia
   "Reciclando"/"transformar" a mitad de palabra). overflow-wrap:normal +
   word-break:keep-all para que solo parta en espacios. */
.adep-hero__titulo{
  font-stretch:100% !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
  text-wrap:balance;
}
@media (min-width:900px){ .adep-hero__titulo{max-inline-size:15ch !important} }

/* HERO FOTO fix — deroga el grade lavado (grayscale + overlay verde screen .55).
   La foto del aula vuelve a verse natural, nitida y on-brand, llenando su columna. */
.adep-hero__media{
  position:relative !important;
  z-index:1 !important;
  overflow:hidden !important;
  isolation:isolate !important;
  width:100% !important;
  aspect-ratio:4 / 5 !important;
  border-radius:8px !important;
  box-shadow:0 18px 50px -22px rgba(11,20,16,.45) !important;
}
.adep-hero__media > .adep-hero__inner{
  display:block !important;
  width:100% !important;
  height:100% !important;
}
.adep-hero__media img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  filter:contrast(1.04) saturate(1.04) brightness(1.0) !important;
}
.adep-hero__media::after{
  background:none !important;
  mix-blend-mode:normal !important;
  opacity:0 !important;
}

/* HERO WOW v2 — Editorial crema cinematografico. Titular SIEMPRE visible
   (tinta bosque sobre crema, alto contraste). Surgical: solo hero-split. */
section[data-bloque="hero-split"]{ position:relative !important; overflow:hidden !important; isolation:isolate !important; }
/* profundidad sutil de marca en la plancha crema (sin tapar nada) */
section[data-bloque="hero-split"] > .bloque-host{ position:relative !important; isolation:isolate !important; }
section[data-bloque="hero-split"] > .bloque-host::before{
  content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;pointer-events:none !important;
  background:
    radial-gradient(70% 55% at 88% 6%, color-mix(in srgb,var(--accent) 14%,transparent) 0%, transparent 70%),
    radial-gradient(60% 50% at -5% 100%, color-mix(in srgb,var(--brand) 10%,transparent) 0%, transparent 70%) !important;
}
/* rayo de marca como gran marca de agua tras el texto (firma, no ruido) */
section[data-bloque="hero-split"] .adep-hero__texto{ position:relative !important;z-index:2 !important; }
section[data-bloque="hero-split"] .adep-hero__texto::before{
  content:"" !important;position:absolute !important;z-index:-1 !important;top:48% !important;right:2% !important;transform:translateY(-50%) !important;
  width:38% !important;height:140% !important;pointer-events:none !important;
  -webkit-mask:var(--rayo-svg) center/contain no-repeat !important; mask:var(--rayo-svg) center/contain no-repeat !important;
  background:var(--accent) !important; opacity:.10 !important;
}
/* kicker con linea + rayo */
section[data-bloque="hero-split"] .adep-hero__kicker{
  display:inline-flex !important;align-items:center !important;gap:.65em !important;
  color:var(--brand) !important;font-family:var(--font-display) !important;font-weight:700 !important;letter-spacing:.2em !important;
}
section[data-bloque="hero-split"] .adep-hero__kicker::before{ content:"" !important;width:32px !important;height:2px !important;background:var(--accent) !important;flex:0 0 auto !important; }
/* TITULAR mega, alto contraste, palabras enteras */
section[data-bloque="hero-split"] .adep-hero__titulo{
  color:var(--bosque) !important; -webkit-text-fill-color:var(--bosque) !important;
  font-family:var(--font-display) !important;font-weight:900 !important;
  font-size:clamp(2.9rem,7.6vw,7rem) !important;line-height:.9 !important;letter-spacing:-.045em !important;font-stretch:100% !important;
  overflow-wrap:normal !important;word-break:normal !important;hyphens:none !important;text-wrap:balance !important;max-inline-size:13ch !important;
  margin:0 !important;
}
section[data-bloque="hero-split"] .adep-hero__sub{ color:color-mix(in srgb,var(--tinta) 82%,transparent) !important;font-size:clamp(15px,1.35vw,19px) !important;line-height:1.6 !important;max-inline-size:46ch !important; }
section[data-bloque="hero-split"] .adep-hero__cta{ background:var(--brand) !important;color:var(--fondo) !important;box-shadow:0 16px 40px -16px color-mix(in srgb,var(--brand) 80%,transparent) !important; }
section[data-bloque="hero-split"] .adep-hero__cta:hover{ transform:translateY(-2px) !important;box-shadow:0 22px 50px -16px color-mix(in srgb,var(--brand) 90%,transparent) !important; }
/* FOTO cinematografica: marco de luz verde + ken burns sutil */
section[data-bloque="hero-split"] .adep-hero__media{
  aspect-ratio:4/5 !important;border-radius:10px !important;overflow:hidden !important;isolation:isolate !important;
  box-shadow:0 44px 100px -48px rgba(11,20,16,.65) !important;
  outline:1px solid color-mix(in srgb,var(--brand) 28%,transparent) !important;outline-offset:8px !important;
}
section[data-bloque="hero-split"] .adep-hero__media::after{
  content:"" !important;position:absolute !important;inset:0 !important;z-index:2 !important;pointer-events:none !important;border-radius:inherit !important;
  background:linear-gradient(180deg, transparent 62%, color-mix(in srgb,var(--bosque) 30%,transparent) 100%) !important;
  mix-blend-mode:multiply !important;
}
section[data-bloque="hero-split"] .adep-hero__media img{
  filter:contrast(1.05) saturate(1.05) brightness(1.0) !important;transform:scale(1.05) !important;transform-origin:60% 40% !important;
  animation:hw2-ken 20s var(--ease,ease) infinite alternate !important;
}
@keyframes hw2-ken{ from{transform:scale(1.05) translate(0,0)} to{transform:scale(1.12) translate(-1.5%,-1.2%)} }
/* entrada que TERMINA visible (sin clip-path) */
@keyframes hw2-rise{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
section[data-bloque="hero-split"] .adep-hero__kicker,
section[data-bloque="hero-split"] .adep-hero__titulo,
section[data-bloque="hero-split"] .adep-hero__sub,
section[data-bloque="hero-split"] .adep-hero__cta{ animation:hw2-rise .8s var(--ease,cubic-bezier(.22,.61,.36,1)) both !important; }
section[data-bloque="hero-split"] .adep-hero__titulo{animation-delay:.10s !important}
section[data-bloque="hero-split"] .adep-hero__sub{animation-delay:.22s !important}
section[data-bloque="hero-split"] .adep-hero__cta{animation-delay:.32s !important}
section[data-bloque="hero-split"] .adep-hero__media{ animation:hw2-rise 1s var(--ease,cubic-bezier(.22,.61,.36,1)) .14s both !important; }
@media (max-width:760px){
  section[data-bloque="hero-split"] .adep-hero__titulo{max-inline-size:16ch !important;font-size:clamp(2.5rem,10vw,3.6rem) !important}
  section[data-bloque="hero-split"] .adep-hero__texto::before{opacity:.07 !important}
}
@media (prefers-reduced-motion:reduce){
  section[data-bloque="hero-split"] .adep-hero__kicker,
  section[data-bloque="hero-split"] .adep-hero__titulo,
  section[data-bloque="hero-split"] .adep-hero__sub,
  section[data-bloque="hero-split"] .adep-hero__cta,
  section[data-bloque="hero-split"] .adep-hero__media{ animation:none !important;opacity:1 !important;transform:none !important; }
  section[data-bloque="hero-split"] .adep-hero__media img{ animation:none !important;transform:scale(1.04) !important; }
}

/* === LIMPIEZA TRANSICIONES + GALERIA (deroga fundidos sucios gris-oliva) === */
section[data-bloque="htrack"]::before,
section[data-bloque="galeria-scroll-distorsion"]::before,
section[data-bloque="galeria-scroll-distorsion"]::after{ background:none !important; }
section[data-bloque="marquee-infinito"]{ background:var(--fondo) !important; }
section[data-bloque="contador-impacto"]{ background:var(--fondo) !important; }
/* galeria: imagen mas clara y viva (deroga grayscale/brightness oscuros) */
section[data-bloque="galeria-scroll-distorsion"] canvas,
section[data-bloque="galeria-scroll-distorsion"] img{ filter:grayscale(.15) contrast(1.04) brightness(1.08) saturate(1.04) !important; }
section[data-bloque="galeria-scroll-distorsion"] > .bloque-host::after{ background:linear-gradient(180deg, rgba(14,36,25,0) 58%, rgba(14,36,25,.3) 100%) !important; }

/* ===== COHERENCIA FRONT-HALF: proporcion aurea (phi=1.618) + un organismo ===== */

/* --- HERO: split aureo texto:foto = 1.618:1, sin solape titulo/foto --- */
@media (min-width:900px){
  section[data-bloque="hero-split"] .adep-hero__inner{
    grid-template-columns:1.618fr 1fr !important;
    gap:clamp(40px,5vw,88px) !important;
  }
}
section[data-bloque="hero-split"] .adep-hero__titulo{ max-inline-size:12.5ch !important; }
/* rayo marca de agua: al borde izquierdo del texto, NO sobre la foto */
section[data-bloque="hero-split"] .adep-hero__texto::before{
  right:auto !important; left:-3% !important; width:30% !important; opacity:.08 !important;
}

/* ===== htrack: colapsa a VERTICAL compacto en movil (deroga pin/flow 80vh) ===== */
@media (max-width:760px){
  section[data-bloque="htrack"]{ height:auto !important; min-height:0 !important; }
  section[data-bloque="htrack"] .adep-htrack{ height:auto !important; min-height:0 !important; overflow:visible !important; }
  section[data-bloque="htrack"] .adep-htrack__sticky{ position:static !important; height:auto !important; min-height:0 !important; overflow:visible !important; }
  section[data-bloque="htrack"] .adep-htrack__track{ flex-direction:column !important; height:auto !important; transform:none !important; width:100% !important; gap:14px !important; }
  section[data-bloque="htrack"] .adep-htrack__panel{
    flex:0 0 auto !important; flex-basis:auto !important; width:100% !important; height:auto !important; min-height:0 !important;
    justify-content:flex-start !important; padding:clamp(22px,6vw,34px) !important;
    border-left:0 !important; border-top:1px solid rgba(255,255,255,.10) !important;
  }
  section[data-bloque="htrack"] .adep-htrack__panel:first-child{ border-top:0 !important; }
}

  
/* ===== map-inject ===== */

.viaje {
  --brand: #1f5d3a;
  --accent: #54b435;
  --fondo: #f4efe4;
  --tinta: #0b1410;
  --bosque: #0e2419;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --bleed: clamp(20px, 5vw, 76px);
  --gutter: clamp(16px, 2.4vw, 30px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ink: color-mix(in srgb, var(--fondo) 80%, var(--bosque));
  --hair: color-mix(in srgb, var(--fondo) 14%, transparent);
  --hair-soft: color-mix(in srgb, var(--fondo) 7%, transparent);
  --sea: #0c2017;
  --sea-deep: #081711;
  --land: #163a27;
  --coast: color-mix(in srgb, var(--accent) 60%, transparent);
  --rayo-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100'%3E%3Cpath d='M23 0 5 56h14L12 100l24-62H21z' fill='%700'/%3E%3C/svg%3E");
}
.viaje {
  position: relative;
  background: var(--sea);
  color: var(--fondo);
  isolation: isolate;
  overflow: clip;
}
.viaje__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(60px, 9vh, 140px);
  z-index: 9;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--fondo) 0%,
    color-mix(in srgb, var(--fondo) 30%, var(--sea)) 55%,
    transparent 100%
  );
}
.viaje__driver {
  position: relative;
  height: 340vh;
}
.viaje__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* SEA backdrop = carta nautica impresa (capa FIJA fuera de world: cero re-raster) */
.viaje__sea {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --sgx: 0px;
  --sgy: 0px;
  background:
    radial-gradient(
      120% 90% at 62% 46%,
      color-mix(in srgb, var(--brand) 26%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      135% 115% at 50% 48%,
      transparent 38%,
      color-mix(in srgb, var(--sea-deep) 70%, transparent) 82%,
      var(--sea-deep) 100%
    ),
    var(--sea);
}
.viaje__sea::before {
  content: "";
  position: absolute;
  inset: -2%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-color: color-mix(in srgb, var(--sea) 80%, #000);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .14' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-position: var(--sgx) var(--sgy);
}
.viaje__sea::after {
  content: "";
  position: absolute;
  inset: -2%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  will-change: opacity;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-position: var(--sgx) var(--sgy);
  animation: sea-breath 8s ease-in-out infinite;
  animation-play-state: paused;
}
.viaje.in-view .viaje__sea::after {
  animation-play-state: running;
} /* gate: solo respira con el mapa en pantalla */
@keyframes sea-breath {
  0%,
  100% {
    opacity: 0.035;
  }
  50% {
    opacity: 0.06;
  }
}

/* MAPA SVG */
.viaje__map {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.viaje__svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  cursor: grab;
}
.viaje__svg.is-drag {
  cursor: grabbing;
}
.world {
  transition: none;
}
.grat {
  stroke: var(--hair-soft);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.geo {
  fill: var(--land);
  stroke: var(--coast);
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* costa luminosa (carta nautica) + profundidad */
/* costa luminosa SIN filtro: el drop-shadow de cientos de paths se re-rasterizaba cada frame (scroll 32fps + idle 40fps
   porque el respiro del mar lo forzaba). Se elimina el filtro y se compensa la luminosidad con un trazo de costa mas vivo
   -> 60fps en scroll e idle, look constante. La profundidad la da el degradado estatico del mar (cero coste por frame). */
#landGroup .geo {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--accent) 74%, transparent);
  stroke-width: 1.35;
}
.viaje.cam-moving .route--draw {
  filter: none;
}
.deg {
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.15em;
  fill: color-mix(in srgb, var(--fondo) 30%, transparent);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.route--ghost {
  stroke: color-mix(in srgb, var(--fondo) 30%, transparent);
  opacity: 0.5;
  stroke-width: 1.4;
  stroke-dasharray: 1 7;
}
.route--draw {
  stroke: var(--accent);
  stroke-width: 2.4;
  filter: drop-shadow(
    0 0 7px color-mix(in srgb, var(--accent) 60%, transparent)
  );
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: calc(var(--len, 1400) - var(--len, 1400) * var(--p, 0));
}
.viaje[data-anim="off"] .route--draw {
  stroke-dashoffset: 0;
}
.rayo {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.viaje[data-anim="on"] .rayo {
  opacity: 1;
}
.rayo__glifo {
  fill: var(--accent);
  filter: drop-shadow(
    0 0 6px color-mix(in srgb, var(--accent) 75%, transparent)
  );
}
.glab {
  font-family: var(--font-body);
  font-weight: 500;
  fill: color-mix(in srgb, var(--fondo) 34%, transparent);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  pointer-events: none;
  font-size: 13px;
}
.glab--sea {
  fill: color-mix(in srgb, var(--fondo) 24%, transparent);
  font-style: italic;
  letter-spacing: 0.4em;
}

/* NODOS */
.node {
  cursor: pointer;
  outline: none;
}
.node__halo {
  fill: var(--accent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.node__pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.node__ring {
  fill: none;
  stroke: var(--fondo);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  stroke-dasharray: 3 4;
}
.node__dot {
  fill: var(--bosque);
  stroke: var(--accent);
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  transition:
    r 0.25s var(--ease),
    fill 0.25s var(--ease);
}
.node--origin .node__dot {
  stroke: var(--fondo);
}
.node:hover .node__dot,
.node:focus-visible .node__dot,
.node[data-active] .node__dot {
  fill: var(--accent);
  r: 8;
}
.node:hover .node__halo,
.node:focus-visible .node__halo,
.node[data-active] .node__halo {
  opacity: 0.18;
}
.node:focus-visible .node__ring {
  opacity: 1;
}
.node[data-active] .node__pulse {
  opacity: 1;
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
  0% {
    r: 7;
    opacity: 0.5;
  }
  70%,
  100% {
    r: 24;
    opacity: 0;
  }
}
.node__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  fill: var(--fondo);
  paint-order: stroke;
  stroke: var(--sea-deep);
  stroke-width: 4px;
  stroke-linejoin: round;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
.node__coord {
  font-family: var(--font-body);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  fill: color-mix(in srgb, var(--fondo) 70%, transparent);
  paint-order: stroke;
  stroke: var(--sea-deep);
  stroke-width: 3px;
  text-transform: uppercase;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* HUD instrumento */
.hud {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--hair);
  opacity: 0.5;
}
.corner--tl {
  top: 18px;
  left: 18px;
  border-right: 0;
  border-bottom: 0;
}
.corner--tr {
  top: 18px;
  right: 18px;
  border-left: 0;
  border-bottom: 0;
}
.corner--bl {
  bottom: 18px;
  left: 18px;
  border-right: 0;
  border-top: 0;
}
.corner--br {
  bottom: 18px;
  right: 18px;
  border-left: 0;
  border-top: 0;
}
.cap {
  position: absolute;
  top: clamp(20px, 4vh, 44px);
  left: var(--bleed);
  z-index: 5;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.28em;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 75%, #fff);
  opacity: 0.85;
}

/* CAPTIONS editoriales (izquierda) */
.caps {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(46%, 560px);
  z-index: 3;
  display: grid;
  align-content: center;
  padding: clamp(24px, 5vw, 72px) var(--bleed);
  pointer-events: none;
}
.cap-ed {
  grid-area: 1/1;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.cap-ed.is-on {
  opacity: 1;
  transform: none;
}
.viaje[data-anim="off"] .cap-ed {
  transition: none;
}
.cap-ed__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.26em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 82%, #fff);
  margin: 0 0 12px;
}
.cap-ed__coord {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}
.cap-ed__tit {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 0.92;
  margin: 0 0 16px;
  color: var(--fondo);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.cap-ed__txt {
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 0 24px;
  max-inline-size: 40ch;
  color: color-mix(in srgb, var(--fondo) 88%, transparent);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}
.cap-ed__more {
  pointer-events: auto;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--bosque);
  background: var(--accent);
  border: 0;
  padding: 13px 22px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  transition:
    transform 0.2s var(--ease),
    background 0.2s var(--ease);
}
.cap-ed.is-on .cap-ed__more {
  pointer-events: auto;
}
.cap-ed:not(.is-on) .cap-ed__more {
  pointer-events: none;
}
.cap-ed__more::before {
  content: "";
  width: 0.55em;
  height: 1em;
  background: var(--bosque);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
.cap-ed__more:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--accent) 90%, #fff);
}
.cap-ed__more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* HUD vivo */
.compass {
  position: absolute;
  top: clamp(18px, 4vh, 40px);
  right: var(--bleed);
  width: 62px;
  height: 62px;
  z-index: 5;
  pointer-events: none;
  color: var(--ink);
}
.compass__face {
  width: 100%;
  height: 100%;
  border: 1px solid var(--hair);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--sea) 60%, transparent);
  backdrop-filter: blur(2px);
}
.compass__needle {
  transition: transform 0.6s var(--ease);
  transform-origin: center;
}
.compass__card {
  position: absolute;
  font: 700 8px/1 var(--font-display);
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--fondo) 55%, transparent);
}
.compass__card--n {
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent);
}
.compass__card--s {
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}
.compass__card--e {
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}
.compass__card--w {
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}
.readout {
  position: absolute;
  bottom: clamp(78px, 12vh, 124px);
  right: var(--bleed);
  z-index: 5;
  pointer-events: none;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--ink);
  text-transform: uppercase;
  text-align: right;
}
.readout b {
  color: var(--fondo);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.progress {
  position: absolute;
  left: var(--bleed);
  bottom: clamp(40px, 7vh, 64px);
  z-index: 5;
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.progress__seg {
  width: 46px;
  height: 2px;
  background: var(--hair);
  overflow: hidden;
  position: relative;
}
.progress__seg b {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--f, 0));
  transform-origin: left;
}
.controls {
  position: absolute;
  bottom: clamp(78px, 12vh, 124px);
  left: var(--bleed);
  z-index: 7;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.ctl {
  appearance: none;
  border: 1px solid var(--hair);
  background: color-mix(in srgb, var(--sea) 55%, transparent);
  color: var(--fondo);
  font: 600 11px/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 14px;
  border-radius: 2px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: 0.2s var(--ease);
  min-height: 38px;
}
.ctl:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ctl:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* CARD flotante (dashboard con fisica) */
.viaje__back {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
  background: radial-gradient(
    80% 80% at 70% 50%,
    transparent 0%,
    color-mix(in srgb, var(--sea-deep) 72%, transparent) 100%
  );
  backdrop-filter: blur(2px);
}
.viaje[data-panel] .viaje__back {
  opacity: 1;
  pointer-events: auto;
}
.card-wrap {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 94vw);
  z-index: 8;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 40px);
  perspective: 1400px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.viaje[data-panel] .card-wrap {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.card-tilt {
  width: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.card-bob {
  animation: bob 7s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
.card {
  position: relative;
  background: color-mix(in srgb, var(--sea) 78%, #000);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 22px var(--gutter);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.7),
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    70% 50% at var(--gx, 70%) var(--gy, 0%),
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 70%
  );
}
.card__bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.card__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.68rem;
}
.card__x {
  appearance: none;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--fondo);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  transition: 0.2s var(--ease);
  flex: none;
}
.card__x:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(90deg);
}
.card__x:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.card__coord {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-transform: uppercase;
  margin: 14px 0 4px;
  font-variant-numeric: tabular-nums;
}
.card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 0.96;
  margin: 0;
  color: var(--fondo);
}
.card__lead {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0.8em 0 1.3em;
  color: color-mix(in srgb, var(--fondo) 88%, transparent);
}
.card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1.3em;
}
.card__stat {
  background: color-mix(in srgb, var(--bosque) 70%, #000);
  border: 1px solid var(--hair-soft);
  border-radius: 8px;
  padding: 12px 10px;
}
.card__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.card__stat span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 5px;
  line-height: 1.25;
}
.card__stat i {
  display: block;
  height: 2px;
  margin-top: 9px;
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease) 0.2s;
}
.viaje[data-panel] .card__stat i {
  transform: scaleX(var(--w, 0.6));
}
.card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4em;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.card__list li {
  display: flex;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--fondo) 86%, transparent);
}
.card__list li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background: var(--accent);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  background: var(--brand);
  color: var(--fondo);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.9em 1.5em;
  border-radius: 3px;
  min-height: 44px;
  transition:
    background 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.card__cta::before {
  content: "";
  width: 0.55em;
  height: 1em;
  background: var(--fondo);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
.card__cta:hover {
  background: var(--accent);
  color: var(--bosque);
  transform: translateY(-2px);
}
.card__cta:hover::before {
  background: var(--bosque);
}
.card__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== FIRMA: bisel de instrumento que se ENCIENDE al llegar a Conakry ===== */
.instrument {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
}
.instrument__glass {
  fill: var(--sea-deep);
  opacity: calc(0.22 * (1 - var(--lit, 0)));
}
.instrument__wash {
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.viaje.instrument--on .instrument__wash {
  opacity: 1;
}
.instrument__sweep {
  opacity: 0;
  transform: translateX(-1100px);
}
.viaje.instrument--on .instrument__sweep {
  animation: bezelSweep 1100ms var(--ease) 0.12s 1 both;
}
@keyframes bezelSweep {
  0% {
    opacity: 0;
    transform: translateX(-1100px);
  }
  12% {
    opacity: 0.55;
  }
  88% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translateX(1100px);
  }
}
.glab,
.deg,
.grat {
  transition: opacity 0.9s var(--ease);
}
.viaje.instrument--on .glab,
.viaje.instrument--on .deg,
.viaje.instrument--on .grat {
  opacity: 1;
}
.viaje.instrument--on #n-cky .node__halo {
  opacity: 0.3;
}

/* ===== BRUJULA VIVA: reader de telemetria (rumbo/dist/avance) ===== */
.reader {
  position: absolute;
  right: var(--bleed);
  bottom: clamp(112px, 16vh, 164px);
  z-index: 5;
  pointer-events: none;
  text-align: right;
  display: grid;
  gap: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fondo) 52%, transparent);
  font-variant-numeric: tabular-nums lining-nums;
}
.reader__row {
  display: flex;
  justify-content: flex-end;
  gap: 0.6em;
  white-space: nowrap;
}
.reader__k {
  opacity: 0.7;
}
.reader__v {
  color: var(--fondo);
  font-weight: 600;
  min-width: 5.5ch;
  text-align: right;
}
.reader__v--accent {
  color: var(--accent);
}
.compass__needle {
  transition: none;
  transform-origin: center;
  will-change: transform;
}

/* ===== MARCO-CARTA: ticks de borde + scale-bar reactivo ===== */
#frameHUD {
  pointer-events: none;
}
#frameHUD .tick {
  stroke: var(--coast);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.4;
}
#frameHUD .tick--mj {
  opacity: 0.7;
  stroke: color-mix(in srgb, var(--accent) 70%, transparent);
}
#frameHUD .tick-lab {
  font-size: 7px;
  letter-spacing: 0.12em;
  opacity: 0.5;
}
#frameHUD .scalebar__seg--on {
  fill: color-mix(in srgb, var(--accent) 78%, var(--bosque));
}
#frameHUD .scalebar__seg--off {
  fill: color-mix(in srgb, var(--fondo) 14%, transparent);
}
#frameHUD .scalebar__lab {
  font-size: 8px;
  letter-spacing: 0.16em;
  fill: color-mix(in srgb, var(--fondo) 62%, transparent);
  font-variant-numeric: tabular-nums;
}

/* ===== CARD: pestanas-dial ===== */
.card__tabs {
  position: relative;
  display: flex;
  gap: 2px;
  margin: 14px 0 16px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 3px;
  background: color-mix(in srgb, var(--bosque) 60%, #000);
}
.card__tab {
  appearance: none;
  border: 0;
  background: transparent;
  flex: 1;
  cursor: pointer;
  font: 700 0.6rem/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 9px 4px;
  border-radius: 2px;
  min-height: 34px;
  position: relative;
  z-index: 1;
  transition: color 0.25s var(--ease);
}
.card__tab[aria-selected="true"] {
  color: var(--bosque);
}
.card__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.card__tabink {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  z-index: 0;
  border-radius: 2px;
  background: var(--accent);
  will-change: transform, width;
  transition:
    transform 0.42s var(--ease),
    width 0.42s var(--ease);
}
.card__tabink::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 8px;
  height: 5px;
  transform: translateX(-50%);
  background: var(--accent);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
.card__panel {
  display: none;
}
.card__panel.is-active {
  display: block;
}
.card__panel > h3.card__paneltit {
  font: 700 0.62rem/1 var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
  display: none;
}
.card__gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 1.3em;
}
.card__gal figure {
  margin: 0;
  border: 1px solid var(--hair-soft);
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bosque) 70%, #000);
}
.card__gal img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.card__gal figure:hover img {
  transform: scale(1.06);
}
.card__gal figcaption {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 6px 8px;
  line-height: 1.3;
}
.card__help li {
  flex-direction: column;
  gap: 2px;
}
.card__help li small {
  display: block;
  color: color-mix(in srgb, var(--fondo) 64%, transparent);
  font-size: 0.78rem;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}

/* ===== CARD: medidor de aula (lenguaje route-rayo) ===== */
.card__fund {
  margin: -2px 0 1.3em;
}
.card__fund-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
}
.card__fund-label {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.6rem;
  color: var(--ink);
}
.card__fund-fig {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--fondo);
}
.card__fund-fig em {
  font-style: normal;
  color: var(--accent);
}
.card__fund-fig small {
  font-weight: 600;
  font-size: 0.7em;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.card__fund svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.fund--track {
  fill: none;
  stroke: color-mix(in srgb, var(--fondo) 16%, transparent);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.fund--fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(
    0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)
  );
  stroke-dasharray: var(--len, 100);
  stroke-dashoffset: calc(var(--len, 100) - var(--len, 100) * var(--p, 0));
  transition: stroke-dashoffset 0.9s var(--ease);
}
.fund--rayo {
  opacity: 0;
  transition: opacity 0.35s var(--ease) 0.25s;
}
.fund--rayo path {
  fill: var(--accent);
  filter: drop-shadow(
    0 0 2px color-mix(in srgb, var(--accent) 80%, transparent)
  );
}
.viaje[data-panel] .card__fund .fund--rayo {
  opacity: 1;
}

/* ===== CARD: tu donacion = X (regla graduada) ===== */
.card__equiv {
  margin: 0 0 1.4em;
  position: relative;
}
.card__equiv-lab {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.card__equiv-scale {
  display: flex;
  gap: 0;
  align-items: flex-end;
  border-bottom: 1px solid var(--hair);
}
.card__equiv-pill {
  appearance: none;
  flex: 1;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hair-soft);
  color: color-mix(in srgb, var(--fondo) 70%, transparent);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  padding: 10px 4px 8px;
  position: relative;
  line-height: 1;
  transition: color 0.2s var(--ease);
}
.card__equiv-pill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 1px;
  height: 7px;
  background: var(--hair);
  transform: translateX(-50%);
  transition:
    height 0.2s var(--ease),
    background 0.2s var(--ease);
}
.card__equiv-pill:hover {
  color: var(--fondo);
}
.card__equiv-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 2px;
}
.card__equiv-pill.is-active {
  color: var(--accent);
}
.card__equiv-pill.is-active::after {
  height: 13px;
  background: var(--accent);
}
.card__equivout {
  display: block;
  margin-top: 12px;
  min-height: 2.6em;
  font-size: 0.9rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--fondo) 88%, transparent);
}
.card__equivout b {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.card__equivout small {
  display: block;
  margin-top: 4px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.75;
}

.viaje__seo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  margin: -1px;
  padding: 0;
}

/* MOVIL */
@media (max-width: 860px) {
  .viaje__driver {
    height: 300vh;
  }
  .caps {
    width: auto;
    right: 0;
    align-content: end;
    padding: clamp(20px, 6vw, 30px);
    padding-bottom: calc(clamp(20px, 6vw, 30px) + 92px);
    background: linear-gradient(
      to top,
      var(--sea) 10%,
      color-mix(in srgb, var(--sea) 65%, transparent) 60%,
      transparent
    );
  }
  .cap-ed__tit {
    font-size: clamp(2.1rem, 11vw, 3.2rem);
  }
  .cap-ed__txt {
    max-inline-size: none;
  }
  .compass {
    width: 46px;
    height: 46px;
    top: 14px;
    right: 14px;
  }
  .controls {
    bottom: 18px;
    left: 14px;
  }
  .readout {
    bottom: 60px;
    right: 14px;
  }
  .progress {
    bottom: 52px;
    left: 14px;
  }
  .cap {
    left: 14px;
    font-size: 0.6rem;
  }
  .card-wrap {
    width: 100%;
    height: auto;
    top: auto;
    bottom: 0;
    place-items: end stretch;
    padding: 0;
    transform: translateY(40px);
  }
  .viaje[data-panel] .card-wrap {
    transform: none;
  }
  .card {
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    overflow-y: auto;
  }
  .card-bob {
    animation: none;
  }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .viaje__driver {
    height: auto;
  }
  .viaje__stage {
    position: static;
    height: auto;
    display: block;
  }
  .viaje__map {
    position: relative;
    height: min(64vh, 520px);
  }
  .route--draw {
    stroke-dashoffset: 0 !important;
  }
  .node[data-active] .node__pulse {
    animation: none;
  }
  .rayo {
    display: none;
  }
  .caps {
    position: static;
    width: auto;
    display: block;
    padding: clamp(28px, 6vw, 56px) var(--bleed);
  }
  .cap-ed {
    position: static;
    opacity: 1;
    transform: none;
    margin-bottom: 30px;
  }
  .compass,
  .readout,
  .progress,
  .controls,
  .hud,
  .card-bob,
  .reader {
    animation: none !important;
  }
  .world,
  .card-wrap,
  .compass__needle,
  .viaje__back,
  .card__stat i {
    transition: none !important;
  }
  .viaje__sea::after,
  .viaje__sea::before {
    animation: none !important;
    opacity: 0.05;
  }
  .instrument__glass {
    opacity: 0;
  }
  .instrument__wash {
    opacity: 1;
    transition: none;
  }
  .instrument__sweep {
    display: none;
  }
  .card__tabs {
    display: none;
  }
  .card__tabink {
    transition: none !important;
  }
  .card__panel {
    display: block !important;
  }
  .card__panel > h3.card__paneltit {
    display: block !important;
  }
  .fund--fill {
    transition: none !important;
  }
  .fund--rayo {
    transition: none !important;
    opacity: 1;
  }
  .card__equiv-pill,
  .card__equiv-pill::after {
    transition: none;
  }
}

/* ===== hero-inject ===== */

/* ===================================================================
   HERO FINAL (hero-vF) — editorial limpio, aireado y carismático
   + letras-con-vida (de B). Estilizado POR ENCIMA del bloque
   `hero-split`. Estructura real del bloque:
     .adep-hero (contenedor)
       .adep-hero__col.adep-hero__texto  (kicker/título/sub/cta)
       .adep-hero__col.adep-hero__media  (.adep-hero__inner>img + canvas.hero-gl)
   Selector base de ALTA ESPECIFICIDAD para ganar a estilos.css:
   section[data-bloque="hero-split"].hero-vx  -> (0,3,x)
   =================================================================== */
section[data-bloque="hero-split"].hero-vx {
  isolation: isolate !important;
}
/* ---- Layout: el GRID va en .adep-hero (contenedor de las 2 columnas) ---- */
section[data-bloque="hero-split"].hero-vx .adep-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  align-items: center !important;
  gap: clamp(56px, 6vw, 152px) !important;
  width: min(92vw, 1720px) !important;
  margin-inline: auto !important;
  padding-block: clamp(56px, 9vh, 128px) !important;
  position: relative !important;
  z-index: 1 !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__texto {
  grid-column: 1 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(24px, 2.6vw, 38px) !important;
}
/* ---- Kicker: rayo + línea + tracking ---- */
section[data-bloque="hero-split"].hero-vx .adep-hero__kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 13px !important;
  margin: 0 !important;
  font: 700 clamp(10px, 0.82vw, 12px)/1.25
    var(--font-display, "Archivo", system-ui, sans-serif) !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--brand, #1f5d3a) !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__kicker::before {
  content: "" !important;
  width: 14px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
  background: var(--accent, #54b435) !important;
  -webkit-mask: var(--rayo-svg) center/contain no-repeat !important;
  mask: var(--rayo-svg) center/contain no-repeat !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__kicker::after {
  content: "" !important;
  width: clamp(28px, 3.4vw, 52px) !important;
  height: 1.5px !important;
  background: color-mix(
    in srgb,
    var(--brand, #1f5d3a) 55%,
    transparent
  ) !important;
  flex: 0 0 auto !important;
  order: -1 !important;
}
/* ---- Titular: contenido, legible (3-4 líneas), mixed-case elegante ---- */
section[data-bloque="hero-split"].hero-vx .adep-hero__titulo {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif) !important;
  font-weight: 900 !important;
  text-transform: none !important;
  font-size: clamp(2.1rem, 3.5vw, 4.05rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.017em !important;
  color: var(--bosque, #0e2419) !important;
  margin: 0 !important;
  max-inline-size: 19ch !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-wrap: balance !important;
}
/* ---- Sub: cuerpo cómodo ---- */
section[data-bloque="hero-split"].hero-vx .adep-hero__sub {
  font-family: var(--font-body, "Inter", system-ui, sans-serif) !important;
  font-size: clamp(15px, 1.05vw, 18.5px) !important;
  line-height: 1.62 !important;
  color: color-mix(in srgb, var(--tinta, #0b1410) 78%, transparent) !important;
  margin: 0 !important;
  max-inline-size: 48ch !important;
}
/* ---- CTA "Contribuir" -> Donar (el motor liga el click) ---- */
section[data-bloque="hero-split"].hero-vx .adep-hero__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  margin: clamp(6px, 1vw, 12px) 0 0 0 !important;
  background: var(--brand, #1f5d3a) !important;
  color: var(--fondo, #f4efe4) !important;
  font: 700 clamp(13px, 1vw, 15px)/1
    var(--font-display, "Archivo", system-ui, sans-serif) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 15px 28px !important;
  border-radius: 999px !important;
  min-height: 48px !important;
  box-shadow: 0 16px 38px -18px
    color-mix(in srgb, var(--brand, #1f5d3a) 85%, transparent) !important;
  transition:
    transform 0.26s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    box-shadow 0.26s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    background 0.26s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__cta::before {
  content: "" !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
  background: var(--accent, #54b435) !important;
  -webkit-mask: var(--rayo-svg) center/contain no-repeat !important;
  mask: var(--rayo-svg) center/contain no-repeat !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__cta::after {
  content: "\2192" !important;
  font-weight: 600 !important;
  transition: transform 0.26s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)) !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__cta:hover {
  transform: translateY(-2px) !important;
  background: var(--bosque, #0e2419) !important;
  box-shadow: 0 24px 50px -18px
    color-mix(in srgb, var(--brand, #1f5d3a) 92%, transparent) !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__cta:hover::after {
  transform: translateX(4px) !important;
}

/* ---- FOTO (col 2): caja aspect-ratio EXACTO -> canvas/img la llenan sin huecos ---- */
section[data-bloque="hero-split"].hero-vx .adep-hero__media {
  grid-column: 2 !important;
  position: relative !important;
  align-self: center !important;
  aspect-ratio: 4/3 !important;
  min-height: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  cursor: pointer !important;
  border: 1px solid color-mix(in srgb, var(--bosque, #0e2419) 20%, transparent) !important;
  box-shadow: 0 34px 80px -38px rgba(11, 20, 16, 0.55) !important;
  background: var(--bosque, #0e2419) !important;
}
/* el wrapper interno de la img y la propia img/canvas llenan el marco */
section[data-bloque="hero-split"].hero-vx
  .adep-hero__media
  .adep-hero__inner {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__media img,
section[data-bloque="hero-split"].hero-vx .adep-hero__media canvas,
section[data-bloque="hero-split"].hero-vx .adep-hero__media .hero-morph,
section[data-bloque="hero-split"].hero-vx
  .adep-hero__media
  .hero-morph__layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__media img {
  filter: saturate(1.04) contrast(1.04) !important;
}
/* deroga el velo verde fuerte de la base: solo un pie sutil para anclar */
section[data-bloque="hero-split"].hero-vx .adep-hero__media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  background: linear-gradient(
    180deg,
    transparent 66%,
    color-mix(in srgb, var(--bosque, #0e2419) 26%, transparent) 100%
  ) !important;
}
/* firma rayo en esquina de la foto (marca, no estorba el clic) */
section[data-bloque="hero-split"].hero-vx .adep-hero__media::before {
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  width: clamp(22px, 2.4vw, 32px) !important;
  height: clamp(22px, 2.4vw, 32px) !important;
  background: var(--accent, #54b435) !important;
  -webkit-mask: var(--rayo-svg) center/contain no-repeat !important;
  mask: var(--rayo-svg) center/contain no-repeat !important;
  filter: drop-shadow(0 2px 8px rgba(11, 20, 16, 0.5)) !important;
  opacity: 0.95 !important;
}

/* ---- ENTRADA coreografiada: el hero se compone al retirarse el preloader ----
   Estado "en espera" gateado por body:has(preloader activo); al salir del DOM /
   marcar --salida, cada pieza entra con su delay. Con reduced-motion no se oculta nada. */
@media (prefers-reduced-motion: no-preference) {
  section[data-bloque="hero-split"].hero-vx .adep-hero__kicker {
    transition:
      opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s,
      transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
  }
  section[data-bloque="hero-split"].hero-vx .adep-hero__titulo {
    transition:
      opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s,
      transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s;
  }
  section[data-bloque="hero-split"].hero-vx .adep-hero__sub {
    transition:
      opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.36s,
      transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.36s;
  }
  section[data-bloque="hero-split"].hero-vx .adep-hero__media {
    transition:
      opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s,
      transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s;
  }
  body:has(.adep-preloader:not(.adep-preloader--salida))
    section[data-bloque="hero-split"].hero-vx
    .adep-hero__kicker {
    opacity: 0;
    transform: translateY(16px);
  }
  body:has(.adep-preloader:not(.adep-preloader--salida))
    section[data-bloque="hero-split"].hero-vx
    .adep-hero__titulo {
    opacity: 0;
    transform: translateY(26px);
  }
  body:has(.adep-preloader:not(.adep-preloader--salida))
    section[data-bloque="hero-split"].hero-vx
    .adep-hero__sub {
    opacity: 0;
    transform: translateY(18px);
  }
  body:has(.adep-preloader:not(.adep-preloader--salida))
    section[data-bloque="hero-split"].hero-vx
    .adep-hero__cta {
    opacity: 0 !important;
  }
  body:has(.adep-preloader:not(.adep-preloader--salida))
    section[data-bloque="hero-split"].hero-vx
    .adep-hero__media {
    opacity: 0;
    transform: translateY(22px);
  }
}

/* ---- LETRAS-CON-VIDA (de B): el JS pinta transform/color por proximidad al cursor ---- */
section[data-bloque="hero-split"].hero-vx .adep-hero__titulo .vb-word {
  display: inline-block;
  white-space: nowrap;
}
/* la palabra-clave del titular (la marca var-final.js) va en acento: eco del titular del footer */
section[data-bloque="hero-split"].hero-vx
  .adep-hero__titulo
  .vb-word--hi
  .vb-l {
  color: var(--accent, #54b435);
  -webkit-text-fill-color: var(--accent, #54b435);
}
section[data-bloque="hero-split"].hero-vx .adep-hero__titulo .vb-l {
  display: inline-block;
  position: relative;
  transform-origin: 50% 100%;
  will-change: transform;
  transition:
    transform 0.42s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    color 0.3s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    opacity 0.3s linear;
  backface-visibility: hidden;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  /* tablet vertical + móvil: apila, foto debajo, más ancha/baja */
  section[data-bloque="hero-split"].hero-vx .adep-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(24px, 5vw, 40px) !important;
    width: min(100% - 40px, 680px) !important;
    padding-block: clamp(36px, 6vh, 72px) !important;
  }
  section[data-bloque="hero-split"].hero-vx .adep-hero__texto {
    grid-column: 1 !important;
    order: 1 !important;
  }
  section[data-bloque="hero-split"].hero-vx .adep-hero__media {
    grid-column: 1 !important;
    order: 2 !important;
    aspect-ratio: 16/10 !important;
  }
  section[data-bloque="hero-split"].hero-vx .adep-hero__titulo {
    font-size: clamp(2.1rem, 6vw, 3.2rem) !important;
    max-inline-size: 24ch !important;
  }
}
@media (max-width: 560px) {
  /* móvil */
  section[data-bloque="hero-split"].hero-vx .adep-hero__titulo {
    font-size: clamp(1.9rem, 7.6vw, 2.6rem) !important;
    max-inline-size: 20ch !important;
  }
  section[data-bloque="hero-split"].hero-vx .adep-hero__media {
    aspect-ratio: 4/3 !important;
  }
}
@media (min-width: 1700px) {
  section[data-bloque="hero-split"].hero-vx .adep-hero {
    width: min(90vw, 1820px) !important;
  }
  section[data-bloque="hero-split"].hero-vx .adep-hero__titulo {
    font-size: clamp(3rem, 3.5vw, 4.3rem) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  section[data-bloque="hero-split"].hero-vx .adep-hero__titulo .vb-l {
    transition: color 0.2s linear !important;
    transform: none !important;
  }
  section[data-bloque="hero-split"].hero-vx .adep-hero__cta:hover {
    transform: none !important;
  }
}

/* ===================================================================
   HERO foto — efecto de #quienes (hover-parallax suave) en vez de WebGL.
   2 capas <img> para crossfade DIFUMINADO al cambiar de foto.
   Mata el canvas WebGL y la img base. Alta especificidad para ganar.
   =================================================================== */
section[data-bloque="hero-split"].hero-vx .adep-hero__media .hero-ph-stack {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  z-index: 1 !important;
  isolation: isolate !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__media .hero-ph {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  border-radius: inherit !important;
  transform: scale(1.006);
  transform-origin: center;
  transition:
    opacity 0.7s ease,
    filter 0.7s ease,
    transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  filter: grayscale(1) contrast(1.06) brightness(0.97);
}
section[data-bloque="hero-split"].hero-vx .adep-hero__media:hover .hero-ph {
  transform: scale(1.045);
}
section[data-bloque="hero-split"].hero-vx .adep-hero__media .hero-ph--b {
  opacity: 0;
}
/* capa entrante aparece desde blur = "fusion difuminada" */
section[data-bloque="hero-split"].hero-vx .adep-hero__media .hero-ph.is-blur {
  filter: blur(16px) grayscale(1) contrast(1.06) brightness(0.97);
}
/* ocultar la img base y el canvas viejos del bloque/engine */
section[data-bloque="hero-split"].hero-vx
  .adep-hero__media
  > .adep-hero__inner {
  opacity: 0 !important;
  pointer-events: none !important;
}
section[data-bloque="hero-split"].hero-vx .adep-hero__media canvas.hero-gl {
  display: none !important;
}
/* cuando el hero usa WebGL (?fx=a|d|ad) el canvas manda -> ocultar el stack <img> */
section[data-bloque="hero-split"] .adep-hero__media.fx-webgl .hero-ph-stack {
  opacity: 0 !important;
}
/* barra-barrido verde que viaja con el frente del wipe (fx=b) -> hace visible el cambio */
section[data-bloque="hero-split"].hero-vx .adep-hero__media .hero-wipe-front {
  position: absolute !important;
  top: -8% !important;
  bottom: -8% !important;
  left: 0 !important;
  width: 64px !important;
  z-index: 3 !important;
  pointer-events: none !important;
  opacity: 0;
  transform: translateX(-160%) skewX(-5deg);
  will-change:
    transform, opacity; /* SIN !important: si no, anulan el @keyframes */
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent, #54b435) 70%, transparent) 34%,
    #8bf064 50%,
    color-mix(in srgb, var(--accent, #54b435) 70%, transparent) 66%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 34px 6px
    color-mix(in srgb, var(--accent, #54b435) 60%, transparent) !important;
}
section[data-bloque="hero-split"].hero-vx
  .adep-hero__media
  .hero-wipe-front.is-sweep {
  animation: heroWipeSweep 0.9s cubic-bezier(0.5, 0, 0.5, 1) forwards !important;
}
@keyframes heroWipeSweep {
  0% {
    transform: translateX(-160%) skewX(-5deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    transform: translateX(980%) skewX(-5deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  section[data-bloque="hero-split"].hero-vx
    .adep-hero__media
    .hero-wipe-front.is-sweep {
    animation: none !important;
    opacity: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  section[data-bloque="hero-split"].hero-vx .adep-hero__media .hero-ph {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  section[data-bloque="hero-split"].hero-vx .adep-hero__media:hover .hero-ph {
    transform: none !important;
  }
}

/* ===================================================================
   HERO V1 — "Inmersivo oscuro (verde bosque)"
   Fondo verde oscuro (cohesión con hub/footer) + aurora viva, título
   crema, foto en DUOTONO verde integrada. El efecto letras-con-vida
   (base) sigue activo. Scope: .hero-v1. Carga DESPUÉS de base.css.
   =================================================================== */
section[data-bloque="hero-split"].hero-v1 {
  background: linear-gradient(
    160deg,
    #0a1810 0%,
    var(--bosque, #0e2419) 52%,
    #081109 100%
  ) !important;
  overflow: clip !important;
}
section[data-bloque="hero-split"].hero-v1::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      46% 50% at 14% 16%,
      color-mix(in srgb, var(--brand, #1f5d3a) 60%, transparent),
      transparent 60%
    ),
    radial-gradient(
      40% 44% at 92% 4%,
      color-mix(in srgb, var(--accent, #54b435) 16%, transparent),
      transparent 58%
    ),
    radial-gradient(
      60% 60% at 96% 100%,
      color-mix(in srgb, var(--brand, #1f5d3a) 34%, transparent),
      transparent 64%
    );
  animation: hv1aurora 22s cubic-bezier(0.22, 0.61, 0.36, 1) infinite alternate;
}
@keyframes hv1aurora {
  to {
    transform: translate3d(-2%, -1.5%, 0) scale(1.08);
    filter: hue-rotate(-6deg);
  }
}
section[data-bloque="hero-split"].hero-v1 .adep-hero {
  z-index: 1 !important;
  background: transparent !important;
}

/* texto en claro */
section[data-bloque="hero-split"].hero-v1 .adep-hero__kicker {
  color: color-mix(in srgb, var(--accent, #54b435) 82%, #fff) !important;
}
section[data-bloque="hero-split"].hero-v1 .adep-hero__kicker::after {
  background: color-mix(
    in srgb,
    var(--accent, #54b435) 50%,
    transparent
  ) !important;
}
section[data-bloque="hero-split"].hero-v1 .adep-hero__titulo {
  color: var(--fondo, #f4efe4) !important;
  -webkit-text-fill-color: var(--fondo, #f4efe4) !important;
}
section[data-bloque="hero-split"].hero-v1 .adep-hero__sub {
  color: color-mix(in srgb, var(--fondo, #f4efe4) 74%, transparent) !important;
}
section[data-bloque="hero-split"].hero-v1 .adep-hero__cta {
  background: var(--accent, #54b435) !important;
  color: var(--bosque, #0e2419) !important;
  box-shadow:
    0 18px 44px -18px rgba(84, 180, 53, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
section[data-bloque="hero-split"].hero-v1 .adep-hero__cta::before {
  background: var(--bosque, #0e2419) !important;
}
section[data-bloque="hero-split"].hero-v1 .adep-hero__cta:hover {
  background: #66d043 !important;
}

/* foto duotono verde + marco oscuro */
section[data-bloque="hero-split"].hero-v1 .adep-hero__media {
  border: 1px solid color-mix(in srgb, var(--accent, #54b435) 22%, transparent) !important;
  box-shadow:
    0 40px 90px -44px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(244, 239, 228, 0.05) inset !important;
}
section[data-bloque="hero-split"].hero-v1 .hero-ph {
  filter: grayscale(1) contrast(1.08) brightness(0.96) !important;
}
section[data-bloque="hero-split"].hero-v1 .adep-hero__media::after {
  background: linear-gradient(
    150deg,
    #0e2419 0%,
    #1f5d3a 58%,
    #54b435 100%
  ) !important;
  mix-blend-mode: color !important;
  opacity: 0.88 !important;
}

/* ====== NAV crema mientras el hero OSCURO está arriba (toggle por navdark.js) ====== */
#nav-site.nav--on-dark .nav__link {
  color: var(--fondo, #f4efe4) !important;
}
#nav-site.nav--on-dark .nav__logo {
  color: var(--fondo, #f4efe4) !important;
}
#nav-site.nav--on-dark .nav__toggle {
  color: var(--fondo, #f4efe4) !important;
}

@media (max-width: 900px) {
  section[data-bloque="hero-split"].hero-v1 .adep-hero__sub {
    color: color-mix(
      in srgb,
      var(--fondo, #f4efe4) 78%,
      transparent
    ) !important;
  }
}

/* ===================================================================
   HERO V2 — "Foto a sangre cinemático"
   La foto ocupa TODO el hero (full-bleed) con degradado verde encima;
   el titular monta sobre ella a la izquierda. Llena el vacío, máximo
   impacto. Letras-con-vida activas. Scope: .hero-v2 (carga tras base).
   =================================================================== */
section[data-bloque="hero-split"].hero-v2 {
  position: relative !important;
  overflow: clip !important;
  min-height: 92vh !important;
  background: var(--bosque, #0e2419) !important;
  display: flex !important;
  align-items: center !important;
}
/* .adep-hero estático -> la foto absoluta se ancla a la SECCIÓN (sangre real) */
section[data-bloque="hero-split"].hero-v2 .adep-hero {
  position: static !important;
  width: min(92vw, 1720px) !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  z-index: 2 !important;
  background: transparent !important;
}
section[data-bloque="hero-split"].hero-v2 .adep-hero__texto {
  position: relative !important;
  z-index: 2 !important;
}

/* foto = fondo a sangre */
section[data-bloque="hero-split"].hero-v2 .adep-hero__media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  cursor: pointer !important;
}
section[data-bloque="hero-split"].hero-v2 .hero-ph {
  object-position: center 38% !important;
  filter: saturate(1.02) contrast(1.05) !important;
}
/* scrim verde: opaco a la izquierda (texto) -> transparente a la derecha + pie */
section[data-bloque="hero-split"].hero-v2 .adep-hero__media::after {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, #081109 94%, transparent) 0%,
      color-mix(in srgb, var(--bosque, #0e2419) 72%, transparent) 38%,
      transparent 78%
    ),
    linear-gradient(
      0deg,
      color-mix(in srgb, #081109 80%, transparent) 0%,
      transparent 46%
    ),
    radial-gradient(
      70% 60% at 18% 40%,
      color-mix(in srgb, var(--brand, #1f5d3a) 30%, transparent),
      transparent 60%
    ) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}
section[data-bloque="hero-split"].hero-v2 .adep-hero__media::before {
  right: auto !important;
  left: 18px !important;
  bottom: 18px !important;
}

/* texto claro sobre la foto */
section[data-bloque="hero-split"].hero-v2 .adep-hero__kicker {
  color: color-mix(in srgb, var(--accent, #54b435) 85%, #fff) !important;
}
section[data-bloque="hero-split"].hero-v2 .adep-hero__titulo {
  color: var(--fondo, #f4efe4) !important;
  -webkit-text-fill-color: var(--fondo, #f4efe4) !important;
  text-shadow: 0 3px 28px rgba(0, 0, 0, 0.5) !important;
}
section[data-bloque="hero-split"].hero-v2 .adep-hero__sub {
  color: color-mix(in srgb, var(--fondo, #f4efe4) 82%, transparent) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45) !important;
}
section[data-bloque="hero-split"].hero-v2 .adep-hero__cta {
  background: var(--accent, #54b435) !important;
  color: var(--bosque, #0e2419) !important;
  box-shadow:
    0 18px 44px -18px rgba(84, 180, 53, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
section[data-bloque="hero-split"].hero-v2 .adep-hero__cta::before {
  background: var(--bosque, #0e2419) !important;
}
section[data-bloque="hero-split"].hero-v2 .adep-hero__cta:hover {
  background: #66d043 !important;
}

@media (max-width: 900px) {
  section[data-bloque="hero-split"].hero-v2 {
    min-height: 88vh !important;
  }
  section[data-bloque="hero-split"].hero-v2 .adep-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section[data-bloque="hero-split"].hero-v2 .adep-hero__media::after {
    background: linear-gradient(
      0deg,
      color-mix(in srgb, #081109 92%, transparent) 8%,
      color-mix(in srgb, var(--bosque, #0e2419) 60%, transparent) 46%,
      transparent 86%
    ) !important;
  }
}

/* ===================================================================
   HERO V3 — split diagonal: IZQUIERDA verde (de V4) · DERECHA blanca
   Bloque verde POTENTE con borde diagonal + rayo-watermark + kicker
   píldora a la izquierda (texto cream encima). A la DERECHA, sobre
   blanco, la foto bien ENCUADRADA con remate de acento verde (coherente).
   Letras-con-vida activas. Scope: .hero-v3 (carga tras base).
   =================================================================== */
section[data-bloque="hero-split"].hero-v3 {
  position: relative !important;
  overflow: clip !important;
  /* lado claro con LUZ de papel (no crema plano): foco suave arriba-derecha */
  background:
    radial-gradient(52% 46% at 82% 10%, #fbf8f0 0%, rgba(251, 248, 240, 0) 70%),
    radial-gradient(
      40% 36% at 96% 88%,
      rgba(84, 180, 53, 0.06) 0%,
      transparent 70%
    ),
    var(--fondo, #f4efe4) !important;
}
/* ---- BLOQUE verde diagonal a la izquierda (con atmosfera: luz de seam + grano) ---- */
section[data-bloque="hero-split"].hero-v3::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  width: min(54vw, 920px) !important;
  pointer-events: none !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E")
      repeat,
    radial-gradient(
      58% 46% at 88% 46%,
      rgba(84, 180, 53, 0.15) 0%,
      transparent 72%
    ),
    radial-gradient(
      70% 55% at 6% 8%,
      rgba(32, 84, 50, 0.55) 0%,
      transparent 65%
    ),
    linear-gradient(
      150deg,
      var(--bosque, #0e2419) 0%,
      #123a22 58%,
      #0a1f13 100%
    ) !important;
  background-blend-mode: overlay, normal, normal, normal !important;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 104px) 100%,
    0 100%
  ) !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 104px) 100%, 0 100%) !important;
  box-shadow: 40px 0 110px -50px rgba(0, 0, 0, 0.6) !important;
}
/* rayo-watermark dentro del bloque */
section[data-bloque="hero-split"].hero-v3::after {
  content: "" !important;
  position: absolute !important;
  left: -2vw !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-6deg) !important;
  width: 38vw !important;
  height: 116% !important;
  z-index: 0 !important;
  opacity: 0.09 !important;
  pointer-events: none !important;
  background: var(--accent, #54b435) !important;
  -webkit-mask: var(--rayo-svg) left center/contain no-repeat !important;
  mask: var(--rayo-svg) left center/contain no-repeat !important;
}
/* ---- RAYO DIVISOR en la partición (con vida, lo mueve hero-rayo.js vía --f) ---- */
section[data-bloque="hero-split"].hero-v3 .hero-seam-rayo {
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: none !important;
  /* la partición es DIAGONAL: arriba x=min(54vw,920), abajo x-104 (baja hacia la izq).
     El punto medio del corte está en min(54vw,920)-52; el centro del rayo (caja 150px)
     cae ahí -> left = medio - 75 = min(54vw,920) - 127. La partición inclina +5.14deg
     (clockwise, top-derecha) = atan(104/heroH=1156); el rayo va al MISMO ángulo -> colineal. */
  left: calc(min(54vw, 920px) - 127px) !important;
  top: calc(50% - 46px) !important; /* subido ~1cm+ */
  width: 150px !important;
  height: 112% !important;
  transform: translateY(-50%) rotate(3deg) scale(calc(1 + var(--f, 0) * 0.06)) !important;
  background: linear-gradient(
    180deg,
    #7ce85a 0%,
    var(--accent, #54b435) 55%,
    #2f9a2a 100%
  ) !important;
  -webkit-mask: var(--rayo-svg) center/contain no-repeat !important;
  mask: var(--rayo-svg) center/contain no-repeat !important;
  opacity: calc(0.72 + var(--f, 0) * 0.28) !important;
  filter: drop-shadow(
    0 0 calc(9px + var(--f, 0) * 26px)
      color-mix(
        in srgb,
        var(--accent, #54b435) calc(42% + var(--f) * 46%),
        transparent
      )
  ) !important;
  animation:
    heroSeamPulse 3.4s ease-in-out infinite,
    heroSeamIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s backwards !important;
}
@keyframes heroSeamPulse {
  0%,
  100% {
    filter: drop-shadow(
      0 0 9px color-mix(in srgb, var(--accent, #54b435) 38%, transparent)
    );
  }
  50% {
    filter: drop-shadow(
      0 0 18px color-mix(in srgb, var(--accent, #54b435) 66%, transparent)
    );
  }
}
@keyframes heroSeamIn {
  from {
    opacity: 0;
  }
}
/* mientras el preloader sigue en pantalla, el rayo espera (la animacion arranca al irse) */
body:has(.adep-preloader:not(.adep-preloader--salida))
  section[data-bloque="hero-split"].hero-v3
  .hero-seam-rayo {
  opacity: 0 !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  section[data-bloque="hero-split"].hero-v3 .hero-seam-rayo {
    animation: none !important;
  }
}
@media (max-width: 900px) {
  section[data-bloque="hero-split"].hero-v3 .hero-seam-rayo {
    display: none !important;
  }
}

section[data-bloque="hero-split"].hero-v3 .adep-hero {
  background: transparent !important;
  z-index: 1 !important;
  align-items: stretch !important;
}
section[data-bloque="hero-split"].hero-v3 .adep-hero__texto {
  position: relative !important;
  z-index: 1 !important;
  justify-content: center !important;
}

/* ---- TEXTO claro sobre el bloque verde ---- */
section[data-bloque="hero-split"].hero-v3 .adep-hero__kicker {
  color: var(--bosque, #0e2419) !important;
  background: var(--accent, #54b435) !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  letter-spacing: 0.19em !important;
  font-size: clamp(9.5px, 0.74vw, 11px) !important;
  box-shadow: 0 6px 22px -10px rgba(84, 180, 53, 0.55) !important;
}
@media (min-width: 900px) {
  /* una sola linea: la pildora a dos lineas rompia el ritmo editorial */
  section[data-bloque="hero-split"].hero-v3 .adep-hero__kicker {
    white-space: nowrap !important;
  }
}
section[data-bloque="hero-split"].hero-v3 .adep-hero__kicker::before {
  background: var(--bosque, #0e2419) !important;
}
section[data-bloque="hero-split"].hero-v3 .adep-hero__kicker::after {
  display: none !important;
}
section[data-bloque="hero-split"].hero-v3 .adep-hero__titulo {
  color: var(--fondo, #f4efe4) !important;
  -webkit-text-fill-color: var(--fondo, #f4efe4) !important;
  font-size: clamp(2.3rem, 3.9vw, 4.5rem) !important;
}
section[data-bloque="hero-split"].hero-v3 .adep-hero__sub {
  color: color-mix(in srgb, var(--fondo, #f4efe4) 80%, transparent) !important;
}
section[data-bloque="hero-split"].hero-v3 .adep-hero__cta {
  background: var(--accent, #54b435) !important;
  color: var(--bosque, #0e2419) !important;
  box-shadow:
    0 16px 38px -16px rgba(84, 180, 53, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
section[data-bloque="hero-split"].hero-v3 .adep-hero__cta::before {
  background: var(--bosque, #0e2419) !important;
}
section[data-bloque="hero-split"].hero-v3 .adep-hero__cta:hover {
  background: #66d043 !important;
}

/* ---- PROFUNDIDAD 3D por cursor (hero-3d.js pone --mx/--my; gated por .hero-3d-on) ----
   Capas a distinta profundidad: texto (frente, se mueve mas) · foto (inclina en 3D) ·
   bloque verde (fondo, se mueve poco). El JS ya lerpa los vars -> sin transition (doble-suavizado = lag). */
section[data-bloque="hero-split"].hero-v3.hero-3d-on .adep-hero__media {
  transform: perspective(1150px) rotateY(calc(var(--mx, 0) * 4.5deg))
    rotateX(calc(var(--my, 0) * -3.5deg))
    translate3d(calc(var(--mx, 0) * -13px), calc(var(--my, 0) * -9px), 0) !important;
}
section[data-bloque="hero-split"].hero-v3.hero-3d-on .adep-hero__texto {
  transform: translate3d(
    calc(var(--mx, 0) * 11px),
    calc(var(--my, 0) * 8px),
    0
  ) !important;
}
section[data-bloque="hero-split"].hero-v3.hero-3d-on::before {
  transform: translate3d(
    calc(var(--mx, 0) * -7px),
    calc(var(--my, 0) * -5px),
    0
  ) !important;
}

/* ---- FOTO sobre BLANCO (derecha), bien encuadrada + remate acento verde ---- */
section[data-bloque="hero-split"].hero-v3 .adep-hero__media {
  grid-column: 2 !important;
  align-self: center !important;
  aspect-ratio: 4/5 !important;
  width: 100% !important;
  max-width: 600px !important;
  justify-self: center !important;
  margin: -34px clamp(16px, 2.4vw, 44px) 0 0 !important; /* subida ~34px + más grande (600) + leve aire a la derecha */
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow:
    0 40px 90px -44px rgba(11, 20, 16, 0.45),
    -14px 14px 0 0 var(--accent, #54b435) !important;
}
section[data-bloque="hero-split"].hero-v3 .hero-ph {
  object-position: center 36% !important;
  filter: grayscale(1) contrast(1.06) brightness(0.97) !important;
}
section[data-bloque="hero-split"].hero-v3 .adep-hero__media::after {
  background: linear-gradient(
    180deg,
    transparent 62%,
    color-mix(in srgb, var(--bosque, #0e2419) 26%, transparent) 100%
  ) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}
/* pie de foto DENTRO del marco (zona oscurecida por el gradiente): dato real, detalle editorial */
section[data-bloque="hero-split"].hero-v3 .hero-photo-cap {
  position: absolute !important;
  left: 16px !important;
  bottom: 14px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font: 600 10px/1.2 var(--font-body, "Inter", system-ui, sans-serif) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, var(--fondo, #f4efe4) 82%, transparent) !important;
  text-shadow: 0 1px 6px rgba(8, 16, 12, 0.6) !important;
}
section[data-bloque="hero-split"].hero-v3 .hero-photo-cap::before {
  content: "" !important;
  width: 16px !important;
  height: 1.5px !important;
  flex: 0 0 auto !important;
  background: var(--accent, #54b435) !important;
}
@media (max-width: 560px) {
  section[data-bloque="hero-split"].hero-v3 .hero-photo-cap {
    display: none !important;
  }
}
/* cue de scroll en el lado claro: hilo vertical que respira + etiqueta */
section[data-bloque="hero-split"].hero-v3 .hero-scroll-cue {
  /* anclado al PRIMER viewport (la seccion es mas alta que 100vh: bottom quedaba bajo el fold) */
  position: absolute !important;
  right: clamp(20px, 3vw, 52px) !important;
  top: calc(100vh - 110px) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 9px !important;
}
section[data-bloque="hero-split"].hero-v3 .hero-scroll-cue span {
  font: 700 9.5px/1 var(--font-display, "Archivo", system-ui, sans-serif) !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, var(--bosque, #0e2419) 52%, transparent) !important;
  writing-mode: vertical-rl !important;
}
section[data-bloque="hero-split"].hero-v3 .hero-scroll-cue i {
  width: 1.5px !important;
  height: 44px !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
  background: color-mix(
    in srgb,
    var(--bosque, #0e2419) 18%,
    transparent
  ) !important;
}
section[data-bloque="hero-split"].hero-v3 .hero-scroll-cue i::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--accent, #54b435) !important;
  animation: heroCueDrop 2.2s cubic-bezier(0.6, 0.05, 0.3, 1) infinite !important;
}
@keyframes heroCueDrop {
  0% {
    transform: translateY(0);
  }
  55%,
  100% {
    transform: translateY(200%);
  }
}
@media (max-width: 900px) {
  section[data-bloque="hero-split"].hero-v3 .hero-scroll-cue {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  section[data-bloque="hero-split"].hero-v3 .hero-scroll-cue i::after {
    animation: none !important;
    transform: translateY(60%) !important;
  }
}

@media (max-width: 900px) {
  /* móvil: hero inmersivo TODO verde (el bloque a 58vh dejaba texto crema sobre fondo
     claro cuando la columna de texto crecía) — la foto duotono queda como card sobre verde */
  section[data-bloque="hero-split"].hero-v3::before {
    width: 100% !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
  }
  section[data-bloque="hero-split"].hero-v3::after {
    width: 70vw !important;
    top: 34% !important;
  }
  section[data-bloque="hero-split"].hero-v3 .adep-hero__media {
    grid-column: 1 !important;
    aspect-ratio: 16/11 !important;
    max-width: none !important;
    justify-self: stretch !important;
    margin: 0 !important;
    box-shadow:
      0 30px 70px -40px rgba(0, 0, 0, 0.55),
      -8px 8px 0 0 var(--accent, #54b435) !important;
  }
}

/* ===================================================================
   HERO V4 — "Brutalista letras con vida"
   La tipografía MANDA: titular gigante crema/acento sobre verde potente
   con rayo-watermark, foto como elemento gráfico duotono. Letras-con-
   vida amplificadas por el tamaño. Scope: .hero-v4 (carga tras base).
   =================================================================== */
section[data-bloque="hero-split"].hero-v4 {
  background: linear-gradient(
    150deg,
    var(--bosque, #0e2419) 0%,
    #123a22 60%,
    #0a1f13 100%
  ) !important;
  overflow: clip !important;
}
/* rayo-watermark gigante detrás del titular */
section[data-bloque="hero-split"].hero-v4::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  left: -2vw !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-6deg) !important;
  width: 46vw !important;
  height: 120% !important;
  opacity: 0.1 !important;
  background: var(--accent, #54b435) !important;
  -webkit-mask: var(--rayo-svg) left center/contain no-repeat !important;
  mask: var(--rayo-svg) left center/contain no-repeat !important;
}
section[data-bloque="hero-split"].hero-v4 .adep-hero {
  z-index: 1 !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr) !important;
  background: transparent !important;
}
/* kicker grande con barra de acento */
section[data-bloque="hero-split"].hero-v4 .adep-hero__kicker {
  font-size: clamp(11px, 1vw, 14px) !important;
  color: var(--bosque, #0e2419) !important;
  background: var(--accent, #54b435) !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
}
section[data-bloque="hero-split"].hero-v4 .adep-hero__kicker::before {
  background: var(--bosque, #0e2419) !important;
}
section[data-bloque="hero-split"].hero-v4 .adep-hero__kicker::after {
  display: none !important;
}
/* TITULAR gigante */
section[data-bloque="hero-split"].hero-v4 .adep-hero__titulo {
  color: var(--fondo, #f4efe4) !important;
  -webkit-text-fill-color: var(--fondo, #f4efe4) !important;
  font-weight: 900 !important;
  font-size: clamp(2.6rem, 5.4vw, 5.4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.03em !important;
  max-inline-size: 16ch !important;
}
section[data-bloque="hero-split"].hero-v4 .adep-hero__sub {
  color: color-mix(in srgb, var(--fondo, #f4efe4) 74%, transparent) !important;
}
section[data-bloque="hero-split"].hero-v4 .adep-hero__cta {
  background: var(--accent, #54b435) !important;
  color: var(--bosque, #0e2419) !important;
  border-radius: 8px !important;
  box-shadow:
    0 18px 44px -18px rgba(84, 180, 53, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
section[data-bloque="hero-split"].hero-v4 .adep-hero__cta::before {
  background: var(--bosque, #0e2419) !important;
}
section[data-bloque="hero-split"].hero-v4 .adep-hero__cta:hover {
  background: #66d043 !important;
}

/* foto como bloque gráfico duotono con borde acento grueso */
section[data-bloque="hero-split"].hero-v4 .adep-hero__media {
  aspect-ratio: 3/4 !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow:
    0 40px 90px -44px rgba(0, 0, 0, 0.85),
    -10px 10px 0 0 var(--accent, #54b435) !important;
}
section[data-bloque="hero-split"].hero-v4 .hero-ph {
  filter: grayscale(1) contrast(1.1) brightness(0.95) !important;
}
section[data-bloque="hero-split"].hero-v4 .adep-hero__media::after {
  background: linear-gradient(
    150deg,
    #0e2419 0%,
    #1f5d3a 55%,
    #54b435 100%
  ) !important;
  mix-blend-mode: color !important;
  opacity: 0.9 !important;
}

@media (max-width: 900px) {
  section[data-bloque="hero-split"].hero-v4 .adep-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section[data-bloque="hero-split"].hero-v4 .adep-hero__media {
    aspect-ratio: 16/10 !important;
    box-shadow:
      0 30px 70px -40px rgba(0, 0, 0, 0.8),
      -6px 6px 0 0 var(--accent, #54b435) !important;
  }
  section[data-bloque="hero-split"].hero-v4 .adep-hero__titulo {
    font-size: clamp(2.4rem, 8vw, 3.6rem) !important;
  }
}

/* ===================================================================
   HERO CINEMAX (?fx=cinemax) — escena cinematografica FULL-BLEED en la
   derecha del hero-split v3. Porta el standalone lab/cinemax al hero real
   del bloque: deroga el marco 4/5 de .adep-hero__media y la convierte en
   la ESCENA a sangre (de la costura diagonal al borde derecho), con
   barras de cine (letterbox), grado B&N solido, Ken Burns + dissolve,
   niebla de entrada y cartelas en las 4 esquinas.
   La IZQUIERDA (letras vivas + bloque verde) NO se toca: es de v3/base.
   Scope: section.hero-v3.hero-cinemax-on  (la clase la pone hero-cinemax.js).
   =================================================================== */

/* ---- .adep-hero__media pasa de tarjeta enmarcada a ESCENA full-bleed ---- */
section[data-bloque="hero-split"].hero-v3.hero-cinemax-on .adep-hero__media {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* arranca 140px por debajo de la costura para que nunca asome hueco */
  left: calc(min(54vw, 920px) - 140px) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  grid-column: auto !important;
  align-self: auto !important;
  justify-self: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
  background: #050705 !important;
  /* el borde IZQUIERDO de la escena sigue la particion diagonal (deja ver el bloque verde).
     costura arriba x=140 (coords media), abajo x=36; solapo 8px bajo el bloque -> 132 / 28 */
  -webkit-clip-path: polygon(132px 0, 100% 0, 100% 100%, 28px 100%) !important;
  clip-path: polygon(132px 0, 100% 0, 100% 100%, 28px 100%) !important;
}
/* mata los remates del marco v3 y el tilt 3D del stage completo */
section[data-bloque="hero-split"].hero-v3.hero-cinemax-on
  .adep-hero__media::after {
  display: none !important;
}
section[data-bloque="hero-split"].hero-v3.hero-cinemax-on .hero-photo-cap {
  display: none !important;
}
section[data-bloque="hero-split"].hero-v3.hero-cinemax-on.hero-3d-on
  .adep-hero__media {
  transform: none !important;
}

/* ---- capas internas de la escena (prefijo hero-cx-) ---- */
.hero-cinemax-on .hero-cx-inner {
  position: absolute !important;
  inset: 0 !important;
}
.hero-cinemax-on .hero-cx-slides {
  position: absolute !important;
  inset: -3% !important;
  will-change: transform;
}
.hero-cinemax-on .hero-cx-slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0;
  transition: opacity 2.2s ease-in-out;
}
.hero-cinemax-on .hero-cx-slide.is-active {
  opacity: 1;
}
.hero-cinemax-on .hero-cx-slide img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* grado film SOLIDO: B&N puro, sin oscurecer, SIN tinte verde */
  filter: grayscale(1) contrast(1.2) brightness(1) !important;
  will-change: transform;
}
.hero-cinemax-on .hero-cx-slide:nth-child(1) img {
  object-position: center 30%;
}
.hero-cinemax-on .hero-cx-slide:nth-child(2) img {
  object-position: center 36%;
}
.hero-cinemax-on .hero-cx-slide:nth-child(3) img {
  object-position: center 42%;
}
.hero-cinemax-on .hero-cx-slide:nth-child(4) img {
  object-position: center 58%;
}
.hero-cinemax-on .hero-cx-slide:nth-child(5) img {
  object-position: center 32%;
}

.hero-cinemax-on .hero-cx-fog {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* vineta anamorfica MUY sutil */
.hero-cinemax-on .hero-cx-vign {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    128% 108% at 54% 46%,
    rgba(0, 0, 0, 0) 64%,
    rgba(2, 4, 3, 0.24) 100%
  );
}
/* grano de pelicula MUY sutil (solo transform) */
.hero-cinemax-on .hero-cx-grain {
  position: absolute !important;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  z-index: 4;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='gcx'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23gcx)'/%3E%3C/svg%3E")
    repeat;
  background-size: 170px 170px;
  animation: heroCxGrain 0.96s steps(1, end) infinite;
  will-change: transform;
}
@keyframes heroCxGrain {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(1.9%, -2.2%, 0);
  }
  50% {
    transform: translate3d(2.6%, 1.1%, 0);
  }
  75% {
    transform: translate3d(1.4%, 2.3%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* barras de cine (letterbox). La seccion es mas alta que el viewport: la barra
   SUPERIOR va a y0 (hace de banda para el nav); la INFERIOR se ancla al fondo del
   PRIMER viewport (100vh) para quedar SIEMPRE visible sin scroll. */
.hero-cinemax-on .hero-cx-bar {
  position: absolute !important;
  left: 0;
  right: 0;
  z-index: 5;
  height: var(--hcx-bar, clamp(38px, 6.2vh, 62px));
  background: #000;
  pointer-events: none;
}
.hero-cinemax-on .hero-cx-bar--top {
  top: 0;
  box-shadow: 0 1px 0 rgba(244, 239, 228, 0.07);
}
/* la barra inferior arranca al fondo del primer viewport y SE EXTIENDE hasta el final de la
   seccion: asi la escena TERMINA en la barra negra y debajo no cuelga imagen (letterbox limpio) */
.hero-cinemax-on .hero-cx-bar--bot {
  top: calc(100vh - var(--hcx-bar, clamp(38px, 6.2vh, 62px)));
  bottom: 0;
  height: auto;
  box-shadow: 0 -1px 0 rgba(244, 239, 228, 0.07);
}

/* cartelas (lower-third) dentro de la barra inferior, ancladas al fondo del primer viewport */
.hero-cinemax-on .hero-cx-cap {
  position: absolute !important;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  color: rgba(244, 239, 228, 0.78);
  font-variant-numeric: tabular-nums;
  top: calc(100vh - var(--hcx-bar, clamp(38px, 6.2vh, 62px)));
  height: var(--hcx-bar, clamp(38px, 6.2vh, 62px));
}
.hero-cinemax-on .hero-cx-cap--r {
  right: clamp(18px, 2.6vw, 40px);
}
.hero-cinemax-on .hero-cx-cap--l {
  left: clamp(18px, 2.6vw, 40px);
}
.hero-cinemax-on .hero-cx-captxt i {
  width: 8px;
  height: 13px;
  background: var(--accent, #54b435);
  flex: none;
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
.hero-cinemax-on .hero-cx-captxt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: opacity 0.32s ease;
}
.hero-cinemax-on .hero-cx-captxt b {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--fondo, #f4efe4);
  white-space: nowrap;
}
.hero-cinemax-on .hero-cx-captxt span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  opacity: 0.6;
  white-space: nowrap;
}
.hero-cinemax-on .hero-cx-cap--r .hcx-tc {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.92;
}
.hero-cinemax-on .hero-cx-cap--r .hcx-idx {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  opacity: 0.6;
  margin-left: 12px;
}
/* la barra superior es solo banda de cine para el nav: sin cartela de texto (evita choque con el menu) */
.hero-cinemax-on .hero-cx-slate {
  display: none !important;
}

/* hairline de progreso al filo superior de la barra inferior (fondo del primer viewport) */
.hero-cinemax-on .hero-cx-hair {
  position: absolute !important;
  z-index: 6;
  left: 0;
  right: 0;
  top: calc(100vh - var(--hcx-bar, clamp(38px, 6.2vh, 62px)) - 2px);
  bottom: auto;
  height: 2px;
  background: rgba(244, 239, 228, 0.1);
  pointer-events: none;
}
.hero-cinemax-on .hero-cx-hair i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent, #54b435);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  opacity: 0.85;
}

/* title-card "ADEP presenta" — emerge entre la niebla al entrar */
.hero-cinemax-on .hero-cx-card {
  position: absolute !important;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--fondo, #f4efe4);
  pointer-events: none;
  opacity: 0;
}
.hero-cinemax-on .hero-cx-card i {
  width: 14px;
  height: 22px;
  background: var(--accent, #54b435);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
.hero-cinemax-on .hero-cx-card small {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  opacity: 0.6;
}
.hero-cinemax-on .hero-cx-card strong {
  font: 900 clamp(16px, 1.4vw, 21px)/1
    var(--font-display, "Archivo", system-ui, sans-serif);
  letter-spacing: 0.06em;
}

/* ---- ENTRADA (se dispara con .cx-in, que pone el JS al salir el preloader) ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-cinemax-on .hero-cx-inner {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(12px);
  }
  .hero-cinemax-on .adep-hero__media.cx-in .hero-cx-inner {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    transition:
      opacity 1.4s ease,
      transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
      filter 1.9s ease;
  }
  .hero-cinemax-on .hero-cx-bar--top {
    transform: translateY(-101%);
  }
  .hero-cinemax-on .adep-hero__media.cx-in .hero-cx-bar--top {
    transform: translateY(0);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
  }
  /* la barra inferior (alta, llega al final de la seccion) entra con opacidad, no translate */
  .hero-cinemax-on .hero-cx-bar--bot {
    opacity: 0;
  }
  .hero-cinemax-on .adep-hero__media.cx-in .hero-cx-bar--bot {
    opacity: 1;
    transition: opacity 1s ease 0.4s;
  }
  .hero-cinemax-on .hero-cx-slate,
  .hero-cinemax-on .hero-cx-cap,
  .hero-cinemax-on .hero-cx-hair {
    opacity: 0;
  }
  .hero-cinemax-on .adep-hero__media.cx-in .hero-cx-slate {
    opacity: 1;
    transition: opacity 1s ease 1s;
  }
  .hero-cinemax-on .adep-hero__media.cx-in .hero-cx-cap {
    opacity: 1;
    transition: opacity 1s ease 1.15s;
  }
  .hero-cinemax-on .adep-hero__media.cx-in .hero-cx-hair {
    opacity: 1;
    transition: opacity 1s ease 1.25s;
  }
  .hero-cinemax-on .adep-hero__media.cx-card .hero-cx-card {
    animation: heroCxCard 2.4s ease both;
  }
  @keyframes heroCxCard {
    0% {
      opacity: 0;
      transform: translateY(6px);
    }
    24% {
      opacity: 1;
      transform: none;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(-4px);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinemax-on .hero-cx-fog,
  .hero-cinemax-on .hero-cx-card,
  .hero-cinemax-on .hero-cx-hair {
    display: none !important;
  }
  .hero-cinemax-on .hero-cx-grain {
    animation: none !important;
  }
  .hero-cinemax-on .hero-cx-slide img {
    transform: scale(1.05);
  }
  .hero-cinemax-on .hero-cx-slides {
    transform: none !important;
  }
}

/* ---- movil: escena a sangre cubriendo la seccion, DETRAS del texto (z0 < texto z1),
   con velo a la izquierda para que el texto crema se lea. Sin costura diagonal. ---- */
@media (max-width: 900px) {
  section[data-bloque="hero-split"].hero-v3.hero-cinemax-on .adep-hero__media {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    width: auto !important;
    z-index: 0 !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    --hcx-bar: clamp(24px, 4.4vh, 38px);
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .hero-cinemax-on .hero-cx-vign {
    background: linear-gradient(
      to right,
      rgba(8, 11, 9, 0.92) 0%,
      rgba(8, 11, 9, 0.5) 58%,
      rgba(8, 11, 9, 0.28) 100%
    ) !important;
  }
  .hero-cinemax-on .hero-cx-slate {
    display: none !important;
  }
  .hero-cinemax-on .hero-cx-cap--l .hero-cx-captxt span {
    display: none !important;
  }
}

/* ===================================================================
   HERO INFORME (?hero=informe) — "Portada de informe editorial / memoria anual".
   Estilo POR ENCIMA del bloque hero-split, SIN la clase hero-vx (por eso
   re-declara TODO lo que necesita, con alta especificidad + !important para
   ganar a estilos.css). El andamiaje .informe lo monta hero-informe.js, que
   MUEVE los elementos reales (kicker/titulo/sub/cta/media) dentro.
   Reusos: letras-vivas (var-final.js -> .vb-l) y card-viva de la galeria.
   =================================================================== */

/* ---- Section shell: fondo crema, mata el split verde/blanco de la base ---- */
section[data-bloque="hero-split"].hero-informe {
  background: var(--fondo, #f4efe4) !important;
  isolation: isolate !important;
  min-height: 100vh;
  padding: 0 !important; /* mata el padding-top:128px propio del bloque hero: el .informe ya libra el nav */
}
section[data-bloque="hero-split"].hero-informe::before,
section[data-bloque="hero-split"].hero-informe::after {
  display: none !important;
  content: none !important;
}
section[data-bloque="hero-split"].hero-informe .bloque-host {
  background: transparent !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* mata el glow verde decorativo (radial-gradient accent) del ::before del host */
section[data-bloque="hero-split"].hero-informe .bloque-host::before,
section[data-bloque="hero-split"].hero-informe .bloque-host::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
/* el grid original se convierte en un simple contenedor del informe */
section[data-bloque="hero-split"].hero-informe .adep-hero {
  display: block !important;
  background: transparent !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero::before,
section[data-bloque="hero-split"].hero-informe .adep-hero::after {
  display: none !important;
  content: none !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__texto {
  display: none !important;
} /* queda vacio tras mover sus hijos */

/* ---- Contenedor .informe ---- */
section[data-bloque="hero-split"].hero-informe .informe {
  box-sizing: border-box;
  max-width: 1320px;
  margin: 0 auto;
  /* padding-top justo para librar el nav fijo (~84px), sin aire de mas */
  padding: clamp(88px, 9vh, 104px) clamp(20px, 4vw, 58px)
    clamp(22px, 2.6vw, 38px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  color: var(--tinta, #0b1410);
}
section[data-bloque="hero-split"].hero-informe .informe * {
  box-sizing: border-box;
}
section[data-bloque="hero-split"].hero-informe .informe p {
  margin: 0;
}
section[data-bloque="hero-split"].hero-informe .informe ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
section[data-bloque="hero-split"].hero-informe .informe .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

section[data-bloque="hero-split"].hero-informe .informe__frame {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 26px);
}

/* ---- Marcas de corte ---- */
section[data-bloque="hero-split"].hero-informe .informe__crop .cm {
  position: absolute;
  width: 13px;
  height: 13px;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm::before,
section[data-bloque="hero-split"].hero-informe .informe__crop .cm::after {
  content: "";
  position: absolute;
  background: rgba(11, 20, 16, 0.28);
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm::before {
  width: 13px;
  height: 1px;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm::after {
  width: 1px;
  height: 13px;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-tl {
  top: -3px;
  left: -3px;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-tl::before {
  top: 0;
  left: 0;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-tl::after {
  top: 0;
  left: 0;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-tr {
  top: -3px;
  right: -3px;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-tr::before {
  top: 0;
  right: 0;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-tr::after {
  top: 0;
  right: 0;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-bl {
  bottom: -3px;
  left: -3px;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-bl::before {
  bottom: 0;
  left: 0;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-bl::after {
  bottom: 0;
  left: 0;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-br {
  bottom: -3px;
  right: -3px;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-br::before {
  bottom: 0;
  right: 0;
}
section[data-bloque="hero-split"].hero-informe .informe__crop .cm-br::after {
  bottom: 0;
  right: 0;
}

/* ---- Colofon (sin wordmark grande: no pelea con el logo del nav) ---- */
section[data-bloque="hero-split"].hero-informe .informe__colophon {
  align-self: flex-end;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(11, 20, 16, 0.54);
}
section[data-bloque="hero-split"].hero-informe .informe__colophon .lead-line {
  color: var(--brand, #1f5d3a);
  font-weight: 600;
}

section[data-bloque="hero-split"].hero-informe .informe__filete {
  border: 0;
  border-top: 1px solid rgba(11, 20, 16, 0.15);
  margin: 0;
}

/* ---- Cover: texto | lamina ---- */
section[data-bloque="hero-split"].hero-informe .informe__cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: stretch;
  flex: 1;
}
section[data-bloque="hero-split"].hero-informe .informe__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 2.4vw, 30px);
  min-width: 0;
  padding-right: clamp(0px, 2.2vw, 36px);
  border-right: 1px solid rgba(11, 20, 16, 0.15);
}

/* ---- Tipografia real (kicker/titulo/sub/cta) — re-declarada para informe ---- */
section[data-bloque="hero-split"].hero-informe .adep-hero__kicker {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  font-family: var(--font-display, "Archivo", system-ui, sans-serif) !important;
  font-weight: 600 !important;
  font-size: clamp(11px, 1.05vw, 12.5px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--brand, #1f5d3a) !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__kicker::before {
  content: "" !important;
  width: 34px !important;
  height: 1px !important;
  flex: 0 0 auto !important;
  background: var(--brand, #1f5d3a) !important;
  -webkit-mask: none !important;
  mask: none !important;
  order: 0 !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__kicker::after {
  content: none !important;
}

section[data-bloque="hero-split"].hero-informe .adep-hero__titulo {
  margin: 0 !important;
  font-family: var(--font-display, "Archivo", system-ui, sans-serif) !important;
  font-weight: 900 !important;
  text-transform: none !important;
  font-size: clamp(2.05rem, 4.4vw, 4.15rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.026em !important;
  color: var(--tinta, #0b1410) !important;
  max-inline-size: 15ch !important;
  text-wrap: balance !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__sub {
  margin: 0 !important;
  font-family: var(--font-body, "Inter", system-ui, sans-serif) !important;
  font-size: clamp(15px, 1.45vw, 18px) !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
  color: color-mix(in srgb, var(--tinta, #0b1410) 72%, transparent) !important;
  max-inline-size: 46ch !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 6px 0 0 0 !important;
  background: var(--brand, #1f5d3a) !important;
  color: #fff !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font: 600 13px/1 var(--font-display, "Archivo", system-ui, sans-serif) !important;
  padding: 16px 26px !important;
  border-radius: 0 !important;
  border: 1px solid var(--brand, #1f5d3a) !important;
  box-shadow: none !important;
  min-height: 0 !important;
  transition:
    background 0.22s ease,
    border-color 0.22s ease !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__cta::before {
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
  background: var(--accent, #54b435) !important;
  -webkit-mask: var(--rayo-svg) center/contain no-repeat !important;
  mask: var(--rayo-svg) center/contain no-repeat !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__cta::after {
  content: none !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__cta:hover {
  background: var(--bosque, #0e2419) !important;
  border-color: var(--bosque, #0e2419) !important;
  transform: none !important;
}

/* ---- LETRAS-CON-VIDA: mismo CSS canonico de base.css, scopeado a hero-informe ---- */
section[data-bloque="hero-split"].hero-informe .adep-hero__titulo .vb-word {
  display: inline-block;
  white-space: nowrap;
}
section[data-bloque="hero-split"].hero-informe
  .adep-hero__titulo
  .vb-word--hi
  .vb-l {
  color: var(--accent, #54b435);
  -webkit-text-fill-color: var(--accent, #54b435);
}
section[data-bloque="hero-split"].hero-informe .adep-hero__titulo .vb-l {
  display: inline-block;
  position: relative;
  transform-origin: 50% 100%;
  will-change: transform;
  transition:
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s linear;
  backface-visibility: hidden;
}

/* ---- LAMINA (media real) = card con vida (valores literales de .ex__card.is-active) ---- */
section[data-bloque="hero-split"].hero-informe .informe__plate {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__media {
  position: relative !important;
  flex: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: clamp(340px, 58vh, 600px) !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  align-self: stretch !important;
  border: 1px solid rgba(11, 20, 16, 0.82) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--fondo, #f4efe4) !important;
  cursor: default !important;
  filter: saturate(0.9) brightness(0.94) !important;
  box-shadow: 0 20px 50px -34px rgba(0, 0, 0, 0.5) !important;
  transition:
    box-shadow 0.45s ease,
    filter 0.45s ease !important;
  outline: none !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__media:hover,
section[data-bloque="hero-split"].hero-informe .adep-hero__media:focus-within {
  filter: none !important;
  box-shadow:
    0 54px 120px -44px rgba(0, 0, 0, 0.8),
    0 0 0 1.5px color-mix(in srgb, var(--accent, #54b435) 55%, transparent),
    0 0 60px -22px color-mix(in srgb, var(--accent, #54b435) 60%, transparent) !important;
}
/* mata cualquier velo verde / firma de la base sobre el media */
section[data-bloque="hero-split"].hero-informe .adep-hero__media::before,
section[data-bloque="hero-split"].hero-informe .adep-hero__media::after {
  display: none !important;
  content: none !important;
}
section[data-bloque="hero-split"].hero-informe
  .adep-hero__media
  .adep-hero__inner {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 34% !important;
  filter: grayscale(1) contrast(1.06) brightness(0.97) !important; /* B&N puro, SIN tinte verde */
  transform: scale(1.02) !important;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  will-change: transform !important;
}
section[data-bloque="hero-split"].hero-informe .adep-hero__media:hover img,
section[data-bloque="hero-split"].hero-informe
  .adep-hero__media:focus-within
  img {
  transform: scale(1.06) !important;
}
section[data-bloque="hero-split"].hero-informe .informe__grad {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(8, 16, 12, 0.38) 0%,
      rgba(8, 16, 12, 0) 22%,
      rgba(8, 16, 12, 0) 44%,
      rgba(8, 16, 12, 0.86) 100%
    ),
    radial-gradient(
      130% 96% at 50% 42%,
      transparent 56%,
      rgba(8, 16, 12, 0.34) 100%
    ) !important;
}
section[data-bloque="hero-split"].hero-informe .informe__cap {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: clamp(15px, 1.6vw, 22px) !important;
  margin: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(244, 239, 228, 0.82) !important;
  transition: transform 0.45s ease !important;
}
section[data-bloque="hero-split"].hero-informe .informe__cap .informe__lam {
  color: #fff !important;
  font-weight: 600 !important;
}
section[data-bloque="hero-split"].hero-informe
  .adep-hero__media:hover
  .informe__cap,
section[data-bloque="hero-split"].hero-informe
  .adep-hero__media:focus-within
  .informe__cap {
  transform: translateY(-6px) !important;
}

/* ---- Ledger: cifra + sumario ---- */
section[data-bloque="hero-split"].hero-informe .informe__ledger {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding-top: clamp(4px, 0.8vw, 10px);
}
section[data-bloque="hero-split"].hero-informe .informe__figure {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
  min-width: 0;
}
section[data-bloque="hero-split"].hero-informe .informe__num {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 900;
  font-size: clamp(74px, 10.5vw, 150px);
  line-height: 0.74;
  letter-spacing: -0.035em;
  color: transparent;
  -webkit-text-stroke: 2px var(--bosque, #0e2419);
  font-variant-numeric: tabular-nums;
  flex: none;
}
section[data-bloque="hero-split"].hero-informe .informe__fmeta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
section[data-bloque="hero-split"].hero-informe .informe__frule {
  width: 44px;
  height: 2px;
  background: var(--brand, #1f5d3a);
}
section[data-bloque="hero-split"].hero-informe .informe__flabel {
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 600;
  color: var(--tinta, #0b1410);
  line-height: 1.3;
  max-width: 22ch;
}
section[data-bloque="hero-split"].hero-informe .informe__ftag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand, #1f5d3a);
}
section[data-bloque="hero-split"].hero-informe .informe__rayo {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: var(--accent, #54b435);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
section[data-bloque="hero-split"].hero-informe .informe__index {
  border-left: 1px solid rgba(11, 20, 16, 0.15);
  padding-left: clamp(22px, 3vw, 44px);
  min-width: 0;
}
section[data-bloque="hero-split"].hero-informe .informe__ititle {
  margin: 0 0 12px !important;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(11, 20, 16, 0.54);
  font-weight: 600;
}
section[data-bloque="hero-split"].hero-informe
  .informe__ititle
  span:last-child {
  color: rgba(11, 20, 16, 0.4);
  letter-spacing: 0.14em;
}
section[data-bloque="hero-split"].hero-informe .informe__index li {
  display: block;
  padding: 0;
  border-top: 1px solid rgba(11, 20, 16, 0.15);
}
section[data-bloque="hero-split"].hero-informe .informe__index li:last-child {
  border-bottom: 1px solid rgba(11, 20, 16, 0.15);
}
/* fila = enlace navegable (sumario -> capitulos): grid identico al del li original */
section[data-bloque="hero-split"].hero-informe .informe__index .ix-a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(14px, 2vw, 24px);
  padding: 14px 0;
  text-decoration: none;
  color: inherit;
  outline-offset: 3px;
}
/* filete de acento que crece sobre la regla superior de la fila */
section[data-bloque="hero-split"].hero-informe .informe__index .ix-a::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  background: var(--accent, #54b435);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
section[data-bloque="hero-split"].hero-informe
  .informe__index
  .ix-a:hover::before,
section[data-bloque="hero-split"].hero-informe
  .informe__index
  .ix-a:focus-visible::before {
  transform: scaleX(1);
}
section[data-bloque="hero-split"].hero-informe .informe__index .ix-l {
  transition: color 0.25s ease;
}
section[data-bloque="hero-split"].hero-informe
  .informe__index
  .ix-a:hover
  .ix-l,
section[data-bloque="hero-split"].hero-informe
  .informe__index
  .ix-a:focus-visible
  .ix-l {
  color: var(--brand, #1f5d3a);
}
section[data-bloque="hero-split"].hero-informe .informe__index .ix-d {
  transition: color 0.25s ease;
}
section[data-bloque="hero-split"].hero-informe
  .informe__index
  .ix-a:hover
  .ix-d {
  color: rgba(11, 20, 16, 0.72);
}
section[data-bloque="hero-split"].hero-informe .informe__index .ix-n {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 900;
  font-size: clamp(16px, 1.6vw, 21px);
  color: var(--brand, #1f5d3a);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
section[data-bloque="hero-split"].hero-informe .informe__index .ix-l {
  font-weight: 600;
  font-size: clamp(13px, 1.35vw, 15px);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--tinta, #0b1410);
}
section[data-bloque="hero-split"].hero-informe .informe__index .ix-d {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 20, 16, 0.54);
  text-align: right;
}

/* ---- Footline ---- */
section[data-bloque="hero-split"].hero-informe .informe__footline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(11, 20, 16, 0.15);
  padding-top: clamp(15px, 1.6vw, 22px);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(11, 20, 16, 0.54);
}
section[data-bloque="hero-split"].hero-informe .informe__footline .foot-mid {
  color: rgba(11, 20, 16, 0.4);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  section[data-bloque="hero-split"].hero-informe .informe__cover {
    grid-template-columns: 1fr;
  }
  section[data-bloque="hero-split"].hero-informe .informe__lead {
    border-right: none;
    padding-right: 0;
    justify-content: flex-start;
  }
  section[data-bloque="hero-split"].hero-informe .adep-hero__media {
    min-height: clamp(300px, 54vw, 470px) !important;
  }
  section[data-bloque="hero-split"].hero-informe .informe__ledger {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  section[data-bloque="hero-split"].hero-informe .informe__index {
    border-left: none;
    padding-left: 0;
  }
}
@media (max-width: 560px) {
  /* colofon: en movil el nav fijo (logo 40px + padding) baja hasta ~68px; subimos el
     arranque del informe y dejamos UNA linea de colofon -> nada queda bajo el nav */
  section[data-bloque="hero-split"].hero-informe .informe {
    padding-top: 104px;
  }
  section[data-bloque="hero-split"].hero-informe .informe__colophon .num {
    display: none;
  }
}
@media (max-width: 540px) {
  section[data-bloque="hero-split"].hero-informe .informe__index .ix-d {
    display: none;
  }
  section[data-bloque="hero-split"].hero-informe .informe__footline {
    gap: 8px;
  }
  section[data-bloque="hero-split"].hero-informe .informe__footline .foot-mid {
    order: 3;
    flex-basis: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  section[data-bloque="hero-split"].hero-informe .adep-hero__titulo .vb-l {
    transition: color 0.2s linear;
    transform: none;
  }
  section[data-bloque="hero-split"].hero-informe .adep-hero__media img,
  section[data-bloque="hero-split"].hero-informe .adep-hero__media:hover img {
    transition: none;
    transform: scale(1.02);
  }
}

/* ===== fonts-inject ===== */

/* Self-hosted (subset latin) — reemplaza el CDN de Google Fonts. Generado por prototipos/fonts/vendor-fonts.mjs */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/archivo-400.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: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/fonts/archivo-500.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: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/vendor/fonts/archivo-600.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: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/fonts/archivo-700.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: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/vendor/fonts/archivo-800.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: "Archivo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/vendor/fonts/archivo-900.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: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/inter-400.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: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/fonts/inter-500.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: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/vendor/fonts/inter-600.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;
}

/* ===== width-inject ===== */

/* ===================================================================
   UNIFICACIÓN DE ANCHOS DEL SITIO — quita las "barras laterales"
   Inyectado POR ENCIMA de estilos.css (último <style> del <head>).
   Iguala el ancho de contenido de las secciones de TEXTO al del hero
   (min(92vw,1720px)) para compartir gutter y alinearse verticalmente.
   Las full-bleed (mapa #viaje, galería, #hub-mount) se dejan intactas
   a propósito: su anchura edge-to-edge contrasta con el texto.
   Los párrafos siguen topados a 60ch dentro -> legibilidad intacta.
   Cap base que pisamos: `.bloque-host > *` = min(...,1180/1320) y
   `.adep-htrack__sticky` = min(...,1180). Misma especificidad +
   inyectado después => gana.
   =================================================================== */
/* RETICULA UNIFICADA (F3.1): el hero informe es la referencia (caja 1320 + gutter 4vw).
   --adep-edge = distancia del borde del viewport al TEXTO (para full-bleeds con hijos
   posicionados: equipo, footer, HUD del mapa). --adep-ancho = ancho de CONTENIDO
   (cajas centradas: #impacto). Asi todas las verticales de texto caen en la misma linea. */
:root {
  --adep-max: 1320px;
  --adep-gutter: clamp(20px, 4vw, 60px);
  --adep-edge: max(
    var(--adep-gutter),
    calc((100vw - var(--adep-max)) / 2 + var(--adep-gutter))
  );
  --adep-ancho: calc(min(100vw, var(--adep-max)) - 2 * var(--adep-gutter));
}

/* hero informe: adopta los tokens (antes clamp(...,58px): 2px de deriva en pantallas anchas) */
section[data-bloque="hero-split"].hero-informe .informe {
  max-width: var(--adep-max);
  padding-left: var(--adep-gutter);
  padding-right: var(--adep-gutter);
}

/* equipo (seccion full-bleed con head/track/bar posicionados): a la reticula */
#equipo-zone .vh__head {
  left: var(--adep-edge) !important;
  right: var(--adep-edge) !important;
}
#equipo-zone .ex__track,
#equipo-zone .vh__track {
  padding-inline: var(--adep-edge) !important;
}
#equipo-zone .qzs2__bar {
  left: var(--adep-edge) !important;
  right: var(--adep-edge) !important;
}

/* footer: mismo borde de texto que el hero (antes 5vw/96 + inner 1320 = otra vertical) */
.adep-footer {
  padding-left: var(--adep-edge) !important;
  padding-right: var(--adep-edge) !important;
}
.adep-footer .aft__inner {
  max-width: none !important;
}

/* mapa: full-bleed intencional, pero su HUD (cap/compass/readout/controls) cae en la reticula */
.viaje {
  --bleed: var(--adep-edge) !important;
}

/* marquee-infinito: su restyle full-bleed + pro vive en marquee.css (inyectado
   después). Aquí no le tocamos el ancho. */

/* --- htrack (3 pilares): la base lo des-fija (position:static) pero en DESKTOP
   deja el track en fila horizontal (3 paneles x ~1100 = ~3300px) => overflow-X de
   PÁGINA y pilares 2-3 fuera de pantalla. Lo pasamos a GRID de 3 col al ancho
   unificado (igual que ya colapsa a 1 col en móvil): sin overflow y sin barras.
   transform:none pisa cualquier translateX inline del pin-JS (stylesheet
   !important > inline sin !important). El Módulo 3 lo pulirá. */
/* colapsar la altura de pin (400vh) que la base solo neutraliza en móvil:
   sin scroll horizontal ya no hace falta esa distancia -> alto = contenido */
section[data-bloque="htrack"] .adep-htrack {
  height: auto !important;
  min-height: 0 !important;
}
section[data-bloque="htrack"] > .bloque-host {
  min-height: 0 !important;
  height: auto !important;
  padding-block: clamp(56px, 9vh, 120px) !important;
}
section[data-bloque="htrack"] .adep-htrack__sticky {
  width: var(--adep-ancho) !important;
  max-width: var(--adep-ancho) !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}
section[data-bloque="htrack"] .adep-htrack__track {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  flex-direction: row !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  gap: clamp(18px, 2vw, 34px) !important;
  align-items: stretch !important;
}
section[data-bloque="htrack"] .adep-htrack__panel {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}
@media (max-width: 900px) {
  section[data-bloque="htrack"] .adep-htrack__track {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --- #impacto (contador): los 4 stats son hijos DIRECTOS del bloque-host (fila).
   Ensanchamos el CONTENEDOR y dejamos que los items se repartan (no anchamos cada
   item, que los sacaba de pantalla). --- */
#impacto .bloque-host {
  width: var(--adep-ancho) !important;
  max-width: var(--adep-ancho) !important;
}
#impacto .bloque-host > .adep-contador__item {
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
}

/* En pantallas chicas el min(92vw,...) ya deja aire lateral; no tocamos
   los breakpoints internos de cada bloque (siguen apilando bien). */
@media (max-width: 900px) {
  :root {
    --adep-ancho: min(calc(100vw - 2 * var(--adep-gutter)), 680px);
  }
}

/* ===== marquee-inject ===== */

/* ===================================================================
   MARQUEE "EDUCAR · TRANSFORMAR · RECICLAR" — full-bleed + pro.
   Antes: viewport 1720 descentrado (cortado a la izquierda) + palabras
   blancas sobre crema (invisibles). Ahora: banda de borde a borde,
   palabras grandes en verde bosque, separador RAYO en acento y
   desvanecido (mask) en los dos bordes. El bloque se hidrata por JS
   (CSS runtime) -> overrides con alta especificidad + !important.
   =================================================================== */
section[data-bloque="marquee-infinito"] {
  overflow: hidden !important;
  background: var(--fondo, #f4efe4) !important;
  padding-block: clamp(28px, 5vh, 64px) !important;
  border-block: 1px solid
    color-mix(in srgb, var(--bosque, #0e2419) 10%, transparent) !important;
}
section[data-bloque="marquee-infinito"] .bloque-host {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: block !important;
  gap: 0 !important;
}
/* la cinta ocupa TODO el viewport y se recorta a los lados con un fade premium */
section[data-bloque="marquee-infinito"] .adep-marquee {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-inline: 0 !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
  -webkit-mask: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  ) !important;
  mask: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  ) !important;
}
/* pista de la cinta: duplicado inline de site-boot.css para que la fila unica y
   el loop no dependan de que el navegador tenga ese archivo fresco en cache */
section[data-bloque="marquee-infinito"] .adep-marquee__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  width: max-content !important;
  animation: adep-marquee-scroll 80s linear infinite;
}
section[data-bloque="marquee-infinito"]:hover .adep-marquee__track {
  animation-play-state: paused;
}
@keyframes adep-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  section[data-bloque="marquee-infinito"] .adep-marquee__track { animation: none; }
}
/* palabras: grandes, bosque, peso display (contraste real sobre crema) */
section[data-bloque="marquee-infinito"] .adep-marquee__item {
  color: var(--bosque, #0e2419) !important;
  font-family: var(--font-display, "Archivo", system-ui, sans-serif) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: clamp(30px, 4.6vw, 68px) !important;
  line-height: 1 !important;
  letter-spacing: 0.004em !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* separador: rayo en acento en lugar del punto blanco */
section[data-bloque="marquee-infinito"] .adep-marquee__item::after {
  content: "" !important;
  width: clamp(16px, 1.4vw, 24px) !important;
  height: clamp(24px, 2.1vw, 38px) !important;
  margin: 0 clamp(22px, 2.6vw, 56px) !important;
  flex: 0 0 auto !important;
  background: var(--accent, #54b435) !important;
  -webkit-mask: var(--rayo-svg) center/contain no-repeat !important;
  mask: var(--rayo-svg) center/contain no-repeat !important;
  display: inline-block !important;
  border-radius: 0 !important;
}
@media (max-width: 640px) {
  section[data-bloque="marquee-infinito"] .adep-marquee__item {
    font-size: clamp(24px, 8vw, 40px) !important;
  }
}

/* ===== equipo-inject ===== */

section[data-bloque="htrack"] {
  display: none !important;
}
section[data-bloque="galeria-scroll-distorsion"] {
  display: none !important;
}
/* ===================================================================
   Seccion unificada QUIENES + EQUIPO scroll-driven. 3 bocetos v1/v2/v3.
   #equipo-zone se hace ALTO; dentro una etapa sticky a 100vh.
   =================================================================== */
#equipo-zone {
  display: block;
  background: var(--bosque, #0e2419);
  position: relative;
} /* verde oscuro: continuidad con marquee2+mapa (antes crema -> franja rara al soltar el sticky) */
.qzs__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.qzs__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 clamp(10px, 0.82vw, 12px)/1
    var(--font-display, "Archivo", system-ui, sans-serif);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand, #1f5d3a);
}
.qzs-rayo {
  display: inline-block;
  width: 11px;
  height: 14px;
  background: var(--accent, #54b435);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
.qzs__title {
  margin: 0;
  font: 900 clamp(2rem, 3.6vw, 3.7rem)/1.06
    var(--font-display, "Archivo", system-ui, sans-serif);
  letter-spacing: -0.02em;
  color: var(--bosque, #0e2419);
}
.qzs__text {
  margin: 0;
  max-inline-size: 46ch;
  font: 400 clamp(15px, 1.15vw, 18px)/1.6
    var(--font-body, "Inter", system-ui, sans-serif);
  color: color-mix(in srgb, var(--tinta, #0b1410) 78%, transparent);
}

/* ---------------- V1 · PINNED SCROLLYTELLING ---------------- */
.qzs--v1 .qzs__sticky {
  justify-content: center;
}
.qzs--v1 .qzs__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 120px);
  align-items: center;
  width: min(92vw, 1720px);
}
.qzs__media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--bosque, #0e2419) 18%, transparent);
  box-shadow: 0 40px 90px -44px rgba(11, 20, 16, 0.6);
  background: var(--bosque, #0e2419);
}
.qzs__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.8s ease,
    transform 1.4s ease;
}
.qzs__ph.is-on {
  opacity: 1;
  transform: scale(1);
}
.qzs__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 60%,
    color-mix(in srgb, var(--bosque, #0e2419) 30%, transparent)
  );
}
.qzs__col {
  position: relative;
  min-width: 0;
}
.qzs__steps {
  position: relative;
  min-height: clamp(260px, 42vh, 360px);
}
.qzs__step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  justify-content: center;
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.qzs__step.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.qzs__dots {
  position: absolute;
  right: clamp(16px, 3vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 4;
}
.qzs__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--bosque, #0e2419) 24%, transparent);
  transition:
    transform 0.3s,
    background 0.3s;
}
.qzs__dot.is-on {
  background: var(--accent, #54b435);
  transform: scale(1.5);
}

/* ---------------- V2 · FILMSTRIP HORIZONTAL ---------------- */
.qzs--v2 .qzs__sticky {
  display: block;
}
.qzs2__track {
  display: flex;
  gap: clamp(20px, 2vw, 40px);
  height: 100vh;
  align-items: center;
  padding-inline: clamp(24px, 5vw, 90px);
  will-change: transform;
}
.qzs2__panel {
  flex: 0 0 clamp(320px, 66vw, 1120px);
  height: min(74vh, 720px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(20px, 2vw, 38px);
  align-items: stretch;
}
.qzs2__img {
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 40px 90px -44px rgba(11, 20, 16, 0.55);
  border: 1px solid color-mix(in srgb, var(--bosque, #0e2419) 16%, transparent);
  position: relative;
  overflow: hidden;
  filter: grayscale(1) contrast(1.06) brightness(0.97);
}
.qzs2__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 24px);
}
.qzs2__no {
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.18em;
  color: var(--brand, #1f5d3a);
}
.qzs2__bar {
  position: absolute;
  left: clamp(24px, 5vw, 90px);
  right: clamp(24px, 5vw, 90px);
  bottom: clamp(24px, 4vh, 56px);
  height: 2px;
  background: color-mix(in srgb, var(--bosque, #0e2419) 16%, transparent);
}
.qzs2__bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0.04);
  background: var(--accent, #54b435);
}

/* ---------------- V3 · MAZO QUE SE REPARTE ---------------- */
.qzs--v3 .qzs__sticky {
  justify-content: center;
  perspective: 1500px;
}
.qzs3__deck {
  position: relative;
  width: min(88vw, 560px);
  height: min(76vh, 680px);
}
.qzs3__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--bosque, #0e2419) 14%, transparent);
  box-shadow: 0 40px 90px -40px rgba(11, 20, 16, 0.5);
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.5s ease;
}
.qzs3__img {
  height: 58%;
  background-size: cover;
  background-position: center;
}
.qzs3__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  padding: clamp(20px, 2.4vw, 34px);
}
.qzs--v3 .qzs__title {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
}
.qzs--v3 .qzs__dots {
  position: absolute;
  right: auto;
  left: 50%;
  bottom: clamp(20px, 4vh, 44px);
  top: auto;
  transform: translateX(-50%);
  flex-direction: row;
}

/* ---------------- VH · HIBRIDO (filmstrip + cards giratorias + VERDE) ---------------- */
.qzs--vh {
  position: relative;
  color: var(--fondo, #f4efe4);
  background:
    radial-gradient(
      120% 80% at 12% 0%,
      color-mix(in srgb, var(--brand, #1f5d3a) 26%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, #11321f, var(--bosque, #0e2419));
}
.qzs--vh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--fondo, #f4efe4) 6%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--fondo, #f4efe4) 6%, transparent) 1px,
      transparent 1px
    );
  background-size: 54px 54px;
  -webkit-mask: radial-gradient(120% 90% at 50% 30%, #000, transparent 78%);
  mask: radial-gradient(120% 90% at 50% 30%, #000, transparent 78%);
}
.qzs--vh .qzs__sticky {
  display: block;
}
.vh__head {
  position: absolute;
  top: clamp(22px, 4vh, 54px);
  left: clamp(24px, 5vw, 90px);
  right: clamp(24px, 5vw, 90px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.vh__head .qzs__eyebrow {
  color: var(--accent, #54b435);
}
/* capitulo editorial (F3.4): mismo sistema tipografico que los "CAP nn" del bloque */
.vh__lead {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
}
.qzs__cap {
  font: 700 0.72rem/1 var(--font-display, "Archivo", system-ui, sans-serif);
  font-stretch: 75%;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--fondo, #f4efe4) 62%, transparent);
}
.vh__hint {
  font: 600 11px/1 var(--font-body, "Inter", system-ui, sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fondo, #f4efe4) 60%, transparent);
}
.vh__track {
  display: flex;
  gap: clamp(20px, 2vw, 38px);
  height: 100vh;
  align-items: center;
  padding-inline: clamp(24px, 5vw, 90px);
  will-change: transform;
  perspective: 1500px;
}
.vh__card {
  flex: 0 0 clamp(280px, 34vw, 470px);
  height: min(70vh, 660px);
  position: relative;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    scale(var(--sc, 0.93));
  transform-style: preserve-3d;
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.5s ease;
  filter: saturate(0.92) brightness(0.9);
}
.vh__card.is-active {
  --sc: 1;
  filter: none;
  z-index: 5;
}
.vh__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vh__card.is-flip .vh__inner {
  transform: rotateY(180deg);
}
.vh__face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 40px 90px -42px rgba(0, 0, 0, 0.7);
  border: 1px solid color-mix(in srgb, var(--fondo, #f4efe4) 14%, transparent);
}
.vh__front {
  display: block;
}
.vh__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
}
.vh__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 16, 12, 0.05) 30%,
    rgba(8, 16, 12, 0.82) 100%
  );
}
.vh__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2vw, 30px);
}
.vh__meta .qzs__eyebrow {
  color: var(--accent, #54b435);
}
.vh__title {
  margin: 0;
  color: var(--fondo, #f4efe4);
  font: 900 clamp(1.6rem, 2.4vw, 2.5rem)/1.04
    var(--font-display, "Archivo", system-ui, sans-serif);
  letter-spacing: -0.02em;
}
.vh__role {
  font: 600 12px/1 var(--font-body, "Inter", system-ui, sans-serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fondo, #f4efe4) 75%, transparent);
}
.vh__flip {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  font: 700 10px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bosque, #0e2419);
  background: var(--accent, #54b435);
  padding: 7px 11px;
  border-radius: 999px;
}
.vh__back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(24px, 2.4vw, 40px);
  background: linear-gradient(165deg, #15391f, var(--bosque, #0e2419));
}
.vh__back .qzs__eyebrow {
  color: var(--accent, #54b435);
}
.vh__backtxt {
  margin: 0;
  font: 400 clamp(15px, 1.3vw, 19px)/1.5
    var(--font-body, "Inter", system-ui, sans-serif);
  color: color-mix(in srgb, var(--fondo, #f4efe4) 92%, transparent);
}
.vh__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 800 11px/1 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #54b435);
  margin-top: auto;
}
.vh__card--last .vh__front .vh__grad {
  background: linear-gradient(
    180deg,
    rgba(8, 16, 12, 0.1) 20%,
    rgba(14, 36, 25, 0.92) 100%
  );
}
.qzs--vh .qzs2__bar {
  position: absolute;
  left: clamp(24px, 5vw, 90px);
  right: clamp(24px, 5vw, 90px);
  bottom: clamp(22px, 4vh, 50px);
  height: 2px;
  background: color-mix(in srgb, var(--fondo, #f4efe4) 18%, transparent);
  z-index: 3;
}
.qzs--vh .qzs2__bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0.04);
  background: var(--accent, #54b435);
}
@media (max-width: 820px) {
  .vh__card {
    flex-basis: 78vw;
    height: 64vh;
  }
  .vh__hint {
    display: none;
  }
}

/* ---------------- E · MEJORADO (variedad tono + parallax + abrir panel partido) ---------------- */
/* FIX fondo-que-se-mueve: el gradiente+rejilla vivian en .qzs--ex (el scroller de ~470vh),
   asi que el trozo visible RESBALABA mientras las cards estaban clavadas (sticky).
   Ahora el root es bosque plano y el "escenario" (gradiente + rejilla) vive en el sticky
   de 100vh -> estable en viewport durante todo el recorrido. */
.qzs--ex {
  position: relative;
  color: var(--fondo, #f4efe4);
  background: var(--bosque, #0e2419);
}
.qzs--ex .qzs__sticky {
  display: block;
  background:
    radial-gradient(
      120% 80% at 12% 0%,
      color-mix(in srgb, var(--brand, #1f5d3a) 24%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, #11321f, var(--bosque, #0e2419));
}
.qzs--ex .qzs__sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--fondo, #f4efe4) 6%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--fondo, #f4efe4) 6%, transparent) 1px,
      transparent 1px
    );
  background-size: 54px 54px;
  -webkit-mask: radial-gradient(120% 90% at 50% 30%, #000, transparent 78%);
  mask: radial-gradient(120% 90% at 50% 30%, #000, transparent 78%);
}
.ex__track {
  display: flex;
  gap: clamp(20px, 2vw, 40px);
  height: 100vh;
  align-items: center;
  padding-inline: clamp(24px, 5vw, 90px);
  will-change: transform;
  perspective: 1500px;
}
.ex__card {
  flex: 0 0 clamp(280px, 32vw, 440px);
  height: min(70vh, 640px);
  position: relative;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 90px -42px rgba(0, 0, 0, 0.65);
  border: 1px solid color-mix(in srgb, var(--fondo, #f4efe4) 14%, transparent);
  transform: perspective(1200px) rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg)) scale(var(--sc, 0.93));
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.5s ease,
    box-shadow 0.5s ease;
  filter: saturate(0.92) brightness(0.92);
}
.ex__card.is-active {
  --sc: 1;
  filter: none;
  z-index: 5;
  box-shadow: 0 50px 110px -44px rgba(0, 0, 0, 0.75);
}
.ex__card:focus-visible {
  outline: 2px solid var(--accent, #54b435);
  outline-offset: 3px;
}
/* foto + parallax (el JS mueve .ex__img) */
.ex__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.02);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  filter: grayscale(1) contrast(1.06) brightness(0.97);
} /* foto en B/N tal cual (sin duotono verde) */
.ex__grad {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(8, 16, 12, 0.38) 0%,
      rgba(8, 16, 12, 0) 22%,
      rgba(8, 16, 12, 0) 44%,
      rgba(8, 16, 12, 0.86) 100%
    ),
    radial-gradient(
      130% 96% at 50% 42%,
      transparent 56%,
      rgba(8, 16, 12, 0.34) 100%
    );
}
.ex__card--light::after,
.ex__card--quote::after {
  opacity: 0.05;
}
.ex__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2vw, 30px);
}
.ex__meta .qzs__eyebrow {
  color: var(--accent, #54b435);
}
.ex__meta .vh__title {
  color: var(--fondo, #f4efe4);
}
/* cards de texto / blancas / verdes */
.ex__txt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px, 2.4vw, 40px);
}
.ex__card--light {
  background: linear-gradient(165deg, #fff, var(--fondo, #f4efe4));
  border-color: color-mix(in srgb, var(--bosque, #0e2419) 12%, transparent);
}
.ex__card--light .vh__title {
  color: var(--bosque, #0e2419);
}
.ex__card--light .vh__role {
  color: color-mix(in srgb, var(--tinta, #0b1410) 55%, transparent);
}
.ex__card--quote {
  background: #fff;
  border-color: color-mix(in srgb, var(--bosque, #0e2419) 12%, transparent);
}
.ex__card--quote .ex__txt {
  border-left: 3px solid var(--accent, #54b435);
  margin-left: clamp(20px, 2vw, 30px);
  padding-left: clamp(16px, 1.6vw, 24px);
}
.ex__card--quote .vh__title {
  color: var(--bosque, #0e2419);
  font-size: clamp(1.3rem, 1.9vw, 1.9rem);
  font-weight: 800;
  line-height: 1.18;
}
.ex__card--quote .vh__role {
  color: var(--brand, #1f5d3a);
}
.ex__card--solid {
  background: linear-gradient(160deg, var(--accent, #54b435), #2f7d22);
  border-color: transparent;
}
.ex__card--solid .qzs__eyebrow {
  color: var(--bosque, #0e2419);
}
.ex__card--solid .vh__title {
  color: var(--bosque, #0e2419);
}
.ex__card--solid .vh__role {
  color: color-mix(in srgb, var(--bosque, #0e2419) 70%, transparent);
}
.ex__card--solid .vh__flip,
.ex__card--light .vh__flip,
.ex__card--quote .vh__flip {
  color: var(--fondo, #f4efe4);
  background: var(--bosque, #0e2419);
}
/* barra de progreso (reutiliza estilo vh) */
.qzs--ex .qzs2__bar {
  position: absolute;
  left: clamp(24px, 5vw, 90px);
  right: clamp(24px, 5vw, 90px);
  bottom: clamp(22px, 4vh, 50px);
  height: 2px;
  background: color-mix(in srgb, var(--fondo, #f4efe4) 18%, transparent);
  z-index: 3;
}
.qzs--ex .qzs2__bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0.04);
  background: var(--accent, #54b435);
}
.qzs--ex .vh__head .qzs__eyebrow {
  color: var(--accent, #54b435);
}

/* ----- F4 ELEVACIÓN: número editorial + spotlight cinematográfico en la card activa ----- */
/* ENCAJE: el número deja de flotar "pegado" en la esquina — se alinea a la MISMA rejilla
   interior que el contenido (padding del meta/txt), baja de tamaño un punto y gana una
   regla-guía debajo que lo ata al sistema del kicker. En la card activa la regla crece. */
.ex__idx {
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  left: clamp(20px, 2vw, 30px);
  z-index: 3;
  font: 800 clamp(1.8rem, 2.4vw, 2.6rem)/1
    var(--font-display, "Archivo", system-ui, sans-serif);
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.1px
    color-mix(in srgb, var(--fondo, #f4efe4) 52%, transparent);
  opacity: 0.7;
  transition:
    opacity 0.5s ease,
    -webkit-text-stroke-color 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.5s ease;
  transform: translateY(3px);
  pointer-events: none;
}
.ex__idx::after {
  content: "";
  display: block;
  width: 2.1em;
  height: 2px;
  margin-top: 0.38em;
  background: var(--accent, #54b435);
  opacity: 0.5;
  border-radius: 2px;
  transform: scaleX(0.42);
  transform-origin: left;
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.5s ease;
}
/* cards de texto: el número se alinea con el margen del bloque de texto */
.ex__card--light .ex__idx,
.ex__card--solid .ex__idx {
  left: clamp(24px, 2.4vw, 40px);
  -webkit-text-stroke-color: color-mix(
    in srgb,
    var(--bosque, #0e2419) 34%,
    transparent
  );
}
/* quote: el número cae SOBRE la línea verde de la cita -> misma vertical, sistema visible */
.ex__card--quote .ex__idx {
  left: clamp(20px, 2vw, 30px);
  -webkit-text-stroke-color: color-mix(
    in srgb,
    var(--bosque, #0e2419) 34%,
    transparent
  );
}
.ex__card--solid .ex__idx {
  -webkit-text-stroke-color: color-mix(
    in srgb,
    var(--bosque, #0e2419) 55%,
    transparent
  );
}
.ex__card--solid .ex__idx::after {
  background: var(--bosque, #0e2419);
}
/* card activa = foco: número lleno de acento, texto sube, rim verde, resto más recogido/atenuado */
.ex__card.is-active .ex__idx {
  opacity: 1;
  transform: none;
  -webkit-text-stroke-color: var(--accent, #54b435);
  color: color-mix(in srgb, var(--accent, #54b435) 22%, transparent);
}
.ex__card.is-active .ex__idx::after {
  transform: scaleX(1);
  opacity: 0.9;
}
.ex__card--solid.is-active .ex__idx {
  -webkit-text-stroke-color: var(--bosque, #0e2419);
  color: color-mix(in srgb, var(--bosque, #0e2419) 25%, transparent);
}
.ex__card.is-active {
  box-shadow:
    0 54px 120px -44px rgba(0, 0, 0, 0.8),
    0 0 0 1.5px color-mix(in srgb, var(--accent, #54b435) 55%, transparent),
    0 0 60px -22px color-mix(in srgb, var(--accent, #54b435) 60%, transparent);
}
.ex__card:not(.is-active) {
  --sc: 0.9;
  filter: saturate(0.82) brightness(0.8);
}
.ex__meta {
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex__card.is-active .ex__meta {
  transform: translateY(-6px);
}
.ex__card.is-active .ex__img {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .ex__idx,
  .ex__meta,
  .ex__card.is-active .ex__img {
    transition: none !important;
  }
}

/* ----- 3 MODOS ----- */
/* e1 uniforme = base */
/* e2 escalonado */
.e-e2 .ex__track {
  align-items: flex-start;
}
.e-e2 .ex__card {
  margin-top: clamp(6vh, 9vh, 12vh);
}
.e-e2 .ex__card:nth-child(even) {
  margin-top: clamp(18vh, 24vh, 28vh);
}
/* e3 foco grande: activa mucho mayor, resto pequeno y atenuado */
.e-e3 .ex__card {
  flex-basis: clamp(240px, 28vw, 380px);
  --sc: 0.82;
}
.e-e3 .ex__card:not(.is-active) {
  filter: brightness(0.6) saturate(0.7);
}
.e-e3 .ex__card.is-active {
  --sc: 1.06;
}

/* ----- OVERLAY: abrir imagen IZQ + panel grande DER ----- */
.ex__ov {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  background: color-mix(in srgb, var(--bosque, #0e2419) 72%, transparent);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ex__ov.is-open {
  opacity: 1;
}
.ex__ov[hidden] {
  display: none;
}
.ex__ov-card {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  width: min(94vw, 1180px);
  height: min(82vh, 640px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 60px 130px -50px rgba(0, 0, 0, 0.8);
}
.ex__ov-visual {
  position: relative;
  overflow: hidden;
  background: var(--bosque, #0e2419);
  transform: translateX(-34px);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s,
    opacity 0.5s ease 0.04s;
}
.ex__ov.is-open .ex__ov-visual {
  transform: none;
  opacity: 1;
}
.ex__ov-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  isolation: isolate;
  filter: contrast(1.07) brightness(0.96);
}
/* mismo tratamiento de marca que .ex__img pero mas contenido: la foto grande no tiene
   el velo oscuro de las cards y el acento puro se disparaba en las zonas claras */
.ex__ov-img {
  filter: grayscale(1) contrast(1.06) brightness(0.97);
} /* B/N tal cual, sin duotono verde */
.ex__ov-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    130% 100% at 50% 44%,
    transparent 58%,
    rgba(8, 16, 12, 0.36) 100%
  );
}
.ex__ov-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")
    repeat;
}
.ex__ov-img--brand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    120% 100% at 30% 20%,
    color-mix(in srgb, var(--brand, #1f5d3a) 40%, transparent),
    var(--bosque, #0e2419)
  );
}
.ex__ov-soft {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  mix-blend-mode: luminosity;
}
.ex__ov-mark {
  position: relative;
  z-index: 2;
  width: clamp(54px, 6vw, 84px);
  height: clamp(54px, 6vw, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ex__ov-mark .qzs-rayo {
  width: 100%;
  height: 100%;
}
.ex__ov-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(28px, 3vw, 56px);
  background: linear-gradient(165deg, #15391f, var(--bosque, #0e2419));
  color: var(--fondo, #f4efe4);
  transform: translateX(34px);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s,
    opacity 0.5s ease 0.1s;
}
.ex__ov.is-open .ex__ov-panel {
  transform: none;
  opacity: 1;
}
.ex__ov-panel .qzs__eyebrow {
  color: var(--accent, #54b435);
}
/* el numero editorial de la card sigue al overlay: mismo sistema, cerrado */
.ex__ov-idx {
  position: absolute;
  top: clamp(18px, 2.2vw, 30px);
  right: clamp(22px, 2.6vw, 40px);
  font: 800 clamp(2.2rem, 3.4vw, 3.4rem)/1
    var(--font-display, "Archivo", system-ui, sans-serif);
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.2px
    color-mix(in srgb, var(--accent, #54b435) 55%, transparent);
  pointer-events: none;
}
.ex__ov-title {
  margin: 0;
  font: 900 clamp(1.8rem, 2.8vw, 3rem)/1.08
    var(--font-display, "Archivo", system-ui, sans-serif);
  letter-spacing: -0.02em;
}
.ex__ov-text {
  margin: 0;
  max-inline-size: 46ch;
  font: 400 clamp(15px, 1.25vw, 18.5px)/1.6
    var(--font-body, "Inter", system-ui, sans-serif);
  color: color-mix(in srgb, var(--fondo, #f4efe4) 90%, transparent);
}
.ex__ov-close {
  position: fixed;
  top: clamp(16px, 3vh, 32px);
  right: clamp(20px, 3vw, 40px);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--fondo, #f4efe4);
  color: var(--bosque, #0e2419);
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
@media (max-width: 820px) {
  /* FIX colision movil (pre-existente): la cabecera caia bajo el logo del nav fijo y
     ENCIMA de la primera card. Cabecera bajo el nav + cards arrancan por debajo de ella. */
  .vh__head {
    top: clamp(78px, 11vh, 96px);
  }
  .ex__track {
    align-items: flex-start;
    padding-top: clamp(150px, 22vh, 200px);
  }
  .ex__card {
    flex-basis: 78vw;
    height: 62vh;
  }
  .e-e2 .ex__card,
  .e-e2 .ex__card:nth-child(even) {
    margin-top: 0;
  }
  .e-e3 .ex__card {
    flex-basis: 74vw;
  }
  .ex__ov-card {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    height: min(86vh, 680px);
  }
  .vh__hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ex__card,
  .ex__img,
  .ex__ov-visual,
  .ex__ov-panel {
    transition: opacity 0.2s ease !important;
    transform: none !important;
  }
}

/* ---------------- ESTATICO (reduced-motion / fallback) ---------------- */
.qzs--static {
  width: min(92vw, 1720px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 7vh, 96px);
  padding-block: clamp(56px, 9vh, 120px);
}
/* FIX contraste: la seccion es bosque (antes crema) y el estatico heredaba titulos/texto
   oscuros -> ilegible bajo reduced-motion. Tipografia a crema sobre el fondo oscuro. */
.qzs--static .qzs__title {
  color: var(--fondo, #f4efe4);
}
.qzs--static .qzs__text {
  color: color-mix(in srgb, var(--fondo, #f4efe4) 82%, transparent);
}
.qzs--static .qzs__eyebrow {
  color: var(--accent, #54b435);
}
.qzs__beat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.qzs__beat img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 16px;
  filter: grayscale(1) contrast(1.06) brightness(0.97);
} /* B/N tal cual */
.qzs__beat > div {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 820px) {
  .qzs--v1 .qzs__stage {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .qzs__steps {
    min-height: auto;
  }
  .qzs__step {
    position: relative;
    opacity: 1;
    transform: none;
  } /* en movil mejor apilar el activo arriba */
  .qzs__media {
    aspect-ratio: 16/11;
  }
  .qzs2__panel {
    grid-template-columns: 1fr;
    height: auto;
  }
  .qzs__beat {
    grid-template-columns: 1fr;
  }
}

/* ===== marquee2-inject ===== */

/* ===================================================================
   SEGUNDO MARQUEE (puente sección verde -> mapa) — "otro toque":
   banda OSCURA (bosque) con palabras en crema + algunas en acento,
   scroll continuo propio (CSS keyframes, sin hidratación), rayo
   separador y fade en bordes. Contrasta con el primer marquee (claro).
   =================================================================== */
.amq2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: linear-gradient(90deg, #0a1c13, #143a21 50%, #0a1c13);
  border-block: 1px solid
    color-mix(in srgb, var(--accent, #54b435) 24%, transparent);
  padding-block: clamp(20px, 3.8vh, 46px);
  -webkit-mask: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}
.amq2__row {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: amq2scroll 30s linear infinite;
}
.amq2:hover .amq2__row {
  animation-play-state: paused;
}
.amq2 .w {
  display: inline-block;
  font: 800 clamp(24px, 3.6vw, 56px)/1
    var(--font-display, "Archivo", system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.008em;
  color: var(--fondo, #f4efe4);
  padding: 0 clamp(8px, 1vw, 18px);
}
.amq2 .w--ac {
  color: var(--accent, #54b435);
}
.amq2 .r {
  display: inline-block;
  width: clamp(15px, 1.4vw, 24px);
  height: clamp(22px, 2vw, 34px);
  margin: 0 clamp(20px, 2.4vw, 50px);
  background: var(--accent, #54b435);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
@keyframes amq2scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .amq2__row {
    animation: none;
  }
}

/* ===== footer-inject ===== */

/* ===================================================================
   ADEP · FOOTER DE CIERRE — zona final wow, dinámica y coherente.
   Claim editorial + CTA a Donar + enlaces MAGNÉTICOS (misma física que
   el hub) + redes/contacto/ubicación + marca, sobre aurora viva y rayo.
   Todo scopeado bajo .adep-footer (vive en light DOM del sitio).
   =================================================================== */
.adep-footer {
  --b: var(--brand, #1f5d3a);
  --a: var(--accent, #54b435);
  --bo: var(--bosque, #0e2419);
  --fo: var(--fondo, #f4efe4);
  --ti: var(--tinta, #0b1410);
  --disp: var(--font-display, "Archivo", "Archivo", system-ui, sans-serif);
  --bod: var(--font-body, "Inter", system-ui, sans-serif);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ry: var(
    --rayo-svg,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100'%3E%3Cpath d='M23 0 5 56h14L12 100l24-62H21z' fill='%2354b435'/%3E%3C/svg%3E")
  );
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(180deg, #0a1810 0%, var(--bo) 40%, #081209 100%);
  color: var(--fo);
  font-family: var(--bod);
  padding: clamp(72px, 11vw, 160px) clamp(22px, 5vw, 96px)
    clamp(28px, 3vw, 44px);
}
.adep-footer * {
  box-sizing: border-box;
}
.aft__aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      46% 50% at 14% 8%,
      color-mix(in srgb, var(--b) 55%, transparent),
      transparent 60%
    ),
    radial-gradient(
      40% 44% at 92% 0%,
      color-mix(in srgb, var(--a) 18%, transparent),
      transparent 58%
    ),
    radial-gradient(
      60% 60% at 88% 100%,
      color-mix(in srgb, var(--b) 34%, transparent),
      transparent 64%
    );
  animation: aftaurora 20s var(--ease) infinite alternate;
}
@keyframes aftaurora {
  to {
    transform: translate3d(-2%, -1%, 0) scale(1.07);
    filter: hue-rotate(-6deg);
  }
}
.aft__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background: 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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aft__rayo-top {
  position: absolute;
  top: clamp(-22px, -2vw, -12px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(34px, 5vw, 56px);
  height: clamp(44px, 6.5vw, 80px);
  z-index: 2;
  pointer-events: none;
  background: var(--b);
  -webkit-mask: var(--ry) center/auto 100% no-repeat;
  mask: var(--ry) center/auto 100% no-repeat;
  opacity: 0.92;
}

.aft__inner {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 104px);
}

/* ---- bloque superior: claim + CTA ---- */
.aft__top {
  display: grid;
  grid-template-columns: 1.5fr auto;
  align-items: end;
  gap: clamp(28px, 4vw, 72px);
}
.aft__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: color-mix(in srgb, var(--a) 82%, #fff);
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
.aft__kicker i {
  display: inline-block;
  width: 14px;
  height: 30px;
  background: var(--a);
  -webkit-mask: var(--ry) center/contain no-repeat;
  mask: var(--ry) center/contain no-repeat;
  animation: aftpulse 3.2s var(--ease) infinite;
}
@keyframes aftpulse {
  0%,
  100% {
    opacity: 0.8;
    filter: drop-shadow(0 0 3px rgba(84, 180, 53, 0.4));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(84, 180, 53, 0.85));
  }
}
.aft__claim {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.04;
  font-size: clamp(2rem, 5.2vw, 4.6rem);
  max-width: 18ch;
}
.aft__claim em {
  font-style: normal;
  position: relative;
  color: var(--a);
  white-space: normal;
}
.aft__claim em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.04em;
  width: 100%;
  height: 0.07em;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--a),
    color-mix(in srgb, var(--a) 30%, transparent)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease) 0.2s;
}
.adep-footer.is-in .aft__claim em::after {
  transform: scaleX(1);
}

.aft__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  white-space: nowrap;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(15px, 1.3vw, 18px);
  text-decoration: none;
  color: var(--bo);
  background: var(--a);
  border-radius: 14px;
  padding: 1em 1.5em;
  will-change: transform;
  box-shadow:
    0 18px 44px -18px rgba(84, 180, 53, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition:
    background 0.2s,
    box-shadow 0.3s;
}
.aft__cta:hover {
  background: #66d043;
  box-shadow:
    0 24px 56px -18px rgba(84, 180, 53, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.aft__cta i {
  display: inline-block;
  width: 13px;
  height: 26px;
  background: var(--bo);
  -webkit-mask: var(--ry) center/contain no-repeat;
  mask: var(--ry) center/contain no-repeat;
}

/* ---- grid de enlaces grandes (magnéticos) ---- */
.aft__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  border-top: 1px solid color-mix(in srgb, var(--fo) 14%, transparent);
  padding-top: clamp(36px, 4.5vw, 64px);
}
.aft__col {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.aft__label {
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 11px;
  color: color-mix(in srgb, var(--a) 78%, #fff);
}
.aft__big {
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(20px, 2.3vw, 32px);
  color: var(--fo);
  text-decoration: none;
  width: max-content;
  max-width: 100%;
  will-change: transform;
  transition: color 0.2s;
}
.aft__big--sm {
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.25;
}
.aft__big:hover {
  color: var(--a);
}
.aft__sub {
  margin: 0.1em 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--fo) 64%, transparent);
  max-width: 34ch;
}
.aft__sub a {
  color: color-mix(in srgb, var(--a) 85%, #fff);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.aft__sub a:hover {
  border-color: currentColor;
}
/* Horario del footer: mas grande y legible que el resto de subtextos */
.aft__horario {
  display: grid;
  gap: 0.15em;
  margin-top: 0.5em;
  font-size: 18px;
  color: color-mix(in srgb, var(--fo) 78%, transparent);
}
.aft__horario-horas {
  font-weight: 700;
  font-size: 20px;
  color: var(--fo);
}

/* reveal escalonado de columnas */
.aft__col,
.aft__top > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.adep-footer.is-in .aft__top > * {
  opacity: 1;
  transform: none;
}
.adep-footer.is-in .aft__col {
  opacity: 1;
  transform: none;
}
.adep-footer.is-in .aft__col:nth-child(2) {
  transition-delay: 0.08s;
}
.adep-footer.is-in .aft__col:nth-child(3) {
  transition-delay: 0.16s;
}
.adep-footer.is-in .aft__top > :nth-child(2) {
  transition-delay: 0.1s;
}

/* ---- barra inferior: marca + legal + volver ---- */
.aft__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--fo) 12%, transparent);
  padding-top: clamp(20px, 2.4vw, 30px);
}
.aft__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.aft__brand img {
  height: clamp(26px, 3vw, 38px);
  width: auto;
  display: block;
  opacity: 0.95;
}
.aft__brand span {
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: color-mix(in srgb, var(--fo) 70%, transparent);
}
.aft__legal {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--fo) 52%, transparent);
}
.aft__up {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: none;
  border: 1px solid color-mix(in srgb, var(--fo) 18%, transparent);
  color: var(--fo);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 0.6em 1.1em;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.15s;
}
.aft__up:hover {
  border-color: color-mix(in srgb, var(--a) 55%, transparent);
  background: color-mix(in srgb, var(--a) 12%, transparent);
  transform: translateY(-2px);
}

@media (max-width: 820px) {
  .aft__top {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 28px;
  }
  .aft__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .adep-footer *,
  .aft__aurora {
    animation: none !important;
    transition: none !important;
  }
  .aft__col,
  .aft__top > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .aft__claim em::after {
    transform: scaleX(1) !important;
  }
}

/* ===== donar-inject ===== */

/* ===================================================================
   CHECKOUT de donación ADEP — overlay a pantalla completa, 4 pasos:
   Importe -> Tus datos -> Pago (SEAM buty) -> Gracias.
   Se inyecta en preview.html (el injector separa estilos, markup y script).
   window.__donar.open({amount,freq}) lo abre; lo usan nav/hero/footer/hub.
   Vanilla, sin deps. Respeta reduced-motion. Tokens de marca del sitio.
   =================================================================== */
.dov {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  background: color-mix(in srgb, #06120c 78%, transparent);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.32s ease,
    visibility 0.32s;
}
.dov.is-open {
  opacity: 1;
  visibility: visible;
}
.dov[hidden] {
  display: none;
}
.dov__card {
  width: min(940px, 100%);
  max-height: calc(100dvh - clamp(24px, 6vw, 80px));
  overflow: auto;
  background: var(--fondo, #f4efe4);
  color: var(--tinta, #0b1410);
  border-radius: 20px;
  position: relative;
  box-shadow: 0 50px 130px -40px rgba(0, 0, 0, 0.7);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.dov.is-open .dov__card {
  transform: none;
}
@media (min-width: 760px) {
  .dov__card {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

/* panel lateral de marca (izq) */
.dov__aside {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.4vw, 34px);
  background: linear-gradient(
    155deg,
    var(--bosque, #0e2419),
    #123a22 62%,
    #0a1f13
  );
  color: var(--fondo, #f4efe4);
  display: none;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}
@media (min-width: 760px) {
  .dov__aside {
    display: flex;
  }
}
.dov__aside::after {
  content: "";
  position: absolute;
  right: -3vw;
  top: 50%;
  transform: translateY(-50%) rotate(-7deg);
  width: 60%;
  height: 120%;
  opacity: 0.1;
  background: var(--accent, #54b435);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
.dov__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 12px/1 var(--font-display, "Archivo", sans-serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dov__brand i {
  width: 12px;
  height: 15px;
  background: var(--accent, #54b435);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
.dov__claim {
  margin: auto 0;
  font: 800 clamp(1.4rem, 2vw, 2rem)/1.12
    var(--font-display, "Archivo", sans-serif);
  letter-spacing: -0.01em;
}
.dov__claim b {
  color: var(--accent, #54b435);
}
.dov__aside small {
  font: 400 12.5px/1.5 var(--font-body, "Inter", sans-serif);
  opacity: 0.75;
}

/* cuerpo (der) */
.dov__body {
  padding: clamp(20px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dov__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--bosque, #0e2419) 8%, transparent);
  color: var(--bosque, #0e2419);
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition:
    background 0.2s,
    transform 0.2s;
}
.dov__close:hover {
  background: color-mix(in srgb, var(--bosque, #0e2419) 16%, transparent);
  transform: rotate(90deg);
}

/* stepper */
.dov__steps {
  display: flex;
  gap: 6px;
  margin-bottom: clamp(16px, 2vw, 26px);
}
.dov__steps li {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 700 10.5px/1.2 var(--font-display, "Archivo", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tinta, #0b1410) 45%, transparent);
}
.dov__steps li b {
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--bosque, #0e2419) 14%, transparent);
  transition: background 0.4s;
}
.dov__steps li.is-done,
.dov__steps li.is-cur {
  color: var(--brand, #1f5d3a);
}
.dov__steps li.is-done b,
.dov__steps li.is-cur b {
  background: var(--accent, #54b435);
}

/* panes */
.dov__pane {
  display: none;
  animation: dovIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dov__pane.is-on {
  display: block;
}
@keyframes dovIn {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dov h2 {
  margin: 0 0 4px;
  font: 800 clamp(1.3rem, 1.8vw, 1.7rem)/1.1
    var(--font-display, "Archivo", sans-serif);
  letter-spacing: -0.01em;
  color: var(--bosque, #0e2419);
}
.dov__sub {
  margin: 0 0 18px;
  font: 400 14px/1.5 var(--font-body, "Inter", sans-serif);
  color: color-mix(in srgb, var(--tinta, #0b1410) 66%, transparent);
}

/* frecuencia */
.dov__freq {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 11px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--bosque, #0e2419) 8%, transparent);
}
.dov__freq button {
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  background: transparent;
  font: 700 13px/1 var(--font-body, "Inter", sans-serif);
  color: color-mix(in srgb, var(--tinta, #0b1410) 60%, transparent);
  transition:
    background 0.2s,
    color 0.2s;
}
.dov__freq button.is-on {
  background: var(--fondo, #f4efe4);
  color: var(--bosque, #0e2419);
  box-shadow: 0 4px 12px -6px rgba(11, 20, 16, 0.4);
}

/* importes */
.dov__amounts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 520px) {
  .dov__amounts {
    grid-template-columns: repeat(4, 1fr);
  }
}
.dov__amt {
  position: relative;
  border: 1.5px solid
    color-mix(in srgb, var(--bosque, #0e2419) 16%, transparent);
  background: var(--fondo, #f4efe4);
  border-radius: 12px;
  padding: 14px 10px 12px;
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
}
.dov__amt:hover {
  transform: translateY(-2px);
}
.dov__amt.is-on {
  border-color: var(--accent, #54b435);
  box-shadow:
    0 10px 26px -14px rgba(84, 180, 53, 0.6),
    inset 0 0 0 1px var(--accent, #54b435);
}
.dov__amt .eur {
  display: block;
  font: 800 1.5rem/1 var(--font-display, "Archivo", sans-serif);
  color: var(--bosque, #0e2419);
}
.dov__amt .what {
  display: block;
  margin-top: 5px;
  font: 400 11px/1.3 var(--font-body, "Inter", sans-serif);
  color: color-mix(in srgb, var(--tinta, #0b1410) 60%, transparent);
}
.dov__custom {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dov__custom label {
  font: 600 13px/1 var(--font-body, "Inter", sans-serif);
  color: color-mix(in srgb, var(--tinta, #0b1410) 66%, transparent);
}
.dov__inp {
  font: 600 15px/1 var(--font-body, "Inter", sans-serif);
  padding: 11px 13px;
  border-radius: 10px;
  border: 1.5px solid
    color-mix(in srgb, var(--bosque, #0e2419) 18%, transparent);
  background: #fff;
  color: var(--tinta, #0b1410);
  width: 100%;
}
.dov__inp:focus {
  outline: none;
  border-color: var(--accent, #54b435);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--accent, #54b435) 25%, transparent);
}
.dov__customwrap {
  position: relative;
  max-width: 150px;
}
.dov__customwrap::after {
  content: "€";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 15px/1 var(--font-body);
  color: color-mix(in srgb, var(--tinta, #0b1410) 50%, transparent);
}
.dov__customwrap .dov__inp {
  padding-right: 26px;
}

/* formulario datos */
.dov__field {
  margin-bottom: 13px;
}
.dov__field label {
  display: block;
  margin-bottom: 5px;
  font: 600 12.5px/1 var(--font-body, "Inter", sans-serif);
  color: color-mix(in srgb, var(--tinta, #0b1410) 70%, transparent);
}
.dov__err {
  color: #c0392b;
  font: 600 12px/1.3 var(--font-body);
  margin-top: 5px;
  display: none;
}
.dov__field.has-err .dov__inp {
  border-color: #c0392b;
}
.dov__field.has-err .dov__err {
  display: block;
}
.dov__check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font: 400 13px/1.45 var(--font-body, "Inter", sans-serif);
  color: color-mix(in srgb, var(--tinta, #0b1410) 70%, transparent);
  cursor: pointer;
}
.dov__check input {
  margin-top: 2px;
  accent-color: var(--accent, #54b435);
}

/* pago — SEAM buty */
.dov__methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.dov__method {
  border: 1.5px solid
    color-mix(in srgb, var(--bosque, #0e2419) 16%, transparent);
  background: #fff;
  border-radius: 11px;
  padding: 14px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 600 13.5px/1 var(--font-body, "Inter", sans-serif);
  color: var(--bosque, #0e2419);
  transition:
    border-color 0.2s,
    transform 0.15s;
}
.dov__method:hover {
  transform: translateY(-2px);
}
.dov__method.is-on {
  border-color: var(--accent, #54b435);
  box-shadow: inset 0 0 0 1px var(--accent, #54b435);
}
.dov__method .ic {
  font-size: 17px;
}
.dov__seam {
  margin: 14px 0;
  padding: 13px 14px;
  border-radius: 11px;
  border: 1px dashed color-mix(in srgb, var(--brand, #1f5d3a) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #54b435) 8%, transparent);
  font: 500 12.5px/1.5 var(--font-body, "Inter", sans-serif);
  color: var(--brand, #1f5d3a);
}
.dov__seam b {
  color: var(--bosque, #0e2419);
}
.dov__method[disabled],
.dov__freq button[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
}
.dov__payerr {
  margin: 14px 0;
  padding: 13px 14px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, #c0392b 45%, transparent);
  background: color-mix(in srgb, #c0392b 8%, transparent);
  font: 600 12.5px/1.5 var(--font-body, "Inter", sans-serif);
  color: #c0392b;
}

/* resumen + botones */
.dov__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 4px;
  padding-top: 14px;
  border-top: 1px solid
    color-mix(in srgb, var(--bosque, #0e2419) 12%, transparent);
}
.dov__summary .lbl {
  font: 600 13px/1 var(--font-body);
  color: color-mix(in srgb, var(--tinta, #0b1410) 60%, transparent);
}
.dov__summary .val {
  font: 800 1.5rem/1 var(--font-display, "Archivo", sans-serif);
  color: var(--bosque, #0e2419);
}
.dov__summary .val small {
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--tinta, #0b1410) 55%, transparent);
}
.dov__actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.dov__btn {
  flex: 1;
  border: 0;
  cursor: pointer;
  padding: 14px 18px;
  border-radius: 11px;
  font: 700 14.5px/1 var(--font-display, "Archivo", sans-serif);
  letter-spacing: 0.01em;
  transition:
    transform 0.15s,
    background 0.2s,
    box-shadow 0.2s;
}
.dov__btn--primary {
  background: var(--accent, #54b435);
  color: var(--bosque, #0e2419);
  box-shadow: 0 16px 34px -16px rgba(84, 180, 53, 0.65);
}
.dov__btn--primary:hover {
  background: #63c93f;
  transform: translateY(-2px);
}
.dov__btn--ghost {
  flex: 0 0 auto;
  background: transparent;
  color: color-mix(in srgb, var(--tinta, #0b1410) 66%, transparent);
  box-shadow: inset 0 0 0 1.5px
    color-mix(in srgb, var(--bosque, #0e2419) 18%, transparent);
}
.dov__btn--ghost:hover {
  background: color-mix(in srgb, var(--bosque, #0e2419) 6%, transparent);
}
.dov__btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* gracias */
.dov__done {
  text-align: center;
  padding: 16px 0 6px;
}
.dov__tick {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #54b435) 18%, transparent);
  display: grid;
  place-items: center;
}
.dov__tick svg {
  width: 32px;
  height: 32px;
}
.dov__tick svg path {
  fill: none;
  stroke: var(--brand, #1f5d3a);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: dovTick 0.5s 0.15s ease forwards;
}
@keyframes dovTick {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dov,
  .dov__card,
  .dov__pane,
  .dov__tick svg path {
    transition: none !important;
    animation: none !important;
  }
  .dov__tick svg path {
    stroke-dashoffset: 0;
  }
}

/* ===== impacto-inject ===== */

/* ===================================================================
   IMPACTO — "LAMINA DE RESULTADOS" (rediseno del cliente, injector-only)
   Sustituye la fila plana de 4 cifras acento centradas ("barra blanca")
   por una plancha editorial coherente con el hero informe:
   - cabecera con kicker + meta y filete (la anade impacto.js FUERA del host)
   - cifra HEROICA en trazo (outline bosque, como el "14" del hero) + 3 filas
     de ledger con indice 01-03, filetes finos y tipografia tabular
   - footline de cierre con el rayo de marca
   El count-up del bloque NO se toca: solo se re-estiliza su DOM runtime
   (.adep-contador__item > __cifra + __etiqueta). !important donde hay
   que ganar al CSS de elevacion de index.html y al runtime del bloque.
   =================================================================== */

/* ---- cabecera y footline (elementos que inyecta impacto.js) ---- */
#impacto .imp-head,
#impacto .imp-foot {
  width: var(--adep-ancho, min(92vw, 1320px));
  margin-inline: auto;
  box-sizing: border-box;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
}
#impacto .imp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(11, 20, 16, 0.15);
  padding-bottom: clamp(12px, 1.4vw, 16px);
  margin-bottom: clamp(30px, 4.5vw, 58px);
}
#impacto .imp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: 600 clamp(11px, 1.05vw, 12.5px)/1.25
    var(--font-display, "Archivo", system-ui, sans-serif);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand, #1f5d3a);
}
#impacto .imp-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--brand, #1f5d3a);
}
#impacto .imp-meta {
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(11, 20, 16, 0.54);
}
#impacto .imp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(11, 20, 16, 0.15);
  margin-top: clamp(32px, 4.5vw, 60px);
  padding-top: clamp(13px, 1.5vw, 18px);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(11, 20, 16, 0.54);
}
#impacto .imp-foot__l {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: rgba(11, 20, 16, 0.62);
}
#impacto .imp-rayo {
  display: inline-block;
  width: 11px;
  height: 22px;
  flex: 0 0 auto;
  background: var(--accent, #54b435);
  -webkit-mask: var(--rayo-svg) center/contain no-repeat;
  mask: var(--rayo-svg) center/contain no-repeat;
}
#impacto .imp-foot__m {
  color: rgba(11, 20, 16, 0.4);
}

/* ---- host: de fila plana a retícula editorial ---- */
#impacto .bloque-host.adep-contador {
  counter-reset: impRow;
  min-height: 0 !important; /* la base pone 100vh -> estiraba la plancha y creaba el vacio "barra blanca" */
  display: grid !important;
  grid-template-columns: minmax(
    0,
    1fr
  ) !important; /* base movil: una columna */
  gap: 0 !important;
}
@media (min-width: 1000px) {
  #impacto .bloque-host.adep-contador {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    grid-template-rows: repeat(3, auto);
    column-gap: clamp(34px, 4.5vw, 64px) !important;
    align-items: stretch;
  }
}

/* ---- items: alineacion editorial (pisa el centrado del bloque) ---- */
#impacto .adep-contador__item {
  align-items: flex-start !important;
  text-align: left !important;
  gap: 0 !important;
}

/* ---- item 1 = CIFRA HEROICA (columna izquierda, como la lamina del hero) ---- */
#impacto .adep-contador__item:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-block: clamp(8px, 1vw, 14px);
}
@media (min-width: 1000px) {
  #impacto .adep-contador__item:first-child {
    grid-column: 1;
    grid-row: 1 / span 3;
    border-right: 1px solid rgba(11, 20, 16, 0.15);
    padding-right: clamp(24px, 3vw, 46px);
  }
}
#impacto .adep-contador__item:first-child .adep-contador__cifra {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif) !important;
  font-weight: 900 !important;
  font-size: clamp(84px, 12.5vw, 182px) !important;
  line-height: 0.82 !important;
  letter-spacing: -0.035em !important;
  color: var(--bosque, #0e2419) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
@supports (-webkit-text-stroke: 2px black) {
  #impacto .adep-contador__item:first-child .adep-contador__cifra {
    color: transparent !important;
    -webkit-text-stroke: 2.5px var(--bosque, #0e2419);
  }
}
#impacto .adep-contador__item:first-child .adep-contador__etiqueta {
  margin-top: clamp(18px, 2.2vw, 26px) !important;
  font: 600 clamp(15px, 1.55vw, 19px)/1.4
    var(--font-body, "Inter", system-ui, sans-serif) !important;
  color: var(--tinta, #0b1410) !important;
  opacity: 1 !important;
  max-width: 26ch !important;
}
/* frule de acento sobre la etiqueta heroica (eco del informe__frule del hero) */
#impacto .adep-contador__item:first-child .adep-contador__etiqueta::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--brand, #1f5d3a);
  margin-bottom: 12px;
}

/* ---- items 2-4 = LEDGER (filas con indice, cifra tabular y filetes) ---- */
#impacto .adep-contador__item:nth-child(n + 2) {
  counter-increment: impRow;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr);
  /* !important: mi propia regla base de item (gap:0/flex-start) es !important y ganaria */
  align-items: baseline !important; /* indice, cifra y etiqueta comparten linea base = tabla editorial */
  column-gap: clamp(18px, 2.6vw, 34px) !important;
  padding-block: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid rgba(11, 20, 16, 0.15);
}
@media (min-width: 1000px) {
  #impacto .adep-contador__item:nth-child(n + 2) {
    grid-column: 2;
  }
}
#impacto .adep-contador__item:last-child {
  border-bottom: 1px solid rgba(11, 20, 16, 0.15);
}
#impacto .adep-contador__item:nth-child(n + 2)::before {
  content: "0" counter(impRow);
  font: 900 clamp(14px, 1.5vw, 19px)/1
    var(--font-display, "Archivo", system-ui, sans-serif);
  color: var(--brand, #1f5d3a);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
#impacto .adep-contador__item:nth-child(n + 2) .adep-contador__cifra {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(38px, 4.6vw, 66px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
  color: var(--bosque, #0e2419) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  min-width: 2.15ch; /* 2 digitos tabulares: "2" y "50" comparten borde derecho */
}
#impacto .adep-contador__item:nth-child(n + 2) .adep-contador__etiqueta {
  font: 500 clamp(13px, 1.35vw, 15.5px)/1.45
    var(--font-body, "Inter", system-ui, sans-serif) !important;
  color: rgba(11, 20, 16, 0.72) !important;
  opacity: 1 !important;
  max-width: 34ch !important;
}

/* ---- movil: la fila heroica cierra con filete y el ledger respira ---- */
@media (max-width: 999px) {
  #impacto .adep-contador__item:first-child {
    padding-bottom: clamp(24px, 6vw, 36px);
  }
  #impacto .adep-contador__item:nth-child(n + 2) {
    column-gap: clamp(14px, 4vw, 22px);
  }
  #impacto .imp-meta {
    display: none;
  } /* en movil manda el kicker; el meta repite info del footline */
}

/* ===== polish-inject ===== */

/* ===================================================================
   POLISH transversal — cohesion del recorrido (capa final del injector).
   Solo afina lo ya existente: nav como pieza de cristal intencional y
   radios de boton coherentes con el CTA del hero (pildora).
   =================================================================== */

/* La nav flotante: el backdrop-filter de .nav__links pintaba un RECTANGULO
   fantasma sobre el hero claro. Se convierte en pastilla de cristal (borde
   de luz + radio) -> deja de ser un artefacto y pasa a ser un elemento. */
#nav-site .nav__links {
  border-radius: 999px;
  padding: 9px 16px;
  background: color-mix(in srgb, var(--fondo, #f4efe4) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--fondo, #f4efe4) 60%, transparent);
  box-shadow: 0 10px 34px -22px rgba(11, 20, 16, 0.4);
}
/* con la nav ya solida (scrolleada), la pastilla se disuelve en la barra */
#nav-site.nav.is-solid .nav__links {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
@media (max-width: 760px) {
  /* el menu movil desplegable conserva su forma original */
  #nav-site .nav__links {
    border-radius: 0;
    padding: 20px clamp(16px, 4vw, 48px);
    background: color-mix(in srgb, var(--fondo, #f4efe4) 97%, transparent);
    border: 0;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  }
}

/* Radio del CTA de la nav = pildora, como el CTA del hero y el del footer
   (adep-global lo dejaba en 2px y desentonaba con el sistema de botones). */
#nav-site .nav__cta {
  border-radius: 999px !important;
}

/* ===== CAPITULOS EDITORIALES (F3.4): el sumario del hero (01 Recogida / 02 Aulas /
   03 Impacto) se paga a lo largo de la pagina. El counter original quedo huerfano
   (solo #impacto incrementa -> pintaba "CAP 01"): lo pisamos con contenido fijo.
   CAP 01 vive en la cabecera del equipo (scroll.js) y CAP 02 en el cap del mapa. */
section[data-bloque="contador-impacto"]::after {
  content: "CAP 03 · Impacto" !important;
  left: var(
    --adep-edge,
    clamp(24px, 6vw, 88px)
  ) !important; /* a la reticula unificada */
}

/* ===== motion-inject ===== */

/* MOTOR DE MOVIMIENTO — Lenis (scroll mantequilla) + GSAP ScrollTrigger.
   Solo activo con ?motion=on. El default del sitio queda intacto (sin estas clases no pasa nada).
   Reglas base recomendadas por Lenis + override para matar el doble-smoothing del scroll-behavior base. */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
} /* Lenis maneja el suavizado; sin esto las anclas animan dos veces */
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ===== COSTURAS (transitions.js) — velos compositor-only, SOLO existen con el motor on ===== */
/* gateado doble: los crea transitions.js (?motion=on) y el CSS solo aplica bajo html.motion-on */
html.motion-on .adep-veil {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 6;
}
html.motion-on .adep-veil--equipo {
  top: 0;
  height: 26vh;
  background: linear-gradient(
    180deg,
    var(--fondo, #f4efe4) 0%,
    rgba(244, 239, 228, 0) 100%
  );
}
/* (retirado) .adep-veil--hub: el hub paso a fondo hueso -> la costura crema->crema no existe */

/* ===== letters2-inject ===== */

/* ===================================================================
   LETRAS VIVAS SECUNDARIAS (.vb-l2) — efecto "inventado" para texto
   corto NO-titulo (nav, kickers/eyebrows, labels, cifras). Las letras
   persiguen al cursor (LERP en rAF, letters2.js). DISTINTO del canonico
   .vb-l de titulos (var-final.js): aqui el desplazamiento es HACIA el
   cursor y el suavizado es por LERP, no por transicion CSS.
   El transform lo escribe JS; el CSS solo da la base inline-block y la
   transicion de color (el color no afecta layout). Sin JS (reduced-motion
   o pointer:coarse) NO se envuelve nada: el texto queda intacto.
   =================================================================== */
.vb-t2 {
  display: inline;
} /* run de texto: 1 solo item en contenedores flex */
.vb-w2 {
  display: inline-block;
  white-space: nowrap;
}
.vb-l2 {
  display: inline-block;
  position: relative;
  transform-origin: 50% 100%;
  transition: color 0.25s linear;
  backface-visibility: hidden;
}

/* ===== aula-inject ===== */

/* AULA DE MECANOGRAFIA (spec adep-mecanografia fase 4): bloque tras el contador de impacto y
   cuarta columna del pie. Inline a proposito: no depende de un CSS externo cacheado. */
.adep-aula{
  background:var(--crema-2, #e9e3d6);
  padding-block:clamp(56px, 7vw, 104px);
}
.adep-aula__inner{
  width:min(100% - 2*clamp(16px, 4vw, 48px), 1180px);
  margin-inline:auto;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(28px, 5vw, 72px); align-items:center;
}
.adep-aula__kicker{
  margin:0 0 12px; color:var(--brand);
  font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
}
.adep-aula__titulo{
  margin:0 0 16px; color:var(--tinta);
  font-weight:800; font-size:clamp(28px, 3.6vw, 46px); line-height:1.05; letter-spacing:-.01em;
  text-wrap:balance;
}
.adep-aula__sub{ margin:0 0 24px; max-width:48ch; color:color-mix(in srgb, var(--tinta) 72%, transparent); font-size:17px; line-height:1.6; }
.adep-aula__acciones{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.adep-aula__cta{
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--cta-bg, var(--brand)); color:var(--cta-fg, #fff);
  border-radius:2px; padding:15px 22px;
  font-weight:600; font-size:16px; text-decoration:none;
  transition:filter .2s;
}
.adep-aula__cta:hover{ filter:brightness(1.1); }
.adep-aula__cta::after{
  content:""; width:.62em; height:1.1em; background:currentColor;
  -webkit-mask:var(--rayo-svg) center/contain no-repeat; mask:var(--rayo-svg) center/contain no-repeat;
}
.adep-aula__idiomas{ margin:0; font-size:14px; color:color-mix(in srgb, var(--tinta) 68%, transparent); }
.adep-aula__idiomas a{ color:var(--brand); font-weight:600; }

/* fila de reposo con los colores de dedo del aula */
.adep-aula__fila{ margin:0; }
.adep-aula__teclas{
  display:flex; gap:clamp(4px, .8vw, 10px);
  padding:clamp(10px, 1.6vw, 18px);
  background:var(--fondo, #f4efe4); border-radius:14px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tinta) 10%, transparent);
}
.adep-aula__k{
  position:relative; flex:1 1 0; min-width:0; aspect-ratio:1;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--dedo) 16%, #fbf8f1);
  border:1px solid color-mix(in srgb, var(--dedo) 40%, transparent);
  border-bottom:4px solid var(--dedo);
  border-radius:8px;
  font-weight:700; font-size:clamp(16px, 2.2vw, 26px); color:var(--tinta);
  transition:transform .18s ease, background-color .18s ease, color .18s ease;
}
.adep-aula__k--relieve::after{
  content:""; position:absolute; bottom:18%; left:50%; width:26%; height:2px; margin-left:-13%;
  background:currentColor; opacity:.55; border-radius:2px;
}
.adep-aula__hueco{ flex:.5 1 0; }
.adep-aula__k.is-on{ background:var(--dedo); color:#fbf8f1; transform:translateY(2px); }
.adep-aula__pie{ margin:12px 2px 0; font-size:13px; color:color-mix(in srgb, var(--tinta) 64%, transparent); }

@media (max-width:820px){
  .adep-aula__inner{ grid-template-columns:minmax(0, 1fr); }
}
@media (prefers-reduced-motion:reduce){
  .adep-aula__k{ transition:none; }
  .adep-aula__k.is-on{ transform:none; }
}

/* pie: cuarta columna APRENDE (4 / 2 / 1 columnas) */
.aft__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.adep-footer.is-in .aft__col:nth-child(4){ transition-delay:.24s; }
@media (max-width:1100px){
  .aft__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:820px){
  .aft__grid{ grid-template-columns:minmax(0, 1fr); }
}

/* ===== FIX: banda verde bajo el mapa (2026-09-23) =====
   El degradado .viaje__scrim colgaba de .viaje__driver, asi que su bottom:0
   era el fondo del DRIVER, no el de la seccion. Como la regla general
   "section { padding-block: var(--sp-section) }" da a #viaje 90px de relleno
   inferior, esos 90px quedaban por debajo del degradado y enseñaban el fondo
   --sea en crudo: una banda verde con corte duro antes de la seccion crema.

   Arreglo: en index.html el degradado pasa a ser hijo directo de
   <section class="viaje">, de modo que bottom:0 es el borde real de la seccion
   y cubre tambien el relleno. Aqui solo se documenta; no hace falta tocar el
   relleno, que se conserva tal cual estaba. */

/* ===== FIX pie de pagina + horario de atencion (2026-09-23) =====

   1) Solape del email sobre la columna de al lado.
      .aft__big lleva "width:max-content; max-width:100%", pero
      "contact@adepoficial.org" es una sola palabra sin puntos de corte
      naturales para el navegador: la caja se limitaba al ancho de la columna y
      el TEXTO se salia igual, montandose sobre "@dep.africa".
      overflow-wrap:anywhere le da permiso para partir donde haga falta. */
.aft__big {
  overflow-wrap: anywhere;
}

/* El email es el texto mas largo del pie y se partia por donde caia:
   "contact@adepoficial." + "org", o peor, "...adepoficial.or" + "g".
   Un tamaño fijo no lo resuelve: el ancho de la columna depende de si la
   rejilla esta a 4, 2 o 1 columnas, no del ancho de la ventana, asi que
   cualquier clamp en vw acierta en unas pantallas y falla en otras.

   La medida correcta es el ancho de SU columna, no el de la ventana: con una
   consulta de contenedor, el cuerpo se ata a 8cqw (aprox. lo que ocupan sus
   23 caracteres) y nunca pasa de 22px. Asi entra siempre de una pieza y se
   puede fijar nowrap sin miedo a desbordes. */
.aft__col:first-child {
  container-type: inline-size;
}
.aft__col:first-child .aft__big {
  font-size: clamp(16px, 1.55vw, 22px);   /* si no hay consultas de contenedor */
}
@supports (container-type: inline-size) {
  .aft__col:first-child .aft__big {
    font-size: min(22px, 8cqw);
    white-space: nowrap;
  }
}

/* 2) Horario de atencion al publico, junto a la direccion. */
.aft__horario {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 0.6em;
  margin-top: 0.35em;
}
/* Dias y horas en dos lineas: el separador "·" quedaba colgando al final de
   la primera cuando la columna es estrecha. */
.aft__horario {
  flex-direction: column;
}
.aft__horario-horas {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--fo) 92%, transparent);
}

/* ===================================================================
   MOVIL: huecos vacios. Dos causas y su arreglo.
   1) 100vh en moviles incluye la barra del navegador -> las escenas
      sticky sobresalen por abajo y dejan una franja muerta. Se pasa a
      100svh (la altura realmente visible).
   2) La portada del informe estiraba la lamina a la altura de la
      columna de texto, dejando un hueco largo sobre el titular.
   =================================================================== */
html,
body {
  overflow-x: clip;
}

@media (max-width: 1000px) {
  /* --- Portada del informe: una sola columna, lamina con proporcion fija --- */
  section[data-bloque="hero-split"].hero-informe {
    min-height: 100svh;
  }
  section[data-bloque="hero-split"].hero-informe .informe__cover {
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(22px, 4vw, 36px);
  }
  section[data-bloque="hero-split"].hero-informe .informe__lead {
    border-right: none;
    padding-right: 0;
    justify-content: flex-start;
  }
  section[data-bloque="hero-split"].hero-informe .adep-hero__media {
    aspect-ratio: 4 / 3;
    min-height: 0 !important;
    max-height: min(52svh, 420px) !important;
  }

  /* --- Escenas sticky a pantalla real (equipo / htrack) --- */
  .qzs__sticky,
  .vh__track,
  .ex__track {
    height: 100svh;
  }
  .vh__card,
  .ex__card {
    height: min(66svh, 560px);
  }
}

@media (max-width: 760px) {
  /* el carril horizontal cabe en una pantalla estrecha sin aire sobrante */
  .vh__track,
  .ex__track {
    padding-inline: clamp(16px, 5vw, 32px);
  }
  .vh__card,
  .ex__card {
    flex-basis: 82vw;
    height: min(62svh, 520px);
  }
}