/* ==========================================================================
   RT033 CITY_CORE V2 — sistema visual del CUERPO de las landings de ciudad
   ==========================================================================

   Hermano pequeño de `header.css` y `hero.css`, y con las mismas reglas:

   - Sistema autocontenido con clases propias `rt033-city-*`. Divi no maqueta
     nada aqui dentro: solo aporta la seccion, la fila y la columna, y las tres
     se neutralizan en el apartado 12.
   - TODO cuelga de `.rt033-city-v2`, que va en el `module_class` de cada
     seccion del cuerpo. Sin esa clase este fichero no cambia un solo pixel de
     ninguna otra pagina: es lo que permite empezar por Madrid y extenderlo
     ciudad a ciudad sin efectos colaterales.
   - Ni una sola clase `.et_pb_section_3` ni `.et_pb_text_7`: cambian con el
     orden de los modulos y romperian el sistema a la primera reordenacion.
   - Nada de `!important` salvo para neutralizar CSS que Divi genera con mayor
     especificidad. Cada uso va comentado.
   - Se escribe MOVIL PRIMERO. Las reglas sin media query son las de 390 px.
   - :focus-visible obligatorio en todo lo interactivo y 44 px de objetivo
     tactil en todo lo que se pulsa con el dedo.

   La tipografia es la del sitio (Montserrat) y los colores son los del Header
   V2. Este fichero NO introduce ni una familia ni un color nuevos: su trabajo
   es el ritmo, la cuadricula y la jerarquia.

   Indice
     1. Fichas (variables)
     2. Secciones y ritmo de fondos
     3. Cuadricula: filas y columnas de lectura
     4. Tipografia
     5. Canales de contacto (la banda de conversion)
     6. Vias: como pedir el taxi
     7. Botones
     8. Rejillas y tarjetas
     9. Listas
    10. Fotografia
    11. Municipios
    12. FAQ
    13. Convivencia con Divi
    14. Accesibilidad y preferencias del usuario
   ========================================================================== */


/* 1. Fichas ---------------------------------------------------------------
   Referenciadas con respaldo, igual que en el hero: el cuerpo se pinta bien
   aunque la hoja del header no llegue a cargarse. */
.rt033-city-v2 {
	--rt033-city-amarillo: var(--rt033-amarillo, #feba02);
	--rt033-city-amarillo-oscuro: var(--rt033-amarillo-oscuro, #e5a600);
	--rt033-city-negro: var(--rt033-negro, #111111);
	--rt033-city-casi-negro: #19191a;
	--rt033-city-tinta: var(--rt033-tinta, #1a1a1a);
	--rt033-city-tinta-suave: var(--rt033-tinta-suave, #5a5a5a);
	--rt033-city-blanco: #ffffff;
	--rt033-city-papel: #f5f5f6;
	--rt033-city-wa: var(--rt033-wa, #25d366);
	--rt033-city-wa-oscuro: var(--rt033-wa-oscuro, #1da851);
	--rt033-city-wa-texto: var(--rt033-wa-texto, #111111);

	--rt033-city-borde: rgba(17, 17, 17, 0.12);
	--rt033-city-borde-oscuro: rgba(255, 255, 255, 0.16);

	/* Texto sobre fondo oscuro. No es blanco puro: a 17 px el blanco puro
	   sobre #111 vibra. #e8e8e9 da 14,4:1, de sobra para AAA. */
	--rt033-city-sobre-oscuro: #e8e8e9;

	--rt033-city-radio: var(--rt033-radio, 14px);
	--rt033-city-radio-chico: var(--rt033-radio-chico, 10px);
	--rt033-city-tactil: var(--rt033-tactil, 44px);

	/* La cuadricula. `ancho` es el maximo del contenido; `lectura` es el
	   maximo de una columna de texto largo. Los dos numeros son la unica
	   fuente de la maquetacion: no hay anchos sueltos en el resto del
	   fichero. */
	--rt033-city-ancho: 1280px;
	--rt033-city-lectura: 760px;

	/* Ritmo vertical. Tres escalones, y el mismo salto que usa el hero:
	   base / 768 / 1180, para que el cuerpo cambie de aire exactamente donde
	   cambian el header y el hero. */
	--rt033-city-aire: 44px;
	--rt033-city-hueco: 16px;

	--rt033-city-sombra: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 28px rgba(17, 17, 17, 0.06);
}


/* 2. Secciones y ritmo de fondos ------------------------------------------
   Cinco fondos y nada mas. El amarillo es ACENTO: se reserva para etiquetas,
   CTA y UNA banda —la de empresas—, nunca para un lienzo grande con cuatro
   lineas dentro. Las secciones oscuras son anclas: marcan las tres paradas de
   la pagina (tarifas, area metropolitana y cierre) y todo lo demas respira en
   claro. */
.rt033-city-v2.et_pb_section {
	position: relative;
	margin: 0;
	padding: var(--rt033-city-aire) 0;
	color: var(--rt033-city-tinta);
	background-color: var(--rt033-city-blanco);
}

.rt033-city-v2--gris.et_pb_section     { background-color: var(--rt033-city-papel); }
.rt033-city-v2--oscuro.et_pb_section   { background-color: var(--rt033-city-negro); color: var(--rt033-city-sobre-oscuro); }
.rt033-city-v2--negro.et_pb_section    { background-color: var(--rt033-city-casi-negro); color: var(--rt033-city-sobre-oscuro); }
.rt033-city-v2--amarillo.et_pb_section { background-color: var(--rt033-city-amarillo); color: var(--rt033-city-negro); }

/* Las bandas compactas (empresas, CTA de cierre) no necesitan el aire de una
   seccion de contenido: con el mismo padding parecen vacias. */
.rt033-city-v2--banda.et_pb_section {
	padding: calc(var(--rt033-city-aire) * 0.78) 0;
}

/* Una linea de 1 px entre dos secciones claras consecutivas. Sin ella, gris
   sobre blanco se lee como un cambio de fondo accidental. */
.rt033-city-v2--linea.et_pb_section {
	border-top: 1px solid var(--rt033-city-borde);
}


/* 3. Cuadricula -----------------------------------------------------------
   Una sola caja para todo el cuerpo. `width: 100%` y `max-width` propios
   porque la fila de Divi trae `width: 80%; max-width: 1080px`, que deja el
   contenido mas estrecho que el header y descuadra las dos piezas. */
.rt033-city-v2 .et_pb_row.rt033-city-fila {
	width: 100%;
	max-width: var(--rt033-city-ancho);
	margin: 0 auto;
	padding: 0 20px;
}

/* Dos filas seguidas dentro de la misma seccion: el aire entre ellas es
   menor que el de la seccion, para que se lean como un bloque. */
.rt033-city-v2 .et_pb_row.rt033-city-fila + .et_pb_row.rt033-city-fila {
	margin-top: 28px;
}

/* Columna de lectura. El texto largo nunca pasa de aqui, aunque la seccion
   mida 1280: una linea de 1.200 px obliga a saltar de renglon con la cabeza y
   es el defecto mas visible del cuerpo anterior. */
.rt033-city-lectura {
	max-width: var(--rt033-city-lectura);
}

.rt033-city-lectura--centro {
	margin-left: auto;
	margin-right: auto;
}

/* Dos columnas de verdad, sin depender del reparto de Divi: una sola rejilla
   que en movil apila y en escritorio reparte. Asi la MISMA fila sirve para
   "contenido + foto" y para "dos tarjetas". */
.rt033-city-duo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

/* Divi le pone `text-align: left` al modulo de texto desde su preset, con una
   clase: con dos clases se gana, y el FAQ y el CTA de cierre se centran de
   verdad en lugar de quedarse el titulo a la izquierda y los botones en medio. */
.rt033-city-v2 .rt033-city-centrado,
.rt033-city-v2 .rt033-city-centrado .rt033-city-lectura {
	text-align: center;
}


/* 4. Tipografia -----------------------------------------------------------
   Jerarquia fuerte y corta: etiqueta, H2, entradilla, cuerpo. El H2 no puede
   competir con el H1 del hero (38–52 px), asi que se queda por debajo, pero
   muy por encima del cuerpo. */

/* El COLOR sale SIEMPRE de la seccion, nunca del modulo. Divi pinta el color
   del texto en el preset del modulo (`.et_pb_text_7 { color: … }`, un solo
   nombre de clase), y ese fue el origen de los seis defectos de contraste del
   cuerpo anterior: texto blanco sobre tarjeta clara y texto oscuro sobre
   tarjeta oscura, segun que preset tocara. Con dos clases se gana siempre, y
   asi un modulo movido de una seccion clara a una oscura se repinta solo. */
.rt033-city-v2 .rt033-city-bloque {
	color: inherit;
}

/* El aire ENTRE bloques hermanos del mismo modulo (una rejilla y el parrafo
   que va debajo, una tarjeta y una nota) no puede salir del margen de cada
   pieza: cada una se usa en varios sitios y acabaria con un margen distinto
   segun el vecino. Lo reparte el contenedor, una sola vez.
   `.et_pb_text_inner` es el envoltorio que pone Divi dentro del modulo. */
.rt033-city-v2 .rt033-city-bloque > .et_pb_text_inner > * + * {
	margin-top: 22px;
}

/* Divi da a todo parrafo suyo `padding-bottom: 1em` ademas del margen. Sumados
   abren huecos que no corresponden a ninguna jerarquia. Se anula el padding y
   el aire lo reparte solo el margen de aqui. */
.rt033-city-v2 p {
	margin: 0 0 14px;
	padding-bottom: 0;
	font-size: 16px;
	line-height: 1.62;
}

.rt033-city-v2 p:last-child {
	margin-bottom: 0;
}

.rt033-city-v2 h2 {
	margin: 0 0 12px;
	padding: 0;
	font-size: clamp(25px, 6.2vw, 30px);
	line-height: 1.16;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: inherit;
	text-wrap: balance;
}

.rt033-city-v2 h3 {
	margin: 26px 0 10px;
	padding: 0;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: inherit;
}

.rt033-city-v2 h3:first-child {
	margin-top: 0;
}

/* Etiqueta. Es lo unico amarillo de una seccion oscura, y en una clara se
   pinta en tinta con un punto amarillo delante: sobre blanco, el amarillo de
   marca no llega a 3:1 y no puede llevar texto. */
.rt033-city-v2 p.rt033-city-eti,
.rt033-city-eti {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rt033-city-tinta-suave);
}

.rt033-city-eti::before {
	content: "";
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--rt033-city-amarillo);
}

/* Sobre fondo oscuro la etiqueta SI va en amarillo (9,97:1 sobre #111).
   El selector lleva `p.` y la clase raiz repetida a proposito: la regla base de
   arriba matchea como `.rt033-city-v2 p.rt033-city-eti` —dos clases y un
   elemento—, asi que un `.rt033-city-v2--oscuro .rt033-city-eti` pelado pierde
   y la etiqueta se quedaba en gris #5a5a5a sobre negro: 2,74:1. */
.rt033-city-v2.rt033-city-v2--oscuro p.rt033-city-eti,
.rt033-city-v2.rt033-city-v2--negro p.rt033-city-eti,
.rt033-city-v2--oscuro .rt033-city-eti,
.rt033-city-v2--negro .rt033-city-eti {
	color: var(--rt033-city-amarillo);
}

/* Entradilla: una talla mas que el cuerpo y en tinta suave. Es el puente entre
   el H2 y el texto, no un parrafo mas. */
.rt033-city-v2 p.rt033-city-lead {
	margin-bottom: 20px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--rt033-city-tinta-suave);
}

.rt033-city-v2--oscuro p.rt033-city-lead,
.rt033-city-v2--negro p.rt033-city-lead {
	color: rgba(255, 255, 255, 0.78);
}

.rt033-city-v2--amarillo p.rt033-city-lead {
	color: rgba(17, 17, 17, 0.78);
}

/* Entradilla con peso de respuesta: la usa la seccion de tarifas, donde el H2
   es una pregunta y esta linea es la que la contesta. */
.rt033-city-v2 p.rt033-city-lead--destacado {
	font-size: 19px;
	font-weight: 600;
	color: var(--rt033-city-sobre-oscuro);
}

/* Enlaces dentro del TEXTO. Divi los pinta de amarillo por preset, que sobre
   blanco no se lee y sobre amarillo desaparece: fue el defecto numero 1 del
   cuerpo anterior. Aqui el enlace es del color del texto con subrayado propio,
   y el amarillo solo aparece al pasar por encima.

   El `:not([class*="rt033-city-"])` NO es cosmetico: sin el, esta regla —dos
   clases— gana a `.rt033-city-canal--app` —una— y repinta los botones del
   sistema con el color del parrafo. Medido: la tarjeta de la app quedaba con
   rotulo #1a1a1a sobre fondo #111111 y subrayado amarillo. Un enlace de prosa
   no lleva clase; uno del sistema siempre la lleva. */
.rt033-city-v2 .rt033-city-bloque a:not([class*="rt033-city-"]) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: var(--rt033-city-amarillo);
	transition: color 0.14s ease, text-decoration-color 0.14s ease;
}

.rt033-city-v2 .rt033-city-bloque a:not([class*="rt033-city-"]):hover,
.rt033-city-v2 .rt033-city-bloque a:not([class*="rt033-city-"]):focus-visible {
	color: var(--rt033-city-amarillo-oscuro);
	text-decoration-color: currentColor;
}

.rt033-city-v2--oscuro .rt033-city-bloque a:not([class*="rt033-city-"]):hover,
.rt033-city-v2--oscuro .rt033-city-bloque a:not([class*="rt033-city-"]):focus-visible,
.rt033-city-v2--negro .rt033-city-bloque a:not([class*="rt033-city-"]):hover,
.rt033-city-v2--negro .rt033-city-bloque a:not([class*="rt033-city-"]):focus-visible {
	color: var(--rt033-city-amarillo);
}

.rt033-city-v2 strong {
	font-weight: 700;
	color: inherit;
}


/* 5. Canales de contacto --------------------------------------------------
   La banda de conversion, justo debajo del hero. Tres destinos claramente
   distintos —voz, escrito y app— y los tres son un `<a>` entero, no un texto
   con un enlace dentro: el objetivo tactil es la tarjeta completa. */
.rt033-city-canales {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 4px;
}

.rt033-city-v2 .rt033-city-canal {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 76px;
	padding: 16px 18px;
	border: 0;
	border-radius: var(--rt033-city-radio);
	text-decoration: none;
	transition: transform 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
	box-shadow: 0 8px 22px rgba(17, 17, 17, 0.10);
}

.rt033-city-v2 .rt033-city-canal:hover,
.rt033-city-v2 .rt033-city-canal:focus-visible {
	transform: translateY(-2px);
	text-decoration: none;
}

.rt033-city-v2 .rt033-city-canal:active {
	transform: translateY(0);
}

.rt033-city-canal .rt033-icono {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}

.rt033-city-canal__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rt033-city-canal__eti {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.72;
}

.rt033-city-canal__dato {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.rt033-city-canal__pie {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	opacity: 0.78;
}

/* Telefono: el amarillo de marca sobre tinta, el mismo par que el CTA del
   hero y el del header. Es el color que el usuario ya asocia con pedir taxi. */
.rt033-city-v2 .rt033-city-canal--tel {
	background: var(--rt033-city-amarillo);
	color: var(--rt033-city-negro);
}

.rt033-city-v2 .rt033-city-canal--tel:hover,
.rt033-city-v2 .rt033-city-canal--tel:focus-visible {
	background: var(--rt033-city-amarillo-oscuro);
	color: var(--rt033-city-negro);
}

/* WhatsApp: el verde de la marca. Unica excepcion a la paleta, y la misma que
   ya hacen el header y el hero. El rotulo va en tinta, no en blanco: blanco
   sobre #25d366 da 1,98:1 y no llega ni a AA. */
.rt033-city-v2 .rt033-city-canal--wa {
	background: var(--rt033-city-wa);
	color: var(--rt033-city-wa-texto);
}

.rt033-city-v2 .rt033-city-canal--wa:hover,
.rt033-city-v2 .rt033-city-canal--wa:focus-visible {
	background: var(--rt033-city-wa-oscuro);
	color: var(--rt033-city-wa-texto);
}

/* App: tinta. Tercer destino, tercer color, y el unico oscuro de los tres:
   asi la fila se lee de un vistazo sin tener que leer las etiquetas. */
.rt033-city-v2 .rt033-city-canal--app {
	background: var(--rt033-city-negro);
	color: var(--rt033-city-blanco);
}

.rt033-city-v2 .rt033-city-canal--app:hover,
.rt033-city-v2 .rt033-city-canal--app:focus-visible {
	background: #000000;
	color: var(--rt033-city-blanco);
}


/* 6. Vias: como pedir el taxi ---------------------------------------------
   Tres fichas informativas. Deliberadamente PLANAS —sin fondo de color y sin
   sombra— para que no compitan con la banda de conversion del apartado 5:
   arriba se pide, aqui se explica. */
.rt033-city-vias {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.rt033-city-via {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 14px;
	align-items: start;
}

.rt033-city-via__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--rt033-city-radio-chico);
	background: var(--rt033-city-amarillo);
	color: var(--rt033-city-negro);
}

.rt033-city-via__icono .rt033-icono {
	width: 21px;
	height: 21px;
}

/* El rotulo de una via NO es un encabezado, y es a proposito: en el borrador
   aprobado «Por telefono», «Por WhatsApp» y «Con la app» son entradillas en
   negrita dentro de un parrafo. Convertirlas en H3 añadiria tres encabezados
   al esquema del documento, que es una decision SEO y no una de maquetacion.
   Se pintan como titulo y se comportan como texto. */
.rt033-city-v2 p.rt033-city-via__titulo {
	margin: 2px 0 6px;
	font-size: 17px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: inherit;
}

.rt033-city-v2 .rt033-city-via p {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--rt033-city-tinta-suave);
}


/* 7. Botones --------------------------------------------------------------
   Botones de verdad: `<a href>`, 48 px de alto util, icono decorativo y
   etiqueta de texto. Los mismos tres colores que en el hero, para que un CTA
   signifique lo mismo en toda la pagina. */
.rt033-city-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.rt033-city-v2 .rt033-city-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 50px;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--rt033-city-radio-chico);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.rt033-city-v2 .rt033-city-boton:hover,
.rt033-city-v2 .rt033-city-boton:focus-visible {
	transform: translateY(-1px);
	text-decoration: none;
}

.rt033-city-boton .rt033-icono {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.rt033-city-v2 .rt033-city-boton--tel {
	background: var(--rt033-city-amarillo);
	color: var(--rt033-city-negro);
}

.rt033-city-v2 .rt033-city-boton--tel:hover,
.rt033-city-v2 .rt033-city-boton--tel:focus-visible {
	background: var(--rt033-city-amarillo-oscuro);
	color: var(--rt033-city-negro);
}

.rt033-city-v2 .rt033-city-boton--wa {
	background: var(--rt033-city-wa);
	color: var(--rt033-city-wa-texto);
}

.rt033-city-v2 .rt033-city-boton--wa:hover,
.rt033-city-v2 .rt033-city-boton--wa:focus-visible {
	background: var(--rt033-city-wa-oscuro);
	color: var(--rt033-city-wa-texto);
}

/* Contorno sobre fondo oscuro. En reposo es un blanco al 10 % —no un bloque de
   color— para que no le robe peso al CTA principal de la misma fila. */
.rt033-city-v2 .rt033-city-boton--fantasma {
	background: rgba(255, 255, 255, 0.10);
	color: var(--rt033-city-blanco);
	border: 1.5px solid rgba(255, 255, 255, 0.42);
}

.rt033-city-v2 .rt033-city-boton--fantasma:hover,
.rt033-city-v2 .rt033-city-boton--fantasma:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--rt033-city-blanco);
	color: var(--rt033-city-blanco);
}

/* Tinta sobre la banda amarilla. Es el unico sitio donde el CTA NO puede ser
   amarillo —seria invisible—, y el negro sobre el amarillo de marca da 9,8:1. */
/* Contorno en tinta: el tercer CTA de la banda amarilla. No puede ser el
   `--fantasma` (contorno blanco), que sobre amarillo desaparece. */
.rt033-city-v2 .rt033-city-boton--contorno {
	background: transparent;
	color: var(--rt033-city-negro);
	border: 1.5px solid rgba(17, 17, 17, 0.45);
}

.rt033-city-v2 .rt033-city-boton--contorno:hover,
.rt033-city-v2 .rt033-city-boton--contorno:focus-visible {
	background: rgba(17, 17, 17, 0.08);
	border-color: var(--rt033-city-negro);
	color: var(--rt033-city-negro);
}

.rt033-city-v2 .rt033-city-boton--oscuro {
	background: var(--rt033-city-negro);
	color: var(--rt033-city-blanco);
}

.rt033-city-v2 .rt033-city-boton--oscuro:hover,
.rt033-city-v2 .rt033-city-boton--oscuro:focus-visible {
	background: #000000;
	color: var(--rt033-city-blanco);
}

.rt033-city-botones--centro {
	justify-content: center;
}

/* Botones de tienda. Discretos a proposito: la descarga es un camino
   secundario frente a llamar. */
.rt033-city-tiendas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.rt033-city-v2 .rt033-city-tienda {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--rt033-city-tactil);
	padding: 10px 16px;
	border: 1.5px solid var(--rt033-city-borde);
	border-radius: var(--rt033-city-radio-chico);
	background: var(--rt033-city-blanco);
	color: var(--rt033-city-tinta);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.14s ease, background-color 0.14s ease;
}

.rt033-city-v2 .rt033-city-tienda:hover,
.rt033-city-v2 .rt033-city-tienda:focus-visible {
	border-color: var(--rt033-city-negro);
	background: var(--rt033-city-blanco);
	color: var(--rt033-city-tinta);
	text-decoration: none;
}


/* 8. Rejillas y tarjetas --------------------------------------------------
   Una sola rejilla parametrizada. `auto-fit` + `minmax` reparte sola y no hace
   falta una media query por cada numero de columnas: la tarjeta nunca baja de
   su ancho minimo legible y el salto ocurre donde toca en cada anchura. */
.rt033-city-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rt033-city-hueco);
}

.rt033-city-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--rt033-city-borde);
	border-radius: var(--rt033-city-radio);
	background: var(--rt033-city-blanco);
	box-shadow: var(--rt033-city-sombra);
}

/* Sobre gris la tarjeta blanca ya destaca; sobre blanco necesita el borde y
   nada mas, porque la sombra sobre blanco ensucia. */
.rt033-city-v2:not(.rt033-city-v2--gris) .rt033-city-card {
	box-shadow: none;
}

.rt033-city-v2--oscuro .rt033-city-card,
.rt033-city-v2--negro .rt033-city-card {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--rt033-city-borde-oscuro);
	box-shadow: none;
}

.rt033-city-card__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: var(--rt033-city-radio-chico);
	background: var(--rt033-city-amarillo);
	color: var(--rt033-city-negro);
}

.rt033-city-card__icono .rt033-icono {
	width: 22px;
	height: 22px;
}

/* `__titulo` es un <p>, no un encabezado, por el mismo motivo que los rotulos
   de las fichas: lo introduce la maquetacion para hacer escaneable un parrafo
   que ya existia, y convertirlo en H3 seria anadir encabezados al esquema del
   documento. Se pinta igual que el H2 de una tarjeta de servicios. */
.rt033-city-v2 .rt033-city-card h2,
.rt033-city-v2 .rt033-city-card h3,
.rt033-city-v2 p.rt033-city-card__titulo {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.005em;
}

.rt033-city-v2 .rt033-city-card p {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--rt033-city-tinta-suave);
}

/* El titulo no hereda el gris del cuerpo de la tarjeta. */
.rt033-city-v2 p.rt033-city-card__titulo {
	color: inherit;
}

/* Tarjeta con acento: la que lleva la conclusion de un bloque. Un filete
   amarillo a la izquierda, que es el mismo recurso de `.rt033-city-nota`. */
.rt033-city-card--acento {
	border-left: 4px solid var(--rt033-city-amarillo);
}

.rt033-city-v2--oscuro .rt033-city-card p,
.rt033-city-v2--negro .rt033-city-card p {
	color: rgba(255, 255, 255, 0.76);
}

/* Ficha compacta: icono pequeño en linea con el titulo. Para los tres
   conceptos del precio y las cuatro señales de seguridad, donde el texto es
   una linea y una tarjeta entera resultaria enorme. */
.rt033-city-ficha {
	display: grid;
	grid-template-columns: 38px 1fr;
	gap: 12px;
	align-items: start;
	padding: 16px 16px 16px 14px;
	border: 1px solid var(--rt033-city-borde);
	border-radius: var(--rt033-city-radio-chico);
	background: var(--rt033-city-blanco);
}

.rt033-city-ficha__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: rgba(254, 186, 2, 0.18);
	color: var(--rt033-city-negro);
}

.rt033-city-ficha__icono .rt033-icono {
	width: 20px;
	height: 20px;
}

/* Mismo criterio que en las vias: los rotulos de las fichas —«Taximetro»,
   «Franja roja», «Tique»…— los introduce la maquetacion para hacer escaneable
   un parrafo que ya existia. Son rotulos, no encabezados. */
.rt033-city-v2 p.rt033-city-ficha__titulo {
	margin: 1px 0 4px;
	font-size: 15.5px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: inherit;
}

.rt033-city-v2 .rt033-city-ficha p {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--rt033-city-tinta-suave);
}

/* Contraste: dos lados y una flecha. Sirve para explicar una diferencia sin
   escribirla —«esto, en lugar de esto otro»— y es lo que saca a la seccion de
   «radio taxi y central» de ser tres parrafos seguidos.

   El lado de la izquierda va en trazo discontinuo y sin fondo (es lo que NO
   somos) y el de la derecha en trazo continuo con filete amarillo (lo que si).
   La diferencia se lee antes que el texto. */
.rt033-city-contraste {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: stretch;
}

.rt033-city-contraste__lado {
	padding: 18px 20px;
	border: 1px dashed var(--rt033-city-borde);
	border-radius: var(--rt033-city-radio);
}

.rt033-city-contraste__lado--si {
	border: 1px solid var(--rt033-city-borde);
	border-left: 4px solid var(--rt033-city-amarillo);
	background: var(--rt033-city-blanco);
}

.rt033-city-v2--oscuro .rt033-city-contraste__lado,
.rt033-city-v2--negro .rt033-city-contraste__lado {
	border-color: var(--rt033-city-borde-oscuro);
}

.rt033-city-v2--oscuro .rt033-city-contraste__lado--si,
.rt033-city-v2--negro .rt033-city-contraste__lado--si {
	background: rgba(255, 255, 255, 0.05);
	border-left-color: var(--rt033-city-amarillo);
}

.rt033-city-v2 p.rt033-city-contraste__eti {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rt033-city-tinta-suave);
}

/* El rotulo del lado bueno va en TINTA, no en amarillo: #e5a600 sobre el gris
   papel da 2,4:1 y esto es texto de 11,5 px. Lo que marca el lado bueno es el
   filete amarillo y el fondo blanco, no el color de la letra. */
.rt033-city-contraste__lado--si p.rt033-city-contraste__eti {
	color: var(--rt033-city-negro);
}

.rt033-city-v2--oscuro .rt033-city-contraste__lado--si p.rt033-city-contraste__eti,
.rt033-city-v2--negro .rt033-city-contraste__lado--si p.rt033-city-contraste__eti {
	color: var(--rt033-city-amarillo);
}

.rt033-city-v2 .rt033-city-contraste__lado p:not(.rt033-city-contraste__eti) {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.rt033-city-v2 .rt033-city-contraste__lado:not(.rt033-city-contraste__lado--si) p:not(.rt033-city-contraste__eti) {
	color: var(--rt033-city-tinta-suave);
}

/* La flecha. En movil apunta hacia abajo, que es como se apilan los dos lados. */
.rt033-city-contraste__paso {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border-radius: 50%;
	background: var(--rt033-city-amarillo);
	color: var(--rt033-city-negro);
	transform: rotate(90deg);
}

.rt033-city-contraste__paso .rt033-icono {
	width: 19px;
	height: 19px;
}


/* Caja de apoyo: un aparte dentro de una seccion, sin ser tarjeta de rejilla.
   La usa "Objetos perdidos" y el cierre de "Antes de subir". */
.rt033-city-nota {
	padding: 18px 20px;
	border: 1px solid var(--rt033-city-borde);
	border-left: 4px solid var(--rt033-city-amarillo);
	border-radius: var(--rt033-city-radio-chico);
	background: var(--rt033-city-blanco);
}

.rt033-city-v2 .rt033-city-nota h3 {
	margin: 0 0 6px;
	font-size: 17px;
}


/* 9. Listas ---------------------------------------------------------------
   Divi da a `ul` un `padding-left` grande y un bullet gris. Aqui la marca es
   una raya amarilla o una marca de verificacion, y el sangrado es el minimo
   que deja la segunda linea alineada con la primera. */
.rt033-city-v2 .rt033-city-lista {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.rt033-city-v2 .rt033-city-lista:last-child {
	margin-bottom: 0;
}

.rt033-city-v2 .rt033-city-lista li {
	position: relative;
	margin: 0 0 10px;
	padding: 0 0 0 24px;
	font-size: 16px;
	line-height: 1.55;
	list-style: none;
}

.rt033-city-v2 .rt033-city-lista li:last-child {
	margin-bottom: 0;
}

.rt033-city-v2 .rt033-city-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.58em;
	width: 12px;
	height: 3px;
	border-radius: 2px;
	background: var(--rt033-city-amarillo);
}

/* Variante de comprobacion: lo que el viajero PUEDE exigir o mirar. */
.rt033-city-v2 .rt033-city-lista--check li::before {
	top: 0.28em;
	left: 1px;
	width: 14px;
	height: 8px;
	border: 2.5px solid var(--rt033-city-amarillo);
	border-top: 0;
	border-right: 0;
	border-radius: 1px;
	background: none;
	transform: rotate(-45deg);
}

/* Dos columnas cuando la lista es larga y cada punto cabe en dos lineas. */
@media (min-width: 768px) {
	.rt033-city-v2 .rt033-city-lista--duo {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px 32px;
	}

	.rt033-city-v2 .rt033-city-lista--duo li {
		margin-bottom: 0;
	}
}


/* 10. Fotografia ----------------------------------------------------------
   Las fotos van en su sitio, con su proporcion y sus esquinas. NUNCA como
   lienzo con parrafos encima: ese patron es el que hacia ilegible el cuerpo
   anterior y esta prohibido en el sistema. */
.rt033-city-foto {
	display: block;
	margin: 0;
	border-radius: var(--rt033-city-radio);
	overflow: hidden;
	background: var(--rt033-city-papel);
}

.rt033-city-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.rt033-city-foto--ancha img {
	aspect-ratio: 16 / 9;
}

/* Encuadre vertical anclado a la izquierda. NO es una decision estetica: la
   foto de la Gran Via lleva la matricula del taxi en el extremo derecho, y a
   tamaño real se lee. Un cuadro de 5/6 sobre un original de 1,198 se queda con
   el 69,6 % izquierdo de la imagen —la puerta con la franja roja, el escudo y
   el numero de licencia— y deja fuera el morro del coche con la matricula.
   La fraccion recortada es constante: depende del cuadro, no del ancho de la
   columna, asi que el recorte es el mismo a 390 que a 1440. */
.rt033-city-foto--vertical img {
	aspect-ratio: 5 / 6;
	object-position: left center;
}

.rt033-city-foto figcaption {
	padding: 10px 14px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--rt033-city-tinta-suave);
	background: var(--rt033-city-blanco);
	border: 1px solid var(--rt033-city-borde);
	border-top: 0;
}

/* La captura de la app no es una fotografia: es un montaje con fondo propio,
   asi que ni se recorta ni lleva marco. */
.rt033-city-app {
	display: block;
	margin: 0 auto;
	max-width: 420px;
}

.rt033-city-app img {
	display: block;
	width: 100%;
	height: auto;
}


/* Pie de una figura o de un bloque secundario. */
.rt033-city-v2 p.rt033-city-pie {
	margin-top: 14px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--rt033-city-tinta-suave);
}

/* Una etiqueta que abre seccion sin H2 detras (la rejilla de servicios) pide
   mas aire debajo que una que solo precede a un titulo. */
.rt033-city-eti--suelta {
	margin-bottom: 20px;
}


/* 11. Municipios ----------------------------------------------------------
   Ocho destinos reales. Antes eran ocho palabras separadas por puntos medios,
   del mismo color que el texto y de 15 px: no parecian enlaces y nadie los
   pulsaba. Ahora cada uno es una ficha con su objetivo tactil. */
.rt033-city-municipios {
	display: grid;
	/* `minmax(0, 1fr)` y no `1fr`: el minimo automatico de una columna de
	   rejilla es el ancho de su contenido, asi que «Majadahonda» se llevaba
	   9 px de mas y las dos columnas quedaban desiguales (158 y 167 a 390). */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 22px;
}

.rt033-city-v2 .rt033-city-municipio {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 56px;
	padding: 12px 14px;
	border: 1px solid var(--rt033-city-borde-oscuro);
	border-radius: var(--rt033-city-radio-chico);
	background: rgba(255, 255, 255, 0.05);
	color: var(--rt033-city-blanco);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.rt033-city-v2 .rt033-city-municipio:hover,
.rt033-city-v2 .rt033-city-municipio:focus-visible {
	background: rgba(255, 255, 255, 0.10);
	border-color: var(--rt033-city-amarillo);
	color: var(--rt033-city-blanco);
	transform: translateY(-1px);
	text-decoration: none;
}

.rt033-city-municipio .rt033-icono {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--rt033-city-amarillo);
	opacity: 0.9;
}


/* 12. FAQ -----------------------------------------------------------------
   El acordeon sigue siendo el de Divi —es el que ya publica las 6 preguntas
   sincronizadas con el schema— pero no se parece al de Divi. Se le quita el
   marco gris, la franja de titulo y la tipografia por defecto, y se le pone la
   caja del sistema. */
.rt033-city-faq {
	max-width: 900px;
	margin: 0 auto;
}

.rt033-city-v2 .rt033-city-faq .et_pb_accordion {
	border: 0;
}

.rt033-city-v2 .rt033-city-faq .et_pb_toggle {
	margin: 0 0 10px;
	padding: 0;
	border: 1px solid var(--rt033-city-borde);
	border-radius: var(--rt033-city-radio-chico);
	background: var(--rt033-city-blanco);
	box-shadow: none;
	transition: border-color 0.14s ease;
}

.rt033-city-v2 .rt033-city-faq .et_pb_toggle:last-child {
	margin-bottom: 0;
}

.rt033-city-v2 .rt033-city-faq .et_pb_toggle_open {
	border-color: rgba(17, 17, 17, 0.28);
}

.rt033-city-v2 .rt033-city-faq h3.et_pb_toggle_title {
	position: relative;
	margin: 0;
	padding: 18px 52px 18px 20px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.005em;
	color: var(--rt033-city-tinta);
	cursor: pointer;
}

/* El icono de Divi es una fuente de iconos suya (`ETmodules`) posicionada a la
   derecha. Se reposiciona y se recolorea, no se sustituye: cambiarlo por un
   SVG obligaria a replicar el estado abierto/cerrado en JS, y ese JS es
   justamente lo que el acordeon de Divi ya hace bien. */
.rt033-city-v2 .rt033-city-faq h3.et_pb_toggle_title::before {
	top: 50%;
	right: 18px;
	left: auto;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	line-height: 28px;
	text-align: center;
	font-size: 18px;
	/* El glifo va en TINTA sobre un disco amarillo suave. En amarillo sobre
	   blanco daba 1,9:1, y esto no es decoracion: es el control que dice si la
	   pregunta esta abierta. En tinta sobre el disco pasa de 12:1. */
	color: var(--rt033-city-negro);
	background: rgba(254, 186, 2, 0.24);
	border-radius: 50%;
}

.rt033-city-v2 .rt033-city-faq .et_pb_toggle_content {
	padding: 0 20px 18px;
}

.rt033-city-v2 .rt033-city-faq .et_pb_toggle_content p {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--rt033-city-tinta-suave);
}


/* 12 bis. La red contra wpautop -------------------------------------------
   WordPress pasa el contenido de un modulo de texto por `wpautop`, que mete
   `<p>` alrededor de todo lo que no sea una etiqueta de bloque. Un `<span>`
   pegado a un `<div>` hermano hacia que `wpautop` cerrara un parrafo en medio
   y dejara un `<p></p>` vacio DENTRO de la rejilla: ese parrafo se convertia en
   el primer elemento de la cuadricula y empujaba el contenido real a una
   columna implicita de 40 px. Medido: una ficha de 40 px de ancho y 1.273 px de
   alto donde tocaban 595 x 120.

   El arreglo de verdad es estructural —todo hijo directo de una rejilla es una
   etiqueta de BLOQUE (`div`, `p`, `h2`, `ul`, `figure`)— y esta seccion es solo
   la red por si alguien edita el modulo en el Constructor y `wpautop` vuelve a
   pasar con otro resultado: un parrafo inyectado desaparece de la cuadricula
   sin llevarse por delante a sus hijos, y uno vacio no ocupa sitio. */
.rt033-city-canales > p,
.rt033-city-botones > p,
.rt033-city-municipios > p,
.rt033-city-tiendas > p,
.rt033-city-grid > p,
.rt033-city-duo > p,
.rt033-city-vias > p,
.rt033-city-via > p,
.rt033-city-ficha > p,
.rt033-city-foto > p,
.rt033-city-app > p {
	display: contents;
}

.rt033-city-v2 .rt033-city-bloque p:empty {
	display: none;
}


/* 13. Convivencia con Divi ------------------------------------------------
   Divi impone a sus secciones, filas, columnas y modulos paddings, anchos y
   margenes propios que aqui estorban. Se pisan una sola vez, anclando al
   contenedor de Divi para ganar en especificidad sin recurrir a `!important`
   mas que donde no queda otra. */

/* El margen inferior de los modulos. Divi lo da desde
   `.et_pb_column .et_pb_module` (2,75 % de la columna: sobre 1.240 px son
   34 px), y con una sola clase se empata en especificidad y gana el que se
   cargue despues, que es Divi. Hay que anclar tambien a la columna, y repetir
   el selector con el prefijo del constructor. */
.rt033-city-v2 .et_pb_column .et_pb_module,
.et-db #et-boc .et-l .rt033-city-v2 .et_pb_column .et_pb_module {
	margin-bottom: 0;
}

/* Cuando de verdad hacen falta dos modulos apilados en la misma columna, el
   aire lo reparte la columna con `gap`, no el margen de cada modulo: asi
   quitar o añadir un modulo en el Constructor no descuadra el espaciado. */
.rt033-city-v2 .et_pb_column.rt033-city-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Divi da a la columna un `margin-bottom` propio cuando la fila apila. Con
   `gap` en la rejilla, ese margen es aire duplicado. */
.rt033-city-v2 .et_pb_row .et_pb_column {
	margin-bottom: 0;
}

/* La columna de Divi trae un ancho en porcentaje y un margen derecho para
   separar columnas hermanas. Nuestras rejillas reparten por su cuenta, asi que
   la columna es siempre el 100 % de la fila. */
.rt033-city-v2 .et_pb_row .et_pb_column.rt033-city-col {
	width: 100%;
	max-width: none;
	margin-right: 0;
}

/* El FAQ SI se estrecha: una pregunta de 1.240 px de ancho con la respuesta
   debajo se lee fatal. Se estrecha la FILA, no la columna, y no es un capricho:
   Divi le pone a la ultima columna `margin-right: 0` de forma que gana a
   cualquier `margin: auto` nuestro, asi que la columna quedaba con 316 px de
   margen a la izquierda y 0 a la derecha —descentrada, con el hueco al otro
   lado—. La fila no esta flotada y su `margin: 0 auto` centra sin pelea. */
.rt033-city-v2 .et_pb_row.rt033-city-fila--estrecha {
	max-width: 964px;
}


/* 14. Tablet y escritorio -------------------------------------------------
   768 es tablet y 1180 es el mismo corte que usan el header y el hero, asi que
   el cuerpo cambia de aire exactamente donde cambian las otras dos piezas. */

@media (min-width: 768px) {
	.rt033-city-v2 {
		--rt033-city-aire: 58px;
		--rt033-city-hueco: 20px;
	}

	.rt033-city-v2 .et_pb_row.rt033-city-fila {
		padding: 0 32px;
	}

	.rt033-city-v2 .et_pb_row.rt033-city-fila + .et_pb_row.rt033-city-fila {
		margin-top: 36px;
	}

	.rt033-city-v2 .rt033-city-bloque > .et_pb_text_inner > * + * {
		margin-top: 28px;
	}

	.rt033-city-v2 h2 {
		font-size: 34px;
		margin-bottom: 14px;
	}

	.rt033-city-v2 h3 {
		font-size: 22px;
		margin-top: 30px;
	}

	.rt033-city-v2 p {
		font-size: 17px;
		line-height: 1.65;
	}

	.rt033-city-v2 p.rt033-city-lead {
		font-size: 19px;
		margin-bottom: 26px;
	}

	.rt033-city-v2 .rt033-city-lista li {
		font-size: 16.5px;
	}

	.rt033-city-duo {
		grid-template-columns: 1fr 1fr;
		gap: 34px;
	}

	/* Por defecto el duo alinea arriba; `--contenido` centra. `--arriba` es la
	   valvula para cuando una columna crece mucho mas que la otra. */
	.rt033-city-duo--arriba {
		align-items: start;
	}

	.rt033-city-contraste {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: 18px;
	}

	.rt033-city-contraste__paso {
		transform: none;
	}

	/* Banda: el texto ocupa lo que necesite y el CTA se va al borde derecho.
	   Con dos mitades el boton quedaba flotando en el centro, con un tercio de
	   amarillo vacio a su derecha. */
	.rt033-city-duo--banda {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 28px;
	}

	/* La columna de contenido manda sobre la foto: 7/5, no mitad y mitad. */
	.rt033-city-duo--contenido {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: center;
	}

	.rt033-city-canales {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	/* Las vias se apilan por defecto, porque su sitio habitual es la columna
	   estrecha de una fila de dos. `--tres` es para cuando ocupan el ancho
	   entero de la seccion. */
	.rt033-city-vias--tres {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 26px;
	}

	.rt033-city-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rt033-city-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* `--3` NO reparte en tablet: a 834 el contenedor deja 243 px por columna y,
	   descontando icono y paddings, el texto se queda en 161 px —unos veinte
	   caracteres por linea—. Medido: fichas de 238x486 donde a 1440 miden
	   391x312. A una columna son 770 px de ancho y dos lineas. Las tres llegan
	   en 1024. */

	/* En tablet siguen siendo dos columnas: la ficha gana ancho y el objetivo
	   tactil crece donde mas se usa el dedo. Las cuatro llegan en 1024. */
	.rt033-city-municipios {
		gap: 12px;
	}

	.rt033-city-card {
		padding: 24px;
	}

	.rt033-city-v2 .rt033-city-card h2,
	.rt033-city-v2 .rt033-city-card h3 {
		font-size: 20px;
	}

	.rt033-city-v2 .rt033-city-card p {
		font-size: 16px;
	}

	.rt033-city-v2 p.rt033-city-via__titulo {
		font-size: 18px;
	}

	.rt033-city-v2 .rt033-city-via p {
		font-size: 16px;
	}

	.rt033-city-v2 .rt033-city-faq h3.et_pb_toggle_title {
		font-size: 18px;
		padding: 20px 56px 20px 24px;
	}

	.rt033-city-v2 .rt033-city-faq .et_pb_toggle_content {
		padding: 0 24px 20px;
	}

	.rt033-city-v2 .rt033-city-faq .et_pb_toggle_content p {
		font-size: 16px;
	}
}

@media (min-width: 1180px) {
	.rt033-city-v2 {
		--rt033-city-aire: 72px;
		--rt033-city-hueco: 22px;
	}

	.rt033-city-v2 h2 {
		font-size: 38px;
	}

	.rt033-city-duo {
		gap: 48px;
	}

	.rt033-city-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.rt033-city-municipios {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.rt033-city-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* 15. Accesibilidad y preferencias del usuario ---------------------------- */
.rt033-city-canal:focus-visible,
.rt033-city-boton:focus-visible,
.rt033-city-tienda:focus-visible,
.rt033-city-municipio:focus-visible,
.rt033-city-v2 .rt033-city-bloque a:focus-visible,
.rt033-city-v2 .rt033-city-faq h3.et_pb_toggle_title:focus-visible {
	outline: 3px solid var(--rt033-city-negro);
	outline-offset: 3px;
}

.rt033-city-v2--oscuro .rt033-city-boton:focus-visible,
.rt033-city-v2--oscuro .rt033-city-bloque a:focus-visible,
.rt033-city-v2--negro .rt033-city-municipio:focus-visible,
.rt033-city-v2--negro .rt033-city-bloque a:focus-visible {
	outline-color: var(--rt033-city-blanco);
}

@media (prefers-reduced-motion: reduce) {
	.rt033-city-canal,
	.rt033-city-boton,
	.rt033-city-municipio,
	.rt033-city-tienda {
		transition: none;
	}

	.rt033-city-canal:hover,
	.rt033-city-canal:focus-visible,
	.rt033-city-boton:hover,
	.rt033-city-boton:focus-visible,
	.rt033-city-municipio:hover,
	.rt033-city-municipio:focus-visible {
		transform: none;
	}
}