/*==============================================================================
PROCESO + CTA FINAL
ANSIER 3.0 PREMIUM
==============================================================================*/

.process{

    background:var(--background);

    position:relative;

    overflow:hidden;

}

.process__container{

    width:min(92%, var(--container));

    margin:auto;

}

/*==================================================
ENCABEZADO
==================================================*/

.process__header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.process__subtitle{

    display:inline-block;

    color:var(--color-secondary);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:16px;

}

.process__title{

    font-size:var(--fs-h2);

    line-height:1.2;

    color:var(--text-primary);

    margin-bottom:22px;

}

.process__header p{

    font-size:1.1rem;

    line-height:1.9;

    color:var(--text-secondary);

}

/*==================================================
GRID
==================================================*/

.process__grid{

    display:grid;

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

    gap:28px;

    position:relative;

}

/* Línea conectora */

.process__grid::before{

    content:"";

    position:absolute;

    top:45px;

    left:10%;

    width:80%;

    height:3px;

    background:var(--gradient-secondary);

    opacity:.35;

    z-index:0;

}

/*==================================================
CARD DE PASO
==================================================*/

.process-step{

    position:relative;

    background:var(--background);

    padding:40px 28px;

    border-radius:var(--radius-lg);

    text-align:center;

    border:1px solid var(--border);

    box-shadow:var(--shadow-xs);

    transition:var(--transition);

    z-index:1;

}

.process-step:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

    border-color:transparent;

}

/*==================================================
NÚMERO
==================================================*/

.process-step__number{

    width:84px;

    height:84px;

    margin:0 auto 26px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gradient-secondary);

    color:#fff;

    font-size:1.6rem;

    font-weight:800;

    box-shadow:0 15px 35px rgba(92,225,230,.3);

    transition:var(--transition);

}

.process-step:hover .process-step__number{

    transform:scale(1.08);

}

.process-step h3{

    font-size:1.3rem;

    color:var(--text-primary);

    margin-bottom:14px;

}

.process-step p{

    font-size:.95rem;

    line-height:1.8;

    color:var(--text-secondary);

}

/*==================================================================
CTA FINAL
==================================================================*/

.cta{

    position:relative;

    overflow:hidden;

    background:var(--gradient-primary);

    color:#fff;

    text-align:center;

}

/* Formas decorativas, mismo lenguaje visual del Hero */

.cta::before,
.cta::after{

    content:"";

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.25;

    pointer-events:none;

}

.cta::before{

    width:420px;

    height:420px;

    top:-160px;

    left:-100px;

    background:var(--gradient-secondary);

}

.cta::after{

    width:360px;

    height:360px;

    bottom:-160px;

    right:-100px;

    background:var(--color-secondary);

}

.cta__container{

    position:relative;

    z-index:1;

    width:min(90%, 900px);

    margin:auto;

}

.cta h2{

    color:#fff;

    font-size:var(--fs-h2);

    line-height:1.2;

    margin-bottom:22px;

}

.cta p{

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:36px;

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

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

@media(max-width:1100px){

.process__grid{

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

}

.process__grid::before{

    display:none;

}

}

@media(max-width:768px){

.process__title{

    font-size:clamp(1.8rem,5vw,2.2rem);

}

.process__grid{

    grid-template-columns:1fr;

}

.cta h2{

    font-size:clamp(1.7rem,6vw,2.2rem);

}

.cta p{

    font-size:1rem;

}

}

@media(max-width:480px){

.process-step{

    padding:30px 24px;

}

.process-step__number{

    width:70px;

    height:70px;

    font-size:1.35rem;

}

}