body {
    font-family: 'Inter', sans-serif;
}

/* Color Guinda Institucional */
.btn-wine {
    background-color: #800020;
    color: white;
    border: none;
}
.btn-wine:hover {
    background-color: #5a0016;
    color: white;
}

.badge {
    background-color: rgba(128, 0, 32, 0.1);
    color: #800020;
    font-weight: 600;
}

/* Patrón de fondo sutil para el Hero */
.hero-section {
    min-height: 70vh;
    background-color: #ffffff;
/*    background-image:  linear-gradient(#f8f9fa 2px, transparent 2px), linear-gradient(90deg, #f8f9fa 2px, transparent 2px);
    background-size: 50px 50px;*/
    background-image: url('img/banner_ic.jpg');
    background-size: cover;
    background-position: center;
}

.hero-section .container {
    /*background-color: rgba(255, 255, 255, 0.9);*/
    background-color: rgba(255, 255, 255, 0.6); /* Fondo blanco con 60% opacidad */
    backdrop-filter: blur(10px); /* El truco mágico: desenfoque del fondo */
    -webkit-backdrop-filter: blur(10px); /* Para soporte en Safari */
    padding: 20px;
}

.lead {
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.9);
}

/* Galería */
.gallery-img {
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    transition: transform 0.3s ease;
}
.gallery-img:hover { transform: scale(1.02); }
.large { height: 350px; }
.sm { height: 167px; }

/* Patrón de puntos para la sección de contacto */
.pattern-dots {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#dee2e6 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.6;
}

/* Bootstrap Form Overrides */
.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(128, 0, 32, 0.1);
    border-color: #800020;
}

.gallery-img {
    background-size: cover;
    background-position: center;
    border-radius: 15px; /* Para que haga juego con tus botones y el panel blanco */
    transition: transform 0.3s ease;
}

.gallery-img:hover {
    transform: scale(1.02); /* Un toque de interactividad */
}

.gallery-container {
    /* Crea las columnas */
    column-count: 1;
    column-gap: 1rem;
}

/* Ajuste para tablets y laptops */
@media (min-width: 768px) {
    .gallery-container {
        column-count: 2;
    }
}

/* Ajuste para monitores grandes */
@media (min-width: 1200px) {
    .gallery-container {
        column-count: 3;
    }
}

.gallery-item {
    /* Evita que una imagen se corte entre dos columnas */
    break-inside: avoid;
    margin-bottom: 1rem;
    display: block;
}

.gallery-img-masonry {
    width: 100%;
    height: auto; /* Altura automática para que respete la proporción original */
    border-radius: 12px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-img-masonry:hover {
    transform: scale(1.03);
    cursor: pointer;
}