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

/*LISTAS (beneficios, pasos, errores)*/
.parrafo100Ancho ul.listaBeneficios,
.parrafo100Ancho ul.listaErrores,
.parrafo100Ancho ol.listaPasos{list-style: none; margin: 10px 0 26px; padding: 0; display: grid; gap: 14px;}
.listaBeneficios li,
.listaErrores li,
.listaPasos li{position: relative; background: #fff; border-radius: 12px; padding: 16px 22px 16px 58px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); text-align: justify; line-height: 26px;}
.listaBeneficios li strong,
.listaErrores li strong,
.listaPasos li strong{color: var(--colorPrincipal);}

.listaBeneficios li{border-left: 4px solid var(--colorPrincipal);}
.listaBeneficios li::before{content:"✓"; position: absolute; left: 18px; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--colorPrincipal); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;}

.listaErrores li{border-left: 4px solid #E4572E;}
.listaErrores li::before{content:"!"; position: absolute; left: 18px; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: #E4572E; color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;}

.listaPasos{counter-reset: paso;}
.listaPasos li{border-left: 4px solid var(--colorSecundario);}
.listaPasos li::before{counter-increment: paso; content: counter(paso); position: absolute; left: 16px; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--colorSecundario); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;}

/*GRID DE APLICACIONES*/
.adobeAppsGrid{width: 84%; margin: auto; margin-bottom: 60px;}
.adobeAppsGrid header{margin-bottom: 30px;}
.appsGrid{display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px;}
.appCard{background: #fff; border-radius: 14px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); padding: 22px; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.appCard:hover{transform: translateY(-6px); box-shadow: 0 15px 30px rgba(0,0,0,0.12);}
.appCard__head{display: flex; align-items: center; gap: 12px; margin-bottom: 12px;}
.appIcon{flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.2px;}
.appCard h3{margin: 0; font-size: 19px;}
.appCard p{text-align: justify; margin-bottom: 12px;}
.appCard a{color: var(--colorPrincipal); font-weight: 600; text-decoration: none;}
.appCard a:hover{color: var(--colorSecundario);}

/*GRID DE AUDIENCIA*/
.adobeAudiencia{width: 84%; margin: auto; margin-bottom: 60px;}
.adobeAudiencia header{margin-bottom: 30px;}
.audienciaGrid{display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 24px;}
.audienciaCard{background: #EAF5F6; border-radius: 14px; padding: 26px;}
.audienciaCard h3{margin-top: 0; margin-bottom: 10px;}
.audienciaCard p{text-align: justify; margin-bottom: 12px;}
.audienciaCard a{color: var(--colorPrincipal); font-weight: 600; text-decoration: none;}
.audienciaCard a:hover{color: var(--colorSecundario);}

/*CONTENIDO RELACIONADO (estilo blog-card)*/
.relatedGrid{display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 32px; margin-top: 10px;}
.relatedCard{position: relative; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 10px 25px rgba(0,0,0,0.08); display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.16,1,0.3,1);}
.relatedCard:hover{transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12);}
.relatedCard__imgWrap{position: relative; height: 220px; overflow: hidden;}
.relatedCard__img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.relatedCard:hover .relatedCard__img{transform: scale(1.08);}
.relatedCard__overlay{position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.3) 100%);}
.relatedCard__badge{position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,0.92); padding: 0.4rem 0.9rem; border-radius: 50px; font-size: 0.75rem; font-weight: 700; color: var(--colorPrincipal); box-shadow: 0 5px 15px rgba(0,0,0,0.08);}
.relatedCard__content{padding: 1.8rem; display: flex; flex-direction: column; flex-grow: 1;}
.relatedCard__title{font-size: 1.3rem; margin-bottom: 0.8rem; color: #111827; font-weight: 700; line-height: 1.3;}
.relatedCard__desc{color: #4b5563; line-height: 1.6; margin-bottom: 1.4rem; font-size: 0.95rem; flex-grow: 1; text-align: justify;}
.relatedCard__button{display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.5rem; background-color: var(--colorPrincipal); color: #fff; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease;}
.relatedCard__button:hover{background-color: var(--colorSecundario); color: #fff;}
.relatedCard__icon{transition: transform 0.3s ease;}
.relatedCard__button:hover .relatedCard__icon{transform: translateX(4px);}

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