/* Estilos para el Loader */
.loader {
    position: fixed; /* Fija el loader en la ventana de visualización */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semi-transparente */
    display: flex; /* Usa flexbox para centrar el spinner */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    z-index: 10000; /* Asegura que esté por encima de todo, incluyendo el video intro (z-index: 9999) */
    opacity: 1; /* Inicialmente visible */
    visibility: visible; /* Inicialmente visible */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Transición suave al ocultar */
}

/* Spinner dentro del loader */
.loader::after {
    content: ''; /* Contenido pseudo-elemento para el spinner */
    width: 50px;
    height: 50px;
    border: 5px solid #ccc; /* Color del borde del spinner */
    border-top-color: #333; /* Color de la parte giratoria del spinner */
    border-radius: 50%; /* Lo hace circular */
    animation: spin 1s linear infinite; /* Animación de rotación */
}

/* Animación de giro para el spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Clase para ocultar el loader */
.loader-hidden {
    opacity: 0; /* Lo hace transparente */
    visibility: hidden; /* Lo oculta completamente (para evitar interacciones) */
}


@font-face{
    font-family: 'Bio Sans';
    src: url(/Flat-it-BioSans-Regular.otf);
}

*{
    font-family: 'Bio Sans';
    font-weight: normal;
    font-style: normal;
}

footer{
    color: #000;
}

img{
    max-width: 100%;
    animation: fadeIn 3s ease;
}
@keyframes fadeIn{
    0% {
        opacity: 0;
    }
}

.gallery{
    background-color: #ffffff;
    padding: 60px 0;

}

.gallery img{
    padding: 30px;
    width: 100%;
}


@media(max-width: 991px){
    .sidebar{
        backdrop-filter: blur(10px);
    }
    img{
    animation: fadeIn 3s ease;
    }
    @keyframes fadeIn{
        0% {
            opacity: 0;
        }
    }
    .video-text h2{
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 10px;
    }
    

}

@media(min-width: 991px){

    .col{
        position: relative;
        display: inline-block;
        animation: fadeIn 2s ease;
    }

    

    .textoImg{

        display: none;
        position: absolute;
        bottom: -2px;  /* Ajusta este valor según la distancia que desees entre la imagen y el texto */
        left: 0;
        right: 0;
        text-align: left;
        color: #000; /* Color del texto */
        padding-left: 43px;
        font-size: 18px;

    
    }
    
    .col:hover .textoImg{
        display: block;
    }
}


.manifiestoTexto{
 
    padding-left: 70px;
    padding-right: 110px;
    padding-top: 100px;

}

.descripcion{
    margin-left: 30px;
    margin-right: 40px;
    text-align: left;
    
}

.col{
    position: relative;
    display: inline-block;
}

.textoImg{

    padding-left: 30px;
    font-size: 18px;

}

/* Tenías esta regla de footer duplicada, la elimino para evitar conflictos.
   Las propiedades de padding y font-size se manejan mejor con clases de Bootstrap o
   reglas más específicas si es necesario. */
/*
footer{
    padding-left: 40px;
    font-size: 20px;
}
*/

.contactotexto{
    font-size: 20px;

}
.row{
    font-size: 15px;
}




/* Contenido (título, párrafo, botón) */
.content {
    max-width: 800px;
    padding: 20px;
    opacity: 0; /* Inicialmente oculto */
    transition: opacity 1s ease-out; /* Transición suave para mostrar el contenido */
}

.video-intro.hidden .content {
    opacity: 1; /* Muestra el contenido después de que el video desaparezca */
}

h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: bold;
}

p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    background-color: #4CAF50; /* Color del botón */
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #45a049; /* Efecto hover */
}

.hidden-icons {
    visibility: hidden;
}

body.loaded .hidden-icons {
    visibility: visible;
    transition: opacity 0.5s ease-in;
    opacity: 1;
}

.video-intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    z-index: 9999;
    overflow: hidden;
    cursor: pointer; /* Indica que se puede hacer clic */
}

.video-intro video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Oscurece el video para mejor visibilidad del texto */
}

/* Texto sobre el video */
.video-text {
    position: absolute;
    text-align: center;
    color: white;
    z-index: 10;
    max-width: 80%;
    font-family: Arial, sans-serif;
    animation: fadeIn 2s ease-in-out;
}

.video-text h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.video-text p {
    font-size: 1.2rem;
}

/* Animación de aparición del texto */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsivo */
@media (max-width: 768px) {
    .video-text h1 {
        font-size: 2rem;
    }
    .video-text p {
        font-size: 1rem;
    }
}


/* Aquí estaba la regla de footer duplicada, la moví arriba y la fusioné */
/* footer {
    color: #000;
} */


.footer-logo {
    height: 180px;
    width: auto; 
    border-radius: 8px; 
}


.whatsapp-icon {
    width: 30px;
    height: 30px; 
    border-radius: 5px; 
}


.footer-text-link span {
    font-size: 18px; 
                        
}


.footer-content-wrapper {
    padding-left: 30px; 
    padding-right: 30px; 
}


@media (max-width: 767.98px) {
    /* Aquí tenías un selector muy específico que fue sobrescrito.
       Lo ideal es que la alineación de mobile se maneje con clases de Bootstrap en el HTML.
       Si quieres que los enlaces de WhatsApp se apilen en mobile, asegúrate que su contenedor
       tenga `flex-column` en el HTML para pantallas pequeñas, y que el padre tenga `align-items-center`
       si quieres que estén centrados.
    */
    /* La siguiente regla fue ajustada en la conversación anterior para que los links estén en fila y a la izquierda.
       Si ahora deben estar centrados, necesitas ajustar el HTML o crear una nueva clase CSS para mobile. */
    .d-flex.flex-row.flex-md-row.gap-5.justify-content-start.justify-content-md-end {
        flex-direction: row; /* Fuerza la disposición en fila */
        justify-content: flex-start; /* Alinea los ítems al inicio (izquierda) en modo fila */
        width: 100%; /* Ocupa toda la anchura disponible */
        flex-wrap: wrap; /* Permite que los elementos se envuelvan si no hay suficiente espacio */
    }


    .footer-content-wrapper {
        padding-left: 0;
        padding-right: 0;
    }
}

.noticia-link-negro p {
    color: #000 !important;
    text-decoration: none;
}

/* loader, estilos copiados de .lds-ellipsis y adaptados a .loader::after */

/* No necesitas el bloque .lds-ellipsis directamente si estás usando .loader::after */
/*
.lds-ellipsis,
.lds-ellipsis div {
  box-sizing: border-box;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33.33333px;
  width: 13.33333px;
  height: 13.33333px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
*/

.hidenn{
    overflow: hidden;
}

.centrado {
    height: vh; /* Debería ser 100vh para ocupar la altura completa del viewport */
    display: flex;
    justify-content: center;
    align-items: center;
}