/* ==========================================================================
   RT033 AIRPORT V1 — cuerpo de las landings de AEROPUERTO.
   ==========================================================================

   QUE ES. La capa de arquitectura funcional que CITY_CORE V2 no tiene, porque
   una landing de aeropuerto no responde a las mismas preguntas que una de
   ciudad. El viajero llega con una maleta en una mano y el movil en la otra, y
   quiere seis respuestas en este orden: puedo reservar, cuanto cuesta, donde
   nos encontramos, que tengo que indicar, que pasa si estoy fuera de la M-30,
   como reservo. La pagina tiene que poder ESCANEARSE.

   QUE NO ES. Un sistema visual nuevo. La identidad —paleta, tipografia, ritmo,
   rejilla, radios, botones, iconografia, FAQ, CTA, filosofia responsive— es la
   de CITY_CORE V2 y NO se toca. Esta hoja se carga DESPUES de `city.css` y solo
   anade lo que el aeropuerto necesita y la ciudad no:

     - el panel de tarifa (la cifra es el dato que la gente viene a buscar),
     - los dos regimenes tarifarios como dos caminos,
     - las paradas por terminal como filas de panel, no como tarjetas,
     - los cuatro datos de la reserva, numerados.

   LA REGLA DE ALCANCE, que es la que hace que esto sea seguro: todo cuelga de
   `.rt033-airport-v1`, que va en el `module_class` de cada `et_pb_section` del
   cuerpo JUNTO a `rt033-city-v2`. Sin las dos clases no cambia un pixel de
   ninguna otra pagina, y el loader ni siquiera encola la hoja. Cero selectores
   globales y cero declaraciones en `:root`.

   LA GRAMATICA VISUAL, para que las piezas nuevas no parezcan de otra web: la
   senaletica aeroportuaria. Paneles con filas de dato separadas por un filete,
   codigos de terminal como rotulo, cifras grandes sin adorno. Es lo que
   diferencia AIRPORT de CITY_CORE sin inventar una identidad paralela.

   DOS COSAS QUE NO SE HACEN AQUI, y conviene saber por que:
     - El amarillo NO se usa como color de texto sobre fondo claro. Sobre
       `#f5f5f6` da 2,15:1. Es acento grafico: filetes, subrayados y CTA.
     - Los rotulos de maquetacion son `<p>`, no encabezados. Convertirlos en H3
       cambiaria el esquema del documento, y eso es SEO, no diseno.

   @package divi-hijo
   ========================================================================== */

/* 1. Fichas ---------------------------------------------------------------
   Sobre `.rt033-airport-v1`, nunca sobre `:root`. Casi todas son referencias
   con respaldo a las de CITY_CORE: asi un cambio de marca se hace en un sitio
   y el aeropuerto se pinta bien aunque `city.css` no llegue a cargar. */

.rt033-airport-v1 {
	--rt033-air-amarillo: var(--rt033-city-amarillo, #feba02);
	--rt033-air-tinta: var(--rt033-city-tinta, #1a1a1a);
	--rt033-air-tinta-suave: var(--rt033-city-tinta-suave, #5a5a5a);
	--rt033-air-blanco: var(--rt033-city-blanco, #ffffff);
	--rt033-air-papel: var(--rt033-city-papel, #f5f5f6);
	--rt033-air-negro: var(--rt033-city-negro, #111111);
	--rt033-air-sobre-oscuro: var(--rt033-city-sobre-oscuro, #e8e8e9);
	--rt033-air-borde: var(--rt033-city-borde, rgba(17, 17, 17, 0.12));
	--rt033-air-borde-oscuro: var(--rt033-city-borde-oscuro, rgba(255, 255, 255, 0.16));
	--rt033-air-radio: var(--rt033-city-radio, 14px);
	--rt033-air-radio-chico: var(--rt033-city-radio-chico, 10px);
	--rt033-air-tactil: var(--rt033-city-tactil, 44px);
	--rt033-air-hueco: var(--rt033-city-hueco, 16px);
	--rt033-air-sombra: var(--rt033-city-sombra, 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 28px rgba(17, 17, 17, 0.06));

	/* La cifra de la tarifa. Es el unico tamano tipografico que AIRPORT anade
	   a la escala de CITY_CORE, y existe porque la cifra NO es un titulo: es el
	   dato. Fluida de 390 a 1180 y sin pasar de ahi, para que a 1440 no se
	   coma la fila de condiciones que tiene al lado. */
	--rt033-air-cifra: clamp(68px, 15vw, 104px);

	/* Ancho de la columna de la cifra en el panel de tarifa. Es la unica
	   medida propia de esta hoja; todo lo demas sale de --ancho y --lectura
	   de CITY_CORE. */
	--rt033-air-columna-cifra: 300px;
}

/* 2. Panel de tarifa ------------------------------------------------------
   El bloque protagonista, inmediatamente despues del hero. La cifra no puede
   ir escondida en un parrafo: es la primera de las seis preguntas que trae el
   viajero y la que mas se busca.

   Se resuelve como PANEL DE DATOS, no como tarjeta de metrica: la cifra a un
   lado y las condiciones al otro, en filas separadas por un filete. Esa
   gramatica —la del panel de informacion de un aeropuerto— es la que impide
   que esto acabe pareciendo el bloque de estadisticas de cualquier web. */

.rt033-airport-v1 .rt033-air-tarifa {
	background: var(--rt033-air-blanco);
	border: 1px solid var(--rt033-air-borde);
	border-radius: var(--rt033-air-radio);
	box-shadow: var(--rt033-air-sombra);
	padding: 26px 22px;
}

.rt033-airport-v1 .rt033-air-tarifa__cuerpo {
	display: grid;
	gap: 20px;
	align-items: start;
}

/* La cifra. En tinta, nunca en amarillo: #e5a600 sobre blanco da 2,7:1 y esto
   es el dato mas importante de la pagina. El interlineado baja de 1 a
   proposito —una cifra de 104 px con interlineado normal arrastra 40 px de
   aire muerto debajo— y el tracking se aprieta porque a ese cuerpo el espaciado
   por defecto separa demasiado los dos caracteres. */
.rt033-airport-v1 .rt033-air-tarifa__cifra {
	display: block;
	margin: 0;
	font-size: var(--rt033-air-cifra);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	/* El espacio entre la cifra y el simbolo es proporcional al cuerpo: a 104 px
	   mide 26 y separa «33» de «€» como si fueran dos datos. Se aprieta hasta
	   dejarlo en la mitad, que es lo que hace que se lean como un importe. No se
	   quita el espacio del texto: «33 €» es la forma correcta en espanol y es lo
	   que tiene que copiarse y leer un lector de pantalla. */
	word-spacing: -0.12em;
	color: var(--rt033-air-tinta);
}

.rt033-airport-v1 .rt033-air-tarifa__regla {
	display: block;
	margin: 10px 0 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rt033-air-tinta);
}

/* Las condiciones, como filas de panel. Cada una es un dato independiente y se
   lee suelta; por eso van separadas por un filete y no por comas. */
.rt033-airport-v1 .rt033-air-tarifa__filas {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rt033-air-borde);
}

.rt033-airport-v1 .rt033-air-tarifa__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--rt033-air-borde);
	font-size: 15.5px;
	line-height: 1.4;
}

.rt033-airport-v1 .rt033-air-tarifa__eti {
	color: var(--rt033-air-tinta-suave);
	flex: 0 0 auto;
}

.rt033-airport-v1 .rt033-air-tarifa__valor {
	color: var(--rt033-air-tinta);
	font-weight: 600;
	text-align: right;
}

.rt033-airport-v1 .rt033-air-tarifa__pie {
	margin: 18px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--rt033-air-tinta-suave);
}

/* 3. Los dos caminos ------------------------------------------------------
   Dentro de la M-30 y fuera. No son dos opciones equivalentes y no se pintan
   como tal: el de dentro es un importe cerrado y va en tinta solida; el de
   fuera es un calculo y va sobre papel con filete. La diferencia se ve antes
   de leerse, que es el mismo principio del componente de contraste de
   CITY_CORE.

   No son dos tarjetas iguales a proposito. Dos cajas identicas con un titulo y
   un parrafo dentro no dirian nada que el texto no diga ya. */

.rt033-airport-v1 .rt033-air-caminos {
	display: grid;
	gap: var(--rt033-air-hueco);
	margin-top: 22px;
}

.rt033-airport-v1 .rt033-air-camino {
	border-radius: var(--rt033-air-radio);
	padding: 20px 18px;
}

.rt033-airport-v1 .rt033-air-camino__eti {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.rt033-airport-v1 .rt033-air-camino__dato {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.rt033-airport-v1 .rt033-air-camino p:not([class]) {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
}

/* Dentro: importe cerrado. Fondo tinta, y el rotulo en amarillo, que sobre
   #111 da 9,97:1 —es el unico sitio donde el amarillo puede ser tinta. */
.rt033-airport-v1 .rt033-air-camino--fija {
	background: var(--rt033-air-negro);
	color: var(--rt033-air-sobre-oscuro);
}

.rt033-airport-v1 .rt033-air-camino--fija .rt033-air-camino__eti {
	color: var(--rt033-air-amarillo);
}

.rt033-airport-v1 .rt033-air-camino--fija .rt033-air-camino__dato {
	color: var(--rt033-air-blanco);
}

/* Fuera: calculo por taximetro. Papel y filete, sin peso de bloque. */
.rt033-airport-v1 .rt033-air-camino--taximetro {
	background: var(--rt033-air-papel);
	border: 1px solid var(--rt033-air-borde);
	color: var(--rt033-air-tinta);
}

.rt033-airport-v1 .rt033-air-camino--taximetro .rt033-air-camino__eti {
	color: var(--rt033-air-tinta-suave);
}

/* 4. Paradas por terminal -------------------------------------------------
   Lo que Aena publica de forma expresa, terminal a terminal. Van como FILAS de
   panel, no como tarjetas: son tres lineas del mismo inventario y se leen en
   vertical de un vistazo. Tres tarjetas obligarian a leer tres veces la misma
   estructura.

   Sin una linea de JavaScript. Unas pestanas aqui esconderian dos tercios de
   la informacion y obligarian a pulsar para ver algo que cabe entero. */

.rt033-airport-v1 .rt033-air-paradas {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--rt033-air-borde);
	border-radius: var(--rt033-air-radio);
	overflow: hidden;
	background: var(--rt033-air-blanco);
}

.rt033-airport-v1 .rt033-air-parada {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 18px;
}

.rt033-airport-v1 .rt033-air-parada + .rt033-air-parada {
	border-top: 1px solid var(--rt033-air-borde);
}

/* El codigo de terminal. Ancho fijo para que las tres filas alineen su texto
   en la misma vertical: es lo que convierte una lista en un panel. */
.rt033-airport-v1 .rt033-air-parada__codigo {
	flex: 0 0 62px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	border-radius: var(--rt033-air-radio-chico);
	background: var(--rt033-air-negro);
	color: var(--rt033-air-blanco);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.01em;
}

/* Las tres partes del texto van en `<span>`, no en `<p>`: un parrafo dentro de
   un `<li>` de esta lista arrastraria el margen y el `padding-bottom: 1em` que
   Divi le pone a todo parrafo suyo, y la fila creceria 34 px por nada. Se
   pintan como bloque a mano. */
.rt033-airport-v1 .rt033-air-parada__texto {
	display: block;
	min-width: 0;
}

.rt033-airport-v1 .rt033-air-parada__dato {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rt033-air-tinta);
}

.rt033-airport-v1 .rt033-air-parada__pie {
	display: block;
	margin-top: 3px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--rt033-air-tinta-suave);
}

/* 5. Modos de recogida ----------------------------------------------------
   Reserva previa, parada oficial y T4 Satelite. Tres situaciones distintas del
   mismo momento, cada una con su rotulo. El rotulo es un `<p>`, no un H3: los
   encabezados del documento son los del contenido aprobado. */

.rt033-airport-v1 .rt033-air-modos {
	display: grid;
	gap: var(--rt033-air-hueco);
}

/* Aqui el rotulo SI es un H3, y no por maquetacion: «Si has reservado», «La
   parada oficial» y «Si llegas a la T4 Satelite» son encabezados del contenido
   aprobado. El sistema no baja de nivel un encabezado para que quepa. */
.rt033-airport-v1 .rt033-air-modo h3 {
	margin: 0 0 7px;
	font-size: 19px;
	line-height: 1.3;
}

.rt033-airport-v1 .rt033-air-modo__icono {
	margin-bottom: 11px;
	line-height: 0;
	color: var(--rt033-air-tinta);
}

.rt033-airport-v1 .rt033-air-modo__icono svg {
	display: block;
	width: 26px;
	height: 26px;
}

.rt033-airport-v1 .rt033-air-modo p:not([class]) {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* 6. Los cuatro datos -----------------------------------------------------
   Terminal, hora, paradas y pasajeros. Numerados, porque son una secuencia de
   lo que hay que tener a mano antes de escribir el mensaje, y porque el numero
   es una marca mas barata que un icono: no hay que dibujar cuatro simbolos que
   digan «hora» y «equipaje» sin ambiguedad.

   El amarillo entra aqui como filete bajo el numero. Como tinta no puede: sobre
   papel da 2,15:1. */

.rt033-airport-v1 .rt033-air-datos {
	display: grid;
	gap: 22px var(--rt033-air-hueco);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rt033-air-dato;
}

.rt033-airport-v1 .rt033-air-dato {
	counter-increment: rt033-air-dato;
}

.rt033-airport-v1 .rt033-air-dato::before {
	content: counter(rt033-air-dato, decimal-leading-zero);
	display: block;
	width: 2.2em;
	padding-bottom: 7px;
	margin-bottom: 11px;
	border-bottom: 3px solid var(--rt033-air-amarillo);
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: currentColor;
	opacity: 0.55;
}

.rt033-airport-v1 .rt033-air-dato__titulo {
	margin: 0 0 5px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.rt033-airport-v1 .rt033-air-dato p:not([class]) {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
}

/* 7. Necesidades ----------------------------------------------------------
   Lo que se puede INDICAR al reservar. Nunca un catalogo de lo que hay: el
   texto aprobado dice «indicanos lo que necesitas» y la maquetacion no puede
   contradecirlo convirtiendolo en una parrilla de producto.

   Reparte con `auto-fit` y no con saltos: a 390 da una columna, a 834 dos y a
   1440 cuatro, sin una sola media query. Y respeta el motivo por el que la
   rejilla de tres de CITY_CORE no reparte en tablet: con 280 px de minimo,
   ninguna ficha baja de los 60 caracteres por linea. */

.rt033-airport-v1 .rt033-air-necesidades {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--rt033-air-hueco);
}

/* Y una variante de CANTIDAD, `--cinco`, para cuando son exactamente cinco.
   Con `auto-fit` a secas, cinco fichas en escritorio reparten 4 + 1 y la quinta
   queda sola y pegada a la izquierda: se lee como una tarjeta que se ha caido
   de fila, no como una decision. La variante fija una rejilla de columnas
   PARES y deja que las fichas de la ultima fila empiecen medio modulo mas
   adentro, que es lo que las centra sin `margin: auto` ni una fila falsa.

   Es una clase de cantidad, no de contenido: una landing de aeropuerto con
   cuatro o con seis fichas NO la lleva y se queda con el reparto automatico. */

.rt033-airport-v1 .rt033-air-necesidad {
	background: var(--rt033-air-papel);
	border: 1px solid var(--rt033-air-borde);
	border-radius: var(--rt033-air-radio-chico);
	padding: 16px;
}

/* Sin icono, a proposito. El catalogo tiene simbolo honesto para tres de las
   cinco situaciones (coche, equipaje, accesibilidad) y ninguno que diga «con
   ninos» o «con mascota» sin ambiguedad. Tres iconos y dos huecos se lee como
   un error; cinco iconos forzados, como relleno. El rotulo basta. */
.rt033-airport-v1 .rt033-air-necesidad__titulo {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--rt033-air-tinta);
}

.rt033-airport-v1 .rt033-air-necesidad p:not([class]) {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--rt033-air-tinta-suave);
}

/* Sobre seccion clara la ficha va en papel; si alguna vez cae sobre gris, el
   papel sobre papel desaparece y pasa a blanco. */
.rt033-city-v2--gris.rt033-airport-v1 .rt033-air-necesidad {
	background: var(--rt033-air-blanco);
}

/* 8. Franjas horarias -----------------------------------------------------
   Las dos franjas del regimen por taximetro. Mismo patron de fila de panel que
   las paradas, en version compacta: son dos datos y no necesitan caja propia. */

.rt033-airport-v1 .rt033-air-franjas {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rt033-air-borde);
}

.rt033-airport-v1 .rt033-air-franja {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--rt033-air-borde);
	font-size: 15.5px;
	line-height: 1.45;
}

.rt033-airport-v1 .rt033-air-franja__eti {
	flex: 0 0 auto;
	min-width: 132px;
	font-weight: 700;
	color: var(--rt033-air-tinta);
}

.rt033-airport-v1 .rt033-air-franja__valor {
	color: var(--rt033-air-tinta-suave);
}

/* 9. Ajustes sobre fondo oscuro -------------------------------------------
   Las piezas que caen en una seccion oscura heredan el color del texto por
   `currentColor`, pero los filetes y los fondos propios hay que invertirlos a
   mano: un filete de `rgba(17,17,17,.12)` sobre #111 no existe. */

.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-air-dato__titulo,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-air-dato__titulo {
	color: var(--rt033-air-blanco);
}

.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-air-franjas,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-air-franjas,
.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-air-franja,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-air-franja {
	border-color: var(--rt033-air-borde-oscuro);
}

.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-air-franja__eti,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-air-franja__eti {
	color: var(--rt033-air-blanco);
}

.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-air-franja__valor,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-air-franja__valor {
	color: var(--rt033-air-sobre-oscuro);
}

/* Las VIAS de CITY_CORE sobre fondo oscuro.
 *
 * En una landing de ciudad este componente cae siempre en una seccion clara, y
 * por eso `city.css` le fija el parrafo en `--tinta-suave` (#5a5a5a) sin
 * variante. En AIRPORT el bloque de reserva es un ancla oscura, y ahi ese gris
 * da 2,74:1 sobre #111: por debajo de AA y, en la practica, ilegible.
 *
 * Lo adapta AIRPORT y no CITY_CORE a proposito: es una situacion que solo se da
 * aqui, y tocar `city.css` por esto cambiaria un fichero que hoy sirve a las
 * landings de ciudad. La capa de encima es la que se adapta a la de abajo.
 *
 * Medido despues del cambio: #e8e8e9 sobre #111 da 14,4:1. */
.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-city-via p,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-city-via p {
	color: var(--rt033-air-sobre-oscuro);
}

/* El enlace dentro de una via oscura hereda el color del texto; el subrayado ya
   lo distingue, igual que en el resto del sistema. */
.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-city-via p a,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-city-via p a {
	color: inherit;
}

/* La NOTA de CITY_CORE sobre fondo oscuro.
 *
 * `city.css` le da fondo BLANCO fijo, porque en una landing de ciudad siempre
 * cae en una seccion clara. Dentro de un ancla oscura la caja sigue siendo
 * blanca pero el texto hereda `--sobre-oscuro`: blanco sobre blanco, 1,22:1.
 *
 * La caja manda sobre la seccion: si el fondo es blanco, la tinta es oscura.
 * Se restaura tambien el gris del cuerpo, que es el par que la nota usa en el
 * resto del sistema. */
.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-city-nota,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-city-nota {
	color: var(--rt033-air-tinta);
}

.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-city-nota p,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-city-nota p,
.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-city-nota h3,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-city-nota h3 {
	color: var(--rt033-air-tinta);
}

.rt033-city-v2--oscuro.rt033-airport-v1 .rt033-city-nota strong,
.rt033-city-v2--negro.rt033-airport-v1 .rt033-city-nota strong {
	color: var(--rt033-air-negro);
}

/* 10. Convivencia con Divi ------------------------------------------------
   Las cuatro pisadas de CITY_CORE ya estan hechas en `city.css` y valen aqui
   igual, porque la seccion lleva las dos clases. Lo unico que AIRPORT necesita
   ademas es la red contra `wpautop` para sus propios componentes: WordPress
   envuelve en `<p>` lo que encuentra suelto y cada rejilla arrastraria un
   parrafo vacio de 17 px que descuadra el ritmo vertical sin que se vea por
   que. */

.rt033-airport-v1 .rt033-air-tarifa > p:empty,
.rt033-airport-v1 .rt033-air-tarifa__cuerpo > p:empty,
.rt033-airport-v1 .rt033-air-caminos > p:empty,
.rt033-airport-v1 .rt033-air-camino > p:empty,
.rt033-airport-v1 .rt033-air-paradas > p:empty,
.rt033-airport-v1 .rt033-air-modos > p:empty,
.rt033-airport-v1 .rt033-air-modo > p:empty,
.rt033-airport-v1 .rt033-air-datos > p:empty,
.rt033-airport-v1 .rt033-air-dato > p:empty,
.rt033-airport-v1 .rt033-air-necesidades > p:empty,
.rt033-airport-v1 .rt033-air-necesidad > p:empty {
	display: none;
}

/* 11. Movimiento ----------------------------------------------------------
   Lo justo: el estado de pulsacion de las filas que son enlace. Nada de
   entradas escalonadas —esta pagina se abre para resolver una duda concreta,
   muchas veces de pie en una terminal— y nunca sobre propiedades de
   maquetacion. */

@media (prefers-reduced-motion: no-preference) {
	.rt033-airport-v1 .rt033-air-parada,
	.rt033-airport-v1 .rt033-air-necesidad {
		transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* 12. Tablet y escritorio -------------------------------------------------
   Los mismos saltos que el hero y que CITY_CORE: 768 / 1024 / 1180. Ni uno
   propio, para que la pagina no se recomponga a trompicones. */

@media (min-width: 768px) {
	.rt033-airport-v1 .rt033-air-tarifa {
		padding: 30px 28px;
	}

	/* 2 + 2 + 1, con la quinta centrada: rejilla de cuatro, ficha de dos, y la
	   ultima arrancando en la columna 2. */
	.rt033-airport-v1 .rt033-air-necesidades--cinco {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.rt033-airport-v1 .rt033-air-necesidades--cinco > .rt033-air-necesidad {
		grid-column: span 2;
	}

	.rt033-airport-v1 .rt033-air-necesidades--cinco > .rt033-air-necesidad:nth-child(5) {
		grid-column: 2 / span 2;
	}

	.rt033-airport-v1 .rt033-air-caminos {
		grid-template-columns: 1fr 1fr;
	}

	.rt033-airport-v1 .rt033-air-datos {
		grid-template-columns: 1fr 1fr;
	}

	.rt033-airport-v1 .rt033-air-modos {
		gap: 24px;
	}

	.rt033-airport-v1 .rt033-air-parada {
		padding: 17px 22px;
	}
}

@media (min-width: 1024px) {
	/* La cifra y las condiciones, lado a lado. Debajo de 1024 la cifra ocuparia
	   casi todo el ancho disponible y las filas de condicion quedarian en 120 px:
	   apiladas se leen mejor, y es el mismo criterio por el que la rejilla de
	   tres de CITY_CORE no reparte en tablet. */
	.rt033-airport-v1 .rt033-air-tarifa__cuerpo {
		grid-template-columns: var(--rt033-air-columna-cifra) minmax(0, 1fr);
		gap: 40px;
	}

	.rt033-airport-v1 .rt033-air-tarifa__filas {
		border-top: 0;
	}

	.rt033-airport-v1 .rt033-air-tarifa__fila:first-child {
		padding-top: 0;
	}

	.rt033-airport-v1 .rt033-air-datos {
		grid-template-columns: repeat(4, 1fr);
	}

	.rt033-airport-v1 .rt033-air-modos {
		grid-template-columns: repeat(3, 1fr);
	}

	/* 3 + 2, con las dos de abajo centradas: rejilla de seis, ficha de dos, y la
	   cuarta arrancando en la columna 2. La quinta cae detras de ella sola. */
	.rt033-airport-v1 .rt033-air-necesidades--cinco {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.rt033-airport-v1 .rt033-air-necesidades--cinco > .rt033-air-necesidad:nth-child(4) {
		grid-column: 2 / span 2;
	}

	.rt033-airport-v1 .rt033-air-necesidades--cinco > .rt033-air-necesidad:nth-child(5) {
		grid-column: auto / span 2;
	}
}

@media (min-width: 1180px) {
	.rt033-airport-v1 .rt033-air-tarifa {
		padding: 36px 34px;
	}

	.rt033-airport-v1 .rt033-air-tarifa__cuerpo {
		gap: 52px;
	}
}