/* =========================================
   EPITECH GLOBAL STYLES
   ========================================= */

/* 1. Configuración Base y Fuentes */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    font-family: 'Inter', sans-serif;
}

.font-mono {
    font-family: 'Fira Code', monospace;
}

/* 2. Componentes de UI */
/* Fondo oscuro con degradado (usado en Index, Strategy, etc.) */
.hero-bg {
    background-color: #181824;
    background-image: radial-gradient(circle at 100% 0%, #202a2e 10%, transparent 50%);
}

/* Efecto hover para tarjetas */
.card-hover {
    transition: transform 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
}

/* 3. Animaciones */
/* Fade In simple */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fade In Up (usado con AOS o clases manuales) */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Efecto Glitch Texto (usado en ley-datos) */
.glitch-text {
    position: relative;
    display: inline-block;
}

.glitch-load {
    animation: glitchFadeIn 1.5s ease-out forwards;
    opacity: 0;
}

@keyframes glitchFadeIn {
    0% { opacity: 0; transform: translateX(-10px); text-shadow: 2px 0 #0091d3; }
    20% { opacity: 1; transform: translateX(5px); text-shadow: -2px 0 #f18647; }
    40% { transform: translateX(-2px); text-shadow: 1px 0 #0091d3; }
    60% { transform: translateX(0); text-shadow: 0 0 transparent; }
    100% { opacity: 1; transform: translateX(0); }
}

/* --- OCULTAR INTERFAZ NATIVA DE GOOGLE TRANSLATE --- */
#google_translate_element { display: none !important; }
.goog-te-banner-frame { display: none !important; }
.goog-te-spinner-pos { display: none !important; }
.goog-te-spinner-animation { display: none !important; }
body { top: 0 !important; } 
.skiptranslate { display: none !important; }
font { background: transparent !important; color: inherit !important; box-shadow: none !important; }