/* ===========================================================================
   HOJA DE ESTILOS — Ampiria Energy (V29)
   ---------------------------------------------------------------------------
   Este archivo es todo el diseño del sitio: colores, tipografía, medidas,
   movimiento y la maqueta de cada sección. index.html solo trae la estructura
   y contenido.js los textos. Hasta la V28 este CSS vivía dentro de index.html;
   en V29 se separó sin cambiar una sola regla.

   CÓMO ESTÁ ORDENADO (índice — buscá el número con Ctrl+F, p. ej. «5 ·»):
   1 · TOKENS — tipografía, paleta de marca, medidas, logo, superficies y movimiento (:root)
   2 · BASE — reset, cuerpo, selección, foco, barra de scroll
   3 · PIEZAS COMPARTIDAS — placa de instrumento, reveals (aparición al scroll), prensado, eyebrow, títulos, barra de progreso, grano
   4 · BARRA DE NAVEGACIÓN — logo, menú, idioma, botón de contacto, menú móvil
   5 · PORTADA (HERO) — video de fondo, titular, párrafo, botones, tres cifras
   6 · BOTONES — .btn, .btn.ghost, .btn.on-light
   7 · CINTA DE CIFRAS (ticker) — la banda que se desplaza bajo la portada
   8 · SECCIONES — estructura común (.sec, .inner), fondos (.stone/.dark/.sand), encabezado (kicker + título + bajada)
   9 · QUIÉNES SOMOS (#platform) — tarjetas de cifras (.stat-row / .stat) e íconos
   10 · INVERSIONES (#operations) — tarjetas por tecnología, participación de capacidad, cadena de valor (.ops-chain)
   11 · HUELLA (#footprint) — mapa interactivo, ticks, compás, escala, pines, panel de país (.map-readout), cajas de país (.cs)
   12 · NOTICIAS (#news) — tarjetas del Newsroom y visor «Ver todas las noticias» (.news-browser)
   13 · CONTACTO (#contact) — columna de texto + formulario (.cform)
   14 · PIE DE PÁGINA — logo, descripción, columnas de enlaces, línea legal
   15 · AJUSTES FINALES — accesibilidad táctil (≥44 px) y retoques de las versiones V23–V27
   16 · ALINEACIÓN Y TARJETAS POR SECCIÓN — estados editables desde contenido.js → secciones (V31)

   REGLAS DE LA CASA
   · Los colores, fuentes y tiempos NO se escriben sueltos: se usan las
     variables de la sección 1 (var(--brand-green), var(--font-display),
     var(--dur-base)…). Para cambiar un color en todo el sitio, se cambia la
     variable, no las 40 reglas que la usan. Los cuatro colores de marca
     además se pueden cambiar desde editor.html sin tocar este archivo.
   · Orden = prioridad. En CSS, ante dos reglas con la misma fuerza gana la
     que está más abajo. Por eso las secciones 15 y 16 van al final y no se mueven.
   · Cada bloque empieza con un comentario que dice a qué HTML corresponde y
     dónde se editan sus textos. Las notas «V23», «V26»… cuentan por qué una
     regla es como es: leerlas antes de borrarla.
   · Puntos de quiebre (anchos de pantalla) usados: 430, 520, 560, 640, 700,
     760, 820, 860, 900, 980, 1100, 1120, 1180 px. Los más importantes:
     ≤560 teléfono · ≤820 tableta · ≥1120 el menú completo aparece en la barra.
   · `@media (hover:hover) and (pointer:fine)` = solo con mouse (no en táctil).
     `@media (prefers-reduced-motion: reduce)` = el visitante pidió menos
     movimiento: se apagan animaciones y el video del hero.
   · El detalle completo del sistema de diseño está en MANUAL-DE-DISENO.md.
   =========================================================================== */

/* ==============================================================================
   1 · TOKENS — tipografía, paleta de marca, medidas, logo, superficies y movimiento (:root)
   Todo el sitio se deriva de estas variables. Cambiar un color o una fuente es cambiarlo acá, una sola vez.
   ============================================================================== */

/* ==========================================================================
   TIPOGRAFÍA — Aptos, según el manual de marca. Sin cambios respecto a V21:
   no se introduce ninguna familia nueva — la elevación en V22 viene de
   escala, tracking, ritmo y medida editorial, nunca de un font-swap.
   Aptos se pide primero por nombre de familia, así cualquier máquina que la
   tenga instalada (viene con Microsoft 365) renderiza la fuente de marca
   directamente. No se declara @font-face porque los archivos webfont
   licenciados no están en este repositorio, y apuntar a archivos que no
   existen solo produce errores 404 en consola. Para auto-hospedarla cuando
   los .woff2 licenciados estén disponibles, colocarlos en /fonts/ y agregar:
      @font-face{font-family:"Aptos";src:url("/fonts/aptos-regular.woff2") format("woff2");font-weight:400;font-display:swap;}
      @font-face{font-family:"Aptos";src:url("/fonts/aptos-semibold.woff2") format("woff2");font-weight:600;font-display:swap;}
      @font-face{font-family:"Aptos";src:url("/fonts/aptos-bold.woff2") format("woff2");font-weight:700;font-display:swap;}
      @font-face{font-family:"Aptos Display";src:url("/fonts/aptos-display.woff2") format("woff2");font-weight:400 700;font-display:swap;}
   No se usa ningún CDN de terceros: los que sirven Aptos la redistribuyen
   sin licencia webfont. Mientras tanto, la pila de respaldo de abajo carga
   con la página — Segoe UI Variable / Segoe UI son las métricas residentes
   en el sistema operativo más cercanas a Aptos.
   ========================================================================== */

:root{
  /* ---- PALETA DE MARCA — los únicos cuatro colores del sistema, sin
     cambios desde V21 (compromiso explícito de marca, no se toca). -------
     Pares de contraste certificados AA y usados como tales:
       blanco sobre --brand-ink     15.43:1   --brand-ink sobre --brand-light 11.06:1
       --brand-light sobre --brand-ink 11.06:1  --brand-blue sobre --brand-light 7.05:1
       --brand-green sobre --brand-ink  6.97:1  --brand-ink sobre --brand-green 6.97:1
     --brand-green NUNCA se usa como texto sobre nada que no sea --brand-ink
     (2.21:1 sobre blanco, 1.59:1 sobre --brand-light — ambos fallan AA); en
     el resto aparece solo como relleno de bloque, forma, o filete de 3px+.
     --brand-light nunca se usa como texto sobre blanco (1.40:1) — es un fondo. */
  --brand-ink:#212431;
  --brand-light:#deddad;
  --brand-green:#9cb86c;
  --brand-blue:#283d8c;

  /* ---- MEDIDAS EDITABLES — ancho máximo de las cajas de texto, en `ch`
     (el ancho del carácter «0» de la fuente en curso, así la medida se
     autocorrige si cambia el cuerpo o la familia). Estos cuatro valores son
     los que se tocan desde editor.html; `contenido.js → medidas` los pisa al
     cargar la página. Los de fábrica son exactamente los de la V23, así que
     sin tocar nada el sitio se ve igual. Rango de lectura sano para prosa:
     45–75 caracteres por renglón. ------------------------------------- */
  --m-hero-sub:44ch;      /* párrafo de la portada */
  --m-h2:19ch;            /* titulares de sección */
  --m-h2-largo:27ch;      /* titulares de sección, variante larga */
  --m-lede:58ch;          /* bajadas / párrafos de entrada de sección */

  /* ---- LOGO EDITABLE (V28) — alto del logo en cada lugar donde aparece,
     en píxeles. Igual que las medidas: los tres valores se tocan desde
     editor.html (sección «Logo») y `contenido.js → logo` los pisa al cargar.
     Los de fábrica son exactamente los de la V27 (52 / 40 / 64), así que
     sin tocar nada el sitio se ve igual. El ancho sale solo de la
     proporción del archivo (3:1). ---------------------------------------- */
  --logo-nav-h:52px;        /* barra superior, arriba de todo */
  --logo-nav-h-scroll:40px; /* barra superior compactada, al hacer scroll */
  --logo-pie-h:64px;        /* pie de página */
/* V31.5 — en pantallas de hasta 820 px el logo de la barra usa su propio alto
   (editor → «Logo» → «Alto en teléfono y tableta»); si contenido.js no lo trae,
   hereda los de escritorio. */
--logo-nav-h-movil: var(--logo-nav-h);
--logo-nav-h-movil-scroll: var(--logo-nav-h-scroll);

/* ---- TAMAÑOS DE TEXTO EDITABLES (V30) — ocho factores que multiplican el
   tamaño de fábrica de cada familia de texto. 1 = tal cual; 1.2 = un 20 %
   más grande. Se tocan desde editor.html («Tamaños de texto», en %) y
   `contenido.js → tipografia` los pisa al cargar. Los tamaños de fábrica
   siguen escritos en cada regla (`font-size:calc(<tamaño> * var(--t-…))`),
   así que para cambiar el DISEÑO se edita el tamaño; para que el CLIENTE lo
   ajuste sin tocar CSS, se usa el factor. --t-general va sobre <html>, así
   que escala todo lo que está en rem (casi todo) de una vez. -------------- */
--t-general:1;       /* Todo el texto */
--t-hero-h1:1;       /* Titular de la portada */
--t-hero-sub:1;      /* Párrafo de la portada */
--t-titulares:1;     /* Titulares de sección */
--t-bajadas:1;       /* Bajadas de sección */
--t-cifras:1;        /* Cifras grandes */
--t-botones:1;       /* Botones y menú */
--t-rotulos:1;      /* Rótulos pequeños */
--t-tarjetas:1;     /* V31: letra de las tarjetas; cada sección lo pisa desde contenido.js → secciones */       /* Rótulos pequeños */

  /* ---- superficies y tinta, todas derivadas de los cuatro ---------------- */
  --ink: var(--brand-ink);
  --ink-2: color-mix(in srgb, var(--brand-ink) 92%, #050506);
  --ink-3: color-mix(in srgb, var(--brand-ink) 84%, #050506);
  --ink-line: color-mix(in srgb, var(--brand-light) 18%, transparent);
  --ink-line-soft: color-mix(in srgb, var(--brand-light) 9%, transparent);
  --ink-line-strong: color-mix(in srgb, var(--brand-light) 30%, transparent);
  --ink-text:#f7f8f7;                                              /* 15.43:1 */
  --ink-muted: color-mix(in srgb, var(--brand-light) 76%, transparent); /* 7.02:1 */
  --ink-faint: color-mix(in srgb, var(--brand-light) 62%, transparent); /* 5.16:1 */

  /* las secciones claras son blancas; --brand-light sigue en el sistema como
     color de bloque (placas de íconos, filetes, fondo del mapa) — nunca como
     fondo de página */
  --stone:#fcfcfb;
  --stone-2: color-mix(in srgb, var(--stone) 97%, var(--brand-ink));
  --stone-3: color-mix(in srgb, var(--stone) 93%, var(--brand-ink));
  --stone-line: color-mix(in srgb, var(--brand-ink) 16%, transparent);
  --stone-line-strong: color-mix(in srgb, var(--brand-ink) 26%, transparent);
  --stone-text: var(--brand-ink);                               /* 15.43:1 */
  --stone-muted: color-mix(in srgb, var(--brand-ink) 76%, transparent); /* 7.00:1 */
  --stone-faint: color-mix(in srgb, var(--brand-ink) 66%, transparent); /* 4.86:1 */

  /* ---- acentos: verde siempre solo sobre tinta, azul solo sobre claro ---- */
  --accent-on-ink: var(--brand-green);
  --accent-on-light: var(--brand-blue);

  --font-display: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Aptos Mono", "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;

  --container: 1400px;
  --container-wide: 1620px;
  --edge: clamp(20px, 5vw, 80px);

  /* Movimiento — lenguaje único para todo el sitio (ver GUIA-DE-EDICION.md
     §Motion). Las entradas usan ease-out fuerte, el movimiento en pantalla
     ease-in-out, hover/color ease simple, prensado micro-scale 0.97. */
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-inout: cubic-bezier(.77,0,.175,1);
  --ease-press: cubic-bezier(.2,0,0,1);
  --dur-micro: 160ms;
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 720ms;
  --dur-reveal: 900ms;
}


/* ==============================================================================
   2 · BASE — reset, cuerpo, selección, foco, barra de scroll
   Reglas globales sobre etiquetas HTML. Rara vez hay que tocarlas.
   ============================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:calc(100% * var(--t-general)); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ink); color:var(--ink-text);
  font-family:var(--font-body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

::selection{ background:var(--brand-green); color:var(--brand-ink); }
a{ color:inherit; }
img,svg{ max-width:100%; display:block; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--brand-green); outline-offset:3px; border-radius:1px; }
.sec.stone :focus-visible, .sec.stone2 :focus-visible, .sec.sand :focus-visible{ outline-color:var(--brand-blue); }
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--brand-light) 28%, var(--brand-ink)); border:3px solid var(--ink); border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--brand-light) 42%, var(--brand-ink)); }

.wrap{ max-width:var(--container); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); }
.num-tab{ font-variant-numeric:tabular-nums; }


/* ==============================================================================
   3 · PIEZAS COMPARTIDAS — placa de instrumento, reveals (aparición al scroll), prensado, eyebrow, títulos, barra de progreso, grano
   Clases que se reutilizan en varias secciones. Un cambio acá se ve en todo el sitio.
   ============================================================================== */

/* ---------- SISTEMA DE PLACA DE INSTRUMENTO — reutilizado en Hero, mapa,
   y formulario. Cuatro ticks de esquina sobre un marco; es la firma visual
   de V22 y lo que une secciones dispares en un solo lenguaje. ---------- */
.instrument{ position:relative; }
.i-tick{ position:absolute; width:22px; height:22px; z-index:3; opacity:0.55; pointer-events:none; }
.i-tick.tl{ top:0; left:0; border-top:1.5px solid currentColor; border-left:1.5px solid currentColor; }
.i-tick.tr{ top:0; right:0; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; }
.i-tick.bl{ bottom:0; left:0; border-bottom:1.5px solid currentColor; border-left:1.5px solid currentColor; }
.i-tick.br{ bottom:0; right:0; border-bottom:1.5px solid currentColor; border-right:1.5px solid currentColor; }

/* ---------- REVEALS — lenguaje de movimiento único ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-mask{ overflow:hidden; display:block; }
.reveal-mask > *{ display:block; transform:translateY(110%); transition:transform var(--dur-reveal) var(--ease-out); }
.reveal-mask.in > *{ transform:translateY(0); }
.stagger > *{ opacity:0; transform:translateY(20px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.stagger.in > *{ opacity:1; transform:translateY(0); }
.stagger.in > *:nth-child(1){ transition-delay:0ms; }
.stagger.in > *:nth-child(2){ transition-delay:50ms; }
.stagger.in > *:nth-child(3){ transition-delay:100ms; }
.stagger.in > *:nth-child(4){ transition-delay:150ms; }
.stagger.in > *:nth-child(5){ transition-delay:200ms; }
.stagger.in > *:nth-child(6){ transition-delay:250ms; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-mask > *, .stagger > *{ opacity:1; transform:none; transition:none; }
}

/* prensado — todo elemento presionable responde igual en todo el sitio */
.press{ transition:transform var(--dur-micro) var(--ease-press); }
.press:active{ transform:scale(.97); }
.eyebrow{ font-family:var(--font-mono); font-size:calc(0.72rem * var(--t-rotulos)); letter-spacing:0.16em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; line-height:1.14; text-wrap:balance; letter-spacing:-0.015em; }
p{ margin:0; }

#progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:var(--brand-green); z-index:300; transition:width .1s linear; }
/* V26 — sin `mix-blend-mode`: obliga al navegador a releer lo que hay
   debajo cada vez que algo se repinta, y con el video detrás eso es releer
   la ventana entera 24 veces por segundo. El ruido pasa a ser blanco con
   alfa variable: sobre blanco no cambia nada y sobre el hero oscuro se ve
   el mismo grano, con una sola capa. */
#grain{ position:fixed; inset:0; pointer-events:none; z-index:250; opacity:0.042; }


/* ==============================================================================
   4 · BARRA DE NAVEGACIÓN — logo, menú, idioma, botón de contacto, menú móvil
   HTML: <nav class="topnav"> en index.html. Textos: contenido.js → textos → nav_* y brand_tag. Alto del logo: contenido.js → logo.
   ============================================================================== */

/* ---------- NAV — refinado sobre V21: mismo comportamiento, mejor
   ejecución (blur más preciso, subrayado magnético, jerarquía tipográfica
   más fina). Los labels no cambian. ---------- */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--edge);
  background:transparent; border-bottom:1px solid transparent;
  color:var(--ink-text);
  transition:background-color .4s var(--ease-inout), border-color .4s var(--ease-inout), padding .4s var(--ease-inout), backdrop-filter .4s var(--ease-inout);
}
.topnav.scrolled{ background:color-mix(in srgb, var(--brand-ink) 88%, transparent); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border-color:var(--ink-line); padding:14px var(--edge); }
.topnav.scrolled .brand img{ height:var(--logo-nav-h-scroll); }
.topnav .brand{ display:flex; align-items:center; gap:13px; }
/* V28 — el alto viene de la variable; max-width + object-fit evitan que un
   logo muy grande empuje el menú fuera de la pantalla en teléfono: si no
   entra, se achica solo manteniendo la proporción. */
.topnav .brand img{ height:var(--logo-nav-h); width:auto; max-width:56vw; object-fit:contain; object-position:left center; transition:height .4s var(--ease-inout); }
@media (max-width:820px){
  .topnav .brand img{ height:var(--logo-nav-h-movil); max-width:48vw; }
  .topnav.scrolled .brand img{ height:var(--logo-nav-h-movil-scroll); }
}
.topnav .brand .tag{ font-family:var(--font-mono); font-size:calc(0.68rem * var(--t-rotulos)); letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--ink-line); padding:4px 8px; margin-left:3px; white-space:nowrap; }
@media (max-width:820px){ .topnav .brand .tag{ display:none; } }
.topnav .links{ display:none; align-items:center; gap:32px; font-family:var(--font-mono); font-size:calc(0.71rem * var(--t-botones)); letter-spacing:0.09em; text-transform:uppercase; }
@media (min-width:1120px){ .topnav .links{ display:flex; } }
.topnav .links a{ text-decoration:none; opacity:0.7; transition:opacity .22s ease; position:relative; padding:4px 0; }
@media (hover:hover) and (pointer:fine){
  .topnav .links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--brand-green); transition:width .32s var(--ease-out); }
  .topnav .links a:hover{ opacity:1; }
  .topnav .links a:hover::after{ width:100%; }
}
.topnav .right{ display:flex; align-items:center; gap:20px; }
.lang-toggle{ font-family:var(--font-mono); font-size:0.71rem; letter-spacing:0.05em; color:var(--ink-muted); display:flex; gap:6px; align-items:center; }
.lang-toggle b{ color:var(--ink-text); font-weight:600; }
.lang-toggle .lang-btn{ background:none; border:none; padding:2px; margin:0; font:inherit; letter-spacing:inherit; color:inherit; cursor:pointer; opacity:0.75; transition:opacity .2s ease, color .2s ease; }
.lang-toggle .lang-btn.active{ color:var(--ink-text); font-weight:600; opacity:1; }
.lang-toggle .lang-btn:not(.active):hover{ opacity:1; color:var(--ink-text); }
.lang-toggle .lang-sep{ opacity:0.4; }
.nav-cta{ font-family:var(--font-mono); font-size:calc(0.67rem * var(--t-botones)); letter-spacing:0.09em; text-transform:uppercase; padding:10px 18px; border:1.5px solid var(--brand-green); text-decoration:none; white-space:nowrap; transition:background-color .22s ease, color .22s ease, border-color .22s ease; display:none; }
@media (min-width:640px){ .nav-cta{ display:inline-block; } }
.skip-link{ position:fixed; top:-60px; left:16px; z-index:999; background:var(--brand-green); color:var(--brand-ink); border:3px solid var(--brand-ink); padding:12px 18px; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.05em; text-decoration:none; transition:top .2s var(--ease-out); }
.skip-link:focus{ top:16px; }

.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; background:none; border:1px solid var(--ink-line); color:var(--ink-text); cursor:pointer; padding:0; transition:border-color .2s ease, background-color .2s ease; }
.nav-toggle svg{ width:16px; height:16px; }
@media (hover:hover) and (pointer:fine){ .nav-toggle:hover{ border-color:var(--brand-green); } }
@media (min-width:1120px){ .nav-toggle{ display:none; } }

.mobile-menu{ position:absolute; top:100%; left:0; right:0; background:color-mix(in srgb, var(--brand-ink) 97%, transparent); backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--ink-line); max-height:0; overflow:hidden; transition:max-height .45s var(--ease-inout); }
@media (min-width:1120px){ .mobile-menu{ display:none; } }
.mobile-menu.open{ max-height:560px; }
.mobile-menu .inner{ padding:10px var(--edge) 28px; display:flex; flex-direction:column; }
.mobile-menu .inner > a{ padding:16px 2px; border-bottom:1px solid var(--ink-line); text-decoration:none; color:var(--ink-text); font-family:var(--font-mono); font-size:calc(0.84rem * var(--t-botones)); letter-spacing:0.06em; text-transform:uppercase; opacity:0; transform:translateX(-10px); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.mobile-menu.open .inner > a{ opacity:1; transform:translateX(0); }
.mobile-menu.open .inner > a:nth-child(1){ transition-delay:.05s; }
.mobile-menu.open .inner > a:nth-child(2){ transition-delay:.1s; }
.mobile-menu.open .inner > a:nth-child(3){ transition-delay:.15s; }
.mobile-menu.open .inner > a:nth-child(4){ transition-delay:.2s; }
.mobile-menu.open .inner > a:nth-child(5){ transition-delay:.25s; }
.mobile-menu .mm-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:22px; }
.mobile-menu .nav-cta{ display:inline-block; }
@media (hover:hover) and (pointer:fine){ .nav-cta:hover{ background:var(--brand-green); color:var(--brand-ink); border-color:var(--brand-green); } }
.nav-cta:active{ transform:scale(.97); }


/* ==============================================================================
   5 · PORTADA (HERO) — video de fondo, titular, párrafo, botones, tres cifras
   HTML: <div class="hero" id="main">. Textos: contenido.js → textos → hero_*. Video: assets/hero.mp4 (ver GUIA §6).
   ============================================================================== */

/* ---------- HERO — elevación prioritaria: escala tipográfica dramática,
   composición de placa de instrumento, reveals en máscara por línea,
   parallax sutil del video. Ni una palabra cambia. ---------- */
/* piso duro de espacio para el nav — el contenido se ancla abajo
   (justify-content:flex-end), pero con h1 grande + bajada larga el
   bloque puede crecer lo suficiente para que el eyebrow quede montado
   sobre el logo del nav fijo. padding-top es la garantía dura, en TODOS
   los anchos: nada se dibuja por encima de esta línea, nunca. */
/* V28 — el piso sigue siendo 104/118/100/88 px con el logo de fábrica (52 px);
   si el logo crece desde el editor, el piso crece con él (alto + padding
   vertical del nav) y nada queda montado sobre la barra. */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding-top:max(104px, calc(var(--logo-nav-h) + 52px)); padding-bottom:clamp(64px,9vw,132px); background:var(--ink); }
@media (max-width:820px){ .hero{ padding-top:max(118px, calc(var(--logo-nav-h-movil) + 66px)); } }
@media (max-width:820px) and (max-height:700px){ .hero{ padding-top:max(100px, calc(var(--logo-nav-h-movil) + 48px)); } }
@media (max-height:760px){ .hero{ padding-top:max(88px, calc(var(--logo-nav-h) + 36px)); } }
.hero .photo-wrap{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
/* V26 — sin `filter` sobre el video: un filtro CSS sobre un elemento que
   cambia 24 veces por segundo se recalcula en cada cuadro. El oscurecido que
   hacía (brightness .74) pasó al degradado `.grade`, que es estático. */
.hero .photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; transform:scale(1.09); transition:transform 2.6s var(--ease-out); }
.hero.in .photo{ transform:scale(1.0); }
.hero video.photo{ background:var(--ink); }
.hero .photo-fallback{ display:none; }
.hero .photo-fallback{ animation:kbHero 52s linear both; }
@keyframes kbHero{ from{ transform:scale(1.0); } to{ transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce){
  .hero .photo{ transform:none !important; transition:none; }
  .hero .photo-fallback{ animation:none; }
  .hero video.photo{ display:none; animation:none; transform:none; }
  .hero .photo-fallback{ display:block; }
}
.hero.no-video video.photo{ display:none; }
.hero.no-video .photo-fallback{ display:block; }
/* V26 — reemplaza al <canvas> del hero, que pintaba UNA sola vez este mismo
   degradado pero quedaba encima del video con mix-blend-mode:screen: otra
   capa que obligaba a releer el fondo cuadro a cuadro. Ahora es CSS puro, e
   incluye el oscurecido que antes hacía el filter del video. */
.hero .grade{ position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(58% 52% at 50% 36%, color-mix(in srgb, var(--brand-green) 13%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-ink) 47%, transparent) 0%, color-mix(in srgb, var(--brand-ink) 39%, transparent) 100%); }
.hero.no-video .grade{ background:
    radial-gradient(58% 52% at 50% 36%, color-mix(in srgb, var(--brand-green) 13%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-ink) 46%, transparent) 0%, color-mix(in srgb, var(--brand-ink) 38%, transparent) 100%); }
.hero .scrim{ position:absolute; inset:0; background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-ink) 30%, transparent) 0%, color-mix(in srgb, var(--brand-ink) 20%, transparent) 30%, color-mix(in srgb, var(--brand-ink) 50%, transparent) 62%, var(--brand-ink) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--brand-ink) 66%, transparent) 0%, color-mix(in srgb, var(--brand-ink) 4%, transparent) 48%); }

.hero .content{ position:relative; z-index:2; max-width:var(--container-wide); margin:0 auto; width:100%; padding:0 var(--edge); }
.hero .eyebrow{ color:var(--brand-light); overflow:hidden; padding-bottom:0.2em; margin-bottom:-0.2em; }
.hero .eyebrow span{ display:inline-block; transform:translateY(100%); transition:transform .8s var(--ease-out) .15s; }
.hero.in .eyebrow span{ transform:translateY(0); }
.hero h1{ font-size:calc(clamp(2.9rem,9.2vw,8.4rem) * var(--t-hero-h1)); line-height:1.06; letter-spacing:-0.035em; margin-top:26px; max-width:17ch; }
/* padding-bottom en la máscara: line-height:1.06 ya deja aire, pero el
   overflow:hidden de la máscara igual puede comerse la descendente de
   g/y/j/p/q si el span interno no tiene margen propio — este padding es
   el seguro contra eso, en cualquier tamaño de pantalla. */
.hero h1 .h1-mask{ display:block; overflow:hidden; padding-bottom:0.16em; margin-bottom:-0.16em; }
.hero h1 .h1-mask > span{ display:block; transform:translateY(112%); transition:transform 1s var(--ease-out) .28s; }
.hero.in h1 .h1-mask > span{ transform:translateY(0); }
.hero .sub{ margin-top:26px; max-width:var(--m-hero-sub); font-size:calc(clamp(1.05rem,1.6vw,1.26rem) * var(--t-hero-sub)); color:var(--ink-muted); font-weight:400; opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease-out) .58s, transform .8s var(--ease-out) .58s; }
.hero.in .sub{ opacity:1; transform:translateY(0); }
.hero .ctas{ margin-top:32px; display:flex; gap:16px; flex-wrap:wrap; opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease-out) .7s, transform .8s var(--ease-out) .7s; }
.hero.in .ctas{ opacity:1; transform:translateY(0); }
.hero-metrics{ margin-top:40px; padding-top:26px; border-top:1px solid color-mix(in srgb, var(--ink-text) 18%, transparent); display:flex; flex-wrap:wrap; align-items:center; gap:24px 38px; opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease-out) .84s, transform .8s var(--ease-out) .84s; }
.hero.in .hero-metrics{ opacity:1; transform:translateY(0); }
.hero-metrics .hm{ display:flex; flex-direction:column; gap:6px; }
.hero-metrics .hm-num{ font-family:var(--font-display); font-size:calc(clamp(1.4rem,2.3vw,1.9rem) * var(--t-cifras) * var(--t-tarjetas)); color:var(--ink-text); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.hero-metrics .hm-unit{ font-family:var(--font-mono); font-size:calc(0.72rem * var(--t-tarjetas)); color:var(--brand-light); margin-left:5px; }
.hero-metrics .hm-lab{ font-family:var(--font-mono); font-size:calc(0.68rem * var(--t-rotulos) * var(--t-tarjetas)); letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-faint); }
.hero-metrics .hm-sep{ width:1px; height:32px; background:color-mix(in srgb, var(--ink-text) 18%, transparent); }
/* V27 — en teléfono las tres cifras se apilaban en tres renglones (193 px de
   alto) y empujaban la fila fuera de la pantalla. En tres columnas ocupan la
   mitad y entran completas. */
@media (max-width:560px){
  .hero-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 14px; padding-bottom:30px; align-items:start; }
  .hero-metrics .hm-sep{ display:none; }
  .hero-metrics .hm-num{ font-size:calc(1.32rem * var(--t-cifras) * var(--t-tarjetas)); }
  .hero-metrics .hm-lab{ font-size:calc(0.68rem * var(--t-rotulos) * var(--t-tarjetas)); letter-spacing:0.04em; }
}
/* V27 — escalón intermedio: con las cifras adentro de la portada, en una
   ventana de 900 px de alto la fila quedaba 16 px por debajo del pliegue.
   Se recortan solo los márgenes verticales —34 px en total—, ningún tamaño
   de letra cambia. */
@media (max-height:1010px){
  .hero h1{ margin-top:20px; }
  .hero .sub{ margin-top:20px; }
  .hero .ctas{ margin-top:26px; }
  .hero-metrics{ margin-top:30px; padding-top:20px; }
}
@media (max-height:820px){
  .hero{ padding-bottom:56px; }
  /* la señal «Desplázate» vive a 38 px del borde inferior, que es justo
     donde ahora cae la fila de cifras: por debajo de 820 px de alto se
     superponían. */
  .hero .scrolldown{ display:none; }
  .hero h1{ font-size:calc(clamp(2.1rem,5.6vw,4.6rem) * var(--t-hero-h1)); margin-top:18px; }
  .hero .sub{ margin-top:16px; font-size:calc(clamp(1rem,1.5vw,1.14rem) * var(--t-hero-sub));
              max-width:calc(var(--m-hero-sub) + 14ch); }
  .hero .ctas{ margin-top:22px; }
  .hero-metrics{ margin-top:24px; padding-top:18px; }
}
@media (max-height:680px){
  .hero{ padding-bottom:30px; }
  .hero h1{ font-size:calc(clamp(1.85rem,4.6vw,3.5rem) * var(--t-hero-h1)); }
  /* V26 — ACÁ ESTABA EL BUG: la V23 hacía `.hero .sub{ display:none }` con
     el viewport a 680 px de alto o menos, o sea en cualquier laptop de
     1366x768 con la barra del navegador. El párrafo desaparecía. Ahora se
     achica y se ensancha en vez de borrarse. */
  .hero .sub{ margin-top:12px; font-size:calc(0.95rem * var(--t-hero-sub)); line-height:1.55;
              max-width:calc(var(--m-hero-sub) + 22ch); }
  .hero .scrolldown{ display:none; }
  .hero-metrics{ margin-top:16px; gap:16px 26px; }
}
@media (max-height:480px){
  .hero .eyebrow{ display:none; }
  .hero h1{ margin-top:0; font-size:calc(clamp(1.5rem,3.8vw,2.6rem) * var(--t-hero-h1)); }
  .hero-metrics{ margin-top:12px; }
  .hero .loc{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero .eyebrow span, .hero h1 .h1-mask > span, .hero .sub, .hero .ctas, .hero-metrics{ transition:none !important; transform:none !important; opacity:1 !important; }
}


/* ==============================================================================
   6 · BOTONES — .btn, .btn.ghost, .btn.on-light
   Un solo componente de botón para todo el sitio; las variantes cambian borde y color según el fondo.
   ============================================================================== */

.btn{ font-family:var(--font-mono); font-size:calc(0.73rem * var(--t-botones)); letter-spacing:0.09em; text-transform:uppercase; padding:16px 28px; border:1.5px solid var(--brand-green); color:var(--ink-text); text-decoration:none; display:inline-flex; align-items:center; gap:12px; background:transparent; transition:background-color .28s var(--ease-out), color .28s var(--ease-out), gap .28s var(--ease-out), border-color .28s var(--ease-out), transform .16s var(--ease-press); }
.btn svg{ transition:transform .28s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .btn:hover{ background:var(--brand-green); color:var(--brand-ink); gap:16px; } .btn:hover svg{ transform:translateX(3px); } }
.btn:active{ transform:scale(.97); }
.btn.ghost{ border-color:color-mix(in srgb, var(--ink-text) 30%, transparent); }
@media (hover:hover) and (pointer:fine){ .btn.ghost:hover{ background:var(--ink-text); color:var(--brand-ink); border-color:var(--ink-text); } }
.btn.on-light{ border-color:var(--brand-blue); color:var(--stone-text); }
@media (hover:hover) and (pointer:fine){ .btn.on-light:hover{ background:var(--brand-blue); color:var(--ink-text); } }

.scrolldown{ position:absolute; bottom:38px; left:var(--edge); z-index:2; display:flex; align-items:center; gap:11px; color:var(--ink-faint); font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase; opacity:0; transition:opacity 1s var(--ease-out) 1.1s; }
.hero.in .scrolldown{ opacity:1; }
.scrolldown .line{ width:1px; height:24px; background:currentColor; overflow:hidden; position:relative; }
.scrolldown .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--brand-green); animation:scrollLine 2.4s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ top:-100%; } 50%{ top:0; } 100%{ top:100%; } }
@media (prefers-reduced-motion: reduce){ .scrolldown .line::after{ animation:none; top:0; } }
.hero .loc{ position:absolute; bottom:38px; right:var(--edge); z-index:2; font-family:var(--font-mono); font-size:0.68rem; color:var(--ink-faint); text-align:right; line-height:1.8; opacity:0; transition:opacity 1s var(--ease-out) 1.1s; }
.hero.in .loc{ opacity:1; }


/* ==============================================================================
   7 · CINTA DE CIFRAS (ticker) — la banda que se desplaza bajo la portada
   Contenido: contenido.js → cinta.
   ============================================================================== */

/* ---------- TICKER ---------- */
.ticker{ position:relative; z-index:2; background:var(--ink); border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line); overflow:hidden; padding:17px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* la separación entre items va por margin-right (no por gap del track): con
   gap, translateX(-50%) recorría medio gap menos que un período completo y
   el loop saltaba ~32px en cada vuelta — NO cambiar a gap. */
.ticker .track{ display:flex; white-space:nowrap; width:max-content; animation:scroll-left 36s linear infinite; }
@media (prefers-reduced-motion: reduce){ .ticker .track{ animation:none; } }
@keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ticker .item{ font-family:var(--font-mono); font-size:0.77rem; letter-spacing:0.06em; color:var(--ink-muted); display:flex; align-items:center; gap:15px; margin-right:68px; }
.ticker .item b{ color:var(--brand-green); font-weight:700; }   /* texto verde sobre --ink sólido */
.ticker .item .sep{ color:var(--ink-faint); }

/* ==============================================================================
   8 · SECCIONES — estructura común (.sec, .inner), fondos (.stone/.dark/.sand), encabezado (kicker + título + bajada)
   Toda sección nueva se arma con estas clases: ver MANUAL-DE-DISENO.md §7 «Agregar una sección».
   ============================================================================== */

/* ---------- SECCIONES GENÉRICAS ---------- */
.sec{ padding:clamp(76px,10vw,152px) var(--edge); position:relative; }
.sec.dark{ background:var(--ink); color:var(--ink-text); }
/* atmósfera: un lavado suave de verde de marca por sección oscura, nunca detrás del texto corrido */
.sec.dark::before{ content:""; position:absolute; top:-10%; left:-6%; width:52%; height:62%; pointer-events:none;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--brand-green) 8%, transparent), transparent 68%); }
.sec.stone{ background:var(--stone); color:var(--stone-text); }
.sec.stone2{ background:var(--stone-2); color:var(--stone-text); }
/* --brand-light como superficie editorial completa (nunca como tipografía) */
.sec.sand{ background:var(--brand-light); color:var(--stone-text); }
.sec.sand .lede{ color:var(--stone-muted); }
.inner{ max-width:var(--container); margin:0 auto; position:relative; z-index:1; }

/* ---- exhibit-head: el "kicker" pasa de etiqueta genérica sobre el título a
   nota marginal — numeración de exhibit + rótulo mono en una columna
   angosta a la izquierda, título y bajada a la derecha. En mobile colapsa a
   una sola columna apilada. El texto es el mismo data-i18n de siempre. ---- */
/* V26 — La marca de sección se ve siempre igual: filete corto y horizontal,
   rótulo al lado, y debajo el titular a todo el ancho de la columna. Antes,
   arriba de 900 px de ancho, la marca se iba a un riel fijo de 168 px con el
   filete vertical: en pantallas anchas o de proporción rara el rótulo
   quedaba suelto en un vacío y el bloque se leía partido. Ahora se comporta
   igual a cualquier ancho y a cualquier proporción. */
.exhibit-head{ display:block; }
.exhibit-head .ex-mark{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(14px,1.5vw,22px); }
.exhibit-head .ex-no{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; color:var(--brand-blue); font-variant-numeric:tabular-nums; }
.sec.dark .exhibit-head .ex-no{ color:var(--brand-green); }
.exhibit-head .ex-rule{ width:26px; height:1.5px; background:var(--brand-blue); flex:none; }
.sec.dark .exhibit-head .ex-rule{ background:var(--brand-green); }
.kicker{ font-family:var(--font-mono); font-size:calc(0.7rem * var(--t-rotulos)); letter-spacing:0.14em; text-transform:uppercase; color:var(--brand-blue); font-weight:600; }
.sec.dark .kicker{ color:var(--brand-green); }                  /* texto verde sobre --ink sólido */
.exhibit-head .ex-body{ min-width:0; }
.sec h2{ font-size:calc(clamp(2.2rem,4.4vw,3.8rem) * var(--t-titulares)); margin-top:0; max-width:var(--m-h2); letter-spacing:-0.028em; }
/* El titular de «Quiénes somos» es una frase larga (texto del cliente). En
   el tamaño de display normal aplastaría la sección: acá se lee como
   titular editorial —más chico y con más ancho de medida— sin dejar de ser
   el h2 de la sección. */
.sec h2.largo{ font-size:calc(clamp(1.55rem,2.6vw,2.2rem) * var(--t-titulares)); max-width:var(--m-h2-largo); line-height:1.26; letter-spacing:-0.015em; }
.sec .lede{ margin-top:22px; max-width:var(--m-lede); font-size:calc(1.14rem * var(--t-bajadas)); line-height:1.68; color:var(--stone-muted); font-weight:400; }
.sec.dark .lede{ color:var(--ink-muted); }

.split{ display:grid; gap:44px; grid-template-columns:1fr; margin-top:10px; }
@media (min-width:900px){ .split{ grid-template-columns:0.9fr 1.1fr; align-items:start; } }

.stat-row{ margin-top:64px; display:grid; gap:1px; background:var(--ink-line); border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line); grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }
/* V26 — cinco tarjetas: en pantallas medianas van dos y dos y la quinta
   ocupa el ancho completo; desde 1100 px entran las cinco en fila. */
.stat-row .stat:last-child{ grid-column:1 / -1; }
@media (min-width:1100px){ .stat-row{ grid-template-columns:repeat(5,1fr); } .stat-row .stat:last-child{ grid-column:auto; } }
@media (max-width:430px){ .stat-row{ grid-template-columns:1fr; } .stat{ padding:26px 22px 24px; } .stat .num{ font-size:calc(2.2rem * var(--t-cifras) * var(--t-tarjetas)); } }
.stat{ background:var(--ink); padding:36px 28px 32px; position:relative; transition:background-color .3s ease; }
.sec.stone .stat-row{ background:var(--stone-line); border-color:var(--stone-line); }
.sec.stone .stat{ background:var(--stone); }
.sec.stone .stat::before{ background:var(--brand-blue); }
.sec.stone .stat .num{ color:var(--stone-text); }
.sec.stone .stat .num .unit{ color:var(--brand-blue); }
.sec.stone .stat .lab{ color:var(--stone-faint); }
.stat::before{ content:""; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--brand-green); transition:width .5s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .stat:hover::before{ width:100%; } .stat:hover{ background:var(--ink-2); } .sec.stone .stat:hover{ background:var(--stone-2); } }
.stat .num{ font-family:var(--font-display); font-size:calc(clamp(2.3rem,4.6vw,3.7rem) * var(--t-cifras) * var(--t-tarjetas)); color:var(--ink-text); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.stat .num .unit{ font-family:var(--font-mono); font-size:calc(0.88rem * var(--t-tarjetas)); color:var(--brand-green); margin-left:6px; } /* sobre --ink sólido */
.stat .lab{ margin-top:13px; font-family:var(--font-mono); font-size:calc(0.71rem * var(--t-rotulos) * var(--t-tarjetas)); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }


/* ==============================================================================
   9 · QUIÉNES SOMOS (#platform) — tarjetas de cifras (.stat-row / .stat) e íconos
   Cifras: contenido.js → cifras. Textos: contenido.js → textos (grupo «Quiénes somos»).
   ============================================================================== */

/* ---------- TARJETAS (operaciones) — se mantienen como grilla porque el
   contenido lo exige (cinco tecnologías en paralelo), pero se tratan como
   placas de exhibit, no como "cards" genéricas: índice numerado que
   continúa la convención de la franja de países, tipografía de cifra
   mucho más grande, sombra con offset real. ---------- */
.platform-cards{ margin-top:38px; display:grid; gap:1px; background:var(--stone-line); border:1px solid var(--stone-line); grid-template-columns:1fr; }
.sec.stone .platform-cards{ box-shadow:0 40px 70px -44px color-mix(in srgb, var(--brand-ink) 50%, transparent); }
@media (min-width:640px){ .platform-cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .platform-cards{ grid-template-columns:repeat(4,1fr); } }
/* generación en cinco tarjetas (la térmica se dividió en Diesel/Gas y Fuel):
   desde 1180px entran las cinco en una fila; entre 640 y 1180 van de a dos
   y la última ocupa el ancho completo para no dejar un hueco en la grilla */
@media (min-width:640px){ .platform-cards.cols-5 > .pcard:last-child{ grid-column:span 2; } }
@media (min-width:980px){ .platform-cards.cols-5{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1180px){
  .platform-cards.cols-5{ grid-template-columns:repeat(5,1fr); }
  .platform-cards.cols-5 > .pcard:last-child{ grid-column:auto; }
  .platform-cards.cols-5 .pcard{ padding:32px 24px; }
}
.platform-cards.cols-2{ grid-template-columns:1fr; }
@media (min-width:760px){ .platform-cards.cols-2{ grid-template-columns:repeat(2,1fr); } }
.pcard{ background:var(--stone); padding:32px 26px; min-height:246px; display:flex; flex-direction:column; position:relative; transition:transform .42s var(--ease-out), box-shadow .42s var(--ease-out), background-color .3s ease; }
.pcard::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--brand-blue); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .pcard:hover{ transform:translateY(-7px); box-shadow:0 30px 60px -24px color-mix(in srgb, var(--brand-ink) 40%, transparent); } .pcard:hover::before{ transform:scaleX(1); } }
.pcard .top{ display:flex; align-items:center; justify-content:space-between; min-height:46px; }
.pcard .ex-no{ font-family:var(--font-mono); font-size:calc(0.66rem * var(--t-tarjetas)); letter-spacing:0.06em; color:var(--stone-faint); font-variant-numeric:tabular-nums; }
/* set de íconos oficial de Ampiria: trazo principal institucional, grupo de
   acento en verde de marca (los archivos fuente traen un literal casi verde —
   aquí se ata al token de marca para que la paleta quede exacta) */
.pcard .picon{ width:42px; height:42px; fill:none; stroke:var(--brand-blue); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .22s ease, transform .42s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .pcard:hover .picon{ transform:scale(1.08); } }
.pcard .picon .a{ stroke:var(--brand-green); }
.pcard h3{ font-family:var(--font-mono); font-weight:600; font-size:calc(0.75rem * var(--t-tarjetas)); letter-spacing:0.13em; text-transform:uppercase; line-height:1.3; color:var(--stone-muted); margin-top:26px; }
.pcard .figure{ margin-top:8px; font-family:var(--font-display); font-size:calc(clamp(2.1rem,3vw,2.7rem) * var(--t-cifras) * var(--t-tarjetas)); line-height:1.02; font-weight:600; color:var(--brand-blue); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.pcard .tag-line{ display:block; margin-top:10px; font-family:var(--font-display); font-weight:600; font-size:calc(clamp(1.2rem,1.7vw,1.45rem) * var(--t-tarjetas)); line-height:1.15; letter-spacing:-0.015em; color:var(--brand-blue); }
.pcard p{ margin-top:12px; font-size:calc(0.88rem * var(--t-tarjetas)); line-height:1.62; color:var(--stone-muted); }
.pcard .push{ margin-top:auto; }
.platform-cards.on-dark{ background:var(--ink-line); border-color:var(--ink-line); }
.platform-cards.on-dark .pcard{ background:var(--ink); }
.platform-cards.on-dark .pcard::before{ background:var(--brand-green); }
.platform-cards.on-dark .pcard .picon{ stroke:var(--brand-light); }
.platform-cards.on-dark .pcard .picon .a{ stroke:var(--brand-green); }
.platform-cards.on-dark .pcard h3{ color:var(--ink-muted); }
.platform-cards.on-dark .pcard .ex-no{ color:var(--ink-faint); }
.platform-cards.on-dark .pcard .figure{ color:var(--brand-green); }   /* sobre --ink sólido */
.platform-cards.on-dark .pcard .tag-line{ color:var(--brand-green); } /* sobre --ink sólido */
.platform-cards.on-dark .pcard p{ color:var(--ink-muted); }


/* ==============================================================================
   10 · INVERSIONES (#operations) — tarjetas por tecnología, participación de capacidad, cadena de valor (.ops-chain)
   Textos: contenido.js → textos (grupo «Nuestras operaciones»). MW y %: contenido.js → cifras.
   ============================================================================== */

/* ---------- OPERACIONES — dos subgrupos visualmente distintos ---------- */
.subhead{ margin-top:60px; display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 18px; padding-bottom:15px; border-bottom:1.5px solid var(--brand-blue); }
.subhead .sh-title{ font-family:var(--font-display); font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.2; font-weight:600; color:var(--stone-text); }
.subhead .sh-note{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone-muted); }
/* participación de capacidad — relleno verde dentro de un riel de tinta, así
   el bloque verde nunca queda directo contra el fondo --brand-light de la
   tarjeta */
.share{ margin-top:24px; }
.share .bar{ height:5px; background:var(--stone-3); }
.share .fill{ height:100%; width:0%; background:var(--brand-green); transition:width 1.2s var(--ease-out); }
.share .cap{ margin-top:11px; font-family:var(--font-mono); font-size:calc(0.7rem * var(--t-tarjetas)); letter-spacing:0.06em; text-transform:uppercase; color:var(--stone-muted); }
.share .cap b{ color:var(--stone-text); font-weight:600; font-variant-numeric:tabular-nums; }
.pcard .assets{ margin-top:14px; padding-top:12px; border-top:1px solid var(--stone-line); font-family:var(--font-mono); font-size:calc(0.68rem * var(--t-tarjetas)); letter-spacing:0.04em; color:var(--stone-muted); }

/* el subgrupo de cadena de valor lleva un bloque de tinta: otro fondo, otro
   tratamiento de tarjeta, para que las seis tarjetas nunca se lean como una
   sola grilla plana */
.ops-chain{ margin-top:clamp(60px,7vw,100px); background:var(--ink); color:var(--ink-text); padding:clamp(50px,6vw,84px) var(--edge); }
.ops-chain .subhead{ margin-top:0; border-bottom-color:var(--brand-green); }
.ops-chain .subhead .sh-title{ color:var(--ink-text); }
.ops-chain .subhead .sh-note{ color:var(--ink-muted); }

/* ==============================================================================
   11 · HUELLA (#footprint) — mapa interactivo, ticks, compás, escala, pines, panel de país (.map-readout), cajas de país (.cs)
   La geografía (<path>) vive en index.html dentro de <svg id="opsMap">; la lógica en js/mapa-hero-menu.js. No editar los <path> a mano.
   ============================================================================== */

/* ==========================================================================
   HUELLA CONTINENTAL — MAPA. Prioridad alta del brief: se convierte en el
   elemento más premium de la página. Los <path> geográficos y las
   coordenadas BOUNDS son idénticos a V21 — bit a bit, ver
   CONTENT-INTEGRITY.md — todo lo que cambia acá es el marco, los
   marcadores, la interacción y (nuevo) el panel de capacidad por país.
   ========================================================================== */
.footprint-head{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); }
.map-panel{
  position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  margin-top:clamp(44px,5vw,72px); background:var(--ink);
  border-top:1px solid var(--ink-line);
}
/* ancla de posicionamiento para .map-readout: envuelve .map-frame sin
   heredar su overflow:hidden/aspect-ratio, así el panel puede volverse
   bloque estático en mobile sin quedar recortado. */
.map-stage{ position:relative; }
.map-frame{ position:relative; width:100%; aspect-ratio:5 / 6; overflow:hidden;
  background:
    radial-gradient(ellipse 62% 58% at 52% 46%, color-mix(in srgb, var(--brand-green) 7%, transparent), transparent 70%),
    var(--ink); }
/* graticule sutil — placa de relevamiento, no dashboard: una retícula de 1px
   casi invisible detrás del continente, GPU-gratis (gradiente repetido) */
.map-frame::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5;
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--brand-light) 6%, transparent) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--brand-light) 6%, transparent) 0 1px, transparent 1px 88px); }
@media (min-width:700px){ .map-frame{ aspect-ratio:4 / 3; } }
@media (min-width:1180px){ .map-frame{ aspect-ratio:auto; height:min(76vh, 54vw); min-height:500px; } }
.map-frame svg{ position:relative; z-index:1; width:100%; height:100%; display:block; }

/* marcas de instrumento — ticks de esquina y brújula, el marco se lee como una placa */
.map-tick{ position:absolute; width:26px; height:26px; z-index:2; opacity:0.5; }
.map-tick.tl{ top:16px; left:16px; border-top:1.5px solid var(--brand-green); border-left:1.5px solid var(--brand-green); }
.map-tick.tr{ top:16px; right:16px; border-top:1.5px solid var(--brand-green); border-right:1.5px solid var(--brand-green); }
.map-tick.bl{ bottom:16px; left:16px; border-bottom:1.5px solid var(--brand-green); border-left:1.5px solid var(--brand-green); }
.map-tick.br{ bottom:16px; right:16px; border-bottom:1.5px solid var(--brand-green); border-right:1.5px solid var(--brand-green); }
@media (max-width:560px){ .map-tick{ width:16px; height:16px; top:10px; left:10px; } .map-tick.tr,.map-tick.br{ right:10px; left:auto; } .map-tick.bl,.map-tick.br{ bottom:10px; top:auto; } }
.map-scale{ position:absolute; left:var(--edge); bottom:26px; z-index:2; display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; color:var(--ink-faint); }
.map-scale .ms-bar{ position:relative; height:1px; width:120px; background:currentColor; }
.map-scale .ms-bar::before,.map-scale .ms-bar::after{ content:""; position:absolute; top:-5px; width:1px; height:11px; background:currentColor; }
.map-scale .ms-bar::before{ left:0; } .map-scale .ms-bar::after{ right:0; }
@media (max-width:560px){ .map-scale{ bottom:16px; font-size:0.58rem; gap:9px; } .map-reset{ bottom:14px; font-size:0.64rem; padding:8px 13px; } }
.map-compass{ position:absolute; top:22px; right:26px; z-index:2; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em; color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:5px; }
.map-compass svg{ width:15px; height:15px; }
@media (max-width:560px){ .map-compass{ top:14px; right:16px; font-size:0.6rem; } }

.ctx-land{ fill:var(--brand-light); fill-opacity:0.36; stroke:var(--brand-ink); stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.op-land{ fill:var(--brand-green); stroke:var(--brand-ink); stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:round; transition:fill .3s ease; cursor:pointer; }
.op-layer{ filter:drop-shadow(0 0 8px color-mix(in srgb, var(--brand-green) 42%, transparent)); }
/* sin outline de foco en las formas del mapa — el propio país ya cambia a
   blanco sólido en :sel y se resalta en :hl (ver más abajo), así que un
   recuadro de foco encima solo agrega ruido visual sobre una forma
   irregular. El teclado sigue funcionando: foco dispara el mismo estado
   .hl que el mouse (ver script del mapa). */
.op-land:focus{ outline:none; }
#opsMap{ transition:none; }
.map-panel.zoomed .map-scale{ opacity:0; pointer-events:none; }
.map-scale{ transition:opacity .3s ease; }
.map-reset{
  position:absolute; bottom:22px; left:var(--edge); z-index:3; display:none;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-text); background:color-mix(in srgb, var(--brand-ink) 86%, transparent);
  border:1.5px solid var(--brand-green); padding:10px 17px; cursor:pointer;
  align-items:center; gap:10px; transition:background-color .25s ease, color .25s ease, transform .16s var(--ease-press);
}
.map-panel.zoomed .map-reset{ display:inline-flex; }
/* V31.4 — el panel de país ya no tiene X (en pantallas de hasta 899 px, al
   volverse bloque estático, la X quedaba fuera del panel, arriba a la derecha
   del mapa y debajo del SVG: no se podía tocar). «Ver todo» queda visible en
   todos los anchos mientras haya un país seleccionado; el panel está debajo
   del mapa, así que no se pisan. Tocar el mismo país también lo cierra. */
@media (hover:hover) and (pointer:fine){ .map-reset:hover{ background:var(--brand-green); color:var(--brand-ink); } }
.map-reset:active{ transform:scale(.97); }
.map-reset svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cs{ cursor:pointer; }
.cs.sel{ background:var(--ink-2); }
.cs.sel::before{ transform:scaleX(1); }
.op-land.hl, .op-land.sel{ fill:var(--ink-text); }
.op-layer.dimmed .op-land:not(.hl):not(.sel){ fill-opacity:0.5; }

/* pines + etiquetas con línea guía al estilo V5 — refinados: anillo doble
   más fino, núcleo más contrastado, brillo suave en selección */
.pin-ring{ fill:none; stroke:var(--brand-green); stroke-width:1.4; opacity:0; }
.map-panel.in .pin-ring{ animation:pinpulse 4.4s var(--ease-out) infinite; }
.pin-ring.r2{ animation-delay:1.5s !important; }
@keyframes pinpulse{ 0%{ opacity:0; transform:scale(.3); } 12%{ opacity:.65; } 70%{ opacity:0; transform:scale(1); } 100%{ opacity:0; transform:scale(1); } }
.pin-dot{ fill:var(--brand-green); stroke:var(--brand-ink); stroke-width:1.6; transition:fill .25s ease, r .25s ease; }
.pin-core{ fill:var(--brand-ink); }
.geo-label,.geo-label .pin-ring{ transform-box:fill-box; transform-origin:center; }
.geo-label.hl .pin-dot,.geo-label.sel .pin-dot{ fill:var(--ink-text); }
.geo-label.sel .pin-dot{ filter:drop-shadow(0 0 6px color-mix(in srgb, var(--ink-text) 60%, transparent)); }
.geo-label.hl .pin-core,.geo-label.sel .pin-core{ fill:var(--brand-ink); }
.pin-layer{ opacity:0; pointer-events:none; transition:opacity .8s var(--ease-out) .35s; }
.map-panel.in .pin-layer{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .pin-layer{ opacity:1; transition:none; }
  .map-panel.in .pin-ring{ animation:none; opacity:.32; }
}
@media (max-width:859px){ .pin-dot{ r:9; } .pin-core{ r:3.2; } .pin-ring{ r:22; } }

.map-legend{ display:flex; flex-wrap:wrap; gap:10px 30px; padding:17px var(--edge); background:var(--ink); border-top:1px solid var(--ink-line); }
.mlg-item{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; color:var(--ink-muted); }
.mlg-sw{ width:13px; height:13px; flex:none; border:1px solid var(--brand-ink); }
.mlg-sw.op{ background:var(--brand-green); }
.mlg-sw.ctx{ background:color-mix(in srgb, var(--brand-light) 40%, var(--brand-ink)); }

/* ---- panel de lectura de país (NUEVO en V22) — capacidad instalada por
   país al seleccionar. Se integra en el marco del mapa como una placa de
   instrumento más (blur + filete), nunca como tooltip flotante ni como
   sidebar de dashboard. En mobile pasa a bloque estático debajo del mapa,
   visible mientras el país siga seleccionado. Todo el texto sale de
   contenido.js / se reutiliza de la franja de países ya presente en el DOM
   — nada se inventa acá. ---- */
.map-readout{
  position:absolute; z-index:4; top:50%; right:clamp(16px,3vw,var(--edge)); width:min(310px, 84vw);
  transform:translate(14px,-50%); background:color-mix(in srgb, var(--brand-ink) 90%, transparent);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--ink-line-strong); padding:28px 26px 26px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.map-readout.visible{ opacity:1; transform:translate(0,-50%); pointer-events:auto; }
.map-readout .mr-row{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.map-readout.visible .mr-row{ opacity:1; transform:translateY(0); }
.map-readout.visible .mr-row.r1{ transition-delay:.06s; }
.map-readout.visible .mr-row.r2{ transition-delay:.14s; }
.map-readout.visible .mr-row.r3{ transition-delay:.22s; }
.map-readout .mr-country{ display:block; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--brand-green); }
.map-readout .mr-mw{ margin-top:14px; display:flex; align-items:baseline; gap:8px; }
.map-readout .mr-mw-num{ font-family:var(--font-display); font-size:calc(clamp(2.3rem,4.6vw,3rem) * var(--t-cifras)); font-weight:600; color:var(--ink-text); letter-spacing:-0.02em; line-height:1; }
.map-readout .mr-mw-unit{ font-family:var(--font-mono); font-size:0.85rem; color:var(--brand-light); }
.map-readout .mr-mw-label{ display:block; margin-top:6px; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }
.map-readout .mr-tech{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--ink-line); list-style:none; display:flex; flex-direction:column; gap:0; }
.map-readout .mr-tech li{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-muted); padding:7px 0; border-bottom:1px solid var(--ink-line-soft); }
.map-readout .mr-tech li:last-child{ border-bottom:none; }
@media (max-width:899px){
  /* V31.6 — en teléfono y tableta el panel también flota sobre el mapa, al
     lado del país, como en escritorio (pedido de Gerardo): más angosto, con
     menos aire, y el zoom del mapa deja el país a la izquierda para que no
     quede debajo del panel (viewFor en js/mapa-hero-menu.js). Hasta V31.5 acá
     era un bloque estático debajo del mapa, que en el teléfono quedaba fuera
     de la vista al tocar un país. */
  .map-readout{ width:min(62vw, 300px); right:12px; padding:18px 16px 16px; }
  .map-readout .mr-country{ font-size:0.66rem; letter-spacing:0.1em; }
  .map-readout .mr-mw{ margin-top:10px; }
  .map-readout .mr-mw-num{ font-size:calc(1.9rem * var(--t-cifras)); }
  .map-readout .mr-tech{ margin-top:12px; padding-top:10px; }
  .map-readout .mr-tech li{ font-size:0.74rem; padding:6px 0; }
  /* al tocar una caja debajo del mapa, el mapa se lleva a la vista dejando
     lugar para la barra fija */
  .map-frame{ scroll-margin-top:calc(var(--logo-nav-h-movil-scroll) + 40px); }
}
@media (prefers-reduced-motion: reduce){
  .map-readout, .map-readout .mr-row{ transition:none; }
}

/* cajas de país bajo el mapa — nombre + las tecnologías exactas */
.country-strip{ display:grid; gap:1px; background:var(--ink-line); border-top:1px solid var(--ink-line); grid-template-columns:1fr; }
@media (min-width:520px){ .country-strip{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:760px){ .country-strip{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1180px){ .country-strip{ grid-template-columns:repeat(6,1fr); } }
.cs{ background:var(--ink); padding:23px 25px 25px; display:flex; flex-direction:column; gap:11px; cursor:default; position:relative; transition:background-color .28s ease; }
.cs::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--brand-green); transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease-out); }
.cs.hl{ background:var(--ink-2); }
.cs.hl::before{ transform:scaleX(1); }
.cs.hl .cs-name, .cs.sel .cs-name{ color:var(--ink-text); }
.cs.hl .cs-tech, .cs.sel .cs-tech{ color:var(--brand-light); }
.cs.hl .cs-pin, .cs.sel .cs-pin{ background:var(--ink-text); }
.cs.hl .cs-idx, .cs.sel .cs-idx{ color:var(--brand-green); }
.cs .cs-name{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:calc(1.06rem * var(--t-tarjetas)); line-height:1.2; color:var(--ink-text); }
.cs .cs-pin{ width:8px; height:8px; flex:none; border-radius:50%; background:var(--brand-green); transition:background-color .22s ease; }
.cs .cs-tech{ display:block; font-family:var(--font-mono); font-size:calc(0.75rem * var(--t-tarjetas)); line-height:1.55; color:var(--ink-muted); }
.cs .cs-idx{ position:absolute; top:21px; right:23px; font-family:var(--font-mono); font-size:calc(0.7rem * var(--t-tarjetas)); letter-spacing:0.06em; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

/* ESG — columnas editoriales (sección retirada; CSS inventariado por si vuelve) */
.esg-grid{ margin-top:clamp(36px,5vw,54px); display:grid; gap:34px; grid-template-columns:1fr; border-top:1px solid var(--stone-line); padding-top:36px; }
@media (min-width:860px){ .esg-grid{ grid-template-columns:repeat(3,1fr); gap:0; } }
.esg-col h3{ font-family:var(--font-display); font-weight:600; font-size:1.22rem; line-height:1.25; color:var(--stone-text); }
.esg-col p{ margin-top:14px; font-size:0.95rem; line-height:1.68; color:var(--stone-muted); max-width:38ch; }
@media (min-width:860px){ .esg-col + .esg-col{ border-left:1px solid var(--stone-line); padding-left:clamp(28px,3.4vw,54px); } .esg-col:not(:last-child){ padding-right:clamp(28px,3.4vw,54px); } }

/* ==============================================================================
   12 · NOTICIAS (#news) — tarjetas del Newsroom y visor «Ver todas las noticias» (.news-browser)
   Notas: contenido.js → noticias (se agregan desde editor.html). Fotos: assets/news/.
   ============================================================================== */

/* ---------- NOTICIAS (NEWSROOM) — lo que Ampiria publica ---------- */
.news-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px; }
.news-grid{ margin-top:clamp(40px,5vw,62px); display:grid; gap:1px; background:var(--stone-line); border-top:1px solid var(--stone-line); border-bottom:1px solid var(--stone-line); grid-template-columns:1fr; }
@media (min-width:760px){ .news-grid{ grid-template-columns:repeat(2,1fr); } }
/* tarjeta con foto cuadrada opcional — misma huella de la tarjeta de
   siempre (mismo padding/alto aproximado), la foto entra como miniatura
   compacta al lado del texto, nunca como hero grande. Sin foto (na-thumb
   ausente), la tarjeta se ve exactamente como antes. */
.na{ background:var(--stone); padding:0 0 30px; display:flex; flex-direction:column; position:relative; text-decoration:none; color:inherit; transition:background-color .28s ease; }
.na::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--brand-blue); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); z-index:2; }
@media (hover:hover) and (pointer:fine){ .na[href]:hover{ background:var(--stone-2); } .na[href]:hover::before{ transform:scaleX(1); } }
/* foto a todo el ancho arriba, proporción editorial — grande y legible en
   cualquier tamaño de pantalla, nunca un thumbnail perdido al costado */
.na .na-thumb{ width:100%; aspect-ratio:16/10; flex:none; overflow:hidden; background:var(--stone-3); }
.na .na-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .na[href]:hover .na-thumb img{ transform:scale(1.06); } }
.na .na-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; padding:26px 28px 0; }
.na .na-meta{ display:flex; flex-wrap:wrap; gap:8px 14px; font-family:var(--font-mono); font-size:calc(0.7rem * var(--t-tarjetas)); letter-spacing:0.1em; text-transform:uppercase; color:var(--brand-blue); }
.na .na-meta .na-date{ color:var(--stone-faint); }
.na h3{ font-size:calc(1.2rem * var(--t-tarjetas)); line-height:1.34; color:var(--stone-text); }
.na p{ font-size:calc(0.92rem * var(--t-tarjetas)); line-height:1.64; color:var(--stone-muted); }
.na .na-more{ margin-top:auto; padding-top:4px; font-family:var(--font-mono); font-size:calc(0.68rem * var(--t-tarjetas)); letter-spacing:0.08em; text-transform:uppercase; color:var(--stone-muted); display:inline-flex; align-items:center; gap:9px; }
.na .na-more svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .28s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .na[href]:hover .na-more svg{ transform:translateX(4px); } }
/* sin foto (tarjetas sin "imagen" en contenido.js): el cuerpo recupera el
   padding completo arriba, para que no quede pegado al borde superior */
.na:not(:has(.na-thumb)) .na-body{ padding-top:30px; }
@media (max-width:759px){ .na .na-body{ padding:22px 22px 0; gap:14px; } .na h3{ font-size:1.1rem; } .na p{ font-size:0.89rem; } }

/* ---- "Ver todas las noticias" — botón + visor con filtro año/mes (NUEVO) --- */
.news-actions{ margin-top:40px; display:flex; justify-content:center; }
.news-browser{ position:fixed; inset:0; z-index:400; display:flex; align-items:flex-start; justify-content:center; padding:6vh var(--edge); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .32s var(--ease-out); }
.news-browser.open{ opacity:1; visibility:visible; pointer-events:auto; }
.news-browser .nb-scrim{ position:absolute; inset:0; background:color-mix(in srgb, var(--brand-ink) 82%, transparent); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); }
.news-browser .nb-panel{ position:relative; z-index:1; width:min(760px,100%); max-height:88vh; overflow-y:auto; background:var(--ink); color:var(--ink-text); border:1px solid var(--ink-line-strong); padding:clamp(28px,4vw,44px); transform:translateY(18px) scale(.98); opacity:0; transition:transform .34s var(--ease-out), opacity .34s var(--ease-out); }
.news-browser.open .nb-panel{ transform:translateY(0) scale(1); opacity:1; }
.nb-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.nb-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,3vw,1.9rem); }
.nb-close{ flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; border:1px solid var(--ink-line); color:var(--ink-text); cursor:pointer; transition:border-color .2s ease; }
.nb-close svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; }
@media (hover:hover) and (pointer:fine){ .nb-close:hover{ border-color:var(--brand-green); } }
.nb-filters{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.nb-pill{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; padding:8px 15px; border:1px solid var(--ink-line-strong); background:transparent; color:var(--ink-muted); cursor:pointer; transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
.nb-pill.active{ background:var(--brand-green); color:var(--brand-ink); border-color:var(--brand-green); }
@media (hover:hover) and (pointer:fine){ .nb-pill:not(.active):hover{ border-color:var(--brand-green); color:var(--ink-text); } }
.nb-list{ margin-top:28px; border-top:1px solid var(--ink-line); }
.nb-item{ padding:20px 0; border-bottom:1px solid var(--ink-line); display:flex; gap:18px; align-items:flex-start; text-decoration:none; color:inherit; }
.nb-item .nb-thumb{ width:56px; height:56px; flex:none; overflow:hidden; background:var(--ink-2); }
.nb-item .nb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.nb-item .nb-meta{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand-green); display:flex; flex-wrap:wrap; gap:6px 12px; }
.nb-item .nb-meta .nb-date{ color:var(--ink-faint); }
.nb-item h4{ margin-top:8px; font-family:var(--font-display); font-weight:600; font-size:0.98rem; line-height:1.35; color:var(--ink-text); }
.nb-empty{ margin-top:28px; font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint); text-align:center; padding:20px 0; }
@media (hover:hover) and (pointer:fine){ .na[href]:hover .na-more svg{ transform:translateX(4px); } }


/* ==============================================================================
   13 · CONTACTO (#contact) — columna de texto + formulario (.cform)
   Textos: contenido.js → textos (grupo «Contacto»). El envío real lo hace send-contact.php + js/formulario-contacto.js.
   ============================================================================== */

/* ---- contacto (existente) ---- */
.contact-sec{ position:relative; overflow:hidden; padding-top:clamp(114px,16vw,208px); padding-bottom:clamp(114px,16vw,208px); }
.contact-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.64) contrast(1.08) brightness(0.4); transform:scale(1.05); }
.contact-scrim{ position:absolute; inset:0; background:linear-gradient(100deg, color-mix(in srgb, var(--brand-ink) 96%, transparent) 0%, color-mix(in srgb, var(--brand-ink) 84%, transparent) 45%, color-mix(in srgb, var(--brand-ink) 58%, transparent) 100%); }
.contact-sec .inner{ position:relative; z-index:1; max-width:1180px; }
/* split de la sección: izquierda = kicker/título/email/LinkedIn/presencia
   (contenido de siempre), derecha = formulario nuevo — arrancan en la
   misma fila para que "Contact" y "Send a Message" queden a la misma
   altura. Apilado en mobile. */
.contact-split{ display:grid; gap:52px; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .contact-split{ grid-template-columns:0.86fr 1.14fr; gap:70px; } }
.contact-grid{ margin-top:38px; display:grid; gap:34px; grid-template-columns:1fr; align-items:start; }
.contact-email{ display:inline-block; font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--ink-text); text-decoration:none; border-bottom:2px solid var(--brand-green); padding-bottom:10px; transition:color .24s ease, border-color .24s ease; word-break:break-word; }
@media (hover:hover) and (pointer:fine){ .contact-email:hover{ color:var(--brand-light); } }
.contact-aside{ border-left:2px solid var(--brand-green); padding-left:23px; }
.contact-aside .ca-h{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }
.contact-aside .croute{ display:inline-flex; align-items:center; gap:9px; margin-top:14px; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-text); text-decoration:none; border-bottom:1px solid var(--ink-line); padding-bottom:6px; transition:border-color .24s ease; }
@media (hover:hover) and (pointer:fine){ .contact-aside .croute:hover{ border-color:var(--brand-green); } }
.contact-aside .croute svg{ width:15px; height:15px; fill:currentColor; }
.contact-presence{ margin-top:38px; font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint); }

/* columna del formulario — label pequeño a juego con "FOLLOW THE PLATFORM"
   de la izquierda, misma altura visual entre las dos columnas */
.contact-form-col > .ca-h{ display:block; margin-bottom:20px; }
.cform{ border-top:1px solid var(--ink-line-strong); }
.cfield{ position:relative; border-bottom:1px solid var(--ink-line-strong); padding:20px 0 20px 46px; display:grid; gap:7px; }
.cfield .cf-no{ position:absolute; left:0; top:22px; font-family:var(--font-mono); font-size:0.68rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.cfield label{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-muted); }
/* el borde tiene que leerse SIEMPRE, no solo al hacer foco — si no, el
   campo parece texto suelto y no se entiende que ahí se escribe */
.cfield input{
  width:100%; border:none; border-bottom:1.5px solid var(--ink-line-strong); background:transparent; padding:7px 2px 9px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink-text); cursor:text;
  transition:border-color .22s ease, background-color .22s ease;
}
@media (hover:hover) and (pointer:fine){ .cfield input:hover{ border-bottom-color:var(--ink-text); } }
.cfield input::placeholder{ color:var(--ink-faint); opacity:1; }
.cfield input:focus{ outline:none; border-bottom-color:var(--brand-green); background:color-mix(in srgb, var(--brand-green) 6%, transparent); }
.cfield input:invalid[data-touched="1"]{ border-bottom-color:#ff8f84; }
.cfield .cf-err{ font-family:var(--font-mono); font-size:0.66rem; color:#ff8f84; min-height:1em; opacity:0; transition:opacity .2s ease; }
.cfield .cf-err.show{ opacity:1; }

/* ==========================================================================
   FORMULARIO DE CONTACTO — única sección nueva autorizada. Vive dentro de
   la sección de contacto existente (fondo oscuro), en el mismo lenguaje
   visual de placa de exhibit — nunca un formulario SaaS genérico. Envío
   real vía send-contact.php, ver script del formulario más abajo. Las
   reglas de .cform/.cfield para fondo oscuro están más arriba, junto a
   .contact-form-col.
   ========================================================================== */
.cf-hp{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cform-actions{ margin-top:34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.cform-status{ font-family:var(--font-mono); font-size:0.76rem; line-height:1.6; color:var(--ink-muted); }
.cform-status.ok{ color:var(--brand-green); }
.cform-status.err{ color:#ff8f84; }
.btn.cform-submit{ position:relative; }
.btn.cform-submit[disabled]{ opacity:0.55; cursor:default; pointer-events:none; }
.btn.cform-submit .spin{ width:13px; height:13px; border-radius:50%; border:1.6px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color:currentColor; display:none; animation:spin .7s linear infinite; }
.btn.cform-submit[data-loading="1"] .spin{ display:inline-block; }
.btn.cform-submit[data-loading="1"] .lbl-default{ display:none; }
.btn.cform-submit .lbl-loading{ display:none; }
.btn.cform-submit[data-loading="1"] .lbl-loading{ display:inline; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .btn.cform-submit .spin{ animation-duration:1.4s; } }


/* ==============================================================================
   14 · PIE DE PÁGINA — logo, descripción, columnas de enlaces, línea legal
   Textos: contenido.js → textos (grupo «Pie de página»). Alto del logo: contenido.js → logo.pie_alto_px.
   ============================================================================== */

/* pie de página (footer) */
footer{ background:var(--ink); color:var(--ink-faint); border-top:1px solid var(--ink-line); }
.foot-top{ padding:68px var(--edge) 50px; display:grid; gap:46px; grid-template-columns:1fr; max-width:var(--container); margin:0 auto; }
@media (min-width:760px){ .foot-top{ grid-template-columns:1.4fr 0.9fr 0.9fr; } }
/* V28 — antes se blanqueaba el logo verde con filter:invert; ahora cada
   versión (verde / blanca) es su propio archivo SVG y el alto es editable. */
.foot-brand img{ height:var(--logo-pie-h); width:auto; max-width:100%; object-fit:contain; object-position:left center; opacity:0.95; }
.foot-brand p{ margin-top:19px; font-size:0.86rem; color:var(--ink-faint); max-width:34ch; }
.foot-social{ margin-top:21px; display:inline-flex; align-items:center; gap:8px; color:var(--ink-faint); text-decoration:none; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; transition:color .22s ease; }
@media (hover:hover) and (pointer:fine){ .foot-social:hover{ color:var(--brand-green); } }
.foot-col h5{ font-family:var(--font-mono); font-size:calc(0.7rem * var(--t-rotulos)); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); margin:0; }
.foot-col ul{ list-style:none; margin:17px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot-col li a{ text-decoration:none; font-size:0.86rem; color:var(--ink-muted); transition:color .22s ease; }
@media (hover:hover) and (pointer:fine){ .foot-col li a:hover{ color:var(--brand-green); } } /* sobre --ink sólido */
.foot-bottom{ border-top:1px solid var(--ink-line); padding:23px var(--edge); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; max-width:var(--container); margin:0 auto; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.03em; color:var(--ink-faint); }


/* ==============================================================================
   15 · AJUSTES FINALES — accesibilidad táctil (≥44 px) y retoques de las versiones V23–V27
   Van al final A PROPÓSITO: en CSS gana la regla que aparece más abajo, y estas corrigen a las anteriores. No moverlas más arriba.
   ============================================================================== */

/* --- V23: áreas táctiles ≥44px (WCAG 2.5.8 / gate de la puerta de calidad).
   Se agranda el área activa, no el texto: el tamaño tipográfico no cambia. --- */
.links a{ display:inline-flex; align-items:center; min-height:44px; }
.lang-btn{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
/* V31.5 — antes esta regla decía `display:inline-flex` sin media query y
   anulaba el `display:none` del botón en teléfono: el botón se mostraba, no
   entraba, y empujaba el menú hamburguesa fuera de la pantalla. */
.nav-cta{ min-height:44px; align-items:center; }
@media (min-width:640px){ .nav-cta{ display:inline-flex; } }
.mobile-menu .nav-cta{ display:inline-flex; }
.nb-close{ width:44px; height:44px; }
a.croute{ display:inline-flex; align-items:center; min-height:44px; }
.contact-form input, .contact-form select, .contact-form textarea,
form input[type="text"], form input[type="email"], form input[type="tel"],
form input[type="url"], form select, form textarea{ min-height:44px; }
.btn, .btn.ghost{ min-height:44px; }

/* --- V27: las cifras vuelven adentro de la portada, arriba de la cinta. La
   V23 las había sacado a una franja propia debajo (.hero-stats), que ya no
   existe: la regla queda documentada acá y sin uso. --- */

/* --- V23 ronda 3: los últimos objetivos bajo 44px. Se usa !important porque
   las reglas originales son más específicas; el texto no cambia de tamaño. --- */
.foot-nav a, .foot-links a, footer nav a, footer li > a{
  display:inline-flex !important; align-items:center !important; min-height:44px !important; }
.foot-social{ display:inline-flex !important; align-items:center !important; min-height:44px !important; }
button.nb-close, .nb-head .nb-close{ width:44px !important; height:44px !important; box-sizing:border-box; }

/* --- V23: el eslogan de la barra aparece solo al bajar. Sobre el pliegue lo
   dice el h1 a 132px; repetirlo a 11px en la barra era la misma frase dos
   veces en la misma pantalla. Revertir = borrar esta regla. --- */
.topnav:not(.scrolled) .brand .tag{ display:none; }

/* ==============================================================================
   16 · ALINEACIÓN Y TARJETAS POR SECCIÓN — estados editables (V31)
   Cada sección puede llevar data-alinear="centro" (texto centrado) y
   data-alinear-tarjetas="centro" (contenido de las tarjetas centrado), y una
   variable --t-tarjetas propia (letra de las tarjetas). Los tres los escribe
   js/arranque.js → aplicarSecciones() leyendo contenido.js → secciones; el
   cliente los cambia desde editor.html → «Secciones». Sin atributo, todo queda
   a la izquierda, exactamente como hasta la V30. Va después del bloque 15 a
   propósito: son estados que pisan la maqueta de fábrica de cada sección.
   ============================================================================== */

/* -- por defecto explícito (sin cambio visual): tarjetas a la izquierda -- */
.stat, .pcard, .cs, .na .na-body, .hero-metrics .hm{ text-align:left; }

/* -- texto de la sección centrado -- */
[data-alinear="centro"] .exhibit-head,
[data-alinear="centro"] .subhead,
.hero[data-alinear="centro"] .content,
.sec[data-alinear="centro"] .contact-left{ text-align:center; }
[data-alinear="centro"] .exhibit-head .ex-mark,
.sec[data-alinear="centro"] .contact-left .ex-mark,
[data-alinear="centro"] .subhead,
.hero[data-alinear="centro"] .ctas,
.hero[data-alinear="centro"] .hero-metrics,
.sec[data-alinear="centro"] .map-legend{ justify-content:center; }
/* las cajas de texto tienen ancho máximo (medidas en ch): centrarlas, no solo su texto */
[data-alinear="centro"] h1, [data-alinear="centro"] h2, [data-alinear="centro"] .lede,
.hero[data-alinear="centro"] .sub, .sec[data-alinear="centro"] .contact-presence{ margin-left:auto; margin-right:auto; }
/* contacto: la columna de texto se centra; el aside pierde el filete lateral y lo lleva arriba */
.sec[data-alinear="centro"] .contact-grid{ justify-items:center; text-align:center; }
.sec[data-alinear="centro"] .contact-aside{ border-left:none; padding-left:0; border-top:2px solid var(--brand-green); padding-top:18px; }

/* -- contenido de las tarjetas centrado -- */
[data-alinear-tarjetas="centro"] .stat,
[data-alinear-tarjetas="centro"] .pcard,
[data-alinear-tarjetas="centro"] .cs,
[data-alinear-tarjetas="centro"] .na .na-body{ text-align:center; }
.hero[data-alinear-tarjetas="centro"] .hero-metrics .hm{ text-align:center; align-items:center; }
[data-alinear-tarjetas="centro"] .pcard .top,
[data-alinear-tarjetas="centro"] .cs .cs-name,
[data-alinear-tarjetas="centro"] .na .na-meta{ justify-content:center; }
[data-alinear-tarjetas="centro"] .pcard .top{ gap:12px; }
/* la barrita verde que crece bajo la cifra sale del centro en vez del borde izquierdo */
[data-alinear-tarjetas="centro"] .stat::before{ left:50%; transform:translateX(-50%); }