/* =========================
   Banner Beneficios Section
========================= */
.banner-beneficios-section {
    display: flex;
    justify-content: center;
    padding: 0 20px 60px 20px;
    background-color: #FFF;
    box-sizing: border-box;
    padding-bottom: 140px;
}

.banner-beneficios-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 1080px;
    max-width: 100%;
    gap: 24px;
    box-sizing: border-box;

    border-radius: 20px;
    background: var(--White--Background-White, #FFF);

    /* Elevación 2 */
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
}

.banner-beneficios-image-wrap {
    position: relative;
    flex-shrink: 0;
}

.banner-beneficios-image {
    display: block;
    border-radius: 20px;
}

.banner-beneficios-mascota {
    position: absolute;
    right: -70px;
    bottom: 0px;
}

.banner-beneficios-image--mobile,
.banner-beneficios-mascota--mobile {
    display: none;
}

.banner-beneficios-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 20px;
}

.banner-beneficios-title,
.banner-beneficios-title p {
    margin-bottom: 16px;
    color: var(--Brand-Colors-Blue-00, #1B365D);
    text-align: center;
    font-family: "Encode Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.4px;
}

.banner-beneficios-title strong {
    /* Titles/Title H6/Bold */
    color: var(--Brand-Colors-Blue-00, #1B365D);
    font-weight: 700;
}

.banner-beneficios-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.banner-beneficios-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 19px;
}

@media (max-width: 768px) {
    .banner-beneficios-items {
        flex-direction: column;
    }

    .banner-beneficios-buttons {
        flex-direction: column !important;
    }

    .banner-beneficios-content {
        padding: 0 15px 20px;
    }
}

.banner-beneficios-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7.129px;
}

.banner-beneficios-item-text1 p {
    color: var(--Complementary-Colors-Orange-00, #FFA400);
    font-family: "Encode Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.56px;
}

.banner-beneficios-item-text2 p {
    color: var(--Brand-Colors-Blue-00, #1B365D);
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.banner-beneficios-item-text2 p strong {
    color: var(--Brand-Colors-Turquoise-00, #00AEC7);
    font-weight: 700;
}

.banner-beneficios-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
}

.banner-beneficios-btn {
    display: flex;
    height: 42px;
    min-width: 311px;
    padding: 11px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;

    border-radius: 30px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.3s ease-out;

    color: #FFF;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.banner-beneficios-btn p{
    color: var(--White--Background-White, #FFF);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 88.889% */
}

.banner-beneficios-btn p,
.banner-beneficios-btn figure {
    margin: 0;
    display: flex;
    align-items: center;
}

.banner-beneficios-btn img {
    width: auto;
}

.banner-beneficios-btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFF;
}

.banner-beneficios-btn-arrow i {
    font-size: 10px;
}

.banner-beneficios-btn--mach {
    background: #6200EE;
}

.banner-beneficios-btn--mach .banner-beneficios-btn-arrow i {
    color: #6200EE;
}

.banner-beneficios-btn--bci {
    background: #0C9647;
}

.banner-beneficios-btn--bci .banner-beneficios-btn-arrow i {
    color: #0C9647;
}

.banner-beneficios-btn:hover {
    text-decoration: none;
}

.banner-beneficios-btn--mach:hover {
    background: #4700AC;
}

.banner-beneficios-btn--bci:hover {
    background: #0E6332;
}

@media (max-width: 768px) {
    .banner-beneficios-btn img {
        height: auto;
    }
    
    .banner-beneficios-section {
        padding: 0 20px 40px 20px;
    }

    .banner-beneficios-box {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        gap: 0;
        border-radius: 10px;
        overflow: hidden;
    }

    .banner-beneficios-image-wrap {
        position: relative;
        align-self: stretch;
        max-width: 100%;
    }

    .banner-beneficios-image {
        width: 100%;
        max-width: 100%;
        display: block;
        border-radius: 0;
        position: relative;
        z-index: 0;
    }

    .banner-beneficios-image--desktop,
    .banner-beneficios-mascota--desktop {
        display: none;
    }

    .banner-beneficios-image--mobile {
        display: block;
    }

    .banner-beneficios-mascota--mobile {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 180px;
        height: auto;
        z-index: 2;
    }

    .banner-beneficios-content {
        position: relative;
        background: var(--White--Background-White, #FFF);
        /* Rectángulo con esquinas superiores muy redondeadas que se
           superpone sobre la imagen. El solape debe ser >= al radio: si es
           menor, la imagen termina antes que la curva y el fondo blanco del
           box asoma por las esquinas, dando un corte recto. El padding extra
           compensa el solape para que el texto no se mueva. */
        margin-top: -100px;
        padding: 92px 15px 20px;
        border-radius: 80px 80px 0 0;
        z-index: 1;
    }

    .banner-beneficios-oval {
        display: block;
        position: relative;
        width: auto;
        height: auto;
        background: transparent;
        z-index: 1;
    }

    .banner-beneficios-oval-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;

        position: static;
        max-width: 100%;
    }

    .banner-beneficios-title {
        padding: 0;
    }

    .banner-beneficios-title,
    .banner-beneficios-title p {
        color: var(--Brand-Colors-Blue-00, #1B365D);
        margin-bottom: 0;
        text-align: center;
        white-space: normal;
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: normal;
    }

    .banner-beneficios-row {
        flex-direction: column;
        align-items: stretch;
    }

    .banner-beneficios-buttons {
        width: 100%;
    }
}