/* ===========================================================================
   BASE — Solo en calma
   Reinicio y elementos base de las pantallas de aplicación: panel, aula,
   carrito, pago y mi cuenta. Regla técnica 5: aquí no entra el constructor,
   así que el HTML llega crudo (WooCommerce y LearnDash imprimen sin clase) y
   esta hoja es la que le da forma.

   Depende de assets/css/tokens.css, encolada antes por inc/assets.php.
   Regla técnica 4: este archivo no declara ni un solo valor de marca; todo se
   consume con var(--sc-…). El inventario exacto está al final del archivo.

   No hay bloque de modo oscuro: al no existir literales, el reasignado de
   [data-tema="oscuro"] en tokens.css arrastra esta hoja sin tocar una línea.
   =========================================================================== */


/* ── Reinicio ───────────────────────────────────────────────────────────── */

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

/* Los márgenes del navegador se retiran en bloque y se devuelven abajo uno a
   uno: así el ritmo vertical sale de la escala de espacio y no del user agent. */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ol, ul, pre {
	margin: 0;
}

/* Una lista marcada como role="list" es estructura, no enumeración visible. */
ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding-left: 0;
}

[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* El ancla no queda pegada al borde al saltar desde el índice del aula. */
	scroll-padding-top: var(--sc-espacio-componente);
}


/* ── Cuerpo y tipografía base ───────────────────────────────────────────── */

body {
	min-height: 100svh;
	background-color: var(--sc-color-superficie);
	color: var(--sc-color-tinta);
	font-family: var(--sc-fuente-lectura);
	font-size: var(--sc-tipo-cuerpo);
	font-weight: var(--sc-peso-regular);
	line-height: var(--sc-linea-cuerpo);
	letter-spacing: var(--sc-tracking-cuerpo);
	/* Las dos familias son variables: se deja trabajar al eje óptico y se
	   prohíbe que el navegador falsifique negrita o cursiva, que en Fraunces
	   deforma el eje SOFT. */
	font-optical-sizing: auto;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-wrap: pretty;
}


/* ── Titulares ──────────────────────────────────────────────────────────── */

:is(h1, h2, h3, h4, h5):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	font-family: var(--sc-fuente-display);
	font-weight: var(--sc-peso-semi);
	font-variation-settings: var(--sc-ejes-sobrio);
	line-height: var(--sc-linea-titulo);
	letter-spacing: var(--sc-tracking-titulo);
	margin-bottom: var(--sc-espacio-grupo);
	text-wrap: balance;
}

/* Los dos escalones de display van apretados (1,08). Del h3 hacia abajo el
   sistema abre a 1,24: a 20 px una interlínea de display pisa los descendentes. */
:is(h1, h2):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	line-height: var(--sc-linea-display);
	letter-spacing: var(--sc-tracking-display);
}

/* Solo el h1 lleva el eje cálido. De ahí hacia abajo manda el eje sobrio: el
   panel informa, no da la bienvenida. */
h1:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	font-size: var(--sc-tipo-display-2);
	font-variation-settings: var(--sc-ejes-calido);
}

h2:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) { font-size: var(--sc-tipo-display-3); }
h3:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) { font-size: var(--sc-tipo-titulo-1); }
h4:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) { font-size: var(--sc-tipo-titulo-2); }
h5:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) { font-size: var(--sc-tipo-titulo-3); }

/* El h6 no es un titular más pequeño: es el rótulo que abre un grupo dentro de
   una tarjeta. Va en la familia de lectura y en versalitas, nunca en Fraunces. */
h6:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	font-family: var(--sc-fuente-lectura);
	font-size: var(--sc-tipo-etiqueta);
	font-weight: var(--sc-peso-fuerte);
	line-height: var(--sc-linea-compacta);
	letter-spacing: var(--sc-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--sc-color-tinta-tenue);
	margin-bottom: var(--sc-espacio-elemento);
	text-wrap: balance;
}

/* Un titular respira más por arriba que por abajo: pertenece a lo que abre,
   no a lo que cierra. */
:is(p, ul, ol, dl, table, pre, blockquote, figure, hr) + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: var(--sc-espacio-componente);
}


/* ── Texto de bloque ────────────────────────────────────────────────────── */

/* Medida de lectura del sistema: 66ch, dentro del rango cómodo de 60-70
   caracteres. Sin tope, una línea de informe cruza el panel entero. */
:is(p, dd, blockquote, figcaption):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	max-width: var(--sc-medida-lectura);
}

p:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: var(--sc-espacio-bloque);
}

p:last-child:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: 0;
}

small:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	font-size: var(--sc-tipo-nota);
	color: var(--sc-color-tinta-tenue);
}

:is(strong, b):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	font-weight: var(--sc-peso-fuerte);
}

mark:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	background-color: var(--sc-capa-seleccion);
	color: inherit;
}

abbr[title]:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	text-decoration: underline dotted;
	text-underline-offset: 0.2em;
	cursor: help;
}

/* Los índices no deben alterar la altura de la línea que los contiene. */
:is(sub, sup):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	font-size: 0.75em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) { bottom: -0.25em; }
sup:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) { top: -0.5em; }

hr:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	border: 0;
	border-top: var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
	margin: var(--sc-espacio-componente) 0;
}


/* El guardia `:where(:not(.et-l *, #wpadminbar, #wpadminbar *))` que llevan las
   reglas de contenido de este archivo excluye dos cosas: lo que pinta Divi y la
   barra de administracion de WordPress. La segunda se anadio el 2026-08-27: la
   medida de lectura de la regla de abajo alcanzaba al <ul> de la barra, lo
   encogia a 66ch y sus elementos —Rank Math, Novamira, Editar con Divi— se
   envolvian a una segunda fila que caia sobre la cabecera del panel. Va dentro
   de :where() y no anade ni un punto de especificidad. */

/* ── Listas ─────────────────────────────────────────────────────────────── */

:is(ul, ol):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: var(--sc-espacio-bloque);
	/* En em, para que la sangría siga al cuerpo del texto y no se descuadre en
	   los escalones fluidos. */
	padding-left: 1.35em;
	max-width: var(--sc-medida-lectura);
}

li:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: var(--sc-espacio-elemento);
}

li:last-child:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: 0;
}

li::marker:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	color: var(--sc-color-tinta-tenue);
}

:is(ul, ol) :is(ul, ol) {
	margin-top: var(--sc-espacio-elemento);
	margin-bottom: 0;
}

dl:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: var(--sc-espacio-bloque);
}

dt:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	font-weight: var(--sc-peso-semi);
	color: var(--sc-color-tinta);
}

dd:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: var(--sc-espacio-grupo);
	color: var(--sc-color-tinta-suave);
}

dd:last-child:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: 0;
}


/* ── Enlaces ────────────────────────────────────────────────────────────── */

/* El subrayado se queda: en el panel hay demasiada superficie tintada para
   distinguir un enlace solo por color. */
a:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	color: var(--sc-color-enlace);
	text-decoration-line: underline;
	text-decoration-thickness: var(--sc-trazo-normal);
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
	transition:
		color var(--sc-dur-rapida) var(--sc-ease-entrada),
		text-decoration-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

/* Orden LVHA: si :visited fuera después, se comería el hover de un enlace ya
   visitado, que es justo el caso frecuente en el índice del aula. */
a:visited:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	color: var(--sc-color-enlace-visitado);
}

a:hover:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	color: var(--sc-color-enlace-hover);
	text-decoration-color: currentColor;
}


/* ── Código ─────────────────────────────────────────────────────────────── */

/* La monoespaciada se resuelve con la pila del sistema operativo. RGPD: no se
   carga ninguna fuente de terceros para esto. */
:is(code, kbd, samp, pre):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	font-family: var(--sc-fuente-mono);
	/* En em: la monoespaciada tiene la x mayor y hay que bajarla respecto al
	   cuerpo que la rodea, sea cual sea ese cuerpo. */
	font-size: 0.92em;
}

:not(pre) > code,
kbd,
samp {
	background-color: var(--sc-color-superficie-hundida);
	border-radius: var(--sc-radio-s);
	padding: var(--sc-espacio-05) var(--sc-espacio-1);
}

kbd:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	border: var(--sc-trazo-fino) solid var(--sc-color-borde);
	font-weight: var(--sc-peso-medio);
}

pre {
	margin-bottom: var(--sc-espacio-bloque);
	padding: var(--sc-espacio-grupo);
	background-color: var(--sc-color-superficie-hundida);
	border-radius: var(--sc-radio-m);
	line-height: var(--sc-linea-compacta);
	overflow-x: auto;
}

pre code:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	background: none;
	padding: 0;
	font-size: inherit;
}


/* ── Medios ─────────────────────────────────────────────────────────────── */

:is(img, svg, video, canvas, audio, iframe, embed, object):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	display: block;
	max-width: 100%;
}

:is(img, svg, video, canvas):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	height: auto;
}

audio:not([controls]) {
	display: none;
}

figure:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: var(--sc-espacio-bloque);
}

figcaption {
	margin-top: var(--sc-espacio-elemento);
	font-size: var(--sc-tipo-nota);
	color: var(--sc-color-tinta-tenue);
}

/* La cita se marca con una barra, no con comillas ni cursiva: en el panel una
   cita casi siempre es lo que escribió el tutor, y no es un adorno. */
blockquote:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: var(--sc-espacio-bloque);
	padding-left: var(--sc-espacio-grupo);
	border-left: var(--sc-trazo-grueso) solid var(--sc-color-borde-acento);
	color: var(--sc-color-tinta-suave);
}

blockquote > :last-child:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	margin-bottom: 0;
}

blockquote cite:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	display: block;
	margin-top: var(--sc-espacio-elemento);
	font-size: var(--sc-tipo-nota);
	font-style: normal;
	color: var(--sc-color-tinta-tenue);
}


/* ── Tablas ─────────────────────────────────────────────────────────────── */

table:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sc-espacio-bloque);
	font-size: var(--sc-tipo-cuerpo-s);
	/* Las cifras de una tabla se leen en columna: sin caja fija no cuadran. */
	font-variant-numeric: tabular-nums;
}

caption:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	caption-side: bottom;
	margin-top: var(--sc-espacio-elemento);
	font-size: var(--sc-tipo-nota);
	color: var(--sc-color-tinta-tenue);
	text-align: start;
}

:is(th, td):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	padding: var(--sc-espacio-3) var(--sc-espacio-grupo);
	text-align: start;
	vertical-align: top;
	border-bottom: var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
}

th:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	font-weight: var(--sc-peso-semi);
	color: var(--sc-color-tinta-suave);
}

thead th:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	background-color: var(--sc-color-superficie-hundida);
}

/* La última fila no dibuja separador: el borde del contenedor ya cierra. */
tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}


/* ── Formularios ────────────────────────────────────────────────────────── */

/* El carrito, el pago y mi cuenta salen de WooCommerce sin clases propias. Lo
   que hay aquí es el mínimo para que no aparezcan con la piel del navegador;
   el aspecto fino de cada componente vive en panel.css. */

:is(button, input, select, textarea, optgroup):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	font: inherit;
	font-optical-sizing: inherit;
	color: inherit;
	letter-spacing: inherit;
	margin: 0;
}

:is(button, [type="button"], [type="reset"], [type="submit"]):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	/* Objetivo táctil mínimo del sistema. No negociable. */
	min-height: var(--sc-toque-minimo);
}

:disabled {
	cursor: not-allowed;
}

/* El select conserva su flecha nativa a propósito: quitarla sin dibujar otra
   deja un desplegable que no parece un desplegable. */
:is(input:not(
	[type="checkbox"], [type="radio"], [type="range"], [type="file"],
	[type="image"], [type="submit"], [type="reset"], [type="button"]
),
select,
textarea):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	width: 100%;
	min-height: var(--sc-toque-minimo);
	padding: var(--sc-relleno-campo);
	background-color: var(--sc-color-superficie-elevada);
	color: var(--sc-color-tinta);
	border: var(--sc-trazo-normal) solid var(--sc-color-borde-campo);
	border-radius: var(--sc-radio-campo);
	transition: border-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

:is(input:hover, select:hover, textarea:hover):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	border-color: var(--sc-color-borde-campo-hover);
}

textarea {
	resize: vertical;
	line-height: var(--sc-linea-cuerpo);
}

:is(input[type="checkbox"], input[type="radio"]):where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	accent-color: var(--sc-color-accion);
	cursor: pointer;
}

/* Firefox atenúa el marcador de posición por su cuenta y lo baja del contraste
   mínimo; se devuelve a opacidad completa y se controla con el token. */
::placeholder {
	color: var(--sc-color-tinta-tenue);
	opacity: 1;
}

::-webkit-file-upload-button {
	font: inherit;
	cursor: pointer;
}

[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/* Chrome pinta el autorrelleno con su propio azul y se salta la paleta entera.
   La sombra interior es lo único que respeta: se usa para tapar ese fondo. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--sc-color-tinta);
	-webkit-box-shadow: 0 0 0 100px var(--sc-color-superficie-elevada) inset;
}

fieldset:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	min-width: 0;
	padding: 0;
	border: 0;
	margin: 0;
}

legend:where(:not(.et-l *, #wpadminbar, #wpadminbar *)) {
	padding: 0;
}


/* ── Foco ───────────────────────────────────────────────────────────────── */

/* WCAG 2.2 · 2.4.11 y 2.4.13: anillo de 2 px con 2 px de separación sobre el
   color de foco del sistema (4,92 sobre crema, 7,14 en oscuro). Va en :where()
   para que su especificidad sea cero y cualquier componente pueda redondearlo
   a su propia forma sin pelearse. */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
	outline: var(--sc-trazo-foco) solid var(--sc-color-foco);
	outline-offset: var(--sc-desplazamiento-foco);
	border-radius: var(--sc-radio-campo);
}

/* Se oculta solo cuando el navegador confirma que el foco vino del ratón.
   El anillo no se elimina nunca sin sustituto. */
:focus:not(:focus-visible) {
	outline: none;
}

/* En contraste forzado los colores del sistema no llegan: manda el del SO. */
@media (forced-colors: active) {
	:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
		outline-color: Highlight;
	}
}

::selection {
	background-color: var(--sc-capa-seleccion);
	color: var(--sc-color-tinta);
}


/* ── Utilidades de accesibilidad ────────────────────────────────────────── */

/* Texto que existe solo para el lector de pantalla. La variante enfocable
   reaparece al tabularla: es la que usa el salto al contenido. */
.sc-solo-lectores,
.sc-solo-lectores-enfocable:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sc-solo-lectores-enfocable:focus {
	display: inline-block;
	padding: var(--sc-espacio-elemento) var(--sc-espacio-grupo);
	background-color: var(--sc-color-superficie-elevada);
	color: var(--sc-color-tinta);
	border: var(--sc-trazo-normal) solid var(--sc-color-borde-campo);
	border-radius: var(--sc-radio-campo);
	text-decoration: none;
}

/* Escape para el texto que no debe respetar la medida de lectura: pistas de
   campo, celdas de tabla, pies dentro de una tarjeta estrecha. */
.sc-sin-medida {
	max-width: none;
}


/* ===========================================================================
   PROPIEDADES PERSONALIZADAS CONSUMIDAS — 62 en total.
   Todas deben existir en assets/css/tokens.css. Aquí no se declara ninguna.

   COLOR (16)
     --sc-color-superficie              fondo de página (crema de marca)
     --sc-color-superficie-elevada      fondo de campo y de pastilla enfocable
     --sc-color-superficie-hundida      fondo de código, de pre y de thead
     --sc-color-tinta                   texto primario
     --sc-color-tinta-suave        texto de apoyo: dd, th, cita
     --sc-color-tinta-tenue         notas, pies, rótulos h6, viñetas
     --sc-color-enlace
     --sc-color-enlace-hover
     --sc-color-enlace-visitado
     --sc-color-borde-acento            barra de la cita
     --sc-color-accion                  accent-color de casillas y radios
     --sc-color-borde                   borde de kbd
     --sc-color-borde-sutil             hr y separadores de tabla
     --sc-color-borde-campo
     --sc-color-borde-campo-hover
     --sc-color-foco                    anillo de foco
     --sc-capa-seleccion               ::selection y mark

   TIPOGRAFÍA (27)
     --sc-fuente-display                Fraunces
     --sc-fuente-lectura                Nunito Sans
     --sc-fuente-mono                   pila monoespaciada del sistema operativo
     --sc-ejes-calido                    ejes SOFT/WONK del h1
     --sc-ejes-sobrio                    ejes SOFT/WONK del resto de titulares
     --sc-tipo-display-2                h1
     --sc-tipo-display-3                h2
     --sc-tipo-titulo-1                 h3
     --sc-tipo-titulo-2                 h4
     --sc-tipo-titulo-3                 h5
     --sc-tipo-cuerpo                   cuerpo por defecto
     --sc-tipo-cuerpo-s                 tablas
     --sc-tipo-nota                     small, caption, figcaption, cite
     --sc-tipo-etiqueta                 h6
     --sc-linea-display                 h1 y h2 (apretado)
     --sc-linea-titulo                  h3 a h5
     --sc-linea-cuerpo                  body y textarea
     --sc-linea-compacta                h6 y pre
     --sc-tracking-display
     --sc-tracking-titulo
     --sc-tracking-cuerpo
     --sc-tracking-etiqueta
     --sc-peso-regular                  body
     --sc-peso-medio                    kbd
     --sc-peso-semi                     titulares, dt, th
     --sc-peso-fuerte                   strong, b, h6
     --sc-medida-lectura                tope de 66ch (60-70 caracteres)

   ESPACIO (9)
     --sc-espacio-05                    relleno vertical del código en línea
     --sc-espacio-1                     relleno horizontal del código en línea
     --sc-espacio-3                     relleno vertical de celda de tabla
     --sc-espacio-elemento              li, figcaption, cite, sublistas
     --sc-espacio-grupo                 margen de titular, dd, pre, celdas
     --sc-espacio-bloque                p, listas, tablas, pre, citas, figuras
     --sc-espacio-componente            hr, titular tras contenido, scroll-padding
     --sc-relleno-campo                 relleno interno de campo
     --sc-toque-minimo                  altura mínima de botón y de campo

   FORMA (8)
     --sc-radio-s                       código en línea, kbd, samp
     --sc-radio-m                       bloques pre
     --sc-radio-campo                   campos, anillo de foco, pastilla de salto
     --sc-trazo-fino                    hr y separadores de tabla
     --sc-trazo-normal                  borde de campo y grosor del subrayado
     --sc-trazo-grueso                  barra de la cita
     --sc-trazo-foco                    grosor del anillo
     --sc-desplazamiento-foco           separación del anillo

   MOVIMIENTO (2)
     --sc-dur-rapida                    enlace y borde de campo
     --sc-ease-entrada

   NO SE CONSUMEN AQUÍ, a propósito:
     - --sc-tipo-display-1 y la medida de lección: son del público y del aula.
     - Sombras: base no eleva nada; la elevación empieza en los componentes.
     - Estados de color (derivación, aviso, confirmación, información): no hay
       ni un elemento HTML que deba pintarse de estado por defecto.
     - prefers-reduced-motion: lo neutraliza tokens.css bajando las duraciones,
       no se duplica aquí.
   =========================================================================== */


/* ===========================================================================
   PÁGINA 404
   Vive aquí y no en el Theme Builder porque Divi 5.11.1 no expone condición
   de 404. Estructura de la maqueta de referencia: cifra grande, titular,
   párrafo y dos acciones; debajo, dos columnas de rescate.
   Solo consume tokens; ni un valor a mano.
   =========================================================================== */

.sc-404{
  padding-block:var(--sc-espacio-seccion);
  padding-inline:var(--sc-canal);
}

.sc-404__hero{
  max-width:var(--sc-ancho-lectura);
  margin-inline:auto;
  text-align:center;
}

.sc-404__cifra{
  font-family:var(--sc-fuente-display);
  font-size:clamp(4.5rem, 2.5rem + 9vw, 8.5rem);
  line-height:.8;
  letter-spacing:-.04em;
  color:var(--sc-texto-terciario);
  /* La display tiene mucho hueco bajo la línea base: se compensa en negativo
     para que la cifra y el titular se lean como un solo bloque. */
  margin:0 0 calc(var(--sc-espacio-4) * -1);
}

.sc-404__titulo{
  font-size:var(--sc-tipo-display-2);
  margin-block-end:var(--sc-espacio-4);
}

.sc-404__entrada{
  color:var(--sc-texto-secundario);
  margin-block-end:var(--sc-espacio-8);
}

.sc-404__acciones{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sc-espacio-3);
  justify-content:center;
}

.sc-404__apunte{
  color:var(--sc-texto-secundario);
  font-size:var(--sc-tipo-cuerpo-s);
  margin-block-start:var(--sc-espacio-4);
}

/* Las dos columnas de rescate */
.sc-404__pie-zona{
  max-width:var(--sc-ancho-contenido);
  margin:var(--sc-espacio-seccion) auto 0;
  display:grid;
  gap:var(--sc-canal-amplio);
  grid-template-columns:1fr;
  border-block-start:var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
  padding-block-start:var(--sc-espacio-seccion);
}

@media (min-width:48em){
  .sc-404__pie-zona{ grid-template-columns:1fr 1fr; }
}

.sc-404__subtitulo{
  font-size:var(--sc-tipo-titulo-2);
  margin-block-end:var(--sc-espacio-4);
}

.sc-404__destinos{
  list-style:none;
  margin:0;
  padding:0;
}

.sc-404__destinos li + li{ margin-block-start:var(--sc-espacio-3); }

.sc-404__pie{
  color:var(--sc-texto-secundario);
  font-size:var(--sc-tipo-cuerpo-s);
  margin-block-start:var(--sc-espacio-4);
}

/* Botones del 404. Replican los presets de Divi para que las dos zonas
   del sitio se vean iguales, pero sin depender del constructor. */
.sc-boton{
  display:inline-block;
  padding:var(--sc-espacio-3) var(--sc-espacio-6);
  border-radius:var(--sc-radio-boton);
  text-decoration:none;
  font-weight:600;
  border:var(--sc-trazo-normal) solid transparent;
  transition:background-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-boton--primario{
  background:var(--sc-color-accion);
  color:var(--sc-blanco);
}

.sc-boton--primario:hover{ background:var(--sc-color-accion-hover); }

.sc-boton--secundario{
  background:transparent;
  color:var(--sc-color-accion);
  border-color:var(--sc-color-borde);
}

.sc-boton--secundario:hover{ background:var(--sc-color-superficie-elevada); }

/* ===========================================================================
   RESULTADOS DE BÚSQUEDA
   Vive aquí y no en Divi porque los bucles de Divi 5 no tienen tipo de
   consulta de búsqueda. La portada del buscador sí es Divi: /buscar.
   Estructura de la maqueta: titular grande, campo destacado y lista.
   =========================================================================== */

.sc-buscar{
  padding-block:var(--sc-espacio-seccion);
  padding-inline:var(--sc-canal);
}

.sc-buscar__hero{
  max-width:var(--sc-ancho-lectura);
  margin-inline:auto;
  text-align:center;
}

.sc-buscar__titulo{
  font-size:var(--sc-tipo-display-2);
  margin-block-end:var(--sc-espacio-4);
}

.sc-buscar__cuenta{
  color:var(--sc-texto-secundario);
  margin-block-end:var(--sc-espacio-6);
}

.sc-buscar__campo{
  margin-block-start:var(--sc-espacio-8);
  padding:var(--sc-espacio-3);
  background:var(--sc-color-superficie-elevada);
  border-radius:var(--sc-radio-panel);
}

.sc-buscar__campo form{
  display:flex;
  gap:var(--sc-espacio-2);
}

.sc-buscar__campo label{ flex:1; }
.sc-buscar__campo input[type="search"]{ width:100%; }

/* La lista */
.sc-buscar__lista{
  max-width:var(--sc-ancho-lectura);
  margin:var(--sc-espacio-seccion) auto 0;
  list-style:none;
  padding:0;
  counter-reset:none;
}

.sc-buscar__item{
  padding-block:var(--sc-espacio-6);
  border-block-start:var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
}

.sc-buscar__item:first-child{ border-block-start:0; }

.sc-buscar__tipo{
  color:var(--sc-texto-terciario);
  font-size:var(--sc-tipo-cuerpo-s);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 var(--sc-espacio-1);
}

.sc-buscar__item-titulo{
  font-size:var(--sc-tipo-titulo-2);
  margin:0 0 var(--sc-espacio-3);
}

.sc-buscar__fragmento{
  color:var(--sc-texto-secundario);
  margin:0;
}

.sc-buscar__paginacion{
  max-width:var(--sc-ancho-lectura);
  margin:var(--sc-espacio-8) auto 0;
}

/* El bloque de rescate cuando no hay resultados */
.sc-buscar__ayuda{
  max-width:var(--sc-ancho-lectura);
  margin:var(--sc-espacio-seccion) auto 0;
  padding:var(--sc-relleno-tarjeta-amplia);
  background:var(--sc-color-superficie-elevada);
  border-radius:var(--sc-radio-panel);
}

.sc-buscar__equivalencias{
  margin-block:var(--sc-espacio-6);
  padding-inline-start:var(--sc-espacio-6);
}

.sc-buscar__equivalencias li + li{ margin-block-start:var(--sc-espacio-4); }

/* Formulario de búsqueda propio: Divi y WordPress rinden el rótulo en inglés. */
.sc-formulario-busqueda{
  display:flex;
  gap:var(--sc-espacio-3);
  align-items:stretch;
}

.sc-formulario-busqueda__etiqueta{ flex:1; }

.sc-formulario-busqueda__campo{
  width:100%;
  padding:var(--sc-espacio-3) var(--sc-espacio-4);
  border:var(--sc-trazo-normal) solid var(--sc-color-borde-campo);
  border-radius:var(--sc-radio-campo);
  background:var(--sc-color-superficie);
  color:var(--sc-texto-primario);
  font-size:var(--sc-tipo-cuerpo);
}

.sc-formulario-busqueda__campo:focus-visible{
  outline:var(--sc-trazo-foco) solid var(--sc-color-foco);
  outline-offset:var(--sc-desplazamiento-foco);
}

.sc-formulario-busqueda__boton{ border:0; cursor:pointer; }