/* ===== FUENTE TECNOLÓGICA ===== */
body{
    margin:0;
    font-family:Segoe UI, Arial;
    background: linear-gradient(140deg,#0b132b,#1c2541,#3a86ff);
    color:white;
}

/* ===== ANIMACIONES ===== */

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

@keyframes neon{
    0%{ box-shadow:0 0 5px #3a86ff; }
    50%{ box-shadow:0 0 20px #3a86ff; }
    100%{ box-shadow:0 0 5px #3a86ff; }
}

/* ===== BARRA SUPERIOR ===== */

.top{
    background: linear-gradient(90deg,#0f172a,#1e3a8a);
    padding:8px;
    text-align:center;
    font-size:13px;
    letter-spacing:1px;
}

/* ===== MENU ===== */

.nav{
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(8px);
    padding:12px 30px;
    border-bottom:1px solid #3a86ff;
}

.nav a{
    color:#cbd5e1;
    margin-right:18px;
    text-decoration:none;
    transition:.3s;
}

.nav a:hover{
    color:#3a86ff;
}

/* ===== CAJAS TIPO GLASS ===== */

.caja{
    width:420px;
    margin:40px auto;

    background:rgba(15,23,42,0.6);
    backdrop-filter:blur(10px);

    padding:25px;
    border-radius:12px;

    border:1px solid #3a86ff;

    animation:aparecer 1s;
}

/* ===== FORMULARIOS ===== */

input{
    width:100%;
    padding:10px;
    margin-bottom:10px;

    background:#0f172a;
    border:1px solid #3a86ff;
    color:white;
}

input:focus{
    outline:none;
    box-shadow:0 0 8px #3a86ff;
}

/* ===== BOTÓN TECNOLÓGICO ===== */

.boton{
    width:100%;
    padding:10px;

    background: linear-gradient(90deg,#2563eb,#3a86ff);

    border:none;
    color:white;
    font-weight:bold;

    animation:neon 2s infinite;
    cursor:pointer;
}

.boton:hover{
    transform:scale(1.02);
}