body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #C7C7C7;
    -ms-high-contrast: black-on-white;
    overflow-x: hidden;
    box-sizing: border-box;
}

h1 {
    font-size: 3.6rem;
}

h2 {
    font-size: 2.4rem;
}

h3 {
    font-size: 1.8rem;
}

p {
    font-size: 1.2rem;
}

* {
    box-sizing: border-box;
}


/*----------------------------------------navbar---------------------------------------------*/

header {
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 80px;   /* Espaciado interno */
    background-color: #0a121b;
    color: white;
    width: 100%;          /* Asegura que ocupe todo el ancho de la pantalla */
    z-index: 10;
    top: 0;               /* Fijo en la parte superior */
    left: 0;              /* Alineado a la izquierda */
    overflow-x: hidden;   /* Evita el desbordamiento horizontal */
}

nav {
    position: relative;
}

/* Estilo para el icono de la hamburguesa */
.menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-icon span {
    width: 25px;
    height: 3px;
    background-color: #C7D301;
}

/* Estilo para la lista de navegación */
ul {
    list-style: none;
    display: flex;
    gap: 40px;
}

/* Mostrar el menú en pantallas grandes */
ul li a {
    text-decoration: none;
    color: #ffffff;
}

header .logo {
    height: 40px;
    margin-right: 20px; /* Espacio entre el logo y la lista de navegación */
}

/* Estilos responsivos */
@media (max-width: 768px) {
    /* Ocultar el menú en pantallas pequeñas por defecto */
    .menu-icon {
        display: flex;
    }

        /* Estilo para el menú hamburguesa */
        #menu {
            position: fixed;
            top: 0;
            right: 20px;
            background-color: rgba(158, 202, 15, 0.25);
            border: 1px solid #C7D301;
            width: 125px;  /* Ajustamos el ancho del menú */
            display: none;  /* El menú se oculta por defecto */
            flex-direction: column;
            text-align: right;
            gap: 20px;
            padding: 20px;
            border-radius: 10px;
            z-index: 1000;  /* Nos aseguramos de que el menú esté encima de otros elementos */
            margin-top: 60px;  /* Espacio hacia abajo para evitar que se solape con el logo */
        }

    ul {
        display: flex;
        flex-direction: column;
        padding-left: 0;
        gap: 20px;
        margin: 0;
    }

    ul li a {
        color: #ffffff;
        text-decoration: none;
        font-weight: 500;
    }
    
    .active + #menu {
        display: flex;
    }
}




/*-------------------------------------------imagenes Moto Segura------------------------------------------------*/

.container {
    display: flex; /* Alinea los elementos en una fila por defecto */
    flex-direction: row; /* Cambia a columna para que los elementos estén en una sola columna */
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    flex-wrap: wrap; /* Permite que los elementos se acomoden en múltiples filas si es necesario */
    min-height: fit-content;
    height: 100vh; /* Ocupa toda la altura de la ventana */
    text-align: center; /* Centra el texto */
    background-color: #0a121b;
}


/* Estilo de cada imagen */
.image-wrapper {
    flex: 1; /* Las imágenes ocuparán el mismo espacio */
    max-width: 48%; /* Esto evita que las imágenes se expandan demasiado en pantallas grandes */
    overflow: hidden;

}

/* Asegura que las imágenes se adapten al tamaño de su contenedor */
.image-wrapper img {
    width: 100%;
    height: auto;
    display: block; /* Elimina el espacio debajo de la imagen */
    object-fit: contain; /* Asegura que la imagen se ajuste sin recortarse */
}

/* Media Query para pantallas de 800px o menos */
@media (max-width: 1000px) {
    .container {
        flex-direction: column; /* Cambia la dirección a columna en pantallas más pequeñas */
        align-items: center; /* Centra las imágenes horizontalmente */
        height: auto;
    }

    .image-wrapper {
        max-width: 90%; /* Ajusta las imágenes para que sean más pequeñas en pantallas medianas */
    }
}

/* Media Query para pantallas de 480px o menos */
@media (max-width: 480px) {
    .container {
        margin-top: 20px;
    }

    .image-wrapper {
        max-width: 100%; /* Las imágenes ocuparán todo el ancho de la pantalla */
    }
}

/*--------------------------------------------------------Video RESONAR----------------------------------------------*/

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    background-color: #C7C7C7;
}

.text-video-container h1 {
    margin-bottom: 10px;
    color: #0a121b;
}

.text-video-container p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #0a121b;
}

.hero-container .btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #C7D301;
    color: #0a121b;
    text-decoration: none;
    border-radius: 30px;
    font-size: 1.2rem;
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background-color: #C7C7C7;
    border-radius: 25px;
    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    margin-bottom: 20px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 25px;
}


.video-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto; /* Centra el video */
    margin-top: 80px; /* Espacio superior para separar del contenido anterior */
}

@media (max-width: 768px) {
    .hero-container {
        padding: 20px;
    }

    .text-video-container h1 {
        font-size: 1.5rem;
    }

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

    .hero-container .btn {
        font-size: 1rem;
    }
}


/*----------------------------------------------------Caracteristica Principal-----------------------------------------*/


.feature-principal {
    display: flex; /* Alinea los elementos en fila */
    flex-direction: row-reverse;
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: space-between; /* Distribuye el espacio entre el texto y la imagen */
    padding: 20px;
    background-color: #C7C7C7;
    width: 100%; /* Asegura que la sección ocupe todo el ancho disponible */
    overflow: hidden; /* Evita el desbordamiento */
}

.content {
    text-align: center; /* Centra el texto */
    align-content: center;
    justify-content: center;
    flex: 1; /* Asegura que el contenido ocupe el 100% del ancho disponible */
    width: 100%; /* Asegura que el contenido no se desborde */
    padding: 0 10px; /* Añade un poco de relleno para evitar que el texto toque los bordes */
    overflow: hidden; /* Asegura que el contenido no se desborde */
    box-sizing: border-box; /* Evita que el contenido sobrepase su contenedor */
    margin-right: 20px;
}

.feature-principal .image {
    width: 50%;  /* Asegura que el contenedor de la imagen ocupe todo el ancho */
    text-align: center; /* Centra la imagen dentro del contenedor */
    margin-bottom: 20px; /* Añade un margen inferior en pantallas pequeñas */
}

.feature-principal .image img {
    width: 100%;  /* La imagen ocupa todo el ancho disponible del contenedor */
    height: auto;  /* Mantiene la proporción de la imagen */
    max-width: 100%;  /* No deja que la imagen sea más ancha que el contenedor */
    transform: scale(1); /* Tamaño normal al principio */
    transition: transform 0.5s ease-in-out, transform 0.2s ease-out; /* Transición suave */
}

.feature-principal .image img:hover {
    transform: scale(1.1); /* Escala la imagen al 110% en hover */
}

/* Estilos para pantallas pequeñas */
@media (max-width: 1000px) {
    .feature-principal {
        flex-direction: column-reverse; /* Coloca el texto y la imagen en columna en pantallas pequeñas */
        align-items: center; /* Centra el contenido verticalmente */
        justify-content: center; /* Asegura que los elementos estén centrados */
        padding: 10px; /* Reducir el relleno para aprovechar mejor el espacio */
    }
}

@media (max-width: 768px) {
    .feature-principal {
        flex-direction: column; /* Coloca el texto y la imagen en columna en pantallas pequeñas */
        align-items: center; /* Centra el contenido verticalmente */
        justify-content: center; /* Asegura que los elementos estén centrados */
        padding: 10px; /* Reducir el relleno para aprovechar mejor el espacio */
    }

    .feature-principal .content {
        margin-right: 0; /* Elimina el margen derecho cuando están en columna */
        margin-bottom: 20px; /* Espacio entre el texto y la imagen en disposición de columna */
        text-align: center; /* Asegura que el texto esté centrado */
        padding: 0 10px; /* Añade un poco de relleno para evitar que el texto toque los bordes */
        width: 100%; /* Asegura que el contenido ocupe todo el ancho disponible */
        box-sizing: border-box; /* Evita que el contenido se desborde */
        overflow: hidden; /* Evita que el contenido se desborde */
    }

    .content h1 {
        font-size: 2rem;
    }

    .feature-principal .image {
        margin-bottom: 20px; /* Agrega un espacio entre la imagen y el texto cuando están en columna */
        width: 100%; /* Asegura que el contenedor de la imagen ocupe todo el ancho disponible */
    }
}



/*----------------------------------------------------Otras Caracteristicas-----------------------------------------*/

.feature-others {
    display: flex;
    justify-content: space-between;  /* Espacio entre los elementos */
    width: 100%;  /* Ancho del 70% de la pantalla */
    background-color: #C7C7C7;
}

.feature {
    width: 50%;  /* Cada imagen ocupa el 48% del espacio */
    text-align: center;  /* Centra el texto debajo de la imagen */
}

.feature img {
    width: 50%;  /* Hace que la imagen ocupe el 100% del contenedor */
    transform: scale(1); /* Tamaño normal al principio */
    transition: transform 0.5s ease-in-out, transform 0.2s ease-out; /* Transición suave */
}

.feature img:hover {
    transform: scale(1.1); /* Escala la imagen al 110% en hover */
}


.feature p {
    margin-top: 5px;  /* Separación entre la imagen y el texto */
    font-size: 16px;
    color: #0a121b;
}

.feature h3 {
    color: #0a121b;
}

.feature-plus {
    background-color: #C7C7C7;
    color: #0a121b;
    display: flex;
    flex-direction: row;
}

.icon-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    font-size: 2rem;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 60px;
}


.icon-container h3 {
    color: #0a121b;
}

.icon-container p {
    color: #0a121b;
}

@media (max-width: 900px) {
    .feature-plus {
        flex-direction: column; /* Cambia la dirección a columna en pantallas más pequeñas */
        align-items: center; /* Centra las imágenes horizontalmente */
    }

    .feature-others {
        flex-direction: column; /* Cambia la dirección a columna en pantallas más pequeñas */
        align-items: center; /* Centra las imágenes horizontalmente */
    }
    .feature img {
        transform: scale(1.5);
        margin: 25px;
    }

    .icon-container {
        margin: 20px;
        padding: 0;
        gap: 0;
    }
    
}

/*-----------------------------------------------Testimoniales------------------------------------------------*/

.back-testimonial {
    background-color: #888;
    padding-top: 40px;
    padding-bottom: 40px;
}

.testimonials {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px;
}

.testimonial {
    background-color: #ffffff51;
    border-color: #ffffff;
    border-radius: 30px;  /* Bordes redondeados */
    padding: 20px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(98, 98, 98, 0.1);  /* Sombra suave */
    text-align: center;
    transition: transform 0.3s ease;  /* Efecto de transición */
}

.testimonial:hover {
    transform: translateY(-10px);  /* Efecto al pasar el mouse */
}

.testimonial img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.testimonial p {
    color: #0a121b;
    margin-bottom: 10px;
    font-size: 1rem;
}

.testimonial h3 {
    margin: 0;
    color: #0a121b;
    font-size: 1rem;
}

.testimonial span {
    display: block;
    color: #0a121b;
    font-size: 0.8rem;
}

.title-testimonial {
    text-align: center;
    color: #0a121b;
    padding-bottom: 20px;
}


.img-person {
    transform: scale(1.5);
    margin-top: -50px;
    overflow: auto;
}

@media (max-width: 500px) {
    .testimonials {
        gap: 100px;
    }
    
    .title-testimonial {
        width: 98%;
    }
}


/*----------------------------------------------------Suscripcion------------------------------------------*/

.suscription {
    display: flex;
    flex-direction: row;
    background-color: #0a121b;
}

.form-suscription {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-right: 200px;
    padding-top: 50px;
}

.form-suscription, h3 {
    color:#ffffff;
}

.form-suscription p {
    color:#ffffff;
}

.input-suscription {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%; /* Agregado para asegurar que se adapta al ancho de su contenedor */
}

input {
    width: 400px;
    height: 40px;
    background-color: #c7c7c74b;
    border: none; /* Elimina los bordes */
    border-radius: 30px; /* Bordes redondeados */
    padding-left: 10px; /* Añade espacio dentro del campo de entrada */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño */
    font-size: 1rem; /* Tamaño de la fuente dentro del campo */
    outline: none; /* Elimina el borde azul de enfoque por defecto */
    font-family: 'Montserrat', sans-serif;
}

input::placeholder {
    color: #888; /* Color del texto del placeholder */
    font-size: 1rem; /* Tamaño de la fuente del placeholder */
}

input:focus {
    /* No añadimos borde al hacer foco */
    background-color: #dcdcdc; /* Cambia el fondo cuando está enfocado */
}

.btn-submit {
    width: 400px;
    height: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #C7D301;
    color: #0a121b;
    border: none; /* Elimina los bordes del botón */
    border-radius: 30px; /* Bordes redondeados */
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer; /* Muestra el puntero como una mano */
    transition: background-color 0.3s ease; /* Suaviza la transición al hacer hover */
    font-family: 'Montserrat', sans-serif;
}

.btn-submit:hover {
    background-color: #3a3a5c; /* Cambia el color de fondo al pasar el ratón */
}

.img-helmet-susc {
    max-width: 60%;
    height: auto;
    min-height: min-content;
}

@media (max-width: 900px) {
    .img-helmet-susc {
        display: flex;
        max-width: 60%;
        height: auto;
    }
    .suscription {
        display: flex;
        flex-direction: column;
    }   
        .form-suscription {
            width: 100%; /* El formulario ocupa el 100% en pantallas pequeñas */
            justify-content: center;
            align-items: center;
        }
        .form-suscription p {
            width: 90%; /* El formulario ocupa el 100% en pantallas pequeñas */
            justify-content: center;
            align-items: center;
        }
}
    
@media (max-width: 500px) {
        .suscription {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            padding-bottom: 40px;
        }

        .form-suscription {
            width: 100%; /* El formulario ocupa el 100% en pantallas pequeñas */
            justify-content: center;
            align-items: center;
        }

        .form-suscription p {
            width: 90%; /* El formulario ocupa el 100% en pantallas pequeñas */
            justify-content: center;
            align-items: center;
        }

        .form-suscription input, .form-suscription button {
            width: 80%; /* Los elementos del formulario ocupan el 100% del ancho */
            font-size: 1rem; /* Ajuste en el tamaño de la fuente */
        }
        .img-helmet-susc {
            max-width: 60%;
            height: auto;
            min-height: min-content;
        }
    }


/*-----------------------------------------------------------Footer---------------------------------------------------*/

/* Estilos generales para el footer */
.footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;  /* Cuatro columnas en desktop */
    gap: 20px;  /* Espacio entre las columnas */
    padding: 40px;
    background-color: #C7D301;
}

/* Estilos para el logo */
.footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.footer-logo img {
    max-width: 100%; /* Asegura que el logo se ajuste bien */
}

/* Estilo para las secciones de enlaces */

.footer-links-web a, .footer-links-policy a, .footer-social a, p {
    color: #0a121b;
    padding: 8px 0; /* Espacio entre enlaces */
}

.footer-social p {
    font-size: 1rem;
}

.footer-social,
.footer-links-web,
.footer-links-policy {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.footer-social .social-icons a {
    margin-right: 10px;
    font-size: 2rem;
}

/* Modo Desktop */
@media (min-width: 768px) {
    .footer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr; /* Cuatro columnas */
        gap: 20px; /* Espacio entre las columnas */
    }


}

/* Modo Responsive */
@media (max-width: 768px) {
    .footer {
        display: flex;
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
        align-items: center; /* Centrar los elementos */
    }

    .footer-links-web, .footer-links-policy {
        width: 100%;
        text-align: center; /* Centrar los enlaces dentro de cada sección */
    }

    .footer-social {
        align-items: center;
    }
}


/*------------------------------prueba paralaxx-------------------------------------*/

/* Estilo básico para el contenedor parallax */
.parallax {
    position:relative;
    background-color: #888;
    background-image: url('/img/AURORA-FLORENTINA-RESONAR-2023-web-1024x577.jpg');
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
}

.content-px {
    padding: 20px;
    background-color: #888;
    height: 200px; /* Altura del contenido */
}

@media (max-width: 768px) {
    .parallax {
        position:relative;
        background-color: #888;
        background-image: url('/img/AURORA-FLORENTINA-RESONAR-2023-web-1024x577.jpg');
        background-attachment: relative;
        background-position: left;
        background-repeat: no-repeat;
        background-size: cover;
        height: 25vh;
        margin: 0;
    }
}

/*---------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------pagina Genesis-----------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------------------------------*/



/*--------------------------------------------------------------------CEO Felipe Morales--------------------------------------------------*/

.gen-feature-principal {
    display: flex; /* Alinea los elementos en fila */
    flex-direction: row;
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: space-between; /* Distribuye el espacio entre el texto y la imagen */
    padding: 20px;
    background-color: #C7C7C7;
    width: 100%; /* Asegura que la sección ocupe todo el ancho disponible */
    overflow: hidden; /* Evita el desbordamiento */
}

.gen-content {
    text-align: center; /* Centra el texto */
    align-content: center;
    justify-content: center; /* Asegura que el contenido ocupe el 100% del ancho disponible */
    width: 50%; /* Asegura que el contenido no se desborde */
    overflow: hidden; /* Asegura que el contenido no se desborde */
    box-sizing: border-box; /* Evita que el contenido sobrepase su contenedor */
    padding: 20px;
    color: #0a121b;
}

.gen-feature-principal .gen-image {
    width: 80%;  /* Asegura que el contenedor de la imagen ocupe todo el ancho */
    text-align: center; /* Centra la imagen dentro del contenedor */
    margin-bottom: 20px; /* Añade un margen inferior en pantallas pequeñas */
}

.gen-feature-principal .gen-image img {
    width: 100%;  /* La imagen ocupa todo el ancho disponible del contenedor */
    height: auto;  /* Mantiene la proporción de la imagen */
    max-width: 100%;  /* No deja que la imagen sea más ancha que el contenedor */
    transform: scale(1); /* Tamaño normal al principio */
    transition: transform 0.5s ease-in-out, transform 0.2s ease-out; /* Transición suave */
}

.gen-feature-principal .gen-image img:hover {
    transform: scale(1.1); /* Escala la imagen al 110% en hover */
}

.gen-content p {
    text-align: left;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 1000px) {
    .gen-feature-principal {
        flex-direction: column; /* Coloca el texto y la imagen en columna en pantallas pequeñas */
        align-items: center; /* Centra el contenido verticalmente */
        justify-content: center; /* Asegura que los elementos estén centrados */
        padding: 10px; /* Reducir el relleno para aprovechar mejor el espacio */
    }
}

@media (max-width: 768px) {
    .gen-feature-principal .gen-content {
        margin-bottom: 10px; /* Espacio entre el texto y la imagen en disposición de columna */
        text-align: center; /* Asegura que el texto esté centrado */
        width: 100%; /* Asegura que el contenido ocupe todo el ancho disponible */
        box-sizing: border-box; /* Evita que el contenido se desborde */
        overflow: hidden; /* Evita que el contenido se desborde */
        padding-top: 60px;
    }

    .gen-content h2 {
        font-size: 2rem;
    }

    .gen-feature-principal .image {
        width: 100%; /* Asegura que el contenedor de la imagen ocupe todo el ancho disponible */
    }
}



/*---------------------------------------------------------------------Frase Wehe-----------------------------------------------------*/
.wehe-ceo {
    display: flex; /* Usamos flexbox para organizar los elementos */
    flex-direction: column; /* Alinea los elementos en columna */
    text-align: center;
    margin: 0;
    padding-left: 100px;
    padding-right: 100px;
    color: #0a121b;
}

.wehe-ceo p {
    text-align: left;
}
.wehe-ceo h3 {
    color: #0a121b;
}



/*------------------------------------------------------------------Patentes----------------------------------------------------*/
.gen-patentes {
    background-image: url('/img/mapa mundi a.png'); /* Ruta de la imagen de fondo */
    background-size: contain; /* Asegura que la imagen cubra toda la sección */
    background-position: center center; /* Centra la imagen de fondo */
    background-repeat: no-repeat; /* No repite la imagen */
    min-height: 400px; /* Ajusta la altura mínima de la sección (ajusta según necesites) */
    display: flex; /* Flexbox para centrar el contenido */
    flex-direction: column; /* Organiza los elementos de la sección de arriba hacia abajo */
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    padding: 20px; /* Espaciado alrededor del contenido */
    text-align: center; /* Centra el texto */
    background-color: #C7D301;
}

.text-gen-patentes {
    color: #0a121b; /* Color del texto en blanco para asegurar que sea legible sobre el fondo */
}

/* Media Query para pantallas pequeñas (máximo 480px) */
@media (max-width: 480px) {
    .gen-patentes {
        background-size: cover; /* Ajusta la imagen de fondo para cubrir toda la sección */
        min-height: 300px; /* Ajusta la altura mínima en pantallas pequeñas (ajusta según necesites) */
        padding: 0; /* Elimina el padding para evitar franjas de espacio */
        background-position: center center; /* Asegura que la imagen siga centrada */
    }

    .text-gen-patentes {
        font-size: 1em; /* Ajusta el tamaño de la fuente para mejorar la legibilidad en pantallas pequeñas */
    }
}




/*---------------------------------------------------------------equipo RESONAR-----------------------------------------------------------*/
.team-resonar {
    background-color: #0a121b;
    padding: 50px;
}

.title-team-resonar {
    text-align: center;
    color: #C7D301;

}

.text-team-resonar {
    display: flex; /* Alinea los elementos en fila */
    flex-direction: row;
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: space-between; /* Distribuye el espacio entre el texto y la imagen */
    background-color: #0a121b;
    width: 100%; /* Asegura que la sección ocupe todo el ancho disponible */
    overflow: hidden; /* Evita el desbordamiento */
}

.img-team-resonar {
    width: 40%;  /* Asegura que el contenedor de la imagen ocupe todo el ancho */
    height: auto;
    flex-direction: column;
    text-align: center; /* Centra la imagen dentro del contenedor */
    margin-left: 200px; /* Añade un margen inferior en pantallas pequeñas */
    border-radius: 20px;
}

.text-team-resonar p {
    color: white;
    padding: 0px 150px 0px 50px;
}

@media (max-width: 768px) {
    .team-resonar {
        display: flex;
        flex-direction: column;
        background-color: #0a121b;
        justify-content: center;
        align-items: center;
    }

    .text-team-resonar {
        flex-direction: column; /* Cambia la dirección a columna en pantallas pequeñas */
        align-items: center; /* Centra los elementos */
        justify-content: center; /* Centra el contenido */
    }

    .text-team-resonar p {
        padding: 0px 20px; /* Ajusta el padding del texto en pantallas pequeñas */
        text-align: center;
    }

    .img-team-resonar {
        width: 80%; /* Ajusta la imagen para que ocupe el 80% del ancho */
        max-width: 100%; /* Asegura que no se exceda el ancho del contenedor */
        height: auto; /* Mantiene las proporciones de la imagen */
        margin: 0 auto; /* Centra la imagen dentro del contenedor */
        display: block; /* Asegura que la imagen se comporta como un bloque */
    }

}


/*---------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------pagina Tecnologia--------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------Seccion Casco-----------------------------------------------------------------*/

/* Contenedor principal */
.text-cascos {
    display: flex;
    flex-direction: column; /* Apilar las secciones verticalmente */
    justify-content: flex-start; /* Alineación en la parte superior */
    align-items: center; /* Centrar las secciones horizontalmente */
    margin: 0; /* Eliminar márgenes */
    padding: 0; /* Eliminar padding */
}

/* Sección con texto centrado */
.tec-feature-principal, .texto-dispositivo-tecnologia {
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    width: 100%;
    text-align: center; /* Centrar el texto */
    margin: 0; /* Eliminar márgenes */
}

/* Estilo para la primera sección */
.tec-feature-principal {
    height: 300px; /* Ajusta según el alto que prefieras */
}

/* Sección de la imagen */
.text-cascos > div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Asegurarse de que la imagen sea responsiva */
.text-cascos img {
    max-width: 100%; /* Ajusta el tamaño de la imagen al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

/* Estilo para la segunda sección */
.texto-dispositivo-tecnologia {
    height: 100px; /* Ajusta según el alto que prefieras */
    margin-top: 0; /* Eliminar margen entre secciones */
}

/* Estilos para los títulos */
.title-tec-gen-content, .title-texto-dispositivo {
    font-size: 2em;
    color: #fff; /* Color blanco para el texto */
    margin: 0; /* Eliminar margen superior e inferior */
    padding: 0; /* Eliminar padding */
}

/* Media query para pantallas de 768px o menos */
@media (max-width: 768px) {
    .tec-feature-principal, .texto-dispositivo-tecnologia {
        flex-direction: column; /* Asegurar que se apilen verticalmente */
        height: auto; /* No es necesario que ocupe toda la altura de la ventana */
        padding: 10px; /* Reducir el padding para pantallas pequeñas */
    }

    .title-tec-gen-content, .title-texto-dispositivo {
        font-size: 1.5em; /* Reducir el tamaño del texto en pantallas pequeñas */
    }

    .texto-dispositivo-tecnologia {
        margin-top: 10px; /* Reducir el margen superior entre las secciones */
    }

    .text-cascos img {
        width: 100%; /* Asegurar que la imagen se ajuste bien a pantallas pequeñas */
        height: auto; /* Mantener la proporción de la imagen */
    }
    .text-cascos {
        margin: 80px;
    }
}


/*----------------------------------------------------------------seccion caracteristicas dispositivos------------------------------------------*/

.tec-feature-plus {
    background-color: #C7C7C7;
    color: #0a121b;
    display: flex;
    flex-direction: row;
}

.tec-icon-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    font-size: 2rem;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 60px;
}

.title-tec-gen-content {
    color: #0a121b;
}

.title-texto-dispositivo {
    color: #0a121b;
}

.tec-icon-container h3 {
    color: #0a121b;
}

.tec-icon-container p {
    color: #0a121b;
}

@media (max-width: 768px) {
        .tec-feature-plus {
            flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
            align-items: center; /* Centrar elementos en pantallas pequeñas */
        }
    
        .tec-icon-container {
            font-size: 1.2rem; /* Reducir el tamaño del texto en pantallas pequeñas */
            margin: 20px 0; /* Reducir margen para mejorar la disposición */
        }
    
        .title-tec-gen-content, .title-texto-dispositivo {
            font-size: 1.5rem; /* Reducir aún más el tamaño de los títulos en pantallas pequeñas */
        }
    }

/*----------------------------------------------------------textos cientificos--------------------------------------------------*/

.textos-cientificos-header {
    background-color: #0a121b;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 20px;
    padding-top: 20px;
}

.section-izq {
    width: 20%;
}

.section-der {
    width: 20%;
}

.section-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80vh;
    text-align: center;
}

.section-center p {
    color: #C7C7C7;
}


/*----------------------------------------------------------Formulario Contacto-----------------------------------------*/

/* Estilo general para la sección de contacto */
/* Estilo para la sección principal de contacto */
.contact-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 80px;
    background-color: #0a121b;
}

/* Estilo para la sección del formulario */
.form-section {
    width: 50%;
    padding: 20px;
    background-color: #0a121b;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilo para el título h1 dentro de .form-section */
.form-section h1 {
    font-size: 2.5rem;
    color: #C7D301;
    text-align: center;
    margin-bottom: 20px;
}

/* Estilo para el párrafo dentro de .form-section */
.form-section p {
    font-size: 1.1rem;
    color: #ffffff;
    text-align: center;
    margin-bottom: 30px;
}

/* Estilos para el formulario */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre los campos */
}

.contact-form input,
.contact-form button {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
}

.contact-form input {
    margin-bottom: 10px;
}

.contact-form input:focus,
.contact-form button:focus {
    outline: none;
    border-color: #0a121b;
}

.contact-form button {
    background-color: #0a121b;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form button:hover {
    background-color: #3a3a5c;
}

/* Estilo para la casilla de verificación */

.checkbox {
    display: flex;
    align-items: center;
    gap: 20px; /* Espacio entre la casilla de verificación y el texto */
    font-size: 0.9rem;
    color: #555;
    margin-top: 15px; /* Espacio superior para separar del campo de entrada anterior */
    padding-left: 20px;
}

/* Reducir el tamaño de la casilla de verificación */
.checkbox input[type="checkbox"] {
    transform: scale(1); /* Reduce el tamaño a su valor predeterminado */
    width: 16px; /* Ajustar el ancho */
    height: 16px; /* Ajustar la altura */
}

/* Estilo para el texto de la casilla */
.checkbox label, 
.checkbox label a {
    font-size: 1rem; /* Tamaño de la fuente para que el texto sea más legible */
    line-height: 1.5; /* Mejorar la legibilidad aumentando la altura de la línea */
    color: #C7C7C7;
}

/* Estilo para la información de contacto */
.contact-info {
    margin-top: 30px;
    text-align: center;
    font-size: 1.1rem;
    color: #C7C7C7;
}

.contact-info p {
    margin: 5px 0;
}

.contact-info strong {
    color: white;
}

/* Estilo para la sección del mapa */
.map-section {
    width: 45%;
    height: 600px;
    margin-top: 60px;
    border-radius: 8px;
    overflow: hidden;
}

/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        align-items: center;
    }

    .form-section {
        width: 90%;
        margin-bottom: 30px;
    }

    .map-section {
        width: 90%;
        height: 400px;
    }

    .form-section h1 {
        font-size: 2rem;
    }

    .form-section p {
        font-size: 1rem;
    }
}

/*-----------------------------------------------------------------------Noticias blog-------------------------------------------------------*/

/* Contenedor principal */
.news-container {
    display: flex;
    width: 100%;
    padding: 30px;
    background-color: #0a121b;
    margin-top: 100px;
    justify-content: row;
}

/* Contenedor de contenido (flex) */
.content-wrapper {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 80%;
    margin: 0 auto; /* Esto asegura que el contenedor se centre horizontalmente */
}

/* Sección de artículos */
.articles {
    flex: 3; /* Artículos ocuparán más espacio */
}

/* Artículo principal */
.main-article {
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 40px;
    transition: transform 0.3s ease;
}

.main-article img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

.main-article-title {
    font-size: 2rem;
    margin-top: 15px;
    color: #ffffff;
}

.main-article-excerpt {
    font-size: 1.2rem;
    color: #ffffff;
    margin: 10px 0;
}

/* Grid de artículos */
.news-articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 artículos en fila */
    gap: 20px;
    margin-top: 40px;
}

/* Estilo de cada artículo */
.news-article {
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s ease;
}

.news-article img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.article-title {
    font-size: 1.8rem;
    margin-top: 15px;
    color: #ffffff;
}

.article-excerpt {
    font-size: 1rem;
    color: #ffffff;
    margin: 10px 0;
}



/* Botón cargar más */
.search-button {
    background-color: #C7D301;
    border: none;
    color: #0a121b;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 40px;
    display: block; /* Esto hace que el botón sea un bloque */
    margin-left: auto; /* Centra el botón en el eje horizontal */
    margin-right: auto; /* Centra el botón en el eje horizontal */
}

.search-button:hover {
    background-color: #A2C200;
}


/* Sidebar */
.sidebar {
    flex: 1; /* Sidebar ocupará menos espacio */
    background-color: #1d252f;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Estilos de los widgets del sidebar */
.search-widget, .categories-widget, .recent-posts-widget {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    text-align: left;
}


.search-input {
    width: 100%;
    padding: 20px;
    font-size: 1rem;
    border: 1px solid #C7D301;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    gap: 20px;
}

.search-button {
    margin-top: 20px;
    gap: 10px;
}

/* Títulos de categorías y publicaciones recientes */
.categories-widget h3, .recent-posts-widget h3 {
    text-align: left;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
}

/* Listas de categorías y publicaciones recientes */
.categories-widget ul, .recent-posts-widget ul {
    text-align: left;
    flex-direction: column;
    list-style: none;
    padding: 0;
    gap: 10px;
}

.categories-widget li, .recent-posts-widget li {
    margin: 5px 0;
}

.categories-widget a, .recent-posts-widget a {
    color: #fff;
    text-decoration: none;
}

.categories-widget a:hover, .recent-posts-widget a:hover {
    color: #C7D301;
}

/* Links */
a {
    color: white;
}

/* Hover effect en artículos */
.news-article:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.main-article:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}


/* Estilos para los botones de paginación */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination button {
    padding: 10px 15px;
    background-color: #C7D301;
    border: none;
    color: #0a121b;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
}

.pagination button:hover {
    background-color: #ffffff;
}

.pagination button.disabled {
    background-color: #ddd;
    cursor: not-allowed;
}


.news-article {
    display: none; /* Ocultar todos los artículos por defecto */
}
.news-article.show {
    display: block; /* Mostrar los artículos con la clase 'show' */
}

.page-btn {
    padding: 8px 12px;
    margin: 4px;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

.page-btn.active {
    background-color: #000000;
    color: white;
    font-weight: bold;
}

.page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


/* Responsividad */
@media screen and (max-width: 768px) {
    .content-wrapper {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    }

    .news-articles {
        grid-template-columns: 1fr; /* Artículos en una sola columna */
    }

    .main-article img,
    .news-article img {
        height: 250px; /* Ajustar la altura de las imágenes en pantallas pequeñas */
    }

    .sidebar {
        margin-top: 20px; /* Sidebar debajo de los artículos */
    }
}

/* Estilo personalizado para scrollbar */
::-webkit-scrollbar {
    width: 20px;
    border: 1px solid #888;
}

::-webkit-scrollbar-thumb {
    background-color: #C7D301;
    border: 1px solid #888;
}