/*
	PLANTILLA DE PREGUNTAS FRECUENTES (#faqsListSec)

	Menu lateral de categorias (pestanas reales, ver faqs-menu.xsl) + panel
	de contenido con un acordeon por categoria (faqs-items.xsl). Se carga
	con un <link> dentro del <xsl:if> de faqs.xsl y NO se registra en
	etc/theme-config.php: si la landing no tiene categorias, no hay
	descarga.

	LAYOUT DE BASE (peticion expresa del usuario): calca #contactSec
	(contact-page.css), NO el patron habitual del proyecto de
	.row.g-0 > .container > .contentBox. El menu esta en
	'position: absolute' respecto al propio #faqsListSec (sin .container
	de por medio) y .faqsCont se centra POR SU CUENTA con max-width +
	margin:auto, ignorando al menu: asi el menu no le resta espacio de
	flex ni lo descentra.

	RESPONSIVE (segunda peticion del usuario, 05-ago-2026): la CAJA DE
	PREGUNTAS (.faqsCont) sigue la escala de #contactFaqSec .faqBox en
	contact-faqs.css (padding 64->30->30->20 y la misma reduccion de
	tipografia del acordeon en esos mismos tramos). El MENU (.faqsMenu),
	en cambio, sigue EXACTAMENTE el menu lateral de habitaciones
	-.roomsMenu- mismos anchos/left en cada tramo de escritorio, Y
	el mismo criterio de que el menu sigue siendo 'position: absolute'
	hasta los 768px (contact-page.css en cambio lo oculta ya a partir de
	1365px, sin alternativa movil)-. Como el menu sigue ocupando espacio
	real hasta 768px, .faqsCont NO puede seguir centrandose ciego al
	menu en ese rango: se le reserva el hueco con 'padding-left' en
	'.row.g-0' (mismos anchos que ese .roomsMenu +32px de
	aire), y .faqsCont pasa a ocupar el resto en vez de centrarse.

	Por debajo de 767px el menu deja de ser absoluto y pasa a fila que
	ENVUELVE (flex-wrap:wrap), NO a scroll horizontal (decision inicial
	descartada por el usuario a favor de replicar tal cual
	ese .roomsMenu en su tramo <=767px: mismo gap,
	mismo criterio de padding-left solo en el item activo).

	MENU LATERAL (.faqsMenu): mismo aspecto visual que .contactMenu /
	.roomsMenu (ver AVISO DE REFERENCIA mas abajo) -mismo tamano de texto, mismo color de activo (#1A1A1A
	sobre fondo claro, como .contactMenu; no el #F4C670 de .roomsMenu,
	que es para fondo oscuro) y mismo marcador de linea-. Sin :hover
	visible a proposito (decision del usuario): el <button> neutraliza
	el ':hover' global de fenix-sevilla-hotel.css (linea 125, fondo/borde
	dorado en TODO <button> que no sea .textArrowBtn/.outlined) para que
	el UNICO cambio de estado sea el clic, mismo patron defensivo que
	el ':hover' neutralizado de ese mismo .roomsMenu.

	AVISO DE REFERENCIA (ago-2026): estas comparaciones apuntaban a
	'#roomsSec .roomsBox .roomsMenu' en rooms-home.css, que YA NO EXISTE
	-el bloque de habitaciones de la home paso a maqueta de dos columnas y
	perdio su indice de pestanas-. El menu al que se refieren sigue vivo,
	pero en rooms-list.css: '#roomsMainSec .roomsBox .roomsMenu', el
	listado de /habitaciones. Es la misma maqueta y los mismos valores por
	tramo, asi que la referencia sigue siendo valida; solo cambia el
	archivo donde mirar. No es la unica copia: contact-page.css y
	contact-faqs.css tienen la suya (.contactMenu).

	El acordeon reutiliza LITERALMENTE la paleta y los resets del
	disparador de contact-faqs.css (#contactFaqSec .faqBox .accordionBox):
	mismos colores (#1A1A1A texto, #800033 foco), mismos iconos
	(accordion-arrow-down/up.svg) y los mismos resets de
	text-transform/letter-spacing/border/text-align/text-box-trim, por el
	mismo motivo alli documentado: al ser un <button>, el disparador
	matchea la regla global '.button, button, [type=button]...' de
	fenix-sevilla-hotel.css, que tiene la MISMA especificidad que
	'.accordion-button' de Bootstrap y gana por orden de carga.

	DEPENDENCIA EXTERNA (global, no duplicada aqui): @keyframes fadeIn ->
	third-party/wow-animate.css, usada por la animacion de apertura del
	panel (.collapsing/.show .accordion-body), igual que en
	contact-faqs.css.
*/

#faqsListSec {
	position: relative;
	padding: 0 0 5rem;
	background-color: #FFFFFF;
	overflow: hidden;
}

/* ---- MENU LATERAL (pestanas), calcado de .roomsMenu (rooms-list.css) ---- */

#faqsListSec .faqsMenu {
	width: 16rem;
	position: absolute;
	top: 0;
	left: 4.75rem;
	z-index: 1;
}
#faqsListSec .faqsMenu ul {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
#faqsListSec .faqsMenu ul > li {
	font-size: 1.375rem;
	color: #666666;
	font-weight: 400;
	line-height: 1.6875rem;
}
#faqsListSec .faqsMenu .catBtn {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 0 2.5rem;
	background-color: transparent;
	border: 0;
	border-radius: 0px;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: #666666;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	/* FASE 08 (E-31): entre reposo, :hover y .active solo cambian fondo, color y peso;
	   la abreviatura sin propiedad (= all) animaba tambien el anillo de foco. */
	transition: background-color .25s cubic-bezier(0.645, 0.045, 0.355, 1),
	            color .25s cubic-bezier(0.645, 0.045, 0.355, 1),
	            font-weight .25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/* Neutraliza el :hover global de fenix-sevilla-hotel.css (fondo/borde
   dorado en todo <button>): sin cambio visible en hover, solo en clic */
#faqsListSec .faqsMenu .catBtn:hover {
	background-color: transparent;
	color: #666666;
}
#faqsListSec .faqsMenu .catBtn.active {
	color: #1A1A1A;
	font-weight: 600;
}
#faqsListSec .faqsMenu .catBtn.active:hover {
	color: #1A1A1A;
}
#faqsListSec .faqsMenu .catBtn:before {
	content: "";
	width: 2rem;
	height: 0.0625rem;
	background-color: #1A1A1A;
	position: absolute;
	top: 0.8125rem;
	left: 0;
	opacity: 0;
	transition: .15s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#faqsListSec .faqsMenu .catBtn.active:before {
	opacity: 1;
	transition: .50s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/* FASE 08 WCAG: el :focus-visible del .catBtn se ha retirado de aqui. Era un
   outline de UN SOLO tono (#800033) con offset POSITIVO, y la primera pestana esta
   a ras del borde superior de #faqsListSec (overflow:hidden), asi que se recortaba.
   Ahora lo pone accessibility.css con el anillo INSET de dos tonos del proyecto,
   junto al resto de controles con el mismo problema. */

/* ---- PANELES: se centran por su cuenta, ignorando el menu absoluto ---- */

#faqsListSec .faqsCont {
	max-width: 52.5rem;
	margin: 0 auto;
	padding: calc(4rem - 1rem) 4rem;
	border: 1px solid #999;
	border-radius: 0.25rem;
	overflow: hidden;
}
#faqsListSec .faqsCont .faqCategoryItems {
	display: none;
}
#faqsListSec .faqsCont .faqCategoryItems.active {
	display: block;
}

/* ---- ACORDEON (paleta y resets identicos a contact-faqs.css) ---- */

#faqsListSec .faqsCont .accordionBox {
	display: flex;
	flex-direction: column;
}
#faqsListSec .faqsCont .accordionBox .accordion-item {
	position: relative;
	border-color: #999;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	background-color: transparent;
}
#faqsListSec .faqsCont .accordionBox .accordion-item:first-of-type {
	border-top-color: transparent;
}

#faqsListSec .faqsCont .accordionBox .accordion-item:last-of-type {
	border-bottom-color: transparent;
}

#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-header .accordion-button {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 1rem 0px;
	background-color: transparent;
	border: 0;
	border-radius: 0px;
	box-shadow: none;
	font-size: 1.125rem;
	color: #1A1A1A;
	font-weight: 600;
	line-height: 1.5rem;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	text-box-trim: none;
	cursor: pointer;
}
/* FASE 08 WCAG: anillo de DOS TONOS del proyecto (ver #Foco visible en
   accessibility.css), no el #800033 de un solo tono que habia -que es el color del
   asterisco de campo obligatorio, no un color de foco-. La regla se queda AQUI y no
   en accessibility.css porque este modulo se emite desde la plantilla, o sea
   despues, y a igual especificidad (1,6,0) ganaria siempre el modulo: desde
   accessibility.css solo se colaba el box-shadow y el outline lo seguia poniendo
   esta regla, con lo que el anillo salia mezclado (halo blanco + outline granate). */
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-header .accordion-button:focus-visible {
	outline: 2px solid var(--a11y-focus-oscuro);
	outline-offset: 2px;
	box-shadow: 0 0 0 0.25rem var(--a11y-focus-claro);
}
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-header .accordion-button:after {
	display: none;
}
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-header .accordion-button .arrow {
	flex-shrink: 0;
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	background-image: url("../../images/accordion-arrow-down.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-header .accordion-button:not(.collapsed) .arrow {
	background-image: url("../../images/accordion-arrow-up.svg");
}
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-body {
	padding: 0 0 1rem 0;
	margin-right: 1.875rem;
	opacity: 0;
}
#faqsListSec .faqsCont .accordionBox .accordion-item .collapsing .accordion-body,
#faqsListSec .faqsCont .accordionBox .accordion-item .show .accordion-body {
	animation: fadeIn 1.3s both;
}
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-body p {
	margin: 0 0 0.9375rem 0;
	font-size: 1rem;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 1.4375rem;
}
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-body p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   ESCRITORIO — mismos 3 tramos que .contactMenu/.roomsMenu (identicos
   en ambos) y que .contactInfoBox para la caja de preguntas
   ============================================================ */

/* @media only screen and (min-width: 1501px) and (max-width: 1600px) {
#faqsListSec .faqsMenu 						{ width: 227px; }
#faqsListSec .faqsCont 							{ max-width: 940px; }
} */

@media only screen and (min-width: 1366px) and (max-width: 1500px) {
#faqsListSec .faqsMenu 						{ width: 12.5rem; left: 2rem; }
#faqsListSec .faqsMenu ul > li 					{ font-size: 1.125rem; line-height: 1.4375rem; }
#faqsListSec .faqsMenu .catBtn 					{ padding: 0 0 0 1.875rem; }
#faqsListSec .faqsMenu .catBtn:before 			{ width: 1.375rem; top: 0.625rem; }
#faqsListSec .faqsCont 							{ max-width: 53.75rem; }
}

/* ============================================================
   961-1365px — el menu SIGUE absoluto (a diferencia de #contactSec,
   que aqui lo oculta): mismos anchos/left que .roomsMenu en este
   tramo. Como sigue ocupando sitio, se le reserva hueco con
   padding-left en la fila en vez de centrar .faqsCont ciego al menu
   (32 left + 200 ancho + 32 de separacion = 264px).
   ============================================================ */

@media only screen and (min-width: 961px) and (max-width: 1365px) {
#faqsListSec .row 											{ padding-left: 16.5rem; }
#faqsListSec .faqsMenu 									{ width: 12.5rem; left: 2rem; }
#faqsListSec .faqsMenu ul > li 							{ font-size: 1.125rem; line-height: 1.4375rem; }
#faqsListSec .faqsMenu .catBtn 							{ padding: 0 0 0 1.875rem; }
#faqsListSec .faqsMenu .catBtn:before 						{ width: 1.375rem; top: 0.625rem; }
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-header .accordion-button { padding: 0.8125rem 0; font-size: 1rem; line-height: 1.25rem; }
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-body p { font-size: 0.9375rem; line-height: 1.25rem; }
/* Sin menu (1 sola categoria, ver faqs.xsl): el padding-left de arriba
   reservaba hueco para un menu que aqui no existe */
#faqsListSec.no-tabs .row 									{ padding-left: 0; }
}

/* ============================================================
   768-960px — mismo criterio que el tramo anterior, con los anchos
   propios de .roomsMenu en este tramo (20 left + 180 ancho + 20 de
   separacion = 220px)
   ============================================================ */

@media only screen and (min-width: 768px) and (max-width: 960px) {
#faqsListSec 											{ padding-inline: 0 4.375rem; }
#faqsListSec:not(:has( .faqsMenu + .faqsCont ))			{ padding-inline: 4.375rem; }
#faqsListSec .row 										{ padding-left: 13.75rem; }
#faqsListSec .faqsMenu 									{ width: 11.25rem; left: 1.25rem; }
#faqsListSec .faqsMenu ul > li 							{ font-size: 1.125rem; line-height: 1.4375rem; }
#faqsListSec .faqsMenu .catBtn 							{ padding: 0 0 0 1.875rem; }
#faqsListSec .faqsMenu .catBtn:before 						{ width: 1.375rem; top: 0.625rem; }
#faqsListSec .faqsCont 									{ margin: 0; padding: calc(1.875rem - 1rem) 1.875rem; }
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-header .accordion-button { padding: 0.625rem 0; font-size: 1rem; line-height: 1.25rem; }
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-body p { font-size: 0.9375rem; line-height: 1.25rem; }
/* Sin menu (1 sola categoria, ver faqs.xsl): el padding-left de arriba
   reservaba hueco para un menu que aqui no existe */
#faqsListSec.no-tabs .row 									{ padding-left: 0; }
}

/* ============================================================
   ≤767px — el menu deja de ser absoluto (ya no hay sitio que
   reservar) y pasa a fila que ENVUELVE, calcado de
   #roomsSec .roomsBox .roomsMenu en su tramo <=767px: mismo gap
   (20px), y el padding-izquierdo del marcador solo lo lleva el item
   ACTIVO (los inactivos van a padding:0, el marcador es invisible de
   todas formas hasta que el item se activa).
   ============================================================ */

@media only screen and (max-width: 767px) {
#faqsListSec 												{ padding-top: 0; padding-bottom: 3.125rem; }
#faqsListSec .row 											{ padding-left: 0; }
#faqsListSec .faqsMenu 									{ width: 100%; position: static; top: auto; left: auto; margin-bottom: 1.25rem; }
#faqsListSec .faqsMenu ul 									{ flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }
#faqsListSec .faqsMenu ul > li 							{ font-size: 1.125rem; line-height: 1.4375rem; }
#faqsListSec .faqsMenu .catBtn 							{ padding: 0; white-space: nowrap; }
#faqsListSec .faqsMenu .catBtn.active 						{ padding-left: 1.875rem; }
#faqsListSec .faqsMenu .catBtn:before 						{ width: 1.375rem; top: 0.625rem; }
#faqsListSec .faqsCont 									{ margin: 0; padding: calc(1.25rem - 1rem ) 1.25rem; }
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-header .accordion-button { padding: 0.625rem 0; font-size: 1rem; line-height: 1.25rem; }
#faqsListSec .faqsCont .accordionBox .accordion-item .accordion-body p { font-size: 0.9375rem; line-height: 1.25rem; }
}