@layer pages {

/**
 * G-Certi — Trust Center Styles (Quantum Ultra Pro)
 * ==================================================
 * Extracted from inline CSS in: /views/institucional/trust-center.php
 *
 * @version 1.0.0
 * @updated 2026-02-05
 */


:root {
    /* v20.19.0: Use --gc-* from _core.css instead of local --q-* */
}

/* Quantum Utility Classes */
.quantum-red { color: var(--gc-primary); }
.bg-quantum-red { background-color: var(--gc-primary); }
.bg-quantum-green { background-color: var(--gc-success); }
.text-quantum-red { color: var(--gc-primary); }
.text-quantum-green { color: var(--gc-success); }
.border-quantum-red\/20 { border-color: rgba(166, 33, 38, 0.2); }
.border-quantum-green\/20 { border-color: rgba(34, 197, 94, 0.2); }
.bg-quantum-red\/10 { background-color: rgba(166, 33, 38, 0.1); }
.bg-quantum-green\/10 { background-color: rgba(34, 197, 94, 0.1); }
.hover\:bg-quantum-emerald-600:hover { background-color: #059669; }

/* ═══════════════════════════════════════════════════════════════
   QUANTUM ANIMATIONS
   Common keyframes (shimmer, float, gradient-shift) are canonical
   in _core.css/input.css → styles.min.css (loaded globally).
   Only page-specific animations are defined here.
   ═══════════════════════════════════════════════════════════════ */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}

/* NOTE: float keyframe is canonical in input.css @theme → styles.min.css */

@keyframes float-reverse {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(20px) rotate(-2deg); }
}

/* NOTE: shimmer keyframe is canonical in input.css @theme → styles.min.css */
/* NOTE: gradient-shift is canonical as gc-gradient-shift in _core.css → styles.min.css */

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px var(--gc-primary-glow, rgba(166, 33, 38,0.4)), 0 0 40px transparent; }
    50% { box-shadow: 0 0 40px var(--gc-primary-glow, rgba(166, 33, 38,0.4)), 0 0 80px var(--gc-primary-glow, rgba(166, 33, 38,0.4)); }
}

@keyframes particle-float {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(10px, -15px) scale(1.1); opacity: 0.5; }
    50% { transform: translate(20px, 0) scale(1); opacity: 0.4; }
    75% { transform: translate(10px, 15px) scale(0.9); opacity: 0.6; }
}

.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-reverse { animation: float-reverse 7s ease-in-out infinite; }
.animate-shimmer { animation: shimmer 3s linear infinite; }
.animate-gradient { animation: gradient-shift 8s ease infinite; background-size: 200% 200%; }
.animate-glow { animation: glow-pulse 3s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════
   GLASSMORPHISM CARDS
   ═══════════════════════════════════════════════════════════════ */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-card-dark {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   SHIMMER EFFECT
   ═══════════════════════════════════════════════════════════════ */
.shimmer-effect {
    position: relative;
    overflow: hidden;
}

.shimmer-effect::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   KPI CARD HOVER EFFECTS
   ═══════════════════════════════════════════════════════════════ */
.kpi-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.kpi-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.kpi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, transparent 40%, var(--gc-primary) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.kpi-card:hover::before {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING PARTICLES
   ═══════════════════════════════════════════════════════════════ */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gc-primary);
    border-radius: 50%;
    animation: particle-float 8s ease-in-out infinite;
}

.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 60%; left: 85%; animation-delay: 1s; background: var(--gc-success); }
.particle:nth-child(3) { top: 80%; left: 20%; animation-delay: 2s; }
.particle:nth-child(4) { top: 30%; left: 70%; animation-delay: 3s; background: var(--gc-cyan); }
.particle:nth-child(5) { top: 50%; left: 40%; animation-delay: 4s; background: var(--gc-success); }
.particle:nth-child(6) { top: 10%; left: 60%; animation-delay: 5s; }

/* ═══════════════════════════════════════════════════════════════
   GRADIENT TEXT
   ═══════════════════════════════════════════════════════════════ */
.text-gradient-quantum {
    background: linear-gradient(135deg, var(--gc-success) 0%, #4ade80 25%, var(--gc-cyan) 50%, var(--gc-success) 75%, #4ade80 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 6s ease infinite;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL INDICATOR
   ═══════════════════════════════════════════════════════════════ */
.scroll-indicator {
    animation: float 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   POLICY CARDS HOVER
   ═══════════════════════════════════════════════════════════════ */
.policy-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.policy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   ALPINE.JS CLOAK
   ═══════════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .animate-pulse-slow,
    .animate-float,
    .animate-float-reverse,
    .animate-shimmer,
    .animate-gradient,
    .animate-glow,
    .particle,
    .shimmer-effect::after,
    .scroll-indicator {
        animation: none;
    }

    .kpi-card:hover,
    .policy-card:hover {
        transform: none;
    }
}


} /* end @layer pages */