/* ==========================================================
   GRUPO EMPRESARIAL KAMANA
   HERO BACKGROUNDS V1

   SOLO cambia:
   - imagen de fondo por slide
   - overlay neutro de legibilidad
   - borde cromatico sutil

   NO modifica:
   - layout
   - posiciones
   - tipografia
   - CTA
   - flechas
   - JS
   ========================================================== */


/* ==========================================================
   1. FONDO INDIVIDUAL POR SLIDE
   ========================================================== */

.hero-slide--origin {
    --hero-slide-image:
        url("../assets/images/hero-bg-01-cafe-oro.png");
}

.hero-slide--coffee {
    --hero-slide-image:
        url("../assets/images/hero-bg-02-cafe-magenta.png");
}

.hero-slide--construction {
    --hero-slide-image:
        url("../assets/images/hero-bg-03-construccion-oro.png");
}

.hero-slide--farm {
    --hero-slide-image:
        url("../assets/images/hero-bg-04-ecogranja-verde.png");
}

.hero-slide--services {
    --hero-slide-image:
        url("../assets/images/hero-bg-05-servicios-azul.png");
}


/* ==========================================================
   2. PRESENTACION DE LA IMAGEN

   Mantiene el sistema ::before existente del carrusel.
   ========================================================== */

.hero.hero-carousel
.hero-slide::before {
    background-image:
        var(--hero-slide-image) !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    transform:
        scale(1.01) !important;
}


/* ==========================================================
   3. OVERLAY NEUTRO

   Quitamos el tinte rojizo original.
   Los fondos ya vienen oscuros, por eso el overlay es suave.
   ========================================================== */

.hero.hero-carousel
.hero-slide::after {
    background:
        radial-gradient(
            ellipse at center,
            rgba(4, 6, 8, .10) 0%,
            rgba(4, 6, 8, .18) 55%,
            rgba(4, 6, 8, .30) 100%
        ),
        linear-gradient(
            180deg,
            rgba(4, 6, 8, .14) 0%,
            rgba(4, 6, 8, .22) 100%
        ) !important;
}


/* ==========================================================
   4. BORDE CROMATICO MUY SUTIL
   ========================================================== */

.hero-slide--origin {
    box-shadow:
        inset 0 0 0 1px
        rgba(255, 189, 10, .46);
}

.hero-slide--coffee {
    box-shadow:
        inset 0 0 0 1px
        rgba(239, 15, 116, .46);
}

.hero-slide--construction {
    box-shadow:
        inset 0 0 0 1px
        rgba(255, 189, 10, .46);
}

.hero-slide--farm {
    box-shadow:
        inset 0 0 0 1px
        rgba(32, 214, 140, .44);
}

.hero-slide--services {
    box-shadow:
        inset 0 0 0 1px
        rgba(7, 142, 233, .48);
}