/* ==========================================================================
   Aiseguros — Preguntas frecuentes (acordeón)
   Referencia: docs/referencias/Acordeon.png

   Sin JavaScript: `<details name="...">` da el comportamiento de acordeón
   (abrir uno cierra el anterior) y la accesibilidad de teclado de serie.
   ========================================================================== */

.aiseg-faq {
	padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 40px);
	background-color: var(--aiseguros-color-surface, #eaf4fb);

	/* Permite interpolar hacia palabras clave como `auto`, sin lo cual no se
	   puede animar hasta la altura natural del contenido. Se declara aquí y no
	   en `:root` para no cambiar el comportamiento de todo el sitio; la propiedad
	   se hereda, así que basta con ponerla en la sección. */
	interpolate-size: allow-keywords;

	/* Curva simétrica, equivalente al "Easy Ease" (F9) de After Effects: entra y
	   sale despacio. El `--aiseg-ease-out` del sistema arranca a plena velocidad,
	   y en un despliegue de altura eso se siente como un tirón. */
	--aiseg-faq-ease: cubic-bezier(0.33, 0, 0.67, 1);
	--aiseg-faq-dur: 480ms;
}

.aiseg-faq__inner {
	max-width: 900px;
	margin-inline: auto;
}

.aiseg-faq__head {
	margin-bottom: clamp(22px, 3vw, 34px);
}

.aiseg-faq .aiseg-faq__title {
	margin: 0;
	color: var(--aiseguros-color-primary, #075685);
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.aiseg-faq__subtitle {
	margin: 12px 0 0;
	color: var(--aiseguros-color-body, #364e52);
	font-size: 1rem;
	line-height: 1.6;
}

/* ==========================================================================
   Items
   ========================================================================== */

.aiseg-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.aiseg-faq__item {
	border-radius: var(--aiseguros-border-radius-card, 18px);
	background-color: var(--aiseguros-color-white, #FFFFFF);
	box-shadow: var(--aiseguros-shadow-sm, 0 4px 16px rgba(4, 48, 74, 0.06));
	/* Misma duración y curva que la altura: si el color va más rápido, entra
	   antes de que el panel termine de abrirse y se percibe como un salto. */
	transition:
		background-color var(--aiseg-faq-dur) var(--aiseg-faq-ease),
		box-shadow var(--aiseg-faq-dur) var(--aiseg-faq-ease);
}

/* Abierta: bloque de color con el texto en blanco, como la referencia. */
.aiseg-faq__item[open] {
	background-color: var(--aiseguros-color-primary, #075685);
	box-shadow: var(--aiseguros-shadow-md, 0 14px 40px rgba(4, 48, 74, 0.10));
}

.aiseg-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px);
	cursor: pointer;
	list-style: none;
}

/* Quita el triángulo por defecto (WebKit y el resto). */
.aiseg-faq__q::-webkit-details-marker {
	display: none;
}

.aiseg-faq__q::marker {
	content: "";
}

.aiseg-faq__q-text {
	color: var(--aiseguros-color-primary, #075685);
	font-size: clamp(0.98rem, 1.3vw, 1.08rem);
	font-weight: 650;
	line-height: 1.4;
	text-wrap: pretty;
	/* Sin esto el texto saltaba de azul a blanco de golpe, que era lo que más
	   se notaba del cambio de color. */
	transition: color var(--aiseg-faq-dur) var(--aiseg-faq-ease);
}

.aiseg-faq__item[open] .aiseg-faq__q-text {
	color: var(--aiseguros-color-white, #FFFFFF);
}

.aiseg-faq__q:focus-visible {
	outline: 3px solid var(--aiseguros-color-secondary, #4ab3e7);
	outline-offset: 2px;
	border-radius: var(--aiseguros-border-radius-card, 18px);
}

/* --- Marca +/− ----------------------------------------------------------- */

.aiseg-faq__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: 1.5px solid var(--aiseguros-color-secondary, #4ab3e7);
	border-radius: 50%;
	color: var(--aiseguros-color-secondary, #4ab3e7);
	transition:
		border-color var(--aiseg-faq-dur) var(--aiseg-faq-ease),
		background-color var(--aiseg-faq-dur) var(--aiseg-faq-ease),
		color var(--aiseg-faq-dur) var(--aiseg-faq-ease),
		transform var(--aiseg-faq-dur) var(--aiseg-faq-ease);
}

/* Medio giro del círculo: acompaña al giro de la barra y hace que el cambio de
   icono se lea como un movimiento, no como un salto. */
.aiseg-faq__item[open] .aiseg-faq__marca {
	border-color: rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--aiseguros-color-white, #FFFFFF);
	transform: rotate(180deg);
}

/* El "+" pasa a "−" GIRANDO: la barra vertical rota 90° hasta quedar encima de
   la horizontal. Ambas miden lo mismo (14) y comparten centro, así que el
   solape es exacto y el resultado es un "−" limpio.
   `transform-box: fill-box` hace que el origen sea el centro de la propia barra
   y no el del viewBox del SVG; sin él la barra giraría descentrada. */
.aiseg-faq__barra-v {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--aiseg-faq-dur) var(--aiseg-faq-ease);
}

.aiseg-faq__item[open] .aiseg-faq__barra-v {
	transform: rotate(90deg);
}

/* --- Despliegue animado --------------------------------------------------
   El navegador oculta el contenido de `<details>` con `content-visibility`, así
   que no basta con animar la altura: hay que transicionar también esa propiedad
   con `allow-discrete`, para que el contenido siga presente durante el cierre en
   vez de desaparecer de golpe.
   Si el navegador no soporta `::details-content`, el acordeón sigue funcionando:
   simplemente abre y cierra sin animación.
   ------------------------------------------------------------------------- */

.aiseg-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition:
		block-size var(--aiseg-faq-dur) var(--aiseg-faq-ease),
		content-visibility var(--aiseg-faq-dur) allow-discrete;
}

.aiseg-faq__item[open]::details-content {
	block-size: auto;
}

/* --- Respuesta ----------------------------------------------------------- */

.aiseg-faq__a {
	padding: 0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 26px);
	/* Entra ligeramente desde arriba, siguiendo a la altura. */
	opacity: 0;
	transform: translateY(-8px);
	transition:
		opacity 360ms var(--aiseg-faq-ease) 90ms,
		transform 360ms var(--aiseg-faq-ease) 90ms;
}

.aiseg-faq__item[open] .aiseg-faq__a {
	opacity: 1;
	/* `none` y no `translateY(0)`: un transform activo convertiría el elemento en
	   bloque contenedor de sus descendientes `position: fixed`. */
	transform: none;
}

/* Línea de puntos que separa pregunta y respuesta, como la referencia. */
.aiseg-faq__a::before {
	content: "";
	display: block;
	margin-bottom: 16px;
	border-top: 1px dashed rgba(255, 255, 255, 0.28);
}

.aiseg-faq__a p {
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.98rem;
	line-height: 1.68;
	text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
	.aiseg-faq__item,
	.aiseg-faq__q-text,
	.aiseg-faq__marca,
	.aiseg-faq__barra-v,
	.aiseg-faq__item::details-content,
	.aiseg-faq__a {
		transition: none;
	}

	.aiseg-faq__a {
		opacity: 1;
		transform: none;
	}

	.aiseg-faq__item[open] .aiseg-faq__marca {
		transform: none;
	}
}

/* Al llegar desde el enlace del pie, el titular debe quedar bajo la cabecera
   fija y no detrás de ella. */
.aiseg-faq {
	scroll-margin-top: 110px;
}