/* FAQ SEO: <details> nativo + Schema.org FAQPage (biblioteca faq-seo) */
.faq-seo {
	width: 100%;
	margin: 2rem auto;
	padding: 3rem;
	background-image: url(/images/fondo.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 0;
	outline: 1px solid var(--primario);
	outline-offset: -1rem;

	@media (width <= 960px) {
		padding: 2rem 1.5rem;
	}
}

/* OJO: el nesting nativo NO concatena BEM (&__x descarta la regla): selector completo */
.lista-faq {
	max-width: 1100px;
	margin: 0 auto;

		& > h2 {
			text-align: center;
			font-size: clamp(1.4rem, 4vw, 2rem);
			font-family: serif;
			color: var(--primario);
			margin-bottom: 1.5rem;
		}

		& details {
			margin-bottom: 0.8rem;
			color: var(--texto);
			background-color: rgba(255, 255, 255, 0.75);
			border-radius: var(--border-radius);
			outline: 1px solid var(--primario);
			outline-offset: -0.4rem;
			/* Clave: permite ANIMAR la altura hasta 'auto' al abrir/cerrar (Chrome
			   moderno); donde no exista, abre/cierra sin animar la altura */
			interpolate-size: allow-keywords;

			& summary {
				padding: 1.1rem 1.6rem;
				font-weight: 600;
				color: var(--primario);
				list-style: none;
				cursor: pointer;
				transition: color 0.3s ease;

				&::-webkit-details-marker {
					display: none;
				}

				&:hover {
					color: var(--texto);
				}

				&::after {
					content: "+";
					float: right;
					font-size: 1.6rem;
					line-height: 1;
					color: var(--primario);
					transition: transform 0.3s ease;
				}
			}

			&[open] summary::after {
				transform: rotate(45deg);
			}

			& p {
				padding: 0 1.6rem 1.3rem;
				line-height: 1.7;

				& a {
					color: var(--primario);
					text-decoration: underline;
				}
			}

			&[open] p {
				animation: faq-seo-abrir 0.5s ease;
			}

			&::details-content {
				block-size: 0;
				overflow: clip;
				transition: block-size 0.45s ease, content-visibility 0.45s;
				transition-behavior: allow-discrete;
			}
			&[open]::details-content {
				block-size: auto;
			}
	}
}

@keyframes faq-seo-abrir {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Accesibilidad: sin animaciones para quien las tenga reducidas en el sistema */
@media (prefers-reduced-motion: reduce) {
	.lista-faq details[open] p {
		animation: none;
	}
	.lista-faq details::details-content {
		transition: none;
	}
}