/* =========================================================
   INGPRO — FONDOS DE PORTADA NO INVASIVOS
   Archivo: css/fondos-portada.css

   Este archivo solamente modifica el fondo.
   No cambia tamaños, columnas, posiciones ni responsividad.
========================================================= */

:root {
    --fondo-portada-respaldo: #06142f;
}

/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

.hero-con-fondo {
    /*
       Imagen asignada a cada página.
    */

    --hero-bg:
        linear-gradient(135deg,
            #06142f,
            #174a82);

    /*
       Posición independiente según dispositivo.
    */

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        center center;

    /*
       El degradado oscuro protege la lectura.
       La fotografía queda debajo.
    */

    background-color:
        var(--fondo-portada-respaldo) !important;

    background-image:
        linear-gradient(90deg,
            rgba(3, 15, 38, 0.93) 0%,
            rgba(4, 28, 65, 0.87) 42%,
            rgba(8, 48, 100, 0.72) 100%),
        var(--hero-bg) !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-size:
        cover,
        cover !important;

    background-position:
        center center,
        var(--hero-bg-position-desktop) !important;
}

/* =========================================================
   CNC PLASMA
========================================================= */

.fondo-cnc-plasma {
    --hero-bg:
        url("../img/fondos-portadas/fondo-cnc-plasma.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        58% center;
}

/* =========================================================
   CNC ROUTER
========================================================= */

.fondo-cnc-router {
    --hero-bg:
        url("../img/fondos-portadas/fondo-cnc-router.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        54% center;

    --hero-bg-position-mobile:
        60% center;
}

/* =========================================================
   FABRICACIÓN CNC ROUTER
========================================================= */

.fondo-fabricacion-cnc-router {
    --hero-bg:
        url("../img/fondos-portadas/fondo-fabricacion-cnc-router.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        55% center;
}

/* =========================================================
   GRABADO LÁSER
========================================================= */

.fondo-grabado-laser {
    --hero-bg:
        url("../img/fondos-portadas/fondo-grabado-laser.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        55% center;

    --hero-bg-position-mobile:
        62% center;
}

/* =========================================================
   IMPRESIÓN 3D
========================================================= */

.fondo-impresion-3d {
    --hero-bg:
        url("../img/fondos-portadas/fondo-impresion-3d.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        58% center;
}

/* =========================================================
   MÁQUINAS LÁSER CO₂
========================================================= */

.fondo-maquinas-laser-co2 {
    --hero-bg:
        url("../img/fondos-portadas/fondo-maquinas-laser-co2.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        60% center;
}

/* =========================================================
   CATÁLOGO
========================================================= */

.fondo-catalogo {
    --hero-bg:
        url("../img/fondos-portadas/fondo-catalogo.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        55% center;
}

/* =========================================================
   CLIENTES
========================================================= */

.fondo-clientes {
    --hero-bg:
        url("../img/fondos-portadas/fondo-clientes.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        58% center;
}

/* =========================================================
   CONTACTO
========================================================= */

.fondo-contacto {
    --hero-bg:
        url("../img/fondos-portadas/fondo-contacto.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        56% center;
}

/* =========================================================
   CURSOS
========================================================= */

.fondo-cursos {
    --hero-bg:
        url("../img/fondos-portadas/fondo-cursos.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        60% center;
}

/* =========================================================
   EMPRESA
========================================================= */

.fondo-empresa {
    --hero-bg:
        url("../img/fondos-portadas/fondo-empresa.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        56% center;
}

/* =========================================================
   SERVICIOS WASH
========================================================= */

.fondo-ingpro-wash {
    --hero-bg:
        url("../img/fondos-portadas/fondo-ingpro-wash.jpg");

    --hero-bg-position-desktop:
        center center;

    --hero-bg-position-tablet:
        center center;

    --hero-bg-position-mobile:
        58% center;
}

/* =========================================================
   OPCIONES DE INTENSIDAD
========================================================= */

/*
   Puedes agregar fondo-suave a una portada cuando la imagen
   distraiga demasiado.
*/

.hero-con-fondo.fondo-suave {
    background-image:
        linear-gradient(90deg,
            rgba(3, 15, 38, 0.97) 0%,
            rgba(4, 28, 65, 0.94) 45%,
            rgba(8, 48, 100, 0.84) 100%),
        var(--hero-bg) !important;
}

/*
   Puedes agregar fondo-visible cuando quieras que la imagen
   se note un poco más.
*/

.hero-con-fondo.fondo-visible {
    background-image:
        linear-gradient(90deg,
            rgba(3, 15, 38, 0.88) 0%,
            rgba(4, 28, 65, 0.79) 42%,
            rgba(8, 48, 100, 0.60) 100%),
        var(--hero-bg) !important;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
    .hero-con-fondo {
        background-image:
            linear-gradient(180deg,
                rgba(3, 15, 38, 0.93) 0%,
                rgba(4, 29, 67, 0.86) 52%,
                rgba(8, 48, 100, 0.76) 100%),
            var(--hero-bg) !important;

        background-position:
            center center,
            var(--hero-bg-position-tablet) !important;
    }

    .hero-con-fondo.fondo-suave {
        background-image:
            linear-gradient(180deg,
                rgba(3, 15, 38, 0.97) 0%,
                rgba(4, 29, 67, 0.93) 52%,
                rgba(8, 48, 100, 0.87) 100%),
            var(--hero-bg) !important;
    }

    .hero-con-fondo.fondo-visible {
        background-image:
            linear-gradient(180deg,
                rgba(3, 15, 38, 0.88) 0%,
                rgba(4, 29, 67, 0.80) 52%,
                rgba(8, 48, 100, 0.67) 100%),
            var(--hero-bg) !important;
    }
}

/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 560px) {
    .hero-con-fondo {
        /*
           Solamente cambia la ubicación y oscuridad del fondo.
           No modifica el tamaño de la portada.
        */

        background-image:
            linear-gradient(180deg,
                rgba(3, 15, 38, 0.95) 0%,
                rgba(4, 29, 67, 0.90) 48%,
                rgba(8, 48, 100, 0.82) 100%),
            var(--hero-bg) !important;

        background-size:
            cover,
            cover !important;

        background-position:
            center center,
            var(--hero-bg-position-mobile) !important;
    }

    .hero-con-fondo.fondo-suave {
        background-image:
            linear-gradient(180deg,
                rgba(3, 15, 38, 0.98) 0%,
                rgba(4, 29, 67, 0.95) 50%,
                rgba(8, 48, 100, 0.90) 100%),
            var(--hero-bg) !important;
    }

    .hero-con-fondo.fondo-visible {
        background-image:
            linear-gradient(180deg,
                rgba(3, 15, 38, 0.90) 0%,
                rgba(4, 29, 67, 0.83) 50%,
                rgba(8, 48, 100, 0.72) 100%),
            var(--hero-bg) !important;
    }
}

/* =========================================================
   IMPRESIÓN
========================================================= */

@media print {
    .hero-con-fondo {
        background-image:
            none !important;

        background-color:
            #ffffff !important;
    }
}