/* ==========================================================================
   FXLAT · base
   Reinicio corto, tipografia y ritmo vertical.
   Todos los valores vienen de tokens.json a traves de las variables --fxlat-*.
   Ninguna medida se escribe a mano aqui salvo las que son geometria de maqueta.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--fxlat-color-papel);
	color: var(--fxlat-color-tinta);
	font-family: var(--fxlat-font-family-texto);
	font-size: var(--fxlat-font-size-texto);
	font-weight: var(--fxlat-font-weight-texto-regular);
	line-height: var(--fxlat-line-height-texto);
	letter-spacing: var(--fxlat-letter-spacing-texto);

	/* Cifras tabulares en todo el sitio, no solo en las tablas. */
	font-variant-numeric: var(--fxlat-font-variant-numeric-texto);
	-moz-font-feature-settings: "tnum";
	font-feature-settings: "tnum";

	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* --- Titulos ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.fxlat-titulo-1,
.fxlat-titulo-2,
.fxlat-titulo-3 {
	margin: 0 0 var(--fxlat-space-4);
	font-family: var(--fxlat-font-family-rotulo);
	font-weight: var(--fxlat-font-weight-rotulo-titulo);
	line-height: var(--fxlat-line-height-titulo);
	letter-spacing: var(--fxlat-letter-spacing-titulo);
	text-wrap: balance;
}

h1,
.fxlat-titulo-1 {
	font-size: var(--fxlat-font-size-titulo-1);
	line-height: var(--fxlat-line-height-apretado);
}

h2,
.fxlat-titulo-2 {
	font-size: var(--fxlat-font-size-titulo-2);
}

h3,
.fxlat-titulo-3 {
	font-size: var(--fxlat-font-size-titulo-3);
}

h4, h5, h6 {
	font-size: var(--fxlat-font-size-texto);
}

/* --- Texto -------------------------------------------------------------- */

p {
	margin: 0 0 var(--fxlat-space-5);
	max-width: 68ch;
}

.fxlat-texto-largo p,
.fxlat-texto-largo li {
	font-size: var(--fxlat-font-size-texto-largo);
	line-height: var(--fxlat-line-height-lectura-larga);
}

strong,
b {
	font-weight: var(--fxlat-font-weight-texto-fuerte);
}

/* Etiqueta de seccion: mono, mayusculas, muy espaciada. */
.fxlat-meta {
	margin: 0 0 var(--fxlat-space-3);
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-meta);
	font-weight: var(--fxlat-font-weight-dato-fuerte);
	letter-spacing: var(--fxlat-letter-spacing-meta);
	line-height: var(--fxlat-line-height-tabla);
	text-transform: uppercase;
	color: var(--fxlat-color-grafito);
}

.fxlat-nota {
	font-size: var(--fxlat-font-size-nota);
	line-height: var(--fxlat-line-height-tabla);
	color: var(--fxlat-color-grafito);
}

/* Todo dato numerico, en mono y con cifras tabulares. */
.fxlat-dato {
	font-family: var(--fxlat-font-family-dato);
	font-size: var(--fxlat-font-size-dato);
	font-weight: var(--fxlat-font-weight-dato-regular);
	font-variant-numeric: var(--fxlat-font-variant-numeric-tabla);
	-moz-font-feature-settings: "tnum";
	font-feature-settings: "tnum";
	white-space: nowrap;
}

.fxlat-dato--vacio {
	color: var(--fxlat-color-grafito);
}

/* El dato como imagen: el activo visual insignia de la marca. */
.fxlat-dato-imagen {
	display: block;
	font-family: var(--fxlat-font-family-rotulo);
	font-size: clamp(56px, 12vw, var(--fxlat-font-size-dato-imagen));
	font-weight: var(--fxlat-font-weight-rotulo-marca);
	line-height: var(--fxlat-line-height-apretado);
	letter-spacing: var(--fxlat-letter-spacing-titulo);
	font-variant-numeric: var(--fxlat-font-variant-numeric-tabla);
	margin: 0 0 var(--fxlat-space-4);
}

/* --- Enlaces ------------------------------------------------------------ */

a {
	color: var(--fxlat-color-tinta);
	text-decoration: underline;
	text-decoration-thickness: var(--fxlat-border-width-hairline);
	text-underline-offset: 3px;
}

a:hover,
a:focus {
	text-decoration-thickness: var(--fxlat-border-width-regla);
}

:focus-visible {
	outline: var(--fxlat-border-width-regla) solid var(--fxlat-color-foco);
	outline-offset: 2px;
}

/* --- Listas ------------------------------------------------------------- */

ul, ol {
	margin: 0 0 var(--fxlat-space-5);
	padding-left: var(--fxlat-space-5);
	max-width: 68ch;
}

li {
	margin-bottom: var(--fxlat-space-2);
}

.fxlat-lista-limpia {
	list-style: none;
	padding-left: 0;
}

/* --- Reglas y medios ---------------------------------------------------- */

hr {
	border: 0;
	border-top: var(--fxlat-border-width-regla) solid var(--fxlat-color-linea-fuerte);
	margin: var(--fxlat-space-8) 0;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* --- Hueco de dato pendiente -------------------------------------------- */

/*
   Un dato societario que falta se muestra como hueco, no se rellena con algo
   plausible. Sin verde ni rojo: se resuelve con contorno y fondo de papel alterno.
*/
.fxlat-hueco {
	background: var(--fxlat-color-papel-alt);
	color: var(--fxlat-color-tinta);
	font-family: var(--fxlat-font-family-dato);
	font-size: 0.9em;
	padding: 0 var(--fxlat-space-1);
	border: var(--fxlat-border-width-hairline) dashed var(--fxlat-color-grafito);
	border-radius: var(--fxlat-radius-none);
}

.fxlat-hueco-boton {
	margin-bottom: var(--fxlat-space-5);
}

/* --- Accesibilidad ------------------------------------------------------ */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fxlat-saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--fxlat-space-3) var(--fxlat-space-4);
	background: var(--fxlat-color-placa);
	color: var(--fxlat-color-placa-tinta);
	text-decoration: none;
}

.fxlat-saltar:focus {
	left: var(--fxlat-space-4);
	top: var(--fxlat-space-4);
}

/*
   Sin sombras, sin radios mayores a 2 px: sin brillo (D09 §3.1).
   Guarda de sistema, no estilo: si un widget de Elementor trae sombra de serie,
   la pierde dentro del sitio. Sin !important, para que un caso justificado pueda
   sobrescribirla con una clase propia y quede a la vista en el codigo.
*/
.fxlat-sitio * {
	box-shadow: var(--fxlat-shadow-none);
}