/* ============================================================
   01-BASE.CSS — Variables, Reset, Body, Tipografía, Contenedores
   dimonix.gg
   ============================================================ */

/* ── 1. VARIABLES & BRANDING ── */
:root {
    --brand-primary:    #2e0fd7;
    --live-red:         #ff3b3b;

    --bg-body:          #151617;
    --bg-nav:           rgba(21, 22, 23, 0.98);
    --bg-card:          #0f1012;
    --bg-footer-bar:    #0d0e10;
    --bg-footer-slim:   #000000;

    --text-main:        #ffffff;
    --text-muted:       #a0aab5;
    --text-inverse:     #000000;

    --border-color:     rgba(255, 255, 255, 0.1);
    --glass-bg:         rgba(255, 255, 255, 0.05);
    --glass-hover:      rgba(255, 255, 255, 0.1);

    --font-headings:    'obviously', sans-serif;
    --font-body:        -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    --transition:       all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --header-height:    100px;
    --container-width:  1400px;
}

/* ── MODO CLARO ── */
[data-theme="light"] {
    --bg-body:          #f0f2f5;
    --bg-nav:           rgba(255, 255, 255, 0.98);
    --bg-card:          #ffffff;
    --bg-footer-bar:    #e0e0e0;
    --bg-footer-slim:   #d6d6d6;
    --text-main:        #1a1a1a;
    --text-muted:       #555555;
    --text-inverse:     #ffffff;
    --border-color:     rgba(0, 0, 0, 0.1);
    --glass-bg:         rgba(0, 0, 0, 0.05);
    --glass-hover:      rgba(0, 0, 0, 0.08);
}

/* ── 2. RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── 3. BODY ── */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Bloqueo barra Google Translate */
    top: 0px !important;
    position: static !important;
}

/* ── 4. TIPOGRAFÍA ── */
h1, h2, h3, h4, h5, h6, .logo {
    font-family: var(--font-headings);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── 5. CONTENEDORES ── */
.container       { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
.container-fluid { width: 100%; padding: 0 20px; }

/* ── 6. EFECTO ARCOÍRIS (UTILIDAD) ── */
.texto-arcoiris {
    background-image: linear-gradient(to right, #ff00cc, #3333ff, #00ccff, #00ff00, #ffff00, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    animation: moverArcoiris 3s linear infinite;
}

/* ── 7. RESPONSIVE BASE ── */

/* Pantallas mayores a 1920px */
@media (min-width: 1921px) {
    :root {
        --header-height:    140px;
        --container-width:  1800px;
    }
}

/* Tablets y móviles: desbloquear scroll */
@media (max-width: 1200px) {
    body {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* ── 8. CORRECCIONES GOOGLE TRANSLATE ── */
iframe.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

.skiptranslate { display: none !important; }

/* Excepción: selector de idioma propio visible */
.lang-selector .skiptranslate { display: block !important; }

.goog-tooltip,
.goog-tooltip:hover        { display: none !important; }

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}