/**
 * FAQ: lo estructural del acordeón.
 *
 * ESTRUCTURA, NO DISEÑO. El borde, el color, la tipografía y el espaciado de las
 * preguntas son del tema. Aquí solo vive lo que el acordeón necesita para
 * comportarse: el marcador nativo fuera, el cursor, y la caja que permite animar
 * la apertura.
 *
 * Todo cuelga de `.zgn-faq`, así que un `<details>` fuera de una sección de FAQ
 * no se ve afectado.
 */

/* El triángulo nativo fuera: el indicador lo pone el tema donde quiera. */
.zgn-faq summary {
	cursor: pointer;
	list-style: none;
}

.zgn-faq summary::-webkit-details-marker {
	display: none;
}

/*
 * La animación de altura la hace el JS midiendo el contenido, no una transición
 * de `height: auto` —que no existe—. Este contenedor es el que el JS mide y
 * anima; sin JS no se declara y `<details>` abre de golpe, como siempre.
 */
.zgn-faq details[ data-zgn-faq-anim ] > .zgn-faq__cuerpo {
	overflow: hidden;
	transition: height 0.3s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.zgn-faq details[ data-zgn-faq-anim ] > .zgn-faq__cuerpo {
		transition-duration: 0.01ms;
	}
}