/* styles.css */

/* 1. Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@400;700&display=swap');

/* 2. Base */
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #fcfcfc;
    color: #18181b; /* zinc-900 */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 3. Tipografías */
.font-serif { font-family: 'Newsreader', serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.font-hand { font-family: 'Caveat', cursive; }

/* 4. Patrones */
.bg-pattern-diagonal {
    background-image: repeating-linear-gradient(
        45deg,
        #e5e5e5 0,
        #e5e5e5 1px,
        transparent 0,
        transparent 10px
    );
}

/* 5. Animaciones */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 6. Utilidades */
.modal-open {
    overflow: hidden;
}

/* 7. Inputs Range (Calculadora) */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #10b981; /* emerald-500 */
    margin-top: -6px;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #10b981;
}
input[type=range]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #10b981;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #10b981;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #3f3f46; /* zinc-700 */
    border-radius: 2px;
}