@charset "UTF-8";
/* ====================================================================================
   BLOQUE 2: MOTOR VISUAL SOVEREIGN 14.5 (COLORIMETRÍA VÍVIDA & ANIMACIONES FLUIDAS)
   Colores brillantes, scroll reparado, Avatares vivos, iluminación orgánica 3D.
   ==================================================================================== */

:root { 
    /* 1. Paleta Corporativa de Lujo (Textos y Bordes) */
    --valtara-oro: #F2C94C; 
    --valtara-oro-suave: #FCEABB; 
    --valtara-negro-fondo: #050508; /* Un negro menos abisal, ligeramente azulado */
    --valtara-negro-modal: rgba(10, 10, 15, 0.95);
    --valtara-blanco: #ffffff; 
    --valtara-gris-texto: #e2e2e8; /* Gris más claro para mejor lectura */
    
    /* 2. Colorimetría Vívida (Para botones flotantes y luces ambientales) */
    --valtara-cian-brillante: #00FFFF;
    --valtara-morado-vivo: #B200FF;
    --valtara-verde-menta: #00FFAA;
    --valtara-dorado-arena: #FFD700;
    --valtara-magenta-profundo: #F72585; /* Nuevo token para profundidad térmica */
    --valtara-whatsapp: #25D366; /* Verde exacto de WhatsApp para identificación rápida */
    --valtara-alerta: #FF3366;

    /* Gradientes Expandidos de Ultra-Lujo */
    --grad-magic: linear-gradient(135deg, var(--valtara-morado-vivo), var(--valtara-magenta-profundo));
    --grad-cristal: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 100%);
    
    /* 3. Glassmorphism Tokens */
    --cristal-fondo: rgba(15, 15, 25, 0.55); /* Translúcido para dejar pasar colores vivos */
    --cristal-borde: rgba(255, 255, 255, 0.15); 
    --cristal-sombra: 0 2rem 5rem rgba(0, 0, 0, 0.7);
    
    /* 4. Escala y Tipografía */
    --font-main: 'Lato', sans-serif;
    --font-accent: 'Playfair Display', serif;
    --nav-height: 6rem; /* Ligeramente más amplio para respirar */
    --max-width: 1200px;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Curva Apple de extrema fluidez */
}

/* ------------------------------------------------------------------------------------
   A. RESET ARQUITECTÓNICO Y SOLUCIÓN DE ZOOM
   ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { 
    font-size: 15px; /* Tamaño base más amigable y grande */
    scroll-behavior: smooth; 
}

@media (max-width: 850px) {
    html { font-size: 13px; } /* Ajuste responsivo */
}

body { 
    background-color: var(--valtara-negro-fondo); 
    color: var(--valtara-blanco); 
    font-family: var(--font-main); 
    line-height: 1.8; /* Más espacio entre líneas para lectura fácil */
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* SOLUCIÓN SCROLL: Permitimos el scroll en Y siempre en el body */
    overflow-y: auto; 
}

/* Contenedor Maestro para el Zoom Seguro (Evita que se rompan las tarjetas) */
#app-wrapper {
    width: 100%;
    min-height: 100vh;
    transform-origin: top center;
    transition: transform 0.4s var(--ease-out-expo);
}

*:focus-visible { outline: 3px solid var(--valtara-cian-brillante); outline-offset: 4px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ------------------------------------------------------------------------------------
   B. MOTOR AMBIENTAL (ORBES VÍVIDOS Y MOVIMIENTO ORGÁNICO)
   ------------------------------------------------------------------------------------ */
.ambient-engine { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    z-index: -1; 
    overflow: hidden; 
    background: var(--valtara-negro-fondo); 
}

/* Esferas de luz con colores vibrantes y mezcla de pantalla */
.orb { 
    position: absolute; border-radius: 50%; filter: blur(8rem); /* Mayor desenfoque para suavidad */
    opacity: 0.75; mix-blend-mode: screen; 
    animation: floatOrb 25s infinite cubic-bezier(0.4, 0, 0.2, 1) alternate; /* Más lento y orgánico */
}
.orb-1 { width: 55vw; height: 55vw; background: var(--valtara-morado-vivo); top: -10%; left: -10%; }
.orb-2 { width: 65vw; height: 65vw; background: var(--valtara-verde-menta); bottom: -15%; right: -15%; animation-delay: -5s; opacity: 0.65;}
.orb-3 { width: 45vw; height: 45vw; background: var(--valtara-dorado-arena); top: 35%; left: 35%; animation-delay: -10s; opacity: 0.55; }
.orb-4 { width: 50vw; height: 50vw; background: var(--valtara-cian-brillante); bottom: 5%; left: -5%; animation-delay: -15s; opacity: 0.65;}
/* QUINTO ORBE AÑADIDO: Profundidad visual extra */
.orb-5 { width: 40vw; height: 40vw; background: var(--valtara-magenta-profundo); top: 20%; right: 10%; animation-delay: -7s; opacity: 0.5;}

/* Animación elíptica y pulsante para que se sienta vivo, no mecánico */
@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.7; }
    33% { transform: translate(5vw, 8vh) scale(1.1) rotate(15deg); opacity: 0.9; }
    66% { transform: translate(-4vw, 15vh) scale(0.95) rotate(-10deg); opacity: 0.6; }
    100% { transform: translate(8vw, -5vh) scale(1.15) rotate(5deg); opacity: 0.8; }
}

/* Cristal esmerilado principal para suavizar las luces */
.glass-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); 
    background: radial-gradient(circle at center, transparent 0%, rgba(5,5,8,0.3) 100%);
    z-index: 1; pointer-events: none;
}

/* ------------------------------------------------------------------------------------
   C. ONBOARDING Y AVATARES ANIMADOS (INTERACCIÓN PREMIUM)
   ------------------------------------------------------------------------------------ */
.full-screen-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at center, rgba(10,10,20,0.95) 0%, rgba(2,2,4,0.98) 100%);
    z-index: 99999; display: flex; justify-content: center; align-items: center;
    transition: opacity 0.8s var(--ease-out-expo), visibility 0.8s;
}
.full-screen-overlay.fade-out { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.05); }

.onboarding-content { text-align: center; max-width: 650px; padding: 3rem 2rem; animation: floatUp 1.2s var(--ease-out-expo) forwards; }
@keyframes floatUp { from { opacity: 0; transform: translateY(50px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Animación de "Respiración" para el icono central y avatares */
.glow-icon-wrapper i {
    animation: breathe 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--valtara-verde-menta);
    text-shadow: 0 0 3rem rgba(0, 255, 170, 0.6);
}

@keyframes breathe {
    0% { transform: scale(1); filter: brightness(1); text-shadow: 0 0 2rem rgba(0, 255, 170, 0.4); }
    50% { transform: scale(1.15); filter: brightness(1.4); text-shadow: 0 0 5rem rgba(0, 255, 170, 0.9); }
    100% { transform: scale(1); filter: brightness(1); text-shadow: 0 0 2rem rgba(0, 255, 170, 0.4); }
}

.input-group { 
    background: var(--grad-cristal); border: 1px solid rgba(255,255,255,0.15); 
    padding: 3.5rem; border-radius: 2rem; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    box-shadow: 0 2rem 8rem rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.2); 
}

/* Diseño y Animación de Avatares */
.avatar-grid { display: flex; flex-wrap: wrap; gap: 1.8rem; justify-content: center; margin-bottom: 2rem; }
.avatar-option { cursor: pointer; text-align: center; position: relative; }
.avatar-option input { display: none; }

.avatar-icon {
    display: flex; justify-content: center; align-items: center;
    width: 5.5rem; height: 5.5rem; border-radius: 50%;
    background: rgba(255,255,255,0.03); border: 2px solid rgba(255,255,255,0.1);
    font-size: 2.2rem; color: #888; transition: all 0.5s var(--ease-out-expo);
    margin: 0 auto 0.8rem auto; box-shadow: inset 0 0 1rem rgba(0,0,0,0.5);
}
.avatar-name { font-size: 0.95rem; color: #888; font-weight: 900; transition: all 0.4s ease; text-transform: uppercase; letter-spacing: 0.1rem;}

/* Hover del Avatar */
.avatar-option:hover .avatar-icon { 
    background: rgba(255,255,255,0.1); color: var(--valtara-blanco); 
    transform: translateY(-8px) scale(1.05); border-color: rgba(255,255,255,0.3);
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.3);
}

/* Estado Seleccionado del Avatar (Colorimetría Vívida Expandida) */
.avatar-option input:checked + .avatar-icon {
    border-color: var(--valtara-cian-brillante); color: var(--valtara-negro-fondo);
    background: var(--valtara-cian-brillante);
    box-shadow: 0 0 3rem rgba(0, 255, 255, 0.7), inset 0 0 1rem rgba(255,255,255,0.8);
    transform: translateY(-10px) scale(1.15);
}
.avatar-option input:checked ~ .avatar-name { color: var(--valtara-cian-brillante); text-shadow: 0 0 10px rgba(0,255,255,0.3); }

.input-group input[type="text"] {
    width: 100%; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2);
    color: var(--valtara-blanco); padding: 1.6rem; font-size: 1.3rem;
    border-radius: 1.2rem; text-align: center; outline: none; transition: all 0.4s var(--ease-out-expo);
    box-shadow: inset 0 0 1rem rgba(0,0,0,0.5);
}
.input-group input[type="text"]:focus { 
    border-color: var(--valtara-cian-brillante); 
    box-shadow: 0 0 2.5rem rgba(0, 255, 255, 0.3), inset 0 0 1.5rem rgba(0,255,255,0.1); 
    background: rgba(0, 255, 255, 0.05); transform: translateY(-2px);
}

/* ------------------------------------------------------------------------------------
   D. CABECERA (HEADER CRISTALINO Y LOGOTIPO)
   ------------------------------------------------------------------------------------ */
.system-header { 
    position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height); 
    z-index: 2000; display: flex; justify-content: space-between; align-items: center; 
    background: rgba(4, 4, 8, 0.65); border-bottom: 1px solid var(--cristal-borde); 
    padding: 0 3.5rem; backdrop-filter: blur(3rem); -webkit-backdrop-filter: blur(3rem);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.5);
}

/* Base del botón del logo */
.header-logo { 
    background: transparent; border: none; cursor: pointer; display: flex; align-items: center;
    transition: all 0.4s var(--ease-out-expo);
    padding: 0;
}
.header-logo:hover { 
    transform: scale(1.05); 
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(242, 201, 76, 0.4)); 
}

/* La imagen fotográfica del logotipo */
.logo-img {
    height: 45px; 
    width: auto;
    object-fit: contain;
    border-radius: 8px; /* Suaviza ligeramente los bordes del recuadro negro */
    transition: all 0.3s ease;
}

.header-controls { display: flex; align-items: center; gap: 1.5rem; }

.header-action-btn, .hamburger-btn {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.2);
    width: 4rem; height: 4rem; border-radius: 50%;
    font-size: 1.5rem; display: flex; justify-content: center; align-items: center;
    transition: all 0.4s var(--ease-out-expo); cursor: pointer; color: var(--valtara-blanco);
}
.header-action-btn:hover, .hamburger-btn:hover { 
    background: var(--valtara-blanco); color: var(--valtara-negro-fondo); 
    box-shadow: 0 0 2.5rem rgba(255,255,255,0.6); transform: translateY(-3px) scale(1.1); 
}

/* ------------------------------------------------------------------------------------
   E. MENÚ LATERAL (SOLUCIÓN SCROLL Y CRISTAL PROFUNDO)
   ------------------------------------------------------------------------------------ */
.side-menu { 
    position: fixed; top: 0; right: -100%; width: 40rem; max-width: 100vw; height: 100vh; 
    background: rgba(4, 4, 10, 0.85); border-left: 1px solid var(--valtara-cian-brillante); 
    z-index: 3000; transition: right 0.7s cubic-bezier(0.16, 1, 0.3, 1); 
    display: flex; flex-direction: column; backdrop-filter: blur(4rem); -webkit-backdrop-filter: blur(4rem);
    box-shadow: -2rem 0 8rem rgba(0,255,255,0.15), -1rem 0 4rem rgba(0,0,0,0.9);
}
.side-menu.open { right: 0; }

.menu-header { padding: 3.5rem 3rem 2.5rem 3rem; border-bottom: 1px solid rgba(255,255,255,0.1); position: relative; background: var(--grad-cristal); flex-shrink: 0; }

.close-btn { position: absolute; top: 2.5rem; right: 3rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); color: var(--valtara-blanco); width: 3.5rem; height: 3.5rem; border-radius: 50%; cursor: pointer; transition: all 0.4s var(--ease-out-expo); display: flex; justify-content: center; align-items: center; font-size: 1.3rem;}
.close-btn:hover { background: var(--valtara-alerta); border-color: var(--valtara-alerta); transform: rotate(90deg) scale(1.1); box-shadow: 0 0 2.5rem rgba(255, 51, 102, 0.8); }

.patient-profile-card { display: flex; align-items: center; gap: 1.8rem; }
.profile-avatar { width: 6rem; height: 6rem; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2.8rem; color: var(--valtara-cian-brillante); box-shadow: 0 0.5rem 2.5rem rgba(0, 255, 255, 0.4); border: 2px solid var(--valtara-cian-brillante); }
.profile-info { display: flex; flex-direction: column; }
.profile-greeting { font-size: 1.2rem; color: var(--valtara-gris-texto); font-style: italic; }
.profile-name { font-size: 2.2rem; color: var(--valtara-blanco); font-family: var(--font-accent); text-shadow: 0 0 15px rgba(255,255,255,0.2);}

/* SOLUCIÓN SCROLL: Esta área sí debe tener auto para poder bajar con el dedo */
.menu-scroll-area { padding: 2.5rem 3rem 6rem 3rem; overflow-y: auto; flex-grow: 1; scrollbar-width: thin; scrollbar-color: var(--valtara-cian-brillante) transparent;}
.menu-section-title { font-size: 1.05rem; color: var(--valtara-verde-menta); text-transform: uppercase; letter-spacing: 0.2rem; margin-bottom: 1.5rem; margin-top: 2rem; font-weight: 900; }

.nav-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.nav-item { width: 100%; text-align: left; padding: 1.5rem 1.8rem; border-radius: 1.2rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); color: var(--valtara-blanco); font-size: 1.25rem; display: flex; align-items: center; gap: 1.8rem; transition: all 0.4s var(--ease-out-expo); cursor: pointer; font-weight: 700; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);}
.nav-item i { font-size: 1.8rem; color: var(--valtara-oro); width: 2.5rem; text-align: center; transition: 0.4s; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,0.08); border-color: var(--valtara-oro); transform: translateX(12px); box-shadow: 0 1rem 2.5rem rgba(242, 201, 76, 0.2);}
.nav-item:hover i, .nav-item.active i { transform: scale(1.2); filter: drop-shadow(0 0 10px var(--valtara-oro)); }

.btn-ws-massive { display: flex; align-items: center; justify-content: center; gap: 1.2rem; background: var(--valtara-whatsapp); color: var(--valtara-negro-fondo); padding: 2rem; border-radius: 1.2rem; text-decoration: none; font-weight: 900; font-size: 1.4rem; transition: all 0.5s var(--ease-out-expo); text-transform: uppercase; letter-spacing: 0.15rem; box-shadow: 0 1rem 2rem rgba(37,211,102,0.3);}
.btn-ws-massive:hover { background: var(--valtara-blanco); transform: translateY(-6px); box-shadow: 0 2rem 4rem rgba(37, 211, 102, 0.6); }

/* ------------------------------------------------------------------------------------
   F. GRID Y CONTENEDOR SPA (TRANSICIONES EXTRA SUAVES)
   ------------------------------------------------------------------------------------ */
#main-content { padding-top: var(--nav-height); width: 100%; min-height: 100vh; position: relative; z-index: 1;}
.view-section { display: none; opacity: 0; padding: 6rem 2rem; max-width: var(--max-width); margin: 0 auto; }
.view-section.active { display: block; opacity: 1; animation: fadeInView 1s var(--ease-out-expo); }

@keyframes fadeInView { 
    from { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(8px); } 
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 
}

/* Clases base para la estructura en Zig-Zag que haremos en components */
.grid-container { display: grid; gap: 3.5rem; margin-top: 3rem; }
.grid-2-cols { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
.grid-3-cols { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ------------------------------------------------------------------------------------
   G. SOLUCIÓN MÁGICA: INVERTIR COLORES SIN ROMPER FOTOS NI LUCES
   ------------------------------------------------------------------------------------ */
body.invert-colors {
    /* Invierte el fondo y el texto de la página */
    filter: invert(1) hue-rotate(180deg);
    background-color: #fff;
}
/* Re-invertimos (lo devolvemos a la normalidad) las cosas que NO queremos feas */
body.invert-colors img, 
body.invert-colors video, 
body.invert-colors iframe,
body.invert-colors .ambient-engine,
body.invert-colors .avatar-icon,
body.invert-colors .fab-btn,
body.invert-colors .card-icon-wrapper {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* ------------------------------------------------------------------------------------
   H. MEGA FOOTER Y RESPONSIVIDAD
   ------------------------------------------------------------------------------------ */
.mega-footer { background: rgba(2,2,3,0.98); border-top: 1px solid var(--valtara-morado-vivo); padding: 7rem 2rem 4rem 2rem; margin-top: 6rem; position: relative; z-index: 1; box-shadow: 0 -2rem 5rem rgba(178,0,255,0.1);}

@media (max-width: 850px) {
    .system-header { padding: 0 1.5rem; }
    .side-menu { width: 100vw; }
    .input-group { padding: 2.5rem 1.5rem; }
    .avatar-icon { width: 4rem; height: 4rem; font-size: 1.8rem; }
    .grid-2-cols, .grid-3-cols { grid-template-columns: 1fr; }
    .logo-img { height: 38px; } /* Ajuste del logo para móviles */
}

/* ==========================================
   PARCHE QUIRÚRGICO: MÓVIL Y SCROLL LIBRE
   ========================================== */
body { 
    overflow-x: hidden !important; 
    overflow-y: auto !important; 
    overscroll-behavior-y: none; /* Evita que el scroll se trabe en iOS/Android */
}
#app-wrapper { 
    min-height: auto !important; 
    overflow: hidden; 
}

/* Reducción masiva para celulares */
@media (max-width: 850px) {
    html { font-size: 10px !important; } /* Reduce todo un 33% automáticamente */
    .hero-view h1 { font-size: 3.8rem !important; }
    .body-map-container { padding: 2.5rem 1.5rem !important; gap: 2rem !important; }
    .zone-info { padding: 2.5rem 1.5rem !important; }
    .btn-primary, .btn-agenda-ahora { padding: 1.4rem 1.8rem !important; font-size: 1.15rem !important; }
}

/* ==========================================
   PARCHE QUIRÚRGICO 2: REPARACIÓN ONBOARDING IPHONE (SAFARI)
   ========================================== */
.full-screen-overlay {
    height: 100% !important;
    min-height: 100dvh !important; /* Medida dinámica que respeta la barra de Apple */
    overflow-y: auto !important; /* Permite deslizar el dedo si el contenido es largo */
    align-items: flex-start !important; /* Evita que el contenedor aplaste el texto */
    padding: 4rem 1.5rem !important; 
}

.onboarding-content {
    margin: auto !important; /* Vuelve a centrar todo pero de forma elástica */
    padding: 2rem !important;
    width: 100% !important;
}

@media (max-width: 850px) {
    .input-group { padding: 2.5rem 1.5rem !important; }
    .avatar-grid { gap: 1.2rem !important; }
    .avatar-icon { width: 5rem !important; height: 5rem !important; margin-bottom: 0.5rem !important; }
    #welcome-start-btn { padding: 1.4rem !important; font-size: 1.2rem !important; }
}

/* ==========================================
   PARCHE QUIRÚRGICO 3: TOUCH TARGETS (DEDOS) Y ZOOM BUG (EDGE/CHROME)
   ========================================== */

/* 1. Botones superiores y "X" tamaño ultra-cómodo para móviles */
#menu-btn, #aura-close-btn, #menu-close-btn, .close-btn, .top-bar-btn {
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 12px !important;
    font-size: 1.8rem !important; /* Hace la "X" y el menú visualmente más grandes */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Reparar el desbordamiento de íconos al hacer zoom */
.card-icon-wrapper, .glow-icon-wrapper {
    flex-shrink: 0 !important; /* Evita que la caja se deforme con el zoom */
    min-width: 85px !important; 
    min-height: 85px !important;
    height: auto !important;
    width: auto !important;
}

/* Candado para mantener el ícono en su centro sin romperse */
.card-icon-wrapper i, .glow-icon-wrapper i {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 3. Asegurar que los botones de interacción no se encimen */
header, .top-nav-bar {
    gap: 1.2rem !important;
}

/* ==========================================
   PARCHE QUIRÚRGICO 4: RECUPERACIÓN DE 'X' Y ENCABEZADOS EN EDGE
   ========================================== */

/* Forzamos a la 'X' a anclarse en la esquina superior derecha de la pantalla/modal */
.close-btn, #aura-close-btn, #menu-close-btn {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important; /* Capa de prioridad máxima absoluta */
    background: rgba(20, 20, 30, 0.95) !important; /* Fondo oscuro para que resalte */
    border: 1px solid rgba(0, 255, 255, 0.4) !important; /* Borde cian sutil */
    border-radius: 50% !important; /* Botón circular perfecto */
}

/* Protegemos los títulos de los modales para que no los tape la X ni desaparezcan */
.glass-modal h2, .glass-modal h3, #audio-modal h2, #a11y-modal h2 {
    position: relative !important;
    z-index: 9000 !important;
    padding-right: 4rem !important; /* Empuja el texto un poco para que no choque con la X */
    flex-shrink: 0 !important; /* Prohíbe que el navegador aplaste el título */
    margin-top: 1rem !important;
}

/* Aseguramos que el contenedor del modal no oculte elementos desbordados por error */
.glass-modal, #a11y-modal, #audio-modal, #aura-modal {
    position: fixed !important; 
    overflow-y: auto !important; /* Permite scroll interno si la pantalla es enana */
    overflow-x: hidden !important;
}

/* ==========================================
   PARCHE QUIRÚRGICO 5: SUSPENSIÓN TÉRMICA (ENFRIAMIENTO GPU)
   ========================================== */
body.pausar-ambiente .ambient-engine, 
body.pausar-ambiente .ambient-engine * {
    animation-play-state: paused !important;
}