/* Estilos generales */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body{
    font-family: 'Lexend', sans-serif;
    width: 100%;
    height: 100%;
    overflow-y: scroll; /* Agrega la barra de desplazamiento vertical */
    overflow-x: hidden; /* Oculta la barra de desplazamiento horizontal */
}

img {
    max-width: 100%;
}

.container{
    max-width: 1200px;
    margin: 0 auto;
}

/* Estilo del botón flotante de WhatsApp */
.whatsapp-button {
    position: fixed;
    bottom: 50px; /* Distancia desde la parte inferior */
    right: 50px; /* Distancia desde la parte derecha */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
}

.whatsapp-button img {
    width: 70px; /* Ajusta el tamaño del icono según tu preferencia */
    height: auto;
    border-radius: 50%; /* Opcional: para hacer el icono redondo */
    background-color: #25D366; /* Color de fondo si el icono tiene un borde */
    padding: 10px; /* Espaciado alrededor del icono */
}

.header {
    display: flex;
    align-items: center;
    background-color: #EFF3F4;
    padding: 110px 0 0 0;
}

.menu {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000; /* Asegura que el menú tenga prioridad */
}

.logo {
    width: 140px;
    height: 50px;
    margin-left: 15px;
    position: relative;
}

.logo .logo-secundario {
    position: absolute;
    top: 0;
    left: 100%;
    opacity: 0;
    transform: translateX(-50%);
    transition: transform 0.5s ease, opacity 0.5s ease;
    margin-left: 20px;
    margin-top: 5px;
}

.logo:hover .logo-secundario {
    opacity: 1;
    transform: translateX(0);
}

.menu .navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
}

.menu .navbar ul li {
    position: relative;
    float: left;
    background-color: #7ebfb4;
    border-radius: 50px; /* Para hacer esquinas redondeadas */
    margin: 10px; /* Espacio entre elementos li */
    transition: transform 0.5s ease;
}

.menu .navbar ul li:hover {
    color: white;
    background-color: #5c9d92; /*color más opaco*/
    border-radius: 50px; /* Para hacer esquinas redondeadas */
    transform: scale(1.1);
}

.menu .navbar ul li a {
    color: white;
    font-size: 18px;
    padding: 15px 20px; /* Ajustar el relleno según sea necesario */
    display: block;
    text-decoration: none; /* Quitar subrayado de los enlaces */
}

#menu {
    display: none;
}

.menu-icono {
    width: 25px;
}

.menu label {
    cursor: pointer;
    display: none;
}

table{
    width: 100%;
}

th, td {
    color: white;
}

/* Submenús */
.menu .navbar ul li .submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #7ebfb4;
    border-radius: 10px;
    padding: 10px 0;
    z-index: 1000; /* Asegura que el submenú aparezca sobre otros elementos */
}

.menu .navbar ul li:hover .submenu {
    display: block;
}

.menu .navbar ul li .submenu li {
    float: none; /* Para evitar el problema de los submenús en horizontal */
    margin: 0 10px 0 10px;
    border-radius: 10px;
}

.menu .navbar ul li .submenu li a {
    padding: 10px 15px;
    color: white; /* Color del texto de los enlaces del submenú */
    background-color: #7ebfb4; /* Color de fondo de los enlaces del submenú */
    text-decoration: none; /* Quitar subrayado de los enlaces del submenú */
    display: block;
}

.menu .navbar ul li .submenu li a:hover {
    background-color: white; /* Color de fondo del enlace en el submenú al pasar el cursor */
    border-radius: 10px; /* Bordes redondeados para los enlaces del submenú */
    color: #7ebfb4;
}

.menu .navbar ul li .submenu li a img {
    width: 100px; /* Ajusta el tamaño de las imágenes según sea necesario */
    height: auto;
    display: inline-block; /* Asegura que la imagen se muestre en línea */
}

/*PANEL*/

.hero {
    background: url('../../img/panelautosen.png') no-repeat center center/cover;
    color: white;
    padding: 130px 0;
    margin-bottom: 100px;
    position: relative;
    text-align: center;
    height: 400px;
}

.hero .overlay {
    padding: 20px;
    color: #4756a0;
}

.hero h1 {
    margin: 0;
    font-size: 2.5em;
    color: #4756a0;
}

.hero nav {
    margin-top: 10px;
}

.hero nav a {
    color: #4756a0;
    text-decoration: none;
    margin: 0 5px;
}

.main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.intro {
    text-align: center;
}

.intro h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.intro p {
    font-size: 1.2em;
    color: #515557;
}

/*PRODUCTO INFO*/

.somos {
    padding: 0 0 120px;
    display: flex;
    justify-content: space-between;
    line-height: 1.5;
    align-items: center;
}

.somos-txt {
    flex: 1;
    max-width: 50%;
    box-sizing: border-box;
}

.somos-txt h2 {
    font-size: 2em;
    color: #3e55a4;
}

.somos-txt p {
    color: #515557;
    word-wrap: break-word;
}

.somos-img {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: center;
}

.somos-img img {
    max-width: 100%;
    height: auto;
    border-radius: 40px;
}

/*codigoinformacion*/

.datos-tecnicos {
    max-width: 800px;
    margin: 0 auto; /* Centrar horizontalmente */
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #fff;
    margin-bottom: 50px;
}
.datos-tecnicos .section-title {
    font-weight: bold;
    margin-top: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}
.datos-tecnicos .data-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.datos-tecnicos .data-container .data-label,
.datos-tecnicos .data-container .data-value {
    width: 48%;
}


/*FOOTER*/

.footer {
    background-color: #152049;
    padding: 100px 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
}

.link h3 {
    color: white;
    font-size: 18px;
    padding-bottom: 15px;
    margin-bottom: 40px;
    border-bottom: 2px solid white;
    max-width: 180px;
}

.about-us img {
    display: block;
    max-width: 150px; /* Ajusta el tamaño según sea necesario */
    margin-bottom: 10px;
}

.about-us p {
    color: #AEAFAF;
    padding-top: 20px;
}

.social-media a {
    color: #AEAFAF;
    font-size: 24px;
    margin-right: 10px;
}

.social-media a:hover {
    color: #5c9d92;
}

.payment-methods img {
    max-width: 100px; /* Ajusta el tamaño según sea necesario */
    margin: 10px 0;
    display: block;
}

body {
    background-image: url('img/fondo.png'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Ajusta la imagen para cubrir toda la pantalla */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen */
}

@media only screen and (max-width: 767px) {

    /*sensores elegir*/
    .datos-tecnicos{
        max-width: 500px;
        width: 500px;
        align-items: center;
        text-align: left;
        padding-left: 80px;
    }

    #containermedia{
        flex-direction: column; /* Menú arriba en pantallas pequeñas */
    }

    .product-item{
        max-width: 100%;
        width: 200px;
    }
    
    .somos-img{
        width: 300px;
        max-width: 300px;
    }

    .product-content{
        justify-content: center;
        max-width: 500px;
    }

    .product-grid{
        justify-content: center;
        width: 500px;
        max-width: 500px;
    }

    /*DDIFERENCIA*/
    .hero{
        max-width: 500%;
        width: 500px;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .overlay{
        width: 500px;
        text-align: center;
        margin-left: 70px;
    }

    h1{
        width: 500px;
    }

    /* Elimina el desbordamiento horizontal en dispositivos móviles */
    body {
        overflow-x: hidden;
    }

    /* Establece un ancho máximo para todos los elementos en pantallas más pequeñas */
    * {
        max-width: 320px;
        box-sizing: border-box; /* Asegura que padding y border no aumenten el ancho total */
    }

    .menu{
        max-width: 500px;
        width: 500px;
        flex-direction: column;
        padding-top: 20px;
    }

    .logo{
        width: 150px;
    }

    .navbar{
        margin-top: 20px;
    }

    .navbar ul{
        flex-direction: row;
        text-align: center;
        justify-content: center;
    }

    .navbar ul li{
        width: 150px;
    }

    .header-content{
        justify-content: center;
        align-items: center;
        max-width: 700px;
        width: 700px;
        padding-top: 120px;
    }


    .header-img{
        max-width: 500px;
        width: 500px;
    }

    section{
        text-align: center;
        justify-content: center;
        width: 500px;
        max-width: 700px;
    }

    .whatsapp-button{
        z-index: 9999;
    }

    #nuestrasmarcas{
        justify-content: center;
        align-items: center;
        padding-left: 200px;
        margin-bottom: -1px;
    }

    .somos{
        align-items: center;
        flex-direction: column; /* Cambia la dirección del flex a columna */
    }

    .somos-img{
        max-height: 100%;
        width: 500px;
        justify-content: center ;
    }

    .somos-txt{
        align-items: center;
        text-align: justify;
        max-width: 70%;
        font-size: 15px;
        line-height: 1.1;

    }

    .footer {
        padding: 30px;
        width: 500px;
        max-width: 700px;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .footer-content .link{
        padding-top: 50px;
        align-items: center;
        text-align: center;
    }

    .footer-content .about-us{
        align-items: center;
        text-align: center;
        line-height: 1;
    }

    .social-media a img, .payment-methods img {
        margin: 10px auto;
    }
}