/* ==========================================================================
   INTRODUCCION DE PAGINAS INTERIORES - Bloque #introductionSec
   ==========================================================================
   Modulo del bloque de introduccion (subtitulo + h1 + hasta 2 CTA) que abre
   el contenido de las plantillas 'default' y 'default-list'. Se carga
   condicionalmente desde
   xsl/themes/default/_common/introduction/introduction.xsl dentro del
   <xsl:if> que comprueba si la seccion tiene titulo o subtitulo, asi que si
   ambos campos estan vacios este CSS no se descarga. NO se registra en
   etc/theme-config.php (carga deliberada desde la propia plantilla XSL).

   Reglas base trasladadas literalmente desde fenix-sevilla-hotel.css
   (lineas 2746-2810) y los overrides responsive desde skeleton.css
   (lineas 191-194, 339-342, 501-504). Movimiento 1:1, sin cambiar valores
   ni orden. Solo TRES de los siete breakpoints de la maqueta traen reglas
   de #introductionSec: 961-1365, 768-960 y max-767.

   Descartada la regla "#introductionSec .contentBox p { color: #ffffff; }"
   (y su companera ".contentBox p:last-child"): es residuo de otra seccion
   (blanco sobre fondo claro) y las maquetas de las que nacio este modulo no
   usaban ningun <p> aqui.

   ESO CAMBIO el 3-ago: la ficha de habitacion (diseno Figma "Room - v5",
   nodo 855:3348) SI lleva un parrafo bajo el claim, asi que el template lo
   emite ahora dentro de un <div class="description"> y este modulo lo estila
   mas abajo, en #312F2D sobre fondo claro. El parrafo sigue teniendo guarda
   propia en el XSL: las plantillas cuyas secciones no traen 'description' no
   pintan nada, asi que el resto de paginas no cambian.
   ========================================================================== */

#introductionSec {
	padding-top: 5rem;
	padding-bottom: 5rem;
	overflow: hidden;
}
#introductionSec .contentBox {
	max-width: 72.5rem;
	margin: 0 auto;
}
#introductionSec .contentBox .subtitle {
	display: block;
	margin: 0 0 2rem 0;
	font-size: 1.125rem;
	color: #800033;
	font-weight: 600;
	line-height: 1.4375rem;
	letter-spacing: 0.09375rem;
	text-transform: uppercase;
	text-align: center;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#introductionSec .contentBox .title {
	margin: 0;
	font-size: 2.3125rem;
	color: #191F17;
	font-weight: 400;
	line-height: 2.625rem;
	letter-spacing: -0.09375rem;
	text-align: center;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
/* Realce del fragmento que el editor marca con <strong> en el titulo.
   WCAG 1.4.3: NO se usa el dorado #F4C670 de la maqueta. Ese dorado viene del
   mismo patron de #welcomeSec en la home, donde SI cumple porque alli el bloque
   tiene fondo granate oscuro (#4D001F -> #800033). Este bloque hereda el blanco
   del body, y sobre blanco el dorado da 1,6:1 -- por debajo tanto del 3:1 de
   texto grande (aqui el h1 mide 37px) como del 4,5:1 general. Medido en vivo,
   no deducido del CSS.
   Se usa el granate corporativo, que da 10,7:1 sobre blanco y mantiene el
   realce. No es un color inventado para tapar el problema: es el mismo #800033
   que ya usa el fondo de #experiencesSec (.maroon) y el subtitulo de
   #destinationSec. Cambio autorizado expresamente por el usuario (jul 2026),
   como exige el procedimiento WCAG del proyecto para los casos de contraste. */
#introductionSec .contentBox .title strong {
	color: #800033;
	font-weight: 400;
}
/* Parrafo bajo el claim. Solo lo traen algunas plantillas (la ficha de
   habitacion, diseno v5); en las demas la guarda del XSL no lo emite. */
/* 64px de separacion con el titular, que es el gap del contenedor en el diseno
   (Figma "Room - v5", nodo 855:3348). No es un margen "a ojo": OJO al medirlo,
   porque el .title lleva text-box-trim y su caja queda recortada a la altura de
   mayusculas -37px de fuente en una caja de 26px-, asi que los glifos desbordan
   ~8px por abajo. Con menos de ~40px aqui, el descendente del titular pisa la
   primera linea del parrafo. Figma mide entre cajas recortadas igual que el
   navegador, asi que los 64px son directamente los del diseno. */
#introductionSec .contentBox .description {
	max-width: 53.9375rem;
	margin: 4rem auto 0 auto;
}
#introductionSec .contentBox .description p {
	margin: 0 0 1rem 0;
	font-size: 1.125rem;
	line-height: 1.5rem;
	color: #312F2D;
	text-align: center;
}
#introductionSec .contentBox .description p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   MODO DOCUMENTO: texto largo alineado a la izquierda
   --------------------------------------------------------------------------
   .description da servicio a DOS tipos de contenido muy distintos:

     a) Intro corto (habitaciones, servicios, home): 1-2 parrafos, <=571
        caracteres. Va CENTRADO bajo el claim, y asi lo pide el diseno (Figma
        "Room - v5"): es la regla .description p de aqui arriba.
     b) Documento legal (las 5 paginas de politicas): 14-72 parrafos, entre
        2.682 y 29.429 caracteres, con titulos, listas y tablas.

   Centrar (b) lo hace ilegible, y ademas quedaba INCOHERENTE: los <p> salian
   centrados y los <h3>/<table>/<ul> a la izquierda, porque esas etiquetas
   nunca heredaron el center. Aqui se resuelve alineando TODO a la izquierda
   cuando el contenido es un documento.

   POR QUE SE DETECTA POR CONTENIDO Y NO POR UN FLAG EN EL CMS: un flag
   (campo 'custom', una clase en el XSL...) hay que acordarse de ponerlo, y el
   dia que alguien cree una pagina legal nueva y lo olvide, saldra centrada y
   mal - exactamente el fallo que esta regla viene a corregir. Mirando el
   contenido no hay nada que recordar.

   EL DISPARADOR ':has(p + p + p)' NO ES OPCIONAL, es el que salva Terminos y
   condiciones: esa pagina NO tiene ni una tabla, ni un titulo, ni una lista
   -son 14 parrafos pelados-, asi que sin el se quedaria centrada mientras sus
   hermanas legales van a la izquierda. Tres parrafos seguidos ya son un
   documento; el resto de secciones del proyecto no pasa de dos.

   Se deja <ul> FUERA del disparador a proposito: hay bloques cortos (amenities
   de habitacion, alguna landing) que son solo una lista y deben seguir con el
   tratamiento de intro.

   Si un navegador no soporta :has() se queda en el centrado de antes: se ve
   peor, pero nada se rompe ni desaparece.
   -------------------------------------------------------------------------- */
#introductionSec .contentBox .description:is(:has(table), :has(h2), :has(h3), :has(h4), :has(p + p + p)) {
	text-align: left;
}
#introductionSec .contentBox .description:is(:has(table), :has(h2), :has(h3), :has(h4), :has(p + p + p)) p {
	text-align: left;
}

/* --------------------------------------------------------------------------
   CONTENIDO RICO DEL CMS DENTRO DE .description
   --------------------------------------------------------------------------
   El campo 'descripcion' del CMS no siempre trae solo <p>. Desde que las
   paginas legales replican los textos de vibrahotels.com (ago-2026) llegan
   ademas <h3>, <ul> y <table>, que hasta entonces no existian en este bloque
   y por tanto no tenian ni una regla. Sin ellas heredaban el Reboot de
   Bootstrap, que pone border-width:0 en las celdas: las tablas salian sin
   bordes NI padding y las cabeceras se pegaban unas a otras, ilegibles
   ("NOMBRENOMBRE DEL PROVEEDORPERIODO DE RETENCION").

   No es un modulo aparte porque estas etiquetas pueden aparecer en CUALQUIER
   seccion con 'descripcion', no solo en las legales: el sitio natural es el
   modulo que ya estila .description. Son ~40 lineas y este CSS solo se
   descarga si la seccion tiene titulo o subtitulo (ver cabecera).

   Los <p> siguen centrados (regla de arriba, del diseno original). Titulos,
   listas y tablas van alineados a la izquierda: son contenido estructurado y
   centrarlos los haria ilegibles.
   -------------------------------------------------------------------------- */
#introductionSec .contentBox .description h2,
#introductionSec .contentBox .description h3,
#introductionSec .contentBox .description h4 {
	margin: 2.5rem 0 1rem 0;
	font-size: 1.375rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: #312F2D;
	text-align: left;
}
#introductionSec .contentBox .description ul,
#introductionSec .contentBox .description ol {
	margin: 0 0 1rem 0;
	padding-left: 1.25rem;
	text-align: left;
}
#introductionSec .contentBox .description li {
	margin-bottom: 0.5rem;
	font-size: 1.125rem;
	line-height: 1.5rem;
	color: #312F2D;
}

/* LA TABLA ES SU PROPIO CONTENEDOR DE SCROLL. Con display:block el <table>
   deja de ser caja de tabla y pasa a ser un bloque con overflow propio; sus
   <tr>/<td> generan dentro una caja de tabla anonima que SIGUE alineando las
   columnas. Asi, cuando el ancho minimo del contenido no cabe, la tabla
   scrollea en horizontal en vez de recortarse.

   Sin esto se perdia contenido de forma invisible: #introductionSec tiene
   overflow:hidden (arriba) y la pagina no scrollea en horizontal, asi que en
   movil la tabla de 7 columnas de la politica de privacidad se cortaba 94px y
   la ultima columna -SEVILLA, justo la que nombra al Hotel Fenix by Vibra- no
   se veia ni se podia alcanzar de ninguna manera.

   NO se fuerza min-width en las celdas a proposito: asi la tabla solo scrollea
   donde de verdad no cabe. En escritorio sigue entrando entera y no aparece
   ninguna barra nueva.

   Los navegadores actuales hacen focusables los contenedores con scroll, asi
   que se puede desplazar con teclado sin necesidad de tabindex. */
#introductionSec .contentBox .description table {
	display: block;
	max-width: 100%;
	margin: 0 0 1.5rem 0;
	overflow-x: auto;
}
#introductionSec .contentBox .description th,
#introductionSec .contentBox .description td {
	padding: 0.5rem 0.75rem;
	border: 1px solid #CFCFD2;
	font-size: 1rem;
	line-height: 1.375rem;
	color: #312F2D;
	text-align: left;
	vertical-align: top;
}

#introductionSec .contentBox .buttonBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	width: fit-content;
	margin: 0 auto;
	margin-top: 4rem;
}
#introductionSec .contentBox .button {
	margin: 0 auto;
}

@media only screen and (min-width: 961px) and (max-width: 1365px) {

#introductionSec 									{ padding-top: 4.375rem; padding-bottom: 4.375rem; }
#introductionSec .contentBox .subtitle 				{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#introductionSec .contentBox .title 				{ font-size: 2rem; line-height: 2.3125rem; }
#introductionSec .contentBox .buttonBox 			{ gap: 2.5rem; margin-top: 3.125rem; }

}

@media only screen and (min-width: 768px) and (max-width: 960px) {

#introductionSec 									{ padding-top: 4.375rem; padding-bottom: 4.375rem; }
#introductionSec .contentBox .subtitle 				{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#introductionSec .contentBox .title 				{ font-size: 1.6875rem; line-height: 2rem; }
#introductionSec .contentBox .buttonBox 			{ gap: 1.875rem; margin-top: 1.875rem; }

}

@media only screen and (max-width: 767px) {

#introductionSec 									{ padding-top: 3.125rem; padding-bottom: 3.125rem; }
#introductionSec .contentBox .subtitle 				{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#introductionSec .contentBox .title 				{ font-size: 1.6875rem; line-height: 2rem; }
#introductionSec .contentBox .description 			{ margin-top: 1.5rem; }
#introductionSec .contentBox .description p 		{ font-size: 1rem; }
/* Mismo escalado que los <p> para el contenido rico del CMS: en movil el cuerpo
   baja a 1rem y listas y celdas lo acompanan. OJO con los rem en este proyecto:
   html va a font-size:75% (fenix-sevilla-hotel.css:38) y es FIJO en los tres
   breakpoints, asi que 1rem = 12px. Las celdas se quedan en 1rem y NO se
   encogen por debajo del cuerpo de texto: como la tabla ya scrollea cuando no
   cabe, apretar la tipografia solo restaria legibilidad sin ganar nada. Lo que
   si se reduce es el padding, que no afecta a la lectura. */
#introductionSec .contentBox .description h2,
#introductionSec .contentBox .description h3,
#introductionSec .contentBox .description h4 		{ margin-top: 2rem; font-size: 1.25rem; line-height: 1.625rem; }
#introductionSec .contentBox .description li 		{ font-size: 1rem; }
#introductionSec .contentBox .description th,
#introductionSec .contentBox .description td 		{ padding: 0.375rem 0.5rem; }
#introductionSec .contentBox .buttonBox 			{ gap: 1.875rem; margin-top: 1.875rem; }

}