@charset "utf-8";
/*
BLOQUE DESTINO DE LA HOME (#destinationSec)
Extraido de fenix-sevilla-hotel.css y skeleton.css al dinamizar el bloque
(bloque 7). Se carga con un dentro del de
destination-home.xsl y NO se registra en etc/theme-config.php: si el editor
no crea la seccion 'custom-destination' en el CMS, no hay descarga.
DOS CORRECCIONES respecto al CSS de la maqueta (el resto es literal):
1) .image lleva aspect-ratio y .image .mosaic lleva width/height al 100%.
El contenedor del mosaico es un flex item con width:auto, asi que sin
esto su ancho seria el INTRINSECO de sus hijos: con la imagen unica de
la maqueta (940px) dejaba 340px de fondo amarillo a la vista a partir
de ~1880px de viewport, y la ALTURA del bloque pasaba a depender de la
proporcion del archivo que subiera el editor (medido: con un archivo
1,5072:1 la caja pasaba de 927 a 849px de alto). 940/681 = 1,3803:1 es
la proporcion del mosaico completo (la misma que la del PNG de la
maqueta), asi que el diseno no cambia: se vuelve determinista. Cuando
manda el texto o el min-height del breakpoint 768-960, la columna
estira y el mosaico la sigue sin dejar hueco.
2) Los tres '.info .info p' de skeleton.css (con .info duplicado) salen
aqui como '.info p'. No matcheaban nada: en el DOM no hay ningun .info
dentro de .info. Daba igual mientras la maqueta no tenia parrafo; ahora
que el bloque mapea 'descripcion' esos tamanos responsive si importan.
NOTA (fix ronda 1, revision jul 2026): ademas de lo anterior, este modulo
incluye 2 valores que SI son literales de la maqueta pero no estaban
listados en las tablas del brief original (Step 2/3) -se encontraron al
diffear el CSS fuente completo, tal y como exige la reconciliacion del
Step 7 del brief-. Confirmados legitimos en la revision de esta tarea:
- .btnBox base: margin-top: 40px (antes dependia solo del margen
inferior del titulo/parrafo anterior).
- .info p en max-767: tipografia 1.125rem/1.5rem -> 1rem/1.375rem.
*/
#destinationSec {
padding-top: 0;
padding-bottom: 0;
background-color: #F4C670;
overflow: hidden;
}
#destinationSec .destinationBox {
display: flex;
}
#destinationSec .destinationBox .image {
display: flex;
width: 100%;
max-width: 50%;
/* Reserva la altura del bloque con la proporcion del diseno (ver cabecera) */
aspect-ratio: 940 / 681;
}
/* Elemento del parallax. NO puede ser el grid: Ukiyo le fija style="display:block"
INLINE en su constructor (setStyle(!0) en parallax.min.js), y un inline gana a
la hoja de estilos, asi que el display:grid se anulaba y las 7 celdas se
apilaban en vertical dejando ver solo la primera. Por eso es un bloque neutro
que ocupa la columna y el grid vive DENTRO: el display:block de Ukiyo aterriza
aqui, donde es inofensivo. Ukiyo estira ESTE div a clientHeight x 1,1 y el
grid lo sigue con su height:100%, asi que el parallax funciona igual.
Alternativa descartada: devolver display:grid por JS tras el init. Sobreviviria
(reset() no reaplica ese estilo), pero es pisar la hoja de estilos con un
inline desde JS y depender de un detalle interno del third-party. */
#destinationSec .destinationBox .image .mosaicParallax {
width: 100%;
height: 100%;
}
/* Contenedor del mosaico: rejilla 3x3 en la que dos celdas ocupan dos filas.
Las calles son transparentes en el diseno: aqui se consiguen con el gap, que
deja ver el fondo #F4C670 del bloque.
Los gaps van en % para que el mosaico escale igual que en la maqueta:
5/940 = 0,53% en horizontal, 5/681 = 0,73% en vertical. */
#destinationSec .destinationBox .image .mosaic {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 0.53%;
row-gap: 0.73%;
width: 100%;
height: 100%;
}
#destinationSec .destinationBox .image .mosaic img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* La geometria del collage: dos celdas ocupan dos filas (ver plan) */
#destinationSec .destinationBox .image .mosaic img:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
#destinationSec .destinationBox .image .mosaic img:nth-child(2) { grid-area: 3 / 1 / 4 / 2; }
#destinationSec .destinationBox .image .mosaic img:nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
#destinationSec .destinationBox .image .mosaic img:nth-child(4) { grid-area: 2 / 2 / 4 / 3; }
#destinationSec .destinationBox .image .mosaic img:nth-child(5) { grid-area: 1 / 3 / 2 / 4; }
#destinationSec .destinationBox .image .mosaic img:nth-child(6) { grid-area: 2 / 3 / 3 / 4; }
#destinationSec .destinationBox .image .mosaic img:nth-child(7) { grid-area: 3 / 3 / 4 / 4; }
#destinationSec .destinationBox .info {
display: flex;
align-items: center;
width: 100%;
max-width: 50%;
padding: 5rem var(--container-padding) 5rem 8rem;
}
#destinationSec .destinationBox .info .inner {
width: 100%;
max-width: 28.9375rem;
}
#destinationSec .destinationBox .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;
}
#destinationSec .destinationBox .info .title {
display: block;
margin: 0 0 4rem 0;
font-size: 3.375rem;
color: #1A1A1A;
font-weight: 400;
line-height: 3.875rem;
letter-spacing: -0.09375rem;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
#destinationSec .destinationBox .info .title:last-child {
margin-bottom: 0;
}
#destinationSec .destinationBox .info .title br {
display: block;
}
#destinationSec .destinationBox .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;
}
#destinationSec .destinationBox .info p:last-child {
margin-bottom: 0;
}
#destinationSec .destinationBox .info p strong {
font-weight: 600;
}
#destinationSec .destinationBox .info .btnBox {
display: flex;
justify-content: flex-start;
gap: 0.9375rem;
margin-top: 2.5rem;
}
#destinationSec .destinationBox .info .btnBox .button {
margin: 0;
}
/* #Additional - Large Screens beyond 1600px
================================================== */
@media only screen and (min-width: 1501px) and (max-width: 1600px) {
#destinationSec .destinationBox .info { padding: 5rem var(--container-padding) 5rem 4.375rem; }
}
/* #Additional - Large Screens beyond 1366px
================================================== */
@media only screen and (min-width: 1366px) and (max-width: 1500px) {
#destinationSec .destinationBox .info { padding: 3.125rem var(--container-padding) 3.125rem 3.125rem; }
}
/* #iPad Pro - Large Screens beyond 1024px
================================================== */
@media only screen and (min-width: 961px) and (max-width: 1365px) {
#destinationSec .destinationBox .image { max-width: 50%; }
#destinationSec .destinationBox .info { max-width: 50%; padding: 4.375rem 2rem; }
#destinationSec .destinationBox .info .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#destinationSec .destinationBox .info .title { margin: 0 0 3.125rem 0; font-size: 2.5rem; line-height: 2.8125rem; }
#destinationSec .destinationBox .info p { font-size: 1.125rem; line-height: 1.5rem; }
}
/* #Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 960px) {
#destinationSec .destinationBox { min-height: 23.125rem; }
#destinationSec .destinationBox .image { max-width: 50%; }
#destinationSec .destinationBox .info { max-width: 50%; padding: 4.375rem 1.25rem; }
#destinationSec .destinationBox .info .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#destinationSec .destinationBox .info .title { margin: 0 0 1.875rem 0; font-size: 2.5rem; line-height: 2.8125rem; }
#destinationSec .destinationBox .info .title br { display: none; }
#destinationSec .destinationBox .info p { font-size: 1rem; line-height: 1.375rem; }
#destinationSec .destinationBox .info .btnBox { margin-top: 1.875rem; }
}
/* #Mobile (Portrait)
================================================== */
@media only screen and (max-width: 767px) {
#destinationSec .destinationBox { flex-direction: column; min-height: auto; }
#destinationSec .destinationBox .image { max-width: 100%; }
#destinationSec .destinationBox .info { max-width: 100%; padding: 3.125rem 1.25rem; }
#destinationSec .destinationBox .info .subtitle { margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#destinationSec .destinationBox .info .title { margin: 0 0 1.875rem 0; font-size: 2rem; line-height: 2.3125rem; }
#destinationSec .destinationBox .info .title br { display: none; }
#destinationSec .destinationBox .info p { font-size: 1rem; line-height: 1.375rem; }
#destinationSec .destinationBox .info .btnBox { margin-top: 1.875rem; }
}