*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

```
font-family:
'Segoe UI',
sans-serif;

background:
linear-gradient(
    135deg,
    #0f172a,
    #1e293b,
    #334155
);

min-height:100vh;

color:white;
```

}

.container{

```
width:95%;
max-width:1400px;

margin:auto;

padding:40px;
```

}

.header{

```
text-align:center;

margin-bottom:40px;
```

}

.header h1{

```
font-size:42px;

margin-bottom:10px;
```

}

.header p{

```
opacity:.8;
```

}

.cards{

```
display:flex;

gap:25px;

justify-content:center;

flex-wrap:wrap;
```

}

.card{

```
width:300px;

background:
rgba(255,255,255,.08);

backdrop-filter:blur(15px);

border-radius:20px;

padding:25px;

text-align:center;

border:1px solid rgba(255,255,255,.15);

transition:.3s;
```

}

.card:hover{

```
transform:translateY(-5px);
```

}

.icon{

```
font-size:50px;

margin-bottom:15px;
```

}

.card h2{

```
margin-bottom:10px;
```

}

.card p{

```
margin-bottom:20px;
```

}

.card button{

```
width:100%;
```

}

.upload-section{

```
margin-top:50px;

background:
rgba(255,255,255,.05);

padding:40px;

border-radius:25px;

backdrop-filter:blur(15px);
```

}

.upload-section h2{

```
text-align:center;

margin-bottom:25px;
```

}

#dropZone{

```
border:
3px dashed
rgba(255,255,255,.4);

border-radius:20px;

padding:60px;

text-align:center;

transition:.3s;
```

}

#dropZone.dragover{

```
border-color:#3b82f6;

background:
rgba(59,130,246,.15);
```

}

.upload-icon{

```
font-size:70px;
```

}

button{

```
border:none;

cursor:pointer;

padding:14px 25px;

border-radius:10px;

background:#2563eb;

color:white;

font-size:16px;
```

}

button:hover{

```
background:#1d4ed8;
```

}

.progress-container{

```
width:100%;

height:30px;

background:#1e293b;

border-radius:30px;

overflow:hidden;

margin-top:25px;
```

}

#progressBar{

```
width:0%;

height:100%;

background:
linear-gradient(
    90deg,
    #10b981,
    #22c55e
);
```

}

#porcentaje{

```
text-align:center;

margin-top:10px;

font-size:20px;

font-weight:bold;
```

}

#archivoSeleccionado{

```
margin-top:20px;

text-align:center;

font-size:18px;
```

}

.btn-importar{

```
width:100%;

margin-top:30px;

padding:18px;

font-size:20px;
```

}