/* ==========================================================================
   Institut Europeu — hoja de estilos única

   REFERENCIA: instituteuropeu.com. Esta hoja NO es una propuesta gráfica
     nueva: es la web que la empresa ya tiene, con la misma paleta, el mismo
     verde de acción y las mismas fotos, servida por un tema propio en vez de
     por Astra + Elementor. Lo que cambia es el peso, la semántica y la
     estructura del contenido, no el aspecto.
   PALETA: azul #0E38A2 en bandas, azul #0030AB en el hero, verde #21B200
     solo en botones. Sin un cuarto color: el ámbar del calendario fiscal que
     hubo aquí se retiró porque competía con la acción y no venía de la marca.
   FOTOGRAFÍA: obligatoria en el hero y en las secciones de argumento. Las
     fotos son las de producción; sin ellas la página se lee como una maqueta.
   TIPOGRAFÍA: Archivo variable auto-alojada, familia única.

   Sistema documentado en DESIGN.md. No introducir valores fuera de los tokens.
   Antes de cambiar cualquier cosa visual, comparar con producción.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografía
   Una sola familia variable. La variedad viene del peso y de la anchura,
   no de una segunda tipografía.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-variable.woff2') format('woff2-variations'),
	     url('../fonts/archivo-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Color
	   Los tres colores salen de instituteuropeu.com y no se negocian: el azul
	   ocupa las regiones grandes, el azul del hero es medio tono más vivo y
	   el verde es el color de la acción —y solo de la acción. */
	--azul: #0E38A2;
	--azul-hero: #0030AB;
	--azul-profundo: #0A2A7A;
	--tinta: #14150F;
	--verde: #21B200;
	--verde-oscuro: #1A8F00;
	--papel: #F7F6F2;
	--blanco: #FFFFFF;
	--rejilla: #DCDAD2;
	--gris-texto: #57584E;
	--azul-marca: #0E38A2;
	--rojo-error: #B3261E;

	/* Tipografía */
	--fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* El display se calibró contra los titulares reales, que en esta web son
	   largos («Formación de idiomas para su empresa, bonificable por
	   FUNDAE»). Una escala mayor los desbordaba en la columna del hero. */
	--display: clamp(2.25rem, 5vw, 4.25rem);
	--headline: clamp(1.75rem, 3.4vw, 2.75rem);
	--title: clamp(1.25rem, 2vw, 1.625rem);
	--body: 1.0625rem;
	--label: 0.8125rem;
	--cifra: clamp(2.5rem, 6vw, 5rem);

	/* Espaciado */
	--esp-xs: 8px;
	--esp-sm: 16px;
	--esp-md: 24px;
	--esp-lg: 48px;
	--esp-xl: 56px;
	/* 120px arriba y abajo dejaba 240px de aire por sección: con secciones
	   de poco texto la página se leía vacía. */
	--esp-seccion: 56px;

	/* Forma: esto es un impreso, no una tarjeta de aplicación. La excepción es
	   el botón, que lleva los 4px de producción para leerse como pulsable. */
	--radio: 0;
	--radio-boton: 4px;
	--radio-control: 2px;
	--linea: 1px solid var(--rejilla);
	--linea-tinta: 1px solid var(--tinta);

	/* Movimiento */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--rapido: 160ms;

	/* Layout */
	--contenedor: 1240px;
	--canalon: 20px;
	--medida: 68ch;

	/* Foco */
	--anillo: 0 0 0 3px var(--azul);
}

@media (min-width: 768px) {
	:root {
		--canalon: 40px;
		--esp-xl: 72px;
		--esp-seccion: 76px;
	}
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--blanco);
	color: var(--tinta);
	font-family: var(--fuente);
	font-size: var(--body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--esp-md);
	font-family: var(--fuente);
	color: var(--tinta);
	text-wrap: balance;
}

h1 {
	font-size: var(--display);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1;
	letter-spacing: -0.025em;
	/* Titulares largos con palabras largas: que parta antes que desbordar. */
	overflow-wrap: break-word;
}

h2 {
	font-size: var(--headline);
	font-weight: 700;
	font-stretch: 108%;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

h3 {
	font-size: var(--title);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

h4 {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

* + h2 {
	margin-top: var(--esp-xl);
}

* + h3,
* + h4 {
	margin-top: var(--esp-lg);
}

p,
ul,
ol {
	margin: 0 0 var(--esp-md);
	max-width: var(--medida);
}

ul,
ol {
	padding-left: 1.15em;
}

li + li {
	margin-top: var(--esp-xs);
}

/* Ese margen es para las listas de un texto corrido. En las listas que son
   maquetación —el índice de fichas, las pruebas del hero, el menú legal del
   pie— separaba las filas 8 px por debajo de su propio filete: la línea
   quedaba pegada a un elemento y despegada del siguiente, y en el pie
   levantaba «Aviso legal» ocho píxeles por encima de sus dos hermanos. */
.hero__pruebas li + li,
.indice__fila + .indice__fila,
.pie__legal li + li {
	margin-top: 0;
}

a {
	color: var(--tinta);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--rapido) var(--ease), text-decoration-color var(--rapido) var(--ease);
}

a:hover {
	text-decoration-color: var(--azul);
	text-decoration-thickness: 3px;
}

:focus-visible {
	outline: none;
	box-shadow: var(--anillo);
}

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

strong,
b {
	font-weight: 700;
}

hr {
	border: 0;
	border-top: var(--linea);
	margin: var(--esp-xl) 0;
}

.saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--esp-sm) var(--esp-md);
	background: var(--tinta);
	color: var(--blanco);
	text-decoration: none;
}

.saltar:focus {
	left: 0;
}

.solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* La voz del impreso: etiquetas, meses, cabeceras de tabla y botones. */
.etiqueta {
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-texto);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.contenedor {
	width: 100%;
	max-width: var(--contenedor);
	margin-inline: auto;
	padding-inline: var(--canalon);
}

.seccion {
	padding-block: var(--esp-seccion);
}

.seccion--blanco {
	background: var(--blanco);
}

.seccion--gris {
	background: var(--papel);
}

/* Dos secciones del mismo fondo seguidas se leen como una sola masa vacía.
   La línea marca dónde acaba una y empieza otra. */
.seccion--blanco + .seccion--blanco,
.seccion--gris + .seccion--gris {
	border-top: var(--linea);
}

/* Banda azul: color a escala de región, no acento suelto. */
.seccion--azul {
	background: var(--azul);
	color: var(--blanco);
}

.seccion--azul h1,
.seccion--azul h2,
.seccion--azul h3,
.seccion--azul h4 {
	color: var(--blanco);
}

.seccion--azul .etiqueta {
	color: rgba(255, 255, 255, 0.72);
}

.seccion--azul a:not(.boton) {
	color: var(--blanco);
	text-decoration-thickness: 2px;
	text-decoration-color: rgba(255, 255, 255, 0.55);
}

.duo {
	display: grid;
	gap: var(--esp-lg);
	align-items: start;
}

@media (min-width: 900px) {
	.duo {
		grid-template-columns: 3fr 2fr;
		gap: var(--esp-xl);
	}

	.duo--igual {
		grid-template-columns: 1fr 1fr;
	}

	.duo--invertido {
		grid-template-columns: 2fr 3fr;
	}

	.duo--imagen-izquierda > :first-child {
		order: 2;
	}
}

/* --------------------------------------------------------------------------
   Editorial: titular en su propia columna
   Es lo que separa una sección de argumento de la siguiente. En una sola
   columna, seis secciones seguidas de titular + párrafo + botón se leen como
   la misma sección repetida seis veces.
   -------------------------------------------------------------------------- */

.editorial {
	display: grid;
	gap: var(--esp-md);
}

@media (min-width: 900px) {
	.editorial {
		grid-template-columns: 5fr 7fr;
		gap: var(--esp-xl);
		align-items: start;
	}

	.editorial__titular h2 {
		margin: 0;
		/* El titular acompaña a su texto mientras se lee. */
		position: sticky;
		top: var(--esp-lg);
	}
}

.editorial__cuerpo > .contenido > :first-child {
	margin-top: 0;
}

.editorial__accion {
	margin-top: var(--esp-lg);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Destacado: la banda azul, asimétrica
   -------------------------------------------------------------------------- */

.destacado__interior {
	display: grid;
	gap: var(--esp-md);
}

@media (min-width: 900px) {
	.destacado__interior {
		grid-template-columns: 6fr 5fr;
		gap: var(--esp-xl);
		/* Alineadas por abajo, el hueco quedaba encima del titular y parecía un
		   fallo de maquetación. Arrancando las dos arriba, el aire cae debajo
		   del titular y se lee como aire. */
		align-items: start;
	}
}

.destacado__titulo {
	margin: 0;
	font-size: clamp(1.875rem, 4vw, 3.25rem);
}

.destacado__cuerpo > .contenido > :first-child {
	margin-top: 0;
}

.destacado__accion {
	margin-top: var(--esp-lg);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Plazo: la fecha es el argumento
   Sustituye a la banda de doce meses, que ocupaba media portada para decir
   esto mismo.
   -------------------------------------------------------------------------- */

.plazo__interior {
	display: grid;
	gap: var(--esp-lg);
	align-items: center;
}

@media (min-width: 800px) {
	.plazo__interior {
		grid-template-columns: 7fr 5fr;
		gap: var(--esp-xl);
	}
}

.plazo__texto h2 {
	margin-top: 0;
}

.plazo__accion {
	margin-top: var(--esp-lg);
	margin-bottom: 0;
}

/* El aviso del plazo.
   Antes era un «31» a 176px flotando junto al párrafo: a esa escala dejaba de
   leerse como una fecha y no decía de qué era. Ahora es un bloque azul que la
   nombra —qué caduca, cuándo, y qué pasa el 1 de enero—, con la fecha a
   escala de titular en vez de a escala de cartel. */
.plazo__aviso {
	padding: var(--esp-lg);
	background: var(--azul);
	color: var(--blanco);
}

.plazo__etiqueta {
	margin: 0;
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.plazo__fecha {
	margin: var(--esp-sm) 0 0;
	font-size: var(--headline);
	font-weight: 700;
	font-stretch: 108%;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--blanco);
	font-variant-numeric: tabular-nums;
}

.plazo__nota {
	margin: var(--esp-md) 0 0;
	padding-top: var(--esp-md);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.trio {
	display: grid;
	gap: 0;
	border-top: var(--linea);
}

.trio > * {
	border-bottom: var(--linea);
}

@media (min-width: 700px) {
	.trio {
		grid-template-columns: repeat(2, 1fr);
	}

	.trio > *:nth-child(odd) {
		border-right: var(--linea);
	}
}

@media (min-width: 1000px) {
	.trio {
		grid-template-columns: repeat(3, 1fr);
	}

	.trio > * {
		border-right: var(--linea);
	}

	.trio > *:nth-child(3n) {
		border-right: 0;
	}

	.trio > *:nth-child(odd) {
		border-right: var(--linea);
	}

	.trio > *:nth-child(3n) {
		border-right: 0;
	}
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

/* El botón es verde sobre cualquier fondo, blanco o azul, exactamente como en
   instituteuropeu.com. Un botón que cambia de color según la sección obliga a
   reaprender qué es pulsable en cada pantalla; aquí la acción se reconoce por
   el color y nada más lo lleva. */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 24px;
	border: 1px solid var(--verde);
	border-radius: var(--radio-boton);
	background: var(--verde);
	color: var(--blanco);
	font-family: var(--fuente);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}

.boton:hover,
.boton--primario:hover {
	background: var(--verde-oscuro);
	border-color: var(--verde-oscuro);
	color: var(--blanco);
}

.boton--secundario {
	background: transparent;
	color: var(--azul);
	border-color: var(--azul);
}

.boton--secundario:hover {
	background: var(--azul);
	border-color: var(--azul);
	color: var(--blanco);
}

.boton:focus-visible {
	box-shadow: 0 0 0 3px var(--blanco), 0 0 0 6px var(--azul);
}

/* Sobre azul el verde ya destaca por sí solo: solo cambia el borde del
   secundario, que sin invertir se perdería. */
.seccion--azul .boton--secundario,
.hero .boton--secundario,
.franja-dato .boton--secundario,
.zocalo .boton--secundario {
	background: transparent;
	color: var(--blanco);
	border-color: var(--blanco);
}

.seccion--azul .boton--secundario:hover,
.hero .boton--secundario:hover,
.franja-dato .boton--secundario:hover,
.zocalo .boton--secundario:hover {
	background: var(--blanco);
	border-color: var(--blanco);
	color: var(--azul);
}

.seccion--azul .boton:focus-visible,
.hero .boton:focus-visible,
.franja-dato .boton:focus-visible {
	box-shadow: 0 0 0 3px var(--azul), 0 0 0 6px var(--blanco);
}

.boton[aria-disabled='true'],
.boton:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.boton--cargando {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.boton--cargando::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--blanco);
	animation: girar 700ms linear infinite;
}

@keyframes girar {
	to {
		transform: rotate(360deg);
	}
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

/* Teléfono y correo por encima de todo lo demás. En una web B2B donde media
   plantilla llama en vez de rellenar el formulario, esconderlos en el pie
   cuesta contactos. */
.barra-superior {
	background: #F6F7F8;
	border-bottom: 1px solid var(--rejilla);
	font-size: 0.9375rem;
}

.barra-superior__interior {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	min-height: 40px;
}

.barra-superior__dato {
	color: var(--tinta);
	text-decoration: none;
}

.barra-superior__dato:hover {
	color: var(--azul);
	text-decoration: underline;
}

.barra-superior__separador {
	color: var(--rejilla);
}

.barra-superior__social {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	color: var(--tinta);
}

.barra-superior__social:hover {
	color: var(--azul);
}

@media (max-width: 599px) {
	/* En móvil el correo parte la línea; el botón fijo de llamada ya cubre
	   el teléfono, así que aquí basta con el correo. */
	.barra-superior__interior {
		justify-content: center;
		min-height: 36px;
	}

	.barra-superior__separador,
	.barra-superior [href^='tel:'] {
		display: none;
	}
}

.cabecera {
	background: var(--blanco);
	border-bottom: var(--linea-tinta);
}

.cabecera__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Separación amplia: con 24px el primer ítem del menú se leía como
	   parte del logotipo. */
	gap: var(--esp-lg);
	min-height: 104px;
}

.cabecera__logo {
	flex-shrink: 0;
	text-decoration: none;
	font-size: 1.125rem;
	font-weight: 700;
	font-stretch: 110%;
	letter-spacing: -0.01em;
	color: var(--tinta);
}

/* 80px es la altura a la que se sirve en producción. Por debajo, el símbolo
   de la marca deja de leerse y la cabecera parece de otra empresa. */
.cabecera__logo img {
	max-height: 80px;
	width: auto;
}

@media (max-width: 599px) {
	.cabecera__logo img {
		max-height: 56px;
	}
}

.nav {
	display: flex;
	align-items: center;
	gap: var(--esp-md);
}

.nav__lista {
	display: flex;
	align-items: center;
	gap: var(--esp-md);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.nav__item {
	position: relative;
	margin: 0;
}

.nav__link {
	display: block;
	padding: 10px 0;
	border-bottom: 2px solid transparent;
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tinta);
	text-decoration: none;
	transition: border-color var(--rapido) var(--ease);
}

.nav__link:hover,
.nav__link--activo {
	border-bottom-color: var(--azul);
	color: var(--azul);
}

/* El enlace de contacto es un botón: gana el estilo de .boton sobre el de
   .nav__link, que aquí solo aportaría un subrayado que sobra. */
.nav__link.boton,
.nav__link.boton:hover,
.nav__link.boton--activo {
	padding: 13px 22px;
	border-bottom-color: var(--verde);
	color: var(--blanco);
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9375rem;
}

.nav__link.boton:hover {
	border-bottom-color: var(--verde-oscuro);
}

/* En escritorio el submenú se abre al pasar por encima: el botón sobra. */
.nav__desplegar {
	display: none;
}

.nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 250px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--blanco);
	border: var(--linea-tinta);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--rapido) var(--ease), visibility var(--rapido) var(--ease);
}

.nav__item--con-hijos:hover > .nav__submenu,
.nav__item--con-hijos:focus-within > .nav__submenu {
	opacity: 1;
	visibility: visible;
}

.nav__submenu .nav__item + .nav__item {
	border-top: var(--linea);
}

.nav__submenu .nav__link {
	padding: 12px var(--esp-sm);
	border-bottom: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9375rem;
}

.nav__submenu .nav__link:hover {
	background: var(--papel);
}

.nav__boton-menu {
	display: none;
	align-items: center;
	gap: var(--esp-xs);
	padding: 12px 16px;
	background: var(--tinta);
	border: 0;
	border-radius: var(--radio);
	font-family: var(--fuente);
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blanco);
	cursor: pointer;
}

@media (max-width: 1024px) {
	.nav__boton-menu {
		display: inline-flex;
	}

	.nav__lista {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 var(--canalon) var(--esp-md);
		background: var(--blanco);
		border-bottom: var(--linea-tinta);
		box-shadow: 0 12px 24px rgba(20, 21, 15, 0.08);
	}

	.nav__lista[hidden] {
		display: none;
	}

	.nav__item {
		border-bottom: var(--linea);
	}

	.nav__link {
		padding: 16px 0;
		font-size: 1.125rem;
		text-transform: none;
		letter-spacing: 0;
		min-height: 48px;
	}

	/* Cerrados de partida. Con los siete apartados abiertos a la vez el panel
	   medía treinta y dos enlaces y había que recorrerlo entero para llegar a
	   Contacto, que es lo único que se pide desde la cabecera. */
	.nav__submenu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		border: 0;
		padding-left: var(--esp-sm);
	}

	.nav__item--abierto > .nav__submenu {
		display: block;
	}

	.nav__submenu .nav__link {
		font-size: 1rem;
	}

	/* El padre sigue siendo un enlace: el botón solo abre su lista. */
	.nav__item--con-hijos {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.nav__item--con-hijos > .nav__submenu {
		flex: 0 0 100%;
	}

	.nav__desplegar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		min-height: 48px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--tinta);
		cursor: pointer;
	}

	.nav__desplegar svg {
		width: 20px;
		height: 20px;
		transition: transform var(--rapido) var(--ease);
	}

	.nav__desplegar[aria-expanded='true'] svg {
		transform: rotate(180deg);
	}

	.nav__desplegar:focus-visible {
		outline: 2px solid var(--azul);
		outline-offset: -2px;
	}

	.cabecera__interior {
		position: relative;
		flex-wrap: wrap;
	}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* El primer viewport lleva color. Una cabecera blanca con texto negro se
   lee como una página sin estilos, por muy cuidada que esté la tipografía. */
.hero {
	position: relative;
	background: var(--azul-hero);
	color: var(--blanco);
	padding-block: var(--esp-xl) var(--esp-seccion);
	overflow: hidden;
}

/* Todo lo que va dentro del hero, por encima de la foto. */
.hero > .contenedor {
	position: relative;
	z-index: 1;
}

/* El titular manda sobre el formulario, no al revés. */
@media (min-width: 900px) {
	.hero .duo--igual {
		grid-template-columns: 1.35fr 1fr;
	}
}

/* Hero sin formulario.
   Con el formulario al lado, el titular estaba acotado por su columna y la
   acción quedaba a su derecha, dentro del primer viewport. Al quitarlo, el
   titular se estiraba los 1160px del contenedor y todo pasaba a apilarse:
   a 76px, el botón caía en 701px y desaparecía bajo el pliegue en cualquier
   portátil. Se le devuelve el ancho que le daba el formulario y baja un paso
   de escala para que la acción vuelva a verse sin hacer scroll. */
.hero--sin-formulario {
	padding-block: var(--esp-lg) var(--esp-xl);
}

.hero__solo {
	max-width: 900px;
}

/* Con dos clases para ganarle en especificidad a `.hero h1`, que viene
   más abajo en la hoja. */
.hero--sin-formulario .hero__solo h1 {
	font-size: clamp(2.25rem, 4.2vw, 3.5rem);
}

/* La foto sostiene el azul: sin ella el primer viewport es un rectángulo de
   color plano. Se ve de verdad —no al 20 % como textura— y la legibilidad la
   resuelve el velo de abajo, no bajarle la opacidad hasta que desaparece. */
.hero__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.6;
	pointer-events: none;
}

.hero__fondo picture,
.hero__fondo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* Velo direccional: infraestructura de legibilidad, no decoración. Opaco bajo
   el titular y transparente al otro lado, para que la foto respire donde no
   hay texto encima. */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		var(--azul-hero) 0%,
		var(--azul-hero) 34%,
		color-mix(in srgb, var(--azul-hero) 78%, transparent) 58%,
		color-mix(in srgb, var(--azul-hero) 55%, transparent) 100%
	);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.hero::after {
		background: linear-gradient(100deg, var(--azul-hero) 0%, var(--azul-hero) 34%, rgba(0, 48, 171, 0.78) 58%, rgba(0, 48, 171, 0.55) 100%);
	}
}

/* El primer viewport aguanta más escala que el resto de la página, pero el
   titular convive con el formulario en su misma fila y estos titulares son
   largos: a 76px ocupaban cuatro líneas y empujaban el formulario fuera de
   pantalla. La escala se calibra contra el titular real, no al revés. */
.hero h1 {
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
}

.hero h1 {
	color: var(--blanco);
	margin-bottom: var(--esp-md);
}

.hero__entradilla {
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	max-width: 46ch;
	margin-bottom: var(--esp-md);
}

/* La línea que avisa de la bonificación en el test de nivel.

   Quien llega a esa página busca su nivel de inglés, no un curso: es la única
   puerta B2C del sitio. El argumento entero va después del test, cuando ya
   tiene un resultado suyo delante, pero sin ninguna señal arriba se marcha
   antes de empezar el que había venido buscando formación pagada. Una línea
   basta, y va separada por un filete —no por una caja de color— porque una
   caja aquí compite con el propio hero. */
.hero__senal {
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
	max-width: 54ch;
	margin: 0;
	padding-top: var(--esp-md);
	border-top: 1px solid rgba(255, 255, 255, 0.32);
}

/* A quién va dirigido: dato de ficha, no argumento. Va en voz menor bajo la
   entradilla para que no compita con ella. */
.hero__perfil {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
	max-width: 48ch;
}

.hero__titulo-form {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--blanco);
	max-width: 40ch;
	margin-bottom: var(--esp-sm);
}

/* El formulario del hero pide los seis campos, como el de abajo: lo que cambia
   es la densidad. Llegó a tener tres —sin teléfono ni asunto— para que cupiera
   en pantalla, y era el arreglo equivocado: en una web B2B media plantilla
   contesta por teléfono, y sin el asunto la respuesta es una llamada a ciegas
   en vez de una propuesta. Se aprieta el control, no la pregunta. */
.formulario--hero {
	gap: var(--esp-sm);
}

.formulario--hero .campo {
	gap: 4px;
}

.formulario--hero .campo__control {
	padding: 10px 12px;
	font-size: 0.9375rem;
}

.formulario--hero textarea.campo__control {
	min-height: 64px;
}

.formulario--hero .campo--consentimiento .campo__etiqueta {
	font-size: var(--label);
	line-height: 1.4;
}

.hero .etiqueta {
	color: rgba(255, 255, 255, 0.72);
}

.hero a:not(.boton) {
	color: var(--blanco);
	text-decoration-color: rgba(255, 255, 255, 0.55);
}

.hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-sm);
	margin-top: var(--esp-lg);
}

/* Cuatro hechos al pie del titular: contestan «¿esto es para mí?» sin scroll.
   Iban en una línea separados por puntos medios y se rompía sola: los cuatro
   no caben en el ancho de la columna, así que la lista saltaba de línea y la
   segunda empezaba por un punto medio suelto, colgando delante de la primera
   palabra. En rejilla no hay separador que colocar —el filete hace de línea— y
   los cuatro se leen en bloque, dos y dos. */
.hero__pruebas {
	display: grid;
	gap: 0;
	margin: var(--esp-md) 0 0;
	padding: 0;
	/* Sin tope de medida: la rejilla ya está acotada por la columna del hero, y
	   con 46ch cada celda se quedaba en 160 px y los cuatro hechos partían en
	   dos líneas. */
	max-width: none;
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.9);
}

.hero__pruebas li {
	padding-block: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.32);
}

@media (min-width: 620px) {
	.hero__pruebas {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--esp-md);
	}
}

/* --------------------------------------------------------------------------
   Celdas
   -------------------------------------------------------------------------- */

/* Reparto: las tres puertas de entrada al sitio. Sin celdas con borde y sin
   padding interior — la foto va a sangre de columna y el escalonado vertical
   hace el trabajo que antes hacían las divisorias. */
/* Qué pasa después de enviar el formulario. Sobre la banda azul del cierre. */
.cierre__pasos {
	margin: var(--esp-lg) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.cierre__pasos li {
	margin: 0;
	padding-block: var(--esp-sm);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

/* --------------------------------------------------------------------------
   Índice de fichas
   --------------------------------------------------------------------------

   El catálogo por áreas se lee como un índice editorial: una fila por área,
   el nombre a escala de titular y la fila entera pulsable. Sustituye a la
   rejilla de tres columnas, que con siete fichas dejaba la última fila coja
   y se leía como un listado de directorio.
   -------------------------------------------------------------------------- */

.indice__intro {
	max-width: 60ch;
	margin-bottom: var(--esp-lg);
}

.indice {
	margin: 0;
	padding: 0;
	/* La regla base acota ul a 68ch para el texto corrido. Aquí la lista es
	   maquetación, no párrafo: acotada dejaba el índice en poco más de media
	   página y el resto en blanco. */
	max-width: none;
	list-style: none;
	border-top: var(--linea-tinta);
}

.indice__fila {
	border-bottom: var(--linea);
}

.indice__enlace {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--esp-md);
	/* Arriba y no al centro: en móvil, con el nombre y el texto apilados, la
	   fila crece y el número y la flecha se quedaban flotando en mitad del
	   hueco, sin nada al lado. */
	align-items: start;
	padding: var(--esp-md) var(--esp-sm);
	color: var(--tinta);
	text-decoration: none;
	transition: background-color var(--rapido) var(--ease), color var(--rapido) var(--ease);
}

.indice__orden {
	/* Alineado con la mayúscula del nombre, no con la caja. */
	padding-top: 0.4em;
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--gris-texto);
	transition: color var(--rapido) var(--ease);
}

.indice__cuerpo {
	display: grid;
	gap: var(--esp-xs);
}

@media (min-width: 900px) {
	.indice__cuerpo {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--esp-lg);
		align-items: baseline;
	}
}

.indice__nombre {
	font-size: var(--title);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.indice__texto {
	color: var(--gris-texto);
	line-height: 1.5;
	transition: color var(--rapido) var(--ease);
}

.indice__flecha {
	width: 22px;
	height: 22px;
	margin-top: 0.15em;
	flex-shrink: 0;
	color: var(--azul);
	transition: transform var(--rapido) var(--ease), color var(--rapido) var(--ease);
}

.indice__enlace:hover,
.indice__enlace:focus-visible {
	background: var(--azul);
	color: var(--blanco);
	outline: none;
}

.indice__enlace:hover .indice__orden,
.indice__enlace:focus-visible .indice__orden,
.indice__enlace:hover .indice__texto,
.indice__enlace:focus-visible .indice__texto {
	color: rgba(255, 255, 255, 0.8);
}

.indice__enlace:hover .indice__flecha,
.indice__enlace:focus-visible .indice__flecha {
	color: var(--blanco);
	transform: translateX(6px);
}

.indice__enlace:focus-visible {
	box-shadow: inset 0 0 0 3px var(--blanco);
}

@media (prefers-reduced-motion: reduce) {
	.indice__flecha {
		transition: color var(--rapido) var(--ease);
	}

	.indice__enlace:hover .indice__flecha,
	.indice__enlace:focus-visible .indice__flecha {
		transform: none;
	}
}

.reparto {
	display: grid;
	gap: var(--esp-xl) var(--esp-lg);
}

@media (min-width: 700px) {
	.reparto {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--esp-md);
		/* Cada tarjeta ocupa lo que ocupa; estiradas al mismo alto el
		   escalonado se perdía por abajo. */
		align-items: start;
	}

	/* El escalonado no es un adorno: rompe la lectura en fila de tres iguales
	   y obliga a mirar cada puerta por separado. */
	.reparto > :nth-child(2) {
		margin-top: var(--esp-xl);
	}

	.reparto > :nth-child(3) {
		margin-top: calc(var(--esp-xl) * 2);
	}
}

.tarjeta {
	padding: 0;
	background: transparent;
	border-radius: var(--radio);
}

/* Las fotos del catálogo vienen con proporciones distintas. Recortarlas a una
   sola relación es lo que mantiene la rejilla; sin esto se escalona sola. */
.tarjeta__foto {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--esp-md);
	background: var(--rejilla);
}

.tarjeta__foto picture,
.tarjeta__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 600ms var(--ease);
}

.tarjeta:hover .tarjeta__foto img {
	transform: scale(1.04);
}

.tarjeta__titulo {
	margin-top: 0;
	margin-bottom: var(--esp-xs);
	font-size: 1.375rem;
}

.tarjeta__texto {
	margin-bottom: 0;
	color: var(--gris-texto);
}

/* El título entero es la zona de clic: el subrayado sobra y ensucia. */
.tarjeta__titulo a {
	color: var(--tinta);
	text-decoration: none;
	background-image: linear-gradient(var(--azul), var(--azul));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 320ms var(--ease), color var(--rapido) var(--ease);
}

.tarjeta:hover .tarjeta__titulo a,
.tarjeta__titulo a:focus-visible {
	color: var(--azul);
	background-size: 100% 2px;
}

/* La foto de la sección de argumentos se queda arriba mientras se lee la
   lista. Estirarla a la altura completa de la columna la recortaba a un
   retrato de 0,58 y de una foto apaisada solo quedaba pared. */
.puntos__foto {
	align-self: start;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--rejilla);
}

@media (min-width: 900px) {
	.puntos__foto {
		position: sticky;
		top: var(--esp-lg);
	}
}

/* El encuadre va al centro: la foto de esta sección es vertical y los dos
   sujetos están centrados. Hubo aquí una apaisada con la persona en el tercio
   derecho que pedía `74% center`; si vuelve una así, el encuadre se ajusta a
   la foto, no al revés. */
.puntos__foto picture,
.puntos__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Punto: la separación la hace la línea, no un icono.
   Llevaba un check en círculo repetido en cada punto. Cinco iconos idénticos
   en columna no informan de nada —ninguno distingue a su punto del de al lado—
   y convierten el argumento principal de la portada en una lista de la compra.
   La línea ya marca dónde empieza cada uno y deja el peso en el titular. */
.punto {
	padding-block: var(--esp-md);
	border-top: var(--linea);
}

/* Sin foto al lado, la columna única dejaba media página vacía. */
@media (min-width: 800px) {
	.puntos--dos-columnas {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--esp-xl);
	}

	.puntos--dos-columnas .punto__texto {
		max-width: none;
	}
}

.punto + .punto {
	margin-top: 0;
}

.seccion--azul .punto {
	border-top-color: rgba(255, 255, 255, 0.3);
}

.punto__texto {
	margin: 0;
}

.punto__titulo {
	margin: 0 0 var(--esp-xs);
	font-size: var(--title);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Zócalo de cifras
   Va soldado al hero, sin aire entre medias: el primer scroll cae sobre el
   suelo de la portada y no sobre otra sección más. Antes eran cuatro celdas
   con borde sobre blanco y se leían como una tabla, no como argumentos.
   -------------------------------------------------------------------------- */

.zocalo {
	background: var(--azul-profundo);
	color: var(--blanco);
	padding-block: var(--esp-xl);
}

.zocalo__titulo {
	margin-bottom: var(--esp-lg);
	color: var(--blanco);
}

.zocalo__cifras {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--esp-lg) 0;
	margin: 0;
	max-width: none;
}

@media (min-width: 900px) {
	.zocalo__cifras {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
	}
}

/* Filetes finos entre cifras en vez de celdas cerradas. */
.zocalo__cifra {
	padding-inline: var(--esp-md);
}

.zocalo__cifra:nth-child(odd) {
	padding-left: 0;
}

@media (min-width: 900px) {
	.zocalo__cifra {
		border-left: 1px solid rgba(255, 255, 255, 0.22);
	}

	.zocalo__cifra:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.zocalo__cifra:nth-child(odd) {
		padding-left: var(--esp-md);
	}

	.zocalo__cifra:first-child {
		padding-left: 0;
	}
}

.zocalo__numero {
	display: block;
	margin: 0;
	font-size: clamp(2.75rem, 6.5vw, 5rem);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 0.92;
	letter-spacing: -0.035em;
	color: var(--blanco);
	font-variant-numeric: tabular-nums;
}

.zocalo__etiqueta {
	display: block;
	margin-top: var(--esp-sm);
	max-width: 22ch;
	font-size: var(--label);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

/* El único momento de movimiento de la página: las cifras suben al entrar en
   pantalla, escalonadas. Todo lo demás llega ya colocado. */
@media (prefers-reduced-motion: no-preference) {
	.zocalo__cifra {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 620ms var(--ease) var(--retardo, 0ms), transform 620ms var(--ease) var(--retardo, 0ms);
	}

	.zocalo--visible .zocalo__cifra {
		opacity: 1;
		transform: none;
	}
}

/* Cifras dentro de una sección normal (páginas interiores). */
.cifras {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--esp-lg) var(--esp-md);
	margin-block: var(--esp-lg);
	max-width: none;
}

@media (min-width: 900px) {
	.cifras {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cifra__numero {
	display: block;
	font-size: var(--cifra);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 0.92;
	letter-spacing: -0.035em;
	color: var(--azul);
	font-variant-numeric: tabular-nums;
}

.cifra__etiqueta {
	display: block;
	margin-top: var(--esp-sm);
	max-width: 22ch;
	font-size: var(--label);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gris-texto);
}

.seccion--azul .cifra__numero {
	color: var(--blanco);
}

.seccion--azul .cifra__etiqueta {
	color: var(--blanco);
}

/* --------------------------------------------------------------------------
   Proceso: hitos sobre una línea temporal
   -------------------------------------------------------------------------- */

.proceso {
	counter-reset: paso;
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: none;
	display: grid;
	gap: 0;
	border-top: var(--linea-tinta);
}

@media (min-width: 800px) {
	.proceso {
		grid-template-columns: repeat(2, 1fr);
	}

	.proceso__paso:nth-child(odd) {
		border-right: var(--linea);
	}
}

.proceso__paso {
	counter-increment: paso;
	position: relative;
	margin: 0;
	padding: var(--esp-md) var(--esp-md) var(--esp-lg) 64px;
	border-bottom: var(--linea);
}

.proceso__paso::before {
	content: counter(paso, decimal-leading-zero);
	position: absolute;
	left: var(--esp-md);
	top: var(--esp-md);
	font-size: var(--label);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--azul);
	font-variant-numeric: tabular-nums;
}

.proceso__titulo {
	margin: 0 0 var(--esp-xs);
	font-size: var(--title);
}

.proceso__texto {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Tabla
   -------------------------------------------------------------------------- */

.tabla {
	width: 100%;
	border-collapse: collapse;
	background: var(--blanco);
	border: var(--linea-tinta);
	font-variant-numeric: tabular-nums;
}

.tabla th,
.tabla td {
	padding: var(--esp-sm);
	text-align: left;
	border-bottom: var(--linea);
	border-right: var(--linea);
}

.tabla th:last-child,
.tabla td:last-child {
	border-right: 0;
}

.tabla thead th {
	background: var(--azul);
	color: var(--blanco);
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-right-color: rgba(255, 255, 255, 0.2);
}

.tabla tbody th {
	font-weight: 600;
	background: var(--papel);
}

.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td {
	border-bottom: 0;
}

.tabla-scroll {
	overflow-x: auto;
}

/* La letra pequeña de la tabla. Estuvo en una sección propia y se leía como un
   párrafo huérfano flotando entre dos bloques: el matiz de una cifra pertenece
   a la cifra. */
.tabla__intro {
	margin-bottom: var(--esp-md);
	max-width: 68ch;
}

.tabla__nota {
	margin-top: var(--esp-md);
	max-width: 68ch;
	color: var(--gris-texto);
}

.tabla__nota p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */

.faq {
	max-width: 76ch;
	border-top: var(--linea-tinta);
}

.faq__item {
	border-bottom: var(--linea);
}

.faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-sm);
	padding: var(--esp-md) 0;
	font-size: var(--title);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tinta);
	cursor: pointer;
	list-style: none;
}

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

.faq__pregunta::after {
	content: '';
	flex-shrink: 0;
	width: 14px;
	height: 2px;
	background: var(--tinta);
	box-shadow: 0 0 0 0 transparent;
	position: relative;
	transition: transform var(--rapido) var(--ease);
}

.faq__pregunta::before {
	content: '';
	position: absolute;
	right: 6px;
	width: 2px;
	height: 14px;
	background: var(--azul);
	transition: opacity var(--rapido) var(--ease);
}

.faq__item[open] .faq__pregunta::before {
	opacity: 0;
}

.faq__pregunta:hover {
	color: var(--azul);
}

.faq__respuesta {
	padding-bottom: var(--esp-md);
}

.faq__respuesta > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */

.formulario {
	display: grid;
	gap: var(--esp-md);
}

.campo {
	display: grid;
	gap: var(--esp-xs);
}

.campo__etiqueta {
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tinta);
}

.campo__control {
	width: 100%;
	padding: var(--esp-sm);
	background: var(--blanco);
	color: var(--tinta);
	border: var(--linea-tinta);
	border-radius: var(--radio-control);
	font-family: var(--fuente);
	font-size: 1rem;
	line-height: 1.4;
	transition: box-shadow var(--rapido) var(--ease);
}

.campo__control::placeholder {
	color: #8A8B80;
}

.campo__control:focus {
	outline: none;
	box-shadow: var(--anillo);
}

textarea.campo__control {
	min-height: 120px;
	resize: vertical;
}

.campo__error {
	font-size: var(--label);
	font-weight: 600;
	color: var(--rojo-error);
}

.campo__control[aria-invalid='true'] {
	border-color: var(--rojo-error);
	border-width: 2px;
}

.campo--consentimiento {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--esp-xs) 12px;
}

.campo--consentimiento input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--tinta);
}

.campo--consentimiento .campo__etiqueta {
	font-weight: 400;
	font-size: 0.875rem;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
	color: var(--gris-texto);
}

.campo--consentimiento .campo__error {
	grid-column: 1 / -1;
}

.campo--trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulario__aviso {
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gris-texto);
	max-width: none;
}

/* Celda con borde completo, no pestaña lateral: el estado lo lleva el fondo
   y el rótulo, que es como lo marca un impreso. */
.formulario__respuesta {
	padding: var(--esp-sm);
	border: var(--linea-tinta);
	background: var(--papel);
	font-weight: 600;
}

.formulario__respuesta--ok {
	background: var(--verde);
	color: var(--blanco);
}

.formulario__respuesta--error {
	border-color: var(--rojo-error);
	border-width: 2px;
	background: var(--blanco);
	color: #8C1D18;
}

/* El formulario sobre una banda azul lleva fondo propio. */
.seccion--azul .formulario,
.hero .formulario {
	background: var(--blanco);
	border: var(--linea-tinta);
	padding: var(--esp-md);
}

/* Dentro del formulario el fondo vuelve a ser blanco, así que el texto y
   los enlaces recuperan su color. Sin esto, el enlace a la política de
   privacidad quedaba blanco sobre blanco: invisible. */
.seccion--azul .formulario,
.hero .formulario,
.seccion--azul .formulario .campo__etiqueta,
.hero .formulario .campo__etiqueta {
	color: var(--tinta);
}

.seccion--azul .formulario a,
.hero .formulario a {
	color: var(--azul);
	text-decoration-color: var(--azul);
}

.seccion--azul .formulario a:hover,
.hero .formulario a:hover {
	text-decoration-color: var(--azul);
}

.seccion--azul .formulario .campo--consentimiento .campo__etiqueta,
.hero .formulario .campo--consentimiento .campo__etiqueta,
.seccion--azul .formulario .formulario__aviso,
.hero .formulario .formulario__aviso {
	color: var(--gris-texto);
}

@media (min-width: 768px) {
	.seccion--azul .formulario,
	.hero .formulario {
		padding: 32px;
	}
}

/* --------------------------------------------------------------------------
   Contenido editorial
   -------------------------------------------------------------------------- */

.contenido > * {
	max-width: var(--medida);
}

.contenido > .alignfull,
.contenido > figure,
.contenido > .wp-block-image {
	max-width: none;
}

.contenido img {
	border-radius: var(--radio);
}

.contenido figcaption {
	margin-top: var(--esp-xs);
	font-size: var(--label);
	color: var(--gris-texto);
}

/* La cita se separa por regla superior y escala, como en un impreso, no por
   un filete lateral de color. */
.contenido blockquote {
	margin: var(--esp-lg) 0;
	padding-top: var(--esp-md);
	border-top: 2px solid var(--tinta);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--tinta);
}

.contenido blockquote p:last-child {
	margin-bottom: 0;
}

.contenido blockquote cite {
	display: block;
	margin-top: var(--esp-sm);
	font-size: var(--label);
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-texto);
}

.contenido table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--esp-md);
	font-variant-numeric: tabular-nums;
}

.contenido th,
.contenido td {
	padding: 12px var(--esp-sm);
	border-bottom: var(--linea);
	text-align: left;
}

.contenido th {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.entradas {
	display: grid;
	gap: 0;
	border-top: var(--linea-tinta);
}

@media (min-width: 800px) {
	.entradas {
		grid-template-columns: repeat(2, 1fr);
	}

	.entradas > *:nth-child(odd) {
		border-right: var(--linea);
	}
}

.entrada {
	padding: var(--esp-md);
	border-bottom: var(--linea);
}

.entrada__imagen img {
	border-radius: var(--radio);
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

.entrada__titulo {
	margin: var(--esp-sm) 0 var(--esp-xs);
	font-size: var(--title);
}

.entrada__titulo a {
	text-decoration: none;
}

.entrada__titulo a:hover {
	text-decoration: underline;
	text-decoration-color: var(--azul);
	text-decoration-thickness: 3px;
}

.entrada__meta {
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gris-texto);
	font-variant-numeric: tabular-nums;
}

.entrada__extracto {
	margin-top: var(--esp-xs);
}

.vacio {
	padding: var(--esp-xl) 0;
	text-align: center;
}

.vacio p {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Migas y paginación
   -------------------------------------------------------------------------- */

.migas {
	padding-block: var(--esp-sm);
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gris-texto);
	border-bottom: var(--linea);
}

.migas a {
	color: var(--gris-texto);
	text-decoration: none;
}

.migas a:hover {
	color: var(--tinta);
}

.paginacion {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: var(--esp-xl);
	border: var(--linea-tinta);
	width: fit-content;
}

.paginacion .page-numbers {
	display: inline-block;
	padding: 12px 18px;
	border-right: var(--linea);
	text-decoration: none;
	color: var(--tinta);
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

.paginacion .page-numbers:last-child {
	border-right: 0;
}

.paginacion .page-numbers.current {
	background: var(--azul);
	color: var(--blanco);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.pie {
	padding-block: var(--esp-xl) var(--esp-lg);
	background: var(--tinta);
	color: var(--papel);
}

.pie a {
	color: var(--blanco);
	text-decoration-color: rgba(255, 255, 255, 0.4);
}

.pie a:hover {
	text-decoration-color: var(--blanco);
}

/* Bloque de contacto: cada dato en su línea y sin subrayado en reposo. Con
   subrayado, la dirección lo arrastraba a través del salto de línea y el
   pie parecía tener una raya suelta. Son tres enlaces en bloque, no enlaces
   dentro de un párrafo: se reconocen por lo que dicen. */
.pie__datos {
	display: grid;
	gap: var(--esp-xs);
	justify-items: start;
	font-style: normal;
	line-height: 1.45;
}

.pie__datos a {
	text-decoration: none;
}

.pie__datos a:hover,
.pie__datos a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: var(--blanco);
}

.pie__columnas {
	display: grid;
	gap: var(--esp-lg);
}

@media (min-width: 800px) {
	.pie__columnas {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pie {
	background: var(--azul-profundo);
}

.pie__titulo {
	margin: 0 0 var(--esp-sm);
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

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

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--esp-sm);
	margin-top: var(--esp-xl);
	padding-top: var(--esp-md);
	border-top: 1px solid rgba(247, 246, 242, 0.2);
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pie__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-md);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

/* --------------------------------------------------------------------------
   Botón de llamada (solo móvil)
   -------------------------------------------------------------------------- */

.llamar {
	display: none;
}

@media (max-width: 767px) {
	.llamar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--esp-xs);
		min-height: 56px;
		padding: 0 var(--esp-sm);
		background: var(--azul);
		color: var(--blanco);
		font-size: var(--label);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.llamar svg {
		width: 18px;
		height: 18px;
	}

	.pie {
		padding-bottom: calc(var(--esp-lg) + 56px);
	}
}

/* --------------------------------------------------------------------------
   Test de nivel
   -------------------------------------------------------------------------- */

.test {
	max-width: 42rem;
	margin-inline: auto;
	border: var(--linea-tinta);
	padding: var(--esp-md);
}

@media (min-width: 768px) {
	.test {
		padding: var(--esp-lg);
	}
}

.test__inicio {
	text-align: center;
}

.test__progreso {
	margin-bottom: var(--esp-lg);
}

.test__barra {
	height: 8px;
	background: var(--rejilla);
	overflow: hidden;
}

.test__barra span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--verde);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform var(--rapido) var(--ease);
}

.test__contador {
	margin: var(--esp-xs) 0 0;
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-texto);
	font-variant-numeric: tabular-nums;
}

.test__pregunta {
	border: 0;
	padding: 0;
	margin: 0;
}

.test__enunciado {
	display: block;
	padding: 0;
	margin-bottom: var(--esp-md);
	font-size: var(--title);
	font-weight: 600;
	line-height: 1.3;
	color: var(--tinta);
}

.test__opciones {
	display: grid;
	gap: 0;
	border-top: var(--linea);
}

.test__opcion {
	padding: var(--esp-sm);
	background: var(--blanco);
	border: 0;
	border-bottom: var(--linea);
	border-radius: var(--radio);
	font-family: var(--fuente);
	font-size: var(--body);
	text-align: left;
	color: var(--tinta);
	cursor: pointer;
	transition: background-color var(--rapido) var(--ease);
}

.test__opcion:hover {
	background: var(--verde);
}

.test__resultado {
	text-align: center;
}

.test__resultado:focus {
	outline: none;
}

.test__marcador {
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-texto);
	margin-bottom: var(--esp-xs);
	font-variant-numeric: tabular-nums;
}

.test__nivel {
	font-size: clamp(4rem, 12vw, 7rem);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--tinta);
	margin: 0;
}

.test__titulo {
	margin-top: var(--esp-xs);
}

.test__resultado > p {
	margin-inline: auto;
}

.test__captura {
	margin-top: var(--esp-xl);
	padding: var(--esp-md);
	background: var(--papel);
	border: var(--linea);
	text-align: left;
}

.test__captura h3 {
	margin-top: 0;
	margin-bottom: var(--esp-xs);
	font-size: var(--title);
}

.test__captura > p {
	margin-bottom: var(--esp-md);
	color: var(--gris-texto);
}

/* Pegada al revelado y con su mismo ancho: la captura es la consecuencia de
   lo que acaba de leer, no una sección nueva. Con los 56px de serie parecían
   dos bloques sin relación y el formulario se leía como el de contacto de
   cualquier página. Y metida hacia dentro con su propio filete, bajo una
   banda a sangre, parecía una tarjeta caída dentro de otra: la banda azul y
   el papel son las dos mitades del mismo zócalo. */
.test__captura {
	margin: 0 calc(var(--esp-md) * -1);
	border: 0;
}

@media (min-width: 768px) {
	.test__captura {
		margin: 0 calc(var(--esp-lg) * -1);
	}
}

.test__captura:focus {
	outline: none;
}

@media (min-width: 768px) {
	.test__captura {
		padding: var(--esp-lg);
	}
}

/* El pie vuelve al ancho de la caja: es una nota del test, no del zócalo. */
.test__aviso {
	padding-top: var(--esp-md);
}

.test__aviso {
	margin-top: var(--esp-md);
	font-size: var(--label);
	color: var(--gris-texto);
	margin-inline: auto;
}

/* La sección que va soldada al hero.

   El hero cierra con 76px y la sección abre con otros 76: entre la última
   línea del titular y la caja del test quedaban 152px de nada, y el botón de
   empezar caía por debajo del pliegue en un portátil. El hero ya ha cerrado
   el bloque; la sección que le sigue no tiene que volver a abrirlo. */
.seccion--tras-hero {
	padding-top: 0;
}

/* El revelado: el giro de la página.

   Hasta el resultado se habla de gramática; a partir de aquí, de quién paga.
   Es un cambio de tema, no un párrafo más, así que se pinta como lo que la
   web ya usa para cambiar de plano: una banda azul. Sale del acolchado de la
   caja del test a propósito —a sangre contra el filete de tinta— para que se
   lea como una franja y no como una tarjeta metida dentro de otra. */
.revelado {
	margin: var(--esp-xl) calc(var(--esp-md) * -1) 0;
	padding: var(--esp-md);
	background: var(--azul);
	color: var(--blanco);
}

@media (min-width: 768px) {
	.revelado {
		margin: var(--esp-xl) calc(var(--esp-lg) * -1) 0;
		padding: var(--esp-lg);
	}
}

.revelado__titulo {
	margin: 0 0 var(--esp-sm);
	font-size: var(--title);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--blanco);
}

.revelado p {
	margin: 0;
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.9);
}

/* La consecuencia, en blanco pleno y separada: es la frase que decide si la
   persona hace algo o cierra la pestaña. */
.revelado__giro {
	margin-top: var(--esp-md) !important;
	padding-top: var(--esp-md);
	border-top: 1px solid rgba(255, 255, 255, 0.28);
	font-weight: 600;
	color: var(--blanco) !important;
}

/* Una sola entrada authored en toda la página, y en el sitio donde importa:
   el revelado aparece detrás del resultado en vez de estar ya ahí. */
@media (prefers-reduced-motion: no-preference) {
	.revelado {
		animation: revelar 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
	}
}

@keyframes revelar {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

/* Etiqueta de campo opcional: la marca sin obligar a leer el paréntesis. */
.campo__opcional {
	margin-left: 6px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gris-texto);
}

/* La carta para la empresa.

   El producto de esta página. Se pinta en pantalla además de enviarse por
   correo porque la acción no puede depender de que el mensaje esquive el
   spam: aquí se copia y se pega sin salir. */
.carta__asunto {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--esp-xs);
	margin: 0 0 var(--esp-sm);
	font-weight: 600;
	color: var(--tinta);
}

.carta__clave {
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-texto);
}

/* Monoespaciada no: esto es una carta, no código. Va en la familia del sitio
   y con la medida de un correo real, para que se vea lo que se va a mandar. */
.carta__cuerpo {
	margin: 0;
	padding: var(--esp-md);
	max-height: 22rem;
	overflow: auto;
	background: var(--blanco);
	border: var(--linea);
	font-family: var(--fuente);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--tinta);
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.carta__cuerpo:focus-visible {
	outline: none;
	box-shadow: var(--anillo);
}

.carta__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-sm);
	margin-top: var(--esp-md);
}

.carta__eco {
	font-size: 0.9375rem;
	color: var(--gris-texto);
}

.carta__eco--ok {
	font-weight: 600;
	color: var(--azul);
}

.carta__nota {
	margin: var(--esp-md) 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--gris-texto);
}

/* --------------------------------------------------------------------------
   Ficha: idioma y especialidad
   --------------------------------------------------------------------------

   Las fichas se quedaron una generación por detrás de la portada. Medido a
   1440 px sobre /idiomas/ingles-para-empresas/: el hero repartía 285 px de
   titular contra 954 px de formulario —669 px de azul vacío—, la sección de
   argumento 829 px de texto contra 647 px de foto, la de beneficios 706 px
   contra una foto de 175 px, y el cierre repetía el mismo formulario de
   954 px al lado de 482 px de texto. Cuatro huecos muertos en una página.

   La causa no era el estilo: era que las dos columnas de cada sección no
   tenían ninguna relación de altura entre ellas. Lo que sigue reparte esa
   altura —el formulario baja, la columna de texto se estira— y sustituye la
   foto de relleno por composición.
   -------------------------------------------------------------------------- */

/* La columna del titular ocupa el alto de la del formulario y reparte su
   contenido: titular arriba, pruebas abajo. El hueco deja de acumularse al
   final y pasa a ser el aire entre los dos bloques. */
@media (min-width: 900px) {
	.hero .duo--igual {
		align-items: stretch;
	}

	.hero .duo--igual > .hero__columna {
		display: grid;
		align-content: space-between;
	}
}

/* Dos columnas: los cuatro campos cortos emparejados y el asunto entero. */
@media (min-width: 640px) {
	.formulario--ancho,
	.formulario--hero {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--esp-md);
	}

	.formulario--ancho > *,
	.formulario--hero > * {
		grid-column: 1 / -1;
	}

	.formulario--ancho > .campo--medio,
	.formulario--hero > .campo--medio {
		grid-column: span 1;
	}

	.formulario--hero {
		column-gap: var(--esp-sm);
	}
}

/* En el hero el formulario también respira menos por dentro. */
.hero .formulario--hero {
	padding: var(--esp-md);
}

/* El botón y la promesa van juntos: la promesa es la letra pequeña del botón,
   no un párrafo suelto debajo. */
.formulario__envio {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-sm) var(--esp-md);
}

.formulario__envio .formulario__aviso {
	margin: 0;
	max-width: 24ch;
}

/* --------------------------------------------------------------------------
   Franja del dato: la cifra que sostiene la ficha
   Soldada al hero, sin aire entre medias. Es una sola cifra con su frase, no
   una fila de estadísticas: lo que decide la compra en este negocio es que la
   formación sale a coste cero, y eso es un número concreto.
   -------------------------------------------------------------------------- */

.franja-dato {
	background: var(--azul-profundo);
	color: var(--blanco);
	padding-block: var(--esp-xl);
}

.franja-dato__interior {
	display: grid;
	gap: var(--esp-md);
}

@media (min-width: 800px) {
	.franja-dato__interior {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--esp-xl);
		align-items: center;
	}

	.franja-dato__texto {
		padding-left: var(--esp-xl);
		border-left: 1px solid rgba(255, 255, 255, 0.28);
	}
}

.franja-dato__cifra {
	margin: 0;
	font-size: clamp(3.5rem, 8vw, 6rem);
	font-weight: 800;
	font-stretch: 118%;
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--blanco);
	font-variant-numeric: tabular-nums;
}

.franja-dato__unidad {
	display: block;
	margin-top: var(--esp-sm);
	max-width: 18ch;
	font-size: var(--label);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.franja-dato__titulo {
	margin: 0 0 var(--esp-sm);
	color: var(--blanco);
	font-size: var(--title);
}

.franja-dato__texto p {
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	max-width: 62ch;
}

.franja-dato__texto p + p {
	margin-top: var(--esp-sm);
}

.franja-dato__accion {
	margin: var(--esp-md) 0 0;
}

/* --------------------------------------------------------------------------
   Modalidades de la ficha
   Dos celdas con la misma altura y el mismo peso: son alternativas, no una
   principal y una nota al pie.
   -------------------------------------------------------------------------- */

.modalidades {
	display: grid;
	gap: 0;
	border-top: var(--linea-tinta);
	border-bottom: var(--linea);
}

.modalidad {
	padding: var(--esp-md) 0;
}

.modalidad + .modalidad {
	border-top: var(--linea);
}

@media (min-width: 800px) {
	.modalidades {
		grid-template-columns: 1fr 1fr;
	}

	.modalidad {
		padding: var(--esp-lg) var(--esp-lg) var(--esp-lg) 0;
	}

	.modalidad + .modalidad {
		padding-left: var(--esp-lg);
		border-top: 0;
		border-left: var(--linea);
	}
}

.modalidad__etiqueta {
	margin: 0 0 var(--esp-xs);
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-texto);
}

.modalidad__titulo {
	margin: 0 0 var(--esp-sm);
	font-size: var(--title);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.modalidad__texto {
	margin: 0;
	color: var(--gris-texto);
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Otras fichas: el índice al pie de una ficha
   Reutiliza el índice del catálogo sin los números de orden: aquí la
   secuencia no informa de nada, solo son los demás idiomas.
   -------------------------------------------------------------------------- */

.otras__titulo {
	margin-bottom: var(--esp-md);
}

/* --------------------------------------------------------------------------
   Impresión
   -------------------------------------------------------------------------- */

@media print {
	.cabecera,
	.pie,
	.llamar,
	.formulario {
		display: none;
	}

	body {
		font-size: 11pt;
		color: #000;
	}
}