/**
 * Estilos para el shortcode [faqs] (acordeón de preguntas frecuentes).
 */

.mr-faqs__item {
	border-top: 1px solid #ACA499;
}

.mr-faqs__item:last-child {
	border-bottom: 1px solid #ACA499;
}

.mr-faqs__heading {
	margin: 0;
}

/*
 * La pregunta es un span[role="button"] (ver includes/shortcode-faqs.php),
 * no un <button>: así evitamos que el tema/Elementor le apliquen sus
 * estilos globales de botón (fondo, borde, colores de :hover/:focus, etc.),
 * que es lo que rompía su apariencia cuando era un <button> real.
 */
.mr-faqs__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 16px 20px;
	border: none;
	background: none;
	box-shadow: none;
	text-align: left;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 30px;
	color: #061524;
}

.mr-faqs__question:focus-visible {
	outline: 2px solid #B39239;
	outline-offset: 2px;
	border-radius: 2px;
}

.mr-faqs__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.mr-faqs__icon svg {
	width: 18px;
	height: 18px;
}

.mr-faqs__icon-open {
	display: none;
}

.mr-faqs__icon-closed {
	color: #CCAF60;
}

.mr-faqs__icon-open {
	color: #061524;
}

.mr-faqs__question[aria-expanded="true"] .mr-faqs__icon-closed {
	display: none;
}

.mr-faqs__question[aria-expanded="true"] .mr-faqs__icon-open {
	display: inline-flex;
}

/*
 * Acordeón animado sin medir alturas en JS: grid-template-rows pasa de 0fr a
 * 1fr. El padding vive en .mr-faqs__answer-content, dentro del wrapper con
 * overflow: hidden, para que la animación no dé saltos.
 *
 * display/transition van con !important: si el tema o Elementor imponen su
 * propio "display" o pisan la transición en este contenedor, el cambio de
 * grid-template-rows deja de animarse y el acordeón se abre/cierra de golpe.
 */
.mr-faqs__answer {
	display: grid !important;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.3s ease !important;
}

.mr-faqs__item.is-open .mr-faqs__answer {
	grid-template-rows: 1fr;
}

.mr-faqs__answer-inner {
	overflow: hidden;
	min-height: 0;
}

.mr-faqs__answer-content {
	/*
	 * padding-top reducido a propósito: el padding-bottom de 16px de
	 * .mr-faqs__question ya separa la pregunta de la respuesta, así que un
	 * padding-top de 20px adicional aquí dejaba demasiado hueco entre ambas.
	 */
	padding: 0 20px 20px;
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 28px;
	color: #061524;
}

.mr-faqs__answer-content > *:last-child {
	margin-bottom: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.mr-faqs__answer {
		transition: none;
	}
}