:root{

    /* Colores */

    --primary:#B79AE8;
    --primary-dark:#9B7DD6;
    --primary-light:#F1E8FF;

    --background:#FAF8F5;
    --surface:#FFFFFF;

    --text:#2E2E2E;
    --text-light:#666666;

    --border:#ECECEC;

    /* Sombras */

    --shadow:
        0 15px 35px rgba(0,0,0,.08);

    --shadow-hover:
        0 20px 45px rgba(183,154,232,.18);

    /* Bordes */

    --radius:20px;

}

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

body{

    font-family:'Plus Jakarta Sans',sans-serif;

    background:var(--background);

    color:var(--text);

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

section{

    padding:110px 0;

}

.container{

    width:min(1200px,90%);

    margin:auto;

}

/* ===========================
   HEADER
=========================== */

.header{

    width:100%;
    position:fixed;

    top:20px;
    left:0;

    display:flex;
    justify-content:center;

    z-index:999;
    padding-top: 0;

}

/* ===========================
   NAVBAR
=========================== */

.navbar{

    width:min(1200px,90%);

    height:74px;

    padding:0 38px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:rgba(183,154,232,.82);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.22);

    border-radius:24px;

    box-shadow:
        0 18px 45px rgba(109,76,170,.18);

    transition:.35s ease;

}

/* ===========================
   LOGO
=========================== */

.logo{

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

}

.logo img{

    width:60px;

    height:60px;

    transition:.35s;

}

.logo:hover img{

    transform:rotate(-4deg) scale(1.05);

}

.logo-text{

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.logo-text h2{

    margin:0;

    color:white;
    font-size:1.2rem;
    font-weight:600;
    line-height:1.2;

}

.logo-text span{

    margin:0;

    color:#F8F4ED;
    font-size:.78rem;
    opacity:.9;

}

/* ===========================
   LINKS
=========================== */

.nav-links{

    display:flex;
    gap:35px;

    list-style:none;

}

.nav-links a{

    position:relative;

    color:#FFFFFF;

    font-size:16px;

    font-weight:500;

    transition:.35s;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:#FFFFFF;

    border-radius:50px;

    transition:.35s;

}

.nav-links a:hover{

    color:#FFFFFF;

}

.nav-links a:hover::after{

    width:100%;

}

.btn-contact:hover{

    transform:translateY(-3px);

    box-shadow:

        0 15px 35px rgba(255,255,255,.18);

}

/*====================================
        BOTÓN CONTACTO
====================================*/

.mobile-contact{

    display:flex;

    align-items:center;

}

.mobile-contact .btn-contact{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:#F8F4ED;

    color:#7A5CBF;

    padding:13px 26px;

    border-radius:999px;

    font-weight:600;

    transition:.30s;

}

.mobile-contact .btn-contact:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.15);

}


.header{

    animation:navbarEntrance .8s ease forwards;

}

@keyframes navbarEntrance{

    from{

        opacity:0;

        transform:translateY(-25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*====================================
        NAVBAR RESPONSIVE
====================================*/

.menu-toggle{

    display:none;

    width:48px;
    height:48px;

    border:none;

    background:transparent;

    color:#FFFFFF;

    font-size:1.6rem;

    cursor:pointer;

}


@media (max-width:768px){

    .header{

        top:12px;

    }

    .navbar{

        height:68px;

        padding:0 22px;

        border-radius:20px;

    }

    .logo img{

        width:52px;
        height:52px;

    }

    .logo-text h2{

        font-size:1rem;

    }

    .logo-text span{

        font-size:.72rem;

    }

    .nav-links{

        position:absolute;

        top:88px;
        left:0;

        width:100%;

        background:rgba(183,154,232,.88);

        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);

        border:1px solid rgba(255,255,255,.18);

        border-radius:24px;

        padding:30px;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:24px;

        opacity:0;

        visibility:hidden;

        transform:translateY(-15px);

        transition:.35s ease;

        box-shadow:
            0 18px 40px rgba(109,76,170,.18);

    }

    .nav-links a{

        font-size:1.05rem;

        padding:6px 0;

    }

    .nav-links.active{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }

    /* Ocultar botón de escritorio */
    .btn-contact{

        display:none;

    }

    /* Mostrar botón hamburguesa */
    .menu-toggle{

        display:flex;

        justify-content:center;

        align-items:center;

    }

    /* Mostrar botón móvil */

.mobile-contact{

    display:flex;

    align-items:center;

}

.mobile-contact .btn-contact{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 24px;

}

}

/*====================================

                HERO

====================================*/

.hero{

    min-height:100vh;

    display:flex;
    align-items:center;

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(circle at top left,
        rgba(183,154,232,.16),
        transparent 30%),

        radial-gradient(circle at bottom right,
        rgba(183,154,232,.10),
        transparent 28%),

        #FAF8F5;

}

.hero-content{

    width:min(1200px,90%);
    margin:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:100px;

    align-items:center;

}

.hero-text{

    display:flex;
    flex-direction:column;

    gap:28px;

}

.hero-tag{

    background:#EFE4FF;

    color:#8D67CF;

    padding:12px 20px;

    box-shadow:

    0 8px 20px rgba(183,154,232,.12);

}

.hero::after{

    content:"";

    position:absolute;

    right:120px;

    top:170px;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#CDB8F4;

    box-shadow:

        -120px 90px 0 4px rgba(205,184,244,.35),

        -40px 210px 0 2px rgba(205,184,244,.45),

        90px 50px 0 5px rgba(205,184,244,.25);

}

.hero-tag i{

    font-size:.9rem;

}

.hero h1{

    font-size:3.9rem;

    line-height:1.08;

    letter-spacing:-2px;

    font-weight:700;

    color:#2E2E2E;

    max-width:700px;

}

.hero p{

    max-width:620px;

    font-size:1.18rem;

    line-height:1.9;

    color:#666;

}

.hero-benefits{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.hero-benefits span{

    display:flex;

    align-items:center;

    gap:14px;

    font-weight:500;

    color:#555;

}

.hero-benefits i{

    width:28px;

    height:28px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#F2E9FF;

    color:#8D67CF;

    font-size:.8rem;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:10px;

}

.btn-primary{

    background:#B79AE8;

    color:#FFF;

    padding:17px 32px;

    border-radius:999px;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(183,154,232,.30);

}

.btn-secondary{

    border:2px solid #B79AE8;

    color:#8D67CF;

    padding:17px 32px;

    border-radius:999px;

    font-weight:600;

    transition:.35s;

}

.btn-secondary:hover{

    background:#B79AE8;

    color:#FFF;

}

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

}

.hero-image::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:

    radial-gradient(

        rgba(183,154,232,.28),

        transparent 70%

    );

    border-radius:50%;

    filter:blur(40px);

    z-index:-1;

}

.hero-image img{

    width:100%;

    max-width:580px;

    filter:

        drop-shadow(

        0 25px 45px rgba(130,95,190,.18)

    );

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/*====================================
        HERO RESPONSIVE
====================================*/

@media (max-width: 992px){

    .hero{

        padding:140px 0 80px;
        min-height:auto;

    }

    .hero-content{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .hero-text{

        align-items:center;

    }

    .hero h1{

        font-size:3rem;

        max-width:700px;

    }

    .hero p{

        max-width:650px;

    }

    .hero-benefits{

        align-items:flex-start;

    }

    .hero-image img{

        max-width:460px;

    }

}

@media (max-width:768px){

    .hero{

        padding:130px 0 70px;

    }

    .hero::after{

        display:none;

    }

    .hero-content{

        gap:45px;

    }

    .hero h1{

        font-size:2.35rem;

        line-height:1.15;

        letter-spacing:-1px;

    }

    .hero p{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-tag{

        font-size:.9rem;

        padding:10px 18px;

    }

    .hero-benefits{

        width:100%;

        gap:16px;

    }

    .hero-benefits span{

        justify-content:center;

        text-align:left;

    }

    .hero-buttons{

        width:100%;

        flex-direction:column;

        gap:16px;

    }

    .hero-buttons a{

        width:100%;

        justify-content:center;

        text-align:center;

    }

    .btn-primary,
    .btn-secondary{

        display:flex;

        justify-content:center;

        align-items:center;

        padding:16px 24px;

    }

    .hero-image img{

        max-width:330px;

    }

}

@media (max-width:480px){

    .hero{

        padding:120px 0 60px;

    }

    .hero h1{

        font-size:2rem;

    }

    .hero p{

        font-size:.96rem;

    }

    .hero-image img{

        max-width:280px;

    }

}

/*====================================

            SOBRE MÍ

====================================*/

.about{

    padding:120px 0;

    background:#FFFFFF;

}

.about{

    position:relative;

    overflow:hidden;

}

.about::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(183,154,232,.10),

            transparent 70%

        );

    left:-140px;

    top:120px;

}

.about-content{

    width:min(1200px,90%);
    margin:auto;

    display:grid;
    grid-template-columns:.9fr 1.1fr;

    align-items:center;

    gap:80px;

}

/* Imagen */

.about-image{

    display:flex;
    justify-content:center;
    position: relative;

}

.about-image::before{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    border-radius:34px;

    border:2px solid rgba(183,154,232,.15);

    transform:translate(16px,16px);

    z-index:-1;

}

.about-image img{

    width:100%;

    max-width:430px;

    border-radius:30px;

    box-shadow:

        0 28px 60px rgba(0,0,0,.10);

    transition:.4s;

}

.about-image:hover img{

    transform:translateY(-6px);

}

/* Texto */

.about-text{

    display:flex;
    flex-direction:column;

    gap:24px;

}

.section-tag{

    width:max-content;

    display:flex;
    align-items:center;

    gap:10px;

    background:#F2E9FF;

    color:#8D67CF;

    padding:10px 18px;

    border-radius:999px;

    font-weight:600;

    font-size:.95rem;

}

.about-text h2{

    font-size:3.2rem;

    line-height:1.15;

    letter-spacing: -1px;
    color:#2F2F2F;

}

.about-text{

    gap:28px;

}

.about-text p{

    color:#666;

    line-height:1.8;

    font-size:1.05rem;
    max-width: 650px;

}

/* Highlights */

.about-highlights{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-top:10px;

}

.highlight{

    background:#FFFFFF;
    border: 1px solid #EEE6FA;

    padding:25px;

    border-radius:20px;

    transition:.35s;

    border:1px solid transparent;

    box-shadow: 0 10px rgba(0,0,0,.05);

}

.highlight:hover{

    transform:translateY(-8px);

    box-shadow:

        0 24px 45px rgba(183,154,232,.15);

    border-color:#D9C4FA;

}

.highlight h3{

    color:#8D67CF;

    margin-bottom:12px;

    font-size:1.1rem;

}

.highlight p{

    font-size:.95rem;

    line-height:1.7;

}

/*====================================
        SOBRE MÍ RESPONSIVE
====================================*/

@media (max-width:992px){

    .about{

        padding:100px 0;

    }

    .about-content{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-image{

        order:-1;

    }

    .about-image img{

        max-width:380px;

    }

    .about-text{

        align-items:center;

        text-align:center;

    }

    .about-text h2{

        font-size:2.7rem;

    }

    .about-text p{

        max-width:700px;

    }

}

@media (max-width:768px){

    .about{

        padding:90px 0;

    }

    .about::before{

        display:none;

    }

    .about-content{

        gap:45px;

    }

    .about-image::before{

        display:none;

    }

    .about-image img{

        max-width:300px;

        border-radius:24px;

    }

    .about-text{

        gap:22px;

    }

    .about-text h2{

        font-size:2.2rem;

        line-height:1.2;

    }

    .about-text p{

        font-size:1rem;

    }

    .about-highlights{

        grid-template-columns:1fr;

        gap:18px;

        width:100%;

    }

    .highlight{

        padding:22px;

        text-align:left;

    }

}

@media (max-width:480px){

    .about{

        padding:80px 0;

    }

    .about-image img{

        max-width:260px;

    }

    .about-text h2{

        font-size:1.9rem;

    }

    .section-tag{

        font-size:.85rem;

    }

}

/*====================================

        TERAPIA OCUPACIONAL

====================================*/

.therapy{

    padding:120px 0;

    background:#FAF8F5;

}

.therapy{

    position:relative;

    overflow:hidden;

}

.therapy::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(183,154,232,.08),

            transparent 70%

        );

    right:-150px;

    top:100px;

}

.therapy-content{

    width:min(1200px,90%);
    margin:auto;

}

.therapy-text{

    max-width:760px;

    margin:0 auto 80px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.therapy-text h2{

    margin:22px 0;

    font-size:3rem;

    line-height:1.2;

    color:#2F2F2F;

}

.therapy-text p{

    color:#666;

    line-height:1.8;

    font-size:1.08rem;

}

.therapy-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

.therapy-card{

    background:#FFFFFF;

    border:1px solid #EEE6FA;

    border-radius:30px;

    padding:45px;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    transition:.4s;

    box-shadow:

        0 12px 30px rgba(0,0,0,.05);

}

.therapy-card:hover{

    transform:translateY(-10px);

    border-color:#D9C4FA;

    box-shadow:

        0 30px 55px rgba(183,154,232,.16);

}


.therapy-card h3{

    margin-bottom:18px;

    font-size:1.45rem;

    line-height:1.3;

}

.therapy-card p{

    color:#666;

    line-height:1.7;

}

.therapy-icon{

    width:120px;

    height:120px;

    object-fit:contain;

    margin-bottom:30px;

    padding:18px;

    background:#F9F5FF;

    border-radius:28px;

    transition:.4s;

}

.therapy-card:hover .therapy-icon{

    transform:scale(1.08) rotate(-4deg);

}

.therapy-card:nth-child(2){

    margin-top:25px;

}

.therapy-card:nth-child(4){

    margin-top:25px;

}

.services-note{

    margin-top:60px;

    padding:24px 30px;

    background:#F8F4FD;

    border:1px solid #E8DDF8;

    border-radius:20px;

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.services-note i{

    font-size:1.5rem;

    color:#9A78D2;

    margin-top:2px;

}

.services-note p{

    margin:0;

    color:#555;

    line-height:1.8;

    font-size:1rem;

}

.services-note strong{

    color:#2F2F2F;

}

@media(max-width:768px){

    .services-note{

        flex-direction:column;

        text-align:center;

        align-items:center;

        padding:22px;

    }

}

/*====================================
    TERAPIA RESPONSIVE
====================================*/

@media (max-width:992px){

    .therapy{

        padding:100px 0;

    }

    .therapy-text{

        margin:0 auto 60px;

    }

    .therapy-text h2{

        font-size:2.6rem;

    }

    .therapy-grid{

        gap:28px;

    }

}

@media (max-width:768px){

    .therapy{

        padding:90px 0;

    }

    .therapy::before{

        display:none;

    }

    .therapy-text{

        margin-bottom:45px;

    }

    .therapy-text h2{

        font-size:2.2rem;

    }

    .therapy-text p{

        font-size:1rem;

    }

    .therapy-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .therapy-card{

        padding:35px 28px;

    }

    .therapy-card:nth-child(2),
    .therapy-card:nth-child(4){

        margin-top:0;

    }

    .therapy-icon{

        width:95px;
        height:95px;

        margin-bottom:22px;

    }

}

@media (max-width:480px){

    .therapy{

        padding:80px 0;

    }

    .therapy-text h2{

        font-size:1.9rem;

    }

    .therapy-card{

        padding:28px 22px;

    }

    .therapy-card h3{

        font-size:1.3rem;

    }

}

/*====================================

            SERVICIOS

====================================*/

.services{

    padding:120px 0;

    background:#FFFFFF;

}

.services-content{

    width:min(1200px,90%);
    margin:auto;

}

.section-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    max-width:760px;

    margin:0 auto 90px;

}

.section-header h2{

    margin:22px 0;

    font-size:3rem;

    color:#2F2F2F;

}

.section-header p{

    color:#666;

    line-height:1.8;

    font-size:1.08rem;

}

/* GRID */

.services-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

/* TARJETAS */

.service-card{

    background:#FFFFFF;

border:1px solid #EEE7FA;

box-shadow:
    0 12px 28px rgba(0,0,0,.05);

    border-radius:28px;

    padding:40px;

    transition:.35s;

    border:1px solid transparent;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:#D8BFFD;

    box-shadow:

        0 30px 60px rgba(183,154,232,.18);

}

.service-card i{

    width:78px;

    height:78px;

    background:

        linear-gradient(

            135deg,

            #F4ECFF,

            #ECE2FC

        );

    border-radius:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#8D67CF;

    font-size:1.9rem;

    margin-bottom:28px;

    transition:.4s;

}

.service-card:hover i{

    transform:

        rotate(-8deg)

        scale(1.08);

}

.service-card h3{

    font-size:1.45rem;

    margin-bottom:18px;

    color:#2F2F2F;

}

.service-card h3{

    font-size:1.55rem;

    line-height:1.3;

    margin-bottom:20px;

}

.service-card p{

    color:#666;

    line-height:1.9;

    margin-bottom:30px;

}

.service-card{

    position:relative;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:5px;

    background:#B79AE8;

    transition:.4s;

}

.services-note{

    margin-top:80px;

    background:#FCFAFF;

    border:1px solid #E5D8FB;

    box-shadow:

        0 12px 30px rgba(183,154,232,.08);

}

.service-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#9A78D2;

    font-weight:600;

    transition:.3s;

}

.service-card:hover a{

    gap:14px;

}

.service-card:last-child{

    grid-column:1 / -1;

    max-width:520px;

    justify-self:center;

}

.service-card i{

    width:70px;
    height:70px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#F2E9FF;

    border-radius:50%;

    color:#8D67CF;

    font-size:1.8rem;

    margin-bottom:25px;

}

/*====================================
        SERVICIOS RESPONSIVE
====================================*/

@media (max-width:992px){

    .services{

        padding:100px 0;

    }

    .section-header{

        margin:0 auto 70px;

    }

    .section-header h2{

        font-size:2.6rem;

    }

    .services-grid{

        gap:28px;

    }

}

@media (max-width:768px){

    .services{

        padding:90px 0;

    }

    .section-header{

        margin-bottom:50px;

    }

    .section-header h2{

        font-size:2.2rem;

    }

    .section-header p{

        font-size:1rem;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .service-card{

        padding:32px 26px;

    }

    .service-card:last-child{

        grid-column:auto;

        max-width:100%;

    }

    .service-card h3{

        font-size:1.35rem;

    }

    .service-card i{

        width:62px;
        height:62px;

        font-size:1.5rem;

        margin-bottom:20px;

    }

}

@media (max-width:480px){

    .services{

        padding:80px 0;

    }

    .section-header h2{

        font-size:1.9rem;

    }

    .service-card{

        padding:26px 22px;

    }

    .service-card p{

        margin-bottom:22px;

    }

}

/*====================================

        PROCESO DE ATENCIÓN

====================================*/

.process{

    padding:120px 0;

    background:#FAF8F5;

}

.process-content{

    width:min(1200px,90%);
    margin:auto;

}

.process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

    margin-top:80px;

    position: relative;
}

.process-card{

    position:relative;

    z-index: 2;

    margin-top:35px;

    padding:60px 30px 28px;

    border-radius: 26px;

}

.process-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.process-card{

    background:#FFFFFF;

    border-radius:24px;

    transition:.35s;

}

.process-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 22px 45px rgba(183,154,232,.14);

}


.process-number{

    position:absolute;

    top:-42px;

    left:50%;

    transform:translateX(-50%);

    width:78px;
    height:78px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#B79AE8;

    color:#FFF;

    font-size:1.8rem;
    font-weight:700;

    z-index:3;
    box-shadow:
        0 15px 35px rgba(183,154,232,.28);

}

.process-card:hover .process-number{

    transform:translateX(-50%) scale(1.08);

}

.process-card h3{

    margin-bottom:14px;
    margin-top: 0px;
    margin:22px 0 16px;

    font-size:1.35rem;

    color:#2F2F2F;

}

.process-card p{

    color:#666;

    line-height:1.9;

    font-size:.98rem;

}

.process-note{

    margin-top:70px;

    background:#FCFAFF;

    border:1px solid #E7DAFD;

    border-radius:22px;

    padding:22px 28px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:none;

}

.process-note i{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#EFE4FF;

    color:#8D67CF;

    font-size:1rem;

    flex-shrink:0;

}

.process-note p{

    margin:0;

    color:#555;

    line-height:1.8;

}

.process-note strong{

    color:#2E2E2E;

    font-weight:600;

}

@media(max-width:768px){

    .process-note{

        flex-direction:column;

        align-items:center;

        text-align:center;

        padding:22px;

    }

}

/*====================================
    PROCESO RESPONSIVE
====================================*/

@media (max-width:992px){

    .process{

        padding:100px 0;

    }

    .process-grid{

        grid-template-columns:repeat(2,1fr);

        gap:30px;

        margin-top:60px;

    }

}

@media (max-width:768px){

    .process{

        padding:90px 0;

    }

    .process-grid{

        grid-template-columns:1fr;

        gap:55px;

        margin-top:50px;

    }

    .process-card{

        margin-top:0;

        padding:58px 26px 28px;

    }

    .process-number{

        width:68px;
        height:68px;

        font-size:1.5rem;

        top:-34px;

    }

    .process-card h3{

        font-size:1.3rem;

        margin:18px 0 14px;

    }

    .process-card p{

        font-size:.97rem;

        line-height:1.8;

    }

}

@media (max-width:480px){

    .process{

        padding:80px 0;

    }

    .process-card{

        padding:55px 22px 24px;

    }

    .process-number{

        width:62px;
        height:62px;

        font-size:1.35rem;

    }

}

/*====================================

            BENEFICIOS

====================================*/

.benefits{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:

        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FCFAFF 18%,
            #F7F2FF 100%
        );

}

.benefits::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        radial-gradient(
            rgba(183,154,232,.18),
            transparent 70%
        );

    top:-180px;

    right:-120px;

}

.benefits-content{

    width:min(1200px,90%);

    margin:auto;

}

.benefits-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:32px;

    margin-top:70px;

}

.benefit-card{

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(10px);

    border:1px solid rgba(183,154,232,.18);

    border-radius:28px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-10px);

    background:#FFFFFF;

    box-shadow:

        0 22px 45px rgba(183,154,232,.14);

}

.benefit-card i{

    width:82px;

    height:82px;

    margin:auto;

    margin-bottom:28px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#FFFFFF;

    color:#8D67CF;

    font-size:2rem;

    box-shadow:

        0 14px 30px rgba(183,154,232,.18);

    transition:.35s;

}

.benefit-card:hover i{

    transform:

        scale(1.08)

        rotate(-6deg);

}

.benefit-card h3{

    margin-bottom:18px;

    font-size:1.45rem;

    line-height:1.35;

}

.benefit-card p{

    color:#666;

    line-height:1.85;

}

/*====================================
        BENEFICIOS RESPONSIVE
====================================*/

@media (max-width:992px){

    .benefits{

        padding:100px 0;

    }

    .benefits-grid{

        grid-template-columns:repeat(2,1fr);

        gap:26px;

        margin-top:60px;

    }

}

@media (max-width:768px){

    .benefits{

        padding:90px 0;

    }

    .benefits::before{

        display:none;

    }

    .benefits-grid{

        grid-template-columns:1fr;

        gap:22px;

        margin-top:50px;

    }

    .benefit-card{

        padding:34px 28px;

    }

    .benefit-card i{

        width:70px;
        height:70px;

        font-size:1.7rem;

        margin-bottom:22px;

    }

    .benefit-card h3{

        font-size:1.3rem;

    }

    .benefit-card p{

        font-size:.97rem;

        line-height:1.8;

    }

}

@media (max-width:480px){

    .benefits{

        padding:80px 0;

    }

    .benefit-card{

        padding:28px 22px;

    }

    .benefit-card i{

        width:62px;
        height:62px;

        font-size:1.5rem;

    }

}

/*====================================

        EXPERIENCIA

====================================*/

.experience{

    padding:120px 0;

    background:#FFFFFF;

}

.experience-content{

    width:min(1200px,90%);
    margin:auto;

    display:grid;

    grid-template-columns:280px 1fr;

    column-gap:70px;
    row-gap:50px;

    align-items:start;

}

.experience-image{

    display:flex;

    justify-content:center;

    position:sticky;

    top:140px;

}

.experience-image img{

    width:250px;
    aspect-ratio:1;

    border-radius:50%;

    object-fit:cover;

    border:8px solid #F4ECFF;

    box-shadow:
        0 20px 45px rgba(141,103,207,.18);

}

.experience-text{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.experience-text h2{

    margin:18px 0 22px;

    max-width:700px;

    line-height:1.2;

}

.experience-text > p{

    max-width:720px;

    color:#666;

    line-height:1.9;

    margin-bottom:45px;

}

.experience-list{

    display:flex;

    flex-direction:column;

    gap:22px;

    width:100%;

}

.experience-item{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:26px;

    background:#FFFFFF;

    border:1px solid #EEE6FC;

    border-radius:22px;

    transition:.35s;

}

.experience-item:hover{

    transform:translateX(8px);

    border-color:#D8C2FB;

    box-shadow:
        0 15px 35px rgba(183,154,232,.12);

}

.experience-item i{

    width:58px;
    height:58px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;
    align-items:center;

    background:#F4ECFF;

    color:#8D67CF;

    font-size:1.3rem;

}

.experience-item h3{

    margin-bottom:10px;

    font-size:1.15rem;

}

.experience-item p{

    color:#666;

    line-height:1.8;

}

.experience-note{

    grid-column:2;

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:15px;

    padding:22px 26px;

    background:#FCFAFF;

    border:1px solid #E8DBFD;

    border-radius:22px;

}

.experience-note i{

    width:40px;
    height:40px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;
    align-items:center;

    background:#F0E4FF;

    color:#8D67CF;

}

.experience-note p{

    margin:0;

    color:#555;

    line-height:1.8;

}

.experience-note strong{

    color:#2E2E2E;

}

/*====================================
        EXPERIENCIA RESPONSIVE
====================================*/

@media (max-width:992px){

    .experience{

        padding:100px 0;

    }

    .experience-content{

        grid-template-columns:1fr;

        gap:50px;

    }

    .experience-image{

        position:static;

        justify-content:center;

    }

    .experience-image img{

        width:220px;

    }

    .experience-text{

        align-items:center;

        text-align:center;

    }

    .experience-text h2{

        font-size:2.6rem;

    }

    .experience-text > p{

        max-width:700px;

        margin-bottom:35px;

    }

    .experience-note{

        grid-column:auto;

    }

}

@media (max-width:768px){

    .experience{

        padding:90px 0;

    }

    .experience-image img{

        width:180px;

        border-width:6px;

    }

    .experience-text h2{

        font-size:2.2rem;

    }

    .experience-text > p{

        font-size:1rem;

        margin-bottom:30px;

    }

    .experience-list{

        gap:18px;

    }

    .experience-item{

        padding:22px;

        gap:18px;

    }

    .experience-item i{

        width:50px;
        height:50px;

        font-size:1.1rem;

    }

    .experience-item h3{

        font-size:1.1rem;

    }

    .experience-item p{

        font-size:.95rem;

        line-height:1.7;

    }

    .experience-note{

        flex-direction:column;

        text-align:center;

        padding:22px;

    }

}

@media (max-width:480px){

    .experience{

        padding:80px 0;

    }

    .experience-image img{

        width:150px;

    }

    .experience-text h2{

        font-size:1.9rem;

    }

    .experience-item{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

}

/*====================================

            GALERÍA

====================================*/

.gallery{

    padding:120px 0;

    background:#FAF8F5;

}

.gallery-content{

    width:min(1500px,92%);
    margin:auto;

}

.gallery-grid{

    margin-top:80px;

    display:grid;

    grid-template-columns:repeat(4,minmax(220px,1fr));

    grid-auto-rows:18px;

    gap:30px;

    grid-auto-flow:dense;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#FFF;

    box-shadow:0 14px 35px rgba(0,0,0,.09);

    transition:.45s ease;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .7s ease;

}

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 50px rgba(0,0,0,.12);

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item{

    grid-row:span 16;

}

.gallery-item.tall{

    grid-row:span 24;

}

.gallery-item.large{

    grid-row:span 30;

    grid-column:span 2;

}

.gallery-item.wide{

    grid-column:span 2;

    grid-row:span 18;

}

.gallery-item.illustration{

    background:#FFFFFF;

    padding:12px;

    border:1px solid #EEE6F8;

}

.gallery-item.illustration img{

    border-radius:18px;

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.18),
        transparent 45%
    );

    opacity:0;

    transition:.35s;

}

.gallery-item:hover::after{

    opacity:1;

}

.gallery img{

    border-radius:28px;

    transition:.45s;

}

.gallery img:hover{

    transform:

        translateY(-8px)

        scale(1.02);

}

@media(max-width:1000px){

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery-item.large,
    .gallery-item.wide{

        grid-column:span 2;

    }

}

@media(max-width:650px){

    .gallery{

        padding:90px 0;

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

        gap:14px;

        grid-auto-rows:12px;

    }

    .gallery-item.large,
    .gallery-item.wide{

        grid-column:span 2;

    }

    .gallery-item{

        grid-row:span 16;

    }

    .gallery-item.tall{

        grid-row:span 22;

    }

    .gallery-item.large{

        grid-row:span 26;

    }

    .gallery-item{

    border-radius:18px;

}

.gallery img{

    border-radius:18px;

}

}

.gallery-item:nth-child(3n){

    border-radius:40px;

}

.gallery-item:nth-child(4n){

    border-radius:20px;

}

.gallery-item{

    overflow:hidden;

}

.gallery-item img{

    transition:.45s;

}

.gallery-item:hover img{

    transform:scale(1.05);

}

/*====================================
        GALERÍA RESPONSIVE
====================================*/

@media (max-width:992px){

    .gallery{

        padding:100px 0;

    }

    .gallery-grid{

        margin-top:60px;

        gap:24px;

    }

}

@media (max-width:768px){

    .gallery{

        padding:90px 0;

    }

    .gallery-grid{

        margin-top:45px;

        gap:18px;

    }

    .gallery-item{

        border-radius:22px;

    }

    .gallery img{

        border-radius:22px;

    }

}


/*=============================================
=                 CTA SECTION                 =
=============================================*/

.cta{
    padding: 8rem 10%;
    background: var(--background-color);
}

.cta-content{
    max-width: 1000px;
    margin: 0 auto;
    padding: 5rem 4rem;

    background: linear-gradient(
        180deg,
        #FCFAFF 0%,
        #F7F2FF 100%
    );

    border: 1px solid rgba(175,140,230,.20);

    border-radius: 2rem;

    text-align: center;

    box-shadow:
        0 20px 60px rgba(124,96,177,.08);

    position: relative;

    overflow: hidden;
}

/* Decoraciones */

.cta-content::before{
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background: rgba(176,145,231,.08);

    top: -120px;
    left: -120px;
}

.cta-content::after{
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: rgba(176,145,231,.06);

    bottom: -100px;
    right: -100px;
}

.cta-content>*{
    position: relative;
    z-index: 2;
}

/*=============================================
=               TEXTOS                        =
=============================================*/

.cta .section-tag{
    margin: 0 auto 1.5rem;
}

.cta h2{

    max-width: 760px;

    margin: 0 auto 1.5rem;

    font-size: clamp(2.2rem,4vw,3.3rem);

    line-height: 1.2;

    color: var(--title-color);
}

.cta>p,
.cta-content>p{

    max-width: 700px;

    margin: 0 auto;

    color: var(--text-color);

    line-height: 1.9;

    font-size: 1.05rem;
}

/*=============================================
=                 BOTON                       =
=============================================*/

.cta-buttons{

    margin: 3rem 0;

    display: flex;

    justify-content: center;
}

.cta .btn-primary{

    padding: 1rem 2.5rem;

    border-radius: 999px;

    font-weight: 600;

    transition: .35s ease;

    box-shadow:
        0 15px 35px rgba(145,110,205,.20);
}

.cta .btn-primary:hover{

    transform: translateY(-4px);

    box-shadow:
        0 22px 40px rgba(145,110,205,.30);
}

/*=============================================
=               INFO                          =
=============================================*/

.cta-info{

    display: flex;

    justify-content: center;

    gap: 2rem;

    flex-wrap: wrap;

    margin-top: 2rem;
}

.cta-item{

    display: flex;

    align-items: center;

    gap: .7rem;

    padding: .9rem 1.3rem;

    background: rgba(255,255,255,.75);

    border: 1px solid rgba(175,140,230,.18);

    border-radius: 50px;

    color: var(--text-color);

    font-size: .95rem;

    box-shadow:
        0 10px 25px rgba(124,96,177,.05);
}

.cta-item i{

    color: var(--primary-color);

    font-size: 1rem;
}

/*=============================================
=               RESPONSIVE                    =
=============================================*/

@media(max-width:768px){

    .cta{

        padding:6rem 1.5rem;
    }

    .cta-content{

        padding:3.5rem 2rem;
    }

    .cta-info{

        flex-direction:column;

        align-items:center;

        gap:1rem;
    }

    .cta-item{

        width:100%;

        justify-content:center;
    }

}

/*====================================
        CTA RESPONSIVE
====================================*/

@media (max-width:992px){

    .cta{

        padding:7rem 2rem;

    }

    .cta-content{

        padding:4rem 3rem;

    }

    .cta h2{

        font-size:2.6rem;

    }

}

@media (max-width:768px){

    .cta{

        padding:5.5rem 1.5rem;

    }

    .cta-content{

        padding:3rem 1.8rem;

        border-radius:28px;

    }

    .cta h2{

        font-size:2.2rem;

        line-height:1.25;

    }

    .cta-content>p{

        font-size:1rem;

    }

    .cta-buttons{

        margin:2.2rem 0;

    }

    .cta .btn-primary{

        width:100%;

        justify-content:center;

    }

}

@media (max-width:480px){

    .cta{

        padding:5rem 1rem;

    }

    .cta-content{

        padding:2.5rem 1.4rem;

    }

    .cta h2{

        font-size:1.9rem;

    }

}

/*====================================

        PREGUNTAS FRECUENTES

====================================*/

.faq{

    padding:120px 0;

    background:#FFFFFF;

}

.faq-content{

    width:min(900px,90%);
    margin:auto;
    max-width: 900px;

}

.faq-container{

    margin-top:70px;

    display:flex;
    flex-direction:column;

    gap:18px;

}

.faq-item{

    background:#FAF8F5;

    border:1px solid #F1E8FB;

    border-radius:22px;

    overflow:hidden;

    transition:.35s ease;

}

.faq-item:hover{

    border-color:#D9C3F8;

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(154,120,210,.08);

}

.faq-question i{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#F3EAFF;

    color:#8D67CF;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.faq-item.active i{

    transform:rotate(45deg);

    background:#8D67CF;

    color:white;

}

.faq-item[open]{

    background:#FFFFFF;

    border-color:#CDAEF3;

    box-shadow:0 18px 45px rgba(154,120,210,.12);

}

.faq-item summary{

    list-style:none;

    cursor:pointer;

    padding:24px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:1.08rem;

    font-weight:600;

    color:#2F2F2F;

    transition:.3s;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#EEE4FB;

    color:#9A78D2;

    font-size:1.4rem;

    font-weight:400;

    transition:.35s ease;

}

.faq-item[open] summary::after{

    content:"−";

    background:#9A78D2;

    color:#FFFFFF;

    transform:rotate(180deg);

}

.faq-item p{

    padding:0 30px 28px;

    color:#666666;

    line-height:1.8;

    font-size:.97rem;

}

@media(max-width:768px){

    .faq{

        padding:90px 0;

    }

    .faq-item summary{

        padding:20px 22px;

        font-size:1rem;

        gap:15px;

    }

    .faq-item p{

        padding:0 22px 24px;

    }

}

/*====================================
        FAQ RESPONSIVE
====================================*/

@media (max-width:992px){

    .faq{

        padding:100px 0;

    }

    .faq-container{

        margin-top:60px;

    }

}

@media (max-width:768px){

    .faq{

        padding:90px 0;

    }

    .faq-content{

        width:min(95%,700px);

    }

    .faq-container{

        margin-top:45px;

        gap:16px;

    }

    .faq-item{

        border-radius:18px;

    }

    .faq-item summary{

        padding:20px;

        font-size:1rem;

        line-height:1.5;

    }

    .faq-item summary::after{

        width:30px;
        height:30px;

        font-size:1.2rem;

        flex-shrink:0;

    }

    .faq-item p{

        padding:0 20px 22px;

        font-size:.96rem;

    }

}

@media (max-width:480px){

    .faq{

        padding:80px 0;

    }

    .faq-item summary{

        padding:18px;

        font-size:.96rem;

    }

}

/*====================================

            CONTACTO

====================================*/

.contact{

    padding:120px 0;

    background:#FAF8F5;

}

.contact-content{

    width:min(1200px,90%);
    margin:auto;

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:70px;

    align-items:start;

}

.cta-location{

    margin-top:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:#F8F8F8;

    font-size:.98rem;

    opacity:.9;

}

.cta-location i{

    color:#FFFFFF;

    font-size:1rem;

}

.cta-location strong{

    font-weight:600;

}

@media(max-width:768px){

    .cta-location{

        text-align:center;

        line-height:1.7;

        padding:0 15px;

    }

}

.whatsapp-button{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    margin-top:.5rem;

    padding:.45rem 0;

    background:transparent;

    color:#8D67CF;

    text-decoration:none;

    font-weight:600;

    font-size:1rem;

    border-bottom:3px solid #DCCAF9;

    transition:.3s;

}

.whatsapp-button i{

    font-size:1.15rem;

}

.whatsapp-button:hover{

    color:#6F49BC;

    border-color:#8D67CF;

    transform:translateX(4px);

}


/*====================
    Información
=====================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.contact-info h2{

    font-size:3rem;

    line-height:1.2;

    color:#2F2F2F;

}

.contact-info p{

    color:#666;

    line-height:1.8;

}

.contact-details{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-top:15px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.contact-item i{

    width:55px;
    height:55px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#F2E9FF;

    color:#8D67CF;

    font-size:1.2rem;

    flex-shrink:0;

}

.contact-item h3{

    margin-bottom:5px;

    color:#2F2F2F;

}

.contact-item p{

    color:#666;

}

/*====================
      Redes
=====================*/

.social-links{

    display:flex;

    gap:18px;

    margin-top:15px;

}

.social-links a{

    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#FFFFFF;

    color:#8D67CF;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.35s;

}

.social-links a:hover{

    background:#B79AE8;

    color:#FFFFFF;

    transform:translateY(-4px);

}

/*====================
      Formulario
=====================*/

.contact-form{

    background:#FFFFFF;

    padding:45px;

    border-radius:28px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:18px 22px;

    border:1px solid #E5E5E5;

    border-radius:15px;

    outline:none;

    font-size:1rem;

    transition:.3s;

    font-family:inherit;

}

.contact-form textarea{

    resize:none;

}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:#B79AE8;

    box-shadow:0 0 0 4px rgba(183,154,232,.15);

}

.contact-form button{

    width:max-content;

    margin-top:10px;

    cursor:pointer;

}

/*====================================
        CONTACTO RESPONSIVE
====================================*/

@media (max-width:992px){

    .contact{

        padding:100px 0;

    }

    .contact-content{

        grid-template-columns:1fr;

        gap:55px;

    }

    .contact-info{

        text-align:center;

        align-items:center;

    }

    .contact-info h2{

        font-size:2.6rem;

    }

    .contact-info p{

        max-width:700px;

    }

    .contact-details{

        width:100%;

        max-width:650px;

    }

    .social-links{

        justify-content:center;

    }

}

@media (max-width:768px){

    .contact{

        padding:90px 0;

    }

    .contact-info h2{

        font-size:2.2rem;

    }

    .contact-item{

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:14px;

}

.contact-item div{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.contact-details{

    align-items:center;

}

    .contact-item i{

        width:48px;
        height:48px;

        font-size:1rem;

    }

    .contact-form{

        padding:32px 24px;

        border-radius:22px;

    }

    .contact-form input,
    .contact-form textarea{

        padding:16px 18px;

        font-size:.96rem;

    }

    .contact-form button{

        width:100%;

        justify-content:center;

    }

}

@media (max-width:480px){

    .contact{

        padding:80px 0;

    }

    .contact-info h2{

        font-size:1.9rem;

    }

    .contact-item{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .contact-form{

        padding:26px 20px;

    }

}

/*====================================

                FOOTER

====================================*/

.footer{

    background:#AA92E3;

    color:#FFFFFF;

}



/*====================
    Parte superior
=====================*/

.footer-content{

    width:min(1200px,90%);
    margin:auto;
    padding:90px 0 80px;

    display:grid;

    grid-template-columns:
        1.6fr
        .9fr
        1fr;

    gap:110px;

    align-items:start;

}

.footer-contact h4{

    margin-bottom:20px;

    font-size:1.1rem;

}

.footer-contact ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:rgba(255,255,255,.85);

    line-height:1.6;

}

.footer-contact i{

    color:#F6F0FF;

    margin-top:4px;

}

.footer-contact a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    transition:.35s;

}

.footer-contact a:hover{

    background:#FFFFFF;

    color:#8D67CF;

}

.footer-brand img{

    width:90px;

    margin-bottom:22px;

}

.footer-social{

    display:flex;

    gap:14px;

    margin-top:6px;

}

.footer-social a{

    width:44px;

    height:44px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

    backdrop-filter: blur(8px);

}

.footer-social a:hover{

    background:#FFFFFF;

    color:#8D67CF;

    transform:translateY(-4px);

}

.footer-brand h3{

    font-size:2.2rem;
    line-height: 1.1;

    margin-bottom:6px;

    font-weight:600;

}

.footer-brand p{

    color:rgba(255,255,255,.85);

    line-height:1.7;

}

.footer-profession{

    font-weight:600;

    color:#FFFFFF;

    margin-bottom:14px;

}

.footer-description{

    color:rgba(255,255,255,.82);

    max-width:340px;

}

/*====================
      Navegación
=====================*/

.footer-nav h4{

    margin-bottom:20px;

    font-size:1.1rem;

}

.footer-nav ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-nav a{

    color:rgba(255,255,255,.85);

    transition:.3s;

}

.footer-nav a:hover{

    color:#FFFFFF;

    padding-left:8px;

}

.footer h4{

    display:flex;

    align-items:center;

    gap:10px;

}

/*====================
      Footer Bottom
=====================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.15);

    padding:28px 5%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom p{

    color:rgba(255,255,255,.75);

    font-size:.92rem;

}

/*====================
      Créditos
=====================*/

.footer-credit{

    display:flex;

    align-items:center;

    gap:12px;
    opacity: .92;
    transition: .35;

}

.footer-credit:hover{

    opacity:1;

}

.footer-credit strong{

    letter-spacing:.4px;

}

.footer-credit span{

    color:rgba(255,255,255,.75);

    font-size:.9rem;

}

.footer-credit img{

    width:34px;

    transition:.35s;

}

.footer-credit img:hover{

    transform:rotate(-8deg) scale(1.08);

}

.footer-credit strong{

    font-weight:600;

}

/*====================================
        FOOTER RESPONSIVE
====================================*/

@media (max-width:992px){

    .footer-content{

        grid-template-columns:1fr;

        gap:55px;

        text-align:center;

        padding:80px 0 60px;

    }

    .footer-brand{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .footer-description{

        max-width:650px;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-nav ul,
    .footer-contact ul{

        align-items:center;

    }

    .footer-contact li{

        justify-content:center;

    }

    .footer h4{

        justify-content:center;

    }

}

@media (max-width:768px){

    .footer-content{

        gap:45px;

        padding:70px 0 50px;

    }

    .footer-brand img{

        width:75px;

    }

    .footer-brand h3{

        font-size:1.9rem;

    }

    .footer-nav ul{

        gap:12px;

    }

    .footer-contact a{

        justify-content:center;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

        gap:16px;

    }

    .footer-credit{

        justify-content:center;

        flex-wrap:wrap;

    }

}

@media (max-width:480px){

    .footer-content{

        padding:60px 0 45px;

    }

    .footer-brand h3{

        font-size:1.7rem;

    }

    .footer-brand img{

        width:65px;

    }

    .footer-contact li{

        flex-direction:column;

        align-items:center;

        gap:8px;

        text-align:center;

    }

    .footer-contact a{

        width:100%;

    }

    .footer-credit{

        gap:8px;

    }

    .footer-credit img{

        width:28px;

    }

    .footer-bottom p{

        font-size:.85rem;

    }

}

html{

    scroll-behavior:smooth;

}

section{

    scroll-margin-top:120px;

}