/* =========================================
   ESTILOS GLOBALES - LOAN APP
   ========================================= */

/* 1. Importar Fuente Moderna (Inter) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');

body {
    font-family: 'Inter', sans-serif; /* Aplicar fuente a todo */
    background-color: #f3f4f6; /* Gris muy suave de fondo */
    -webkit-tap-highlight-color: transparent; /* Quitar brillo azul al tocar en móviles */
}

/* 2. Clase Vital para Navegación (NO BORRAR) */
.hidden {
    display: none !important;
}

/* 3. Animaciones Suaves */
.animate-fadeIn {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px); /* Entra subiendo un poquito */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. Estilos para los Deslizadores (Range Inputs) */
/* Personalizamos la barra para que se vea azul y moderna */
input[type=range] {
    accent-color: #2563eb; /* Azul Tailwind */
    cursor: pointer;
}

/* 5. Estilos de Scrollbar (Opcional, para que se vea limpio en PC) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}
/* =========================================
   🌊 EFECTO OCÉANO EN MOVIMIENTO
   ========================================= */

/* Contenedor principal de la tarjeta (para recortar las olas) */
.ocean-card-container {
    background: linear-gradient(180deg, #020c1b 0%, #0a192f 100%); /* Azul muy profundo */
    position: relative;
    overflow: hidden; /* Importante: que no se salgan las olas */
}

/* La capa base de las olas */
.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%; /* El doble de ancho para el bucle infinito */
    height: 100px; /* Altura de la ola */
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%230099ff" fill-opacity="1" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,208C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: 50% 100%; /* Ajuste para el bucle */
    animation: animateWave 10s linear infinite;
}

/* CAPA 1 (Más cercana, más rápida, más clara) */
.wave1 {
    opacity: 0.7;
    z-index: 5;
    animation-delay: 0s;
    bottom: -10px;
}

/* CAPA 2 (Intermedia) */
.wave2 {
    opacity: 0.5;
    z-index: 4;
    animation-delay: -3s; /* Empieza en otro punto */
    animation-duration: 15s; /* Más lenta */
    bottom: 10px;
    transform: scaleY(1.2); /* Un poco más alta */
}

/* CAPA 3 (Fondo, más lenta y oscura) */
.wave3 {
    opacity: 0.3;
    z-index: 3;
    animation-delay: -5s;
    animation-duration: 20s; /* La más lenta */
    bottom: 20px;
}

/* Animación de desplazamiento horizontal */
@keyframes animateWave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}