/*
 * MEDIVIAL: fundamentos compartidos (fuentes, variables, base, botones).
 * Parte del sistema de GEAM (márgenes, escala, curva, botones); cambia color, fuentes y logo.
 * Para cambiar la paleta o la escala, edite solo :root.
 *
 * 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.
 */

/* Archivo (Google Fonts, OFL): títulos, con eje de ancho. Inter (OFL): texto. Ambas variables. */
@font-face {
	font-family: "Archivo";
	src: url("../fuentes/archivo-latin-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fuentes/inter-latin-var.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--noche: #16194a;      /* Títulos: índigo noche. */
	--indigo: #262b75;     /* Carretera del logo. */
	--acero: #194b74;      /* Letras del logo: acento y enlaces. */
	--cielo: #b4c8e6;      /* Acento sobre fondo oscuro. */
	--ambar: #f2b705;      /* Solo en detalles mínimos (punto del avance). */
	--tinta: #1b1e3a;
	--tinta-2: #5a5f7a;
	--linea: #e3e5ee;
	--niebla: #f3f4f8;
	--bruma: #e9eef7;      /* Panel de la solicitud. */
	--franja: #0f1236;
	--blanco: #fff;

	--fuente-texto: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--fuente-titulos: "Archivo", ui-sans-serif, system-ui, sans-serif;
	--ancho-titulos: 110%;

	--t-hero: clamp(2.2rem, min(5.2vw, 11svh), 5.75rem);
	--t-1: clamp(2rem, 5.4vw, 4.25rem);
	--t-2: clamp(1.9rem, 4.2vw, 3.6rem);
	--t-3: clamp(1.35rem, 2.1vw, 1.75rem);
	--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(80px, 11vw, 144px);
	--enc-alto: 80px;
	--curva: cubic-bezier(.16, 1, .3, 1);
	--dur: .9s;
	--radio: 14px;
	--radio-grande: clamp(22px, 2.4vw, 28px);

	--c-titulo: var(--noche);
	--c-texto: var(--tinta);
	--c-suave: var(--tinta-2);
	--c-linea: var(--linea);
	--c-acento: var(--acero);
}
@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 {
	position: relative;
	isolation: isolate;
	min-height: 100%;
	margin: 0;
	overflow-x: clip;
	background-color: var(--blanco);
	color: var(--c-texto);
	font: 400 var(--t-texto)/1.55 var(--fuente-texto);
	-webkit-font-smoothing: antialiased;
	font-synthesis: none;
	overflow-wrap: break-word;
}
body::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blanco); pointer-events: none; transition: background-color var(--dur) var(--curva); }
html.en-pie, html.en-pie body { background-color: var(--franja); }
html.en-pie body::before { background-color: var(--franja); }

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, blockquote, dl, dd, fieldset { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
fieldset { min-width: 0; padding: 0; border: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }

/* Lienzo envuelve cada sección: sin separación entre ellas. */
.lz-documento .lz-interno { gap: 0; }

.pie :focus-visible, .franja :focus-visible, .menu :focus-visible, .oscuro :focus-visible { outline-color: #fff; }
:focus-visible { outline: 2px solid var(--acero); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--noche); color: #fff; }

.saltar { position: fixed; left: 12px; top: -64px; z-index: 200; padding: 10px 18px; border-radius: 999px; background: var(--noche); color: #fff; text-decoration: none; font-weight: 500; transition: top .2s; }
.saltar:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.lead, .texto { max-width: 46ch; color: var(--c-suave); font-size: var(--t-lead); line-height: 1.5; text-wrap: pretty; }
.rotulo { margin-bottom: clamp(10px, 1.2vw, 16px); color: var(--c-suave); font-size: 1rem; font-weight: 400; }
.titulos, .seccion-titulo, .titulo-seccion, .titular, .mayus {
	font-family: var(--fuente-titulos);
	font-stretch: var(--ancho-titulos);
	font-weight: 600;
}
.seccion-titulo, .titulo-seccion { color: var(--c-titulo); font-size: var(--t-2); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.es-resalte { color: var(--c-acento); }

/* Cabeza de sección: título a la izquierda, lead a la derecha. */
.seccion-cabeza { display: grid; gap: 18px 40px; margin-bottom: clamp(36px, 5vw, 72px); }
@media (min-width: 900px) { .seccion-cabeza { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }

/* Titular que entra palabra por palabra, sin esperar a JavaScript. */
.titular__m { display: inline-block; overflow: hidden; vertical-align: top; padding: .15em .05em .2em; margin: -.15em -.05em -.2em; }
.titular__p { display: inline-block; animation: palabra-entra 1.15s var(--curva) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
.titular .es-resalte { color: var(--c-acento); }
@keyframes palabra-entra { from { transform: translateY(125%); } }

/* 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(--noche);
	--b-texto: #fff;
	--b-bola: var(--acero);
	--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--primario { --b-fondo: var(--noche); --b-texto: #fff; }
.boton--claro { --b-fondo: #fff; --b-texto: var(--noche); }
.boton--borde { --b-fondo: transparent; --b-texto: var(--noche); box-shadow: inset 0 0 0 1.5px currentColor; }
.oscuro .boton--borde { --b-texto: #fff; }
@media (hover: hover) { .boton--primario:not(.boton--bola):hover { background: var(--acero); } .boton--borde:hover { background: var(--noche); color: #fff; } .oscuro .boton--borde:hover { background: #fff; color: var(--noche); } }
.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; }
@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); }
}
/* Botón sin bola: la flecha avanza. */
.boton:not(.boton--bola) .flecha { width: 18px; height: 18px; transition: transform .45s var(--curva); }
@media (hover: hover) { .boton:not(.boton--bola):hover .flecha { transform: translateX(4px); } }

/* Enlace de texto con flecha. */
.enlace { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; font-weight: 500; text-decoration: none; }
.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); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }