/* =====================================================================================
   Bloques reutilizables (Views/Shared/Bloques). Medidas de la original a 1920 px:
   las anchuras de Divi son % del ancho de la página y los rellenos verticales % del ancho (vw).
   ===================================================================================== */

/* ---------- Texto de contenido (Montserrat 16/34 #383630, negritas 500) ---------- */
.texto { font-family: var(--fuente-titulos); font-size: var(--texto-parrafo); font-weight: 300; line-height: var(--interlineado-parrafo); color: var(--color-texto); }
.texto strong, .texto b { font-weight: 500; }
.texto a { color: var(--color-marron); font-weight: 500; }
.texto h3 { font-family: var(--fuente-serif); font-size: var(--texto-h3-serif); font-weight: 500; line-height: 3rem; color: var(--color-marron); padding-bottom: 10px; }
.texto h3 strong { font-weight: 600; }
.texto h4 { font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 500; line-height: 1.6; color: var(--color-texto); padding: 1em 0 0.5em; }
.texto ul { list-style: disc; padding: 0 0 1em 1.5em; }

/* ---------- Botones ---------- */
.boton-relleno {
    display: inline-block; padding: 0.5rem 1.5625rem;
    background: var(--color-marron); border: 1px solid #f5f5f5;
    font-family: var(--fuente-titulos); font-size: var(--texto-boton); font-weight: 500; line-height: 1.4875rem;
    color: var(--color-blanco); text-transform: uppercase; transition: all 300ms ease;
}
.boton-relleno:hover { background: var(--color-blanco); color: var(--color-marron); border-color: var(--color-marron); }
.boton-borde {
    display: inline-block; padding: 0.625rem 1.875rem;
    border: 1px solid var(--color-borde-boton); background: transparent;
    font-family: var(--fuente-titulos); font-size: var(--texto-boton); font-weight: 500; line-height: 1.4875rem;
    color: var(--color-marron); text-transform: uppercase; transition: all 300ms ease;
}
.boton-borde:hover { background: var(--color-marron); color: var(--color-blanco); border-color: var(--color-marron); }

/* ---------- Hero (cabecera de página) ---------- */
.hero {
    position: relative;
    height: calc(100vh - var(--alto-cabecera));
    min-height: 30rem;
    margin-top: -0.875rem; /* en la original el contenido empieza 14 px bajo la franja */
    background: var(--color-blanco) var(--fondo) center / cover no-repeat;
}
.hero__marco {
    position: absolute; right: 9%; bottom: 3rem;
    display: flex; flex-direction: column; align-items: center; gap: 2.03rem;
    padding: 1.6875rem 0;
}
.hero__linea { display: block; width: 1px; height: 8.75rem; background: var(--color-blanco); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.hero__titulo {
    font-family: var(--fuente-titulos); font-size: var(--texto-h1-hero); font-weight: 300; line-height: 2.25rem;
    color: var(--color-blanco); text-align: center; text-transform: uppercase;
}
/* Páginas legales: el bloque ocupa 1080 px y las líneas se separan más */
.hero--ancho .hero__marco { width: min(67.5rem, 80%); gap: 6.75rem; }
.hero--ancho .hero__titulo { line-height: 2.875rem; }

/* ---------- Encabezado numerado ---------- */
.encabezado { display: grid; grid-template-columns: 1fr 1fr; width: 40%; padding-bottom: 1.6875rem; }
.encabezado__numero { padding-top: 6vw; }
.encabezado__cifra { width: auto; margin-bottom: 1vw; }
.encabezado__etiqueta {
    width: 9.8rem; text-align: center;
    font-family: var(--fuente-titulos); font-size: 1rem; font-weight: 500; line-height: 1.25rem; color: var(--color-oro-claro);
}
.encabezado__texto { padding: 6vw 0 0 0.8vw; border-left: 1px solid var(--color-oro); }
.encabezado__titulo {
    font-family: var(--fuente-titulos); font-size: var(--texto-h2); font-weight: 300; line-height: var(--interlineado-h2);
    color: var(--color-oro-claro); text-transform: uppercase;
    width: 110%; /* en la original el módulo de texto desborda la columna (404 px en 368 px) */
}
.encabezado__titulo strong { font-weight: 500; }
.encabezado--normal .encabezado__etiqueta { font-weight: 400; }
.encabezado--normal .encabezado__titulo { width: 100%; }
.encabezado--derecha .encabezado__titulo { width: auto; }

.encabezado--derecha { grid-template-columns: 62.5% 37.5%; margin-left: auto; margin-bottom: 1vw; }
.encabezado--derecha .encabezado__numero { order: 2; padding: 3.2vw 0 0 0.8vw; border-left: 1px solid var(--color-oro); display: flex; flex-direction: column; align-items: flex-end; }
.encabezado--derecha .encabezado__cifra { margin-bottom: 0.707vw; }
.encabezado--derecha .encabezado__etiqueta { width: 9.4rem; }
.encabezado--derecha .encabezado__texto { order: 1; border-left: 0; padding: 3.2vw 1.25vw 0 0; text-align: right; }
.encabezado--solo-numero .encabezado__numero { padding-top: 2vw; }

/* ---------- Bloque de tres columnas ---------- */
.tres {
    display: grid; grid-template-columns: 19.1% 28.65% 46.3%; column-gap: 3%;
    width: 90%; padding: 1.6875rem 0; align-items: stretch;
}
.tres__estrecha img { width: auto; max-height: 35rem; }
.tres__texto { display: flex; flex-direction: column; justify-content: space-between; }
.tres__texto .texto { margin-bottom: 0; }
.tres__baja { width: 100%; }
.tres__boton { margin-top: 6.08rem; text-align: center; }
.tres__grande { position: relative; display: flex; justify-content: flex-end; }
.tres__foto-grande { width: 97%; height: 35rem; object-fit: cover; }
.tres__caja {
    position: absolute; top: 0; right: 2.083vw; left: 6.25vw;
    padding: 1.5rem 4rem 3.5rem; background: var(--color-blanco);
}

/* ---------- Galería (mosaico Modula) ---------- */
.seccion-galeria { position: relative; padding: 5vw 0; }
.seccion-galeria__titulo {
    position: absolute; left: 0; right: 0; top: calc(5vw + 2.85rem);
    font-family: var(--fuente-titulos); font-size: var(--texto-h2); font-weight: 300; line-height: var(--interlineado-h2);
    color: var(--color-oro-claro); text-align: center; text-transform: uppercase;
}
.seccion-galeria__mosaico { width: 70%; margin: 0 auto; padding: 1.6875rem 0; }
.galeria { position: relative; aspect-ratio: var(--ratio-e); }
.galeria__item { position: absolute; left: var(--ex); top: var(--ey); width: var(--ew); height: var(--eh); overflow: hidden; }
.galeria__item a { display: block; width: 100%; height: 100%; }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.galeria__item a:hover img { transform: scale(1.05); }

/* ---------- Banda de reserva ---------- */
.reserva { display: grid; grid-template-columns: 20% 80%; padding: 3.375rem 0 3.375rem; }
.reserva--derecha { grid-template-columns: 85% 15%; }
.reserva__numero { padding-bottom: 1.6875rem; }
.reserva--derecha .reserva__numero { order: 2; border-left: 1px solid var(--color-oro); padding-left: 2vw; display: flex; flex-direction: column; align-items: flex-end; }
.reserva__banda {
    position: relative; display: flex; align-items: center;
    margin-left: 2vw; padding: 1.25rem 3.125rem; margin-bottom: 1.6875rem;
    background: var(--color-crema);
}
.reserva:not(.reserva--derecha) .reserva__banda { border-left: 0; }
.reserva:not(.reserva--derecha) .reserva__numero { border-right: 1px solid var(--color-oro); margin-right: 0; }
.reserva--derecha .reserva__banda { margin-left: 0; }
.reserva__logo { width: 7.8125rem; height: auto; }
.reserva__texto {
    position: absolute; top: -0.75rem; right: 8vw;
    font-family: var(--fuente-titulos); font-size: 1.5rem; font-weight: 100; line-height: 2.55rem; color: var(--color-gris);
}
.reserva__texto strong { font-weight: 400; }

/* =====================================================================================
   Móvil (≤ 767 px) y tableta (768–980 px)
   ===================================================================================== */
@media (max-width: 980px) {
    .hero { height: 100vh; min-height: 0; margin-top: 0; }
    .tres { width: 100%; grid-template-columns: 1fr; }
    .tres__estrecha, .tres__baja, .tres__texto .tres__baja { display: none; }
    .tres__texto .texto { margin: 0 5vw 1.875rem 15vw; }
    .tres__grande { display: block; }
    .tres__foto-grande { width: 100%; height: 25rem; }
    .tres__caja { left: 15vw; right: 0; padding: 0.7rem 1.875rem 2.34rem; }
    .tres--caja-vacia-movil .tres__caja > * { display: none; }
    .tres__boton { margin: 0 0 1.875rem; }
}

@media (max-width: 767px) {
    .hero__marco { right: 50%; transform: translateX(50%); bottom: 2rem; gap: 1rem; }
    .hero__linea { height: 5rem; }
    .hero__titulo { font-size: 1.5rem; line-height: 1.875rem; }
    .hero--ancho .hero__marco { width: 90%; gap: 2rem; }

    .encabezado { width: 100%; padding-bottom: 0; }
    .encabezado__numero { padding-top: 15vw; }
    .encabezado__cifra { height: 2.5rem; margin-bottom: 0.58rem; }
    .encabezado__etiqueta { display: none; }
    .encabezado__texto { padding: 15vw 0 0 2vw; border-left: 0; }
    .encabezado__titulo { font-size: 1.125rem; line-height: 1.5rem; white-space: normal; }
    /* Derecha: título (alineado a la derecha) encima de la cifra, ambos a todo el ancho */
    .encabezado--derecha { grid-template-columns: 1fr; margin-bottom: 1vw; padding-bottom: 8vw; }
    .encabezado--derecha .encabezado__texto { padding: 8vw 5vw 0 0; }
    .encabezado--derecha .encabezado__titulo { width: auto; }
    .encabezado--derecha .encabezado__numero { border-left: 0; padding: 8vw 0 0 2vw; }
    .encabezado--derecha .encabezado__cifra { margin-bottom: 1.15rem; }
    .encabezado--solo-numero { padding-bottom: 0; }
    .encabezado--solo-numero .encabezado__texto { display: none; }
    .encabezado--solo-numero .encabezado__numero { padding-top: 5vw; }
    .texto h3 { font-size: 1.125rem; line-height: 1.5rem; }

    .seccion-galeria { padding: 5vw 0; }
    .seccion-galeria__titulo { top: calc(5vw + 1.5625rem + 0.9375rem); font-size: 1.125rem; line-height: 1.5rem; }
    .seccion-galeria__mosaico { width: 85%; padding: 0; }
    .galeria { aspect-ratio: var(--ratio-m); }
    .galeria__item { left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh); }

    .reserva, .reserva--derecha { grid-template-columns: 1fr; padding: 3.125rem 0; }
    .reserva__numero { display: none !important; }
    .reserva__banda { flex-direction: column; margin: 0; padding: 30% 0 15%; }
    .reserva__texto { left: 0; right: 0; padding: 0 10vw; text-align: center; font-size: 1.25rem; line-height: 2.125rem; }
}

/* ---------- Servicios (fichas de habitación) ---------- */
.servicios { padding-bottom: 5vw; }
.servicios__fila { display: flex; align-items: flex-end; width: 70%; margin-left: 30%; }
.servicios__tarjeta {
    flex: 0 0 40%; padding: 5.6vw 3.5vw; text-align: center;
    background: var(--fondo) center / cover no-repeat;
}
.texto-servicios h3 { font-family: var(--fuente-titulos); font-size: 2rem; font-weight: 500; line-height: 3rem; color: var(--color-texto); padding-bottom: 10px; }
.texto-servicios p { font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 400; line-height: 2.875rem; color: var(--color-texto); }
.servicios__foto { flex: 0 0 60%; width: 60%; height: 33.75rem; object-fit: cover; }

@media (max-width: 767px) {
    .servicios__fila { flex-direction: column; align-items: stretch; width: 90%; margin: 0 5%; }
    .servicios__tarjeta { padding: 2.1rem 1.05rem; }
    .servicios__foto { flex: none; width: 100%; height: 25rem; }
    .texto-servicios h3 { font-size: 1.5rem; line-height: 2.25rem; }
    .texto-servicios p { font-size: 1rem; line-height: 2.25rem; }
}

/* Fichas: fotos recortadas (object-fit: cover) con las medidas de la original */
.tres--ficha .tres__estrecha img { width: 10.3125rem; height: 33.125rem; object-fit: cover; }
.tres--ficha .tres__foto-grande { width: 100%; height: 33.3125rem; }
.tres--ficha .tres__baja { height: 20.625rem; object-fit: cover; }

/* ---------- Tarjeta del listado de habitaciones ---------- */
.habitacion-listado .tarjeta-hab { margin-top: 4vw; margin-bottom: 4vw; }
.tarjeta-hab { display: flex; width: 65%; margin: 0 auto; padding: 1.6875rem 0; }
.tarjeta-hab__texto {
    flex: 0 0 45%; display: flex; flex-direction: column; justify-content: space-between;
    padding: 3.25vw; background: var(--fondo) center / cover no-repeat;
}
.tarjeta-hab__foto { flex: 0 0 55%; width: 55%; min-height: 100%; object-fit: cover; }
.texto-tarjeta { font-family: var(--fuente-titulos); color: var(--color-texto); }
.texto-tarjeta h3 { font-size: 2rem; font-weight: 300; line-height: 3rem; padding-bottom: 10px; }
.texto-tarjeta p { font-size: 1rem; font-weight: 300; line-height: 1.625rem; }
.texto-tarjeta strong { font-weight: 500; }
.texto-tarjeta h4 { font-size: 1.25rem; font-weight: 500; line-height: 1.25rem; padding: 1em 0 10px; }
.tarjeta-hab__boton { text-align: center; padding-top: 1rem; }
.boton-linea {
    display: inline-block; padding: 0.3125rem 0.875rem;
    border: 1px solid var(--color-marron); background: transparent;
    font-family: var(--fuente-base); font-size: 0.875rem; font-weight: 500; line-height: 1.4875rem;
    color: var(--color-marron); transition: all 300ms ease;
}
.boton-linea:hover { background: var(--color-marron); color: var(--color-blanco); }

@media (max-width: 980px) {
    .tarjeta-hab { flex-direction: column; width: 90%; }
    .tarjeta-hab__texto { padding: 2rem 1.75rem; }
    .tarjeta-hab__foto { width: 100%; min-height: 0; height: 25rem; }
}
/* ---------- Recomendación (tarjeta + foto con fotos decorativas detrás) ---------- */
/* Secciones que solo contienen un encabezado: 54 px arriba y abajo (192 px arriba tras una decoración) */
.encabezado--seccion { margin-top: 2.8vw; margin-bottom: 2.8vw; }
.encabezado--derecha.encabezado--seccion { margin-bottom: 3.8vw; }
.encabezado--tras-deco { margin-top: 10vw; margin-bottom: 0; }
.encabezado--tras-seccion { margin-top: 5vw; margin-bottom: 0; }
.recomendacion { position: relative; padding: 5vw 0; }
.recomendacion__tarjeta {
    position: relative; z-index: 1; display: flex; align-items: center;
    width: 70%; margin-left: 20%; padding: 1.6875rem 2.5rem 1.6875rem 0; background: var(--color-blanco);
}
.recomendacion__texto { flex: 0 0 57.8%; margin-right: 5.5%; padding: 4.75vw 4.07vw 3.4vw; background: var(--color-blanco); }
.recomendacion__foto { flex: 1; background: var(--fondo) center / cover no-repeat; }
.recomendacion__foto img { width: 100%; height: auto; }
.recomendacion__boton { margin-top: 2.6vw; }
.boton-borde--marron { border-color: var(--color-marron); }

.recomendacion__deco { position: absolute; inset: 0; pointer-events: none; }
.recomendacion--lados .recomendacion__deco { left: 10%; display: flex; justify-content: space-between; align-items: center; }
.recomendacion__deco-izq { width: 28.36%; height: 43.75rem; object-fit: cover; }
.recomendacion__deco-der { width: 28.36%; height: 50rem; object-fit: cover; }
.recomendacion--alta .recomendacion__deco-izq { height: 45.875rem; }
.recomendacion--alta .recomendacion__deco-der { width: 33.1%; height: 53.5rem; }
.recomendacion--cuadrada .recomendacion__deco-izq { width: 29.57%; height: 31.9375rem; }

.recomendacion--grande { padding: 0 0 5vw; }
.recomendacion--grande .recomendacion__tarjeta { z-index: 10; background: transparent; padding: 1.6875rem 0; margin-right: 10%; }
.recomendacion--grande .recomendacion__texto { flex: 0 0 57.8%; padding: 4.9vw 4.2vw 3.5vw; }
.recomendacion--grande .recomendacion__foto img { width: 90%; height: 37.5rem; object-fit: cover; }
.recomendacion--grande .recomendacion__deco { top: var(--deco-top, 0); width: 80%; padding: 1.6875rem 0; }
.recomendacion__deco-grande { width: auto; max-width: 100%; }
.recomendacion--historia .recomendacion__tarjeta { padding: 5vw 0; }
.recomendacion--historia .recomendacion__foto img { width: 100%; height: auto; }

@media (max-width: 980px) {
    .recomendacion, .recomendacion--grande { padding: 5vw 0; }
    .recomendacion__deco, .recomendacion--lados .recomendacion__deco { display: none; }
    .recomendacion--lados .recomendacion__tarjeta { flex-direction: column-reverse; }
    .recomendacion--lados .recomendacion__foto { padding-bottom: 6.28rem; }
    .recomendacion--lados .recomendacion__foto img { width: 80%; margin-left: auto; transform: translateY(-1.25rem); }
    .recomendacion__tarjeta, .recomendacion--grande .recomendacion__tarjeta {
        flex-direction: column; align-items: stretch; width: 90%; margin: 0 5%; padding: 0; background: var(--color-blanco);
    }
    .recomendacion__texto, .recomendacion--grande .recomendacion__texto { margin: 0; padding: 1.5rem 2.1rem; }
    .recomendacion__foto img, .recomendacion--grande .recomendacion__foto img { width: 100%; height: auto; }
    .recomendacion__boton { margin-top: 1.25rem; text-align: center; }
    .encabezado--tras-deco { margin-top: 0; }
}

/* ---------- Tarjeta destacada sobre dos fotos ---------- */
.destacado { position: relative; padding: 5vw 0; }
.destacado__fotos {
    position: absolute; top: 1.9vw; bottom: 2.8vw; left: 10%; right: 15%;
    display: flex; justify-content: space-between; align-items: center; padding: 1.6875rem 0;
}
.destacado--derecha .destacado__fotos { left: 15%; right: 10%; flex-direction: row-reverse; }
.destacado__estrecha { width: auto; max-height: 36.6875rem; }
.destacado__ancha { width: 46.5%; height: 36.6875rem; object-fit: cover; }
.destacado__tarjeta {
    position: relative; z-index: 10;
    width: 40%; margin-left: 15%; padding: 2.8vw 4vw;
    background: var(--color-blanco);
}
.destacado--derecha .destacado__tarjeta { margin-left: 45%; }
.destacado__boton { margin-top: 2.6rem; }
.encabezado--separado { margin-top: 5vw; }
.seccion-intro--hotel { padding-bottom: 0; }

@media (max-width: 980px) {
    .destacado { padding: 5vw 0; }
    .destacado__fotos { display: none; }
    .destacado__tarjeta, .destacado--derecha .destacado__tarjeta { width: 90%; margin: 0 5%; padding: 1.5rem 2.1rem; }
    .destacado__boton { text-align: center; margin-top: 0.625rem; }
}

@media (max-width: 767px) {
    .texto-tarjeta h3 { font-size: 1.5rem; line-height: 2rem; }
    .texto-tarjeta p { font-size: 0.875rem; }
    .texto-tarjeta h4 { font-size: 1.125rem; line-height: 1.125rem; }
}