/*INICIO GENERAL*/

:root {
            --colorPrincipal: #3498db;
            --secondary-color: #2980b9;
            --accent-color: #f39c12;
            --text-color: #333;
            --light-bg: #f8f9fa;
            --dark-bg: #2c3e50;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --border-radius: 8px;
        }

body{color: #333; display: grid; font-size: 17px; justify-items: center; gap: 20px;}
/* .logo img{width: 100%;} */
img{max-inline-size:100%;  object-fit: cover;  aspect-ratio: attr(width) / attr(height); width: 100%; height: auto;}
h1{ font-size: clamp(32px,3.125vw,60px); color: var(--colorPrincipal);}
h2, h3{font-size: clamp(30px,3.125vw,45px); color: var(--colorPrincipal); }
h3{font-size:20px; color: var(--colorPrincipal);  margin-top: 30px;}
.h2Centrado{text-align: center;}
.h2--titulo3{font-size: clamp(26px,1.125vw,35px); }
.h2ServiciosOpti--fuente{font-size: clamp(23px,1.125vw,35px);margin-bottom: 20px;}
mark{background:  var(--colorSecundario);}
.activo{color: var(--colorPrincipal); text-decoration: none; font-size: 16px; font-weight: 500; padding: 9px 15px; border-radius: 30px; transition: all 0.3s ease; background:#f2f2f2;}
.blanco{color: #fff;}
/*img{}*/
p{line-height: 27px; font-size: clamp(17px,3.125vw,17px);}

.amarillo{color:var(--colorSecundario);}
.verdePrin{color: var(--colorPrincipal); font-weight: bold;}
/*FIN GENERAL*/

/*INICIO BTN WHATSAPP*/


/*:::Boton-Modal:::*/
.boton-modal{
    padding: 40px;
    background-color: #fff;
}
.boton-modal label{
    padding: 10px 15px;
    background-color: #5488a3;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 300ms ease;
}
.boton-modal label:hover{
    background-color: #185E83;
}
/*:::Fin Boton-Modal:::*/

/*:::Ventana Modal:::*/
#btn-modal{
    display: none;
}
.container-modal{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    background-color: rgba(144, 148, 150, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
#btn-modal:checked ~ .container-modal{
    display: flex;
}
.content-modal{
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
}
.content-modal h2{
    margin-bottom: 15px;
}
.content-modal p{
    padding: 15px 0px;
    /* border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb; */
}
.content-modal .btn-cerrar{
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}
.content-modal .btn-cerrar label{
    padding: 7px 10px;
    background-color: #5488a3;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 300ms ease;
}
.content-modal .btn-cerrar label:hover{
    background-color:#185E83;
}
.cerrar-modal{
    width:100%;
    height: 100vh;
    position: absolute;
    top:0; left: 0;
    z-index: -1;
}
@media screen and (max-width:800px) {
    .content-modal{
        width: 90%;
    }
}
/*:::Fin Ventana Modal:::*/

/*btn Whatsapp*/
.ConteBotonWhatsapp{text-align: center; color: black; padding: 15px; position: fixed; /*left: 0px;*/ right: 0px; bottom: 75px;  z-index: 1; width: 500px;}
.ConteBotonWhatsapp img{width: auto;}
.btnWhatsapp{top: -8px;  position: absolute;  left: 382px;}

.btnWhatsapp img{cursor: pointer;  transition: .3s;}
.btnWhatsapp img:active{transform: rotate(180deg);}
.cotizanosPorWhatsapp{    background: rgba(255, 255, 255, 0.8);
  box-shadow: #ccc 0px 1px 1px 1px;
    border-radius: 9px;
    display: inline-block;
    padding: 6%;
    margin-left: 1%;
   }
/*fin whatsapp*/

/*BtnWhatsapp2*/
.contactenosSegunPreferencia{background: rgb(45, 183, 66); padding: 10px 0px; border-radius: 10px 10px 0 0;}
.contactenosSegunPreferencia::before{content:url(../imagenesOptimizadas/logo-whatsapp.webp); top: 29px; left: 37px; position: absolute; }
.opcionesContWhatsapp::after{content:url(../imagenesOptimizadas/logoWhatsapp-diseno-de-paginas-web.webp); top:0; left: 30px; position: relative; }

.contactenosSegunPreferencia p{width: 260px; margin: auto; margin-left: 70px; padding: 6px 0px!important; text-align: left; color: #fff;}
.opcionesContWhatsapp img{padding-right: 17px;}
.personalWhatsapp{padding: 10px 0px;}
.personalWhatsapp a{color: #333; text-decoration: none; text-align: left; width: 100%;}
.opcionesContWhatsapp{align-items: center; background: #f5f7f9; border-left: 4px solid rgb(45, 183, 66); border-radius: 4px; display: flex; margin: 14px 0px; padding: 10px 20px; }
.opcionesContWhatsapp a{color: #000; text-decoration: none; text-align: left;}
.opcionesContWhatsapp:hover{background-color:#d0d0d085; box-shadow: #ccc 0px 1px 1px 1px;}

  .boton-modal{
  padding: 40px;
  background-color: #fff;
 
}
.boton-modal label{
  padding: 10px 15px;
  background-color: #5488a3;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 300ms ease;
}
.boton-modal label:hover{
  background-color: #185E83;
}
/*:::Fin Boton-Modal:::*/

/*:::Ventana Modal:::*/
#btn-modal{
   display: none; 
  
}
.container-modal{
  width: 100%;
 
  top: 0; left: 0;
  background-color: rgba(144, 148, 150, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
  
}
#btn-modal:checked ~ .container-modal{
  display: block;
    
}
#btn-modal:checked ~ .cotizanosPorWhatsapp{
  display: none;
    
}
#btn-modal:checked ~ .btnWhatsapp{
  display: none;
    
}


.content-modal{
  box-shadow: #ccc 0px 1px 1px 1px;
  display: grid;
  border-radius: 10px;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  position: absolute;
  right: 80px;
  bottom: 112px;
}
.content-modal h2{
  margin-bottom: 15px;
}
.content-modal p{
  padding: 15px 0px;
}
.btn-cerrar{
  display: flex;
  justify-content: center;
  position: absolute;
  right: 50px;
  bottom: 45px;
  align-items: center;
  cursor: pointer;
  width: 67px;
  margin: auto;
  text-align: center;
  background:#00dc00;
  height: 67px;
  border-radius: 50%;
  font-size: 21px;
}
.btn-cerrar label{
   z-index: 1;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 300ms ease;
}
.btn-cerrar label:hover{
  /* background-color:#185E83; */
}
.cerrar-modal{
  width:100%;
  height: 100vh;
  position: absolute;
  top:0; left: 0;
  z-index: -1;
}
#contWA1{display: none;}/*cont btn contactar por whatsapp*/
#contWA2{display: none;}/*cont btn contactar por whatsapp*/
.formularioContactoWhatApp{}
#formularioContactoWhatApp {display:inline-block; vertical-align:top; width:100%;}
#formularioContactoWhatApp input{border: 1px solid #E1E1E1; border-radius:0.3em; box-shadow: 0 1px #fff, 0 1px 4px rgba(0, 0, 0, 0.05) inset; width: 100%;max-width:100%;margin-bottom:1em; padding:0.8em;}
#formularioContactoWhatApp button[type='button']{font-weight:bold; font-size: 14px; color: #fff; background: rgb(45, 183, 66); padding: 10px; width: 97%;}
#formularioContactoWhatApp button[type='button']:hover{background: rgb(45, 183, 66); color: #000; font-weight:bold; transition:all 500ms ease-in-out 0s; cursor: pointer;}

@media (min-width:768px){
    .whatsapp-movil{
      display:none;
     
    }
    
    .whatsapp-web{
      display:inline;
      
    }
  }
  @media (max-width:768px){
    .whatsapp-movil{
      display:inline;
    }
    .whatsapp-web{
      display:none;
    }
    .soporteManliftRepo > img{width: 90%;}
    
  }
  @media(max-width:560px)
  {
    .content-modal {right: auto; width: 300px;}
    .contactenosSegunPreferencia {padding:10px}
    .contactenosSegunPreferencia p{margin-left: 0; width: 100%;}
    .contactenosSegunPreferencia::before{content: none;}
    .opcionesContWhatsapp::after{content: none;}
  }
/*Fin BtnWhatsapp2*/

/*FIN BTN WHATSAPP*/

/*INICIO INDEX*/

nav{grid-area: Nav; z-index: 0;}
main{grid-area: Main;}
.mapa-de-sitio{grid-area: MapaSitio;}
footer{grid-area: Footer;}
/* .grid-glue{display:grid; grid-template-columns: repeat(12,minmax(5px,1fr)); grid-column-gap: 64px; } */
 .contentGlobal
{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, max-content);
    grid-template-areas:" Nav Nav Nav Nav Nav Nav Nav Nav Nav Nav Nav Nav"
                        " BannerPpal BannerPpal BannerPpal BannerPpal BannerPpal BannerPpal BannerPpal BannerPpal BannerPpal BannerPpal BannerPpal BannerPpal"
                        "Main Main Main Main Main Main Main Main Main Main Main Main"
                        "MapaSitio MapaSitio MapaSitio MapaSitio MapaSitio MapaSitio MapaSitio MapaSitio MapaSitio MapaSitio MapaSitio MapaSitio"
                        "Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer";
    max-width: 1800px;                    
}
.ContBannerPpal{display: grid; width: 100%; grid-column: 1/-1; position: relative;}
.verdeTurquesa{border-radius: 50%; width: 350px; height: 350px; right: 1%; position: absolute; top: 50%; background: #68e9f5a1; filter: blur(85px); z-index: -1;}
.bannerPpal{column-gap: 24px; display: grid; grid-area:BannerPpal; grid-column: 1/-1; grid-template-columns: repeat(auto-fill,minmax(48.7%,1fr)); margin:auto; margin-top: 20px; width: 92%;}
.bannerPpal__tituloPpal{ margin: auto; padding-right: 70px;}
.bannerPpal__tituloPpal h1{ margin-bottom: 17px;}
.bannerPpal__imgDerecha{display: grid; align-items: center; justify-items: center; }
.bannerPpal__imgDerecha img{border-radius: 10px 10px 10px 10px; /*position: absolute; right: 8%; width:clamp(42rem,38rem,19rem);*/}
.bannerPpal__imgDerecha--disenoDePaginas{overflow: hidden; z-index: -1;}
.bannerPpal__tituloPpal a{border-radius: 30px; background-color: var(--colorPrincipal); color: #fff; display: inline-block; margin-top: 34px; text-decoration: none; padding: 15px 30px; width: 170px; text-align: center;}
.bannerPpal__tituloPpal a:hover{background-color:var(--colorSecundario); color: #fff; padding: 15px 30px; transition: all 0.3s ease;}
        
.cadaServi{display: grid; grid-template-columns: repeat(auto-fill,minmax(46.539%,1fr)); grid-column-gap: 64px;  margin-bottom: 54px;}
.cadaServi__img{margin: auto; text-align: center;}

  
 /*FIN INDEX*/

    .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 20px;
        }
 
   section {
            background-color: rgb(240, 248, 255);
            border-radius: var(--border-radius);
            padding: 2rem;
            margin: 2rem 0;
            transition: transform 0.3s ease;
        }
        
        section:hover {
            transform: translateY(-5px);
        }
        
        section h2 {
            color: var(--colorPrincipal);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            font-size: 1.8rem;
        }
        
        section h2::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 25px;
            background-color: var(--accent-color);
            margin-right: 15px;
            border-radius: 4px;
        }

         section p {
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }
        
        section ul {
            list-style-type: none;
            margin-bottom: 1.5rem;
        }
        
        section li {
            margin-bottom: 0.7rem;
            padding-left: 30px;
            position: relative;
        }
        
        section li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-color);
            font-weight: bold;
        }
        
        section strong {
            color: var(--secondary-color);
            font-weight: 600;
        }

section p{text-align: justify;}
@media(max-width:1098px)
{
    .bannerPpal__imgDerecha img{position: initial; margin-top: 30px; width: 100%;}
    .cadaServi__img--overflow img{justify-self: center;} 
    .conteNumerosVersionPC{display:none ;}
	.conteNumerosVersionMovil{display: block;}
    .contacto h1{grid-row: 1/2;}
    .datosContacto{grid-row: 2/3;}
    .formulario-contacto{grid-row:3/4;}
    .contacto{grid-template-columns: repeat(auto-fill,minmax(100%,1fr));}
    .formulario-contacto{margin-top: 60px; padding: 0;}
    .bannerPpal__tituloPpal a{display: none; padding-right: 0;}
    .bannerPpal__tituloPpal{padding-right: 0;}
    .anunciosPublicitarios .cadaServi__img{grid-row: 2/3;}
    
}