/*ACCORDION*/
.mainAccordion
{
    max-width: 100%;
    margin: 0 auto;
}
.accordion-container input
{
display: none;
}
.accordion-container .tabs
{

}
.accordion-container .tab
{
overflow: hidden;
}
.accordion-container .tab-container
{
    max-height: 0;
    padding: 0 1em;
    transition: all 0.25s;
}
.accordion-container input:checked ~ .tab-container
{
   max-height: 100vh;
   padding: 1em;
}
.accordion-container .tab-title
{
    background: #f2f2f2;
    display: flex;
    padding: 1em;
    cursor: pointer;
    justify-content: space-between;
    border-bottom: solid 1px #999;
}
.accordion-container .tab-title::after
{
    content: "+";
    transition: all 0.25s;
    display: grid;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}
.accordion-container input:checked + .tab-title::after
{
/* transform: rotate(90deg); */
content: "-";
font-size: 24px;
  font-weight: bold;
}
/*FINACORDION*/


/*INICIO GENERAL*/

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(22px,1vw,30px); color: var(--colorPrincipal); }
h3{font-size:20px; color: var(--colorPrincipal);  margin-top: 30px;}
.cadaServi__texto--planesWeb > h3 {font-size: 36px; text-align:center; margin-top: 0; margin-bottom: 10px;}

.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;}

p{line-height: 27px; font-size: clamp(17px,3.125vw,17px);}

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




/*:::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*/





/*INICIO INDEX*/

nav{grid-area: Nav; z-index: 0;}
main{grid-area: Main;}
.mapa-de-sitio{grid-area: MapaSitio;}
footer{grid-area: Footer;}

 .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: 84%;}
.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;}



 .wrapper .parent-tab input[type=radio]{display: none;}
 .wrapper .parent-tab h2{font-size: clamp(23px,1.125vw,35px);}
  
 /*FIN INDEX*/

 /*DISEÑO DE PAGINAS WEB*/
 .empresaDeDisenoDePaginasWeb{width: 84%; margin: auto; margin-top: 50px;}
 .empresaDeDisenoDePaginasWeb header {display: grid; grid-column: 1/-1; }
 .empresaDeDisenoDePaginasWeb .cadaServi__img img{border-radius: 10px;}
 

 .beneficiosDisenoDePaginasWeb{background: #0C646D; border-radius: 10px; width: 84%; margin: auto; margin-top: 50px; padding: 30px;}
 .beneficiosDisenoDePaginasWeb header {display: grid; grid-column: 1/-1; grid-column: 2/3; width: 80%;}
 .beneficiosDisenoDePaginasWeb header h2{color: #fff;}
 .beneficiosDisenoDePaginasWeb li{color: #fff;}
 .beneficiosDisenoDePaginasWeb figure{align-items: center; border-radius: 10px; display: grid; grid-row: 1/3; height: 100%;  background: #fff; padding: 10px;}
 .beneficiosDisenoDePaginasWeb .cadaServi {margin-bottom: 10px;}
 .beneficiosDisenoDePaginasWeb .cadaServi__img img{border-radius: 10px;}

 .tuSitioWebTendra{width: 84%; margin: auto; margin-top: 50px;}
 .tuSitioWebTendra .cadaServi{grid-template-rows: repeat(3,max-content);}
 .tuSitioWebTendra header {display: grid; grid-row: 1/2; align-content: end;}
 .tuSitioWebTendra .cadaServi__texto{grid-row: 2/3;display: grid; align-content: start;}
 .tuSitioWebTendra .cadaServi__img--overflow{grid-row: 1/3;}
 
 .tiposDePaginas{width: 84%; margin: auto; margin-top: 50px;}
 .tiposDePaginas .cadaServi{grid-template-columns: 1fr;}
 .tiposDePaginas .cadaServi a{background: none; display: initial; padding: 0; color: var(--colorPrincipal); margin-top: 0; text-decoration: underline;}

 .SEOParaPlanWeb{width: 84%; margin: auto; margin-top: 50px;}
 .SEOParaPlanWeb h3{margin-top: 0;}
 .SEOParaPlanWeb header{grid-column: 1/-1;}
 .SEOParaPlanWeb.cadaServi{grid-template-columns: 1fr; grid-column: 1/-1;}
 .SEOParaPlanWeb .cadaServi a{background: none; display: initial; padding: 0; color: var(--colorPrincipal); margin-top: 0; text-decoration: underline;}
 .SEOParaPlanWeb .cadaServi__texto{grid-column: 1/-1;}

 .etapasParaDisenoWeb{width: 84%; margin: auto; margin-top: 50px;}
 .etapasParaDisenoWeb .cadaServi{grid-template-columns: 1fr;}

 .planesPrecios{width: 84%; margin: auto; margin-top: 50px; position: relative;}
 .planesPrecios .cadaServi{grid-template-columns: repeat(auto-fill,minmax(28%,1fr)); }
 .planesPrecios .cadaServi header{grid-column: 1/-1;} 
 .planesPrecios .cadaServi__texto--planesWeb{background:#F8F8F8; border-radius: 10px; padding: 50px;}
 .planesPrecios .cadaServi__texto--planesWeb p{margin-top: 20px;} 
 .planesPrecios .cadaServi__texto--planesWeb--fondoAmarillo {background:#FDF4D1;} 

 
@media screen and (max-width:800px) {
  .content-modal-hosting, .content-modal-hosting {
      width: 90%;
  }
}
/*:::Fin Ventana Modal mas detalles:::*/







 .preguntasFrecuentes .cadaServi{grid-template-columns: 84%; justify-content: center;}
 .preguntasDisenoWeb{display: grid; grid-template-columns: 100%; width: 84%; margin: auto; grid-column-gap: 64px; margin-bottom: 54px;}

 .actualizacionDePaginasWeb{width: 84%; margin: auto; margin-top: 50px;}
 .actualizacionDePaginasWeb .cadaServi {grid-template-rows: repeat(3,max-content);}
 .actualizacionDePaginasWeb header {display: grid; grid-row: 1/2; margin-bottom: 30px; align-content: end;}
 .actualizacionDePaginasWeb .cadaServi__texto{grid-row: 2/3; align-content: start;}
 .actualizacionDePaginasWeb .cadaServi__img--overflow{grid-row: 1/3;}

 .atraerClientes{background: #FFFBEB; width: 84%; margin: auto; margin-top: 50px; padding: 30px; position: relative; z-index: -1;}
 .atraerClientes .cadaServi {margin-bottom: 10px; grid-template-columns: 100%}
 .atraerClientes header{grid-column: 1/-1;}
 .circuloV{clip-path: circle(50% at 0% 0); border: solid 20px var(--colorPrincipal); height: 200px; width: 200px; right:-100px; position: absolute; top: -24%; z-index: 0;}

 .recomendacionesParaTuPaginasWeb{width: 84%; margin: auto; margin-top: 50px;}
 .recomendacionesParaTuPaginasWeb .cadaServi {grid-template-rows: repeat(3,max-content);}
 .recomendacionesParaTuPaginasWeb header {display: grid; grid-row: 1/2; align-content: end;}
 .recomendacionesParaTuPaginasWeb .cadaServi__texto{grid-row: 2/3; align-content: start;}
 .recomendacionesParaTuPaginasWeb .cadaServi__img--overflow{grid-row: 1/3;}

 
  .cadaServi__texto--planesWeb a{color: var(--colorPrincipal); background: none; display: initial; padding: 0;}
  .cadaServi__texto--planesWeb a:hover{background: none; color: var(--colorPrincipal); transition: none; padding:0;}
 /*FIN DISEÑO DE PAGINAS WEB*/

@media(max-width:1250px)
{
    .serviciosOpti{grid-template-columns: repeat(auto-fit,minmax(min(100%,47%),1fr));}
    .preguntasFrecuentes img{margin-top: 30px; width: 100%;}
    .cadaServi__img--overflow img{align-self: auto; height: auto;}
    .preguntasFrecuentes img{grid-row: 2/3; margin-top: 0; margin-bottom: 30px;}
    .preguntas img{height: auto;}
    .planesPrecios .cadaServi__texto--planesWeb{padding: 25px;}
    .planesPrecios .cadaServi{grid-column-gap: 40px;}
    .planesPrecios .cadaServi header{margin-bottom: 25px;}
    
}
@media(max-width:1098px)
{
    .bannerPpal{display: grid; grid-template-rows: repeat(2,max-content); row-gap: 37px;}
    .bannerPpal__tituloPpal{grid-column: 1/-1; grid-row: 1/2; padding-right: 0;}
    .bannerPpal > header a{display: none;}
    .bannerPpal header p{text-align: justify;}
    .bannerPpal__imgDerecha{grid-column: 1/-1; grid-row: 2/3;}
    .caracteOpti{grid-template-columns: repeat(1,1fr);}
    .cadaServi a{margin-top: 14px;}
    .cadaServi__img{margin-bottom: 20px; grid-row: 2/3;}
    .sectionAgenciaMarketing header{grid-row: 1/2;}
    .bannerPpal__imgDerecha img{position: initial; width: 100%;}
    .empresaDeDisenoDePaginasWeb .cadaServi__img img {margin-top: 20px;}
    .beneficiosDisenoDePaginasWeb .cadaServi{grid-template-columns: 100%; grid-template-rows:repeat(3, max-content) ;}
    .beneficiosDisenoDePaginasWeb header{grid-column: 1/3;}
    .beneficiosDisenoDePaginasWeb figure{grid-row: 2/3; width: 100%;}
    .beneficiosDisenoDePaginasWeb .cadaServi__texto{grid-row: 3/4;margin-top: 25px;}
    .beneficiosDisenoDePaginasWeb .cadaServi__img img{width: 94%; margin: auto;}
    /* .preguntasFrecuentes img{grid-row: 2/3;} */

    .tuSitioWebTendra header{grid-column: 1/3;}
    .tuSitioWebTendra .cadaServi__texto{grid-column: 1/3;}
    .tuSitioWebTendra .cadaServi__img--overflow{grid-column: 1/3;grid-row: 3/4; margin-top: 25px;}

    .planesPrecios .cadaServi{grid-template-columns: 100%; grid-row: 40px;}
    .planesPrecios .cadaServi__texto--planesWeb{margin-bottom: 40px}

    .actualizacionDePaginasWeb header{grid-column: 1/3;}
    .actualizacionDePaginasWeb .cadaServi__texto{grid-column: 1/3;}
    .actualizacionDePaginasWeb .cadaServi__img--overflow{grid-column: 1/3;grid-row: 3/4; margin-top: 25px;}
    
    .cadaServi__img--overflow img{justify-self: center;} 

    .recomendacionesParaTuPaginasWeb header{grid-column: 1/3;}
    .recomendacionesParaTuPaginasWeb .cadaServi__texto{grid-column: 1/3;}
    .recomendacionesParaTuPaginasWeb .cadaServi__img--overflow{grid-column: 1/3;grid-row: 3/4; margin-top: 25px;}
    .empresaDeDisenoDePaginasWeb .cadaServi h2{text-align: left;}
    .SEOParaPlanWeb h3{text-align: left;}
}