body {

    .hero-bg {
        background-image: url('/img/Software/hero-software.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 520px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
        /* OVERLAY SOLO A LA IMAGEN */
        .hero-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(2, 9, 18, 0.5); /* controla aquí la intensidad */
            z-index: 1;
        }
    /* CONTENIDO ENCIMA DEL OVERLAY */
    .hero-content {
        position: relative;
        z-index: 2;
        max-width: 900px;
        padding: 0 20px;
        text-align: center;
        color: #ffffff;
    }

        .hero-content h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: white;
        }

        .hero-content p {
            font-size: 1.25rem;
            line-height: 1.6;
        }


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

    .services {
        padding: 60px 20px;
    }

    .grid-3 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
    }



    .service-card {
        background: #f47c2e;
        padding: 20px;
        text-align: center;
        border-radius: 12px;
        box-shadow: 0 5px 30px rgba(0,0,0,.35);
        text-decoration: none;
        color: #020912;
        transition: transform .3s ease, box-shadow .3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 200px; /*mismo tamaño para todos */
    }

        .service-card h3 {
            color: #ffffff;
        }

        .service-card img {
            filter: brightness(0) invert(1);
        }

        .service-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 15px 40px #f47c2e;
        }

        .service-card img {
            width: auto;
            height: 100px; /* todas iguales */
            object-fit: contain;
            margin-bottom: 10px;
            filter: brightness(0) invert(1);
        }


    .tech {
        background: #f7f7f7;
        padding: 60px 20px;
        text-align: center;
    }

    .tech-logos {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        flex-wrap: wrap;
        margin-top: 30px;
    }

        .tech-logos img {
            height: 80px;
            width: auto;
            object-fit: contain;
        }

        .tech-logos img {
            display: inline-block;
        }

    .cta {
        display: inline-block;
        margin-top: 30px;
        color: #0a1d2f;
        font-size: 18px;
        text-decoration: none;
    }



    @media (max-width: 1024px) {
        .hero-content h1 {
            font-size: 2.5rem;
        }
    }

    @media (max-width: 768px) {
        .hero-bg {
            min-height: 420px;
            padding: 60px 0;
        }

        .hero-content h1 {
            font-size: 2.1rem;
        }

        .hero-content p {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 480px) {
        .hero-bg {
            min-height: auto;
            padding: 80px 0;
        }

        .hero-content h1 {
            font-size: 1.8rem;
            line-height: 1.3;
        }

        .hero-content p {
            font-size: 1rem;
        }
    }


    .service-card-img {
        background: #ffffff;
        border-radius: 20px;
        padding: 35px 25px;
        text-align: center;
        box-shadow: 0 18px 40px rgba(0,0,0,.08);
        transition: all .35s ease;
        max-width: 320px;
        margin: 0 auto;
    }

        .service-card-img:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 60px rgba(0,0,0,.15);
        }
        /* Imagen */
        .service-card-img img {
            width: 100%;
            max-width: 180px;
            margin: 0 auto 25px;
            display: block;
        }
    /* Texto */
    .service-text strong {
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 8px;
        color: #111;
    }

    .service-text p {
        font-size: 1rem;
        color: #555;
        line-height: 1.5;
        margin: 0;
    }
}