/* =========================================================
   HOTEL LOS APUS CENTRAL
   CSS PRINCIPAL
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    width: 100%;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: visible;

    font-family: 'Montserrat', sans-serif;
    background: #F7F1E5;
    color: #302621;
    line-height: 1.6;
}

/* =========================================================
   FUENTES
   ========================================================= */

h1,
h2,
h3 {
    font-family: 'DM Serif Display', serif;
}


/* =========================================================
   HEADER
   BARRA CONTINUA DESDE EL LOGO HASTA CONTACTO
   ========================================================= */

header.header {
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;

    width: 100% !important;
    height: 92px !important;
    min-height: 92px !important;

    padding: 10px 55px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    z-index: 9999 !important;
}

/* Barra horizontal continua del header */
header.header::after {
    content: "";
    position: absolute;

    left: 55px;
    right: 55px;
    bottom: -8px;

    height: 1px;

    background: rgba(255, 255, 255, 0.55);

    pointer-events: none;
}


/* =========================================================
   LOGO
   ========================================================= */

header.header .logo {
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    text-decoration: none !important;
    background: transparent !important;
}

header.header .logo img {
    display: block !important;

    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;
}


/* =========================================================
   MENÚ
   ========================================================= */

header.header .menu {
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 30px !important;

    background: transparent !important;
}


/* =========================================================
   ENLACES DEL MENÚ
   ========================================================= */

header.header .menu a {
    position: relative;

    display: block !important;

    margin: 0 !important;
    padding: 7px 0 10px !important;

    /* Color visible sobre el video */
    color: #F4D7D9 !important;
    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    text-decoration: none !important;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;

    transition:
        color 0.25s ease,
        transform 0.25s ease !important;
}


/* =========================================================
   ANIMACIÓN DE CADA ENLACE
   ========================================================= */

header.header .menu a::after {
    content: "" !important;
    display: block !important;

    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 0;
    height: 2px;

    background: #B89A68;

    transform: translateX(-50%);

    transition: width 0.28s ease;
}

header.header .menu a:hover {
    color: #FFFFFF !important;
    background: transparent !important;

    box-shadow: none !important;

    transform: translateY(-1px) !important;
}

header.header .menu a:hover::after {
    width: 100%;
}


/* =========================================================
   PÁGINAS INTERNAS
   Habitaciones, Reservas, Contacto, etc.
   ========================================================= */

/* Si la página no tiene .hero, el fondo suele ser crema.
   Por eso usamos granate para que el menú sí se vea. */
body:not(:has(.hero)) header.header .menu a {
    color: #6B1F2A !important;
}

body:not(:has(.hero)) header.header .menu a:hover {
    color: #8B2635 !important;
}

body:not(:has(.hero)) header.header .menu a::after {
    background: #8B2635;
}

/* Más espacio superior en páginas internas para separar el título del header */
body:not(:has(.hero)) .pagina {
    padding-top: 125px;
}

/* En páginas internas NO mostramos la barra continua */
body:not(:has(.hero)) header.header::after {
    display: none !important;
}




/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    width: 100%;
    height: 650px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background: #4A141D;

    z-index: 1;
}


/* =========================================================
   VIDEO
   ========================================================= */

.hero-video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 0;
}


.hero-youtube {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 100vw !important;
    height: 56.25vw !important;

    min-width: 177.78vh !important;
    min-height: 100vh !important;

    transform: translate(-50%, -50%) !important;

    border: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
   OSCURECIMIENTO DEL VIDEO
   ========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(48, 38, 33, 0.20),
            rgba(74, 20, 29, 0.58)
        );

    z-index: 1;
}


/* =========================================================
   CONTENIDO HERO
   ========================================================= */

.hero-content {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    color: #FCF9F3;

    padding: 20px;
}


.hero-content h1 {
    font-family: 'DM Serif Display', serif;

    font-size: 62px;
    font-weight: 400;

    line-height: 1.15;

    letter-spacing: 0.5px;

    margin: 0 0 18px;

    color: #FCF9F3;

    text-shadow:
        0 3px 15px rgba(0, 0, 0, 0.45);
}


.hero-content p {
    font-family: 'Montserrat', sans-serif;

    max-width: 650px;

    margin: 0;

    font-size: 18px;

    color: #FCF9F3;

    letter-spacing: 0.3px;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4);
}


/* =========================================================
   BOTÓN
   ========================================================= */

.btn {
    display: inline-block;

    margin-top: 28px;

    padding: 13px 30px;

    background: #6B1F2A;

    color: #FFFFFF;

    border: 1px solid #7A2633;
    border-radius: 4px;

    text-decoration: none;

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 0.5px;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.btn:hover {
    background: #4A141D;

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(48, 38, 33, 0.30);
}


.btn:active {
    transform: translateY(0);
}


/* =========================================================
   BIENVENIDA / PRESENTACIÓN
   TEXTO A LA IZQUIERDA + 2 IMÁGENES A LA DERECHA
   ========================================================= */

.bienvenida {
    width: 100%;

    padding: 100px 8% 110px;

    background: #FCF9F3;

    border-bottom: 1px solid #E5D8C3;
}

.bienvenida-contenedor {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.95fr;

    gap: 80px;

    align-items: center;
}


/* =========================================================
   TEXTO DE BIENVENIDA
   ========================================================= */

.bienvenida-texto {
    text-align: left;
}

.bienvenida-subtitulo {
    display: block;

    margin-bottom: 12px;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #8B2635;
}

.bienvenida-texto h2 {
    max-width: 600px;

    margin-bottom: 28px;

    font-family: 'DM Serif Display', serif;
    font-size: 46px;
    font-weight: 400;

    line-height: 1.12;

    color: #6B1F2A;
}

.bienvenida-texto p {
    max-width: 620px;

    margin-bottom: 18px;

    font-family: 'Montserrat', sans-serif;
    font-size: 15px;

    line-height: 1.9;

    color: #5C5047;
}

.bienvenida-texto strong {
    color: #6B1F2A;
    font-weight: 600;
}


/* =========================================================
   ENLACE DE BIENVENIDA
   ========================================================= */

.bienvenida-link {
    position: relative;

    display: inline-block;

    margin-top: 12px;
    padding-bottom: 5px;

    color: #7A1F2B;

    text-decoration: none;

    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;

    transition: color 0.3s ease;
}

.bienvenida-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 45%;
    height: 1px;

    background: #B89A68;

    transition: width 0.3s ease;
}

.bienvenida-link:hover {
    color: #4A141D;
}

.bienvenida-link:hover::after {
    width: 100%;
}


/* =========================================================
   IMÁGENES DE BIENVENIDA
   ========================================================= */

.bienvenida-imagenes {
    position: relative;

    min-height: 500px;
}

.bienvenida-img {
    overflow: hidden;

    border-radius: 18px;
}

.bienvenida-img-principal {
    position: absolute;

    top: 0;
    right: 0;

    width: 82%;
    height: 410px;
}

.bienvenida-img-secundaria {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 55%;
    height: 230px;

    border: 10px solid #FCF9F3;

    box-shadow:
        0 14px 35px rgba(48, 38, 33, 0.18);
}

.bienvenida-img img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.6s ease;
}

.bienvenida-img:hover img {
    transform: scale(1.04);
}


/* =========================================================
   RESPONSIVE BIENVENIDA
   ========================================================= */

@media (max-width: 950px) {

    .bienvenida-contenedor {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .bienvenida-imagenes {
        width: 100%;
        max-width: 650px;

        margin: 0 auto;
    }
}

@media (max-width: 700px) {

    .bienvenida {
        padding: 70px 20px;
    }

    .bienvenida-texto h2 {
        font-size: 36px;
    }

    .bienvenida-imagenes {
        min-height: 420px;
    }

    .bienvenida-img-principal {
        width: 90%;
        height: 330px;
    }

    .bienvenida-img-secundaria {
        width: 58%;
        height: 190px;
    }
}

@media (max-width: 450px) {

    .bienvenida-texto h2 {
        font-size: 32px;
    }

    .bienvenida-imagenes {
        min-height: 350px;
    }

    .bienvenida-img-principal {
        width: 100%;
        height: 280px;
    }

    .bienvenida-img-secundaria {
        width: 62%;
        height: 160px;
    }
}



/* =========================================================
   SERVICIOS
   ========================================================= */

.servicios {
    width: 100%;
    padding: 95px 7%;
    background: #F7F1E5;
}

.servicios .titulo {
    text-align: center;
    margin-bottom: 55px;
}

.servicios .subtitulo {
    display: block;
    margin-bottom: 10px;

    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;

    color: #7A2633;
}

.servicios .titulo h2 {
    margin-bottom: 14px;

    font-family: 'DM Serif Display', serif;
    font-size: 46px;
    font-weight: 400;

    color: #302621;
}

.servicios .titulo p {
    max-width: 650px;
    margin: 0 auto;

    font-size: 15px;
    line-height: 1.8;

    color: #75665A;
}


/* =========================================================
   GRID DE SERVICIOS
   ========================================================= */

.servicios-grid {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


/* =========================================================
   TARJETAS DE SERVICIO
   ========================================================= */

.servicio {
    padding: 14px;

    background: #FFFDF8;

    border: 1px solid #E7DCCD;
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 6px 20px rgba(48, 38, 33, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.servicio:hover {
    transform: translateY(-6px);

    border-color: #C7A87C;

    box-shadow:
        0 15px 32px rgba(48, 38, 33, 0.14);
}


/* =========================================================
   IMÁGENES CUADRADAS CON BORDES REDONDOS
   ========================================================= */

.servicio-imagen {
    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 16px;

    background: #EDE5D8;
}

.servicio-imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 16px;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.servicio:hover .servicio-imagen img {
    transform: scale(1.04);
    filter: brightness(1.03);
}


/* =========================================================
   CONTENIDO DE SERVICIO
   ========================================================= */

.servicio-contenido {
    padding: 24px 12px 18px;

    text-align: center;
}

.servicio-contenido h3 {
    margin-bottom: 12px;

    font-family: 'DM Serif Display', serif;
    font-size: 29px;
    font-weight: 400;

    color: #7A1F2B;
}

.servicio-contenido p {
    max-width: 285px;

    margin: 0 auto 18px;

    font-family: 'Montserrat', sans-serif;
    font-size: 14px;

    line-height: 1.7;

    color: #75665A;
}


/* =========================================================
   ENLACES DE SERVICIO
   ========================================================= */

.servicio-link {
    position: relative;

    display: inline-block;

    padding-bottom: -8px;

    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: #7A1F2B;

    text-decoration: none;

    transition:
        color 0.3s ease;
}

.servicio-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 1px;

    background: #7A1F2B;

    transform: translateX(-50%);

    transition:
        width 0.3s ease;
}

.servicio-link:hover {
    color: #4A141D;
}

.servicio-link:hover::after {
    width: 100%;
}


/* =========================================================
   PÁGINAS INTERNAS
   ========================================================= */

.pagina {
    min-height: 500px;

    padding: 70px 8%;

    background: #F7F1E5;
}


/* =========================================================
   TÍTULO GENERAL
   ========================================================= */

.titulo {
    text-align: center;

    margin-bottom: 50px;
}


.titulo h1 {
    margin-bottom: 12px;

    font-family: 'DM Serif Display', serif;

    font-size: 44px;
    font-weight: 400;

    color: #6B1F2A;
}


.titulo p {
    font-size: 15px;

    color: #6A5D53;
}



/* =========================================================
   HABITACIONES PREMIUM
   ========================================================= */

.habitaciones-pagina {
    padding-top: 125px;
    padding-bottom: 90px;
}

.habitaciones-titulo {
    margin-bottom: 55px;
}

.subtitulo-habitaciones {
    display: block;
    margin-bottom: 9px;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;

    color: #8B2635;
}

.habitaciones-premium {
    max-width: 1180px;
    gap: 32px;
}

.habitacion-premium {
    position: relative;
    overflow: hidden;

    background: #FFFDF8;

    border: 1px solid #E4D7C5;
    border-radius: 18px;

    box-shadow:
        0 8px 24px rgba(48, 38, 33, 0.09);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.habitacion-premium:hover {
    transform: translateY(-7px);

    border-color: #B89A68;

    box-shadow:
        0 18px 38px rgba(48, 38, 33, 0.16);
}

.habitacion-imagen-wrap {
    position: relative;

    width: calc(100% - 24px);
    height: 245px;

    margin: 12px 12px 0;

    overflow: hidden;

    border-radius: 14px;
}

.habitacion-imagen-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.55s ease;
}

.habitacion-premium:hover .habitacion-imagen-wrap img {
    transform: scale(1.045);
}

.habitacion-etiqueta {
    position: absolute;

    top: 14px;
    right: 14px;

    padding: 7px 13px;

    border-radius: 50px;

    background: rgba(107, 31, 42, 0.92);

    color: #FFFFFF;

    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.20);
}

.habitacion-etiqueta.especial {
    background: #B89A68;
    color: #302621;
}

.habitacion-premium .habitacion-info {
    padding: 25px 26px 26px;
}

.habitacion-premium .habitacion-info h2 {
    min-height: 60px;
    margin-bottom: 10px;

    font-size: 27px;
    line-height: 1.15;

    color: #6B1F2A;
}

.habitacion-premium .habitacion-info > p {
    min-height: 48px;

    margin-bottom: 19px;

    color: #75665A;

    line-height: 1.7;
}

.habitacion-precios {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 8px 0;

    font-family: 'Montserrat', sans-serif;
}

.habitacion-precios span {
    font-size: 12px;
    color: #8A7A6D;
}

.habitacion-precios strong {
    text-align: right;

    font-size: 13px;
    color: #6B1F2A;
}

.habitacion-separador {
    width: 100%;
    height: 1px;

    margin: 17px 0 15px;

    background: #E5D8C3;
}

.habitacion-ver {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 0;

    background: transparent;

    border: none;

    color: #6B1F2A;

    cursor: pointer;

    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;

    transition:
        color 0.25s ease,
        padding 0.25s ease;
}

.habitacion-ver span {
    font-size: 18px;

    transition: transform 0.25s ease;
}

.habitacion-ver:hover {
    color: #B89A68;
    padding-left: 3px;
}

.habitacion-ver:hover span {
    transform: translateX(4px);
}


/* =========================================================
   MODAL DE HABITACIÓN
   ========================================================= */

body.modal-abierto {
    overflow: hidden;
}

.habitacion-modal {
    position: fixed;
    inset: 0;

    z-index: 20000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.habitacion-modal.activo {
    opacity: 1;
    visibility: visible;
}

.habitacion-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(24, 16, 15, 0.72);
    backdrop-filter: blur(5px);
}

.habitacion-modal-contenido {
    position: relative;
    z-index: 2;

    width: min(1000px, 100%);
    max-height: 86vh;

    display: grid;
    grid-template-columns: 1.15fr 0.85fr;

    overflow: hidden;

    background: #FFFDF8;

    border: 1px solid rgba(184, 154, 104, 0.38);
    border-radius: 18px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.36);

    transform: translateY(18px) scale(0.98);

    transition: transform 0.3s ease;
}

.habitacion-modal.activo .habitacion-modal-contenido {
    transform: translateY(0) scale(1);
}

.habitacion-modal-cerrar {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 5;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: rgba(48, 38, 33, 0.88);

    color: #FFFFFF;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.habitacion-modal-cerrar:hover {
    background: #6B1F2A;
    transform: rotate(90deg);
}

.habitacion-modal-imagen {
    min-height: 520px;

    background: #302621;
}

.habitacion-modal-imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.habitacion-modal-info {
    padding: 55px 42px 38px;

    overflow-y: auto;
}

.modal-subtitulo {
    display: block;

    margin-bottom: 8px;

    color: #B89A68;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.habitacion-modal-info h2 {
    margin-bottom: 14px;

    font-family: 'DM Serif Display', serif;

    font-size: 36px;
    line-height: 1.1;

    color: #6B1F2A;
}

.habitacion-modal-info > p {
    color: #6A5D53;

    font-size: 14px;
    line-height: 1.8;
}

.modal-linea {
    height: 1px;

    margin: 22px 0;

    background: #E5D8C3;
}

.habitacion-modal-info h3 {
    margin-bottom: 18px;

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #B07A2D;
}

.modal-caracteristicas {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.modal-dato {
    padding: 14px;

    background: #F7F1E5;

    border-radius: 10px;
}

.modal-dato span {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;
    color: #8A7A6D;
}

.modal-dato strong {
    display: block;

    font-size: 13px;
    line-height: 1.5;

    color: #302621;
}

.modal-acciones {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 28px;
}

.modal-volver,
.modal-reservar {
    min-height: 45px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 22px;

    border-radius: 50px;

    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.modal-volver {
    background: transparent;

    border: 1px solid #B89A68;

    color: #6B1F2A;
}

.modal-reservar {
    flex: 1;

    border: 1px solid #6B1F2A;

    background: #6B1F2A;

    color: #FFFFFF;
}

.modal-volver:hover,
.modal-reservar:hover {
    transform: translateY(-2px);
}

.modal-reservar:hover {
    background: #4A141D;

    box-shadow:
        0 8px 20px rgba(74, 20, 29, 0.20);
}


/* =========================================================
   RESPONSIVE HABITACIONES PREMIUM
   ========================================================= */

@media (max-width: 900px) {

    .habitacion-modal-contenido {
        grid-template-columns: 1fr;
        max-width: 650px;
        overflow-y: auto;
    }

    .habitacion-modal-imagen {
        min-height: 320px;
        height: 320px;
    }

}

@media (max-width: 700px) {

    .habitaciones-pagina {
        padding-top: 145px;
    }

    .habitaciones-premium {
        max-width: 460px;
    }

    .habitacion-imagen-wrap {
        height: 280px;
    }

    .habitacion-premium .habitacion-info h2,
    .habitacion-premium .habitacion-info > p {
        min-height: auto;
    }

    .habitacion-modal {
        padding: 14px;
    }

    .habitacion-modal-info {
        padding: 38px 22px 26px;
    }

    .habitacion-modal-info h2 {
        font-size: 30px;
    }

    .modal-caracteristicas {
        grid-template-columns: 1fr;
    }

    .modal-acciones {
        flex-direction: column;
    }

    .modal-volver,
    .modal-reservar {
        width: 100%;
    }

}


/* =========================================================
   FORMULARIO
   ========================================================= */

.formulario-container {
    width: 100%;
    max-width: 750px;

    margin: 0 auto;

    padding: 40px;

    background: #FCF9F3;

    border: 1px solid #E2D4C0;

    border-radius: 8px;

    box-shadow:
        0 5px 20px rgba(48, 38, 33, 0.08);
}


.campo {
    margin-bottom: 20px;
}


.campo label {
    display: block;

    margin-bottom: 8px;

    color: #302621;

    font-size: 14px;
    font-weight: 600;
}


.campo input,
.campo select,
.campo textarea {
    width: 100%;

    padding: 12px 13px;

    border: 1px solid #D8C8AE;

    border-radius: 4px;

    background: #FDFBF7;

    color: #302621;

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;
}


.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;

    border-color: #6B1F2A;

    box-shadow:
        0 0 0 2px rgba(107, 31, 42, 0.10);
}


.campo textarea {
    resize: vertical;
}


.fila {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}


.formulario-container .btn {
    border: none;

    cursor: pointer;
}


/* =========================================================
   CONTACTO
   ========================================================= */

.contacto {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 35px;

    align-items: start;
}


.contacto-info {
    padding: 35px;

    background: #FCF9F3;

    border: 1px solid #E2D4C0;

    border-radius: 8px;

    box-shadow:
        0 5px 18px rgba(48, 38, 33, 0.08);
}


.contacto-info h2 {
    margin-bottom: 20px;

    font-family: 'DM Serif Display', serif;

    font-size: 28px;

    color: #6B1F2A;
}


.contacto-info p {
    margin-bottom: 15px;

    font-size: 14px;

    line-height: 1.7;

    color: #6A5D53;
}



/* =========================================================
   FOOTER PREMIUM
   ========================================================= */

.footer-premium {
    width: 100%;
    padding: 30px 6% 22px;

    background:
        linear-gradient(
            135deg,
            #2E231F 0%,
            #392824 55%,
            #451C25 100%
        );

    color: #F8EFE7;
    text-align: left;

    border-top: 1px solid rgba(184, 154, 104, 0.22);
}


/* LÍNEAS DECORATIVAS */

.footer-linea {
    width: 100%;
    max-width: 1200px;
    height: 1px;

    margin: 0 auto 38px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(184, 154, 104, 0.85),
            transparent
        );
}

.footer-linea-inferior {
    margin: 38px auto 22px;
}


/* CONTENIDO GENERAL */

.footer-contenedor {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.35fr 0.75fr 0.85fr 1.25fr;
    gap: 55px;

    align-items: start;
}


/* COLUMNAS */

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-col h3 {
    margin: 0 0 18px;

    font-family: 'DM Serif Display', serif;
    font-size: 21px;
    font-weight: 400;

    color: #FFF2E8;
}

.footer-col p,
.footer-col span,
.footer-col > a {
    margin: 0 0 8px;

    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.7;

    color: #D8CBC1;
    text-decoration: none;
}


/* ENLACES */

.footer-col > a {
    position: relative;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-col > a:hover {
    color: #FFFFFF;
    transform: translateX(4px);
}


/* LOGO */

.footer-logo {
    display: block;

    width: 180px;
    max-width: 100%;
    height: auto;

    margin-bottom: 18px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 4px 10px
            rgba(0, 0, 0, 0.20)
        );
}

.footer-nombre {
    margin-bottom: 10px !important;

    font-family: 'DM Serif Display', serif !important;
    font-size: 18px !important;

    color: #FFF2E8 !important;
}


/* REDES SOCIALES */

.footer-redes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
    margin-top: 18px;
}

.footer-redes .red-social {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.035);

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.footer-redes .red-social img {
    display: block;

    width: 20px;
    height: 20px;

    object-fit: contain;

    transition:
        transform 0.25s ease;
}

.footer-redes .red-social:hover {
    transform: translateY(-4px);

    background: rgba(107, 31, 42, 0.72);
    border-color: rgba(184, 154, 104, 0.8);

    box-shadow:
        0 8px 18px
        rgba(0, 0, 0, 0.18);
}

.footer-redes .red-social:hover img {
    transform: scale(1.08);
}


/* PARTE INFERIOR */

.footer-bottom {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 25px;
}

.footer-bottom p {
    margin: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;

    color: #CDBEB4;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 9px;
}

.footer-bottom-links a {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;

    color: #D9CCC2;
    text-decoration: none;

    transition: color 0.25s ease;
}

.footer-bottom-links a:hover {
    color: #FFFFFF;
}

.footer-bottom-links span {
    color: #B89A68;
}


/* TABLET */

@media (max-width: 950px) {

    .footer-contenedor {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

}


/* CELULAR */

@media (max-width: 650px) {

    .footer-premium {
        padding: 28px 22px 20px;
    }

    .footer-contenedor {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-linea {
        margin-bottom: 30px;
    }

    .footer-linea-inferior {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .footer-logo {
        width: 165px;
    }

}


/* =========================================================
   DETALLES
   ========================================================= */

strong {
    color: #6B1F2A;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    header.header {
        padding: 10px 30px !important;
    }

    header.header::after {
        left: 30px;
        right: 30px;
    }

    .servicios-grid,
    .habitaciones {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 700px) {

    header.header {
        height: auto !important;
        min-height: 96px !important;

        padding: 12px 20px !important;

        flex-direction: column !important;

        gap: 10px !important;
    }

    header.header::after {
        left: 20px;
        right: 20px;
        bottom: 4px;
    }

    header.header .logo img {
        width: 180px !important;
    }

    header.header .menu {
        width: 100% !important;

        justify-content: center !important;

        flex-wrap: wrap;

        gap: 4px !important;
    }

    header.header .menu a {
        padding: 8px 11px !important;

        font-size: 12px !important;
    }

    .hero {
        height: 500px;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    .hero-content p {
        font-size: 15px;
    }

    .servicios {
        padding: 60px 20px;
    }

    .servicios-grid,
    .habitaciones {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pagina {
        padding: 55px 20px;
    }

    .titulo h1 {
        font-size: 36px;
    }

    .fila {
        grid-template-columns: 1fr;
    }

    .formulario-container {
        padding: 25px 20px;
    }

    .contacto {
        grid-template-columns: 1fr;
    }

    .contacto-info {
        padding: 25px;
    }
}


/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 450px) {

    header.header .logo img {
        width: 165px !important;
    }

    header.header .menu {
        gap: 2px !important;
    }

    header.header .menu a {
        padding: 7px 9px !important;
        font-size: 11px !important;
    }

    .hero {
        height: 450px;
    }

    .hero-content h1 {
        font-size: 35px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .bienvenida {
        padding: 60px 20px;
    }

    .bienvenida h2 {
        font-size: 34px;
    }

    .redes-iconos {
        gap: 10px;
    }
}

/* =========================================================
   HERO - TEXTO SUAVE CON EFECTO DE APARICIÓN
   ========================================================= */

.hero-content h1 {
    color: #FFF4EA !important;

    text-shadow:
        0 3px 14px rgba(48, 20, 20, 0.38),
        0 0 22px rgba(255, 244, 234, 0.08);

    animation: heroTextoSuave 4.8s ease-in-out infinite;
}

.hero-content p {
    color: #F4E3DC !important;

    text-shadow:
        0 2px 8px rgba(48, 20, 20, 0.30);

    animation: heroTextoSuave 5.4s ease-in-out 0.35s infinite;
}

@keyframes heroTextoSuave {
    0% {
        opacity: 0.62;
        transform: translateY(4px);
    }

    45% {
        opacity: 1;
        transform: translateY(0);
    }

    70% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0.62;
        transform: translateY(4px);
    }
}

/* Respeta a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .hero-content h1,
    .hero-content p {
        animation: none;
    }
}


/* =========================================================
   HERO - APARICIÓN AL ENTRAR Y AL VOLVER ARRIBA
   ========================================================= */

/* Tipografía más elegante para el título principal */
.hero-content h1 {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.6px !important;

    color: #FFF4EA !important;

    opacity: 0;
    transform: translateY(22px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/* Subtítulo más delicado */
.hero-content p {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;

    color: #F4E3DC !important;

    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 0.8s ease 0.12s,
        transform 0.8s ease 0.12s;
}

/* Botón también aparece suavemente */
.hero-content .btn {
    opacity: 0;
    transform: translateY(16px);

    transition:
        opacity 0.8s ease 0.22s,
        transform 0.8s ease 0.22s,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Cuando el hero está visible */
.hero.hero-visible .hero-content h1,
.hero.hero-visible .hero-content p,
.hero.hero-visible .hero-content .btn {
    opacity: 1;
    transform: translateY(0);
}

/* Cuando el hero deja de verse, vuelve a ocultarse */
.hero:not(.hero-visible) .hero-content h1,
.hero:not(.hero-visible) .hero-content p,
.hero:not(.hero-visible) .hero-content .btn {
    opacity: 0;
}

/* Menos movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .hero-content h1,
    .hero-content p,
    .hero-content .btn {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}


/* =========================================================
   HABITACIONES - DISEÑO HORIZONTAL ELEGANTE
   SOLO CAMBIA LA APARIENCIA EXTERNA
   EL MODAL Y SU FUNCIONAMIENTO SE MANTIENEN
   ========================================================= */

.habitaciones-premium {
    width: 100%;
    max-width: 1180px !important;
    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 58px !important;
}


/* TARJETA */

.habitaciones-premium .habitacion-premium {
    position: relative;

    width: 100%;

    display: grid !important;
    grid-template-columns: 0.92fr 1.08fr !important;
    align-items: center !important;

    gap: 58px !important;

    padding: 34px 36px !important;

    background: #FFFDF8 !important;

    border: 1px solid rgba(107, 31, 42, 0.11) !important;
    border-radius: 24px !important;

    overflow: hidden;

    box-shadow:
        0 12px 34px rgba(48, 38, 33, 0.07) !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease !important;
}


.habitaciones-premium .habitacion-premium:hover {
    transform: translateY(-4px) !important;

    border-color: rgba(184, 154, 104, 0.58) !important;

    box-shadow:
        0 18px 42px rgba(48, 38, 33, 0.12) !important;
}


/* =========================================================
   INFORMACIÓN - LADO IZQUIERDO
   ========================================================= */

.habitaciones-premium .habitacion-info {
    order: 1;

    padding: 12px 0 !important;
}


.habitaciones-premium .habitacion-info h2 {
    min-height: 0 !important;

    margin: 0 0 18px !important;

    font-family: 'DM Serif Display', serif !important;
    font-size: 38px !important;
    font-weight: 400 !important;

    line-height: 1.12 !important;

    color: #6B1F2A !important;
}


.habitaciones-premium .habitacion-info > p {
    min-height: 0 !important;

    max-width: 500px;

    margin: 0 0 24px !important;

    font-family: 'Montserrat', sans-serif;
    font-size: 15px;

    line-height: 1.8 !important;

    color: #65584F !important;
}


/* =========================================================
   PRECIOS
   ========================================================= */

.habitaciones-premium .habitacion-precios {
    width: 100%;
    max-width: 470px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 9px 0 !important;

    border-bottom: 1px solid #EEE3D7;

    font-family: 'Montserrat', sans-serif;
}


.habitaciones-premium .habitacion-precios span {
    font-size: 12px !important;
    color: #85776C !important;
}


.habitaciones-premium .habitacion-precios strong {
    font-size: 13px !important;
    font-weight: 700;

    color: #6B1F2A !important;
}


/* Separador pequeño y elegante */

.habitaciones-premium .habitacion-separador {
    width: 46px !important;
    height: 1px;

    margin: 22px 0 18px !important;

    background: #B89A68 !important;
}


/* =========================================================
   BOTÓN VER HABITACIÓN
   ========================================================= */

.habitaciones-premium .habitacion-ver {
    width: auto !important;
    min-height: 44px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;

    gap: 10px;

    padding: 0 20px !important;

    background: transparent !important;

    border: 1px solid #6B1F2A !important;
    border-radius: 11px !important;

    color: #6B1F2A !important;

    cursor: pointer;

    font-family: 'Montserrat', sans-serif;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 0.5px;

    transition:
        background 0.28s ease,
        color 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease !important;
}


.habitaciones-premium .habitacion-ver span {
    font-size: 17px;

    transition: transform 0.28s ease;
}


.habitaciones-premium .habitacion-ver:hover {
    padding-left: 20px !important;

    background: #6B1F2A !important;

    color: #FFFFFF !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(107, 31, 42, 0.18);
}


.habitaciones-premium .habitacion-ver:hover span {
    transform: translateX(4px);
}


/* =========================================================
   IMAGEN - LADO DERECHO
   ========================================================= */

.habitaciones-premium .habitacion-imagen-wrap {
    order: 2;

    position: relative;

    width: 100% !important;
    height: 405px !important;

    margin: 0 !important;

    overflow: hidden;

    border-radius: 26px !important;

    background: #EEE7DE;
}


.habitaciones-premium .habitacion-imagen-wrap img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.6s ease;
}


.habitaciones-premium .habitacion-premium:hover
.habitacion-imagen-wrap img {
    transform: scale(1.025) !important;
}


/* ETIQUETA */

.habitaciones-premium .habitacion-etiqueta {
    position: absolute;

    top: 18px !important;
    right: 18px !important;

    padding: 8px 14px !important;

    border-radius: 50px;

    background: rgba(107, 31, 42, 0.93) !important;

    color: #FFFFFF !important;

    font-family: 'Montserrat', sans-serif;
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: 1px;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.18);
}


.habitaciones-premium .habitacion-etiqueta.especial {
    background: #8B2635 !important;
    color: #FFFFFF !important;
}


/* =========================================================
   ALTERNAR POSICIÓN
   1 y 3: texto izquierda / imagen derecha
   2 y 4: imagen izquierda / texto derecha
   ========================================================= */

.habitaciones-premium .habitacion-premium:nth-child(even)
.habitacion-info {
    order: 2;
}


.habitaciones-premium .habitacion-premium:nth-child(even)
.habitacion-imagen-wrap {
    order: 1;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 950px) {

    .habitaciones-premium {
        max-width: 760px !important;
        gap: 42px !important;
    }

    .habitaciones-premium .habitacion-premium {
        grid-template-columns: 1fr !important;

        gap: 28px !important;

        padding: 24px !important;
    }

    .habitaciones-premium .habitacion-info,
    .habitaciones-premium .habitacion-imagen-wrap,
    .habitaciones-premium .habitacion-premium:nth-child(even) .habitacion-info,
    .habitaciones-premium .habitacion-premium:nth-child(even) .habitacion-imagen-wrap {
        order: initial !important;
    }

    .habitaciones-premium .habitacion-imagen-wrap {
        height: 380px !important;
    }
}


@media (max-width: 700px) {

    .habitaciones-premium {
        max-width: 100% !important;
        gap: 32px !important;
    }

    .habitaciones-premium .habitacion-premium {
        padding: 16px !important;

        border-radius: 18px !important;
    }

    .habitaciones-premium .habitacion-info {
        padding: 8px 4px 10px !important;
    }

    .habitaciones-premium .habitacion-info h2 {
        font-size: 30px !important;
    }

    .habitaciones-premium .habitacion-imagen-wrap {
        height: 300px !important;

        border-radius: 18px !important;
    }

    .habitaciones-premium .habitacion-precios {
        max-width: none;
    }
}


@media (max-width: 450px) {

    .habitaciones-premium .habitacion-info h2 {
        font-size: 27px !important;
    }

    .habitaciones-premium .habitacion-info > p {
        font-size: 14px;
    }

    .habitaciones-premium .habitacion-imagen-wrap {
        height: 250px !important;
    }

    .habitaciones-premium .habitacion-precios {
        align-items: flex-start;
        flex-direction: column;

        gap: 2px;
    }
}


/* =========================================================
   RESPONSIVE CELULAR - AJUSTE GENERAL
   ========================================================= */

@media (max-width: 700px) {

    header.header {
        top: 0 !important;
        height: 78px !important;
        min-height: 78px !important;
        padding: 8px 14px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    header.header::after {
        left: 14px !important;
        right: 14px !important;
        bottom: 3px !important;
    }

    header.header .logo img {
        width: 125px !important;
        max-width: 125px !important;
    }

    header.header .menu {
        width: auto !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }

    header.header .menu a {
        padding: 6px 0 !important;
        font-size: 10px !important;
        letter-spacing: 0.1px !important;
    }

    .hero {
        height: 560px !important;
    }

    .hero-content {
        padding: 95px 20px 30px !important;
    }

    .hero-content h1 {
        max-width: 330px !important;
        margin-bottom: 14px !important;
        font-size: 38px !important;
        line-height: 1.08 !important;
    }

    .hero-content p {
        max-width: 320px !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .hero-content .btn {
        margin-top: 22px !important;
        padding: 12px 22px !important;
        font-size: 12px !important;
    }

    body:not(:has(.hero)) .pagina {
        padding-top: 115px !important;
    }

    .pagina {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .titulo {
        margin-bottom: 36px !important;
    }

    .titulo h1 {
        font-size: 34px !important;
        line-height: 1.12 !important;
    }

    .titulo p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    .bienvenida {
        padding: 68px 18px 72px !important;
    }

    .bienvenida-contenedor {
        grid-template-columns: 1fr !important;
        gap: 38px !important;
    }

    .bienvenida-texto h2 {
        font-size: 34px !important;
        line-height: 1.12 !important;
    }

    .bienvenida-texto p {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }

    .bienvenida-imagenes {
        min-height: 360px !important;
    }

    .bienvenida-img-principal {
        width: 92% !important;
        height: 290px !important;
    }

    .bienvenida-img-secundaria {
        width: 56% !important;
        height: 165px !important;
        border-width: 7px !important;
    }

    .servicios {
        padding: 62px 18px !important;
    }

    .servicios-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .servicio {
        max-width: 430px;
        margin: 0 auto;
        padding: 12px !important;
    }

    .habitaciones-pagina {
        padding-top: 112px !important;
        padding-bottom: 65px !important;
    }

    .habitaciones-premium {
        width: 100% !important;
        max-width: 100% !important;
        gap: 30px !important;
    }

    .habitaciones-premium .habitacion-premium {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .habitaciones-premium .habitacion-info,
    .habitaciones-premium .habitacion-imagen-wrap,
    .habitaciones-premium .habitacion-premium:nth-child(even) .habitacion-info,
    .habitaciones-premium .habitacion-premium:nth-child(even) .habitacion-imagen-wrap {
        order: initial !important;
    }

    .habitaciones-premium .habitacion-imagen-wrap {
        height: 245px !important;
        border-radius: 16px !important;
    }

    .habitaciones-premium .habitacion-info {
        padding: 8px 4px 12px !important;
    }

    .habitaciones-premium .habitacion-info h2 {
        font-size: 28px !important;
    }

    .habitaciones-premium .habitacion-info > p {
        font-size: 14px !important;
    }

    .habitacion-modal {
        padding: 10px !important;
    }

    .habitacion-modal-contenido {
        max-height: 92vh !important;
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }

    .habitacion-modal-imagen {
        min-height: 230px !important;
        height: 230px !important;
    }

    .habitacion-modal-info {
        padding: 32px 18px 22px !important;
    }

    .habitacion-modal-info h2 {
        font-size: 28px !important;
    }

    .modal-caracteristicas {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .modal-acciones {
        flex-direction: column !important;
    }

    .modal-volver,
    .modal-reservar {
        width: 100% !important;
    }

    .formulario-container {
        padding: 24px 16px !important;
    }

    .fila,
    .contacto {
        grid-template-columns: 1fr !important;
    }

    .footer-premium {
        padding: 26px 18px 20px !important;
    }

    .footer-contenedor {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .footer-logo {
        width: 150px !important;
    }
}

@media (max-width: 430px) {

    header.header .logo img {
        width: 112px !important;
        max-width: 112px !important;
    }

    header.header .menu {
        gap: 7px !important;
    }

    header.header .menu a {
        font-size: 9px !important;
    }

    .hero {
        height: 520px !important;
    }

    .hero-content h1 {
        max-width: 300px !important;
        font-size: 34px !important;
    }

    .bienvenida-texto h2 {
        font-size: 31px !important;
    }

    .bienvenida-imagenes {
        min-height: 325px !important;
    }

    .bienvenida-img-principal {
        width: 100% !important;
        height: 260px !important;
    }

    .bienvenida-img-secundaria {
        width: 58% !important;
        height: 145px !important;
    }

    .habitaciones-premium .habitacion-imagen-wrap {
        height: 220px !important;
    }
}

/* =========================================================
   HERO YOUTUBE - AJUSTE FINAL
   ========================================================= */

.hero-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 0 !important;
}

.hero-youtube {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 100vw !important;
    height: 56.25vw !important;

    min-width: 177.78vh !important;
    min-height: 100vh !important;

    transform: translate(-50%, -50%) !important;

    border: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 700px) {
    .hero-youtube {
        width: 177.78vh !important;
        height: 100vh !important;
        min-width: 100% !important;
        min-height: 100% !important;
    }
}

/* =========================================================
   MOBILE FINAL - HOTEL LOS APUS CENTRAL
   IMPORTANTE:
   - Todo este bloque actúa SOLO en pantallas <= 700px.
   - La versión de computadora permanece sin cambios.
   - Compatible con index_PC_intacto_movil_preparado.php
     y header_PC_intacto_movil_preparado.php
   ========================================================= */

@media (max-width: 700px) {

    /* =====================================================
       HEADER MÓVIL
       ===================================================== */

    header.header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 84px !important;
        min-height: 84px !important;

        padding: 8px 18px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        z-index: 9999 !important;
    }

    header.header::after {
        display: block !important;

        left: 18px !important;
        right: 18px !important;
        bottom: 0 !important;

        height: 1px !important;

        background: rgba(255, 255, 255, 0.34) !important;
    }

    header.header .logo {
        position: relative !important;
        z-index: 10003 !important;

        flex: 0 0 auto !important;
    }

    header.header .logo img {
        width: 132px !important;
        max-width: 132px !important;
        height: auto !important;
    }


    /* =====================================================
       BOTÓN HAMBURGUESA
       El botón es creado por JavaScript solo en celular.
       ===================================================== */

    .menu-toggle {
        position: relative !important;
        z-index: 10003 !important;

        width: 46px !important;
        height: 46px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        margin: 0 !important;
        padding: 8px !important;

        background: rgba(47, 17, 23, 0.16) !important;

        border: 1px solid rgba(211, 178, 118, 0.34) !important;
        border-radius: 50% !important;

        box-shadow: none !important;

        cursor: pointer !important;

        -webkit-tap-highlight-color: transparent;
    }

    .menu-toggle span {
        display: block !important;

        width: 24px !important;
        height: 2px !important;

        margin: 0 !important;

        background: #F6E8DF !important;
        border-radius: 10px !important;

        transform-origin: center !important;

        transition:
            transform 0.28s ease,
            opacity 0.22s ease,
            background-color 0.28s ease !important;
    }

    .menu-toggle.activo span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }

    .menu-toggle.activo span:nth-child(2) {
        opacity: 0 !important;
    }

    .menu-toggle.activo span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }


    /* =====================================================
       MENÚ DESPLEGABLE
       ===================================================== */

    header.header .menu {
        position: absolute !important;

        top: 76px !important;
        left: 18px !important;
        right: 18px !important;

        width: auto !important;
        height: auto !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;

        gap: 0 !important;

        margin: 0 !important;
        padding: 12px 18px 14px !important;

        background:
            linear-gradient(
                145deg,
                rgba(48, 18, 24, 0.98),
                rgba(72, 20, 29, 0.97)
            ) !important;

        border: 1px solid rgba(211, 178, 118, 0.28) !important;
        border-top: 0 !important;
        border-radius: 0 0 14px 14px !important;

        box-shadow:
            0 18px 35px rgba(0, 0, 0, 0.28) !important;

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateY(-12px) !important;

        pointer-events: none !important;

        transition:
            opacity 0.28s ease,
            visibility 0.28s ease,
            transform 0.28s ease !important;

        z-index: 10002 !important;
    }

    header.header .menu.menu-abierto {
        opacity: 1 !important;
        visibility: visible !important;

        transform: translateY(0) !important;

        pointer-events: auto !important;
    }

    header.header .menu a {
        position: relative !important;

        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 14px 4px !important;

        color: #F8EDE5 !important;
        background: transparent !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;

        text-align: left !important;
        text-decoration: none !important;

        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.8px !important;

        transform: none !important;
    }

    header.header .menu a:last-child {
        border-bottom: 0 !important;
    }

    header.header .menu a::after {
        display: none !important;
    }

    header.header .menu a:hover {
        color: #E4C690 !important;
        transform: none !important;
    }


    /* =====================================================
       HERO MÓVIL
       ===================================================== */

    .hero {
        height: 620px !important;
        min-height: 620px !important;
    }

    .hero-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(32, 18, 18, 0.30) 0%,
                rgba(54, 20, 25, 0.46) 45%,
                rgba(62, 18, 28, 0.68) 100%
            ) !important;
    }

    .hero-content {
        width: 100% !important;
        height: 100% !important;

        justify-content: center !important;
        align-items: center !important;

        padding: 105px 20px 28px !important;
    }

    .hero-content h1 {
        width: 100% !important;
        max-width: 350px !important;

        margin: 0 0 16px !important;

        font-size: 39px !important;
        line-height: 1.06 !important;
        letter-spacing: 0.2px !important;

        text-wrap: balance;
    }

    .hero-content > p {
        width: 100% !important;
        max-width: 315px !important;

        margin: 0 auto !important;

        font-size: 13px !important;
        line-height: 1.7 !important;
        letter-spacing: 0.25px !important;
    }

    .hero-content .btn {
        margin-top: 23px !important;

        padding: 12px 25px !important;

        font-size: 12px !important;
        letter-spacing: 0.45px !important;

        border: 1px solid rgba(211, 178, 118, 0.52) !important;
        border-radius: 5px !important;
    }


    /* =====================================================
       MENSAJES ANIMADOS DEL HERO
       Este bloque solo existe en móvil porque JS lo crea
       únicamente por debajo de 700px.
       ===================================================== */

    .hero-mensajes-movil {
        width: 100% !important;
        max-width: 340px !important;

        display: block !important;

        margin: 42px auto 0 !important;

        text-align: center !important;
    }

    .mensaje-decoracion {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        margin: 0 0 13px !important;
    }

    .mensaje-decoracion span {
        display: block !important;

        width: 38px !important;
        height: 1px !important;

        background: rgba(218, 181, 118, 0.72) !important;
    }

    .mensaje-decoracion i {
        color: #DAB576 !important;

        font-size: 10px !important;
        font-style: normal !important;
        line-height: 1 !important;
    }

    .mensaje-contenedor {
        position: relative !important;

        width: 100% !important;
        height: 42px !important;

        display: block !important;

        overflow: hidden !important;
    }

    .hero-content .mensaje-hotel,
    .mensaje-hotel {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 42px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 10px !important;

        color: rgba(255, 244, 234, 0.90) !important;

        font-family: 'Montserrat', sans-serif !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        letter-spacing: 0.9px !important;

        text-shadow: 0 2px 7px rgba(0, 0, 0, 0.30) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateY(10px) !important;

        animation: none !important;

        transition:
            opacity 0.60s ease,
            transform 0.60s ease,
            visibility 0.60s ease !important;
    }

    .hero-content .mensaje-hotel.activo,
    .mensaje-hotel.activo {
        opacity: 1 !important;
        visibility: visible !important;

        transform: translateY(0) !important;
    }

    .mensaje-indicadores {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;

        margin: 12px 0 0 !important;
    }

    .mensaje-punto {
        width: 6px !important;
        height: 6px !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        background: rgba(255, 255, 255, 0.36) !important;

        border: 0 !important;
        border-radius: 20px !important;

        cursor: pointer !important;

        transition:
            width 0.28s ease,
            background-color 0.28s ease !important;
    }

    .mensaje-punto.activo {
        width: 23px !important;

        background: #DAB576 !important;
    }


    /* =====================================================
       PÁGINAS INTERNAS EN CELULAR
       Mantiene el botón hamburguesa visible sobre fondo claro.
       ===================================================== */

    body:not(:has(.hero)) header.header {
        background: #FCF9F3 !important;
    }

    body:not(:has(.hero)) header.header::after {
        display: block !important;

        background: rgba(107, 31, 42, 0.16) !important;
    }

    body:not(:has(.hero)) .menu-toggle {
        background: rgba(107, 31, 42, 0.05) !important;
        border-color: rgba(107, 31, 42, 0.20) !important;
    }

    body:not(:has(.hero)) .menu-toggle span {
        background: #6B1F2A !important;
    }

    body:not(:has(.hero)) header.header .menu a {
        color: #F8EDE5 !important;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 430px) {

    header.header {
        height: 80px !important;
        min-height: 80px !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    header.header::after {
        left: 15px !important;
        right: 15px !important;
    }

    header.header .logo img {
        width: 118px !important;
        max-width: 118px !important;
    }

    .menu-toggle {
        width: 43px !important;
        height: 43px !important;
    }

    header.header .menu {
        top: 73px !important;
        left: 15px !important;
        right: 15px !important;
    }

    .hero {
        height: 590px !important;
        min-height: 590px !important;
    }

    .hero-content {
        padding: 96px 17px 24px !important;
    }

    .hero-content h1 {
        max-width: 315px !important;

        font-size: 35px !important;
    }

    .hero-content > p {
        max-width: 285px !important;

        font-size: 12px !important;
    }

    .hero-content .btn {
        margin-top: 20px !important;
    }

    .hero-mensajes-movil {
        max-width: 310px !important;

        margin-top: 35px !important;
    }

    .hero-content .mensaje-hotel,
    .mensaje-hotel {
        font-size: 10.5px !important;
        letter-spacing: 0.7px !important;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {

    header.header .menu,
    .menu-toggle span,
    .mensaje-hotel,
    .mensaje-punto {
        transition: none !important;
    }

}


/* =========================================================
   MAPA GOOGLE MAPS - INICIO
   ========================================================= */

.mapa-seccion {
    width: 100%;
    padding: 85px 7% 90px;
    background: #FCF9F3;
}

.mapa-seccion .titulo {
    margin-bottom: 38px;
}

.mapa-seccion .titulo .subtitulo {
    display: block;
    margin-bottom: 10px;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #8B2635;
}

.mapa-seccion .titulo h2 {
    margin-bottom: 12px;

    font-family: 'DM Serif Display', serif;
    font-size: 46px;
    font-weight: 400;
    line-height: 1.15;

    color: #6B1F2A;
}

.mapa-seccion .titulo p {
    max-width: 650px;
    margin: 0 auto;

    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: #75665A;
}

.mapa-hotel {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    overflow: hidden;

    background: #F7F1E5;

    border: 1px solid #E5D8C3;
    border-radius: 18px;

    box-shadow:
        0 12px 32px rgba(48, 38, 33, 0.12);
}

.mapa-hotel iframe {
    display: block;

    width: 100%;
    height: 430px;

    border: 0;
}

.mapa-acciones {
    width: 100%;
    max-width: 1180px;

    margin: 18px auto 0;

    text-align: right;
}

.mapa-link {
    position: relative;

    display: inline-block;

    padding-bottom: 4px;

    color: #6B1F2A;

    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;

    text-decoration: none;

    transition: color 0.25s ease;
}

.mapa-link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 45%;
    height: 1px;

    background: #B89A68;

    transition: width 0.25s ease;
}

.mapa-link:hover {
    color: #4A141D;
}

.mapa-link:hover::after {
    width: 100%;
}


/* SOLO CELULAR */

@media (max-width: 700px) {

    .mapa-seccion {
        padding: 62px 18px 65px;
    }

    .mapa-seccion .titulo {
        margin-bottom: 28px;
    }

    .mapa-seccion .titulo h2 {
        font-size: 35px;
    }

    .mapa-seccion .titulo p {
        max-width: 320px;
        font-size: 13px;
    }

    .mapa-hotel {
        border-radius: 14px;
    }

    .mapa-hotel iframe {
        height: 330px;
    }

    .mapa-acciones {
        margin-top: 15px;
        text-align: center;
    }

}


/* =========================================================
   MAPA GOOGLE MAPS - AJUSTE FINAL
   SOLO modifica la sección del mapa.
   No altera header, hero, servicios, footer ni responsive existente.
   ========================================================= */

.mapa-seccion {
    width: 100% !important;
    padding: 85px 7% 90px !important;
    background: #FCF9F3 !important;
}

.mapa-seccion .titulo {
    margin-bottom: 38px !important;
}

.mapa-hotel {
    width: 100% !important;
    max-width: 1180px !important;
    height: 460px !important;

    margin: 0 auto !important;

    display: block !important;
    overflow: hidden !important;

    background: #EEE5D9 !important;

    border: 1px solid #E1D2BF !important;
    border-radius: 18px !important;

    box-shadow:
        0 16px 38px rgba(48, 38, 33, 0.14) !important;
}

.mapa-hotel iframe {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 460px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

.mapa-acciones {
    width: 100% !important;
    max-width: 1180px !important;

    margin: 22px auto 0 !important;

    text-align: center !important;
}

.mapa-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;

    padding: 0 22px !important;

    background: #6B1F2A !important;
    color: #FFFFFF !important;

    border: 1px solid #6B1F2A !important;
    border-radius: 50px !important;

    text-decoration: none !important;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.45px !important;

    box-shadow:
        0 7px 18px rgba(107, 31, 42, 0.16) !important;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}

.mapa-link::after {
    display: none !important;
    content: none !important;
}

.mapa-link:hover {
    background: #4A141D !important;
    color: #FFFFFF !important;
    border-color: #4A141D !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 10px 22px rgba(74, 20, 29, 0.20) !important;
}


/* MAPA - SOLO CELULAR */

@media (max-width: 700px) {

    .mapa-seccion {
        padding: 62px 18px 65px !important;
    }

    .mapa-seccion .titulo {
        margin-bottom: 28px !important;
    }

    .mapa-hotel {
        width: 100% !important;
        height: 340px !important;

        border-radius: 14px !important;
    }

    .mapa-hotel iframe {
        width: 100% !important;
        height: 100% !important;
        min-height: 340px !important;
    }

    .mapa-acciones {
        margin-top: 18px !important;
    }

    .mapa-link {
        min-height: 42px !important;

        padding: 0 19px !important;

        font-size: 11px !important;
    }

}


/* MAPA - CELULARES PEQUEÑOS */

@media (max-width: 430px) {

    .mapa-hotel {
        height: 310px !important;
    }

    .mapa-hotel iframe {
        min-height: 310px !important;
    }

}


/* =========================================================
   SERVICIOS - BOTONES DE DETALLE + MODAL
   ========================================================= */

.orbita-ver-detalles,
.servicio-detalles {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.orbita-ver-detalles {
    padding-left: 0;
    padding-right: 0;
}

.servicio-detalles {
    padding-left: 0;
    padding-right: 0;
}

body.modal-servicio-abierto {
    overflow: hidden;
}

.servicio-modal {
    position: fixed;
    inset: 0;
    z-index: 25000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.32s ease,
        visibility 0.32s ease;
}

.servicio-modal.activo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.servicio-modal-fondo {
    position: absolute;
    inset: 0;

    background: rgba(25, 18, 16, 0.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.servicio-modal-contenido {
    position: relative;
    z-index: 2;

    width: min(940px, 94vw);
    max-height: 88vh;

    display: grid;
    grid-template-columns: 1.08fr 0.92fr;

    overflow: hidden;

    background: #FFFDF8;
    border: 1px solid rgba(184, 154, 104, 0.46);
    border-radius: 24px;

    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.34),
        0 10px 28px rgba(74, 20, 29, 0.12);

    transform: translateY(24px) scale(0.965);

    transition:
        transform 0.4s cubic-bezier(.22, .8, .22, 1);
}

.servicio-modal.activo .servicio-modal-contenido {
    transform: translateY(0) scale(1);
}

.servicio-modal-imagen {
    min-height: 500px;
    background: #302621;
    overflow: hidden;
}

.servicio-modal-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.servicio-modal-info {
    padding: 58px 46px 42px;
    overflow-y: auto;
}

.servicio-modal-kicker {
    display: block;
    margin-bottom: 12px;

    color: #8B2635;

    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.7px;
}

.servicio-modal-info h3 {
    margin: 0 0 18px;

    color: #6B1F2A;

    font-family: 'DM Serif Display', serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.08;
}

.servicio-modal-info > p {
    margin: 0;

    color: #6A5D53;

    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.82;
}

.servicio-modal-linea {
    width: 52px;
    height: 1px;

    margin: 25px 0 24px;

    background: #B89A68;
}

.servicio-modal-datos {
    display: grid;
    gap: 11px;
}

.servicio-modal-dato {
    padding: 13px 15px;

    background: #F7F1E5;
    border: 1px solid #E8DCCB;
    border-radius: 11px;

    font-family: 'Montserrat', sans-serif;
}

.servicio-modal-dato span {
    display: block;
    margin-bottom: 4px;

    color: #9A7A50;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.servicio-modal-dato strong {
    display: block;

    color: #4A3830;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.servicio-modal-cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: rgba(255, 253, 248, 0.94);
    border: 1px solid rgba(184, 154, 104, 0.48);
    border-radius: 50%;

    color: #6B1F2A;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 7px 18px rgba(48, 38, 33, 0.14);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.servicio-modal-cerrar:hover {
    transform: rotate(90deg);
    background: #F7F1E5;
    box-shadow: 0 9px 22px rgba(48, 38, 33, 0.18);
}

.servicio-modal-cerrar:focus-visible,
.orbita-ver-detalles:focus-visible,
.servicio-detalles:focus-visible {
    outline: 2px solid #B89A68;
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .servicio-modal-contenido {
        width: min(700px, 94vw);
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .servicio-modal-imagen {
        min-height: 310px;
        height: 310px;
    }
}

@media (max-width: 700px) {
    .servicio-modal {
        padding: 14px;
    }

    .servicio-modal-contenido {
        width: 100%;
        max-height: 92vh;
        border-radius: 18px;
    }

    .servicio-modal-imagen {
        min-height: 230px;
        height: 230px;
    }

    .servicio-modal-info {
        padding: 31px 23px 30px;
    }

    .servicio-modal-info h3 {
        font-size: 34px;
    }

    .servicio-modal-info > p {
        font-size: 12.5px;
        line-height: 1.75;
    }

    .servicio-modal-cerrar {
        top: 12px;
        right: 12px;
        width: 37px;
        height: 37px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .servicio-modal,
    .servicio-modal-contenido,
    .servicio-modal-cerrar {
        transition: none !important;
    }
}


/* =========================================================
   SERVICIOS - MODAL PREMIUM V2
   Refuerzo visual y de compatibilidad.
   ========================================================= */
#servicioModal.servicio-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: grid !important;
    place-items: center !important;
    padding: 28px !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#servicioModal.servicio-modal.activo {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#servicioModal .servicio-modal-fondo {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(18, 13, 12, .76) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

#servicioModal .servicio-modal-contenido {
    position: relative !important;
    z-index: 2 !important;
    width: min(980px, 94vw) !important;
    height: min(560px, 86vh) !important;
    max-height: 86vh !important;
    display: grid !important;
    grid-template-columns: 1.08fr .92fr !important;
    overflow: hidden !important;
    background: #FFFDF8 !important;
    border: 1px solid rgba(184,154,104,.42) !important;
    border-radius: 26px !important;
    box-shadow: 0 36px 100px rgba(0,0,0,.42), 0 10px 28px rgba(107,31,42,.16) !important;
    transform: translateY(24px) scale(.965) !important;
    transition: transform .38s cubic-bezier(.22,.8,.22,1) !important;
}

#servicioModal.servicio-modal.activo .servicio-modal-contenido {
    transform: translateY(0) scale(1) !important;
}

#servicioModal .servicio-modal-imagen {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #241A17 !important;
}

#servicioModal .servicio-modal-imagen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 62%, rgba(36,26,23,.14) 100%);
    pointer-events: none;
}

#servicioModal .servicio-modal-imagen img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

#servicioModal .servicio-modal-info {
    position: relative !important;
    height: 100% !important;
    padding: 54px 46px 42px !important;
    overflow-y: auto !important;
    background: linear-gradient(145deg,#FFFDF8 0%,#FBF5EA 100%) !important;
}

#servicioModal .servicio-modal-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    color: #9A3140 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 2.6px !important;
}

#servicioModal .servicio-modal-kicker::before {
    content: "";
    width: 30px;
    height: 1px;
    background: #B89A68;
}

#servicioModal .servicio-modal-info h3 {
    margin: 0 0 16px !important;
    color: #6B1F2A !important;
    font-family: 'DM Serif Display', serif !important;
    font-size: clamp(34px, 3.2vw, 48px) !important;
    font-weight: 400 !important;
    line-height: 1.04 !important;
}

#servicioModal .servicio-modal-info > p {
    margin: 0 !important;
    color: #67584F !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.78 !important;
}

#servicioModal .servicio-modal-linea {
    width: 48px !important;
    height: 1px !important;
    margin: 24px 0 22px !important;
    background: #B89A68 !important;
}

#servicioModal .servicio-modal-datos {
    display: grid !important;
    gap: 10px !important;
}

#servicioModal .servicio-modal-dato {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: rgba(255,255,255,.64) !important;
    border: 1px solid #E6D9C8 !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 14px rgba(48,38,33,.045) !important;
}

#servicioModal .servicio-modal-dato span {
    display: block !important;
    margin: 0 !important;
    color: #A37D4D !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

#servicioModal .servicio-modal-dato strong {
    display: block !important;
    margin: 0 !important;
    color: #4A3830 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

#servicioModal .servicio-modal-cerrar {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10 !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: rgba(255,253,248,.96) !important;
    border: 1px solid rgba(184,154,104,.5) !important;
    border-radius: 50% !important;
    color: #6B1F2A !important;
    font: 400 25px/1 Arial, sans-serif !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(48,38,33,.16) !important;
}

#servicioModal .servicio-modal-cerrar:hover {
    background: #6B1F2A !important;
    color: #fff !important;
    transform: rotate(90deg) !important;
}

@media (max-width: 900px) {
    #servicioModal.servicio-modal { padding: 18px !important; }
    #servicioModal .servicio-modal-contenido {
        width: min(680px, 96vw) !important;
        height: auto !important;
        max-height: 92vh !important;
        grid-template-columns: 1fr !important;
        overflow-y: auto !important;
    }
    #servicioModal .servicio-modal-imagen {
        height: 280px !important;
        min-height: 280px !important;
    }
    #servicioModal .servicio-modal-info {
        height: auto !important;
        padding: 34px 28px 30px !important;
        overflow: visible !important;
    }
}

@media (max-width: 520px) {
    #servicioModal.servicio-modal { padding: 10px !important; }
    #servicioModal .servicio-modal-contenido {
        width: 100% !important;
        border-radius: 18px !important;
    }
    #servicioModal .servicio-modal-imagen {
        height: 215px !important;
        min-height: 215px !important;
    }
    #servicioModal .servicio-modal-info {
        padding: 28px 20px 24px !important;
    }
    #servicioModal .servicio-modal-info h3 {
        font-size: 34px !important;
    }
    #servicioModal .servicio-modal-dato {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }
}


/* =========================================================
   V4 - TIPOGRAFÍA + REVEAL RESPONSIVE
   Hotel Los Apus Central
   ========================================================= */

/* -------- HERO: texto con mayor presencia -------- */
#heroInicio.hero-intro-v4 .hero-content {
    padding-inline: clamp(20px, 6vw, 90px) !important;
}

#heroInicio.hero-intro-v4 .hero-content h1 {
    width: min(920px, 92vw);
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(48px, 5.3vw, 76px) !important;
    line-height: 1.04 !important;
    letter-spacing: .2px !important;
}

#heroInicio.hero-intro-v4 .hero-content p {
    width: min(760px, 88vw);
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(17px, 1.35vw, 21px) !important;
    line-height: 1.65 !important;
}

#heroInicio.hero-intro-v4 .hero-content .btn {
    min-height: 50px;
    padding: 0 30px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
}

/* -------- BIENVENIDA: legibilidad -------- */
.bienvenida-subtitulo {
    font-size: 12px !important;
    letter-spacing: 3.2px !important;
}

.bienvenida-texto h2 {
    font-size: clamp(46px, 4.1vw, 62px) !important;
    line-height: 1.08 !important;
}

.bienvenida-texto p {
    max-width: 680px !important;
    font-size: clamp(16px, 1.25vw, 18px) !important;
    line-height: 1.9 !important;
}

.bienvenida-link {
    margin-top: 18px !important;
    font-size: 14px !important;
}

/* -------- TÍTULOS DE SECCIONES -------- */
.lugares-cercanos-titulo h2,
.servicios .titulo h2,
.mapa-info-titulo h2 {
    font-size: clamp(42px, 4.1vw, 58px) !important;
    line-height: 1.08 !important;
}

.lugares-cercanos-titulo p,
.servicios .titulo p,
.mapa-info-titulo p {
    font-size: clamp(15px, 1.15vw, 17px) !important;
    line-height: 1.8 !important;
}

/* =========================================================
   REVEAL AL HACER SCROLL
   Solo se oculta cuando JS confirma que el efecto está listo.
   ========================================================= */
html.reveal-v4-ready .reveal-v4 {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(.985);
    filter: blur(7px);
    transition:
        opacity .82s ease var(--reveal-delay, 0ms),
        transform .92s cubic-bezier(.2,.75,.2,1) var(--reveal-delay, 0ms),
        filter .72s ease var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

html.reveal-v4-ready .reveal-v4.reveal-v4-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* Las imágenes entran ligeramente desde el costado en pantallas amplias. */
@media (min-width: 901px) {
    html.reveal-v4-ready .bienvenida-imagenes.reveal-v4 {
        transform: translate3d(45px, 22px, 0) scale(.98);
    }

    html.reveal-v4-ready .bienvenida-imagenes.reveal-v4.reveal-v4-visible {
        transform: translate3d(0, 0, 0) scale(1);
    }

    html.reveal-v4-ready .bienvenida-texto.reveal-v4 {
        transform: translate3d(-34px, 26px, 0);
    }

    html.reveal-v4-ready .bienvenida-texto.reveal-v4.reveal-v4-visible {
        transform: translate3d(0, 0, 0);
    }
}

/* -------- TABLET -------- */
@media (max-width: 1000px) {
    #heroInicio.hero-intro-v4 .hero-content h1 {
        font-size: clamp(44px, 6.2vw, 60px) !important;
    }

    #heroInicio.hero-intro-v4 .hero-content p {
        font-size: 17px !important;
    }

    .bienvenida-texto h2 {
        font-size: clamp(42px, 5.6vw, 52px) !important;
    }

    .bienvenida-texto p {
        font-size: 16px !important;
    }
}

/* -------- CELULAR -------- */
@media (max-width: 700px) {
    #heroInicio.hero-intro-v4 {
        min-height: 560px !important;
    }

    #heroInicio.hero-intro-v4 .hero-content {
        padding: 105px 20px 42px !important;
        justify-content: center !important;
    }

    #heroInicio.hero-intro-v4 .hero-content h1 {
        width: min(94vw, 430px);
        font-size: clamp(36px, 10.3vw, 46px) !important;
        line-height: 1.04 !important;
    }

    #heroInicio.hero-intro-v4 .hero-content p {
        width: min(90vw, 390px);
        font-size: 15.5px !important;
        line-height: 1.65 !important;
    }

    #heroInicio.hero-intro-v4 .hero-content .btn {
        min-height: 47px;
        padding: 0 24px !important;
        font-size: 12px !important;
    }

    .bienvenida {
        padding-top: 76px !important;
        padding-bottom: 82px !important;
    }

    .bienvenida-texto h2 {
        font-size: clamp(36px, 10vw, 43px) !important;
        line-height: 1.08 !important;
    }

    .bienvenida-texto p {
        font-size: 15.5px !important;
        line-height: 1.82 !important;
    }

    .bienvenida-link {
        font-size: 13px !important;
    }

    .lugares-cercanos-titulo h2,
    .servicios .titulo h2,
    .mapa-info-titulo h2 {
        font-size: clamp(34px, 9vw, 42px) !important;
    }

    html.reveal-v4-ready .reveal-v4 {
        transform: translate3d(0, 28px, 0) scale(.99);
        filter: blur(4px);
        transition-duration: .72s, .82s, .6s;
    }
}

@media (max-width: 430px) {
    #heroInicio.hero-intro-v4 .hero-content h1 {
        font-size: clamp(34px, 10vw, 40px) !important;
    }

    .bienvenida-texto h2 {
        font-size: 34px !important;
    }

    .bienvenida-texto p {
        font-size: 15px !important;
    }
}

/* Accesibilidad / equipos que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    html.reveal-v4-ready .reveal-v4,
    html.reveal-v4-ready .reveal-v4.reveal-v4-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* =========================================================
   FOOTER V5 - MÁS GRANDE, LEGIBLE Y RESPONSIVE
   ========================================================= */

.footer-premium {
    padding: 64px 6% 34px !important;
}

.footer-linea {
    max-width: 1280px !important;
    margin-bottom: 50px !important;
}

.footer-contenedor {
    max-width: 1280px !important;
    grid-template-columns: 1.45fr 0.8fr 0.85fr 1.25fr !important;
    gap: 68px !important;
}

.footer-logo {
    width: 250px !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
}

.footer-nombre {
    margin-bottom: 12px !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
}

.footer-col h3 {
    margin-bottom: 22px !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
}

.footer-col p,
.footer-col span,
.footer-col > a {
    margin-bottom: 11px !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
}

.footer-redes {
    gap: 12px !important;
    margin-top: 24px !important;
}

.footer-redes .red-social {
    width: 46px !important;
    height: 46px !important;
}

.footer-redes .red-social img {
    width: 24px !important;
    height: 24px !important;
}

.footer-linea-inferior {
    margin-top: 52px !important;
    margin-bottom: 28px !important;
}

.footer-bottom {
    max-width: 1280px !important;
}

.footer-bottom p,
.footer-bottom-links a {
    font-size: 13px !important;
}

/* TABLET */
@media (max-width: 1000px) {
    .footer-premium {
        padding: 54px 5% 30px !important;
    }

    .footer-contenedor {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 48px 42px !important;
    }

    .footer-logo {
        width: 220px !important;
    }

    .footer-col h3 {
        font-size: 25px !important;
    }
}

/* CELULAR */
@media (max-width: 700px) {
    .footer-premium {
        padding: 46px 22px 26px !important;
    }

    .footer-linea {
        margin-bottom: 38px !important;
    }

    .footer-contenedor {
        grid-template-columns: 1fr !important;
        gap: 38px !important;
    }

    .footer-logo {
        width: 210px !important;
        margin-bottom: 20px !important;
    }

    .footer-nombre {
        font-size: 22px !important;
    }

    .footer-col h3 {
        font-size: 24px !important;
        margin-bottom: 18px !important;
    }

    .footer-col p,
    .footer-col span,
    .footer-col > a {
        font-size: 14px !important;
    }

    .footer-redes {
        gap: 10px !important;
    }

    .footer-redes .red-social {
        width: 44px !important;
        height: 44px !important;
    }

    .footer-linea-inferior {
        margin-top: 40px !important;
        margin-bottom: 24px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .footer-bottom p,
    .footer-bottom-links a {
        font-size: 12px !important;
    }
}

/* CELULARES PEQUEÑOS */
@media (max-width: 430px) {
    .footer-premium {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .footer-logo {
        width: 195px !important;
    }

    .footer-nombre {
        font-size: 21px !important;
    }

    .footer-col h3 {
        font-size: 23px !important;
    }

    .footer-redes .red-social {
        width: 42px !important;
        height: 42px !important;
    }

    .footer-redes .red-social img {
        width: 22px !important;
        height: 22px !important;
    }
}


/* =========================================================
   FOOTER V6 - MÁS COMPACTO SIN PERDER PRESENCIA
   ========================================================= */

.footer-premium {
    padding: 34px 6% 18px !important;
}

.footer-linea {
    margin-bottom: 26px !important;
}

.footer-contenedor {
    max-width: 1180px !important;
    grid-template-columns: 1.25fr .8fr .8fr 1.2fr !important;
    gap: 42px !important;
}

.footer-logo {
    width: 220px !important;
    max-width: 220px !important;
    margin-bottom: 12px !important;
}

.footer-nombre {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    font-size: 20px !important;
}

.footer-col h3 {
    margin-bottom: 14px !important;
    font-size: 24px !important;
}

.footer-col p,
.footer-col span,
.footer-col > a {
    margin-bottom: 6px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.footer-redes {
    margin-top: 14px !important;
    gap: 9px !important;
}

.footer-redes .red-social {
    width: 42px !important;
    height: 42px !important;
}

.footer-redes .red-social img {
    width: 21px !important;
    height: 21px !important;
}

.footer-linea-inferior {
    margin-top: 24px !important;
    margin-bottom: 16px !important;
}

.footer-bottom {
    gap: 18px !important;
}

.footer-bottom p,
.footer-bottom-links a {
    font-size: 11px !important;
}

@media (max-width: 950px) {
    .footer-contenedor {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 28px 34px !important;
    }

    .footer-logo {
        width: 205px !important;
        max-width: 205px !important;
    }
}

@media (max-width: 650px) {
    .footer-premium {
        padding: 28px 22px 16px !important;
    }

    .footer-linea {
        margin-bottom: 22px !important;
    }

    .footer-contenedor {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .footer-logo {
        width: 190px !important;
        max-width: 190px !important;
    }

    .footer-col h3 {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }

    .footer-col p,
    .footer-col span,
    .footer-col > a {
        font-size: 13px !important;
    }

    .footer-linea-inferior {
        margin-top: 20px !important;
        margin-bottom: 14px !important;
    }
}

/* =========================================================
   HEADER DINÁMICO AL HACER SCROLL
   Transparente arriba / granate oscuro al desplazarse
   PC + TABLET + CELULAR
   ========================================================= */

header.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    background: transparent !important;
    border-bottom: 1px solid transparent !important;

    box-shadow: none !important;

    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);

    transition:
        background-color .48s cubic-bezier(.22,.8,.22,1),
        box-shadow .48s ease,
        border-color .48s ease,
        min-height .42s ease,
        height .42s ease,
        padding .42s ease,
        backdrop-filter .48s ease !important;

    will-change: background-color, backdrop-filter;
}

/* Línea elegante mientras estamos sobre el hero */
body:has(.hero) header.header:not(.header-scrolled)::after {
    opacity: .72 !important;
    transition: opacity .4s ease, background-color .4s ease !important;
}

/* Estado después de empezar a bajar */
header.header.header-scrolled {
    top: 0 !important;

    height: 76px !important;
    min-height: 76px !important;

    padding-top: 7px !important;
    padding-bottom: 7px !important;

    /* No es negro: conserva el granate/marrón del hotel */
    background:
        linear-gradient(
            110deg,
            rgba(43, 29, 26, .965) 0%,
            rgba(58, 28, 31, .965) 62%,
            rgba(74, 20, 29, .965) 100%
        ) !important;

    border-bottom: 1px solid rgba(184, 154, 104, .22) !important;

    -webkit-backdrop-filter: blur(13px) saturate(115%);
    backdrop-filter: blur(13px) saturate(115%);

    box-shadow:
        0 10px 30px rgba(25, 15, 14, .18),
        0 1px 0 rgba(255, 255, 255, .025) !important;
}

header.header.header-scrolled::after {
    opacity: 0 !important;
}

/* El logo se reduce apenas al bajar */
header.header .logo img {
    transition:
        width .42s cubic-bezier(.22,.8,.22,1),
        max-width .42s cubic-bezier(.22,.8,.22,1),
        transform .42s ease,
        filter .42s ease !important;
}

header.header.header-scrolled .logo img {
    width: 168px !important;
    max-width: 168px !important;

    filter: drop-shadow(0 3px 8px rgba(0,0,0,.12));
}

/* Menú claro sobre el fondo oscuro del header */
header.header.header-scrolled .menu a {
    color: #F5E8E3 !important;
}

header.header.header-scrolled .menu a:hover {
    color: #FFFFFF !important;
}

header.header.header-scrolled .menu a::after {
    background: #C6A46B !important;
}

/* Páginas internas: empiezan sólidas porque no tienen video debajo */
body:not(:has(.hero)) header.header {
    background:
        linear-gradient(
            110deg,
            rgba(43, 29, 26, .975) 0%,
            rgba(58, 28, 31, .975) 62%,
            rgba(74, 20, 29, .975) 100%
        ) !important;

    border-bottom: 1px solid rgba(184, 154, 104, .22) !important;

    -webkit-backdrop-filter: blur(13px) saturate(115%);
    backdrop-filter: blur(13px) saturate(115%);

    box-shadow: 0 8px 26px rgba(25, 15, 14, .14) !important;
}

body:not(:has(.hero)) header.header .menu a {
    color: #F5E8E3 !important;
}

body:not(:has(.hero)) header.header .menu a:hover {
    color: #FFFFFF !important;
}

body:not(:has(.hero)) header.header .menu a::after {
    background: #C6A46B !important;
}

/* =========================
   TABLET
   ========================= */
@media (max-width: 1000px) {

    header.header.header-scrolled {
        height: 72px !important;
        min-height: 72px !important;
    }

    header.header.header-scrolled .logo img {
        width: 150px !important;
        max-width: 150px !important;
    }
}

/* =========================
   CELULAR
   ========================= */
@media (max-width: 700px) {

    header.header {
        position: fixed !important;

        transition:
            background-color .4s ease,
            box-shadow .4s ease,
            border-color .4s ease,
            height .4s ease,
            min-height .4s ease,
            padding .4s ease,
            backdrop-filter .4s ease !important;
    }

    header.header.header-scrolled {
        height: 68px !important;
        min-height: 68px !important;

        padding: 6px 16px !important;

        background:
            linear-gradient(
                110deg,
                rgba(43, 29, 26, .975),
                rgba(74, 20, 29, .965)
            ) !important;

        box-shadow: 0 8px 24px rgba(25, 15, 14, .20) !important;
    }

    header.header.header-scrolled .logo img {
        width: 112px !important;
        max-width: 112px !important;
    }

    /* Hamburguesa conserva la paleta del hotel */
    header.header.header-scrolled .menu-toggle {
        background: rgba(255, 255, 255, .055) !important;
        border-color: rgba(198, 164, 107, .42) !important;
        box-shadow: 0 5px 14px rgba(0,0,0,.10) !important;
    }

    header.header.header-scrolled .menu-toggle span {
        background: #F7EAE4 !important;
    }

    /* Menú desplegable debajo del header sólido */
    header.header.header-scrolled .menu {
        top: 68px !important;
    }
}

@media (max-width: 430px) {
    header.header.header-scrolled {
        height: 64px !important;
        min-height: 64px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    header.header.header-scrolled .logo img {
        width: 104px !important;
        max-width: 104px !important;
    }

    header.header.header-scrolled .menu {
        top: 64px !important;
    }
}

/* Evita movimientos si el usuario los tiene desactivados */
@media (prefers-reduced-motion: reduce) {
    header.header,
    header.header .logo img {
        transition: none !important;
    }
}

/* =========================================================
   HEADER CÁPSULA - AJUSTE FINAL
   Visible suavemente arriba + más sólido al hacer scroll
   La línea inferior desaparece al bajar.
   ========================================================= */

/* PC / LAPTOP */
header.header {
    position: fixed !important;
    top: 10px !important;
    left: 32px !important;
    right: 32px !important;

    width: auto !important;
    max-width: none !important;

    height: 78px !important;
    min-height: 78px !important;

    padding: 7px 34px !important;

    /* Se ve un poco aun estando arriba */
    background:
        linear-gradient(
            110deg,
            rgba(42, 31, 27, .56) 0%,
            rgba(55, 29, 30, .53) 60%,
            rgba(74, 20, 29, .50) 100%
        ) !important;

    border: 1px solid rgba(191, 157, 84, .62) !important;
    border-radius: 28px !important;

    -webkit-backdrop-filter: blur(8px) saturate(112%);
    backdrop-filter: blur(8px) saturate(112%);

    box-shadow:
        0 7px 22px rgba(22, 13, 12, .09),
        inset 0 0 0 1px rgba(255, 255, 255, .018) !important;

    transition:
        top .42s cubic-bezier(.22,.8,.22,1),
        left .42s cubic-bezier(.22,.8,.22,1),
        right .42s cubic-bezier(.22,.8,.22,1),
        height .42s cubic-bezier(.22,.8,.22,1),
        min-height .42s cubic-bezier(.22,.8,.22,1),
        padding .42s cubic-bezier(.22,.8,.22,1),
        background .46s ease,
        border-color .46s ease,
        border-radius .42s ease,
        box-shadow .46s ease,
        backdrop-filter .46s ease !important;
}

/* Línea decorativa únicamente en la parte superior del hero */
body:has(.hero) header.header:not(.header-scrolled)::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 28px !important;
    right: 28px !important;
    bottom: -15px !important;

    width: auto !important;
    height: 1px !important;

    background:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(218, 181, 118, .30) 12%,
            rgba(255, 255, 255, .42) 50%,
            rgba(218, 181, 118, .30) 88%,
            transparent 100%
        ) !important;

    opacity: 1 !important;
    transform: scaleX(1) !important;
    transform-origin: center !important;

    transition:
        opacity .28s ease,
        transform .36s ease !important;

    pointer-events: none !important;
}

/* Al bajar: se mantiene como cápsula, más compacta y sólida */
header.header.header-scrolled {
    top: 8px !important;
    left: 24px !important;
    right: 24px !important;

    width: auto !important;

    height: 70px !important;
    min-height: 70px !important;

    padding: 6px 30px !important;

    background:
        linear-gradient(
            110deg,
            rgba(41, 29, 26, .94) 0%,
            rgba(57, 29, 31, .94) 62%,
            rgba(74, 20, 29, .93) 100%
        ) !important;

    border: 1px solid rgba(191, 157, 84, .55) !important;
    border-radius: 25px !important;

    -webkit-backdrop-filter: blur(14px) saturate(118%);
    backdrop-filter: blur(14px) saturate(118%);

    box-shadow:
        0 11px 30px rgba(23, 13, 13, .20),
        0 1px 0 rgba(255, 255, 255, .025) !important;
}

/* La barrita se retira al empezar a bajar */
header.header.header-scrolled::after {
    opacity: 0 !important;
    transform: scaleX(.72) !important;
    pointer-events: none !important;
}

/* Logo: un poco más presente arriba, sutilmente menor al bajar */
header.header .logo img {
    width: 180px !important;
    max-width: 180px !important;
}

header.header.header-scrolled .logo img {
    width: 158px !important;
    max-width: 158px !important;
}

/* Páginas internas: cápsula sólida desde el inicio */
body:not(:has(.hero)) header.header {
    top: 8px !important;
    left: 24px !important;
    right: 24px !important;

    height: 70px !important;
    min-height: 70px !important;

    background:
        linear-gradient(
            110deg,
            rgba(41, 29, 26, .95) 0%,
            rgba(57, 29, 31, .95) 62%,
            rgba(74, 20, 29, .94) 100%
        ) !important;

    border: 1px solid rgba(191, 157, 84, .50) !important;
    border-radius: 25px !important;
}

body:not(:has(.hero)) header.header::after {
    display: none !important;
}

/* TABLET */
@media (max-width: 1000px) {
    header.header {
        top: 9px !important;
        left: 18px !important;
        right: 18px !important;

        height: 74px !important;
        min-height: 74px !important;

        padding: 6px 23px !important;
        border-radius: 25px !important;
    }

    header.header .logo img {
        width: 155px !important;
        max-width: 155px !important;
    }

    header.header.header-scrolled {
        top: 7px !important;
        left: 16px !important;
        right: 16px !important;

        height: 66px !important;
        min-height: 66px !important;

        padding: 5px 20px !important;
        border-radius: 22px !important;
    }

    header.header.header-scrolled .logo img {
        width: 142px !important;
        max-width: 142px !important;
    }

    body:has(.hero) header.header:not(.header-scrolled)::after {
        left: 20px !important;
        right: 20px !important;
        bottom: -13px !important;
    }
}

/* CELULAR */
@media (max-width: 700px) {
    header.header {
        top: 8px !important;
        left: 11px !important;
        right: 11px !important;

        width: auto !important;

        height: 68px !important;
        min-height: 68px !important;

        padding: 5px 14px !important;

        border-radius: 22px !important;
        border-color: rgba(191, 157, 84, .48) !important;

        background:
            linear-gradient(
                110deg,
                rgba(42, 31, 27, .52),
                rgba(74, 20, 29, .48)
            ) !important;
    }

    header.header .logo img {
        width: 122px !important;
        max-width: 122px !important;
    }

    body:has(.hero) header.header:not(.header-scrolled)::after {
        left: 14px !important;
        right: 14px !important;
        bottom: -11px !important;
        opacity: .80 !important;
    }

    header.header.header-scrolled {
        top: 6px !important;
        left: 9px !important;
        right: 9px !important;

        height: 62px !important;
        min-height: 62px !important;

        padding: 4px 13px !important;
        border-radius: 20px !important;
    }

    header.header.header-scrolled .logo img {
        width: 110px !important;
        max-width: 110px !important;
    }

    header.header.header-scrolled .menu {
        top: 68px !important;
    }

    /* Botón hamburguesa acompaña la cápsula sin parecer otro bloque */
    header.header .menu-toggle {
        background: rgba(31, 20, 19, .18) !important;
        border-color: rgba(218, 181, 118, .32) !important;
    }

    header.header.header-scrolled .menu-toggle {
        background: rgba(255,255,255,.045) !important;
        border-color: rgba(218,181,118,.42) !important;
    }
}

@media (max-width: 430px) {
    header.header {
        left: 8px !important;
        right: 8px !important;

        height: 64px !important;
        min-height: 64px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    header.header .logo img {
        width: 114px !important;
        max-width: 114px !important;
    }

    header.header.header-scrolled {
        left: 7px !important;
        right: 7px !important;

        height: 59px !important;
        min-height: 59px !important;
    }

    header.header.header-scrolled .logo img {
        width: 103px !important;
        max-width: 103px !important;
    }

    header.header.header-scrolled .menu {
        top: 65px !important;
    }
}

/* =========================================================
   HEADER FINAL - TRANSPARENTE ARRIBA / CAPSULA AL BAJAR
   ========================================================= */

/* INICIO: conserva el header original totalmente transparente */
body:has(.hero) header.header:not(.header-scrolled) {
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    right: auto !important;

    width: 100% !important;
    height: 92px !important;
    min-height: 92px !important;

    padding: 10px 55px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    box-shadow: none !important;
}

body:has(.hero) header.header:not(.header-scrolled) .logo img {
    width: 190px !important;
    max-width: 190px !important;
}

/* La línea original solo existe mientras estamos arriba */
body:has(.hero) header.header:not(.header-scrolled)::after {
    display: block !important;
    left: 55px !important;
    right: 55px !important;
    bottom: -8px !important;
    height: 1px !important;
    opacity: 1 !important;
    transform: none !important;
    background: rgba(255, 255, 255, .55) !important;
}

/* AL BAJAR: se convierte en la barra ordenada flotante */
body:has(.hero) header.header.header-scrolled {
    position: fixed !important;
    top: 10px !important;
    left: 32px !important;
    right: 32px !important;

    width: auto !important;
    height: 68px !important;
    min-height: 68px !important;

    padding: 6px 28px !important;

    background:
        linear-gradient(
            110deg,
            rgba(43, 31, 27, .95) 0%,
            rgba(58, 31, 32, .95) 58%,
            rgba(74, 20, 29, .94) 100%
        ) !important;

    border: 1px solid rgba(190, 154, 82, .52) !important;
    border-radius: 30px !important;

    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;

    box-shadow:
        0 10px 30px rgba(20, 12, 12, .20),
        inset 0 1px 0 rgba(255, 255, 255, .025) !important;

    transition:
        background .42s ease,
        border-color .42s ease,
        border-radius .42s ease,
        box-shadow .42s ease,
        height .42s ease,
        padding .42s ease !important;
}

body:has(.hero) header.header.header-scrolled::after {
    display: none !important;
    opacity: 0 !important;
}

body:has(.hero) header.header.header-scrolled .logo img {
    width: 158px !important;
    max-width: 158px !important;
    transition: width .42s ease !important;
}

/* TABLET */
@media (min-width: 701px) and (max-width: 1000px) {
    body:has(.hero) header.header:not(.header-scrolled) {
        top: 4px !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        height: 86px !important;
        min-height: 86px !important;
        padding: 9px 30px !important;
        border-radius: 0 !important;
    }

    body:has(.hero) header.header:not(.header-scrolled) .logo img {
        width: 165px !important;
        max-width: 165px !important;
    }

    body:has(.hero) header.header:not(.header-scrolled)::after {
        left: 30px !important;
        right: 30px !important;
        bottom: -5px !important;
    }

    body:has(.hero) header.header.header-scrolled {
        top: 8px !important;
        left: 18px !important;
        right: 18px !important;
        height: 66px !important;
        min-height: 66px !important;
        padding: 5px 20px !important;
        border-radius: 26px !important;
    }

    body:has(.hero) header.header.header-scrolled .logo img {
        width: 142px !important;
        max-width: 142px !important;
    }
}

/* CELULAR */
@media (max-width: 700px) {
    body:has(.hero) header.header:not(.header-scrolled) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;

        width: 100% !important;
        height: 84px !important;
        min-height: 84px !important;

        padding: 8px 18px !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;

        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    body:has(.hero) header.header:not(.header-scrolled) .logo img {
        width: 132px !important;
        max-width: 132px !important;
    }

    body:has(.hero) header.header:not(.header-scrolled)::after {
        display: block !important;
        left: 18px !important;
        right: 18px !important;
        bottom: 0 !important;
        opacity: 1 !important;
        background: rgba(255,255,255,.34) !important;
    }

    body:has(.hero) header.header.header-scrolled {
        position: fixed !important;
        top: 7px !important;
        left: 10px !important;
        right: 10px !important;

        width: auto !important;
        height: 62px !important;
        min-height: 62px !important;

        padding: 4px 13px !important;
        border-radius: 23px !important;
    }

    body:has(.hero) header.header.header-scrolled .logo img {
        width: 110px !important;
        max-width: 110px !important;
    }

    body:has(.hero) header.header.header-scrolled .menu {
        top: 68px !important;
    }
}

@media (max-width: 430px) {
    body:has(.hero) header.header:not(.header-scrolled) {
        height: 80px !important;
        min-height: 80px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    body:has(.hero) header.header:not(.header-scrolled) .logo img {
        width: 118px !important;
        max-width: 118px !important;
    }

    body:has(.hero) header.header.header-scrolled {
        left: 8px !important;
        right: 8px !important;
        height: 59px !important;
        min-height: 59px !important;
    }

    body:has(.hero) header.header.header-scrolled .logo img {
        width: 103px !important;
        max-width: 103px !important;
    }

    body:has(.hero) header.header.header-scrolled .menu {
        top: 65px !important;
    }
}


/* =========================================================
   HEADER + MEGA MENÚ PREMIUM
   Hotel Los Apus Central
   ========================================================= */

header.header {
    overflow: visible !important;
}

header.header .menu {
    overflow: visible !important;
}

header.header .nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

header.header .nav-link {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: 0;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 8px 0 10px !important;

    background: transparent !important;
    color: #F4D7D9 !important;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .35px !important;

    text-decoration: none !important;
    cursor: pointer;

    transition:
        color .28s ease,
        transform .28s ease,
        opacity .28s ease !important;
}

header.header .nav-trigger {
    font: inherit;
}

header.header .nav-chevron {
    display: inline-block;
    margin-top: -3px;
    font-size: 15px;
    color: #B89A68;
    transition: transform .28s ease;
}

header.header .nav-item.mega-open > .nav-trigger .nav-chevron {
    transform: rotate(180deg) translateY(-2px);
}

/* El subrayado solo corresponde al menú superior */
header.header .nav-link::after {
    content: "" !important;
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: #B89A68;
    transform: translateX(-50%);
    transition: width .28s ease;
}

header.header .nav-link {
    position: relative;
}

header.header .nav-link:hover::after,
header.header .nav-item.mega-open > .nav-link::after {
    width: 100%;
}

header.header .nav-link:hover,
header.header .nav-item.mega-open > .nav-link {
    color: #FFFFFF !important;
}

/* En la cápsula el menú conserva contraste */
body:has(.hero) header.header.header-scrolled .nav-link {
    color: #F6E8DF !important;
}

body:has(.hero) header.header.header-scrolled .nav-link:hover,
body:has(.hero) header.header.header-scrolled .nav-item.mega-open > .nav-link {
    color: #FFFFFF !important;
}

/* ===========================
   PANEL MEGA MENÚ
   =========================== */

.mega-menu {
    position: fixed;
    top: 92px;
    left: 0;
    right: 0;

    z-index: 9997;

    width: 100%;

    padding: 0 4%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-18px);

    transition:
        opacity .34s ease,
        visibility .34s ease,
        transform .42s cubic-bezier(.2,.78,.2,1);
}

header.header.header-scrolled .mega-menu {
    top: 86px;
}

.mega-menu::before {
    content: "";
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 30px;
}

.nav-item.mega-open .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-menu-inner {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: .9fr 1.6fr;
    gap: 54px;

    padding: 38px 42px 42px;

    background:
        linear-gradient(
            125deg,
            rgba(37, 27, 24, .985),
            rgba(53, 30, 30, .985) 58%,
            rgba(68, 20, 29, .985)
        );

    border: 1px solid rgba(184,154,104,.32);
    border-radius: 0 0 24px 24px;

    box-shadow:
        0 28px 60px rgba(13,8,8,.28);

    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.mega-heading {
    padding-right: 20px;
    border-right: 1px solid rgba(184,154,104,.20);
}

.mega-heading > span {
    display: block;
    margin-bottom: 10px;

    color: #D2AF72;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.8px;
}

.mega-heading h2 {
    margin: 0 0 13px;

    color: #FFF4EA;
    font-family: 'DM Serif Display', serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.08;
}

.mega-heading p {
    max-width: 350px;
    margin: 0 0 22px;

    color: rgba(255,244,234,.67);
    font-size: 12px;
    line-height: 1.75;
}

.mega-heading .mega-cta {
    display: inline-flex !important;
    align-items: center;

    padding: 0 0 5px !important;

    color: #E1BE7C !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    text-decoration: none;
    border-bottom: 1px solid rgba(225,190,124,.55);
}

.mega-heading .mega-cta::after {
    display: none !important;
}

/* Habitaciones */

.mega-links-habitaciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mega-links-habitaciones > a {
    position: relative;

    min-height: 94px;

    display: grid !important;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    align-content: center;

    column-gap: 13px;

    padding: 15px 17px !important;

    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;

    background: rgba(255,255,255,.025) !important;
    color: #FFF4EA !important;

    text-decoration: none;

    transition:
        background .28s ease,
        border-color .28s ease,
        transform .28s ease !important;
}

.mega-links-habitaciones > a::after {
    display: none !important;
}

.mega-links-habitaciones > a:hover {
    background: rgba(255,255,255,.065) !important;
    border-color: rgba(184,154,104,.46);
    transform: translateY(-2px);
}

.mega-links-habitaciones > a > span {
    grid-row: 1 / span 2;
    align-self: center;

    color: #B89A68;
    font-family: 'DM Serif Display', serif;
    font-size: 23px;
}

.mega-links-habitaciones strong {
    color: #FFF4EA;
    font-size: 13px;
}

.mega-links-habitaciones small {
    margin-top: 3px;
    color: rgba(255,244,234,.56);
    font-size: 10px;
}

.mega-links-habitaciones .mega-link-destacado {
    border-color: rgba(139,38,53,.55);
    background: rgba(139,38,53,.12) !important;
}

/* Destinos */

.mega-destinos-inner {
    grid-template-columns: 1.1fr repeat(3, .8fr);
    gap: 34px;
}

.destino-region {
    padding-left: 3px;
}

.destino-region-num {
    display: block;
    margin-bottom: 6px;

    color: #B89A68;
    font-family: 'DM Serif Display', serif;
    font-size: 17px;
}

.destino-region h3 {
    margin: 0 0 13px;
    color: #FFF4EA;
    font-size: 22px;
    font-weight: 400;
}

.destino-region a {
    position: relative;

    display: block !important;

    width: fit-content;

    padding: 6px 0 !important;

    color: rgba(255,244,234,.68) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease !important;
}

.destino-region a::after {
    display: none !important;
}

.destino-region a:hover {
    color: #FFFFFF !important;
    transform: translateX(5px);
}

/* Fondo de página cuando el mega menú está abierto */

.mega-menu-backdrop {
    position: fixed;
    inset: 0;

    z-index: 9990;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    background: rgba(15,10,10,.34);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);

    transition:
        opacity .32s ease,
        visibility .32s ease;
}

body.mega-menu-abierto .mega-menu-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ===========================
   TABLET
   =========================== */

@media (min-width: 701px) and (max-width: 1050px) {

    header.header .menu {
        gap: 18px !important;
    }

    header.header .nav-link {
        font-size: 11px !important;
    }

    .mega-menu {
        padding: 0 18px;
    }

    .mega-menu-inner {
        gap: 26px;
        padding: 30px 28px 34px;
    }

    .mega-destinos-inner {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .mega-destinos-inner .destinos-intro {
        grid-column: 1 / -1;
        padding: 0 0 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(184,154,104,.20);
    }

    .mega-destinos-inner .destinos-intro p {
        max-width: 650px;
    }
}

/* ===========================
   MÓVIL
   Se transforma en acordeón.
   =========================== */

@media (max-width: 700px) {


    header.header .nav-item {
        width: 100%;
        display: block;
    }

    header.header .nav-link {
        width: 100% !important;
        min-height: 48px;

        justify-content: space-between !important;

        padding: 11px 16px !important;

        color: #F8EDE5 !important;
        font-size: 12px !important;

        border-radius: 10px !important;
    }

    header.header .nav-link::after {
        display: none !important;
    }

    header.header .nav-link:hover,
    header.header .nav-item.mega-open > .nav-link {
        background: rgba(255,255,255,.055) !important;
    }

    .mega-menu {
        position: static !important;

        width: 100%;
        max-height: 0;

        padding: 0 !important;

        opacity: 1;
        visibility: visible;
        pointer-events: none;

        overflow: hidden;

        transform: none;

        transition: max-height .5s cubic-bezier(.2,.78,.2,1);
    }

    .nav-item.mega-open .mega-menu {
        max-height: 900px;
        pointer-events: auto;
    }

    .mega-menu-inner,
    .mega-destinos-inner {
        display: block;

        padding: 9px 10px 16px;

        background: transparent;

        border: 0;
        border-radius: 0;

        box-shadow: none;
        backdrop-filter: none;
    }

    .mega-heading {
        display: none;
    }

    .mega-links-habitaciones {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .mega-links-habitaciones > a {
        min-height: 64px;

        grid-template-columns: 27px 1fr;

        padding: 9px 12px !important;

        border-radius: 10px;
    }

    .mega-links-habitaciones > a > span {
        font-size: 18px;
    }

    .mega-links-habitaciones strong {
        font-size: 11px;
    }

    .mega-links-habitaciones small {
        font-size: 9px;
    }

    .destino-region {
        padding: 9px 12px 11px;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .destino-region:last-child {
        border-bottom: 0;
    }

    .destino-region-num {
        display: inline-block;
        margin-right: 7px;
        margin-bottom: 4px;
        font-size: 13px;
    }

    .destino-region h3 {
        display: inline-block;
        margin-bottom: 6px;
        font-size: 17px;
    }

    .destino-region a {
        padding: 5px 0 5px 25px !important;
        font-size: 10px !important;
    }

    .mega-menu-backdrop {
        display: none !important;
    }
}

/* =========================================================
   PÁGINAS DESTINOS / RESTAURANTES
   ========================================================= */

.pagina-experiencias {
    padding-top: 150px;
    padding-bottom: 95px;
}

.experiencias-hero {
    max-width: 850px;
    margin: 0 auto 58px;
    text-align: center;
}

.experiencias-hero span {
    display: block;
    margin-bottom: 9px;

    color: #8B2635;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.experiencias-hero h1 {
    margin-bottom: 15px;

    color: #6B1F2A;
    font-size: clamp(42px, 5vw, 66px);
    font-weight: 400;
    line-height: 1.04;
}

.experiencias-hero p {
    max-width: 680px;
    margin: 0 auto;

    color: #6A5D53;
    font-size: 16px;
    line-height: 1.8;
}

.destinos-region-seccion {
    max-width: 1180px;
    margin: 0 auto 74px;
}

.destinos-region-cabecera {
    margin-bottom: 28px;
}

.destinos-region-cabecera span {
    color: #B07A2D;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
}

.destinos-region-cabecera h2 {
    margin-top: 5px;
    color: #6B1F2A;
    font-size: 39px;
    font-weight: 400;
}

.destinos-grid-simple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.destino-card-simple {
    min-height: 190px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 25px;

    background:
        linear-gradient(145deg, #FFFDF8, #F2E6D8);

    border: 1px solid #E5D8C3;
    border-radius: 18px;

    box-shadow: 0 10px 26px rgba(48,38,33,.07);
}

.destino-card-simple span {
    margin-bottom: 8px;
    color: #B89A68;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.destino-card-simple h3 {
    margin-bottom: 7px;
    color: #6B1F2A;
    font-size: 27px;
    font-weight: 400;
}

.destino-card-simple p {
    color: #6A5D53;
    font-size: 12px;
    line-height: 1.65;
}

.restaurante-presentacion {
    max-width: 1050px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.restaurante-bloque {
    padding: 35px;

    background: #FFFDF8;
    border: 1px solid #E5D8C3;
    border-radius: 20px;

    box-shadow: 0 12px 30px rgba(48,38,33,.08);
}

.restaurante-bloque span {
    color: #B07A2D;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.restaurante-bloque h2 {
    margin: 8px 0 12px;
    color: #6B1F2A;
    font-size: 35px;
    font-weight: 400;
}

.restaurante-bloque p {
    color: #6A5D53;
    font-size: 14px;
    line-height: 1.8;
}

@media (max-width: 850px) {
    .destinos-grid-simple,
    .restaurante-presentacion {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .pagina-experiencias {
        padding-top: 120px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .experiencias-hero {
        margin-bottom: 42px;
    }

    .experiencias-hero h1 {
        font-size: 39px;
    }

    .experiencias-hero p {
        font-size: 14px;
    }

    .destinos-grid-simple,
    .restaurante-presentacion {
        grid-template-columns: 1fr;
    }

    .destinos-region-cabecera h2 {
        font-size: 32px;
    }
}

/* =========================================================
   CORRECCIÓN HEADER DESKTOP / HAMBURGUESA
   ========================================================= */

/* En PC y laptop el botón hamburguesa nunca debe mostrarse */
.menu-toggle {
    display: none !important;
}

@media (max-width: 700px) {
    .menu-toggle {
        display: flex !important;
    }
}

/* =========================================================
   APUS - ENTRADA DE PÁGINA + REVEAL AL HACER SCROLL
   ========================================================= */

/* Estado base de los reveals */
.apus-reveal {
    --apus-x: 0px;
    --apus-y: 34px;
    --apus-scale: .985;
    --apus-delay: 0ms;

    will-change: opacity, transform, filter;

    transition:
        opacity .82s cubic-bezier(.22,.72,.22,1),
        transform .95s cubic-bezier(.22,.72,.22,1),
        filter .78s ease;

    transition-delay: var(--apus-delay);
}

body.apus-reveal-ready .apus-reveal:not(.apus-visible) {
    opacity: 0;
    transform: translate3d(var(--apus-x), var(--apus-y), 0) scale(var(--apus-scale));
    filter: blur(4px);
}

body.apus-reveal-ready .apus-reveal.apus-visible {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    filter: blur(0);
}

/* ---------------------------------------------------------
   1) EFECTO DE ENTRADA CUANDO ABRES LA PÁGINA
   --------------------------------------------------------- */

body.apus-page-enter .pagina,
body.apus-page-enter .pagina-experiencias {
    animation: apusPaginaEntrada .78s cubic-bezier(.2,.75,.2,1) both;
}

@keyframes apusPaginaEntrada {
    0% {
        opacity: 0;
        transform: translateY(24px);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Título inicial con un poco más de presencia */
body.apus-page-enter .titulo,
body.apus-page-enter .experiencias-hero {
    animation: apusTituloEntrada .9s cubic-bezier(.2,.75,.2,1) .10s both;
}

@keyframes apusTituloEntrada {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(.985);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ---------------------------------------------------------
   2) EFECTOS QUE SIGUEN FUNCIONANDO AL HACER SCROLL
   --------------------------------------------------------- */

/* Habitaciones: alternan izquierda y derecha */
.habitaciones-premium > .apus-reveal:nth-child(odd) {
    --apus-x: -48px;
    --apus-y: 15px;
}

.habitaciones-premium > .apus-reveal:nth-child(even) {
    --apus-x: 48px;
    --apus-y: 15px;
}

/* Reservas */
.reservas-pagina .formulario-container.apus-reveal {
    --apus-y: 38px;
}

.reservas-pagina form > .campo.apus-reveal,
.reservas-pagina form > .fila.apus-reveal {
    --apus-y: 20px;
    --apus-scale: .995;
}

/* Contacto */
.contacto > .contacto-info.apus-reveal {
    --apus-x: -44px;
    --apus-y: 12px;
}

.contacto > .formulario-container.apus-reveal {
    --apus-x: 44px;
    --apus-y: 12px;
}

/* Destinos */
.destinos-region-cabecera.apus-reveal {
    --apus-x: -30px;
    --apus-y: 8px;
}

.destinos-grid-simple > .apus-reveal {
    --apus-y: 30px;
    --apus-scale: .975;
}

/* Restaurantes */
.restaurante-presentacion > .apus-reveal:first-child {
    --apus-x: -38px;
    --apus-y: 16px;
}

.restaurante-presentacion > .apus-reveal:last-child {
    --apus-x: 38px;
    --apus-y: 16px;
}

/* Footer: muy suave */
.footer .footer-col.apus-reveal,
.footer .footer-bottom.apus-reveal {
    --apus-y: 22px;
    --apus-scale: .995;
}

/* Tablet */
@media (max-width: 950px) {
    .habitaciones-premium > .apus-reveal:nth-child(odd),
    .habitaciones-premium > .apus-reveal:nth-child(even),
    .contacto > .contacto-info.apus-reveal,
    .contacto > .formulario-container.apus-reveal,
    .restaurante-presentacion > .apus-reveal:first-child,
    .restaurante-presentacion > .apus-reveal:last-child {
        --apus-x: 0px;
        --apus-y: 28px;
    }
}

/* Celular: más ligero */
@media (max-width: 700px) {
    .apus-reveal {
        --apus-x: 0px !important;
        --apus-y: 22px !important;
        --apus-scale: .99;

        transition:
            opacity .55s cubic-bezier(.22,.72,.22,1),
            transform .65s cubic-bezier(.22,.72,.22,1),
            filter .52s ease;

        transition-delay: var(--apus-delay);
    }

    body.apus-page-enter .pagina,
    body.apus-page-enter .pagina-experiencias {
        animation-duration: .55s;
    }

    body.apus-page-enter .titulo,
    body.apus-page-enter .experiencias-hero {
        animation-duration: .62s;
        animation-delay: .06s;
    }

    body.apus-reveal-ready .apus-reveal:not(.apus-visible) {
        filter: blur(2px);
    }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    body.apus-page-enter .pagina,
    body.apus-page-enter .pagina-experiencias,
    body.apus-page-enter .titulo,
    body.apus-page-enter .experiencias-hero,
    .apus-reveal,
    body.apus-reveal-ready .apus-reveal:not(.apus-visible),
    body.apus-reveal-ready .apus-reveal.apus-visible {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* =========================================================
   CORRECCIÓN FINAL MENÚ MÓVIL
   - Cerrado por defecto
   - Abre solo con .menu-movil-abierto
   - No tapa la página al hacer scroll
   ========================================================= */

@media (max-width: 700px) {

    /* Header móvil compacto */
    header.header {
        overflow: visible !important;
    }

    /* MENÚ CERRADO POR DEFECTO */
    header.header #menuPrincipal {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 14px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        overflow: hidden !important;

        background:
            linear-gradient(
                145deg,
                rgba(48,18,24,.985),
                rgba(75,20,31,.98)
            ) !important;

        border: 0 solid rgba(211,178,118,.30) !important;
        border-radius: 0 0 15px 15px !important;

        box-shadow: none !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(-8px) scale(.985) !important;
        transform-origin: top center !important;

        transition:
            max-height .38s cubic-bezier(.2,.75,.2,1),
            opacity .25s ease,
            transform .35s cubic-bezier(.2,.75,.2,1),
            visibility .25s ease,
            padding .35s ease !important;
    }

    /* MENÚ ABIERTO */
    header.header.menu-movil-abierto #menuPrincipal {
        max-height: min(72vh, 560px) !important;

        padding: 10px 14px 13px !important;

        border-width: 1px !important;
        border-top-width: 0 !important;

        box-shadow:
            0 16px 34px rgba(0,0,0,.28) !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) scale(1) !important;

        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    /* Evita que una clase vieja vuelva a abrirlo */
    header.header:not(.menu-movil-abierto) #menuPrincipal.menu-abierto {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px) scale(.985) !important;
    }

    /* Items principales */
    header.header #menuPrincipal > .nav-item {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    header.header #menuPrincipal > .nav-item > .nav-link {
        min-height: 43px !important;
        padding: 10px 6px !important;

        border-bottom: 1px solid rgba(255,255,255,.075) !important;

        color: #F8EDE5 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    header.header #menuPrincipal > .nav-item:last-child > .nav-link {
        border-bottom: 0 !important;
    }

    /* Mega menú dentro del menú móvil */
    header.header #menuPrincipal .mega-menu {
        position: static !important;

        max-height: 0 !important;
        width: 100% !important;

        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;

        overflow: hidden !important;
        transform: none !important;

        transition: max-height .38s cubic-bezier(.2,.75,.2,1) !important;
    }

    header.header #menuPrincipal .nav-item.mega-open .mega-menu {
        max-height: 620px !important;
        pointer-events: auto !important;
    }

    /* Botón hamburguesa: X al abrir */
    header.header.menu-movil-abierto .menu-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }

    header.header.menu-movil-abierto .menu-toggle span:nth-child(2) {
        opacity: 0 !important;
    }

    header.header.menu-movil-abierto .menu-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }

    /* Al estar cerrado siempre vuelve a hamburguesa */
    header.header:not(.menu-movil-abierto) .menu-toggle span:nth-child(1),
    header.header:not(.menu-movil-abierto) .menu-toggle span:nth-child(3) {
        transform: none !important;
    }

    header.header:not(.menu-movil-abierto) .menu-toggle span:nth-child(2) {
        opacity: 1 !important;
    }
}

@media (max-width: 430px) {

    header.header.menu-movil-abierto #menuPrincipal {
        max-height: min(68vh, 500px) !important;
    }

    header.header #menuPrincipal > .nav-item > .nav-link {
        min-height: 40px !important;
        padding: 9px 5px !important;
        font-size: 10.5px !important;
    }
}



/* =========================================================
   V5 - SUAVIDAD GENERAL / HEADER / REVEAL
   ========================================================= */

/* Evita que el header fijo quede pegado a los títulos al navegar. */
html {
    scroll-padding-top: 100px;
}

section,
.pagina,
.pagina-experiencias {
    scroll-margin-top: 100px;
}

/* El cambio a cápsula se siente progresivo, no instantáneo. */
header.header {
    transition:
        top .48s cubic-bezier(.2,.72,.2,1),
        left .48s cubic-bezier(.2,.72,.2,1),
        right .48s cubic-bezier(.2,.72,.2,1),
        width .48s cubic-bezier(.2,.72,.2,1),
        height .48s cubic-bezier(.2,.72,.2,1),
        padding .48s cubic-bezier(.2,.72,.2,1),
        background .55s ease,
        border-radius .55s cubic-bezier(.2,.72,.2,1),
        box-shadow .55s ease,
        backdrop-filter .55s ease !important;
}

/* Reveal V4 menos borroso, más largo y natural. */
html.reveal-v4-ready .reveal-v4 {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(.992);
    filter: blur(3px);

    transition:
        opacity 1.08s cubic-bezier(.2,.72,.2,1) var(--reveal-delay, 0ms),
        transform 1.18s cubic-bezier(.16,.78,.2,1) var(--reveal-delay, 0ms),
        filter .92s ease var(--reveal-delay, 0ms) !important;
}

html.reveal-v4-ready .reveal-v4.reveal-v4-visible {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    filter: blur(0);
}

/* Descubre Juliaca entra como una sola composición. */
html.reveal-v4-ready .lugares-paneles.reveal-v4 {
    transform: translate3d(0, 26px, 0) scale(.994);
    filter: blur(2px);
}

html.reveal-v4-ready .lugares-paneles.reveal-v4.reveal-v4-visible {
    transform: translate3d(0,0,0) scale(1);
    filter: blur(0);
}

/* En tablet y móvil, todavía más ligero. */
@media (max-width: 700px) {
    html.reveal-v4-ready .reveal-v4 {
        transform: translate3d(0, 20px, 0) scale(.995);
        filter: blur(1.5px);

        transition:
            opacity .82s cubic-bezier(.2,.72,.2,1) var(--reveal-delay, 0ms),
            transform .92s cubic-bezier(.18,.76,.2,1) var(--reveal-delay, 0ms),
            filter .72s ease var(--reveal-delay, 0ms) !important;
    }
}

/* =========================================================
   DESCUBRE JULIACA - AJUSTE SUAVE V5
   ========================================================= */
@media (max-width: 700px) {
    .lugares-paneles {
        align-items: stretch;
    }

    .lugar-panel,
    .lugar-panel.activo {
        grid-column: auto !important;
        transform: translateZ(0);
        transition:
            transform .72s cubic-bezier(.2,.72,.2,1),
            filter .72s ease,
            box-shadow .72s ease,
            border-color .72s ease !important;
    }

    .lugar-panel.activo {
        transform: scale(1.018);
        box-shadow: 0 14px 28px rgba(0,0,0,.24);
        outline: 1px solid rgba(216,179,106,.42);
        outline-offset: -1px;
    }

    .lugar-panel img,
    .lugar-panel.activo img {
        transition:
            transform .95s cubic-bezier(.2,.72,.2,1),
            filter .80s ease !important;
    }

    .lugar-panel .lugar-info p,
    .lugar-panel.activo .lugar-info p {
        display: none !important;
    }
}

/* =========================================================
   AJUSTE FINAL FOOTER V6
   Un poco más alto y nombre del hotel más visible
   ========================================================= */
.footer-premium {
    padding-top: 72px !important;
    padding-bottom: 42px !important;
}

.footer-nombre {
    font-size: 29px !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
}

@media (max-width: 1000px) {
    .footer-premium {
        padding-top: 60px !important;
        padding-bottom: 36px !important;
    }

    .footer-nombre {
        font-size: 27px !important;
    }
}

@media (max-width: 700px) {
    .footer-premium {
        padding-top: 52px !important;
        padding-bottom: 32px !important;
    }

    .footer-nombre {
        font-size: 25px !important;
    }
}

@media (max-width: 430px) {
    .footer-nombre {
        font-size: 24px !important;
    }
}

/* =========================================================
   FOOTER V4 - NOMBRE DEL HOTEL MÁS PROTAGONISTA
   ========================================================= */
.footer-nombre {
    margin-bottom: 12px !important;
    font-family: 'DM Serif Display', serif !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: #FFF2E8 !important;
}

@media (max-width: 650px) {
    .footer-nombre {
        font-size: 22px !important;
    }
}


/* =========================================================
   FOOTER V5 - TÍTULO DEL HOTEL (SELECTOR MÁS ESPECÍFICO)
   Evita que .footer-col p reduzca el tamaño del nombre.
   ========================================================= */
.footer-premium .footer-col p.footer-nombre,
.footer-premium p.footer-nombre,
footer .footer-col p.footer-nombre {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    font-family: 'DM Serif Display', serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    color: #FFF2E8 !important;
}

@media (max-width: 700px) {
    .footer-premium .footer-col p.footer-nombre,
    .footer-premium p.footer-nombre,
    footer .footer-col p.footer-nombre {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 430px) {
    .footer-premium .footer-col p.footer-nombre,
    .footer-premium p.footer-nombre,
    footer .footer-col p.footer-nombre {
        font-size: 22px !important;
    }
}

/* =========================================================
   DESTINOS V3 - MULTIMEDIA MIXTA
   GIF + IMAGEN + VIDEO
   ========================================================= */

.pagina-experiencias .destinos-grid-simple {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.pagina-experiencias .destino-card-simple {
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    background: #FFFDF8;
    border: 1px solid rgba(184,154,104,.30);
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(48,38,33,.09);
    transition: transform .42s cubic-bezier(.2,.75,.2,1),
                box-shadow .42s ease,
                border-color .42s ease;
}

.pagina-experiencias .destino-card-simple:hover {
    transform: translateY(-7px);
    border-color: rgba(184,154,104,.72);
    box-shadow: 0 22px 46px rgba(48,38,33,.16),
                0 7px 18px rgba(107,31,42,.08);
}

.pagina-experiencias .destino-media {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: linear-gradient(145deg,#E9DDCB,#D7C5AF);
}

.pagina-experiencias .destino-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(28,18,18,0) 50%, rgba(45,20,26,.18) 100%);
}

.pagina-experiencias .destino-media img,
.pagina-experiencias .destino-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .8s cubic-bezier(.2,.75,.2,1), filter .5s ease;
}

.pagina-experiencias .destino-card-simple:hover .destino-media img,
.pagina-experiencias .destino-card-simple:hover .destino-media video {
    transform: scale(1.045);
    filter: saturate(1.03) contrast(1.015);
}

.pagina-experiencias .destino-tipo-media {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 11px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 30px;
    background: rgba(55,24,29,.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    box-shadow: 0 5px 14px rgba(0,0,0,.14);
}

.pagina-experiencias .destino-media-carrusel .destino-media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.025);
    transition: opacity .85s ease, visibility .85s ease,
                transform 1.1s cubic-bezier(.2,.75,.2,1);
}

.pagina-experiencias .destino-media-carrusel .destino-media-item.activo {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}

.pagina-experiencias .destino-indicadores {
    position: absolute;
    left: 50%;
    bottom: 13px;
    z-index: 6;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
}

.pagina-experiencias .destino-indicadores i {
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
    background: rgba(255,255,255,.48);
    box-shadow: 0 1px 5px rgba(0,0,0,.18);
    transition: width .35s ease, border-radius .35s ease, background .35s ease;
}

.pagina-experiencias .destino-indicadores i.activo {
    width: 20px;
    border-radius: 20px;
    background: #FFFFFF;
}

.pagina-experiencias .destino-media-video {
    background: #2B211E;
}

.pagina-experiencias .destino-card-contenido {
    flex: 1;
    padding: 24px 25px 27px;
}

.pagina-experiencias .destino-card-contenido > span {
    display: block;
    margin-bottom: 9px;
    color: #B07A2D;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.pagina-experiencias .destino-card-contenido h3 {
    margin: 0 0 10px;
    color: #6B1F2A;
    font-family: 'DM Serif Display', serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.08;
}

.pagina-experiencias .destino-card-contenido p {
    margin: 0;
    color: #6A5D53;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.72;
}

@media (max-width: 1000px) {
    .pagina-experiencias .destinos-grid-simple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
    .pagina-experiencias .destino-media {
        height: 220px;
    }
}

@media (max-width: 600px) {
    .pagina-experiencias .destinos-grid-simple {
        grid-template-columns: 1fr;
        gap: 19px;
    }
    .pagina-experiencias .destino-media {
        height: 225px;
    }
    .pagina-experiencias .destino-card-contenido {
        padding: 21px 21px 24px;
    }
    .pagina-experiencias .destino-card-contenido h3 {
        font-size: 28px;
    }
    .pagina-experiencias .destino-card-contenido p {
        font-size: 12.5px;
    }
}

@media (max-width: 390px) {
    .pagina-experiencias .destino-media {
        height: 198px;
    }
}

/* =========================================================
   DESTINOS V4 - PLACEHOLDER TEMPORAL
   ========================================================= */
.pagina-experiencias .destino-media-pendiente{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(184,154,104,.24),transparent 45%),linear-gradient(135deg,#40242A,#6B1F2A)}
.pagina-experiencias .destino-media-placeholder{position:relative;z-index:4;text-align:center;color:#FFF7EE}
.pagina-experiencias .destino-media-placeholder span{display:block;margin-bottom:6px;font-size:9px;font-weight:700;letter-spacing:2.4px;color:#D7BA86}
.pagina-experiencias .destino-media-placeholder strong{font-family:'DM Serif Display',serif;font-size:29px;font-weight:400;color:#FFF7EE}


/* =========================================================
   PORTADA DESTINOS - DOS VIDEOS
   ========================================================= */

.pagina-experiencias .experiencias-hero-portada {
    position: relative;
    width: 100%;
    max-width: 1180px;
    min-height: 500px;
    margin: 0 auto 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 26px;
    background: #321A1E;
    box-shadow: 0 22px 55px rgba(48, 38, 33, .16);
}

.experiencias-videos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.experiencias-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.035);
    transition:
        opacity 1.4s ease,
        transform 7s ease;
}

.experiencias-video.activo {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

.experiencias-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(
            to bottom,
            rgba(27, 15, 16, .30),
            rgba(54, 20, 27, .62)
        );
}

.experiencias-hero-contenido {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 900px;
    padding: 70px 35px;
    text-align: center;
}

.experiencias-hero-contenido > span {
    display: block;
    margin-bottom: 18px;
    color: #E8C48C;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}

.experiencias-hero-contenido h1 {
    margin: 0 0 24px;
    color: #FFF5EC;
    font-family: 'DM Serif Display', serif;
    font-size: clamp(50px, 5vw, 72px);
    font-weight: 400;
    line-height: 1.03;
    text-shadow: 0 5px 20px rgba(0, 0, 0, .34);
}

.experiencias-hero-contenido p {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 245, 236, .88);
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .28);
}

@media (max-width: 900px) {
    .pagina-experiencias .experiencias-hero-portada {
        min-height: 470px;
        border-radius: 22px;
    }
}

@media (max-width: 600px) {
    .pagina-experiencias .experiencias-hero-portada {
        min-height: 470px;
        margin-bottom: 55px;
        border-radius: 18px;
    }

    .experiencias-hero-contenido {
        padding: 55px 20px;
    }

    .experiencias-hero-contenido > span {
        font-size: 9px;
        letter-spacing: 2.8px;
    }

    .experiencias-hero-contenido h1 {
        font-size: clamp(38px, 11vw, 49px);
        line-height: 1.04;
    }

    .experiencias-hero-contenido p {
        font-size: 13px;
        line-height: 1.7;
    }
}

/* =========================================================
   APUS V11 - POPUP RESPONSIVE
   PC HORIZONTAL / MOVIL TARJETA COMPACTA
========================================================= */

body.apus-popup-open { overflow: hidden !important; }

.apus-popup {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
}

.apus-popup.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.apus-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20,10,13,.84);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

.apus-popup-card {
    position: relative;
    z-index: 2;
    width: min(1250px, 96vw);
    max-height: 90vh;
    display: grid;
    grid-template-columns: minmax(0,1.18fr) minmax(420px,.82fr);
    overflow: hidden;
    background: #FCF9F3;
    border: 1px solid rgba(184,154,104,.45);
    border-radius: 25px;
    box-shadow: 0 35px 95px rgba(0,0,0,.46);
}

.apus-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 30;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 50%;
    background: rgba(48,20,25,.78);
    color: #fff;
    font-size: 27px;
    cursor: pointer;
}

.apus-popup-media {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    background: #281317;
}

.apus-popup-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .65s ease, visibility .65s ease;
}

.apus-popup-slide.activo {
    opacity: 1;
    visibility: visible;
}

.apus-popup-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.apus-popup-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30,10,14,.88), rgba(40,15,20,.08) 65%);
}

.apus-popup-media-copy {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 38px;
    z-index: 3;
    color: #fff;
}

.apus-popup-date-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 30px;
    background: rgba(58,25,30,.82);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.apus-popup-media-copy small {
    display: block;
    margin-bottom: 7px;
    color: #E9C892;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.apus-popup-media-copy strong {
    display: block;
    color: #FFF8EF;
    font-family: 'DM Serif Display', serif;
    font-size: clamp(42px,4vw,62px);
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 4px 18px rgba(0,0,0,.48);
}

.apus-popup-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 40px 38px 27px;
}

.apus-popup-brand { margin-bottom: 21px; }

.apus-popup-brand > span {
    display: block;
    color: #8B2635;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.4px;
}

.apus-popup-brand > small {
    display: block;
    margin-top: 3px;
    color: #88796E;
    font-size: 11px;
}

.apus-popup-details { min-height: 280px; }
.apus-popup-detail { display: none; }
.apus-popup-detail.activo { display: block; }

.apus-popup-kicker {
    display: block;
    margin-bottom: 8px;
    color: #B18445;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.apus-popup-detail h2 {
    margin: 0 0 12px;
    color: #6B1F2A;
    font-family: 'DM Serif Display', serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.03;
}

.apus-popup-detail p {
    margin: 0 0 13px;
    color: #65584F;
    font-size: 12.5px;
    line-height: 1.72;
}

.apus-popup-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 17px;
}

.apus-popup-highlights span {
    padding: 7px 10px;
    border: 1px solid #E6D7C4;
    border-radius: 30px;
    color: #6B1F2A;
    font-size: 9px;
    font-weight: 600;
}

.apus-popup-action {
    color: #6B1F2A;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(107,31,42,.35);
}

.apus-popup-calendar {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #E6D8C6;
}

.apus-popup-calendar-head {
    display: flex;
    gap: 9px;
    align-items: baseline;
    margin-bottom: 10px;
}

.apus-popup-calendar-head span {
    color: #B18445;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.apus-popup-calendar-head strong {
    color: #4C4038;
    font-size: 11px;
}

.apus-popup-calendar-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.apus-popup-event {
    min-height: 78px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    padding: 10px;
    text-align: left;
    background: #FFFDF8;
    border: 1px solid #E5D7C5;
    border-radius: 13px;
    color: #4A3D36;
    cursor: pointer;
}

.apus-popup-event.activo {
    background: #6B1F2A;
    border-color: #6B1F2A;
    color: #fff;
}

.apus-popup-event-date b,
.apus-popup-event-date em,
.apus-popup-event-info strong,
.apus-popup-event-info small { display: block; }

.apus-popup-event-date b {
    color: #6B1F2A;
    font-family: 'DM Serif Display',serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
}

.apus-popup-event-date em {
    margin-top: 3px;
    color: #B18445;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
}

.apus-popup-event-info strong {
    font-size: 9px;
    line-height: 1.2;
}

.apus-popup-event-info small {
    margin-top: 3px;
    color: #968579;
    font-size: 7.5px;
}

.apus-popup-event.activo .apus-popup-event-date b,
.apus-popup-event.activo .apus-popup-event-date em { color: #F0C98F; }

.apus-popup-event.activo .apus-popup-event-info small { color: #E7C89A; }

.apus-popup-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 17px;
}

.apus-popup-dots {
    display: flex;
    gap: 6px;
}

.apus-popup-dots i {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: #D7C8B8;
}

.apus-popup-dots i.activo {
    width: 24px;
    border-radius: 20px;
    background: #6B1F2A;
}

.apus-popup-enter {
    min-height: 38px;
    padding: 0 17px;
    border: 0;
    border-radius: 30px;
    background: #6B1F2A;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}


/* =========================================================
   MOVIL: DISEÑO DIFERENTE, TIPO TARJETA DE APP
========================================================= */

@media (max-width: 700px) {

    .apus-popup {
        align-items: center;
        padding: 14px;
    }

    .apus-popup-card {
        width: min(100%, 390px);
        max-height: 82vh;
        display: block;
        overflow-y: auto;
        border-radius: 20px;
        box-shadow: 0 22px 60px rgba(0,0,0,.40);
    }

    .apus-popup-close {
        top: 9px;
        right: 9px;
        width: 34px;
        height: 34px;
        font-size: 20px;
    }

    .apus-popup-media {
        height: 145px;
        min-height: 145px;
    }

    .apus-popup-slide img {
        object-fit: cover;
        object-position: center;
    }

    .apus-popup-media-copy {
        left: 14px;
        right: 52px;
        bottom: 12px;
    }

    .apus-popup-date-chip {
        min-height: 23px;
        margin: 0;
        padding: 0 9px;
        font-size: 7px;
        letter-spacing: .8px;
    }

    /* La imagen ya trae diseño; no duplicamos texto encima */
    .apus-popup-media-copy small,
    .apus-popup-media-copy strong {
        display: none;
    }

    .apus-popup-content {
        padding: 14px 15px 14px;
    }

    .apus-popup-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
    }

    .apus-popup-brand > span {
        font-size: 7px;
        letter-spacing: 1.3px;
    }

    .apus-popup-brand > small {
        margin: 0;
        font-size: 7.5px;
        white-space: nowrap;
    }

    .apus-popup-details {
        min-height: 0;
    }

    .apus-popup-kicker {
        margin-bottom: 4px;
        font-size: 6.5px;
        letter-spacing: .8px;
    }

    .apus-popup-detail h2 {
        margin: 0 0 5px;
        font-size: 23px;
        line-height: 1;
    }

    .apus-popup-detail p {
        margin: 0 0 8px;
        font-size: 9.5px;
        line-height: 1.42;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .apus-popup-highlights {
        display: none;
    }

    .apus-popup-action {
        display: inline-flex;
        min-height: 28px;
        align-items: center;
        padding: 0 11px;
        border: 1px solid #D8C3A8;
        border-radius: 30px;
        font-size: 8px;
        text-decoration: none;
    }

    /* Agenda: pestañas horizontales, no tarjetas de escritorio */
    .apus-popup-calendar {
        margin-top: 11px;
        padding-top: 10px;
    }

    .apus-popup-calendar-head {
        margin-bottom: 7px;
    }

    .apus-popup-calendar-head span {
        font-size: 6.5px;
        letter-spacing: .8px;
    }

    .apus-popup-calendar-head strong {
        font-size: 8px;
    }

    .apus-popup-calendar-grid {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .apus-popup-calendar-grid::-webkit-scrollbar {
        display: none;
    }

    .apus-popup-event {
        flex: 0 0 auto;
        min-width: 94px;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 8px;
        border-radius: 11px;
    }

    .apus-popup-event-date b {
        font-size: 17px;
    }

    .apus-popup-event-date em {
        margin-top: 1px;
        font-size: 5.5px;
    }

    .apus-popup-event-info strong {
        max-width: 64px;
        font-size: 6.8px;
        line-height: 1.08;
    }

    .apus-popup-event-info small {
        display: none;
    }

    .apus-popup-bottom {
        margin-top: 9px;
    }

    .apus-popup-dots {
        gap: 4px;
    }

    .apus-popup-dots i {
        width: 5px;
        height: 5px;
    }

    .apus-popup-dots i.activo {
        width: 16px;
    }

    .apus-popup-enter {
        min-height: 29px;
        padding: 0 12px;
        font-size: 7.5px;
    }
}

@media (max-width: 390px) {
    .apus-popup {
        padding: 9px;
    }

    .apus-popup-card {
        max-height: 86vh;
    }

    .apus-popup-media {
        height: 132px;
        min-height: 132px;
    }

    .apus-popup-detail h2 {
        font-size: 21px;
    }

    .apus-popup-detail p {
        font-size: 9px;
    }
}

/* =========================================================
   CORRECCIONES 2026-09-09
   Popup inicial + promoción Habitaciones Rojas
   ========================================================= */

/* ----- HABITACIONES ROJAS: estilos que faltaban ----- */
.habitaciones-premium .habitacion-promocion {
    background:
        linear-gradient(135deg, rgba(139, 38, 53, 0.035), transparent 42%),
        #FFFDF8 !important;
}

.habitaciones-premium .habitacion-promocion .promo-subtitulo {
    display: block;
    margin-bottom: 8px;
    color: #8B2635;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

/* Evita una segunda etiqueta sin formato encima/debajo de la imagen. */
.habitaciones-premium .habitacion-promocion .promo-imagen-badge {
    display: none !important;
}

.habitaciones-premium .habitacion-promocion .promo-aviso {
    display: block;
    margin-top: 4px;
    color: #6F6259;
    font-size: 12px;
    line-height: 1.5;
}

.habitaciones-premium .habitacion-promocion .promo-botones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.habitaciones-premium .habitacion-promocion .promo-reservar,
.habitaciones-premium .habitacion-promocion .promo-reservar:visited {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid #6B1F2A;
    border-radius: 11px;
    background: #6B1F2A;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: background .28s ease, transform .28s ease, box-shadow .28s ease;
}

.habitaciones-premium .habitacion-promocion .promo-reservar:hover {
    background: #4A141D;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(107, 31, 42, .18);
}

/* ----- POPUP PC/LAPTOP: no cortar el arte promocional ----- */
@media (min-width: 701px) {
    .apus-popup-card {
        height: min(650px, calc(100vh - 56px));
        max-height: calc(100vh - 56px);
    }

    .apus-popup-media {
        min-height: 0;
        height: 100%;
    }

    .apus-popup-content {
        min-height: 0;
        overflow-y: auto;
    }

    /* El primer arte trae texto/logo dentro de la propia imagen.
       Lo mostramos completo y rellenamos el fondo para evitar franjas vacías. */
    .apus-popup-slide[data-slide="0"] {
        background:
            linear-gradient(rgba(58, 8, 13, .38), rgba(58, 8, 13, .38)),
            url("../img/promo-hab-roja.png") center / cover no-repeat;
    }

    .apus-popup-slide[data-slide="0"]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: rgba(46, 10, 14, .24);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .apus-popup-slide[data-slide="0"] img {
        position: relative;
        z-index: 1;
        object-fit: contain;
        object-position: center;
    }

    .apus-popup-slide[data-slide="0"] .apus-popup-media-overlay,
    .apus-popup-slide[data-slide="0"] .apus-popup-media-copy {
        z-index: 3;
    }
}

@media (max-width: 700px) {
    .habitaciones-premium .habitacion-promocion .promo-botones {
        align-items: stretch;
        flex-direction: column;
    }

    .habitaciones-premium .habitacion-promocion .habitacion-ver,
    .habitaciones-premium .habitacion-promocion .promo-reservar {
        width: 100% !important;
    }
}

/* =========================================================
   RESTAURANTES V2 - GUÍA GASTRONÓMICA PARA HUÉSPEDES
   ========================================================= */

.restaurantes-pagina {
    --rest-vino: #6B1F2A;
    --rest-vino-2: #8B2635;
    --rest-dorado: #B89A68;
    --rest-crema: #FFFDF8;
    --rest-fondo: #F7F1E5;
    --rest-texto: #302621;
    --rest-suave: #74665C;

    padding-top: 150px;
    padding-bottom: 105px;
}

.restaurantes-hero {
    margin-bottom: 48px;
}

.restaurantes-intro {
    width: min(1180px, 100%);
    margin: 0 auto 30px;
    padding: 30px 34px;

    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 45px;
    align-items: center;

    background: rgba(255, 253, 248, .72);
    border: 1px solid #E4D7C5;
    border-radius: 20px;

    box-shadow: 0 12px 30px rgba(48, 38, 33, .06);
}

.restaurantes-kicker {
    display: block;
    margin-bottom: 8px;

    color: #B07A2D;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.restaurantes-intro h2,
.restaurantes-mapa-info h2 {
    color: var(--rest-vino);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.08;
}

.restaurantes-intro > p {
    color: var(--rest-suave);
    font-size: 13px;
    line-height: 1.85;
}

.restaurantes-filtros {
    width: min(1180px, 100%);
    margin: 0 auto 34px;

    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.restaurante-filtro {
    min-height: 40px;
    padding: 0 16px;

    border: 1px solid #DCCCB7;
    border-radius: 50px;

    background: rgba(255, 253, 248, .75);
    color: #695C53;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .25px;

    cursor: pointer;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.restaurante-filtro:hover {
    transform: translateY(-2px);
    border-color: #B89A68;
    color: #6B1F2A;
}

.restaurante-filtro.activo {
    background: #6B1F2A;
    border-color: #6B1F2A;
    color: #FFFFFF;

    box-shadow: 0 7px 18px rgba(107, 31, 42, .18);
}

.restaurantes-grid {
    width: min(1180px, 100%);
    margin: 0 auto 76px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.restaurante-card {
    min-width: 0;
    min-height: 420px;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #FFFDF8;
    border: 1px solid #E2D5C3;
    border-radius: 20px;

    box-shadow: 0 10px 28px rgba(48, 38, 33, .075);

    transition:
        transform .32s ease,
        box-shadow .32s ease,
        border-color .32s ease,
        opacity .24s ease;
}

.restaurante-card:hover {
    transform: translateY(-6px);
    border-color: #C8A87A;
    box-shadow: 0 18px 38px rgba(48, 38, 33, .13);
}

.restaurante-card.oculto {
    display: none !important;
}

.restaurante-card-top {
    position: relative;
    height: 105px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 20px;

    background:
        radial-gradient(circle at 82% 18%, rgba(184, 154, 104, .28), transparent 33%),
        linear-gradient(135deg, #2E231F 0%, #4B2026 62%, #6B1F2A 100%);
}

.restaurante-card-top::after {
    content: "";
    position: absolute;
    width: 125px;
    height: 125px;
    right: -46px;
    bottom: -72px;

    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
}

.restaurante-card-numero {
    position: relative;
    z-index: 1;

    align-self: flex-start;

    color: rgba(255, 255, 255, .64);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.restaurante-card-sigla {
    position: relative;
    z-index: 1;

    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;

    background: rgba(255, 255, 255, .055);

    color: #FFF6EE;

    font-family: 'DM Serif Display', serif;
    font-size: 21px;
    letter-spacing: .7px;

    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .025);
}

.restaurante-card-contenido {
    flex: 1;
    padding: 25px 24px 18px;
}

.restaurante-card-etiqueta {
    display: block;
    margin-bottom: 8px;

    color: #B07A2D;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.restaurante-card h2 {
    margin-bottom: 11px;

    color: #6B1F2A;

    font-family: 'DM Serif Display', serif;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.08;
}

.restaurante-card-contenido > p {
    min-height: 68px;
    margin-bottom: 19px;

    color: #6D6057;

    font-size: 12px;
    line-height: 1.72;
}

.restaurante-card-direccion {
    padding-top: 15px;
    border-top: 1px solid #EEE3D5;
}

.restaurante-card-direccion > span {
    display: block;
    margin-bottom: 5px;

    color: #9A7A51;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.55px;
}

.restaurante-card-direccion p {
    color: #51463F;
    font-size: 11px;
    line-height: 1.55;
}

.restaurante-card-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #E9DDCE;
}

.restaurante-ver-mapa,
.restaurante-como-llegar {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 12px;

    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .35px;

    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease;
}

.restaurante-ver-mapa {
    border: 0;
    border-right: 1px solid #E9DDCE;

    background: transparent;
    color: #6B1F2A;

    cursor: pointer;
}

.restaurante-ver-mapa:hover {
    background: #F4E8DB;
}

.restaurante-como-llegar {
    background: #6B1F2A;
    color: #FFFFFF;
}

.restaurante-como-llegar:hover {
    background: #4A141D;
    color: #FFFFFF;
}

.restaurantes-mapa-seccion {
    width: min(1180px, 100%);
    margin: 0 auto 36px;

    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 0;

    overflow: hidden;

    background: #FFFDF8;
    border: 1px solid #DDCEBB;
    border-radius: 22px;

    box-shadow: 0 18px 42px rgba(48, 38, 33, .11);
}

.restaurantes-mapa-info {
    padding: 45px 38px;

    background:
        linear-gradient(145deg, #FFFDF8 0%, #F4E7D7 100%);
}

.restaurantes-mapa-info > p {
    margin-top: 15px;

    color: #6B5F56;

    font-size: 13px;
    line-height: 1.8;
}

.restaurantes-mapa-nota {
    margin-top: 30px;
    padding: 18px 18px 17px;

    border-left: 2px solid #B89A68;
    background: rgba(255, 253, 248, .65);
}

.restaurantes-mapa-nota strong {
    display: block;
    margin-bottom: 4px;

    color: #6B1F2A;
    font-size: 11px;
}

.restaurantes-mapa-nota p {
    color: #77695F;
    font-size: 11px;
    line-height: 1.65;
}

.restaurantes-mapa-panel {
    min-height: 470px;
    background: #E9DDCE;
}

.restaurantes-mapa-panel iframe {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 470px;

    border: 0;
}

.restaurantes-aviso-final {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 18px 22px;

    display: flex;
    align-items: center;
    gap: 22px;

    border-top: 1px solid #DCCBB5;
    border-bottom: 1px solid #DCCBB5;
}

.restaurantes-aviso-final span {
    flex: 0 0 auto;

    color: #9A6B2C;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.restaurantes-aviso-final p {
    color: #7B6E64;
    font-size: 10px;
    line-height: 1.6;
}

/* TABLET */
@media (max-width: 980px) {
    .restaurantes-intro {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .restaurantes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .restaurantes-mapa-seccion {
        grid-template-columns: 1fr;
    }

    .restaurantes-mapa-panel,
    .restaurantes-mapa-panel iframe {
        min-height: 400px;
    }
}

/* CELULAR */
@media (max-width: 650px) {
    .restaurantes-pagina {
        padding-top: 125px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 75px;
    }

    .restaurantes-hero {
        margin-bottom: 36px;
    }

    .restaurantes-hero h1 {
        font-size: 40px;
    }

    .restaurantes-hero p {
        font-size: 13px;
        line-height: 1.75;
    }

    .restaurantes-intro {
        padding: 24px 21px;
        margin-bottom: 24px;
    }

    .restaurantes-intro h2,
    .restaurantes-mapa-info h2 {
        font-size: 29px;
    }

    .restaurantes-intro > p {
        font-size: 12px;
    }

    .restaurantes-filtros {
        flex-wrap: nowrap;
        overflow-x: auto;

        padding-bottom: 7px;

        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .restaurante-filtro {
        flex: 0 0 auto;
    }

    .restaurantes-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 52px;
    }

    .restaurante-card {
        min-height: 0;
    }

    .restaurante-card-contenido > p {
        min-height: 0;
    }

    .restaurante-card-top {
        height: 92px;
    }

    .restaurantes-mapa-info {
        padding: 31px 22px;
    }

    .restaurantes-mapa-panel,
    .restaurantes-mapa-panel iframe {
        min-height: 360px;
    }

    .restaurantes-aviso-final {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

@media (max-width: 390px) {
    .restaurante-card-acciones {
        grid-template-columns: 1fr;
    }

    .restaurante-ver-mapa {
        border-right: 0;
        border-bottom: 1px solid #E9DDCE;
    }

    .restaurantes-mapa-panel,
    .restaurantes-mapa-panel iframe {
        min-height: 320px;
    }
}

/* =========================================================
   RESTAURANTES V5 - MODAL VISUAL
   ========================================================= */

.restaurante-ver-detalle,
.restaurante-como-llegar,
.modal-secundario {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .35px;
    text-decoration: none;
    transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.restaurante-ver-detalle {
    border: 0;
    border-right: 1px solid #E9DDCE;
    background: transparent;
    color: #6B1F2A;
    cursor: pointer;
}

.restaurante-ver-detalle:hover {
    background: #F4E8DB;
}

.restaurante-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.restaurante-modal.activo {
    opacity: 1;
    visibility: visible;
}

.restaurante-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(24, 16, 15, 0.72);
    backdrop-filter: blur(5px);
}

.restaurante-modal-contenido {
    position: relative;
    z-index: 2;
    width: min(1080px, 100%);
    max-height: 88vh;
    display: grid;
    grid-template-columns: 1.03fr 0.97fr;
    overflow: hidden;
    background: #FFFDF8;
    border: 1px solid rgba(184, 154, 104, 0.38);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.36);
    transform: translateY(18px) scale(0.98);
    transition: transform .3s ease;
}

.restaurante-modal.activo .restaurante-modal-contenido {
    transform: translateY(0) scale(1);
}

.restaurante-modal-cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(48, 38, 33, 0.88);
    color: #FFFFFF;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

.restaurante-modal-cerrar:hover {
    background: #6B1F2A;
    transform: rotate(90deg);
}

.restaurante-modal-galeria {
    min-height: 540px;
    padding: 18px;
    background: linear-gradient(135deg, #2e201d 0%, #5b2028 100%);
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 14px;
}

.restaurante-galeria-principal,
.restaurante-galeria-mini {
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.restaurante-galeria-principal img,
.restaurante-galeria-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.restaurante-galeria-secundaria {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    min-height: 170px;
}

.restaurante-modal-info {
    padding: 55px 42px 34px;
    overflow-y: auto;
}

.restaurante-modal-info h2 {
    margin-bottom: 14px;
    font-family: 'DM Serif Display', serif;
    font-size: 34px;
    line-height: 1.08;
    color: #6B1F2A;
}

.restaurante-modal-info > p {
    color: #6A5D53;
    font-size: 14px;
    line-height: 1.8;
}

.restaurante-modal-nota-ubicacion {
    margin-top: 18px;
    color: #7b6d63;
    font-size: 11px;
    line-height: 1.65;
}

.restaurante-modal-acciones {
    grid-template-columns: auto auto 1fr;
    gap: 12px;
    align-items: center;
}

.modal-secundario {
    border: 1px solid #C8A87A;
    border-radius: 999px;
    color: #6B1F2A;
    background: transparent;
}

.modal-secundario:hover {
    background: #F6EBDD;
}

@media (max-width: 980px) {
    .restaurante-modal-contenido {
        grid-template-columns: 1fr;
        max-width: 700px;
        overflow-y: auto;
    }

    .restaurante-modal-galeria {
        min-height: 0;
    }

    .restaurante-galeria-principal {
        min-height: 280px;
    }

    .restaurante-galeria-secundaria {
        min-height: 130px;
    }
}

@media (max-width: 700px) {
    .restaurante-modal {
        padding: 12px;
    }

    .restaurante-modal-info {
        padding: 34px 22px 24px;
    }

    .restaurante-modal-info h2 {
        font-size: 30px;
    }

    .restaurante-modal-acciones {
        grid-template-columns: 1fr;
    }

    .modal-secundario,
    .modal-reservar,
    .modal-volver {
        width: 100%;
    }
}


/* RESTAURANTES V5.1 - TIPOGRAFIA MAS LEGIBLE */
.restaurante-modal-info h2 { font-size: 40px; }
.restaurante-modal-info > p { font-size: 16px; line-height: 1.75; }
.restaurante-modal-info h3 { font-size: 14px; }
.restaurante-modal-info .modal-dato span { font-size: 12px; }
.restaurante-modal-info .modal-dato strong { font-size: 15px; line-height: 1.45; }
.restaurante-modal-nota-ubicacion { font-size: 13px; }
.restaurante-modal-acciones .modal-volver,
.restaurante-modal-acciones .modal-secundario,
.restaurante-modal-acciones .modal-reservar { font-size: 11px; }
@media (max-width: 700px) {
  .restaurante-modal-info h2 { font-size: 34px; }
  .restaurante-modal-info > p { font-size: 15px; }
  .restaurante-modal-info .modal-dato strong { font-size: 14px; }
}

/* =========================================================
   RESTAURANTES V5.5 - TÍTULOS ADAPTADOS + GALERÍA 3 IMÁGENES
   ========================================================= */

.restaurante-modal-galeria {
    align-content: stretch;
}

.restaurante-galeria-principal {
    min-height: 370px;
}

.restaurante-galeria-principal img,
.restaurante-galeria-mini img {
    object-fit: cover;
    object-position: center center;
}

.restaurante-galeria-mini {
    min-height: 170px;
}

@media (max-width: 980px) {
    .restaurante-galeria-principal {
        min-height: 300px;
    }

    .restaurante-galeria-mini {
        min-height: 135px;
    }
}

/* =========================================================
   RESTAURANTES V5.6 - CORRECCIÓN REAL PARA CELULAR
   Evita solapamientos, cortes y desbordamiento del modal.
   ========================================================= */

@media (max-width: 700px) {
    .restaurante-modal {
        align-items: flex-start !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    .restaurante-modal-contenido {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: calc(100dvh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: 18px !important;
        -webkit-overflow-scrolling: touch;
    }

    .restaurante-modal-galeria {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    .restaurante-galeria-principal {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        margin: 0 0 10px !important;
    }

    .restaurante-galeria-secundaria {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .restaurante-galeria-mini {
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .restaurante-galeria-principal img,
    .restaurante-galeria-mini img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important;
        transform: none !important;
    }

    .restaurante-modal-info {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 28px 20px 24px !important;
        background: #FFFDF8 !important;
    }

    .restaurante-modal-info .modal-subtitulo {
        display: block !important;
        margin-bottom: 8px !important;
        font-size: 9px !important;
        letter-spacing: 2px !important;
    }

    .restaurante-modal-info h2 {
        margin: 0 0 12px !important;
        font-size: clamp(28px, 9vw, 38px) !important;
        line-height: 1.02 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .restaurante-modal-info > p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .restaurante-modal-info .modal-linea {
        margin: 22px 0 !important;
    }

    .restaurante-modal-info h3 {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }

    .restaurante-modal-info .modal-caracteristicas {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .restaurante-modal-info .modal-dato {
        min-width: 0 !important;
        padding: 16px !important;
    }

    .restaurante-modal-info .modal-dato strong {
        overflow-wrap: anywhere !important;
    }

    .restaurante-modal-nota-ubicacion {
        margin: 18px 0 0 !important;
    }

    .restaurante-modal-acciones {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .restaurante-modal-acciones .modal-volver,
    .restaurante-modal-acciones .modal-secundario,
    .restaurante-modal-acciones .modal-reservar {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
    }

    .restaurante-modal-cerrar {
        position: fixed !important;
        top: 22px !important;
        right: 22px !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 20010 !important;
    }
}

@media (max-width: 430px) {
    .restaurante-galeria-secundaria {
        grid-template-columns: 1fr !important;
    }

    .restaurante-galeria-mini {
        aspect-ratio: 16 / 9 !important;
    }

    .restaurante-modal-info {
        padding: 24px 16px 22px !important;
    }
}

/* =========================================================
   SELECTOR DE MONEDA - PEN / USD
   ========================================================= */

.selector-moneda {
    position: relative;
    z-index: 10020;

    flex: 0 0 auto;
    order: 3;

    margin-left: 18px;

    font-family: 'Montserrat', sans-serif;
}

.selector-moneda-boton {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 13px;

    border: 1px solid rgba(216, 179, 106, .38);
    border-radius: 999px;

    background: rgba(255, 255, 255, .055);
    color: #F7E9E2;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .45px;

    cursor: pointer;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        color .25s ease;
}

.selector-moneda-boton:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(216,179,106,.70);
    transform: translateY(-1px);
}

.selector-moneda-globo {
    color: #D8B36A;
    font-size: 15px;
    line-height: 1;
}

.selector-moneda-simbolo {
    min-width: 18px;

    color: #D8B36A;
    font-size: 10px;
    font-weight: 700;
}

.selector-moneda-chevron {
    color: #D8B36A;
    font-size: 13px;

    transition: transform .25s ease;
}

.selector-moneda.abierto .selector-moneda-chevron {
    transform: rotate(180deg);
}

.selector-moneda-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    width: 245px;

    padding: 8px;

    border: 1px solid rgba(216,179,106,.28);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(44, 26, 25, .985),
            rgba(77, 24, 34, .985)
        );

    box-shadow: 0 18px 42px rgba(0,0,0,.30);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-7px) scale(.98);
    transform-origin: top right;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .25s cubic-bezier(.2,.75,.2,1);
}

.selector-moneda.abierto .selector-moneda-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.selector-moneda-menu button {
    width: 100%;

    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;

    gap: 9px;

    padding: 11px 12px;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: #F8EDE5;

    text-align: left;
    cursor: pointer;

    transition: background .22s ease;
}

.selector-moneda-menu button:hover,
.selector-moneda-menu button.activo {
    background: rgba(216,179,106,.12);
}

.selector-moneda-menu button > span {
    color: #FFF4EB;

    font-size: 11px;
    font-weight: 700;
}

.selector-moneda-menu button > small {
    color: rgba(255,255,255,.68);

    font-size: 9px;
    line-height: 1.35;
}

.selector-moneda-menu > p {
    margin: 6px 8px 3px;

    color: rgba(255,255,255,.48);

    font-size: 8px;
    line-height: 1.4;
}

header.header .menu {
    order: 2;
}

header.header .logo {
    order: 1;
}

header.header .menu-toggle {
    order: 4;
}

/* En páginas internas el control conserva apariencia premium
   aunque el encabezado cambie de estado. */
body:not(:has(.hero)) .selector-moneda-boton,
header.header.header-scrolled .selector-moneda-boton {
    background: rgba(107,31,42,.07);
    border-color: rgba(107,31,42,.22);
    color: #6B1F2A;
}

body:not(:has(.hero)) .selector-moneda-globo,
body:not(:has(.hero)) .selector-moneda-simbolo,
body:not(:has(.hero)) .selector-moneda-chevron,
header.header.header-scrolled .selector-moneda-globo,
header.header.header-scrolled .selector-moneda-simbolo,
header.header.header-scrolled .selector-moneda-chevron {
    color: #9A6D31;
}

/* Precio único: ya no se duplica PEN + USD */
.precio-moneda {
    white-space: nowrap;
}

.tarifas-usd-nota {
    display: block;
    max-width: 620px;

    margin: 12px auto 0;

    color: #8A7A6D;

    font-size: 10.5px;
    line-height: 1.55;
}

@media (max-width: 1000px) and (min-width: 701px) {
    .selector-moneda {
        margin-left: 10px;
    }

    .selector-moneda-boton {
        min-height: 34px;
        padding: 0 10px;
        gap: 5px;
        font-size: 10px;
    }
}

@media (max-width: 700px) {

    .selector-moneda {
        order: 2;

        margin: 0 6px 0 auto;
    }

    header.header .menu-toggle {
        order: 3;
    }

    header.header .menu {
        order: 4;
    }

    .selector-moneda-boton {
        min-height: 34px;
        padding: 0 9px;
        gap: 5px;

        background: rgba(34,20,20,.22) !important;
        border-color: rgba(216,179,106,.34) !important;
        color: #FFF2E8 !important;

        font-size: 9.5px;
    }

    .selector-moneda-globo {
        display: none;
    }

    .selector-moneda-simbolo,
    .selector-moneda-chevron {
        color: #D8B36A !important;
    }

    .selector-moneda-menu {
        position: fixed;
        top: 78px;
        left: 14px;
        right: 14px;

        width: auto;

        transform-origin: top center;
    }

    .selector-moneda-menu button {
        min-height: 48px;
        grid-template-columns: 52px 1fr;
    }

    .selector-moneda-menu button > span {
        font-size: 12px;
    }

    .selector-moneda-menu button > small {
        font-size: 10px;
    }

    .tarifas-usd-nota {
        max-width: 330px;
        margin-top: 10px;

        font-size: 9.5px;
    }
}

@media (max-width: 390px) {
    .selector-moneda-boton {
        padding: 0 7px;
    }

    .selector-moneda-simbolo {
        display: none;
    }
}