/* ==========================================================================
   ARCHITECTURAL STYLESHEET - HOTEL PIRIBEBUY
   ==========================================================================
   Author:     Adrian Lucena
   Role:       CEO & Founder at DESIGNERLO
   Expertise:  Web Design & SEO Strategist (SEMRush, HubSpot & Google Certified)
   Location:   Paraguay
   Version:    2.0.0 (Clean Paradise Concept Master)
   Date:       June 2026
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES, RESET & CONFIGURACIÓN BASE
   ========================================================================== */
:root {
    --color-primario: #622325;       /* Bordó Corporativo */
    --color-dorado: #d4af37;         /* Dorado Premium */
    --color-dorado-hover: #b89321;
    --color-blanco: #ffffff;
    --color-texto-dark: #1c1c1c;
    --color-texto-muted: #777777;
    --font-editorial: 'Cormorant Garamond', serif;
    --font-lectura: 'Montserrat', sans-serif;
	--gap: 0px;
    --bp: 1024px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-lectura);
    background-color: var(--color-blanco);
    color: var(--color-texto-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.center-btn {
  display: flex;
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical */
  height: 120px;           /* ejemplo de altura */
}

/* ==========================================================================
   2. HEADER TRANSPARENTE CORE & ELEMENTOS FLOTANTES
   ========================================================================== */
.hotel-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo-img {
    display: block;
    max-width: 200px;
    height: auto;
    z-index: 160; /* Asegura que quede visible sobre la cortina móvil */
}

.header-logo-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.header-nav {
    display: flex;
    align-items: center;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 35px;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-blanco);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
    transition: all 0.3s ease;
}

.nav-links a:hover, .nav-links a.active {
    opacity: 1;
    color: var(--color-dorado);
}

/* ==========================================================================
   HEADER ACTIONS: REDES SOCIALES E IDIOMAS UNIFICADOS
   ========================================================================== */
.header-actions-desktop {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-socials {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-socials a {
    color: var(--color-blanco);
    opacity: 0.75;
    display: block;
    width: 22px;
    height: 22px;
    transition: all 0.3s ease;
}

.header-socials a svg {
    width: 100%;
    height: 100%;
    display: block;
}

.header-socials a:hover {
    opacity: 1;
    color: var(--color-dorado);
    transform: translateY(-2px);
}

/* SELECTOR DE IDIOMAS */
.header-lang-selector {
    position: relative;
    display: inline-block;
}

.lang-btn {
    background: transparent;
    border: none;
    color: var(--color-blanco) !important;
    font-size: 18px; /* Aumentamos ligeramente el tamaño del ícono para que tenga más protagonismo */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* Espacio mínimo con la flechita */
    padding: 10px 12px; /* Padding equilibrado para facilitar el toque digital */
    transition: color 0.3s ease;
}

/* Efecto hover sutil en el ícono */
.lang-btn:hover {
    color: var(--color-dorado) !important;
}

.lang-btn .globe-icon {
    width: 15px;
    height: 15px;
}

.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-blanco);
    list-style: none;
    padding: 6px 0;
    border-radius: 3px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    min-width: 140px;
    display: none;
}

.header-lang-selector.active .lang-menu {
    display: block;
}

.lang-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--color-texto-dark);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.lang-menu li a .lang-iso {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-texto-muted);
    background-color: #f0f2f5;
    padding: 2px 5px;
    border-radius: 2px;
}

.lang-menu li a:hover {
    background-color: #f5f5f5;
    color: var(--color-primario);
}

/* BOTÓN HAMBURGUESA (MÓVIL) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 170; /* Por encima de la cortina negra */
}

.menu-toggle .bar {
    width: 100%;
    height: 2px;
    background-color: var(--color-blanco); /* Líneas blancas nativas */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: left center;
}
.header-socials a svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Forzamos a que si el SVG usa propiedades de relleno nativo, también responda al color del hover */
.header-socials a:hover svg {
    fill: currentColor; 
}
/* ==========================================================================
   SELECTOR DE IDIOMAS MULTIPAÍS CON TRADUCTOR
   ========================================================================== */

.lang-dropdown {
    position: relative;
    display: inline-block;
}

.globe-icon {
    font-size: 20px; /* Tamaño ideal para el isotipo del mundo */
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.lang-btn {
    background: transparent;
    border: none;
    color: var(--color-blanco) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    transition: color 0.3s ease;
}

.lang-btn:hover .globe-icon {
    color: var(--color-dorado) !important;
}

/* Al hacer scroll, adaptamos el color del texto si es necesario */
.hotel-header.header-scrolled .lang-btn {
    color: var(--color-blanco) !important; /* Se mantiene blanco sobre el fondo oscuro de cristal */
}

.lang-dropdown-content .flag {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}

/* Contenedor flotante de las banderas */
.lang-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: rgba(28, 28, 28, 0.95) !important; /* Fondo premium a juego con el sticky */
    backdrop-filter: blur(10px);
    min-width: 150px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    z-index: 10000;
    overflow: hidden;
    padding: 5px 0;
}

/* Enlaces internos del desplegable */
.lang-dropdown-content a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
    text-align: left;
}

.lang-dropdown-content a:hover {
    background-color: var(--color-dorado) !important;
    color: var(--color-blanco) !important;
}

/* Mostrar el menú al hacer Hover (Desktop) */
.lang-dropdown:hover .lang-dropdown-content {
    display: block;
}

/* Ocultar los banners e interfaces nativas molestas que inyecta Google por defecto */
.goog-te-banner-frame, 
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-te-tooltip,
.goog-te-menu-value span:first-child {
    display: none !important;
}
body {
    top: 0 !important;
}

/* ==========================================================================
   3. HERO PARADISE A PANTALLA COMPLETA & EFECTO ZOOM IN
   ========================================================================== */
.hero-fullscreen {
    position: relative;
    width: 100%;
    height: 100vh; /* Inmersivo 100% vertical constante */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #000000; /* Evita destellos blancos en transiciones lentas */
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Efecto Ken Burns optimizado mediante hardware (will-change) */
.hero-bg-image img.effect-zoom-in {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    animation: paradiseZoom 24s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes paradiseZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}

.hero-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Filtro cinematográfico unificador */
    z-index: 2;
}

/* Contenido Central del Hero */
.hero-center-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: var(--color-blanco);
    padding: 0 20px;
    max-width: 900px;
    margin-bottom: 60px;
}

.hero-welcome {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-dorado);
    display: block;
    margin-bottom: 20px;
}

.hero-main-title {
    font-family: var(--font-editorial);
    font-size: 64px;
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 25px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero-main-subtitle {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto;
    opacity: 0.97;
}

/* ==========================================================================
   4. BARRA DE RESERVAS HORIZONTAL FLOTANTE
   ========================================================================== */
.booking-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    padding: 0 20px 40px 20px;
}

.booking-bar-form {
    max-width: 1100px;
    margin: 0 auto;
    background-color: var(--color-blanco);
    display: flex;
    align-items: center;
    padding: 15px 25px;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.booking-field {
    flex: 1;
    padding: 0 15px;
    border-right: 1px solid #eef2f5;
    display: flex;
    flex-direction: column;
}

.booking-field:nth-child(3) {
    border-right: none;
}

.booking-field label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-texto-muted);
    margin-bottom: 8px;
}

.booking-field select, .booking-field input {
    border: none;
    outline: none;
    font-family: var(--font-lectura);
    font-size: 14px;
    color: var(--color-texto-dark);
    font-weight: 500;
    background: transparent;
    width: 100%;
    cursor: pointer;
}

.booking-field-btn {
    padding-left: 15px;
}

.btn-booking-submit {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border: none;
    padding: 16px 32px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
}

.btn-booking-submit:hover {
    background-color: #441718;
}

/* ==========================================================================
   5. SISTEMA RESPONSIVE CRÍTICO (CORRECCIONES DE SOLAPAMIENTO EN MÓVIL)
   ========================================================================== */
@media (max-width: 992px) {
    /* Ocultación completa de acciones de escritorio en smartphones */
    .header-actions-desktop {
        display: none !important;
    }

    /* Activación del gatillo hamburguesa */
    .menu-toggle {
        display: flex;
    }

    /* LÍNEA ULTRA FINA EN EL HEADER MÓVIL (Sutil delimitador de marca) */
    .hotel-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
    }

    .header-inner {
        padding: 15px 20px; /* Un poco más compacto en móvil */
    }

    /* SEPARACIÓN DEL CONTENIDO CENTRAL PARA EVITAR SOLAPAMIENTO */
    .hero-fullscreen {
        height: 100vh;
        padding-top: 90px; /* Desplaza el eje central protegiendo el área del logo */
        box-sizing: border-box;
    }

    .hero-center-content {
        margin-top: 40px;   /* Separación extra de seguridad */
        margin-bottom: 40px;
        padding: 0 24px;
    }

    .hero-main-title {
        font-size: 36px;    /* Ajuste milimétrico de lectura */
        line-height: 1.2;
    }

    .hero-main-subtitle {
        font-size: 14px;
        opacity: 0.9;
    }

    /* CORTINA MÓVIL: NEGRO SEMI TRANSPARENTE CON BLUR ARTÍSTICO */
    .header-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 150;
        padding: 120px 40px 40px 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .header-nav.open {
        right: 0;
    }

    .nav-links {
        flex-direction: column;
        gap: 30px;
        text-align: center;
        width: 100%;
    }

    /* MENUS EN FUENTE COLOR BLANCO PURO EXCLUSIVO */
    .nav-links a {
        font-size: 22px;
        color: var(--color-blanco) !important;
        opacity: 0.9;
        letter-spacing: 2px;
        display: block;
    }

    .nav-links a:hover, .nav-links a.active {
        color: var(--color-dorado) !important;
        opacity: 1;
    }

    /* INTERACTIVIDAD DEL ICONO: TRANSFORMACIÓN A 'X' BLANCA */
    .menu-toggle.open .bar:nth-child(1) {
        transform: rotate(45deg) translate(4px, 3px);
    }
    .menu-toggle.open .bar:nth-child(2) {
        opacity: 0;
        transform: translateX(-10px);
    }
    .menu-toggle.open .bar:nth-child(3) {
        transform: rotate(-45deg) translate(3px, -2px);
    }

    .header-logo-img {
        max-width: 125px; /* Escalado perfecto para pantallas móviles */
    }

    /* Adaptación vertical limpia de la barra de reservas en móviles */
    .booking-bar-container {
        position: relative;
        padding: 40px 20px;
        background-color: #fafafa;
        bottom: auto;
    }

    .booking-bar-form {
        flex-direction: column;
        gap: 20px;
        padding: 25px 20px;
    }

    .booking-field {
        width: 100%;
        padding: 0 0 15px 0;
        border-right: none;
        border-bottom: 1px solid #eef2f5;
    }

    .booking-field-btn {
        width: 100%;
        padding-left: 0;
    }

    .btn-booking-submit {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   6. SECCIÓN ABOUT - PARADISE CONCEPT
   ========================================================================== */
.about-section {
    padding: 60px 0px;
    background-color: #ffffff;
    overflow: hidden;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* --- Columna Izquierda: Textos --- */
.about-subtitle {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-dorado);
    display: block;
    margin-bottom: 15px;
}

.about-title {
    font-family: var(--font-editorial);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-texto-dark);
    margin-bottom: 25px;
}

.about-text-lead {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-texto-dark);
    font-weight: 500;
    margin-bottom: 20px;
}

.about-text-body {
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-texto-muted);
    margin-bottom: 40px;
}

/* Características (Features) */
.about-features {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.feature-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.feature-icon {
    width: 32px;
    height: 32px;
    color: var(--color-primario);
    flex-shrink: 0;
    margin-top: 3px;
}

.feature-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.feature-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-texto-dark);
    margin-bottom: 6px;
}

.feature-info p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-texto-muted);
}

/* --- Columna Derecha: Composición de Medios --- */
.about-media {
    position: relative;
    width: 100%;
}

.media-wrapper {
    position: relative;
    padding-bottom: 40px;
}

.image-main {
    width: 80%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.image-main img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Imagen flotante superpuesta (Paradise signature overlay) */
.image-accent {
    position: absolute;
    width: 55%;
    bottom: 0;
    right: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border: 8px solid #ffffff; /* Marco elegante divisor */
}

.image-accent img {
    width: 100%;
    height: auto;
    display: block;
}

/* Sello flotante de la marca */
.about-badge {
    position: absolute;
    top: 10%;
    right: 10%;
    background-color: var(--color-primario);
    color: #ffffff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px rgba(98, 35, 37, 0.3);
    z-index: 5;
    animation: badgeFloat 6s ease-in-out infinite alternate;
}

.badge-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.badge-year {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.badge-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

@keyframes badgeFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* ==========================================================================
   RESPONSIVE - SECCIÓN ABOUT
   ========================================================================== */
@media (max-width: 992px) {
    .about-section {
        padding: 50px 20px;
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-title {
        font-size: 32px;
    }

    .image-main {
        width: 100%;
    }

    .image-accent {
        display: none; /* Simplificación para optimizar espacio y LCP en móvil */
    }
    
    .about-badge {
        right: 5%;
        top: -20px;
    }
}

/* ==========================================================================
   CUADRÍCULA DE 4 COLUMNAS - AMENIDADES (PARADISE INTERFACE)
   ========================================================================== */
.about-grid-four-cols {
    grid-column: 1 / -1; /* Rompe el grid padre y ocupa todo el ancho de la sección */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #f0f2f5; /* Línea divisoria muy fina y limpia */
}

.grid-col-item {
    text-align: center;
    padding: 20px 15px;
    transition: transform 0.3s ease;
}

.grid-col-item:hover {
    transform: translateY(-5px); /* Micro-interacción fluida sin JS */
}

.col-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px auto;
    color: var(--color-dorado); /* Color Premium para desmarcar del cuerpo */
    transition: color 0.3s ease;
}

.col-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.grid-col-item:hover .col-icon {
    color: var(--color-primario); /* Giro cromático interactivo hacia tu Bordó */
}

.grid-col-item h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-texto-dark);
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.grid-col-item p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-texto-muted);
}

/* ==========================================================================
   RESPONSIVE - GRID DE AMENIDADES
   ========================================================================== */
@media (max-width: 992px) {
    .about-grid-four-cols {
        grid-template-columns: repeat(2, 1fr); /* 2x2 en Tablets */
        gap: 40px 20px;
        margin-top: 40px;
        padding-top: 30px;
    }
}

@media (max-width: 576px) {
    .about-grid-four-cols {
        grid-template-columns: 1fr; /* 1 columna vertical pura en móviles */
        gap: 35px;
    }
}

/* ==========================================================================
   7. SECCIÓN ROOMS PARALLAX - HIGH IMPACT (WPO OPTIMIZED)
   ========================================================================== */
	.rooms-parallax-section {
    position: relative !important;
    display: flex !important; /* Usamos flex para centrar verticalmente el contenido */
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60vh; /* Un poco más de altura para que el impacto visual sea mayor */
    overflow: hidden !important;
    z-index: 1 !important;
    
    /* Configuración del Parallax Nativo (Corregido y Unificado) */
    background-image: url('https://www.hotelpiribebuy.com/images/room-parallax-bg.webp') !important;
    background-attachment: fixed !important; /* El secreto del Parallax CSS */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    will-change: transform; /* Aceleración por hardware para suavidad extrema */
}


.rooms-parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 2; /* Por encima del fondo, por debajo del contenido */
}

.rooms-parallax-container {
    max-width: 1200px;
    width: 100%;
    padding: 80px 20px; /* Padding generoso para asegurar que la sección respire */
    position: relative;
    z-index: 3; /* Al frente de todo */
}

.rooms-parallax-content {
    max-width: 700px;
    color: var(--color-blanco);
}

.rooms-parallax-subtitle {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--color-dorado);
    display: block;
    margin-bottom: 20px;
}

.rooms-parallax-title {
    font-family: var(--font-editorial);
    font-size: 58px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 25px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.rooms-parallax-desc {
    font-size: 16px;
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Botonera de la Sección */
.rooms-parallax-actions {
    display: flex;
    gap: 20px;
}

.btn-rooms-white {
    padding: 16px 30px;
    background-color: var(--color-blanco);
    color: var(--color-texto-dark);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.btn-rooms-gold {
    padding: 16px 30px;
    border: 2px solid var(--color-dorado);
    color: var(--color-dorado);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.btn-rooms-white:hover {
    background-color: var(--color-dorado);
    color: var(--color-blanco);
}

.btn-rooms-gold:hover {
    background-color: var(--color-dorado);
    color: var(--color-blanco);
}

/* ==========================================================================
   RESPONSIVE PARALLAX (SOPORTE MÓVIL)
   ========================================================================== */
@media (max-width: 992px) {
    .rooms-parallax-section {
        height: auto;
        padding: 70px 0;
        background-attachment: scroll; /* Desactiva parallax en móvil para fluidez */
    }

    .rooms-parallax-title {
        font-size: 42px;
    }

    .rooms-parallax-actions {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-rooms-white, .btn-rooms-gold {
        text-align: center;
        width: 100%;
    }
}

/* ==========================================================================
   8. GALERÍA - CAROUSEL SHOWCASE TRIDIMENSIONAL
   ========================================================================== */
.gallery-section {
    padding: 60px 0;
    background-color: #fafafa;
    overflow: hidden;
}

.gallery-title-container {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    padding: 0 20px;
}

.gallery-subtitle {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--color-dorado);
    display: block;
    margin-bottom: 15px;
}

.gallery-title {
    font-family: var(--font-editorial);
    font-size: 42px;
    font-weight: 400;
    color: var(--color-texto-dark);
    margin-bottom: 15px;
}

.gallery-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-texto-muted);
}

/* Configuración del Carrusel */
.gallery-swiper {
    padding: 40px 0 60px 0 !important;
    width: 100%;
}

.gallery-card {
    background-color: var(--color-blanco);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    
    /* El truco del escalado y color opaco inicial */
    transform: scale(0.85); 
    opacity: 0.4;
    filter: grayscale(80%);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.5s ease, 
                filter 0.5s ease;
}

/* --- CLASE CRÍTICA: Resalta automáticamente la tarjeta del centro --- */
.swiper-slide-active.gallery-card {
    transform: scale(1.05); /* Se magnifica en medio */
    opacity: 1;             /* Brillo completo */
    filter: grayscale(0%);  /* Recupera el color vivo */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.card-image-box {
    width: 100%;
    height: 380px;
    overflow: hidden;
    background-color: #eee;
}

.card-image-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.swiper-slide-active:hover .card-image-box img {
    transform: scale(1.04); /* Micro-zoom elegante al pasar el cursor solo en la activa */
}

.card-info {
    padding: 25px;
    text-align: center;
}

.card-info h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-texto-dark);
    margin-bottom: 5px;
}

.card-info span {
    font-size: 12px;
    color: var(--color-dorado);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Controles de Navegación personalizados ( Paradise Style ) */
.gallery-nav-btn {
    color: var(--color-texto-dark) !important;
    width: 50px !important;
    height: 50px !important;
    background-color: var(--color-blanco);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.gallery-nav-btn:after {
    font-size: 18px !important;
    font-weight: 700;
}

.gallery-nav-btn:hover {
    background-color: var(--color-primario);
    color: var(--color-blanco) !important;
}

.gallery-pagination .swiper-pagination-bullet-active {
    background: var(--color-primario) !important;
    width: 24px;
    border-radius: 4px;
}

/* ==========================================================================
   RESPONSIVE - GALERÍA MÓVIL
   ========================================================================== */
@media (max-width: 768px) {
    .gallery-title { font-size: 32px; }
    .card-image-box { height: 280px; }
    .gallery-nav-btn { display: none !important; } /* En smartphones se navega con el dedo swipe nativo */
    
    .gallery-card {
        transform: scale(0.9); /* Menos agresivo el salto de tamaño en smartphones */
    }
    .swiper-slide-active.gallery-card {
        transform: scale(1);
    }
}

/* ==========================================================================
   10. SECCIÓN CONTACTO & RESERVAS - ARQUITECTURA ASIMÉTRICA
   ========================================================================== */
.contact-booking-section {
    padding: 120px 20px;
    background-color: #fafafa;
    position: relative;
}

.contact-booking-container {
    max-width: 1200px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 5fr 7fr; /* Asimetría: más espacio para el formulario principal */
    gap: 80px;
    align-items: flex-start;
}

/* --- COLUMNA CONTACTO (IZQUIERDA) --- */
.contact-subtitle {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--color-dorado);
    display: block;
    margin-bottom: 15px;
}

.contact-title {
    font-family: var(--font-editorial);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-texto-dark);
    margin-bottom: 25px;
}

.contact-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-texto-muted);
    margin-bottom: 45px;
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}

.contact-detail-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.detail-icon {
    width: 22px;
    height: 22px;
    color: var(--color-dorado);
    flex-shrink: 0;
    margin-top: 2px;
}

.detail-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.detail-text h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-texto-dark);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-text p {
    font-size: 14px;
    color: var(--color-texto-muted);
    line-height: 1.5;
}

/* Redes Sociales en la columna de contacto */
.contact-socials-wrapper h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-texto-muted);
    margin-bottom: 15px;
}

.contact-social-links {
    display: flex;
    gap: 16px;
}

.contact-social-links a {
    color: var(--color-texto-dark);
    display: block;
    width: 30px;
    height: 30px;
    transition: color 0.3s, transform 0.3s;
}

.contact-social-links a svg {
    width: 100%;
    height: 100%;
    display: block;
}

.contact-social-links a:hover {
    color: var(--color-dorado);
    transform: translateY(-2px);
}

/* --- COLUMNA FORMULARIO DE RESERVA (DERECHA) --- */
.booking-box-card {
    background-color: var(--color-blanco);
    padding: 50px;
    border-radius: 4px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0,0,0,0.02);
}

.booking-box-header {
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 25px;
    margin-bottom: 35px;
}

.booking-box-header h3 {
    font-family: var(--font-editorial);
    font-size: 28px;
    font-weight: 400;
    color: var(--color-texto-dark);
    margin-bottom: 8px;
}

.booking-box-header p {
    font-size: 13px;
    color: var(--color-texto-muted);
}

/* Estilos limpios de los campos */
.form-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}

.form-group-field label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-texto-dark);
    margin-bottom: 10px;
}

.form-group-field input[type="text"],
.form-group-field input[type="email"],
.form-group-field input[type="date"],
.form-group-field select {
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    border-radius: 2px;
    font-family: var(--font-lectura);
    font-size: 13px;
    color: var(--color-texto-dark);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
    width: 100%;
}

/* Modificadores estéticos de inputs al hacer foco */
.form-group-field input:focus,
.form-group-field select:focus {
    border-color: var(--color-dorado);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1);
}

/* Botón de Envío Corporativo */
.btn-submit-booking {
    width: 100%;
    padding: 18px;
    background-color: var(--color-primario); /* Tu bordó corporativo */
    color: var(--color-blanco);
    border: none;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s, transform 0.3s;
    margin-top: 10px;
}

.btn-submit-booking svg {
    width: 15px;
    height: 15px;
    transition: transform 0.3s;
}

.btn-submit-booking:hover {
    background-color: #4a191a; /* Oscurecimiento elegante del bordó */
    transform: translateY(-1px);
}

.btn-submit-booking:hover svg {
    transform: translateX(4px);
}

/* ==========================================================================
   RESPONSIVE - CONTACTO & RESERVAS
   ========================================================================== */
@media (max-width: 992px) {
    .contact-booking-section {
        padding: 70px 15px;
    }
    
    .contact-booking-container {
        grid-template-columns: 1fr; /* Pasa a flujo vertical puro */
        gap: 60px;
    }
    
    .contact-title {
        font-size: 36px;
    }
    
    .booking-box-card {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {
    .form-row-grid {
        grid-template-columns: 1fr; /* Inputs apilados en celulares pequeños */
        gap: 0;
    }
}
/* Estilos limpios de los campos - Actualizado con soporte Tel */
.form-group-field input[type="text"],
.form-group-field input[type="email"],
.form-group-field input[type="tel"], /* <-- Igualamos el estilo para el campo de celular */
.form-group-field input[type="date"],
.form-group-field select {
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    border-radius: 2px;
    font-family: var(--font-lectura);
    font-size: 13px;
    color: var(--color-texto-dark);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
    width: 100%;
}

/* Modificadores estéticos de inputs al hacer foco - Actualizado */
.form-group-field input:focus,
.form-group-field select:focus {
    border-color: var(--color-dorado);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1);
}

/* ==========================================================================
   11. MAIN FOOTER - BRANDING CENTRADO PREMIUM
   ========================================================================== */
/* 1. El footer debe ser un bloque de ancho completo */
.main-footer {
    width: 100%;             /* Fuerza el ancho total */
    display: block;          /* Asegura que no se comporte como celda de tabla */
    background-color: var(--color-primario);
    padding: 80px 20px 40px 20px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* EVITAR MARGENES EXTERNOS */
    margin: 0;
    box-sizing: border-box;  /* Crucial: incluye el padding en el ancho */
}

/* 2. El contenedor interno limita el contenido, no el fondo */
.footer-container {
    width: 100%;             /* Ocupa el disponible del footer */
    max-width: 800px;        /* Mantiene tu diseño centrado de 800px */
    margin: 0 auto;          /* Centra el bloque de 800px dentro del fondo full-width */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Identidad Visual en Footer */
.footer-logo-text {
    font-family: var(--font-editorial);
    font-size: 28px;
    font-weight: 400;
    color: var(--color-blanco);
    letter-spacing: 1px;
    margin: 0;
}

.footer-logo-text span {
    color: var(--color-dorado); /* Toque de distinción en el nombre */
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-top: 5px;
    font-family: var(--font-lectura);
    font-weight: 700;
}

/* Enlaces de Navegación del Footer */
.footer-nav {
    display: flex;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--color-dorado);
}

/* Créditos e Info Sugerida */
.footer-credentials {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-copy {
    font-size: 12px;
    margin: 0;
    opacity: 0.6;
}

.footer-author {
    font-size: 11px;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.footer-author a {
    color: var(--color-dorado);
    text-decoration: none;
    font-weight: 600;
    transition: text-decoration 0.3s;
}

.footer-author a:hover {
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.3);
}

/* ==========================================================================
   RESPONSIVE - FOOTER
   ========================================================================== */
@media (max-width: 576px) {
    .main-footer {
        padding: 50px 15px 10px 15px;
    }

    .footer-container {
        gap: 20px;
    }

    .footer-nav {
        flex-direction: column; /* Se apila limpiamente en celulares para mejorar el tap target */
        gap: 18px;
    }

    .footer-nav a {
        font-size: 14px;
    }
}
/* Asegurar comportamiento fluido del scroll */
html {
    scroll-behavior: smooth;
}

/* Estilo destacado para el botón de Reservas en el Menú */
.btn-menu-reservas {
    font-weight: 700 !important;
    color: #c5a059 !important; /* Dorado Corporativo */
}

/* Ajuste rápido para vista móvil si la plantilla colapsa el menú */
@media (max-width: 991px) {
    #main-menu {
        padding: 20px 0;
    }
    #main-menu li {
        display: block;
        margin: 15px 20px;
    }
    #main-menu li a {
        font-size: 16px;
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
}
/* ==========================================================================
   NAVEGACIÓN PREMIUM REESTRUCTURADA - DESIGNERLO
   ========================================================================== */

/* Comportamiento global del Header */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Evita que el header fijo tape el inicio de las secciones */
}

/* 1. ESTILOS DESKTOP (Pantallas Grandes) */
@media (min-width: 992px) {
    .main-menu-list {
        display: flex !important;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 30px; /* Espaciado elegante entre ítems */
    }

    .main-menu-list li {
        position: relative;
    }

    .main-menu-list li a {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #ffffff; /* Color oscuro limpio */
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 10px 0;
        transition: color 0.3s ease;
    }

    /* Efecto Hover Editorial */
    .main-menu-list li a:hover,
    .main-menu-list li a.active {
        color: #d4af37; /* Dorado */
    }

    /* Botón Destacado de Reservas */
    .main-menu-list li a.btn-menu-reservas {
        background-color: #c5a059; /* Dorado */
        color: #ffffff !important;
        padding: 10px 22px;
        border-radius: 4px;
        font-weight: 600;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .main-menu-list li a.btn-menu-reservas:hover {
        background-color: #5c1d1e; /* Cambia a Bordó al pasar el cursor */
        transform: translateY(-1px);
    }
}

/* 2. ESTILOS MOBILE & TABLET (Menú Colapsable) */
@media (max-width: 991px) {
    /* Forzar que la lista se comporte como un bloque vertical si la plantilla la libera */
    .main-menu-list {
        display: block !important;
        list-style: none;
        padding: 20px !important;
        margin: 0;
        background-color: #ffffff;
    }

    .main-menu-list li {
        display: block;
        border-bottom: 1px solid #f1f5f9;
    }

    .main-menu-list li:last-child {
        border-bottom: none;
    }

    .main-menu-list li a {
        display: block;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: #1e293b;
        text-decoration: none;
        padding: 14px 10px;
        transition: all 0.3s ease;
    }

    .main-menu-list li a:hover,
    .main-menu-list li a.active {
        color: #5c1d1e;
        padding-left: 15px; /* Efecto sutil de desplazamiento al tocar */
        background-color: #f8fafc;
    }

    /* Adaptación del Botón de Reserva en Móviles */
    .main-menu-list li a.btn-menu-reservas {
        background-color: #5c1d1e; /* Bordó predominante en móviles */
        color: #ffffff !important;
        text-align: center;
        margin-top: 15px;
        border-radius: 4px;
        font-weight: 600;
    }
    
    .main-menu-list li a.btn-menu-reservas:hover {
        background-color: #c5a059;
        padding-left: 10px;
    }
}
/* ==========================================================================
   MÓDULO: HEADER DINÁMICO STICKY (TRANSPARENTE A COMPRIMIDO)
   ========================================================================== */

/* Estado Nativo / Inicial (Transiciones suaves) */
.hotel-header {
    position: fixed !important; /* Pasa a fixed para flotar desde el inicio sin romper el Hero */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.header-inner {
    transition: padding 0.4s ease !important;
}

.header-logo-img {
    transition: max-width 0.4s ease !important;
}

/* --------------------------------------------------------------------------
   ESTADO ACTIVO: Se activa automáticamente al hacer scroll hacia abajo
   -------------------------------------------------------------------------- */
.hotel-header.header-scrolled {
    /* Fondo oscuro traslúcido premium con efecto cristal (Glassmorphism) */
    background: rgba(28, 28, 28, 0.85) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Sombra de profundidad elegante */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Reducción sutil de tamaño en Scroll (Efecto compacto) */
.hotel-header.header-scrolled .header-inner {
    padding: 10px 20px !important; /* Reduce el espaciado interno */
}

.hotel-header.header-scrolled .header-logo-img {
    max-width: 140px !important; /* Achica el logo sutilmente sin perder formato */
}

/* --------------------------------------------------------------------------
   VERSION MÓVIL: CORTINA 100% PANTALLA BORDÓ (Se mantiene impecable)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    /* El header en móvil ahora mantiene el formato traslúcido premium con sombra */
    .hotel-header.header-scrolled {
        background: rgba(28, 28, 28, 0.85) !important; 
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    }

    /* ELIMINADA LA CORTINA BORDÓ: El contenedor del menú ahora es sutil */
    .header-nav {
        position: fixed !important;
        top: 70px !important; /* Se despliega justo debajo del header */
        right: -100%;
        width: 100% !important;
        height: auto !important; /* Ya no ocupa toda la pantalla */
        background: rgba(28, 28, 28, 0.95) !important; /* Fondo oscuro traslúcido a tono con el header */
        backdrop-filter: blur(10px);
        z-index: 9998 !important;
        padding: 20px 0 !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    /* Cuando el menú se abre, se desliza elegantemente */
    .header-nav.open {
        right: 0 !important;
    }

    /* Los enlaces mantienen su formato y tamaño original */
    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .nav-links a {
        color: var(--color-blanco) !important;
        font-size: 16px !important; /* Tamaño normal, no gigante */
        padding: 10px 0;
        width: 100%;
        text-align: center;
    }
}

    /* El botón de hamburguesa se mantiene blanco arriba sobre la cortina */
    .menu-toggle.open .bar {
        background-color: var(--color-blanco) !important;
    }
}

/* Compensación de Scroll para que las anclas no queden tapadas */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 75px; 
}

/* ==========================================================================
   CORRECCIÓN QUIRÚRGICA: VISIBILIDAD PARALLAX HABITACIONES
   ========================================================================== */

/* 1. Forzar que el contenedor del Parallax se mantenga visible y en su capa correcta */
.parallax-section, 
.parallax-window,
#rooms, /* O el ID/Clase específico que use tu sección de habitaciones */
[data-parallax] {
    position: relative !important;
    z-index: 1 !important; /* Capa base por encima del fondo general, pero abajo del header */
    overflow: hidden !important; /* Evita que la imagen desborde el contenedor */
    display: block !important;
}

/* 2. Asegurar que el reflejo o la capa espejo de la librería JS no quede en z-index negativo invisible */
.parallax-mirror {
    z-index: 0 !important; /* Lo justo para que se renderice detrás del texto pero visible en el DOM */
    opacity: 1 !important; /* Previene que scripts colgados la dejen transparente */
    visibility: visible !important;
}

/* 3. Corrección por si el fondo se está solapando por culpa de un background-color heredado */
.parallax-content {
    position: relative !important;
    z-index: 2 !important; /* Eleva los textos y botones por encima de la imagen cargada */
    background: transparent !important; /* Evita que un fondo sólido tape el parallax */
}

/* ==========================================================================
   AJUSTE: BOTÓN DE RESERVA GARANTIZADA (ESTILO PREMIUM)
   ========================================================================== */

.btn-booking-gold {
    display: inline-block;
    width: 100%; /* Ocupa el ancho del contenedor del formulario */
    padding: 16px 30px;
    background-color: transparent;
    border: 2px solid var(--color-dorado) !important;
    color: var(--color-dorado) !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px; /* Un toque más de espaciado para mayor legibilidad */
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
    box-sizing: border-box;
    text-align: center;
}

/* Efecto Hover: Se llena con tu dorado corporativo e invierte el texto a blanco */
.btn-booking-gold:hover {
    background-color: var(--color-dorado) !important;
    color: var(--color-blanco) !important;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.2); /* Sutil destello dorado de profundidad */
    transform: translateY(-1px); /* Micro movimiento premium */
}

/* Estado Activo (Al hacer click) */
.btn-booking-gold:active {
    transform: translateY(1px);
}

/* Estilos para el Ícono del Mundo SVG */
.svg-globe {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    transition: stroke 0.3s ease;
}

/* El ícono hereda el color del texto del menú de forma dinámica */
.lang-btn {
    background: transparent;
    border: none;
    color: var(--color-blanco) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
}

/* Efecto hover: el mundo pasa a dorado al posicionarse encima */
.lang-btn:hover .svg-globe {
    stroke: var(--color-dorado) !important;
}

/* Estilos para las Banderas SVG dentro del desplegable */
.svg-flag {
    width: 24px;       /* Tamaño perfecto y sutil para las banderas */
    height: 16px;      /* Proporción estándar */
    object-fit: cover;
    border-radius: 2px; /* Micro bordes redondeados premium */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Sutil relieve */
    display: inline-block;
    vertical-align: middle;
}

/* Asegurar alineación del texto interno con los SVG */
.lang-dropdown-content a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* ==========================================================================
   BLOQUE QUIRÚRGICO: ELIMINAR BARRA DE GOOGLE TRANSLATE
   ========================================================================== */

/* Oculta el iframe de la barra superior en cualquier resolución */
iframe.goog-te-banner-frame, 
.goog-te-banner-frame,
#goog-gt-tt, 
.goog-te-balloon-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

/* Forzamos al body a ignorar el desplazamiento que le inyecta Google */
body {
    top: 0 !important;
    position: static !important;
}

/* Evita que los textos tengan ese fondo amarillo horrible al pasar el mouse */
.goog-text-highlight {
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

/* ==========================================================================
   CORRECCIÓN MOBILE: ESPACIADO COLUMNA DE CONTACTO
   ========================================================================== */
@media (max-width: 767px) {
    /* Forzamos el colchón de aire a la columna de información */
    .contact-info-column {
        padding-left: 24px !important;  /* Un toque de aire extra para las primeras letras */
        padding-right: 24px !important;
        box-sizing: border-box !important; /* Vital para que el padding no rompa el ancho */
        width: 100% !important; /* Asegura que ocupe todo el ancho del celular */
        float: none !important;
    }

    /* Ajustamos la lista interna de ítems (Dirección, Teléfono, Mail) */
    .contact-detail-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        display: flex !important; /* Mantiene el ícono alineado con el texto */
    }

    /* Evitamos que los títulos o textos largos se desborden */
    .contact-title {
        font-size: 32px !important; /* Tamaño adaptado para pantallas chicas */
        line-height: 1.2 !important;
    }
    
    .contact-desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* ==========================================================================
   CSS SEGURO Y AISLADO PARA EL LOGIN (CERO IMPACTO EN EL PANEL)
   ========================================================================== */

/* Este bloque ahora hace el trabajo del body, pero encerrado en su propio mundo */
.login-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background-color: #121212 !important; /* Forzamos el fondo oscuro solo en el login */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    z-index: 999999 !important; /* Se superpone al panel roto de fondo mientras no estés logueado */
}

.login-card {
    background-color: #1c1c1c;
    border-radius: 8px;
    padding: 40px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    box-sizing: border-box;
}

.login-logo-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto 50px auto !important; /* El '0 auto' fuerza el centrado de la caja, el '50px' da la separación abajo */
    padding: 0 !important;
    box-sizing: border-box !important;
}

.login-logo {
    max-width: 200px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important; /* Fuerza a la imagen a centrarse dentro de su contenedor */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
}

/* ==========================================================================
   BOTÓN WHATSAPP FLOTANTE
   ========================================================================== */

.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25D366; /* Verde WhatsApp */
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #d4af37; /* Dorado elegante al hover */
}

.whatsapp-float .tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 70px;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.whatsapp-float:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
/* Estilo para el contenedor de 4 columnas */
.rooms-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 40px;
}

/* Efecto de la Tarjeta */
.room-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
    text-decoration: none;
    color: #333;
}

.room-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Imagen con altura fija */
.room-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

/* Cuerpo de la tarjeta */
.room-body {
    padding: 20px;
}

.room-body h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.room-price {
    display: inline-block;
    background: #2c3e50;
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 0.9rem;
    margin-top: 10px;
}

/* Responsividad: si es celular, que pasen a 1 columna */
@media (max-width: 992px) {
    .rooms-container { grid-template-columns: 1fr; }
}

/* Contenedor del carrusel */
.room-card {
    background: #fff;
    padding: 20px; /* Padding del borde que pediste */
    border: 1px solid #ddd;
    border-radius: 10px;
    position: relative;
    transition: 0.4s;
}

/* Efecto hover: sombra dorada detrás */
.room-card:hover {
    box-shadow: 0 0 20px 5px rgba(184, 134, 11, 0.5);
    transform: translateY(-5px);
}

/* Imagen 360x530 */
.room-img-container {
    width: 360px;
    height: 480px;
    overflow: hidden;
    position: relative;
}

.room-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay oscuro en la parte baja */
.room-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* El degradado empieza en el 50% de la altura (transparente) 
       y se vuelve negro sólido hacia abajo */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    padding: 30px; /* Un poco más de espacio para que el texto respire */
    height: 80%;   /* Ocupa el 80% de la altura de la imagen para asegurar legibilidad */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinea el texto en la parte inferior del overlay */
}

/* Ajuste fino para la tipografía */
.room-overlay h3 { 
    font-size: 1.6rem; 
    margin-bottom: 8px; 
    color: #fff; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
/* Opcional: mejoramos la legibilidad de la descripción */
.room-overlay p {
    font-size: 0.95rem;
    font-weight: 300;
    margin-bottom: 10px;
    line-height: 1.5;
}

.room-overlay h3 { margin: 0; font-size: 1.5rem; color: #fffff; }
.room-overlay p { margin: 5px 0; font-size: 0.8rem; opacity: 0.9; }
.room-overlay .price { font-weight: bold; color: #d4af37; } /* Dorado */

/* Contenedor centralizado de 1100px */
.rooms-wrapper {
    max-width: 1100px;
    margin: 50px auto; /* Centra el bloque en la página */
    padding: 0 20px;
}

/* Asegurar que las tarjetas sean fluidas dentro de los 1100px */
.room-card {
    background: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
	color: #FFFFFF;
    transition: 0.4s;
}

.room-img-container {
    width: 100%; /* Ajustado para ser fluido */
    height: 480px; 
    overflow: hidden;
    position: relative;
    border-radius: 5px;
}

.luxury-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    height: 400px;
    display: block;
}

.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}

/* El overlay que aparece al pasar el mouse */
.gallery-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0; top: 0;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: flex-end;
    padding: 30px;
    opacity: 0;
    transition: 0.5s ease;
}

.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-item:hover img { transform: scale(1.05); }

/* La fina línea dorada */
.gold-line {
    display: block;
    width: 0; /* Empieza en 0 */
    height: 2px;
    background: #d4af37;
    margin-bottom: 10px;
    transition: width 0.4s ease;
}

.gallery-item:hover .gold-line { width: 50px; } /* Se expande al pasar el mouse */

/* Contenedor de la galería */
.luxury-gallery {
    column-count: 3; /* Número de columnas en desktop */
    column-gap: 20px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.gallery-item {
    display: inline-block; /* Crucial para masonry */
    width: 100%;
    margin-bottom: 20px;
    break-inside: avoid; /* Evita que la tarjeta se corte a la mitad */
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

/* Hacemos que algunos elementos ocupen el doble de alto para el look Metro */
.gallery-item.large {
    grid-row: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Overlay permanente en la parte baja */
.gallery-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    color: #fff;
    transition: 0.4s;
}

/* Título blanco */
.gallery-overlay h3 {
    color: #ffffff;
    font-size: 1.4rem;
    margin: 0 0 10px 0;
    font-weight: 500;
}

/* La línea dorada: ancho completo */
.gold-line {
    display: block;
    width: 0; /* Empieza cerrada */
    height: 1px;
    background: #d4af37;
    margin-bottom: 10px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Efectos al pasar el cursor */
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:hover .gold-line { width: 100%; } /* Línea dorada a todo el ancho */

/*HASTA AQUI GALERIA FUNCIONANDO BIEN */


/* ==========================================================================
   GALERIA GRID CSS
   ========================================================================== */
body {
            font-family: 'Raleway', sans-serif;
            font-size: 20px;
            line-height: 34px;
        }
* {
            box-sizing: border-box;
        }

        .container .gallery a img {
            float: left;
            width: 25%;
            height: auto;
            border: 2px solid #fff;
            -webkit-transition: -webkit-transform .15s ease;
            -moz-transition: -moz-transform .15s ease;
            -o-transition: -o-transform .15s ease;
            -ms-transition: -ms-transform .15s ease;
            transition: transform .15s ease;
            position: relative;
        }

        .clear {
            clear: both;
        }

        a {
            color: #009688;
            text-decoration: none;
        }

        a:hover {
            color: #01695f;
            text-decoration: none;
        }