/**
 * FAQS — Página de preguntas frecuentes.
 *
 * Hero + acordeones agrupados por tema.
 */

/* ---------- Hero ---------- */

.sv-faqs-hero {
	position: relative;
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5rem 0;
}

.sv-faqs-hero__fondo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		/* --sv-accent es el AZUL DEL ANILLO DE FOCO, no un color de marca: usarlo
		   de fondo metía un lila que no existe en la paleta. El acento es el
		   verde. */
		radial-gradient(circle at 15% 50%, var(--sv-brand-soft) 0%, transparent 55%),
		radial-gradient(circle at 85% 80%, var(--sv-mist) 0%, transparent 55%);
	opacity: 0.15;
	pointer-events: none;
	z-index: 0;
}

.sv-faqs-hero__interior {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 60rem;
}

.sv-faqs-hero__interior h1 {
	margin: 1.5rem 0 1.5rem 0;
}

.sv-faqs-hero__intro {
	font-size: 1.125rem;
	color: var(--sv-mute);
	line-height: 1.5;
	margin: 0;
}

/* ---------- Contenido: grupos y acordeones ---------- */

.sv-faqs-contenido {
	padding: 6rem 0;
}

.sv-faqs-grupo {
	margin-bottom: 4rem;
}

.sv-faqs-grupo:last-child {
	margin-bottom: 0;
}

.sv-faqs-grupo h2 {
	margin-bottom: 2rem;
}

/* ---------- Acordeón ----------
 *
 * NO se redefine aquí: el acordeón es un componente compartido y ya está en
 * seven.css, animado y con su estado abierto. Redefinirlo hacía que el de esta
 * página se comportara distinto al de la ficha —se atenuaba entero al pasar
 * por encima y el titular abierto viraba a un verde ilegible sobre papel—.
 * Lo único propio de esta página es el aire entre grupos, arriba.
 */


.sv-acordeon__contenido a {
	color: var(--sv-brand-texto);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: opacity 200ms var(--sv-ease);
}

.sv-acordeon__contenido a:hover {
	opacity: 0.75;
}

.sv-acordeon__contenido em {
	color: var(--sv-mute);
	font-style: italic;
}

.sv-acordeon__contenido strong {
	color: var(--sv-ink);
	font-weight: 600;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
	.sv-faqs-hero {
		min-height: 40vh;
		padding: 3rem 0;
	}

	.sv-faqs-hero__intro {
		font-size: 1rem;
	}

	.sv-faqs-contenido {
		padding: 4rem 0;
	}

	.sv-faqs-grupo {
		margin-bottom: 3rem;
	}

	.sv-faqs-grupo h2 {
		margin-bottom: 1.5rem;
	}

	.sv-acordeon__boton {
		padding: 1.25rem 1.5rem 1.25rem 0;
	}

	.sv-acordeon__titulo {
		font-size: 1rem;
	}

	.sv-acordeon__resumen {
		font-size: 0.875rem;
	}

	.sv-acordeon__mas {
		width: 1.25rem;
		height: 1.25rem;
	}

	.sv-acordeon__contenido {
		padding-bottom: 1.25rem;
	}

	.sv-acordeon__contenido p {
		margin-bottom: 1rem;
	}
}

@media (max-width: 480px) {
	.sv-faqs-hero {
		min-height: 35vh;
		padding: 2rem 0;
	}

	.sv-faqs-hero__interior h1 {
		margin: 1rem 0 1rem 0;
	}

	.sv-faqs-hero__intro {
		font-size: 0.9375rem;
	}

	.sv-faqs-contenido {
		padding: 3rem 0;
	}

	.sv-faqs-grupo {
		margin-bottom: 2rem;
	}

	.sv-faqs-grupo h2 {
		margin-bottom: 1rem;
	}

	.sv-acordeon__boton {
		padding: 1rem 1.25rem 1rem 0;
	}

	.sv-acordeon__titulo {
		font-size: 0.9375rem;
	}

	.sv-acordeon__resumen {
		font-size: 0.8125rem;
	}
}