/*
 * Isla Holbox — estilos de la portada.
 *
 * Depende de `frontend.css`, que es donde viven las variables de marca. Aquí
 * NO se redefine ninguna: se usan. Aun así cada `var()` lleva su valor de
 * respaldo, porque una variable que no existe hace la declaración inválida y
 * eso significaría un botón transparente sobre fondo blanco — un botón
 * invisible es peor que un botón feo.
 *
 * MÓVIL PRIMERO, y no como eslogan: el cliente de este sitio es un turista de
 * pie en una calle, con sol, una maleta y media raya de señal. Todo lo que hay
 * aquí está pensado a 375 px de ancho; lo de escritorio son dos reglas al
 * final.
 *
 * CERO LLAMADAS FUERA: ni tipografías, ni iconos de terceros. El único icono
 * de la página —el de WhatsApp— es un círculo hecho con CSS, no un SVG remoto.
 */

/* ───────────────── Raíz ───────────────── */

.ihb-portada {
	max-width: 40rem;
	margin: 0 auto;
}

/*
 * Barra pegajosa de 56 px: logo a la izquierda, WhatsApp a la derecha, nada
 * más. Es lo único pegajoso de la página. Si el tema ya trae su propia cabecera
 * fija, ajústale el `top` desde el tema: dos barras pegajosas apiladas se comen
 * el pliegue, que es justo lo que este diseño evita.
 */
.ihb-portada__barra {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	height: 3.5rem;
	margin: 0 -1rem 0.75rem;
	padding: 0 1rem;
	background: var(--ihb-crema, #fffaf0);
	border-bottom: 1px solid var(--ihb-linea, #e5e7eb);
}

.ihb-portada__marca {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	/* Un nombre largo no puede empujar al WhatsApp fuera de la pantalla. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * VERDE, y es la única excepción a la paleta azul+oro. El verde de WhatsApp es
 * un signo reconocible, no una elección estética: en azul se leería como «otro
 * botón más» y dejaría de ser el paracaídas que es.
 */
.ihb-portada__wa {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	padding: 0.55rem 0.9rem;
	border-radius: 999px;
	background: #128c7e;
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	/* 44 px de objetivo táctil: es un botón para un pulgar, no para un ratón. */
	min-height: 2.75rem;
}

.ihb-portada__wa:hover,
.ihb-portada__wa:focus {
	background: #0b6b5f;
	color: #fff;
}

.ihb-portada__wa-icono {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	background: #fff;
	/* La «cola» del bocadillo, hecha con un borde. Sin SVG y sin descargas. */
	box-shadow: -0.15rem 0.3rem 0 -0.28rem #fff;
}

/* ───────────────── Hero (el pliegue) ─────────────────
 *
 * EL CONTRATO DE ESTA SECCIÓN: en un teléfono pequeño, todo lo que hace falta
 * para comprar tiene que verse SIN DESLIZAR. Título, precio, el buscador
 * entero con su botón, y la diferencia de hora entre Valladolid y Chiquilá.
 *
 * No es una preferencia estética, es lo que medimos: antes de esto el buscador
 * terminaba en el píxel 662 de una pantalla de 640, o sea que el botón «Ver
 * salidas» —lo único que hay que pulsar— nacía fuera de la vista. Quien no
 * desliza, no compra.
 *
 * `svh` y no `vh`: en un móvil, `100vh` es la altura de la ventana SIN la barra
 * del navegador, así que un hero de `100vh` siempre queda un poco por debajo
 * del pliegue real. `svh` es la altura pequeña —con la barra visible— que es
 * justo lo que ve alguien que acaba de abrir el enlace. Se deja `vh` como
 * respaldo para navegadores viejos, donde perder unos píxeles es aceptable.
 *
 * Las 3 rem que se restan son la barra de marca del lienzo, que es pegajosa y
 * ocupa pliegue. Ese número vive en `lienzo.css`; si cambia allí, cambia aquí.
 */
.ihb-portada__hero {
	display: flex;
	flex-direction: column;
	/*
	 * ARRIBA, no centrado, y sin medir una pantalla entera.
	 *
	 * El hero medía `100svh` y centraba su contenido: en un teléfono alto eso
	 * eran 300 px de nada encima del titular y la lista de rutas fuera de la
	 * vista. Ahora empieza arriba y mide lo que mide; lo que sigue —las rutas—
	 * sube a la primera pantalla cuando cabe. El contrato de una sola vista en
	 * un teléfono pequeño sigue en pie, y mejor: el contenido está más cerca
	 * del borde superior, no más lejos. En escritorio sí ocupa la pantalla y
	 * se centra, porque ahí tiene las rutas al lado (véase «Escritorio»).
	 */
	justify-content: flex-start;
	/*
	 * Un respiro arriba y abajo, y poco más.
	 *
	 * Aquí hubo 4 rem abajo para librar el botón flotante de WhatsApp, que se
	 * sentaba encima de los relojes. Ese hueco sobra desde que el flotante se
	 * oculta en nuestras pantallas (`IHB_Lienzo::estorbos()`), y sobraba de mala
	 * manera: como el hero mide una pantalla exacta, 64 px de relleno vacío
	 * debajo obligaban a deslizar para ver nada. Si alguien vuelve a activar un
	 * botón flotante, este número tiene que volver a subir.
	 */
	padding: 1rem 0 1rem;
}

.ihb-portada__h1 {
	margin: 0 0 0.15rem;
	/* Crece con la pantalla, pero en un móvil pequeño se queda en 1.35 rem: a
	   1.5 rem el título se iba a tres líneas y esas dos líneas de más son
	   exactamente lo que empujaba el botón fuera de la vista. */
	font-size: clamp(1.35rem, 5.5vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ihb-marino, #011c40);
}

/* La línea que dice el negocio. No es un eslogan: es la respuesta a «¿estoy en
   la página correcta?», y por eso va justo debajo del título y no en un banner. */
.ihb-portada__lema {
	margin: 0 0 0.4rem;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

.ihb-portada__desde {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ihb-mar, #08668d);
}

/* El buscador reutilizado manda en el pliegue: se le quita el margen inferior
   propio para que los relojes queden PEGADOS a él y no parezcan otra cosa. */
.ihb-portada__buscador .ihb {
	margin: 0;
}

.ihb-portada__buscador .ihb__titulo {
	margin: 0 0 0.6rem;
	font-size: 1rem;
}

.ihb-portada__alterna {
	margin: 0.6rem 0 0;
	text-align: center;
	font-size: 0.875rem;
}

/* ───────────────── Doble reloj ───────────────── */

/*
 * La evidencia. NO es una alerta: sin icono de peligro, sin amarillo y sin
 * botón de cerrar. Dos relojes que no coinciden se leen antes que cualquier
 * párrafo de advertencia; ése es todo el mecanismo.
 */
.ihb-relojes {
	display: grid;
	/* Uno solo —el del nodo— centrado y sin estirarse a todo el ancho. */
	grid-template-columns: minmax(0, 21rem);
	justify-content: center;
	gap: 0.4rem;
	margin: 0.6rem 0 0.2rem;
}

/* Desplegado: origen y destino, uno al lado del otro. */
.ihb-relojes--doble {
	grid-template-columns: 1fr 1fr;
}

/* El segundo reloj ENTRA, no aparece: se ve que hay algo nuevo sin que baile
   la pantalla entera. */
.ihb-relojes--doble .ihb-reloj:last-child {
	animation: ihb-desplegar 0.32s ease-out both;
}

@keyframes ihb-desplegar {
	from { opacity: 0; transform: translateX(-0.6rem); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ihb-relojes--doble .ihb-reloj:last-child { animation: none; }
}

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

/*
 * DOS FICHAS DE UNA LÍNEA, no dos tarjetas.
 *
 * Antes cada reloj era una tarjeta apilada —sitio arriba, hora enorme debajo,
 * huso al pie— y las dos juntas ocupaban 90 px de pliegue. Aquí eso son 90 px
 * que le quitas al botón de comprar. Puestas en horizontal ocupan un tercio y
 * se comparan igual de rápido, que es lo único que tienen que hacer: el dato no
 * es «qué hora es en Chiquilá», es «no es la misma hora».
 */
.ihb-reloj {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.35rem;
	padding: 0.4rem 0.6rem;
	/* La franja de color es el código de huso: se aprende en diez segundos y
	   después se lee sin leer. */
	min-width: 0;
}

.ihb-reloj__lugar {
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--ihb-tinta, #011c40);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.ihb-reloj__hora {
	margin-left: auto;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.1;
	/* Cifras de ancho fijo: sin esto los dos relojes bailan al cambiar de
	   minuto y la comparación —que es el objetivo— se hace más difícil. */
	font-variant-numeric: tabular-nums;
}

/* El desfase UTC es detalle de experto y en el pliegue de un móvil no cabe.
   La línea del delta ya dice lo que hay que saber; esto reaparece en cuanto hay
   sitio. */
.ihb-reloj__huso {
	display: none;
	font-size: 0.8125rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
	font-variant-numeric: tabular-nums;
}

/*
 * EL TIEMPO, EN LA MISMA FICHA QUE LA HORA.
 *
 * El bloque grande de viento vive seis pantallas más abajo y ahí no llega
 * nadie que esté decidiendo si compra. Aquí van los tres datos que caben en
 * una línea —cielo, grados y viento— y el bloque de abajo se queda con lo que
 * no cabe: rachas, fuerza, mañana y la atribución que exige la licencia.
 *
 * Ocupa la segunda línea de la ficha, no compite con la hora: quien mira esta
 * tira busca primero qué hora es allí.
 */
.ihb-reloj__clima {
	flex: 1 0 100%;
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	font-size: 0.75rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
	font-variant-numeric: tabular-nums;
}

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

.ihb-reloj__cielo {
	font-size: 0.875rem;
	line-height: 1;
}

.ihb-reloj__temp {
	font-weight: 700;
	color: var(--ihb-tinta, #011c40);
}

/* La probabilidad de lluvia de hoy, con su gota, entre los grados y el viento. */
.ihb-reloj__lluvia {
	font-size: 0.8125rem;
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	margin-left: 0.35rem;
	font-weight: 600;
	color: var(--ihb-mar, #08668d);
}

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

.ihb-reloj__gota {
	display: inline-flex;
	line-height: 0;
}

.ihb-reloj__gota svg {
	width: 0.8rem;
	height: 0.9rem;
}

/* El sprite de iconos para el guion: nunca se ve. */
.ihb-relojes__sprite {
	display: none;
}

/* El viento cede el sitio antes que los grados si la ficha se estrecha. */
.ihb-reloj__viento {
	font-size: 0.8125rem;
	margin-left: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ihb-relojes__delta {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
	color: var(--ihb-marino, #011c40);
}

@media (min-width: 26rem) {
	.ihb-reloj__huso { display: inline; }
}

/*
 * ───── Teléfonos CORTOS (iPhone SE y compañía, 568 px de alto) ─────
 *
 * La consulta es por ALTO, no por ancho, y ésa es la clave: el problema de
 * estas pantallas no es que sean estrechas —caben dos columnas de sobra— es que
 * no hay píxeles verticales. Un móvil ancho y corto sufre lo mismo.
 *
 * Se recorta por orden de importancia inversa: primero la coletilla del horario
 * de verano, después el rótulo del buscador. Lo que no se toca nunca es la
 * cadena de la venta —qué vendemos, cuánto cuesta, el formulario y su botón—
 * porque ésa es la razón de existir de la página.
 */
@media (max-height: 40rem) {
	.ihb-relojes__nota {
		display: none;
	}

	/*
	 * El rótulo «Ver horarios y precio» se va de la VISTA pero no del
	 * documento. Con `display:none` desaparecería también para un lector de
	 * pantalla y el formulario se quedaría sin encabezado que lo anuncie;
	 * así sigue ahí para quien navega a ciegas y deja de gastar pliegue para
	 * quien mira. El título de la página ya dice de qué va esto.
	 */
	.ihb-portada__buscador .ihb__titulo {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.ihb-portada__hero {
		padding-top: 0.4rem;
		/* Cero: en 320x568 estos 8 px eran los ultimos que sobraban del pliegue. */
		padding-bottom: 0;
	}

	.ihb-portada__lema {
		margin-bottom: 0.3rem;
	}

	/*
	 * El último elemento del pliegue no lleva margen inferior. Lo heredaba de
	 * la regla genérica de párrafos y eran 12 px que no se ven pero sí obligan
	 * a deslizar: la página entera se movía para enseñar un hueco en blanco.
	 * En una pantalla que se ha diseñado para no deslizarse, eso lo estropea
	 * todo.
	 */
	.ihb-portada__alterna {
		margin-bottom: 0;
	}
}

/* ───────────────── Rutas disponibles ─────────────────
 *
 * Sólo existe cuando hay más de una ruta. Va DEBAJO del pliegue a propósito:
 * el buscador ya deja elegir cualquier par, así que esto no es la única puerta
 * sino un atajo para quien reconoce su ruta de un vistazo. Meterlo arriba
 * empujaría el botón de comprar fuera de la pantalla, que es justo lo que este
 * diseño se pasó una noche arreglando.
 */

.ihb-rutas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

/* La caja es el <li>, no el enlace: el chip de huso y su «?» van fuera del
   <a> —un botón dentro de un enlace no es válido— pero dentro de la ficha. */
.ihb-ruta {
	transition: border-color 0.2s ease, background 0.2s ease;
}

.ihb-ruta:hover,
.ihb-ruta:focus-within {
	border-color: var(--ihb-mar, #08668d);
	background: var(--ihb-arena, #fdf3e3);
}

.ihb-ruta__enlace {
	display: grid;
	gap: 0.15rem;
	padding: 0.85rem 1rem;
	text-decoration: none;
	color: inherit;
	/* 44 px de objetivo táctil: es una ficha para un pulgar. */
	min-height: 2.75rem;
}

.ihb-ruta__enlace:focus-visible {
	outline: 3px solid var(--ihb-marino, #011c40);
	outline-offset: -3px;
	border-radius: 0.75rem;
}

/* El pie: el chip y el «?», en fila. */
.ihb-ruta__pie {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1rem 0.8rem;
}

.ihb-ruta__par {
	font-weight: 700;
	font-size: 1rem;
	color: var(--ihb-marino, #011c40);
}

/* La flecha en el color de acento: es lo que distingue de un vistazo una ruta
   de ida y vuelta de una que sólo va en un sentido. */
.ihb-ruta__flecha {
	color: var(--ihb-mar, #08668d);
	font-weight: 400;
}

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

/* El aviso de cambio de hora vive EN LA FICHA de su ruta, no en un cartel
   general de la página. Es lo que permite que una ruta dentro del mismo estado
   —Chiquilá ↔ Cancún— no lo lleve: avisar de un cambio de hora que no existe
   siembra una duda donde no la había. */
/*
 * Texto MARINO, no naranja. El naranja atardecer sobre arena daba 2,52:1
 * medido — para 12 px negrita hacen falta 4,5:1, y ese par no llega ni de
 * lejos. El naranja sigue siendo la seña del huso, pero como BORDE, donde no
 * hay que leerlo; el texto va en marino sobre arena, que pasa de sobra.
 */
.ihb-ruta__huso {
	justify-self: start;
	margin: 0;
}

@media (min-width: 34rem) {
	.ihb-rutas {
		grid-template-columns: 1fr 1fr;
	}
}

/* ───────────────── La página de una ruta (.ihb-pagina) ─────────────────
 *
 * OJO AL NOMBRE. Esto se llamaba `.ihb-ficha` y chocó con la PIEZA `.ihb-ficha`
 * del sistema: cada tarjeta heredaba `margin: 0 auto` y `max-width` de aquí y
 * salía encogida y centrada (medido: 252, 285 y 178 px en tres fichas de la
 * misma rejilla). Envoltorio de página = `.ihb-pagina`; tarjeta = `.ihb-ficha`.
 *
 *
 * `/traslado/valladolid-a-chiquila/`. Es la página que tiene que posicionar,
 * así que aquí el titular SÍ nombra los dos sitios — es justo lo contrario que
 * en la portada, y a propósito: la portada es la puerta y no puede cerrarse a
 * un destino; esta página existe para un solo viaje.
 *
 * No lleva el `100svh` del pliegue de la portada. Quien llega aquí ya sabe a
 * dónde va y viene de un buscador: lo que necesita es el titular, el precio y
 * el formulario, en ese orden y sin ceremonia.
 */

.ihb-pagina {
	max-width: 40rem;
	margin: 0 auto;
	padding-top: 1.25rem;
}

/* La página de resultados es más ancha: son filas con columnas, y a 40 rem la
   hora, el cupo y el precio se pisaban. Sin titular arriba, empieza más cerca
   de la barra. */
.ihb-pagina--resultados {
	max-width: 46rem;
	padding-top: 0.9rem;
}

.ihb-pagina__h1 {
	margin: 0 0 0.3rem;
	font-size: clamp(1.35rem, 5.5vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ihb-marino, #011c40);
}

.ihb-pagina__resumen {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ihb-mar, #08668d);
}

/* El aviso de huso va DESPUÉS del formulario, no antes: quien llega a esta
   página viene a ver horarios, y un párrafo explicativo por delante retrasa lo
   que ha venido a buscar. Abajo lo lee quien ya eligió y le sirve de verdad. */
.ihb-pagina__huso {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1rem;
	border-left: 4px solid var(--ihb-atardecer, #da8842);
	border-radius: 0.6rem;
	background: var(--ihb-arena, #fdf3e3);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* ───────────────── Código de color por huso ───────────────── */

/* Un tono para Yucatán y otro para Quintana Roo, iguales en toda la página:
   relojes, fichas de paradero y horas dentro del texto. */
/* El huso es un ACENTO DE ZONA: la clase pone `--ihb-acento` y lo leen la
   ficha (su franja) y el chip (su borde). Antes era un `border-left-color`
   suelto que sólo servía a los relojes. */
.ihb-huso--yuc { --ihb-acento: var(--ihb-mar, #07668c); }
.ihb-huso--qroo { --ihb-acento: var(--ihb-oro-oscuro, #c08a22); }
.ihb-huso--otro { --ihb-acento: var(--ihb-linea, #e5e7eb); }

.ihb-hora {
	display: inline-block;
	padding: 0 0 0 0.45rem;
	border-left: 4px solid transparent;
	font-variant-numeric: tabular-nums;
}

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

/* ───────────────── Secciones ───────────────── */

.ihb-seccion {
	margin: 1.75rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ihb-linea, #e5e7eb);
}

.ihb-seccion__titulo {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--ihb-mar-oscuro, #082033);
}

.ihb-seccion__nota {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/* ───────────────── La cuenta hecha ───────────────── */

.ihb-cuenta {
	padding: 1.25rem 1rem;
}

.ihb-cuenta__linea {
	margin: 0 0 0.4rem;
}

.ihb-cuenta__etiqueta {
	display: inline-block;
	min-width: 3.2rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/*
 * La frase que desarma el error. Va destacada porque es la única línea de toda
 * la portada que, si se lee, evita perder un ferry. Sin fondo rojo ni icono de
 * alarma: es un dato, no un susto.
 */
.ihb-cuenta__remate {
	margin: 0.75rem 0 0;
	padding: 0.7rem 0.85rem;
	border-left: 4px solid var(--ihb-oro, #e8a712);
	border-radius: 0 0.5rem 0.5rem 0;
	background: var(--ihb-papel, #fff);
	font-weight: 700;
}

/* El sentido que GANA hora no lleva remate: no se grita donde no hay riesgo. */
.ihb-cuenta__nota {
	margin: 0.75rem 0 0;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/* La atribución de Open-Meteo (CC BY 4.0) va JUNTO a los datos, nunca en el
   pie de la página: la licencia lo exige así. Pequeña, no escondida. */
.ihb-clima__pie {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/* ───────────────── Ferris ───────────────── */

/* Se dice el margen aplicado antes de la lista: «próximas salidas» sin margen
   manda a alguien a correr al muelle por un barco que ya está soltando amarras. */
.ihb-ferris__intro {
	margin: 0 0 0.55rem;
	font-size: 0.875rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

.ihb-ferris__comun {
	margin: 0 0 1rem;
	padding: 0 0 0 1.1rem;
	font-size: 0.9375rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

.ihb-ferris__comun strong {
	color: var(--ihb-tinta, #082033);
}

/* En su página propia la sección es lo primero: sin el H1 de página que había
   encima, la raya y el margen superior de sección dejaban un hueco vacío bajo
   la barra. */
.ihb-portada > .ihb-seccion--ferris:first-child {
	margin-top: 0;
	padding-top: 1rem;
	border-top: 0;
}

/* ───────────────── El widget de horarios ─────────────────
 *
 * Adaptado del diseño propio («Widget Horarios», CodePen de KanZanSio) y
 * replanteado como TABLERO: una fila de controles (naviera con logotipo y color
 * de marca, sentido) y, en PC, dos columnas —la tarjeta «Siguiente barco» y la
 * rejilla de horas—; en móvil, apiladas en ese orden. Los textos informativos
 * van en pop ups `<details>`.
 *
 * El color de la naviera activa viaja en `--ihb-nav` (y `--ihb-nav-claro`): el
 * guion lo copia de la pestaña al contenedor y de ahí lo toman el sentido
 * activo, la hora marcada, la tarjeta y el botón de la web. Todo lo demás
 * sigue en la paleta de la casa.
 *
 * Los botones van anclados con `html body.ihb-lienzo-activo` por lo mismo que
 * la barra: el lienzo declara `button` a lo ancho y con fondo, y sin anclar
 * cada pestaña saldría como un botón de comprar.
 */
.ihb-fw {
	--ihb-nav: var(--ihb-mar, #08668d);
	--ihb-nav-claro: var(--ihb-marino, #011c40);

	/*
	 * EL SEMÁFORO. Tres pasteles, uno por estado, y NO son colores de
	 * semáforo de manual: están desaturados y tirados a cálido para que se
	 * apoyen en la arena de la marca en vez de pelearse con ella. Cada uno
	 * lleva su tinta oscura de la misma familia, medida contra su propio
	 * fondo —lo que se pinta encima de un pastel casi siempre falla el
	 * contraste, y aquí hay texto de 11 px—:
	 *
	 *   rojo   #8a2f10 sobre #f8e7e2 = 8,4:1   (ya salió)
	 *   ámbar  #7a4a12 sobre #fdeecd = 7,1:1   (muy justo)
	 *   verde  #ffffff sobre #17683f = 6,1:1   (siguiente, en sólido)
	 *
	 * El verde va sólido y los otros dos en pastel a propósito: de los tres
	 * estados sólo uno es una recomendación, y tiene que ganar la mirada.
	 */
	--ihb-fw-ido: #f8e7e2;
	--ihb-fw-ido-linea: #e6bfb3;
	--ihb-fw-ido-tinta: #8a2f10;

	--ihb-fw-justo: #fdeecd;
	--ihb-fw-justo-linea: #e9c78a;
	--ihb-fw-justo-tinta: #7a4a12;

	--ihb-fw-vale: #17683f;
	--ihb-fw-vale-suave: #e3efe6;
	--ihb-fw-vale-linea: #a8ccb3;
	--ihb-fw-vale-tinta: #12603a;

	display: grid;
	gap: 0.9rem;
}

/* La cabecera de la sección: título a la izquierda, «Cómo funciona» a la derecha. */
.ihb-fw__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 0.9rem;
}

.ihb-fw__cabecera .ihb-seccion__titulo {
	margin: 0;
}

/* Sin guion no hay pestañas: se ven los paneles seguidos, cada uno con su
   título. Con guion, las pestañas mandan y los títulos se van de la vista
   (no del documento: el panel sigue teniendo nombre para un lector). */
.ihb-fw:not(.ihb-fw--vivo) .ihb-fw__controles {
	display: none;
}

.ihb-fw__titulo {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
}

.ihb-fw--vivo .ihb-fw__titulo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Controles: dos grupos segmentados en una fila (dos filas en móvil). ── */
.ihb-fw__controles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
}

/* En móvil cada grupo ocupa el ancho; con sitio, un ancho fijo por grupo:
   la píldora trabaja en porcentajes y quiere un carril de medida conocida. */
.ihb-fw__navieras,
.ihb-fw__sentidos {
	flex: 1 1 100%;
	min-width: 0;
}

/* La píldora de los dos grupos lleva el color de la naviera activa
   (`--ihb-nav` sube al contenedor desde el guion): al cambiar de naviera
   cambian de color las dos, y el sentido queda «de» esa naviera. */
.ihb-fw .ihb-segmentado {
	--ihb-seg-pildora: var(--ihb-nav, var(--ihb-mar));
}

.ihb-fw__logo {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	object-fit: contain;
	flex: none;
	/* Sin transición en `filter`: interpolar `invert()` pasa por un amarillo raro. */
}

/* En la pestaña activa el logotipo va en blanco sobre el color de la marca. */
.ihb-fw__naviera.is-activa .ihb-fw__logo {
	filter: brightness(0) invert(1);
}

/* ── El panel: tarjeta + rejilla. ── */
.ihb-fw__panel {
	display: grid;
	gap: 0.9rem;
}

/*
 * El fundido de entrada es SÓLO al cambiar de pestaña, no al cargar la página.
 * Cuando estaba en `.ihb-fw__panel` a secas, cualquier captura hecha en los
 * primeros 300 ms pillaba el panel a medio aparecer y la tarjeta salía
 * descolorida — así llegó la queja, con el botón «Web de…» lavado. Al cargar,
 * lo que se ve es lo que hay; el movimiento se reserva para responder a un
 * clic, que es cuando de verdad informa de que algo cambió.
 */
.ihb-fw--cambia .ihb-fw__panel:not([hidden]) {
	animation: ihb-fw-entra 0.3s ease;
}

/* `display: grid` le gana al `[hidden]` del navegador: sin esta línea los
   cuatro paneles se veían a la vez (medido). */
.ihb-fw__panel[hidden] {
	display: none;
}

@keyframes ihb-fw-entra {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* La tarjeta «Siguiente barco»: la respuesta, con el color de la naviera al canto. */
.ihb-fw__siguiente {
	--ihb-acento: var(--ihb-nav);
	display: grid;
	gap: 0.2rem;
	padding: 0.9rem 1rem;
}

.ihb-fw__sig-etiqueta {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

.ihb-fw__sig-hora {
	margin: 0;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--ihb-marino, #011c40);
}

.ihb-fw__sig-en {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ihb-nav);
}

.ihb-fw__sig-en:empty {
	display: none;
}

.ihb-fw__sig-margen {
	margin: 0.1rem 0 0;
	font-size: 0.8125rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/* Tarifas en una línea; las condiciones, en su pop up. */
.ihb-fw__tarifas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.9rem;
	margin: 0.6rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--ihb-linea, #e5e7eb);
	font-size: 0.9375rem;
}

.ihb-fw__tarifa b {
	color: var(--ihb-marino, #011c40);
}

.ihb-fw__web {
	justify-self: start;
	margin: 0.7rem 0 0;
}

/* La rejilla: fichas pequeñas, cuatro por fila en móvil. */
.ihb-fw__horas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* Todas las filas iguales aunque sólo algunas fichas lleven rótulo: sin
	   esto la fila del «siguiente» crecía y las de abajo quedaban más bajas,
	   y una rejilla de horas con filas desiguales se lee como un error. */
	grid-auto-rows: 1fr;
	gap: 0.4rem;
}

/* Cada ficha: la hora y, debajo, en qué estado está. */
.ihb-fw__hora {
	border-radius: var(--ihb-radio-ficha-chica);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	padding: 0.45rem 0.2rem;
	border: 2px solid var(--ihb-linea, #c4bba6);
	background: var(--ihb-arena, #fdf3e3);
	color: var(--ihb-tinta, #011c40);
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

/* El rótulo del estado. Vacío no ocupa: las horas sin estado —las de más
   tarde— se quedan del alto de siempre en vez de reservar una línea en blanco. */
.ihb-fw__estado {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

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

/* Rojo: ya salió. En pastel, no en gris: gris dice «desactivado» y esto no
   está desactivado, ha pasado. */
.ihb-fw__hora.is-pasada {
	background: var(--ihb-fw-ido);
	border-color: var(--ihb-fw-ido-linea);
	color: var(--ihb-fw-ido-tinta);
	font-weight: 600;
}

/* Ámbar: zarpa dentro del margen de taquilla. Se ve, pero no se recomienda,
   y el borde discontinuo lo dice sin depender del color. */
.ihb-fw__hora.is-justa {
	background: var(--ihb-fw-justo);
	border-color: var(--ihb-fw-justo-linea);
	border-style: dashed;
	color: var(--ihb-fw-justo-tinta);
}

/* Verde y sólido: el que se coge. Es el único de los tres que recomienda algo. */
.ihb-fw__hora.is-siguiente {
	background: var(--ihb-fw-vale);
	border-color: var(--ihb-fw-vale);
	color: #fff;
	box-shadow: 0 4px 12px rgba(1, 28, 64, 0.16);
}

/* Sólo queda el huso: el resto de la leyenda vive ya dentro de cada hora. */
.ihb-fw__leyenda {
	margin: 0.5rem 0 0;
	text-align: right;
	font-size: 0.75rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

@media (prefers-reduced-motion: reduce) {
	.ihb-fw--cambia .ihb-fw__panel:not([hidden]),
	.ihb-pop__caja,
	.ihb-pop__fondo { animation: none; }
}

/* A 320 px el carril mide 288 px y la opción activa 216: el texto cabe si
   baja un punto y el logotipo se aprieta. */
@media (max-width: 22.5rem) {
	.ihb-fw__naviera,
	.ihb-fw__sentido {
		padding: 0 0.5rem;
		font-size: 0.875rem;
	}

	.ihb-fw__logo {
		width: 1.5rem;
		height: 1.5rem;
	}
}

/* ── Con sitio: los grupos en una fila y el panel en dos columnas. ── */
@media (min-width: 40rem) {
	.ihb-fw__navieras,
	.ihb-fw__sentidos {
		flex: 0 1 19rem;
	}

	.ihb-fw__horas {
		grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
	}
}

/*
 * EN PC: TARJETA A LA IZQUIERDA, REJILLA A LA DERECHA — y la rejilla LLENA.
 *
 * Ese reparto es el bueno (la respuesta a un lado, el contexto al otro), pero
 * en la primera versión la rejilla medía dos filas de fichas pequeñas y bajo
 * ella quedaba un hueco del alto de la tarjeta. Hubo un intento de tarjeta en
 * banda a todo el ancho que resolvía el hueco y estropeaba el reparto; se
 * descartó. Ahora la rejilla se ESTIRA hasta la altura de la tarjeta: menos
 * columnas, más filas y `grid-auto-rows: 1fr`, así que las fichas crecen para
 * ocupar exactamente el sitio que hay. El hueco no se rellena con aire: se
 * reparte entre las horas, que es lo que se ha venido a mirar.
 */
@media (min-width: 52rem) {
	.ihb-fw--vivo .ihb-fw__panel {
		grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
		align-items: stretch;
		gap: 1.25rem;
	}

	.ihb-fw--vivo .ihb-fw__sig-hora {
		font-size: 3rem;
	}

	/* La columna derecha: la rejilla manda y la leyenda se queda abajo. */
	.ihb-fw--vivo .ihb-fw__rejilla {
		display: flex;
		flex-direction: column;
	}

	.ihb-fw--vivo .ihb-fw__horas {
		flex: 1 1 auto;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 1fr;
		gap: 0.6rem;
	}

	/* Fichas grandes: el número centrado en su caja, no pegado arriba. */
	.ihb-fw--vivo .ihb-fw__hora {
		padding: 0.5rem;
		border-radius: 0.7rem;
		font-size: 1.375rem;
	}

	.ihb-fw--vivo .ihb-fw__estado {
		font-size: 0.75rem;
	}

	.ihb-fw--vivo .ihb-fw__leyenda {
		margin-top: 0.7rem;
	}
}

/* El encuadre honesto: no los vendemos. Gris y al pie del bloque, pero legible:
   esta línea nos protege cuando un barco se retrasa. */
.ihb-fuente {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/* ───────────────── Paraderos ───────────────── */

.ihb-paraderos {
	display: grid;
	gap: 1rem;
}

/*
 * FICHA COMPACTA. Cuatro paraderos ocupaban 1107 px de móvil —pantalla y
 * cuarto— con un botón azul a todo lo ancho cada uno. El mapa no es la acción
 * principal de esta página; la compra lo es. Ahora: nombre con su huso al
 * lado, dirección y referencia, y las dos acciones como pastillas en fila.
 */
.ihb-paradero {
	padding: 0.85rem 0.9rem;
}

.ihb-paradero__nombre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.5rem;
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
}

/* El huso, junto al nombre y en pastilla: es una etiqueta del lugar, no un
   párrafo. La franja de color es la misma que la de los relojes. */
.ihb-paradero__huso {
}

/* La foto de la esquina sustituye al mapa embebido: pesa menos, no es una
   llamada a un tercero y se ve igual sin conexión una vez cargada. */
.ihb-paradero__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	margin-bottom: 0.6rem;
}

.ihb-paradero__dir,
.ihb-paradero__ref {
	margin: 0 0 0.25rem;
	font-size: 0.9375rem;
	line-height: 1.35;
}

.ihb-paradero__ref {
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/*
 * Las coordenadas como TEXTO. Es lo único de esta ficha que sigue funcionando
 * sin red: se copian con una pulsación larga y se pegan en un WhatsApp para
 * pedir un taxi. `user-select: all` hace que una sola pulsación seleccione las
 * dos cifras enteras en vez de media.
 */
.ihb-paradero__coords {
	margin: 0 0 0.6rem;
	font-size: 0.9375rem;
}

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

.ihb-paradero__coords code {
	display: inline-block;
	padding: 0.2rem 0.4rem;
	border-radius: 0.3rem;
	background: var(--ihb-arena, #f7f0df);
	font-variant-numeric: tabular-nums;
	user-select: all;
	-webkit-user-select: all;
}

.ihb-paradero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
}

/* Dos paraderos por fila en cuanto hay sitio: son fichas cortas. */
@media (min-width: 34rem) {
	.ihb-paraderos {
		grid-template-columns: 1fr 1fr;
	}
}

/* ───────────────── Clima ───────────────── */

/*
 * AQUÍ NO HAY SEMÁFORO DE CRUCE, y su ausencia es la regla, no un olvido de
 * maquetación. Sólo tenemos viento y rachas; el estado del mar en una laguna
 * de 9 km no lo resuelve ningún modelo global, y quien suspende el ferry es la
 * Capitanía de Puerto. Una franja verde que diga «cruce normal» sería una
 * autoridad inventada delante de gente que se va a subir a un barco. Si
 * alguien vuelve a necesitar estas clases, el problema está en el PHP.
 *
 * Viento primero, temperatura al final. El orden es la información: el turista
 * consulta esto para saber cómo viene el mar, no para vestirse.
 */
.ihb-clima__datos {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.25rem;
}

.ihb-clima__datos strong {
	display: inline-block;
	min-width: 7rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
	font-weight: 600;
}

.ihb-clima__dias {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}

.ihb-clima__dias li {
	display: grid;
	gap: 0.1rem;
	padding: 0.5rem;
	border: 1px solid var(--ihb-linea, #e5e7eb);
	border-radius: 0.5rem;
	text-align: center;
	font-size: 0.8125rem;
}

.ihb-clima__dia {
	font-weight: 700;
}

.ihb-clima__viento {
	color: var(--ihb-mar-oscuro, #082033);
}

.ihb-clima__temp {
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/* ───────────────── Preguntas ───────────────── */

/* Acordeón nativo: cerrado por defecto, sin JavaScript y sin peso. */
.ihb-faq__item {
	border-bottom: 1px solid var(--ihb-linea, #e5e7eb);
}

.ihb-faq__item summary {
	padding: 0.7rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	/* 44 px de alto real: un resumen de acordeón es un objetivo táctil. */
	min-height: 2.75rem;
	list-style-position: inside;
}

.ihb-faq__item summary:focus-visible {
	outline: 3px solid var(--ihb-mar, #07668c);
	outline-offset: 2px;
}

.ihb-faq__item p {
	margin: 0 0 0.9rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/* En el bloque de la cuenta, el desplegable «¿por qué cambia la hora?» va sin
   línea inferior: cierra la tarjeta, no abre una lista. */
.ihb-cuenta .ihb-faq__item {
	border-bottom: 0;
	margin-top: 0.5rem;
}

/* ───────────────── Contacto y legal ───────────────── */

.ihb-contacto__quienes {
	margin: 0 0 0.9rem;
}

.ihb-contacto__acciones {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.ihb-contacto__horario {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

.ihb-resenas {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.ihb-resena blockquote {
	margin: 0;
	padding: 0.75rem 0.9rem;
	border-radius: 0.5rem;
	background: var(--ihb-arena, #f7f0df);
	font-size: 0.9375rem;
}

.ihb-resena cite {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	font-style: normal;
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/* Tres líneas. Cada enlace de más en un pie es una fuga del embudo. */
.ihb-legal {
	margin: 2rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--ihb-linea, #e5e7eb);
	font-size: 0.8125rem;
	color: var(--ihb-tinta-suave, #3d4a5c);
	text-align: center;
}

.ihb-legal a {
	color: var(--ihb-tinta-suave, #3d4a5c);
}

/* ───────────────── Escritorio ───────────────── */

/*
 * Sólo dos cambios, y ninguno reordena nada: en un negocio de turistas con el
 * móvil en la mano, el escritorio es el caso raro. Se aprovecha el ancho para
 * poner los dos paraderos en paralelo y agrandar un poco el título; lo demás se
 * queda exactamente igual que en móvil.
 */
@media (min-width: 40rem) {
	.ihb-portada__h1 {
		font-size: 1.875rem;
	}

	.ihb-paraderos {
		grid-template-columns: 1fr 1fr;
	}

	.ihb-contacto__acciones {
		grid-template-columns: 1fr 1fr;
	}
}

/* ───────────────── Escritorio: columnas ─────────────────
 *
 * A 1440 px la portada era un formulario en el centro de un desierto: el hero
 * mide una pantalla entera y la lista de rutas quedaba debajo, fuera de la
 * vista. Con sitio de sobra, el hero se queda a la izquierda y las rutas suben
 * a su derecha, en filas, dentro de la misma pantalla. En móvil no cambia nada:
 * el pliegue de una vista sigue siendo el que era.
 */
@media (min-width: 64rem) {
	.ihb-portada {
		/* La columna única era de 40 rem; dos columnas necesitan el ancho del lienzo. */
		max-width: 64rem;
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: 3rem;
		align-items: center;
	}

	.ihb-portada > * {
		grid-column: 1 / -1;
	}

	.ihb-portada > .ihb-portada__hero {
		grid-column: 1;
		grid-row: 1;
		/*
		 * NO una pantalla entera. Aquí ponía `100svh` heredado del pliegue del
		 * móvil, y en un portátil eso dejaba cuatrocientos píxeles de crema
		 * encima y otros tantos debajo de un buscador de trescientos: la
		 * página empezaba con un vacío. El pliegue de una sola vista es un
		 * contrato del TELÉFONO, donde el botón de comprar tiene que caber sin
		 * deslizar; en escritorio cabe de sobra y lo que hace falta es que se
		 * vea lo siguiente. Pero tampoco al revés: el primer recorte lo dejó en
		 * 26 rem y el hero quedó apretado contra la barra. Éste da respiro al
		 * buscador y enseña el borde de la sección de abajo, que es lo que
		 * invita a seguir.
		 */
		min-height: 32rem;
		justify-content: center;
	}

	/* Arriba del todo y sin la línea: en dos columnas la raya no separa nada
	   —a su izquierda no hay sección que termine— y el hueco que dejaba
	   encima del título era aire muerto. El cliente lo marcó en rojo. */
	.ihb-portada > .ihb-seccion--rutas {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		margin: 0;
		padding-top: 0;
		border-top: 0;
	}

	/* En la columna, las rutas van en filas, no en dos columnas. */
	.ihb-seccion--rutas .ihb-rutas {
		grid-template-columns: 1fr;
	}
}

/* ───────────────── Aire, no compresión ─────────────────
 *
 * PRIMER INTENTO EQUIVOCADO, y queda escrito porque es fácil repetirlo.
 * «Achocado» se leyó como «demasiado largo» y la respuesta fue bajar
 * rellenos y tipografías: la página encogió de 5234 a 4539 px y quedó PEOR,
 * porque apretar es justo lo contrario de descongestionar. El cliente lo dijo
 * en una línea: «saturaste tanto móvil como PC cuando debías hacerlo al revés».
 *
 * En un teléfono el scroll es gratis y la atención no. Lo que cansa no es
 * deslizar, es no saber dónde acaba una cosa y empieza la siguiente. Así que
 * aquí se va en la otra dirección: más separación entre secciones, más
 * respiro dentro de cada tarjeta y objetivos táctiles más grandes. Lo que sí
 * se queda de aquella pasada es lo estructural —pastillas en vez de botones a
 * todo lo ancho, advertencias en pop up—, porque eso quitaba ruido, no aire.
 */
@media (max-width: 40rem) {
	.ihb-seccion {
		margin: 2.5rem 0;
		padding-top: 1.75rem;
	}

	.ihb-seccion__titulo {
		margin-bottom: 1rem;
		font-size: 1.25rem;
	}

	/*
	 * EL AIRE ENTRE EL BUSCADOR Y EL CATÁLOGO, MEDIDO.
	 *
	 * Entre el final de la ficha del reloj y el titular «A dónde te llevamos»
	 * había 100 px, y no los ponía nadie a propósito: son cuatro valores
	 * razonables por separado que se suman —0,5 del reloj + 1,5 de aquí + 2,5
	 * del margen de la sección + 1,75 de su relleno—.
	 *
	 * En un teléfono de 812 px de alto daba igual: el catálogo asomaba y se
	 * veía que había más abajo. En uno de 667 —el iPhone SE y compañía— la
	 * primera salida caía ENTERA fuera del pliegue y la página parecía
	 * terminar en el formulario. La consulta por alto que recorta esto empieza
	 * en 640 px, así que entre 641 y ~750 no la ayudaba nadie.
	 *
	 * Se quitan 36 px de los dos sitios donde el aire está repetido. El corte
	 * entre secciones no se pierde: la sección ya trae su propio `border-top`
	 * y su relleno, que es quien hace ese trabajo de verdad.
	 */
	.ihb-portada__hero {
		padding-bottom: 0.5rem;
	}

	.ihb-portada .ihb-seccion {
		margin-top: 1.25rem;
	}

	/* El hero era lo más apretado de la página: titular, lema, rótulo, cuatro
	   campos y un botón, todo a 0,15 rem uno de otro. El pliegue de una sola
	   vista sigue siendo sagrado en pantallas cortas —de eso se encarga la
	   consulta por alto de más abajo—, pero en un teléfono alto sobra sitio y
	   apretarlo no compraba nada. */
	.ihb-portada__h1 {
		margin-bottom: 0.4rem;
	}

	.ihb-portada__lema {
		margin-bottom: 0.9rem;
	}

	.ihb-portada__buscador .ihb__titulo {
		margin-bottom: 0.85rem;
	}

	.ihb-buscador {
		gap: 0.85rem;
		padding: 1.1rem;
	}

	/* El buscador y su tira de estado, separados de lo que viene después. */
	.ihb-relojes {
		margin: 1rem 0 0.5rem;
	}

	.ihb-reloj {
		padding: 0.6rem 0.75rem;
		gap: 0.25rem 0.5rem;
	}

	.ihb-portada__alterna {
		margin-top: 1rem;
	}

	/* Las fichas de ruta, sueltas: son tres decisiones, no una lista. */
	.ihb-rutas {
		gap: 0.85rem;
	}

	.ihb-ruta__enlace {
		padding: 1rem 1.1rem;
	}

	.ihb-cuenta {
		padding: 1.25rem 1.1rem;
	}

	.ihb-cuenta__linea {
		margin-bottom: 0.6rem;
	}

	.ihb-cuenta__remate {
		margin-top: 1rem;
		padding: 0.9rem 1rem;
	}

	/* Ferry: la tarjeta y la rejilla, cada una con su sitio. */
	.ihb-fw {
		gap: 1.1rem;
	}

	.ihb-fw__siguiente {
		padding: 1.1rem 1.15rem;
	}

	.ihb-fw__sig-margen {
		margin-top: 0.35rem;
	}

	.ihb-fw__tarifas {
		margin-top: 0.9rem;
		padding-top: 0.9rem;
	}

	.ihb-fw__horas {
		gap: 0.5rem;
	}

	.ihb-fw__hora {
		padding: 0.65rem 0.25rem;
	}

	/* Paraderos: la estructura compacta se queda; el aire vuelve. */
	.ihb-paraderos {
		gap: 1.1rem;
	}

	.ihb-paradero {
		padding: 1.1rem 1.15rem;
	}

	.ihb-paradero__nombre {
		margin-bottom: 0.6rem;
	}

	.ihb-paradero__dir,
	.ihb-paradero__ref {
		margin-bottom: 0.4rem;
	}

	.ihb-paradero__acciones {
		margin-top: 0.9rem;
		gap: 0.5rem;
	}

	.ihb-clima__lugar {
		padding: 1.1rem 1.15rem;
	}

	/* Preguntas: 52 px de alto por fila. Un acordeón con seis preguntas
	   pegadas se lee como un muro; separadas, como seis puertas. */
	.ihb-faq__item summary {
		padding: 0.95rem 0;
		font-size: 1rem;
		min-height: 3.25rem;
	}

	.ihb-faq__item p {
		margin-bottom: 1.1rem;
	}

	.ihb-contacto__acciones {
		gap: 0.75rem;
		margin-bottom: 1rem;
	}
}

/* En escritorio el ritmo también sube: las secciones se separan y el hero deja
   respirar al buscador sin comerse una pantalla entera. */
@media (min-width: 64rem) {
	.ihb-portada > .ihb-seccion,
	.ihb-portada > .ihb-clima {
		margin: 2.75rem 0;
		padding-top: 2rem;
	}
}

/* La advertencia del viento: el pop up va debajo de las tarjetas, alineado a
   la izquierda como el resto del bloque. */
.ihb-clima__aviso {
	margin: 0 0 0.6rem;
}

/* La página de información: el h1 de página arriba y la primera sección
   pegada a él, sin su raya. Lo mismo que la ficha de ferris en su página. */
.ihb-informacion > .ihb-pagina__h1 {
	margin-bottom: 0.25rem;
}

.ihb-informacion > .ihb-pagina__h1 + .ihb-seccion {
	margin-top: 1rem;
	padding-top: 0;
	border-top: 0;
}

/* Las próximas salidas, bajo las rutas de la portada. */
.ihb-seccion__titulo--proximas {
	margin-top: 1.5rem;
}

/* ───────────────── Información turística: el tablero ─────────────────
 *
 * «Rediseña toda la página.» Cuatro tarjetas del sistema en una rejilla y
 * el legal en una línea. En móvil se apilan en el orden en que importan
 * —la hora que cambia primero, porque es la que cuesta un ferry—; en PC,
 * una rejilla de tres columnas: la hora (1) y el viento (2) arriba, las
 * preguntas (2) y el contacto (1) debajo. Cada bloque conserva su marcado;
 * aquí se le quita la raya y el margen de sección y se le da la tarjeta.
 */
.ihb-info__cabecera { margin: 0 0 1.25rem; }
.ihb-info__cabecera .ihb-pagina__h1 { margin-bottom: 0.35rem; }
.ihb-info__lema { margin: 0; max-width: 40rem; color: var(--ihb-tinta-suave); }

.ihb-info__rejilla {
	display: grid;
	gap: 1rem;
}

.ihb-info__tarjeta {
	padding: 1.1rem 1.15rem;
	min-width: 0;
}

/* Los bloques dentro de la tarjeta: sin su raya, sin su margen, sin su caja. */
.ihb-info__tarjeta > .ihb-seccion,
.ihb-info__tarjeta > .ihb-clima,
.ihb-info__tarjeta > .ihb-cuenta {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.ihb-info__tarjeta :is(h2) {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
}

/* La hora: la tarjeta arena, el remate en papel. */
.ihb-info__tarjeta--hora { background: var(--ihb-arena); }
.ihb-info__tarjeta--hora .ihb-seccion__nota { margin-top: 0.75rem; }
.ihb-cuenta__mas { margin: 0.75rem 0 0; }

/* El viento: los dos lugares como losas arena dentro de la tarjeta. */
.ihb-info__tarjeta--viento .ihb-clima__lista {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ihb-info__tarjeta--viento .ihb-clima__lugar {
	border: 0;
	box-shadow: none;
	background: var(--ihb-arena);
}

.ihb-info__tarjeta--viento .ihb-clima__aviso { margin: 0.75rem 0 0.35rem; }

/* Las preguntas: acordeón con un «+» en círculo que se vuelve «−». */
.ihb-info__tarjeta--faq .ihb-faq__item { border-bottom: 1px solid var(--ihb-linea); }
.ihb-info__tarjeta--faq .ihb-faq__item:last-child { border-bottom: 0; }

.ihb-info__tarjeta--faq .ihb-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	list-style: none;
	padding: 0.65rem 0;
}

.ihb-info__tarjeta--faq .ihb-faq__item summary::-webkit-details-marker { display: none; }

.ihb-info__tarjeta--faq .ihb-faq__item summary::after {
	content: "+";
	flex: none;
	display: inline-grid;
	place-items: center;
	width: var(--ihb-circulo-m);
	height: var(--ihb-circulo-m);
	border: 1px solid var(--ihb-linea);
	border-radius: 50%;
	color: var(--ihb-mar);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	transition: background-color var(--ihb-t-rapida) var(--ihb-curva), color var(--ihb-t-rapida) var(--ihb-curva);
}

.ihb-info__tarjeta--faq .ihb-faq__item[open] summary::after {
	content: "−";
	background: var(--ihb-marino);
	border-color: var(--ihb-marino);
	color: #fff;
}

.ihb-info__tarjeta--faq .ihb-faq__item p { margin: 0 0 0.9rem; }

/* El contacto: los botones en columna y el horario debajo. */
.ihb-info__tarjeta--contacto .ihb-contacto__acciones { margin-bottom: 0.6rem; }
.ihb-info__tarjeta--contacto .ihb-contacto__horario { margin-bottom: 0; }

/* El legal, una línea sin raya: la tarjeta de arriba ya cierra. */
.ihb-info .ihb-legal { margin-top: 1.5rem; padding-top: 0; border-top: 0; }

@media (min-width: 52rem) {
	.ihb-info__rejilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
		align-items: stretch;
	}

	.ihb-info__tarjeta { padding: 1.35rem 1.5rem; }
	.ihb-info__tarjeta--hora { grid-column: span 1; }
	.ihb-info__tarjeta--viento { grid-column: span 2; }
	.ihb-info__tarjeta--faq { grid-column: span 2; }
	.ihb-info__tarjeta--contacto { grid-column: span 1; }

	.ihb-info__tarjeta--viento .ihb-clima__lista { grid-template-columns: 1fr 1fr; }

	/* Las seis preguntas en dos columnas: seis puertas, no un muro. */
	.ihb-info__faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; align-items: start; }
}