@font-face {
  font-family: 'biennale';
  src: url('../fonts/Biennale-regular.otf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'biennale';
  src: url('fonts/Biennale-bold.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
:root{
    --lightPurple: #7a3eb1;
    --purple: #490075;
    --darkPurple:#0c0936;
    --blanco: #f5f5f5;
    --fuccia:#ff1cc1;
    --aguamarina:#05cde7;
    --fuentePrincipal: 'biennal', sans-serif;
    --gradientMorado: linear-gradient(to bottom, var(--purple) 0%, var(--lightPurple) 100%);
}
html{
    box-sizing: border-box;
    font-size: 62.5%;
}
*,:before,:after{
    box-sizing: inherit;
}
body{
    margin: 0;
    font-family: var(--fuentePrincipal);
    color: var(--blanco);
}
a{
    text-decoration: none;
    color: var(--blanco);
}
p{
    font-size: 2.4rem;
}
/* UTILITY CLASSES */
.gradient-texto{
    background: linear-gradient(to right, #f5f5f5, #ff1cc1, #7a3ef1, #05cde7);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-azul{
    background: linear-gradient(to right, #f5f5f5, #05cde7, #f5f5f5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.header-bg{
    background: linear-gradient(to bottom, var(--purple) 0%, var(--lightPurple) 100%);
}
.bold{
    font-weight: bold;
}
/* HERO MOBILE */

.header-home-mobile{
    height: 100vh;    
    background-image: url(../img/hero_mobile_home.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 100;
}
.nav-mobile{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 4.8rem 2rem 3rem 0;
}
.nav-mobile-desplegado{
    padding-top: 0;
}
.nav-mobile img{
    width: 40%;
}
.nav-mobile img:nth-child(2){
    width: 10%;
}
.menu-desplegado{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--purple);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 300ms ease, visibility 300ms ease;
    z-index: 90;  
}
.menu-desplegado.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 9000;
}
.enlaces-menu-desplegado{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    font-weight: 600;
}
.enlaces-menu-desplegado a{
    margin: 1.5rem 0;
}
.menu-asterisco-3d{
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu-asterisco-3d img{
    width: 70%;
}
.header-pc{
    display: none;
}
/* HEADER PC */
@media (min-width: 768px) {
    .header-mobile{
        display: none;
    }
    .header-pc{
        display: block;        
    }
    .header-home-pc{
        height: 100vh;    
        background-image: url(../img/hero_pc_home.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }    
}
.nav-pc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 4rem;
    background: linear-gradient(to bottom, var(--purple) 0%, var(--Purple) 100%);
    background-size: 100% 0%;
    background-repeat: no-repeat;
    transition: background-size 0.4s ease;
}
.nav-pc:hover {
    background-size: 100% 100%;
}
.nav-pc img{
    width: 25%;
}
.nav-pc-enlaces{
    display: flex;
    font-size: 2rem;
    gap: 3rem;
}
.nav-pc-enlaces a:hover{
    color: var(--blanco);
    font-weight: 600;
    background-color: var(--lightPurple);
    padding: .1rem;
    border-radius: .5rem;
}
.nav-pc-servicios{
    background-color: var(--purple);
}
#servicios-desplegado{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; 
    transition: opacity 300ms ease, visibility 300ms ease;
    z-index: 999; 
}
#servicios-desplegado.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.menu-servicios{
    background-color: var(--purple);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding-left: 5rem;
}
.menu-servicios-img{
    width: 50%;
    height: 40rem;
    overflow: hidden;
}
.menu-servicios-img > div img,
.menu-servicios-img img{
    max-width: 50%;
    max-height: 80%;
    object-fit: contain;
    display: block;
}
/* Transiciones y estados para los previews */
.menu-servicios-img {
    position: relative; /* contenedor referente para los previews */
}
.menu-servicios-img > div{
    padding: 2rem;
    position: absolute; /* ocupar todo el contenedor */
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    transition: opacity 260ms ease, transform 260ms ease;
    opacity: 1;
}
.menu-servicios-img > div.preview-hidden{
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98);
}
.menu-servicios-img > div.preview-visible{
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
.img-preview-branding{    
    position: relative;
    background-color: var(--darkPurple);    
    z-index: 10;
    transform: translateX(-101%);    
}
.img-preview-pag-web{
    position: relative;
    background-color: #ff1cc1;
    z-index: 20;
    /* transform: translateX(-50%);  */
    transform: translateX(-101%); 
}
.img-preview-branding a,
.img-preview-pag-web a{
    font-size: 2.4rem;
    text-decoration: underline;
    transition: all .3s ease;
}
.img-preview-branding a:hover,
.img-preview-pag-web a:hover {
background: linear-gradient(to right, #f5f5f5, #ff1cc1, #7a3ef1, #05cde7);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.img-preview-branding p,
.img-preview-pag-web p{
    font-size: 2rem;
    margin: 1rem 0;
}
.img-preview-asterisco{
    position: relative;
    background-color: var(--blanco);
    z-index: 30;
    transform: translateX(-101%);
}
.menu-servicios-enlaces{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 4rem;
    padding: 2rem 0;
}
.menu-servicios-img {
    width: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
} 
.menu-servicios-enlaces div {
    cursor: pointer;
    width: 100%;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}
.menu-servicios-enlaces div::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background-color: var(--blanco);
    transition: width 0.3s ease;
    z-index: 1;
}
.menu-servicios-enlaces div:hover::before {
    width: 100%;
    left: auto;
    right: 0;
}
.menu-servicios-enlaces a {
    font-size: 5rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
    display: block;
    transition: color 0.3s ease;
}
.menu-servicios-enlaces div:hover a {
    color: var(--fuccia);
}
/* HOME SERVICIOS MOBILE */
.home-servicios-mb{
    background: linear-gradient(180deg,rgba(73, 0, 117, 1) 0%, rgba(122, 62, 177, 1) 100%);    
}
.home-servicios-mb-simbolo{
    background-image: url(../img/simbolo_takif_bg.webp);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 2rem;
}
.home-servicios-mb-titulo h1{
    font-size: 2.4rem;
    margin: 0;
    padding: 1.5rem;
    text-align: center;
}
.home-servicios-mb-enlaces{
    padding: 2rem;
}
.home-servicios-mb-enlace p{
    font-size: 4.2rem;
    font-weight: 600;
    margin: 0;
}

.home-servicios-ver-mas{
    display: flex;
    gap: 1rem;
}
.home-servicios-ver-mas p{
    font-size: 2.2rem;
    font-weight: 300;
}
.home-servicios-pc{
    display: none;
}
/*HOME SERVICIOS PC */
@media (min-width: 768px) {
    .home-servicios-mb{
        display: none;
    }
    .home-servicios-pc{
        display: block;
    }
}
.home-servicios-pc{
    background: linear-gradient(180deg,rgba(73, 0, 117, 1) 0%, rgba(122, 62, 177, 1) 100%);
    padding: 4rem 8rem;
}
.home-servicios-pc-simbolo{
    background-image: url(../img/simbolo_takif_bg.webp);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 4rem;
}    
.home-servicios-pc-titulo h2{
    font-size: 3.6rem;
    font-weight: 700;
    width: 50%;
}
.home-servicios-pc-miniaturas-enlaces{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
}
.home-servicios-pc-miniaturas{
    width: 80%;
}
.miniaturas-branding,
.miniaturas-desarrollo,
.miniaturas-publicidad{
    padding: 1rem;
    display: none; /* ocultas por defecto */
    opacity: 0;
    visibility: hidden;
    justify-content: center;
    align-items: start;
    gap: 2rem;
    pointer-events: none;
}

/* Evitar que el contenedor colapse cuando todas están ocultas */
.home-servicios-pc-miniaturas{
    /* min-height: 25rem; */
    min-height: 50rem;
}
.miniatura-alta{
    height: 50rem;
    background-size: cover;
    position: relative;  
}
.miniatura-columna{
    height: 25rem;
    background-size: cover;
}
.miniaturas-flex{
    display: flex;
    flex-direction: column;
    gap: 2rem;    
}
.miniatura-branding-a{
    background-image: url(../img/miniatura_branding_a.png);
}
.miniatura-branding-b{
    background-image: url(../img/miniatura_branding_b.png);
}
.miniatura-branding-c{
    background-image: url(../img/miniatura_branding_b.png);
}
.miniatura-branding-c{
    background-image: url(../img/miniatura_branding_c.png);
}
.miniatura-desarrollo-a{
    background-image: url(../img/miniatura_branding_a.png);
}
.miniatura-desarrollo-b{
    background-image: url(../img/miniatura_branding_b.png);
}
.miniatura-desarrollo-c{
    background-image: url(../img/miniatura_branding_c.png);
}
.miniatura-publicidad-a{
    background-image: url(../img/miniatura_branding_a.png);
}
.miniatura-publicidad-b{
    background-image: url(../img/miniatura_branding_b.png);
}
.miniatura-publicidad-c{
    background-image: url(../img/miniatura_branding_c.png);
}
.miniaturas-branding div,
.miniaturas-desarrollo div,
.miniaturas-publicidad div{
    width: 100%;
}
.miniaturas-branding a,
.miniaturas-desarrollo a,
.miniaturas-publicidad a{
    width: 30%;
    font-size: 1.8rem;
    padding: .5rem;
    border: .2rem solid var(--blanco);
    border-radius: 1rem;
    position: absolute;
    margin: 3rem  100% 0 100%;
    text-align: center;
}
.miniatura-alta p,
.miniatura-columna p{
    background-color: rgba(0, 0, 0, .5);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    opacity: 0;
    transition: opacity .3s ease;
}
.miniatura-alta p:hover,
.miniatura-columna p:hover{
    opacity: 1;
}
.home-servicios-pc-enlaces{
    display: flex;
    flex-direction: column;
}
.home-servicios-pc-enlace{
    display: flex;
    align-items: start;
    gap: 2rem;
}
.home-servicios-pc-enlace img{
    opacity: 0;
    transition: opacity .3s ease;
}
.home-servicios-pc-enlace p{
    font-size: 6rem;
    font-weight: 600;
    margin: 0 0 3rem 0;
}
.miniaturas-branding,
.miniaturas-desarrollo,
.miniaturas-publicidad{
    transition: opacity 200ms ease, visibility 200ms ease;
}
#home-servicios-pc-branding:hover img,
#home-servicios-pc-desarrollo:hover img,
#home-servicios-pc-publicidad:hover img{
    opacity: 1 !important;
}
.miniaturas-visible{
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    z-index: 50 !important;
}
.miniaturas-hidden{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}
.home-servicios-pc-enlace img{
    transition: opacity .2s ease;
}
.creemos-paises{
    transition: background-color 300ms ease, color 300ms ease;
}
.creemos-paises.in-view{
    background: #f5f5f5 !important;
    background-image: none !important;
}
.creemos-paises{
    position: relative;
}
.creemos-paises::before{
    content: '';
    position: absolute;
    inset: 0;
    background: #f5f5f5;
    opacity: var(--creemos-overlay-opacity, 0);
    pointer-events: none;
    transition: opacity 400ms ease;
    z-index: 0;
}
.creemos-paises > *{
    position: relative;
    z-index: 1;
}

/* cambiar color del <p> dentro de .creemos pero preservar el <span> */
.creemos-paises.in-view .creemos p{
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #490075 !important;
    color: #490075 !important;
}
.creemos-paises.in-view .creemos p span{
    /* Restaurar el gradiente para el span (igual que .gradient-texto) */
    background: linear-gradient(to right, #f5f5f5, #ff1cc1, #7a3ef1, #05cde7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.creemos-paises.in-view .paises > div > p{
    color: #490075 !important;
}
.creemos-paises.in-view .paises > div > p span{
    color: #05cde7 !important;
}
.creemos-paises.in-view .paises-grid img{
    opacity: 1 !important;
    transition: opacity 300ms ease;
}
/* CREEMOS Y PAISES */
.creemos-paises{
    background: linear-gradient(to top,#490075, #7A3EB1);
}
.creemos{
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.creemos p,
.paises p{
    font-size: 2.8rem;
}
.creemos p{
    margin: 0;
    padding-top: 1rem;
}
.paises{
    width: 90%;
    margin: 0 auto;
}
.paises span{
    color: var(--fuccia);
}
.paises-grid{
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4rem;
}
.paises-grid img{
    width: 100%;
    margin: 0 auto;
    opacity: 0;
}
.pais-usa{
    background-image: url(../img/bandera_usa_bn.png);
    background-size: cover;
}
.pais-pr{
    background-image: url(../img/bandera_pr_bn.png);
    background-size: cover;
}
.pais-mex{
    background-image: url(../img/bandera_mexico_bn.png);
    background-size: cover;
}
.pais-col{
    background-image: url(../img/bandera_colombia_bn.png);
    background-size: cover;
}
.paises-grid img{
    width: 100%;
    margin: 0 auto;
    opacity: 0;
}
.pais-usa{
    background-image: url(../img/bandera_usa_bn.png);
    background-size: cover;
}
.pais-pr{
    background-image: url(../img/bandera_pr_bn.png);
    background-size: cover;
}
.pais-mex{
    background-image: url(../img/bandera_mexico_bn.png);
    background-size: cover;
}
.pais-col{
    background-image: url(../img/bandera_colombia_bn.png);
    background-size: cover;
}
@media (min-width: 768px) {
    .creemos{
        width: 70%;
    }
    .creemos p{
        font-size: 4.8rem;
    }
    .paises{
        width: 80%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .paises p{
        font-size: 4rem;
    }
    .paises-grid{        
        grid-template-columns: repeat(4, 1fr);        
    }
}
/* LIDER MOBILE */
.lider-mob{
    background-image: url(../img/sarai_banner_mob.webp);
    height: 80rem;
    display: flex;
    flex-direction: column;
}
.lider-mob div{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items:start;
}
.lider-mob div:first-of-type{
    height: 48rem;
}
.lider-mob p{
    font-size: 2rem;
    margin: 1.5rem 0;
}
.lider-mob-sarai{
    padding-bottom: 1rem;
}
.lider-mob-sarai p{
    font-size: 1.8rem;  
    margin: 0;
    background-color: #f5f5f5;
    text-align: left;
}
.lider-pc{
    display: none;
}
/* LIDER PC */
@media (min-width: 768px) {
    .lider-mob{
        display: none;
    }
    .lider-pc{
        display: block;
    }
    .lider-pc{
    height: 80rem;
    background-image: url(../img/sarai_banner_pc.webp);
    background-size: cover;
    display: flex;
    align-items: center;
    }
    .lider-pc div:first-of-type{
        width: 40%;
    }
    .lider-pc-texto{
        width: 50%;
    }
    .lider-pc-texto p{
        font-size: 2.8rem;
        line-height: 1.5;
    }
    .lider-pc-sarai p{    
        display: block;
        margin: 1rem;
    }
}

/* SIGUENOS DE CERCA */
.siguenos{
    background-color: var(--blanco);
    padding: 1rem;
}
.siguenos-texto{
    width: 90%;
    margin: 0 auto;
}
.siguenos-texto h2{
    font-size: 3.2rem;
    text-align: center;
    margin-top: 0;
}
.siguenos-texto p{
    font-size: 1.8rem;
    color: var(--purple);
    text-align: center;
}
.siguenos-slider{
    display: flex;
    gap: 2rem;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    padding-bottom: 2rem;
}
.siguenos-slider::-webkit-scrollbar{
    height: .8rem;
}
.siguenos-slider::-webkit-scrollbar-thumb{
    background: var(--fuccia);
    border-radius: .5rem;
}
@media (min-width: 768px) {
    .siguenos-slider{
        width: 80%;
        margin: 0 auto;
        align-items: center;
        padding-bottom: 2rem;
    }
}
/* FAQ */
.faq{
    background-color: var(--purple);
}
.faq-contenedor{
    width: 90%;
    margin: 0 auto;
}
.faq-titulo{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.faq-titulo h2{
    font-size: 6.4rem;
    margin: 0;
}
.faq-titulo p{
    font-size: 2.4rem;    
}
summary{
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    width: 100%;
    list-style: none;
    font-size: 2rem;
}
summary img{
    transition: transform 240ms ease;
    transform-origin: center center;
    display: block;
}
details{
    padding: 1.5rem 0rem;
}
details p{
    font-size: 1.6rem;
    line-height: 1.3;
    margin: 1rem 0;
}
details[open] summary img{
    transform: rotate(45deg);
}
@media (min-width: 768px) {
    .faq{
        padding: 2rem 0;
    }
    .faq-contenedor{        
        display: flex;
        justify-content: space-around;
        gap: 3rem;
    }
    .faq-titulo{
        align-items: start;
        width: 100%;
    }
    .faq-titulo h2{
        font-size: 9.6rem;
    }
    .faq-titulo p{
        font-size: 3.2rem;
    }
    .faq-preguntas{
        width: 100%;
    }
    summary{
        font-size: 2.4rem;
    }
    details p{
        font-size: 2rem;
    }
}
/* fOOTER */
.footer-bg{
    background-color: var(--darkPurple);
    display: flex;
    flex-direction: column;
}
.footer-form-bg{
    width: 100%;
    background-image: url(../img/simbolo_takif_footer-mb.png);
    background-size: cover;
}
@media (min-width: 768px) {
    .footer-bg{
        flex-direction: row;
    }
    .footer-form-bg{
        background-image: url(../img/simbolo_takif_footer-pc.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .footer-form-bg form{
        width: 80%;
    }
}
form{
    width: 90%;
    margin: 0 auto;
}
form p{
    font-size: 1.6rem;
    margin-bottom: 3rem;
}
legend{
    font-size: 3.6rem;
    font-weight: 700;
    margin: 5rem 0 3rem 0;
}
.services-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}
.service-btn{
    position: relative;
}
.service-btn input{
    display: none; /* ocultamos el checkbox real */
}
.service-btn span{
    display: inline-block;
    padding: 10px 18px;
    border: 0.5px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.8rem;
    transition: all 0.3s ease;
    background: transparent;
}
.service-btn input:checked + span{
    background: var(--fuccia);
    color: var(--blanco);
    border-color: var(--blanco);
}
.campo-form input,
.campo-form textarea{
    width: 100%;
    font-size: 1.8rem;
    border: none;
    border-bottom: 1.5px solid var(--blanco);
    background-color: transparent;
    display: block;
    margin: 30px 0;
    color: var(--blanco);
}
.campo-form input::placeholder,
.campo-form textarea::placeholder{
    color: var(--blanco);
}
.campo-form textarea{
    height: 8rem;
}
button{
    margin-bottom: 6rem;
}
.boton_footer button,
.plan-boton{
    background: linear-gradient(to top,#490075, #7A3EB1);
    color: var(--blanco);
    border: none;
    border-radius: 5rem;
    padding: 1rem 3.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease;
}
.plan-boton:hover{
    background: linear-gradient(to top,#7a3eb1,#fd45cb);
}
.footer-navegar{
    width: 90%;
    margin: 0 auto;
}
.footer-navegar h3{
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--lightPurple);
}
.footer-navegar-contenedor{
    display: flex;    
}
.footer-navegar-enlaces{
    display: flex;
    flex-direction: column;
    margin: 0 4rem 2rem 0;
}
.footer-navegar-enlaces a{
    font-size: 1.8rem;
    font-weight: 375;
    color: var(--lightPurple);
    text-decoration: underline;
    padding: 0.8rem;
}
.footer-redes{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;        
}
.footer-redes a{
    font-size: 1.8rem;
    color: var(--lightPurple);
    margin: 1rem;
}
.footer-redes p{
    margin-bottom: 5rem;
}
.footer-redes-iconos{
    margin: 1.5rem;
}
.footer-redes-iconos a{
    display: inline-block;
    width: max-content;
}
.footer-redes-iconos img{
    width: 100%;
}
.footer-politicas{
    margin-top: 3rem;
}
.footer-politicas a,
.footer-redes p{
    font-size: 1.5rem;
    color: var(--blanco);    
}
@media (min-width: 768px) {
    form p{
        font-size: 1.8rem;
    }
    legend{
        font-size: 4.8rem;
    }
    .footer-navegar{
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .footer-navegar h3{
        margin: 5rem 0 0 0;
    }
    .footer-navegar-enlaces:first-of-type{
        margin-right: 14rem;
    }
    .footer-navegar-enlaces a{
        padding-bottom: 2rem;
        transition: all 0.3s ease;
    }
    .footer-navegar-enlaces a:hover{
        color: var(--fuccia);
        font-size: 2rem;
    }
    .footer-redes{
        align-items: start;
        justify-content: space-between;
    }
    .footer-politicas p{
        margin: 0;
    }
    .footer-politicas{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}
                                    /* BRANDING  */

.banner-servicios{
    background:linear-gradient(to bottom, var(--lightPurple) 0%, var(--purple) 100%);
}
.banner-servicios-titulo h1{
    font-size: 4.5rem;
    font-weight: 600;
    margin: 0;
    padding: 2rem;
    color: var(--purple)
}
.banner-servicios-titulo h1 span:nth-of-type(2) {
    margin-left: 2rem;
    }
.banner-servicios-subtitulo{
    width: 70%;
    margin-left: 10rem;
}
.banner-servicios-subtitulo h2{
    font-size: 1.8rem;
    color: var(--purple);
    margin: 0;
}
.banner-servicios-img{
    width: 90%;
    margin: 0 auto;    
}
.banner-servicios-img p{
    font-size: 1.6rem;
    text-align: center;
    margin: 0;
    padding-bottom: 2rem;
}
.banner-servicios-img img{
    width: 40%;
}
@media (min-width: 768px) {
    .banner-servicios-flex{
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: end;
    }
    .banner-servicios-titulo{
        width: 100%;
        margin: 0;
    }
    .banner-servicios-titulo h1{
        font-size: 8.5rem;
    }    
    .banner-servicios-titulo h1 span{
        display: block;
    }
    .banner-servicios-titulo h1 span:nth-of-type(2) {
    margin-left: 8rem;
    } 
    .banner-servicios-subtitulo{
        margin-right:5rem;
        position: absolute;
        right: 0;
        width: 40%;
    }
    .banner-servicios-subtitulo h2{
        font-size: 3.2rem;
    }
    .banner-servicios-img{
        padding: 2rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-items: center;
    }
    .banner-servicios-img img{
        grid-column: 2/3;
        /* justify-self: end; */
    }
    .banner-servicios-img{
        width: 80%;
        margin: 0 auto;    
    }
    .banner-servicios-img p{
        grid-row: 1/2;
        font-size: 2.4rem;
        text-align: left;        
    }    
}
    /* Sequential gradient for banner titles (CSS-only, per-segment keyframes) */
    /* Each segment uses a pseudo ::after overlay with the same text (from data-text) positioned exactly over the original. */
    .title-seg,
    .title-sub{
        position: relative;
        display: inline-block;
        color: var(--purple);
    }
    .title-sub{ /* subtitle should behave as block-level to match h2 layout */
        display: block;
    }
    .title-seg::after,
    .title-sub::after{
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        white-space: pre-wrap; /* allow wrapping for subtitle */
        background: linear-gradient(to right, #f5f5f5, #ff1cc1, #7a3ef1, #05cde7);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        pointer-events: none;
        opacity: 0;
        font: inherit; /* ensure same font-size/weight */
        line-height: inherit;
    }

    /* Cycle duration */
    :root{ --banner-cycle: 4s; }

    /* First segment: visible from 0s to 7s (0% - 87.5%) */
    .seg1::after{
        animation: seg1Anim var(--banner-cycle) linear infinite;
    }
    @keyframes seg1Anim{ 0%{opacity:1;} 87.5%{opacity:1;} 100%{opacity:0;} }

    /* Second segment: visible from 2s to 7s (25% - 87.5%) */
    .seg2::after{
        animation: seg2Anim var(--banner-cycle) linear infinite;
    }
    @keyframes seg2Anim{ 0%{opacity:0;} 24.99%{opacity:0;} 25%{opacity:1;} 87.5%{opacity:1;} 100%{opacity:0;} }

    /* Third segment: visible from 4s to 7s (50% - 87.5%) */
    .seg3::after{
        animation: seg3Anim var(--banner-cycle) linear infinite;
    }
    @keyframes seg3Anim{ 0%{opacity:0;} 49.99%{opacity:0;} 50%{opacity:1;} 87.5%{opacity:1;} 100%{opacity:0;} }

    /* Subtitle: visible from 6s to 7s (75% - 87.5%) */
    .seg4::after{
        display: block; /* subtitle is block-level overlay */
        animation: seg4Anim var(--banner-cycle) linear infinite;
    }
    @keyframes seg4Anim{ 0%{opacity:0;} 74.99%{opacity:0;} 75%{opacity:1;} 87.5%{opacity:1;} 100%{opacity:0;} }

    /* Ensure overlays align and do not shift layout */
    /* .title-seg, .title-sub{ padding: 0; margin: 0; } */

/* IMPACTO MEDIBLE */
.impacto{
    background-color: var(--purple);
}
.impacto-grid{
    width: 90%;
    margin:0 auto ;    
}
.impacto-grid p{
    font-size: 1.6rem;
}
.impacto-titulo{
    width: 70%;
}
.impacto-titulo h2{
    font-size: 3.2rem;
    margin:0 0 1rem 0;
}
.impacto-numeros{
    width: 70%;
    margin: 3rem 0 1.5rem 8rem;
}
.impacto-barra-progreso{
    height: 1.3rem ;
    background-color: var(--blanco);
    border-radius: .5rem;
    margin-bottom: 2rem;
}
.impacto-cifra{
    display: flex;
    align-items: center;
    gap: 2rem;
}
.impacto-cifra p:first-of-type{
    font-size: 4.8rem;
    font-weight: 600;    
} 
.impacto-cifra p{
    margin: 0;
}
.impacto-barra-progreso{
    position: relative;
    overflow: hidden;
    background-color: var(--blanco);
}
.impacto-barra-progreso::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #f5f5f5, #ff1cc1, #7a3ef1, #05cde7);
    transition: width 1.2s ease-in-out;
    z-index: 0;
}
.impacto-barra-progreso.in-view::before{
    width: var(--fill, 100%);
}

.impacto-barra-progreso.fill-90{ --fill: 90%; }
.impacto-barra-progreso.fill-23{ --fill: 23%; }
.impacto-barra-progreso.fill-76{ --fill: 76%; }
.cifra-texto{
    margin: 0 0 2rem 8rem;
}
p.cifra-texto:last-of-type{
    margin-bottom: 0  ;
}
.impacto-grid-visible-pc{
    display: none;
}
@media (min-width: 768px) {
    .impacto-grid{
        display: grid;
        grid-template-columns: 1fr 1.5fr 1fr;
        column-gap: 3rem;
        justify-items: center;
        padding: 5rem 0;
    }
    .impacto-grid-invisible-pc{
        display: none;
    }.impacto-grid-visible-pc{
        display: block;
    }    
    .impacto-titulo h2{
        font-size: 4.8rem;    
    }
    .impacto-grid p{
        font-size: 2rem;
    }
    .impacto-numeros{
        margin: 0;
    }
    .impacto-barra-progreso{
        height: 2rem;        
    }
    .impacto-numeros-height{
        height: 17rem;
    }
    .impacto-cifra p:first-of-type{
        font-size: 7.5Arem;   
}
    .impacto-grid-76{
        grid-column: 2/3;
    }    
    .cifra-texto{
        margin: 0;
    }
}
/* COMO LO HACEMOS */
.como-hacemos{
    background-color: var(--purple);
}
.como-hacemos-flex{
    width: 90%;
    margin: 0 auto ;
    padding: 2rem 0;
}
.como-hacemos-flex h3{
    font-weight: 400;
    font-size: 2rem;
    margin: 0;
}
.como-hacemos-azul{
    background-color:var(--darkPurple);
    padding: 2rem;
    margin-top: 2rem;
}
.como-hacemos-numero{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.como-hacemos-cifra{
    font-size: 6.4rem;
    font-weight: bold;
    margin: 0;
}
.como-hacemos-subtitulo{
    font-weight: bold;
}
.como-hacemos-texto p{
    font-size: 1.6rem;
}
@media (min-width: 768px) {
    .como-hacemos{
        height: 55rem;
        display: flex;
    }
    .como-hacemos-flex{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        gap: 2rem;
    }
    .como-hacemos-flex h3{
        font-size: 3rem;
        width: 25%;
    }
    .como-hacemos-azul{
        width: 20%;
        height: 35rem;
        position: relative;
        overflow: hidden;
        transition: height 400ms ease;
    }
    .como-hacemos-numero{
        background-color: var(--darkPurple);
        flex-direction: column;
        align-items: start;
        height: 25rem;
        position: absolute;
        z-index: 10;
        transition: transform 400ms ease;
    }
    .como-hacemos-cifra{
        font-size: 9.5rem;
    }
    .como-hacemos-texto{
        position: absolute;
        bottom: 20%;
        opacity: 0;
        transition: opacity 1s ease;
    }
    .como-hacemos-texto p{
        margin: 0;
        font-size: 2rem;
        padding-right: 2rem;        
    }
    .como-hacemos-subtitulo{
        font-size: 3rem;
    }    
    .como-hacemos-azul:hover{
        height: 50rem;
    }    
    .como-hacemos-azul:hover .como-hacemos-texto{
        opacity: 1;
        bottom: 6%;
    }
}
/* ¿POR QUE ES IMPORTANTE EL BRANDING? */
.importancia-mobile{
    background-color: var(--darkPurple);
    padding: 2rem 0;
}
.importancia-contenedor{
    width: 90%;
    margin: 0 auto;
}
.importancia-contenedor h2{
    font-size: 3.2rem;
    margin: 0 0 2rem 0;
    width: 50%;
}
.importancia-celda{
    margin-bottom: 1rem;
}
.importancia-celda img{
    width: 100%;
}
.importancia-flex{
    display: flex;
    gap: 1rem;
}
.importancia-pc{
    display: none;
}
@media (min-width: 768px) {
    .importancia-mobile{
        display: none;
    }
    .importancia-pc{
        display: block;
        background-color: var(--darkPurple);
    }
    .importancia-grid{
        width: 90%;
        margin: 0 auto;
        padding: 3rem 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }
    .importancia-grid h2{
        font-size: 5.5rem;
    }
    .importancia-img{
        background-size: cover;
        border-radius: 3.4rem;        
        box-shadow: inset 0 0 0 .8rem var(--darkPurple); 
    }    
    .importancia-img img{
        width: 100%;
        object-fit: cover;        
        transition: opacity .3s ease;
    }
    .importancia-img img:hover{
        opacity: 0;;
    }
    .importancia-celda-pc-b{
        grid-column: 3/4;
        grid-row: 1/3;
    }
    .importancia-celda-pc-a{
        background-image: url(../img/branding_bl_a.webp);        
    }
    .importancia-celda-pc-b{
        background-image: url(../img/branding_bl_b.webp);
    }
    .importancia-celda-pc-c{
        background-image: url(../img/branding_bl_c.webp);
    }
    .importancia-celda-pc-d{
        background-image: url(../img/branding_bl_d.webp);
    }    
}
/* PROYECTOS BRANDING */
.proyectos-branding{
    background-color: var(--darkPurple);
}
.proyectos-branding-contenedor{
    width: 90%;
    margin: 0 auto;
    padding: 2rem 0;
}
.proyectos-branding-titulo,
.proyecto-branding-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.proyectos-branding-titulo h2{
    width: 50%;
    font-size: 3.2rem;
}
.proyectos-branding-grid{
    display: flex;
    gap: 2rem;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    padding: 2rem 0;
}
.proyectos-branding-grid div{
    scroll-snap-align: center;
}
.proyectos-branding-grid::-webkit-scrollbar{
    height: .8rem;
}
.proyectos-branding-grid::-webkit-scrollbar-thumb{
    background: var(--fuccia);
    border-radius: 1rem;
}
.proyectos-branding-titulo a{
    color: var(--lightPurple);
    font-size: 2rem;
    text-decoration: underline;
}
.proyecto-branding-preview{
    background-color: var(--blanco);
    height: 28rem;
    border-radius: 2rem;
    min-width: 90vw;
}
.proyecto-branding-info a{
    font-size: 2rem;
    font-weight: bold;
    text-decoration: underline;
    margin: 1rem 0
}
.proyecto-branding-info p{
    font-size: 1.6rem;
}
@media (min-width: 768px) {
    .proyectos-branding-titulo{
        width: 90%;
        margin: 0 auto;
    }
    .proyectos-branding-titulo h2{
    
    font-size: 5.5rem;
}
    .proyectos-branding-grid{
        width: 90%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .proyecto-branding-preview{
        min-width: auto;
        height: 35rem;
    }
}
/* PLANES BRANDING */
.planes-bg{
    background: radial-gradient(circle,rgba(253, 69, 203, 1) 0%, rgba(163, 35, 160, 1) 50%, rgba(73, 0, 117, 1) 100%);
    padding: 2rem 0;
}
.planes-titulo{
    width: 90%;
    margin: 0 auto;
}
.planes-titulo h2{
    font-size: 3.2rem;
    margin: 0;
    text-align: center;
}
.planes-titulo p{
    font-size: 1.6rem;
    text-align: center;
}
.plan-bg-claro{
    border-radius: 1.5rem;
    background-color: var(--purple);
    width: 90%;
    margin: 2rem auto 1rem auto;
    padding: 1rem;
}
.plan{
    background:linear-gradient(to bottom, var(--purple) 0%, var(--darkPurple) 100%);
    border: .1rem solid var(--blanco);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: background .3s ease;
}
.plan:hover{
    background: var(--darkPurple);
}
.plan h3{
    font-size: 2rem;
}
.plan h4{
    font-size: 1.6rem;
}
.plan-parrafo{
    font-size: 1.6rem;
}
.plan-precio{
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0;
}
.plan-precio-subtitulo{
    font-size: 1.6rem;
    text-align: center;
    margin-top: 0;
}
.plan-boton{
    font-size: 2rem;
    text-align: center;
    display: block;
}
.planes-features{
    margin-top: 3rem;
}
.plan-feature{
    display: flex;
    gap: 1rem;
    align-items: start;
}
.plan-feature p{
    margin: 0 0 2rem 0;
    font-size: 1.6rem;
}
.plus-marca{
    font-size: 2rem;
    text-align: center;
}
.plus-contenedor{
    padding: 2rem;
    border: .1rem solid var(--blanco);
    background-color: var(--lightPurple);
    border-radius: 1.5rem;  
}
.plus-info-flex{
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.plus-info-contenido{
    border-bottom: .1rem solid var(--blanco);
}
.plus-info-flex:nth-of-type(2) .plus-info-contenido {
  border-bottom: none;
}
.plus-descripcion_margin{
    margin-bottom: 0;
}
.plus-check{
    border: .2rem solid var(--blanco);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}
.plus-titulo{
    display: flex;
    justify-content: space-between;
}
.plus-titulo h4,
.plus-titulo p{
    font-size: 1.6rem;
    margin: 0;
    font-weight: bold;
}
.plus-descripcion{
    font-size: 1.6rem;
}
@media (min-width: 768px) {
    .plan-bg-claro{
        height: fit-content;
    }
    .planes-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        width: 90%;
        margin: 0 auto;
    }
    .planes-titulo h2{
        font-size: 5.5rem;
    }
    .planes-titulo p{
        font-size: 2.2rem;
    }
    .plan h3{
        font-size: 2.4rem;
    }
    .plan h4{
        font-size: 2rem;
    }
    .plan-parrafo{
    font-size: 1.8rem;
    line-height: 1.5;
}
    .plan-precio{
        font-size: 4.8rem;
    }
    .plan-boton{
        font-size: 2.4rem;
    }
    .plan-feature p{
        font-size: 2rem;
    }
    .plus-marca{
        font-size: 2.8rem;
    }
    .plus-titulo h4{
        font-size: 2rem;
    }    
}
                                                        /* PAGINA WEB */
/* IMPORTANCIA PAGINA WEB */
.web-celda-pc-a{
    background-image: url(../img/web_bl_a.webp);
} 
.web-celda-pc-b{
    background-image: url(../img/web_bl_b.webp);
} 
.web-celda-pc-c{
    background-image: url(../img/web_bl_c.webp);
} 
.web-celda-pc-d{
    background-image: url(../img/web_bl_d.webp);
}
.web-celda-pc-b{
    grid-column: 3/4;
    grid-row: 1/3;
}
.plan ul li{
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.bold-fuccia{
    font-weight: bold;
    color: #ff1cc1;
}
                                                /* GOOGLE ADS */
.google-ads{
    background-color: var(--purple);
}
.google-ads-contenedor{
    width: 90%;
    margin: 0 auto;
}
.google-ads-contenedor h2,
.google-ads-contenedor p{
    margin: 0;
    text-align: center;
}
.google-ads-contenedor h2{
    font-size: 4.8rem;
    padding: 2rem 0;
}
.google-ads-contenedor p{
    font-size: 1.6rem;
}
.gads-celda-pc-a{
    background-image: url(../img/gads_bl_a.webp);
}
.gads-celda-pc-b{
    background-image: url(../img/gads_bl_b.webp);
}
.gads-celda-pc-c{
    background-image: url(../img/gads_bl_c.webp);
}
.gads-celda-pc-d{
    background-image: url(../img/gads_bl_d.webp);
}
.gads-celda-pc-b{
    grid-column: 3/4;
    grid-row: 1/3;
}
.plan-gads h3,
.plan-gads p{
    text-align: center;
}
.plan-gads .plan-precio{
    margin: 2rem 0;
}
.plan-bg-gads{
    grid-column: 2/3;
}
@media (min-width: 768px) {
    .google-ads-contenedor p{
        font-size: 2rem;
    }
}
/* SOCIAL MEDIA ADS */
.social-media-ads-bg{
    background-color: var(--darkPurple);
}
.social-media-ads-titulo{
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.social-media-ads-titulo h2{
    font-size: 4.8rem;
    margin: 0;
    padding: 2rem 0;
}
.social-media-ads-titulo p{
    font-size: 1.6rem;
    margin: 0;
    padding: 2rem 0;
}
h2.social-media{
    width: 100%;
}
p.social-media{
    font-size: 1.6rem;
}
@media (min-width: 768px) {
    h2.social-media{
        font-size: 5rem;
        margin: 0;
    }
    .social-media-ads-titulo p{
        font-size: 2rem;
    }
    .social-media-invierte{
        font-size: 2rem;
    }
    .social-celda-pc-a{
        background-image: url(../img/social_bl_a.webp);
    }
    .social-celda-pc-b{
        background-image: url(../img/social_bl_b.webp);
    }
    .social-celda-pc-c{
        background-image: url(../img/social_bl_c.webp);
    }
    .social-celda-pc-d{
        background-image: url(../img/social_bl_d.webp);
    }
    .social-celda-pc-b{
        grid-column: 3/4;
        grid-row: 1/3;
    }
    .tiktok-celda-pc-a{
        background-image: url(../img/tiktok_bl_a.webp)
    }
    .tiktok-celda-pc-b{
        background-image: url(../img/tiktok_bl_b.webp)
    }
    .tiktok-celda-pc-c{
        background-image: url(../img/tiktok_bl_c.webp)
    }
    .tiktok-celda-pc-d{
        background-image: url(../img/tiktok_bl_d.webp)
    }
    .tiktok-celda-pc-b{
        grid-column: 3/4;
        grid-row: 1/3;
    }
}
/* SABIAS QUE */
.sabias-que-bg{
    background-color: var(--purple);
}
.sabias-que-contenedor{
    width: 90%;
    margin: 0 auto;
    padding: 2rem 0;
}
.sabias-que-blanco h3{
    font-size: 3.2rem;
    margin: 0;
}
.sabias-que-gradient h3{
    font-size: 4rem;
    text-align: right;
}
.sabias-que-gradient p{
    font-size: 1.6rem;
    text-align: right;
}
@media (min-width: 768px) {
    .sabias-que-blanco{
        width: 50%;
    }
    .sabias-que-blanco h3{
        font-size: 5.5rem;
        margin: 0;
    }
    .sabias-que-gradient{
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: end;
    }
    .sabias-que-gradient h3{
        font-size: 5.5rem;
        width: 50%;
        margin: 0;
    }
    .sabias-que-gradient p{
        font-size: 2rem;
        width: 50%;
    }
}
/* FAQ GOOGLE ADS Y REDES SOCIALES */
.faq-titulo-gads h2{
    font-size: 6.4rem;
    margin: 0 0 0 8rem;
    padding-top: 2rem;
}
.faq-preguntas h3{
    font-size: 2rem;
    color: var(--lightPurple);
}
@media (min-width: 768px) {
    .faq-titulo-gads{
        width: 50%;
    }
    .faq-titulo-gads h2{
        font-size: 9.6rem;
    }
    .faq-preguntas h3{
        font-size: 3.2rem;
    }
}
                                        /* SMART PACKS */
/* PLANES SMART PACKS */
.img-smartpacks{
    position: relative;
    left: 40% ;
}
.planes-smartpack-contenedor{
    width: 90%;
    margin: 0 auto;
}
.planes-smartpacks-grid{
    display:flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}
.plan-smartpack-grid-a,
.plan-smartpack-grid-b{
    background-color: var(--darkPurple);
    border-radius: 3.5rem;
    padding: 2rem 3rem;
}
.plan-smartpack-grid-a h3,
.plan-smartpack-grid-b h3{
    font-size: 4rem;
    text-align: center;
    margin: 0;
}
.plan-smartpack-grid-a p,
.plan-smartpack-grid-b p{
    font-size: 1.6rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .planes-smartpack-contenedor{
        display: flex;
        justify-content: center;
        gap: 3rem;
        height: 60rem;
    }
    .planes-smartpack-contenedor > .planes-titulo{
        width: 50%;
    }
    .planes-smartpack-contenedor h2{
        text-align: left;
        font-size: 4.8rem;
    }
    .planes-smartpacks-grid{
        width: 75%;        
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .planes-smartpacks-grid p{
        font-size: 2rem;
    }
    .plan-smartpack-grid-a a{
        margin-top: 5rem;
    }
    .plan-smartpack-grid-b a{
        margin-top: 8rem;
    }
    .plan-smartpack-grid-a{
        grid-column: 2/4;
        height: 18rem;
        overflow: hidden;
        transition: all .2s ease;
    }
    .plan-smartpack-grid-b{
        grid-column: 1/3;
        height: 18rem;
        overflow: hidden;
        transition: height .2s ease;
    }    
    .plan-smartpack-grid-a:hover,
    .plan-smartpack-grid-b:hover{
        height: 25rem;
        transform: scale(1.1);
    }   
}
                                                        /* SMART PACKS A */
.header-bg-smartpack{
    background-color: var(--purple);
}
.precio-normal,
.precio-normal-numero{
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
}
.precio-emprendedores{
    font-size: 1.6rem;
    text-align: center;
}
.precio-normal-numero{
    text-decoration: line-through;
}
.plan-precio-smartpack{
    margin:0 0 2rem 0;
}
.plus-contenedor-gap{
    margin-bottom: 2rem;
}
.plus-smartpack{
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .planes-grid-smartpack{
        width: 80%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}
                                                /* NOSOTROS */
.que-hacemos-bg{
    background: var(--gradientMorado)
}
.que-hacemos-contenedor{
    width: 90%;
    margin: 0 auto;
}
.que-hacemos-titulo h2{
    margin: 0;
    font-size: 3.2rem;
}
.que-hacemos-titulo p{
    font-size: 1.6rem;
}
.que-hacemos-imagenes-mb a{
    display: block;
    height: 35rem;
}
.hacemos-publicidad-digital{
    background-image: url(../img/hacemos_publicidad_digital.webp);
    background-size: contain;
    background-repeat: no-repeat;
}
.hacemos-desarrollo-web{
    background-image: url(../img/hacemos_desarrollo_web.webp);
    background-size: contain;
    background-repeat: no-repeat;
}
.hacemos-branding{
    background-image: url(../img/hacemos_branding.webp);
    background-size: contain;
    background-repeat: no-repeat;
}
.que-hacemos-imagenes-pc{
    display: none;
}
@media (min-width: 768px) {
    .que-hacemos-imagenes-mb{
        display: none;
    }
    .que-hacemos-titulo h2{
        font-size: 4.8rem;        
    }
    .que-hacemos-titulo p{
        font-size: 2rem;
        width: 50%;
    }
    .que-hacemos-imagenes-pc{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 55rem;
        gap: 3rem;
    }    
    .que-hacemos-imagenes-pc img{
        opacity: 0;
        width: 100%;
        transition: opacity 0.1s ease;
    }
    .que-hacemos-imagenes-pc a{
        display: block;
        width: 20rem;
    }
    .hacemos-publicidad-digital-pc,
    .hacemos-desarrollo-web-pc,
    .hacemos-branding-pc{
        background-image: url(../img/publicidad_digital_nosotros.webp);
        background-size: contain;
        background-repeat: no-repeat;
        height: 40rem;
        overflow: hidden;
        border-radius: 1.5rem;
        transition: width .2s ease;
    }
    .hacemos-desarrollo-web-pc{
        background-image: url(../img/desarrollo_web_nosotros.webp);
    }
    .hacemos-branding-pc{
        background-image: url(../img/branding_nosotros.webp);
    }
    .hacemos-publicidad-digital-pc img:hover,
    .hacemos-desarrollo-web-pc img:hover,
    .hacemos-branding-pc img:hover{
        opacity: 1;
    }
    .hacemos-publicidad-digital-pc:hover,
    .hacemos-desarrollo-web-pc:hover,
    .hacemos-branding-pc:hover{
        width: 35%;
    }
}
/* METODOLOGIA */
.metodologia-bg{
    background-color: var(--lightPurple);
}
.metodologia-flex{
    width: 90%;
    margin: 0 auto;
}
.metodologia-titulo h2{
    margin: 0;
    font-size: 3.2rem;
}
.metodologia-titulo p{
    font-size: 1.6rem;
}
.metodologia-grid div{
    height: 15rem;
    padding: 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-evenly;
    gap: 2rem;
    align-items: center;
    background-color: var(--darkPurple);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all .3s ease;    
}
.metodologia-grid div:last-of-type{
    margin-bottom: 0;
}
.metodologia-grid div:hover{
    background-color: var(--fuccia);
}
.metodologia-numero{
    font-size: 9rem;
    transform:translateY(7rem);
    font-weight: bold;
    transition: transform .3s ease;
    background: linear-gradient(to right, #f5f5f5, #ff1cc1, #7a3ef1, #05cde7);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.metodologia-numero,
.metodologia-texto{
    background: linear-gradient(to right, #f5f5f5, #ff1cc1, #7a3ef1, #05cde7);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.metodologia-grid div:hover .metodologia-numero,
.metodologia-grid div:hover .metodologia-texto{
    background: none;                 
    -webkit-text-fill-color: var(--blanco);
    color: var(--blanco);
}
.metodologia-grid div:hover .metodologia-numero{
    transform: translateY(0);
    color: var(--blanco);
}
.metodologia-grid div:hover .metodologia-texto{
    color: var(--blanco);
}
.metodologia-texto{
    font-weight: bold;
}
@media (min-width: 768px) {
    .metodologia-bg{
        padding: 3rem 0;
}
    .metodologia-flex{
        display: flex;
        justify-content: center;
        gap: 5rem;
    }
    .metodologia-titulo{
        width: 40%;
    }
    .metodologia-titulo h2{
        font-size: 4.8rem;
    }
    .metodologia-titulo p{
        font-size: 2rem;
    }
    .metodologia-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .metodologia-numero{
        font-size: 16rem;
    }
    .metodologia-texto{
        font-size: 3rem;
    }
}
/* PILARES */
.pilares-mob{
    background: var(--lightPurple);
}
.pilares-contenedor{
    width: 90%;
    margin: 0 auto;
    padding: 2rem 0;
}
.pilares-texto h2{
    font-size: 3.2rem;
    margin: 0;
}
.span-aguamarina{
    color: var(--aguamarina);
}
.pilares-texto p{
    font-size: 1.6rem;
}
.pilares-pc{
    display: none;
}
@media (min-width: 768px) {
    .pilares-mob{
        display: none;
    }    
    .pilares-pc{
        display: block;
        background: linear-gradient(to bottom, var(--lightPurple) 0%, var(--purple) 20%);
        padding-top: 5rem;
    }
    .pilares-pc img{
        width: 100%;
    }
}
/* PAISES NOSOTROS */
.paises-nosotros{
    background: var(--darkPurple);
    padding: 2rem 0;
}
.paises-nosotros p{
    margin: 0;
}
.paises-grid-nosotros{
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);    
    gap: 2rem;
}
.paises-grid-nosotros img{
    width: 100%;
    opacity: 0;
    transition: opacity .3s ease;
}
.paises-grid-nosotros img:hover{    
    opacity: 1;
}
@media (min-width: 768px) {
    .paises-grid-nosotros{
        width: 80%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);    
        gap: 2rem;
    }
}