/**
 * THEME.css
 * Design tokens – Claymorphism con Paleta de Marca FS.
 */
:root {
    /* --- PALETA DE MARCA --- */
    --primary:       #012169;              /* Azul Oscuro FS */
    --primary-glow:  rgba(1, 33, 105, 0.18);
    --secondary:     #0084d5;              /* Azul Claro FS */
    --accent:        #1fccea;              /* Cian Énfasis FS */
    --dark:          #131b2e;              /* Fondo Negro FS */
    --light:         #f5f9fc;             /* Fondo Blanco FS */
    --white:         #ffffff;

    /* --- GLASSMORPHISM COLORS --- */
    --glass-bg:       #010a1f;             /* Fondo base muy oscuro para el mesh */
    --glass-card:     rgba(0, 5, 15, 0.4); /* Darkened and more opaque for better contrast */
    --glass-card-hover: rgba(255, 255, 255, 0.12); 
    --glass-border:   rgba(255, 255, 255, 0.25); /* More visible border */
    --glass-text:     #ffffff;             /* Texto principal en blanco */
    --glass-text-sub: rgba(255, 255, 255, 0.85); /* Increased from 0.7 to 0.85 for WCAG AA */

    /* --- GLASSMORPHISM EFFECTS --- */
    --glass-shadow:   0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --glass-blur:     blur(16px);
    --glass-blur-heavy: blur(24px);
    --glass-glow:     0 0 20px rgba(31, 204, 234, 0.4);

    /* --- FEEDBACK --- */
    --success: #10b981;
    --error:   #ef4444;
    --warning: #f59e0b;

    /* --- SPACING & ROUNDNESS --- */
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 40px;
    --radius-lg-mobile: 24px;
    --spacing:   24px;
    --spacing-mobile: 16px;
    --space-1:   8px;
    --space-2:   16px;
    --space-3:   24px;
    --space-4:   32px;
    --space-6:   48px;
    --space-8:   64px;

    /* --- TRANSITIONS --- */
    --transition:        cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
    --transition-fast:   cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
    --anim-speed:        0.4s;

    /* ORB COLORS (Matching home exactly) */
    --orb1-color:         rgba(1, 33, 105, 0.85);
    --orb2-color:         rgba(31, 204, 234, 0.65);
    --orb3-color:         rgba(0, 132, 213, 0.70);
    --orb4-color:         rgba(31, 204, 234, 0.50);

    /* MESH STOPS (Matching home exactly) */
    --mesh-stop1:         rgba(1, 33, 105, 0.70);
    --mesh-stop2:         rgba(31, 204, 234, 0.45);
    --mesh-stop3:         rgba(0, 132, 213, 0.50);
    --mesh-stop4:         rgba(1, 33, 105, 0.55);
    --mesh-stop5:         rgba(31, 204, 234, 0.30);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Montserrat:wght@700;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #070c17;
    color: var(--glass-text);
    margin: 0;
    overflow: hidden; /* Desktop: scroll is inside main container */
    user-select: none;
    position: relative;
}

/* On mobile: release body scroll so native momentum scroll works */
@media (max-width: 768px) {
    body {
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
        -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
    }
}

/* PREMIUM BACKGROUND SYSTEM */
.premium-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #070c17;
    background-image: 
        radial-gradient(ellipse at 15% 20%, var(--mesh-stop1) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 75%, var(--mesh-stop2) 0%, transparent 45%),
        radial-gradient(ellipse at 55% 55%, var(--mesh-stop3) 0%, transparent 50%),
        radial-gradient(ellipse at 5%  85%, var(--mesh-stop4) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 10%, var(--mesh-stop5) 0%, transparent 35%);
    background-size: 250% 250%;
    animation: meshMove 18s ease-in-out infinite;
    z-index: -2;
    pointer-events: none;
}

/* Global Grain Texture Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 9999;
}

@keyframes meshMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

    /* --- ACCESSIBILITY FOCUS --- */
    :focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 4px;
    }
}

/* ORB ANIMATIONS */
@keyframes orbFloat1 {
    0%   { transform: translate(0px, 0px) scale(1); }
    25%  { transform: translate(80px, -60px) scale(1.15); }
    50%  { transform: translate(40px, 80px) scale(0.9); }
    75%  { transform: translate(-60px, 30px) scale(1.1); }
    100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes orbFloat2 {
    0%   { transform: translate(0px, 0px) scale(1); }
    30%  { transform: translate(-100px, 60px) scale(1.2); }
    60%  { transform: translate(60px, -80px) scale(0.85); }
    100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes orbFloat3 {
    0%   { transform: translate(0px, 0px) scale(0.9); }
    40%  { transform: translate(70px, 50px) scale(1.3); }
    80%  { transform: translate(-50px, -70px) scale(1.0); }
    100% { transform: translate(0px, 0px) scale(0.9); }
}

@keyframes orbPulse {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 0.9; }
}

/* ORB CLASSES */
.bg-orb-1 {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: -1;
    width: 700px; height: 700px; top: -150px; left: -150px;
    background: radial-gradient(circle, var(--orb1-color) 0%, transparent 70%);
    filter: blur(80px); animation: orbFloat1 25s ease-in-out infinite, orbPulse 8s ease-in-out infinite;
}

.bg-orb-2 {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: -1;
    width: 600px; height: 600px; bottom: -100px; right: -100px;
    background: radial-gradient(circle, var(--orb2-color) 0%, transparent 70%);
    filter: blur(90px); animation: orbFloat2 30s ease-in-out infinite, orbPulse 10s ease-in-out infinite 2s;
}

.bg-orb-3 {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: -1;
    width: 500px; height: 500px; top: 40%; right: 10%;
    background: radial-gradient(circle, var(--orb3-color) 0%, transparent 70%);
    filter: blur(100px); animation: orbFloat3 22s ease-in-out infinite, orbPulse 12s ease-in-out infinite 4s;
}

.bg-orb-4 {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: -1;
    width: 350px; height: 350px; top: 5%; right: 5%;
    background: radial-gradient(circle, var(--orb4-color) 0%, transparent 70%);
    filter: blur(70px); animation: orbFloat1 35s ease-in-out infinite reverse, orbPulse 9s ease-in-out infinite 1s;
}