/* ==========================================================
   GRUPO EMPRESARIAL KAMANA
   INTERNAL PAGES V1

   Replicación del lenguaje visual aprobado del landing.
   NO aplica a inicio ni menú porque este archivo no se
   carga en esas páginas.
   ========================================================== */


/* ==========================================================
   1. FONDO GLOBAL
   ========================================================== */

body:not([data-page="inicio"]):not([data-page="menu"]) {
    background:
        #05070a
        url("../assets/images/imagen-fondo-vertical.png")
        center center / cover
        fixed
        no-repeat !important;

    color: #f8f8f8;
}


body:not([data-page="inicio"]):not([data-page="menu"])
main#contenido {
    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(5,7,10,.18) 0%,
            rgba(5,7,10,.42) 100%
        ) !important;
}


/* ==========================================================
   2. PAGE HERO COMPARTIDO
   ========================================================== */

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

    display: flex;
    align-items: center;

    min-height: 520px;

    overflow: hidden;

    isolation: isolate;

    background:
        #070a0e !important;
}


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

    position: absolute;
    inset: 0;

    z-index: -2;

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

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transform:
        scale(1.015);
}


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

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        radial-gradient(
            circle at 18% 42%,
            rgba(239,15,116,.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 36%,
            rgba(8,121,216,.13),
            transparent 34%
        ),
        linear-gradient(
            90deg,
            rgba(4,6,9,.94) 0%,
            rgba(4,6,9,.72) 48%,
            rgba(4,6,9,.72) 100%
        );
}


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

    width: min(760px,100%);

    padding:
        92px
        0
        82px;
}


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

    display: block;

    width: 72px;
    height: 4px;

    margin-bottom: 24px;

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


body:not([data-page="inicio"]):not([data-page="menu"])
.page-hero h1 {
    max-width: 900px;

    margin:
        8px
        0
        22px;

    color: #fff !important;

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

    font-size:
        clamp(3rem,6vw,6.2rem);

    line-height: .94;

    letter-spacing: -.045em;
}


body:not([data-page="inicio"]):not([data-page="menu"])
.page-hero-copy > p:not(.eyebrow) {
    max-width: 690px;

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

    font-size:
        clamp(.98rem,1.3vw,1.15rem);

    line-height: 1.7;
}


/* ==========================================================
   3. EYEBROWS
   ========================================================== */

body:not([data-page="inicio"]):not([data-page="menu"])
.eyebrow,
body:not([data-page="inicio"]):not([data-page="menu"])
.eyebrow-dark {
    color: #ffbd0a !important;

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}


/* ==========================================================
   4. SECCIONES
   ========================================================== */

body:not([data-page="inicio"]):not([data-page="menu"])
main#contenido
> .section,
body:not([data-page="inicio"]):not([data-page="menu"])
main#contenido
> section.section {
    position: relative;

    margin: 0 !important;

    padding:
        58px
        0 !important;

    background:
        transparent !important;
}


body:not([data-page="inicio"]):not([data-page="menu"])
main#contenido
> .section
> .container {
    position: relative;

    padding:
        clamp(30px,4vw,58px);

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 3px;

    background:
        linear-gradient(
            135deg,
            rgba(10,13,18,.90),
            rgba(7,10,14,.76)
        ) !important;

    box-shadow:
        0 24px 65px rgba(0,0,0,.20);

    backdrop-filter:
        blur(10px);
}


/* leve acento de color */
body:not([data-page="inicio"]):not([data-page="menu"])
main#contenido
> .section
> .container::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #ef0f74 0%,
            #ffbd0a 50%,
            #0879d8 100%
        );

    opacity: .82;
}


/* ==========================================================
   5. DARK SECTION
   ========================================================== */

body:not([data-page="inicio"]):not([data-page="menu"])
.dark-section {
    background:
        transparent !important;
}


body:not([data-page="inicio"]):not([data-page="menu"])
.dark-section
> .container {
    background:
        linear-gradient(
            135deg,
            rgba(5,7,10,.96),
            rgba(10,17,25,.86)
        ) !important;

    border-color:
        rgba(255,189,10,.14) !important;
}


/* ==========================================================
   6. TITULOS DE SECCION
   ========================================================== */

body:not([data-page="inicio"]):not([data-page="menu"])
.section-heading h2,
body:not([data-page="inicio"]):not([data-page="menu"])
.section-heading-split h2,
body:not([data-page="inicio"]):not([data-page="menu"])
.cup-copy h2,
body:not([data-page="inicio"]):not([data-page="menu"])
.contact-grid h2,
body:not([data-page="inicio"]):not([data-page="menu"])
.article-entry h2 {
    color: #fff !important;
}


body:not([data-page="inicio"]):not([data-page="menu"])
.section-heading > p,
body:not([data-page="inicio"]):not([data-page="menu"])
.section-heading-split > p,
body:not([data-page="inicio"]):not([data-page="menu"])
.cup-copy p,
body:not([data-page="inicio"]):not([data-page="menu"])
.article-entry p {
    color:
        rgba(255,255,255,.70) !important;
}


/* ==========================================================
   7. CARDS GENERALES
   ========================================================== */

body:not([data-page="inicio"]):not([data-page="menu"])
.editorial-card,

body:not([data-page="inicio"]):not([data-page="menu"])
.detail-row,

body:not([data-page="inicio"]):not([data-page="menu"])
.product-card,

body:not([data-page="inicio"]):not([data-page="menu"])
.store-card,

body:not([data-page="inicio"]):not([data-page="menu"])
.article-entry,

body:not([data-page="inicio"]):not([data-page="menu"])
.quote-panel,

body:not([data-page="inicio"]):not([data-page="menu"])
.contact-editorial-note {
    border:
        1px solid rgba(255,255,255,.10) !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,13,18,.92),
            rgba(7,10,14,.78)
        ) !important;

    color: #fff !important;

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


body:not([data-page="inicio"]):not([data-page="menu"])
.editorial-card h3,

body:not([data-page="inicio"]):not([data-page="menu"])
.detail-row h3,

body:not([data-page="inicio"]):not([data-page="menu"])
.product-card h3,

body:not([data-page="inicio"]):not([data-page="menu"])
.store-card h3 {
    color: #fff !important;
}


body:not([data-page="inicio"]):not([data-page="menu"])
.editorial-card p,

body:not([data-page="inicio"]):not([data-page="menu"])
.detail-row p,

body:not([data-page="inicio"]):not([data-page="menu"])
.product-card p,

body:not([data-page="inicio"]):not([data-page="menu"])
.store-card p {
    color:
        rgba(255,255,255,.70) !important;
}


/* ==========================================================
   8. PROCESS STRIP
   ========================================================== */

body:not([data-page="inicio"]):not([data-page="menu"])
.process-strip {
    overflow: hidden;

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

    background:
        rgba(5,8,12,.66);
}


body:not([data-page="inicio"]):not([data-page="menu"])
.process-strip > div {
    background:
        transparent !important;

    border-color:
        rgba(255,255,255,.09) !important;
}


body:not([data-page="inicio"]):not([data-page="menu"])
.process-strip span {
    color: #ffbd0a !important;
}


body:not([data-page="inicio"]):not([data-page="menu"])
.process-strip h3 {
    color: #fff !important;
}


/* ==========================================================
   9. BOTONES
   ========================================================== */

body:not([data-page="inicio"]):not([data-page="menu"])
.button-primary {
    border-color:
        #ef0f74 !important;

    background:
        #ef0f74 !important;

    color:
        #fff !important;

    box-shadow:
        0 10px 30px rgba(239,15,116,.20);
}


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


body:not([data-page="inicio"]):not([data-page="menu"])
.button-outline {
    border-color:
        rgba(255,255,255,.42) !important;

    background:
        rgba(255,255,255,.03) !important;

    color:
        #fff !important;
}


body:not([data-page="inicio"]):not([data-page="menu"])
.text-link {
    color:
        #ffbd0a !important;
}


/* ==========================================================
   10. PRODUCTOS / CAFE
   ========================================================== */

body[data-page="cafes"]
.product-card {
    overflow: hidden;
}


body[data-page="cafes"]
.product-card-media {
    background:
        rgba(255,255,255,.035) !important;
}


body[data-page="cafes"]
.cup-section
> .container {
    overflow: hidden;
}


/* ==========================================================
   11. BLOG
   ========================================================== */

body[data-page="blog"]
.article-entry {
    overflow: hidden;

    border-radius: 3px;
}


body[data-page="blog"]
.article-entry img {
    min-height: 100%;

    object-fit: cover;
}


/* ==========================================================
   12. CONTACTO
   ========================================================== */

body[data-page="contacto"]
.contact-list > div {
    border-color:
        rgba(255,255,255,.11) !important;

    background:
        rgba(255,255,255,.025) !important;
}


body[data-page="contacto"]
.contact-list span {
    color:
        rgba(255,255,255,.58) !important;
}


body[data-page="contacto"]
.contact-list a,
body[data-page="contacto"]
.contact-list strong {
    color:
        #fff !important;
}


/* ==========================================================
   13. CONSTRUCCION
   Hero especial, conservando estructura propia.
   ========================================================== */

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

    isolation: isolate;

    overflow: hidden;

    min-height: 520px;

    background:
        #070a0e
        url("../assets/images/imagen-fondo-vertical.png")
        center / cover
        no-repeat !important;
}


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

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(5,7,10,.95),
            rgba(5,7,10,.64)
        );
}


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

    font-size:
        clamp(3rem,6vw,6rem);

    line-height: .94;
}


body[data-page="construccion"]
.construction-categories,
body[data-page="construccion"]
.construction-quote {
    background:
        transparent !important;
}


body[data-page="construccion"]
.construction-categories
> .container,
body[data-page="construccion"]
.construction-quote
> .container {
    border:
        1px solid rgba(255,255,255,.09);

    background:
        linear-gradient(
            145deg,
            rgba(10,13,18,.92),
            rgba(7,10,14,.78)
        ) !important;

    box-shadow:
        0 24px 65px rgba(0,0,0,.20);
}


/* ==========================================================
   14. FORMULARIOS
   ========================================================== */

body:not([data-page="inicio"]):not([data-page="menu"])
input,

body:not([data-page="inicio"]):not([data-page="menu"])
textarea,

body:not([data-page="inicio"]):not([data-page="menu"])
select {
    border-color:
        rgba(255,255,255,.15) !important;

    background:
        rgba(4,7,10,.76) !important;

    color:
        #fff !important;
}


body:not([data-page="inicio"]):not([data-page="menu"])
input::placeholder,

body:not([data-page="inicio"]):not([data-page="menu"])
textarea::placeholder {
    color:
        rgba(255,255,255,.42) !important;
}


/* ==========================================================
   15. RESPONSIVE
   ========================================================== */

@media (max-width: 760px) {

    body:not([data-page="inicio"]):not([data-page="menu"])
    .page-hero {
        min-height:
            470px;
    }

    body:not([data-page="inicio"]):not([data-page="menu"])
    .page-hero-copy {
        padding:
            72px
            0
            62px;
    }

    body:not([data-page="inicio"]):not([data-page="menu"])
    .page-hero h1 {
        font-size:
            clamp(2.65rem,13vw,4.3rem);
    }

    body:not([data-page="inicio"]):not([data-page="menu"])
    main#contenido
    > .section {
        padding:
            26px
            0 !important;
    }

    body:not([data-page="inicio"]):not([data-page="menu"])
    main#contenido
    > .section
    > .container {
        padding:
            26px
            20px;
    }
}