/*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;}

/*COLUMNAS PHOTOSHOP / CANVA*/
.parrafo100AnchoDosColumnas{width: 84%; margin: auto; margin-bottom: 40px;}
.parrafo100AnchoDosColumnas__titulo{margin-bottom: 10px;}
.parrafo100AnchoDosColumnas__texto p{text-align: justify; margin-bottom: 16px;}
.parrafo100AnchoDosColumnas__texto ul li{margin-left: 20px; margin-bottom: 8px;}

/*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*/
.ctaFinal{display: inline-block; border-radius: 30px; background-color: var(--colorPrincipal); color: #fff; margin-top: 10px; text-decoration: none; padding: 15px 30px; text-align: center;}
.ctaFinal:hover{background-color: var(--colorSecundario); color: #fff; transition: all 0.3s ease;}
/*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%;}
}