:root {
    --primary: #00e5ff;
    --secondary: #b300ff;
    --bg: #050508;
    --card-bg: #0f0f13;
    --text: #ffffff;
    --border: rgba(255,255,255,0.1);
    --chat-width: 380px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }
body { background: var(--bg); color: var(--text); overflow-x: hidden; line-height: 1.6; }

/* --- ESTRUCTURA DUAL --- */

/* ESCRITORIO (> 1100px) */
@media (min-width: 1101px) {
    .app-wrapper { display: grid; grid-template-columns: 1fr var(--chat-width); width: 100%; min-height: 100vh; }
    .chat-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: #0a0a0f; border-left: 1px solid var(--border); z-index: 1000; }
    .chat-trigger-mobile, .close-chat-btn { display: none; }
    nav { position: sticky; top: 0; z-index: 1100; width: 100%; }
}

/* MÓVIL (<= 1100px) */
@media (max-width: 1100px) {
    .app-wrapper { display: block; width: 100%; }
    .chat-sidebar { 
        position: fixed; top: 0; right: -100%; width: 100%; height: 100dvh; 
        background: #0a0a0f; z-index: 9999; transition: right 0.4s ease-in-out;
        display: flex; flex-direction: column; overflow: hidden;
    }
    .chat-sidebar.active { right: 0; }
    
    .chat-trigger-mobile { 
        display: flex; position: fixed; bottom: 20px; right: 20px; 
        background: var(--primary); color: #000; padding: 12px 20px; 
        border-radius: 30px; font-weight: 800; font-size: 0.85rem; border: none;
        box-shadow: 0 10px 25px rgba(0, 229, 255, 0.4); z-index: 9000; cursor: pointer;
        align-items: center; gap: 10px; animation: pulse 2s infinite;
        max-width: 280px; text-align: left; line-height: 1.2;
    }
    .close-chat-btn { display: block; background: none; border: none; color: #fff; font-size: 1.5rem; margin-left: auto; cursor: pointer; }
    
    .chat-messages { flex: 1; overflow-y: auto; }
    .chat-input-area { position: sticky; bottom: 0; background: #0a0a0f; padding-bottom: calc(15px + env(safe-area-inset-bottom)); }
}

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ELEMENTOS COMUNES */
nav { padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; background: rgba(5,5,8,0.9); backdrop-filter: blur(15px); border-bottom: 1px solid var(--border); }
.logo-container { display: flex; align-items: center; gap: 12px; }
.logo-img { height: 45px; width: 45px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
.logo-text { font-size: 1.4rem; font-weight: 800; color: #fff; }

.carousel-hero { height: 500px; position: relative; overflow: hidden; }
.carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; display: flex; align-items: center; justify-content: center; text-align: center; background-size: cover; background-position: center; }
.carousel-slide.active { opacity: 1; z-index: 1; }
.slide-content h1 { font-size: 2.8rem; font-weight: 900; text-shadow: 0 4px 10px rgba(0,0,0,0.7); }

.demos-section, .packages-section { padding: 60px 20px; }
.demos-section h2, .packages-section h2 { font-size: 2rem; text-align: center; margin-bottom: 40px; color: var(--primary); }

.audio-grid, .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.audio-card, .video-card { background: var(--card-bg); padding: 15px; border-radius: 15px; border: 1px solid var(--border); text-align: center; }
audio, video { width: 100%; border-radius: 10px; }

.packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 900px; margin: 0 auto; }
.package-card { background: var(--card-bg); border-radius: 20px; border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.package-card img { width: 100%; height: 250px; object-fit: contain; background: #000; border-bottom: 1px solid var(--border); }
.package-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.price-tag { font-size: 1.5rem; font-weight: 900; color: var(--primary); margin-bottom: 10px; }
.package-content h3 { font-size: 1.4rem; color: var(--secondary); margin-bottom: 15px; min-height: 3.5rem; display: flex; align-items: center; }
.btn-primary { display: block; padding: 14px; text-align: center; border-radius: 30px; font-weight: 800; background: var(--primary); color: #000; text-decoration: none; margin-top: auto; }

/* CHAT INTERNALS */
.chat-header { padding: 20px; background: #15151a; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.status-dot { width: 12px; height: 12px; background: #00e5ff; border-radius: 50%; box-shadow: 0 0 10px #00e5ff; }
.chat-messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: #08080c; }
.msg { padding: 10px 14px; border-radius: 15px; max-width: 85%; font-size: 0.85rem; }
.msg.ai { background: rgba(0, 229, 255, 0.1); align-self: flex-start; }
.msg.user { background: rgba(179, 0, 255, 0.2); align-self: flex-end; }
.chat-input-area { padding: 15px; border-top: 1px solid var(--border); display: flex; gap: 8px; background: #0a0a0f; }
#chat-input { flex: 1; background: #1a1a24; border: 1px solid #333; padding: 10px 15px; border-radius: 20px; color: #fff; outline: none; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--primary); color: #000; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.carousel-indicators { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 10px; }
.dot { width: 8px; height: 8px; background: rgba(255,255,255,0.2); border-radius: 50%; cursor: pointer; }
.dot.active { background: var(--primary); width: 20px; border-radius: 10px; }