/*
 * INFRAES: fundamentos (fuente, variables, base, botones y enlaces).
 * Parte del sistema de GEAM (mismo autor): márgenes, escala fluida, curva, botón de bola y enlace subrayado.
 * Cambia lo que da identidad: colores del logo de INFRAES y la familia Hanken Grotesk.
 *
 * Barras de Safari 26 (iOS, Liquid Glass), como GEAM. Las franjas oscuras llevan background-color normal: bajo las
 * barras se ven como vidrio y al volver al blanco las barras vuelven a claro. html y body son blancos, sin transición.
 * Lo que tiñe las barras de un color sólido y lo deja pegado es un fixed/sticky ancho (90 % o más, contando lo que
 * desborda) que toca el borde superior o inferior de la pantalla: Safari toma su color y no lo suelta al irse.
 * Por eso: nada de sticky ancho (un sticky entra siempre cruzando el borde inferior); las escenas fijadas usan
 * position: fixed solo mientras duran (pin de GSAP o sitio.js), con su caja a --orilla de los bordes; y los fijos
 * anchos (encabezado) miden 88vw. Los sticky angostos (columnas de escritorio) no tiñen. Ver _brief/safari-barras.md.
 */

/* Hanken Grotesk (Google Fonts, OFL): eje de peso 100–900 en un solo archivo latino. */
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fuentes/hanken-grotesk-latin-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--marino: #0d3957;
	--azul: #066eb4;
	--verde: #009640;
	--celeste: #9ccbec; /* El azul de acento, aclarado para leerse sobre fondo oscuro. */
	--franja: #0b2f49;
	--tinta: #14283a;
	--tinta-2: #5b6b7a;
	--linea: #e1e6ec;
	--niebla: #f2f5f8;
	--cielo: #e8f1f9; /* Panel azul muy claro del formulario. */
	--blanco: #fff;

	--fuente: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* El titular de portada se limita también por alto, para que quepa en el primer pantallazo. */
	--t-hero: clamp(2.15rem, min(6.6vw, 10.4svh), 6.5rem);
	--t-1: clamp(2.1rem, 6vw, 4.75rem);
	--t-2: clamp(2rem, 4.6vw, 4rem);
	--t-3: clamp(1.4rem, 2.3vw, 1.875rem);
	--t-lead: clamp(1.0625rem, 1.3vw, 1.1875rem);
	--t-texto: 1.0625rem;
	--t-menor: .875rem;

	--ancho: 1520px;
	--ancho-bloque: min(100vw - 2 * var(--orilla), 1720px);
	--margen: clamp(16px, 4vw, 64px);
	--orilla: clamp(6px, .8vw, 12px);
	--seccion: clamp(88px, 11vw, 152px);
	--enc-alto: 84px;
	--curva: cubic-bezier(.16, 1, .3, 1);
	--dur: .9s;
	--radio: 14px;
	--radio-grande: clamp(22px, 2.4vw, 30px);
}
@media (max-width: 767px) { :root { --enc-alto: 68px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--blanco); scroll-padding-top: calc(var(--enc-alto) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
	margin: 0;
	overflow-x: clip;
	background-color: var(--blanco);
	color: var(--tinta);
	font: 400 var(--t-texto)/1.55 var(--fuente);
	-webkit-font-smoothing: antialiased;
	font-synthesis: none;
	overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
em { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.pie :focus-visible, .menu :focus-visible, .oscuro :focus-visible { outline-color: #fff; }
::selection { background: var(--marino); color: #fff; }

.saltar { position: fixed; left: 12px; top: -64px; z-index: 200; padding: 10px 18px; border-radius: 999px; background: var(--marino); color: #fff; text-decoration: none; font-weight: 500; transition: top .2s; }
.saltar:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

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

/* Títulos: Hanken Grotesk 600 con tracking negativo. La última palabra en acento, con su punto. */
.titulo {
	color: var(--marino);
	font-size: var(--t-2);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.04em;
	text-wrap: balance;
}
.titulo em, .hero__titulo em { color: var(--azul); }
.oscuro .titulo, .oscuro .titulo em { color: #fff; }
.oscuro .titulo em { color: var(--celeste); }
.lead { max-width: 46ch; color: var(--tinta-2); font-size: var(--t-lead); line-height: 1.5; text-wrap: pretty; }
.oscuro .lead { color: rgb(255 255 255 / 72%); }
/* Rótulo pequeño en gris: dice de qué trata lo que sigue. Sin mayúsculas ni tracking. */
.rotulo { color: var(--tinta-2); font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.oscuro .rotulo { color: rgb(255 255 255 / 66%); }

/* Botón de píldora. Con .boton--bola, el círculo de la flecha se expande y llena el botón. */
.boton {
	--b-fondo: var(--marino);
	--b-texto: #fff;
	--b-bola: var(--azul);
	--b-bola-texto: #fff;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 52px;
	padding: 0 26px;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: var(--b-fondo);
	color: var(--b-texto);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color .3s var(--curva), background-color .3s, transform .35s var(--curva);
	-webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(.98); }
.boton:disabled { opacity: .55; cursor: wait; }
.boton--claro { --b-fondo: #fff; --b-texto: var(--marino); }
.boton--gris { --b-fondo: rgb(255 255 255 / 12%); --b-texto: #fff; }
@media (hover: hover) { .boton--gris:hover { background: rgb(255 255 255 / 20%); } }
.boton--suave { --b-fondo: transparent; --b-texto: var(--marino); box-shadow: inset 0 0 0 1.5px rgb(13 57 87 / 22%); }
@media (hover: hover) { .boton--suave:hover { box-shadow: inset 0 0 0 1.5px var(--marino); } }
.boton--bola { justify-content: space-between; padding: 6px 6px 6px 24px; }
.boton__bola { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--b-bola-texto); transition: transform .45s var(--curva); }
.boton__bola::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--b-bola); transition: transform .5s var(--curva); }
.boton__bola .flecha { position: relative; width: 20px; height: 20px; }
.boton--chico { min-height: 46px; padding: 4px 4px 4px 20px; font-size: .9375rem; gap: 12px; }
.boton--chico .boton__bola { width: 38px; height: 38px; }
@media (hover: hover) {
	.boton--bola:hover { color: var(--b-bola-texto); }
	.boton--bola:hover .boton__bola::before { transform: scale(14); }
	.boton--bola:hover .boton__bola { transform: translateX(2px); }
}

/* Enlace de texto con flecha. */
.enlace { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--marino); font-weight: 500; text-decoration: none; }
.oscuro .enlace { color: #fff; }
.enlace > span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; transition: background-size .6s var(--curva); }
.enlace .flecha { flex: none; width: 20px; height: 20px; transition: transform .6s var(--curva); }
@media (hover: hover) {
	.enlace:hover > span { background-size: 0 1.5px; background-position: 100% 100%; }
	.enlace:hover .flecha { transform: translateX(6px); }
}

/* Íconos de línea fina, azules y pequeños. */
.icono { width: 32px; height: 32px; color: var(--azul); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

@keyframes palabra-entra { from { transform: translateY(110%); } }
@keyframes lado-entra { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Logo (Piezas::logo). */
.logo { display: block; width: auto; height: 44px; }
.logo--texto { height: auto; color: var(--marino); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }

/* Lienzo: cada sección vive en su contenedor a todo el ancho, sin separación extra. */
.lz-interno { gap: 0; }
.tb-principal { min-height: 0; }