/* =========================================
   STYLES.CSS - Diseño Profesional & Dinámico
   ========================================= */

/* Importar fuentes modernas */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@500;700;800&display=swap');

:root {
    --primary: #FF6600;
    --primary-dark: #e65c00;
    --dark: #111827;
    --light: #f9fafb;
}

/* Base */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--light);
    color: var(--dark);
    /* Evita scroll horizontal indeseado por animaciones */
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
}

html { scroll-behavior: smooth; }

/* --- Utilidades Visuales --- */

/* Texto con degradado */
.text-gradient {
    background: linear-gradient(to right, #FF6600, #ff9f43);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Carrusel de Socios (Animación Infinita) */
.socios-track {
    display: flex;
    gap: 3rem; /* Reducido un poco para móviles */
    width: max-content;
    animation: scroll 30s linear infinite; /* Un poco más rápido para dinamismo */
    padding: 20px 0;
}

.socios-track img {
    height: 40px; /* Tamaño base móvil */
    width: auto;
    transition: transform 0.3s ease;
    cursor: pointer;
    /* NOTA: Se eliminó el filtro grayscale para que se vean a color */
}

.socios-track img:hover {
    transform: scale(1.1);
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Animación Fade In Up (para detalles) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* --- Ajustes Responsive (Media Queries) --- */
@media (min-width: 768px) {
    .socios-track { gap: 5rem; }
    .socios-track img { height: 50px; }
}

/* Ajustes para el menú móvil */
#menu {
    transform-origin: top;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
#menu.hidden {
    display: none; /* Tailwind lo maneja, pero por seguridad */
}

/*body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    // Ruta exacta a tu imagen de textura
    background-image: url('img/textura.webp');
    
    // Configuración para fondo texturizado sutil
    background-repeat: repeat; // Para que se repita perfectamente
    background-size: auto; // Mantiene el tamaño original de la textura sutil 
    
    // Control de intensidad
    opacity: 0.12; // Juega con este valor para hacerla más o menos visible
    
    // Comportamiento sutil
    z-index: 9999; // Lo mantenemos por encima para que no se esconda detrás de bg-white 
    pointer-events: none; // Indispensable para que los botones funcionen 
}*/