/* ==========================================================
   GRUPO EMPRESARIAL KAMANA
   INTERNAL HERO UNIFIED V3

   Todos los heroes internos:
   - fondo 01 del carrusel
   - contenido centrado
   - mismo tratamiento oscuro
   - mismos botones
   ========================================================== */


/* ==========================================================
   HERO ESTANDAR
   ========================================================== */

body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero {
    position: relative !important;

    display: flex !important;

    min-height: 670px !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    isolation: isolate !important;

    background:
        #05070a !important;

    box-shadow:
        inset 0 -130px 170px rgba(0,0,0,.30) !important;
}


/* FOTO UNICA PARA TODOS */

body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -2 !important;

    display: block !important;

    background-image:
        url("../assets/images/hero-bg-02-cafe-magenta.png") !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    filter:
        brightness(.56)
        saturate(.88)
        contrast(1.06) !important;

    transform:
        scale(1.015) !important;
}


/* CAPA OSCURA */

body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -1 !important;

    display: block !important;

    pointer-events: none !important;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(239,15,116,.07) 0%,
            transparent 38%
        ),
        linear-gradient(
            90deg,
            rgba(5,7,11,.87) 0%,
            rgba(5,7,11,.74) 28%,
            rgba(5,7,11,.68) 50%,
            rgba(5,7,11,.74) 72%,
            rgba(5,7,11,.87) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2,4,7,.30) 0%,
            rgba(2,4,7,.38) 100%
        ) !important;
}


/* ==========================================================
   CONTENIDO CENTRADO
   ========================================================== */

body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero-copy {
    position: relative !important;

    z-index: 2 !important;

    display: flex !important;

    width:
        min(1050px, calc(100% - 40px)) !important;

    max-width:
        1050px !important;

    margin:
        0 auto !important;

    padding:
        110px 20px 100px !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    text-align:
        center !important;
}


/* LINEA TRICOLOR CENTRADA */

body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero-copy::before {
    content: "" !important;

    display: block !important;

    width: 66px !important;
    height: 4px !important;

    margin:
        0 auto 24px !important;

    background:
        linear-gradient(
            90deg,
            #ef0f74 0 33%,
            #ffbd0a 33% 66%,
            #0879d8 66% 100%
        ) !important;
}


/* EYEBROW */

body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero .eyebrow {
    width: 100% !important;

    margin:
        0 auto 18px !important;

    color:
        #ffbd0a !important;

    text-align:
        center !important;

    font-size:
        .70rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        .18em !important;

    text-transform:
        uppercase !important;
}


/* TITULO */

body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero h1 {
    width: 100% !important;

    max-width:
        1000px !important;

    margin:
        0 auto 24px !important;

    color:
        #fff !important;

    text-align:
        center !important;

    font-family:
        "Playfair Display",
        Georgia,
        serif !important;

    font-size:
        clamp(3.4rem,6.3vw,6.5rem) !important;

    font-weight:
        700 !important;

    line-height:
        .94 !important;

    letter-spacing:
        -.045em !important;
}


/* TEXTO */

body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero-copy > p:not(.eyebrow) {
    width: 100% !important;

    max-width:
        720px !important;

    margin:
        0 auto 30px !important;

    color:
        rgba(255,255,255,.78) !important;

    text-align:
        center !important;

    font-size:
        1.03rem !important;

    line-height:
        1.7 !important;
}


/* ==========================================================
   BOTONES
   ========================================================== */

body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero-actions {
    display: flex !important;

    width:
        100% !important;

    margin:
        4px auto 0 !important;

    gap:
        14px !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    flex-wrap:
        wrap !important;
}


body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero .button,
body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero .button-primary,
body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero .button-outline {
    min-width:
        154px !important;

    min-height:
        50px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        14px 24px !important;

    border:
        1px solid #ef0f74 !important;

    border-radius:
        0 !important;

    background:
        #ef0f74 !important;

    color:
        #fff !important;

    box-shadow:
        0 12px 32px rgba(239,15,116,.24) !important;

    font-weight:
        700 !important;

    text-align:
        center !important;

    text-decoration:
        none !important;

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}


body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero .button:hover {
    background:
        #ff2187 !important;

    border-color:
        #ff2187 !important;

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 15px 38px rgba(239,15,116,.32) !important;
}


/* ==========================================================
   CONSTRUCCION
   HERO ESPECIAL PERO MISMO ASPECTO
   ========================================================== */

body[data-page="construccion"]
.construction-hero {
    position: relative !important;

    display: flex !important;

    min-height:
        670px !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    overflow:
        hidden !important;

    isolation:
        isolate !important;

    background:
        linear-gradient(
            90deg,
            rgba(5,7,11,.84),
            rgba(5,7,11,.70),
            rgba(5,7,11,.84)
        ),
        url("../assets/images/hero-bg-02-cafe-magenta.png")
        center center / cover
        no-repeat !important;

    box-shadow:
        inset 0 -130px 170px rgba(0,0,0,.30) !important;
}


body[data-page="construccion"]
.construction-hero::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(2,4,7,.20),
            rgba(2,4,7,.42)
        ) !important;

    pointer-events:
        none !important;
}


body[data-page="construccion"]
.construction-hero-grid {
    position:
        relative !important;

    z-index:
        2 !important;

    display:
        flex !important;

    width:
        min(1050px, calc(100% - 40px)) !important;

    max-width:
        1050px !important;

    margin:
        0 auto !important;

    padding:
        110px 20px 100px !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        24px !important;

    text-align:
        center !important;
}


body[data-page="construccion"]
.construction-hero-grid > * {
    width:
        100% !important;

    max-width:
        820px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    text-align:
        center !important;
}


body[data-page="construccion"]
.construction-hero .eyebrow {
    color:
        #ffbd0a !important;

    text-align:
        center !important;
}


body[data-page="construccion"]
.construction-hero h1 {
    max-width:
        1000px !important;

    margin:
        0 auto 22px !important;

    color:
        #fff !important;

    text-align:
        center !important;

    font-size:
        clamp(3.4rem,6.3vw,6.5rem) !important;

    line-height:
        .94 !important;
}


body[data-page="construccion"]
.construction-hero p {
    max-width:
        720px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    color:
        rgba(255,255,255,.78) !important;

    text-align:
        center !important;
}


body[data-page="construccion"]
.construction-hero .button,
body[data-page="construccion"]
.construction-hero button {
    border-color:
        #ef0f74 !important;

    background:
        #ef0f74 !important;

    color:
        #fff !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
    .page-hero,
    body[data-page="construccion"]
    .construction-hero {
        min-height:
            560px !important;
    }


    body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
    .page-hero-copy,
    body[data-page="construccion"]
    .construction-hero-grid {
        padding:
            80px 18px
            70px !important;
    }


    body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
    .page-hero h1,
    body[data-page="construccion"]
    .construction-hero h1 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4.6rem
            ) !important;
    }


    body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
    .page-hero-actions {
        flex-direction:
            column !important;
    }


    body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
    .page-hero .button {
        width:
            min(100%,280px) !important;
    }
}



/* ==========================================================
   KAMANA — INTERNAL HERO LANDING EXACT V5

   Estas reglas fueron generadas automáticamente desde:
   - home-hero-carousel-v7.css
   - home-hero-carousel-backgrounds-v1.css

   Se conserva la distribución centrada de V3.
   ========================================================== */


/* ----------------------------------------------------------
   HERO INTERNO ESTANDAR
   ---------------------------------------------------------- */

body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero {
    --hero-slide-image:
        url("../assets/images/hero-bg-02-cafe-magenta.png");

    background:
        #080b0e !important;

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


body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero::before {
position: absolute !important;
    inset: 0 !important;

    z-index: -3 !important;

    content: "" !important;

    background-image:
        var(
            --hero-slide-image,
            url("../assets/images/hero-montanas-huila.webp")
        );

    background-position: center 52% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    transform: scale(1.025) !important;

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;

    /*
       V3 aplicaba un filtro adicional.
       El hero real del landing NO usa ese filtro.
    */
    filter: none !important;
}


body[data-page]:not([data-page="inicio"]):not([data-page="menu"])
.page-hero::after {
position: absolute !important;
    inset: 0 !important;

    z-index: -2 !important;

    content: "" !important;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(255,255,255,.08),
            transparent 31%
        ),
        linear-gradient(
            90deg,
            rgba(18,5,5,.94) 0%,
            rgba(26,8,7,.88) 34%,
            rgba(8,11,14,.62) 68%,
            rgba(6,10,14,.45) 100%
        ),
        linear-gradient(
            180deg,
            rgba(4,7,10,.12),
            rgba(4,7,10,.46)
        );

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;
}


/* ----------------------------------------------------------
   CONSTRUCCION
   Su estructura HTML es distinta, pero recibe exactamente
   el mismo sistema visual del hero del landing.
   ---------------------------------------------------------- */

body[data-page="construccion"]
.construction-hero {
    --hero-slide-image:
        url("../assets/images/hero-bg-02-cafe-magenta.png");

    background:
        #080b0e !important;

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


body[data-page="construccion"]
.construction-hero::before {
position: absolute !important;
    inset: 0 !important;

    z-index: -3 !important;

    content: "" !important;

    background-image:
        var(
            --hero-slide-image,
            url("../assets/images/hero-montanas-huila.webp")
        );

    background-position: center 52% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    transform: scale(1.025) !important;

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;

    filter: none !important;
}


body[data-page="construccion"]
.construction-hero::after {
position: absolute !important;
    inset: 0 !important;

    z-index: -2 !important;

    content: "" !important;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(255,255,255,.08),
            transparent 31%
        ),
        linear-gradient(
            90deg,
            rgba(18,5,5,.94) 0%,
            rgba(26,8,7,.88) 34%,
            rgba(8,11,14,.62) 68%,
            rgba(6,10,14,.45) 100%
        ),
        linear-gradient(
            180deg,
            rgba(4,7,10,.12),
            rgba(4,7,10,.46)
        );

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;
}


/* El contenido de construccion permanece por encima
   del before/after igual que en el resto de heroes. */

body[data-page="construccion"]
.construction-hero-grid {
    position: relative !important;
    z-index: 2 !important;
}