/* .argy — web v7 · «La Argentina productiva en movimiento»
   base.css: fuentes, tokens, reset, tipografía, botones, cabecera, interfaces de ejemplo, la corriente y el sol.
   Las escenas tienen sus propias hojas: hero.css, recorrido.css y secciones.css.
   Biblia visual: docs/redesign/v7/ART_DIRECTION.md */

@font-face { font-family: 'Archivo'; src: url(/fonts/archivo.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Chivo Mono'; src: url(/fonts/chivo-mono.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Tintas (las mismas que usan las ilustraciones) */
  --celeste: #49B6EA;
  --celeste-claro: #BFE6F8;
  --electrico: #1769E8;
  --noche: #10253F;
  --noche-2: #0B1A2E;
  --blanco: #F7F7F2;
  --carbon: #17191C;
  --sol: #FFC83D;
  --ocre: #E3A52E;
  --naranja: #FF6A2B;
  --verde: #2F8F5B;
  --tomate: #E8553E;
  --mitilli: #17393C;

  /* Texto */
  --tinta: var(--noche);
  --tinta-suave: #3C4E66;

  /* Tipografía */
  --f-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Chivo Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Escala: monumental en escritorio, firme en celular */
  --t-xxl: clamp(3.1rem, 1.2rem + 7.4vw, 9.6rem);
  --t-xl: clamp(2.5rem, 1.1rem + 5.2vw, 6.8rem);
  --t-l: clamp(2rem, 1rem + 3.4vw, 4.6rem);
  --t-m: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  --t-lead: clamp(1.08rem, .98rem + .45vw, 1.4rem);
  --t-base: 1.0625rem;
  --t-chico: .875rem;
  --t-mono: .75rem;

  /* Medidas */
  --ancho: 1360px;
  --margen: clamp(1.1rem, .6rem + 2.6vw, 3.5rem);
  --radio: 14px;
  --borde: 1.5px solid var(--noche);
  --sombra-dura: 5px 5px 0 var(--noche);

  /* Movimiento */
  --entra: cubic-bezier(.2, .8, .2, 1);
  --cambia: cubic-bezier(.7, 0, .2, 1);
  --rebota: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: light;
}

/* ── Idioma: el HTML trae los dos, el CSS muestra uno ── */
html[data-lang="es"] [lang="en"], html[data-lang="en"] [lang="es"] { display: none !important; }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font: 400 var(--t-base)/1.55 var(--f-texto);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
b, strong { font-weight: 700; }
em { font-style: normal; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid var(--electrico); outline-offset: 3px; border-radius: 4px; }
[data-tema="noche"] :focus-visible, [data-tema="electrico"] :focus-visible { outline-color: var(--sol); }
::selection { background: var(--sol); color: var(--noche); }

.saltar { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--noche); color: var(--blanco); padding: .7rem 1rem; border-radius: 10px; text-decoration: none; transition: top .2s; }
.saltar:focus { top: 1rem; }

.envoltura { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* ── Tipografía ── */
.titulo-xl, .titulo-l, .hero-titulo, .manif-titulo, .puente-titulo, .mundo-titulo, .vision, .cta-titulo {
  font-family: var(--f-display);
  font-weight: 850;
  font-stretch: 92%;
  line-height: .92;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.titulo-xl { font-size: var(--t-xl); }
.titulo-l { font-size: var(--t-l); }
.titulo-xl em, .titulo-l em { font-stretch: 125%; font-weight: 900; }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 46ch; text-wrap: pretty; }

/* El punto de .argy cierra los titulares */
.pto { display: inline-block; width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: var(--electrico); vertical-align: baseline; }
[data-tema="noche"] .pto, [data-tema="electrico"] .pto { background: var(--sol); }
[data-tema="sol"] .pto { background: var(--noche); }

.rotulo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  font: 500 var(--t-mono)/1.3 var(--f-mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.rotulo .num {
  display: inline-grid; place-items: center; min-width: 2.4em; height: 2.4em; padding-inline: .4em;
  border: 1.5px solid currentColor; border-radius: 99px; font-weight: 700;
}
.aviso { font: 400 .7rem/1.4 var(--f-mono); letter-spacing: .04em; opacity: .78; }

/* ── Botones y enlaces ── */
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; }
.btn {
  --fondo: var(--noche); --texto: var(--blanco); --sombra: var(--sol);
  position: relative; display: inline-flex; align-items: center; gap: .7rem;
  min-height: 52px; padding: .85rem 1.35rem .85rem 1.5rem;
  border: 2px solid var(--noche); border-radius: 99px;
  background: var(--fondo); color: var(--texto);
  font: 700 1rem/1.1 var(--f-texto); font-stretch: 105%; text-decoration: none; letter-spacing: -.005em;
  box-shadow: 0 0 0 var(--sombra);
  transition: transform .35s var(--rebota), box-shadow .35s var(--rebota), background-color .25s;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--sombra); }
.btn:active { transform: translate(0, 0); box-shadow: 0 0 0 var(--sombra); transition-duration: .08s; }
.btn-grande { min-height: 62px; padding: 1rem 1.6rem 1rem 1.9rem; font-size: 1.12rem; }
.btn-chico { min-height: 42px; padding: .55rem .95rem .55rem 1.1rem; font-size: .92rem; }
.btn-sol { --fondo: var(--sol); --texto: var(--noche); --sombra: var(--blanco); border-color: var(--sol); }
.btn-claro { --fondo: var(--blanco); --texto: var(--noche); --sombra: var(--noche); border-color: var(--blanco); }
.btn-contorno { --fondo: transparent; --texto: var(--blanco); --sombra: var(--electrico); border-color: var(--blanco); }
.flecha { position: relative; width: 1.15em; height: 2px; background: currentColor; transition: width .35s var(--rebota); }
.flecha::after { content: ''; position: absolute; right: -1px; top: 50%; width: .5em; height: .5em; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
.btn:hover .flecha { width: 1.6em; }

.link-linea {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left calc(50% + .75em) / 100% 2px no-repeat;
  transition: background-size .4s var(--entra);
}
.link-linea:hover { background-size: 0 2px; background-position: right calc(50% + .75em); }

/* ── Cabecera ── */
.cab {
  --cab-fondo: transparent; --cab-tinta: var(--noche); --cab-punto: var(--blanco);
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  height: 72px; padding: 0 var(--margen);
  color: var(--cab-tinta); background: var(--cab-fondo);
  transition: background-color .35s, color .35s, box-shadow .35s, transform .45s var(--cambia);
}
.cab.solida { box-shadow: 0 1.5px 0 color-mix(in srgb, var(--cab-tinta) 18%, transparent); }
.cab[data-tema="claro"].solida { --cab-fondo: color-mix(in srgb, var(--blanco) 94%, transparent); --cab-punto: var(--celeste); }
.cab[data-tema="celeste"].solida { --cab-fondo: color-mix(in srgb, var(--celeste) 94%, transparent); }
.cab[data-tema="noche"], .cab[data-tema="electrico"], .cab[data-tema="mitilli"], .cab[data-tema="tomate"] { --cab-tinta: var(--blanco); --cab-punto: var(--sol); }
.cab[data-tema="noche"].solida { --cab-fondo: color-mix(in srgb, var(--noche) 94%, transparent); }
.cab[data-tema="electrico"].solida { --cab-fondo: color-mix(in srgb, var(--electrico) 94%, transparent); }
.cab[data-tema="mitilli"].solida { --cab-fondo: color-mix(in srgb, var(--mitilli) 94%, transparent); }
.cab[data-tema="tomate"].solida { --cab-fondo: color-mix(in srgb, var(--tomate) 94%, transparent); }
.cab[data-tema="sol"] { --cab-punto: var(--blanco); }
.cab[data-tema="sol"].solida { --cab-fondo: color-mix(in srgb, var(--sol) 94%, transparent); }
.cab.solida { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cab-logo { display: block; width: 92px; flex: none; }
.cab-logo svg, .pie-logo svg { width: 100%; height: auto; overflow: visible; }
.logo-punto { fill: var(--cab-punto, var(--celeste)); transition: fill .35s; }
.cab-nav { display: flex; gap: .3rem; margin-left: auto; }
.cab-nav a { position: relative; padding: .6rem .8rem; font-weight: 600; font-size: .94rem; text-decoration: none; border-radius: 99px; transition: background-color .2s; }
.cab-nav a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.cab-lado { display: flex; align-items: center; gap: .9rem; margin-left: 1rem; }
.idioma { display: flex; padding: 3px; border: 1.5px solid currentColor; border-radius: 99px; }
.idioma button { min-width: 36px; min-height: 30px; border: 0; border-radius: 99px; background: none; font: 600 .72rem/1 var(--f-mono); letter-spacing: .06em; }
.idioma button[aria-pressed="true"] { background: var(--cab-tinta); color: var(--cab-inversa, var(--blanco)); }
.cab[data-tema="noche"], .cab[data-tema="electrico"], .cab[data-tema="mitilli"], .cab[data-tema="tomate"] { --cab-inversa: var(--noche); }
.cab .btn-chico { --fondo: var(--noche); --texto: var(--blanco); }
.cab[data-tema="noche"] .btn-chico, .cab[data-tema="electrico"] .btn-chico, .cab[data-tema="mitilli"] .btn-chico, .cab[data-tema="tomate"] .btn-chico { --fondo: var(--sol); --texto: var(--noche); --sombra: var(--blanco); border-color: var(--sol); }

/* ── La corriente: el software que recorre la escena ── */
.corriente { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.corriente path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.c-fondo { stroke: color-mix(in srgb, var(--noche) 30%, transparent); stroke-width: 2; stroke-dasharray: 2 9; }
.c-traza { stroke: var(--electrico); stroke-width: 6; filter: drop-shadow(0 0 0 var(--blanco)); }
.c-traza-2 { stroke: var(--electrico); }
/* La versión corta de un texto (botón de la cabecera en pantallas angostas) */
.t-corto { display: none; }
.nodo {
  position: absolute; left: var(--x); top: var(--y); z-index: 5;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: var(--blanco); border: 3px solid var(--noche);
  transform: scale(.55); opacity: .0;
  transition: transform .5s var(--rebota), opacity .3s, background-color .3s;
  pointer-events: none;
}
.nodo::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid var(--sol); opacity: 0; transform: scale(.4); }
.nodo.encendido { opacity: 1; transform: scale(1); background: var(--sol); }
.nodo.encendido::after { animation: pulso 2.4s var(--entra) infinite; }
@keyframes pulso { 0% { opacity: .9; transform: scale(.4); } 80%, 100% { opacity: 0; transform: scale(1.5); } }


/* ── El sol de .argy ── */
.sol-rayos { fill: var(--sol); }
.sol-disco { fill: var(--sol); }
.sol-a path { fill: var(--noche); }

/* ── Entradas al hacer scroll ── */
.js [data-ver] { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--entra), transform 1s var(--entra); transition-delay: calc(var(--o, 0) * 90ms); }
.js [data-ver].visto { opacity: 1; transform: none; }

/* ── Objetos recortados ── */
.obj { position: absolute; pointer-events: none; user-select: none; }

/* ── Movimiento reducido: todo en su estado final ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-ver] { opacity: 1; transform: none; }
  .nodo { opacity: 1; transform: none; background: var(--sol); }
}

@media (max-width: 1100px) {
  .cab-nav { display: none; }
  .cab-lado { margin-left: auto; }
}
@media (max-width: 520px) {
  .cab { height: 64px; gap: .8rem; }
  .cab-logo { width: 78px; }
  .cab-lado { gap: .5rem; }
  .cab .btn-chico { padding-inline: .8rem; }
  .cab .btn-chico .flecha { display: none; }
  .cab .t-largo { display: none; }
  .cab .t-corto { display: inline; }
}
@media (max-width: 380px) {
  .btn-grande { padding: .85rem 1.15rem .85rem 1.3rem; font-size: 1rem; }
}