/* ==========================================================
   CAFE KAMANA
   HOME MAIN — FONDO FIJO UNIFICADO V3

   Usa la imagen vertical cargada en assets/images
   y la convierte en un fondo unificado oscuro/opaco
   para todo el main posterior al hero.
   ========================================================== */


/* ==========================================================
   1. SUPERFICIE GENERAL DEL MAIN
   ========================================================== */

body[data-page="inicio"] main#contenido {
    position: relative;
    isolation: isolate;

    background-color: #05070a;

    background-image:
        url("../assets/images/imagen-fondo-vertical.png");

    background-repeat: no-repeat;

    background-position:
        center center;

    background-size:
        cover;

    /*
       La imagen queda fija mientras
       las secciones se desplazan.
    */
    background-attachment:
        fixed;
}


/* ==========================================================
   2. CAPA OSCURA PRINCIPAL
   - más oscura en el centro
   - un poco más de color/aire en las orillas
   ========================================================== */

body[data-page="inicio"] main#contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 7, 10, 0.79) 0%,
            rgba(5, 7, 10, 0.75) 14%,
            rgba(4, 6, 9, 0.87) 32%,
            rgba(3, 5, 8, 0.96) 50%,
            rgba(4, 6, 9, 0.87) 68%,
            rgba(5, 7, 10, 0.75) 86%,
            rgba(5, 7, 10, 0.79) 100%
        ),
        linear-gradient(
            180deg,
            rgba(4, 6, 9, 0.46) 0%,
            rgba(4, 6, 9, 0.32) 20%,
            rgba(3, 5, 8, 0.27) 50%,
            rgba(4, 6, 9, 0.32) 80%,
            rgba(4, 6, 9, 0.44) 100%
        );
}


/* ==========================================================
   3. CAPA DE MATIZ SUAVE EN LOS BORDES
   - conserva oscuridad
   - deja respirar un poco el color lateral
   ========================================================== */

body[data-page="inicio"] main#contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background:
        radial-gradient(
            circle at 10% 16%,
            rgba(255, 189, 10, 0.10) 0%,
            rgba(255, 189, 10, 0.00) 25%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(7, 142, 233, 0.10) 0%,
            rgba(7, 142, 233, 0.00) 24%
        ),
        radial-gradient(
            circle at 10% 82%,
            rgba(239, 15, 116, 0.08) 0%,
            rgba(239, 15, 116, 0.00) 22%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(32, 214, 140, 0.06) 0%,
            rgba(32, 214, 140, 0.00) 22%
        );

    opacity: 0.38;
}


/* ==========================================================
   4. ASEGURAR QUE EL CONTENIDO QUEDE POR ENCIMA
   ========================================================== */

body[data-page="inicio"] main#contenido > * {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   5. HACER INVISIBLES LOS WRAPPERS DE SECCION
   - no toca el hero
   - conserva layout interno
   ========================================================== */

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

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

body[data-page="inicio"] main#contenido > section:not(.hero)::before,
body[data-page="inicio"] main#contenido > section:not(.hero)::after {
    display: none !important;
    content: none !important;
}

body[data-page="inicio"] main#contenido > section:not(.hero) > .container {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


/* ==========================================================
   6. LIMPIEZA DE SEPARACIONES VISIBLES EN LAS SECCIONES
   ========================================================== */

body[data-page="inicio"] .story-section,
body[data-page="inicio"] .impact-section,
body[data-page="inicio"] .reasons-section,
body[data-page="inicio"] .cup-section,
body[data-page="inicio"] .stores-section,
body[data-page="inicio"] .journal-preview {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   7. AJUSTE RESPONSIVE DEL FONDO
   ========================================================== */

@media (max-width: 991px) {
    body[data-page="inicio"] main#contenido {
        background-size: cover;
        background-position: center center;
    }

    body[data-page="inicio"] main#contenido::before {
        background:
            linear-gradient(
                90deg,
                rgba(10, 13, 17, 0.78) 0%,
                rgba(8, 10, 14, 0.88) 50%,
                rgba(10, 13, 17, 0.78) 100%
            ),
            linear-gradient(
                180deg,
                rgba(8, 10, 14, 0.26) 0%,
                rgba(6, 8, 11, 0.12) 50%,
                rgba(8, 10, 14, 0.24) 100%
            );
    }
}