/* Import External Styles */
@import url('https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css');


.secondary-color {
    color: #95DB32 !important;
}

.secondary-color-strong {
    font-weight: 700;
    color: #95DB32 !important;
}

.strong-black {
    font-weight: 700;
    color: #10150A;
}

.strong-white {
    font-weight: 700;
    color: white;
}

body {
    background-color: #10150A;
}

#inicio {
    background-image: url('./images/Catalogo.webp');
    background-size: cover;
    height: 730px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

#inicio h1 {
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 110%;
    text-transform: uppercase;
    color: #FFFFFF;
    font-family: 'Montserrat';
}

#inicio p {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    text-align: center;
    letter-spacing: 0.1px;
    color: #FFFFFF;
    padding-top: 20px;
    padding-bottom: 15px;
    margin-bottom: 10px;
    font-family: 'Raleway';
}

.button-primary {
    padding: 10px 24px !important;
    font-size: 20px;
    font-weight: 700;
    background-color: #95DB32;
    border-radius: 1px;
    transition: background 0.3s;
    text-align: center;
    color: black;
    letter-spacing: 0.1px;
}

.button-primary:hover {
    background-color: #6cac11;
}

#inicio .button {
    background: #95DB32;
    color: black;
    text-decoration: none;
    align-items: center;
    padding: 8px;
    gap: 8px;
    width: 199px;
    height: 40px;
}



/* Responsive Design */
@media (max-width: 1024px) {
    #inicio {
        width: auto;
        height: fit-content;
        padding: 195px 29px;
        text-align: left;
    }

    #inicio .container {
        width: 304px;
    }

    #inicio h1 {
        width: 100%;
        font-size: 30px;
        min-width: 291px;
    }

    #inicio p {
        width: 100%;
        font-size: 16px;
        text-align: left;
        min-width: 291px;
    }

    #inicio button-primary {
        font-size: 14px;
        padding: 8px 16px;
        text-align: center;
    }

    #inicio box-text {
        text-align: left;
        align-items: last baseline;
    }

    #inicio .button {
        width: 100%;
    }
}



.content {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    color: black;
    text-align: center;
}

.content img {
    max-width: 100%;
    height: auto;
}


#inicio-promo {
    background:
        linear-gradient(to bottom,
            transparent 60%,
            #10150A 90%),
        url('./images/Inicio_pantalla_promo_1.png') center/cover no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 730px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

#inicio-promo .container {
    width: 801px;
    position: relative;
    z-index: 2;
}

#inicio-promo .box-text {
    position: relative;
    z-index: 2;
}

#inicio-promo .text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
}

#inicio-promo .text-content::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -50%;
    right: -50%;
    bottom: 0%;
    background: radial-gradient(ellipse at center,
            rgba(91, 157, 0, 0.7) 0%, rgba(32, 55, 0, 0.9) 15%, rgba(32, 55, 0, 0) 50%);

    /* background: radial-gradient(25.02% 16.85% at 50% 50%, #5B9D00 0%, #203700 100%); */
    z-index: -1;
    filter: blur(25px);
    /* Escala más ancha que alta */
    pointer-events: none;
}

#inicio-promo h1 {
    font-weight: 700;
    font-size: 40px;
    text-transform: uppercase;
    color: #FFFFFF;
    font-family: 'Montserrat';
    width: 647px;
    line-height: 110%;
    letter-spacing: 0px;

}

#inicio-promo p {
    width: 525px;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: 0.1px;
    color: #FFFFFF;
    padding-top: 20px;
    padding-bottom: 15px;
    margin-bottom: 10px;
    font-family: 'Raleway';
}

#inicio-promo .button {
    background: #95DB32;
    color: black;
    text-decoration: none;
    align-items: center;
    padding: 8px;
    gap: 8px;
    width: 290px;
    height: 40px;
    text-transform: uppercase;

}

#inicio-promo .title-promo {
    font-size: 32px;
}

.left-gift {
    position: absolute;
    left: -30px;
    bottom: -49px;
}

.right-gift {
    position: absolute;
    width: 220px;
    right: 10px;
    top: -70px;
}

@media (max-width: 1024px) {
    #inicio-promo {
        margin-top: -70px !important;
        margin-bottom: -100px;
        width: auto;
        height: 615px;
        padding: 195px 29px;
        text-align: left;

        background:
            linear-gradient(to bottom,
                transparent 60%,
                #10150A 90%),
            url('./images/Inicio_pantalla_promo_1.png') right center/cover no-repeat;
    }


    #inicio-promo h1 {
        font-size: 32px;
        width: 304px;
    }

    #inicio-promo .container {
        width: 304px;
        margin-top: 120px;
        padding-top: 100px;
    }

    #inicio-promo .title-promo {
        font-size: 20px;
        display: inline-block;
        line-height: 1.2;
    }

    #inicio-promo p {
        text-align: left;
        width: 224px;
    }


    .left-gift {
        width: 120px;
        left: 195px;
        bottom: 135px;
        transform: rotateY(180deg)
    }

    .right-gift {
        width: 105px;
        top: 50px;
        left: 195px;
    }

    #inicio-promo .text-content {
        padding: 0px;
        align-items: flex-start;
    }

    #inicio-promo .text-content::before {
        filter: blur(10px);
        top: -70%;
        left: -55%;
        right: -40%;
        bottom: -0%;
        background: radial-gradient(ellipse at center,
                /* Cambiado de 'circle' a 'ellipse' */
                rgba(91, 157, 0, 0.7) 2%, rgba(32, 55, 0, 0.5) 15%, rgba(32, 55, 0, 0) 40%);
    }
}

#cyber-promo {
    /* background:
        linear-gradient(to bottom,
            transparent 60%,
            #10150A 90%),
        var(--bg-image) center/cover no-repeat; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 760px;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

#cyber-promo .text-content {
    width: 656px;
    height: 382px;
    margin-left: 30px;

}

#cyber-promo .logo-cyber {
    width: 185px;
    height: auto;

}

#cyber-promo .text-container {
    display: flex;
    flex-direction: column;
    padding: 30px 0;
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 34px;
    line-height: 110%;
    letter-spacing: 0px;
    color: #FFFFFF;
}

#cyber-promo .offer-text {
    font-weight: 800;
    font-size: 120px;
    line-height: 100%;
    color: #95DB32;
}

#cyber-promo .cyber-details {
    width: 629px;
    font-family: 'Raleway';
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0.1px;
    color: #FFFFFF;
    padding-bottom: 30px;
}

#cyber-promo .cyber-details-strong {
    font-weight: 700;
}

#cyber-promo .button {
    background: #95DB32;
    color: black;
    text-decoration: none;
    align-items: center;
    padding: 10px;
    gap: 8px;
    width: 184px;
    height: 40px;
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
}

@media (max-width: 1024px) {


    #cyber-promo {
        justify-content: center;
        align-items: end;
        height: 630px;
        padding-bottom: 0px;
        background:
            linear-gradient(to top,
                #10150A 20%,
                rgba(16, 21, 10, 0.3) 60%,
                transparent 100%),
            url('./images/cyber-day/background-cyber1.webp') right top/auto 110% no-repeat;
        background-position-y: 180%;
    }

    #cyber-promo .container {
        width: 303px;
    }

    #cyber-promo .text-content {
        display: flex;
        flex-direction: column;
        justify-content: end;
        width: 303px;
        margin-left: 0px;
    }

    #cyber-promo .cyber-details {
        width: 303px;
    }

    #cyber-promo .logo-cyber {
        width: 102px;
        height: auto;
    }

    #cyber-promo .text-container {
        font-weight: 700;
        font-size: 20px;
    }

    #cyber-promo .offer-text {
        font-weight: 800;
        font-size: 64px;
    }
}


#servicios {
    background-color: #10150A;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 150px 20px;
}

#partners {
    background-color: #10150A;
}

#servicios h1 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 110%;
    text-transform: uppercase;
    color: #FFFFFF;
}

#servicios grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
}

#servicios grid-item {
    padding: 20px;
    text-align: center;
}

#servicios full-width {
    grid-column: span 3;
}

#servicios two-columns {
    grid-column: span 2;
}

#servicios one-column {
    grid-column: span 1;
}


#servicios h3 {
    color: white !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: 0.1px;
    margin-top: 20px;
    margin-bottom: 80px;
    font-family: Raleway !important;
}

#servicios .text-h2 {
    width: 325px;
    height: 138px;
    width: 325px;
    height: 138px;
    font-family: Montserrat;
    font-weight: 400;
    font-size: 24px;
    line-height: 29.26px;
    letter-spacing: 0%;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    color: #10150A;
    z-index: 2;
    text-align: left;
    padding-left: 25px;
    padding-top: 25px;
}

#servicios .text-h2-2 {
    width: 325px;
    height: 138px;
    font-family: Montserrat;
    font-weight: 400;
    font-size: 24px;
    line-height: 26.4px;
    letter-spacing: 0%;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    color: white;
    z-index: 2;
    text-align: left;
}

#servicios .text-h2-3 {
    width: 355px;
    height: 138px;
    font-family: Montserrat;
    font-weight: 400;
    font-size: 24px;
    line-height: 26.4px;
    letter-spacing: 0%;
    font-style: normal;
    color: white;
    z-index: 2;
    text-align: left;
    flex-direction: column;
    padding-top: 25px;
    padding-left: 15px;
}

#servicios .text-title {
    text-align: center !important;
    margin-top: 20px;
    margin-bottom: 60px;
}



#servicios .card-button svg {
    z-index: 2;
}

#servicios .btn {
    align-self: flex-start;
    width: 149px;
    height: 40px;
    padding: 10px 24px;

    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    text-transform: uppercase;

    color: #FFF;
    border-radius: 100px;
    background: #416900;
}

#servicios .card-button h2 {
    z-index: 10000;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 29px;
    text-align: start;
    color: #10150A;
    padding: 45px;
}

#servicios .card-button {
    width: 389px;
    height: 100%;
    position: relative;
    border-radius: 24px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    overflow: hidden;
}

#servicios .card-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #95DB32 28.5%, #3D6800 100%);
    transition: opacity 1s ease;
    z-index: 1;
}

#servicios .card-button:hover::before {
    opacity: 0;
}

#servicios .card-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #c9ff80 28.5%, #c9ff80 100%);
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1;
}

#servicios .speed.hardware:hover {
    
}

#servicios .card-button:hover::after {
    opacity: 1;
}

#servicios .card-computer {

    isolation: isolate;
    height: 252px;
    background-color: #142200;
    /* Base color */
    background-image:
        url("./images/Computer.svg"),
        /* Image in the middle */
        radial-gradient(circle at top left, rgba(105, 255, 0, 0.4) 4%, transparent 35%),
        /* First gradient ON TOP */
        radial-gradient(circle at top right, rgba(105, 255, 0, 0.5) 5%, transparent 50%);
    /* Second gradient BELOW IMAGE */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 24px;
    position: relative;
    display: flex;
    align-items: end;
    padding: 0px 20px;

}

#servicios .card-computer h2 {
    /* Existing styles */
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 110%;
    color: #FFFFFF;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    text-align: start;
}


#servicios .games {
    /* Card-juegos-disponible */
    width: auto;
    isolation: isolate;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(31.66deg, #1A2C00 16.67%, #243D01 52.4%, #65A70A 88.09%);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#servicios .games h2 {
    position: absolute;
    bottom: 0;
    margin: -20px 20px;
    text-align: start;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 110%;
    color: #FFFFFF;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
}

#servicios .games img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    transition: transform 0.3s ease;
    /* width: 360px;
    height: 100px; */
    transform: translateX(-8px);
}

#servicios .games:hover img {
    transform: translateX(-4px);
}

#servicios .speed {
    height: 175px;
    background: radial-gradient(100% 135.63% at 0% 72%, #192B00 0%, #0F1A00 44.5%, #2B4505 69%, #4E7713 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    align-items: flex-start;
    margin-bottom: 5px;
    position: relative;


}

#servicios .speed.hardware {
    /* ocupa todo el espacio sobrante */
    display: block;
}

/* la primera columna: fija */
#pepa>div:first-child {
    flex: 2;
    /* crece el doble */
    /* ancho fijo */
}

/* la segunda columna: lo que sobre */
#pepa>div:last-child {
    flex: 1;
    padding: 32px;
    color: #FFF;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    margin: auto;
    text-align: left;
}

#servicios .speed svg {
    transform: rotate(3deg);
    margin-top: 27px;
}

#servicios .speed h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 110%;
    color: #FFFFFF;
    width: 420px;
    /* Add these properties to prevent overflow */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    margin: 30px 0px 0px 20px;
    text-align: start;
}


.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.flex-container {
    padding: 0;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
}

.no-gutters {
    margin: 0;
}

.column-33 {
    width: auto;
}

@media (max-width: 1240px) {
    .column-33 {
        width: 33.3333%;
    }
}

.column-66 {
    width: 66.6666%;
}

#servicios .column-50 {
    width: 50%;
    padding: 5px;

}

.column-full {
    width: 100%;
    padding-left: 5px;
    display: flex;
    position: relative;

}

.flex-align-center {
    display: flex;
    align-items: center;
    padding: 0 5px 5px 0;
}

.padding-4 {
    padding: 1.5rem;
    /* Equivalent to Bootstrap's p-4 */
}

.margin-bottom-3 {
    margin-bottom: 1rem;
    /* Equivalent to Bootstrap's mb-3 */
}

.strong-black {
    font-weight: bold;
    color: #000;
}

.mobile-text {
    display: none;
}

.desktop-text {
    font-family: Montserrat;
    line-height: 26.4px;
    font-size: 22px;
    letter-spacing: 0%;
    text-align: left;
    color: white;
    position: absolute;
    padding: 26px 32px;   
}

#servicios .games-desktop-text-h2 {
    font-size: 22px;
    line-height: 26.4px;
    letter-spacing: 0%;
    display: block;
    width: 355px;
    height: 138px;
    font-family: Montserrat;
    font-weight: 400;
    font-style: normal;
    color: white;
    z-index: 2;
    text-align: left;
    flex-direction: column;
    padding-top: 25px;
    padding-left: 15px;
}

#servicios .games-mobil-text-h2 {
    display: none;
}


@media (max-width: 1024px) {

    #pepa {
        flex-direction: column;
        margin-bottom: 10px;
    }
    
    #servicios .speed.hardware {
    font-size: 16px;
    padding: 30px;
}
    #servicios .container {

        display: flex;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        width: 304px;
    }

    #servicios h1 {
        font-size: 30px;
        min-width: 291px;
    }

    #servicios h3 {
        font-size: 16px;
        text-align: left;
        margin-bottom: 20px;
        min-width: 291px;

    }

    #servicios .box-text {
        text-align: left !important;
        margin-top: 20px;
    }


    #servicios .card-button svg {
        margin: unset;
    }

    #servicios games-image {
        height: 81px !important;
    }

    #servicios .games img {
        height: 81px !important;
    }

    #servicios .games-desktop-text-h2 {
        display: none;

    }

    #servicios .games-mobil-text-h2 {
        font-size: 16px;
        line-height: 19.2px;
        letter-spacing: 0.1px;
        display: block;
        width: 260px;
        height: 138px;
        font-family: Montserrat;
        font-weight: 400;
        font-style: normal;
        color: white;
        z-index: 2;
        text-align: left;
        flex-direction: column;
        padding-top: 88px;
        padding-left: 20px;
    }

    #servicios .card-button {
        height: 141px;
        min-width: 291px;
    }

    #servicios .text-h2 {
        height: 138px;
        font-family: Montserrat;
        font-weight: 400;
        letter-spacing: 0%;
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        color: #10150A;
        z-index: 2;
        text-align: left;
        padding-left: 20px;
        padding-top: 25px;
        font-family: Raleway;
        font-size: 16px;
        line-height: 19.2px;
        letter-spacing: 0.1px;
    }

    #servicios .text-h2-2 {

        /* Deja de gastar en hardware costoso e invierte tu dinero en lo que realmente te importa: tus juegos. */
        width: 290px !important;
        height: 138px;
        font-family: Montserrat;
        font-weight: 400;
        letter-spacing: 0%;
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        color: white;
        z-index: 2;
        text-align: left;
        padding-left: 20px;
        padding-top: 60px;
        font-size: 16px;
        line-height: 19.2px;
        letter-spacing: 0.1px;
    }


    .mobile-text {
        padding-left: 25px;
        padding-top: 25px;
        display: block;
        font-family: Montserrat;
        font-weight: 400;
        text-align: left;
        color: white;
        font-size: 16px !important;
        line-height: 19.2px;
        letter-spacing: 0.1px;
        padding-bottom: 30px;
    }

    .desktop-text {
        display: none;
    }

    .class-66,
    .class-33 {
        width: 100%;
        /* Ensures full width on small screens */
    }

    /* Adjust breakpoint as needed */
    .column-33 {
        width: 100%;
        height: 100%;
        margin-bottom: 20px;
    }

    .column-66 {
        width: 100%;
        height: 100%;
    }

    .column-50,
    .column-full {
        width: 100%;
        height: 100%;
        /* margin-top: 16px; */
        padding: 0 !important;
    }

    .responsive-svg {
        width: 45%;
        /* Full width of container */
        height: 75px;
        transform: scale(7);
        align-self: flex-end;
    }

    #servicios .speed svg {
        width: 60%;
        /* Full width of container */
        height: 181px;
        transform: scale(2);
        align-self: flex-start;
        padding-top: 40px;
    }

    #servicios .speed h2 {
        width: 213px;
    }

    #servicios .speed {
        height: 140px;
        padding: unset;
        align-items: center;
        min-width: 291px;
    }



    #servicios .column-50 {
        width: 100%;
        height: 140px;
    }

    #servicios .card-computer {
        width: auto;
        padding: unset;
        height: 140px;
    }

    #servicios .games {
        width: auto;
        height: 140px;
        padding: unset;
        margin-top: 16px;
    }

    .card-button h2 {
        text-align: left;
        padding-top: 10px;
    }

    .card-button {
        max-height: 241px;
    }

    .flex-row {
        flex-direction: column;
    }

    .flex-align-center {
        align-items: flex-start;
        /* Adjust alignment for mobile */
    }

    .padding-4 {
        padding: 1rem;
        /* Reduce padding on mobile if desired */
    }


}


#dispositivos {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 20px;
}

#dispositivos .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Capa más baja */
}


#dispositivos .video-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(176.04deg, #11150A 2.92%, rgba(17, 21, 10, 0) 50.76%),
        linear-gradient(180deg, rgba(17, 21, 10, 0) 0%, #11150A 48.22%);
    z-index: 1000;
    /* Por encima del video pero debajo del contenido */
}

#dispositivos .video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Asegúrate de que el contenedor principal esté encima del video */
#dispositivos .container {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    /* Por encima del video */
}

#dispositivos .card {
    width: 286px;
    height: 414px;
    border-radius: 24px;
    background-color: #1b250e;
    background-image: url('./images/card-1.webp');
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    border: 2px solid #272C20;
    transition: box-shadow 0.5s ease-out, border-color 0.5s ease-out;
    text-align: center;

}

#dispositivos .card .card-text {
    position: absolute;
    top: 312px;
}

#dispositivos .card .card-text-doble {
    position: absolute;
    top: 294px;
}


#windows-png {
    width: 255;
    height: 255;
    top: 20px;
    left: 16px;
}

#dispositivos .card img {
    position: absolute;
}

#dispositivos .overlay {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    background-color: rgba(16, 21, 10, 0.70);
    backdrop-filter: blur(3.5px);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: all 0.8s ease-out;
    /* Changed from opacity to all */
}

#dispositivos .swiffy-slider {
    max-width: 100%;
    /* Evita que el slider sea más grande que su contenedor */
    overflow: hidden;
    /* Asegura que los elementos no sobresalgan */
    margin: 30px 0;
}

#dispositivos .container-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: 'Montserrat';

}

#dispositivos .text-container {
    width: 690px;
}


#dispositivos .slider-container {
    display: flex;
    gap: 20px;
}

#dipositivos .overlay svg {
    width: 64px;
    height: 111px;
}

#dispositivos .card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    border: 2px solid #8AC43A;


}

#dispositivos .card:hover .overlay {
    opacity: 0;
}

/* Hover */
.slider-nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: white;
    font-size: 20px;
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    padding: 0;
    /* From .slider-nav.slider-nav-next */
}

/* Specific positioning for prev/next */
.slider-nav-prev {
    left: 10px;
}

.slider-nav-next {
    right: 10px;
}

/* Override for next button size (if intentional) */
.slider-nav.slider-nav-next {
    width: 38px;
    height: 38px;
}

/* SVG sizing for next button */
.slider-nav.slider-nav-next svg {
    width: 24px;
    height: 24px;
}

/* Transparent background for pseudo-elements */
.slider-nav-round .slider-nav::before,
.slider-nav-square .slider-nav::before,
.slider-nav-dark.slider-nav-round .slider-nav::before,
.slider-nav-dark.slider-nav-square .slider-nav::before {
    background-color: transparent;
}

#dispositivos h1 {
    text-align: center;
    color: #FFFFFF;
    /* font-family: 'Montserrat'; */
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 110%;
    margin-top: 30px;
}

#dispositivos h4 {
    text-align: center;
    font-family: 'Raleway' !important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    letter-spacing: 0.1px;
    margin-top: 30px;
    color: #FFFFFF;

}


#dispositivos .card h3 {
    /* Navegador Safari */



    /* H5/Bold */
    /* font-family: 'Montserrat'; */
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    /* or 26px */
    text-align: center;
    margin: 0px 0px;
    color: #95DB32 !important;
    top: 314px;

}

#dispositivos .card p {
    /* font-family: 'Raleway'; */
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 140%;
    text-align: center;
    color: white;


}


#dispositivos .button {


    background: #95DB32;
    color: black;
    text-decoration: none;

    align-items: center;
    padding: 8px;
    gap: 8px;

    width: 199px;
    height: 40px;
}

#dispositivos .slider-nav {
    margin: 0;
}

#dispositivos .custom-image {
    width: 50%;
}

@media (max-width: 1024px) {
    #dispositivos .card {
        width: 290px;
        height: 400px;
        justify-content: center;
        border: 2px solid #8AC43A;
    }

    #dispositivos .card img {
        position: static;
    }

    #dispositivos .card .card-text {
        position: unset;
    }

    #dispositivos .card .card-text-doble {
        position: unset;
    }

    #dispositivos .custom-image {
        height: auto;
        position: relative;
        overflow: hidden;
    }

    #dispositivos .chrome-txt {
        padding-top: 38px;
    }

    #dispositivos .overlay {
        display: none;
    }

    #dispositivos .swiffy-slider {
        margin: 30px 10px 0 10px;
        padding: 20px 60px;
        height: 450px;
    }

    #dispositivos .slider-nav {
        margin: 0 10px !important;
    }

    #dispositivos .overlay {
        display: none;
    }

    #dispositivos .text-container {
        text-align: left;
        width: 303px;
        margin-bottom: 50px;
    }

    #dispositivos .container-header h1 {
        width: 303px;
        text-align: left;
        font-family: 'Montserrat';
        font-size: 28px;

        font-weight: 700;
        font-size: 28px;
        line-height: 30.8px;
        letter-spacing: 0.5px;

    }

    #dispositivos .button {
        width: 298px;
    }

}

@media (max-width: 450px) {
    #dispositivos .card {
        width: 270px;
        height: 400px;
        justify-content: center;
        border: 2px solid #8AC43A;
    }
}

@media (max-width: 430px) {
    #dispositivos .card {
        width: 200px;
        height: 300px;
        justify-content: center;
        border: 2px solid #8AC43A;
    }

    #dispositivos .chrome-txt {
        padding-top: 0;
    }


}

@media (max-width: 360px) {
    #dispositivos {
        padding: 20px;
    }

    #dispositivos .card {
        width: 160px;
        height: 300px;
        justify-content: center;
        border: 2px solid #8AC43A;
    }

    #dispositivos .swiffy-slider {
        margin: 30px 10px 0 10px;
        padding: 20px 60px;
        height: 450px;
    }

    #dispositivos .slider-nav {
        margin: 0 10px !important;
    }

    #dispositivos .overlay {
        display: none;
    }

    #dispositivos .text-container {
        text-align: left;
        width: 303px;
        margin-bottom: 50px;
    }

    #dispositivos .container-header h1 {
        width: 303px;
        text-align: left;
        font-family: 'Montserrat', serif;
        font-size: 28px;

        font-weight: 700;
        font-size: 28px;
        line-height: 30.8px;
        letter-spacing: 0.5px;

    }

    #dispositivos .button {
        width: 298px;
    }



}

#steps {
    background-color: #10150A;
    /* background-image: url("./images/servers2.svg"); */
    background-repeat: no-repeat;
    /* background-size: 800px 581px;
    height: 700px; */
    position: relative;
    height: 682px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    padding-top: 150px;
}

#steps .container {
    width: 100%;
    display: flex;
    align-items: center;
}


#steps .img-container {
    flex: 1;
    /* Toma el espacio disponible */
    display: flex;
    justify-content: flex-start;
    /* Asegura que respete el margen izquierdo */
    overflow: hidden;
}

#steps .img-container img {
    width: 80%;
    height: auto;
    max-width: 100%;
    /* Se ajusta al contenedor */
    object-fit: cover;
    /* Mantiene proporción y cubre el área */

    /* Aplica el difuminado en el lado izquierdo */
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%);
    transform: translateX(-120px);
}

#steps .text-container {
    text-align: left;
    position: absolute;
    left: 50%;
    z-index: 2;
    padding: 20px;
    font-family: 'Montserrat';
}


#steps .text-h2 {
    /* H2/Bold/32 */
    /* font-family: 'Montserrat'; */
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 110%;
    /* or 35px */
    text-transform: uppercase;
    width: 596px;

    color: #FFFFFF;
}

#steps .button {
    text-align: center;
    padding: 8px;
    gap: 8px;
    background-color: #95DB32;
    color: black;
    width: 183px;
    height: 40px;
    text-decoration: none;

}


#steps .text {
    display: flex;
    align-items: center;

}

#steps .text h3 {
    color: white;
    width: 500px;
    height: 58px;

    /* H5/Regular */
    /* font-family: 'Montserrat'; */
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 110%;

    span {
        font-weight: 700;
    }
}


@media (max-width: 1024px) {
    #steps {
        background-image: url("./images/servers2.webp");
        background-size: cover;
        background-position-y: 320px;
        background-position-x: -360px;
    }

    #steps .container {
        justify-content: center;
    }

    #steps .img-container {
        display: none;
    }

    #steps .text-container {
        width: 303px;
        left: unset;
        padding: 0;
    }

    #steps .text-h2 {
        width: 303px;
        font-size: 24px;
        font-weight: 700;
    }

    #steps .text h3 {
        font-size: 16px;
        width: 300px;
        height: 20px;
    }

    #steps .button {
        width: 100%;
    }
}

#parallax {
    position: relative;
    height: 90vh;
    /* Ocupa toda la altura de la ventana */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fondo con gradiente y parallax */
.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(180deg, #10150A 0%, rgba(16, 21, 10, 0) 25%, rgba(16, 21, 10, 0) 75%, #10150A 100%),
        /* Degradado original */
        linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0) 50%),
        /* Sombreado inferior más fuerte */
        url('./images/free.webp');
    /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    z-index: -1;
    will-change: transform, opacity;
}

/* Contenido que se mueve normalmente */
#parallax .content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.32);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 48px;
    transition: all 0.2s ease;
    padding: 60px 49px;

    /* Reemplaza el ancho fijo con valores más responsivos */
    max-width: 803px;
    /* Ancho máximo para pantallas grandes */
    min-height: 316px;
    /* Altura mínima */

}

#parallax .content a {
    text-decoration: none;
    /* label-text */
    background-color: #95DB32;


    /* GFN-material-theme/label/label - prominent */
    /* font-family: 'Montserrat'; */
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    text-transform: uppercase;
    color: #203700;
    width: 183px;
    height: 40px;
    padding: 10px 24px;

}

#parallax .content .text-h2 {
    /* H2/Bold/32 */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 110%;
    /* or 35px */
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

#parallax .content h3 {
    /* Text/Regular 16 */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    /* or 19px */
    text-align: center;
    letter-spacing: 0.1px;
    color: #FFFFFF;
    margin-top: 30px;
    margin-bottom: 30px;
}

.content:hover {
    /* Property 1=hover */
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #95DB32;
    box-shadow: 0px 0px 60px rgba(149, 219, 50, 0.6);
    backdrop-filter: blur(10px);
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 48px;
}

/* Div que tapa el fondo fijo */
.overlay-div {
    position: relative;
    z-index: 2;
    height: 80px;
    background-color: #10150A;
}

.overlay-div::before {
    content: "";
    position: absolute;
    top: -80px;
    /* Mucho más arriba para mayor elevación */
    left: 0;
    width: 100%;
    height: calc(100% + 300px);
    /* Considerablemente más alto para mayor dispersión */
    background: linear-gradient(180deg,
            rgba(16, 21, 10, 0) 0%,
            rgba(16, 21, 10, 0.1) 2%,
            /* Inicio muy sutil */
            rgba(16, 21, 10, 0.3) 5%,
            /* Rápido incremento inicial */
            rgba(16, 21, 10, 0.7) 10%,
            /* Impacto fuerte temprano */
            rgba(16, 21, 10, 0.9) 15%,
            rgba(16, 21, 10, 1) 20%,
            /* Llegada a opacidad total más temprano */
            rgba(16, 21, 10, 0.9) 30%,
            rgba(16, 21, 10, 0.7) 40%,
            rgba(16, 21, 10, 0.5) 50%,
            rgba(16, 21, 10, 0.3) 65%,
            rgba(16, 21, 10, 0.15) 80%,
            /* Desvanecimiento muy extendido y sutil */
            rgba(16, 21, 10, 0.05) 90%,
            rgba(16, 21, 10, 0) 100%);
    /* Difuminado completo hasta el final */
    z-index: -1;
    pointer-events: none;
}

.overlay-div2 {
    position: relative;
    z-index: 2;
    height: 0px;
    background-color: #10150A;
}

.overlay-div2::after {
    /* Cambio a ::after para el nuevo efecto */
    content: "";
    position: absolute;
    bottom: -50px;
    /* Cambiado de top a bottom */
    left: 0;
    width: 100%;
    height: calc(100% + 200px);
    background: linear-gradient(0deg,
            rgba(16, 21, 10, 0) 0%,
            rgba(16, 21, 10, 0.1) 2%,
            /* Inicio muy sutil */
            rgba(16, 21, 10, 0.3) 5%,
            /* Rápido incremento inicial */
            rgba(16, 21, 10, 0.7) 10%,
            /* Impacto fuerte temprano */
            rgba(16, 21, 10, 0.9) 15%,
            rgba(16, 21, 10, 1) 20%,
            /* Llegada a opacidad total más temprano */
            rgba(16, 21, 10, 0.9) 30%,
            rgba(16, 21, 10, 0.7) 40%,
            rgba(16, 21, 10, 0.5) 50%,
            rgba(16, 21, 10, 0.3) 65%,
            rgba(16, 21, 10, 0.15) 80%,
            /* Desvanecimiento muy extendido y sutil */
            rgba(16, 21, 10, 0.05) 90%,
            rgba(16, 21, 10, 0) 100%);
    /* Difuminado completo hasta el final */
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 1024px) {
    #parallax {
        padding: 0 20px;
    }
}


#gamer {
    position: relative;
    /* Asegura un nuevo contexto de apilamiento */
    background-color: #10150A;
    /* background-image: url("./images/gamer.png"); */
    z-index: 3;
    /* Mayor que overlay-div2 pero no necesita ser 10000 */
    isolation: isolate;
    /* Crea un nuevo contexto de apilamiento */
    background-repeat: no-repeat;
    background-position: right center;
    /* height: 674px; */
    background-size: 990px;
    padding: 60px 20px 100px 20px;
}

#gamer .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#gamer .img-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
}

#gamer .img-container img {
    width: 80%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    transform: translateX(120px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
}



#gamer .text-container-header {
    width: 446px;

    text-align: left;
    position: absolute;
    right: 50%;
    z-index: 2;
    font-family: 'Montserrat';
    margin: 130px;

}

#gamer .text-h2 {
    width: 446px;
    height: 70px;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 110%;
    text-transform: uppercase;
    color: white;


}

#gamer p {
    width: 446px;
    height: 57px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0.1px;
    margin: 30px 0;
    color: #FFFFFF;
    font-family: 'Raleway' !important;

}


#gamer svg {
    margin-right: 15px;
}

#gamer .text .title {
    display: flex;
    align-items: center;
}

#gamer .text {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 30px;
}

#gamer .text-container h3 {
    width: 422px;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #FFFFFF;
    text-align: start;
}

#gamer .text h5 {
    width: 446px;
    height: 19px;
    text-align: start;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0.1px;
    margin-left: 30px;
    color: #FFFFFF;
}

#gamer .title {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

#gamer .text-list h5 {
    margin-left: 30px;
    padding: 20px 0;
    font-family: 'Raleway';
}

@media (max-width: 1230px) {
    #gamer .text-container-header {
        right: 40%;
    }
}

@media (max-width: 1024px) {

    #gamer {
        padding: 10px 20px 60px 20px;
        width: 100%;
    }

    #gamer .container {
        display: flex;
        flex-direction: column;
    }

    #gamer .text-container-header {
        position: unset;
        right: unset;
        width: 304px;
        margin-bottom: 0px;
    }

    #gamer .text .text-h2 {
        width: unset;
        font-size: 24px;

    }

    #gamer .text p {
        width: unset;
        height: unset;

    }

    #gamer .img-container {
        justify-content: center;
        transform: translateY(-80px);
    }

    #gamer .img-container img {
        transform: unset;
        width: 160% !important;
        height: auto;
        /* Mantiene la proporción correcta */
        max-width: unset;
        /* Evita que la imagen sobresalga */
        max-height: unset;
        object-fit: contain;
        /* Asegura que la imagen se vea completa */
        filter: brightness(80%);
    }



    #gamer .title h3 {
        width: unset;
    }

    #gamer .text {
        font-family: 'Raleway' !important;
    }


}

#review {
    position: relative;
    background-color: #10150A;
    padding-top: 120px;
    isolation: isolate;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image:
        linear-gradient(180deg, #10150A 0%, rgba(16, 21, 10, 0) 25%, rgba(16, 21, 10, 0) 75%, #10150A 100%),
        /* Degradado original */
        linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0) 50%),
        /* Sombreado inferior más fuerte */
        url("./images/review.webp");
}

#review .carousel-container {
    display: flex;
    justify-content: center;
}

#review custom-position {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.5rem;
    display: flex;
    align-items: flex-start;
}


#review .text-h2 {
    width: 743px;
    height: 88px;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 110%;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;


}

#ending {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image:
        linear-gradient(180deg, #10150A 0%, rgba(16, 21, 10, 0) 25%, rgba(16, 21, 10, 0) 75%, #10150A 100%),
        /* Degradado original */
        linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0) 50%),
        /* Sombreado inferior más fuerte */
        url("./images/Fondo-cierre.webp");
}

#ending .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
}

#ending img {
    width: 746px;
    height: 469px;
    top: 6789px;
    left: 112px;
}

#ending .container .text-container {

    color: #FFFFFF;

    .title {
        display: flex;
        margin-bottom: 20px;
    }

    .title h2 {
        font-weight: 700;
        font-size: 40px;
        line-height: 44px;
        letter-spacing: 0%;
        font-family: 'Montserrat';
    }

    .title img {
        width: 49px;
        height: 43px;
    }

    h4 {
        color: white;
        width: 389px;
        height: 38px;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 19.2px;
        letter-spacing: 0.1px;
        margin-bottom: 40px;
        font-family: 'Raleway';
    }
}

#ending .button {
    background: #95DB32;
    color: black;
    text-decoration: none;
    align-items: center;
    padding: 8px;
    gap: 8px;
    width: 199px;
    height: 40px;
}


@media (max-width: 1024px) {
    #ending .container {
        flex-direction: column-reverse;
    }

    #ending .button {
        width: 100%;
    }

    #ending .text-container {
        width: 304px;
    }

    #ending .container img {
        height: unset;
    }

    #ending h4 {
        width: 304px !important;
    }
}

#review .container-header {
    display: flex;
    justify-content: center;
    font-family: 'Montserrat';

}

#review .title {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 40px;
}


#review .slider-container {
    width: 867px;
    height: 390px;
}

#review .swiffy-slider {
    max-width: 867px;
    align-items: center;
    align-content: center;
    overflow: hidden;
    margin: 30px;
}

#review .slider-nav {
    margin: 0 0px;
    transform: translateY(-100%);
}

#review .slide-visible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 17px;
    width: 100%;
}


#dispositivos .container-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


#review .card {
    max-width: 655px;
    width: 655px;
    height: 209px;
    border-width: 1px;
    background-color: rgba(0, 0, 0, 0.61);
    opacity: 1;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

#review .card img {
    position: relative;
    top: -43px !important;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 10px;
    width: 177px;
    height: 49px;
}

#review .card-text {
    color: #FFFFFF;
    font-weight: 400;
    font-size: 24px;
    line-height: 29.26px;
    letter-spacing: 0%;
    text-align: center;
    font-family: 'Montserrat';
}

#review .commenter {
    display: flex;
    align-items: center;
}

#review .commenter img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

#review .commenter span {
    margin-left: 0.5rem;
    font-weight: bold;
}



@media (max-width: 1024px) {
    #review {
        padding-top: 60px;
    }

    #review .slider-container {
        width: 300px;
        height: auto;
    }

    #review .container {
        width: 304px;
    }

    #review .text-h2 {
        font-size: 24px;
        text-align: left;
    }

    #review .swiffy-slider {
        width: auto;
        margin: unset;
        align-content: unset;
        overflow: visible;
    }

    #review .slide-visible {
        width: 300px;
        padding: unset !important;
        justify-content: unset;
        flex-direction: unset;
    }

    #review .slide-visible .card-content {
        width: 300px !important;
    }

    #review .card {
        width: auto;
        max-height: 273px;
        height: auto;
    }

    #review .card-text {
        color: #FFFFFF;
        font-weight: 400;
        font-size: 16px;
        line-height: 120%;
        letter-spacing: 0.1px;
        text-align: center;
        padding: 20px;
        padding-top: 0px;
        transform: translateY(-20px);
    }

    #review .card img {
        position: relative;
        top: -25px;
        /* Lo mueve hacia arriba */
        left: 50%;
        transform: translateX(-50%);
        /* Lo centra */
        padding: 5px 10px;
        border-radius: 10px;
        width: 177px;
        height: 49px;
    }

}

@media (max-width: 360px) {

    #review .slide-visible {
        width: 254px !important;
        margin: unset;
    }

    #review .slider-container {
        width: 354px;
        padding-left: 52px !important;
        padding-top: 25px;
        /* overflow-x: unset !important; */
    }

    #review .slider-nav {
        margin: -20px 20px;
    }

    #review .swiffy-slider {
        /* --swiffy-slider-nav-outside-size: -1.0rem; */
        /* position: relative; */

    }

}

.card:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

#technology {
    background-repeat: no-repeat;
    background-position: center center;
    isolation: isolate;
    background-size: cover;
    justify-content: center;
    display: flex;
    padding-top: 60px;

    background-image:
        linear-gradient(180deg, #10150A 0%, rgba(16, 21, 10, 0) 25%, rgba(16, 21, 10, 0) 75%, #10150A 100%),
        /* Degradado original */
        linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0) 50%),
        /* Sombreado inferior más fuerte */
        url("./images/tech-background.webp");
}

#technology .container {
    display: flex;
    max-width: 1200px;
    width: 100%;
    gap: 20px;
    flex-direction: column;
    align-items: center;

}

#technology .title {
    font-family: 'Montserrat';
    color: #FFFFFF !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 904px;
    padding: 0 120px;
    text-align: center;
    margin-bottom: 40px;

    .text-info {
        font-family: 'Raleway';
    }
}

#technology .title-h2 {
    width: 864px;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 20px;
}

#technology .info {
    width: 40%;
}

#technology .accordion {
    display: flex;
    flex-direction: column;
}

#technology .accordion-item {
    background: rgba(0, 0, 0, 0);
    border: 0px;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
}


#technology .tech-section {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

#technology .tech-section {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

#technology .tech-section.border-green-800::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(to right, #95DB32, rgba(0, 88, 0, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

#technology .info {
    display: flex;
    width: 100%;
}

#technology .info-container {
    width: 461px;
    font-family: 'Montserrat';
    padding-left: unset;
    padding-left: 20px;
    margin-right: 28px;
}


#technology img-comparison-slider {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    position: relative;
}

#technology img-comparison-slider::part(second) {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

#technology img-comparison-slider::part(second) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#technology .title-text {
    font-weight: 400;
    font-size: 24px;
    line-height: 26.4px;
    letter-spacing: 0%;
}

#technology .description-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 19.2px;
    letter-spacing: 0.1px;
    font-family: 'Raleway' !important;

}

#technology .selected-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 26.4px;
    letter-spacing: 0%;
}

#technology .tech-image {
    width: 699px;
    height: 478px;
    border-radius: 24px;
    border-width: 5px;
    border-color: #272C20;
    border-style: solid;
    overflow: hidden;
}

#technology .tech-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#technology .tech-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1024px) {

    #technology .selected-title {
        font-weight: 700;
        font-size: 16px !important;
        line-height: 120%;
        letter-spacing: 0.1px;
    }

    #technology .title-text {
        font-size: 16px !important;
        line-height: 120%;
        letter-spacing: 0.1px;
    }

    #technology .description-text {
        display: none;
    }

    #technology .container {
        width: 304px;
        padding: unset;
    }

    #technology .title {
        width: 304px;
        padding: 0;
        text-align: left;
        font-weight: 400;
        font-size: 16px;
        line-height: 19.2px;
        letter-spacing: 0.1px;
        margin-bottom: 10px;
        font-family: 'Raleway' !important;
    }

    #technology .description-text {
        font-family: 'Raleway' !important;
    }


    #technology .title-h2 {
        width: 304px;
        text-align: left;
        font-weight: 700;
        font-size: 24px;
        line-height: 26.4px;
        letter-spacing: 0%;
        font-family: 'Raleway' !important;
    }

    #technology .info {
        flex-direction: column;
    }

    #technology .left-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    #technology .info-container {
        width: 304px;
        font-size: 24px;
    }

    #technology .img-container {
        display: flex;
        justify-content: center;
        width: 304px;
        align-items: center;
    }

    #technology .tech-image {
        width: unset;
    }


}

@media (max-width: 1270px) {
    .footer-widgets {
        align-items: center !important;
    }
}

@media (max-width: 1024px) {
    .wp-block-social-links.alignright {
        justify-content: center;
    }

    .footer-widgets.col-4 .block {
        width: 50% !important;
    }

}

@media (max-width: 500px) {
    .footer-widgets.col-4 .block {
        width: 100% !important;
    }

    #servicios {
        padding: 60px 20px;
    }
}