/*ACCORDION*/
.mainAccordion
{
    max-width: 100%;
    margin: 0 auto;
}
.accordion-container input
{
display: none;
}
.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
{
content: "-";
font-size: 24px;
  font-weight: bold;
}
/*FINACORDION*/

/*INICIO GENERAL*/
body{color: #333; display: grid; font-size: 17px; justify-items: center; gap: 20px;}
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;}
.h2--titulo3{font-size: clamp(26px,1.125vw,35px); text-align: left;}
mark{background: var(--colorSecundario);}
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 LAYOUT*/
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;}
.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;}
.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; text-align: center;}
.bannerPpal__tituloPpal a:hover{background-color:var(--colorSecundario); color: #fff; transition: all 0.3s ease;}
/*FIN LAYOUT*/

/*INICIO CONTENIDO ARTICULO*/
.parrafo100Ancho{width: 84%; margin: auto; margin-bottom: 50px;}
.parrafo100Ancho p{text-align: justify; margin-bottom: 16px;}
.parrafo100Ancho header{margin-bottom: 20px;}
.parrafo100Ancho h3{margin-bottom: 6px;}

/*TABLA COMPARATIVA*/
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Arial', sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;
  margin-top: 20px;
}
.pricing-table thead {background-color: #2c3e50; color: #ffffff;}
.pricing-table th {padding: 15px; text-align: left; font-size: 16px; font-weight: 600;}
.pricing-table td {padding: 15px; text-align: left; font-size: 14px; color: #333333; border-bottom: 1px solid #e0e0e0;}
.pricing-table tbody tr:nth-child(odd) {background-color: #f9f9f9;}
.pricing-table tbody tr:hover {background-color: #f1f1f1; transition: background-color 0.3s ease;}

/*FAQ*/
.preguntasSEO{display: grid; grid-template-columns: 100%; width: 84%; margin: auto; margin-bottom: 54px;}
.preguntasFrecuentes article header{display: grid; grid-column: 1/-1; margin-bottom: 30px;}

/*CTA FINAL*/
.ctaGrupo{display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px;}
.ctaFinal{display: inline-block; border-radius: 30px; background-color: var(--colorPrincipal); color: #fff; text-decoration: none; padding: 15px 30px; text-align: center;}
.ctaFinal:hover{background-color: var(--colorSecundario); color: #fff; transition: all 0.3s ease;}
.ctaFinal--secundario{background-color: #fff; color: var(--colorPrincipal); border: 2px solid var(--colorPrincipal); padding: 13px 28px;}
.ctaFinal--secundario:hover{background-color: var(--colorPrincipal); color: #fff;}
/*FIN CONTENIDO ARTICULO*/

@media(max-width:1100px)
{
    .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__imgDerecha{grid-column: 1/-1; grid-row: 2/3;}
    .bannerPpal__imgDerecha img{position: initial; width: 100%;}
}