/**
 * ============================================
 * ANIMACIONES DE FONDO - COMPARTIDAS
 * ============================================
 * Sistema profesional de fondos animados con movimiento orgánico infinito.
 * 
 * TIPOS DE ANIMACIONES DISPONIBLES:
 * - circles:   Círculos flotantes
 * - hexagons:  Hexágonos rotativos
 * - waves:     Ondas deslizantes
 * - grid:      Grid overlay animado
 * - emojis:    Iconos con sistema "wander + jitter" (2 capas) + efecto parallax
 * 
 * TEMAS DE EMOJIS DISPONIBLES (.bg-emoji + tema):
 * - .bg-lab:       Laboratorio (🧪⚗️🔬🧬💉🩺🧫⚛️)
 * - .bg-vet:       Veterinaria (🐾🐕🐈🦴💊🩺🐇)
 * - .bg-health:    Medicina/Salud (🏥💊💉🩺🧬❤️🩹⚕️)
 * - .bg-tech:      Tecnología (💻📱🖥️⚙️🔧🖱️⌨️🔌)
 * - .bg-finance:   Finanzas (💰💵💳📈📊🏦💹🪙)
 * - .bg-education: Educación (📚🎓✏️📖🧠📝🖊️📐)
 * 
 * MODIFICADORES:
 * - .bg-soft:      Modo sutil (login: 760s/48s, ultra-discreto)
 * - .auto-depth:   Profundidad automática por nth-child + parallax
 * - .is-far/mid/near: Control manual de profundidad + parallax
 * 
 * PRESET "MÁS LENTO ELEGANTE" (por defecto):
 * - wander: 560s (760s en .bg-soft)
 * - jitter: 34s (48s en .bg-soft)
 * - Rotación muy suave: multiplicador 0.45
 * - Jitter sutil global: multiplicador 0.75
 * - Parallax cinematográfico: far(0.35), mid(0.60), near(0.85)
 * 
 * ARQUITECTURA DE MOVIMIENTO (2 CAPAS):
 * 
 * 1) Contenedor (.emoji):
 *    - animation: wander (560s+, translate+rotate+scale con multiplicadores)
 *    - animation: emojiFade (36s, respiración 0.88-1.0)
 *    - Variables: --wm (amplitud wander), --rm (amplitud rotación)
 * 
 * 2) Glifo (::before):
 *    - animation: jitter (34s+, casi imperceptible, desfasado)
 *    - Variable: --jm (amplitud jitter, base 0.75 global)
 * 
 * CLAVES:
 * - wander NO vuelve al origen (100% ≠ 0,0) → sin loop perceptible
 * - Usa vmin (responsive) → recorre más área en pantallas grandes
 * - Multiplicadores (--wm/--jm/--rm) → efecto parallax por profundidad
 * - contain: layout paint style → mejor performance
 * - transform-origin: center → giros consistentes
 * 
 * Ver documentación completa en línea ~700+
 * 
 * ESTRUCTURA HTML:
 * Ver ejemplos completos al final de este archivo (línea ~830+)
 */

/* ============================================
   ACCESIBILIDAD: REDUCE MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .bg-circles .shape,
    .bg-hexagons .hex,
    .bg-emoji .emoji,
    .bg-waves .wave-inner,
    .bg-waves .wave--legacy,
    .grid-overlay,
    .grid-overlay-content {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   PERFORMANCE: WILL-CHANGE
   ============================================
   Solo en elementos que realmente animan (evita consumo excesivo de VRAM)
   */
.bg-circles .shape,
.bg-hexagons .hex,
.bg-emoji .emoji {
    will-change: transform, opacity;
}

.bg-waves .wave-inner {
    will-change: transform;
}

.grid-overlay,
.grid-overlay-content {
    will-change: transform;
}

/* ============================================
   CÍRCULOS FLOTANTES
   ============================================ */
.bg-circles .shape {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    animation: float 20s ease-in-out infinite;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.06);
}

.bg-circles .shape:nth-child(1) {
    width: 300px;
    height: 300px;
    top: -50px;
    left: -50px;
    animation-delay: 0s;
}

.bg-circles .shape:nth-child(2) {
    width: 200px;
    height: 200px;
    top: 30%;
    right: -30px;
    animation-delay: -5s;
    animation-duration: 15s;
}

.bg-circles .shape:nth-child(3) {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 10%;
    animation-delay: -10s;
    animation-duration: 25s;
}

.bg-circles .shape:nth-child(4) {
    width: 80px;
    height: 80px;
    top: 50%;
    left: 40%;
    animation-delay: -7s;
    animation-duration: 18s;
    background: rgba(78, 205, 196, 0.1);
}

.bg-circles .shape:nth-child(5) {
    width: 120px;
    height: 120px;
    bottom: 10%;
    right: 20%;
    animation-delay: -3s;
    animation-duration: 22s;
}

@keyframes float {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(30px, -30px) rotate(5deg);
    }

    50% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }

    75% {
        transform: translate(40px, 10px) rotate(3deg);
    }
}

@keyframes hexDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(18px, -14px, 0) rotate(20deg);
    }
}

/* ============================================
   HEXÁGONOS ROTATIVOS
   ============================================ */
.bg-hexagons .hex {
    position: absolute;
    width: 80px;
    height: 46px;
    background: rgba(255, 255, 255, 0.15);
    animation: hexDrift 26s ease-in-out infinite;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.06);
}

.bg-hexagons .hex:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.bg-hexagons .hex:nth-child(2) {
    top: 30%;
    right: 15%;
    animation-delay: -3s;
}

.bg-hexagons .hex:nth-child(3) {
    bottom: 20%;
    left: 20%;
    animation-delay: -6s;
}

.bg-hexagons .hex:nth-child(4) {
    top: 60%;
    right: 30%;
    animation-delay: -9s;
}

.bg-hexagons .hex:nth-child(5) {
    top: 15%;
    left: 50%;
    animation-delay: -12s;
}

.bg-hexagons .hex:nth-child(6) {
    bottom: 35%;
    right: 10%;
    animation-delay: -15s;
}

/* ============================================
   BASE COMÚN PARA TODOS LOS FONDOS CON EMOJIS
   ============================================ */
.bg-emoji {
    /* Multiplicadores globales para efecto parallax */
    --wander-mult: 1;
    --jitter-mult: 0.75;  /* Jitter más sutil (elegante) */
    --rot-mult: 0.45;     /* Rotación muy suave (menos distracción) */
}

.bg-emoji .emoji {
    position: absolute;
    
    /* Variables de personalización */
    --emoji-scale: 1;
    --emoji-blur: 0px;
    --emoji-bright: 1.25;
    --emoji-opacity-base: var(--emoji-opacity-global, 0.09);
    
    /* Variables de wander (7 puntos de control para movimiento infinito) */
    --w1x: 18;  --w1y: -12; --w1r: 1.2;
    --w2x: -22; --w2y: 8;   --w2r: -1.6;
    --w3x: 10;  --w3y: 20;  --w3r: 2.2;
    --w4x: 26;  --w4y: -6;  --w4r: 0.6;
    --w5x: -8;  --w5y: -24; --w5r: -2.0;
    --w6x: -28; --w6y: 12;  --w6r: -0.8;
    --w7x: 14;  --w7y: -9;  --w7r: 1.0;
    
    /* Duraciones (preset "más lento elegante") */
    /* Usa variables globales para permitir override desde .bg-soft */
    --dur-wander: var(--dur-wander-global, 560s);
    --dur-jitter: var(--dur-jitter-global, 34s);
    
    /* Multiplicadores por emoji (permite efecto parallax por profundidad) */
    --wm: var(--wander-mult);
    --jm: var(--jitter-mult);
    --rm: var(--rot-mult);
    
    font-size: var(--emoji-size, clamp(14px, 1.6vw, 26px));
    opacity: var(--emoji-opacity, var(--emoji-opacity-base));
    filter: grayscale(100%) brightness(var(--emoji-bright)) blur(var(--emoji-blur));
    
    /* Transform origin para evitar giros raros */
    transform-origin: center;
    
    animation: 
        wander var(--dur-wander, 560s) cubic-bezier(.45,0,.55,1) infinite,
        emojiFade 44s ease-in-out infinite;
    animation-delay: 
        var(--emoji-delay, 0s),
        calc(var(--emoji-delay, 0s) / 3);
    pointer-events: none;
}

.bg-emoji .emoji::before {
    content: var(--emoji, "✨");
    display: inline-block; /* Necesario para aplicar transform */
    
    /* Transform origin para consistencia */
    transform-origin: center;
    
    /* Jitter en el glifo (evita problemas de composición con wander) */
    animation: jitter var(--dur-jitter, 34s) ease-in-out infinite;
    animation-delay: calc(var(--emoji-delay, 0s) / 2); /* Desfasado de wander */
}

/* Profundidad visual (opcional, para aplicar en HTML) */
/* PRESET "MÁS LENTO ELEGANTE": parallax cinematográfico, jitter casi imperceptible */
.bg-emoji .emoji.is-far {
    --emoji-scale: 0.85;
    --emoji-opacity-base: 0.05;
    --emoji-bright: 1.15;
    --emoji-blur: 0.6px;
    --wm: 0.35; /* Casi estático (parallax premium) */
    --jm: 0.45; /* Jitter casi imperceptible */
}

.bg-emoji .emoji.is-mid {
    --emoji-scale: 0.95;
    --emoji-opacity-base: 0.07;
    --emoji-bright: 1.20;
    --emoji-blur: 0px;
    --wm: 0.60; /* Recorrido reducido */
    --jm: 0.60; /* Jitter sutil */
}

.bg-emoji .emoji.is-near {
    --emoji-scale: 1.05;
    --emoji-opacity-base: 0.09;
    --emoji-bright: 1.25;
    --emoji-blur: 0px;
    --wm: 0.85; /* Recorrido moderado */
    --jm: 0.70; /* Jitter contenido */
}

/* ============================================
   MOVIMIENTO ORGÁNICO: WANDER + JITTER
   ============================================
   Sistema de 2 capas que simula "rebote por toda el área" sin JS.
   
   CAPA 1 (emoji): wander - Paseo lento por 7 puntos
   CAPA 2 (::before): jitter - Micro-rebote rápido del glifo
   
   CLAVE TÉCNICA:
   - wander se aplica al contenedor (.emoji)
   - jitter se aplica al glifo (::before)
   - scale se aplica como transform base (profundidad siempre visible)
   - El 100% de wander NO vuelve a 0,0 → sin loop perceptible
   
   Variables personalizables (7 puntos de control):
   - --w1x, w1y, w1r: Punto 1 (X, Y, rotación)
   - --w2x, w2y, w2r: Punto 2
   - ... hasta w7x, w7y, w7r
   - --dur-wander: Duración del paseo (560s base, 760s en .bg-soft)
   - --dur-jitter: Duración del micro-rebote (34s base, 48s en .bg-soft)
   
   IMPORTANTE: Las posiciones usan vmin (responsive) no px.
   En pantallas grandes, los emojis recorren más área automáticamente.
   
   Animaciones combinadas:
   - wander: Paseo lento (linear, muy lento) + scale para profundidad
   - jitter: Micro-rebote (ease-in-out, rápido, desfasado)
   - emojiFade: Respiración de opacidad (36s)
*/

@keyframes wander {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--emoji-scale));
    }
    11% {
        transform: translate3d(
            calc(var(--w1x) * var(--wm) * 1vmin), 
            calc(var(--w1y) * var(--wm) * 1vmin), 
            0
        ) rotate(calc(var(--w1r) * var(--rm) * 1deg)) scale(var(--emoji-scale));
    }
    23% {
        transform: translate3d(
            calc(var(--w2x) * var(--wm) * 1vmin), 
            calc(var(--w2y) * var(--wm) * 1vmin), 
            0
        ) rotate(calc(var(--w2r) * var(--rm) * 1deg)) scale(var(--emoji-scale));
    }
    37% {
        transform: translate3d(
            calc(var(--w3x) * var(--wm) * 1vmin), 
            calc(var(--w3y) * var(--wm) * 1vmin), 
            0
        ) rotate(calc(var(--w3r) * var(--rm) * 1deg)) scale(var(--emoji-scale));
    }
    52% {
        transform: translate3d(
            calc(var(--w4x) * var(--wm) * 1vmin), 
            calc(var(--w4y) * var(--wm) * 1vmin), 
            0
        ) rotate(calc(var(--w4r) * var(--rm) * 1deg)) scale(var(--emoji-scale));
    }
    68% {
        transform: translate3d(
            calc(var(--w5x) * var(--wm) * 1vmin), 
            calc(var(--w5y) * var(--wm) * 1vmin), 
            0
        ) rotate(calc(var(--w5r) * var(--rm) * 1deg)) scale(var(--emoji-scale));
    }
    81% {
        transform: translate3d(
            calc(var(--w6x) * var(--wm) * 1vmin), 
            calc(var(--w6y) * var(--wm) * 1vmin), 
            0
        ) rotate(calc(var(--w6r) * var(--rm) * 1deg)) scale(var(--emoji-scale));
    }
    100% {
        /* ⚠️ CRÍTICO: NO vuelve a 0,0 → rompe el loop perceptible */
        transform: translate3d(
            calc(var(--w7x) * var(--wm) * 1vmin), 
            calc(var(--w7y) * var(--wm) * 1vmin), 
            0
        ) rotate(calc(var(--w7r) * var(--rm) * 1deg)) scale(var(--emoji-scale));
    }
}

/* Micro-rebote sutil (aplicado al ::before para evitar conflictos de composición) */
/* Usa --jm (jitter multiplicador) para variar intensidad por profundidad */
@keyframes jitter {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(calc(2px * var(--jm)), calc(-1px * var(--jm)));
    }
    50% {
        transform: translate(calc(-1px * var(--jm)), calc(1px * var(--jm)));
    }
    75% {
        transform: translate(calc(1px * var(--jm)), calc(0.5px * var(--jm)));
    }
}

/* Animación sutil de opacidad (separada para control fino) */
@keyframes emojiFade {
    0%, 100% {
        opacity: calc(var(--emoji-opacity-base) * 0.88);
    }
    50% {
        opacity: var(--emoji-opacity-base);
    }
}

/* Optimización para móvil */
@media (max-width: 768px) {
    .bg-emoji {
        --emoji-opacity-global: 0.05; /* Variable global en contenedor */
    }
    .bg-emoji .emoji:nth-child(n+6) {
        display: none; /* Mostrar solo 5 emojis en móvil */
    }
}

/* ============================================
   MODO SUTIL GLOBAL
   ============================================
   Uso: <body class="bg-soft"> en login para fondos muy finos
   */
.bg-soft {
    --emoji-opacity-global: 0.055;
    --emoji-size: clamp(13px, 1.3vw, 22px);
}

.bg-soft .bg-emoji {
    /* Modo sutil: ultra-lento (login/fondos muy discretos) */
    /* Usa variables globales para afectar a todos los emojis */
    --dur-wander-global: 760s;
    --dur-jitter-global: 48s;
}

.bg-soft .grid-overlay,
.bg-soft .grid-overlay-content {
    opacity: 0.45;
}

.bg-soft .bg-circles .shape,
.bg-soft .bg-hexagons .hex {
    opacity: 0.7;
}

.bg-soft .bg-waves .wave-inner {
    opacity: 0.65;
    filter: blur(0.3px);
}

/* ============================================
   LABORATORIO
   ============================================ */

/* Posiciones y emojis con wander personalizado (movimiento infinito único) */
.bg-lab .emoji:nth-child(1) { 
    top: 8%; left: 5%; --emoji: "🧪"; --emoji-delay: 0s;
    --w1x: 20; --w1y: -15; --w1r: 1.8;
    --w2x: -25; --w2y: 10; --w2r: -2.2;
    --w3x: 12; --w3y: 22; --w3r: 2.5;
    --w4x: 28; --w4y: -8; --w4r: 0.8;
    --w5x: -10; --w5y: -26; --w5r: -2.3;
    --w6x: -30; --w6y: 14; --w6r: -1.0;
    --w7x: 16; --w7y: -11; --w7r: 1.3;
    --dur-wander: 280s;
}

.bg-lab .emoji:nth-child(2) { 
    top: 15%; right: 8%; --emoji: "⚗️"; --emoji-delay: -15s;
    --w1x: -12; --w1y: 18; --w1r: -1.5;
    --w2x: 19; --w2y: -22; --w2r: 2.0;
    --w3x: -8; --w3y: 12; --w3r: -1.8;
    --w4x: 24; --w4y: 6; --w4r: 1.2;
    --w5x: -18; --w5y: -16; --w5r: -2.1;
    --w6x: 15; --w6y: 20; --w6r: 0.9;
    --w7x: -10; --w7y: 8; --w7r: -1.4;
    --dur-wander: 310s;
}

.bg-lab .emoji:nth-child(3) { 
    top: 25%; left: 10%; --emoji: "🔬"; --emoji-delay: -30s;
    --w1x: 22; --w1y: -18; --w1r: 2.3;
    --w2x: -16; --w2y: 14; --w2r: -1.9;
    --w3x: 14; --w3y: 24; --w3r: 2.6;
    --w4x: -20; --w4y: -10; --w4r: -1.3;
    --w5x: 26; --w5y: 8; --w5r: 1.7;
    --w6x: -12; --w6y: 16; --w6r: -2.2;
    --w7x: 18; --w7y: -12; --w7r: 1.5;
    --dur-wander: 295s;
}

.bg-lab .emoji:nth-child(4) { 
    bottom: 20%; right: 12%; --emoji: "🧬"; --emoji-delay: -45s;
    --w1x: -14; --w1y: 16; --w1r: -2.0;
    --w2x: 21; --w2y: -20; --w2r: 1.8;
    --w3x: -11; --w3y: 10; --w3r: -1.6;
    --w4x: 18; --w4y: 22; --w4r: 2.4;
    --w5x: -24; --w5y: -14; --w5r: -1.9;
    --w6x: 16; --w6y: 18; --w6r: 1.1;
    --w7x: -13; --w7y: 7; --w7r: -1.7;
    --dur-wander: 320s;
}

.bg-lab .emoji:nth-child(5) { bottom: 15%; left: 15%; --emoji: "💉"; --emoji-delay: -60s; }
.bg-lab .emoji:nth-child(6) { bottom: 8%; right: 18%; --emoji: "🩺"; --emoji-delay: -20s; }
.bg-lab .emoji:nth-child(7) { top: 75%; left: 8%; --emoji: "🧫"; --emoji-delay: -40s; }
.bg-lab .emoji:nth-child(8) { top: 80%; right: 10%; --emoji: "⚛️"; --emoji-delay: -55s; }

/* ============================================
   VETERINARIA
   ============================================ */
/* Usa preset más lento elegante heredado (560s/34s) */

.bg-vet .emoji:nth-child(1) { top: 5%; left: 8%; --emoji: "🐾"; --emoji-delay: 0s; }
.bg-vet .emoji:nth-child(2) { top: 18%; right: 10%; --emoji: "🐕"; --emoji-delay: -18s; }
.bg-vet .emoji:nth-child(3) { top: 30%; left: 12%; --emoji: "🐈"; --emoji-delay: -36s; }
.bg-vet .emoji:nth-child(4) { bottom: 25%; right: 15%; --emoji: "🐾"; --emoji-delay: -54s; }
.bg-vet .emoji:nth-child(5) { bottom: 18%; left: 10%; --emoji: "🦴"; --emoji-delay: -72s; }
.bg-vet .emoji:nth-child(6) { bottom: 10%; right: 18%; --emoji: "💊"; --emoji-delay: -25s; }
.bg-vet .emoji:nth-child(7) { top: 70%; left: 8%; --emoji: "🩺"; --emoji-delay: -45s; }
.bg-vet .emoji:nth-child(8) { top: 12%; right: 85%; --emoji: "🐾"; --emoji-delay: -63s; }
.bg-vet .emoji:nth-child(9) { bottom: 30%; right: 8%; --emoji: "🐇"; --emoji-delay: -10s; }

/* ============================================
   MEDICINA/SALUD
   ============================================ */
/* Usa preset más lento elegante heredado (560s/34s) */

.bg-health .emoji:nth-child(1) { top: 6%; left: 7%; --emoji: "🏥"; --emoji-delay: 0s; }
.bg-health .emoji:nth-child(2) { top: 20%; right: 12%; --emoji: "💊"; --emoji-delay: -17s; }
.bg-health .emoji:nth-child(3) { top: 28%; left: 14%; --emoji: "💉"; --emoji-delay: -34s; }
.bg-health .emoji:nth-child(4) { bottom: 22%; right: 16%; --emoji: "🩺"; --emoji-delay: -51s; }
.bg-health .emoji:nth-child(5) { bottom: 16%; left: 12%; --emoji: "🧬"; --emoji-delay: -68s; }
.bg-health .emoji:nth-child(6) { bottom: 8%; right: 20%; --emoji: "❤️"; --emoji-delay: -22s; }
.bg-health .emoji:nth-child(7) { top: 72%; left: 10%; --emoji: "🩹"; --emoji-delay: -42s; }
.bg-health .emoji:nth-child(8) { top: 78%; right: 14%; --emoji: "⚕️"; --emoji-delay: -12s; }

/* ============================================
   TECNOLOGÍA
   ============================================ */
/* Usa preset más lento elegante heredado (560s/34s) */

.bg-tech .emoji:nth-child(1) { top: 8%; left: 10%; --emoji: "💻"; --emoji-delay: 0s; }
.bg-tech .emoji:nth-child(2) { top: 22%; right: 14%; --emoji: "📱"; --emoji-delay: -19s; }
.bg-tech .emoji:nth-child(3) { top: 32%; left: 16%; --emoji: "🖥️"; --emoji-delay: -38s; }
.bg-tech .emoji:nth-child(4) { bottom: 26%; right: 18%; --emoji: "⚙️"; --emoji-delay: -57s; }
.bg-tech .emoji:nth-child(5) { bottom: 18%; left: 14%; --emoji: "🔧"; --emoji-delay: -76s; }
.bg-tech .emoji:nth-child(6) { bottom: 10%; right: 22%; --emoji: "🖱️"; --emoji-delay: -24s; }
.bg-tech .emoji:nth-child(7) { top: 68%; left: 12%; --emoji: "⌨️"; --emoji-delay: -48s; }
.bg-tech .emoji:nth-child(8) { top: 76%; right: 16%; --emoji: "🔌"; --emoji-delay: -14s; }

/* ============================================
   FINANZAS
   ============================================ */
/* Usa preset más lento elegante heredado (560s/34s) */

.bg-finance .emoji:nth-child(1) { top: 10%; left: 12%; --emoji: "💰"; --emoji-delay: 0s; }
.bg-finance .emoji:nth-child(2) { top: 24%; right: 16%; --emoji: "💵"; --emoji-delay: -20s; }
.bg-finance .emoji:nth-child(3) { top: 35%; left: 18%; --emoji: "💳"; --emoji-delay: -40s; }
.bg-finance .emoji:nth-child(4) { bottom: 28%; right: 20%; --emoji: "📈"; --emoji-delay: -60s; }
.bg-finance .emoji:nth-child(5) { bottom: 20%; left: 16%; --emoji: "📊"; --emoji-delay: -80s; }
.bg-finance .emoji:nth-child(6) { bottom: 12%; right: 24%; --emoji: "🏦"; --emoji-delay: -26s; }
.bg-finance .emoji:nth-child(7) { top: 70%; left: 14%; --emoji: "💹"; --emoji-delay: -50s; }
.bg-finance .emoji:nth-child(8) { top: 78%; right: 18%; --emoji: "🪙"; --emoji-delay: -16s; }

/* ============================================
   EDUCACIÓN
   ============================================ */
/* Usa preset más lento elegante heredado (560s/34s) */

.bg-education .emoji:nth-child(1) { top: 7%; left: 9%; --emoji: "📚"; --emoji-delay: 0s; }
.bg-education .emoji:nth-child(2) { top: 21%; right: 13%; --emoji: "🎓"; --emoji-delay: -18s; }
.bg-education .emoji:nth-child(3) { top: 31%; left: 15%; --emoji: "✏️"; --emoji-delay: -36s; }
.bg-education .emoji:nth-child(4) { bottom: 24%; right: 17%; --emoji: "📖"; --emoji-delay: -54s; }
.bg-education .emoji:nth-child(5) { bottom: 17%; left: 13%; --emoji: "🧠"; --emoji-delay: -72s; }
.bg-education .emoji:nth-child(6) { bottom: 9%; right: 21%; --emoji: "📝"; --emoji-delay: -23s; }
.bg-education .emoji:nth-child(7) { top: 69%; left: 11%; --emoji: "🖊️"; --emoji-delay: -46s; }
.bg-education .emoji:nth-child(8) { top: 77%; right: 15%; --emoji: "📐"; --emoji-delay: -13s; }

/* ============================================
   ONDAS DESLIZANTES
   ============================================ */
/* Estructura recomendada (app principal): <div class="wave wave--inner"><div class="wave-inner"></div></div> */
/* Estructura legacy (login simple):       <div class="wave wave--legacy"></div> */
/* 
   ⚠️ IMPORTANTE: Siempre usar wave--inner o wave--legacy para que la ola se vea.
   Sin estas clases, la ola es invisible (no tiene background ni border-radius).
*/

.bg-waves .wave {
    position: absolute;
    pointer-events: none;
}

/* Para páginas públicas (login, etc.) - usar con wave--legacy */
.bg-waves .wave {
    width: 200%;
    height: 200px;
    left: -50%;
}

.bg-waves .wave:nth-child(1) {
    bottom: -50px;
}

.bg-waves .wave:nth-child(2) {
    bottom: -80px;
    left: -30%;
}

.bg-waves .wave:nth-child(3) {
    bottom: -100px;
    left: -40%;
}

/* Para área de contenido (aplicación principal) */
.content-background-container .bg-waves .wave {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 300vw;
    height: 300vw;
    min-width: 3000px;
    margin-top: -180px;
}

/* Capa interna que rota (recomendado) */
.bg-waves .wave.wave--inner .wave-inner {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 42% 43% 45% 44%;
    transform-origin: center;
    animation: waveRotate 200s linear infinite;
}

/* Legacy: si NO hay inner, rota el propio .wave (solo para páginas públicas) */
.bg-waves .wave.wave--legacy {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 42% 43% 45% 44%;
    transform-origin: center;
    animation: waveRotate 180s linear infinite;
}

/* Duraciones específicas para cada ola (con wave-inner) */
.bg-waves .wave:nth-child(1).wave--inner .wave-inner {
    animation-duration: 180s;
    animation-delay: 0s;
}

.bg-waves .wave:nth-child(2).wave--inner .wave-inner {
    animation-duration: 220s;
    animation-delay: -40s;
}

.bg-waves .wave:nth-child(3).wave--inner .wave-inner {
    animation-duration: 260s;
    animation-delay: -60s;
}

/* Duraciones para estructura legacy */
.bg-waves .wave:nth-child(1).wave--legacy {
    animation-duration: 180s;
}

.bg-waves .wave:nth-child(2).wave--legacy {
    animation-duration: 220s;
    animation-delay: -40s;
}

.bg-waves .wave:nth-child(3).wave--legacy {
    animation-duration: 260s;
    animation-delay: -60s;
}

@keyframes waveRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   GRID OVERLAY ANIMADO
   ============================================ */
.grid-overlay,
.grid-overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
    pointer-events: none;
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

/* ============================================
   CONTENEDORES COMPARTIDOS
   ============================================ */
.geometric-shapes,
.geometric-shapes-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    
    /* Mejora composición y reduce repaints */
    contain: layout paint style;
    
    /* Fade en bordes para acabado premium (evita choque con contenido) */
    -webkit-mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

/* Fallback para navegadores sin soporte de mask-image */
@supports not (mask-image: radial-gradient(circle, #000 0%, transparent 100%)) {
    .geometric-shapes,
    .geometric-shapes-content {
        opacity: 0.92; /* Baja un poco si no hay máscara */
    }
}

/* Asegurar que el fondo nunca tape el contenido */
.grid-overlay,
.grid-overlay-content {
    z-index: 0;
}

.main-header,
.content-wrapper,
main {
    position: relative;
    z-index: 1;
}

/* ============================================
   PROFUNDIDAD AUTOMÁTICA (OPCIONAL)
   ============================================
   Si prefieres no usar clases .is-far/.is-mid/.is-near manualmente,
   puedes activar este sistema automático añadiendo la clase .auto-depth
   al contenedor .bg-emoji
   
   Ejemplo: <div class="geometric-shapes bg-emoji bg-lab auto-depth">
   
   Distribución automática:
   - Emojis 1-3:  Lejos (far)  - Más pequeños, difusos
   - Emojis 4-6:  Medio (mid)  - Tamaño intermedio
   - Emojis 7+:   Cerca (near) - Más grandes, nítidos
*/
.bg-emoji.auto-depth .emoji:nth-child(1),
.bg-emoji.auto-depth .emoji:nth-child(2),
.bg-emoji.auto-depth .emoji:nth-child(3) {
    --emoji-scale: 0.85;
    --emoji-opacity-base: 0.05;
    --emoji-bright: 1.15;
    --emoji-blur: 0.6px;
    --wm: 0.35; /* Far: casi estático (parallax cinematográfico) */
    --jm: 0.45; /* Jitter casi imperceptible */
}

.bg-emoji.auto-depth .emoji:nth-child(4),
.bg-emoji.auto-depth .emoji:nth-child(5),
.bg-emoji.auto-depth .emoji:nth-child(6) {
    --emoji-scale: 0.95;
    --emoji-opacity-base: 0.07;
    --emoji-bright: 1.20;
    --emoji-blur: 0px;
    --wm: 0.60; /* Mid: recorrido reducido */
    --jm: 0.60; /* Jitter sutil */
}

.bg-emoji.auto-depth .emoji:nth-child(n+7) {
    --emoji-scale: 1.05;
    --emoji-opacity-base: 0.09;
    --emoji-bright: 1.25;
    --emoji-blur: 0px;
    --wm: 0.85; /* Near: recorrido moderado */
    --jm: 0.70; /* Jitter contenido */
}

/* ============================================
   PERSONALIZACIÓN DE MOVIMIENTO WANDER + JITTER
   ============================================
   
   ARQUITECTURA DE 2 CAPAS:
   
   1) CONTENEDOR (.emoji) - Paseo lento:
      - animation: wander (560s+) incluye translate + rotate + scale con cubic-bezier
      - animation: emojiFade (44s) para respiración de opacidad (0.88-1.0)
   
   2) GLIFO (::before) - Micro-rebote casi imperceptible:
      - animation: jitter (34s, desfasado de wander, base mult 0.75)
   
   Variables personalizables (7 puntos de control):
   --w1x, --w1y, --w1r:  Punto 1 (X, Y, rotación)
   --w2x, --w2y, --w2r:  Punto 2
   --w3x, --w3y, --w3r:  Punto 3
   --w4x, --w4y, --w4r:  Punto 4
   --w5x, --w5y, --w5r:  Punto 5
   --w6x, --w6y, --w6r:  Punto 6
   --w7x, --w7y, --w7r:  Punto 7 (CRÍTICO: NO debe ser 0,0,0)
   
   --dur-wander: Duración del paseo (560s base, 760s en .bg-soft)
   --dur-jitter: Duración del micro-rebote (34s base, 48s en .bg-soft)
   --emoji-delay: Delay inicial (afecta tanto wander como jitter)
   
   Multiplicadores de movimiento (efecto parallax):
   --wm: Amplitud wander (0.35 far, 0.60 mid, 0.85 near)
   --jm: Amplitud jitter (0.45 far, 0.60 mid, 0.70 near)
   --rm: Amplitud rotación (0.45 global, suave)
   
   Recomendaciones para movimiento natural:
   - X: Entre -30 y +30 (sin unidad, se multiplica por 1vmin)
   - Y: Entre -26 y +26 (sin unidad, se multiplica por 1vmin)
   - Rot: Entre -2.5 y +2.5 (sin unidad, se multiplica por 1deg y por --rm)
   - Timing: cubic-bezier(.45,0,.55,1) para aceleración/desaceleración orgánica
   
   Nota sobre vmin: En pantallas grandes (1920px+), los valores se escalan
   automáticamente para que los emojis recorran más área sin reconfigurar.
   
   ⚠️ IMPORTANTE: 
   - w7 NO debe ser (0,0,0) para evitar loop perceptible
   - jitter se desfasa automáticamente (delay = emoji-delay / 2)
   
   Ejemplo completo: Ver .bg-lab .emoji:nth-child(1-4) arriba
   
   Tip: Los emojis sin variables personalizadas usan valores por defecto
        que ya dan movimiento orgánico básico.
*/

/* ============================================
   EJEMPLOS DE USO HTML
   ============================================

A) LOGIN (modo sutil + waves legacy + emojis):

<body class="bg-soft bg-lab">
  <div class="geometric-shapes bg-waves">
    <div class="wave wave--legacy"></div>
    <div class="wave wave--legacy"></div>
    <div class="wave wave--legacy"></div>
  </div>

  <div class="geometric-shapes bg-emoji bg-lab auto-depth">
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
  </div>

  <div class="grid-overlay"></div>
</body>

B) APP PRINCIPAL (content-background-container + waves inner):

<div class="content-background-container bg-tech">
  <div class="geometric-shapes bg-waves">
    <div class="wave wave--inner"><div class="wave-inner"></div></div>
    <div class="wave wave--inner"><div class="wave-inner"></div></div>
    <div class="wave wave--inner"><div class="wave-inner"></div></div>
  </div>

  <div class="geometric-shapes bg-emoji bg-tech auto-depth">
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
    <span class="emoji"></span>
  </div>

  <div class="grid-overlay-content"></div>
</div>

C) CONTROL MANUAL (sin auto-depth, usando clases):

<div class="geometric-shapes bg-emoji bg-vet">
  <span class="emoji is-far"></span>
  <span class="emoji is-mid"></span>
  <span class="emoji is-near"></span>
  <span class="emoji is-far"></span>
  <span class="emoji is-mid"></span>
</div>

============================================ */