/* ==========================================================================
   PÁGINAS DE CIUDAD (single-ciudad.php) y HUB /renting-coches/ (archive-ciudad.php)
   Encargo 20261101-paginas-ciudad · Fase 1.

   Encolado SOLO en esas dos vistas (mr_ciudad_assets(), inc/enqueue.php), DESPUÉS
   de mr-home.css y mr-landing.css, que se cargan también aquí:
     - mr-home.css: hero (.mr-hero), secciones (.mr-home-section*), accesos,
       destacados (.mr-destacados*), reseñas (.mr-opiniones*) y el ancho completo
       de #content / .site-content / .mr-home > *.
     - mr-landing.css: bandas de ventajas y pasos, y el acordeón de la FAQ.
   Este fichero solo lleva lo que no existe en ninguna de las dos. No redefine
   ninguna regla de la portada ni de las landings: todo cuelga de .mr-ciudad* o
   de las clases de body single-ciudad / post-type-archive-ciudad.

   Móvil primero; un solo corte, 900px, como mr-home.css. Tokens --c-* de
   style.css.
   ========================================================================== */

/* ---- Ancho completo -------------------------------------------------------
   El contenedor de GeneratePress (.site.grid-container) pone max-width y
   padding lateral. La portada lo suelta con body.home (style.css) y las landings
   con su clase de plantilla (mr-landing.css); aquí, con las clases de body de las
   dos vistas. Mismo soltado, mismos valores. */
.single-ciudad .site.grid-container,
.post-type-archive-ciudad .site.grid-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* El margin vertical de .site-main (separate-containers) dejaría 20px entre la
   cabecera y el hero, como en el archive antes de mr-landing.css. */
.mr-ciudad.site-main {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ---- Migas (encima del H1) ---- */
.mr-ciudad-migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0 1rem;
	font-size: 0.85rem;
	color: var(--c-text);
}
.mr-ciudad-migas a {
	color: var(--c-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mr-ciudad-migas a:hover {
	color: var(--c-primary-hover);
}
.mr-ciudad-migas [aria-current] {
	color: var(--c-graphite);
	font-weight: 600;
}

/* ---- Intro (texto propio de la ciudad, sin encabezado) ---- */
.mr-ciudad-intro {
	background: #fff;
	padding: 0.5rem 1.25rem 1.5rem;
}
.mr-ciudad-intro__inner {
	max-width: 820px;
	margin: 0 auto;
	color: var(--c-text);
	font-size: 1.05rem;
	line-height: 1.7;
}
.mr-ciudad-intro__inner p {
	margin: 0 0 1rem;
}
.mr-ciudad-intro__inner p:last-child {
	margin-bottom: 0;
}

/* ---- Bloques de coches: el fondo alterno para el CERO/ECO ---- */
.mr-ciudad-coches--alt {
	background: var(--c-bg-alt);
}

/* ---- Te llamamos (WPForms 921) ----
   El aspecto del formulario es el de la ficha: .mr-captacion y .mr-vehicle-lead
   viven en style.css (global). Aquí solo la sección y su ancho. El margin
   superior de .mr-captacion es el de la columna de la ficha; aquí sobra. */
.mr-ciudad-llamada {
	background: #fff;
	padding: clamp(3rem, 6vw, 4.5rem) 1.25rem;
}
.mr-ciudad-llamada__inner {
	max-width: 560px;
	margin: 0 auto;
}
.mr-ciudad-llamada .mr-captacion {
	margin: 0;
}

/* ---- Lista de ciudades (otras ciudades y hub) ---- */
.mr-ciudad-otras {
	background: var(--c-bg-alt);
}
.mr-ciudad-otras .mr-home-section__title {
	text-align: center;
	margin-bottom: 1.5rem;
}
.mr-ciudad-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}
.mr-ciudad-lista a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.25rem;
	background: #fff;
	border: 1.5px solid var(--c-text);
	border-radius: 999px;
	color: var(--c-graphite);
	font-family: var(--font-primary);
	font-weight: 600;
	text-decoration: none;
}
.mr-ciudad-lista a:hover,
.mr-ciudad-lista a:focus-visible {
	border-color: var(--c-primary-hover);
	color: var(--c-primary-hover);
}

@media (min-width: 900px) {
	.mr-ciudad-intro {
		padding: 1rem 1.25rem 2.5rem;
	}
	.mr-ciudad-lista a {
		min-height: 38px;
	}
}