@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
    --primary-color: #000000;
    --primary-hover: #111111;
    --secondary-color: #007bff;
    --secondary-hover: #0056b3;
    --neutral-light: #f9f9f9;
    --neutral-medium: #e7e7e7;
    --neutral-dark: #555555;
    --text-color: #333333;
    --white: #ffffff;

    /* Sombras (escala de elevación) */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.18);

    /* Radios */
    --radius-sm: 6px;
    --radius-lg: 16px;

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-lift: transform 0.25s ease, box-shadow 0.25s ease;
    --font-family: 'Poppins', sans-serif;
    --navbar-height: 60px;
    --hero-height: 100vh;
    --hero-mobile-height: 60vh;
}

/* ==========================================================================
   Global Styles
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--neutral-light);
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* ==========================================================================
   Focus Visibility
   ========================================================================== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* ==========================================================================
   Animaciones compartidas
   ========================================================================== */
@keyframes mini-zoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero,
    .hero-content,
    .pdf-modal {
        animation: none;
    }

    @media (max-width: 768px) {
        .nav-links {
            animation: none;
        }
    }
}