/* =========================================================
   ¿POR QUÉ ELEGIRNOS?
   ========================================================= */

.cp-porque-elegirnos {

    padding: 90px 0;

}


/* =========================================================
   TARJETA DE BENEFICIO
   ========================================================= */

.cp-benefit-card {

    height: 100%;

    padding: 2rem 1.75rem;

    background: var(--cp-background);

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

    border-radius: 20px;

    text-align: center;

    box-shadow: var(--cp-shadow-sm);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


/* =========================================================
   ICONO
   ========================================================= */

.cp-benefit-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 64px;

    height: 64px;

    margin: 0 auto 1.25rem;

    border-radius: 50%;

    background: var(--cp-color-primary-light);

    color: var(--cp-color-primary);

    font-size: 1.5rem;

}


/* =========================================================
   TÍTULO
   ========================================================= */

.cp-benefit-card h3 {

    margin-bottom: 0.75rem;

    font-family: var(--cp-font-heading);

    font-size: 1.25rem;

    font-weight: 700;

    line-height: 1.3;

    color: var(--cp-text-primary);

}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.cp-benefit-card p {

    margin: 0;

    font-size: 0.98rem;

    line-height: 1.6;

    color: var(--cp-text-secondary);

}


/* =========================================================
   HOVER
   ========================================================= */

.cp-benefit-card:hover {

    transform: translateY(-5px);

    border-color: var(--cp-color-primary);

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

}


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

@media (max-width: 767.98px) {

    .cp-porque-elegirnos {

        padding: 70px 0;

    }

    .cp-benefit-card {

        padding: 1.5rem;

    }

}