/**
 * MARCA VOEDIA — capa de tokens única.
 *
 * Fuente: `voedia-brand/` (guía de estilo de Juan Manuel, v1.0) y su
 * implementación de referencia `LANIDNG-EJEMPLO.html`.
 *
 * ESTE FICHERO ES EL ÚNICO SITIO DONDE VIVE UN COLOR DE MARCA. Todo lo demás
 * —el tema, la portada, la tienda, la biblioteca— consume estas variables. Antes
 * había 76 colores distintos repartidos por cinco hojas y ninguno coincidía con
 * la paleta oficial; cambiar el azul obligaba a tocar cuatro ficheros y a
 * confiar en no dejarse ninguno.
 *
 * Se carga la primera, y sin condición, para que cualquier hoja posterior pueda
 * dar por hecho que estas variables existen.
 *
 * ── LA GUÍA SE CONTRADICE CONSIGO MISMA, Y AQUÍ SE RESUELVE ──────────────
 *
 * El documento y el HTML de referencia no dicen lo mismo. Comprobado token a
 * token:
 *
 *   token          SKILL.md      LANIDNG-EJEMPLO.html
 *   --blue         #3f97c2       #3f97c1
 *   --blue-dark    #3e7691       #2d7a9f
 *   --blue-light   #a9cae0       #e8f4fb   ← nombres cruzados
 *   --olive        #9e9e52       #9d9d52
 *   texto cuerpo   #615e5f       #4a4a4a
 *
 * Manda el DOCUMENTO, porque procede de la Guía de Estilo corporativa y el HTML
 * es una pieza suelta que la implementó a ojo. La diferencia del azul es de un
 * dígito en un canal —invisible en pantalla—, así que no hay nada que perder.
 * La del texto de cuerpo sí se ve y queda anotada para Juan Manuel.
 *
 * ── LOS CONTRASTES DE LA GUÍA ESTÁN INFLADOS ────────────────────────────
 *
 * La tabla de accesibilidad del documento declara ratios que no salen. Medidos
 * con la fórmula de WCAG 2.1:
 *
 *   combinación                  declara   real     veredicto
 *   #615e5f sobre blanco         7.2 AAA   6.41     es AA, no AAA
 *   blanco sobre #c25678         4.6 AA    4.29     NO llega a AA
 *   blanco sobre #3f97c2         3.7       3.27     AA solo en texto grande
 *   #808181 sobre blanco         3.9       3.91     falla en texto pequeño
 *
 * Importa porque el rosa es el color del botón de comprar y la guía lo pone a
 * 0,95 rem en negrita: 15,2 px, que para WCAG es TEXTO NORMAL y exige 4,5:1.
 * Los dos botones de la marca suspendían el propio checklist de la guía.
 *
 * No se cambian los colores de marca: se añaden variantes «de tinta» para
 * cuando el color LLEVA TEXTO ENCIMA, y se deja el color oficial para rellenos
 * y decoración. Así la marca se ve igual y el texto se lee.
 *
 * @package Voedia
 */

:root {
	/* ── AZULES — identidad ─────────────────────────────────────────── */

	/* El azul de la marca. Para rellenos, iconos, barras y superficies. */
	--vm-azul: #3f97c2;

	/* EL AZUL CUANDO ES TEXTO. 4,99:1 sobre blanco.
	 * `--vm-azul` como color de letra da 3,27:1 y suspende AA en cualquier
	 * tamaño de interfaz. No es un color inventado: es el propio azul oscuro
	 * de la paleta oficial, usado donde hace falta. Enlaces, botón fantasma,
	 * cualquier azul que se lea. */
	--vm-azul-tinta: #3e7691;

	--vm-azul-osc: #3e7691;
	--vm-azul-claro: #a9cae0;
	--vm-azul-tenue: #e8f4fb;

	/* EL VELO DEL HÉROE: el azul tenue a medio camino del blanco.
	 *
	 * Hace falta porque el titular del héroe va en el AZUL DE MARCA por encargo
	 * de Ernesto, y ese azul sobre `--vm-azul-tenue` da 2,92:1 — por debajo del
	 * 3:1 que WCAG exige incluso en texto grande. Sobre este velo son 3,11:1, y
	 * de paso suben todos los textos pequeños del héroe.
	 *
	 * Sigue leyéndose como un tinte azul y separa el héroe de la cabecera, que
	 * también es blanca. Lo cazó `pruebas/home/marca.js`, no el ojo. */
	--vm-azul-velo: #f4fafd;

	/* El degradado del héroe y de las bandas de campaña, tal cual la guía. */
	--vm-azul-degradado: linear-gradient( 135deg, #1a6a8a 0%, #3f97c2 50%, #2d8aac 100% );

	/* ── ROSA — conversión ──────────────────────────────────────────── */

	/* El rosa oficial. Rellenos grandes, distintivos, decoración. */
	--vm-rosa: #c25678;

	/* EL ROSA CUANDO LLEVA TEXTO BLANCO ENCIMA. 4,54:1, AA.
	 * Un 3 % más oscuro que el oficial: la diferencia no se distingue a simple
	 * vista y es lo que separa el botón de comprar de suspender accesibilidad.
	 * Solo para fondos de botón y de bloques con texto. */
	--vm-rosa-cta: #bc5374;

	--vm-rosa-osc: #a8435f;
	--vm-rosa-tenue: #f9eaee;

	/* ── OLIVA — etiquetas ──────────────────────────────────────────── */

	--vm-oliva: #9e9e52;

	/* La guía pinta los `.label` en oliva a 0,72 rem. El oliva oficial da
	 * 2,81:1 sobre blanco: ilegible para media agencia de accesibilidad y para
	 * cualquiera con la vista cansada.
	 *
	 * 5,31:1 sobre blanco y 4,75:1 sobre el tinte azul del héroe. El primer
	 * valor que se puso, `#76763d`, daba 4,74 sobre blanco y parecía suficiente
	 * —hasta que el héroe pasó a llevar un fondo tintado y ahí se quedaba en
	 * 4,24. Un token auxiliar tiene que aguantar los DOS fondos claros de la
	 * marca, no solo el blanco. */
	--vm-oliva-tinta: #6e6e39;

	--vm-oliva-tenue: #f5f5e8;

	/* ── NEUTROS ────────────────────────────────────────────────────── */

	--vm-negro: #181818;      /* titulares */
	--vm-texto: #615e5f;      /* cuerpo — 6,41:1 */

	/* Era `#808181` (3,91:1) y la guía lo destina a pies de foto y textos
	 * pequeños, donde AA exige 4,5:1. 5,19:1 sobre blanco y 4,64:1 sobre el
	 * tinte del héroe. Mismo motivo que el oliva de arriba. */
	--vm-texto-tenue: #6c6d6d;

	--vm-borde: #e9e9e9;
	--vm-fondo-suave: #f4f3f4;
	--vm-fondo: #fbfbfb;
	--vm-blanco: #ffffff;

	/* ── COMPLEMENTARIOS ────────────────────────────────────────────── */

	--vm-camel: #dbad84;
	--vm-lima: #bfbe6c;
	--vm-menta: #e7ebda;

	/* ── SISTEMA ────────────────────────────────────────────────────── */

	--vm-r: 6px;              /* radio estándar */
	--vm-r-tarjeta: 12px;     /* tarjetas */
	--vm-sombra: 0 8px 40px rgba( 0, 0, 0, 0.10 );
	--vm-sombra-alta: 0 24px 80px rgba( 0, 0, 0, 0.16 );

	/* ── TIPOGRAFÍA ─────────────────────────────────────────────────── */

	/* Figtree para interfaz y titulares, Lora para cuerpo editorial. Las dos
	 * llevan pila de respaldo real: si Google Fonts no llega —bloqueado, sin
	 * red, o el visitante lo impide— la página tiene que seguir leyéndose con
	 * una sans y una serif del sistema, no con la que toque por defecto. */
	--vm-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
	--vm-serif: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
}

/* ══ COMPONENTES DE MARCA ══════════════════════════════════════════════
 *
 * Las clases que la guía da por existentes en toda pieza de Voedia. Se
 * declaran aquí una vez para que el contenido editorial de WordPress —bloques
 * escritos a mano en el editor— pueda usarlas sin que nadie repita el CSS.
 */

/* La barra decorativa de 44×3, el gesto más reconocible de la marca. */
.vm-barra {
	width: 44px;
	height: 3px;
	background: var( --vm-azul );
	margin: 18px 0 28px;
}

.vm-barra.es-centrada { margin-inline: auto; }

/* La etiqueta de sección: mayúsculas, muy espaciada, oliva. */
.vm-etiqueta {
	display: block;
	margin-bottom: 12px;
	color: var( --vm-oliva-tinta );
	font-family: var( --vm-sans );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Botones. */
.vm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 32px;
	border: none;
	border-radius: var( --vm-r );
	font-family: var( --vm-sans );
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.vm-btn--principal {
	background: var( --vm-rosa-cta );
	color: #fff;
	box-shadow: 0 4px 24px rgba( 194, 86, 120, 0.38 );
}

.vm-btn--principal:hover {
	background: var( --vm-rosa-osc );
	color: #fff;
	box-shadow: 0 6px 32px rgba( 194, 86, 120, 0.50 );
	transform: translateY( -2px );
}

.vm-btn--fantasma {
	background: transparent;
	color: var( --vm-azul-tinta );
	border: 1.5px solid var( --vm-azul );
}

.vm-btn--fantasma:hover {
	background: var( --vm-azul-tenue );
	color: var( --vm-azul-tinta );
}

.vm-btn--grande {
	padding: 18px 42px;
	font-size: 1.05rem;
}

/* Tarjeta. */
.vm-tarjeta {
	padding: 28px 24px;
	background: #fff;
	border: 1px solid var( --vm-borde );
	border-radius: var( --vm-r-tarjeta );
	box-shadow: var( --vm-sombra );
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.vm-tarjeta:hover {
	box-shadow: var( --vm-sombra-alta );
	transform: translateY( -3px );
}

/* Aparición al desplazar. La clase `es-visible` la pone `voedia.js`. */
.vm-aparece {
	opacity: 0;
	transform: translateY( 28px );
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.vm-aparece.es-visible {
	opacity: 1;
	transform: none;
}

.vm-aparece.es-d1 { transition-delay: 0.12s; }
.vm-aparece.es-d2 { transition-delay: 0.22s; }
.vm-aparece.es-d3 { transition-delay: 0.32s; }

/* ── FOCO VISIBLE ──────────────────────────────────────────────────────
 *
 * Lo exige la propia guía y no estaba en ninguna hoja del sitio. Va aquí, en
 * la capa común, para que valga en el tema, en la tienda y en el plugin sin
 * repetirlo tres veces. */
:focus-visible {
	outline: 3px solid var( --vm-azul );
	outline-offset: 3px;
	border-radius: 4px;
}

/* Quien navega con ratón no ve el anillo; quien navega con teclado, sí. */
:focus:not( :focus-visible ) { outline: none; }

/* ── MOVIMIENTO REDUCIDO ───────────────────────────────────────────────
 *
 * También lo exige la guía. Se anula el movimiento, no la visibilidad: dejar
 * `.vm-aparece` en `opacity: 0` sin transición esconde el contenido para
 * siempre a quien pide menos movimiento. */
@media ( prefers-reduced-motion: reduce ) {
	.vm-aparece {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.vm-btn,
	.vm-tarjeta { transition: none; }

	.vm-btn:hover,
	.vm-tarjeta:hover { transform: none; }
}