/*
Theme Name: ARRA
Theme URI: https://arraasesores.com
Author: ARRA Asesores
Description: Tema de bloques propio de ARRA Asesores. Sin empaquetador, sin Sass y sin constructores visuales: theme.json es la fuente única de tokens y las secciones se construyen como patrones de bloques.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arra
Tags: full-site-editing, block-patterns, accessibility-ready
*/

/* Las capas fijan la especificidad de una vez: lo del tema nunca pelea
   contra lo que emite el núcleo por accidente. */
@layer base, componentes, utilidades;

/* =========================================================================
   EL RESPALDO DE SORA E INTER, AJUSTADO PARA QUE OCUPE LO MISMO
   =========================================================================

   MIENTRAS LAS FUENTES NO LLEGAN, LA PÁGINA MIDE 235 px MENOS.

   Medido el 19/09/2026 sobre `/corporate/` a 375 px. Sora e Inter son más
   anchas que cualquier tipografía de sistema —2.015 y 1.898 unidades por em
   sobre el texto real de la página, contra 1.778 de Arial y 1.754 de Segoe
   UI—, así que con el respaldo puesto el texto cabe en menos líneas y **todo
   el documento se acorta**. Cuando las fuentes llegan, se recoloca de golpe,
   y el desajuste se acumula hacia abajo: 51 px en «Soluciones», 129 en
   «Insights», 165 en el FAQ y 235 en el CTA final. El cliente lo vio en el
   teléfono y lo describió como bloques que aparecen y luego se mueven.

   NO SE MANIFIESTA SIEMPRE, y por eso costó encontrarlo: las dos van
   precargadas —`arra_precargar_tipografia()` y `arra_precargar_texto()`— y
   son pequeñas, 33 KB y 47 KB. Medido por el túnel, llegan a los 7.073 ms y
   la primera pintura ocurre a los 7.488: ganan por 400 ms y no se ve nada.
   En un móvil con datos, compitiendo con los 364 KB de la foto del héroe,
   ese margen se pierde. De ahí que en el PC se viera bien y en el teléfono
   no, que era justo la duda del cliente.

   POR QUÉ ESTO Y NO `font-display: optional`. `optional` elimina el salto
   por definición: si la fuente no está en unos 100 ms, el navegador se
   queda con el respaldo para esa visita y ya no cambia. Pero esa ventana es
   cortísima —en móvil solo el tiempo de respuesta del servidor se la come—,
   así que se cambiaría un salto ocasional por **leer la web en la fuente
   del sistema en muchas primeras visitas**, que es la que más importa. Se
   queda `swap` y se arregla la causa: que el respaldo ocupe lo mismo.

   DE DÓNDE SALEN LOS NÚMEROS. No de una tabla: se midieron en el navegador
   con `measureText` sobre 4.000 caracteres del texto real de la página, a
   1.000 px de cuerpo para que el redondeo no pese. `size-adjust` es lo que
   la real mide dividido por lo que mide el respaldo; los `*-override` son
   el ascenso y el descenso de la real divididos por ese mismo factor,
   porque `size-adjust` escala también la caja de la letra.

   LA REFERENCIA ES ARIAL, y es una elección. Es la única sans que se
   resuelve de forma parecida en todas partes: en Windows y en iOS es Arial
   de verdad, y en Android el sistema la redirige a Roboto, que es un 2 %
   más estrecha. El ajuste será exacto en unos sitios y muy bueno en otros;
   **cero en todos no se puede**, porque cada sistema tiene su fuente y el
   CSS no permite un ajuste por sistema. Lo que sí es seguro es que 235 px
   de desajuste dejan de serlo.
   ========================================================================= */
@font-face {
	font-family: "Sora respaldo";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 113.33%;
	ascent-override: 85.59%;
	descent-override: 25.59%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter respaldo";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 106.78%;
	ascent-override: 90.75%;
	descent-override: 22.57%;
	line-gap-override: 0%;
}

@layer base {

	/* EL TEXTO SELECCIONADO, EN DORADO, NO EN EL AZUL DEL SISTEMA.
	 *
	 * Por defecto lo pinta el sistema operativo: azul en Windows, otro azul
	 * en macOS. Es el único trozo de la web que no es de la marca, y aparece
	 * cada vez que alguien arrastra el ratón para leer.
	 *
	 * SE FIJAN LOS DOS COLORES, fondo Y texto, y eso es lo que lo hace
	 * seguro. Poniendo solo el fondo, la letra conserva el suyo: el negro de
	 * los párrafos se leería bien sobre el dorado, pero el blanco de las
	 * secciones oscuras se quedaría en 1,43:1, o sea ilegible justo en el
	 * héroe y en el pie.
	 *
	 * `dorado-300` con `burdeos-950` encima da **11,3:1**, y además es el
	 * par que se ve en los dos sitios: el bloque dorado destaca sobre el
	 * blanco de las secciones claras y sobre el burdeos de las oscuras. Un
	 * granate de fondo cumpliría el contraste del texto, pero sobre el
	 * burdeos del héroe la propia selección casi no se vería.
	 *
	 * Va en `::selection` y en `::-moz-selection` por separado A PROPÓSITO:
	 * son pseudoelementos distintos y un navegador que no entienda uno tira
	 * la regla entera si van juntos en la misma lista. */
	::selection {
		background: var(--wp--preset--color--dorado-300);
		color: var(--wp--preset--color--burdeos-950);
	}

	::-moz-selection {
		background: var(--wp--preset--color--dorado-300);
		color: var(--wp--preset--color--burdeos-950);
	}

	/* Nada puede sacar una barra de desplazamiento horizontal.
	 *
	 * Hace falta porque las secciones a sangre —la tira de perfiles de
	 * Corporate— se escapan del ancho máximo con `inline-size: 100vw`, y
	 * `100vw` cuenta el ancho de la barra vertical: son unos 8 px por lado
	 * que asoman y dejan la página desplazable de lado.
	 *
	 * HACEN FALTA LOS DOS, `html` y `body`, y no es por cinturón y
	 * tirantes. El navegador PROPAGA el desbordamiento de uno al viewport y
	 * deja al otro sin recortar: con solo `html` la ventana se desplazaba
	 * 8 px, y con solo `body` también. Con los dos, cero. Está medido en la
	 * página, no deducido del manual.
	 *
	 * Y `clip` y no `hidden`: los dos recortan, pero `hidden` convierte al
	 * elemento en contenedor de desplazamiento y eso ROMPE `position:
	 * sticky` en todo lo que cuelgue —la barra de navegación y la cabecera
	 * del menú móvil—. `clip` recorta sin crear el contenedor.
	 */
	html,
	body {
		overflow-x: clip;
	}

	body {
		font-family: var(--wp--preset--font-family--texto);
		font-size: var(--wp--preset--font-size--base);
		line-height: 1.45;
		color: var(--wp--preset--color--tinta-900);
		/* Blanco, no neutro-100. Los 24 artboards de Design envuelven la
		   página en un div con `background: #ffffff`, y ese envoltorio no
		   viaja al patrón: aquí el fondo lo pone el body. Con neutro-100 la
		   barra de navegación —que es translúcida— se teñía y daba seis
		   diferencias por página. Es además lo que ya dice theme.json. */
		background-color: var(--wp--preset--color--blanco);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--wp--preset--font-family--titulares);
		font-weight: 500;
		letter-spacing: var(--wp--custom--tracking--ajustado);
		line-height: 1.05;
		text-wrap: balance;
	}
	h2, h3, h4 { line-height: 1.2; }

	/* Los tamaños se declaran también aquí, y no solo en theme.json, porque
	 * preview/ no puede leer theme.json: sin esto un h1 caería al 2em del
	 * navegador y la previsualización enseñaría una escala que no existe.
	 * Deben coincidir con styles.elements de theme.json. */
	h1 { font-size: var(--wp--preset--font-size--h1); }
	h2 { font-size: var(--wp--preset--font-size--h2); }
	h3 { font-size: var(--wp--preset--font-size--h3); }
	h4 { font-size: var(--wp--preset--font-size--h4); }
	h5 { font-size: var(--wp--preset--font-size--grande); }
	h6 { font-size: var(--wp--preset--font-size--base); }

	p { text-wrap: pretty; }

	/* NO se limita aquí la medida de lectura.
	 *
	 * Había un `p, li { max-inline-size: 66ch }` y un `28ch` en los titulares.
	 * Es buena tipografía en abstracto, pero el diseño de Design no lo tiene
	 * (`design/tokens/base.css` no declara ninguna medida máxima) y la web es
	 * ese diseño. El resultado era un párrafo de 1098 px que en WordPress salía
	 * a 604 px —66ch a 14,5 px— y una sección 70 px más alta: 91 diferencias en
	 * «Real Estate» que no venían del patrón sino de aquí.
	 *
	 * Si alguna sección necesita medida de lectura, la declara su propia clase. */

	/* El aro de foco es para quien navega con el TECLADO, no para quien pincha.
	 *
	 * Por eso va en `:focus-visible` y no en `:focus`: el navegador solo lo hace
	 * coincidir cuando toca enseñar dónde está el foco, y un clic de ratón no
	 * es uno de esos casos.
	 *
	 * Esto ya estaba, y aun así salía un recuadro dorado al pinchar en el logo
	 * o en cualquier opción del menú. No era esta regla: era WordPress, que
	 * emitía desde `theme.json`
	 *
	 *     :root :where(a:where(:not(.wp-element-button)):focus) { outline: … }
	 *
	 * en `:focus` pelado. Y como los estilos globales de WordPress van SIN
	 * capa, le ganaban a esta, que vive en `@layer base`. Se quitó de
	 * `theme.json`: el aro lo pone el tema y lo pone una sola vez.
	 *
	 * La segunda regla es el cinturón además de los tirantes: apaga cualquier
	 * aro que llegue por `:focus` a secas —del navegador o de un plugin— sin
	 * tocar el del teclado, que sigue saliendo por `:focus-visible`. */
	:where(a, button, [role="button"], input, select, textarea):focus-visible {
		outline: 2px solid var(--wp--preset--color--dorado-700);
		outline-offset: 3px;
		border-radius: var(--wp--custom--radio--xs);
	}

	:where(a, button, [role="button"]):focus:not(:focus-visible) {
		outline: none;
	}

	img, video { max-inline-size: 100%; block-size: auto; }
}

@layer componentes {

	/* Kicker — mayúsculas con tracking amplio y filete dorado. Capa firma.
	 *
	 * El texto NO va en dorado: #a8834d da 3,28:1 sobre neutro-100 y a 13 px
	 * no llega al 4,5:1 de AA. CLAUDE.md lo reserva para «elementos grandes,
	 * filetes y acentos, no para párrafos», así que el dorado pasa al filete
	 * y el texto va en burdeos-900 (11,76:1). El gesto de marca se mantiene;
	 * la lectura deja de depender de un contraste que no da. */
	/* El antetitulo de Design: dorado, versales, tracking ancho. Es el que se
	   ve en los artboards y el que reproduce la web.

	   NO PASA WCAG AA: dorado-500 sobre blanco da 1,9:1 y el minimo para texto
	   pequeno es 4,5:1. La variante --filete de abajo si pasa (11,76:1) y
	   conserva el gesto de marca con un filete dorado. Esta pendiente decidir
	   cual queda, y hasta entonces manda la de Design, que es la que hace que
	   WordPress se vea como el diseno. Ver CLAUDE.md. */
	.arra-kicker--filete {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--3);
		color: var(--wp--preset--color--burdeos-900);
	}
	.arra-kicker--filete::before {
		content: "";
		inline-size: var(--wp--preset--spacing--6);
		block-size: 2px;
		background-color: var(--wp--preset--color--dorado-700);
		flex: none;
	}

	/* Sobre fondo oscuro el dorado sí se sostiene: dorado-300 da 8,66:1 contra
	 * burdeos-900 y 7,79:1 contra verde-900. Variante para secciones oscuras,
	 * donde el gesto original de la marca sí funciona en texto pequeño.
	 * (dorado-700 ahí solo llega a 3,59:1: texto grande y nada más.) */
	.arra-kicker--oscuro { color: var(--wp--preset--color--dorado-300); }
}

@layer utilidades {

	/* Texto solo para lectores de pantalla. Lo usan los botones de icono, que
	   sin esto quedarían sin nombre accesible — y con esto mal puesto, enseñan
	   la etiqueta y descuadran la barra. */
	.u-visually-hidden {
		position: absolute;
		inline-size: 1px; block-size: 1px;
		padding: 0; margin: -1px;
		overflow: hidden; white-space: nowrap;
		clip-path: inset(50%);
		border: 0;
	}

	/* Salto al contenido, visible solo al tabular. */
	.arra-salto {
		position: absolute; inset-block-start: -100px; inset-inline-start: 1rem; z-index: 100;
		background-color: var(--wp--preset--color--carbon-950);
		color: var(--wp--preset--color--blanco);
		padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
		border-radius: var(--wp--custom--radio--sm);
		text-decoration: none;
		transition: inset-block-start var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida);
	}
	.arra-salto:focus { inset-block-start: 1rem; color: var(--wp--preset--color--blanco); }

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

@layer utilidades {
	/* `hidden` lo aplica el navegador con `display: none`, pero cualquier clase
	   que declare su propio `display` le gana. Le pasaba al menu movil, que
	   lleva `display: flex` y se quedaba encima de la pagina aunque estuviera
	   marcado como oculto. En `utilidades`, que es la ultima capa, gana el. */
	[hidden] { display: none !important; }
}