@charset "utf-8";
/*
	BLOQUE CONTACTO + FAQ'S DE LA HOME (#contactFaqSec)

	Extraido de fenix-sevilla-hotel.css y skeleton.css al dinamizar el bloque
	(bloque 9). Se carga con un <link> dentro del <xsl:if> de
	contact-faqs.xsl y NO se registra en etc/theme-config.php: si el editor
	no crea 'custom-contact' ni relaciona FAQs en la landing, no hay descarga.

	Las dos columnas viven en el mismo modulo porque son un flex 50/50 que
	comparte contenedor (.rowBox): separarlas partiria el bloque. Si una de las
	dos no tiene datos, la otra se queda a su 50% y deja hueco: es deliberado
	(fail-visible), avisa al editor de que falta contenido.

	DEPENDENCIAS EXTERNAS (globales, no duplicadas aqui):
	  - @keyframes fadeIn -> third-party/wow-animate.css. Lo usa la animacion de
	    apertura del panel (.collapsing/.show .accordion-body).
	  - .accordion-button de third-party/bootstrap.min.css aporta el width:100%
	    del disparador, que este modulo NO repite. Si algun dia se purga Bootstrap
	    (PurgeCSS), hay que safelistar 'accordion-*' y 'collapse*' o el disparador
	    pierde el ancho completo (y con el, la flecha pegada al borde derecho).

	DOS CORRECCIONES respecto al CSS de la maqueta (el resto es LITERAL, incluidos
	todos los valores responsive):

	NO TOCAR el z-index de .contactBox .btnBox, aunque parezca un bug. Declara
	'z-index: 1' SIN 'position', lo que normalmente seria inerte... pero .btnBox es
	un FLEX ITEM (.contactBox es display:flex), y en flex un z-index distinto de
	'auto' crea contexto de apilamiento y SI se aplica aunque el elemento sea
	static. Por eso el velo .contactBox:after (position:absolute; z-index:0) NO
	tapa el boton. Verificado en vivo con document.elementFromPoint():
	  - static + z-index:1  (la maqueta) -> boton PULSABLE
	  - static + z-index:auto            -> boton TAPADO por el velo
	  - relative + z-index:auto          -> boton TAPADO por el velo
	Es decir: el ingrediente que funciona es el z-index, no el position. Anadir
	'position: relative' no arregla nada y solo desvia el CSS de la maqueta.

	1) Los CINCO resets del disparador del acordeon: text-transform, letter-spacing,
	   border, text-align y text-box-trim. Al pasar de <span> a <button> (el <span>
	   no era focalizable: WCAG 2.1.1) el elemento empieza a matchear la regla
	   global '.button, button, [type=button], [type=reset], [type=submit]' de
	   fenix-sevilla-hotel.css.

	   OJO con la cascada, que es contraintuitiva: esa regla global gana a
	   '.accordion-button' de Bootstrap. El motivo es el trozo '[type=button]' del
	   selector: un selector de atributo tiene la MISMA especificidad (0,1,0) que
	   una clase, y el CSS del tema se carga DESPUES de Bootstrap, asi que en el
	   empate gana el tema. Por eso NO se puede confiar en el border:0 ni en el
	   text-align:left de Bootstrap, aunque esten declarados: hay que repetirlos
	   aqui, donde el selector de ID los pone por encima de todo.

	   Medido en la maqueta (viewport 1600px, pregunta a dos lineas), <span> contra
	   <button> sin resets: text-transform none->uppercase, letter-spacing
	   normal->0.675px, border 0->1px solid #1A1A1A, text-align left->center,
	   text-box-trim none->trim-both, y la fila pasaba de 80px a 82px de alto. Con
	   los cinco resets el <button> queda IDENTICO al <span> de la maqueta: mismo
	   alto (80px), mismo ancho (497,56px) y misma flecha al ras del borde derecho.
	   text-box-edge sigue computando 'cap alphabetic', pero es inerte con
	   text-box-trim:none.

	2) :focus-visible propio. Bootstrap pone 'outline: 0' en
	   .accordion-button:focus y su --bs-accordion-btn-focus-box-shadow no esta
	   definida en este tema, asi que el foco de teclado quedaria INVISIBLE
	   (WCAG 2.4.7). El color es el #800033 que ya usa el subtitulo del bloque.

	NO se trasladan dos reglas de la maqueta por ser codigo muerto:
	'.contactBox .btnBox .getInTouch' y '.faqBox .accordionBox .btnBox .faqBtn'
	(margin:0). Ninguna de las dos clases existe en el HTML del proyecto y la
	regla global de botones ya declara margin:0.
*/

#contactFaqSec {
	padding-top: 5rem;
	padding-bottom: 5rem;
	background-color: #FFFFFF;
	overflow: hidden;
}
/* align-items: stretch (y no el flex-start de la maqueta) para que las dos
   columnas SIEMPRE midan lo mismo: la de FAQs crece con el numero de preguntas
   y la de contacto la acompana. El min-height: 590px de cada columna sigue
   siendo el suelo cuando hay pocas preguntas */
#contactFaqSec .rowBox {
	display:flex;
	align-items: stretch;
	gap: 1.5rem;
	max-width: 79.875rem;
	margin: auto;
}
#contactFaqSec .contactBox {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	max-width: 50%;
	min-height: 36.875rem;
	padding: 4rem;
	background-image: url("../../images/contact-bg.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 0.25rem;
	overflow: hidden;
}
#contactFaqSec .contactBox:after {
	content: "";
	display: flex;
	width: 100%;
	height: 100%;
	background: rgba(26, 26, 26, 0.80) 0%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
#contactFaqSec .contactBox .titleBox {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-bottom: 4rem;
	position: relative;
	z-index: 1;
}
#contactFaqSec .contactBox .titleBox .subtitle {
	display: block;
	margin: 0;
	font-size: 1.125rem;
	color: #F4C670;
	font-weight: 600;
	line-height: 1.4375rem;
	letter-spacing: 0.09375rem;
	text-transform: uppercase;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#contactFaqSec .contactBox .titleBox .title {
	display: block;
	margin: 0;
	font-size: 2.8125rem;
	color: #ffffff;
	font-weight: 400;
	line-height: 3.25rem;
	letter-spacing: -0.09375rem;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#contactFaqSec .contactBox .titleBox .title br {
	display: block;
}
#contactFaqSec .contactBox .info {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
}
#contactFaqSec .contactBox .info .item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 1.125rem;
	color: #ffffff;
	font-weight: 400;
	line-height: 1.5rem;
	word-break: break-word;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#contactFaqSec .contactBox .info .item .label {
	display: block;
	margin: 0;
	font-size: 0.9375rem;
	color: #F4C670;
	font-weight: 700;
	line-height: 1.25rem;
	text-transform: uppercase;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#contactFaqSec .contactBox .info .item a {
	display: inline-block;
	color: #ffffff;
	text-decoration: none;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	/* FASE 08 (E-31): el :hover solo cambia el color; la abreviatura sin propiedad
	   (= all) animaba tambien el anillo de foco, que debe ser instantaneo. */
	transition: color .25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#contactFaqSec .contactBox .info .item a:hover {
	color: #F4C670;
	text-decoration: none;
}
#contactFaqSec .contactBox .btnBox {
	display: flex;
	justify-content: flex-start;
	gap: 0.9375rem;
	z-index: 1;
}
#contactFaqSec .faqBox {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 50%;
	min-height: 36.875rem;
	padding: 4rem;
	border: 1px solid #999;
	border-radius: 0.25rem;
	overflow: hidden;
}
#contactFaqSec .faqBox .titleBox {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-bottom: 4rem;
}
#contactFaqSec .faqBox .titleBox .subtitle {
	display: block;
	margin: 0;
	font-size: 1.125rem;
	color: #800033;
	font-weight: 600;
	line-height: 1.4375rem;
	letter-spacing: 0.09375rem;
	text-transform: uppercase;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#contactFaqSec .faqBox .titleBox .title {
	display: block;
	margin: 0;
	font-size: 2.8125rem;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 3.25rem;
	letter-spacing: -0.09375rem;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#contactFaqSec .faqBox .titleBox .title br {
	display: block;
}
#contactFaqSec .faqBox .accordionBox {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
#contactFaqSec .faqBox .accordionBox .accordion-item {
	position: relative;
	border-color: #999;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	background-color: transparent;
	transition: background-color 0.4s ease-in-out;
}
#contactFaqSec .faqBox .accordionBox .accordion-item:has(.accordion-button:not(.collapsed)) {
	background-color: transparent;
	box-shadow: none;
}
#contactFaqSec .faqBox .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). */
#contactFaqSec .faqBox .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);
}
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-header .accordion-button:after {
	display: none;
}
#contactFaqSec .faqBox .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;
}
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-header .accordion-button:not(.collapsed) .arrow {
	background-image: url("../../images/accordion-arrow-up.svg");
}
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body {
	padding: 0 0 1rem 0;
	margin-right: 1.875rem;
	opacity: 0;
}
#contactFaqSec .faqBox .accordionBox .accordion-item .collapsing .accordion-body,
#contactFaqSec .faqBox .accordionBox .accordion-item .show .accordion-body {
	animation: fadeIn 1.3s both;
}
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body p {
	margin: 0 0 0.9375rem 0;
	font-size: 1rem;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 1.4375rem;
}
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body p:last-child {
	margin-bottom: 0;
}
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body ul {
	padding: 0;
	margin: 0 0 0.9375rem 0;
	list-style-type: none;
}
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body ul:last-child {
	margin-bottom: 0;
}
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body ul > li {
	position: relative;
	padding-left: 1.5625rem;
	font-size: 1rem;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 1.4375rem;
}
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body ul > li::before {
	content: "•";
	font-size: 75%;
	position: absolute;
	top: 0;
	left: 0.625rem;
}
#contactFaqSec .faqBox .accordionBox .btnBox {
	display: flex;
	justify-content: flex-start;
	gap: 0.9375rem;
}

/* VARIANTE DE UNA SOLA COLUMNA (plantilla 'contact'): la clase .contactFaq la
   pone contact-faqs.xsl cuando se le pasa faqs-only. El .faqBox pasa a ancho
   completo y pierde el min-height, que solo tenia sentido para igualar la
   altura de las dos columnas */
#contactFaqSec.contactFaq .rowBox {
	max-width: 65rem;
}
#contactFaqSec.contactFaq .faqBox {
	max-width: 100%;
	min-height: auto;
}

@media only screen and (min-width: 1501px) and (max-width: 1600px) {
#contactFaqSec.contactFaq .rowBox 							{ max-width: 58.75rem; }
}

@media only screen and (min-width: 1366px) and (max-width: 1500px) {
#contactFaqSec.contactFaq .rowBox 							{ max-width: 53.75rem; }
}

@media only screen and (min-width: 961px) and (max-width: 1365px) {
#contactFaqSec 										{ padding-top: 4.375rem; padding-bottom: 4.375rem; }
#contactFaqSec .contactBox 							{ min-height: 29.375rem; padding: 1.875rem; }
#contactFaqSec .contactBox .titleBox				{ gap: 1.5625rem; margin-bottom: 3.125rem; }
#contactFaqSec .contactBox .titleBox .subtitle		{ font-size: 1rem; line-height: 1.25rem; }
#contactFaqSec .contactBox .titleBox .title 		{ font-size: 2.5rem; line-height: 2.8125rem; }
#contactFaqSec .faqBox								{ min-height: 29.375rem; padding: 1.875rem; }
#contactFaqSec .faqBox .titleBox 					{ gap: 1.25rem; margin-bottom: 3.125rem; }
#contactFaqSec .faqBox .titleBox .subtitle			{ font-size: 1rem; line-height: 1.25rem; }
#contactFaqSec .faqBox .titleBox .title 			{ font-size: 2.5rem; line-height: 2.8125rem; }
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-header .accordion-button { padding: 0.8125rem 0; font-size: 1rem; line-height: 1.25rem; }
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body p { font-size: 0.9375rem; line-height: 1.25rem; }
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body ul > li { font-size: 0.9375rem; line-height: 1.25rem; }
}

@media only screen and (min-width: 768px) and (max-width: 960px) {
#contactFaqSec 										{ padding-top: 4.375rem; padding-bottom: 4.375rem; }
#contactFaqSec .rowBox 								{ gap: 1.25rem; }
#contactFaqSec .contactBox 							{ min-height: 28.125rem; padding: 1.875rem; }
#contactFaqSec .contactBox .titleBox				{ gap: 1.25rem; margin-bottom: 1.875rem; }
#contactFaqSec .contactBox .titleBox .subtitle		{ font-size: 1rem; line-height: 1.25rem; }
#contactFaqSec .contactBox .titleBox .title 		{ font-size: 2rem; line-height: 2.3125rem; }
#contactFaqSec .contactBox .titleBox .title br		{ display: none; }
#contactFaqSec .faqBox								{ min-height: 28.125rem; padding: 1.875rem; }
#contactFaqSec .faqBox .titleBox 					{ gap: 1.25rem; margin-bottom: 1.875rem; }
#contactFaqSec .faqBox .titleBox .subtitle			{ font-size: 1rem; line-height: 1.25rem; }
#contactFaqSec .faqBox .titleBox .title 			{ font-size: 2rem; line-height: 2.3125rem; }
#contactFaqSec .faqBox .titleBox .title br			{ display: none; }
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-header .accordion-button { padding: 0.625rem 0; font-size: 1rem; line-height: 1.25rem; }
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body p { font-size: 0.9375rem; line-height: 1.25rem; }
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body ul > li { font-size: 0.9375rem; line-height: 1.25rem; }
}

@media only screen and (max-width: 767px) {
#contactFaqSec 										{ padding-top: 3.125rem; padding-bottom: 3.125rem; }
#contactFaqSec .rowBox 								{ flex-direction: column; gap: 1.25rem; }
#contactFaqSec .contactBox 							{ max-width: 100%; min-height: auto; padding: 1.25rem; }
#contactFaqSec .contactBox .titleBox				{ gap: 1.5625rem; margin-bottom: 1.875rem; }
#contactFaqSec .contactBox .titleBox .subtitle		{ font-size: 1rem; line-height: 1.25rem; }
#contactFaqSec .contactBox .titleBox .title			{ font-size: 2rem; line-height: 2.3125rem; }
#contactFaqSec .contactBox .titleBox .title br		{ display: none; }
#contactFaqSec .faqBox								{ max-width: 100%; min-height: auto; padding: 1.25rem; }
#contactFaqSec .faqBox .titleBox 					{ gap: 1.5625rem; margin-bottom: 1.875rem; }
#contactFaqSec .faqBox .titleBox .subtitle			{ font-size: 1rem; line-height: 1.25rem; }
#contactFaqSec .faqBox .titleBox .title				{ font-size: 2rem; line-height: 2.3125rem; }
#contactFaqSec .faqBox .titleBox .title br			{ display: none; }
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-header .accordion-button { padding: 0.625rem 0; font-size: 1rem; line-height: 1.25rem; }
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body p { font-size: 0.9375rem; line-height: 1.25rem; }
#contactFaqSec .faqBox .accordionBox .accordion-item .accordion-body ul > li { font-size: 0.9375rem; line-height: 1.25rem; }
}