/**
 * La pestaña de preguntas de la ficha de producto.
 *
 * Sin JavaScript: son <details> y <summary> nativos. El navegador ya sabe
 * abrirlos y cerrarlos, se manejan con el teclado solos, y el texto está en
 * el HTML desde el principio — así que Google lo lee aunque esté plegado.
 */

.fs-faq {
	margin: 0;
	max-width: 780px;
}

.fs-faq__item {
	border-bottom: 1px solid #EDEDED;
}

.fs-faq__item:first-child {
	border-top: 1px solid #EDEDED;
}

.fs-faq__p {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1.05em 0;
	font-weight: 600;
	color: #0D281A;
	line-height: 1.4;
	list-style: none;           /* Safari */
	transition: color .18s ease;
}

.fs-faq__p::-webkit-details-marker {
	display: none;              /* la flecha por defecto de Safari */
}

.fs-faq__p:hover,
.fs-faq__item[open] .fs-faq__p {
	color: #22A366;
}

/* La flecha, dibujada con bordes para no cargar ningún icono. */
.fs-faq__p::after {
	content: "";
	flex: 0 0 auto;
	width: .5em;
	height: .5em;
	margin-right: .2em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .22s ease;
}

.fs-faq__item[open] .fs-faq__p::after {
	transform: rotate(-135deg);
}

.fs-faq__r {
	padding: 0 0 1.25em;
	color: #3A3A3A;
	line-height: 1.65;
}

.fs-faq__r p {
	margin: 0 0 .7em;
}

.fs-faq__r p:last-child {
	margin-bottom: 0;
}

.fs-faq__r a {
	color: #22A366;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* El precio que imprime wc_price() viene envuelto en <bdi>. */
.fs-faq__r .woocommerce-Price-amount {
	font-weight: 600;
	color: #0D281A;
	white-space: nowrap;
}

/* Quien pidió menos movimiento no necesita ver girar la flecha. */
@media (prefers-reduced-motion: reduce) {
	.fs-faq__p,
	.fs-faq__p::after {
		transition: none;
	}
}