*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    perspective:1800px;
}

.hero{
    width:100vw;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at center,#050505 0%,#020202 45%,#000 100%);
}

.glow{
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(255,255,255,.75) 0%,
        rgba(255,255,255,.22) 20%,
        rgba(255,255,255,.06) 45%,
        transparent 70%
    );
    filter:blur(35px);
    animation:pulse 6s ease-in-out infinite;
}

.logo-float{
    position:relative;
    z-index:10;
    animation:float 6s ease-in-out infinite;
}

.logo{
    width:min(420px,35vw);
    min-width:180px;
    max-width:80vw;
    display:block;
    transform:translateZ(60px);
    transition:transform .12s ease-out;
    will-change:transform;
    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.7))
        drop-shadow(0 0 20px rgba(255,255,255,.4));
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

@keyframes pulse{
    0%,100%{
        transform:scale(1);
        opacity:.7;
    }
    50%{
        transform:scale(1.08);
        opacity:1;
    }
}

@media(max-width:768px){

    .glow{
        width:300px;
        height:300px;
        filter:blur(30px);
        opacity:.35;
    }

    .logo{
        width:65vw;
    }
}

@media(max-width:480px){

    .glow{
        width:250px;
        height:250px;
        opacity:.25;
    }

    .logo{
        width:75vw;
    }
}

/* ================= CHAT BUBBLE ================= */

#chatBubble{
    position:fixed;
    right:30px;
    bottom:30px;
    width:72px;
    height:72px;
    border-radius:50%;
    background:#111;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    cursor:pointer;
    z-index:999999;
    box-shadow:
        0 0 20px rgba(255,255,255,.2),
        0 0 50px rgba(255,255,255,.08);
    transition:.25s ease;
}

#chatBubble:hover{
    transform:scale(1.05);
}

.chatBubbleIcon{
    position:relative;
    width:40px;
    height:40px;
    display:block;
    flex-shrink:0;
    pointer-events:none;
}

.chatBubbleGlow{
    position:absolute;
    inset:-10px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(255,255,255,.35),
        transparent 70%
    );
    animation:bubblePulse 3s infinite;
}

@keyframes bubblePulse{
    0%,100%{
        transform:scale(1);
        opacity:.6;
    }
    50%{
        transform:scale(1.2);
        opacity:1;
    }
}

#chatWindow{

    position:fixed;

    right:30px;
    bottom:120px;

    width:420px;
    height:720px;
    height:min(720px, calc(100dvh - 150px));
    max-height:calc(100vh - 150px);

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    z-index:999998;

    opacity:0;
    visibility:hidden;

    transform:
        translateY(20px)
        scale(.95);

    transition:.25s ease;

    box-shadow:
        0 20px 80px rgba(0,0,0,.25);
}

#chatWindow.open{

    opacity:1;
    visibility:visible;

    transform:
        translateY(0)
        scale(1);

}

#chatHeader{

    height:56px;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

}

.chatTitle{
    font-weight:600;
    font-size:15px;
}

#closeChat{

    background:none;
    border:none;

    color:#fff;

    cursor:pointer;

    font-size:18px;

}



@media(max-width:768px){

    #chatBubble{
        right:15px;
        bottom:50px;
        width:68px;
        height:68px;
        z-index:999998;
    }

    #chatWindow{
        left:0;
        right:0;
        bottom:0;
        top:0;

        width:100%;
        height:100dvh;
        max-height:none;

        border-radius:0;
    }

}


/* Chat integrado: conserva la burbuja y el marco original. */
#chatBubble{border:0;padding:0;font-family:inherit;}
#chatWindow{display:flex;flex-direction:column;}
#chatHeader{flex-shrink:0;gap:12px;}
.chatTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#closeChat{width:32px;height:32px;flex-shrink:0;}
#chatMessages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 16px;display:flex;flex-direction:column;gap:14px;background:#fafafa;}
.chatMessage{max-width:90%;padding:12px 15px;border-radius:17px;font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;flex-shrink:0;}
.chatMessage--assistant{align-self:flex-start;background:#fff;color:#222;border:1px solid #e9e9e9;border-bottom-left-radius:5px;}
.chatMessage--user{align-self:flex-end;background:#191919;color:#fff;border-bottom-right-radius:5px;}
.chatMessage a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
#chatStatus{min-height:24px;padding:3px 18px;font-size:12px;line-height:18px;color:#666;background:#fafafa;flex-shrink:0;}
#chatForm{display:flex;align-items:flex-end;gap:10px;padding:12px 14px max(12px,env(safe-area-inset-bottom));border-top:1px solid #e9e9e9;background:#fff;flex-shrink:0;}
#chatInput{flex:1;min-width:0;max-height:110px;resize:none;border:1px solid #ddd;border-radius:16px;padding:12px 14px;font:inherit;font-size:16px;line-height:22px;color:#222;background:#fafafa;}
#chatSend{display:flex;align-items:center;justify-content:center;width:44px;height:46px;flex-shrink:0;border:0;border-radius:15px;background:#111;color:#fff;cursor:pointer;}
#chatSend:disabled{opacity:.4;cursor:default;}
#chatInput:focus-visible,#chatSend:focus-visible,#chatBubble:focus-visible,#closeChat:focus-visible{outline:2px solid #888;outline-offset:3px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(max-width:768px){#chatWindow{z-index:1000000;}#chatHeader{padding-top:env(safe-area-inset-top);height:calc(56px + env(safe-area-inset-top));}#chatMessages{padding-top:18px;}}
@media(prefers-reduced-motion:reduce){.glow,.logo-float,.chatBubbleGlow{animation:none;}#chatWindow,#chatBubble,.logo{transition:none;}}