/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');


.destacado {
    font-family: 'Oswald Condensed', 'Bebas Neue', 'Anton', 'Roboto Condensed',  sans-serif !important; /* Fuente destacada */
    font-weight: bold !important; /* Grosor de la fuente */
    font-stretch: condensed !important; /* Expande el texto */
    transform: scaleY(0.8) !important; /* Aplana el texto */
    line-height: 80%; /* Porcentaje */
}

.grande {
    font-size: 5em !important; /* Tamaño grande */
}

.chico {
    font-size: 1.1em !important; /* Tamaño grande */
    font-weight: 360 !important; /* Grosor de la fuente */
    margin-left: auto; /* Centra el párrafo horizontalmente */
    margin-right: auto; /* Centra el párrafo horizontalmente */
    transform: scaleY(0.9) !important; /* Aplana el texto */
    width: 70% !important; /* Ancho del texto */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) !important; /* Sombra suave grisácea */
    line-height: 200%; /* Porcentaje */
}

.fuente-menu {
    font-family:  'Roboto', 'Roboto Condensed', 'Bebas Neue', 'Anton',    'Oswald Condensed',    sans-serif !important; 
}

.titulo-ligero {
    font-weight: normal !important; /* Expande el texto */
    font-size: 1.2em !important; /* Tamaño grande */
}

.texto-ligero {
    font-weight: normal !important; /* Expande el texto */
    font-size: 0.9em !important; /* Tamaño grande */
}

.texto-ligero-2 {
    font-weight: normal !important; /* Expande el texto */
    font-size: 1em !important; /* Tamaño grande */
}

.titulo-grueso {
    font-family: 'Oswald Condensed', 'Bebas Neue', 'Anton', 'Roboto Condensed',  sans-serif !important; /* Fuente destacada */
    font-weight: normal !important; /* Expande el texto */
    font-size: 1.8em !important; /* Tamaño grande */
}

.titulo-ligero-2 {
    font-weight: 500 !important; /* Expande el texto */
    font-size: 2em !important; /* Tamaño grande */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) !important; /* Sombra suave grisácea */
}

.chico-2 {
    font-size: 1.1em !important; /* Tamaño grande */
    font-weight: 390 !important; /* Grosor de la fuente */
    margin-left: auto; /* Centra el párrafo horizontalmente */
    margin-right: auto; /* Centra el párrafo horizontalmente */
    transform: scaleY(0.9) !important; /* Aplana el texto */
    width: 75% !important; /* Ancho del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 150%; /* Porcentaje */
}

.texto-contacto {
    font-size: 1.3em !important; /* Tamaño del texto */   
}

.texto-tel {
    color: white; 
    text-decoration: none;
}

.texto-tel:hover {
    text-decoration: underline;
    transform: scale(1.5); /* Aumenta el tamaño del texto */
    font-size: 1.1em; /* Tamaño del texto */
}

.texto-instagram {
    font-size: 1.6em !important; /* Tamaño del texto */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) !important; /* Sombra suave grisácea */
}

.texto-instagram:hover {
    transform: scale(1.1); /* Aumenta el tamaño del texto al pasar el mouse */
}

.img-whatsapp {
    max-width: 32px;
}

.img-whatsapp:hover {
    transform: scale(1.3); /* Aumenta el tamaño del texto */
    
}

.oculto-en-movil {
    display: block;
}

.oculto-mediano {
    display: inline;
}

.oculto-mediano-2 {
    display: inline;
}

.visible-en-movil {
    display: none;
}

.titulo-ligero-3 {
    font-weight: normal !important; /* Expande el texto */
    font-size: 1em !important; /* Tamaño grande */
    color: white !important; /* Color del texto */
}

.texto-ligero-3 {
    font-weight: normal !important; /* Expande el texto */
    font-size: 0.8em !important; /* Tamaño grande */
    color: white !important; /* Color del texto */
}

.gruesa {
    font-weight: 500 !important; /* Expande el texto */
}

.texto-ligero-3 .gruesa {
    font-weight: 500 !important; /* Expande el texto */ 
}

.subtitle-1 {
    font-size: 1.1em !important; /* Tamaño del texto */
}

.margen-movil-20 {
    margin-left: 0px; /* Espacio superior */
}

.centrado-movil {
    text-align: left; /* Centra el texto */
}

@media (max-width: 900px) {
    .oculto-mediano {
        font-size: 0.6em !important;
    }

    .oculto-mediano-2 {
    font-stretch: condensed !important; /* Reduce el ancho del texto */
    }  
}

@media (max-width: 768px) {
    
    .grande {
        font-size: 2em !important; /* Tamaño grande */
    }

    .chico {
        font-size: 1em !important; /* Tamaño grande */
        width: 92% !important; /* Ancho del texto */
        line-height: 140%; /* Porcentaje */
    } 

    .oculto-en-movil {
        display: none;
    }

    .oculto-mediano {
        display: none;
    }

    .oculto-mediano-2 {
        display: none;
    }

    .centrado-movil {
        text-align: center !important; /* Centra el texto */
    }

    .visible-en-movil {
        display: block;
    }

    .titulo-ligero {
        font-size: 1.1em !important; /* Tamaño grande */
    }

    .texto-ligero {
        font-size: 0.8em !important; /* Tamaño grande */
    }

    .titulo-grueso {
        font-size: 1.3em !important; /* Tamaño grande */
    }

    .texto-ligero-2 {
        font-weight: normal !important; /* Expande el texto */
        font-size: 0.8em !important; /* Tamaño grande */
    }

    .titulo-ligero-2 {
        font-size: 1.6em !important; /* Tamaño grande */
    }

    .titulo-ligero-3 {
        font-weight: normal !important; /* Expande el texto */
        font-size: 0.8em !important; /* Tamaño grande */
    }

    .texto-ligero-3 {
        font-weight: normal !important; /* Expande el texto */
        font-size: 0.7em !important; /* Tamaño grande */
    }
    
    .chico-2 {
        font-size: 0.9em !important; /* Tamaño grande */
        line-height: 130%; /* Porcentaje */
    }

    .texto-contacto {
        font-size: 1em !important; /* Tamaño del texto */
    }

    .texto-instagram {
        font-size: 1em !important; /* Tamaño del texto */
    }

    .margen-movil-20 {
        margin-left: 20px; /* Espacio superior */
    }

    .subtitle-1 {
        font-size: 0.95em !important; /* Tamaño del texto */
    }
    
}

/* Estilos generales */

.img-icon {
    width: 20px; 
    vertical-align: middle; 
    margin-right: 10px;
}

/* Estilos para la barra de navegación */

.navbar {
    max-height: 100px; /* Altura de la barra de navegación */ 
    padding: 10px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.navbar-brand iframe {
    max-height: 80px; /* Tamaño del logotipo */
}

.nav-link {
    margin-left: 20px; /* Espacio entre los enlaces */
    font-weight: 400; /* Grosor de la fuente */
    font-size: 1.2rem; /* Tamaño de la fuente */
    color: #000; /* Color del texto */
}

.nav-link:hover, 
.nav-link:hover span,
.nav-link:hover p {
    color: #007bff; /* Color al pasar el mouse */
}

.navbar-collapse {
    background-color: white; /* Cambia el color de fondo del menú desplegable */
    margin-right: 50px !important;
    margin-top: 10px;
}

.navbar-nav .nav-link {
    color: black; /* Cambia el color del texto de los enlaces del menú */
}

@media (max-width: 991.98px) {
    .navbar-brand {
        margin-left: -100px; /* Elimina el margen izquierdo */
    }

    .navbar-brand iframe {
        max-height: 60px; /* Reduce la altura del logotipo */
    }

    .navbar-toggler {
        margin-right: 0; /* Elimina el margen derecho */
    }

    .navbar .container {
        padding-left: 15px; /* Ajusta el padding izquierdo */
        padding-right: 15px; /* Ajusta el padding derecho */
    }

    .navbar-collapse {
        border: 1px solid black;
        position: absolute;    
        width: 240px;
        max-width: 300px !important; /* Ajusta el margen derecho */
        top: 80px;
        right: 0; /* Alinea el menú a la derecha */
        z-index: 1000; /* Asegura que el menú esté por encima de otros elementos */
    }    
}

/* Estilos para las secciones */
section {
    padding: 100px 0; /* Espaciado interno para cada sección */
}

/* Estilos para la segunda banda */
.hero-section {
    background-image: url('../images/fondos/fondo1.avif'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Cubre todo el espacio disponible */
    background-position: center; /* Centra la imagen */
    margin-top: 100px; /* Espacio superior */
    height: 480px; /* Altura de la banda */
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    color: white; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para mejorar la legibilidad */
    filter: opacity(90%);
}

@media (max-width: 768px) {
    .hero-section {
        height: 240px;
    }
}

.hero-content {
    max-width: 800px; /* Ancho máximo del contenido */
    margin: 0 auto; /* Centra el contenido */
}

.hero-content h1 {
    font-size: 3rem; /* Tamaño del título */
    font-weight: bold; /* Grosor de la fuente */
}

.hero-content p {
    font-size: 1.5rem; /* Tamaño del subtítulo */
    margin-top: 20px; /* Espacio entre el título y el subtítulo */
}

/* Líneas separadoras */
.separador {
    position: absolute;
    top: 30%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 60%; /* Altura de la línea (no ocupa toda la altura) */
    background-color: white;
}

/* Elimina la línea separadora de la última columna */
.col-md-4:last-child .separador {
    display: none;
}

/* Estilos para la cuarta banda */
.imagen-fondo {
    height: 100%; /* Altura mínima de la imagen de fondo */
    min-height: 500px; /* Altura mínima de la imagen de fondo */
    background-size: cover; /* Cubre todo el espacio disponible */
    background-position: center; /* Centra la imagen */
}

.imagen-fondo-2 {
    height: 40%; /* Altura mínima de la imagen de fondo */
    min-height: 200px; /* Altura mínima de la imagen de fondo */
    background-size: cover; /* Cubre todo el espacio disponible */
    background-position: center; /* Centra la imagen */
    display: none;
}

@media (max-width: 768px) {

    .imagen-fondo {
        display: none;
    }

    .imagen-fondo-2 {
        display: block;
    }
}

.fila {
    border-radius: 10px; /* Bordes redondeados */
    background-color: white; /* Fondo blanco para las filas */
}

.text-blue {
    color: #007bff; /* Color azul para los títulos */
}

.text-black {
    color: #000; /* Color negro para los textos */
}

/* Estilos para la quinta banda */
.hero-section-5 {
    background-image: url('../images/fondos/fondo3.avif'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Cubre todo el espacio disponible */
    background-position: center; /* Centra la imagen */
    height: 320px; /* Altura de la banda */
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    color: white; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para mejorar la legibilidad */
    filter: opacity(90%);
}

.hero-content-5 {
    max-width: 800px; /* Ancho máximo del contenido */
    margin: 0 auto; /* Centra el contenido */
}

.hero-content-5 h1 {
    font-size: 2.5rem; /* Tamaño del título */
    font-weight: bold; /* Grosor de la fuente */
}

.hero-content-5 p {
    font-size: 1.3rem; /* Tamaño del subtítulo */
    margin-top: 20px; /* Espacio entre el título y el subtítulo */
}

@media (max-width: 768px) {
   .hero-section-5 {
      height: 250px; /* Altura de la banda */
   }   
}

/* Estilos para la sexta banda */
.sexta-banda {
    background-color: black;
    padding: 25px;
    margin: 20px;
    margin-bottom: 0;
}
.btn-light {
    color: black;
    border-radius: 30px;
}

/* Estilos septima banda */
.septima-banda {
    background-color: white;
    padding: 10px;
    margin: 10px;
    border-top: 1px solid rgb(196, 196, 196); /* Borde superior gris */
    border-bottom: 1px solid rgb(196, 196, 196); /* Borde inferior gris */
}

/* Estilos octava banda */
.image-strip, .video-strip {
    display: flex;
    overflow-x: auto;
    gap: 10px;  
    padding: 0px 10px;
}

.image-strip img, .video-strip iframe {
    flex: 0 0 auto;
    width: 441px;
    height: 590px;
    object-fit: cover;
    transition: transform 0.3s ease; /* Transición suave */
}

.image-strip::-webkit-scrollbar {
    height: 8px;
}

.image-strip::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
.image-strip::-webkit-scrollbar-thumb:hover {
    background: #555;
}

@media (max-width: 768px) {
  .image-strip img, .video-strip iframe {
    width: 160px;
    height: 214px;
  }  

  .image-strip::-webkit-scrollbar {
    height: 0px;
  }

  .septima-banda {
    padding-top: 20px;
  }
  
  
}

/* Estilos novena banda */
.novena-banda {
    background-color: white;
    padding: 50px 0;
}

.novena-banda .form-label {
    font-weight: normal;
}

/* Ajusta la altura del contenedor de mensaje */
.message-container {
    height: 100%; /* El contenedor ocupa el 100% de la altura de su padre */
    min-height: 150px;
    display: flex; /* Para que el textarea se expanda */
    flex-direction: column; /* Para que el textarea se expanda verticalmente */
  }
  
 .message-container textarea {
    height: 86%; /* El textarea ocupa el 100% de la altura del contenedor */
    resize: none; /* Opcional: Evita que el usuario pueda redimensionar el textarea */
    box-sizing: border-box; /* Incluye el padding y el border en el cálculo del height */
  }

  @media (max-width: 768px) {
    .novena-banda {
        padding: 5px 0 25px 0;
    }
  }  

/* Estilos para la 11 banda con degradado */
.degradado-vertical {
    background: linear-gradient(to bottom, #393939, #282727); /* Degradado de gris claro a gris oscuro */
    padding: 100px 0; /* Espaciado interno */
}

.degradado-vertical h2 {
    font-size: 2.5rem; /* Tamaño del título */
    font-weight: bold; /* Grosor de la fuente */
    margin-bottom: 20px; /* Espacio debajo del título */
}

.degradado-vertical p {
    font-size: 1.2rem; /* Tamaño del texto */
    margin-bottom: 0; /* Elimina el margen inferior */
}

.azul-oscuro-2{
    background-color: rgb(29, 2, 143);
}

.azul-oscuro{
    background-color: #0059b3;
}

.texto-azul-oscuro-2{
    color: rgb(29, 2, 143);
}

.texto-azul-oscuro{
    color: #004080;
}

.btn-primary.oscuro-2 { /* Estilo para botones con fondo azul oscuro */
    background-color: rgb(29, 2, 143) !important; /* El !important es para sobreescribir el estilo de Bootstrap */
    border-color: rgb(29, 2, 143) !important;
  }

.btn-primary.oscuro { /* Estilo para botones con fondo azul oscuro */
    background-color: #0059b3 !important; /* El !important es para sobreescribir el estilo de Bootstrap */
    border-color: rgb(29, 2, 143) !important;
  }

.btn-primary.oscuro:hover {
    background-color: #3777b8 !important; /* El !important es para sobreescribir el estilo de Bootstrap */  
}    

.text-blue.oscuro { /* Estilo para texto azul oscuro */
    color: #004080 !important; /* El !important es para sobreescribir el estilo de Bootstrap */
  }  

.info-container {
    max-width: 400px; /* Ajusta según necesidad */
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0px;    
}

.label-tel {
    font-size: 0.9em;
    margin-left: 35px;
}

.value-tel {
    text-align: left;
    font-size: 0.9em;
    min-width: 150px; /* Asegura que todos los valores ocupen el mismo espacio */
    position: absolute; /* Fija la posición horizontal */
    left: 53%; /* Ajusta este valor según sea necesario */
} 

.input-box {
    border-radius: 0; 
    border: 1px solid black; 
    padding: 0.25rem;
}

.gris-degradado {
    background: linear-gradient(to bottom, #393939, #282727); /* Degradado de gris claro a gris oscuro */
}

.required-text {
    position: absolute;
    right: 0;
    top: 5px;
    font-size: 11px;
    color: #888;
}

.translucent-bg {
    background: rgba(0,0,0,0.50); 
    border-radius: 20px; 
    padding: 0em 0em; 
    max-width: 650px; 
    margin: 0 auto; 
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

@keyframes growIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
.grow-in-anim {
    animation: growIn 0.7s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}

.flex-between {
    display: flex;
    align-items: center;      /* Alinea verticalmente */
    justify-content: space-between; /* Separa a los extremos */
    width: 100%;
}