@media (max-width: 1920px) {
    .items > div {
        width: 320px;
        height: 320px;
    }

    .div-three .items img {
        width: 64px;
    }

    .div-three .items label {
        font-size: 28px;
    }

    h3 {
        font-size: 2.2rem;
    }

    .main-info > label {
        font-size: 20px;
    }

    h4 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 3rem;
    }


    .bg-omnichannel img {
        width: 1600px;
    }

    .card-body {
        font-size: 18px;
    }

        .card-body > img {
            height: 150px;
        }


    .banner > .container-gest > .div-three {
        height: 700px;
        padding: 100px;
    }

    .ic-pos {
        margin-top: 52px;
    }

        .ic-pos > img {
            width: 24%;
        }


}

@media (max-width: 1680px) {
    .items > div {
        width: 250px;
        height: 250px;
    }


    .div-three .items label {
        font-size: unset;
    }

    h3 {
        font-size: 2rem;
    }

    .main-info > label:last-child {
        font-size: 18px;
    }

    .main-info > label:last-child {
        font-size: 16px;
    }

    h4 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    .bg-omnichannel img {
        width: 1200px;
    }

    .card-body {
        font-size: 15px;
    }

        .card-body > img {
            height: 120px;
        }


    .banner > .container-gest > .div-three {
        background-image: linear-gradient(#FFFFFF, #F2F2F2);
        height: 500px;
        padding: 40px;
    }


    .ic-pos {
        margin-top: 8px;
    }

        .ic-pos > img {
            width: 21%;
        }
}

@media (max-width: 1536px) {
}

@media (max-width: 1366px) {

    h3 {
        font-size: 1.75rem;
    }

    .items > div {
        width: 230px;
        height: 230px;
    }

}

@media (max-width: 1280px) {
}

@media (max-width: 1190px) {

}

@media (max-width: 1080px) {


}

@media (max-width: 980px) {
    .main-options > div:nth-child(2), .main-options > div:nth-child(4), .main-options > div:first-child, .main-options > div:nth-child(3) {
        padding-left: 0;
        padding-right: 0;
    }

    .main-options .w-50 {
        width: 100% !important;
    }

    .business, .contact {
        flex-direction: column !important;
        padding: 0 120px 100px;
    }

        .business > div {
            justify-content: center;
            text-align: center;
        }

        .business > div:first-child {
            flex-direction: row !important;
        }


    .w-50 {
        width: unset !important;
    } 


}

@media (max-width: 420px) {

    .container {
        padding: 0 20px;
    }

    .home, .solutions, .news, .business, .services, .clients, .contact {
        padding-bottom: 80px;
    }

    .home {
        flex-direction: column !important;
        margin-top: 6rem;
    }

        .home > img {
            width: 300px;
        }

        .home > .text-right {
            text-align: center !important;
        }

    h2 {
        font-size: 24px;
    }

    .main-options, .main-news, .main-clients {
        padding-top: 50px;
    }

    .business, .contact, .services {
        padding: 0 20px;
        padding-bottom: 100px;
        flex-wrap: wrap;
        justify-content: center;
    }

        .services > div {
            padding: 15px;
            margin-right: unset;
            margin-bottom: 15px;
            height: 180px;
        }

        .services .title > h3 {
            font-size: 15px;
        }

        .services .info > img {
            width: 32px;
        }

    .owl-carousel {
        flex-direction: column;
    }

    .w-25, .w-40 {
        width: 100% !important;
    }

    .owl-carousel > div:nth-child(2) {
        margin: 0px;
        margin-top: 40px;
    }

    ul {
        padding-inline-start: 0px;
    }

    .container-retail > .div-two > div {
        padding: 40px 0;
        text-align: left;
    }

    .container-retail > .div-two > h4 {
        text-align: center;
    }

    .pl-4, .pr-4 {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }

    .mt-5 {
        margin-top: 0rem !important;
    }

    .pb-30 {
        padding-bottom: 30px;
    }

    .o-2 {
        order: 2;
    }

    .o-1 {
        order: 1;
    }

    .banner > .container-retail > .div-one, .banner > .container-omni > .div-one, .banner > .container-gest > .div-one {
        height: 400px;
    }

    .banner > .container-omni > .div-two {
        padding: 40px 0;
    }

    /*.banner > .container-gest > .div-one, .banner > .container-gest > .div-two {
        width: 29%;
    }*/

        .banner > .container-gest > .div-two > h4 {
            font-size: 18px;
            text-align: center;
        }

    .banner > .container-omni > .div-three, .banner > .container-omni > .div-two {
        height: unset;
    }

    .container-omni > .div-two > div {
        padding: 20px 40px;
    }

    .banner > .container-gest > .div-two {
        height: unset;
        padding: 30px;
    }

    .items {
        flex-direction: column !important;
    }

    .banner > .container-gest > .div-three {
        height: unset;
    }

    .items > div {
        margin-top: 20px;
    }

    .container-references > .div-two > div {
        flex-direction: column !important;
    }
}

/* ========= ESTILOS RESPONSIVE ========= */
/* ==================== MENÚ MOBILE ==================== */
#menu-toggle {
    display: none;
}

.menu-icon {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: white;
}

.drop-checkbox {
    display: none;
}

@media (max-width: 768px) {


    /*NEWS*/

    .owl-carousel > div {
        margin-top: 40px;
    }

    /*REFERENCES*/

    .main-clients {
        flex-direction: column;
    }

        .main-clients > img {
            margin-right: 0;
            width: 60%;
            height: 30%;
            margin-bottom: 11px;
        }

            .main-clients > img:nth-child(2) {
                width: 50%;
            }

    .clients > p {
        text-align: center;
    }

    .contact > div > h3 {
        text-align: center;
    }

    /*Retail*/

    .ic-pos {
        flex-direction: row;
        flex-wrap: wrap;
    }

        .ic-pos > img {
            width: 50%;
            margin: 11px 0;
        }

        /*Solutions*/

    .services .title span {
        border: 0 !important;
    }



}

    body {
        background-color: #1b2b3a; /* base oscura */
        background-image: radial-gradient(circle at 20% 20%, rgba(46, 199, 196, 0.2) 0%, transparent 60%), linear-gradient(180deg, #1b2b3a 0%, #283645 50%, #1b2b3a 100%);
        background-repeat: no-repeat;
        background-size: 300% 300%, 100% 100%;
        animation: floatLight 60s linear infinite;
    }

@keyframes floatLight {
    0% {
        background-position: 20% 20%, center;
    }

    25% {
        background-position: 80% 30%, center;
    }

    50% {
        background-position: 60% 80%, center;
    }

    75% {
        background-position: 30% 70%, center;
    }

    100% {
        background-position: 20% 20%, center;
    }
}
    /* —— Base mínima para layout —— */
    .header2 {
        position: relative;
        width: 100%;
        background: #fff;
    }

    .header2 .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* Oculto el checkbox (sigue recibiendo el click vía <label>) */
    .menu-toggle {
        position: absolute;
        left: -9999px;       
    }
    /* Icono hamburguesa (se muestra solo en mobile) */
    .menu-icon {
        display: none;
        font-size: 28px;
        cursor: pointer;
        padding: 10px;
        line-height: 1;
        z-index: 1001;
    }

@media (max-width: 768px) {

    /* Mostrar cuando está activo */
    .menu-toggle:checked ~ .navbar {
        display: block;
    }

    /* En columna */
    .navbar ul {
        display: flex;
        flex-direction: column !important;
        gap: .75rem;
        margin: 0;
        padding: 0;
    }

        .navbar ul li {
            list-style: none;
            text-align: left;
        }

            .navbar ul li a {
                display: block;
                padding: .5rem;
                text-decoration: none;
                color: #111;
                font-size: 1.1rem;
            }

    /* --- Icono hamburguesa (☰ → ✕) --- */
    .menu-icon {
        position: relative;
        width: 30px;
        height: 18px;
        cursor: pointer;
        display: inline-block;
        z-index: 2000;
        font-size: 0; /* ocultamos el carácter ☰, usamos las barras */
    }

        .menu-icon::before,
        .menu-icon::after,
        .menu-icon span {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: white; /* color de las barras */
            border-radius: 2px;
            transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, opacity 0.3s ease;
        }

        .menu-icon::before {
            top: 0;
        }

        .menu-icon span {
            top: 10px;
        }

        .menu-icon::after {
            bottom: 0;
        }

    /* Animación a cruz */
    .menu-toggle:checked + .menu-icon::before {
        top: 10px;
        transform: rotate(45deg);
    }

    .menu-toggle:checked + .menu-icon span {
        opacity: 0;
    }

    .menu-toggle:checked + .menu-icon::after {
        top: 10px;
        bottom: auto;
        transform: rotate(-45deg);
    }

    /* Menú en versión modal vertical */
    .navbar {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #283645; /* igual que .header2 */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 1rem;
        z-index: 1500;
        height: 100vh;
    }

    /* Mostrar cuando se abre con el toggle */
    .menu-toggle:checked ~ .navbar {
        display: flex;
    }

    .navbar ul {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        padding: 0;
        margin: 0;
        width: 90%;
    }

            .navbar ul li a,
            .navbar ul li .dropbtn {
                display: block;
                padding: .75rem 0;
                font-size: 16px;
                color: white; /* distinto estilo de .header2 */
                text-decoration: none;
            }

        .navbar ul li .dropbtn {
            display: block;
            padding: 0;
            font-size: 16px;
            color: white; /* distinto estilo de .header2 */
            text-decoration: none;
        }

                .navbar > ul > li > a:hover, .dropdown:hover .dropbtn, .header2 .navbar > a.active {
                    border-bottom: none;
                    border-radius: 0;
                }

    /* --- Dropdowns en mobile --- */
    .dropdown {
        width: 100%;
    }

    .dropdown-content {
        display: none;
        flex-direction: column;
        position: static !important; /* no flotan */
        background: transparent !important;
        box-shadow: none !important;
        padding-left: 1rem;
    }

    .dropdown.active .dropdown-content {
        display: flex;
    }

    /* Ocultar submenús por defecto */
    .dropdown .dropdown-content {
        display: none;
        flex-direction: column;
        margin-left: 12px; /* indentación */
    }


    /* Mostrar con focus-within (mobile: al hacer tap en el <a>) */
    .dropdown:focus-within .dropdown-content {
        display: flex;
    }

    /* Chevron automático con pseudo-elemento */
    .dropdown > .dropbtn a::after {
        content: "›"; /* la flecha cerrada */
        margin-left: 6px;
        display: inline-block;
        transition: transform 0.3s ease;
    }

    /* Rotar chevron cuando se abre */
    .dropdown:hover > .dropbtn a::after,
    .dropdown:focus-within > .dropbtn a::after {
        transform: rotate(90deg);
    }

    /* Ocultar todos los dropdown-content por defecto */
    .dropdown .dropdown-content {
        display: none;
        position: absolute; /* opcional si lo querés flotante */
        flex-direction: column;
        background-color: #0d2235; /* mismo tono que el menú */
        padding: 0.5rem 0;
        min-width: 200px;
        z-index: 999;
    }

    .dropdown .dropdown-content {
        display: none !important;
    }

    /* Mostrar SOLO cuando el dropdown está activo */
    .dropdown:focus-within > .dropdown-content,
    .dropdown:hover > .dropdown-content {
        display: flex !important;
    }

    /* Estilo para los enlaces internos */
    .dropdown .dropdown-content a {
        padding: 0.7rem 1rem;
        display: block;
        color: white;
        text-decoration: none;
        transition: background 0.3s ease;
        font-size: 14px;
    }

        .dropdown .dropdown-content a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

    .div-two > div {
        text-align: left;
    }


    /*Header 2*/

    .header2 .menu-icon::before,
    .header2 .menu-icon::after,
    .header2 .menu-icon span {
        background: #4a4a4a; /* color de las barras */
    }


    /* Estilo para los enlaces internos */
    .header2 .dropdown .dropdown-content a {
        color: #4a4a4a;
    }

    .header2 .navbar {
        background: white;
    }


}