/**
 * Estilos de la página de contacto.
 *
 * El mapa (.sv-visitanos) y el formulario (.sv-hablamos) ya tienen su CSS en
 * seven.css; aquí sólo va lo propio de esta página, prefijado con .sv-contacto-.
 */

/* ---------- Cabecera ---------- */

.sv-contacto-hero { padding-top: 8rem; padding-bottom: 2.5rem; }
.sv-contacto-hero__interior { max-width: 60rem; }
.sv-contacto-hero .sv-d2 { margin: 0.5rem 0 0; max-width: 24ch; }
.sv-contacto-hero__intro {
	margin: 1.5rem 0 0; max-width: 64ch; font-size: 1.0625rem; line-height: 1.8; color: var(--sv-mute);
}

/* ---------- NAP ---------- */

.sv-contacto-nap { padding-block: 1.5rem 3rem; }
.sv-contacto-nap__grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
	.sv-contacto-nap__grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: start; }
}

.sv-contacto-nap__datos {
	display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	font-style: normal;
}
.sv-contacto-dato { display: grid; gap: 0.25rem; border-top: 1px solid var(--sv-line); padding-top: 1rem; }
.sv-contacto-dato__rotulo { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sv-mute); }
.sv-contacto-dato__valor { font-size: 1.125rem; line-height: 1.5; color: var(--sv-ink); text-decoration: none; }
a.sv-contacto-dato__valor:hover { color: var(--sv-brand-dark); }

.sv-contacto-nap__horario {
	padding: 1.75rem; background: var(--sv-paper-2); border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius-card-lg);
}
.sv-contacto-nap__horario .sv-d0 { margin: 0 0 1rem; font-size: 1.375rem; }
.sv-contacto-horario { display: grid; gap: 0.75rem; margin: 0 0 1.5rem; }
.sv-contacto-horario > div {
	display: flex; justify-content: space-between; gap: 1rem;
	border-top: 1px solid var(--sv-line); padding-top: 0.75rem; font-size: 0.95rem;
}
.sv-contacto-horario dt { color: var(--sv-mute); }
.sv-contacto-horario dd { margin: 0; text-align: right; }

/* ---------- Cómo llegar desde… ---------- */

.sv-contacto-cerca { background: var(--sv-paper-2); padding-block: clamp(3.5rem, 7vw, 6rem); }
.sv-contacto-cerca .sv-eyebrow { margin: 0; }
.sv-contacto-cerca .sv-d2 { margin: 0.5rem 0 0; max-width: 20ch; }
.sv-contacto-cerca__intro { margin: 1.5rem 0 0; max-width: 64ch; line-height: 1.8; color: var(--sv-mute); }

.sv-contacto-cerca__lista {
	display: grid; gap: 0.75rem; margin: 2rem 0 0; padding: 0; list-style: none;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .sv-contacto-cerca__lista { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sv-contacto-cerca__lista { grid-template-columns: repeat(5, 1fr); } }
.sv-contacto-cerca__lista a {
	display: block; padding: 0.875rem 1rem; background: var(--sv-paper); 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);
}
.sv-contacto-cerca__lista a:hover { border-color: var(--sv-brand); }
.sv-contacto-cerca__lista small { display: block; margin-top: 0.125rem; font-size: 0.75rem; font-weight: 400; color: var(--sv-mute); }

.sv-contacto-aparcar { margin-top: 3rem; max-width: 60ch; }
.sv-contacto-aparcar .sv-d0 { margin: 0 0 0.75rem; font-size: 1.375rem; }
.sv-contacto-aparcar p { margin: 0; line-height: 1.7; color: var(--sv-mute); }