/* ==========================================================================
   LANDING PAGE (home)
   --------------------------------------------------------------------------
   - Hero con imagen + títulos
   - Buscador de fechas responsive
   - Calendario (Flatpickr) que no se corta
   - Swiper de testimonios
   - Jerarquía tipográfica de la sección “Why travel…”
   ========================================================================== */


/* ============ BASE (solo ajustes mínimos del landing) ============ */
html, body {
    margin: 0;
    padding: 0;
    background-color: var(--color-niebla);
    color: var(--color-texto);
}

label {                 /* refuerza color de labels sobre fondos claros */
    color: var(--color-texto);
    font-weight: 500;
}


/* ============ HERO ============ */
/* Contenedor del hero: altura fluida y SIN recortar el calendario */
.landing-hero{
    position: relative;
    width: 100%;
    height: clamp(520px, 70vh, 800px);
    overflow: visible;                          /* importante p/Flatpickr */
    background-position: center;
}

/* Imagen de fondo del hero */
.landing-hero img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/* Capa de contenido: ocupa todo el hero y apila títulos + buscador */
.landing-overlay{
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    /* Por defecto (móvil/tablet): padding contenido */
    padding: clamp(96px, 18vh, 160px) 1rem 2rem;
    color: var(--color-blanco);
    text-align: center;
}

/* Título y subtítulo del hero (fluidos y jerárquicos) */
.subheading-title{
    font-family: 'Quicksand', sans-serif;
    font-size: clamp(16px, 4.8vw, 26px);
    line-height: 1.1;
    margin: 0;
    color: var(--color-blanco);
}
.landing-title{
    font-family: 'Playfair Display', cursive;
    font-size: clamp(34px, 8.5vw, 64px);
    line-height: 1.2;
    margin: .25rem 0 1rem;
    color: var(--color-blanco);
    opacity: .95;
}


/* ============ BUSCADOR (dentro del hero) ============ */
.search-wrapper{
    margin-top: auto;
    margin-bottom: 2vh;
    margin-inline: auto;
    align-self: center;
}

.search-form{
    background-color: rgba(255,255,255,0.90);
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-medium);
    color: var(--color-texto);
    box-sizing: border-box;
}

.search-form label{
    color: var(--color-texto) !important;
    font-weight: 500;
    display: block;
    margin-bottom: .5rem;
}

.search-form input{
    width: 100%;
    padding: .5rem;
    border: 1px solid var(--color-piedra-claro);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    color: var(--color-texto);
    box-sizing: border-box;
}

/* botón de submit a ancho completo en móvil */
.search-form .col-md-2 .btn{ width: 100%; }

/* Seguridad: evita overflow de columnas bootstrap dentro del row */
.search-form .col-md-4,
.search-form .col-md-6,
.search-form .col-md-2{ min-width: 0; }

/* Estilo del botón primario del landing (puede sobreescribir al global) */
.btn-primary{
    background-color: var(--color-mar);
    border-color: var(--color-mar);
    padding: 1rem 1.2rem;
    color: var(--color-blanco);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease;
}
.btn-primary:hover{
    background-color: var(--color-mar-soft);
    border-color: var(--color-mar-soft);
}


/* ============ CALENDARIO (Flatpickr) ============ */
/* No se corta, se superpone bien y se adapta al ancho del viewport */
.flatpickr-calendar{
    z-index: 10010 !important;                   /* por encima de header/chat */
    max-width: calc(100svw - 24px);              /* 12px margen a cada lado */
    border-radius: 14px;
    box-shadow: var(--box-shadow-medium);
}
@supports not (width: 1svw){
    .flatpickr-calendar{ max-width: calc(100vw - 24px); }
}
@media (max-width: 480px){
    .flatpickr-calendar{ font-size: .95rem; }
}


/* ============ TESTIMONIOS (Swiper) ============ */
.testimonials-section .container{ position: relative; }

.testimonials-swiper{
    position: relative;
    padding: 40px 0;
    width: 100%;
    overflow: hidden;
}
.testimonials-swiper .swiper-wrapper{ padding-bottom: 40px; }

.testimonials-swiper .swiper-slide{
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    height: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
    box-sizing: border-box;
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

.testimonials-swiper .swiper-button-next,
.testimonials-swiper .swiper-button-prev{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-mar);
}
.testimonials-swiper .swiper-button-prev{ left: 10px; }
.testimonials-swiper .swiper-button-next{ right: 10px; }

.review-stars{
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.review-stars i{ color: #f8b500; font-size: 1.4rem; }

.nombre{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


/* ============ TIPOGRAFÍA DE LA SECCIÓN “WHY TRAVEL…” ============ */
.info-section .section-title{                   /* H2 de la sección */
    font-size: clamp(22px, 5vw, 32px);
}
.info-section h4{                               /* “Explore freely”, etc. */
    font-size: clamp(18px, 4.2vw, 22px);
    line-height: 1.25;
    margin: .5rem 0 .25rem;
}

/* === Buscador: centrado y ancho correcto en desktop === */
.search-wrapper{
    width: min(1000px, calc(100% - 64px)); /* antes se cayó; lo restauramos */
    margin-top: auto;
    margin-bottom: 2vh;
    margin-inline: auto;                   /* centra horizontalmente */
    align-self: center;
}

/* El form llena el wrapper */
.search-form{
    width: 100%;
}

/* Como el <form> es también .row, quitamos los márgenes negativos de BS */
.search-form.row{
    --bs-gutter-x: 1rem;   /* separaciones internas */
    margin-left: 0;
    margin-right: 0;
}

/* Buscador centrado y ancho correcto en todas las vistas */
.search-wrapper{
    width: min(1000px, calc(100% - 64px));
    margin-top: auto;
    margin-bottom: 2vh;
    margin-inline: auto;     /* centra horizontalmente */
    align-self: center;
}
.search-form{ width: 100%; }
.search-form.row{
    --bs-gutter-x: 1rem;
    margin-left: 0;
    margin-right: 0;
}



/* ============ RESPONSIVE DEL HERO COMPLETO ============ */
@media (max-width: 576px){
    .landing-hero{ height: auto; }
    .landing-overlay{
        height: auto;
        padding-bottom: 1rem;
    }
    .search-wrapper{ margin-top: 1rem; }
}

/* Desktop >= lg: céntralo verticalmente */
@media (min-width: 768px){
    .search-wrapper{
        margin-top: clamp(12px, 5vh, 72px);
        margin-inline: auto;
        margin-bottom: auto;
    }
}

/* En móvil, centra el popup del calendario respecto al viewport */
@media (max-width: 576px){
    .flatpickr-calendar{
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);     /* centra horizontalmente */
        max-width: calc(100svw - 24px);
    }
}

/* ============ CALENDARIO (Flatpickr) ============ */
/* Popup siempre visible por encima y adaptado al viewport */
.flatpickr-calendar {
    z-index: 11050 !important;                   /* por encima de header/chat */
    max-width: calc(100svw - 24px);              /* 12px margen a cada lado */
    border-radius: 14px;
    box-shadow: var(--box-shadow-medium);
}
@supports not (width: 1svw){
    .flatpickr-calendar { max-width: calc(100vw - 24px); }
}

/* Centrado del popup en viewports estrechos (sin depender del contenedor) */
@media (max-width: 768px){
    .flatpickr-calendar{
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }
}

/* (Opcional) escalar tipografía del calendario en pantallas muy pequeñas */
@media (max-width: 480px){
    .flatpickr-calendar{ font-size: .95rem; }
}

/* ==== Reset dentro del calendario: no heredar estilos globales de buttons ==== */
.flatpickr-calendar,
.flatpickr-calendar * {
    box-sizing: border-box;
    line-height: normal;
}
.flatpickr-day {
    padding: 0 !important;
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 4px;
    background: transparent;
    box-shadow: none !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* ==== Alt input: mismo ancho que .form-control y sin parpadeo ==== */
.flatpickr-alt-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    visibility: hidden;          /* oculto hasta que Flatpickr termine */
}
.fp-ready .flatpickr-alt-input { visibility: visible; }

/* Oculta el input original cuando el altInput está listo */
.fp-ready input#date-range,
.fp-ready input#dateRange {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* Por si no usas altInput en alguna página */
.search-form input.flatpickr-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.banner {
    text-align: center;
}