/**
 * ============================================================
 * COMPONENTE PORTABLE: FONDO DE CUADRÍCULA CON PARTÍCULAS
 * ============================================================
 * Archivo: particles-grid.css
 * Prefijo: .pg- (Particles Grid) - Sin colisión con tgac-*
 *
 * Calibrado para igualar la presencia visual del hero de index.php
 * (rejilla ~0.08 / celdas 60px / partículas visibles).
 * ============================================================
 */

/* ---- CONTENEDOR PRINCIPAL ---- */
.pg-container {
    position: relative;
    overflow: visible;
    min-height: 100vh;
    background: transparent !important;
}

/* ---- ASEGURAR QUE EL CONTENIDO QUEDE POR ENCIMA DEL FONDO ---- */
.pg-container > *:not(.pg-bg):not(.pg-grid):not(.pg-particles) {
    position: relative;
    z-index: 1;
}

/* ================================================================
   FONDO CON DEGRADADOS  (mismo lenguaje que .tgac-hero-bg)
   ================================================================ */
.pg-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(14, 165, 233, 0.10) 0, transparent 70%),
        radial-gradient(ellipse 60% 80% at 20% 60%, rgba(26, 86, 219, 0.08) 0, transparent 70%);
}

/* ================================================================
   CUADRÍCULA  (mismo peso que .tgac-hero-grid)
   ================================================================ */
.pg-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(26, 86, 219, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 86, 219, 0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: none;
    -webkit-mask-image: none;
}

/* ================================================================
   CONTENEDOR DE PARTÍCULAS
   ================================================================ */
.pg-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ================================================================
   PARTÍCULA INDIVIDUAL (CYAN)
   ================================================================ */
.pg-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.45);
    animation: pg-float var(--pg-dur, 6s) ease-in-out infinite alternate;
    animation-delay: var(--pg-delay, 0s);
    will-change: transform, opacity;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.22);
}

/* ---- PARTÍCULA ALTERNATIVA (AZUL PRIMARIO) ---- */
.pg-particle-alt {
    background: rgba(26, 86, 219, 0.40);
    box-shadow: 0 0 10px rgba(26, 86, 219, 0.18);
    animation-duration: calc(var(--pg-dur, 6s) * 1.3);
}

/* ---- PARTÍCULA PEQUEÑA ---- */
.pg-particle-sm {
    background: rgba(14, 165, 233, 0.28);
    box-shadow: 0 0 6px rgba(14, 165, 233, 0.14);
    animation-duration: calc(var(--pg-dur, 6s) * 0.8);
}

.pg-particle-sm.pg-particle-alt {
    background: rgba(26, 86, 219, 0.24);
    box-shadow: 0 0 6px rgba(26, 86, 219, 0.12);
}

/* ================================================================
   ANIMACIÓN DE FLOTACIÓN
   ================================================================ */
@keyframes pg-float {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: var(--pg-op, 0.45);
    }
    25% {
        transform: translate(15px, -20px) scale(1.2);
    }
    50% {
        transform: translate(-10px, -35px) scale(0.9);
        opacity: calc(var(--pg-op, 0.45) * 0.75);
    }
    75% {
        transform: translate(20px, -15px) scale(1.1);
    }
    100% {
        transform: translate(-5px, -40px) scale(0.95);
        opacity: var(--pg-op, 0.45);
    }
}

/* ================================================================
   VARIANTE: VERSIÓN SUTIL
   ================================================================ */
.pg-subtle .pg-bg {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(11, 43, 94, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(14, 165, 233, 0.03) 0%, transparent 50%);
}

.pg-subtle .pg-grid {
    background-image:
        linear-gradient(rgba(26, 86, 219, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 86, 219, 0.045) 1px, transparent 1px);
}

.pg-subtle .pg-particle {
    background: rgba(14, 165, 233, 0.28);
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.12);
}

.pg-subtle .pg-particle-alt {
    background: rgba(26, 86, 219, 0.22);
    box-shadow: 0 0 8px rgba(26, 86, 219, 0.10);
}

/* ================================================================
   VARIANTE: VERSIÓN OSCURA
   ================================================================ */
.pg-dark .pg-bg {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(100, 150, 255, 0.02) 0%, transparent 50%);
}

.pg-dark .pg-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

.pg-dark .pg-particle {
    background: rgba(100, 180, 255, 0.3);
    box-shadow: 0 0 8px rgba(100, 180, 255, 0.2);
}

.pg-dark .pg-particle-alt {
    background: rgba(180, 150, 255, 0.25);
    box-shadow: 0 0 8px rgba(180, 150, 255, 0.15);
}

/* ================================================================
   VARIANTE: DENSIDAD ALTA
   ================================================================ */
.pg-dense .pg-grid {
    background-size: 40px 40px;
}

.pg-dense .pg-particle {
    background: rgba(14, 165, 233, 0.38);
}

.pg-dense .pg-particle-alt {
    background: rgba(26, 86, 219, 0.32);
}

/* ================================================================
   VARIANTE: DENSIDAD BAJA
   ================================================================ */
.pg-sparse .pg-grid {
    background-size: 80px 80px;
}

.pg-sparse .pg-particle {
    background: rgba(14, 165, 233, 0.50);
}

.pg-sparse .pg-particle-alt {
    background: rgba(26, 86, 219, 0.42);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    .pg-grid {
        background-size: 40px 40px;
    }

    .pg-dense .pg-grid {
        background-size: 28px 28px;
    }

    .pg-sparse .pg-grid {
        background-size: 60px 60px;
    }

    .pg-particle {
        opacity: 0.85;
    }
}

@media (max-width: 480px) {
    .pg-grid {
        background-size: 32px 32px;
    }

    .pg-dense .pg-grid {
        background-size: 22px 22px;
    }

    .pg-sparse .pg-grid {
        background-size: 50px 50px;
    }
}