/**
 * Formulario de reserva de plaza como invitado.
 *
 * Es la conversión primaria del sitio (ACUERDO.md §1), así que se pinta como un
 * panel oscuro y cerrado: se despega de la página, se ve desde lejos y no
 * depende del tema que haya debajo. La columna del logotipo baja aquí como
 * FUSTE: una banda estriada a lo largo del canto izquierdo del panel. No es
 * adorno importado, es el propio símbolo de la marca haciendo de asta.
 *
 * REGLA DE CONTRASTE (WCAG 2.1 AA). Las combinaciones que se usan aquí y por qué:
 *
 *   #F3EFE6 sobre #141414 ....... 16,05 · texto corrido del panel
 *   #B07A47 sobre #141414 .......  5,02 · antetítulos, ayudas y filetes
 *   #F3EFE6 sobre #090909 ....... 17,35 · texto dentro de los campos
 *   #B07A47 sobre #090909 .......  5,42 · marcas de error y pistas del campo
 *   #090909 sobre #B07A47 .......  5,42 · botón en reposo
 *   #4A3425 sobre #F3EFE6 ....... 10,12 · botón al pasar por encima y aviso de éxito
 *   #7A5636 sobre #F3EFE6 .......  5,70 · texto secundario sobre beige
 *
 * Lo que NO aparece: #7A5636 ni #4A3425 sobre fondo oscuro (3,05 y 1,72, fallan),
 * y #B07A47 sobre beige (3,20) fuera de filetes, estriado e iconos —WCAG 1.4.11
 * pide 3:1 a un elemento gráfico, no 4,5:1—.
 *
 * Los errores no se marcan en rojo. No hay rojo en la identidad y, sobre todo,
 * el color no puede ser el único portador de la información: cada error lleva
 * delante la palabra «Error:», el campo se marca con `aria-invalid`, el resumen
 * de arriba enlaza con él y el refuerzo visual es de FORMA —canto grueso, icono
 * de alerta y borde claro— no de color.
 *
 * DOS CORRECCIONES DE CASCADA que explican por qué varios selectores llevan el
 * bloque delante:
 *
 * 1. GeneratePress emite en su CSS en línea
 *    `input[type="text"],…,textarea,select{color:var(--contrast);background-color:var(--base-2);border-color:var(--base)}`
 *    con especificidad (0,1,1). Una sola clase —(0,1,0)— PIERDE contra eso pase
 *    lo que pase con el orden de carga, así que los campos salían en gris claro
 *    sobre el panel oscuro y el marcador de posición en bronce quedaba a 3,20
 *    sobre casi blanco. Por eso los controles se escriben `.emp-invitado .emp-invitado__control`:
 *    (0,2,0) gana sin `!important` y sin depender de quién se encole antes.
 * 2. El tema hereda cuatro variables de contexto (`--emp-color-texto`, `-apoyo`,
 *    `-enlace`, `-filete`) para decidir el color seguro sobre el fondo que haya.
 *    Este panel es oscuro y las redeclara: así el enlace base del tema, el
 *    segundo anillo de foco y los pies de foto se recalculan solos y no hay que
 *    ganarle ninguna batalla de especificidad.
 */

.emp-invitado {
	--emp-negro: #090909;
	--emp-antracita: #141414;
	--emp-bronce: #B07A47;
	--emp-bronce-oscuro: #7A5636;
	--emp-marron: #4A3425;
	--emp-beige: #F3EFE6;

	/* El tema puede imponer sus familias; si no las define, se cae a una didona
	   de sistema para el titular y a la sans del propio tema para los datos.

	   Los nombres llevan `familia` a propósito: `--emp-texto` es un COLOR en el
	   sistema de marca del tema, y declararlo aquí como pila tipográfica dejaba
	   inválido el segundo anillo de foco —`box-shadow: 0 0 0 4px var(--emp-texto)`—
	   dentro de todo el plugin. Dos cosas distintas no pueden llamarse igual. */
	--emp-familia-titular: var( --wp--preset--font-family--titulares, "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif );
	--emp-familia-texto: var( --wp--preset--font-family--texto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif );

	margin-block: clamp( 2rem, 6vw, 4.5rem );
	font-family: var( --emp-familia-texto );
}

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

/* ------------------------------------------------------------------- Panel */

.emp-invitado__panel {
	/* Contexto de color del tema, redeclarado para fondo oscuro. Ver la nota 2
	   de la cabecera: sin esto, el enlace base y el anillo de foco heredan el
	   contexto beige de `:root` y caen a 3,05 sobre negro. */
	--emp-color-texto: var( --emp-beige );
	--emp-color-apoyo: var( --emp-bronce );
	--emp-color-enlace: var( --emp-bronce );
	--emp-color-filete: var( --emp-bronce );

	position: relative;
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp( 1.75rem, 5vw, 3.25rem );
	padding-left: clamp( 2.5rem, 6vw, 4.25rem );
	background-color: var( --emp-antracita );

	/* El color se declara junto al fondo, siempre. Un panel que fija fondo
	   oscuro y no fija color deja que cualquier texto sin clase propia herede el
	   #222222 de GeneratePress: 1,16 sobre antracita, invisible. */
	color: var( --emp-beige );

	/* Filete superior en bronce: es decoración, no texto, así que el 3,20 sobre
	   beige no aplica y sirve de firma visual sin robar protagonismo. */
	border-top: 3px solid var( --emp-bronce );
}

/**
 * El fuste.
 *
 * La columna del logotipo, de pie, a lo largo del canto del panel. Es
 * decoración pura —no porta ninguna información— y existe con guion o sin él:
 * el estriado es un degradado repetido, no una animación. Lo único que el
 * movimiento añade es que se levante de arriba abajo al entrar en pantalla.
 */
.emp-invitado .emp-invitado__fuste {
	/* Dos clases (0,2,0) a propósito: la primitiva declara la medida con un
	   selector de atributo (0,1,0) y `movimiento.css` se encola DESPUÉS de esta
	   hoja, así que un empate lo ganaría ella. Con 12 px caben dos estrías y el
	   fuste se lee como un filete doble; con 24 px y paso de 5 caben cinco y se
	   lee como lo que es. */
	--emp-estria-paso: 5px;

	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 1.5rem;
}

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

.emp-invitado__antetitulo {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --emp-bronce );
}

.emp-invitado__titulo {
	margin: 0 0 1rem;
	font-family: var( --emp-familia-titular );
	font-size: clamp( 1.6rem, 4.2vw, 2.4rem );
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --emp-beige );
}

.emp-invitado__entradilla {
	margin: 0 0 1.75rem;
	max-width: 38ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var( --emp-beige );
}

/**
 * Las tres garantías.
 *
 * Lo que decide venir a una reunión no es el formulario, es saber que venir no
 * cuesta nada y no compromete a nada. Va antes de los campos porque es la
 * objeción que hay que desactivar ANTES de pedir un teléfono.
 *
 * Los iconos son de tema, no de polaridad: `cuota` marca de qué se habla, y la
 * frase de al lado dice que no la hay. Van decorativos —`aria-hidden`— porque el
 * texto ya lo cuenta entero.
 */
.emp-invitado__garantias {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem 1.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

@media ( min-width: 40em ) {
	.emp-invitado__garantias {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.emp-invitado__garantia {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var( --emp-beige );
}

.emp-invitado__garantia .emp-icono {
	margin-top: 0.1rem;
	color: var( --emp-bronce );
}

/* ------------------------------------------------------------------ Avisos */

.emp-invitado__aviso {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
}

/* El foco aterriza aquí tras la redirección; el anillo lo dibuja el navegador
   y se refuerza para que no pase inadvertido en el panel oscuro. */
.emp-invitado__aviso:focus {
	outline: 2px solid var( --emp-beige );
	outline-offset: 4px;
}

/**
 * Confirmación.
 *
 * Celebración contenida: cambia de fondo, sube el icono a 32 px y nada más. Ni
 * confeti ni un verde que no existe en la identidad. Lo que de verdad tranquiliza
 * es el plazo y el mapa de lo que viene después, y eso es tipografía, no efecto.
 */
.emp-invitado__aviso--ok {
	/* Isla beige dentro del panel oscuro: el contexto vuelve al claro. */
	--emp-color-texto: var( --emp-marron );
	--emp-color-apoyo: var( --emp-bronce-oscuro );
	--emp-color-enlace: var( --emp-bronce-oscuro );
	--emp-color-filete: var( --emp-bronce );

	padding: clamp( 1.5rem, 4vw, 2.25rem );
	background-color: var( --emp-beige );
	color: var( --emp-marron );
	border-left: 4px solid var( --emp-bronce-oscuro );
}

.emp-invitado__aviso--ok:focus {
	outline-color: var( --emp-marron );
}

.emp-invitado__aviso--error {
	background-color: var( --emp-negro );
	color: var( --emp-beige );
	border-left: 4px solid var( --emp-bronce );
}

.emp-invitado__aviso p {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	line-height: 1.6;
}

.emp-invitado__aviso p:last-child {
	margin-bottom: 0;
}

.emp-invitado__aviso-titulo {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	font-family: var( --emp-familia-titular );
	font-size: 1.25rem;
	letter-spacing: 0.04em;
}

/* El icono de la confirmación es el único elemento que crece: 32 px de marca
   de «hecho» en bronce oscuro, 5,70 sobre beige, muy por encima del 3:1 que
   pide WCAG 1.4.11 a un elemento gráfico. */
.emp-invitado__aviso--ok .emp-invitado__aviso-titulo .emp-icono {
	color: var( --emp-bronce-oscuro );
}

.emp-invitado__aviso--error .emp-invitado__aviso-titulo .emp-icono {
	color: var( --emp-bronce );
}

.emp-invitado__aviso--ok .emp-invitado__aviso-nota {
	font-size: 0.875rem;
	color: var( --emp-bronce-oscuro );
}

.emp-invitado__aviso-lista {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
}

.emp-invitado__aviso-lista li {
	margin-bottom: 0.35rem;
	line-height: 1.55;
}

/**
 * (0,2,1) y no (0,1,1). El tema pinta los enlaces de sus bandas oscuras con un
 * selector de esa misma especificidad, y `marca.css` se encola DESPUÉS de esta
 * hoja: en un empate ganaba él, así que el color de estos enlaces dependía de
 * qué bloque hubiera elegido el editor para envolver el formulario. Con una
 * clase más, el componente decide su propio color en cualquier página.
 *
 * Beige y no bronce: la lista de errores es lo que hay que leer primero, y
 * 17,35 sobre negro es el contraste más alto de la paleta.
 */
.emp-invitado .emp-invitado__aviso-lista a {
	color: var( --emp-beige );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.emp-invitado .emp-invitado__aviso-lista a:hover,
.emp-invitado .emp-invitado__aviso-lista a:focus-visible {
	color: var( --emp-bronce );
}

/* ---------------------------------------------------- Qué viene después */

/**
 * Los cinco pasos del alta, en vertical y con el estriado de eje.
 *
 * Solo aparecen DESPUÉS de enviar, y ese es todo el argumento: mientras se
 * rellena el formulario, cinco pasos por delante intimidan; una vez enviado, son
 * el mapa que dice «esto era el 01 y no te compromete a los otros cuatro».
 *
 * El eje es la columna otra vez, ahora de arriba abajo, como se levanta una
 * columna de verdad. El paso en curso se marca con `aria-current="step"` y con
 * una etiqueta escrita: quien no distinga el matiz de color lo lee igual.
 */
.emp-invitado__pasos {
	position: relative;
	padding-left: 2.5rem;
}

.emp-invitado__pasos-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-invitado__pasos-titulo {
	margin: 1.75rem 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --emp-bronce-oscuro );
}

/* Mismo motivo que el fuste para las dos clases: hay que ganar al selector de
   atributo de la primitiva, que se encola después. */
.emp-invitado .emp-invitado__pasos-eje {
	--emp-estria-paso: 5px;

	position: absolute;
	inset-block: 0.35rem;
	inset-inline-start: 0;
	inline-size: 1rem;
}

.emp-invitado__paso {
	position: relative;
	margin-bottom: 0.7rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var( --emp-bronce-oscuro );
}

.emp-invitado__paso:last-child {
	margin-bottom: 0;
}

.emp-invitado__paso-numero {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* El paso en curso: marrón (10,12) frente al bronce oscuro (5,70) de los demás.
   La diferencia de peso y la etiqueta «Estás aquí» hacen el trabajo; el color
   solo acompaña. */
.emp-invitado__paso[aria-current="step"] {
	font-weight: 700;
	color: var( --emp-marron );
}

.emp-invitado__paso-aqui {
	margin-left: 0.6rem;
	padding: 0.1rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --emp-beige );
	background-color: var( --emp-marron );
}

/* ------------------------------------------------------------------ Campos */

.emp-invitado__leyenda {
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	color: var( --emp-bronce );
}

.emp-invitado__formulario {
	margin: 0;
}

.emp-invitado__campos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

/* Sin `min-width: 0` una celda de rejilla no baja de su contenido mínimo, y un
   correo largo escrito de un tirón desbordaría la columna. */
.emp-invitado__campo {
	min-width: 0;
}

@media ( min-width: 40em ) {
	.emp-invitado__campos {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.emp-invitado__campo--completo {
		grid-column: 1 / -1;
	}
}

.emp-invitado__etiqueta {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --emp-beige );
}

.emp-invitado__obligatorio {
	color: var( --emp-bronce );
}

.emp-invitado__ayuda {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --emp-bronce );
}

/* (0,2,0) para ganar al (0,1,1) de GeneratePress. Ver la nota 1 de la cabecera:
   con una sola clase, estos campos salían en gris claro sobre el panel oscuro. */
.emp-invitado .emp-invitado__control {
	display: block;
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var( --emp-beige );
	background-color: var( --emp-negro );

	/* El borde es el único límite visible del campo, así que va en bronce claro
	   (5,02 sobre antracita) y no en bronce oscuro, que se queda en 3,05. */
	border: 1px solid var( --emp-bronce );
	border-radius: 0;
	appearance: none;
}

.emp-invitado__control--area {
	min-height: 8rem;
	resize: vertical;
}

.emp-invitado .emp-invitado__control::placeholder {
	color: var( --emp-bronce );
	opacity: 1;
}

.emp-invitado .emp-invitado__control:hover {
	border-color: var( --emp-beige );
}

.emp-invitado .emp-invitado__control:focus-visible {
	outline: 2px solid var( --emp-beige );
	outline-offset: 2px;
	border-color: var( --emp-beige );
}

/**
 * Campo con error, sin una gota de rojo.
 *
 * Tres refuerzos que no son color: canto izquierdo de 4 px, borde completo en
 * beige —el campo pasa a ser el más claro de la columna, se localiza de un
 * vistazo— y el icono de alerta delante del mensaje. El color, además, sería
 * inútil aquí: quien no distingue rojo de verde vería exactamente lo mismo.
 */
.emp-invitado__campo--fallido .emp-invitado__control,
.emp-invitado__consentimiento--fallido {
	border-color: var( --emp-beige );
	border-left-width: 4px;
	border-left-style: solid;
}

.emp-invitado__error {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --emp-beige );
}

.emp-invitado__error .emp-icono {
	color: var( --emp-bronce );
}

.emp-invitado__error-marca {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --emp-bronce );
}

/* ---------------------------------------------------------- Consentimiento */

.emp-invitado__consentimiento {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 0.75rem;
	align-items: start;
	margin-top: 1.75rem;
	padding: 1rem 1.25rem;
	background-color: var( --emp-negro );
}

.emp-invitado__consentimiento input[type="checkbox"] {
	width: 1.35rem;
	height: 1.35rem;
	margin: 0.1rem 0 0;
	accent-color: var( --emp-bronce );
}

.emp-invitado__consentimiento input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --emp-beige );
	outline-offset: 2px;
}

.emp-invitado__consentimiento label {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --emp-beige );
}

/* (0,2,1) por el mismo motivo que la lista de errores: que el color no dependa
   del bloque que envuelva al formulario. */
.emp-invitado .emp-invitado__consentimiento a {
	color: var( --emp-bronce );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.emp-invitado .emp-invitado__consentimiento a:hover,
.emp-invitado .emp-invitado__consentimiento a:focus-visible {
	color: var( --emp-beige );
}

.emp-invitado__consentimiento .emp-invitado__error {
	grid-column: 2;
}

/* ----------------------------------------------------------------- Señuelo */

/* Fuera de la vista pero dentro del documento: `display: none` es lo primero que
   descarta un bot, y una posición absoluta de un píxel, no. Sigue siendo legible
   para un lector de pantalla —por eso su etiqueta dice explícitamente que hay
   que dejarlo vacío— y queda fuera del orden de tabulación. */
.emp-invitado__trampa {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Acciones */

.emp-invitado__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var( --emp-bronce-oscuro );
}

.emp-invitado__enviar {
	display: inline-flex;
	gap: 0.7rem;
	align-items: center;
	padding: 1rem 2.25rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --emp-negro );
	background-color: var( --emp-bronce );
	border: 2px solid var( --emp-bronce );
	border-radius: 0;
	cursor: pointer;
}

/* La inversión a beige mantiene AA (10,12). Oscurecer el bronce, que sería lo
   intuitivo, dejaría el texto negro en 3,05: por eso el hover aclara. */
.emp-invitado__enviar:hover,
.emp-invitado__enviar:focus-visible {
	color: var( --emp-marron );
	background-color: var( --emp-beige );
	border-color: var( --emp-beige );
}

.emp-invitado__enviar:focus-visible {
	outline: 2px solid var( --emp-bronce );
	outline-offset: 3px;
}

/* La flecha avanza un pelo al apuntar el botón. Es `transform`, que no recalcula
   maquetación, y la transición la pone `.emp-transicion` del sistema. */
.emp-invitado__enviar:hover .emp-icono,
.emp-invitado__enviar:focus-visible .emp-icono {
	transform: translateX( 3px );
}

.emp-invitado__compromiso {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	color: var( --emp-bronce );
}

/* Modo de alto contraste de Windows: los fondos desaparecen y el botón se
   quedaría sin límites si el borde no fuera explícito. */
@media ( forced-colors: active ) {
	.emp-invitado .emp-invitado__control,
	.emp-invitado__enviar {
		border: 1px solid ButtonBorder;
	}

	.emp-invitado__aviso {
		border: 1px solid CanvasText;
	}

	/* El estriado es un degradado y en este modo desaparece: el fuste dejaría un
	   hueco mudo. Se sustituye por una línea de sistema, que sí se pinta. */
	.emp-invitado__fuste,
	.emp-invitado__pasos-eje {
		border-left: 1px solid CanvasText;
	}
}