/*==============================================================================
 ORBE ECOSYSTEM
 ORBE Living Interface (OLI)
 FILE: assets/css/oli.css
 VERSION: 1.3.0
==============================================================================*/

:root{
    --orbe-black:#07090d;
    --orbe-ink:#121820;
    --orbe-muted:#66727d;
    --orbe-pearl:#edf2f4;
    --orbe-blue:#7fc7ff;
    --orbe-gold:#e7c06c;
    --orbe-glass:rgba(255,255,255,.18);
    --orbe-glass-strong:rgba(255,255,255,.36);
    --orbe-line:rgba(255,255,255,.58);
    --orbe-shadow:0 28px 90px rgba(18,33,48,.14);
    --orbe-ease:cubic-bezier(.2,.8,.2,1);
    --light-x:0px;
    --light-y:0px;
    --font-display:"Ravenna Serie Regular","Helvetica Neue",Arial,sans-serif;
    --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-weight-light:300;
    --font-weight-regular:400;
    --font-weight-medium:500;
    --tracking-navigation:.11em;
    --tracking-title:.18em;
}

*{box-sizing:border-box}

html,body{
    margin:0;
    width:100%;
    height:100%;
    font-family:var(--font-ui);
    color:var(--orbe-ink);
    background:var(--orbe-pearl);
    overflow:hidden;
}

a{text-decoration:none;color:inherit}
button{font:inherit}

.oli{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    isolation:isolate;
    background:var(--orbe-pearl);
}

.oli-bg{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    background:#edf2f4;
}

.oli-bg__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:saturate(.96) contrast(1.02) brightness(1.02);
    transform:scale(1.001);
    user-select:none;
    pointer-events:none;
    transition:filter .35s ease;
}

.oli-bg__veil{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center,rgba(255,255,255,0) 0 48%,rgba(210,220,228,.08) 78%,rgba(170,186,198,.16) 100%);
    pointer-events:none;
}

.oli-lobby{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    overflow:hidden;
}

.genesis-video{
    position:fixed;
    inset:0;
    z-index:999999;
    background:#fff;
    opacity:1;
    pointer-events:auto;
    transition:opacity 1.2s ease;
}

.genesis-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#fff;
}

.genesis-video.is-hidden{
    opacity:0;
    pointer-events:none;
}

.genesis-skip{
    position:fixed;
    right:28px;
    bottom:24px;
    z-index:1000000;
    border:1px solid rgba(255,255,255,.56);
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    color:rgba(10,14,18,.72);
    border-radius:999px;
    padding:10px 16px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.18em;
    cursor:pointer;
    transition:opacity .35s ease,transform .35s var(--orbe-ease);
}

.genesis-skip:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.36);
}

/*==============================================================================
 ORBE ACTIONS
==============================================================================*/

.oli-actions{
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
}

.oli-action{
    position:absolute;
    top:48.15%;
    height:64px;
    display:grid;
    place-items:center;
    background:transparent;
    border:1px solid transparent;
    border-radius:14px;
    box-shadow:none;
    font-family:var(--font-display);
    font-size:clamp(28px,2.35vw,42px);
    font-weight:var(--font-weight-regular);
    letter-spacing:var(--tracking-navigation);
    text-transform:uppercase;
    color:rgba(18,22,28,.78);
    text-shadow:0 1px 0 rgba(255,255,255,.25),0 0 8px rgba(255,255,255,.08);
    white-space:nowrap;
    pointer-events:auto;
    transform:translate(-50%,-50%);
    transition:background .45s var(--orbe-ease),border-color .45s var(--orbe-ease),color .45s var(--orbe-ease),box-shadow .45s var(--orbe-ease),transform .45s var(--orbe-ease),backdrop-filter .45s var(--orbe-ease);
}

.oli-action--discover{left:25.40%;width:420px}
.oli-action--signin{left:72.05%;width:220px}

.oli-action span{
    position:relative;
    z-index:2;
    white-space:nowrap;
}

.oli-action i{display:none}

.oli-action::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    opacity:0;
    background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.56);
    backdrop-filter:blur(16px) saturate(120%);
    -webkit-backdrop-filter:blur(16px) saturate(120%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.60),0 18px 45px rgba(25,45,60,.08);
    transition:opacity .45s var(--orbe-ease);
}

.oli-action:hover{
    color:rgba(5,8,12,.94);
    text-shadow:0 0 8px rgba(255,255,255,.22);
    transform:translate(-50%,-53%) scale(1.01);
}

.oli-action:hover::before{opacity:1}

/*==============================================================================
 THEME FOOTER
==============================================================================*/

.oli-footer{
    position:absolute;
    right:3vw;
    bottom:3vh;
    z-index:9;
    display:flex;
    gap:10px;
    align-items:center;
    color:rgba(25,32,39,.50);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.oli-footer button{
    border:1px solid rgba(255,255,255,.48);
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:inherit;
    border-radius:999px;
    padding:8px 12px;
    cursor:pointer;
    transition:background .3s ease,color .3s ease,transform .3s var(--orbe-ease);
}

.oli-footer button:hover{transform:translateY(-2px)}
.oli-footer button.is-active{background:rgba(255,255,255,.45);color:#111}

/*==============================================================================
 THEMES
==============================================================================*/

[data-theme="graphite"] .oli-bg__image{
    filter:saturate(.72) contrast(1.08) brightness(.68);
}

[data-theme="graphite"] .oli-bg__veil{
    background:rgba(20,26,32,.36);
}

[data-theme="graphite"] .oli-action{
    color:rgba(255,255,255,.82);
    border-color:rgba(255,255,255,.27);
    background:rgba(255,255,255,.08);
}

[data-theme="graphite"] .oli-footer{
    color:rgba(255,255,255,.64);
}

[data-theme="black"] .oli-bg__image{
    filter:saturate(.55) contrast(1.15) brightness(.34);
}

[data-theme="black"] .oli-bg__veil{
    background:radial-gradient(circle at center,rgba(15,23,31,.12),rgba(0,0,0,.62));
}

[data-theme="black"] .oli-action{
    color:rgba(255,255,255,.86);
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.18);
}

[data-theme="black"] .oli-footer{
    color:rgba(255,255,255,.58);
}

/*==============================================================================
 ORBE LIVING CRYSTAL — V7
 Transparent optical crystal. Visible breathing intelligence.
==============================================================================*/

.oli-sphere{
    position:absolute;
    left:50%;
    top:49.7%;
    width:118px;
    height:118px;
    z-index:5;
    pointer-events:none;
    transform:translate(-50%,-50%);
    animation:orbeMagneticFloat 14s ease-in-out infinite;
}

.oli-sphere::before{
    content:"";
    position:absolute;
    inset:-58px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(127,199,255,.085) 34%,rgba(127,199,255,.030) 54%,transparent 76%);
    filter:blur(30px);
    opacity:.56;
    animation:orbeAmbientBreath 7.8s ease-in-out infinite;
}

.oli-sphere__halo{
    position:absolute;
    inset:-38px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(127,199,255,.035),transparent 74%);
    filter:blur(16px);
    opacity:.25;
}

.oli-sphere__glass{
    position:absolute;
    inset:0;
    border-radius:50%;
    overflow:hidden;
    background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.008),rgba(255,255,255,.004) 42%,rgba(127,199,255,.003) 70%,transparent 100%);
    border:1px solid rgba(255,255,255,.24);
    backdrop-filter:blur(.55px) saturate(100%);
    -webkit-backdrop-filter:blur(.55px) saturate(100%);
    box-shadow:inset 0 0 3px rgba(255,255,255,.18),inset 0 0 14px rgba(127,199,255,.010),0 0 8px rgba(255,255,255,.055),0 0 30px rgba(127,199,255,.050);
}

.oli-sphere__glass::before{
    content:"";
    position:absolute;
    inset:-6%;
    border-radius:50%;
    opacity:.22;
    background:conic-gradient(from 18deg,transparent 0deg,transparent 58deg,rgba(255,255,255,.20) 82deg,transparent 112deg,transparent 360deg);
    filter:blur(4px);
    animation:orbeShineRotate 20s linear infinite;
}

.oli-sphere__glass::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    opacity:.22;
    background:
        linear-gradient(35deg,transparent 43%,rgba(127,199,255,.13) 44%,transparent 46%),
        linear-gradient(95deg,transparent 48%,rgba(255,255,255,.14) 49%,transparent 51%),
        linear-gradient(145deg,transparent 45%,rgba(127,199,255,.10) 46%,transparent 48%),
        radial-gradient(circle at 50% 50%,rgba(127,199,255,.92) 0 1.1px,transparent 2.4px),
        radial-gradient(circle at 35% 43%,rgba(255,255,255,.32) 0 1px,transparent 2px),
        radial-gradient(circle at 62% 38%,rgba(127,199,255,.34) 0 1px,transparent 2px),
        radial-gradient(circle at 66% 61%,rgba(255,255,255,.28) 0 1px,transparent 2px),
        radial-gradient(circle at 39% 65%,rgba(127,199,255,.28) 0 1px,transparent 2px);
    filter:blur(.18px);
    animation:orbeNeuralBreath 7.8s ease-in-out infinite;
}

.oli-sphere__reflection{
    position:absolute;
    width:54px;
    height:18px;
    left:50%;
    top:20%;
    border-radius:50%;
    transform:translate(-50%,-50%) translate(var(--light-x,0px), var(--light-y,0px)) rotate(-8deg);
    background:radial-gradient(ellipse,rgba(255,255,255,.60),rgba(255,255,255,.13) 46%,transparent 76%);
    filter:blur(1.6px);
    opacity:.62;
}

.oli-sphere__core{
    position:absolute;
    left:50%;
    top:50%;
    width:3.5px;
    height:3.5px;
    margin-left:-1.75px;
    margin-top:-1.75px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,1) 0 8%,rgba(127,199,255,1) 34%,rgba(127,199,255,.52) 62%,transparent 100%);
    box-shadow:0 0 7px rgba(255,255,255,.95),0 0 32px rgba(127,199,255,.95),0 0 76px rgba(127,199,255,.42),0 0 118px rgba(127,199,255,.20);
    opacity:.72;
    animation:orbeMicroCoreBreath 7.8s ease-in-out infinite;
}

.oli-sphere__core::before{
    content:"";
    position:absolute;
    inset:-20px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(127,199,255,.26),rgba(127,199,255,.095) 42%,transparent 72%);
    filter:blur(2px);
    opacity:.70;
    animation:orbeCoreAura 7.8s ease-in-out infinite;
}

.oli.is-awake .oli-sphere__core{
    opacity:1;
}

/*==============================================================================
 ORBE FLOOR SIGNATURE
==============================================================================*/

.oli-floor-signature{
    position:absolute;
    left:50%;
    top:72.0%;/*posicion de la letra */
    z-index:4;
    transform:translateX(-50%) perspective(1100px) rotateX(76deg) scale(1.18);
    display:grid;
    gap:12px;
    text-align:center;
    pointer-events:none;
    opacity:.85;
    filter:blur(.16px);
    text-shadow:0 1px 0 rgba(255,255,255,.66),0 -1px 0 rgba(60,70,80,.12);
}

.oli-floor-signature strong{
   font-family:var(--font-display);

    font-weight:400;

    font-size:clamp(22px,2vw,36px);

    letter-spacing:.38em;
    color:#6f7d89;/*Manjamos el color de letra*/
}

.oli-floor-signature span{

    font-family:var(--font-ui);

    font-size:clamp(13px,1.1vw,18px);

    letter-spacing:.32em;

    color:#87939d;

    text-transform:uppercase;
}

/*==============================================================================
 ANIMATIONS
==============================================================================*/

@keyframes orbeMicroCoreBreath{
    0%,100%{
        transform:scale(.55);
        opacity:.30;
        box-shadow:0 0 5px rgba(255,255,255,.70),0 0 18px rgba(127,199,255,.38),0 0 48px rgba(127,199,255,.14);
    }

    46%{
        transform:scale(2.35);
        opacity:1;
        box-shadow:0 0 11px rgba(255,255,255,1),0 0 48px rgba(127,199,255,1),0 0 112px rgba(127,199,255,.55),0 0 160px rgba(127,199,255,.26);
    }

    68%{
        transform:scale(.95);
        opacity:.56;
    }
}

@keyframes orbeCoreAura{
    0%,100%{
        opacity:.20;
        transform:scale(.68);
    }

    46%{
        opacity:.82;
        transform:scale(1.26);
    }

    68%{
        opacity:.34;
        transform:scale(.92);
    }
}

@keyframes orbeAmbientBreath{
    0%,100%{
        opacity:.20;
        transform:scale(.94);
    }

    46%{
        opacity:.78;
        transform:scale(1.16);
    }

    68%{
        opacity:.38;
        transform:scale(.99);
    }
}

@keyframes orbeNeuralBreath{
    0%,100%{
        opacity:.08;
        transform:scale(.98);
    }

    46%{
        opacity:.38;
        transform:scale(1.04);
    }

    68%{
        opacity:.14;
    }
}

@keyframes orbeShineRotate{
    to{transform:rotate(360deg)}
}

@keyframes orbeMagneticFloat{
    0%,100%{margin-top:0;margin-left:0}
    35%{margin-top:-.8px;margin-left:.4px}
    70%{margin-top:.6px;margin-left:-.4px}
}

@keyframes orbeEnterBg{
    to{
        transform:scale(1.12);
        filter:brightness(1.22) blur(6px);
        opacity:.82;
    }
}
/*==============================================================================
ORBE FLOOR LOGO
==============================================================================*/

.oli-floor-logo{

    position:absolute;

    left:50%;
    top:72.0%;

    transform:
        translateX(-50%)
        perspective(700px)
        rotateX(60deg);

    z-index:4;

    pointer-events:none;

    font-family:var(--font-display);
    font-size:clamp(22px,2vw,34px);
    font-weight:400;

    letter-spacing:.55em;

    color:#4b5966;

    opacity:.85;

    text-shadow:
        0 1px 0 rgba(255,255,255,.45);

    user-select:none;
}
/*==============================================================================
ORBE FLOOR MOTTO
==============================================================================*/

.oli-floor-motto{

    position:absolute;

    left:50%;
    top:83.5%;

    transform:
        translateX(-50%)
        perspective(1100px)
        rotateX(72deg);

    z-index:3;

    pointer-events:none;

    white-space:nowrap;

    font-family:var(--font-ui);

    font-size:clamp(18px,1.4vw,24px);

    font-weight:300;

    letter-spacing:.65em;

    text-transform:uppercase;

    color:#4b5966;

    opacity:.85;

    user-select:none;

    text-shadow:
        0 1px 0 rgba(255,255,255,.35);
}