@charset "utf-8";
/*
BLOQUE DE VENTAJAS DE LA HOME (#benefitsSec)
Extraido de fenix-sevilla-hotel.css y skeleton.css al dinamizar el bloque
(bloque 8). Se carga con un dentro del de benefits-home.xsl
y NO se registra en etc/theme-config.php: si el editor no crea la seccion
'custom-benefits' con items en el CMS, no hay descarga.
Movimiento LITERAL de los valores de la maqueta, con UNA correccion
estructural (2 reglas nuevas, marcadas con su comentario mas abajo):
ALTURA IGUALADA DE LAS TARJETAS. Swiper pone height:100% a .swiper-slide;
al no tener el .swiper-wrapper altura definida, ese 100% resuelve al
contenido de cada slide, y como el slide SI tiene altura explicita el
align-items:stretch del flex no se le aplica. Resultado: cada tarjeta mide
lo que mide su texto. En la maqueta no se veia porque sus 5 textos (lorem)
envolvian con el mismo numero de lineas; con el texto en el CMS, cualquier
edicion del cliente descuadra los bordes inferiores. Medido a 1366px antes
de corregir: [314, 314, 314, 342, 290] (el titulo del item 4 pasa a 2
lineas y el parrafo del 5 se queda en 3). Con las 2 reglas: [342 x5] a
1366, [290 x5] a 1920 y [231 x5] en movil.
Es la practica documentada del proyecto para este caso exacto (regla de
css-styles.md, "Simetria entre bloques en grid/listados": secciones de
valores/beneficios -> igualar altura con flexbox stretch), y el mismo
criterio que el aspect-ratio del bloque 7: donde el contenido estatico
escondia una dependencia de la longitud del texto, se vuelve determinista.
NO se han movido las reglas de clases compartidas con los demas carruseles
(.swiperNav, .swiper-button-*, .arrowClone, .wow, .row, .g-0, .container):
siguen en swiper-bundle-controls.css y fenix-sevilla-hotel.css. Aqui solo
estan los 2 overrides de .swiperNav especificos de este bloque (fondo
blanco de la flecha y filter:none del icono).
OJO con .benefits-slider { opacity: 0 }: la caja solo se hace visible
cuando Swiper anade .swiper-initialized. Si benefits-home.js no llega a
ejecutarse, el bloque queda invisible (no es un fallback: es el
anti-parpadeo de la maqueta, y queremos que el fallo se vea en desarrollo).
*/
#benefitsSec {
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #1A1A1A;
overflow: hidden;
}
#benefitsSec .titleBox {
max-width: 53.9375rem;
margin: 0 auto;
margin-bottom: 4rem;
}
#benefitsSec .titleBox .subtitle {
display: block;
margin: 0 0 2rem 0;
font-size: 1.125rem;
color: #F4C670;
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;
}
#benefitsSec .titleBox .title {
display: block;
margin: 0 0 4rem 0;
font-size: 2.8125rem;
color: #ffffff;
font-weight: 400;
line-height: 3.25rem;
letter-spacing: -0.09375rem;
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#benefitsSec .titleBox p {
max-width: 25.9375rem;
margin: 0 auto;
font-size: 1.125rem;
color: #ffffff;
font-weight: 400;
line-height: 1.5rem;
text-align: center;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#benefitsSec .benefits-slider {
opacity: 0;
}
#benefitsSec .benefits-slider.swiper-initialized {
opacity: 1;
transition: opacity 1.2s ease;
}
/* Las 2 reglas de la correccion estructural (ver cabecera): sin el height:auto
el slide se dimensiona por su propio contenido y el stretch del flex no le
aplica, asi que las tarjetas quedan con alturas distintas segun el texto. */
#benefitsSec .benefits-slider .swiper-slide {
height: auto;
}
#benefitsSec .benefits-slider .item {
height: 100%;
display: flex;
flex-wrap: wrap;
padding: 1.5rem;
border: 1px solid rgba(97, 94, 90, 0.40);
border-radius: 0.25rem;
}
#benefitsSec .benefits-slider .item .topinfo {
display: flex;
justify-content: flex-end;
width: 100%;
padding-top: 0.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid #F4C670;
}
#benefitsSec .benefits-slider .item .topinfo .number {
font-size: 6rem;
color: #ffffff;
font-weight: 400;
line-height: normal;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#benefitsSec .benefits-slider .item .info {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
padding-top:2rem;
}
/* FASE 01 WCAG (1.3.1): el titulo de cada beneficio era
y paso a
al
subir el titulo de la seccion de h3 a
(ver benefits-home.xsl). El selector
es TAG-cualificado, asi que se renombra aqui y en los 3 breakpoints de abajo:
mismos font-size/margin -> render identico ([T3]/E-08). */
#benefitsSec .benefits-slider .item .info h3 {
margin: 0;
font-size: 1.375rem;
color: #ffffff;
font-weight: 700;
line-height: 1.75rem;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#benefitsSec .benefits-slider .item .info p {
margin: 0;
font-size: 1.125rem;
color: #ffffff;
font-weight: 400;
line-height: 1.5rem;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#benefitsSec .benefits-slider .item .info p strong {
font-weight: 600;
}
#benefitsSec .benefits-slider .swiperNav {
margin-top: 1.5rem;
}
/* 2.5rem = 30px con la palanca de escala al 75%, y se declara en rem -no en los
30px pelados- para que acompane a la palanca: si manana la escala sube al 80%,
la flecha sube con ella sin tocar este archivo.
Aqui NO hay banda de padding que ajustar, al contrario que en los wrappers de
miniaturas: este .swiperNav vive DENTRO del .swiper, debajo de las tarjetas y
en flujo normal, separado por el margin-top de la regla de arriba (1.5rem, los
24px de maqueta). Lo unico que estaba fuera de escala era el diametro, que se
habia quedado en los 48px de Swiper -terceros, se dejan grandes hasta la
fase 2- junto a tarjetas de 230px de ancho.
Scopeado a este bloque: la regla base de swiper-bundle-controls.css se queda
en sus 48px para el resto del sitio. min-width ademas del width porque esa
base declara min-width: 48px y si no gana ella. */
#benefitsSec .benefits-slider .swiperNav [class*=swiper-button-] span {
min-width: 2.5rem;
width: 2.5rem;
height: 2.5rem;
background: #ffffff;
}
#benefitsSec .benefits-slider .swiperNav [class*=swiper-button-] span img {
filter: none;
}
/* #iPad Pro - Large Screens beyond 1024px
================================================== */
@media only screen and (min-width: 961px) and (max-width: 1365px) {
#benefitsSec { padding-top: 4.375rem; padding-bottom: 4.375rem; }
#benefitsSec .titleBox { margin-bottom: 3.125rem; }
#benefitsSec .titleBox .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#benefitsSec .titleBox .title { margin: 0 0 3.125rem 0; font-size: 2.5rem; line-height: 2.8125rem; }
#benefitsSec .titleBox p { font-size: 1.125rem; line-height: 1.5rem; }
#benefitsSec .benefits-slider .item { padding: 1.25rem; }
#benefitsSec .benefits-slider .item .topinfo .number { font-size: 5rem; }
#benefitsSec .benefits-slider .item .info h3 { font-size: 1.375rem; line-height: 1.75rem; }
#benefitsSec .benefits-slider .item .info p { font-size: 1.125rem; line-height: 1.5rem; }
}
/* #Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 960px) {
#benefitsSec { padding-top: 4.375rem; padding-bottom: 4.375rem; }
#benefitsSec .titleBox { margin-bottom: 1.875rem; }
#benefitsSec .titleBox .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#benefitsSec .titleBox .title { margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#benefitsSec .titleBox p { font-size: 1rem; line-height: 1.375rem; }
#benefitsSec .benefits-slider .item { padding: 1.25rem; }
#benefitsSec .benefits-slider .item .topinfo .number { font-size: 4rem; }
#benefitsSec .benefits-slider .item .info h3 { font-size: 1.25rem; line-height: 1.5625rem; }
#benefitsSec .benefits-slider .item .info p { font-size: 1rem; line-height: 1.375rem; }
}
/* #Mobile (Portrait)
================================================== */
@media only screen and (max-width: 767px) {
#benefitsSec { padding-top: 3.125rem; padding-bottom: 3.125rem; }
#benefitsSec .titleBox { margin-bottom: 1.875rem; }
#benefitsSec .titleBox .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#benefitsSec .titleBox .title { margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#benefitsSec .titleBox p { font-size: 1rem; line-height: 1.375rem; }
#benefitsSec .benefits-slider .item { padding: 1.25rem; }
#benefitsSec .benefits-slider .item .topinfo .number { font-size: 4rem; }
#benefitsSec .benefits-slider .item .info h3 { font-size: 1.25rem; line-height: 1.5625rem; }
#benefitsSec .benefits-slider .item .info p { font-size: 1rem; line-height: 1.375rem; }
}