/* Simulación del contenedor del cover */
.cover-container {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Overlay oscuro para que el texto resalte sobre cualquier foto */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    /* Oscurecer un 30% */
    z-index: 1;
}

/* Contenido Principal */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 1000px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 400;
    margin-bottom: 10px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
}

.hero-title-span {
    color: #fff;
    text-align: left;
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
}

.hero-subtitle {
    text-align: center;
    font-size: 1.3rem;
    /* font-weight: 800; */
    margin: 70px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
}

/* =========================================
   SEARCH ENGINE: ESTILO GENERAL (Minimalista)
   ========================================= */
.search-engine {
    width: 100%;
    max-width: 850px;
    margin: 20px auto 0;
    font-family: Arial, Helvetica, sans-serif;
    /* Fuente básica sin adornos */
    font-size: 0.9rem;
    /* Fuente pequeña */
}

/* --- ESTILOS DE ESCRITORIO (Barra Única) --- */
@media (min-width: 769px) {
    .search-engine {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 50px;
        /* Bordes redondos */
        padding: 5px 5px 5px 20px;
        /* Delgado */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        height: 50px;
        /* Altura controlada/delgada */
        border: 1px solid transparent;
        /* Para evitar saltos al enfocar */
        transition: border-color 0.3s;
    }

    /* Efecto Focus Dorado en toda la barra */
    .search-engine:focus-within {
        border-color: #D4AF37;
        /* Dorado */
        box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
    }

    .search-field {
        display: flex;
        align-items: center;
        flex-grow: 1;
        position: relative;
    }

    /* Anchos específicos para escritorio */
    .location-field {
        flex-grow: 2;
    }

    .date-field {
        width: 140px;
    }

    .time-field {
        width: 150px;
    }

    .field-separator {
        width: 1px;
        height: 25px;
        background-color: #eee;
        margin: 0 15px;
    }
}

/* --- ELEMENTOS INTERNOS (Inputs e Iconos) --- */
.field-icon {
    color: #000 !important;
    /* Iconos Negros */
    font-size: 0.95rem;
    margin-right: 10px;
    min-width: 20px;
    text-align: center;
}

.field-input {
    border: none;
    background: transparent;
    color: #000;
    /* Texto Negro */
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: none !important;
    height: 100%;
}

/* Placeholder sutil */
.field-input::placeholder {
    color: #888;
    font-weight: 400;
}

/* Botón de búsqueda */
.search-btn {
    background: #000;
    /* Botón Negro */
    color: #D4AF37;
    /* Lupa Dorada */
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    /* No encoger */
}

.search-btn:hover {
    background: #D4AF37;
    /* Al pasar mouse: Fondo Dorado */
    color: #000;
    /* Lupa Negra */
}

/* --- ESTILOS MÓVIL (Campos separados y delgados) --- */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-title-span {
        font-size: 1.5rem;
        margin: 20px auto;
    }

    .hero-subtitle {
        display: none;
        font-size: 0.8rem;
    }

    .search-engine {
        display: flex;
        flex-direction: column;
        background: transparent;
        box-shadow: none;
        gap: 8px;
        /* Espacio mínimo entre campos */
        max-width: 100%;
        padding: 0 15px;
        /* Margen lateral en móvil */
    }

    .search-field {
        background: #fff;
        height: 45px;
        /* Campo delgado */
        border-radius: 50px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        width: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border: 2px solid #bababa;
        /* Borde inicial invisible */
        transition: border-color 0.3s;
    }

    /* Focus Dorado individual en móvil */
    .search-field:focus-within {
        border-color: #D4AF37;
    }

    .search-btn {
        width: 100%;
        /* Botón ancho total */
        height: 45px;
        border-radius: 50px;
        margin-top: 5px;
        font-size: 1.2rem;
        background: #D4AF37;
        /* Botón dorado en móvil para llamar atención */
        color: #000;
    }

    .mobile-hidden {
        display: none !important;
        /* Ocultar hora y separadores */
    }

    .field-separator {
        display: none;
    }

    .ad-text {
        max-width: 300px;
    }
}

/* Ajuste desplegable resultados */
.search-dropdown-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 999;
    margin-top: 5px;
    padding: 10px 0;
    text-align: left;
    z-index: 99999 !important;
}

/* =========================================
   EFECTO FOCUS (OVERLAY & DROPDOWN)
   ========================================= */

/* 1. El Telón de Fondo (Overlay) */
#search_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Usamos tu estilo de overlay existente pero controlado por nosotros */
    background: #000;
    opacity: 0;
    /* Empieza invisible */
    visibility: hidden;
    z-index: 9990;
    /* Muy alto, pero debajo del buscador */
    transition: opacity 0.3s ease, visibility 0.3s;
}

/* Clase para activarlo (JS la pondrá) */
#search_overlay.is-active {
    opacity: 0.8;
    /* Oscuridad tipo ByHours */
    visibility: visible;
}

/* 2. Elevación del Buscador cuando está activo */
/* Esto hace que el input y la lista queden ENCIMA del overlay negro */
.search-engine.focus-mode {
    position: relative;
    z-index: 9995;
    /* Encima del overlay */
}

.search-no-results {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 0.9rem;
}

/* Animación suave de entrada */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. Estilo de los Items de la Lista */
.search-item {
    padding: 12px 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #333;
    transition: all 0.2s;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    /* Para efecto hover */
}

.search-item:hover {
    background-color: #f8f8f8;
    color: #000;
    border-left-color: #D4AF37;
    /* Borde dorado al pasar mouse */
}

.search-item i {
    margin-right: 15px;
    color: #999;
    /* Iconos grises suaves por defecto */
    width: 20px;
    text-align: center;
}

.search-item:hover i {
    color: #D4AF37;
    /* Icono se pone dorado al hover */
}

/* Títulos de secciones (ej: Destinos Populares) */
.search-header {
    padding: 10px 25px 5px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* Asegurar que el calendario flote sobre el Overlay negro */
.flatpickr-calendar {
    z-index: 9999 !important;
    /* Más alto que el overlay */
}

/* El input alternativo de Flatpickr a veces pierde el estilo, asegurémoslo */
.flatpickr-input[readonly] {
    cursor: pointer;
    background: transparent;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none !important;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.search-dropdown-results,
.flatpickr-calendar.open {
    position: fixed !important;
    /* Fijo a la ventana del navegador */
    left: 50% !important;
    /* Centrado horizontal base */
    background: #fff;
    z-index: 99999 !important;
    /* Encima del overlay negro */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

/* 2. ESCRITORIO: CENTRO PERFECTO (Vertical y Horizontal) */
@media (min-width: 769px) {
    .search-dropdown-results {
        top: 40% !important;
        transform: translate(-50%, -50%) !important;
        /* Truco para centro exacto */
        /* Estética de Escritorio */
        width: 450px;
        /*Ancho fijo elegante */
        max-width: 90%;
        border-radius: 20px;
        padding: 20px 0;
    }

    .flatpickr-calendar.open {
        top: 35% !important;
        transform: translate(-50%, -50%) !important;
        /* Truco para centro exacto */
        /* Estética de Escritorio */
        /*width: 450px;   Ancho fijo elegante */
        max-width: 90%;
        border-radius: 20px;
        padding: 20px 0;
    }
}

/* 3. MÓVIL: PEGADO AL TECHO (Para esquivar teclado) */
@media (max-width: 768px) {
    .search-dropdown-results {
        top: 40px !important;
        /* Margen superior fijo */
        bottom: auto !important;
        transform: translateX(-50%) !important;
        /* Solo centra horizontalmente */

        /* Estética de Móvil */
        width: 95% !important;
        /* Casi todo el ancho */
        max-width: 400px;
        border-radius: 15px;
        padding: 10px 0;

        /* Scroll interno por si la pantalla es bajita */
        max-height: 60vh;
        overflow-y: auto;
    }

    .flatpickr-calendar.open {
        top: 25px !important;
        /* Margen superior fijo */
        bottom: auto !important;
        transform: translateX(-50%) !important;
        /* Solo centra horizontalmente */

        /* Estética de Móvil */
        /* width: 95% !important;  Casi todo el ancho */
        max-width: 400px;
        border-radius: 15px;
        padding: 10px 0;

        /* Scroll interno por si la pantalla es bajita */
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Ocultar las flechitas decorativas del calendario en móvil */
    .flatpickr-calendar::before,
    .flatpickr-calendar::after {
        display: none !important;
    }
}

/* =========================================
   TARJETAS DE CIUDADES (listado_ciudades_horizontal)
   ========================================= */

/* Contenedor de la tarjeta */
.city-card {
    display: block;
    position: relative;
    height: 140px;
    /* Altura fija para uniformidad */
    border-radius: 15px;
    /* Bordes redondeados */
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #333;
}

/* Efecto Hover: Levantar tarjeta */
.city-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    /* Sombra dorada */
    border-color: #D4AF37;
}

/* Contenedor de imagen */
.city-image-wrapper {
    width: 100%;
    height: 100%;
    background-color: #000;
}

/* La Imagen de fondo */
.city-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Recorta la imagen para llenar el espacio */
    transition: transform 0.6s ease;
    opacity: 0.8;
}

/* Efecto Zoom en imagen al hover */
.city-card:hover .city-bg {
    transform: scale(1.1);
    opacity: 1;
}

/* Gradiente sobre la imagen para leer el texto */
.city-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    /* Ocupa la parte inferior */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 10%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

/* Título de la ciudad */
.city-name {
    color: #fff;
    font-family: 'Urbanist', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 5px 0;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

/* Flecha "Ver Moteles" */
.city-cta {
    color: #D4AF37;
    /* Dorado */
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    transform: translateX(0);
    transition: transform 0.3s;
}

.city-card:hover .city-cta {
    transform: translateX(5px);
    /* La flechita se mueve a la derecha */
    color: #fff;
}

/* =========================================
   TARJETAS DE LOCALIDAD (Sin Foto)
   ========================================= */

.zone-card {
    display: block;
    height: 120px;
    /* Altura compacta */
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    /* Fondo negro sutil 3D */
    border: 1px solid #333;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

/* Efecto Hover */
.zone-card:hover {
    transform: translateY(-5px);
    border-color: #D4AF37;
    /* Borde Dorado */
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
    /* Resplandor dorado suave */
    background: #222;
}

.zone-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
}

.zone-icon {
    font-size: 1.2rem;
    color: #D4AF37;
    margin-bottom: 8px;
    opacity: 0.8;
}

.zone-name {
    color: #fff;
    font-family: 'Urbanist', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    text-transform: capitalize;
}

.zone-cta {
    font-size: 0.75rem;
    color: #999;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    /* Oculto por defecto */
    transition: opacity 0.3s;
    transform: translateY(10px);
}

/* Mostrar "Ver Moteles" al pasar el mouse */
.zone-card:hover .zone-cta {
    opacity: 1;
    transform: translateY(0);
    color: #D4AF37;
}

/* TARJETAS DE MOTEL (Reserva Rápida) */
.motel-card-fast {
    background: #111;
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: transform 0.2s;
}

.motel-card-fast:hover {
    border-color: #D4AF37;
    transform: translateY(-3px);
}

.motel-img-wrap {
    position: relative;
    height: 150px;
    background: #000;
}

.motel-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.motel-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 2px 8px;
    font-size: 0.7rem;
    border-radius: 4px;
    border: 1px solid #D4AF37;
}

.motel-info {
    padding: 15px;
    text-align: center;
}

.motel-title {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.motel-price {
    color: #D4AF37;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.motel-price small {
    color: #ccc;
    font-size: 0.8rem;
    font-weight: normal;
    display: block;
}

.btn-reservar-ya {
    border-radius: 50px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 0;
    background-color: #25d366;
    /* Color WhatsApp/Éxito */
}

.btn-reservar-ya:hover {
    background-color: #128c7e;
}

.col-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.vip-price-label {
    font-size: 0.85rem;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
    font-weight: bold;
}

.vip-price-value {
    font-family: "Urbanist", sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: #D4AF37;
    line-height: 1.1;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    margin-bottom: 5px;
}

/* Botón Reservar (Dorado) */
.btn-vip-reservar {
    background: #FF8E0A;
    color: #322600 !important;
    font-weight: 900;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    padding: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    transition: transform 0.2s ease;
}

.btn-vip-reservar:hover {
    transform: scale(1.02);
    background: #eac54e;
}

.btn-vip-reservar a {
    color: #000;
}

/* Botón Ver Perfil (Gris Oscuro) */
.btn-vip-perfil {
    background: #333;
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-vip-perfil:hover {
    background: #fff;
    color: #000 !important;
    border-color: #fff;
}

/* Formulario VIPCARD */

/* Estilos encapsulados para el registro */
.vipcard-container {
    max-width: 450px;
    margin: 0 auto;
    color: #fff;
}

.vip-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}

.vip-label {
    flex: 1;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.vip-input-container {
    flex: 1;
    width: 100%;
}

.vip-input {
    width: 100%;
    text-align: right;
    padding: 10px;
    border: 1px solid #444;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    color: #000;
}

.vip-input:focus {
    border-color: #D4AF37;
    outline: none;
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

.vip-btn-submit {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background-color: #FF8E0A;
    color: #000;
    border: none;
    border-radius: 5px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.vip-btn-submit:hover {
    background-color: #fff;
    transform: translateY(-2px);
    transition: all 0.2s;
}

.honey-pot {
    display: none;
}

.btn-gen {
    display: inline-block;
    /* El botón no se expande al ancho total 
    width: max-content;*/
    background: #FF8E0A;
    color: #322600 !important;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    transition: transform 0.2s ease;
}

.btn-gen a {
    color: #322600 !important;
}

.btn-gen:hover {
    transform: scale(1.02);
    background: #eac54e;
}