/**
 * Método H.O.M.E. — hoja de marca.
 *
 * El tema padre es claro e institucional; este embudo es negro y oro. Casi todo
 * lo visual se reescribe aquí.
 *
 * Los valores no son aproximaciones: los tamaños, espaciados y colores vienen
 * del diseño aprobado, que es de alta fidelidad. Donde se ha cambiado algo
 * respecto al diseño, hay un comentario diciendo por qué.
 *
 * Orden del archivo:
 *   1. Tokens y base
 *   2. Piezas compartidas (contenedor, botones, checks, lockup, paneles)
 *   3. Landing, sección a sección
 *   4. Selector de forma de pago y resumen
 *   5. Checkout (incluido el formulario de WooCommerce)
 *   6. Pantallas de resultado
 *   7. Páginas legales
 *   8. Cookies y barra fija
 *   9. Móvil
 *  10. Accesibilidad y movimiento reducido
 */

/* ==================================================================== *
 * 1. Tokens y base
 * ==================================================================== */

:root {
	--home-negro: #0a0a0a;
	--home-hover-tarjeta: #101010;
	--home-panel: #141414;
	--home-panel-alt: #111111;
	--home-hueco: #0d0d0d;
	--home-linea: #2a2a2a;
	--home-linea-interior: #232323;
	--home-linea-fina: #1c1c1c;
	--home-borde-hover: #4a4a4a;
	/*
	 * El diseño da #555555 para el radio y la casilla sin marcar, pero sobre el
	 * panel sale a 2,47:1 y la WCAG pide 3:1 para los bordes que son el único
	 * indicador de un control (1.4.11, contraste de elementos no textuales).
	 * Aquí el círculo vacío ES la única señal de «esta opción no está elegida»,
	 * así que se sube a #666666 (3,21:1 sobre el panel y 3,29:1 sobre el fondo
	 * del hover). Sigue leyéndose como un gris apagado.
	 */
	--home-radio: #666666;
	--home-radio-hover: #6d6d6d;

	--home-oro: #c19f20;
	--home-oro-hover: #d4b12a;
	--home-oro-apagado: #5a4c15;
	--home-velo-oro: rgba(193, 159, 32, 0.14);
	--home-marco-foto: rgba(193, 159, 32, 0.45);
	--home-resplandor: rgba(193, 159, 32, 0.18);
	--home-resplandor-suave: rgba(193, 159, 32, 0.12);

	--home-blanco: #ffffff;
	--home-texto: #e9e9e9;
	--home-gris: #bebebe;
	--home-gris-tenue: #8a8a8a;
	--home-gris-pie: #7a7a7a;
	/*
	 * El diseño da #6d6d6d para las etiquetas, pero sobre el fondo negro sale a
	 * 3,83:1 y en textos de 11-13 px la AA pide 4,5:1. Se sube a #808080, que da
	 * 5,01:1 sobre el fondo y 4,66:1 sobre el panel —las dos superficies donde
	 * aparece— y se ve prácticamente igual. Mismo criterio que se aplicó al gris
	 * apagado del CRM. Se comprueba con `node herramientas/verificar-contraste.js`.
	 */
	--home-etiqueta: #808080;
	--home-aviso: #f0c94a;
	--home-aviso-borde: rgba(193, 159, 32, 0.35);
	--home-aviso-fondo: rgba(193, 159, 32, 0.1);

	--home-titulo: "Montserrat", Arial, Helvetica, sans-serif;
	--home-cuerpo: "Inter", Arial, Helvetica, sans-serif;

	--home-contenedor: 1160px;
	--home-aire: 24px;

	--home-radio-fino: 2px;
	--home-radio-casilla: 3px;
	--home-radio-campo: 4px;
	--home-radio-tarjeta: 6px;
	--home-radio-selector: 8px;
	--home-pildora: 999px;
}

.home-pagina {
	background: var(--home-negro);
	color: var(--home-texto);
	font-family: var(--home-cuerpo);
	font-size: 17px;
	line-height: 1.7;
	overflow-x: hidden;
}

/*
 * `text-wrap: pretty` en titulares y párrafos: evita la palabra huérfana en la
 * última línea, que en un titular de 44 px se ve muchísimo. Los navegadores que
 * no lo entienden lo ignoran sin más.
 */
.home-pagina h1,
.home-pagina h2,
.home-pagina h3,
.home-pagina p {
	text-wrap: pretty;
}

/*
 * Los reseteos van dentro de `:where()` a propósito.
 *
 * Escritos como `.home-pagina p { margin: 0 }` tienen más peso (una clase y un
 * elemento) que las reglas de una sola clase que ponen el aire —
 * `.home-hero__subtitulo { margin-top: 20px }`, `.home-firma { margin-top: 32px }`
 * y otras treinta— así que las anulaban todas: el diseño salía con los párrafos
 * y los titulares pegados unos a otros.
 *
 * `:where()` no suma peso, con lo que estos reseteos valen lo que un selector de
 * elemento y cualquier clase los gana. Es lo que se espera de un reseteo.
 */
:where(.home-pagina) h1,
:where(.home-pagina) h2,
:where(.home-pagina) h3,
:where(.home-pagina) h4 {
	margin: 0;
}

:where(.home-pagina) p {
	margin: 0;
}

.home-pagina h1,
.home-pagina h2,
.home-pagina h3,
.home-pagina h4 {
	font-family: var(--home-titulo);
	color: var(--home-blanco);
	letter-spacing: -0.01em;
}

/*
 * El reseteo de las imágenes va en `:where()` por lo mismo que el de los
 * párrafos y los titulares, y por si acaso hacía falta la lección dos veces:
 * escrito como `.home-pagina img` pesa una clase y un elemento, y le ganaba a
 * `.home-pie__logo { height: 84px }` y a `.home-pie__marca-agua`, que son de una
 * sola clase. El `height: auto` se imponía y el logo del pie salía a su tamaño
 * original —520 × 332 px— ocupando media pantalla.
 */
:where(.home-pagina) img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ==================================================================== *
 * 2. Piezas compartidas
 * ==================================================================== */

.home-contenedor {
	max-width: var(--home-contenedor);
	margin: 0 auto;
	padding: 0 var(--home-aire);
}

/* Cada sección separada por 110 px y un filete. */
.home-seccion {
	padding: 110px 0;
	border-top: 1px solid var(--home-linea);
}

.home-titulo-seccion {
	font-size: 46px;
	font-weight: 700;
	line-height: 1.12;
	max-width: 24ch;
}

.home-subtitulo-seccion {
	font-size: 18px;
	color: var(--home-gris);
	margin-top: 16px;
	max-width: 62ch;
}

.home-etiqueta {
	font-family: var(--home-titulo);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--home-etiqueta);
	text-transform: uppercase;
	margin: 0 0 14px;
}

/* --- Lockup del programa --- */

.home-lockup__metodo {
	font-family: var(--home-titulo);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5em;
	color: var(--home-gris);
	margin: 0;
}

.home-lockup__home {
	font-family: var(--home-titulo);
	font-size: 104px;
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 0.02em;
	color: var(--home-oro);
	margin: 0;
}

.home-lockup__bajada {
	font-size: 14px;
	color: var(--home-gris);
	margin-top: 12px;
}

/* --- Botones --- */

.home-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--home-titulo);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: var(--home-pildora);
	padding: 17px 32px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	/* 52 px de alto mínimo: el objetivo táctil del diseño para el botón
	   principal. Con el padding sale justo, pero un texto de una sola línea en
	   una fuente con métricas distintas podría quedarse corto. */
	min-height: 52px;
}

.home-boton--oro {
	background: var(--home-oro);
	color: var(--home-negro);
}

.home-boton--oro:hover,
.home-boton--oro:focus-visible {
	background: var(--home-oro-hover);
	color: var(--home-negro);
}

.home-boton--oro:active {
	transform: scale(0.98);
}

.home-boton--linea {
	background: transparent;
	color: var(--home-blanco);
	border-color: var(--home-linea);
}

.home-boton--linea:hover,
.home-boton--linea:focus-visible {
	border-color: var(--home-oro);
	color: var(--home-blanco);
}

.home-boton--ancho {
	width: 100%;
}

/*
 * Botón apagado: el de pago mientras falta alguna casilla. Sigue siendo
 * enfocable a propósito (ver assets/js/checkout.js), así que necesita un
 * aspecto de «no disponible» que no dependa de `:disabled`.
 */
.home-boton--apagado,
.home-pagina button[aria-disabled="true"],
.home-pagina #place_order[aria-disabled="true"] {
	background: var(--home-oro-apagado);
	/*
	 * Texto claro y no negro.
	 *
	 * El diseño pinta este botón con el texto oscuro del botón activo, pero
	 * negro sobre el oro apagado da 2,34:1 y el texto —que dice el importe que
	 * se va a cobrar— no se lee. No vale acogerse a la exención de los
	 * controles desactivados: este botón NO usa `disabled` a propósito (sigue
	 * siendo enfocable para que un lector de pantalla lo anuncie), así que tiene
	 * que cumplir. Con #e9e9e9 sube a 6,98:1 y el fondo apagado sigue
	 * distinguiéndose del oro del botón activo, que es lo que importa.
	 */
	color: var(--home-texto);
	cursor: not-allowed;
}

/* --- Check dibujado con bordes, sin librería de iconos --- */

.home-check {
	flex: 0 0 auto;
	display: block;
	width: 12px;
	height: 7px;
	margin-top: 8px;
	border-left: 2px solid var(--home-oro);
	border-bottom: 2px solid var(--home-oro);
	transform: rotate(-45deg);
}

/* --- Panel --- */

.home-panel {
	background: var(--home-panel);
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-tarjeta);
	padding: 36px;
}

/* --- Firma --- */

.home-firma {
	font-family: var(--home-titulo);
	font-size: 17px;
	font-weight: 600;
	color: var(--home-blanco);
	margin-top: 32px;
}

.home-firma__nombre {
	color: var(--home-oro);
}

/* ==================================================================== *
 * 3. Landing
 * ==================================================================== */

/* --- Cabecera --- */

.home-cabecera__inner {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.home-cabecera__logo img {
	height: 76px;
	width: auto;
}

.home-cabecera__enlace {
	font-family: var(--home-titulo);
	font-size: 14px;
	font-weight: 600;
	color: var(--home-blanco);
	text-decoration: none;
	border-bottom: 1px solid var(--home-oro);
	padding-bottom: 2px;
}

.home-cabecera__enlace:hover {
	color: var(--home-oro);
}

/* --- Hero --- */

.home-hero {
	position: relative;
	padding: 60px 0 90px;
	overflow: hidden;
}

.home-hero__resplandor {
	position: absolute;
	top: -20%;
	right: -8%;
	width: 720px;
	height: 720px;
	background: radial-gradient(circle, var(--home-resplandor), transparent 62%);
	pointer-events: none;
}

.home-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}

.home-hero__titular {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.12;
	max-width: 20ch;
	margin-top: 28px;
}

.home-hero__subtitulo {
	font-size: 18px;
	color: var(--home-gris);
	max-width: 52ch;
	margin-top: 20px;
}

.home-hero__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.home-hero__foto {
	position: relative;
	margin: 0;
	border-radius: var(--home-radio-tarjeta);
	overflow: hidden;
}

.home-hero__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 22%;
	filter: saturate(0.9) contrast(1.04);
	border-radius: var(--home-radio-tarjeta);
}

.home-hero__marco {
	position: absolute;
	inset: 14px;
	border: 1px solid var(--home-marco-foto);
	border-radius: var(--home-radio-fino);
	pointer-events: none;
}

.home-hero__fundido {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.92), transparent 48%);
	pointer-events: none;
}

.home-hero__pie {
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 26px;
}

.home-hero__nombre {
	display: block;
	font-family: var(--home-titulo);
	font-size: 20px;
	font-weight: 700;
	color: var(--home-blanco);
}

.home-hero__rol {
	display: block;
	font-size: 14px;
	color: var(--home-gris);
	margin-top: 2px;
}

/* --- Frase ancla --- */

.home-ancla__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
}

.home-ancla__cita {
	font-family: var(--home-titulo);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--home-blanco);
	border-left: 3px solid var(--home-oro);
	padding-left: 24px;
	margin: 0;
}

.home-ancla__texto p + p {
	margin-top: 20px;
}

.home-ancla__texto p {
	color: var(--home-gris);
}

/* --- Las 4 fases --- */

.home-fases__lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--home-linea);
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.home-fases__fase {
	border-left: 1px solid var(--home-linea);
	padding: 34px 26px 10px;
}

/* La primera celda sin filete: el borde izquierdo de la primera columna
   duplicaría el aire del contenedor y descuadraría la rejilla. */
.home-fases__fase:first-child {
	border-left: 0;
	padding-left: 0;
}

.home-fases__letra {
	display: block;
	font-family: var(--home-titulo);
	font-size: 96px;
	font-weight: 800;
	line-height: 1;
	color: var(--home-oro);
}

.home-fases__nombre {
	font-size: 22px;
	font-weight: 700;
	margin-top: 18px;
}

.home-fases__texto {
	font-size: 16px;
	color: var(--home-gris);
	margin-top: 12px;
}

/* --- Los 6 módulos --- */

.home-modulos__lista {
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

.home-modulos__fila {
	display: grid;
	grid-template-columns: 100px 1fr 220px;
	gap: 24px;
	align-items: baseline;
	padding: 28px 0;
	border-bottom: 1px solid var(--home-linea);
}

.home-modulos__num {
	font-family: var(--home-titulo);
	font-size: 15px;
	font-weight: 700;
	color: var(--home-oro);
}

.home-modulos__titulo {
	font-size: 22px;
	font-weight: 700;
}

.home-modulos__texto {
	font-size: 16px;
	color: var(--home-gris);
	margin-top: 10px;
}

.home-modulos__fase {
	font-size: 14px;
	color: var(--home-gris);
	text-align: right;
}

/* --- Qué incluye --- */

.home-incluye__inner {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 48px;
	align-items: start;
}

.home-incluye__lista {
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.home-incluye__punto {
	display: flex;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--home-linea);
	font-size: 17px;
	color: var(--home-gris);
}

.home-incluye__panel {
	background: var(--home-panel);
	border-radius: var(--home-radio-tarjeta);
	padding: 36px;
}

.home-incluye__panel-titulo {
	font-size: 22px;
	font-weight: 700;
}

.home-incluye__logros {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.home-incluye__logro {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--home-linea-interior);
	font-size: 16px;
	color: var(--home-gris);
}

.home-incluye__logro:last-child,
.home-incluye__punto:last-child {
	border-bottom: 0;
}

/* --- Conozco las dos orillas --- */

.home-orillas__inner {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 64px;
	align-items: center;
}

.home-orillas__foto {
	position: relative;
	margin: 0;
	max-width: 420px;
	border-radius: var(--home-radio-tarjeta);
	overflow: hidden;
}

.home-orillas__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 18%;
	border-radius: var(--home-radio-tarjeta);
}

.home-orillas__marco {
	position: absolute;
	inset: 14px;
	border: 1px solid var(--home-marco-foto);
	border-radius: var(--home-radio-fino);
	pointer-events: none;
}

/*
 * `:where(p)` y no `p`: la firma del final de la sección también es un párrafo,
 * y con `.home-orillas__texto p` este aire de 20 px le ganaba a los 32 px de
 * `.home-firma` por tener más peso.
 */
.home-orillas__texto :where(p) {
	color: var(--home-gris);
	margin-top: 20px;
}

/* --- FAQ --- */

.home-faq__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 var(--home-aire);
}

.home-faq__titulo {
	font-size: 46px;
	font-weight: 700;
	margin-bottom: 32px;
}

.home-faq__boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--home-linea);
	padding: 22px 0;
	font-family: var(--home-titulo);
	font-size: 18px;
	font-weight: 600;
	color: var(--home-blanco);
	text-align: left;
	cursor: pointer;
}

.home-faq__pregunta {
	margin: 0;
	font-size: inherit;
}

.home-faq__boton:hover .home-faq__texto {
	color: var(--home-oro);
}

.home-faq__signo {
	flex: 0 0 auto;
	font-size: 22px;
	color: var(--home-oro);
	line-height: 1;
}

.home-faq__respuesta {
	padding: 20px 0 8px;
}

.home-faq__respuesta p {
	font-size: 17px;
	color: var(--home-gris);
	max-width: 62ch;
}

/* --- Pie --- */

.home-pie {
	position: relative;
	padding: 56px 0 40px;
	border-top: 1px solid var(--home-linea);
	overflow: hidden;
}

.home-pie__marca-agua {
	position: absolute;
	right: -40px;
	bottom: -60px;
	height: 340px;
	width: auto;
	opacity: 0.04;
	transform: rotate(-12deg);
	pointer-events: none;
}

.home-pie__inner {
	position: relative;
}

.home-pie__arriba {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.home-pie__logo {
	height: 84px;
	width: auto;
}

.home-pie__contacto {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-style: normal;
}

.home-pie__contacto a {
	font-size: 15px;
	color: var(--home-oro);
	text-decoration: none;
}

.home-pie__contacto a:hover {
	color: var(--home-oro-hover);
	text-decoration: underline;
}

.home-pie__urgencias {
	margin-top: 32px;
	font-size: 15px;
	color: var(--home-gris);
	max-width: 76ch;
}

.home-pie__abajo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--home-linea);
}

.home-pie__copyright,
.home-pie__legales a {
	font-size: 13px;
	color: var(--home-gris-pie);
}

.home-pie__legales {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.home-pie__legales a {
	text-decoration: none;
}

.home-pie__legales a:hover {
	color: var(--home-gris);
	text-decoration: underline;
}

/* ==================================================================== *
 * 4. Selector de forma de pago y resumen
 * ==================================================================== */

.home-inscripcion {
	background: radial-gradient(ellipse at 50% 0%, var(--home-resplandor-suave), transparent 60%);
}

.home-inscripcion__cabecera {
	text-align: center;
	margin-bottom: 44px;
}

.home-inscripcion__cabecera .home-titulo-seccion {
	max-width: none;
}

.home-inscripcion__cabecera .home-subtitulo-seccion {
	margin-left: auto;
	margin-right: auto;
}

.home-inscripcion__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 28px;
	align-items: start;
}

.home-selector {
	border: 0;
	margin: 0;
	padding: 0;
}

.home-selector__leyenda {
	font-family: var(--home-titulo);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--home-etiqueta);
	text-transform: uppercase;
	padding: 0;
	margin-bottom: 14px;
}

.home-selector__nota {
	font-size: 14px;
	color: var(--home-gris);
	margin-top: 18px;
}

/* --- Tarjeta de opción --- */

.home-opcion {
	position: relative;
}

/*
 * El radio nativo, visualmente oculto pero presente.
 *
 * No se usa `display:none` ni `visibility:hidden`: los dos lo sacan del orden
 * de tabulación y de lo que anuncia un lector de pantalla, con lo que el grupo
 * deja de ser navegable con las flechas. Con este recorte sigue siendo un radio
 * de verdad, sólo que invisible.
 */
.home-opcion__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.home-opcion__label {
	display: grid;
	grid-template-columns: 26px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 22px 24px;
	margin-bottom: 12px;
	background: var(--home-panel);
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-tarjeta);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.home-opcion__label:hover {
	background: var(--home-hover-tarjeta);
	border-color: var(--home-borde-hover);
}

.home-opcion__radio {
	position: relative;
	width: 22px;
	height: 22px;
	border: 2px solid var(--home-radio);
	border-radius: var(--home-pildora);
	transition: border-color 0.2s;
}

.home-opcion__label:hover .home-opcion__radio {
	border-color: var(--home-radio-hover);
}

.home-opcion__nombre {
	display: block;
	font-family: var(--home-titulo);
	font-size: 17px;
	font-weight: 700;
	color: var(--home-blanco);
}

.home-opcion__detalle {
	display: block;
	font-size: 14px;
	color: var(--home-gris);
	margin-top: 2px;
}

.home-opcion__precio {
	text-align: right;
}

.home-opcion__importe {
	display: block;
	font-family: var(--home-titulo);
	font-size: 24px;
	font-weight: 800;
	color: var(--home-blanco);
}

.home-opcion__cadencia {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--home-gris);
}

/* Seleccionado */
.home-opcion__input:checked + .home-opcion__label {
	border-color: var(--home-oro);
	background: linear-gradient(0deg, var(--home-velo-oro), var(--home-velo-oro)), var(--home-panel);
}

.home-opcion__input:checked + .home-opcion__label .home-opcion__radio {
	border-color: var(--home-oro);
}

.home-opcion__input:checked + .home-opcion__label .home-opcion__radio::after {
	content: "";
	position: absolute;
	inset: 4px;
	width: 10px;
	height: 10px;
	background: var(--home-oro);
	border-radius: var(--home-pildora);
}

/* Foco de teclado: el contorno va en la etiqueta, porque el radio real es
   invisible y un contorno sobre un cuadro de 1 px no se ve. */
.home-opcion__input:focus-visible + .home-opcion__label {
	outline: 2px solid var(--home-oro);
	outline-offset: 3px;
}

/* --- Resumen --- */

.home-resumen {
	background: var(--home-panel-alt);
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-tarjeta);
	padding: 32px;
}

.home-resumen--pegajoso {
	position: sticky;
	top: 24px;
}

.home-resumen__producto {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--home-linea);
}

.home-resumen__cuadrado {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	font-family: var(--home-titulo);
	font-size: 13px;
	font-weight: 800;
	color: var(--home-oro);
	border: 1px solid rgba(193, 159, 32, 0.5);
	border-radius: var(--home-radio-fino);
}

.home-resumen__nombre strong {
	display: block;
	font-family: var(--home-titulo);
	font-size: 17px;
	font-weight: 700;
	color: var(--home-blanco);
}

.home-resumen__nombre span {
	display: block;
	font-size: 14px;
	color: var(--home-gris);
	margin-top: 2px;
}

.home-resumen__filas {
	margin: 0;
	padding: 20px 0;
}

.home-resumen__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	font-size: 15px;
}

.home-resumen__fila dt {
	color: var(--home-gris);
}

.home-resumen__fila dd {
	margin: 0;
	color: var(--home-blanco);
	text-align: right;
	/* Cifras tabulares: al cambiar de plan, «1.500 €» y «1.000 €» tienen que
	   ocupar lo mismo, o el panel da un salto a cada clic. */
	font-variant-numeric: tabular-nums;
}

.home-resumen__hoy {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0 24px;
	border-top: 1px solid var(--home-linea);
}

.home-resumen__hoy-etiqueta {
	font-family: var(--home-titulo);
	font-size: 16px;
	font-weight: 600;
	color: var(--home-blanco);
}

.home-resumen__hoy-importe {
	font-family: var(--home-titulo);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--home-oro);
	font-variant-numeric: tabular-nums;
}

.home-resumen--medio .home-resumen__hoy-importe {
	font-size: 38px;
}

.home-resumen__cifrado {
	font-size: 13px;
	color: var(--home-gris);
	margin-top: 14px;
	text-align: center;
}

.home-resumen__plazas {
	font-size: 14px;
	color: var(--home-gris);
	margin-top: 14px;
	text-align: center;
}

/* ==================================================================== *
 * 5. Checkout
 * ==================================================================== */

/* --- Cabecera con los tres pasos --- */

.home-pasos {
	text-align: center;
	padding: 44px var(--home-aire) 0;
	border-bottom: 1px solid var(--home-linea);
	padding-bottom: 32px;
}

.home-pasos__logo img {
	height: 70px;
	width: auto;
	margin: 0 auto;
}

.home-pasos__metodo {
	margin-top: 22px;
	font-size: 12px;
	letter-spacing: 0.45em;
}

.home-pasos__home {
	font-size: 56px;
}

.home-pasos--compacto .home-pasos__home {
	font-size: 44px;
}

.home-pasos__lista {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px 26px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.home-pasos__paso {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
}

.home-pasos__marca {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--home-pildora);
	font-family: var(--home-titulo);
	font-size: 13px;
	font-weight: 700;
}

.home-pasos__paso--hecho .home-pasos__marca {
	background: transparent;
	border: 1px solid var(--home-oro);
	color: var(--home-oro);
}

.home-pasos__paso--hecho .home-pasos__nombre {
	color: var(--home-oro);
}

.home-pasos__paso--actual .home-pasos__marca {
	background: var(--home-oro);
	color: var(--home-negro);
}

.home-pasos__paso--actual .home-pasos__nombre {
	font-family: var(--home-titulo);
	font-weight: 600;
	color: var(--home-blanco);
}

.home-pasos__paso--pendiente .home-pasos__marca {
	background: transparent;
	border: 1px solid #444444;
	color: var(--home-gris-tenue);
}

.home-pasos__paso--pendiente .home-pasos__nombre {
	color: var(--home-gris-tenue);
}

.home-pasos--solo-lockup {
	border-bottom: 0;
}

/* --- Cuerpo del checkout --- */

.home-checkout__elegido {
	text-align: center;
	font-size: 15px;
	color: var(--home-gris);
	padding: 22px var(--home-aire) 0;
}

.home-checkout__elegido strong {
	color: var(--home-blanco);
}

.home-checkout__elegido a {
	color: var(--home-oro);
	margin-left: 8px;
}

.home-checkout__inner {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 40px;
	align-items: start;
	padding-top: 48px;
	padding-bottom: 110px;
}

.home-checkout__izquierda > * + * {
	margin-top: 20px;
}

.home-checkout__incluye ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-checkout__incluye li {
	display: flex;
	gap: 14px;
	padding: 10px 0;
	font-size: 16px;
	color: var(--home-gris);
}

/*
 * El bloque de «Aquí no estás sola» venía pegado a la caja del pago, y ahí es
 * donde menos convenía: quien acaba de leer el importe y el botón necesita que
 * lo siguiente se lea como otra voz, no como la letra pequeña del cobro.
 *
 * El margen va en el propio bloque y no en un `> * + *` de la columna porque
 * este cierre aparece también debajo del formulario de datos, y en los dos
 * sitios quiere el mismo aire.
 */
.home-checkout__cierre {
	border-left: 3px solid var(--home-oro);
	padding-left: 20px;
	margin-top: 44px;
}

.home-checkout__cierre-titulo {
	font-family: var(--home-titulo);
	font-size: 22px;
	font-weight: 600;
	color: var(--home-blanco);
}

.home-checkout__cierre-texto {
	font-size: 16px;
	color: var(--home-gris);
	margin-top: 10px;
}

.home-checkout__formulario {
	background: var(--home-panel-alt);
	padding: 36px;
}

.home-checkout__titulo {
	font-size: 22px;
	font-weight: 700;
}

.home-checkout__nota {
	font-size: 14px;
	color: var(--home-gris);
	margin-top: 6px;
}

.home-checkout__hueco {
	border: 1px dashed #3a3a3a;
	border-radius: var(--home-radio-tarjeta);
	background: var(--home-hueco);
	padding: 26px;
	margin-top: 24px;
	font-size: 15px;
	color: var(--home-gris);
}

/* --- El formulario de WooCommerce, vestido de oscuro --- *
 *
 * WooCommerce trae su propio marcado y sus clases; aquí se le da el aspecto
 * del diseño sin tocar ese marcado. Se apunta a sus clases reales
 * (`.woocommerce-billing-fields`, `#place_order`…) porque son estables entre
 * versiones y es lo que el shortcode pinta.
 */

.home-checkout__formulario .woocommerce {
	margin-top: 24px;
}

.home-checkout__formulario h3 {
	font-size: 17px;
	font-weight: 700;
	margin: 28px 0 14px;
}

.home-checkout__formulario .form-row {
	display: block;
	margin: 0 0 16px;
	padding: 0;
}

/*
 * Las etiquetas de los campos del formulario.
 *
 * El `:not(.home-casilla)` no es un adorno: sin él esta regla también alcanzaba
 * a las etiquetas de las tres casillas de consentimiento —que son `<label>`
 * igualmente— y su `display: block` le ganaba al `display: grid` de
 * `.home-casilla` por llevar clase y elemento frente a una sola clase.
 *
 * Con la rejilla anulada, el cuadradito de la casilla se quedaba `inline`, que
 * ignora el ancho y el alto, y colapsaba a 2 × 19 px: en pantalla no se veía una
 * casilla, se veía una rayita.
 */
.home-checkout__formulario label:not(.home-casilla) {
	display: block;
	font-size: 14px;
	color: var(--home-gris);
	margin-bottom: 6px;

	/*
	 * Que la etiqueta parta línea si no cabe, en vez de recortarse. Ninguna de
	 * las actuales se recorta —las más largas son «Código postal / ZIP» y
	 * «Provincia o región», y caben—, pero el día que se añada un campo con una
	 * etiqueta larga, partir línea avisa y recortar esconde.
	 */
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.home-checkout__formulario .required {
	color: var(--home-oro);
	text-decoration: none;
	border: 0;
}

.home-checkout__formulario input[type="text"],
.home-checkout__formulario input[type="email"],
.home-checkout__formulario input[type="tel"],
.home-checkout__formulario input[type="password"],
.home-checkout__formulario input[type="number"],
.home-checkout__formulario textarea,
.home-checkout__formulario select {
	width: 100%;
	/* 48 px de alto: el objetivo táctil mínimo del diseño en móvil, y en
	   escritorio no molesta. */
	min-height: 48px;
	padding: 12px 14px;
	background: var(--home-panel);
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-campo);
	color: var(--home-texto);
	/* 16 px y no menos: por debajo de 16, Safari en iPhone hace zoom al
	   enfocar el campo y descoloca toda la pantalla de pago. */
	font-family: var(--home-cuerpo);
	font-size: 16px;
	line-height: 1.4;
}

/* --- Los desplegables mejorados de WooCommerce (select2) --- *
 *
 * select2 sustituye el <select> por una pila de <span> con SU PROPIO relleno y
 * su propia altura de línea. Dándole el mismo tratamiento que a un campo
 * normal, los dos rellenos se suman: la caja quedaba en 48 px y el texto de
 * dentro en 57, así que «Elige una opción…» se salía por debajo del recuadro.
 *
 * La forma que funciona es repartir el trabajo: la caja pone el borde, el fondo
 * y la altura; el texto de dentro pone su relleno horizontal y una altura de
 * línea igual al hueco interior. Y hay que apuntar a las clases de select2 con
 * su contenedor (`.select2-container--default`) porque es lo que hace su propia
 * hoja de estilos, y si no, gana ella.
 */
.home-checkout__formulario .select2-container {
	width: 100% !important;
}

.home-checkout__formulario .select2-container--default .select2-selection--single {
	height: 48px;
	padding: 0;
	background: var(--home-panel);
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-campo);
	outline: none;
}

.home-checkout__formulario .select2-container--default .select2-selection--single .select2-selection__rendered {
	/* 46 px = los 48 de la caja menos su borde arriba y abajo. */
	line-height: 46px;
	padding: 0 38px 0 14px;
	color: var(--home-texto);
	font-family: var(--home-cuerpo);
	font-size: 16px;
}

.home-checkout__formulario .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--home-etiqueta);
}

.home-checkout__formulario .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 10px;
}

.home-checkout__formulario .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-top-color: var(--home-gris);
}

.home-checkout__formulario .select2-container--default.select2-container--open .select2-selection--single,
.home-checkout__formulario .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--home-oro);
	outline: 2px solid var(--home-oro);
	outline-offset: 2px;
}

/*
 * El panel que se abre NO está dentro del formulario: select2 lo cuelga del
 * final del <body>, así que un selector que empiece por `.home-pagina` no lo
 * alcanza. Se estiliza por sus propias clases, que en este sitio sólo existen
 * en la pantalla de pago.
 */
.select2-container--default .select2-dropdown {
	background: var(--home-panel);
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-campo);
	color: var(--home-texto);
}

.select2-container--default .select2-search--dropdown {
	padding: 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 44px;
	padding: 10px 12px;
	background: var(--home-hueco);
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-campo);
	color: var(--home-texto);
	font-family: var(--home-cuerpo);
	font-size: 16px;
}

.select2-container--default .select2-results__option {
	padding: 11px 14px;
	font-family: var(--home-cuerpo);
	font-size: 16px;
	color: var(--home-texto);
	background: transparent;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--home-velo-oro);
	color: var(--home-blanco);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--home-hover-tarjeta);
	color: var(--home-blanco);
}

.home-checkout__formulario input::placeholder,
.home-checkout__formulario textarea::placeholder {
	color: var(--home-etiqueta);
}

.home-checkout__formulario input:focus,
.home-checkout__formulario textarea:focus,
.home-checkout__formulario select:focus {
	border-color: var(--home-oro);
	outline: 2px solid var(--home-oro);
	outline-offset: 2px;
}

.home-checkout__formulario .description,
.home-checkout__formulario .woocommerce-input-wrapper > .description {
	font-size: 13px;
	color: var(--home-etiqueta);
	margin-top: 6px;
}

/* El bloque de revisión del pedido: aquí no se enseña otra vez el resumen —ya
   está en la columna izquierda—, sólo los métodos de pago y el botón. */
.home-checkout__formulario .woocommerce-checkout-review-order-table {
	display: none;
}

.home-checkout__formulario #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 8px;
}

.home-checkout__formulario #payment ul.payment_methods {
	margin: 0;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--home-linea);
	list-style: none;
}

.home-checkout__formulario #payment ul.payment_methods li {
	margin-bottom: 10px;
}

.home-checkout__formulario #payment div.payment_box {
	background: var(--home-hueco);
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-tarjeta);
	padding: 20px;
	margin-top: 12px;
	color: var(--home-gris);
	font-size: 15px;
}

/* WooCommerce dibuja un triangulito sobre la caja del método de pago con un
   ::before de bordes; en fondo oscuro queda como una muesca clara. Se quita. */
.home-checkout__formulario #payment div.payment_box::before {
	display: none;
}

.home-checkout__formulario #place_order,
.home-pantalla-pago #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin-top: 24px;
	padding: 17px 32px;
	background: var(--home-oro);
	color: var(--home-negro);
	border: 0;
	border-radius: var(--home-pildora);
	font-family: var(--home-titulo);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
}

/*
 * El hover no lleva el estado apagado: el botón inactivo lo cubre la regla de
 * `.home-boton--apagado` de la sección 2, que gana a estas dos por llevar el
 * atributo `[aria-disabled]` además del ID.
 */
.home-checkout__formulario #place_order:not([aria-disabled="true"]):hover {
	background: var(--home-oro-hover);
}

/* --- Pantalla de pago (paso 3 de 4) --- */

/*
 * La tabla de detalles del pedido que WooCommerce pinta en esta pantalla, fuera:
 * repetiría el resumen del plan que ya está en la columna izquierda, con otro
 * formato y otra tipografía.
 */
.home-pantalla-pago .shop_table,
.home-pantalla-pago .woocommerce-order-details,
.home-pantalla-pago .order_details {
	display: none;
}

.home-pantalla-pago__datos {
	margin: 0;
	padding: 20px 24px;
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-tarjeta);
	font-size: 15px;
}

.home-pantalla-pago__datos > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
}

.home-pantalla-pago__datos dt {
	color: var(--home-gris);
}

.home-pantalla-pago__datos dd {
	margin: 0;
	color: var(--home-blanco);
	text-align: right;
	word-break: break-word;
}

.home-pantalla-pago__aviso-cuotas {
	border: 1px solid var(--home-aviso-borde);
	background: var(--home-aviso-fondo);
	border-radius: var(--home-radio-tarjeta);
	color: var(--home-aviso);
	padding: 16px 18px;
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.6;
}

.home-pantalla-pago__aviso-cuotas a {
	color: var(--home-aviso);
	text-decoration: underline;
}

/*
 * Los métodos de pago, con el mismo aspecto de tarjeta que las formas de pago de
 * la landing: es la misma clase de decisión y conviene que se vea igual.
 *
 * WooCommerce los pinta como un `<ul>` con un radio y una etiqueta por método, y
 * debajo un cajón (`.payment_box`) con los campos de ese método —la tarjeta de
 * Stripe, el botón de PayPal, los datos de la cuenta para la transferencia—.
 */
.home-pantalla-pago #payment ul.payment_methods {
	border-bottom: 0;
	padding: 0;
	margin-top: 20px;
}

.home-pantalla-pago #payment ul.payment_methods > li {
	background: var(--home-panel);
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-tarjeta);
	margin-bottom: 12px;
	padding: 18px 20px;
	transition: background 0.2s, border-color 0.2s;
}

.home-pantalla-pago #payment ul.payment_methods > li:hover {
	background: var(--home-hover-tarjeta);
	border-color: var(--home-borde-hover);
}

/*
 * El método elegido se resalta igual que la forma de pago elegida en la landing:
 * borde oro y velo al 14 %. `:has()` permite pintar el `<li>` a partir del radio
 * que lleva dentro; donde no esté soportado, la tarjeta se queda con su borde
 * normal y el radio marcado sigue viéndose, así que no se pierde información.
 */
.home-pantalla-pago #payment ul.payment_methods > li:has( input[type="radio"]:checked ) {
	border-color: var(--home-oro);
	background: linear-gradient(0deg, var(--home-velo-oro), var(--home-velo-oro)), var(--home-panel);
}

.home-pantalla-pago #payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--home-titulo);
	font-size: 17px;
	font-weight: 700;
	color: var(--home-blanco);
	cursor: pointer;
}

.home-pantalla-pago #payment ul.payment_methods input[type="radio"] {
	/* El radio nativo, del tamaño del diseño y en los colores de la marca. */
	appearance: none;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid var(--home-radio);
	border-radius: var(--home-pildora);
	background: transparent;
	cursor: pointer;
}

.home-pantalla-pago #payment ul.payment_methods input[type="radio"]:checked {
	border-color: var(--home-oro);
	/* El punto de dentro, con un degradado radial para no necesitar un ::after
	   (un input no puede tener pseudoelementos en todos los navegadores). */
	background: radial-gradient(circle, var(--home-oro) 0 5px, transparent 6px);
}

.home-pantalla-pago #payment ul.payment_methods input[type="radio"]:focus-visible {
	outline: 2px solid var(--home-oro);
	outline-offset: 3px;
}

/* Los logotipos que algunas pasarelas ponen junto al nombre. */
.home-pantalla-pago #payment ul.payment_methods label img {
	display: inline-block;
	max-height: 24px;
	width: auto;
	margin-left: 4px;
}

.home-pantalla-pago #payment div.payment_box {
	background: var(--home-hueco);
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-tarjeta);
	margin: 14px 0 0;
	padding: 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--home-gris);
}

.home-pantalla-pago #payment div.payment_box::before {
	display: none;
}

.home-pantalla-pago #payment div.payment_box p:first-child {
	margin-top: 0;
}

/* El botón de pagar, a lo ancho y con el aspecto del principal. */
.home-pantalla-pago #payment .form-row.place-order,
.home-pantalla-pago .form-row.place-order {
	margin: 0;
	padding: 0;
}

.home-nota-cifrado {
	font-size: 13px;
	color: var(--home-gris);
	text-align: center;
	margin-top: 14px;
}

/*
 * Avisos de WooCommerce (errores de validación) en la paleta del embudo.
 *
 * Hay DOS marcados distintos y hacen falta los dos. Los clásicos
 * (`woocommerce-error`) y los del paquete de bloques
 * (`wc-block-components-notice-banner`), que es el que usa la respuesta AJAX
 * del checkout. Sin el segundo, un error al pulsar «Pagar» se pintaba sin
 * estilo: texto oscuro sobre fondo oscuro, o sea invisible. Se descubrió con el
 * aviso de «ya hay una cuenta con ese correo», que estaba saliendo y no se veía.
 */
.home-pagina .woocommerce-NoticeGroup,
.home-pagina .woocommerce-error,
.home-pagina .woocommerce-message,
.home-pagina .woocommerce-info,
.home-pagina .wc-block-components-notice-banner {
	background: var(--home-aviso-fondo);
	border: 1px solid var(--home-aviso-borde);
	border-radius: var(--home-radio-tarjeta);
	color: var(--home-aviso);
	padding: 18px 20px;
	margin: 0 0 20px;
	list-style: none;
	font-size: 15px;
}

.home-pagina .woocommerce-error li + li {
	margin-top: 8px;
}

.home-pagina .woocommerce-error a,
.home-pagina .woocommerce-info a,
.home-pagina .wc-block-components-notice-banner a {
	color: var(--home-aviso);
	text-decoration: underline;
}

/* El icono del aviso de bloques, en el mismo ámbar que su texto. */
.home-pagina .wc-block-components-notice-banner svg {
	fill: var(--home-aviso);
	flex: 0 0 auto;
}

.home-pagina .wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

/* --- Las tres casillas --- */

.home-casillas {
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-tarjeta);
	padding: 28px;
	margin-top: 28px;
}

.home-casilla {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 14px;
	align-items: start;
	margin-bottom: 20px;
	cursor: pointer;
	/* 48 px de objetivo táctil: la etiqueta entera es pulsable, así que el
	   mínimo se pone aquí y no en el cuadrito de 22 px. */
	min-height: 48px;
}

.home-casilla__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.home-casilla__marca {
	position: relative;
	/*
	 * `display: block` explícito: como elemento de la rejilla ya se comportaría
	 * como bloque, pero declararlo evita que vuelva a pasar lo de antes —si algo
	 * rompe la rejilla del `<label>`, este `<span>` volvería a ser `inline` y a
	 * ignorar su tamaño, y la casilla desaparecería de la pantalla otra vez.
	 */
	display: block;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border: 1px solid var(--home-radio);
	border-radius: var(--home-radio-casilla);
	transition: background 0.2s, border-color 0.2s;
}

.home-casilla__input:checked + .home-casilla__marca {
	background: var(--home-oro);
	border-color: var(--home-oro);
}

.home-casilla__input:checked + .home-casilla__marca::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--home-negro);
	border-bottom: 2px solid var(--home-negro);
	transform: rotate(-45deg);
}

.home-casilla__input:focus-visible + .home-casilla__marca {
	outline: 2px solid var(--home-oro);
	outline-offset: 3px;
}

.home-casilla__texto {
	font-size: 16px;
	line-height: 1.6;
	color: var(--home-texto);
}

.home-casilla__texto a {
	color: var(--home-oro);
	text-decoration: underline;
}

.home-casilla__asterisco {
	color: var(--home-oro);
}

.home-casillas__privacidad {
	font-size: 13px;
	color: var(--home-etiqueta);
	margin-top: 4px;
}

.home-casillas__privacidad a {
	color: var(--home-etiqueta);
	text-decoration: underline;
}

.home-casillas__aviso {
	border: 1px solid var(--home-aviso-borde);
	background: var(--home-aviso-fondo);
	border-radius: var(--home-radio-tarjeta);
	color: var(--home-aviso);
	padding: 14px 16px;
	margin-top: 16px;
	font-size: 15px;
}

/* ==================================================================== *
 * 6. Pantallas de resultado
 * ==================================================================== */

.home-resultado__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 64px var(--home-aire) 110px;
}

.home-resultado__titular {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.12;
}

.home-resultado__saludo {
	font-size: 18px;
	color: var(--home-gris);
	margin-top: 16px;
}

/* Rejilla de datos del pedido: el efecto de retícula se hace con un fondo de
   línea y un hueco de 1 px, no con bordes por celda —así no se duplican los
   filetes interiores. */
.home-rejilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--home-linea);
	margin: 40px 0 0;
}

.home-rejilla__celda {
	background: var(--home-panel-alt);
	padding: 22px 20px;
}

.home-rejilla__clave {
	font-size: 13px;
	color: var(--home-gris-tenue);
}

.home-rejilla__valor {
	font-family: var(--home-titulo);
	font-size: 17px;
	font-weight: 700;
	color: var(--home-blanco);
	margin: 6px 0 0;
	font-variant-numeric: tabular-nums;
}

/* --- Esperando la transferencia --- */

.home-transferencia {
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-tarjeta);
	padding: 28px;
	margin-top: 40px;
}

.home-transferencia__titulo {
	font-size: 22px;
	font-weight: 700;
}

.home-transferencia__concepto {
	font-size: 17px;
	color: var(--home-gris);
	margin-top: 12px;
}

.home-transferencia__concepto strong {
	color: var(--home-oro);
	font-variant-numeric: tabular-nums;
}

/*
 * Los datos de la cuenta los pinta la pasarela de WooCommerce con su propio
 * marcado, asi que aqui solo se visten.
 */
.home-transferencia .wc-bacs-bank-details,
.home-transferencia ul {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.home-transferencia li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--home-linea-interior);
	font-size: 16px;
	color: var(--home-gris);
}

.home-transferencia li:last-child {
	border-bottom: 0;
}

.home-transferencia li strong {
	color: var(--home-blanco);
	font-family: var(--home-titulo);
	font-weight: 700;
	/* El IBAN se lee cifra a cifra y es largo: se le deja partirse. */
	word-break: break-all;
}

.home-transferencia h2,
.home-transferencia h3 {
	font-size: 17px;
	font-weight: 700;
	margin-top: 18px;
}

.home-proximos {
	margin-top: 48px;
}

.home-proximos__titulo {
	font-size: 22px;
	font-weight: 700;
}

.home-proximos__lista {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.home-proximos__paso {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 16px 0;
}

.home-proximos__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--home-oro);
	border-radius: var(--home-pildora);
	font-family: var(--home-titulo);
	font-size: 15px;
	font-weight: 700;
	color: var(--home-oro);
}

.home-proximos__texto {
	font-size: 17px;
	color: var(--home-gris);
}

.home-proximos__texto strong {
	color: var(--home-blanco);
}

.home-completado__cuotas {
	border: 1px solid var(--home-linea);
	border-radius: var(--home-radio-tarjeta);
	padding: 20px 22px;
	margin-top: 32px;
	font-size: 16px;
	color: var(--home-gris);
}

.home-resultado__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}

/* --- Pago no completado --- */

.home-fallido__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 72px var(--home-aire) 120px;
}

.home-fallido__titular {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.12;
}

.home-fallido__frase {
	font-size: 18px;
	color: var(--home-gris);
	margin-top: 18px;
}

.home-fallido__consuelo {
	font-size: 17px;
	color: var(--home-gris);
	margin-top: 14px;
}

.home-fallido__remedios {
	margin-top: 36px;
}

.home-fallido__remedios-titulo {
	font-size: 22px;
	font-weight: 700;
}

.home-fallido__remedios ul {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.home-fallido__remedios li {
	display: flex;
	gap: 16px;
	padding: 12px 0;
	font-size: 17px;
	color: var(--home-gris);
}

.home-fallido__cierre {
	font-size: 17px;
	color: var(--home-gris);
	margin-top: 32px;
}

/* ==================================================================== *
 * 7. Páginas legales
 * ==================================================================== */

.home-legal__cuerpo {
	max-width: 760px;
	margin: 0 auto;
	padding: 72px var(--home-aire) 96px;
}

.home-legal__titulo {
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 32px;
}

.home-legal__cuerpo h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 40px 0 12px;
}

.home-legal__cuerpo h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 26px 0 8px;
}

.home-legal__cuerpo p,
.home-legal__cuerpo li {
	font-size: 17px;
	line-height: 1.75;
	color: var(--home-gris);
}

.home-legal__cuerpo p + p {
	margin-top: 16px;
}

.home-legal__cuerpo ul {
	margin: 16px 0;
	padding-left: 22px;
}

.home-legal__cuerpo li + li {
	margin-top: 8px;
}

.home-legal__cuerpo strong {
	color: var(--home-blanco);
}

.home-legal__cuerpo a {
	color: var(--home-oro);
}

/* ==================================================================== *
 * 8. Cookies y barra fija del móvil
 * ==================================================================== */

.home-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: rgba(10, 10, 10, 0.96);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--home-linea);
	padding: 18px var(--home-aire);
}

.home-cookies__inner {
	max-width: var(--home-contenedor);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
}

.home-cookies__titulo {
	font-family: var(--home-titulo);
	font-size: 14px;
	font-weight: 700;
	color: var(--home-blanco);
}

.home-cookies__cuerpo {
	font-size: 14px;
	color: var(--home-gris);
	max-width: 76ch;
	margin-top: 4px;
}

.home-cookies__cuerpo a {
	color: var(--home-oro);
}

.home-cookies__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * Los dos botones tienen el mismo tamaño y el mismo peso visual. Rechazar no
 * puede costar más que aceptar: además de ser lo correcto, es lo que exige la
 * guía de la AEPD sobre patrones oscuros en los avisos de cookies.
 */
.home-cookies__si,
.home-cookies__no {
	font-family: var(--home-titulo);
	font-size: 14px;
	font-weight: 700;
	padding: 13px 22px;
	min-height: 48px;
	border-radius: var(--home-pildora);
	cursor: pointer;
	white-space: nowrap;
}

.home-cookies__si {
	background: var(--home-oro);
	color: var(--home-negro);
	border: 1px solid var(--home-oro);
}

.home-cookies__si:hover {
	background: var(--home-oro-hover);
}

.home-cookies__no {
	background: transparent;
	color: var(--home-blanco);
	border: 1px solid var(--home-linea);
}

.home-cookies__no:hover {
	border-color: var(--home-oro);
}

/* --- Barra fija del móvil --- */

.home-barra {
	display: none;
}

/* ==================================================================== *
 * 9. Móvil
 * ==================================================================== */

@media (max-width: 1080px) {
	.home-hero__inner,
	.home-ancla__inner,
	.home-incluye__inner,
	.home-orillas__inner,
	.home-inscripcion__inner,
	.home-checkout__inner {
		grid-template-columns: 1fr;
	}

	.home-fases__lista {
		grid-template-columns: repeat(2, 1fr);
	}

	.home-resumen--pegajoso {
		position: static;
	}

	/* La foto de Lolo pasa a ir DEBAJO del texto en el hero: con una sola
	   columna, una foto de 4/5 antes del titular empuja la promesa y los
	   botones fuera de la primera pantalla. */
	.home-hero__texto {
		order: 1;
	}

	.home-hero__foto {
		order: 2;
	}

	.home-orillas__foto {
		max-width: 100%;
	}
}

@media (max-width: 782px) {
	:root {
		--home-aire: 20px;
	}

	.home-seccion {
		padding: 60px 0;
	}

	.home-cabecera__inner {
		height: 76px;
	}

	.home-cabecera__logo img {
		height: 64px;
	}

	.home-lockup__metodo {
		font-size: 12px;
		letter-spacing: 0.45em;
	}

	.home-lockup__home {
		font-size: 64px;
	}

	.home-hero {
		padding: 32px 0 60px;
	}

	.home-hero__titular {
		font-size: 30px;
		max-width: none;
	}

	.home-hero__subtitulo,
	.home-subtitulo-seccion,
	.home-resultado__saludo,
	.home-fallido__frase {
		font-size: 16px;
	}

	.home-titulo-seccion,
	.home-faq__titulo {
		font-size: 30px;
		max-width: none;
	}

	.home-resultado__titular,
	.home-fallido__titular,
	.home-legal__titulo {
		font-size: 30px;
	}

	.home-ancla__cita {
		font-size: 22px;
	}

	/* Las fases se apilan con filete arriba, no a la izquierda. */
	.home-fases__lista {
		grid-template-columns: 1fr;
		border-top: 0;
	}

	.home-fases__fase {
		border-left: 0;
		border-top: 1px solid var(--home-linea);
		padding: 26px 0 10px;
	}

	.home-fases__fase:first-child {
		border-top: 1px solid var(--home-linea);
	}

	.home-fases__letra {
		font-size: 72px;
	}

	/* Módulos apilados: número arriba, y la fase debajo en gris tenue. */
	.home-modulos__fila {
		grid-template-columns: 1fr;
		gap: 6px;
		align-items: start;
	}

	.home-modulos__fase {
		text-align: left;
		font-size: 14px;
		color: var(--home-gris-tenue);
		margin-top: 6px;
	}

	.home-incluye__panel,
	.home-panel,
	.home-resumen,
	.home-checkout__formulario {
		padding: 24px;
	}

	.home-hero__botones .home-boton,
	.home-resultado__botones .home-boton {
		width: 100%;
	}

	.home-pasos__home {
		font-size: 36px;
	}

	/*
	 * Los tres pasos, reducidos a círculos unidos por filetes: los nombres no
	 * caben en 390 px sin partirse en tres líneas cada uno.
	 *
	 * El nombre del paso ACTUAL sí se queda: es la única información que hace
	 * falta ahí, y dejar sólo tres círculos numerados no dice nada.
	 */
	.home-pasos__lista {
		gap: 0;
	}

	.home-pasos__paso {
		gap: 0;
	}

	.home-pasos__paso:not(:first-child)::before {
		content: "";
		display: block;
		width: 26px;
		height: 1px;
		background: var(--home-linea);
	}

	.home-pasos__marca {
		width: 22px;
		height: 22px;
		font-size: 12px;
		margin: 0 4px;
	}

	.home-pasos__paso:not([aria-current]) .home-pasos__nombre {
		/* Oculto visualmente, presente para el lector de pantalla. */
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.home-pasos__paso[aria-current] .home-pasos__nombre {
		margin-left: 8px;
		font-size: 14px;
	}

	.home-rejilla {
		grid-template-columns: 1fr;
	}

	/* En móvil, cada dato es una fila clave/valor en línea. */
	.home-rejilla__celda {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding: 16px 18px;
	}

	.home-rejilla__valor {
		margin: 0;
		text-align: right;
	}

	.home-resumen__hoy-importe {
		font-size: 34px;
	}

	.home-resumen--medio .home-resumen__hoy-importe {
		font-size: 34px;
	}

	.home-opcion__label {
		padding: 18px;
		gap: 12px;
	}

	.home-opcion__importe {
		font-size: 22px;
	}

	.home-checkout__inner {
		padding-bottom: 60px;
	}

	.home-pie__arriba {
		gap: 20px;
	}

	.home-pie__logo {
		height: 64px;
	}

	/* --- La barra fija, sólo aquí --- */

	.home-barra {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 12px 16px;
		background: rgba(10, 10, 10, 0.94);
		backdrop-filter: blur(8px);
		border-top: 1px solid var(--home-linea);
		transform: translateY(100%);
		transition: transform 0.25s;
	}

	.home-barra--visible {
		transform: translateY(0);
	}

	.home-barra__desde {
		display: block;
		font-family: var(--home-titulo);
		font-size: 16px;
		font-weight: 700;
		color: var(--home-blanco);
	}

	.home-barra__programa {
		display: block;
		font-size: 13px;
		color: var(--home-gris);
	}

	.home-barra__boton {
		padding: 13px 22px;
		min-height: 48px;
		font-size: 15px;
		white-space: nowrap;
	}

	/* Con la barra fija abajo, el pie necesita aire para que su última línea no
	   quede debajo de ella. */
	.home-pagina--landing .home-pie {
		padding-bottom: 104px;
	}

	.home-cookies__botones .home-cookies__si,
	.home-cookies__botones .home-cookies__no {
		flex: 1 1 auto;
	}
}

/* ==================================================================== *
 * 10. Accesibilidad y movimiento
 * ==================================================================== */

/* Foco visible en todo lo interactivo, con el contorno del diseño. */
.home-pagina a:focus-visible,
.home-pagina button:focus-visible,
.home-pagina input:focus-visible,
.home-pagina select:focus-visible,
.home-pagina textarea:focus-visible,
.home-pagina [tabindex]:focus-visible {
	outline: 2px solid var(--home-oro);
	outline-offset: 3px;
}

/*
 * Animación de entrada del hero.
 *
 * Va dentro de `prefers-reduced-motion: no-preference` y no al revés: así el
 * caso por defecto de quien pide menos movimiento —y de cualquier navegador que
 * no entienda la consulta— es el texto quieto y legible, no una animación que
 * hay que desactivar.
 */
@media (prefers-reduced-motion: no-preference) {
	.home-hero__texto .home-lockup__metodo,
	.home-hero__texto .home-lockup__home {
		animation: home-entra-lockup 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.home-hero__texto .home-lockup__bajada,
	.home-hero__titular,
	.home-hero__subtitulo,
	.home-hero__botones {
		animation: home-entra-sube 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
	}

	@keyframes home-entra-lockup {
		from {
			opacity: 0;
			letter-spacing: 0.2em;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes home-entra-sube {
		from {
			opacity: 0;
			transform: translateY(12px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* Quien pide menos movimiento tampoco quiere un spinner girando. */
@media (prefers-reduced-motion: reduce) {
	.home-pagina *,
	.home-pagina *::before,
	.home-pagina *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/*
 * La página de «esto no existe».
 *
 * Reutiliza el cuerpo de las páginas legales porque es el mismo problema de
 * lectura: un texto corto, centrado en una columna, sin nada que distraiga. Lo
 * único propio es el botón, que aquí viene del bloque de botones del núcleo y
 * no de `.home-boton`, así que se le da el mismo aspecto a mano.
 */
.home-404__botones {
	margin-top: 30px;
}

.home-404 .wp-block-button__link {
	display: inline-block;
	padding: 15px 30px;
	border: 1px solid var(--home-linea);
	border-radius: 999px;
	background: transparent;
	color: var(--home-blanco);
	font-family: var(--home-titulo);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.home-404 .wp-block-button__link:hover,
.home-404 .wp-block-button__link:focus-visible {
	border-color: var(--home-oro);
	color: var(--home-blanco);
}

/*
 * Los bloques del embudo se maquetan solos: cada uno lleva dentro su
 * `.home-contenedor`, que es quien centra el contenido y pone el aire de los
 * lados. Pero WordPress, para los hijos directos del contenido de la página,
 * añade por su cuenta un `max-width` y un `padding-inline` más.
 *
 * El resultado se veía en el móvil: el aire se contaba DOS veces y el
 * formulario de datos se quedaba en 245 px de los 375 de la pantalla. Los
 * campos salían estrechos y la etiqueta «(opcional)» de la segunda línea de
 * dirección se cortaba por la derecha.
 *
 * El selector lleva `.is-layout-flow` a propósito: la regla del núcleo usa
 * `:where()`, que no suma peso, así que sin esa clase ambas reglas pesarían lo
 * mismo y ganaría la que se cargara después. Con ella, esta gana siempre.
 */
.wp-block-post-content.is-layout-flow > [class*="wp-block-home-"] {
	max-width: none;
	padding-inline: 0;
}