html {
    scroll-behavior: smooth;
}


body {
    background-color: #F7F6F2;
        font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 22px;
}




.logo {
    width: 140px;
}


.navbar {
    background: #050C1E;
    opacity: 0.9;
}

.navbar-toggler {
    opacity: 1 !important;
}

.offcanvas {
    background: #050C1E;
    opacity: 0.95;
}

.hero_section {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('../imgs/cldp_hero.webp');
                
    height: 100vh; 

    width: 100%; 
    
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero_social {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('../imgs/RLE.webp');
                
    height: 100vh; 

    width: 100%; 
    
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero_reservas {
    background:
                url('../imgs/Hr-R.webp');
    
    height: 100vh; 

    width: 100%; 
    
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-2 {
    color: white;
}


/* Capa oscura suave para resaltar el texto blanco */
  .overlay-oscuro {
    background: rgba(0, 0, 0, 0.3); /* Ajusta este valor si quieres que la imagen se vea más o menos clara */
    transition: background 0.3s ease;
  }

  .card-animada:hover .overlay-oscuro {
    background: rgba(0, 0, 0, 0.5); /* Se oscurece un poco al pasar el ratón */
  }

  .shadow-text {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    letter-spacing: 1px;
    text-transform: uppercase; /* Opcional: le da un aire más moderno/botón */
  }

  .card-animada {
    transition: transform 0.3s ease;
  }
  
  .card-animada:hover {
    transform: scale(1.03);
  }






.vh-50 {
    height: 50vh; /* Altura del carrusel (50% de la pantalla) */
    min-height: 300px;
}

.object-fit-cover {
    object-fit: cover; /* Evita que las imágenes se deformen */
}

/* Opcional: Estilo para que los indicadores o captions no estorben */
.carousel-caption p {
    border-radius: 5px;
    font-size: 0.9rem;
    opacity: 0.8;
}




.nubes{
    object-fit: cover;
    width: 100%;
    height: 80%;
}

.Nubes1 {
    object-fit: cover;
    width: 100%;
    height: 80%;
}

.carousel-caption {
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    padding: 20px;
   
}

.nubes2 {
    max-width: 100%;
    border-radius: 3%;
    /* ESTO ES CLAVE: */
    display: block; 
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transform: scale(1);
    cursor: pointer;
}


.QS {
    color: #26ada2;
}

.danza {
    max-width: 100%;
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Estado final: visible y en su posición original */
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Estilo para el contenedor de la sección */
.quienes-somos-section {
    background: transparent; /* Permite ver el degradado de tu body */
    overflow: hidden;
}

/* El título "¿Quiénes somos?" */
.QS {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.8rem;
    color: #48BBFF; /* El cian artístico que resalta sobre el azul */
    margin-bottom: 2rem;
    letter-spacing: 1px;
}

/* El párrafo descriptivo */
.contenido-overlap p {
    line-height: 1.8; /* Espaciado entre líneas para legibilidad artística */
    color: black;
    max-width: 90%; /* Evita que el texto toque los bordes */
    margin: 0 auto;
}

/* Ajuste de la imagen para que sea imponente */
.object-fit-cover {
    object-fit: cover;
    height: 70vh; /* Altura generosa para impacto visual */
}

/* Animación de aparición suave */
.fade-in {
    animation: fadeIn 1.5s ease-in-out;
}

.footer {
    background: #050C1E; 
    opacity: 0.9;
}

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



/* Estilos para la sección de obras */

.hero_obras {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('../imgs/tregua_hero.webp');
    
    /* 100vh ocupa el 100% del alto. 100dvh es una mejora moderna 
       que descuenta la barra de direcciones del navegador móvil */
    height: 100vh;
    height: 100dvh; 
    
    width: 100%; 
    background-size: cover;
    
    /* Tendrás que jugar con este porcentaje para encontrar el encuadre perfecto 
       donde se vean ambas caras lo mejor posible. Intenta con 30%, 40% o 50% */
    background-position: 40% center; 
    background-repeat: no-repeat;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Estilos para Escritorio (Tablets en adelante) --- */
@media (min-width: 768px) {
    .hero_obras {
        height: 130vh; /* Tu altura original para escritorio */
        background-position: center; /* Vuelve a centrar la imagen */
    }
}


/* Estilo Místico */
.estilo-nubes {
    color: #f8f9fa;
    font-family: 'Georgia', serif; /* Una letra más artística */
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('/static/imgs/fondo-nubes.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Estilo Urbano */
.estilo-tregua {
    color: #f8f9fa;
    font-family: 'Georgia', serif;
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('/static/imgs/fondo-ladrillos2.avif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;  
}

.estilo-nubes img {
    width: 600px; /* Solo afecta a la imagen de esa sección */
}

.estilo-tregua img {
    width: 500px; /* Solo afecta a la del Bronx */
}