/*==============================================================================
¿POR QUÉ ELEGIR ANSIER? — BENEFICIOS
ANSIER 3.0 PREMIUM
==============================================================================*/

.benefits{

    background:var(--background-light);

    position:relative;

    overflow:hidden;

}

.benefits::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(92,225,230,.08);

    border-radius:50%;

    top:-180px;

    right:-180px;

}

.benefits::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(22,36,74,.04);

    border-radius:50%;

    bottom:-150px;

    left:-150px;

}

.benefits__container{

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

    margin:auto;

    position:relative;

    z-index:2;

}

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

.benefits__header{

    max-width:760px;

    margin:0 auto 64px;

    text-align:center;

}

.benefits__subtitle{

    display:inline-block;

    margin-bottom:16px;

    color:var(--color-secondary);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.benefits__title{

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

    line-height:1.2;

    margin-bottom:22px;

    color:var(--text-primary);

}

.benefits__description{

    font-size:1.1rem;

    line-height:1.9;

    color:var(--text-secondary);

}

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

.benefits__grid{

    display:grid;

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

    gap:28px;

}

/*==============================
CARD DE BENEFICIO
Extiende el .card global (style.css)
con la variante centrada de esta sección.
==============================*/

.benefits .card{

    padding:44px 32px;

    text-align:center;

}

.card__icon{

    width:76px;

    height:76px;

    margin:0 auto 26px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gradient-secondary);

    color:#fff;

    font-size:1.7rem;

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

    transition:var(--transition);

}

.card:hover .card__icon{

    transform:rotate(10deg) scale(1.08);

}

.card__title{

    margin-bottom:16px;

    font-size:1.35rem;

    color:var(--text-primary);

}

.card__text{

    font-size:.98rem;

    line-height:1.8;

    color:var(--text-secondary);

}

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

@media(max-width:1100px){

.benefits__grid{

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

}

}

@media(max-width:768px){

.benefits__title{

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

}

.benefits__description{

    font-size:1rem;

}

.benefits__grid{

    grid-template-columns:1fr;

}

.benefits .card{

    padding:34px 26px;

}

}

@media(max-width:480px){

.card__icon{

    width:64px;

    height:64px;

    font-size:1.4rem;

}

.card__title{

    font-size:1.2rem;

}

}