/* ==========================================================
   GRUPO EMPRESARIAL KAMANA
   CONSTRUCCION V3

   - Hero limpio
   - Fondo igual al landing magenta
   - Sin formas decorativas antiguas
   - Flujo en contenedor independiente
   ========================================================== */


/* ==========================================================
   1. HERO LIMPIO
   ========================================================== */

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

    display: flex !important;

    min-height: 670px !important;

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

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    isolation: isolate !important;

    border: 0 !important;

    background:
        #080b0e !important;

    box-shadow: none !important;

    clip-path: none !important;
}


/* Imagen: mismo sistema del hero del landing */

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

    position: absolute !important;

    inset: 0 !important;

    width: auto !important;
    height: auto !important;

    z-index: 0 !important;

    display: block !important;

    border: 0 !important;

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

    background-position:
        center 52% !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    transform:
        scale(1.025) !important;

    filter: none !important;

    opacity: 1 !important;

    clip-path: none !important;

    pointer-events: none !important;
}


/* Overlay: exactamente el tratamiento del landing */

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

    position: absolute !important;

    inset: 0 !important;

    width: auto !important;
    height: auto !important;

    z-index: 1 !important;

    display: block !important;

    border: 0 !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)
        ) !important;

    transform: none !important;

    opacity: 1 !important;

    clip-path: none !important;

    pointer-events: none !important;
}


/* ==========================================================
   2. CONTENIDO DEL HERO
   ========================================================== */

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

    z-index: 2 !important;

    display: flex !important;

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

    max-width: 1050px !important;

    min-height: auto !important;

    margin:
        0 auto !important;

    padding:
        110px 24px
        100px !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap: 0 !important;

    border: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    clip-path:
        none !important;

    text-align:
        center !important;
}


/* Eliminar cualquier decoración vieja del grid */

body[data-page="construccion"]
.construction-hero-grid::before,

body[data-page="construccion"]
.construction-hero-grid::after,

body[data-page="construccion"]
.construction-hero-grid
> div:first-child::before,

body[data-page="construccion"]
.construction-hero-grid
> div:first-child::after {
    content: none !important;

    display: none !important;
}


/* Panel principal completamente transparente */

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

    width: 100% !important;

    max-width: 1000px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    border: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    clip-path:
        none !important;

    text-align:
        center !important;
}


/* Eyebrow */

body[data-page="construccion"]
.construction-hero
.eyebrow {
    display: block !important;

    width: 100% !important;

    margin:
        0 auto 18px !important;

    color:
        #ffbd0a !important;

    text-align:
        center !important;
}


/* Título */

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

    max-width: 1000px !important;

    margin:
        0 auto 24px !important;

    color:
        #fff !important;

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

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

    line-height:
        .94 !important;

    letter-spacing:
        -.045em !important;

    text-align:
        center !important;
}


/* Descripción */

body[data-page="construccion"]
.construction-hero-grid
> div:first-child
> p:not(.eyebrow) {
    max-width:
        720px !important;

    margin:
        0 auto 30px !important;

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

    font-size:
        1.03rem !important;

    line-height:
        1.7 !important;

    text-align:
        center !important;
}


/* CTA */

body[data-page="construccion"]
.construction-hero
.button {
    display:
        inline-flex !important;

    min-width:
        165px !important;

    min-height:
        50px !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        14px 26px !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;
}


/* El bloque viejo ya no debe existir visualmente */

body[data-page="construccion"]
.construction-hero-note {
    display:
        none !important;
}


/* ==========================================================
   3. FLUJO INDEPENDIENTE
   ========================================================== */

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

    margin: 0 !important;

    padding:
        34px 0 !important;

    background:
        transparent !important;
}


body[data-page="construccion"]
.construction-flow-strip-inner {
    display:
        grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    width:
        min(1120px,calc(100% - 48px)) !important;

    overflow:
        hidden !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    background:
        linear-gradient(
            135deg,
            rgba(9,12,17,.94),
            rgba(7,10,14,.88)
        ) !important;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.20) !important;
}


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

    min-height:
        145px !important;

    padding:
        28px 30px !important;

    border-right:
        1px solid rgba(255,255,255,.09) !important;
}


body[data-page="construccion"]
.construction-flow-step:last-child {
    border-right:
        0 !important;
}


body[data-page="construccion"]
.construction-flow-step span {
    display:
        block !important;

    margin-bottom:
        14px !important;

    color:
        #ffbd0a !important;

    font-size:
        .64rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        .14em !important;
}


body[data-page="construccion"]
.construction-flow-step strong {
    display:
        block !important;

    margin-bottom:
        8px !important;

    color:
        #fff !important;

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

    font-size:
        1.35rem !important;
}


body[data-page="construccion"]
.construction-flow-step p {
    margin:
        0 !important;

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

    font-size:
        .87rem !important;

    line-height:
        1.55 !important;
}


/* ==========================================================
   4. CONSERVAR EL REDISEÑO V2 DE CATEGORIAS / FORMULARIO
   ========================================================== */

body[data-page="construccion"]
.construction-category-card {
    border-color:
        rgba(255,255,255,.09) !important;

    background:
        linear-gradient(
            145deg,
            rgba(13,17,23,.98),
            rgba(8,11,16,.95)
        ) !important;

    color:
        #fff !important;
}


body[data-page="construccion"]
.construction-category-card h3 {
    color:
        #fff !important;
}


body[data-page="construccion"]
.construction-category-card p {
    color:
        rgba(255,255,255,.64) !important;
}


body[data-page="construccion"]
.construction-quote-grid {
    grid-template-columns:
        minmax(300px,.72fr)
        minmax(0,1.38fr) !important;
}


body[data-page="construccion"]
.construction-quote-intro h2 {
    font-size:
        clamp(
            3rem,
            4.2vw,
            4.8rem
        ) !important;

    line-height:
        .94 !important;
}


/* ==========================================================
   5. RESPONSIVE
   ========================================================== */

@media (max-width: 760px) {

    body[data-page="construccion"]
    .construction-hero {
        min-height:
            560px !important;
    }


    body[data-page="construccion"]
    .construction-hero-grid {
        width:
            calc(100% - 32px) !important;

        padding:
            80px 16px
            70px !important;
    }


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


    body[data-page="construccion"]
    .construction-flow-strip-inner {
        grid-template-columns:
            1fr !important;

        width:
            calc(100% - 32px) !important;
    }


    body[data-page="construccion"]
    .construction-flow-step {
        min-height:
            auto !important;

        border-right:
            0 !important;

        border-bottom:
            1px solid rgba(255,255,255,.09) !important;
    }


    body[data-page="construccion"]
    .construction-flow-step:last-child {
        border-bottom:
            0 !important;
    }
}