/* ==========================================================================
   40 · COMPONENTES
   --------------------------------------------------------------------------
   Cada componente se escribe UNA VEZ usando los alias semánticos de
   00-tokens.css (--c-bg, --c-text, --c-border…). Colocado dentro de un
   contenedor `.is-dark` se adapta solo a la superficie oscura. No existe
   —ni debe existir— una versión «oscura» duplicada de ningún componente.

   ── ORDEN DEL ARCHIVO ─────────────────────────────────────────────────────
   Iconos · antetítulo · badge · etiqueta · tarjeta · formularios · botones ·
   acordeón · alerta · tabla · paginación · modal · avatar · KPI ·
   cita · pasos · lista de comprobación · ficha de datos · oferta · opción ·
   hero · el destello.

   Los efectos de ambiente (orbes, cristal, texto en degradado, punto que late)
   viven en 41-effects.css, no aquí.
   ========================================================================== */

/* ==========================================================================
   ICONOS
   ========================================================================== */

.icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	/* Heredan el color del texto: nunca se les fija un color propio. */
	fill: none;
	stroke: currentColor;
	flex-shrink: 0;
}

/* ==========================================================================
   ANTETÍTULO
   Etiqueta pequeña en versalitas del manual de marca: 11px, mayúsculas,
   letter-spacing amplio, peso 700, en Ember o Emerald.
   ========================================================================== */

.eyebrow {
	display: block;
	color: var(--c-cta-ink);
	font-size: var(--fs-data);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

.eyebrow--brand {
	color: var(--c-accent);
}

/* Con el rombo del hito delante, el que cierra el Gantt del hero. `inline` para
   que se centre solo donde el texto va centrado. */
.eyebrow--milestone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

/* En un artículo lleva a su pilar: sigue siendo un antetítulo, no un enlace de
   texto, y solo se subraya al señalarlo. */
.eyebrow a {
	color: inherit;
	text-decoration: none;
}

.eyebrow a:hover {
	text-decoration: underline;
}

/* Un cuadrado girado 45°, del color del texto que lo rodea. En el canvas el hito
   se dibuja con la misma forma. */
.milestone {
	display: inline-block;
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background-color: currentColor;
	transform: rotate(45deg);
}

@media (forced-colors: active) {
	.milestone {
		background-color: CanvasText;
	}
}

/* ==========================================================================
   BADGE
   Píldora pequeña para estados y categorías destacadas. No confundir con
   .tag, que es la etiqueta de taxonomía: el badge señala un estado
   («Nuevo», «En directo»), la etiqueta clasifica.
   ========================================================================== */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 6px 14px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-badge);
	background-color: var(--c-bg-raised);
	color: var(--c-heading);
	font-size: var(--fs-data);
	font-weight: 600;
	line-height: 1.4;
}

.badge .icon {
	width: 14px;
	height: 14px;
}

.badge--brand {
	border-color: var(--tint-forest-line);
	background-color: var(--tint-forest);
	color: var(--c-accent);
}

.badge--cta {
	border-color: var(--tint-ember-line);
	background-color: var(--tint-ember);
	color: var(--c-cta-ink);
}

.badge--neutral {
	background-color: var(--c-bg-sunken);
	color: var(--c-muted);
}

/* Relleno con el degradado de marca: el antetítulo de un modal. */
.badge--solid {
	padding: 3px 10px;
	border-color: transparent;
	background-image: var(--g-brand);
	color: var(--c-white);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* «En directo». El punto que late es .pulse-dot, de 41-effects.css: aquí
   solo se compone, no se reimplementa la animación. */
.badge--live {
	border-color: var(--tint-emerald-line);
	background-color: var(--tint-emerald-glow);
	color: var(--c-accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ==========================================================================
   LÍNEA DIVISORIA
   Entre secciones. Se funde con el fondo por los dos extremos y lleva los dos
   colores de la marca, que no cambian entre superficies.
   ========================================================================== */

.divider {
	height: 1px;
	margin: 0;
	border: 0;
	background-image: linear-gradient(90deg, transparent, var(--c-accent), var(--c-cta), transparent);
}

/* Entre dos líneas seguidas había una sección que no tenía nada que pintar. */
.divider + .divider {
	display: none;
}

/* ==========================================================================
   ETIQUETA DE TAXONOMÍA
   Categorías y etiquetas de los artículos. La consume el blog.
   ========================================================================== */

.tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-badge);
	color: var(--c-muted);
	font-size: var(--fs-data);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--t-fast), color var(--t-fast);
}

a.tag:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	padding: 0;
	list-style: none;
}

/* La regla de 10-base.css separa los <li> hermanos; dentro de una lista de
   etiquetas ese margen se suma al gap y descuadra las filas. */
.tag-list li + li {
	margin-block-start: 0;
}

/* ==========================================================================
   TARJETA
   ========================================================================== */

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised);
	transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.card:hover {
	transform: translateY(-3px);
	border-color: var(--c-accent);
	box-shadow: var(--shadow-raised-hover);
}

.card img {
	width: 100%;
	border-radius: var(--radius-media);
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.card__title {
	font-size: var(--fs-h3);
}

.card__title a {
	color: var(--c-heading);
	text-decoration: none;
}

.card__title a:hover {
	color: var(--c-accent);
}

.card__excerpt {
	flex: 1 1 auto;
	color: var(--c-text);
	font-size: var(--fs-small);
}

.card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	color: var(--c-muted);
	font-size: var(--fs-data);
}

/* Icono de cabecera de las tarjetas de característica. */
.card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-media);
	background-color: var(--tint-forest);
	color: var(--c-accent);
}

.card__icon .icon {
	width: 24px;
	height: 24px;
}

/* Llamada al pie de una tarjeta enlazada. NO es un enlace: el enlace real es
   el del título y el área de clic ya cubre la tarjeta entera (ver .card--link).
   Es solo la señal visual de que la tarjeta lleva a algún sitio, así que no
   añade un segundo destino que el lector de pantalla tendría que anunciar.
   `margin-block-start: auto` la empuja al fondo para que quede a la misma
   altura en todas las tarjetas de una fila. */
.card__action {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: auto;
	color: var(--c-accent);
	font-size: var(--fs-small);
	font-weight: 600;
}

/* Lista de enlaces dentro de una tarjeta: los artículos destacados de un
   pilar de la portada. Cada uno es un destino propio, así que una tarjeta con
   esta lista NO puede ser .card--link: el área de clic de la tarjeta entera
   taparía los enlaces de dentro. */
.card__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: var(--space-2) 0 0;
	border-block-start: 1px solid var(--c-border);
	list-style: none;
}

.card__links li + li {
	margin-block-start: 0;
}

.card__links a {
	color: var(--c-heading);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.card__links a:hover {
	color: var(--c-accent);
	text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
	.card__action .icon {
		transition: transform var(--t-fast);
	}

	.card--link:hover .card__action .icon {
		transform: translateX(3px);
	}
}

/* ── Variantes ─────────────────────────────────────────────────────────── */

/* Sin elevación ni movimiento: para rejillas densas donde el hover de todas
   las tarjetas a la vez marea más que ayuda. */
.card--flat,
.card--flat:hover {
	transform: none;
	border-color: var(--c-border);
	box-shadow: none;
}

.card--feature {
	gap: var(--space-3);
}

/* Icono a un lado y texto al otro, para leer varias tarjetas seguidas. El canto
   lleva la barra de acento de .section__title--barred. El texto va en un
   .flow--tight. */
.card--row {
	position: relative;
	flex-direction: row;
	overflow: clip;
}

.card--row::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: linear-gradient(to bottom, var(--c-emerald), var(--c-ember));
}

.card--row .card__icon {
	flex-shrink: 0;
}

.card--row .card__title {
	font-size: var(--fs-lead);
}

/* ── Tarjeta enlazada por completo ─────────────────────────────────────────
   El área de clic es toda la tarjeta, pero el enlace real sigue siendo el
   título: así el lector de pantalla anuncia el titular y no «enlace, tarjeta».
   Por eso se estira un ::after sobre el título en lugar de envolver la
   tarjeta entera en un <a>, que además anidaría los enlaces de los metadatos.
   ────────────────────────────────────────────────────────────────────────── */

.card--link {
	position: relative;
}

.card--link .card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-card);
}

/* Lo que deba seguir siendo pinchable por su cuenta —la categoría, una
   etiqueta enlazada— se levanta por encima de esa capa. Solo los enlaces: si
   se levantara también una etiqueta que es un <span>, dejaría un agujero
   muerto en medio del área de clic de la tarjeta. */
.card--link .card__meta a,
.card--link a.tag {
	position: relative;
	z-index: 1;
}

/* El anillo de foco lo pinta la tarjeta entera, no el texto del título: como
   el área de clic es toda la tarjeta, el indicador tiene que coincidir con
   ella. El foco NO se desactiva, se traslada a un elemento mayor —que es la
   única forma permitida de quitar un outline en este proyecto.
   `:has(:focus-visible)` y no `:focus-within` para que el anillo aparezca con
   el teclado y no al hacer clic con el ratón. */
.card--link:has(.card__title a:focus-visible) {
	outline: var(--focus-width) solid var(--c-focus);
	outline-offset: var(--focus-offset);
}

.card--link .card__title a:focus-visible {
	outline: none;
}

/* ==========================================================================
   CAMPOS DE FORMULARIO
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
textarea,
select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-input);
	background-color: var(--c-bg-raised);
	color: var(--c-heading);
	font-size: var(--fs-body);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

input::placeholder,
textarea::placeholder {
	color: var(--c-muted);
}

/* El borde cambia de color al enfocar, PERO el anillo de foco sigue ahí:
   un cambio de color de borde solo no basta como indicador accesible. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--c-accent);
}

input:disabled,
textarea:disabled,
select:disabled {
	background-color: var(--c-bg-sunken);
	color: var(--c-muted);
	cursor: not-allowed;
}

/* ── Campo completo: etiqueta, control, ayuda y error ──────────────────────
   Estas clases son el contrato de TODOS los formularios del tema. La sesión 5
   restiliza Contact Form 7 mapeando su marcado a estas mismas clases, no
   escribiendo un segundo juego de estilos de formulario.
   ────────────────────────────────────────────────────────────────────────── */

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field__label {
	color: var(--c-heading);
	font-size: var(--fs-small);
	font-weight: 600;
}

/* Marca de campo obligatorio. El asterisco es decorativo: el dato real lo da
   el atributo `required` del control, que es lo que anuncia el lector. */
.field__label--required::after {
	content: " *";
	color: var(--c-cta);
}

.field__help {
	color: var(--c-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
}

/* El error se anuncia con texto e icono, nunca solo con el color rojo. */
.field__error {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--c-error);
	font-size: var(--fs-small);
	font-weight: 600;
}

.field__error .icon {
	width: 16px;
	height: 16px;
}

.field--invalid input,
.field--invalid textarea,
.field--invalid select {
	border-color: var(--c-error);
	background-color: var(--tint-error);
}

/* ── Casillas y radios ─────────────────────────────────────────────────────
   `accent-color` deja que el navegador pinte el control nativo con el verde
   de marca. Un control nativo teñido se comporta mejor —foco, alto contraste,
   lectores de pantalla— que uno recreado con pseudo-elementos.
   ────────────────────────────────────────────────────────────────────────── */

input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--c-accent);
	flex-shrink: 0;
}

.field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-1);
}

.field--check .field__label {
	font-weight: 400;
	line-height: 1.5;
}

/* ── Grupo de campos ───────────────────────────────────────────────────── */

fieldset {
	margin: 0;
	padding: var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
}

legend {
	padding-inline: var(--space-1);
	color: var(--c-heading);
	font-size: var(--fs-small);
	font-weight: 700;
}

/* ── Formulario de búsqueda ────────────────────────────────────────────── */

.search-form {
	display: flex;
	gap: var(--space-1);
}

.search-form__field {
	flex: 1 1 auto;
	min-width: 0;
}

.search-form__submit {
	flex: 0 0 auto;
	padding-inline: var(--space-3);
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: 11px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-button);
	font-family: inherit;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	/* Necesarios para el destello: recortan la banda de luz al botón. */
	overflow: hidden;
	transition: transform var(--t-base), box-shadow var(--t-base),
		background-color var(--t-base), border-color var(--t-base), color var(--t-base);
}

.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0);
}

.btn .icon {
	width: 18px;
	height: 18px;
}

/* ── Variante principal: el naranja de acción ──────────────────────────────
   Idéntica en las dos superficies. El naranja es el ancla de la marca y no
   se voltea nunca: si cambiara según el fondo, dejaría de ser reconocible.
   ────────────────────────────────────────────────────────────────────────── */

/* El background-color de debajo del degradado NO es decorativo: es lo que
   permite que el paso a blanco del hover se anime. `background-image` no es
   una propiedad animable, así que al quitarlo aparece este color, que sí
   transiciona. Sin él, el botón daría un salto seco. */
.btn--cta {
	background-color: var(--c-cta);
	background-image: var(--g-cta);
	color: var(--c-cta-text);
	box-shadow: var(--shadow-cta);
}

/* ── El CTA se INVIERTE al pasar el ratón ──────────────────────────────────
   Fondo blanco, filo naranja y letra naranja. Igual en las dos superficies,
   como el propio CTA.

   Los dos naranjas son distintos a propósito, y es una cuestión de contraste,
   no de estética:
     · Filo en Burnt      → 3,56:1 sobre blanco. Cumple el 3:1 que WCAG pide
                            para el contorno de un control.
     · Letra en Ember Ink → 5,18:1. Cumple el 4,5:1 del texto normal. El texto
                            del botón va a 16px en negrita, que NO es «texto
                            grande» para WCAG, así que necesita el 4,5.
   Con Ember (2,80:1) el botón sería ilegible en hover.
   ────────────────────────────────────────────────────────────────────────── */

.btn--cta:hover,
.btn--cta:focus-visible {
	background-image: none;
	background-color: var(--c-cta-bg-hover);
	border-color: var(--c-cta-line-hover);
	color: var(--c-cta-text-hover);
	box-shadow: var(--shadow-cta-hover);
}

/* ── Variante de marca: verde ──────────────────────────────────────────── */

.btn--brand {
	background-image: var(--g-brand);
	color: var(--c-white);
}

.btn--brand:hover {
	color: var(--c-white);
	box-shadow: var(--shadow-raised-hover);
}

/* ── Variante fantasma ─────────────────────────────────────────────────────
   Aquí sí se usan los alias semánticos: en claro es un borde menta sobre
   blanco, en oscuro un borde translúcido sobre cristal. Mismo CSS.
   ────────────────────────────────────────────────────────────────────────── */

.btn--ghost {
	border-color: var(--c-border);
	background-color: transparent;
	color: var(--c-heading);
	font-weight: 600;
}

.btn--ghost:hover {
	border-color: var(--c-accent);
	background-color: var(--c-bg-raised);
	color: var(--c-accent);
}

/* ── Variante discreta: solo texto ─────────────────────────────────────── */

.btn--quiet {
	padding-inline: var(--space-1);
	background-color: transparent;
	color: var(--c-link);
	font-weight: 600;
}

.btn--quiet:hover {
	color: var(--c-link-hover);
	text-decoration: underline;
}

/* ── Tamaños ───────────────────────────────────────────────────────────── */

.btn--sm {
	padding: 8px 16px;
	font-size: var(--fs-small);
}

.btn--sm .icon {
	width: 16px;
	height: 16px;
}

.btn--lg {
	padding: 15px 34px;
	font-size: var(--fs-lead);
}

.btn--block {
	display: flex;
	width: 100%;
}

/* ==========================================================================
   ACORDEÓN
   --------------------------------------------------------------------------
   <details> / <summary>. ESTE ES EL ÚNICO ACORDEÓN DEL PROYECTO.
   Si alguna vez hace falta uno «distinto», se añade un modificador aquí; no
   se escribe un segundo componente. El tema de Optimi acabó con dos —uno en
   la home y otro en las landings— y solo uno cerraba con teclado.

   Sin JavaScript: abrir, cerrar, el foco y el anuncio de estado los da el
   navegador. Lo único que aporta el CSS es el aspecto y el giro del chevron.
   ========================================================================== */

.accordion {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised);
}

.accordion + .accordion {
	margin-block-start: var(--space-2);
}

.accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3);
	color: var(--c-heading);
	font-size: var(--fs-lead);
	font-weight: 700;
	cursor: pointer;
	/* Quita el triangulito por defecto: lo sustituye el chevron del sprite,
	   que sí sigue el sistema de iconos. Hacen falta las dos reglas. */
	list-style: none;
}

.accordion__summary::-webkit-details-marker {
	display: none;
}

.accordion__summary:hover {
	color: var(--c-accent);
}

.accordion__icon {
	flex-shrink: 0;
	color: var(--c-accent);
}

.accordion[open] .accordion__icon {
	transform: rotate(180deg);
}

.accordion__body {
	padding: 0 var(--space-3) var(--space-3);
	color: var(--c-text);
}

@media (prefers-reduced-motion: no-preference) {
	.accordion__icon {
		transition: transform var(--t-base);
	}
}

/* ==========================================================================
   ALERTA
   El significado nunca se transmite solo con el color: cada variante lleva su
   icono y su texto. Un daltónico no distingue el aviso del error por el fondo.
   ========================================================================== */

.alert {
	display: flex;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised);
	font-size: var(--fs-small);
	line-height: 1.6;
}

.alert__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--c-accent);
}

.alert__title {
	display: block;
	margin-block-end: 4px;
	color: var(--c-heading);
	font-size: var(--fs-body);
	font-weight: 700;
}

.alert--info {
	border-color: var(--tint-forest-line);
	background-color: var(--tint-forest);
}

.alert--success {
	border-color: var(--tint-emerald-line);
	background-color: var(--tint-emerald-glow);
}

.alert--success .alert__icon {
	color: var(--c-success);
}

.alert--warning {
	border-color: var(--tint-warning-line);
	background-color: var(--tint-warning);
}

.alert--warning .alert__icon {
	color: var(--c-warning);
}

.alert--error {
	border-color: var(--tint-error-line);
	background-color: var(--tint-error);
	color: var(--c-error-text);
}

.alert--error .alert__icon {
	color: var(--c-error);
}

/* ==========================================================================
   TABLA
   ========================================================================== */

/* El envoltorio es la parte importante: una tabla ancha tiene que poder
   recorrerse con el teclado, no solo arrastrando con el dedo. En el marcado
   lleva tabindex="0" y role="region" con su aria-label. */
.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
}

.table {
	font-size: var(--fs-small);
}

.table th,
.table td {
	padding: 10px var(--space-2);
	border-block-end: 1px solid var(--c-border);
	text-align: start;
	vertical-align: top;
	white-space: nowrap;
}

.table thead th {
	background-color: var(--c-bg-sunken);
	color: var(--c-heading);
	font-size: var(--fs-data);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
	border-block-end: 0;
}

/* Columna de datos numéricos. */
.table .is-numeric {
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* ==========================================================================
   PAGINACIÓN
   Clases de the_posts_pagination(): no se inventa un marcado propio.
   ========================================================================== */

.pagination {
	margin-block-start: var(--space-5);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-1);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-button);
	color: var(--c-heading);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--t-fast), color var(--t-fast);
}

.pagination a.page-numbers:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

.pagination .page-numbers.current {
	border-color: transparent;
	background-image: var(--g-brand);
	color: var(--c-white);
}

.pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--c-muted);
}

/* ── Paginación DENTRO de una entrada ──────────────────────────────────────
   La emite wp_link_pages() cuando el contenido lleva <!--nextpage-->, y hasta
   ahora salía sin un solo estilo en `page.php` y en `single.php`. Reutiliza el
   aspecto de .pagination en lugar de inventar un segundo lenguaje: el gesto es
   el mismo, solo cambia sobre qué se pagina.
   ────────────────────────────────────────────────────────────────────────── */

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	margin-block-start: var(--space-5);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

/* wp_link_pages() marca todos los números con `.post-page-numbers` y añade
   `.current` más aria-current a la página en la que estás. */
.page-links .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-button);
	color: var(--c-heading);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--t-fast), color var(--t-fast);
}

.page-links a.post-page-numbers:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

.page-links .post-page-numbers.current {
	border-color: transparent;
	background-image: var(--g-brand);
	color: var(--c-white);
}

/* ==========================================================================
   PORTADA DE ENTRADA
   --------------------------------------------------------------------------
   La imagen destacada de las páginas. Los artículos no la pintan (decisión 060):
   la suya solo se ve en las tarjetas.

   Va a lo ancho del contenedor y no de la columna de prosa: respira y marca la
   entrada al documento.
   ========================================================================== */

.entry-cover {
	margin: var(--space-4) 0 0;
}

.entry-cover img {
	width: 100%;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-media);
}

/* ==========================================================================
   MODAL
   --------------------------------------------------------------------------
   <dialog> nativo. El navegador se encarga de la capa superior, del atrapado
   del foco, de Escape y de aria-modal. El JS del tema solo abre y cierra
   (ver js/main.js). El plugin de captación de la sesión 7 usará ESTE modal.
   ========================================================================== */

dialog.modal {
	/* El navegador lo centra con `margin: auto`, y el reset lo pone a cero. */
	margin: auto;
	width: min(460px, calc(100% - var(--space-4)));
	max-height: calc(100vh - var(--space-4));
	max-height: calc(100dvh - var(--space-4));
	padding: 0;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised);
	color: var(--c-text);
	box-shadow: var(--shadow-card-hover);
	/* Vive dentro de la sección que lo abre: no debe heredar su alineación. */
	text-align: start;
}

dialog.modal::backdrop {
	background-color: var(--c-scrim);
}

/* Sin JavaScript nadie puede abrir un <dialog>: su contenido se muestra en la
   página y desaparece el botón que no haría nada. Un enlace se queda: lleva a
   su destino de reserva. */
.no-js dialog.modal {
	position: static;
	display: block;
	max-height: none;
	margin: var(--space-4) 0 0;
}

/* El alta de la comunidad, tras el pie de cada página: ahí sería un formulario
   suelto, y el botón de la cabecera ya lleva a su página. */
.no-js body > dialog.modal {
	display: none;
}

.no-js button[data-modal-open],
.no-js .modal__close {
	display: none;
}

.modal__panel {
	position: relative;
	padding: var(--space-2);
}

@media (min-width: 640px) {
	.modal__panel {
		padding: var(--space-3);
	}
}

/* Antetítulo, título y entradilla, alineados a la izquierda. */
.modal__head {
	display: grid;
	justify-items: start;
	gap: var(--space-1);
}

.modal__title {
	margin-inline-end: var(--space-4);
	font-size: var(--fs-h3);
}

.modal__lead {
	color: var(--c-muted);
	font-size: var(--fs-small);
}

/* Un formulario dentro de un modal tiene que caber sin hacer scroll: campos más
   juntos y más bajos, y el botón de enviar a todo el ancho. */
.modal .flow > * + * {
	margin-block-start: var(--space-2);
}

.modal :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
	padding: var(--space-1) 12px;
	font-size: var(--fs-small);
}

.modal .choice {
	padding: var(--space-1) var(--space-2);
}

.modal .choice-list {
	gap: var(--space-1);
}

/* Misma altura en toda la fila: sin esto, el <select> queda más bajo que la fecha. */
.modal :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select) {
	min-height: 44px;
}

.modal [type="submit"] {
	width: 100%;
}

.modal .alert {
	padding: var(--space-1) var(--space-2);
}

.modal__close {
	position: absolute;
	inset-block-start: var(--space-2);
	inset-inline-end: var(--space-2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-button);
	background-color: transparent;
	color: var(--c-muted);
}

.modal__close:hover {
	background-color: var(--c-bg-sunken);
	color: var(--c-heading);
}

/* ==========================================================================
   AVATAR
   ========================================================================== */

.avatar {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-pill);
	object-fit: cover;
	flex-shrink: 0;
}

/* Tamaño de ficha de autor: el instructor de una landing. */
.avatar--xl {
	width: 128px;
	height: 128px;
}

/* Iniciales en lugar de foto. El kit de marca no trae ninguna fotografía, así
   que hasta que exista una el avatar no puede quedarse en un círculo vacío.
   Cada tamaño de avatar lleva su tamaño de letra: las iniciales tienen que
   llenar el círculo, no seguir al texto que las rodea. */
.avatar--initials {
	display: inline-grid;
	place-items: center;
	background-image: var(--g-brand);
	color: var(--c-white);
	font-size: var(--fs-body);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
}

.avatar--xl.avatar--initials {
	font-size: var(--fs-h1);
}

/* ==========================================================================
   KPI
   La cifra destacada. Para que salga en degradado se le añade .gradient-text
   en el marcado; el degradado se define una sola vez, en 41-effects.css.
   ========================================================================== */

.stat__value {
	display: block;
	font-size: var(--fs-h1);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.stat__label {
	display: block;
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-6);
}

/* ==========================================================================
   CITA / TESTIMONIO
   ========================================================================== */

.quote {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised);
}

.quote__mark {
	width: 28px;
	height: 28px;
	color: var(--c-accent);
	opacity: 0.5;
}

.quote__text {
	flex: 1 1 auto;
	color: var(--c-heading);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.quote__foot {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.quote__author {
	display: block;
	color: var(--c-heading);
	font-weight: 700;
}

.quote__role {
	display: block;
	color: var(--c-muted);
	font-size: var(--fs-small);
}

/* Las estrellas van en naranja, no en amarillo: la paleta no tiene amarillo
   de marca y el Ember es justo el color del acento activo. */
.quote__stars {
	display: flex;
	gap: 2px;
	color: var(--c-cta);
}

.quote__stars .icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* ==========================================================================
   PASOS
   La numeración la lleva un contador CSS: si se añade o se quita un paso, no
   hay que renumerar nada a mano.
   ========================================================================== */

.steps {
	counter-reset: p2080-step;
	display: grid;
	gap: var(--space-4);
	padding: 0;
	list-style: none;
}

.steps li + li {
	margin-block-start: 0;
}

.step {
	position: relative;
	padding-inline-start: var(--space-6);
}

.step::before {
	counter-increment: p2080-step;
	content: counter(p2080-step);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-pill);
	background-image: var(--g-brand);
	color: var(--c-white);
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: 1;
}

.step__title {
	font-size: var(--fs-h3);
}

.step__body {
	margin-block-start: var(--space-1);
	color: var(--c-text);
}

/* ==========================================================================
   LISTA DE COMPROBACIÓN
   --------------------------------------------------------------------------
   Lista con una marca delante de cada elemento: check en verde para lo que
   SÍ, cruz en rojo con `.checklist--no` para lo que NO.

   La marca la dibuja el CSS y no un icono del sprite a propósito: esta lista
   se escribe a mano en el HTML de las landings (decisión 032), y obligar a
   pegar un <svg> por cada elemento haría el contenido ilegible para quien lo
   edita.

   El significado no depende solo del color: el check y la cruz son formas
   distintas, y el titular que acompaña a cada lista dice qué es cada cosa.
   La marca es decorativa —un pseudo-elemento sin texto—, así que un lector de
   pantalla anuncia una lista normal.
   ========================================================================== */

.checklist {
	display: grid;
	gap: var(--space-2);
	padding: 0;
	list-style: none;
}

.checklist li + li {
	margin-block-start: 0;
}

.checklist li {
	position: relative;
	padding-inline-start: calc(20px + var(--space-2));
}

/* El círculo. `0.2em` lo centra sobre la primera línea con el interlineado
   de 1,7 del cuerpo de texto. */
.checklist li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.2em;
	inset-inline-start: 0;
	width: 20px;
	height: 20px;
	border: 1px solid var(--tint-emerald-line);
	border-radius: var(--radius-pill);
	background-color: var(--tint-emerald-glow);
}

/* El check: dos bordes de una caja girada 45°. */
.checklist li::after {
	content: "";
	position: absolute;
	inset-block-start: calc(0.2em + 4px);
	inset-inline-start: 7px;
	width: 6px;
	height: 10px;
	border: solid var(--c-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.checklist--no li::before {
	border-color: var(--tint-error-line);
	background-color: var(--tint-error);
}

/* La cruz: dos franjas en diagonal pintadas como degradados. Así cabe en el
   mismo pseudo-elemento que el check, sin un tercer elemento en el marcado. */
.checklist--no li::after {
	inset-block-start: calc(0.2em + 5px);
	inset-inline-start: 5px;
	width: 10px;
	height: 10px;
	border: 0;
	background-image:
		linear-gradient(45deg, transparent 42%, var(--c-error) 42%, var(--c-error) 58%, transparent 58%),
		linear-gradient(-45deg, transparent 42%, var(--c-error) 42%, var(--c-error) 58%, transparent 58%);
	transform: none;
}

/* ==========================================================================
   FICHA DE DATOS
   --------------------------------------------------------------------------
   Pares etiqueta → valor en un <dl>: duración, modalidad, nivel, fechas.
   Es lo que pone la landing al lado del titular en lugar del panel de mando
   simulado de Optimi, que enseñaba cifras inventadas (decisión 033).

   Cada par va envuelto en un <div>, que HTML permite dentro de un <dl>
   precisamente para esto: poder darle a cada fila su filete.
   ========================================================================== */

.facts {
	display: grid;
	margin: 0;
}

/* `center` y no `baseline`: la etiqueta lleva icono, y la línea base de un
   <svg> es su borde inferior, así que el valor se descolgaba unos píxeles. */
.facts__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1) var(--space-2);
	padding-block: var(--space-2);
	border-block-end: 1px solid var(--c-border);
}

.facts__item:first-child {
	padding-block-start: 0;
}

.facts__item:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.facts dt {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.facts dt .icon {
	width: 18px;
	height: 18px;
	color: var(--c-accent);
}

.facts dd {
	margin: 0;
	color: var(--c-heading);
	font-weight: 600;
	text-align: end;
}

/* ==========================================================================
   OFERTA
   --------------------------------------------------------------------------
   La tarjeta de precio de una formación: importe, lo que incluye, el CTA y
   una línea de confianza debajo.

   Dos piezas son OPCIONALES y solo se ponen si son verdad (decisión 033):
     · El aviso de plazas, que es un .badge--cta normal dentro de la oferta.
     · El precio anterior tachado. Si se tacha un precio, la Directiva
       Ómnibus exige que el anterior sea el más bajo de los últimos 30 días.

   No es una .card: no se eleva al pasar el ratón. Es el final del recorrido
   y no lleva a ningún sitio por sí misma; lo que se pulsa es su botón.
   ========================================================================== */

.offer {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--tint-ember-line);
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised);
	box-shadow: var(--shadow-raised);
}

.offer__name {
	color: var(--c-heading);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.2;
}

.offer__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
}

.offer__amount {
	color: var(--c-heading);
	font-size: var(--fs-h1);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* El precio anterior lleva en el marcado un «Antes:» solo para lectores de
   pantalla: un <s> se anuncia como texto normal, y sin esa palabra se oirían
   dos precios seguidos sin saber cuál es cuál. */
.offer__was {
	color: var(--c-muted);
	font-size: var(--fs-lead);
}

.offer__note,
.offer__trust {
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.offer__trust {
	text-align: center;
}

/* ==========================================================================
   OPCIÓN (tarjeta de radio)
   --------------------------------------------------------------------------
   Un radio con su descripción, en una tarjeta que se puede pulsar entera.
   Lo usa el formulario de solicitud de plaza del plugin para elegir edición.

   El control sigue siendo un <input type="radio"> nativo y VISIBLE, dentro de
   su <label>: se elige con las flechas, se anuncia en el lector de pantalla y
   funciona sin JavaScript. La tarjeta solo cambia de aspecto según su estado
   con :has(), sin una clase que haya que sincronizar a mano. El plugin de
   Optimi usaba un calendario de <div> clicables que no se podía usar con el
   teclado.
   ========================================================================== */

.choice-list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	border: 0;
}

.choice-list > legend {
	margin-block-end: var(--space-1);
	padding: 0;
	color: var(--c-heading);
	font-size: var(--fs-small);
	font-weight: 600;
}

.choice {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	background-color: var(--c-bg-raised);
	cursor: pointer;
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.choice:hover {
	border-color: var(--c-accent);
}

/* Marcada: filo de acento de 2px. El grosor, además del color, es lo que la
   distingue de las demás, así que no depende solo de percibir el verde. */
.choice:has(.choice__input:checked) {
	border-color: var(--c-accent);
	box-shadow: inset 0 0 0 1px var(--c-accent);
}

/* El foco lo pinta el radio con el anillo general; la tarjeta lo repite en
   su contorno para que se vea a qué opción corresponde. */
.choice:has(.choice__input:focus-visible) {
	outline: var(--focus-width) solid var(--c-focus);
	outline-offset: var(--focus-offset);
}

.choice:has(.choice__input:disabled) {
	opacity: 0.6;
	cursor: not-allowed;
}

.choice__input {
	margin-block-start: 3px;
}

/* Variante compacta para elegir varias opciones cortas de un vistazo: una píldora
   por opción, con el mismo <input> nativo y visible que .choice. */
.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-pill);
	background-color: var(--c-bg-raised);
	color: var(--c-text);
	font-size: var(--fs-small);
	cursor: pointer;
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.chip:hover {
	border-color: var(--c-accent);
}

.chip:has(.chip__input:checked) {
	border-color: var(--c-accent);
	box-shadow: inset 0 0 0 1px var(--c-accent);
	color: var(--c-heading);
}

.chip:has(.chip__input:focus-visible) {
	outline: var(--focus-width) solid var(--c-focus);
	outline-offset: var(--focus-offset);
}

.chip__input {
	margin: 0;
}

.choice__body {
	display: grid;
	flex: 1 1 auto;
	gap: 2px;
	min-width: 0;
}

.choice__title {
	color: var(--c-heading);
	font-weight: 700;
}

.choice__meta {
	color: var(--c-text);
	font-size: var(--fs-small);
}

.choice__aside {
	display: grid;
	flex-shrink: 0;
	justify-items: end;
	gap: 2px;
	text-align: end;
}

.choice__price {
	color: var(--c-heading);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.choice__note {
	color: var(--c-muted);
	font-size: var(--fs-data);
	font-weight: 600;
}

/* ==========================================================================
   HERO
   --------------------------------------------------------------------------
   El bloque de apertura de una página de marketing: antetítulo, titular,
   entradilla, botones y una línea de confianza. Lo usan la portada y las
   landings; vivía en 60-home.css hasta que la landing lo necesitó, y se ha
   mudado aquí en lugar de copiarlo (invariante 8).

   No entra en el kit: sus dos bancos de pruebas reales son la portada y la
   landing de ejemplo, que es donde se ve con el titular, los orbes y el
   ancho de verdad (mismo criterio que la decisión 024).

   Sin imagen a propósito: el LCP de la página es el titular, sobre la Inter
   que ya va precargada. Al no haber nada que cargar por encima del pliegue,
   tampoco hay nada que pueda desplazar el texto: CLS cero por construcción.

   Alineado a la izquierda y no centrado. Un hero centrado se lee como una
   landing de campaña; este sitio es una publicación técnica y sus páginas
   tienen que sonar igual que sus artículos.

   NO HAY REGLA `.hero`, y por eso tampoco esa clase en el marcado: el bloque
   no necesita nada que `.section--loose` no le dé ya.
   ========================================================================== */

.hero__inner {
	/* 832px = 104 × 8. Deja sitio a dos líneas de titular a 56px sin que la
	   bajada supere los 75 caracteres por línea del manual de marca. */
	max-width: 52rem;
}

.hero__title {
	text-wrap: balance;
}

.hero__lead {
	max-width: var(--w-prose);
	color: var(--c-text);
	font-size: var(--fs-lead);
}

/* La línea de confianza bajo los botones: quita la objeción antes de que se
   formule. */
.hero__note {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.hero__note .icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--c-accent);
}

/* ==========================================================================
   EL DESTELLO
   --------------------------------------------------------------------------
   La firma visual heredada de Optimi Academy. No es un efecto de :hover: es
   un barrido continuo cada 2,8 s que hace que la página se sienta viva.

   Anatomía —por qué se lee como un destello y no como una franja que pasa:
     · La banda mide el 60% del ancho del botón y el 120% de su alto, con
       top:-10%, así sangra por arriba y por abajo y no deja costura visible.
     · Viaja de -200% a 300%, es decir 5 veces su propio ancho. Esa distancia
       deja una pausa larga entre pasadas: parece un reflejo ocasional, no un
       poste de barbería.
     · `ease-in-out` la hace entrar acelerando y salir frenando.
     · `pointer-events: none` para que no robe los clics.

   Se define UNA SOLA VEZ. En 50-blocks.css el botón de Gutenberg se alía a
   .btn--cta en lugar de reimplementar esto (el tema anterior lo duplicaba
   literalmente en dos sitios, y al retocar uno el otro se quedaba atrás).

   La animación vive DENTRO del guard de `prefers-reduced-motion`, no en una
   excepción al final del archivo: el camino accesible es el que se aplica
   por defecto.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.btn--cta::after {
		content: "";
		position: absolute;
		inset-block-start: -10%;
		inset-inline-start: 0;
		width: 60%;
		height: 120%;
		background-image: linear-gradient(
			to right,
			transparent 0%,
			var(--shimmer-highlight) 50%,
			transparent 100%
		);
		transform: translateX(-200%);
		animation: p2080-shimmer var(--shimmer-duration) ease-in-out infinite;
		pointer-events: none;
	}

	@keyframes p2080-shimmer {
		0% {
			transform: translateX(-200%);
		}

		100% {
			transform: translateX(300%);
		}
	}
}