/* ==========================================================================
   Wizard Trees · Base
   Reset acotado, fuentes locales y la escala tipografica del nodo 16:2.
   ========================================================================== */

/* --- Fuentes ---------------------------------------------------------------
   Autoalojadas a proposito: servir Google Fonts desde su CDN envia la IP del
   visitante a un tercero y en la UE eso es un problema de RGPD, no una
   preferencia tecnica.

   Las tres estan subidas y verificadas en produccion:
     MonumentExtended-Regular.woff2     400   licencia Pangram Pangram
     MonumentExtended-Ultrabold.woff2   800   licencia Pangram Pangram
     SplineSansMono-Variable.woff2      300-700  SIL OFL, variable
   -------------------------------------------------------------------------- */

/* Los @font-face NO van aqui: los declara theme.json, y WordPress los emite
   en el front y en el editor a la vez. Tenerlos en los dos sitios registraba
   cada familia dos veces (comprobado con document.fonts en produccion).

   Si necesitas cambiar un peso o un archivo, es en theme.json ->
   settings.typography.fontFamilies[].fontFace. */

/* Recordatorio sobre los pesos de Monument: solo hay dos cortes con licencia,
   declarados en theme.json como 400 y 800. El emparejamiento de CSS reparte:

     500 (nav inactiva)                             -> Regular
     600 (H2, H3, botones)                          -> Ultrabold
     700 (Display, H1, nav activa, titulos del pie) -> Ultrabold

   Dos niveles, no los tres del Figma. Titulares y botones pesan mas que la
   maqueta: es la consecuencia de tener dos cortes, no un error. */

/* Spline Sans Mono es VARIABLE: un solo archivo cubre el eje 300-700, asi que
   los cuatro pesos del diseno (400 cuerpo, 500 caption, 600, 700 micro) salen
   de ahi. Subconjunto "latin": cubre entero el ingles, el espanol y el aleman. */

/* --- Reset ---------------------------------------------------------------- */

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

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

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

body {
	margin: 0;
	background-color: var(--wt-bg);
	color: var(--wt-text);
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-body);
	font-weight: var(--wt-weight-reg);
	line-height: var(--wt-lh-prose);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

ul,
ol {
	margin: 0 0 var(--wt-space-3);
	padding-left: var(--wt-space-3);
}

p {
	margin: 0 0 var(--wt-space-2);
}

hr {
	border: 0;
	border-top: 1px solid var(--wt-border);
	margin: var(--wt-space-6) 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border-bottom: 1px solid var(--wt-border);
	padding: var(--wt-space-2);
	text-align: left;
}

th {
	color: var(--wt-text-2);
	font-size: var(--wt-size-micro);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-track-chip);
	text-transform: uppercase;
}

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

a {
	color: var(--wt-purple);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color var(--wt-dur) var(--wt-ease);
}

a:hover,
a:focus-visible {
	color: var(--wt-text);
}

/* --- Foco -----------------------------------------------------------------
   [PS] No definido en el nodo de fundamentos. Requisito de WCAG 2.4.7. */

:focus-visible {
	outline: var(--wt-focus-width) solid var(--wt-focus-color);
	outline-offset: var(--wt-focus-offset);
	border-radius: 2px;
}

::selection {
	background: var(--wt-purple-deep);
	color: var(--wt-text);
}

/* --- Escala tipografica ----------------------------------------------------
   Reproduce el nodo 16:2 literalmente. Titulares en Monument (display),
   cuerpo en Spline Sans Mono. Interlineado 1.15 tal cual esta disenado. */

h1, h2, h3, h4, h5, h6,
.t-display, .t-h1, .t-h2, .t-h3 {
	margin: 0 0 var(--wt-space-3);
	font-family: var(--wt-font-display);
	line-height: var(--wt-lh-tight);
	letter-spacing: var(--wt-track-display);
	color: var(--wt-text);
	text-wrap: balance;
}

.t-display {
	font-size: var(--wt-size-display);
	font-weight: var(--wt-weight-bold);
}

h1,
.t-h1 {
	font-size: var(--wt-size-h1);
	font-weight: var(--wt-weight-bold);
}

h2,
.t-h2 {
	font-size: var(--wt-size-h2);
	font-weight: var(--wt-weight-semi);
}

h3,
.t-h3 {
	font-size: var(--wt-size-h3);
	font-weight: var(--wt-weight-semi);
}

h4 {
	font-size: var(--wt-size-body-l);
	font-weight: var(--wt-weight-semi);
}

h5,
h6 {
	font-size: var(--wt-size-body);
	font-weight: var(--wt-weight-semi);
}

.t-body-l {
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-body-l);
	font-weight: var(--wt-weight-reg);
	line-height: var(--wt-lh-tight);
}

.t-body {
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-body);
	font-weight: var(--wt-weight-reg);
	line-height: var(--wt-lh-tight);
}

.t-caption {
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-caption);
	font-weight: var(--wt-weight-med);
	line-height: var(--wt-lh-tight);
	color: var(--wt-text-2);
}

.t-micro {
	font-family: var(--wt-font-mono);
	font-size: var(--wt-size-micro);
	font-weight: var(--wt-weight-bold);
	line-height: var(--wt-lh-tight);
	letter-spacing: var(--wt-track-chip);
	text-transform: uppercase;
}

/* Texto corrido: se afloja a 1.6. Ver la nota [PS] en tokens.css. */
.entry-content p,
.entry-content li,
.wt-prose p,
.wt-prose li {
	line-height: var(--wt-lh-prose);
	max-width: 72ch;
}

.wt-text-2 { color: var(--wt-text-2); }
.wt-text-3 { color: var(--wt-text-3); }

/* --- Utilidades de accesibilidad -------------------------------------------- */

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

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--wt-space-2);
	z-index: var(--wt-z-modal);
	padding: var(--wt-space-2) var(--wt-space-3);
	background: var(--wt-raised);
	border: 1px solid var(--wt-purple);
	border-radius: var(--wt-radius-pill);
	color: var(--wt-text);
	text-decoration: none;
	transition: top var(--wt-dur) var(--wt-ease);
}

.skip-link:focus {
	top: var(--wt-space-2);
}

/* --- Alineaciones nativas de WordPress -------------------------------------- */

.alignleft  { float: left;  margin: 0 var(--wt-space-3) var(--wt-space-2) 0; }
.alignright { float: right; margin: 0 0 var(--wt-space-2) var(--wt-space-3); }
.aligncenter { display: block; margin-inline: auto; }

.wp-caption { max-width: 100%; }

.wp-caption-text,
.wp-element-caption {
	color: var(--wt-text-3);
	font-size: var(--wt-size-caption);
	margin-top: var(--wt-space-1);
}


/* --- El atributo hidden gana siempre -------------------------------------------
   La regla del navegador es `[hidden] { display: none }`, que pesa (0,1,0) y la
   pisa cualquier componente con un display propio. Pasa de verdad: el boton de
   aplicar de la barra de filtros lleva .wt-btn, que declara inline-flex, asi que
   ponerle hidden desde JavaScript no lo escondia y la barra salia 3px mas alta
   con un boton que no deberia estar. Lo mismo valdria para los avisos de los
   formularios.

   Es el unico !important del theme y esta justificado: hidden significa oculto,
   no «oculto salvo que alguien declare un display». Lo llevan igual normalize y
   los resets modernos. */

[hidden] {
	display: none !important;
}