/* FAQ SEO: <details> nativo + Schema.org FAQPage (biblioteca faq-seo) */
.faq-seo {
	width: 100%;
	padding: 5rem 1.5rem;
	background-color: transparent;

	/* Laptop: dos laterales decorativos con marco dorado, como en aterapia */
	@media (width >= 1024px) {
		display: grid;
		grid-template-columns: minmax(10rem, 18rem) minmax(0, 860px) minmax(10rem, 18rem);
		justify-content: center;
		gap: 2.5rem;
		padding: 5rem 2.5rem;
	}
}

.lateral {
	display: none;

	@media (width >= 1024px) {
		display: block;
		min-height: 100%;
		border-radius: var(--border-radius);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		outline: 1px solid var(--dorado);
		outline-offset: -0.75rem;
		box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
	}
}

.lateral-izq {
	background-image: url(/images/bebes.webp);
}

.lateral-der {
	background-image: url(/images/bebe4_Vertical.webp);
}

.lista-faq {
	width: 100%;
	max-width: 860px;
	margin: 0 auto;

	& > h2 {
		margin-bottom: 2rem;
		text-align: center;
		color: var(--blanco);
		text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
	}

	& details {
		margin-bottom: 0.8rem;
		color: var(--texto);
		background-color: var(--blanco);
		border-radius: var(--border-radius);
		border-top: 2px solid var(--dorado);
		box-shadow: 0 2px 12px rgba(74, 101, 128, 0.08);
		interpolate-size: allow-keywords;

		& summary {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			padding: 1.1rem 1.4rem;
			font-family: var(--fuente-titulos);
			font-weight: 600;
			color: var(--primario);
			list-style: none;
			cursor: pointer;
			transition: color 0.3s ease;

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

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

			&::after {
				content: "+";
				flex: 0 0 auto;
				font-size: 1.6rem;
				line-height: 1;
				color: var(--dorado);
				transition: transform 0.3s ease;
			}
		}

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

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

		&[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);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lista-faq details[open] p {
		animation: none;
	}
	.lista-faq details::details-content {
		transition: none;
	}
}