/* 
 * Nivel Cero S.R.L.
 * Hoja de Estilos Principal
 */

/* Importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

/* Comportamiento general */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
}

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

/* Ocultar input file original para estilizarlo */
input[type="file"] {
    display: none;
}

/* Estilos para el área de subida de archivos (Drag & Drop) */
.file-upload-label {
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-upload-label:hover {
    border-color: #00E5FF;
    background-color: rgba(0, 229, 255, 0.05);
}

/* Clases dinámicas aplicadas por JavaScript durante el Drag & Drop */
.drag-over {
    border-color: #00E5FF !important;
    background-color: rgba(0, 229, 255, 0.05) !important;
}

/* Patrón de fondo para la sección Hero */
.bg-hero-pattern {
    background-image: radial-gradient(#00E5FF 1px, transparent 1px);
    background-size: 30px 30px;
}
```eof

---

### Archivo 2: `script.js`
Aquí va toda la lógica de los planos (mostrar nombre y drag & drop).

```javascript:Sitio Web Nivel Cero:script.js
/* 
 * Nivel Cero S.R.L.
 * Lógica de Interfaz de Usuario
 */

document.addEventListener('DOMContentLoaded', () => {
    
    // --- LÓGICA DE DRAG & DROP PARA EL COTIZADOR ---
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('file-upload');

    // Prevenir comportamientos por defecto del navegador
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    // Efectos visuales al arrastrar sobre el área
    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });

    function highlight(e) {
        dropArea.classList.add('drag-over');
    }

    function unhighlight(e) {
        dropArea.classList.remove('drag-over');
    }

    // Procesar el archivo cuando se suelta
    dropArea.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        
        if (files.length > 0) {
            fileInput.files = files;
            actualizarTextoArchivo(files[0].name);
        }
    }

    // Escuchar el cambio manual (clic tradicional)
    fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            actualizarTextoArchivo(this.files[0].name);
        } else {
            resetearTextoArchivo();
        }
    });

    // Funciones de actualización de texto
    function actualizarTextoArchivo(nombreArchivo) {
        const displayElement = document.getElementById('file-name-display');
        displayElement.innerHTML = `<span style="color:#00E5FF; font-weight:bold;">Archivo seleccionado:</span> ${nombreArchivo}`;
    }

    function resetearTextoArchivo() {
        const displayElement = document.getElementById('file-name-display');
        displayElement.innerHTML = 'Máx 25MB (Para archivos grandes, adjunte un link en los detalles)';
    }

});
```eof

---