/* ==========================================================================
   EXPERIENCES HOME - Bloque de experiencias de la home
   ==========================================================================
   Modulo del bloque de experiencias a pantalla completa con menu de pestanas
   lateral. Se carga condicionalmente desde
   xsl/themes/default/_common/experiences/experiences-home.xsl dentro del
   <xsl:if> que comprueba si el bloque "custom-experiences" tiene items en el
   CMS, asi que si el editor no crea esas secciones 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 1132-1299, incluidas las 9 de la variante .maroon) y los overrides
   responsive desde skeleton.css (lineas 47, 71-74, 114-119, 212-218,
   319-326). Movimiento 1:1, sin cambiar valores ni orden.

   La variante .maroon SI esta en uso: xsl/themes/default/_common/experiences/
   experiences-list.xsl:58 la aplica siempre (clase fija en el contenedor, no
   condicional al CMS) para pintar el granate de fondo del bloque de
   experiencias en las paginas interiores (plantillas default y
   default-list, ej. /rooftop y /descubre-sevilla). Es la variante visual
   del bloque en interiores frente al fondo blanco de la home
   (experiences-home.xsl, sin esa clase). En uso desde la integracion de
   las landings interiores default/default-list (jul 2026). NO es codigo
   muerto: no borrar estas reglas.

   Unica regla que NO viene de la maqueta: el margen superior del .btnBox
   cuando hay parrafos (ver comentario en su sitio). Su alcance por
   breakpoint (por que solo aplica en desktop, 961px en adelante, y se
   neutraliza en 768-960 y max-767) tambien se razona en ese comentario.

   Nota (fix ronda 1, revision jul 2026): el margin-top: 40px de la regla
   BASE de .btnBox (sin parrafo) si viene de la maqueta -aparece en el diff
   real de fenix-sevilla-hotel.css- pero no estaba listado en las tablas del
   brief original (Step 2/3); se aplico igualmente porque el Step 7 del
   brief exige reconciliar cada linea del diff fuente. Confirmado legitimo
   en la revision de esta tarea.
   ========================================================================== */

#experiencesSec {
	padding-top: 0;
	padding-bottom: 0;
	background-color: #ffffff;
}
#experiencesSec .experiencesBox {
	position: relative;
	display: flex;
	flex-direction: column;
}
#experiencesSec .experiencesBox .itemsMenu {
	max-width: 13.75rem;
	position: absolute;
	top: 50vh;
	right: 4.75rem;
	transform: translateY(-50%);
	z-index: 1;
}
#experiencesSec .experiencesBox .itemsMenu ul {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
#experiencesSec .experiencesBox .itemsMenu ul > li {
	font-size: 1.375rem;
	color: #666666;
	font-weight: 400;
	line-height: 1.6875rem;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#experiencesSec .experiencesBox .itemsMenu ul > li > a {
	position: relative;
	display: block;
	padding: 0 0 0 2.5rem;
	color: #666666;
}
/* SIN font-weight: el activo NO cambia de peso a proposito, aunque la maqueta
   lo traia en SemiBold. El indice solo tiene 180px utiles de texto (220 de
   max-width menos los 40 del padding del guion) y la SemiBold es ~4,5% mas
   ancha que la Regular: "Sevilla caminando" mide 178,5px en 400 y 186,7px en
   600, asi que al activarse partia en dos lineas. Y como .itemsMenu se centra
   con top:50vh + translateY(-50%), esa linea de mas RECENTRA el indice entero
   -medido: 293 -> 320px de alto y los 6 items saltando 13-14px- o sea que el
   bloque temblaba al hacer scroll, no era solo un salto de linea feo.
   Dejarlo en 400 lo arregla de raiz, sea cual sea la etiqueta que meta el
   editor. El estado activo sigue marcado por el color y por el guion del
   :before, que ademas es indicador NO cromatico (WCAG 1.4.1), mas el
   aria-current que emite experiences.js.
   Solo se veia de 1501px en adelante: a 1366-1500 la fuente baja a 18px y
   todo entra en una linea, y por debajo de 1366 el indice esta oculto. */
#experiencesSec .experiencesBox .itemsMenu ul > li > a.active {
	color: #1A1A1A;
	text-decoration: none;
   font-weight: 600;
}
#experiencesSec .experiencesBox .itemsMenu ul > li > a:before {
	content: "";
	width: 2rem;
	height: 0.0625rem;
	background-color: #1A1A1A;
	position: absolute;
	top: 0.8125rem;
	left: 0;
	opacity: 0;
}
#experiencesSec .experiencesBox .itemsMenu ul > li > a.active:before {
	opacity: 1;
}
#experiencesSec .experiencesBox .items {
	display: flex;
	height: 100dvh;
	background-color: #ffffff;
	position: sticky;
	top: 0;
}
#experiencesSec .experiencesBox .items picture {
	display: flex;
	width: 100%;
	max-width: 50%;
}
#experiencesSec .experiencesBox .items picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* RESERVA DEL HUECO DEL INDICE (padding derecho) Y DEL CROMO FIJO (paddings
   verticales). Mismo patron que #roomsSec en rooms-home.css:57 y #roomsMainSec
   en rooms-list.css, adaptado a la geometria de este bloque.

   HORIZONTAL -- .itemsMenu es position:absolute anclado al borde DERECHO
   (right:76px, max-width:220px), asi que NO se mueve al estrechar la ventana;
   el texto, en cambio, vive en el 50% derecho del panel y avanza hacia el.
   La reserva es por tanto una CONSTANTE, no una funcion de
   --container-padding: ese valor mide un contenedor CENTRADO y no describe un
   elemento anclado al borde. Sumarlo -como hacia este archivo- se olvidaba de
   los 76px del offset y de los 32px de aire. Medido en vivo antes del fix:
   94px de SOLAPE a 1601px de ancho, 0px de hueco a 1774px, 2px a 1536px
   (el portatil tipico) y 19px de solape a 1366px.

   328 = 76 right + 220 ancho del indice + 32 de aire

   Por encima de 1838px gana --container-padding porque .inner ya esta topado
   en 463px, asi que el escritorio grande queda EXACTAMENTE igual que antes.
   Cada tramo repite el calculo con su propia geometria del indice.

   VERTICAL -- el panel mide 100dvh y es sticky en top:0, pero el #header
   (position:fixed) le tapa la franja de arriba y la mascara de reservas
   (tambien fixed) la de abajo, asi que de la caja del panel solo se VE la
   banda central. Al centrar el contenido en la caja completa, el sobrante
   desbordaba por los DOS lados: medido a 1366x660, el <h2> quedaba entero
   debajo del header y el ultimo parrafo debajo de la mascara. Reservando el
   cromo, el contenido queda centrado en la banda que el usuario ve de verdad.

   124 = alto del #header fijo en este tramo (gana sobre los 80px del diseno)
    99 = 79 de la mascara de reservas + 20 de separacion al borde inferior */
#experiencesSec .experiencesBox .items .info {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 50%;
	padding: 7.75rem max(var(--container-padding), 20.5rem) 6.1875rem 8rem;
}
/* Cuando el contenido NO cabe en la banda visible, los margenes auto se
   resuelven a 0 y el bloque se apoya ARRIBA en vez de desbordar por los dos
   lados a la vez (align-items:center reparte el espacio negativo en ambos
   sentidos). Asi el titular nunca puede quedar debajo del header: lo que se
   sacrifica primero es siempre el final del texto, no el encabezado.
   Se prefiere esto a 'overflow-y:auto' en el panel porque Chromium hace
   focusable de oficio cualquier contenedor con scroll real, y apareceria como
   parada de tabulacion sin nombre accesible (mismo motivo documentado en
   _common/more-info/more-info-dialog.xsl). */
#experiencesSec .experiencesBox .items .info .inner {
	width: 100%;
	max-width: 28.9375rem;
	margin-block: auto;
	opacity: 1;
	transition: opacity 1.2s ease;
}
#experiencesSec .experiencesBox .items.active .info .inner {
	opacity: 1;
}
#experiencesSec .experiencesBox .items .info .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-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#experiencesSec .experiencesBox .items .info .title {
	display: block;
	margin: 0 0 4rem 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;
}
#experiencesSec .experiencesBox .items .info .title:last-child {
	margin-bottom: 0;
}
#experiencesSec .experiencesBox .items .info .title br {
	display: block;
}
#experiencesSec .experiencesBox .items .info p {
	margin: 0 0 1.5rem 0;
	font-size: 1.125rem;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 1.5rem;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
/* WD-14744 - LISTAS QUE LLEGAN DEL CMS
   El bloque se diseno para descripciones en <p> y por eso solo habia estilos de
   parrafo. La landing de Eventos trae su contenido como <ul> (el cliente pidio
   "Nuestras salas" en dos vinetas), y sin estas reglas los <li> heredaban el color
   por defecto: #1A1A1A sobre el granate #800033 de la variante .maroon, 1,8:1 de
   contraste, muy por debajo del 4,5:1 que exige WCAG 1.4.3. Ademas salian SIN
   vineta, porque el reset del proyecto pone list-style:none.

   Medidas COPIADAS de room-amenities.css, que es el patron canonico del proyecto
   para listas del CMS: misma vineta con li::before, mismo 0.75rem de separacion
   entre items, mismo 1rem de sangria y el mismo par 1.125rem/1.5rem que ya usa el
   <p> de al lado. Asi la lista y los parrafos se ven del mismo tamano.

   Unica desviacion respecto a room-amenities: el circulo va con currentColor en vez
   de un #1A1A1A fijo, para que siga al color del texto y la variante .maroon no
   necesite una regla propia solo para la vineta.

   La sangria se pone en el <li> y el <ul> se deja a 0: asi la vineta absoluta se
   ancla al borde del texto y la lista queda alineada con los parrafos. */
#experiencesSec .experiencesBox .items .info ul {
	margin: 0 0 1.5rem 0;
	padding-left: 0;
	list-style: none;
}
#experiencesSec .experiencesBox .items .info ul:last-child {
	margin-bottom: 0;
}
#experiencesSec .experiencesBox .items .info li {
	position: relative;
	margin: 0 0 0.75rem 0;
	padding-left: 1rem;
	font-size: 1.125rem;
	color: #1A1A1A;
	font-weight: 400;
	line-height: 1.5rem;
}
#experiencesSec .experiencesBox .items .info li:last-child {
	margin-bottom: 0;
}
#experiencesSec .experiencesBox .items .info li strong {
	font-weight: 600;
}
#experiencesSec .experiencesBox .items .info li::before {
	content: "";
	position: absolute;
	top: 0.5625rem;
	left: 0;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background-color: currentColor;
}
#experiencesSec .experiencesBox .items .info p:last-child {
	margin-bottom: 0;
}
#experiencesSec .experiencesBox .items .info p strong {
	font-weight: 600;
}
#experiencesSec .experiencesBox .items .info .btnBox {
	display: flex;
	justify-content: flex-start;
	gap: 0.9375rem;
	margin-top: 2.5rem;
}
/* Aire sobre el CTA solo cuando el editor ha rellenado el contenido: en la
   maqueta el boton iba justo detras del titulo, que ya aportaba su margen.
   Hermano general (~) y no adyacente (+): puede haber varios <p> delante.
   Alcance: SOLO desktop (961px en adelante, incluida esta regla base sin
   media query, que cubre tambien >=1601px). Por debajo de 961px el diseno
   ya usa un ritmo mas compacto y el propio .btnBox de la maqueta baja a
   30px (768-960 y max-767): ese valor de la maqueta debe ganar tambien
   cuando hay parrafo, asi que 768-960 y max-767 repiten este mismo
   selector fijando 30px justo despues de su ".info .btnBox" (ver esos
   bloques mas abajo). Sin ese override, la mayor especificidad de esta
   regla (incluye el elemento p) gana siempre y el 30px del breakpoint
   nunca se aplicaria cuando hay parrafo - bug real detectado en revision,
   jul 2026, confirmado en vivo a 900px (computaba 48px en vez de 30px). */
#experiencesSec .experiencesBox .items .info p ~ .btnBox {
	margin-top: 3rem;
}
#experiencesSec .experiencesBox .items .info .btnBox .button {
	margin: 0;
}
#experiencesSec.maroon {
	background-color: #800033;
}
#experiencesSec.maroon .experiencesBox .itemsMenu ul > li {
	color: #ffffff;
}
#experiencesSec.maroon .experiencesBox .itemsMenu ul > li > a {
	color: #ffffff;
}
#experiencesSec.maroon .experiencesBox .itemsMenu ul > li > a.active {
	color: #F4C670;
   font-weight: 600;
}
#experiencesSec.maroon .experiencesBox .itemsMenu ul > li > a:before {
	background-color: #F4C670;
}
#experiencesSec.maroon .experiencesBox .items {
	background-color: #800033;
}
#experiencesSec.maroon .experiencesBox .items .info .subtitle {
	color: #F4C670;
}
#experiencesSec.maroon .experiencesBox .items .info .title {
	color: #ffffff;
}
#experiencesSec.maroon .experiencesBox .items .info p {
	color: #ffffff;
}
/* WD-14744: los <li> del CMS, igual que los parrafos. La vineta no necesita regla
   propia: usa currentColor y hereda este blanco. */
#experiencesSec.maroon .experiencesBox .items .info li {
	color: #ffffff;
}



/* #Additional - Large Screens beyond 1600px
================================================== */
@media only screen and (min-width: 1501px) and (max-width: 1600px) {

/* Misma geometria de indice que el tramo base (right:76px, 220px de ancho), asi
   que la reserva vuelve a ser 328 = 76 + 220 + 32. Aqui es donde mas se notaba
   el calculo viejo: a 1536px de ancho -el portatil tipico- dejaba 2px de hueco. */
#experiencesSec .experiencesBox .items .info 		{ padding: 7.75rem max(var(--container-padding), 20.5rem) 6.1875rem 4.375rem; }
#experiencesSec .experiencesBox .items .info .inner { max-width: 25rem; }
#experiencesSec .experiencesBox .items .info .title { font-size: 2.5rem; line-height: 2.8125rem; }

}



/* #Additional - Large Screens beyond 1366px
================================================== */
@media only screen and (min-width: 1366px) and (max-width: 1500px) {

#experiencesSec .experiencesBox .itemsMenu 			{ right: 2rem; }
#experiencesSec .experiencesBox .itemsMenu ul > li 	{ font-size: 1.125rem; line-height: 1.4375rem; }
#experiencesSec .experiencesBox .itemsMenu ul > li > a { padding: 0 0 0 1.875rem; }
#experiencesSec .experiencesBox .itemsMenu ul > li > a:before { width: 1.375rem; top: 0.625rem; }
/* Este tramo acerca el indice al borde (right:32px) pero NO cambia su ancho, que
   sigue topado en 220px por la regla base -las etiquetas largas de la landing lo
   llevan al maximo-.
   284 = 32 right + 220 ancho del indice + 32 de aire */
#experiencesSec .experiencesBox .items .info 		{ padding: 7.75rem max(var(--container-padding), 17.75rem) 6.1875rem 3.125rem; }
#experiencesSec .experiencesBox .items .info .inner { max-width: 25rem; }
#experiencesSec .experiencesBox .items .info .title { font-size: 2.5rem; line-height: 2.8125rem; }

}



/* #iPad Pro - Large Screens beyond 1024px
================================================== */
@media only screen and (min-width: 961px) and (max-width: 1365px) {

#experiencesSec .experiencesBox .itemsMenu 			{ display: none; }
#experiencesSec .experiencesBox .items picture 		{ max-width: 50%; }
/* El indice esta oculto en este tramo, asi que no hay hueco horizontal que
   reservar y los laterales se quedan en los 32px del diseno. Solo cambia el
   cromo vertical: 104 de header y 117 = 79 de mascara + 38 de separacion
   (la mascara despega mas del borde por debajo de 1366px). */
#experiencesSec .experiencesBox .items .info 		{ max-width: 50%; padding: 6.5rem 2rem 7.3125rem 2rem; }
#experiencesSec .experiencesBox .items .info .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#experiencesSec .experiencesBox .items .info .title { margin: 0 0 3.125rem 0; font-size: 2.5rem; line-height: 2.8125rem; }
#experiencesSec .experiencesBox .items .info p 		{ font-size: 1.125rem; line-height: 1.5rem; }
#experiencesSec .experiencesBox .items .info li 		{ font-size: 1.125rem; line-height: 1.5rem; }
#experiencesSec .experiencesBox .items .info li::before 	{ top: 0.5625rem; }

}



/* #Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 960px) {

#experiencesSec .experiencesBox .itemsMenu 			{ display: none; }
#experiencesSec .experiencesBox .items picture 		{ max-width: 50%; }
/* Indice oculto: solo cromo vertical (104 de header, 99 de mascara + separacion) */
#experiencesSec .experiencesBox .items .info 		{ max-width: 50%; padding: 6.5rem 1.25rem 6.1875rem 1.25rem; }
#experiencesSec .experiencesBox .items .info .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#experiencesSec .experiencesBox .items .info .title { margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#experiencesSec .experiencesBox .items .info .title br { display: none; }
#experiencesSec .experiencesBox .items .info p 		{ font-size: 1rem; line-height: 1.375rem; }
#experiencesSec .experiencesBox .items .info li 		{ font-size: 1rem; line-height: 1.375rem; }
#experiencesSec .experiencesBox .items .info li::before 	{ top: 0.5rem; }
#experiencesSec .experiencesBox .items .info .btnBox { margin-top: 1.875rem; }
/* Mismo criterio que max-767 (ver comentario junto a la regla base de
   ".info p ~ .btnBox" mas arriba): a partir de aqui el diseno ya es
   compacto, asi que el aire extra por parrafo no aplica y debe ganar el
   30px de la maqueta tambien cuando hay <p>. Sin esta linea, la mayor
   especificidad de la regla base (48px) seguia ganando en este tramo. */
#experiencesSec .experiencesBox .items .info p ~ .btnBox { margin-top: 1.875rem; }

}



/* #Mobile (Portrait)
================================================== */
@media only screen and (max-width: 767px) {

#experiencesSec .experiencesBox .itemsMenu 			{ display: none; }
#experiencesSec .experiencesBox .items 				{ flex-direction: column; height: calc(100dvh - 3.5rem); }
/* EL SOBRANTE VERTICAL DEL PANEL SE LO QUEDA LA FOTO, NO EL TEXTO.
   El panel tiene alto fijo (100dvh - 56px) y antes se repartia con 'flex: 1' en
   los dos hijos: la foto se topaba en 350px y el texto se quedaba con TODO el
   resto, que sus margenes auto (.inner { margin-block: auto }) convertian en
   aire muerto arriba y abajo. Medido a 500x844: foto 347px, caja de texto 441px
   para un contenido de 280px -> 63px de hueco entre la foto y el subtitulo y
   97px bajo el CTA.
   Ahora el texto mide lo que ocupa su contenido ('flex: 0 1 auto') y la foto
   crece hasta llenar el resto (sin 'max-height'), asi que la separacion entre
   foto y subtitulo pasa a ser EXACTAMENTE el padding-top de 30px del diseno y
   la reserva inferior los 64px de la barra de reserva, sin aire de mas.
   Se conserva el shrink (0 1 auto, no 0 0 auto) y el min-height de la foto como
   red de seguridad para moviles muy bajos: si el texto no cabe, la foto cede
   hasta 170px antes de que el panel desborde. */
#experiencesSec .experiencesBox .items picture 		{ flex: 1 1 auto; max-width: 100%; min-height: 10.625rem; }
/* Aqui el panel es una columna (foto arriba, texto abajo), asi que el header
   fijo tapa la FOTO y no el texto: el padding superior se queda en los 30px del
   diseno. Abajo hay que reservar los 64px de la barra fija de reserva
   (.bookBtnBox), que si se come el final del texto, MAS 48px de margen de
   lectura para que el CTA no quede pegado a esa barra.
   112 = 64 de la barra fija + 48 de margen de lectura (48 es un valor de la
   escala de espaciados del proyecto: el aire sobre el CTA del bloque en
   escritorio, el gap de las tarjetas de otras habitaciones...).
   ESTE PADDING ES EL QUE LIMITA EL ALTO DE LA FOTO: la foto se queda con el
   sobrante del panel (ver el bloque de 'picture' justo arriba), asi que cada
   px reservado aqui es un px menos de foto. Recorrido del ajuste, medido a
   390x844 en la landing: sin margen la foto se comia 355-414px; con 30px de
   margen bajo a 325-384px; con estos 48px se queda en 307-366px segun el largo
   del texto (~42% del panel). El hueco entre foto y texto se mantiene en los
   30px del diseno en todos los casos.
   Si hay que seguir ajustando el peso visual de la foto, este numero es la
   unica palanca: el siguiente paso de la escala serian 64px de margen (128 en
   total), que dejaria la foto en 291-350px.
   En moviles BAJOS el margen de lectura se retira: ver el ultimo bloque del
   archivo (max-width:767px y max-height:740px). */
#experiencesSec .experiencesBox .items .info 		{ flex: 0 1 auto; max-width: 100%; padding: 1.875rem 1.25rem 7rem 1.25rem; }
#experiencesSec .experiencesBox .items .info .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#experiencesSec .experiencesBox .items .info .title { margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#experiencesSec .experiencesBox .items .info .title br { display: none; }
#experiencesSec .experiencesBox .items .info p 		{ font-size: 1rem; line-height: 1.375rem; }
#experiencesSec .experiencesBox .items .info li 		{ font-size: 1rem; line-height: 1.375rem; }
#experiencesSec .experiencesBox .items .info li::before 	{ top: 0.5rem; }
#experiencesSec .experiencesBox .items .info .btnBox { margin-top: 1.875rem; }
#experiencesSec .experiencesBox .items .info p ~ .btnBox { margin-top: 1.875rem; }

}



/* #Ritmo compacto en viewports BAJOS (portatiles)
==================================================
   Este es el unico bloque del archivo cuya condicion es la ALTURA, y es
   deliberado: el problema que resuelve nace de la altura, no del ancho. El
   panel mide 100dvh y el cromo fijo (header + mascara) se come ~223px, asi que
   en una pantalla de portatil la banda util baja a ~437px, mientras que el
   ritmo del diseno -titular de 45px con 64px de margen- esta pensado para
   pantallas altas. A eso se suma que reservar el hueco del indice estrecha la
   columna de texto y le anade lineas.

   Medido a 1366x660 con el reparto de textos ya aplicado, el item "Nuevo
   referente sevillano" se pasaba 34px de la banda: su titular ocupa CUATRO
   lineas a 45px de fuente. Con este ritmo baja a tres y el panel recupera
   56px de holgura, margen suficiente para que futuras ediciones de texto en el
   CMS no vuelvan a romperlo.

   Los valores NO son inventados: 2rem/2.3125rem es exactamente el tamano de
   titular que el diseno ya usa en 768-960 y en max-767, asi que el cambio se
   queda dentro de la escala tipografica del proyecto.

   Va AL FINAL del archivo a proposito: tiene la misma especificidad que las
   reglas de .title de los tramos por ancho (base, 1501-1600 y 1366-1500), asi
   que solo gana por orden de aparicion. Si se mueve mas arriba, deja de
   aplicarse.

   Desde 961px hacia abajo el diseno YA es compacto por si mismo (titular de
   2rem y margenes de 30px), de ahi el min-width. */
@media only screen and (min-width: 961px) and (max-height: 800px) {

#experiencesSec .experiencesBox .items .info .title { margin-bottom: 2.5rem; font-size: 2rem; line-height: 2.3125rem; }
/* 30px es el aire sobre el CTA que el diseno ya usa en 768-960 y en max-767, o
   sea el valor "compacto" del propio proyecto; aqui sustituye a los 48px del
   ritmo alto por el mismo motivo que el titular. */
#experiencesSec .experiencesBox .items .info p ~ .btnBox { margin-top: 1.875rem; }

}



/* Recuperar ancho de columna en el tramo mas justo
==================================================
   Solo 1366-1500 y solo en pantallas bajas: es el unico tramo donde coinciden
   la reserva del indice (284px, la mas agresiva en proporcion al panel) y una
   banda vertical corta. Bajar el aire izquierdo de 50px a 32px devuelve 18px de
   ancho a la columna de texto, y eso se traduce en 2-3 lineas menos por
   parrafo: es la palanca mas eficiente de todas las medidas.

   32px NO es un valor nuevo: es el aire izquierdo que el diseno ya usa en el
   tramo 961-1365, justo por debajo de este.

   Sin esta regla, el bloque de experiencias de la HOME (mismo CSS, textos mas
   largos que los de la landing) se pasaba 12px de la banda en su item de
   eventos; con ella le quedan 49px de holgura. */
@media only screen and (min-width: 1366px) and (max-width: 1500px) and (max-height: 800px) {

#experiencesSec .experiencesBox .items .info 		{ padding-left: 2rem; }

}



/* Movil BAJO: sin margen de lectura, el alto no da
==================================================
   Segundo bloque del archivo condicionado por la ALTURA, mismo criterio que el
   de arriba. En movil el panel mide 100dvh - 56px y la foto ya esta en su suelo
   de 170px, asi que el margen de lectura del padding-bottom (112px = 64 + 48) no
   sale de la foto: sale del panel. Medido a 360x640 en la landing de 4 items,
   cuando el margen era de 30px ya anadia exactamente esos 30px de desborde a
   cada item (26/0/4/41 -> 56/12/34/71), y con 48 seria peor todavia.
   Por debajo de 740px de alto se vuelve por tanto al 64px justo de la
   barra fija, que es el comportamiento anterior: en esas pantallas el problema
   no es el aire, es que no cabe el texto.
   740 = suelo de la foto (170) + cromo del panel (56 de la barra + 124 de
   paddings) + los ~390px que ocupa el texto mas largo del CMS, redondeado. Por
   encima de ese alto -844, 851, 932: los moviles actuales- el margen si cabe. */
@media only screen and (max-width: 767px) and (max-height: 740px) {

#experiencesSec .experiencesBox .items .info 		{ padding-bottom: 4rem; }

}


/* #Panel enterrado bajo la pila (WCAG 2.4.11)
==================================================
   La clase la pone y la quita experiences.js (syncPanelVisibility), que es quien
   sabe que panel manda; ahi esta el razonamiento completo. Aqui solo vive el
   estilo, para no escribir estilo en linea desde el JS.

   visibility:hidden y no display:none NI opacity:0, y los tres motivos importan:
     - display:none SACARIA EL PANEL DEL FLUJO. Los paneles miden un viewport
       cada uno y su suma es la altura del bloque: quitarlos del flujo encogeria
       el documento y el apilamiento entero se vendria abajo.
     - opacity:0 no saca del orden de tabulacion ni del arbol de accesibilidad,
       que es justo lo que hay que conseguir.
     - visibility:hidden no toca el layout -offsetHeight, getBoundingClientRect()
       y la altura del documento quedan intactos, verificado- y SI saca del Tab y
       del arbol.

   Es un no-op visual en esta maqueta: solo se aplica a paneles cubiertos al 100%
   por otro opaco del mismo tamano. Capturas antes/despues, identicas al pixel. */
#experiencesSec .experiencesBox .items.is-covered {
	visibility: hidden;
}