/* benefits.css */

/* Variables para el degradado */
:root {
    --c-0: hsla(207.27272727272728, 44%, 49%, 1);
    --y-0: 63%;
    --s-start-0: 8.392121895570533%;
    --s-end-0: 38.584065253664996%;
    --x-0: 93%;
    --y-1: -7%;
    --c-1: hsla(0, 0%, 0%, 1);
    --x-1: 33%;
    --s-start-1: 8.392121895570533%;
    --s-end-1: 22.10878124098502%;
    --y-2: 7%;
    --s-start-2: 8.392121895570533%;
    --s-end-2: 22.558651527792346%;
    --c-2: hsla(0, 0%, 0%, 1);
    --x-2: 84%;
    --y-3: 5%;
    --c-3: hsla(0, 0%, 0%, 1);
    --x-3: 14%;
    --s-start-3: 8.392121895570533%;
    --s-end-3: 22.558651527792346%;
    --s-start-4: 8.392121895570533%;
    --s-end-4: 22.558651527792346%;
    --x-4: 7%;
    --y-4: 96%;
    --c-4: hsla(0, 0%, 0%, 1);
    --y-5: 90%;
    --x-5: 93%;
    --s-start-5: 8.392121895570533%;
    --s-end-5: 22.558651527792346%;
    --c-5: hsla(0, 0%, 0%, 1);
    --s-start-6: 8.392121895570533%;
    --s-end-6: 39.67138181429644%;
    --x-6: 3%;
    --y-6: 61%;
    --c-6: hsla(177.8102189781022, 59%, 55%, 1);
    --s-start-7: 8.392121895570533%;
    --s-end-7: 49.58090142552271%;
    --x-7: 94%;
    --c-7: hsla(177.8102189781022, 59%, 55%, 1);
    --y-7: 59%;
    --s-start-8: 8.392121895570533%;
    --s-end-8: 34.815367581495366%;
    --x-8: 48%;
    --c-8: hsla(215.08771929824562, 100%, 33%, 1);
    --y-8: 63%;
    --c-9: hsla(207.27272727272728, 44%, 49%, 1);
    --s-start-9: 8.392121895570533%;
    --s-end-9: 31.77166380372925%;
    --x-9: 96%;
    --y-9: 78%;
}

/* Animación para el degradado */
@keyframes hero-gradient-animation {
    0% {
        --c-0: hsla(207.27272727272728, 44%, 49%, 1);
        --y-0: 63%;
        --s-start-0: 8.392121895570533%;
        --s-end-0: 38.584065253664996%;
        --x-0: 93%;
        --y-1: -7%;
        --c-1: hsla(0, 0%, 0%, 1);
        --x-1: 33%;
        --s-start-1: 8.392121895570533%;
        --s-end-1: 22.10878124098502%;
        --y-2: 7%;
        --s-start-2: 8.392121895570533%;
        --s-end-2: 22.558651527792346%;
        --c-2: hsla(0, 0%, 0%, 1);
        --x-2: 84%;
        --y-3: 5%;
        --c-3: hsla(0, 0%, 0%, 1);
        --x-3: 14%;
        --s-start-3: 8.392121895570533%;
        --s-end-3: 22.558651527792346%;
        --s-start-4: 8.392121895570533%;
        --s-end-4: 22.558651527792346%;
        --x-4: 7%;
        --y-4: 96%;
        --c-4: hsla(0, 0%, 0%, 1);
        --y-5: 90%;
        --x-5: 93%;
        --s-start-5: 8.392121895570533%;
        --s-end-5: 22.558651527792346%;
        --c-5: hsla(0, 0%, 0%, 1);
        --s-start-6: 8.392121895570533%;
        --s-end-6: 39.67138181429644%;
        --x-6: 3%;
        --y-6: 61%;
        --c-6: hsla(177.8102189781022, 59%, 55%, 1);
        --s-start-7: 8.392121895570533%;
        --s-end-7: 49.58090142552271%;
        --x-7: 94%;
        --c-7: hsla(177.8102189781022, 59%, 55%, 1);
        --y-7: 59%;
        --s-start-8: 8.392121895570533%;
        --s-end-8: 34.815367581495366%;
        --x-8: 48%;
        --c-8: hsla(215.08771929824562, 100%, 33%, 1);
        --y-8: 63%;
        --c-9: hsla(207.27272727272728, 44%, 49%, 1);
        --s-start-9: 8.392121895570533%;
        --s-end-9: 31.77166380372925%;
        --x-9: 96%;
        --y-9: 78%;
    }

    50% {
        --c-0: hsla(207.27272727272728, 44%, 49%, 1);
        --y-0: 59%;
        --s-start-0: 12.892043731642234%;
        --s-end-0: 42.94837818044209%;
        --x-0: 2%;
        --y-1: 10%;
        --c-1: hsla(0, 0%, 0%, 1);
        --x-1: 42%;
        --s-start-1: 8.392121895570533%;
        --s-end-1: 41.69445156991687%;
        --y-2: 29%;
        --s-start-2: 8.392121895570533%;
        --s-end-2: 20.488815899465003%;
        --c-2: hsla(0, 0%, 0%, 1);
        --x-2: 75%;
        --y-3: 16%;
        --c-3: hsla(0, 0%, 0%, 1);
        --x-3: 5%;
        --s-start-3: 8.392121895570533%;
        --s-end-3: 30.099844327777923%;
        --s-start-4: 8.392121895570533%;
        --s-end-4: 24.59566937006635%;
        --x-4: 36%;
        --y-4: 91%;
        --c-4: hsla(0, 0%, 0%, 1);
        --y-5: 91%;
        --x-5: 70%;
        --s-start-5: 8.392121895570533%;
        --s-end-5: 24.59566937006635%;
        --c-5: hsla(0, 0%, 0%, 1);
        --s-start-6: 9%;
        --s-end-6: 26.825849058644888%;
        --x-6: 54%;
        --y-6: 73%;
        --c-6: hsla(177.8102189781022, 59%, 55%, 1);
        --s-start-7: 9%;
        --s-end-7: 49.05074977970796%;
        --x-7: 57%;
        --c-7: hsla(177.8102189781022, 59%, 55%, 1);
        --y-7: 76%;
        --s-start-8: 9;
        --s-end-8: 26.166345747226664%;
        --x-8: 11%;
        --c-8: hsla(215.08771929824562, 100%, 33%, 1);
        --y-8: 53%;
        --c-9: hsla(207.27272727272728, 44%, 49%, 1);
        --s-start-9: 9;
        --s-end-9: 22.152460022684956%;
        --x-9: 70%;
        --y-9: 70%;
    }

    100% {
        --y-1: -3%;
        --c-1: hsla(0, 0%, 0%, 1);
        --x-1: 76%;
        --s-start-1: 8.392121895570533%;
        --s-end-1: 59.32232816638693%;
        --y-2: 18%;
        --s-start-2: 8.392121895570533%;
        --s-end-2: 28.52989037790774%;
        --c-2: hsla(0, 0%, 0%, 1);
        --x-2: 97%;
        --y-3: 18%;
        --c-3: hsla(0, 0%, 0%, 1);
        --x-3: 42%;
        --s-start-3: 8.392121895570533%;
        --s-end-3: 28.52989037790774%;
        --s-start-4: 8.392121895570533%;
        --s-end-4: 28.52989037790774%;
        --x-4: 66%;
        --y-4: 95%;
        --c-4: hsla(0, 0%, 0%, 1);
        --y-5: 92%;
        --x-5: 46%;
        --s-start-5: 8.392121895570533%;
        --s-end-5: 28.52989037790774%;
        --c-5: hsla(0, 0%, 0%, 1);
        --s-start-6: 24.72064437400016%;
        --s-end-6: 47.490620328604024%;
        --x-6: 102%;
        --y-6: 16%;
        --c-6: hsla(177.8102189781022, 59%, 55%, 1);
        --s-start-7: 10.200720718860145%;
        --s-end-7: 50.46456494288142%;
        --x-7: 22%;
        --c-7: hsla(177.8102189781022, 59%, 55%, 1);
        --y-7: 52%;
        --c-9: hsla(207.27272727272728, 44%, 49%, 1);
        --s-start-9: 6.294132688184733%;
        --s-end-9: 20.79106730744014%;
        --x-9: 97%;
        --y-9: 51%;
    }
}

/* Propiedades personalizadas */
@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(207.27272727272728, 44%, 49%, 1);
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63%;
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%;
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 38.584065253664996%;
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 93%;
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -7%;
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1);
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 33%;
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%;
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.10878124098502%;
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%;
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%;
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%;
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1);
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 84%;
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%;
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1);
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 14%;
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%;
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%;
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%;
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%;
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%;
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 96%;
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1);
}

@property --y-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 90%;
}

@property --x-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 93%;
}

@property --s-start-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%;
}

@property --s-end-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%;
}

@property --c-5 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1);
}

@property --s-start-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%;
}

@property --s-end-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 39.67138181429644%;
}

@property --x-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%;
}

@property --y-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 61%;
}

@property --c-6 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(177.8102189781022, 59%, 55%, 1);
}

@property --s-start-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%;
}

@property --s-end-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 49.58090142552271%;
}

@property --x-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 94%;
}

@property --c-7 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(177.8102189781022, 59%, 55%, 1);
}

@property --y-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 59%;
}

@property --s-start-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%;
}

@property --s-end-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 34.815367581495366%;
}

@property --x-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 48%;
}

@property --c-8 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(215.08771929824562, 100%, 33%, 1);
}

@property --y-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63%;
}

@property --c-9 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(207.27272727272728, 44%, 49%, 1);
}

@property --s-start-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%;
}

@property --s-end-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31.77166380372925%;
}

@property --x-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 96%;
}

@property --y-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 78%;
}

/* Sección de Beneficios */
.bene_section {
    margin: 0;
    padding: 60px 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsla(262, 82%, 3%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
                      radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
                      radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),
                      radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)),
                      radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)),
                      radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)),
                      radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)),
                      radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)),
                      radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)),
                      radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
    overflow: hidden;
    position: relative;
    width: 100%;
    color: #fff;
}

/* Contenedor principal donde van todos los íconos */
.bene_icon_container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
    gap: 30px;
    width: 100%;
}

/* Cada wrapper individual de ícono */
.bene_icon_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    min-width: 150px; /* Ancho mínimo para evitar que se hagan demasiado pequeños */
    flex: 0 0 calc(16.66% - 30px);
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    transition: transform 0.3s ease, background 0.3s ease;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

/* Asegurar que los lord-icon sean visibles */
.bene_icon_wrapper lord-icon {
    display: block !important;
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto 15px !important;
}

/* Estilos para las etiquetas debajo de los íconos */
.bene_icon_label {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    width: 100%;
}

/* Segunda línea de etiqueta */
.bene_icon_wrapper .bene_icon_label:last-child {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    font-weight: normal;
}

/* Efecto hover */
.bene_icon_wrapper:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.2);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Animaciones para los íconos */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bene_icon_wrapper {
    animation: fadeInUp 0.5s ease forwards;
    animation-delay: calc(0.1s * var(--i, 0));
    opacity: 0;
}

/* Asignar retrasos de animación */
.bene_icon_container:first-of-type .bene_icon_wrapper:nth-child(1) { --i: 1; }
.bene_icon_container:first-of-type .bene_icon_wrapper:nth-child(2) { --i: 2; }
.bene_icon_container:first-of-type .bene_icon_wrapper:nth-child(3) { --i: 3; }
.bene_icon_container:first-of-type .bene_icon_wrapper:nth-child(4) { --i: 4; }
.bene_icon_container:first-of-type .bene_icon_wrapper:nth-child(5) { --i: 5; }
.bene_icon_container:first-of-type .bene_icon_wrapper:nth-child(6) { --i: 6; }

.bene_icon_container:last-of-type .bene_icon_wrapper:nth-child(1) { --i: 7; }
.bene_icon_container:last-of-type .bene_icon_wrapper:nth-child(2) { --i: 8; }
.bene_icon_container:last-of-type .bene_icon_wrapper:nth-child(3) { --i: 9; }
.bene_icon_container:last-of-type .bene_icon_wrapper:nth-child(4) { --i: 10; }
.bene_icon_container:last-of-type .bene_icon_wrapper:nth-child(5) { --i: 11; }
.bene_icon_container:last-of-type .bene_icon_wrapper:nth-child(6) { --i: 12; }

/* Estilos responsivos */
@media (max-width: 1200px) {
    .bene_icon_wrapper {
        flex: 0 0 calc(20% - 30px);
    }
}

@media (max-width: 992px) {
    .bene_icon_wrapper {
        flex: 0 0 calc(25% - 30px);
    }
}

@media (max-width: 768px) {
    .bene_icon_wrapper {
        flex: 0 0 calc(33.33% - 30px);
    }
}

@media (max-width: 576px) {
    .bene_icon_wrapper {
        flex: 0 0 calc(50% - 30px);
    }
}

@media (max-width: 400px) {
    .bene_icon_wrapper {
        flex: 0 0 calc(100% - 30px);
    }
}