/*
 * Isla Holbox — el LIENZO: el suelo sobre el que se pintan las pantallas.
 *
 * Este archivo existe porque la portada se veía sucia y no era culpa de sus
 * colores: el tema pintaba un fondo oscuro por debajo de unas tarjetas claras,
 * y encima quedaban restos de otros plugins (una barra de banderas, unas migas
 * de navegación). Un componente no puede arreglar eso desde dentro — hace falta
 * que alguien declare el suelo.
 *
 * POR QUÉ `html body.ihb-lienzo-activo` Y NO `.ihb-lienzo-activo`.
 * Ésta fue la causa real del fondo negro, y merece quedar escrita porque no se
 * ve a simple vista. El tema declara `body.kz-body { background: … !important }`.
 * Nuestra regla también llevaba `!important`, así que el empate no lo rompe la
 * fuerza: lo rompe la ESPECIFICIDAD. `body.kz-body` es (0,1,1) y
 * `.ihb-lienzo-activo` es (0,1,0) — ganaba el tema. Añadir más `!important` no
 * habría servido de nada; anclar al elemento sí. Con `html body.…` somos (0,1,2)
 * y la discusión se acaba.
 *
 * REGLA: todo aquí va bajo `.ihb-lienzo-activo`, la clase que el plugin pone
 * SOLO en sus propias pantallas. Fuera de ellas —el blog, la tienda, una página
 * del cliente— este archivo no toca absolutamente nada. Un plugin que reescribe
 * el sitio entero es un plugin que acaba desinstalado.
 *
 * CERO LLAMADAS FUERA: ni tipografías ni iconos de terceros. El cliente de este
 * sitio es un turista de pie en una calle, con sol, una maleta y media raya de
 * señal; una fuente remota es medio segundo de texto invisible justo cuando
 * está decidiendo si compra. La marca la sostiene el isotipo, que es un SVG
 * local, y no la tipografía.
 */

/* ───────────────── Paleta oficial ─────────────────
 *
 * Tomada del manual de identidad (Express Travel Holbox) y verificada contra el
 * SVG original del logo, que es la fuente autorizada: los tres primeros valores
 * son literalmente los `fill` que trae el archivo del logotipo. No son
 * aproximaciones a ojo de una captura.
 */

html body.ihb-lienzo-activo {
	/*
	 * SIN PALETA PROPIA. Aquí había una copia de los colores de la marca, y
	 * desde que la paleta vive en `:root` (frontend.css) esta copia GANABA
	 * por especificidad a todo lo de dentro: el buscador se pintaba con el
	 * dorado del sol porque esta copia llamaba «arena» al sol. Una sola
	 * fuente de verdad; el lienzo sólo consume.
	 */


	/* EL SUELO. Sin esto, una tarjeta clara flota sobre lo que decidiera el
	   tema, que puede ser negro. */
	background: var(--ihb-crema) !important;
	color: var(--ihb-tinta) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/*
	 * PESO 400 A LA FUERZA. El tema (Twenty Twenty-Five) declara `font-weight:
	 * 300` en `body` desde sus estilos globales, y con Segoe UI eso es la
	 * variante Light: todo el texto corriente salía fino y «se perdía» aunque
	 * cada color diera más de 7:1. Medido: lema, datos de ruta, reloj y pie,
	 * todos a 300 sin que ningún CSS nuestro lo pidiera. Tamaño y espaciado se
	 * fijan por lo mismo. Los estilos globales del tema se descuelgan además
	 * en `encolar()`; esto es el cinturón por si otro tema los mete de otra
	 * forma.
	 */
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0;
	line-height: 1.5;
	margin: 0;
	/* La barra inferior de algunos teléfonos se come el último botón. */
	padding-bottom: env(safe-area-inset-bottom, 0);
}

/*
 * LO QUE DEJAN OTROS DUEÑOS ENCIMA —barras inferiores fijas, selectores de
 * idioma flotantes, migas— NO se oculta aquí: la lista vive en PHP, en
 * `IHB_Lienzo::estorbos()`, y se imprime como regla en línea.
 *
 * No es un capricho de organización. Esa lista depende del tema y de los
 * plugins de CADA instalación, y este plugin va a acabar en sitios que no hemos
 * visto. En PHP es un filtro que quien integre extiende en una línea; aquí sería
 * una lista fija que o crece sin parar o deja fuera al siguiente.
 */

/* La portada trae su propia barra de marca, heredada de cuando el tema mandaba.
   Con el lienzo puesto sobrarían dos barras apiladas comiéndose el pliegue, que
   es exactamente lo que este diseño evita. Manda la del lienzo. */
.ihb-lienzo-activo .ihb-portada__barra {
	display: none !important;
}

/* `:visited` incluido a propósito: sin él el navegador pinta de morado los
   enlaces ya usados, y en una portada de marca eso se ve como un error. Aquí
   se notaba en «Prefiero escribir por WhatsApp», que es un enlace que la misma
   persona toca más de una vez. */
html body.ihb-lienzo-activo a:not([class*="ihb-"]),
html body.ihb-lienzo-activo a:not([class*="ihb-"]):visited { color: var(--ihb-mar); }

/*
 * Área táctil de los enlaces de texto: 19 px de alto medidos por el QA, y
 * WCAG 2.2 pide 24. El relleno vertical en un elemento EN LÍNEA no mueve las
 * líneas ni rompe el ajuste del texto —el navegador lo ignora para maquetar—
 * pero SÍ cuenta para el toque. Es la única forma de agrandar el objetivo sin
 * convertir cada enlace en un bloque y descolocar los párrafos.
 */
html body.ihb-lienzo-activo p > a:not([class*="ihb-"]) { padding: 0.25rem 0; }

/* ───────────────── La barra de arriba ───────────────── */

/*
 * 3 rem exactas, y el número importa: el alto del pliegue se calcula restándolo
 * (`calc(100svh - 3rem)` en portada.css). Si esta barra crece, la portada deja
 * de caber en una pantalla. Cambiar uno obliga a cambiar el otro.
 */
.ihb-barra {
	background: var(--ihb-marino);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 30;
	height: 3rem;
}

.ihb-barra__caja {
	max-width: 64rem;
	height: 100%;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.ihb-barra__marca {
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9375rem;
	/* Sin `letter-spacing`. El de 0.02em que había añade un hueco DESPUÉS de la
	   última letra que el elipsis no contabiliza, y el nombre sobresalía 3 px
	   de su caja en cada pantalla — medido por el QA, no visible a ojo. Era
	   puramente decorativo; no se pierde nada. */
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	/* Es el único hijo de la barra que puede encoger: el menú y el WhatsApp
	   son `flex: none`. Sin esta línea la marca reclama su ancho natural y el
	   nombre no llega a recortarse con elipsis; se corta a pelo. */
	flex: 1 1 auto;
	min-width: 0;
}

/* El isotipo del manual —la van, la palmera y el sol— recortado del SVG del
   logo. El logotipo completo lleva el texto en la fuente Arena, que es de pago
   y no está en el equipo del visitante: sin ella el texto del SVG se dibujaría
   con otra tipografía cualquiera y la marca saldría peor que no saliendo. El
   nombre va aquí al lado, en texto de verdad, que además es seleccionable y lo
   lee un buscador. */
.ihb-barra__isotipo {
	height: 1.75rem;
	width: auto;
	flex: none;
	display: block;
}

/*
 * `min-width: 0` en el hijo, no sólo en el padre. Un elemento de flex no
 * encoge por debajo de su contenido salvo que se le permita explícitamente, y
 * sin esto el elipsis no llegaba a actuar: el nombre sobresalía 3 px de su caja
 * con overflow oculto — medido, no supuesto. `display:block` para que el
 * elipsis tenga una caja de bloque sobre la que recortar.
 */
.ihb-barra__nombre {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ihb-barra__tld {
	font-weight: 400;
	color: var(--ihb-arena);
}

/* Aquí estuvo el botón verde «Escríbenos» de la barra. Lo lleva WaCta. */

/*
 * El botón del menú: un cuadrado de 44 px —objetivo táctil— con las tres rayas
 * dentro. Su tamaño va escrito aquí y no fiado al estirado de la barra: cuando
 * se quitó el botón de WhatsApp, que era el hijo más alto, la barra encogió y
 * el menú se quedó en 34×8 px (medido). Anclado con `html body` por lo mismo
 * que todo en este fichero: los temas declaran `button` con especificidad.
 */
.ihb-barra__abrir {
	flex: none;
}

.ihb-barra__abrir:focus-visible {
	outline: 3px solid var(--ihb-sol);
	outline-offset: 2px;
}
/* Las tres rayas, hechas con bordes. Sin SVG y sin descargas: el mismo criterio
   que el resto del sitio, que no pide nada de fuera. */
.ihb-barra__rayas,
.ihb-barra__rayas::before,
.ihb-barra__rayas::after {
	display: block;
	width: 1.15rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.ihb-barra__rayas::before,
.ihb-barra__rayas::after {
	content: "";
	position: absolute;
}

.ihb-barra__rayas { position: relative; }
.ihb-barra__rayas::before { transform: translateY(-0.36rem); }
.ihb-barra__rayas::after { transform: translateY(0.36rem); }

/* Abierto, las rayas se cruzan: el mismo control abre y cierra, y el icono dice
   cuál de las dos cosas va a hacer. */
.ihb-barra__abrir[aria-expanded="true"] .ihb-barra__rayas { background: transparent; }
.ihb-barra__abrir[aria-expanded="true"] .ihb-barra__rayas::before { transform: rotate(45deg); }
.ihb-barra__abrir[aria-expanded="true"] .ihb-barra__rayas::after { transform: rotate(-45deg); }

.ihb-barra__panel {
	position: fixed;
	top: 3rem;
	left: 0;
	right: 0;
	z-index: 29;
	background: var(--ihb-marino);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 0.75rem 1.5rem rgba(1, 17, 38, 0.35);
	padding: 0.5rem 1rem 1rem;
}

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

.ihb-barra__menu {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 64rem;
	display: grid;
}

.ihb-barra__menu a {
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	display: flex;
	align-items: center;
	/* 48 px: en un panel que se abre a ciegas, los objetivos generosos son la
	   diferencia entre navegar y volver atrás. */
	min-height: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ihb-barra__menu li:last-child a { border-bottom: 0; }

/* ── De tablet para arriba: sin botón, enlaces en línea ── */
@media (min-width: 48rem) {
	/* Misma especificidad que la regla que le da tamaño; si no, ésta pierde y
	   el botón sale en escritorio al lado del menú desplegado (medido). */
	html body.ihb-lienzo-activo .ihb-barra__abrir { display: none; }

	.ihb-barra__panel {
		position: static;
		display: block !important;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
		margin-left: auto;
	}

	/* El `hidden` de PHP y del JavaScript sólo manda en móvil. Aquí hay sitio
	   de sobra y esconder navegación disponible no ayuda a nadie. */
	.ihb-barra__panel[hidden] { display: block !important; }

	.ihb-barra__menu {
		grid-auto-flow: column;
		gap: 1.5rem;
		align-items: center;
	}

	.ihb-barra__menu a {
		min-height: 2.5rem;
		border-bottom: 0;
		font-size: 0.9375rem;
		opacity: 0.9;
	}

	.ihb-barra__menu a:hover,
	.ihb-barra__menu a:focus { opacity: 1; text-decoration: underline; }
}

/* ───────────────── Transiciones entre páginas ─────────────────
 *
 * El sitio es multipágina: portada → ficha de ruta → gracias. Cada salto daba
 * el parpadeo en blanco de toda la vida, que en un móvil con señal regular se
 * siente como si algo hubiera fallado.
 *
 * `@view-transition` lo resuelve en el navegador, sin JavaScript y sin
 * convertir el sitio en una aplicación de una sola página. Donde no está
 * soportado la regla se ignora y se navega como siempre: no hay nada que
 * degradar a mano.
 *
 * La BARRA no se desvanece: lleva nombre propio, así que el navegador entiende
 * que el elemento de una página y el de la siguiente son el mismo y lo deja
 * quieto mientras cambia lo de debajo. Es lo que hace que se sienta como una
 * aplicación en vez de como recargas encadenadas.
 */
@view-transition {
	navigation: auto;
}

.ihb-barra { view-transition-name: ihb-barra; }

/*
 * EL PIE YA NO LLEVA NOMBRE. Lo llevaba, y era parte del «se rompe al
 * cambiar de pantalla»: un elemento con nombre viaja de donde estaba a donde
 * está, y el pie, visible al final de la página de la que sales, salía
 * disparado por encima del contenido hasta su sitio en la página nueva. La
 * barra sí lo lleva —es pegajosa, está en el mismo punto en todas las
 * páginas— y el lanzador de WaCta también: los dos se quedan quietos y lo
 * que se desliza es la página.
 */
#wactaRoot { view-transition-name: ihb-wacta; }

/*
 * EL DESLIZAMIENTO. «No cambies de página a menos que ya haya cargado, con
 * un deslizamiento suave.» Lo primero lo garantiza el navegador —la página
 * vieja se queda a la vista hasta que la nueva puede pintarse— y el
 * `rel="expect"` que imprime IHB_Lienzo::cabecera_documento() hace que
 * «puede pintarse» signifique «entera, con su pie», no «a medio llegar». Lo
 * segundo es esto: la página nueva entra desde la derecha y cubre a la
 * vieja, que se aparta un cuarto hacia la izquierda y se atenúa, como una
 * hoja que se pone encima de otra. Al volver atrás (`html.ihb-vuelve`, que
 * pone el guion de la cabecera al detectar una navegación de historial),
 * al revés: la hoja de encima se va por la derecha y debajo está la anterior.
 *
 * `mix-blend-mode: normal` es lo que permite que una hoja se ponga ENCIMA
 * de la otra. La mezcla por defecto (`plus-lighter`) suma luz donde las dos
 * se solapan —está pensada para un fundido en el que las opacidades suman
 * 1— y un deslizamiento con ella se ve quemado. Un intento anterior con esa
 * mezcla y tiempos distintos de salida y entrada dejaba un destello oscuro
 * en cada navegación; con `normal` los tiempos ya no tienen que coincidir.
 */
@keyframes ihb-hoja-se-aparta {
	to { transform: translateX(-24%); opacity: 0.55; }
}

@keyframes ihb-hoja-entra {
	from { transform: translateX(100%); }
}

@keyframes ihb-hoja-se-va {
	to { transform: translateX(100%); }
}

@keyframes ihb-hoja-vuelve {
	from { transform: translateX(-24%); opacity: 0.55; }
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(*) {
	animation-duration: 0.32s;
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.1, 1);
	animation-fill-mode: both;
}

::view-transition-old(root),
::view-transition-new(root) {
	mix-blend-mode: normal;
}

::view-transition-old(root) {
	animation-name: ihb-hoja-se-aparta;
}

::view-transition-new(root) {
	animation-name: ihb-hoja-entra;
	box-shadow: -8px 0 28px rgba(1, 17, 38, 0.28);
}

html.ihb-vuelve::view-transition-old(root) {
	z-index: 1;
	animation-name: ihb-hoja-se-va;
	box-shadow: -8px 0 28px rgba(1, 17, 38, 0.28);
}

html.ihb-vuelve::view-transition-new(root) {
	animation-name: ihb-hoja-vuelve;
	box-shadow: none;
}

/*
 * Quien pide menos movimiento no quiere ninguno. Se apaga la transición entera
 * en vez de acortarla: media transición sigue siendo movimiento, y para alguien
 * con sensibilidad vestibular eso no es un matiz.
 */
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* ───────────────── El cuerpo ───────────────── */

.ihb-principal {
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 1rem 3rem;
}

/* Ritmo vertical entre secciones. Se define aquí, en el documento, y no en cada
   bloque: si cada sección trae su propio margen, el espaciado depende del orden
   en que se coloquen y deja de ser un sistema. */
.ihb-principal > * + * { margin-top: 2rem; }

/*
 * Los titulares llevan el mismo ancla `html body` que el fondo, y por la misma
 * razón exacta: el tema declara `body.kz-body :is(h1,…,h6)` —especificidad
 * (0,1,2)— con su color de modo oscuro, un blanco azulado. Nuestro
 * `.ihb-lienzo-activo h1` era (0,1,1) y perdía, así que los títulos salían casi
 * invisibles sobre el fondo crema: se leía el subtítulo pero no el título.
 * Ancladas al elemento somos (0,1,3) y mandamos nosotros.
 */
html body.ihb-lienzo-activo :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ihb-marino);
	line-height: 1.15;
	margin: 0 0 0.5rem;
	text-wrap: balance;
}

.ihb-lienzo-activo h1 { font-size: clamp(1.35rem, 5.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }
.ihb-lienzo-activo h2 { font-size: clamp(1.15rem, 4.5vw, 1.6rem); font-weight: 700; }
.ihb-lienzo-activo h3 { font-size: 1rem; font-weight: 700; }

.ihb-lienzo-activo p { margin: 0 0 0.75rem; }

/* Cualquier tarjeta del plugin comparte el mismo papel y el mismo borde: es lo
   que hace que ocho bloques escritos por separado se lean como un sistema. */
.ihb-lienzo-activo .ihb-tarjeta,
.ihb-lienzo-activo .ihb-bloque {
	background: var(--ihb-papel);
	border: 1px solid var(--ihb-linea);
	border-radius: 1rem;
	padding: 1.25rem;
}

/* ───────────────── Campos de formulario ───────────────── */

/*
 * Los temas pintan los `select` e `input` a su gusto y aquí salían oscuros
 * sobre crema. Se normalizan dentro del lienzo.
 *
 * `:not([type=hidden])` no es cosmético: el buscador arrastra el estado de la
 * URL en campos ocultos, y darles alto mínimo y ancho completo dentro de una
 * rejilla los convertiría en huecos vacíos entre los campos de verdad.
 */
.ihb-lienzo-activo input:not([type="hidden"]),
.ihb-lienzo-activo select,
.ihb-lienzo-activo textarea {
	background: var(--ihb-papel) !important;
	color: var(--ihb-tinta) !important;
	border: 1px solid var(--ihb-linea) !important;
	border-radius: 0.6rem !important;
	/* 16px reales: por debajo de eso iOS hace zoom al enfocar el campo y
	   descoloca toda la pantalla en mitad de una compra. */
	font-size: 16px !important;
	padding: 0.7rem 0.75rem !important;
	width: 100%;
	box-sizing: border-box;
	min-height: 2.75rem;
}

.ihb-lienzo-activo input:focus,
.ihb-lienzo-activo select:focus,
.ihb-lienzo-activo textarea:focus {
	outline: 3px solid rgba(8, 102, 141, 0.35);
	outline-offset: 1px;
	border-color: var(--ihb-mar) !important;
}

.ihb-lienzo-activo label {
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--ihb-tinta-suave);
}

/*
 * El botón principal: azul mar con letra arena. Es el par de la marca y la
 * señal más reconocible que tiene el sitio.
 */
/*
 * `:not(.ihb-barra__abrir)` no es un detalle: sin él, esta regla se comía la
 * cabecera. El control del menú también es un `<button>`, así que heredaba el
 * `width: 100%` de aquí abajo, ocupaba los 328 px de la barra y dejaba la marca
 * a cero de ancho y el icono pintado en color arena. La regla estaba escrita
 * pensando en botones de acción dentro de un formulario, que es donde el ancho
 * completo tiene sentido.
 */
/* Sólo los botones AJENOS (del tema, de otros plugins): todo lo nuestro lleva
   una clase `ihb-` y su forma la pone el sistema de `frontend.css`. Antes esta
   regla se comía nuestras pastillas y había que anclar cada una con
   `html body` para ganarle. */
.ihb-lienzo-activo button:not([class*="ihb-"]) {
	background: var(--ihb-mar);
	color: var(--ihb-arena);
	border: 0;
	border-radius: 0.7rem;
	font-weight: 700;
	font-size: 1rem;
	/* 44px de alto: el mínimo cómodo para un pulgar. */
	min-height: 2.75rem;
	padding: 0.7rem 1.2rem;
	cursor: pointer;
	width: 100%;
}

.ihb-lienzo-activo button:not([class*="ihb-"]):hover { background: #0a7ba8; }

/* ───────────────── El pie ───────────────── */

.ihb-pie {
	background: var(--ihb-marino);
	color: #cbd5e1;
	margin-top: 3rem;
}

.ihb-pie__caja {
	max-width: 64rem;
	margin: 0 auto;
	padding: 2rem 1rem;
}

/*
 * El menú de secciones. Va ARRIBA del pie y separado por una línea: quien llega
 * hasta aquí es porque no encontró lo que buscaba en la pantalla, así que lo
 * primero del pie tiene que ser a dónde más puede ir, no el aviso de derechos.
 */
.ihb-pie__nav {
	margin: 0 0 1.25rem;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ihb-pie__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
}

.ihb-pie__menu a {
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	/* 44 px de alto táctil: en el pie de un móvil los enlaces quedan pegados
	   unos a otros y sin esto se pulsa el de al lado. */
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.ihb-pie__menu a:hover,
.ihb-pie__menu a:focus { text-decoration: underline; }

.ihb-pie__marca { color: #fff; font-weight: 700; margin: 0 0 0.3rem; }
.ihb-pie__nota { margin: 0 0 0.8rem; font-size: 0.9rem; }
.ihb-pie__legal { margin: 0; font-size: 0.78rem; opacity: 0.85; }

/* ───────────────── De tablet para arriba ───────────────── */

@media (min-width: 48rem) {
	.ihb-principal { padding-inline: 2rem; }
	/* Sólo los botones ajenos, como la regla base: la ✕ de los modales salía
	   en óvalo (16 × 36 px) porque este `width: auto` le ganaba al círculo. */
	.ihb-lienzo-activo button:not([class*="ihb-"]) { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.ihb-lienzo-activo *,
	.ihb-lienzo-activo *::before,
	.ihb-lienzo-activo *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/*
 * A 320 px la barra no da para todo: isotipo, nombre y menú (y antes también
 * «Escríbenos»). El nombre se recortaba con puntos suspensivos («Express Travel
 * Hol…»), que es peor que no estar: medido, sobresalían 64 px. Por debajo de 22,5 rem el
 * nombre se va de la vista y se queda para el lector de pantalla; el isotipo
 * ES la marca, y el nombre completo sigue en el pie.
 */
@media (max-width: 26rem) {
	html body.ihb-lienzo-activo .ihb-barra__nombre {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/*
 * «Traslado privado», en la barra. Es el segundo servicio del negocio y va en
 * el sol de la marca sobre el marino: `.ihb-boton--sol --chico` del sistema.
 * El rótulo va COMPLETO también en móvil —«Privado» a secas no decía qué—; lo
 * que cede el sitio es el nombre de la marca, que por debajo de 26 rem se va
 * de la vista (el isotipo es la marca) y queda para el lector de pantalla.
 */
.ihb-barra__privado {
	flex: none;
	order: 1;
	/* Aire respecto al menú: pegado al último enlace parecía un enlace más. */
	margin-left: 2rem;
}

.ihb-barra__privado-corto { display: none; }

@media (max-width: 40rem) {
	.ihb-barra__privado { order: 0; margin-left: auto; margin-right: 0.85rem; }
}

/* El panel del menú entra con un fundido en móvil (en escritorio es fijo y
   el `hidden` no manda). Animación, por lo mismo que `.ihb-aparece`. */
@keyframes ihb-menu-entra {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 47.99rem) {
	.ihb-barra__panel.ihb-aparece--ahora {
		animation: ihb-menu-entra var(--ihb-t-media, 260ms) var(--ihb-curva, ease);
	}
}

/* Los enlaces de la barra y el pie cambian de color sin saltar. */
.ihb-barra a,
.ihb-pie a {
	transition: color var(--ihb-t-rapida, 160ms) var(--ihb-curva, ease), background-color var(--ihb-t-rapida, 160ms) var(--ihb-curva, ease);
}

/* ───────────────── La agenda: el calendario de la barra ─────────────────
 *
 * Viene del «Slideout nav with Flip effect» del cliente (CodePen): dos
 * franjas que barren la pantalla, un panel que llega detrás con las esquinas
 * redondeadas y, dentro, los bloques que suben escalonados como si se
 * desplegaran. Se pidió DE IZQUIERDA A DERECHA, así que todo nace en ese
 * borde: el botón va en la esquina superior izquierda, delante de la marca,
 * y el panel y las franjas crecen desde ahí. La página de detrás se atenúa y
 * se desenfoca, y no atiende toques hasta que el panel se cierra: la franja
 * de fondo es el botón de cerrar más grande que hay.
 *
 * Lo que aquí es distinto del pen, y por qué: la duración baja de 1 s a 0,6
 * —en una barra de compra un segundo de espera es mucho—; el desenfoque va en
 * `backdrop-filter` sobre la franja y no en `filter` sobre el cuerpo entero,
 * que en un teléfono se paga en cuadros; y las franjas son elementos y no
 * pseudo-elementos, para que la de fondo pueda cerrar al tocarla. El panel
 * empieza debajo de la barra: así el icono sigue a la vista, convertido en ✕,
 * y la marca no desaparece.
 */
.ihb-barra__agenda {
	flex: none;
	order: -1;
	margin-right: 0.25rem;
	color: #fff;
}

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

/*
 * EN PC, EL CALENDARIO ES UNA PESTAÑA QUE CUELGA DEL BORDE IZQUIERDO, debajo
 * de la barra, tal como lo dibujó el cliente: marino, esquinas redondeadas
 * hacia la página y una sombra suave. Fija, para que esté a mano a cualquier
 * altura del scroll. Sólo donde el contenido deja margen (a partir de 70 rem:
 * 64 de contenido y 3 de pestaña por lado); en pantallas más estrechas se
 * queda en la barra, donde no tapa nada. Mientras el panel está abierto se
 * retira: el panel la taparía y su ✕ hace el mismo trabajo.
 */
@media (min-width: 70rem) {
	.ihb-barra__agenda {
		position: fixed;
		/* 4,5 rem: justo donde termina el redondeo del panel (3 rem de barra +
		   1,5 de radio), para que abierta se pegue al borde recto. */
		top: 4.5rem;
		left: 0;
		z-index: 31;
		width: 3rem;
		height: 3rem;
		margin: 0;
		border-radius: 0 0.75rem 0.75rem 0;
		background: var(--ihb-marino);
		box-shadow: 0 6px 18px rgba(1, 17, 38, 0.28);
		transition:
			background-color var(--ihb-t-rapida, 160ms) var(--ihb-curva, ease),
			opacity var(--ihb-t-rapida, 160ms) var(--ihb-curva, ease),
			transform var(--ihb-t-rapida, 160ms) var(--ihb-curva, ease);
	}

	html:not(.ihb-agenda-abierta) .ihb-barra__agenda:hover { background: var(--ihb-mar); }

	/* Abierto, la pestaña viaja con el borde del panel y se queda sobre la
	   franja dorada, convertida en ✕ (el cliente la dibujó ahí). Para que se
	   vea por encima de las franjas, la barra sube de plano mientras dura. */
	html.ihb-agenda-abierta .ihb-barra { z-index: 100001; }

	/* UNA SOLA PIEZA. Abierta, la pestaña toma el color del panel —crema, con
	   la ✕ en marino— y lo cambia A LA VEZ que se desliza, con la misma curva
	   y el mismo tiempo, para que se vea como el asa del panel y no como un
	   botón puesto al lado. Se pega a la parte recta del borde (bajo el
	   redondeo de 1,5 rem) y hereda su sombra. */
	html.ihb-agenda-abierta .ihb-barra__agenda {
		left: calc(100vw - 5rem);
		background: var(--ihb-crema);
		color: var(--ihb-marino);
		box-shadow: 10px 0 30px rgba(1, 17, 38, 0.28);
	}

	.ihb-barra__agenda {
		transition:
			left 600ms cubic-bezier(0.86, 0, 0.672, 1.003),
			background-color 600ms cubic-bezier(0.86, 0, 0.672, 1.003),
			color 600ms cubic-bezier(0.86, 0, 0.672, 1.003),
			box-shadow 600ms cubic-bezier(0.86, 0, 0.672, 1.003);
	}

}

.ihb-agenda-icono { display: block; }

.ihb-agenda-icono__cal,
.ihb-agenda-icono__x {
	transform-origin: 12px 12px;
	transition:
		opacity var(--ihb-t-rapida, 160ms) var(--ihb-curva, ease),
		transform var(--ihb-t-rapida, 160ms) var(--ihb-curva, ease);
}

.ihb-agenda-icono__x { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.ihb-barra__agenda[aria-expanded="true"] .ihb-agenda-icono__cal { opacity: 0; transform: rotate(90deg) scale(0.6); }
.ihb-barra__agenda[aria-expanded="true"] .ihb-agenda-icono__x { opacity: 1; transform: none; }

/* Las dos franjas del barrido: la de fondo cubre y atenúa la página (y cierra
   al tocarla); la de sol asoma por el borde derecho del panel. */
.ihb-agenda-barrido {
	position: fixed;
	top: 3rem;
	left: 0;
	height: calc(100vh - 3rem);
	height: calc(100svh - 3rem);
	width: 0;
	border-radius: 0 1.5rem 1.5rem 0;
	transition: width 600ms cubic-bezier(0.86, 0, 0.672, 1.003);
	pointer-events: none;
}

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

.ihb-agenda-barrido--fondo {
	z-index: 99998;
	background: rgba(1, 17, 38, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border-radius: 0;
}

.ihb-agenda-barrido--sol {
	z-index: 99999;
	background: var(--ihb-sol);
}

html.ihb-agenda-abierta .ihb-agenda-barrido--fondo { width: 100vw; pointer-events: auto; cursor: pointer; }
html.ihb-agenda-abierta .ihb-agenda-barrido--sol { width: calc(min(100vw, 26rem) + 1.25rem); }
html.ihb-agenda-abierta { overflow: hidden; }

/* El panel */
.ihb-agenda {
	position: fixed;
	top: 3rem;
	left: 0;
	bottom: 0;
	/* Por encima del lanzador de WaCta, que en móvil tapaba las horas. */
	z-index: 100000;
	width: min(100vw, 26rem);
	box-sizing: border-box;
	padding: 0.85rem 1rem 1.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--ihb-crema);
	color: var(--ihb-tinta);
	border-radius: 0 1.5rem 1.5rem 0;
	box-shadow: 12px 0 40px rgba(1, 17, 38, 0.35);
	transform: translateX(-105%);
	transition: transform 600ms cubic-bezier(0.86, 0, 0.672, 1.003);
}

.ihb-agenda[hidden] { display: none; }
.ihb-agenda[aria-hidden="false"] { transform: none; }

.ihb-agenda__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.9rem;
}

.ihb-agenda__titulo { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ihb-marino); }
.ihb-agenda__nodo { margin: 0.1rem 0 0; font-size: 0.875rem; color: var(--ihb-tinta-suave); }
.ihb-agenda__cerrar { flex: none; }

.ihb-agenda__sub {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ihb-tinta-suave);
}

/* Los bloques suben escalonados cuando el panel ya llegó: recorte, un
   desplazamiento hacia abajo y un retraso por índice, como en el pen. */
.ihb-agenda__bloque { margin: 0 0 1.25rem; overflow: clip; }

.ihb-agenda__bloque > * {
	transform: translateY(110%);
	opacity: 0;
	transition: transform 350ms ease-in-out, opacity 300ms ease;
}

.ihb-agenda[aria-hidden="false"] .ihb-agenda__bloque > * {
	transform: none;
	opacity: 1;
	transition-delay: calc(var(--i, 0) * 90ms + 420ms);
}

/* ── Las próximas salidas: una fila por salida. La misma lista vive en la
   portada, debajo de las rutas. ── */
.ihb-proximas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.ihb-proxima { overflow: hidden; }

.ihb-proxima__enlace {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "hora ruta precio" "hora cuando precio";
	align-items: center;
	column-gap: 0.75rem;
	padding: 0.55rem 0.85rem;
	color: var(--ihb-tinta) !important;
	text-decoration: none !important;
	line-height: 1.25;
	overflow: hidden;
}

.ihb-proxima__enlace:focus-visible { outline: 3px solid var(--ihb-sol); outline-offset: -3px; }

.ihb-proxima__hora {
	grid-area: hora;
	font-size: 1.25rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--ihb-marino);
}

.ihb-proxima__ruta { grid-area: ruta; font-weight: 700; font-size: 0.9375rem; min-width: 0; overflow: hidden; }
.ihb-proxima__texto { display: block; overflow: hidden; }
.ihb-proxima__cuando { grid-area: cuando; font-size: 0.8125rem; font-weight: 600; color: var(--ihb-mar); }
.ihb-proxima__precio { grid-area: precio; font-size: 0.9375rem; font-weight: 700; color: var(--ihb-tinta-suave); }
.ihb-proxima--llega .ihb-proxima__hora { color: var(--ihb-atardecer-tinta, #a8531a); }

/* El pie de una fila: el chip del cambio de hora y su «?», sólo en las
   salidas que cruzan de huso, con el signo del sentido de esa salida. */
.ihb-proxima__pie {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.1rem;
	padding: 0.45rem 0.85rem 0.55rem;
	border-top: 1px solid var(--ihb-linea);
}

.ihb-proxima__huso { margin: 0; }

/* El volteo del pen al pasar por encima: el fondo sube y la ruta sale por
   arriba y vuelve a entrar por abajo (`transform` anima; `translate` salta a
   mitad de camino). `lh` es la altura de línea; donde no exista queda el
   cambio de color, que ya dice lo mismo. */
.ihb-proxima__enlace::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ihb-marino);
	translate: 0 100%;
	transition: translate 260ms ease-in-out;
}

.ihb-proxima__texto { transition: transform 260ms ease-in-out, translate 0s 130ms; }

@media (hover: hover) {
	.ihb-proxima__texto { white-space: nowrap; text-overflow: ellipsis; }
	.ihb-proxima__enlace:hover::before { translate: 0 0; }
	.ihb-proxima__enlace:hover { color: #fff !important; }
	.ihb-proxima__enlace:hover .ihb-proxima__hora,
	.ihb-proxima__enlace:hover .ihb-proxima__cuando,
	.ihb-proxima__enlace:hover .ihb-proxima__precio { color: #fff; }
	.ihb-proxima__enlace:hover .ihb-proxima__texto { transform: translateY(-2lh); translate: 0 2lh; }
}

/* ── El mes: una tira de días que se desliza; el elegido, en marino. ── */
.ihb-agenda__mes {
	list-style: none;
	margin: 0 0 0.85rem;
	padding: 0.25rem 0;
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.ihb-agenda__mes li { flex: none; scroll-snap-align: start; }

.ihb-agenda__dia {
	display: grid;
	justify-items: center;
	gap: 0.05rem;
	width: 3rem;
	min-height: 3.4rem;
	padding: 0.35rem 0.2rem;
	border: 1px solid var(--ihb-linea);
	border-radius: var(--ihb-radio-ficha-chica);
	background: var(--ihb-papel);
	color: var(--ihb-tinta);
	font: inherit;
	cursor: pointer;
	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);
}

.ihb-agenda__dia-nombre { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ihb-tinta-suave); }
.ihb-agenda__dia-num { font-size: 1.125rem; font-weight: 800; line-height: 1.1; }
.ihb-agenda__dia:hover { border-color: var(--ihb-mar); }
.ihb-agenda__dia:focus-visible { outline: 3px solid var(--ihb-tinta); outline-offset: 2px; }
.ihb-agenda__dia[aria-pressed="true"] { background: var(--ihb-marino); border-color: var(--ihb-marino); color: #fff; }
.ihb-agenda__dia[aria-pressed="true"] .ihb-agenda__dia-nombre { color: rgba(255, 255, 255, 0.85); }
.ihb-agenda__dia.is-sin { background: transparent; border-style: dashed; color: var(--ihb-tinta-suave); }
.ihb-agenda__dia.is-sin .ihb-agenda__dia-num { font-weight: 600; text-decoration: line-through; }

/* ── El detalle del día: las horas de cada dirección, como chips. ── */
.ihb-agenda__detalle { display: grid; gap: 0.75rem; }
.ihb-agenda__detalle[aria-busy="true"] { opacity: 0.6; }
.ihb-agenda__fecha { margin: 0; font-size: 1rem; font-weight: 800; color: var(--ihb-marino); }
.ihb-agenda__ruta-nombre { margin: 0 0 0.35rem; font-size: 0.875rem; font-weight: 700; }
.ihb-agenda__horas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ihb-agenda__hora {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	background: var(--ihb-papel);
	color: var(--ihb-tinta) !important;
	text-decoration: none !important;
}

.ihb-agenda__hora strong { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ihb-agenda__hora small { font-size: 0.75rem; color: var(--ihb-tinta-suave); }
.ihb-agenda__hora.is-llena { border-style: dashed; color: var(--ihb-tinta-suave) !important; }
.ihb-agenda__quedan { color: var(--ihb-alerta) !important; font-weight: 700; }
.ihb-agenda__vacio { margin: 0; font-size: 0.875rem; color: var(--ihb-tinta-suave); }

@media (prefers-reduced-motion: reduce) {
	.ihb-agenda,
	.ihb-agenda-barrido,
	.ihb-agenda__bloque > *,
	.ihb-proxima__texto,
	.ihb-proxima__enlace::before,
	.ihb-agenda-icono__cal,
	.ihb-agenda-icono__x {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}

/* Al final de la hoja a propósito: estas reglas pisan a las del panel de más
   arriba con la misma especificidad, y en CSS gana la última. */
@media (min-width: 70rem) {
	/* EN PC EL PANEL USA CASI TODO EL ANCHO —«cuando puedes usar todo el
	   espacio de la web»— y el contenido se reparte: las próximas a la
	   izquierda; el mes, en cuadrícula y sin desplazamiento, y el detalle del
	   día en columnas a la derecha. Deja 5 rem de página a la vista al otro
	   lado, que es donde queda la pestaña. */
	.ihb-agenda {
		width: calc(100vw - 5rem);
		padding: 1.1rem 2.25rem 2rem;
	}

	html.ihb-agenda-abierta .ihb-agenda-barrido--sol { width: calc(100vw - 5rem + 1.25rem); }

	.ihb-agenda__cabecera { margin-bottom: 1.25rem; }

	.ihb-agenda__cuerpo {
		display: grid;
		grid-template-columns: minmax(22rem, 30rem) minmax(0, 1fr);
		gap: 1.5rem 3rem;
		align-items: start;
	}

	.ihb-agenda__mes {
		flex-wrap: wrap;
		overflow: visible;
	}

	.ihb-agenda__detalle {
		grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
		gap: 1rem 1.5rem;
	}

	.ihb-agenda__fecha,
	.ihb-agenda__vacio { grid-column: 1 / -1; }
}

/* ───────────────── El blog con la cara del sitio ─────────────────
 *
 * Las entradas son la parte de SEO: artículos sobre Holbox, el ferry, qué
 * llevar. Con el tema salían con otra tipografía y sin las piezas del
 * sistema; el lienzo las toma (IHB_Lienzo::es_entrada) y aquí se les da
 * columna de lectura, fichas para el listado, paginación con las pastillas
 * del sistema, un buscador y un 404 con salidas.
 */
/* Aire arriba: estas pantallas no traen su propio encabezado con margen, y sin
   esto el título se pegaba a la barra. */
.ihb-entrada,
.ihb-listado,
.ihb-404 { padding-top: 1.5rem; }

.ihb-entrada { max-width: 44rem; margin: 0 auto; }
.ihb-entrada__cabecera { margin: 0 0 1.25rem; }
/* Los chips que son enlace miden al menos 28 px de alto: un objetivo táctil, no una etiqueta. */
.ihb-entrada__categoria { display: inline-flex; align-items: center; min-height: 1.75rem; margin-bottom: 0.6rem; text-decoration: none !important; }
.ihb-entrada__titulo { margin: 0 0 0.5rem; }
.ihb-entrada__meta { margin: 0; color: var(--ihb-tinta-suave); font-size: 0.9rem; }
.ihb-entrada__imagen { margin: 0 0 1.5rem; }
.ihb-entrada__imagen img { display: block; width: 100%; height: auto; border-radius: var(--ihb-radio-ficha); }

.ihb-entrada__cuerpo { font-size: 1.0625rem; line-height: 1.65; }
.ihb-entrada__cuerpo > * + * { margin-top: 1rem; }
.ihb-entrada__cuerpo p { margin: 0; }
/* Con el ancla `html body` de los titulares del lienzo, que si no gana su margen 0. */
html body.ihb-lienzo-activo .ihb-entrada__cuerpo h2 { margin-top: 2rem; }
html body.ihb-lienzo-activo .ihb-entrada__cuerpo h3 { margin-top: 1.5rem; }
.ihb-entrada__cuerpo img { max-width: 100%; height: auto; border-radius: var(--ihb-radio-ficha-chica); }
.ihb-entrada__cuerpo ul,
.ihb-entrada__cuerpo ol { padding-left: 1.4rem; }
.ihb-entrada__cuerpo li + li { margin-top: 0.35rem; }
.ihb-entrada__cuerpo blockquote { margin: 0; padding: 0.25rem 0 0.25rem 1rem; border-left: 4px solid var(--ihb-sol); color: var(--ihb-tinta-suave); font-style: italic; }
.ihb-entrada__cuerpo figure { margin: 0; }
.ihb-entrada__cuerpo figcaption { margin-top: 0.35rem; font-size: 0.85rem; color: var(--ihb-tinta-suave); }
.ihb-entrada__cuerpo pre { overflow-x: auto; padding: 1rem; border-radius: var(--ihb-radio-ficha-chica); background: var(--ihb-marino); color: #fff; }
.ihb-entrada__cuerpo table { width: 100%; border-collapse: collapse; }
.ihb-entrada__cuerpo th,
.ihb-entrada__cuerpo td { padding: 0.5rem; border-bottom: 1px solid var(--ihb-linea); text-align: left; }

.ihb-entrada__pie { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.5rem; }
.ihb-entrada__pie a { display: inline-flex; align-items: center; min-height: 1.75rem; text-decoration: none !important; }

.ihb-entrada__vecinas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 2rem; }
.ihb-entrada__vecina { display: grid; gap: 0.15rem; padding: 0.7rem 0.9rem; color: var(--ihb-tinta) !important; text-decoration: none !important; }
.ihb-entrada__vecina--siguiente { text-align: right; }
.ihb-entrada__vecina-rotulo { font-size: 0.8rem; color: var(--ihb-tinta-suave); }
.ihb-entrada__vecina-titulo { font-weight: 700; }

/* El listado: fichas con imagen, fecha, título y extracto. */
.ihb-listado__cabecera { margin: 0 0 1.5rem; }
.ihb-listado__lema { margin: 0; color: var(--ihb-tinta-suave); }
.ihb-listado__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.ihb-listado__vacio { margin: 0 0 1rem; }
.ihb-entrada-ficha { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.ihb-entrada-ficha__imagen { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.ihb-entrada-ficha__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ihb-entrada-ficha__cuerpo { display: grid; gap: 0.45rem; align-content: start; justify-items: start; padding: 1rem; }
.ihb-entrada-ficha__meta { margin: 0; font-size: 0.8125rem; color: var(--ihb-tinta-suave); }
.ihb-entrada-ficha__titulo { margin: 0; font-size: 1.125rem; }
.ihb-entrada-ficha__titulo a { color: var(--ihb-marino) !important; text-decoration: none !important; }
.ihb-entrada-ficha__titulo a:hover { text-decoration: underline !important; }
.ihb-entrada-ficha__extracto { margin: 0; font-size: 0.9375rem; }

/* La paginación de WordPress, con las pastillas del sistema. */
.ihb-paginacion { margin-top: 1.5rem; }
.ihb-paginacion .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ihb-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.8rem;
	border: 1px solid var(--ihb-linea);
	border-radius: var(--ihb-radio-pastilla);
	background: var(--ihb-papel);
	color: var(--ihb-tinta) !important;
	font-weight: 600;
	text-decoration: none !important;
}
.ihb-paginacion .page-numbers.current { background: var(--ihb-marino); border-color: var(--ihb-marino); color: #fff !important; }
.ihb-paginacion .page-numbers.dots { border: 0; background: transparent; }

/* WordPress imprime «Páginas» para lectores de pantalla con una clase que el
   tema solía ocultar; aquí no hay tema. */
.ihb-lienzo-activo .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* El buscador del sitio. */
.ihb-buscar { display: flex; gap: 0.5rem; max-width: 30rem; margin-top: 1rem; }
.ihb-buscar__campo {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--ihb-linea);
	border-radius: var(--ihb-radio-pastilla);
	background: var(--ihb-papel);
	color: var(--ihb-tinta);
	font: inherit;
}
.ihb-buscar__campo:focus-visible { outline: 3px solid var(--ihb-tinta); outline-offset: 2px; }

/* El 404. */
.ihb-404 { max-width: 40rem; }
.ihb-404__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }

@media (max-width: 40rem) {
	.ihb-entrada__vecinas { grid-template-columns: 1fr; }
	.ihb-entrada__vecina--siguiente { text-align: left; }
}

/* ───────────────── Los horarios: la página y el panel ─────────────────
 *
 * La página `[ihb_horarios]` y lo que el panel trae y anima encima son el
 * MISMO HTML (IHB_Agenda::html_horarios): hoy por destino con todas las
 * horas —la siguiente en verde, las pasadas atenuadas—, la pista, el
 * calendario de domingo a sábado con los próximos 30 días y una sección por
 * día, sólo la elegida a la vista. En PC, dos columnas: hoy a la izquierda,
 * el mes a la derecha.
 */
.ihb-horarios { display: grid; gap: 1.5rem; padding-top: 1.25rem; }
.ihb-horarios__cabecera { margin: 0; }
.ihb-horarios__lema { margin: 0; max-width: 42rem; color: var(--ihb-tinta-suave); }

.ihb-horarios__destinos { display: grid; gap: 0.6rem; }
.ihb-horarios__destino { padding: 0.65rem 0.85rem 0.7rem; }
.ihb-horarios__corrida { margin: 0 0 0.45rem; font-size: 0.9375rem; font-weight: 700; color: var(--ihb-marino); }
.ihb-horarios__destino--llega .ihb-horarios__corrida { color: var(--ihb-atardecer-tinta, #a8531a); }
.ihb-horarios__linea { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.ihb-horarios__horas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }

.ihb-horarios__hora {
	min-height: 2rem;
	padding-inline: 0.7rem;
	background: var(--ihb-papel);
	color: var(--ihb-tinta) !important;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none !important;
	transition:
		background-color var(--ihb-t-rapida) var(--ihb-curva),
		border-color var(--ihb-t-rapida) var(--ihb-curva),
		color var(--ihb-t-rapida) var(--ihb-curva);
}

.ihb-horarios__hora:hover { border-color: var(--ihb-mar); }
.ihb-horarios__hora.is-pasada { border-style: dashed; color: var(--ihb-tinta-suave) !important; font-weight: 600; }
.ihb-horarios__hora.is-siguiente { background: var(--ihb-ok); border-color: var(--ihb-ok); color: #fff !important; }
.ihb-horarios__precio { margin-left: auto; font-size: 0.875rem; font-weight: 700; color: var(--ihb-tinta-suave); white-space: nowrap; }
.ihb-horarios__manana { margin: 0.45rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--ihb-mar); }
.ihb-horarios__manana[hidden] { display: none; }
.ihb-horarios__sin { margin: 0; font-size: 0.875rem; color: var(--ihb-tinta-suave); }
.ihb-horarios__huso { display: inline-flex; margin-top: 0.5rem; }
.ihb-horarios__destino .ihb-proxima__pie { margin: 0.5rem 0 0; padding: 0.45rem 0 0; }
.ihb-horarios__pista { margin: 0 0 0.75rem; font-weight: 600; color: var(--ihb-marino); }

/* El calendario: siete columnas, cabecera de días, huecos antes de hoy. */
.ihb-calendario { display: grid; gap: 0.35rem; }
.ihb-calendario__semana,
.ihb-calendario__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.ihb-calendario__dias { list-style: none; margin: 0; padding: 0; }
.ihb-calendario__semana span { text-align: center; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ihb-tinta-suave); }
.ihb-calendario__hueco { min-height: 3.1rem; }
.ihb-calendario__dia { width: 100%; min-height: 3.1rem; text-decoration: none !important; }
.ihb-calendario__dia .ihb-agenda__dia-nombre { min-height: 0.85rem; }
.ihb-calendario__dia.is-hoy { border-color: var(--ihb-marino); box-shadow: inset 0 0 0 1px var(--ihb-marino); }
.ihb-calendario__dia.is-elegido { background: var(--ihb-marino); border-color: var(--ihb-marino); color: #fff; }
.ihb-calendario__dia.is-elegido .ihb-agenda__dia-nombre { color: rgba(255, 255, 255, 0.85); }

/* Las secciones de día. */
.ihb-horarios__dias { display: grid; gap: 1rem; margin-top: 1rem; }
.ihb-horarios__dia[hidden] { display: none; }
html body.ihb-lienzo-activo .ihb-horarios__fecha { margin: 0 0 0.6rem; font-size: 1.0625rem; font-weight: 800; color: var(--ihb-marino); }
.ihb-horarios__fecha::first-letter { text-transform: uppercase; }

@media (min-width: 64rem) {
	.ihb-horarios { grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; }
	.ihb-horarios__cabecera { grid-column: 1 / -1; }

}

/* Dentro del panel: sin el titular de la página (el panel tiene el suyo), y
   los bloques suben escalonados al llegar, como en el pen. */
.ihb-agenda .ihb-horarios { padding-top: 0; }
.ihb-agenda .ihb-horarios__cabecera { display: none; }

@keyframes ihb-sube {
	from { transform: translateY(1.25rem); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.ihb-agenda .ihb-horarios > * { animation: ihb-sube 380ms ease-out both; }
.ihb-agenda .ihb-horarios > :nth-child(2) { animation-delay: 90ms; }
.ihb-agenda .ihb-horarios > :nth-child(3) { animation-delay: 180ms; }

@media (min-width: 70rem) {
	.ihb-agenda__cuerpo { display: block; }
}

/* En la propia página de horarios la pestaña sobra. */
.ihb-barra__agenda.is-aqui { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.ihb-agenda .ihb-horarios > * { animation: none; }
}

/* ───────────── La navegación de corridas (filtro) ─────────────
 *
 * «Debe haber un filtro por cada corrida; al lado, la próxima; la barra de
 * navegación interna a la izquierda, para que ese montón de abajo no sea
 * engorroso.» Cada fila es a la vez índice, próxima salida y filtro: al
 * elegirla, el día visible y el calendario se quedan sólo con esa corrida.
 * Y es un enlace de verdad a la ficha de la ruta, así que sin guion lleva
 * a donde se compra.
 *
 * En móvil la barra va arriba, deslizable con imán; en PC a la izquierda y
 * pegada, con una marca de color que indica cuál está elegida.
 */
.ihb-horarios__corridas { min-width: 0; }

html body.ihb-lienzo-activo .ihb-horarios__corridas-titulo {
	margin: 0 0 0.5rem;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ihb-tinta-suave);
}

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

.ihb-horarios__corrida {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--ihb-linea);
	border-left: 3px solid var(--ihb-linea);
	border-radius: var(--ihb-radio-s, 0.6rem);
	background: var(--ihb-papel);
	color: var(--ihb-tinta);
	font: inherit;
	text-align: left;
	text-decoration: none !important;
	cursor: pointer;
	transition:
		background-color var(--ihb-t-rapida) var(--ihb-curva),
		border-color var(--ihb-t-rapida) var(--ihb-curva),
		color var(--ihb-t-rapida) var(--ihb-curva);
}

.ihb-horarios__corrida:hover { border-color: var(--ihb-mar); }

.ihb-horarios__corrida-nombre {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ihb-marino);
}

.ihb-horarios__corrida--llega .ihb-horarios__corrida-nombre { color: var(--ihb-atardecer-tinta, #a8531a); }

.ihb-horarios__corrida-dato {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ihb-tinta-suave);
}

.ihb-horarios__corrida-hora { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ihb-tinta); }

/* Elegida: la marca de la izquierda se llena y la ficha sube de tono. */
.ihb-horarios__corrida.is-activa {
	background: var(--ihb-arena);
	border-color: var(--ihb-linea);
	border-left-color: var(--ihb-marino);
}

.ihb-horarios__corrida.is-activa .ihb-horarios__corrida-dato { color: var(--ihb-tinta); }
.ihb-horarios__corrida--llega.is-activa { border-left-color: var(--ihb-atardecer-tinta, #a8531a); }

/* Filtrado: las corridas que no son la elegida se van del día. */
.ihb-horarios__destino[hidden] { display: none; }

/* El día de hoy se marca sin gritar. */
.ihb-horarios__hoy-marca {
	display: inline-block;
	margin-right: 0.35rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--ihb-marino);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
	vertical-align: 0.1em;
}

.ihb-horarios__panel { min-width: 0; }
.ihb-horarios__vacio { margin: 0.75rem 0 0; color: var(--ihb-tinta-suave); }

@media (min-width: 64rem) {
	/* En PC la barra es una columna pegada: se queda a la vista mientras se
	   recorre el mes. Va al final del fichero a propósito —el bloque base la
	   pone en fila deslizable y, a igual especificidad, manda el último. */
	.ihb-horarios__corridas { position: sticky; top: 4.5rem; }
	.ihb-horarios__lista { grid-template-columns: 1fr; gap: 0.4rem; }
	.ihb-horarios__corrida { min-width: 0; width: 100%; }
}

/* Foco visible de la casa en la barra de corridas y en las horas: el `outline`
   de 1 px del navegador se pierde sobre el papel, y quien navega con teclado
   necesita ver dónde está. Mismo grosor que en el resto del lienzo. */
.ihb-horarios__corrida:focus-visible,
.ihb-horarios__hora:focus-visible {
	outline: 3px solid var(--ihb-mar);
	outline-offset: 2px;
}

/* En el móvil se toca con el dedo: las horas suben a 44 px, el objetivo que
   pide la WCAG. En PC se apunta con el ratón y 32 px bastan sin inflar la
   rejilla de horas. */
@media (max-width: 63.999rem) {
	.ihb-horarios__hora { min-height: 2.75rem; padding-inline: 0.9rem; }
}