/* ==========================================================================
   RT033 Header V2 — escritorio (megamenu y desplegables) y drawer de movil.

   Reglas del proyecto:
   - Sistema autocontenido con clases propias `rt033-*`. Divi no maqueta nada
     aqui dentro.
   - Nada de `!important` salvo para neutralizar CSS que Divi genera con mayor
     especificidad. Cada uso va comentado.
   - Un solo arbol en el HTML: escritorio y movil son dos presentaciones del
     mismo <nav>. Lo que cambia de uno a otro es SOLO este fichero.
   - :focus-visible obligatorio en todo lo interactivo.
   - Objetivo tactil minimo 44x44 px en todo lo que se pulsa con el dedo.
   ========================================================================== */

:root,
.rt033-shell {
	--rt033-amarillo: #feba02;
	--rt033-amarillo-oscuro: #e5a600;
	--rt033-negro: #111111;
	--rt033-blanco: #ffffff;
	--rt033-tinta: #1a1a1a;
	--rt033-tinta-suave: #5a5a5a;
	--rt033-borde: rgba(17, 17, 17, 0.14);
	--rt033-borde-panel: rgba(17, 17, 17, 0.08);
	--rt033-header-alto: 80px;
	--rt033-container: 1360px;
	--rt033-mega-ancho: 1180px;
	--rt033-mega-alto: min(72dvh, 660px);
	--rt033-radio: 14px;
	--rt033-radio-chico: 10px;
	--rt033-sombra: 0 18px 48px rgba(17, 17, 17, 0.16), 0 2px 8px rgba(17, 17, 17, 0.08);
	--rt033-z: 9998;
	--rt033-tactil: 44px;
	/* Verde de marca de WhatsApp. Unica excepcion a la paleta del sitio, y
	   esta justificada: el reconocimiento inmediato del canal ES la funcion
	   del boton. Se usa en el bloque 12 y en el CTA del pie del drawer. */
	--rt033-wa: #25d366;
	--rt033-wa-oscuro: #1da851;
	/* Bloque 6: el rotulo y el icono del boton de WhatsApp pasan de blanco a
	   tinta. El verde NO cambia —la forma y el color son el reconocimiento del
	   canal—, cambia lo que va encima:
	       blanco sobre #25d366   1,98:1   no llegaba ni a AA de texto grande
	       #111111 sobre #25d366  9,52:1   AAA
	       #111111 sobre #1da851  6,09:1   AA holgado, asi que el hover oscuro
	                                       se queda como esta y no hace falta
	                                       sustituirlo por sombra o borde.
	   Medido con `node deploy/contraste.js`. */
	--rt033-wa-texto: #111111;
}

/* --------------------------------------------------------------------------
   1. Neutralizar el contenedor de Divi
   El header vive dentro de un modulo Code del Theme Builder. Divi le pone
   seccion, fila, columna y modulo, cada uno con su padding y su max-width.
   Se anulan solo dentro de nuestra seccion (`module_class` del layout 40358).
   -------------------------------------------------------------------------- */

.rt033-header-v2-seccion,
.rt033-header-v2-seccion .et_pb_row,
.rt033-header-v2-seccion .et_pb_column,
.rt033-header-v2-seccion .et_pb_module,
.rt033-header-v2-seccion .et_pb_code_inner {
	/* Divi imprime estas medidas en un <style> por pagina, con selectores mas
	   especificos que los nuestros: sin !important no hay forma limpia. */
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.rt033-header-v2-seccion .et_pb_row {
	/* Divi usa flex en algunas filas; aqui no hace falta ninguna caja extra. */
	display: block !important;
}

/* Divi le pone a TODA lista del Theme Builder `padding: 0 0 23px 1em` con el
   selector `.et-l--header ul`, que tiene mas especificidad que una clase
   nuestra suelta. Se neutraliza anclando al contenedor de Divi en vez de
   recurrir a !important. Comprobado en Chrome: era lo unico de Divi que
   afectaba al componente. */
.et-l--header .rt033-shell ul,
.et-l--header .rt033-shell ol,
.et-l--header .rt033-shell li,
.rt033-shell ul,
.rt033-shell ol,
.rt033-shell li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rt033-shell p {
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   2. Utilidades
   -------------------------------------------------------------------------- */

.rt033-oculto {
	position: absolute !important; /* utilidad de accesibilidad: tiene que ganar siempre */
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rt033-oculto-busqueda {
	display: none !important; /* gana a cualquier display de la maqueta */
}

/* Varios controles del header se ocultan con el atributo `hidden`, y el valor
   por defecto del navegador (`display: block`) pierde contra el `display: flex`
   de sus propias reglas. Sin esto, el aspa de "limpiar busqueda" se veria
   siempre. */
.rt033-shell [hidden] {
	display: none !important;
}

/* --- Iconos ---------------------------------------------------------------
   Todos son <svg> en linea servidos por `inc/header/icons.php`. Una sola
   familia: lienzo 24x24, trazo `currentColor`, sin relleno (WhatsApp es la
   unica excepcion y lleva su fill en el propio path).

   Nada de emoji: el dibujo lo pondria el sistema operativo y cambiaria con
   cada telefono. Nada de fuentes de iconos ni de peticiones externas.
   -------------------------------------------------------------------------- */

.rt033-icono {
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	/* Un SVG es `inline` por defecto y arrastra el hueco de la linea base, que
	   descuadra media fila. Con `block` dentro de un contenedor flex alineado
	   al centro, el icono queda centrado de verdad. */
	overflow: visible;
	pointer-events: none;
}

.rt033-chevron {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.16s ease;
}

[aria-expanded="true"] > .rt033-chevron,
[aria-expanded="true"] .rt033-chevron {
	transform: translateY(1px) rotate(-135deg);
}

/* --------------------------------------------------------------------------
   3. Barra del header
   -------------------------------------------------------------------------- */

/* Header fijo, no `sticky`.
   `position: sticky` NO funciona en este sitio: Divi escribe en linea
   `overflow-y: hidden` sobre `#page-container` (y `overflow-x: hidden` sobre
   `body`), con lo que `#page-container` pasa a ser un contenedor de scroll que
   no hace scroll y el header pegajoso se va con la pagina. Comprobado en
   Chrome. La alternativa habria sido pisar ese estilo en linea con
   `overflow: visible !important` sobre `#page-container`, es decir, cambiarle
   el desbordamiento a TODA la pagina para arreglar el header: demasiado efecto
   colateral.
   Con `fixed` el componente se basta a si mismo: `.rt033-shell` se queda en el
   flujo ocupando exactamente el alto del header, y `.rt033-header` va fijo
   encima. Sin saltos de maquetacion y sin tocar nada de Divi. */
.rt033-shell {
	position: relative;
	height: var(--rt033-header-alto);
	background: var(--rt033-amarillo);
	color: var(--rt033-tinta);
	font-family: inherit; /* la tipografia global del sitio no se toca en 2A */
}

.rt033-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--rt033-z);
	background: var(--rt033-amarillo);
	color: var(--rt033-tinta);
}

/* Convivencia con la barra de administracion de WordPress. */
.admin-bar .rt033-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .rt033-header {
		/* Por debajo de 782 px la barra de WP deja de estar fija: dejar los
		   46 px abriria un hueco al hacer scroll. */
		top: 0;
	}
}

.rt033-header__inner {
	position: relative; /* referencia de posicion de los paneles */
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: var(--rt033-container);
	min-height: var(--rt033-header-alto);
	margin: 0 auto;
	padding: 0 28px;
	box-sizing: border-box;
}

.rt033-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
	border-radius: 6px;
}

.rt033-logo__img {
	display: block;
	width: auto;
	height: 46px;
	max-width: none;
}

/* --------------------------------------------------------------------------
   4. Navegacion
   -------------------------------------------------------------------------- */

/* Contenedor comun de escritorio y movil. En escritorio es transparente: no
   pinta nada, solo deja que el <nav> ocupe el centro de la barra. Por debajo de
   1180 px se convierte en el panel deslizante (bloque 11). */
.rt033-drawer {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.rt033-drawer__cuerpo {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

/* Cabecera y pie son exclusivos del panel de movil. */
.rt033-drawer__cabecera,
.rt033-pie {
	display: none;
}

.rt033-nav {
	display: none; /* escritorio a partir del breakpoint; ver bloque 9 */
	flex: 1 1 auto;
	min-width: 0;
}

.rt033-nav__lista {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rt033-nav__item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rt033-nav__item--mega {
	position: static; /* el megamenu se posiciona respecto al contenedor */
}

/* Los iconos de rama son SOLO de movil (bloque 2D, D1). En la barra de
   escritorio la navegacion se queda tipografica: ahi funciona, esta limpia y
   esta aprobada, y cinco iconos seguidos en una barra de 80 px de alto
   restarian jerarquia al unico control que debe destacar, el CTA. */
.rt033-nav__icono {
	display: none;
}

.rt033-nav__enlace,
.rt033-nav__disparador {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 13px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--rt033-tinta);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.005em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.rt033-nav__enlace:hover,
.rt033-nav__disparador:hover,
.rt033-nav__disparador[aria-expanded="true"] {
	background: rgba(17, 17, 17, 0.09);
	color: var(--rt033-tinta);
}

.rt033-nav__item--actual > .rt033-nav__enlace,
.rt033-nav__item--actual > .rt033-nav__disparador {
	background: rgba(17, 17, 17, 0.07);
}

/* Puente entre el boton y el megamenu.
   El panel del megamenu se ancla a `.rt033-header__inner`, no al <li>, asi que
   entre el boton (40 px, centrado en una barra de 80) y el borde inferior de la
   barra queda una franja de nadie. Al bajar el raton hacia el panel el puntero
   la cruzaba, salia del <li> y `pointerleave` cerraba la vista previa. Este
   pseudo-elemento tapa esa franja mientras la rama esta abierta.
   No es lo que arregla el bug de A1 — eso lo arregla la maquina de estados del
   JS, que impide que el raton cierre una apertura confirmada — pero evita que
   la vista previa por hover parpadee. */
.rt033-nav__item--mega > .rt033-nav__disparador {
	position: relative;
}

.rt033-nav__item--mega > .rt033-nav__disparador[aria-expanded="true"]::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -13px;
	right: -13px;
	height: 24px;
}

/* --------------------------------------------------------------------------
   5. Paneles (base comun del megamenu y de los desplegables)
   -------------------------------------------------------------------------- */

.rt033-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	/* El padding transparente hace de puente entre el disparador y el panel:
	   el raton nunca sale del <li> y el menu no se cierra solo. */
	padding-top: 10px;
	transform: translateX(var(--rt033-desplaz, 0px));
}

.rt033-panel[hidden] {
	display: none;
}

.rt033-panel__caja,
.rt033-mega {
	background: var(--rt033-blanco);
	border: 1px solid var(--rt033-borde-panel);
	border-radius: var(--rt033-radio);
	box-shadow: var(--rt033-sombra);
	animation: rt033-aparecer 0.14s ease-out both;
}

@keyframes rt033-aparecer {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.rt033-panel__caja,
	.rt033-mega { animation: none; }
	.rt033-chevron { transition: none; }
}

/* --- Desplegable compacto ------------------------------------------------- */

.rt033-panel--lista .rt033-panel__caja,
.rt033-panel--cta .rt033-panel__caja,
.rt033-panel--idioma .rt033-panel__caja {
	padding: 10px;
	max-height: min(70dvh, 620px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rt033-lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 232px;
}

.rt033-panel--lista[data-columnas="2"] .rt033-lista { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
.rt033-panel--lista[data-columnas="3"] .rt033-lista { grid-template-columns: repeat(3, minmax(210px, 1fr)); }

.rt033-lista__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rt033-lista__item > a,
.rt033-lista__rotulo {
	display: block;
	padding: 9px 12px;
	border-radius: var(--rt033-radio-chico);
	color: var(--rt033-tinta);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

.rt033-lista__rotulo {
	color: var(--rt033-tinta-suave);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rt033-lista__item > a:hover {
	background: rgba(254, 186, 2, 0.22);
	color: var(--rt033-negro);
}

.rt033-lista__item--propio > a {
	font-weight: 700;
}

.rt033-lista--anidada {
	min-width: 0;
	padding-left: 12px;
}

/* --- Rama larga de destinos: destacados + "ver todos" --------------------- */

.rt033-panel__rotulo {
	margin: 2px 4px 10px;
	color: var(--rt033-tinta-suave);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.rt033-panel--destinos .rt033-panel__caja {
	width: min(720px, calc(100vw - 40px));
	padding: 16px;
}

/* Dos clases para ganarle a `.rt033-destacadas`, que se define mas abajo. */
.rt033-destacadas.rt033-destacadas--aero {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

/* Los 21 destinos, cuando se despliegan, en tres columnas que SI pueden
   encoger: con `minmax(210px, 1fr)` la rejilla no bajaba de 630 px y el panel
   sacaba barra de desplazamiento horizontal. Comprobado en Chrome a 1440. */
.rt033-panel--destinos[data-columnas] .rt033-lista {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Boton de plegado. Es un <button> de verdad, con aria-expanded y
   aria-controls; su contenido ya esta impreso debajo. */
.rt033-plegable__disparador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: var(--rt033-tactil);
	margin: 12px 0 0;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid var(--rt033-borde);
	border-radius: 999px;
	background: var(--rt033-blanco);
	color: var(--rt033-tinta);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.rt033-plegable__disparador:hover {
	background: rgba(254, 186, 2, 0.18);
	border-color: var(--rt033-amarillo);
}

.rt033-plegable__disparador--tenue {
	border-color: transparent;
	background: transparent;
	font-weight: 600;
	color: var(--rt033-tinta-suave);
}

.rt033-plegable__cuerpo {
	margin-top: 10px;
	animation: rt033-aparecer 0.14s ease-out both;
}

.rt033-plegable__cuerpo[hidden] {
	display: none;
}

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

/* --------------------------------------------------------------------------
   6. Megamenu de ciudades
   -------------------------------------------------------------------------- */

.rt033-panel--mega {
	left: 50%;
	right: auto;
	width: min(var(--rt033-mega-ancho), calc(100vw - 40px));
	transform: translateX(-50%);
}

.rt033-mega {
	display: grid;
	/* Dos columnas y DOS filas (bloque 2D, C1): la fila 2 de la columna
	   izquierda es el hueco que quedaba libre bajo el buscador y las 10
	   fichas, y es donde va el acceso a "Quienes somos". La columna derecha
	   ocupa las dos filas, asi que el arbol territorial no pierde altura. */
	grid-template-columns: 296px minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	max-height: var(--rt033-mega-alto);
	overflow: hidden;
}

/* El tope tiene que repetirse en las dos columnas, no solo en el contenedor:
   una fila de rejilla se dimensiona por su contenido, asi que con el tope solo
   arriba la columna crecia hasta 2.400 px y se recortaba en seco en vez de
   dejar hacer scroll dentro. Comprobado en Chrome a 1440x1200.
   El lateral ya no lo lleva: comparte columna con las utilidades, asi que su
   tope es el de la fila 1 (`minmax(0, 1fr)`), no el del panel entero. */
.rt033-mega__principal {
	max-height: var(--rt033-mega-alto);
}

.rt033-mega__lateral,
.rt033-mega__principal {
	min-height: 0;
}

.rt033-mega__lateral {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 22px 24px;
	background: #fbfbfa;
	border-right: 1px solid var(--rt033-borde-panel);
	border-radius: var(--rt033-radio) 0 0 var(--rt033-radio);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rt033-mega__principal {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px 8px 18px 24px;
}

/* Degradado inferior: avisa de que la lista sigue debajo. Sin el, el corte
   seco parece un panel roto. */
.rt033-mega__principal::after {
	content: "";
	position: absolute;
	left: 24px;
	right: 22px;
	bottom: 0;
	height: 30px;
	background: linear-gradient(to top, var(--rt033-blanco), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.rt033-mega__rotulo {
	margin: 0;
	padding: 0;
	color: var(--rt033-tinta-suave);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.rt033-mega__scroll {
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 14px;
	padding-right: 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Columnas CSS y no rejilla: con `grid` cada fila mide lo que el bloque mas
   alto de esa fila, y como Girona tiene 24 ciudades y Alicante ninguna, salian
   huecos enormes. Con `columns` los bloques se empaquetan seguidos y las tres
   columnas quedan equilibradas. Funciona porque este bloque NO lleva altura
   fija: el que hace scroll es su padre. */
.rt033-mega__grupos {
	columns: 3;
	column-gap: 26px;
	padding-bottom: 6px;
}

@media (max-width: 1279.98px) {
	.rt033-mega__grupos { columns: 2; }
}

.rt033-grupo {
	display: inline-block;
	width: 100%;
	min-width: 0;
	margin: 0 0 18px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

/* La fila del territorio. En escritorio solo contiene el enlace; en movil
   ademas el boton que abre sus ciudades. */
.rt033-grupo__fila {
	display: block;
}

.rt033-grupo__enlace {
	display: block;
	margin-bottom: 5px;
	padding: 3px 0;
	color: var(--rt033-negro);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	border-bottom: 1px solid var(--rt033-borde-panel);
}

.rt033-grupo__enlace:hover {
	color: var(--rt033-amarillo-oscuro);
}

.rt033-grupo__enlace--rotulo {
	color: var(--rt033-tinta-suave);
	cursor: default;
}

.rt033-grupo--suelto .rt033-grupo__enlace {
	border-bottom-color: transparent;
}

/* El boton del acordeon no existe para el escritorio. */
.rt033-grupo__toggle {
	display: none;
}

.rt033-grupo__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rt033-grupo__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rt033-grupo__item > a,
.rt033-grupo__item > span {
	display: block;
	padding: 3px 6px 3px 0;
	color: var(--rt033-tinta-suave);
	font-size: 13.5px;
	line-height: 1.35;
	text-decoration: none;
}

.rt033-grupo__item > a:hover {
	color: var(--rt033-negro);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rt033-grupo__lista--anidada {
	padding-left: 10px;
}

.rt033-mega__estado {
	margin: 10px 0 0;
	padding: 14px 0;
	color: var(--rt033-tinta-suave);
	font-size: 14px;
}

/* --- Accesos de utilidad ("Quienes somos") --------------------------------
   Un hijo de Ciudades que no es una localidad. Se saca del arbol territorial y
   se pinta aqui, en el pie de la columna izquierda del megamenu, con aspecto
   de ficha —la misma familia que las 10 destacadas— pero con icono y linea de
   apoyo para que no se confunda con la ciudad numero 11.

   ES EL MISMO ENLACE, impreso una sola vez. No hay copia en el arbol.
   -------------------------------------------------------------------------- */

.rt033-utilidades {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 22px 18px;
	box-sizing: border-box;
	background: #fbfbfa;
	border-top: 1px solid var(--rt033-borde-panel);
	border-right: 1px solid var(--rt033-borde-panel);
	border-radius: 0 0 0 var(--rt033-radio);
}

.rt033-utilidad {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: var(--rt033-tactil);
	padding: 8px 11px;
	box-sizing: border-box;
	border: 1px solid var(--rt033-borde-panel);
	border-radius: var(--rt033-radio-chico);
	background: var(--rt033-blanco);
	color: var(--rt033-tinta);
	text-decoration: none;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.rt033-utilidad:hover {
	border-color: var(--rt033-amarillo);
	background: rgba(254, 186, 2, 0.16);
	color: var(--rt033-negro);
}

.rt033-utilidad__marco {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--rt033-amarillo);
	color: var(--rt033-negro);
}

.rt033-utilidad__icono {
	width: 18px;
	height: 18px;
}

.rt033-utilidad__texto {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.rt033-utilidad__titulo {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.rt033-utilidad__apoyo {
	color: var(--rt033-tinta-suave);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
}

/* La flecha es la señal tactil de "esto navega" y solo hace falta en la fila
   de movil. En escritorio la ficha ya se lee como enlace. */
.rt033-utilidad__flecha {
	display: none;
}

/* La SEGUNDA representacion de "Quienes somos" —la fila suelta del drawer— no
   existe en escritorio: aqui manda la ficha del megamenu. `display: none` la
   saca tambien del arbol de accesibilidad y del recorrido del tabulador, asi
   que un lector de pantalla solo encuentra una de las dos. */
.rt033-nav__item--utilidad {
	display: none;
}

/* --- Buscador ------------------------------------------------------------- */

.rt033-buscador {
	position: relative;
	display: flex;
	align-items: center;
}

.rt033-buscador__lupa {
	position: absolute;
	left: 12px;
	width: 16px;
	height: 16px;
	color: var(--rt033-tinta-suave);
	pointer-events: none;
}

.rt033-buscador__campo {
	width: 100%;
	height: var(--rt033-tactil);
	margin: 0;
	padding: 0 38px 0 36px;
	box-sizing: border-box;
	border: 1px solid var(--rt033-borde);
	border-radius: 999px;
	background: var(--rt033-blanco);
	color: var(--rt033-tinta);
	font: inherit;
	font-size: 14.5px;
	-webkit-appearance: none;
	appearance: none;
}

.rt033-buscador__campo::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.rt033-buscador__campo:focus {
	border-color: var(--rt033-negro);
	outline: none;
	box-shadow: 0 0 0 3px rgba(254, 186, 2, 0.55);
}

.rt033-buscador__limpiar {
	position: absolute;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rt033-tinta-suave);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.rt033-buscador__limpiar:hover {
	background: rgba(17, 17, 17, 0.07);
	color: var(--rt033-negro);
}

/* Aviso de "escribe al menos 2 caracteres". Discreto y aria-live: no desplaza
   la lista ni la vacia, solo explica por que todavia no se filtra. */
.rt033-buscador__minimo {
	margin: -6px 0 0;
	padding: 0 4px;
	color: var(--rt033-tinta-suave);
	font-size: 12.5px;
	line-height: 1.35;
}

/* --- Destacadas ----------------------------------------------------------- */

.rt033-destacadas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rt033-destacadas__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rt033-destacadas__item > a {
	display: flex;
	align-items: center;
	height: 100%;
	min-height: 38px;
	padding: 7px 10px;
	box-sizing: border-box;
	border: 1px solid var(--rt033-borde-panel);
	border-radius: var(--rt033-radio-chico);
	background: var(--rt033-blanco);
	color: var(--rt033-tinta);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.rt033-destacadas__item > a:hover {
	border-color: var(--rt033-amarillo);
	background: rgba(254, 186, 2, 0.16);
	color: var(--rt033-negro);
}

/* --------------------------------------------------------------------------
   7. Acciones: CTA, idioma, telefono, hamburguesa
   -------------------------------------------------------------------------- */

.rt033-acciones {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex: 0 0 auto;
}

/* --- CTA partido ---------------------------------------------------------- */

.rt033-cta {
	position: relative;
	display: none; /* escritorio; ver bloque 9 */
}

.rt033-cta__grupo {
	display: flex;
	align-items: stretch;
	border-radius: 999px;
	background: var(--rt033-negro);
	overflow: hidden;
}

.rt033-cta__principal,
.rt033-cta__mas {
	display: inline-flex;
	align-items: center;
	height: 46px;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--rt033-blanco);
	font: inherit;
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.rt033-cta__principal {
	gap: 9px;
	padding: 0 16px 0 18px;
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.rt033-cta__mas {
	padding: 0 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.rt033-cta__principal:hover,
.rt033-cta__mas:hover,
.rt033-cta__mas[aria-expanded="true"] {
	background: #2c2c2c;
}

/* Los iconos ya no son mascaras CSS: son SVG en linea (bloque 2D, D3). La
   mascara obligaba a repetir el mismo data-URI dos veces por icono (prefijada
   y sin prefijar) y a mantener dos mecanismos distintos de dibujo en el mismo
   header. Ahora solo hay uno, y aqui queda el tamaño. */
.rt033-cta__icono,
.rt033-tel__icono {
	width: 18px;
	height: 18px;
}

.rt033-wa__icono {
	width: 19px;
	height: 19px;
}

.rt033-panel--cta {
	left: auto;
	right: 0;
}

/* --- Avisos de los controles neutralizados -------------------------------- */

.rt033-aviso {
	margin: 8px 0 0;
	padding: 10px 13px;
	border-radius: var(--rt033-radio-chico);
	background: var(--rt033-negro);
	color: var(--rt033-blanco);
	font-size: 12.5px;
	line-height: 1.4;
}

.rt033-aviso[hidden] {
	display: none;
}

.rt033-aviso--cta {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 11;
	width: max-content;
	max-width: 320px;
	margin: 0;
	box-shadow: var(--rt033-sombra);
}

/* El de la barra compacta cuelga por debajo del amarillo, alineado a la
   derecha, sin ensanchar la barra. */
.rt033-aviso--barra {
	position: absolute;
	top: 100%;
	right: 14px;
	left: 14px;
	z-index: 11;
	max-width: 420px;
	margin: 6px 0 0 auto;
	box-shadow: var(--rt033-sombra);
}

/* --- Idioma --------------------------------------------------------------- */

.rt033-idioma {
	position: relative;
	display: none; /* escritorio; ver bloque 9 */
}

.rt033-idioma__disparador {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 12px;
	margin: 0;
	border: 1px solid rgba(17, 17, 17, 0.2);
	border-radius: 999px;
	background: transparent;
	color: var(--rt033-tinta);
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.rt033-idioma__disparador:hover,
.rt033-idioma__disparador[aria-expanded="true"] {
	background: rgba(17, 17, 17, 0.09);
}

.rt033-panel--idioma {
	left: auto;
	right: 0;
}

.rt033-panel--idioma .rt033-lista {
	min-width: 176px;
}

.rt033-panel--idioma .rt033-lista__item > a {
	display: flex;
	align-items: center;
	gap: 9px;
}

.rt033-panel--idioma .rt033-idioma__codigo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	padding: 2px 5px;
	border-radius: 5px;
	background: rgba(17, 17, 17, 0.07);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
}

/* Bandera de Polylang (o la del item de menu 8826, en base64). Tamano fijo
   para que no dependa de lo que traiga el plugin. */
.rt033-bandera {
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 11px;
	margin: 0;
	object-fit: cover;
	border-radius: 2px;
}

/* Si Polylang no responde y se cae al item de menu, sus banderas en base64
   no deben desmontar el desplegable. */
.rt033-idioma--menu .rt033-lista__item img,
.rt033-idioma--menu .rt033-idioma-movil__actual img {
	display: inline-block;
	width: auto;
	height: 12px;
	margin-right: 8px;
	vertical-align: baseline;
}

/* --- Telefono compacto y hamburguesa (solo movil / tablet) ---------------- */

.rt033-tel {
	display: none; /* aparece por debajo de 1180 px; ver bloque 11 */
	align-items: center;
	justify-content: center;
	width: var(--rt033-tactil);
	height: var(--rt033-tactil);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 12px;
	background: var(--rt033-negro);
	color: var(--rt033-blanco);
	cursor: pointer;
}

.rt033-tel .rt033-tel__icono {
	width: 19px;
	height: 19px;
}

.rt033-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(17, 17, 17, 0.2);
	border-radius: 12px;
	background: transparent;
	color: var(--rt033-tinta);
	cursor: pointer;
}

.rt033-burger__barras,
.rt033-burger__barras::before,
.rt033-burger__barras::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.18s ease, opacity 0.12s ease;
}

.rt033-burger__barras {
	position: relative;
}

.rt033-burger__barras::before,
.rt033-burger__barras::after {
	content: "";
	position: absolute;
	left: 0;
}

.rt033-burger__barras::before { top: -6px; }
.rt033-burger__barras::after  { top: 6px; }

/* Abierta, la hamburguesa se convierte en aspa. */
.rt033-burger[aria-expanded="true"] .rt033-burger__barras {
	background: transparent;
}

.rt033-burger[aria-expanded="true"] .rt033-burger__barras::before {
	top: 0;
	transform: rotate(45deg);
}

.rt033-burger[aria-expanded="true"] .rt033-burger__barras::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.rt033-burger__barras,
	.rt033-burger__barras::before,
	.rt033-burger__barras::after { transition: none; }
}

/* --------------------------------------------------------------------------
   8. Foco
   -------------------------------------------------------------------------- */

.rt033-shell :focus-visible {
	outline: 3px solid var(--rt033-negro);
	outline-offset: 2px;
	border-radius: 8px;
}

.rt033-panel :focus-visible,
.rt033-mega :focus-visible {
	outline-color: var(--rt033-amarillo-oscuro);
}

/* --------------------------------------------------------------------------
   9. Breakpoint
   Por encima de 1180 px: navegacion de escritorio completa.
   Por debajo: barra compacta (logo + telefono + hamburguesa) y drawer.
   No se comprime la navegacion de escritorio en 1024 px: era justo el defecto
   que este componente vino a quitar.
   -------------------------------------------------------------------------- */

@media (min-width: 1180px) {
	.rt033-nav {
		display: block;
	}

	.rt033-cta,
	.rt033-idioma {
		display: block;
	}

	.rt033-burger,
	.rt033-tel--barra {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   10. Punteros gruesos: nada depende de :hover
   -------------------------------------------------------------------------- */

@media (hover: none) {
	.rt033-nav__disparador:hover {
		background: transparent;
	}
}

/* ==========================================================================
   11. MOVIL Y TABLET (< 1180 px)

   El 86 % del trafico. No es un escritorio comprimido: es la navegacion
   principal del sitio.

   Nada de lo que hay aqui duplica el arbol. `.rt033-drawer` deja de ser una
   caja transparente de la barra y pasa a ser el panel deslizante; el <nav> que
   lleva dentro es exactamente el mismo que usa el escritorio.
   ========================================================================== */

@media (max-width: 1179.98px) {

	.rt033-shell {
		--rt033-header-alto: 70px;
	}

	.rt033-header__inner {
		gap: 10px;
		padding: 0 14px;
	}

	.rt033-logo__img {
		height: 40px;
	}

	.rt033-tel {
		display: inline-flex;
	}

	/* --- El panel ---------------------------------------------------------- */

	.rt033-drawer {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 2; /* por encima del fondo oscuro, dentro del header */
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		background: var(--rt033-blanco);
		visibility: hidden;
		transform: translateX(100%);
		/* `visibility` cambia de golpe, no se interpola: al CERRAR espera a que
		   termine el deslizamiento; al ABRIR es inmediata, porque si no el aspa
		   todavia seria invisible cuando le toca recibir el foco. */
		transition: transform 0.2s ease, visibility 0s linear 0.2s;
	}

	[data-rt033-abierto] .rt033-drawer {
		visibility: visible;
		transform: none;
		transition: transform 0.2s ease, visibility 0s linear 0s;
	}

	/* Tablet: panel lateral con fondo oscuro detras. Por debajo de 768 px el
	   panel ocupa la pantalla entera: en 390 px un panel al 50 % era justo el
	   defecto del menu viejo (186 px de ancho, texto cortado). */
	@media (min-width: 768px) {
		.rt033-drawer {
			width: min(520px, 100vw);
			box-shadow: -18px 0 48px rgba(17, 17, 17, 0.22);
		}
	}

	.admin-bar .rt033-drawer {
		top: 32px;
		height: calc(100dvh - 32px);
	}

	@media screen and (max-width: 782px) {
		.admin-bar .rt033-drawer {
			/* Por debajo de 782 px la barra de WP no esta fija. */
			top: 0;
			height: 100dvh;
		}
	}

	.rt033-overlay {
		position: fixed;
		inset: 0;
		z-index: 1;
		background: rgba(17, 17, 17, 0.5);
		animation: rt033-fundido 0.2s ease-out both;
	}

	@keyframes rt033-fundido {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* --- Cabecera del panel ------------------------------------------------ */

	.rt033-drawer__cabecera {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex: 0 0 auto;
		padding: 10px 14px;
		padding-top: calc(10px + env(safe-area-inset-top, 0px));
		background: var(--rt033-amarillo);
	}

	.rt033-drawer__controles {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.rt033-cerrar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--rt033-tactil);
		height: var(--rt033-tactil);
		padding: 0;
		margin: 0;
		border: 1px solid rgba(17, 17, 17, 0.22);
		border-radius: 12px;
		background: transparent;
		color: var(--rt033-tinta);
		cursor: pointer;
	}

	.rt033-cerrar__aspa {
		position: relative;
		display: block;
		width: 20px;
		height: 20px;
	}

	.rt033-cerrar__aspa::before,
	.rt033-cerrar__aspa::after {
		content: "";
		position: absolute;
		top: 9px;
		left: 0;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
	}

	.rt033-cerrar__aspa::before { transform: rotate(45deg); }
	.rt033-cerrar__aspa::after  { transform: rotate(-45deg); }

	.rt033-drawer > .rt033-aviso {
		flex: 0 0 auto;
		margin: 10px 14px 0;
	}

	/* --- Cuerpo desplazable ------------------------------------------------ */

	.rt033-drawer__cuerpo {
		display: block;
		flex: 1 1 auto;
		min-height: 0;
		padding: 6px 14px 0;
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* --- Navegacion en vertical -------------------------------------------- */

	.rt033-nav {
		display: block;
		flex: none;
	}

	.rt033-nav__lista {
		display: block;
	}

	.rt033-nav__item {
		position: static;
		border-bottom: 1px solid var(--rt033-borde-panel);
	}

	/* [ icono ][ texto ..................... ][ chevron ]
	   Con `space-between` y tres hijos el icono se pegaba al borde y el texto
	   quedaba flotando en el centro: el texto es el que tiene que crecer. */
	.rt033-nav__enlace,
	.rt033-nav__disparador {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		height: auto;
		min-height: 54px;
		padding: 8px 6px;
		border-radius: 0;
		font-size: 16.5px;
		font-weight: 700;
		white-space: normal;
		text-align: left;
	}

	.rt033-nav__texto {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Aqui si (bloque 2D, D2): en una lista tactil el icono es lo que deja
	   reconocer la rama sin leerla. Solo en la navegacion de PRIMER NIVEL: las
	   117 localidades siguen sin icono, que si no la lista se convierte en un
	   muro de dibujos. */
	.rt033-nav__icono {
		display: block;
		width: 21px;
		height: 21px;
		color: var(--rt033-tinta-suave);
	}

	.rt033-nav__enlace:hover,
	.rt033-nav__disparador:hover,
	.rt033-nav__disparador[aria-expanded="true"] {
		background: transparent;
	}

	/* Los paneles dejan de flotar: son bloques dentro del panel. */
	.rt033-panel,
	.rt033-panel--mega,
	.rt033-panel--cta,
	.rt033-panel--idioma {
		position: static;
		width: auto;
		max-width: none;
		padding-top: 0;
		transform: none;
	}

	.rt033-panel__caja,
	.rt033-mega {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		animation: none;
	}

	.rt033-panel--lista .rt033-panel__caja,
	.rt033-panel--cta .rt033-panel__caja,
	.rt033-panel--idioma .rt033-panel__caja,
	.rt033-panel--destinos .rt033-panel__caja {
		width: auto;
		max-height: none;
		overflow: visible;
		padding: 0 0 14px;
	}

	/* Una sola columna: en 360 px dos columnas de "Taxi Arcos de la Frontera"
	   parten las palabras. Misma especificidad que las reglas de escritorio y
	   mas abajo en el fichero, asi que ganan sin !important. */
	.rt033-panel--lista[data-columnas="2"] .rt033-lista,
	.rt033-panel--lista[data-columnas="3"] .rt033-lista {
		grid-template-columns: 1fr;
	}

	.rt033-lista {
		min-width: 0;
		gap: 0;
	}

	.rt033-lista__item > a,
	.rt033-lista__rotulo {
		min-height: var(--rt033-tactil);
		display: flex;
		align-items: center;
		padding: 8px 10px;
		font-size: 15.5px;
	}

	/* --- Megamenu en vertical ---------------------------------------------- */

	.rt033-mega {
		display: block;
		max-height: none;
		overflow: visible;
	}

	.rt033-mega__lateral,
	.rt033-mega__principal {
		max-height: none;
	}

	.rt033-mega__lateral {
		gap: 12px;
		padding: 4px 0 14px;
		background: transparent;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.rt033-mega__principal {
		padding: 0 0 12px;
	}

	/* El degradado de "sigue habiendo lista" solo tiene sentido cuando el que
	   hace scroll es el panel. Aqui hace scroll el drawer entero. */
	.rt033-mega__principal::after {
		display: none;
	}

	.rt033-mega__scroll {
		margin-top: 10px;
		padding-right: 0;
		overflow: visible;
	}

	.rt033-mega__grupos {
		columns: 1;
	}

	.rt033-mega__rotulo {
		margin-top: 4px;
	}

	.rt033-destacadas {
		gap: 8px;
	}

	.rt033-destacadas__item > a {
		min-height: var(--rt033-tactil);
		font-size: 14.5px;
	}

	/* --- Accesos de utilidad ----------------------------------------------- */

	/* Aqui deja de ser una ficha y pasa a ser una FILA, con la misma metrica
	   que las ramas de primer nivel de arriba: mismo icono a la izquierda,
	   mismo alto tactil, y una flecha a la derecha en lugar del chevron para
	   decir "esto navega, no despliega".

	   Queda al final del bloque de Ciudades y antes de Flota, con un separador
	   grueso delante: ahi es donde se corta el territorio y empieza la
	   informacion corporativa. */
	/* La copia que vive DENTRO del panel de Ciudades no se pinta en movil:
	   desaparecia al cerrar el acordeon. La sustituye la fila de primer nivel
	   de mas abajo, que esta fuera del panel. Se oculta, no se quita del HTML,
	   porque el mismo marcado sirve a las dos anchuras. */
	.rt033-mega .rt033-utilidades {
		display: none;
	}

	/* La representacion buena en movil: fila de primer nivel entre Ciudades y
	   Flota, con la misma metrica que las ramas de arriba —icono a la
	   izquierda, alto tactil— y una flecha a la derecha en lugar del chevron
	   para decir "esto navega, no despliega". El separador grueso marca donde
	   se corta el territorio y empieza la informacion corporativa. */
	.rt033-nav__item--utilidad {
		display: block;
		border-top: 3px solid var(--rt033-borde-panel);
	}

	.rt033-utilidad {
		gap: 12px;
		min-height: 54px;
		padding: 8px 6px;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.rt033-utilidad:hover {
		background: transparent;
	}

	/* Sin marco amarillo: en la fila tiene que pesar lo mismo que el icono de
	   "Ciudades" o el de "Flota", no mas. */
	.rt033-utilidad__marco {
		width: auto;
		height: auto;
		border-radius: 0;
		background: transparent;
		color: var(--rt033-tinta-suave);
	}

	.rt033-utilidad__icono {
		width: 21px;
		height: 21px;
	}

	.rt033-utilidad__texto {
		flex: 1 1 auto;
	}

	.rt033-utilidad__titulo {
		font-size: 16.5px;
		font-weight: 700;
	}

	/* La linea de apoyo es una ayuda de escritorio, donde hay sitio. En una
	   fila tactil solo añade altura. */
	.rt033-utilidad__apoyo {
		display: none;
	}

	.rt033-utilidad__flecha {
		display: block;
		width: 18px;
		height: 18px;
		color: var(--rt033-tinta-suave);
	}

	/* --- Acordeones territoriales ------------------------------------------ */

	.rt033-grupo {
		display: block;
		margin: 0;
		border-bottom: 1px solid var(--rt033-borde-panel);
	}

	.rt033-grupo__fila {
		display: flex;
		align-items: stretch;
		gap: 4px;
	}

	.rt033-grupo__enlace {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		min-height: var(--rt033-tactil);
		margin: 0;
		padding: 6px 4px;
		border-bottom: 0;
		font-size: 15.5px;
	}

	.rt033-grupo__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: var(--rt033-tactil);
		min-height: var(--rt033-tactil);
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: var(--rt033-tinta-suave);
		cursor: pointer;
	}

	/* Cerrado por defecto. Lo abre el usuario, o la busqueda cuando hay
	   coincidencias dentro. */
	.rt033-grupo__lista {
		display: none;
		padding: 0 0 10px 10px;
	}

	.rt033-grupo--abierto > .rt033-grupo__lista {
		display: block;
	}

	.rt033-grupo__lista--anidada {
		display: block;
	}

	.rt033-grupo__item > a,
	.rt033-grupo__item > span {
		min-height: 40px;
		display: flex;
		align-items: center;
		padding: 4px 6px 4px 0;
		font-size: 15px;
	}

	/* "Quienes somos" no es una localidad: se separa del listado sin moverse
	   del arbol ni cambiar de URL. */
	.rt033-grupo--aparte {
		margin-top: 10px;
		border-bottom: 0;
	}

	.rt033-grupo--aparte .rt033-grupo__enlace {
		color: var(--rt033-tinta-suave);
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* --- Destinos (aeropuertos) -------------------------------------------- */

	.rt033-destacadas.rt033-destacadas--aero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rt033-panel__rotulo {
		margin: 6px 0 8px;
	}

	.rt033-plegable__disparador {
		margin-top: 10px;
	}

	/* --- Pie del panel ------------------------------------------------------ */

	.rt033-pie {
		display: block;
		margin-top: 18px;
		padding-top: 16px;
		border-top: 1px solid var(--rt033-borde);
	}

	.rt033-boton {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		min-height: 54px;
		margin: 0 0 10px;
		padding: 12px 16px;
		box-sizing: border-box;
		border: 1px solid transparent;
		border-radius: 999px;
		font: inherit;
		font-size: 16px;
		font-weight: 800;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.rt033-boton--principal {
		background: var(--rt033-negro);
		color: var(--rt033-blanco);
	}

	/* Bloque 4: el CTA de WhatsApp del drawer pasa del amarillo de marca al
	   verde de WhatsApp. Misma posicion, mismo comportamiento, mismo href: lo
	   unico que cambia es que ahora se reconoce el canal sin leer el rotulo,
	   igual que los dos botones compactos de la barra. */
	.rt033-boton--secundario {
		background: var(--rt033-wa);
		border-color: transparent;
		color: var(--rt033-wa-texto);
	}

	.rt033-boton--secundario:hover {
		background: var(--rt033-wa-oscuro);
	}

	.rt033-pie .rt033-aviso {
		margin: -2px 0 10px;
	}

	.rt033-pie .rt033-plegable__disparador {
		margin: 0 0 12px;
		min-height: var(--rt033-tactil);
	}

	.rt033-pie .rt033-plegable__cuerpo {
		margin: -6px 0 12px;
	}

	.rt033-idioma-movil {
		margin-top: 6px;
		padding-top: 12px;
		border-top: 1px solid var(--rt033-borde-panel);
	}

	.rt033-idioma-movil .rt033-plegable__disparador {
		font-size: 15px;
		font-weight: 700;
		text-transform: none;
	}

	.rt033-idioma-movil__actual {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		overflow: hidden;
	}

	.rt033-idioma__nombre {
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* --- Lo que no existe en movil ----------------------------------------- */

	.rt033-cta,
	.rt033-idioma {
		display: none;
	}
}

/* Muy estrecho (374 px y menos). Las fichas destacadas se quedan en DOS
   columnas tambien aqui: el nombre mas largo que hay ("Pontevedra") cabe de
   sobra en 146 px, y bajar a una columna alargaba la lista a diez filas y
   empujaba el arbol de ciudades fuera de la pantalla. Comprobado a 320 px. */
@media (max-width: 374.98px) {
	.rt033-header__inner {
		gap: 8px;
		padding: 0 10px;
	}

	.rt033-drawer__cuerpo {
		padding-left: 10px;
		padding-right: 10px;
	}

	.rt033-destacadas {
		gap: 6px;
	}

	.rt033-destacadas__item > a {
		padding: 7px 8px;
		font-size: 14px;
	}
}

/* Con el panel abierto el documento no se mueve. El bloqueo real lo pone el JS
   sobre el <body> (position: fixed) para poder devolver el scroll exacto al
   cerrar; esto es solo el cinturon de seguridad. */
body.rt033-sin-scroll {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.rt033-drawer {
		transition: none;
	}

	.rt033-overlay {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   14. Bloque 2C — contactos reales y pulidos
   -------------------------------------------------------------------------- */

/* Los CTA de telefono y WhatsApp han pasado de <button> a <a>. Divi subraya y
   colorea los enlaces del Theme Builder, asi que hay que devolverles el aspecto
   de boton. Se ancla al contenedor de Divi (misma tecnica que con las listas)
   para ganar especificidad sin recurrir a !important. */
.et-l--header .rt033-shell a.rt033-cta__principal,
.et-l--header .rt033-shell a.rt033-tel,
.et-l--header .rt033-shell a.rt033-boton,
.rt033-shell a.rt033-cta__principal,
.rt033-shell a.rt033-tel,
.rt033-shell a.rt033-boton {
	text-decoration: none;
	box-shadow: none;
}

.et-l--header .rt033-shell a.rt033-cta__principal:hover,
.rt033-shell a.rt033-cta__principal:hover {
	color: var(--rt033-blanco);
	text-decoration: none;
}

.et-l--header .rt033-shell a.rt033-boton--principal,
.rt033-shell a.rt033-boton--principal,
.et-l--header .rt033-shell a.rt033-boton--principal:hover,
.rt033-shell a.rt033-boton--principal:hover {
	color: var(--rt033-blanco);
}

/* El telefono compacto es negro sobre amarillo: su rotulo sigue en blanco. */
.et-l--header .rt033-shell a.rt033-tel,
.rt033-shell a.rt033-tel {
	color: var(--rt033-blanco);
}

/* El CTA de WhatsApp del drawer es verde, y desde el bloque 6 su rotulo va en
   tinta. Este bloque tiene que decirlo TAMBIEN: la regla de la linea 1822 vive
   dentro de una media query, y una media query no aporta especificidad. Con
   `a.rt033-boton--secundario` anclado al contenedor de Divi, esta gana, y
   durante un rato el boton se vio verde con texto blanco (1,98:1) aunque el
   valor estuviera puesto en el sitio "correcto". Se detecto midiendo el color
   computado, no mirando la captura: a 0,6 de escala el blanco sobre verde y el
   negro sobre verde se parecen mas de lo que uno cree. */
.et-l--header .rt033-shell a.rt033-boton--secundario,
.rt033-shell a.rt033-boton--secundario,
.et-l--header .rt033-shell a.rt033-boton--secundario:hover,
.rt033-shell a.rt033-boton--secundario:hover {
	color: var(--rt033-wa-texto);
}


/* El aviso de staging cuelga del CTA de escritorio; con el enlace ya no hay
   `position: relative` heredado de ningun boton, asi que se declara aqui. */
.rt033-cta {
	position: relative;
}

@media (max-width: 1179.98px) {

	/* F1: en movil el rotulo "Busca tu ciudad" sobra. El campo lleva su propio
	   placeholder y su <label> accesible; esto solo gastaba una linea de altura
	   en la parte mas cara del panel. */
	.rt033-mega__rotulo--buscar {
		display: none;
	}

	/* Idioma en una sola fila: con un unico idioma alternativo es un enlace
	   directo, no un acordeon. Un toque y navega. */
	.rt033-idioma-movil--directo {
		margin-top: 6px;
		padding-top: 12px;
		border-top: 1px solid var(--rt033-borde-panel);
	}

	.rt033-idioma-movil__enlace {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		min-height: var(--rt033-tactil);
		padding: 10px 12px;
		box-sizing: border-box;
		border-radius: 10px;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		color: inherit;
	}

	.rt033-idioma-movil__enlace .rt033-idioma__codigo {
		margin-left: auto;
		opacity: 0.6;
		font-size: 13px;
		letter-spacing: 0.06em;
	}

	.rt033-idioma-movil__enlace:hover,
	.rt033-idioma-movil__enlace:focus-visible {
		background: var(--rt033-hover-panel, rgba(17, 17, 17, 0.06));
	}

	/* El pie del drawer termina justo en el borde inferior del panel. Un poco
	   de aire evita que la ultima fila —hoy el idioma— quede pegada al canto y
	   parezca que no hay nada mas. */
	.rt033-drawer__cuerpo {
		padding-bottom: 28px;
	}
}


/* ==========================================================================
   12. WhatsApp en el HEADER   (bloque 4)

   Sustituye al boton flotante propio, que a su vez habia sustituido a
   Joinchat. Ya no hay ninguna burbuja fija en ningun viewport: el WhatsApp
   vive DENTRO de la barra, al lado del punto de contacto que le corresponde.

     escritorio   [ PIDE TAXI | v ] [ WhatsApp ] [ ES v ]
     movil        [ logo ]            [ tel ] [ WhatsApp ] [ hamburguesa ]
     drawer       el CTA grande de siempre, ahora en verde

   El numero sigue saliendo de RT033_Contacts, resuelto en el servidor: aqui
   no hay ni un telefono.
   ========================================================================== */

/* Base comun de los dos botones compactos (escritorio y barra de movil). */
.rt033-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0;
	background: var(--rt033-wa);
	color: var(--rt033-wa-texto);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.rt033-wa:hover {
	background: var(--rt033-wa-oscuro);
}

.rt033-wa .rt033-wa__icono {
	width: 22px;
	height: 22px;
}

/* --- Escritorio: al lado del CTA ------------------------------------------ */

/* El contenedor solo existe para anclar el aviso de staging. En movil no
   ocupa nada: ver bloque 9 / bloque 11. */
.rt033-wa-desk {
	position: relative;
	display: none;
}

/* Misma altura que el CTA partido (46 px) para que la barra siga leyendose
   como una sola fila de controles, y mismo radio de pildora. */
.rt033-wa--desk {
	width: 46px;
	height: 46px;
	border-radius: 999px;
}

/* Aviso de staging del WhatsApp de escritorio. Mismo trato que el del CTA. */
.rt033-aviso--wa {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 11;
	width: max-content;
	max-width: 320px;
	margin: 0;
	box-shadow: var(--rt033-sombra);
}

/* --- Barra compacta de movil: al lado del telefono negro ------------------ */

.rt033-wa--barra {
	display: none; /* aparece por debajo de 1180 px; ver bloque 11 */
	width: var(--rt033-tactil);
	height: var(--rt033-tactil);
	/* Mismo radio que `.rt033-tel`: los dos botones de la barra compacta son
	   la misma pieza con dos canales distintos. */
	border-radius: 12px;
}

.rt033-wa--barra .rt033-wa__icono {
	width: 23px;
	height: 23px;
}

@media (min-width: 1180px) {
	.rt033-wa-desk {
		display: block;
	}

	.rt033-wa--barra {
		display: none;
	}
}

@media (max-width: 1179.98px) {
	.rt033-wa-desk {
		display: none;
	}

	.rt033-wa--barra {
		display: inline-flex;
	}
}

/* Divi subraya y colorea los enlaces del Theme Builder. Misma tecnica que con
   el resto de botones: anclar al contenedor de Divi para ganar especificidad
   sin recurrir a !important. */
.et-l--header .rt033-shell a.rt033-wa,
.rt033-shell a.rt033-wa,
.et-l--header .rt033-shell a.rt033-wa:hover,
.rt033-shell a.rt033-wa:hover {
	color: var(--rt033-wa-texto);
	text-decoration: none;
	box-shadow: none;
}