/*VARIABLES Y GOOGLE FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:ital,wght@0,600;0,800;1,600&display=swap');

:root {
    /* Paleta de colores */
    --color-primary: #2e4029; /* Verde*/
    --color-primary-dark: #1f2b1c;
    --color-accent: #d4af37;  /* Dorado */
    --color-text-main: #333333;
    --color-text-muted: #666666;
    --color-bg-light: #fafafa;
    --color-white: #ffffff;
    --color-border: #eaeaea;
    --color-error: #dc3545;
    --color-success: #28a745;

    /* Tipografía */
    --font-heading: 'Playfair Display', serif; /*  para títulos */
    --font-body: 'Inter', sans-serif; /*  para textos */

    /* Espaciado y transiciones */
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.05);
    --shadow-hover: 0 15px 40px rgba(0,0,0,0.12);
    --border-radius-main: 12px;
}

/* 
   2. RESET Y ESTILOS BASE  */

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

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-light);
    color: var(--color-text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Mejora la legibilidad en pantallas */
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 800;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/*
   3. COMPONENTES REUTILIZABLES (BEM)
*/
/* Botones */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 28px;
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn--primary:hover {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* 
   4. LAYOUT: HEADER
 */
.header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(46, 64, 41, 0.98), transparent); /*que vaya de más a menos transparente, como degradado*/
}

.header__logo {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-white);
    letter-spacing: 1px;
}

.header__nav-list {
    display: flex;
    gap: 30px;
    list-style: none;
}

.header__nav-link {
    color: var(--color-white);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.header__nav-link:hover {
    color: var(--color-accent);
}

/* 
   5. LAYOUT: HERO SECTION
 */
 
.hero {
    position: relative;
    height: 85vh;
    overflow: hidden;

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

/* Contenedor del video */
.hero__video-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.hero__video {
    position: absolute;

    top: 50%;
    left: 50%;

    min-width: 100%;
    min-height: 100%;

    width: auto;
    height: auto;

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

    object-fit: cover;
}

/* Filtro oscuro encima del video para que resalte el texto */
.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(46, 64, 41, 0.4); /* Un toque de tu verde bosque transparente */
    z-index: 2;
}

.hero__content {
    position: relative;
    z-index: 3; /* El texto va por encima de todo */
    padding: 0 20px;
}

.hero__title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-shadow: 2px 4px 15px rgba(0,0,0,0.5);
}

.hero__tagline {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--color-accent);
}

/*
   6. COMPONENTES: barra de reservaciones (booking bar)
 */
.booking-bar {
    max-width: 1000px;
    margin: -50px auto 60px;
    position: relative;
    z-index: 10;
    background-color: var(--color-white);
    padding: 25px 40px;
    border-radius: 12px;
    box-shadow: var(--shadow-hover);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    align-items: end;
    padding: 30px 50px;
}

.booking-bar__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-bar__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.booking-bar__input,
.booking-bar__select {
    border: none;
    border-bottom: 2px solid var(--color-border);
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-main);
    background: transparent;
    transition: var(--transition-smooth);
    outline: none;
}

.booking-bar__input:focus,
.booking-bar__select:focus {
    border-bottom-color: var(--color-accent);
}

/* 
   7. COMPONENTES: carrusel para las habitaciones (room  carousel)
 */
.section-rooms {
    padding: 60px 5%;
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.section-subtitle {
    color: var(--color-text-muted);
    max-width: 700px;
    margin: 0 auto 50px;
}

.carousel {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px; /* Espacio para flechas */
}

.carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 30px;
    padding: 20px 0;
    /* Ocultar barra de scroll para que se vea más aesthetic */
    scrollbar-width: none; 
}
.carousel__track::-webkit-scrollbar {
    display: none;
}

.room-card {
    flex: 0 0 350px; /* Ancho fijo de tarjeta */
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    border: 1px solid var(--color-border);
}

.room-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.room-card__img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: var(--transition-smooth);
}

.room-card:hover .room-card__img {
    transform: scale(1.05); /* Efecto zoom suave al pasar el mouse */
}

.room-card__content {
    padding: 25px;
    text-align: left;
    background: var(--color-white); /* Asegura que el contenido tape el zoom de la imagen */
    position: relative;
    z-index: 2;
}

.room-card__title {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.room-card__price {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.room-card__desc {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    display: grid;
    place-items: center;
    z-index: 5;
}

.carousel__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.carousel__btn--prev { left: 0; }
.carousel__btn--next { right: 0; }

/* 
   8. COMPONENTES: FOOTER & W3C (para que las etiquetas de validaci+on en el footer estén del tamaño correcto)
 */
.footer {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    padding: 60px 5% 30px;
    text-align: center;
    margin-top: 80px;
}

.footer__badges {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Modificación estricta de insignias solicitada */
.footer__badge-img {
    max-width: 88px;
    height: 31px;
    opacity: 0.7;
    transition: var(--transition-smooth);
}

.footer__badge-img:hover {
    opacity: 1; /* Se iluminan al pasar el mouse */
}

.footer__copy {
    color: #aaaaaa;
    font-size: 0.85rem;
    margin-top: 20px;
}

/* 
   9. MEDIA QUERIES (Responsividad)
 */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        background: var(--color-primary); /* Fondo sólido en móvil */
        padding: 15px;
    }
    
    .header__nav-list {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .booking-bar {
        grid-template-columns: 1fr; /* Apila los campos en móvil */
        margin: 20px;
        padding: 20px;
    }

    .carousel {
        padding: 0 10px;
    }

    .carousel__btn {
        display: none; /* Oculta flechas en móvil, se usa swipe (dedo) */
    }

    .room-card {
        flex: 0 0 85vw; /* Ocupa el 85% de la pantalla en móvil */
    }
}

/* 
   10. PÁGINAS INTERNAS (Layouts Reutilizables)
 */

/* Modificador del header para páginas sin imagen de fondo */
.header--internal {
    position: relative; 
    background-color: var(--color-primary); /* Fondo verde sólido */
    padding: 20px 5%;
}

/* Contenedor elegante para textos (Misión y Visión) */
.page-container {
    max-width: 800px;
    margin: 60px auto;
    padding: 50px;
    background-color: var(--color-white);
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-soft);
}

.page-title {
    font-size: 2.5rem;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 20px;
}

.page-divider {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
    margin-bottom: 30px;
}

/* Grid para el Catálogo (Reutilizando .room-card) */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 5%;
}

/* Layout para Contacto (Flexbox) */
.contact-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 5%;
}

.contact-info, .form-container {
    flex: 1;
    min-width: 320px;
    background: var(--color-white);
    padding: 40px;
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-soft);
}



/* Clases dinámicas de validación (JS) */
.is-valid { border-color: var(--color-success) !important; background-color: #f8fff9; }
.is-invalid { border-color: var(--color-error) !important; background-color: #fff8f8; }
.form__feedback { font-size: 0.85rem; padding: 5px 10px; border-radius: 4px; color: white; display: none; margin-top: 5px; width: fit-content; }
.form__feedback--success { background-color: var(--color-success); }
.form__feedback--error { background-color: var(--color-error); }

/* Acordeón BEM */
.accordion { margin-top: 30px; }
.accordion__item { border: 1px solid var(--color-border); border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.accordion__header { background: var(--color-bg-light); padding: 15px 20px; width: 100%; text-align: left; border: none; font-weight: 600; color: var(--color-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition-smooth); }
.accordion__header:hover { background: #eee; }
.accordion__content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--color-white); padding: 0 20px; }
.accordion__content p { padding: 15px 0; color: var(--color-text-muted); }

/* 
   11.ESTILO PARA CATÁLOGO 
 */
.catalog-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    padding: 0 5%;
}

.btn--filter {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 8px 20px;
}

.btn--filter.active, .btn--filter:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.catalog-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 5%;
}

.catalog-item {
    display: flex;
    gap: 40px;
    align-items: center;
    background: var(--color-white);
    border-radius: var(--border-radius-main);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
}

.catalog-item:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-5px);
}

/* Estilo Zigzag */
.catalog-item:nth-child(even) {
    flex-direction: row-reverse;
}

.catalog-item__img-wrapper {
    flex: 1;
    min-width: 350px;
    height: 400px;
    overflow: hidden;
}

.catalog-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.catalog-item:hover .catalog-item__img {
    transform: scale(1.05); /* Zoom elegante */
}

.catalog-item__content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.catalog-item__tag {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-accent);
    font-weight: bold;
    margin-bottom: 10px;
}

.catalog-item__title {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.catalog-item__price {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
    font-weight: 600;
}

.catalog-item__desc {
    color: var(--color-text-main);
    margin-bottom: 25px;
    font-size: 1.05rem;
}

/* Amenidades con íconos */
.catalog-item__amenities {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.catalog-item__amenities li {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--color-bg-light);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
}

/* Responsivo para el Catálogo (se apila en móviles) */
@media (max-width: 850px) {
    .catalog-item, .catalog-item:nth-child(even) {
        flex-direction: column;
        gap: 0;
    }
    .catalog-item__img-wrapper {
        height: 250px;
        width: 100%;
        min-width: unset;
    }
    .catalog-item__content {
        padding: 30px 20px;
    }
}

/*12. FOOTER LIMPIO (Sin inline styles) */
.footer__title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 5px;
    color: var(--color-white);
}

.footer__admin-link {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 15px;
    display: inline-block;
    transition: var(--transition-smooth);
}

.footer__admin-link:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* 
   13. ESTILOS PARA FORMULARIO ADMIN (Block, Element, Modifier)
 */
.form__fieldset {
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-main);
    padding: 20px;
    margin-bottom: 30px;
    background-color: var(--color-bg-light);
}

.form__legend {
    font-weight: 600;
    color: var(--color-primary);
    padding: 0 15px;
    font-size: 1.1rem;
}

.form__radio-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 10px;
}

.form__radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-text-main);
    transition: var(--transition-smooth);
}

.form__radio-label:hover {
    color: var(--color-accent);
}

/* Ajuste sutil para los botones dentro de formularios */
.form__actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

/* 
   14. PARA LA SECCIÓN UBICACIÓN en el Indez */
.location {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--color-white);
    max-width: 1200px;
    margin: 0 auto 80px; /* Margen inferior para separarlo del footer */
    border-radius: var(--border-radius-main);
    overflow: hidden; /* Hace que las esquinas de la imagen se redondeen con el contenedor */
    box-shadow: var(--shadow-soft);
}

.location__content {
    flex: 1;
    min-width: 320px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location__title {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.location__desc {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.location__list {
    list-style: none;
    color: var(--color-text-main);
    line-height: 2;
    margin-bottom: 30px;
}

.location__list strong {
    color: var(--color-primary); /* Resalta los títulos (Dirección, Teléfono...) en verde */
}

.location__btn {
    align-self: flex-start; /* Evita que el botón se estire a todo lo ancho */
}

.location__map {
    flex: 1;
    min-width: 320px;
}

/* Estilo para el mapa interactivo */
.location__iframe {
    width: 100%;
    height: 100%;
    min-height: 400px; /* Asegura que tenga buen tamaño en móviles */
    border: none;
    display: block;
}

/* Efecto opcional: un ligero tinte para que combine con tu estética 
   hasta que el usuario pase el mouse encima */
.location__map {
    filter: grayscale(0.2) contrast(1.1);
    transition: var(--transition-smooth);
}

.location__map:hover {
    filter: grayscale(0);
}


/* =========================================
   15. SECCIÓN EXPERIENCIAS (ALBERCA Y JARDÍN)
========================================= */
.experience {
    padding: 80px 5%;
    background-color: var(--color-bg-light);
}

.experience__header {
    text-align: center;
    margin-bottom: 50px;
}

.experience__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 300px);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.experience__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-soft);
}

/* La imagen de la alberca ocupará más espacio (2x2) */
.experience__item--large {
    grid-column: span 2;
    grid-row: span 2;
}

/* Las otras dos imágenes ocuparán el resto (2x1 cada una) */
.experience__item:not(.experience__item--large) {
    grid-column: span 2;
}

.experience__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}

/* Efecto hover con texto que aparece */
.experience__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: var(--color-white);
    transform: translateY(20px);
    opacity: 0;
    transition: var(--transition-smooth);
}

.experience__item:hover .experience__overlay {
    transform: translateY(0);
    opacity: 1;
}

.experience__item:hover .experience__img {
    transform: scale(1.1);
}

.experience__caption {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: var(--color-white);
}

.experience__sub-caption {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-accent);
}

.experience__cta {
    text-align: center;
    margin-top: 40px;
}

/* Responsive para la cuadrícula */
@media (max-width: 768px) {
    .experience__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .experience__item--large, .experience__item:not(.experience__item--large) {
        grid-column: span 1;
        grid-row: auto;
        height: 300px;
    }
}

/* =========================================
   FLATPICKR UNIFICADO - ESTILO QUINTA DALAM
   ========================================= */

   
/* 1. Contenedor Principal (Ancho total para evitar que se corte el domingo) */
.flatpickr-calendar {
    padding: 10px !important; /* El "aire" que buscabas en los bordes */
    width: 350px !important;  /* Lo hacemos un poco más ancho para que luzca */
    border-radius: 15px !important; /* Bordes más suaves */
}
.flatpickr-calendar.multiMonth {
    width: 620px !important; /* Aumentado para dar espacio al gap y línea */
    box-sizing: content-box !important;
}

.quinta-calendar-style {
    padding: 20px !important; /* Más aire alrededor */
    border: none !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important;
    border-radius: 20px !important;
    background: #fff !important;
}

/* 2. Encabezado y Separación de Meses */
.flatpickr-months {
    padding: 10px 0 !important;
}

.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
    color: var(--color-primary) !important;
}

.flatpickr-weekday {
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
}

/* 3. El Input en la Booking Bar */
.booking-bar__input#dateRange {
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 12px 0;
    cursor: pointer;
    border-bottom: 2px solid var(--color-border);
    background: transparent;
}

/* 4. Días Seleccionados (Efecto Barra Unida) */

/* Inicio del rango */
.flatpickr-day.startRange {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    border-radius: 8px 0 0 8px !important;
}

/* Fin del rango */
.flatpickr-day.endRange {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Día único seleccionado */
.flatpickr-day.startRange.endRange {
    border-radius: 8px !important;
}

/* Días en medio (Unión perfecta sin huecos) */
.flatpickr-day.inRange {
    background: #edf7ea !important;
    color: var(--color-primary) !important;
    border-radius: 0 !important;
    border-color: transparent !important;
    /* Ajuste de sombras para que se "peguen" los cuadros */
    box-shadow: -5px 0 0 #edf7ea, 10px 0 0 #edf7ea !important;
}

/* 5. Hovers y Enfoque */
.flatpickr-day:hover:not(.startRange):not(.endRange) {
    background: #e2ecd6 !important;
    color: var(--color-primary-dark) !important;
    border-color: transparent !important;
}

.flatpickr-day:focus {
    outline: none;
}

/* Limpieza de bordes extra */
.flatpickr-day.selected.inRange, 
.flatpickr-day.startRange.inRange, 
.flatpickr-day.endRange.inRange {
    border-color: var(--color-primary) !important;
}


/* Reservas */

/* Contenedor Principal de la página de reserva */
.booking-page {
    background-color: #f9f9f9; /* Fondo muy claro para que resalten las tarjetas */
    color: var(--color-text);
}

.booking-header {
    background-color: #000; /* Negro sólido para contraste */
    color: #fff;
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.booking-header__content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.logo-minimal {
    font-family: var(--font-heading);
    color: var(--color-accent); /* Tu dorado/acento */
    text-decoration: none;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.booking-header__summary {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Las "Pills" de información */
.summary-pill {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
}

.pill-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-accent);
    letter-spacing: 1px;
    margin-bottom: 2px;
}

#labelFechas, #labelNoches, #labelGuests {
    font-size: 0.9rem;
    font-weight: 300;
}

.btn-edit {
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.btn-edit:hover {
    background: var(--color-accent);
    color: #000;
}

.booking-main {
    max-width: 100%;
    margin: 40px auto;
    padding: 0 5%;
}

/* Ajuste de la cuadrícula principal para eliminar el hueco izquierdo */
.booking-grid {
    display: grid !important;
    grid-template-columns: 1fr 350px !important; /* La lista ocupa todo el resto (1fr), el ticket fijo */
    gap: 40px !important;
    width: 95% !important; /* Usamos casi todo el ancho de la pantalla */
    max-width: 1400px !important; /* Pero con un límite para pantallas muy grandes */
    margin: 40px auto !important; /* Centra el bloque completo, no solo el contenido */
    padding: 0 5% !important;
}
@media (max-width: 768px) {

    .booking-grid {

        grid-template-columns: 1fr !important;

        width: 100% !important;

        padding: 20px !important;

        gap: 25px !important;
    }

    .booking-aside {

        position: relative !important;

        top: 0 !important;

        width: 100% !important;

        order: -1;
    }

    .booking-main {

        width: 100%;
    }
}

@media (max-width: 768px) {

    .catalog-item {

        flex-direction: column !important;
    }

    .catalog-item__img-wrapper {

        width: 100% !important;

        height: 230px !important;
    }

    .catalog-item__content {

        width: 100% !important;

        padding: 20px !important;
    }
}

/* Título de la sección */
.results-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.results-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--color-accent);
}

/* Columna del Ticket (Sticky) */
.booking-aside {
    top: 230px ; /* Distancia desde la parte de arriba de la pantalla */
    height: fit-content; /* Vital para que el sticky funcione */
    z-index: 10;
}

.booking-ticket {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-top: 5px solid var(--color-primary);
}

.booking-ticket h3 {
    font-family: var(--font-heading);
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-align: center;
}

@media (max-width: 992px) {
    .booking-grid {
        grid-template-columns: 1fr;
    }
    
    .booking-header__content {
        flex-direction: column;
        gap: 20px;
    }

    .booking-aside {
        position: relative;
        top: 0;
        order: -1; /* El ticket sale arriba en móvil para que vean el precio */
        margin-bottom: 30px;
    }
}
/* Integración en el Header */
.booking-data-bar {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 25px;
    border-radius: 12px;
    border: 1px solid var(--color-accent);
    gap: 30px;
    align-items: center;
}

.data-group {
    display: flex;
    flex-direction: column;
}

.data-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 600;
}

.data-value {
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 300;
}

.btn-edit-simple {
    background: transparent;
    border: none;
    color: var(--color-accent);
    text-decoration: underline;
    font-size: 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
}

/* El Ticket con la estética del sitio */
.booking-ticket {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary); /* Detalle en verde */
    padding: 30px;
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-soft);
}

.booking-ticket h3 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 20px;
}

/* Estilo Píldora para la página de reserva */
.booking-edit-pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: transparent; /* Sin fondo */
    border: none; /* Sin bordes */
    box-shadow: none; /* Sin sombras */
    width: 100%;
    margin: 0 auto;
}
@media (max-width: 768px){

    .booking-header{

        padding: 10px 0 !important;
    }

    .booking-edit-pill{

        flex-direction: row !important;

        flex-wrap: wrap !important;

        justify-content: center !important;

        gap: 0 !important;

        padding: 0 !important;
    }

    .edit-field{

        width: 50% !important;

        padding: 15px 10px !important;

        border-right: none !important;

        border-bottom: 1px solid rgba(255,255,255,0.08);

        text-align: center;
    }

    .edit-field:last-child{

        width: 100% !important;

        border-bottom: none;
    }

    .edit-label{

        font-size: 0.75rem !important;

        margin-bottom: 8px !important;

        letter-spacing: 3px;
    }

    .edit-input,
    .edit-select{

        font-size: 1rem !important;

        width: 100% !important;

        max-width: 100% !important;
    }

    .edit-nights{

        font-size: 1.4rem !important;
    }

    .booking-header__content{

        gap: 10px !important;
    }
}

.edit-field {
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    /* Un separador muy sutil entre campos, opcional */
    border-right: 1px solid rgba(255, 255, 255, 0.1); 
    flex-shrink: 0;
}

.edit-field.no-border {
    border-right: none;
}

/* Títulos en DORADITO como te gustaba */
.edit-label {
    font-size: 0.7rem;
    color: var(--color-accent) !important; /* Dorado */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

/* Los valores (Fechas y Select) en BLANCO */
.edit-input {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-family: var(--font-body);
    font-size: 1.2rem; /* Un poco más grande para que luzca */
    font-weight: 500;
    width: 100% !important;
    max-width: 350px;
    cursor: pointer;
    outline: none;
}

.edit-select {
    background: rgb(35,49,32) !important;
    border: none !important;
    color: #ffffff !important;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    padding: 10px;
    
}

/* Estilo extra para cuando pasas el mouse (algunos navegadores lo permiten) */
.edit-select option:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-primary-dark) !important;
}

/* Ajuste para el select mismo para asegurar que el navegador no meta mano */
.edit-select {
    color-scheme: dark; /* Esto le dice al navegador que use el modo oscuro nativo */
}

/* El número de noches */
.edit-nights {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
}

/* =========================================
   TARJETAS DE RESERVA ESTILO CATÁLOGO
   ========================================= */

.booking-list .catalog-item {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    margin-bottom: 30px !important;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 0 !important;
    align-items: stretch;
}

/* Contenedor de la imagen: Forzamos que ocupe todo el alto */
.booking-list .catalog-item__img-wrapper {
    width: 40% !important; /* Ajusta el ancho de la foto */
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    align-self: stretch;
}


/* Contenido del texto */
.booking-list .catalog-item__content {
    width: 60% !important;
    padding: 30px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Separa el título del botón de reserva */
}

/* Ajuste para que las etiquetas (tags) y títulos no se amontonen */
.booking-list .catalog-item__tag {
    display: inline-block;
    margin-bottom: 10px;
}

.booking-list .catalog-item__title {
    margin-bottom: 15px;
    font-size: 1.8rem;
}

/* =========================================
   OPERACIÓN RESCATE: IZQUIERDA TOTAL
   ========================================= */

/* 1. Forzamos que el contenedor de la cuadrícula ocupe todo el ancho */
.booking-grid {
    display: grid !important;
    grid-template-columns: 1fr 350px !important; 
    width: 100% !important;
    max-width: 100% !important; /* Eliminamos cualquier límite de ancho */
    margin: 40px 0 !important;   /* Quitamos el 'auto' del margen lateral */
    padding-left: 5% !important; /* Solo un poco de aire al borde */
    justify-content: start !important;
    text-align: left !important;
}

/* 2. La columna donde viven las habitaciones */
.booking-list {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important; /* Rompemos cualquier flex centrado del padre */
}


/* 4. Las tarjetas: les quitamos cualquier rastro de centrado */


#habitacionesResultados.catalog-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important; /* Asegura que no haya aire alrededor de las tarjetas */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px; /* Espacio ENTRE tarjetas, pero no DENTRO de ellas */
}

.ticket-empty {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

/* Contenedor para alinear todo */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center !important;
}

/* Forzar el color del icono */
.input-with-icon i {
    position: absolute;
    left: 10px; /* Ajusta según prefieras */
    color: #ffffff !important; /* Dorado Quinta Dalam directo */
    font-size: 1.2rem !important;
    z-index: 5; /* Para que quede por encima del fondo del input */
    pointer-events: none;
    left: 15px !important;
}

/* Espacio en el input para que el texto no choque */
#dateRange.edit-input {
    padding-left: 40px !important; 
    color: white !important; /* Color del texto del rango de fechas */
}

.input-with-icon:hover i {
    color: #d4af37 !important;
    transition: 0.3s;
}

/* Contenedor del Formulario */
.checkout-card {
    width: 100%;
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: var(--shadow);
    grid-column: 1 / -1; /* Ocupa todo el ancho */
    animation: fadeIn 0.5s ease;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group input, .form-group select, .form-group textarea {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
}

/* Barra de Progreso */
.stepper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
}

.step {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    color: #999;
    position: relative;
    font-weight: 600;
}

.step.active {
    color: var(--color-primary);
}

.step.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-accent); /* La raya dorada que mencionaste */
    transition: 0.3s;
}

/* Contenedor de la animación */
.bird-container {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
}

/* El pajarito (usando un icono o forma simple) */
.bird-particle {
    position: fixed;
    color: #d4af37; 
    font-size: 24px;
    pointer-events: none;
    z-index: 999999 !important;
    /* Duración aumentada a 3.5 segundos para un vuelo lento y elegante */
    animation: flyAway 3.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    text-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

@keyframes flyAway {
    0% {
        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2); /* Pequeño salto inicial */
    }
    100% {
        /* Vuelo más extendido y con una rotación suave */
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.3) rotate(var(--r));
        opacity: 0;
    }
}

/* =========================================
   MINI GALERÍAS (CATÁLOGO)
========================================= */
.catalog-item__gallery {

    position: relative;

    flex: 1;

    min-width: 350px;

    height: 400px;

    overflow: hidden;

    display: block !important;
}

.catalog-item__gallery .catalog-item__img {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition:
        opacity 0.4s ease,
        transform 0.6s ease;
}

/* Solo la que tenga clase 'active' se muestra */
.catalog-item__img.active {
    opacity: 1;
    z-index: 2;
}

.catalog-item:hover .catalog-item__img.active {
    transform: scale(1.05); /* Efecto zoom elegante */
}

/* Estilos de las flechitas */
.gallery__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 1.2rem;
    color: var(--color-primary);
    transition: var(--transition-smooth);
    opacity: 0; /* Escondidas hasta hacer hover */
}

.catalog-item:hover .gallery__btn {
    opacity: 1;
}

.gallery__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.gallery__btn--prev { left: 15px; }
.gallery__btn--next { right: 15px; }

/* Evita zoom en pantallas móviles para las galerías */
@media (max-width: 850px) {
    .catalog-item__gallery { height: 280px; width: 100%; min-width: unset; }
    .gallery__btn { opacity: 1; /* Siempre visibles en móvil */ }
}

.booking-list .catalog-item__img-wrapper {
    display: flex;
}

.booking-list .catalog-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

#habitacionesResultados.catalog-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important; /* Asegura que no haya aire alrededor de las tarjetas */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px; /* Espacio ENTRE tarjetas, pero no DENTRO de ellas */
}

.status-libre {

    background: linear-gradient(
        145deg,
        #1f9d55,
        #157347
    );

    color: white;

    border: none;

    box-shadow:
        0 8px 20px rgba(25,135,84,0.35);
}

.status-ocupada {

    background: linear-gradient(
        145deg,
        #dc3545,
        #a71d2a
    );

    color: white;

    border: none;

    box-shadow:
        0 8px 20px rgba(220,53,69,0.35);
}

.status-limpieza {

    background: linear-gradient(
        145deg,
        #ffc107,
        #d39e00
    );

    color: #1a2418;

    border: none;

    box-shadow:
        0 8px 20px rgba(255,193,7,0.35);
}

.room-box {

    padding: 18px;

    border-radius: 16px;

    text-align: center;

    font-weight: 700;

    cursor: pointer;

    transition: 0.25s ease;

    min-height: 110px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: relative;

    overflow: hidden;
}

.room-box:hover {

    transform:
        translateY(-5px)
        scale(1.03);

    filter: brightness(1.05);
}


/* =========================================
   MOBILE CLEAN FIX
========================================= */

@media screen and (max-width: 768px){

    .booking-header{

        padding: 12px 15px !important;
    }

    .booking-header{

        position: relative !important;

        top: unset !important;
    }

    .booking-header__content{

        display: flex !important;

        flex-direction: column !important;

        gap: 15px !important;

        align-items: stretch !important;
    }

    .booking-edit-pill{

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 10px !important;

        width: 100% !important;
    }

    .edit-field{

        width: 100% !important;

        padding: 12px !important;

        border: 1px solid rgba(255,255,255,0.08) !important;

        border-radius: 10px;

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

        text-align: center !important;
    }

    .edit-field:last-child{

        grid-column: span 2;
    }

    .edit-input,
    .edit-select{

        width: 100% !important;

        max-width: 100% !important;

        font-size: 1rem !important;

        text-align: center !important;
    }

    .edit-label{

        font-size: 0.7rem !important;

        letter-spacing: 2px !important;
    }

    .edit-nights{

        font-size: 1.2rem !important;
    }
    .booking-list .catalog-item{

        flex-direction: column !important;

        width: 100% !important;
    }

    .booking-list .catalog-item__img-wrapper{

        width: 100% !important;

        height: 220px !important;

        min-width: unset !important;
    }

    .booking-list .catalog-item__content{

        width: 100% !important;

        padding: 20px !important;
    }
    .booking-grid{

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        padding: 15px !important;

        gap: 20px !important;
    }

    .booking-aside{

        width: 100% !important;

        order: -1 !important;
    }

    .booking-main{

        width: 100% !important;
        margin-top: 20px !important;
    }
}

@media screen and (max-width: 768px){

    .booking-header{

        position: relative !important;

        top: auto !important;

        z-index: auto !important;
    }

    .header{

        position: relative !important;

        top: auto !important;
    }
}

/* =========================================
   CHECKOUT MOBILE FIX
========================================= */

@media screen and (max-width: 768px){

    .checkout-card{

        width: 100% !important;

        max-width: 100% !important;

        padding: 20px !important;

        overflow: hidden;
    }

    .form-grid{

        display: flex !important;

        flex-direction: column !important;

        gap: 15px !important;
    }

    .form-group{

        width: 100% !important;
    }

    .form-group.full-width{

        width: 100% !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea{

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box;

        font-size: 16px !important;
    }

    textarea{

        min-height: 110px;
    }
}

@media screen and (max-width: 768px){

    .catalog-item{

        display: flex !important;

        flex-direction: column !important;
    }

    .catalog-item__gallery{

        display: block !important;

        position: relative !important;

        width: 100% !important;

        height: 260px !important;

        min-width: 100% !important;

        flex: none !important;

        overflow: hidden !important;

        z-index: 5 !important;
    }

    .catalog-item__gallery .catalog-item__img{

        position: absolute !important;

        top: 0;
        left: 0;

        width: 100% !important;

        height: 100% !important;

        object-fit: cover !important;

        opacity: 0;

        transition: opacity 0.4s ease;
    }

    .catalog-item__gallery .catalog-item__img.active{

        opacity: 1 !important;

        z-index: 2;
    }

    .catalog-item__content{

        width: 100% !important;

        position: relative !important;

        z-index: 10 !important;

        background: white !important;
    }
}