.roboto {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.cedarville-cursive-regular {
    font-family: "Cedarville Cursive", cursive;
    font-weight: 400;
    font-style: normal;
}

.gochi-hand-regular {
    font-family: "Gochi Hand", cursive;
    font-weight: 400;
    font-style: normal;
}

.fuggles-regular {
    font-family: "Fuggles", cursive;
    font-weight: 400;
    font-style: normal;
}

.oooh-baby-regular {
    font-family: "Oooh Baby", cursive;
    font-weight: 400;
    font-style: normal;
}
.quicksand {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* Variables de Diseño */
:root {
    --bg-color: #fff;
    --primary-brown: #5d4037;
    --accent-gold: #c5a059;
    --text-dark: #030303;
    --whatsapp-green: #25d366;
}

body {
    background-color: var(--bg-color);
    font-family: "Quicksand", sans-serif;
    color: var(--text-dark);
    scroll-behavior: smooth;
    margin: 0;
}

/* Navbar */
.navbar {
    background-color: #e7e5e5fb;
    border-bottom: 1px solid rgba(93, 64, 55, 0.1);
}

.nav-link {
    color: var(--primary-brown) !important;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Logo de la Barra de Navegación */
.logo-nav {
    max-width: 120px; 
    height: auto;
    margin-left: 40px;
    margin-top: 5px;
    transition: all 0.3s ease;
}

/* INICIO SLIDES */
.kb-panorama,
.kb-zoom {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.carousel-fade .carousel-item {
    transition-duration: 2s !important;
}

/* ANIMACIONES */
.kb-panorama {
    animation: effect-panorama 15s linear infinite alternate;
}

@keyframes effect-panorama {
    0% { transform: scale(1.2) translateX(-8%); }
    100% { transform: scale(1.2) translateX(8%); }
}

.kb-zoom {
    animation: effect-zoom 12s ease-in-out infinite alternate;
}

@keyframes effect-zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

/* ÁREA CAROUSEL - EL GRANERO (OPTIMIZADO PC) */
.hero-section {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1500 / 650; 
    position: relative;
    overflow: hidden;
}

#headerCarousel .carousel-item video,
#headerCarousel .carousel-item .video-hero {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center center !important;
}

#headerCarousel .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.custom-caption {
    background: transparent !important;
    position: absolute;
    top: 80% !important; 
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80%; 
    text-align: center;
    z-index: 10; 
}

.custom-caption p {
    font-family: "Oooh Baby", cursive;
    font-size: 2.5rem !important;
    color: white;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9);
    line-height: 1.2;
}

/* CONTROLES FLECHAS */
.carousel-control-prev,
.carousel-control-next {
    width: 8% !important; 
    opacity: 0.7 !important;
    transition: opacity 0.3s ease;
    top: 0;
    bottom: 0;
    height: auto;
    display: flex !important;
    align-items: center;
    transform: none;
    z-index: 9999 !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1 !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-radius: 50%;
    background-size: 50%;
    filter: invert(1) grayscale(100%) brightness(200%) !important; 
}

.carousel-inner {
    height: 100% !important;
    overflow: hidden;
}

/* Introducción */
.container-intro {
    max-width: 1500px;
    margin: 0 auto;
    padding: 60px 20px;
}

.texto-bienvenida {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #4a4a4a;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

/* --- TIRA DE ICONOS (AMENITIES) COMPACTA --- */
.tira-iconos-wrapper {
    width: 100%;
    background-color: #ffffff;
    padding: 25px 0;
    margin-top: 20px;
    position: relative;
    z-index: 10;
}

.tira-iconos-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 15px !important;
}

.icono-item {
    width: 100px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.icono-item span.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    color: #646464;
    font-size: 38px;
    margin-bottom: 6px;
    display: block;
    font-variation-settings: 'wght' 100;
}

.icono-item small {
    font-family: "Roboto", sans-serif;
    font-size: 0.85rem;
    color: #555;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

/* AREA DETALLE */
.bg-dark-granero {
    background-color: #642a2a;
}

.nuestro-espacio-slider .img-slide {
    height: 500px;
    background-size: cover;
    background-position: center;
}

.carousel-item.active .contenido-slide {
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* BANDA MULTIMEDIA */
.banda-multimedia .btn-multimedia {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 15px;
    margin: 10px;
    text-decoration: none;
    color: #444;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    width: 100%;
    border: none;
}

.btn-beige { background-color: #e6e4df; }
.btn-verde-medio { background-color: #e3e7e1; }
.btn-verde-claro { background-color: #e2e4e2; }

.btn-multimedia:hover {
    filter: brightness(0.95);
    color: #000;
}

.container-1500 {
    max-width: 1500px;
    margin: 0 auto;
    padding: 60px 20px;
}

.servicios-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
}

.fotos-collage {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
}

.foto-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.foto-item img:hover {
    transform: scale(1.02);
    filter: brightness(0.9);
}

.lista-servicios {
    flex: 0 0 400px;
    text-align: left;
    border-left: 1px solid #d1d1d1;
    padding-left: 40px;
}

.lista-servicios h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    letter-spacing: 2px;
    color: #333;
    font-weight: 400;
}

/* Modales */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.modal-contenido {
    max-width: 80%;
    max-height: 80%;
}

.grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 60px;
    align-items: center;
}

.foto-par {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.foto-par img {
    width: 45%;
    height: 400px;
    object-fit: cover;
    border: 1px solid #ddd;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s;
}

.foto-par img:hover { transform: translateY(-5px); }

.bloque-texto-quote {
    text-align: left;
    padding-left: 40px;
}

.bloque-texto-quote h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: #8da18a;
    line-height: 1.1;
    margin: 0;
}

.comillas {
    font-size: 5rem;
    color: #cbd4c8;
    display: block;
    line-height: 0;
    margin-bottom: 20px;
}

.bloque-descripcion { padding-right: 40px; }

.bloque-descripcion p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    text-align: justify;
    background: rgba(255, 255, 255, 0.7);
    padding: 30px;
    border-radius: 8px;
}

.container-1500 {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

.fila-granero {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    gap: 50px;
}

.columna-fotos,
.columna-texto {
    flex: 1;
}

.par-fotos { display: flex; gap: 20px; }

.par-fotos img {
    width: 50%;
    height: 450px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.4s ease;
    cursor: pointer;
}

.par-fotos img:hover { transform: scale(1.03); }

.titulo-campestre {
    font-size: 4rem;
    color: #595a59;
    font-family: 'Playfair Display', serif;
    line-height: 1.1;
    text-align: center;
}

.cuadro-descripcion {
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.85);
    border-left: 5px solid #8da18a;
}

.cuadro-descripcion p {
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: justify;
    color: #444;
}

.foto-vertical-estetica {
    width: 48%;
    height: 500px;
    object-fit: cover;
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.cuadro-blanco-estetico {
    background-color: #fff;
    border-left: 5px solid #8da18a;
    padding: 50px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.03);
}

.cuadro-blanco-estetico p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    text-align: justify;
    margin: 0;
}

#experiencia-granero {
    background-image: url('../img/fondo3.jpg');
    min-height: 500px;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
}

.btn-multimedia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;         
    min-width: 250px;    
    padding: 15px 30px;
    border: none !important;
    outline: none;
}

.banda-multimedia {
    background-color: #ffffff;
    padding: 40px 0;
}

#nuestro-espacio {
    scroll-margin-top: 90px;
}

/* --- Sección Reserva --- */
.reserva {
    background-image: url('../img/fondo-reserva.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 60vh;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    color: #fff;
}

.reserva-container {
    max-width: 800px;
    padding: 0 20px;
    z-index: 2;
}

.reserva-content h3 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.reserva-content p {
    font-size: 1.2rem;
    margin-bottom: 35px;
    line-height: 1.6;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.btn-reserva-cta {
    display: inline-block;
    background-color: #00BFA5;
    color: #fff;
    padding: 18px 45px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 191, 165, 0.3);
}

.btn-reserva-cta:hover {
    background-color: #009688;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 191, 165, 0.4);
}

/* --- SECCIÓN MAPA PREMIUM CENTRADO --- */
.contenedor-datos-ubicacion {
    max-width: 1500px;
    margin: 40px auto 20px auto;
    padding: 0 50px;
    text-align: center;
}

.titulo-ubicacion-mini {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.texto-direccion {
    font-family: "Roboto", sans-serif;
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.mapa-seccion {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 50px;
    margin: 40px 0;
}

.mapa-contenedor {
    max-width: 1500px; 
    margin: 40px auto; 
    padding: 0 15px;   
}

.mapa-contenedor iframe {
    width: 100%;       
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
    display: block;
}

/* Forzamos a que las variantes cubran su área */
#headerCarousel .carousel-item .video-adaptado {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* ==========================================================================
   📸 1. ESTRUCTURA DE LA GALERÍA MASONRY ORIGINAL DEL SERVIDOR
   ========================================================================== */
.imagen-encabezado-galeria img {
    width: 100%;
}

.contenido-encabezado-galeria {
    justify-content: center;
    text-align: center;
}

.contenido-encabezado-galeria div h2 {
    max-width: 1500px;
    margin: 0 auto;
    padding: 60px 20px;
    background: #d7d8d6;
    margin-top: 20px;
}

.contenido-encabezado-galeria div p {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #4a4a4a;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.gallery-section {
    padding: 60px 20px;
    background-color: #dedfdc;
}

.gallery-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 95%;
    padding: 20px 0;
    position: relative; 
    display: block; 
    min-height: 600px;
}

/* Cimientos de fábrica puros */
.grid-sizer, .gallery-item {
    width: 33.333%;
    padding: 12px; 
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.gallery-item.horizontal {
    width: 66.666%;
}
/* 1. LAS FOTOS COMUNES Y HORIZONTALES: Forzamos los 300px con recorte limpio */
.gallery-item img {
    width: 100%;
    height: 300px !important; 
    object-fit: cover !important; /* Corta el centro de la foto gigante sin deformarla */
    display: block;
    border-radius: 12px;
    transition: transform 0.4s ease;
}

/* 2. LAS FOTOS VERTICALES ALTAS: Ocupan exactamente dos filas más el espacio del medio */
.gallery-item.vertical img {
    height: 624px !important; /* 300px + 300px + 24px de margen aproximado */
    object-fit: cover !important;
}
.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    background-color: rgba(0, 0, 0, 0.6) !important; 
    transition: all 0.5s ease-in-out; 
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: white;
    text-align: center;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.lupa-icon {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 10px;
    transform: scale(0.8);
    transition: transform 0.4s ease;
}

.gallery-item:hover .lupa-icon {
    transform: scale(1);
}

.overlay-title {
    color: #ffffff !important;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.overlay-subtitle {
    font-size: 14px;
    font-weight: 300;
    opacity: 0.9;
}

.sub-menu-horizontal {
    width: 100%; 
    max-width: 1000px; 
    margin: 20px auto 0 auto; 
    padding: 15px;
    background: transparent; 
    box-shadow: none; 
    border: none;
    display: none; 
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}

.btn-sub-filter {
    border: 1px solid #755258;
    background: transparent; 
    color: #7e2f33;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: 0.3s;
    cursor: pointer;
}

.btn-sub-filter:hover, 
.btn-sub-filter.active {
    background: #691f25; 
    color: white !important;
}

.btn-filter {
    background: none;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 14px; 
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #666;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

.btn-filter.active, .btn-filter:hover {
    color: #792b36;
    border-bottom: 2px solid #744c51;
}

.btn-filter i {
    font-size: 10px;
    vertical-align: middle;
    transition: transform 0.3s;
}

.btn-filter.active i {
    transform: rotate(180deg); 
}
/* Estilo personalizado para el botón Volver en la barra */
/* ==========================================================================
   🎨 RETOQUE ESTÉTICO: REDONDEADO ÚNICAMENTE PARA EL BOTÓN VOLVER
   ========================================================================== */

#btn-volver-barra {
    background-color: #5d4037 !important; /* Color café/marrón rústico */
    color: #ffffff !important;
    border: 1px solid #5d4037 !important;
    font-weight: 600;
    
    /* 🚀 LA CURVA: Redondeado tipo cápsula igual a los botones de abajo */
    border-radius: 30px !important; 
    padding: 8px 24px !important; /* Un poquito de aire a los lados para que quede bien óvalo */
    transition: all 0.3s ease;
}

#btn-volver-barra:hover {
    background-color: #4e342e !important; 
    border-color: #4e342e !important;
}

/* FIN DE GALERIA */
/* INICIO HISTORIA */
.section-historia {
    background-color: #eaf7d4;
}

.img-historia-3 {
    width: 100%;
    height: 300px; 
    object-fit: cover; 
    display: block;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

.container-granero {
    max-width: 1500px !important;
    margin: 0 auto;
    padding: 0 15px;
}

.texto-historia {
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: justify;
}

.frase-entrecomillada {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 2.2rem;
    color: #2c2c2c;
    margin-bottom: 0;
    text-align: center;
}

.divider-oro {
    width: 60px;
    border-top: 3px solid #b8860b;
    opacity: 1;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto; 
}

/* --- AREA RESERVAS --- */
.barra-reserva-container {
    background-color: #dfe0db;
}

.barra-blanca {
    border: 1px solid #e0e0e0;
}

.barra-reserva-container .input-group-text {
    color: #8c8c8c;
    font-size: 1.1rem;
}

.barra-reserva-container .form-control,
.barra-reserva-container .form-select {
    border-color: #dee2e6;
    height: 45px;
}

.barra-reserva-container .form-control:focus,
.barra-reserva-container .form-select:focus {
    box-shadow: none;
    border-color: #ffc107;
}

#btn-reserva-whatsapp {
    height: 45px;
    background-color: #e67e22;
    border: none;
    color: white;
    transition: 0.3s;
}

#btn-reserva-whatsapp:hover {
    background-color: #d35400;
    transform: translateY(-2px);
}

/* --- ACTIVIDADES AL AIRE LIBRE --- */
.titulo-seccion-fino {
    font-weight: 300 !important; 
    letter-spacing: 4px;        
    color: #ffffff;             
    text-transform: uppercase;   
    font-size: 2.2rem;          
}

.bg-titulo-actividades {
    background-color: #dfe0db; 
    padding: 20px 0;
}
.titulo-sombra {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}

.actividad-card {
    position: relative;
    height: 350px; 
    overflow: hidden;
    border-radius: 0px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.actividad-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.5s ease;
}

.actividad-card:hover .actividad-img {
    transform: scale(1.1); 
}

.actividad-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.486); 
    color: #ffffff;
    padding: 12px;
    text-align: center;
}

.actividad-caption p {
    margin: 0;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

/* --- LERBE --- */
.seccion-casa-te {
    background-color: #dfe0db;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 60px 0; 
}

.contenedor-te {
    width: 1500px;
    max-width: 95%; 
    display: flex;
    align-items: center;
    gap: 40px; 
}

.bloque-info {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.animacion-suave {
    animation: aparecerDesaparecer 14s infinite ease-in-out;
}

@keyframes aparecerDesaparecer {
    0%, 100% { opacity: 0; }
    10%, 85% { opacity: 1; } 
}

.logo-te {
    max-width: 180px;
    margin-bottom: 15px;
}

.titulo-te {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-size: 1rem;
    color: #4a4a4a;
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 1.6; 
}

.btn-lerbe {
    display: inline-block;
    padding: 10px 20px;
    background-color: #515251; 
    color: white !important; 
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.btn-lerbe:hover {
    background-color: #959694;
}

section.seccion-casa-te div.contenedor-te div.bloque-fotos {
    flex: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
}

section.seccion-casa-te div.contenedor-te div.bloque-fotos img {
    display: block !important;
    width: 100% !important;
    height: 450px !important;    
    min-height: 450px !important;
    object-fit: cover !important;
    border-radius: 4px;
}/* ==========================================================================
   📩 PÁGINA DE CONTACTO PREMIUM (CALIBRADA Y COMPACTA)
   ========================================================================== */

/* 1. SECCIÓN PRINCIPAL: Con tu imagen real de fondo */
main.seccion-contacto-premium {
    background-image: url('../img/fondocontacto.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto parallax premium */
    width: 100%;
    /* REBAJA DE ALTURA: Manejamos el espacio de arriba y abajo de forma controlada */
    padding: 50px 0 !important; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. EL CONTENEDOR: Corregido con el nombre exacto de tu clase del HTML */
.contenedor-formulario-apaisado {
    background-color: #ffffff !important; /* Blanco pleno y sólido */
    border: none !important;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease;
    width: 100%;
    max-width: 850px; /* Ancho apaisado premium para PC */
    margin: 0 auto;
    padding: 45px !important; /* Colchón de aire interno */
}

.contenedor-formulario-apaisado:hover {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px);
}

/* 3. LOS INPUTS: Línea limpia estilo El Granero */
.form-custom {
    border: none !important;
    border-bottom: 2px solid #ddd !important;
    border-radius: 0;
    padding: 10px 5px;
    background: transparent;
    color: #333 !important;
}

.form-custom:focus {
    box-shadow: none !important;
    border-bottom: 2px solid #e67e22 !important;
}

/* 4. EL BOTÓN: Sincronizado con tus colores de reserva */
.btn-contacto-verde {
    background-color: #e67e22 !important;
    color: white !important;
    border: none !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    padding: 12px 45px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-contacto-verde:hover {
    background-color: #d35400 !important;
    transform: scale(1.05);
}

.logo-formulario-header {
    width: 200px;
    height: auto;
    display: inline-block;
}




/* --- FOOTER HIGH-CONTRAST --- */
.main-footer {
    color: #ffffff;
    padding: 60px 0 20px 0;
    background-image: url('../img/footer-ok.jpg');
    width: 100%;
}

.main-footer .contact-details p,
.main-footer .footer-copyright p {
    font-weight: 700; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.85); 
    letter-spacing: 0.5px; 
}

.main-footer .contact-details p i {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.85);
}

.logo-principal-footer {
    max-width: 250px; 
    height: auto;
    margin-bottom: 5px;
}

.footer-info h4 {
    font-family: 'Roboto',  serif; 
    color: #080500; 
    letter-spacing: 1px;
}

.footer-info p {
    font-size: 1rem;
    color: #ffffff;
    margin-bottom: 5px;
}

.whatsapp-color { color: #25d366; }

.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: #ffffff;
    text-align: center; 
    width: 100%;        
}

html {
    scroll-padding-top: 100px; 
    scroll-behavior: smooth; 
}

/* --- BARRA FLOTANTE DERECHA --- */
.barra-flotante {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    background-color: rgba(138, 137, 136, 0.418);
    border-radius: 10px 0 0 10px;
    padding: 10px 5px;
}

.icono-red {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    text-decoration: none;
    color: white;
    font-size: 24px;
    transition: all 0.3s ease;
}

.icono-red.whatsapp i { color: #25D366; }

.icono-red:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    border-radius: 5px;
}

.icono-red.whatsapp:hover i { color: #585757; }


/* ==========================================================================
   🎬 MULTI-RESPONSIVE UNIFICADO Y BLINDADO
   ========================================================================== */

/* --- PANTALLAS GRANDES / ESCRITORIO (Hasta 1500px) --- */
@media (max-width: 1500px) {
    .hero-section {
        height: auto;
        aspect-ratio: 1500 / 650;
    }
}

/* --- DESKTOP MEDIANO / TABLETS GRANDES (Hasta 1024px) --- */
@media (max-width: 1024px) {
    .contenedor-te {
        flex-direction: column;
        height: auto;
    }
    .bloque-fotos {
        grid-template-columns: 1fr 1fr 1fr;
        height: 200px;
    }
}

/* --- AJUSTE DE ENCUADRE DE VIDEO --- */
@media (max-width: 1200px) {
    .carousel-item:first-of-type video {
        object-position: center bottom !important; 
    }
}

/* --- TABLETS EN GENERAL (Hasta 992px) --- */
@media (max-width: 992px) {
    .tira-iconos-content {
        flex-wrap: wrap !important; 
        justify-content: center !important;
        gap: 20px !important;
    }
   
    .icono-item {
        width: 110px !important; 
    }
    .fila-granero, .fila-invertida {
        flex-direction: column;
        text-align: center;
    }
    .titulo-campestre {
        font-size: 2.5rem;
        text-align: center;
        margin-bottom: 20px;
    }
    .par-fotos img {
        height: 300px;
    }
}

/* Para tablets o pantallas medianas (menos de 900px) */
@media (max-width: 900px) {
    .contenedor-te {
        flex-direction: column; 
        gap: 30px;
    }
    section.seccion-casa-te div.contenedor-te div.bloque-fotos {
        width: 100%; 
    }
}

/* --- CELULARES Y TABLETS EN VERTICAL (Hasta 768px) --- */
@media (max-width: 768px) {
    /* Carrusel Elástico Proporcional */
    #headerCarousel, 
    #headerCarousel .carousel-inner, 
    #headerCarousel .carousel-item {
        height: auto !important; 
        min-height: auto !important;
        aspect-ratio: 16 / 9; 
    }

    #headerCarousel .carousel-item video,
    #headerCarousel .carousel-item .video-adaptado {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #headerCarousel .carousel-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important; 
    }

    .tira-iconos-wrapper { padding: 40px 0; }
    .tira-iconos-content { padding: 0 20px; }
    .icono-item { flex: 0 0 calc(50% - 20px); }
    .contenedor-datos-ubicacion { padding: 0 20px; margin: 30px auto 15px auto; }
    .titulo-ubicacion-mini { font-size: 1.2rem; }
    .mapa-contenedor { height: 300px; }
    .mapa-contenedor iframe { height: 300px !important; width: 100% !important; }
    .barra-flotante { padding: 5px 2px; }
    .icono-red { width: 40px; height: 40px; font-size: 20px; }
    .carousel-control-prev, .carousel-control-next { display: none; }
    .mapa-contenedor { margin: 25px auto; padding: 0 10px; }
}
/* LA PARTE DE GALERIA DE FOTOS*/
/* ==========================================================================
   📱 ESCUDO RESPONSIVE: Una sola columna a partir de los 650px
   ========================================================================== */
@media (max-width: 650px) {
    
    /* 1. Forzamos a la grilla contenedora a olvidarse del absolute de Isotope */
    .gallery-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centra la columna en la pantalla */
        height: auto !important; /* Que crezca libre hacia abajo */
        width: 100% !important;
        padding: 10px 0 !important;
    }

    /* 2. Obligamos a TODAS las fotos a medir lo mismo (Se acaba el Tetris acá) */
    .grid-sizer, 
    .gallery-item, 
    .gallery-item.horizontal, 
    .gallery-item.vertical {
        position: relative !important; /* Neutraliza el empuje de Isotope */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 570px !important; /* Tu medida exacta de ancho */
        padding: 10px 0 !important; /* Espaciado prolijo entre foto y foto hacia abajo */
    }

    /* 3. Apagamos los altos fijos de PC (300px y 624px) y devolvemos el formato natural */
    .gallery-item img, 
    .gallery-item.vertical img {
        width: 100% !important;
        height: auto !important; /* Recuperan su proporción original sin estirarse */
        aspect-ratio: 4 / 3 !important; /* Les da un encuadre fotográfico hermoso y parejo */
        object-fit: cover !important;
        border-radius: 12px !important;
    }
}
/* Para móviles (menos de 650px) */
@media (max-width: 650px) {
    section.seccion-casa-te div.contenedor-te div.bloque-fotos {
        grid-template-columns: 1fr !important; 
        gap: 20px !important; 
    }
    section.seccion-casa-te div.contenedor-te div.bloque-fotos img {
        height: 350px !important;    
        min-height: 350px !important;
    }
    .titulo-te { font-size: 1.1rem; }
}
/* ==========================================================================
   📱 RESPONSIVE PARA MÓVILES (Menos de 650px)
   ========================================================================== */
@media (max-width: 650px) {
    main.seccion-contacto-premium {
        padding: 30px 0 !important;
        background-attachment: scroll;
    }

    .contenedor-formulario-apaisado {
        max-width: calc(100% - 30px) !important;
        margin: 0 15px !important; /* Evita que choque los bordes del celu */
        padding: 30px 20px !important;
    }
}

/* --- CELULARES (Hasta 576px) --- */
@media (max-width: 576px) {
    .bloque-fotos {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 15px;
    }
    .bloque-fotos img {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover;
    }
    .actividad-card { height: 250px; }
}
/* ==========================================================================
   📱 DETALLE PARA CELULARES CHICOS: Margen lateral a partir de los 500px
   ========================================================================== */
@media (max-width: 500px) {
    
    /* Le damos un aire a los costados de las tarjetas para que no toquen el borde */
    .grid-sizer, 
    .gallery-item, 
    .gallery-item.horizontal, 
    .gallery-item.vertical {
        width: 100% !important;
        /* Usamos padding o margin interno para que la imagen se achique un poquito */
        padding: 12px 15px !important; /* 12px arriba/abajo y 15px de aire a los costados */
        box-sizing: border-box !important;
    }

    /* Ajustamos el espaciado interno del overlay negro para que acompañe el nuevo margen */
    .gallery-overlay {
        top: 12px !important;
        bottom: 12px !important;
        left: 15px !important;
        right: 15px !important;
    }
}
/* --- CELULARES CHICOS (Hasta 490px) --- */
@media (max-width: 490px) {
    .par-fotos {
        flex-direction: column;
        gap: 15px; 
    }
    .par-fotos img {
        width: 100% !important;
        height: 250px !important; 
        object-fit: cover;
    }
    .cuadro-descripcion p, .texto-bienvenida, .actividad-caption p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        text-align: center; 
    }
    .container-intro { padding: 0 20px !important; }
}

/* --- CELULARES MUY CHICOS (Hasta 480px) --- */
@media (max-width: 480px) {
    .icono-item {
        flex: 0 0 100%; 
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .icono-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
}

/* --- ELIMINAR TEXTO FLOTANTE EN CELULARES --- */
@media (max-width: 450px) {
    #headerCarousel .carousel-caption {
        display: none !important; 
    }
}