html{
        margin:0;
        width: 100dvw;
        }

        body{
        margin: 0;
        width: 100dvw;
        overflow-x: hidden;
        }

        *{
        font-family: Arial;
        }

        .tempcon1 img{
        width: 100%;
        height: auto;
        margin-top: -355px;
        }

        .logomarc{
        overflow: hidden;
        width: 100%;
        float: left;
        height: fit-content;
        display:flex;
        justify-content:center;
        }


        .logomarc img{
        width: auto;
        height: 8dvw;
        margin-top: 28px;
        }

        .inermenudos{
        display: none;
        }
        
        
        .banerSP{
                width: 100%;
                height: 32dvw;
                background-image: url(images/fondo4.jpg);
                background-size: cover;
                position: relative;
                margin-top: -355px;
                z-index: -1;

            }
            
            .banerSP a{
                font-family: Arial, Helvetica, sans-serif;
                text-shadow: 3px 4px black;
                position: absolute;
                color: white;
                font-size: 7dvw;
                position: absolute;
                margin-left: 9%;
                margin-top: 10%;
                width: 30%;
            }


        .dropbtn {
        background-color: #FFF;
        color: #706f6f;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        }

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

        .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        opacity: 0.95;
        border-radius: 6px;
        max-width: 230px;
        width: fit-content;
        }

        .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        }


        .dropdown-content a:hover {
        background-color: #f1f1f1;
        }

        .dropdown:hover .dropdown-content {
        display: block;
        }

        .dropdown:hover .dropbtn {
        background-color: #706f6f;
        color: #fff;
        }


        .dropbtn2 {
        background-color: #FFF;
        color: #706f6f;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        }

        .dropbtn2:hover {
        background-color: #706f6f;
        color: #fff;
        }

        .topnav {
        overflow: hidden;
        width: 100%;
        display:flex;
        justify-content:center;
        height: 418px;
        }
        
        .navigatesmall {
        overflow: hidden;
        background-color: #1c416b;
        margin-top:10px;
        }

        .navigatesmall a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        }

        .navigatesmall a:hover {
        background-color: #ddd;
        color: black;
        }

        .navigatesmall a.active {
        background-color: #04AA6D;
        color: white;
        }

        .navigatesmall .icon {
        display: none;
        }       

        .inermenu{
        height:50px;
        display:flex;
        margin-top:15px;
        margin-bottom: 10px;
        width: fit-content;
        }

        .primerenlace{
        width: 139px;
        overflow-y: hidden;
        overflow-x: hidden;
        }

        .topnav a {
        float: left;
        color: #706f6f;
        text-align: left;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        }

        .topnav a:hover {
        background-color: #fff;
        color: black;
        }
        
        .topbanersmall{
            display: none;
        }

        .segundoMenu{
        display:flex;
        margin-left:20%;
        margin-top:50px;

        }		

        .saltoUno{
        background-color: #c0c7ca;
        width:100%;
        height:auto;
        margin-top: 30px;
        display:flex;

        }

        .saltoUno div{
        float: left;
        }

        .saltoUno img {
        margin-left: 0;
        width: 100%;
        height: auto;

        }

        .secservuno{
        width:50%;
        display:flex;
        justify-content: center;
        margin-top: -78px;
        margin-left:25%;
        }

        .secservuno img{

        height: 20dvw;
        width: auto;
        padding-inline: 11px;
        }


        /** conoce nuestros servicios **/
        .secservdos {
        margin-top: 100px;
        }

        .secservdos h1,h4 {
        margin-left: auto;
        margin-right: auto;
        width: max-content;
        }

        .secservdos h1{
        color: #014175;
        }

        .secservdos h4{
        color: #575759;
        }

        /** conoce nuestros servicios **/

        .secservtres{
        margin-top:77px;
        display:flex;
        justify-content: center;
        }

        .secservtres img{
        height: 240px;
        width: auto;
        padding-inline: 12px;
        }

        .informauno{
        margin-top: 60px;
        margin-left: auto;
        margin-right: auto;
        width: max-content;
        color: #0069ab;
        }

        .imrdruno {
        margin-top:50px;
        }

        /***Nuestro servicio *******/

        .nuestrosservicios {
        width: 100%;
        height: 400px;
        background: url(images/Nuestros_Servicios.png)center/cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 50px;

        }

        /* seccion de calidad*/
        .hero-section {
        position: relative;
        height: 600px;
        background: url('images/cuidemos.jpg') center/cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10%;
        color: white;
        flex-wrap: wrap;

        }

        .logo3 {
        min-width: 300px;
        max-width: 550px;
        flex-wrap: wrap;

        }

        .text-content {
        max-width: 550px;
        text-align: left;
        }

        .text-content h2 {
        font-size: 2em;
        font-weight: bold;
        line-height: 1.2;
        flex-wrap: wrap;

        }

        .text-content span {
        display: block;
        font-size: 0.9em;
        font-weight: bold;
        flex-wrap: wrap;

        }

        .text-content p {
        font-size: 1.5em;
        margin-top: 15px;
        }


        /******************termina CUIDAMOS LA CALIDAD*********/
        /*mision*/
        .mision-vision-valores {
        padding: 50px 20px;
        background-color: #ffffff;
        text-align: center;
        }

        .container {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        }

        .card-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        }

        .mision-vision-valores h2 {
        font-size: 20px;
        color: #403e3e;
        margin-bottom: 20px;
        /* Aumenta la separación */
        }

        .card {
        color: white;
        padding: 30px;
        border-radius: 30px 30px 2px 2px;
        width: 320px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Efecto al pasar el mouse */
        .card:hover {
        transform: scale(1.05);
        box-shadow: 12px 12px 25px rgba(0, 0, 0, 0.4);
        /* Sombra aún más fuerte */
        }



        /* Personalización de colores para cada tarjeta */
        .card-mision {
        background-color: #4478a0;
        /* Azul 1 */
        }

        .card-vision {
        background-color: #1e4d6b;
        /* Azul 2 */
        }

        .card-valores {
        background-color: #103a57;
        /* Azul 3 */
        }

        .mision-vision-valores p, ul {
        font-size: 16px;
        }

        ul {
        list-style-type: none;
        padding: 0;
        }

        ul li {
        margin: 5px 0;
        }


        /*termina mision*/
        /******************clientes***************************/
        .agua2 {
        position: absolute;
        top: 250px;
        width: 100%;
        height: 900px;
        background-position: 100% center;
        z-index: -1;
        }


        .clientes h2 {
        font-size: 1.8em;
        font-weight: bold;
        margin-bottom: 20px;
        }

        .clientes h2 span {
        color: #0073e6;
        }

        .clientes h2 span:nth-child(2) {
        color: #05407f;
        }

        .agua img {
        width: 100%;
        height: auto;
        }

        .clientes {
        text-align: center;
        position: relative;
        display: flex;
        grid-template-columns: repeat(2, 1fr);
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 1240px;
        justify-content: flex-start;
        padding-top: 20px;
        flex-wrap: wrap;
        background: url(images/agua.png);
        background-size: 100% auto;
        background-position: bottom;
        background-repeat: no-repeat;
        }

        .containercliente {
        display: grid;
        width: 80dvw;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
        border-radius: 20px;
        justify-content: center;
        align-items: center;
        }
        .category {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        }
        .category img {
        max-width: 90%;
        margin-bottom: 100px;
        }
        .center {
        grid-column: span 2;
        display: flex;
        justify-content: center;
        }



        /*****************termina clientes***********/

        .contenido {
        max-width: 800px;
        }

        .nuestrosservicios h2 {

        font-size: 30px;
        font-weight: bold;
        color: #FFFFFF;

        }

        .nuestrosservicios p {

        font-size: 28px;
        margin-top: 20px;
        font-weight: bold;
        color: #FFFFFF;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        }		

        .fundada{
        margin-top: 40px;
        width:100%;
        display: grid;
        }

        .logonforma{
        width: 100%;
        height: auto;
        display:inline-flex;
        }

        .logonforma img{
        margin-left: auto;
        margin-right: auto;
        width: auto;
        height: 10dvw;
        }


        /**formato para informacion de las paginas **/
        .informacion1{
        width: 100%;
        margin-top: 100px;
        }

        .informacion1 h1{
        width: fit-content;
        font-size:2.4em;
        color:#1d70b7;
        margin-left: auto;
        margin-right: auto;
        display:block;
        }

        .informacion1 p{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        font-size: 2em;
        }

        .informafico{
        margin-top: 77px;
        display: flex;
        justify-content: center;
        width: 100%;
        }

        .informafico img{
        width:15%;
        height:auto;
        }

        .informback2{
        height: 37dvw;
        width:100%;
        background-image: url(images/background3.png);
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        }

        .informaficores{
        display:none;
        }




        .pieDpagina{
        width:100%;
        height:244px;
        background-color: #433f41;
        color: #ffffff;
        display: flow-root;
        font-size: 140%;
        }

        .pieDatos{
        width:100%;
        height:50%;
        display:flex;
        justify-content:space-around;
        }

        .pieDatos div{
        padding-inline:6%;
        padding-top:6%;
        }

        .pieDatos img{
        height:23px;
        padding-top:2px;
        }

        .pieDatos a{
        position: relative;
        bottom:10%;
        }

        .DrchosRsv{
        height:49%;
        display:grid;
        justify-content:center;
        align-content:flex-end;
        }


        @media only screen and (max-width:1480px){
        .pieDatos div {
        padding-inline: 0%;
        }

        }

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

        .secservuno img {
        height: 25dvw;
        }

        .clientes{
        display: block;
        height: fit-content;
        }
        .containercliente {
        display: flow-root;
        padding: 0;
        }
        .category img {
        max-width: 80dvw;
        margin-bottom: 30px;
        }
        
    
.logo3 {
  margin-left: auto;
  margin-right: auto;
        
        }
        .text-content {
            margin-left: auto;
  margin-right: auto;
  margin-top: -150px;
    text-align: center;
            
        }
        
        }


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


        .text-content {
        max-width: 550px;
        margin-top: -130px;
        text-align: center;
        }
        
        .text-content p {
  font-size: 1.2em;
  margin-top: 15px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
        }
        


        .informaf{
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        }
        
        .bannerL{
            display: inline-block;
        }
        
        .topbaner {display: none;}           /****CAMBIO DE BANNER A UNO RESPONSIVO***/
        
        .topbanersmall{
            display: block;
        }
        
        .topbanersmall img{
            width: 100dvw;
            height: auto;
        }

        .topnav a{
        font-size: 13px;
        }

        .inermenu{display: none}

        .inermenudos{
        display: block;
        width: 100%;
        }

        .secservuno {
        margin-top: -20px;
        display: contents;
        }

        .secservuno img {
        height: 48dvw;
        }

        .secservdos h1, & h4 {
        margin-left: auto;
        margin-right: auto;
        width: 100dvw;
        text-align: center;
        }
        .secservtres img{
        height: 21dvw;
        padding-inline: 5px;
        }

        .informauno {
        margin-top: 40px;
        width: max-content;
        color: #0069ab;
        width: auto;
        text-align: center;
        }

        .informacion1 p {
        text-align: justify;
        }

        .informafico{
        display: none;
        }

        .informback2 {
        height: fit-content;
        }

        .informaficores{
        display:inline;
        }

        .informaficores img {
        width: 25%;
        height: auto;
        display: inline-grid;}

        .informaficores div{
        display: flex;
        justify-content: center;
        }

        .containercliente {
        display: flow-root;
        }
        .category img {
        max-width: 80dvw;
        margin-bottom: 30px;
        }

        .contactosp{
        width: 100%;
        margin-top: 10px;
        display: grid;
        }

        .contactForm{
        width:98%;
        }

        iframe{
        width: 96dvw;
        }

        .pieDatos{
        display:grid;
        }
        .DrchosRsv a{
        font-size: 13px;
        margin-bottom: 6px;
        }

        .hero-section{
        height: 500px;

        }    

        .navigatesmall a:not(:first-child) {display: none;}
        .navigatesmall a.icon {
        float: right;
        display: block;
        }

        .navigatesmall.responsive {position: relative;}
        .navigatesmall.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
        }
        .navigatesmall.responsive a {
        float: none;
        display: block;
        text-align: left;
        color: #fff;
        }
        
        
        .card-wrapper {
            width: 100%;
            align-items: unset;
        }
        
        .mision-vision-valores {
            padding:50px 0px;
        }
        
        .container {
            justify-content: unset}
        
        .card{
            height: 150px;
        }
        
        .card-mision {
        padding: 30px 30px 30px 0px;
        border-radius: 0px 30px 30px 0px;
        width: 80%
        }
        
        .card-mision p{
            width: 34%;
            margin-left: auto;
    margin-right: 20%;
        }
        
        .card-vision{
        padding: 30px 30px 30px 0px;
    border-radius: 30px 0px 0px 30px;
    width: 80%;
    margin-left: auto;
    margin-right: 0px;
        }
        
        .card-vision p{
  font-size: 16px;
  width: 52%;
  margin-right: auto;
  margin-left: 15%;
}
        
        .card-valores{
        padding: 30px 30px 30px 0px;
        border-radius: 0px 30px 30px 0px;
        width: 80%
        }
        
        .card-valores ul{
            font-size: 16px;
  margin-left: auto;
  margin-right: 20%;
        }
        
        
        .containercliente{
            margin-left: auto;
        }
        
        .nuestrosservicios p {
        font-size: 1.2em;
        text-align: justify;
}
        


        }
        /**************************************@480p********************************/
        @media (max-width: 480px) {

        .hero-section{
        padding: 0 0;
        }    
        
        .mision-vision-valores {
        padding: 50px 0px;
        }
        

        .dropbtn2  {
        padding: 9px;
        }

        .containercliente {
        grid-template-columns: 1fr;
        }
        .category img {
        max-width: 80dvw;
        margin-bottom: 20px;
        }

        .informacion1{
        margin-top:50px;
        }

        .informacion1 h1{
        font-size: 2.1em;
        }

        .informacion1 p{
        font-size: 1.2em;
        }

        .informafico{
        display: none;
        }

        .informafico img {
        width: 25%;
        height: auto;
        display: inline-grid;}

        .informback2 {
        height: fit-content;
        }

        .informaficores{
        display:inline;
        }

        .informaficores img {
        width: 25%;
        height: auto;
        display: inline-grid;}

        .informaficores div{
        display: flex;
        justify-content: center;
        }
        
        .DrchosRsv a {
    font-size: 9px;}
        }

/***************************************************para las paginas adicionales**************************************/


            .informacion2{
                margin-top:60px;
                display:flex;
            }
            
            .informacion2 div{
                align-content: center;
                text-align: center;
           
            }
                
            .informacion2a{
                    width: 50%;
                }
            .informacion2a img{
                    width: 50%;
                }
                
                
            .informacion2b{
                    width: 50%;
                }   
            
            
            .informacion2 ul{
                font-size: 30px;
                text-align: left;
                list-style-image: url(images/gotasL.png);
            }
            
            .informacion3{
                height: 35dvw;
                width: 100%;
                margin-top:-43px;
                background-image: url(images/fondo_med2.png);
                background-size: cover;
                text-align: center;
            }
            
            .informacion3 p{
                color: #4b4a49;
                font-size: 33px;
                position: relative;
                top: 111px;
                text-align: left;
                width: 56%;
                margin-left: auto;
                margin-right: auto;
            }
            
            
            
            
            .clientesMED{
                width: 83%;
                height: 50%;
                top:10%;
                display: flex;
                position: relative;
                margin-left: auto;
                margin-right: auto;
            }
            
             .clientesMED div{
                position: absolute;
            }
            
            .cliente1{
                left: 11.5%;
                top: 19%;
            }

            .cliente1 img{
                height: 153px;
            }
            
            .cliente2{
                left: 37%;
                 top: 26%;
            }    
            
            .cliente2 img{
                height: 108px;
            }
            .cliente3{
                left: 63%;
                top: 33%;
            }
            
            .cliente3 img{
                height: 52px;
            }

            .cliente4{
                left: 12%;
                top: 70%;
            }            
            
            .cliente4 img{
                height: 120px;
            }
            
            .cliente5{
                left: 40%;
                top: 77%;
            }   
            
            .cliente5 img{
                height: 83px;
                
            }
            
            .cliente6{
                left: 69%;
                top: 74%;
            }       
            
            .cliente6 img{
                height: 84px;
            }
            
            
            @media (max-width: 1280px){
                
                .informacion2{
                    display: grid;
                }
                
                .informacion2a img{
                    display: none;
                }
                
                .informacion2a{
                    margin-left: auto;
                    margin-right:auto;
                    background-image: url(images/dra_responsivo.png);
                    height: 300px;
                    width: 300px;
                    background-size: 100% auto;
                    background-repeat: no-repeat;
                }
                
                
                .informacion2b{
                    width: 80%;
                    display: grid;
                    margin-left: 18%;
                }
                
                .informacion2b ul{
                    width: 80%;
                   margin-left:auto;
                   margin-right: auto;
                }
                
            }
            
            @media(max-width:1528px){
                .clientesMED{
                    width: 100%;
                }
                
                .informacion3 {
                height: 83dvw;
                width: 100%;
                background-size: auto 100%;
                text-align: center;
                display: block;
                }
                
            }
            
            
            @media(max-width:780px){
                
                .informacion2b{
                    width: 100%;
                    display: grid;
                    margin-left: 5%;
                }
                
                .informacion2b ul{
                    font-size:25px;
                }
                
                .informacion3 p{
                width: 90%;
                text-align: center;
                }
                
                .informacion3 {
                 height: 700px;
                }
                
                .cliente1{
                left: 4.5%;
                top: 14%;
            }

            .cliente1 img{
                height: 58px;
            }
            
            .cliente2{
                left: 33%;
                 top: 17%;
            }    
            
            .cliente2 img{
                height: 39px;
            }
            .cliente3{
                left: 63%;
                top: 18%;
            }
            
            .cliente3 img{
                height: 23px;
            }

            .cliente4{
                left: -3%;
                top: 33%;
            }            
            
            .cliente4 img{
                height: 12dvw;
            }
            
            .cliente5{
                left: 32%;
                top: 36%;
            }   
            
            .cliente5 img{
                height: 10dvw;
                
            }
            
            .cliente6{
                left: 69%;
                top: 34%;
            }       
            
            .cliente6 img{
                height: 10dvw;
            }
            }
            
            @media (max-width:400px){
                
                .banerSP{
                    height: 39dvw;
                }
                
                .informacion2b ul{
                    font-size:15px;
                }
            }