/* 1. ANIMACIÓN DEL FONDO MOVEDIZO */
        .animate-bg {
            background: linear-gradient(-45deg, #0a0a0a, #2a1b14, #1a100c, #3d2518);
            background-size: 400% 400%;
            animation: gradientMove 12s ease infinite;
        }

        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 2. MOSAICO DE LIBRITOS (AHORA SÍ, CORREGIDO) */
        .book-pattern-overlay {
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a86c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
            background-size: 80px 80px;
            opacity: 0.08; /* Súper sutil para que no maree */
            z-index: 1;
        }

        /* 3. ANIMACIÓN DE ESCRITURA (TYPING) */
        .typing-container {
            display: inline-block;
        }

        .typing-text {
            overflow: hidden;
            white-space: nowrap;
            border-right: 3px solid #c9a86c;
            width: 0;
            animation: typing 2.5s steps(30, end) forwards, blink 0.75s step-end infinite;
        }

        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        @keyframes blink {
            from, to { border-color: transparent; }
            50% { border-color: #c9a86c; }
        }

        /* 4. ANIMACIÓN DE APARICIÓN (FADE-IN) */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s ease forwards;
            animation-delay: 2.8s; 
        }

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

/* =========================================
   PARCHE RESPONSIVE DEFINITIVO (HEADER + MODALES)
   ========================================= */
@media (max-width: 768px) {
    /* 1. HEADER: Apilamos todo para que respire */
    header {
        flex-direction: column !important;
        padding: 15px !important;
        gap: 15px !important;
        height: auto !important;
        position: relative !important; /* Evita que flote sobre otras cosas */
    }
    
    header > div { 
        /* Contenedor de botones y buscador */
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    header input, 
    header button,
    header .action-btn {
        width: 100% !important; /* Todo a lo ancho de la pantalla */
        margin: 0 !important;
    }

    /* 2. MODALES: Cubrir todo y no cortar la parte de arriba */
    .fixed.inset-0 {
        z-index: 9999 !important; /* ¡Obligamos a que tape el Header! */
        padding: 15px !important;
        align-items: flex-start !important; /* Empezar desde arriba, no del centro */
        overflow-y: auto !important; /* Permitir scroll con el dedo */
    }
    
    .fixed.inset-0 > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px auto 40px auto !important; /* Espacio para respirar */
        max-height: none !important; /* Dejar que el formulario mida lo que tenga que medir */
    }
}