* {
    margin: 0;
    padding: 0;
    border: 0;

}

body {

    font-size: 16px;

    font-family: 'Poppins', sans-serif;
    background-color: #4c7fc8;
    /*display: flex;*/
    /*Genera un error de visualización*/
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow-x: hidden;





}

.carousel-item{
  height: 400px; /* La altura que desees para el carrusel */
  object-fit: cover; /* ¡Esta es la clave! */
  /*object-position: center; /* Opcional: Centra la imagen si se recorta */
}
.carousel-item img {
  border-radius: 15px; /* Ajusta este valor a tu gusto */
}

.merriweather-regular {
    font-family: "Saira", sans-serif;
    font-optical-sizing: auto;
    /* mantiene legibilidad según tamaño */
    font-weight: 450;
    /* peso “Regular” */
    font-style: normal;
    font-variation-settings: "wdth" 100;
    /* ancho normal (opcional) */

}

.merriweather-bold {
    font-family: "Saira", sans-serif;
    font-optical-sizing: auto;
    /* mantiene legibilidad según tamaño */
    font-weight: 650;
    /* peso “Regular” */
    font-style: bold;
    font-variation-settings: "wdth" 100;
    /* ancho normal (opcional) */

}

.navbar {
    background: #000000;
    border-radius: 10px;
}



h1 {
    font-family: 'Montserrat', sans-serif;

}


/*Fotos*/
.mapa {
    width: 100%;
}



.box {

    /* background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 10px;
        border-radius: 10px; */

    width: 100%;
    height: 100%;
    margin: 1px;
    margin-bottom: 5px;
    padding: 7px;
    /*background-color: #fbfcfc;*/
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;


}

.visible {
    opacity: 1;
    transform: translateY(0);
}



.ca {
    background-color: #f9d4d4;
    background-image: url(../img/L_Sala_400.webp);
    background-size: 100% 100%;
    width: 100%;
    height: 400px;
    border-radius: 15px;
    margin-top: 5px;
}

.foto {


    width: 100%;
    height: 350px;
    border-radius: 15px;
    margin-top: 10px;
}






.d-block {
    border-radius: 8px;
}


.logo {
    width: 70px;
}

.nav-link {

    font-size: 11px;
    color: #000000;

}

.btn-wsp {
    position: fixed;
    width: 55px;
    height: 55px;
    line-height: 55px;
    bottom: 30px;
    right: 30px;
    background: #0df053;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.btn-wsp:hover {
    text-decoration: none;
    color: #0df053;
    background: #fff;

}

.salaC {
    height: 480px;
}

.navbar-brand {
    font-size: 14px;
}

/* Estilos para los Iconos Sociales Flotantes */
.iconos-sociales-flotantes {
    position: fixed; /* Hace que los iconos se queden fijos en la pantalla */
    bottom: 85px;    /* Distancia desde la parte inferior */
    right: 30px;     /* Distancia desde la derecha */
    z-index: 1000;   /* Asegura que estén por encima de otros elementos */
}

/* Estilos para cada icono individual */
.iconos-sociales-flotantes a {
    display: block;              /* Muestra cada icono en su propia línea */
    margin-bottom: 15px;         /* Espacio entre los iconos */
    width: 50px;                 /* Ancho del círculo */
    height: 50px;                /* Alto del círculo */
    line-height: 50px;           /* Centra verticalmente el icono */
    text-align: center;          /* Centra horizontalmente el icono */
    color: white;                /* Color del icono (letra/logo) */
    font-size: 24px;             /* Tamaño del icono */
    border-radius: 50%;          /* Crea la forma circular */
    text-decoration: none;       /* Quita el subrayado del enlace */
    transition: all 0.3s ease;   /* Animación suave para el hover */
}

/* Efecto al pasar el mouse por encima (hover) */
.iconos-sociales-flotantes a:hover {
    transform: scale(1.15); /* Aumenta ligeramente el tamaño */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Colores específicos para cada red social */
.icono-instagram {
    /* Degradado oficial de Instagram */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.icono-facebook {
    background-color: #1877F2; /* Color oficial de Facebook */
}

/* Estilos para el botón flotante de WhatsApp */
.whatsapp-flotante {
    position: fixed;     /* Fija el elemento en la pantalla */
    bottom: 25px;        /* Distancia desde la parte inferior */
    right: 25px;         /* Distancia desde la derecha */
    z-index: 1000;       /* Asegura que esté por encima de otros elementos */
    
    /* Ajuste para que el icono se vea más grande y centrado */
    font-size: 1.5rem;   /* Tamaño del icono */
    padding: 0.5rem 0.8rem; /* Ajuste manual del padding para centrar el icono */
    line-height: 1.5;      /* Altura de línea para centrar verticalmente */
}

/* Opcional: Pequeña animación al pasar el mouse */
.whatsapp-flotante:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}