/*
 * Isla Holbox — estilos del comprador (buscador, gracias y boleto).
 *
 * CERO LLAMADAS FUERA. Ni una @import, ni una tipografía remota, ni un icono
 * de terceros: la pila de fuentes es la del sistema y los pocos adornos son
 * formas CSS. El coste asumido es que el boleto no lleva tipografía de marca;
 * a cambio pinta al instante en el muelle con media raya de señal, que es
 * donde de verdad se usa.
 *
 * Las medidas van en rem y los colores en variables para que el tema pueda
 * redefinirlas sin tocar este archivo.
 */

.ihb,
.ihb-pase {
	/*
	 * PALETA OFICIAL — manual de identidad de Express Travel Holbox.
	 *
	 * Estos cinco valores no son una lectura a ojo de una captura: son los
	 * `fill` que trae el SVG del logotipo y las muestras del manual leídas
	 * píxel a píxel. Antes aquí había una paleta sacada del sitio en
	 * producción, que se le parecía pero no era: el azul estaba a un dígito
	 * (#07668c en vez de #08668d) y el navy y el oro directamente no eran los
	 * de la marca.
	 */

	/*
	 * Nombres antiguos, mantenidos como alias apuntando ya al color correcto.
	 * Están usados en cientos de sitios del plugin y renombrarlos todos de
	 * madrugada es la clase de cambio que rompe algo lejano sin que se note.
	 */

	/*
	 * Superficies. No salen del manual —un manual de marca no baja al detalle
	 * de un formulario— pero sí se derivan de él: `--ihb-arena` es el sol del
	 * logo rebajado sobre blanco, no un beige cualquiera. Tiene que ser pálido
	 * porque es el fondo del buscador: un formulario sobre dorado saturado se
	 * lee mal justo donde no puede leerse mal.
	 */


	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--ihb-tinta);
	line-height: 1.5;
	box-sizing: border-box;
}

.ihb *,
.ihb *::before,
.ihb *::after,
.ihb-pase *,
.ihb-pase *::before,
.ihb-pase *::after {
	box-sizing: inherit;
}

/* ─────────────────────────── Piezas comunes ─────────────────────────── */

.ihb__titulo,
.ihb__subtitulo {
	margin: 0 0 0.75rem;
	line-height: 1.2;
}

/*
 * ═══════════════════════ EL SISTEMA: cinco piezas ═══════════════════════
 *
 * Fichas, círculos, botones, chips y segmentados. Todo lo que se ve en el
 * sitio es una de estas cinco cosas con un color de zona encima, y ANTES no
 * era así: había seis radios distintos para «una caja» (.5, .55, .6, .7, .75
 * y 1 rem), cinco alturas de pastilla, dos definiciones de `.ihb-boton` que
 * no coincidían y círculos de 1,15, 1,35, 1,75, 2,25 y 2,75 rem. Cada uno
 * era razonable en su sitio y juntos eran ruido: el cliente lo llamó
 * «discrepancias y fallos estéticos», y pidió «una unidad concreta de CSS
 * reutilizable por zona».
 *
 * La regla: la FORMA la da la pieza (radio, borde, alto, relleno); el COLOR
 * lo da la zona con `--ihb-acento` (la naviera, el huso, la marca). Un
 * componente añade la pieza a su clase propia —`ihb-ficha ihb-ruta`— y en su
 * CSS sólo queda lo que es suyo. Las medidas son variables en `:root` para
 * que la barra y el pie, que viven fuera de `.ihb`, usen las mismas.
 */
:root {
	/*
	 * LA PALETA VIVE EN :root, no en `.ihb`: la barra y el pie del lienzo están
	 * fuera de `.ihb`, y un botón del sistema pintado allí leía `var(--ihb-sol)`
	 * sin valor — medido: «Traslado privado» salía a 2,65:1. Las variables
	 * heredan a todo el documento; la tipografía y el color base siguen en `.ihb`.
	 */
	--ihb-marino: #011c40;      /* azul marino — el cuerpo de la van */
	--ihb-noche: #011126;       /* azul noche, casi negro */
	--ihb-mar: #08668d;         /* azul mar */
	--ihb-sol: #f2c879;         /* arena del manual — el sol del logo */
	--ihb-atardecer: #da8842;   /* naranja atardecer */
	/* El atardecer como TEXTO sobre blanco: el de marca da 2,8:1 y no llega ni
	   para cifras grandes; éste, 5,4:1, y sigue siendo naranja. */
	--ihb-atardecer-tinta: #a8531a;
	--ihb-mar-oscuro: var(--ihb-marino);
	--ihb-oro: var(--ihb-sol);
	--ihb-oro-oscuro: var(--ihb-atardecer);
	--ihb-arena: #f3e2c3;
	--ihb-crema: #fffaf0;
	--ihb-tinta: #011c40;
	/* Más oscura que el gris de oficina (#4b5563): 9:1 sobre blanco, 8,6:1
	   sobre crema y 6,9:1 sobre arena. Con el peso 400 de verdad (ver el
	   cuerpo en lienzo.css) es lo que hace que el texto de apoyo no se pierda. */
	--ihb-tinta-suave: #3d4a5c;
	--ihb-papel: #ffffff;
	/*
	 * SUPERFICIES, medidas contra el crema de la página (#fffaf0).
	 *
	 * La línea gris de siempre (#e5e7eb) daba 1,19:1 contra el crema: las
	 * tarjetas no tenían borde a efectos prácticos, y el cliente lo dijo con
	 * sus palabras, «algunos elementos se pierden». Ésta es cálida —del lado
	 * de la arena, no del gris de oficina— y llega a 1,9:1; con la sombra de
	 * ficha, la caja se ve sin necesitar un borde negro. La arena pasa de
	 * 1,15:1 a 1,24:1 y sigue dando 5,7:1 al texto suave que va encima.
	 */
	--ihb-linea: #c4bba6;
	--ihb-sombra-ficha: 0 1px 2px rgba(1, 28, 64, 0.06), 0 6px 16px rgba(1, 28, 64, 0.07);
	--ihb-alerta: #a3320f;
	--ihb-ok: #17683f;

	--ihb-radio-ficha: 0.75rem;        /* fichas, cajas, campos grandes */
	--ihb-radio-ficha-chica: 0.6rem;   /* fichas de una línea: reloj, salida, resumen */
	--ihb-radio-caja: 1rem;            /* modales */
	--ihb-radio-pastilla: 999px;       /* botones, chips, segmentados */
	--ihb-acento-grosor: 4px;          /* la franja de color de una ficha */

	--ihb-boton-alto: 3rem;            /* acción principal: 48 px */
	--ihb-boton-alto-medio: 2.5rem;    /* acción de apoyo: 40 px */
	--ihb-boton-alto-chico: 2.25rem;   /* pastilla auxiliar: 36 px */

	--ihb-circulo-s: 1.25rem;          /* el icono dentro de una pastilla */
	--ihb-circulo-m: 1.75rem;          /* el «?» */
	--ihb-circulo-l: 2.25rem;          /* la ✕ */
	--ihb-circulo-xl: 2.75rem;         /* el botón de menú */

	/* MOVIMIENTO: tres tiempos y una curva, para todo el sitio. Rápido para
	   el color de un botón, medio para lo que aparece, lento para lo que se
	   desplaza. Una sola curva —suave al entrar, suave al salir— para que
	   todo se mueva con el mismo carácter. */
	--ihb-t-rapida: 160ms;
	--ihb-t-media: 260ms;
	--ihb-t-lenta: 420ms;
	--ihb-curva: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ── FICHA: la caja. Borde fino, radio de ficha, fondo papel. ──
 * `--acento` le pone la franja de color de la zona a la izquierda; `--chica`
 * es la de una línea; `--arena` la de fondo cálido (formularios, avisos). */
.ihb-ficha {
	border: 1px solid var(--ihb-linea, #c4bba6);
	border-radius: var(--ihb-radio-ficha);
	background: var(--ihb-papel, #fff);
	box-shadow: var(--ihb-sombra-ficha);
}

.ihb-ficha--chica {
	border-radius: var(--ihb-radio-ficha-chica);
}

.ihb-ficha--arena {
	background: var(--ihb-arena, #fdf3e3);
}

.ihb-ficha--acento {
	border-left: var(--ihb-acento-grosor) solid var(--ihb-acento, var(--ihb-mar, #08668d));
}

/* ── BOTÓN: siempre pastilla. Sólido por defecto; los modificadores son
 * el tamaño y el tono. Ancho automático: `--ancho` lo estira, `--ancho-movil`
 * sólo en teléfono, que es donde un botón de acción va a todo lo ancho. ── */
.ihb-boton {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: auto;
	min-height: var(--ihb-boton-alto);
	margin: 0;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--ihb-mar);
	border-radius: var(--ihb-radio-pastilla);
	background: var(--ihb-mar);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ihb-boton:hover,
.ihb-boton:focus {
	background: var(--ihb-marino);
	border-color: var(--ihb-marino);
	color: #fff;
}

.ihb-boton:focus-visible {
	outline: 3px solid var(--ihb-tinta);
	outline-offset: 2px;
}

.ihb-boton[disabled],
.ihb-boton[aria-disabled="true"] {
	/* 0,7 y no 0,6: con 0,6 el rótulo del botón apagado bajaba de 3:1. */
	opacity: 0.7;
	cursor: progress;
}

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

@media (max-width: 40rem) {
	.ihb-boton--ancho-movil {
		width: 100%;
	}
}

.ihb-boton--medio {
	min-height: var(--ihb-boton-alto-medio);
	padding: 0.45rem 1rem;
	font-size: 0.875rem;
}

.ihb-boton--chico {
	min-height: var(--ihb-boton-alto-chico);
	padding: 0.35rem 0.85rem;
	font-size: 0.8125rem;
}

/* Fantasma: sólo el contorno. Es la acción de apoyo, la que no compite. */
.ihb-boton--fantasma {
	background: transparent;
	color: var(--ihb-mar);
}

.ihb-boton--fantasma:hover,
.ihb-boton--fantasma:focus {
	background: var(--ihb-mar);
	border-color: var(--ihb-mar);
	color: #fff;
}

/* Suave: papel y borde gris. Para los pop ups de información. */
.ihb-boton--suave {
	background: var(--ihb-papel);
	border-color: var(--ihb-linea);
	color: var(--ihb-mar);
}

.ihb-boton--suave:hover,
.ihb-boton--suave:focus {
	background: var(--ihb-papel);
	border-color: var(--ihb-mar);
	color: var(--ihb-mar);
}

/* Sol: el segundo servicio, sobre el marino de la barra. */
.ihb-boton--sol {
	background: var(--ihb-sol);
	border-color: var(--ihb-sol);
	color: var(--ihb-marino);
}

.ihb-boton--sol:hover,
.ihb-boton--sol:focus {
	background: #fff;
	border-color: #fff;
	color: var(--ihb-marino);
}

/* Acento: el color de la zona (la naviera en el ferry). */
.ihb-boton--acento {
	background: var(--ihb-acento, var(--ihb-mar));
	border-color: var(--ihb-acento, var(--ihb-mar));
}

/* ── CÍRCULO: un control redondo con un signo dentro. ── */
.ihb-circulo {
	--ihb-circulo: var(--ihb-circulo-l);
	/* Explícito: un `summary` no hereda el border-box de `.ihb *` y el «?» salía
	   con 2 px de más. La medida de un círculo es la medida, sin sorpresas. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--ihb-circulo);
	height: var(--ihb-circulo);
	min-height: var(--ihb-circulo);
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: var(--ihb-arena, #fdf3e3);
	color: var(--ihb-marino, #011c40);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.ihb-circulo--s { --ihb-circulo: var(--ihb-circulo-s); font-size: 0.8rem; }
.ihb-circulo--m { --ihb-circulo: var(--ihb-circulo-m); font-size: 0.9375rem; }
.ihb-circulo--l { --ihb-circulo: var(--ihb-circulo-l); font-size: 1.5rem; }
.ihb-circulo--xl { --ihb-circulo: var(--ihb-circulo-xl); font-size: 1.5rem; }

.ihb-circulo--mar {
	background: var(--ihb-mar, #08668d);
	color: #fff;
}

.ihb-circulo--fantasma {
	background: var(--ihb-papel, #fff);
	border-color: var(--ihb-mar, #08668d);
	color: var(--ihb-mar, #08668d);
}

.ihb-circulo--transparente {
	background: transparent;
	color: #fff;
}

.ihb-circulo:hover,
.ihb-circulo:focus {
	background: var(--ihb-sol, #f2c879);
	color: var(--ihb-marino, #011c40);
}

.ihb-circulo:focus-visible {
	outline: 3px solid var(--ihb-marino, #011c40);
	outline-offset: 2px;
}

/* ── CHIP: una etiqueta. Pastilla pequeña, sin sombra. ── */
.ihb-chip {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border: 1px solid transparent;
	border-radius: var(--ihb-radio-pastilla);
	background: var(--ihb-arena, #fdf3e3);
	color: var(--ihb-marino, #011c40);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.ihb-chip--linea { border-color: var(--ihb-linea, #e5e7eb); color: var(--ihb-tinta-suave, #3d4a5c); }
.ihb-chip--atardecer { border-color: var(--ihb-atardecer, #da8842); }
.ihb-chip--mar { border-color: var(--ihb-mar, #08668d); }
/* El chip que toma el color de la zona (el huso del paradero). */
.ihb-chip--acento { border-color: var(--ihb-acento, var(--ihb-linea, #e5e7eb)); }

/* Los enlaces de texto dentro de un párrafo: 24 px de objetivo táctil. Antes
   lo ponía una regla del lienzo sobre TODOS los enlaces; ahora esa regla deja
   en paz a lo nuestro, así que lo nuestro lo dice aquí. */
.ihb p > a:not([class*="ihb-boton"]) {
	display: inline-block;
	padding: 0.25rem 0;
}

/* ── SEGMENTADO: un carril y una PÍLDORA que se desliza bajo la opción activa. ──
 *
 * Viene del «Menú Píldora» del cliente (codepen.io/Kanzado/pen/yyegwXP), que
 * pidió poner en lugar del grupo de pastillas: un carril claro, una píldora
 * de color que se DESLIZA con rebote elástico hasta la opción elegida, y las
 * opciones que se reparten el carril 75/25 —la activa crece y enseña su
 * texto; la inactiva se pliega a su icono (la flecha, el logotipo)—.
 *
 * La geometría va toda en porcentajes y la calcula el CSS: con `--ihb-seg-n`
 * opciones, la inactiva mide (100 − 75) / (n − 1). Así la píldora cae en su
 * sitio SIN guion (la primera opción es la activa al pintar) y sigue en su
 * sitio al girar el teléfono, sin escuchar `resize`. El guion sólo ANIMA el
 * cambio (`iniciarSegmentados`); sin él, o con «menos movimiento», las
 * transiciones de aquí mueven la píldora con la curva de la casa.
 *
 * `overflow: hidden` en el carril recorta el rebote (la píldora se pasa un
 * 18 % y vuelve) y el texto plegado. Por eso el anillo de foco va POR DENTRO
 * (`outline-offset` negativo): fuera del botón lo recortaría el carril.
 */
.ihb-segmentado {
	--ihb-seg-n: 2;
	--ihb-seg-activa: 75%;
	--ihb-seg-inactiva: calc((100% - var(--ihb-seg-activa)) / max(1, var(--ihb-seg-n) - 1));
	position: relative;
	isolation: isolate;
	display: flex;
	width: 100%;
	padding: 0;
	border: 1px solid var(--ihb-linea, #c4bba6);
	border-radius: var(--ihb-radio-pastilla);
	background: var(--ihb-papel, #fff);
	box-shadow: var(--ihb-sombra-ficha);
	overflow: hidden;
}

.ihb-segmentado__pildora {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	/* La posición es una variable que pone el guion; aquí se vuelve `left`. */
	left: calc(var(--ihb-seg-inactiva) * var(--ihb-seg-indice, 0));
	width: var(--ihb-seg-activa);
	border-radius: var(--ihb-radio-pastilla);
	background: var(--ihb-seg-pildora, var(--ihb-acento, var(--ihb-mar, #08668d)));
	pointer-events: none;
	transition:
		background-color var(--ihb-t-media) var(--ihb-curva),
		left var(--ihb-t-lenta) var(--ihb-curva),
		width var(--ihb-t-lenta) var(--ihb-curva);
}

/* Con guion, la píldora la mueve la coreografía elástica; la transición de
   posición estorbaría (acabaría antes y a otro ritmo). */
.ihb-segmentado--vivo .ihb-segmentado__pildora {
	transition: background-color var(--ihb-t-media) var(--ihb-curva);
}

.ihb-segmentado__opcion {
	flex: 0 0 var(--ihb-seg-inactiva);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: auto;
	min-height: calc(var(--ihb-boton-alto) - 2px);
	margin: 0;
	padding: 0 0.75rem;
	border: 0;
	border-radius: var(--ihb-radio-pastilla);
	background: transparent;
	color: var(--ihb-tinta, #011c40);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	transition:
		color var(--ihb-t-rapida) var(--ihb-curva),
		background-color 0s linear 0s,
		flex-basis var(--ihb-t-lenta) var(--ihb-curva);
}

.ihb-segmentado--vivo .ihb-segmentado__opcion {
	transition:
		color var(--ihb-t-rapida) var(--ihb-curva),
		background-color 0s linear 0s;
}

.ihb-segmentado__opcion:hover {
	color: var(--ihb-mar, #08668d);
}

/* La opción activa pinta además SU PROPIO fondo, pero 620 ms después de
   serlo, cuando la píldora ya ha llegado y rebotado: así el color final no
   depende de que la píldora caiga en el píxel exacto, y quien audite el
   contraste —que mira el fondo del botón, no el de una hermana absoluta— ve
   blanco sobre azul y no blanco sobre blanco. Al dejar de ser activa, el
   fondo se va en el acto y vuelve a mandar la píldora. */
.ihb-segmentado__opcion.is-activa,
.ihb-segmentado__opcion.is-activo,
.ihb-segmentado__opcion[aria-selected="true"] {
	flex-basis: var(--ihb-seg-activa);
	color: #fff;
	background-color: var(--ihb-seg-pildora, var(--ihb-acento, var(--ihb-mar, #08668d)));
	transition-delay: 0s, 0.62s, 0s;
}

.ihb-segmentado__opcion:focus-visible {
	outline: 3px solid var(--ihb-tinta, #011c40);
	outline-offset: -4px;
}

.ihb-segmentado__opcion[aria-selected="true"]:focus-visible {
	outline-color: #fff;
}

/* El texto se pliega con la opción: ancho, opacidad y un empujón de 10 px,
   como en el original. `visibility` llega con retraso para que el texto
   plegado no cuente como recortado; el nombre accesible va en `aria-label`. */
.ihb-segmentado__texto {
	max-width: 0;
	padding: 0;
	opacity: 0;
	transform: translateX(-10px);
	visibility: hidden;
	overflow: hidden;
	transition:
		max-width var(--ihb-t-media) var(--ihb-curva),
		padding var(--ihb-t-media) var(--ihb-curva),
		opacity var(--ihb-t-media) var(--ihb-curva),
		transform var(--ihb-t-media) var(--ihb-curva),
		visibility 0s linear var(--ihb-t-media);
}

.ihb-segmentado__opcion[aria-selected="true"] .ihb-segmentado__texto {
	max-width: 16rem;
	padding: 0 0.3rem;
	opacity: 1;
	transform: none;
	visibility: visible;
	transition-delay: 0s;
}

.ihb-segmentado__icono {
	flex: none;
}

/* La flecha: dos bordes girados, del color del texto (blanca sobre la píldora).
   El empujón de 2 px centra a ojo la punta, que queda a un lado de su caja. */
.ihb-segmentado__flecha {
	width: 0.7rem;
	height: 0.7rem;
	border: solid currentColor;
	border-width: 0 3px 3px 0;
	transform: translateX(-2px) rotate(-45deg);
	transition: border-color var(--ihb-t-rapida) var(--ihb-curva);
}

.ihb-segmentado__flecha--izq {
	transform: translateX(2px) rotate(135deg);
}

.ihb-aviso {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--ihb-alerta);
	background: var(--ihb-arena);
	color: var(--ihb-tinta);
}

/* ──────────────────────────── 1. Buscador ───────────────────────────── */

/*
 * DOS COLUMNAS YA EN EL MÓVIL, y esto es lo que hace que el buscador quepa en
 * una pantalla pequeña.
 *
 * Los cuatro campos apilados medían 466 px, y con el título y el botón el
 * formulario terminaba en el píxel 662 de una pantalla de 640: el botón «Ver
 * salidas» nacía fuera de la vista. Emparejados —de dónde / a dónde, y luego
 * cuándo / cuántos— ocupan la mitad de alto y además se leen mejor, porque son
 * dos preguntas de dos partes y no cuatro preguntas sueltas.
 *
 * El orden del HTML ya viene bien para esto (origen, destino, fecha, pasajes),
 * así que la rejilla no reordena nada: lo que ve el ojo y lo que lee un lector
 * de pantalla siguen coincidiendo.
 */
.ihb-buscador {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	padding: 0.9rem;
}

/* El botón cruza las dos columnas: es una acción sobre todo el formulario, no
   sobre la última pregunta. */
.ihb-buscador > .ihb-boton {
	grid-column: 1 / -1;
}

.ihb-buscador__campo {
	min-width: 0;
}

.ihb-buscador__campo label,
.ihb-comprador__campo label {
	color: var(--ihb-tinta, #011c40);
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* ───────────── La salida elegida y el segundo paso ─────────────
 *
 * Elegir una hora es una decisión; pagar es la siguiente. La elegida se queda
 * marcada para que, al bajar al formulario, siga viéndose QUÉ se está pagando
 * sin volver arriba. El segundo paso entra con un pequeño deslizamiento para
 * que se note que ha aparecido algo nuevo —una lista que crece de golpe se
 * confunde con un error de maquetación.
 */

/*
 * ───────────── El asistente de pasos ─────────────
 *
 * Como el de ADO: una decisión por pantalla. La guía de arriba dice en qué
 * paso estás; el bloque de abajo desliza de lado entre elegir la salida y dar
 * los datos. Sin JavaScript no hay `ihb-pasos--vivo` y los dos pasos se ven
 * uno debajo del otro, que es el comportamiento de siempre.
 */

/* ───────────── La búsqueda resumida (página de resultados) ─────────────
 *
 * Como en ADO: lo buscado en una línea, «Editar búsqueda» y «← Volver». El
 * formulario entero vive plegado debajo (`[hidden]` lo pone el guion).
 */

.ihb-resumen-busqueda {
	display: grid;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.9rem;
	padding: 0.7rem 0.9rem;
}

.ihb-resumen-busqueda__texto { min-width: 0; }

/* Es el h1 de la página de resultados. Encima había otro —«Traslado de
   Valladolid a Chiquilá»— y debajo un h2 con la misma ruta y la fecha: la misma
   información tres veces antes de la primera hora. Se quedó ésta, que además
   lleva el día y los pasajes. Tamaño de línea de resumen, no de portada. */
.ihb .ihb-resumen-busqueda__ruta {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ihb-marino);
}

/* Anclado con `.ihb`: el margen genérico de párrafo del lienzo (0,1,3) le
   ganaba y dejaba un hueco de 12 px entre los datos y las acciones. */
.ihb .ihb-resumen-busqueda__datos { margin: 0.1rem 0 0; font-size: 0.875rem; color: var(--ihb-tinta-suave); }

 /* En móvil las acciones van en una fila debajo del texto: si compartieran
   fila con la ruta, «Valladolid → Chiquilá» se partía en dos líneas. */
.ihb-resumen-busqueda__acciones {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.ihb-resumen-busqueda__editar {
	white-space: nowrap;
}

.ihb-resumen-busqueda__volver {
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	/* 24 px de objetivo: es un enlace de texto y WCAG 2.2 los quiere tocables. */
	padding: 0.25rem 0;
}

/* Con sitio, todo en UNA línea: ruta y datos seguidos, acciones a la derecha. */
@media (min-width: 40rem) {
	.ihb-resumen-busqueda {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.ihb-resumen-busqueda__texto {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.2rem 0.75rem;
	}

	.ihb .ihb-resumen-busqueda__ruta { font-size: 1.25rem; }
	.ihb .ihb-resumen-busqueda__datos { margin: 0; }

	.ihb-resumen-busqueda__acciones {
		justify-content: flex-end;
		gap: 1rem;
	}
}

.ihb-buscador-caja[hidden] { display: none; }

/* La hora de llegada, DENTRO de la celda de la hora de salida: «07:00 → 10:15».
   Va más chica que la salida —la salida es lo que se elige, la llegada lo que
   se comprueba— y cuando la ruta cruza de huso toma el color del huso, que
   avisa de que ese salto de reloj es real y no una errata. */
.ihb-salida__hora .ihb-salida__llegada {
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ihb-tinta-suave);
	white-space: nowrap;
}

/* Cuando cruza de huso: texto MARINO (el naranja sobre blanco a 15 px da
   2,77:1, medido, y hacen falta 4,5:1) y el naranja como subrayado, que es
   señal sin tener que leerse. Mismo criterio que el chip «cambia la hora». */
.ihb-salida__hora .ihb-salida__llegada--huso {
	color: var(--ihb-marino);
	border-bottom: 2px solid var(--ihb-atardecer);
}

/* Texto sólo para lectores de pantalla («llega a las», «a»): fuera de la vista,
   dentro del documento. */
.ihb-visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ihb-pasos__guia {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	gap: 0.5rem;
	counter-reset: hito;
}

.ihb-pasos__hito {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ihb-tinta-suave);
	padding-bottom: 0.45rem;
	border-bottom: 3px solid var(--ihb-linea);
}

/* El número va en un círculo: es lo que la gente reconoce como «paso». */
.ihb-pasos__hito::before {
	counter-increment: hito;
	content: counter(hito);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ihb-circulo-s);
	height: var(--ihb-circulo-s);
	border-radius: 50%;
	background: var(--ihb-linea);
	color: var(--ihb-tinta);
	font-size: 0.75rem;
}

.ihb-pasos__hito.es-activo { color: var(--ihb-marino); border-bottom-color: var(--ihb-mar); }
.ihb-pasos__hito.es-activo::before { background: var(--ihb-mar); color: var(--ihb-sol); }
.ihb-pasos__hito.es-hecho { color: var(--ihb-mar); border-bottom-color: var(--ihb-mar); }
.ihb-pasos__hito.es-hecho::before { content: "✓"; background: var(--ihb-mar); color: #fff; }

/*
 * La pista: los dos pasos en la MISMA celda de una rejilla, y el que no toca
 * se va fuera por un lado. `overflow:hidden` recorta el que está de viaje. La
 * altura es la del paso visible porque el otro lleva `hidden` en cuanto acaba
 * de salir — lo pone el guion al terminar la transición.
 */
.ihb-pasos--vivo {
	display: grid;
	overflow: hidden;
	position: relative;
}

.ihb-pasos--vivo .ihb-paso {
	grid-area: 1 / 1;
	transition: transform 0.36s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.36s ease;
	will-change: transform;
}

.ihb-pasos--vivo .ihb-paso[hidden] { display: none; }

/* Estado 1: el paso 1 quieto, el 2 esperando a la derecha. */
.ihb-pasos--vivo .ihb-paso[data-ihb-paso="1"] { transform: translateX(0); opacity: 1; }
.ihb-pasos--vivo .ihb-paso[data-ihb-paso="2"] { transform: translateX(100%); opacity: 0; }

/* Estado 2: el 1 se fue por la izquierda, el 2 ocupa su sitio. */
.ihb-pasos--en-2 .ihb-paso[data-ihb-paso="1"] { transform: translateX(-100%); opacity: 0; }
.ihb-pasos--en-2 .ihb-paso[data-ihb-paso="2"] { transform: translateX(0); opacity: 1; }

/* La salida elegida, resumida encima de los datos, con la vuelta atrás al lado. */
.ihb-paso__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
}

.ihb-paso__elegida {
	margin: 0;
	font-weight: 700;
	color: var(--ihb-marino);
	font-size: 0.9375rem;
	min-width: 0;
}

/* «Cambiar salida» es un enlace con forma de botón discreto: no compite con
   «Pagar», que es el único botón grande de esta pantalla. */
.ihb-paso__volver {
	white-space: nowrap;
	flex: none;
}

@media (prefers-reduced-motion: reduce) {
	.ihb-pasos--vivo .ihb-paso { transition: none; }
}

/* ───────────── Buscador por texto (combo) ─────────────
 *
 * Se monta ENCIMA del `<select>` de verdad, que sigue en el formulario y sigue
 * siendo quien envía el valor. Sin JavaScript no aparece nada de esto y el
 * desplegable nativo funciona como siempre — que en un móvil, además, es una
 * interfaz mejor que cualquier lista que podamos dibujar nosotros.
 */

.ihb-combo {
	position: relative;
}

/*
 * El `<select>` original se esconde SIN `display:none`. Un control oculto de
 * esa forma sigue contando para la validación del navegador, y si además fuera
 * obligatorio el envío se bloquearía con un mensaje que nadie puede ver («An
 * invalid form control is not focusable»). Con este recorte sigue existiendo,
 * sigue enviándose y puede recibir el foco si hiciera falta.
 */
/*
 * `select.ihb-combo__nativo` y no `.ihb-combo__nativo` a secas, y el `!important`
 * en el ancho: el lienzo normaliza TODOS los `<select>` con
 * `.ihb-lienzo-activo select { width: 100% }`, que es (0,1,1) y le ganaba a
 * esta clase sola (0,1,0). Resultado medido: el desplegable "oculto" seguía
 * midiendo 159 px, colocado en absoluto en su sitio de siempre, y asomaba
 * hasta el píxel 516 de una pantalla de 390 — la página entera hacía scroll
 * horizontal. `top:0; left:0` lo ancla a la esquina de su combo para que ni
 * un píxel quede fuera del contenedor.
 */
select.ihb-combo__nativo {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px !important;
	min-height: 0 !important;
	height: 1px;
	margin: -1px;
	padding: 0 !important;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0 !important;
}

.ihb-combo__lista {
	position: absolute;
	z-index: 40;
	top: calc(100% + 0.25rem);
	left: 0;
	right: 0;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	background: var(--ihb-papel);
	border: 1px solid var(--ihb-linea);
	border-radius: 0.6rem;
	box-shadow: 0 0.5rem 1.5rem rgba(1, 28, 64, 0.14);
	/* Diez opciones y a partir de ahí se desliza: una lista más larga que la
	   pantalla tapa el resto del formulario y desorienta. */
	max-height: 14rem;
	overflow-y: auto;
}

.ihb-combo__opcion {
	padding: 0.6rem 0.7rem;
	border-radius: 0.4rem;
	cursor: pointer;
	/* 44 px de objetivo táctil: se elige con el pulgar, no con un ratón. */
	min-height: 2.75rem;
	display: flex;
	align-items: center;
}

.ihb-combo__opcion.es-activa,
.ihb-combo__opcion:hover {
	background: var(--ihb-arena);
}

.ihb-combo__vacio {
	padding: 0.6rem 0.7rem;
	color: var(--ihb-tinta-suave);
	font-size: 0.9375rem;
}

/*
 * Los campos que esperan una ruta.
 *
 * Se apagan de verdad (`disabled`), no sólo en gris: un campo que parece
 * apagado pero se deja escribir es peor que uno encendido. El cursor de
 * «prohibido» y la opacidad son la explicación visual de por qué no responde.
 */
.ihb-buscador [data-ihb-necesita-ruta]:disabled {
	/* Sin opacidad: a 0,45 el botón «Ver salidas» y la fecha se leían a medias
	   sobre la arena (el cliente: «de nuevo el contraste»). Apagado es un
	   estado con colores propios —papel hueso, tinta suave, línea— que se lee
	   entero y se distingue del encendido sin desteñirse. */
	opacity: 1;
	cursor: not-allowed;
	background: #f7f2e8;
	color: var(--ihb-tinta-suave, #3d4a5c);
	border-color: var(--ihb-linea, #c4bba6);
	box-shadow: none;
}

.ihb-buscador .ihb-boton[data-ihb-necesita-ruta]:disabled {
	background: var(--ihb-papel, #fff);
	border: 1px solid var(--ihb-linea, #c4bba6);
}

.ihb-buscador select,
.ihb-buscador input,
.ihb-comprador select,
.ihb-comprador input,
.ihb-cotiza select,
.ihb-cotiza input,
.ihb-cotiza textarea {
	width: 100%;
	padding: 0.7rem 0.75rem;
	border: 1px solid var(--ihb-linea);
	border-radius: 0.5rem;
	background: var(--ihb-papel);
	color: var(--ihb-tinta);
	/* 16px exactos: por debajo, Safari en iPhone hace zoom al enfocar el campo
	   y descoloca la página entera en mitad de la compra. */
	font-size: 1rem;
	font-family: inherit;
	/* 44 px: el mínimo que recomienda WCAG para un objetivo táctil. Estaba en
	   48 y esos 4 px por campo eran 8 px de pliegue que no sobraban. */
	min-height: 2.75rem;
}

.ihb-comprador__campo small {
	display: block;
	margin-top: 0.25rem;
	color: var(--ihb-tinta-suave);
	font-size: 0.875rem;
}

.ihb-comprador__telefono-fila {
	display: grid;
	grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 1.2fr);
	gap: 0.5rem;
}

.ihb-comprador__telefono-fila select,
.ihb-comprador__telefono-fila input {
	min-width: 0;
}

.ihb-comprador__opcion {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0.25rem 0;
	color: var(--ihb-tinta);
	font-size: 0.9375rem;
	line-height: 1.35;
	cursor: pointer;
}

.ihb-comprador__opcion input {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	min-height: 1.25rem;
	margin: 0.08rem 0 0;
	accent-color: var(--ihb-mar);
}

/* ───────────────────────── Lista de salidas ─────────────────────────── */

.ihb-salidas {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

/*
 * UNA FILA POR SALIDA, no una tarjeta de cuatro renglones.
 *
 * La tarjeta apilaba hora, nombre de la corrida, precio y cupo, y medía 110 px:
 * cuatro salidas eran una pantalla entera de móvil sin llegar al botón. Ahora
 * son columnas —radio, hora → llegada, cupo, precio— alineadas de fila a fila,
 * que se leen como una tabla de horarios sin serlo. En móvil la hora va sola
 * arriba y cupo y precio comparten la segunda línea; desde 40 rem cabe todo en
 * una. El nombre de la corrida repetía la ruta del titular y la hora de al
 * lado: se queda sólo para el lector de pantalla.
 */
.ihb-salida__etiqueta {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"radio hora hora"
		"radio cupo precio";
	gap: 0.1rem 0.75rem;
	align-items: center;
	padding: 0.6rem 0.8rem;
	cursor: pointer;
}

.ihb-salida__etiqueta input[type="radio"] {
	grid-area: radio;
	width: 1.3rem;
	height: 1.3rem;
	margin: 0;
	accent-color: var(--ihb-mar);
}

.ihb-salida__hora {
	grid-area: hora;
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.ihb-salida__precio {
	grid-area: precio;
	font-weight: 600;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.ihb-salida__cupo {
	grid-area: cupo;
	font-size: 0.8125rem;
	color: var(--ihb-mar-oscuro);
}

@media (min-width: 40rem) {
	.ihb-salida__etiqueta {
		grid-template-columns: auto minmax(10rem, auto) 1fr auto;
		grid-template-areas: "radio hora cupo precio";
		padding: 0.5rem 0.9rem;
	}

	.ihb-salida__cupo { font-size: 0.875rem; }
}

/* La leyenda del subrayado naranja: una línea, no un párrafo. */
.ihb-salidas__nota {
	margin: -0.4rem 0 1rem;
	font-size: 0.8125rem;
	color: var(--ihb-tinta-suave);
}

.ihb-salida:has(input:checked) .ihb-salida__etiqueta,
.ihb-salida__etiqueta:focus-within {
	border-color: var(--ihb-mar);
	box-shadow: 0 0 0 2px var(--ihb-mar);
}

.ihb-salida--sin-cupo .ihb-salida__etiqueta {
	opacity: 0.55;
	cursor: default;
}

.ihb-salida--sin-cupo .ihb-salida__cupo {
	color: var(--ihb-alerta);
}

.ihb-alternativas {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ihb-alternativas a {
}

/* ───────────────────────── Datos del comprador ──────────────────────── */

.ihb-comprador {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 1rem;
}

.ihb-comprador legend {
	padding: 0 0.4rem;
	font-weight: 700;
}

/* Con sitio, correo y WhatsApp comparten fila; el nombre va entero arriba. */
@media (min-width: 40rem) {
	.ihb-comprador { grid-template-columns: 1fr 1fr; }
	.ihb-comprador__campo:first-of-type { grid-column: 1 / -1; }
}

.ihb-compra__aviso {
	margin: 0 0 0.75rem;
	color: var(--ihb-alerta);
	font-weight: 600;
}

.ihb-compra__aviso:empty {
	display: none;
}

.ihb-compra__letra,
.ihb-gracias__letra {
	margin: 0.75rem 0 0;
	color: var(--ihb-tinta-suave);
	font-size: 0.875rem;
}

/* ────────────────────────── 2. Página de gracias ────────────────────── */

.ihb-gracias {
	max-width: 34rem;
	margin: 0 auto;
	padding: 1.25rem;
	border: 1px solid var(--ihb-linea);
	border-radius: 0.75rem;
	background: var(--ihb-papel);
}

.ihb-gracias__titulo {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	line-height: 1.2;
}

.ihb-gracias--pagada .ihb-gracias__titulo {
	color: var(--ihb-ok);
}

.ihb-gracias--cancelada .ihb-gracias__titulo,
.ihb-gracias--expirada .ihb-gracias__titulo {
	color: var(--ihb-alerta);
}

.ihb-gracias__espera {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background: var(--ihb-arena);
	font-weight: 600;
}

/* El latido es un punto que respira. Nada de spinners animados a 60fps: esta
   página puede quedarse abierta diez minutos en un móvil con poca batería. */
.ihb-latido {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--ihb-mar);
	animation: ihb-latido 2s ease-in-out infinite;
}

@keyframes ihb-latido {
	0%, 100% { opacity: 0.3; }
	50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ihb-latido { animation: none; }
}

.ihb-resumen {
	margin: 1.25rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--ihb-linea);
}

.ihb-resumen > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0;
}

.ihb-resumen dt {
	color: var(--ihb-tinta-suave);
	margin: 0;
}

.ihb-resumen dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* ─────────────────────── 3. El pase de abordar ──────────────────────────
 *
 * Se enseña en el muelle: con sol de mediodía, con prisa, con una mano
 * ocupada. De ahí salen todas las decisiones de aquí abajo:
 *
 * · FONDO CLARO, no oscuro. Una pantalla oscura al sol se convierte en un
 *   espejo y el pasajero acaba viéndose la cara. El blanco a máximo brillo es
 *   lo que se lee de pie en un embarcadero.
 * · El QR SIEMPRE sobre blanco puro y con su margen: un lector no perdona ni
 *   un degradado de fondo ni un recorte del silencio que lo rodea.
 * · La PERFORACIÓN no es un adorno. Es lo que hace que el ojo lea «boleto»
 *   antes de leer una sola palabra, y separa «tu viaje» de «lo que enseñas».
 * · Nada de tipografías ni iconos remotos: en el muelle hay media raya.
 */

.ihb-pase {
	--pase-radio: 1.1rem;
	--pase-muesca: 1.1rem;

	max-width: 24rem;
	margin: 0 auto;
	background: var(--ihb-papel);
	border-radius: var(--pase-radio);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 34, 43, .08), 0 12px 32px -12px rgba(16, 34, 43, .28);
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.ihb-pase__cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .85rem 1.15rem;
	background: var(--ihb-mar-oscuro);
	color: #fff;
}

.ihb-pase__marca {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.ihb-pase__marca span {
	font-weight: 400;
	color: var(--ihb-oro);
	opacity: .85;
}

.ihb-pase__estado {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .28rem .6rem;
	border-radius: 999px;
	background: var(--ihb-oro);
	color: var(--ihb-mar-oscuro);
	white-space: nowrap;
}

.ihb-pase--provisional .ihb-pase__cab {
	background: var(--ihb-alerta);
}

.ihb-pase__sello {
	margin: 0;
	padding: .7rem 1.15rem;
	background: #fdf1ec;
	color: var(--ihb-alerta);
	font-size: .84rem;
	font-weight: 600;
	text-align: center;
}

/* ── El trayecto ──────────────────────────────────────────────────────── */

.ihb-pase__viaje {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: .5rem;
	padding: 1.35rem 1.15rem .3rem;
}

.ihb-pase__punto {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.ihb-pase__punto--fin {
	text-align: right;
}

.ihb-pase__lugar {
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ihb-tinta);
	/* Un nombre largo se parte en dos líneas antes que desbordar la tarjeta. */
	overflow-wrap: anywhere;
}

.ihb-pase__rol {
	font-size: .68rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ihb-tinta-suave);
}

/* La línea con el barquito. Los dos puntos gordos de los extremos son los
   embarcaderos; sin ellos la línea parece un subrayado suelto. */
.ihb-pase__linea {
	position: relative;
	width: 4.5rem;
	height: 1.5rem;
}

.ihb-pase__linea::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	transform: translateY(-50%);
	background: repeating-linear-gradient(
		to right,
		var(--ihb-linea) 0 5px,
		transparent 5px 10px
	);
}

.ihb-pase__linea::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	height: 7px;
	background:
		radial-gradient(circle at left center, var(--ihb-mar) 0 3.5px, transparent 3.5px),
		radial-gradient(circle at right center, var(--ihb-mar) 0 3.5px, transparent 3.5px);
}

.ihb-pase__nave {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--ihb-papel);
	padding: 0 .3rem;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--ihb-mar);
}

/* ── Cuándo ───────────────────────────────────────────────────────────── */

.ihb-pase__cuando {
	display: flex;
	gap: 1.25rem;
	padding: 1rem 1.15rem 1.15rem;
}

.ihb-pase__dato {
	display: flex;
	flex-direction: column;
	gap: .12rem;
	min-width: 0;
}

.ihb-pase__et {
	font-size: .64rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ihb-tinta-suave);
}

.ihb-pase__fecha,
.ihb-pase__hora,
.ihb-pase__pax {
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

/* La hora es el dato que se busca a la carrera: se le da el color de marca
   para que el ojo la encuentre sin leer la etiqueta. */
.ihb-pase__hora {
	color: var(--ihb-mar);
}

/* ── La perforación ───────────────────────────────────────────────────── */

.ihb-pase__rasgado {
	position: relative;
	height: var(--pase-muesca);
	background: var(--ihb-papel);
}

/* Las dos muescas laterales. Van con el color del FONDO de la página, no
   blancas, para que el recorte se vea sobre cualquier tema. */
.ihb-pase__rasgado::before,
.ihb-pase__rasgado::after {
	content: "";
	position: absolute;
	top: 50%;
	width: var(--pase-muesca);
	height: var(--pase-muesca);
	border-radius: 50%;
	transform: translateY(-50%);
	background: var(--ihb-arena);
	box-shadow: inset 0 0 0 1px var(--ihb-linea);
}

.ihb-pase__rasgado::before { left: calc(var(--pase-muesca) / -2); }
.ihb-pase__rasgado::after  { right: calc(var(--pase-muesca) / -2); }

/* La línea de puntos entre muesca y muesca. */
.ihb-pase__talon {
	position: relative;
	padding: 1.25rem 1.15rem 1rem;
	text-align: center;
	border-top: 2px dashed var(--ihb-linea);
}

/* ── El QR ────────────────────────────────────────────────────────────── */

.ihb-pase__qr {
	display: inline-block;
	padding: .7rem;
	background: #fff;
	border-radius: .5rem;
}

.ihb-pase__qr svg {
	display: block;
	width: 100%;
	max-width: 13.5rem;
	height: auto;
	/* Nitidez: un QR interpolado es un QR que tarda en leerse. */
	image-rendering: pixelated;
	shape-rendering: crispEdges;
}

.ihb-pase__sinqr {
	margin: 0;
	padding: 1rem;
	background: var(--ihb-arena);
	border-radius: .5rem;
	font-size: .9rem;
	color: var(--ihb-tinta-suave);
}

/* El código en grupos de cuatro: es el plan B cuando el lector falla y hay
   que cantarlo o teclearlo. Monoespaciado para no confundir 0 con O. */
.ihb-pase__codigo {
	margin: .85rem 0 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .82rem;
	letter-spacing: .06em;
	color: var(--ihb-tinta-suave);
	overflow-wrap: anywhere;
}

.ihb-pase--provisional .ihb-pase__qr {
	opacity: .3;
	filter: grayscale(1);
}

/* ── Pie ──────────────────────────────────────────────────────────────── */

.ihb-pase__pie {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem 1.15rem;
	border-top: 1px solid var(--ihb-linea);
	background: var(--ihb-arena);
}

.ihb-pase__pie strong {
	font-size: .95rem;
	font-weight: 600;
}

.ihb-pase__pdf {
	display: block;
	margin: 0;
	padding: .95rem 1.15rem;
	background: var(--ihb-mar);
	/* Azul con letra dorada: es exactamente el boton del sitio. Copiarlo aqui
	   hace que el pase se lea como parte de la misma casa y no como un PDF
	   generico de una pasarela de pago. */
	color: var(--ihb-oro);
	text-align: center;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .01em;
	text-decoration: none;
}

.ihb-pase__pdf:hover,
.ihb-pase__pdf:focus {
	background: var(--ihb-mar-oscuro);
	color: var(--ihb-oro);
}

.ihb-pase__aviso {
	margin: 0;
	padding: .85rem 1.15rem 1.1rem;
	font-size: .8rem;
	line-height: 1.45;
	text-align: center;
	color: var(--ihb-tinta-suave);
	background: var(--ihb-arena);
}

/* ── Impresión ────────────────────────────────────────────────────────── */

@media print {
	.ihb-pase {
		max-width: none;
		box-shadow: none;
		border: 1px solid var(--ihb-linea);
	}

	.ihb-pase__pdf,
	.ihb-pase__aviso {
		display: none;
	}

	/* En papel las muescas no tienen fondo contra el que recortarse. */
	.ihb-pase__rasgado::before,
	.ihb-pase__rasgado::after {
		background: #fff;
	}
}

@media (min-width: 40rem) {
	.ihb-buscador {
		grid-template-columns: 1fr 1fr auto auto;
		align-items: end;
	}

	/* En una sola fila el botón vuelve a ser una celda más; si siguiera
	   cruzando las cuatro columnas se iría él solo a un segundo renglón. */
	.ihb-buscador > .ihb-boton {
		grid-column: auto;
	}

	.ihb-buscador__campo--corto {
		max-width: 7rem;
	}

	.ihb-boton {
		width: auto;
	}

	.ihb-salida__etiqueta {
		grid-template-columns: auto 6rem 1fr auto;
		grid-template-areas: "radio hora nombre precio" "radio hora cupo precio";
	}

	.ihb-salida__precio {
		text-align: right;
	}
}

/* ── Pop ups `<details>`: un botón y, al abrir, un MODAL. Pieza del sistema:
 * vivía en portada.css y se subió aquí (3-sep-2026) porque el «?» de las
 * próximas salidas está en la agenda, y la agenda en todas las pantallas. ──
 *
 * Primero fueron cajas flotantes bajo el botón (y hojas pegadas al borde en
 * móvil). El cliente lo dijo claro: «en medio de la pantalla, centrados,
 * difuminando el resto de la página, con una ✕ para cerrar fácilmente». Es
 * mejor: un flotante compite con lo que tiene alrededor; un modal se lee solo.
 *
 * Siguen siendo `<details>`: sin guion abren igual (por teclado incluso con
 * el fondo delante). El fondo y la caja van en `position: fixed` con índices
 * altos, y NINGÚN ancestro lleva `z-index`: un `z-index` arriba crearía un
 * contexto propio y el modal quedaría por debajo de lo que esté fuera de él.
 */
.ihb-pop {
	display: inline-block;
}

/*
 * CERRADO, LA CAJA Y EL FONDO NO EXISTEN. Medido: con el `<details>` cerrado,
 * la caja fija seguía maquetada (406 px de ancho a −118 px de la izquierda) y
 * el QA la marcaba como texto fuera de pantalla en cada página. El navegador
 * esconde el contenido de un `details` cerrado, pero un hijo con
 * `position: fixed` se le escapa del flujo; se dice explícitamente.
 */
.ihb-pop:not([open]) > .ihb-pop__caja,
.ihb-pop:not([open]) > .ihb-pop__fondo {
	display: none;
}

.ihb-pop__boton {
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.ihb-pop__boton::-webkit-details-marker {
	display: none;
}

.ihb-pop__boton:hover,
.ihb-pop[open] > .ihb-pop__boton {
	border-color: var(--ihb-mar, #08668d);
}

.ihb-pop__boton:focus-visible {
	outline: 3px solid var(--ihb-tinta, #011c40);
	outline-offset: 2px;
}

/* La «i» en un círculo: se reconoce como información sin leerla. */
.ihb-pop__icono {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.8rem;
	font-style: italic;
}

/* El fondo: la página, difuminada. */
.ihb-pop__fondo {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(1, 28, 64, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: ihb-fondo-entra 0.2s ease;
}

/* La caja: centrada, con su ✕ arriba a la derecha. */
.ihb-pop__caja {
	border-radius: var(--ihb-radio-caja);
	/* Con el relleno DENTRO del ancho: a 390 px la caja medía 406 (358 + los
	   48 del relleno) y se salía por los dos lados. */
	box-sizing: border-box;
	position: fixed;
	z-index: 100001;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(30rem, calc(100vw - 2rem));
	max-width: calc(100vw - 2rem);
	max-height: min(80vh, calc(100vh - 2rem));
	overflow: auto;
	padding: 1.4rem 1.5rem 1.25rem;
	background: var(--ihb-papel, #fff);
	box-shadow: 0 24px 64px rgba(1, 28, 64, 0.35);
	color: var(--ihb-tinta, #011c40);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
	animation: ihb-pop-entra 0.22s ease;
}

@keyframes ihb-pop-entra {
	from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
	to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes ihb-fondo-entra {
	from { opacity: 0; }
	to { opacity: 1; }
}

.ihb-pop__titulo {
	margin: 0 2.25rem 0.7rem 0;
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--ihb-marino, #011c40);
}

.ihb-pop__caja p {
	margin: 0 0 0.6rem;
}

.ihb-pop__caja p:last-child {
	margin-bottom: 0;
}

.ihb-pop__lista {
	margin: 0 0 0.6rem;
	padding: 0 0 0 1.1rem;
}

.ihb-pop__lista li {
	margin-bottom: 0.35rem;
}

.ihb-pop__pie {
	color: var(--ihb-tinta-suave, #3d4a5c);
	font-size: 0.8125rem;
}

/* La ✕: el círculo grande del sistema, arriba a la derecha. */
.ihb-pop__cerrar {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
}

/* Mientras hay un modal abierto la página no se desliza detrás. */
html.ihb-modal {
	overflow: hidden;
}

/* ═══ MOVIMIENTO ═══
 *
 * «Revisa todo el sitio para que tenga transiciones suaves.» Aquí, y no
 * componente a componente: como la forma la dan las cinco piezas del
 * sistema, el movimiento también. Un botón, un círculo, un chip, una opción
 * y una ficha cambian de color, borde y sombra con el mismo tiempo y la
 * misma curva en toda la página, y lo que aparece —una lista, una ficha de
 * clima, el buscador plegado— entra con un fundido corto en vez de saltar.
 *
 * Lo que aparece y desaparece por `hidden` usa `@starting-style` y
 * `transition-behavior: allow-discrete`: en los navegadores que lo entienden
 * (Chrome 117+, Safari 17.4+, Firefox 129+) hay fundido; en los demás sigue
 * apareciendo de golpe, que es lo que había. Nada depende de ello.
 */
.ihb-boton,
.ihb-circulo,
.ihb-chip,
.ihb-segmentado__opcion,
.ihb-ficha,
.ihb-fw__hora,
.ihb-salida__etiqueta,
.ihb-combo__opcion,
.ihb-faq__item summary {
	transition:
		background-color var(--ihb-t-rapida) var(--ihb-curva),
		color var(--ihb-t-rapida) var(--ihb-curva),
		border-color var(--ihb-t-rapida) var(--ihb-curva),
		box-shadow var(--ihb-t-media) var(--ihb-curva),
		transform var(--ihb-t-media) var(--ihb-curva),
		opacity var(--ihb-t-media) var(--ihb-curva);
}

/* Al pulsar, un encogimiento mínimo: confirma el toque sin estorbar. */
.ihb-boton:active,
.ihb-circulo:active,
.ihb-segmentado__opcion:active {
	transform: scale(0.97);
}

/* Las fichas que son enlace se levantan un poco al pasar por encima. */
.ihb-ruta:hover,
.ihb-paradero:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(1, 28, 64, 0.08);
}

/* Los campos: el borde y el halo de foco no saltan, se encienden. */
.ihb-buscador select,
.ihb-buscador input,
.ihb-comprador input,
.ihb-cotiza select,
.ihb-cotiza input,
.ihb-cotiza textarea,
.ihb-combo__campo {
	transition:
		border-color var(--ihb-t-rapida) var(--ihb-curva),
		box-shadow var(--ihb-t-rapida) var(--ihb-curva),
		background-color var(--ihb-t-rapida) var(--ihb-curva);
}

/*
 * Lo que aparece por `hidden` entra con un fundido y 4 px de desplazamiento.
 *
 * Es una ANIMACIÓN, no una transición con `@starting-style`: se probó lo
 * segundo y en Chrome 148 el elemento se quedaba en opacidad 0 para siempre
 * (medido, incluso en un nodo recién creado). Una animación se reinicia cada
 * vez que el elemento pasa de `display: none` a visible, que es justo lo que
 * hace `hidden`, y funciona en todos los navegadores desde hace diez años.
 * La salida es seca: sin guion no hay forma de retrasar el `display: none`,
 * y un parpadeo al cerrar molesta menos que un fundido que no llega.
 */
/* La clase la pone `aparecer()` del guion al quitar `hidden`; nunca corre
   sola al pintar la página. */
.ihb-aparece--ahora {
	animation: ihb-entra-suave var(--ihb-t-media) var(--ihb-curva);
}

/* La lista del buscador entra deslizando. */
@keyframes ihb-entra-suave {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

.ihb-combo__lista {
	animation: ihb-entra-suave var(--ihb-t-rapida) var(--ihb-curva);
}

/* El desplazamiento de la página, suave, sólo en nuestras pantallas. */
html:has(body.ihb-lienzo-activo) {
	scroll-behavior: smooth;

	/*
	 * EL ESQUEMA, DECLARADO. Nuestro diseño es claro SIEMPRE, y hasta aquí
	 * nadie se lo había dicho al navegador: el valor calculado era `normal`,
	 * que significa «decide tú» y con el visitante en modo oscuro hace que
	 * las partes que dibuja EL NAVEGADOR —el desplegable del selector de
	 * fecha, el relleno automático, la barra de desplazamiento— se pinten en
	 * su versión oscura sobre un fondo claro. Un `background` nuestro no
	 * alcanza a esas piezas; sólo `color-scheme` las gobierna.
	 *
	 * HONESTIDAD SOBRE LO MEDIDO: se comprobó que el valor pasa de `normal` a
	 * `light` con el navegador en oscuro, pero en el Chromium de pruebas NO
	 * se vio diferencia visible en el campo de fecha cerrado — las capturas
	 * forzando un esquema y otro salieron idénticas. Se declara porque es lo
	 * correcto para un diseño que sólo tiene modo claro, no porque arregle un
	 * defecto visto. El día que haya modo oscuro de verdad, esto pasa a
	 * `light dark`.
	 */
	color-scheme: light;
}

/* Entre páginas no se toca nada aquí: la transición vive en lienzo.css y
   tiene que ser simétrica (allí se explica por qué). */

/* Quien pide menos movimiento, no tiene ninguno. Una sola regla para todo
   lo nuestro, que también apaga las animaciones de entrada de cada pieza. */
@media (prefers-reduced-motion: reduce) {
	.ihb *,
	.ihb *::before,
	.ihb *::after,
	.ihb-lienzo-activo .ihb-barra *,
	.ihb-lienzo-activo .ihb-pie * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.ihb-pop__caja,
	.ihb-pop__fondo { animation: none; }

	html:has(body.ihb-lienzo-activo) {
		scroll-behavior: auto;
	}
}

/* ───────────── El traslado privado: pedir precio por WhatsApp ─────────────
 *
 * Un encabezado (título, lema y «Cómo funciona» en modal) y una ficha arena
 * con dos pasos numerados con círculos del sistema. Los campos son los del
 * buscador —misma altura, mismo borde— en una rejilla de dos columnas desde
 * el móvil. En PC el encabezado se queda a la izquierda, pegajoso, y el
 * formulario ocupa el resto. El envío lo gobierna WaCta (ver iniciarCotiza en
 * frontend.js); su mensaje de error se pinta con su propia hoja.
 */
.ihb-privado { display: grid; gap: 1rem; margin: 0 0 2rem; }

.ihb-privado__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
}

.ihb-privado__h1 { flex: 1 1 100%; margin: 0; }
.ihb-privado__lema { flex: 1 1 16rem; margin: 0; font-size: 0.95rem; color: var(--ihb-tinta-suave); }
.ihb-privado__pasos { margin: 0 0 0.75rem; padding-left: 1.25rem; display: grid; gap: 0.35rem; }

.ihb-cotiza { display: grid; gap: 1.1rem; padding: 1rem; }
.ihb-cotiza__grupo { margin: 0; padding: 0; border: 0; min-width: 0; }

.ihb-cotiza__paso {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	padding: 0;
	font-size: 1rem;
	font-weight: 800;
	color: var(--ihb-marino);
}

.ihb-cotiza__paso .ihb-circulo { font-size: 0.75rem; font-weight: 800; }
.ihb-cotiza__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.ihb-campo { display: block; min-width: 0; }
.ihb-campo--ancho { grid-column: 1 / -1; }
.ihb-campo[hidden] { display: none; }
.ihb-campo__nombre { display: block; margin-bottom: 0.2rem; font-size: 0.8125rem; font-weight: 600; color: var(--ihb-tinta); }
.ihb-campo__nombre small { font-weight: 400; color: var(--ihb-tinta-suave); }
.ihb-cotiza textarea { resize: vertical; min-height: 4.25rem; line-height: 1.4; }

.ihb-cotiza__pie { display: grid; gap: 0.5rem; justify-items: start; }
.ihb-cotiza__enviar { gap: 0.5rem; }
.ihb-cotiza__enviar svg { width: 1.25rem; height: 1.25rem; flex: none; }
.ihb-cotiza__nota { margin: 0; font-size: 0.875rem; color: var(--ihb-tinta-suave); }

.ihb-cotiza__aviso:empty { display: none; }
.ihb-cotiza__aviso { font-size: 0.9375rem; }
.ihb-cotiza__aviso.is-error { color: var(--ihb-alerta); font-weight: 600; }

.ihb-cotiza__listo {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
	padding: 0.8rem 1rem;
	border-left: 4px solid var(--ihb-ok);
	border-radius: var(--ihb-radio-ficha-chica);
	background: var(--ihb-papel);
}

.ihb-cotiza__listo p { margin: 0; }
.ihb-cotiza__resultado { display: grid; gap: 0.6rem; justify-items: start; padding: 0.8rem 1rem; }
.ihb-cotiza__resultado p { margin: 0; }
.ihb-cotiza__resultado.is-error { --ihb-acento: var(--ihb-alerta); }
.ihb-cotiza .wacta-form-error { margin: 0; }

/* La trampa de miel, fuera de la vista también cuando WaCta no está. */
.ihb-miel { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 52rem) {
	.ihb-privado { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
	.ihb-privado__cabecera { display: block; position: sticky; top: 4rem; }
	.ihb-privado__lema { margin: 0.5rem 0 1rem; }
	.ihb-cotiza { padding: 1.25rem; }
}

@media (max-width: 22.5rem) {
	.ihb-cotiza__rejilla { grid-template-columns: 1fr; }
}


/* ═══════════════════════ El combo, con cara de combo ═══════════════════════
 *
 * `montarCombo()` sustituye el `<select>` por un campo de texto, y al hacerlo
 * se lleva por delante las DOS señales que tenía el original: el texto
 * «— elegir —» y la flecha del navegador. Lo que queda es una caja blanca
 * vacía. MEDIDO en la portada a 375 px: «Salgo de» y «Voy a» eran dos huecos
 * en blanco sin nada que invitara a tocarlos, en el primer paso de la compra.
 *
 * La pista la pone el guion desde `data-ihb-pista`; la flecha va aquí porque
 * es decoración y no tiene por qué existir en el DOM.
 */
.ihb-combo::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.9rem;
	width: 0.45rem;
	height: 0.45rem;
	margin-top: -0.35rem;
	border-right: 2px solid var(--ihb-tinta-suave);
	border-bottom: 2px solid var(--ihb-tinta-suave);
	transform: rotate(45deg);
	/* El clic es del campo: la flecha no puede robárselo. */
	pointer-events: none;
	transition: transform var(--ihb-t-rapida) var(--ihb-curva);
}

/* Abierto, la flecha mira arriba. El estado ya vive en `aria-expanded`, que el
   guion mantiene al día: no hace falta una clase paralela que se desincronice. */
.ihb-combo:has(.ihb-combo__campo[aria-expanded="true"])::after {
	transform: rotate(-135deg);
	margin-top: -0.1rem;
}

/*
 * Sitio para la flecha. El relleno solo no basta: a 375 px cada combo mide
 * 124 px y una pista larga se mete DEBAJO de la flecha en vez de cortarse
 * —medido con «¿De dónde sales?», que se comía el signo final—. Por eso la
 * pista es corta («Elige») y además esto recorta con puntos suspensivos: un
 * nombre de paradero largo, o una traducción, no pueden volver a chocar.
 */
.ihb-combo__campo {
	padding-right: 2.1rem;
	text-overflow: ellipsis;
}

/* ═════════════════════ Lo que se toca con el pulgar ════════════════════════
 *
 * `pointer: coarse` es el dedo —móvil y tableta—, no el ancho de la ventana:
 * una ventana estrecha en un escritorio sigue teniendo ratón y no necesita
 * nada de esto.
 *
 * QUÉ CAMBIA Y POR QUÉ. Los objetivos de aquí ya cumplían **WCAG 2.2 AA**
 * (2.5.8, 24×24 px) — eso estaba pensado, no olvidado. Lo que hacen estas
 * reglas es subirlos a los **44 px** de 2.5.5 (AAA) y de las guías de Apple y
 * Google, que es el listón de esta casa. MEDIDO a 375 px antes de esto:
 * «Traslado privado» 130×36, «Editar búsqueda» 131×36, «← Volver» 52×28,
 * el «?» del cambio de huso 28×28.
 *
 * Se sube el SUELO, no la escala: los tokens siguen valiendo 36 y 40 px en
 * escritorio, donde la jerarquía visual entre acción principal y auxiliar es
 * la que se diseñó.
 */
@media (pointer: coarse) {
	:root {
		--ihb-boton-alto-medio: 2.75rem;   /* 40 → 44 px */
		--ihb-boton-alto-chico: 2.75rem;   /* 36 → 44 px */
		--ihb-circulo-m: 2.75rem;          /* el «?»: 28 → 44 px */
	}

	/*
	 * Los enlaces de texto sueltos. No se les toca el tamaño de letra —eso
	 * movería la maqueta—: se les da alto y se centra el texto dentro, así el
	 * objetivo crece sin que se note.
	 */
	.ihb-resumen-busqueda__volver,
	.ihb-barra__marca,
	.ihb-clima__fuente {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}
}

/* ════════════════════════ El texto chico, en móvil ═════════════════════════
 *
 * 13 px es cómodo en un monitor a 60 cm y corto en un teléfono al sol, que es
 * donde se compra esto. Sólo suben los rótulos que hay que LEER para comprar
 * —los del buscador y los del formulario de datos—, no todo lo que mida 13.
 */
@media (max-width: 40rem) {
	/*
	 * `.ihb-lienzo-activo` delante NO sobra. El tamaño base de los rótulos lo
	 * fija `.ihb-lienzo-activo label` en lienzo.css (0,1,1), y esa hoja se
	 * encola DESPUÉS de ésta: con la misma especificidad ganaba ella y esto no
	 * hacía nada — medido, el rótulo se quedaba en 13 px. Con la clase del
	 * lienzo delante son (0,2,1) y el orden de las hojas deja de importar.
	 */
	.ihb-lienzo-activo .ihb-buscador__campo label,
	.ihb-lienzo-activo .ihb-comprador__campo label,
	.ihb-lienzo-activo .ihb-campo__nombre {
		font-size: 0.875rem;   /* 13 → 14 px */
	}
}