/**
 * Landing de municipio (/coches-ocasion/{slug}/).
 *
 * La cabecera reutiliza las clases .sv-provincia__* de seven.css, y el mapa,
 * las tarjetas y el acordeón son los del tema. Aquí sólo va lo que no existe
 * en ningún otro sitio, prefijado con .sv-municipio.
 */

.sv-municipio-seccion { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sv-municipio-seccion--papel2 { background: var(--sv-paper-2); }
.sv-municipio-seccion .sv-eyebrow { margin: 0; }
.sv-municipio-seccion .sv-d2 { margin: 0.5rem 0 0; max-width: 20ch; }

/* ---------- Texto largo (intro y cómo llegar) ---------- */

.sv-municipio__texto {
	margin: 1.5rem 0 0; max-width: 66ch; font-size: 1.0625rem; line-height: 1.8; color: var(--sv-mute);
}

.sv-municipio__intro { display: grid; gap: 1rem; }
.sv-municipio__intro .sv-municipio__texto { margin-top: 0.5rem; }
@media (min-width: 900px) {
	.sv-municipio__intro { grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; }
}

/* ---------- Coches ---------- */

.sv-municipio__coches { margin-top: 2.5rem; }
.sv-municipio__mas { margin: 2.5rem 0 0; }

/* ---------- Cómo llegar ---------- */

.sv-municipio__llegar { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
	.sv-municipio__llegar { grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: start; }
}

.sv-municipio__ficha { display: grid; gap: 0.875rem; margin: 0; }
.sv-municipio__ficha > div { display: grid; gap: 0.125rem; border-top: 1px solid var(--sv-line); padding-top: 0.875rem; }
.sv-municipio__ficha dt { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sv-mute); }
.sv-municipio__ficha dd { margin: 0; font-size: 0.95rem; }
.sv-municipio__ficha a { color: var(--sv-ink); }

/* ---------- Preguntas ---------- */

.sv-municipio__faq .sv-acordeon { margin-top: 2.5rem; max-width: 54rem; }

/* ---------- Otros municipios ---------- */

.sv-municipio__otros {
	display: grid; gap: 0.75rem; margin: 2.5rem 0 0; padding: 0; list-style: none;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .sv-municipio__otros { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sv-municipio__otros { grid-template-columns: repeat(5, 1fr); } }
.sv-municipio__otros a {
	display: block; padding: 0.875rem 1rem; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-card);
	color: var(--sv-ink); text-decoration: none; font-weight: 500; transition: border-color 0.2s var(--sv-ease), background 0.2s var(--sv-ease);
}
.sv-municipio__otros a:hover { border-color: var(--sv-brand); background: var(--sv-paper-2); }
.sv-municipio__otros small { display: block; margin-top: 0.125rem; font-size: 0.75rem; font-weight: 400; color: var(--sv-mute); }

.sv-municipio__contacto { margin: 1.75rem 0 0; color: var(--sv-mute); }
.sv-municipio__contacto a { color: var(--sv-ink); }

/* ---------- Cierre: compramos tu coche ---------- */

.sv-municipio-cierre {
	position: relative; overflow: hidden; background: var(--sv-ink); color: var(--sv-paper);
	padding-block: clamp(4rem, 8vw, 7rem);
}
.sv-municipio-cierre .sv-display { margin: 0.75rem 0 0; max-width: 24ch; color: var(--sv-paper); }
.sv-municipio-cierre__texto {
	margin: 1.25rem 0 0; max-width: 58ch; line-height: 1.7;
	color: color-mix(in oklab, var(--sv-paper) 75%, transparent);
}
.sv-municipio-cierre__botones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

@media (max-width: 640px) {
	.sv-municipio-cierre__botones .sv-btn { width: 100%; }
}