:root {
    --blanco: #ffffff;
    --negro: #000;
    --gris: #aaa;
    --fuenteHeadings: 'Roboto', sans-serif;
    --fuenteTitulo: 'Jersey 10 Charted', cursive;
}

/* --- GENERALES --- */
body, html {
    margin: 0;
    padding: 0;
    font-family: var(--fuenteHeadings);
}

/* --- CONTENEDOR CENTRAL --- */
.contenedor {
    height: 100vh;
    width: min(90%, 120rem);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- CAJA DEL FORMULARIO --- */
.contenido {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 3rem 5rem;
    border-radius: 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 25px rgba(255,255,255,0.1);
}

/* --- TÍTULO --- */
.contenido h1 {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7),
                 0 0 20px rgba(255, 255, 255, 0.5);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* --- FORMULARIO LOGIN --- */
.formulario-login {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* --- CAMPOS --- */
.campo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.registro_field {
    border: none;
    border-bottom: 2px solid var(--blanco);
    padding: 1rem;
    color: var(--blanco);
    background: transparent;
    width: 100%;
    font-size: 1.3rem;
    transition: all 0.3s ease;
}

.registro_field:focus {
    outline: none;
    border-bottom-color: #4a90e2;
    box-shadow: 0 4px 10px rgba(74, 144, 226, 0.2);
}

.registro_field::placeholder {
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
}

/* --- BOTÓN --- */
.campo-boton {
    display: flex;
    justify-content: center;
    align-items: center;
}

.boton {
    font-weight: 700;
    font-size: 1.4rem;
    padding: 1rem 2rem;
    border-radius: 2rem;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.boton:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 15px rgba(255,255,255,0.4);
}

.boton--primario {
    background-color: var(--blanco);
    color: var(--negro);
    border: none;
}
.boton--primario:hover {
    background-color: #ddd;
    color: #000;
}

@keyframes hero-gradient-animation {
    0% {
        --c-0: hsla(200, 83%, 81%, 1);
        --s-start-0: 3%;
        --s-end-0: 55%;
        --x-0: 44%;
        --y-0: 83%;
        --x-1: 80%;
        --s-start-1: 3%;
        --s-end-1: 55%;
        --y-1: 47%;
        --c-1: hsla(224, 53%, 72%, 1);
        --y-2: 46%;
        --c-2: hsla(193, 59%, 91%, 1);
        --x-2: 98%;
        --s-start-2: 3%;
        --s-end-2: 55%;
        --y-3: 69%;
        --x-3: 81%;
        --c-3: hsla(230, 73%, 50%, 1);
        --s-start-3: 3%;
        --s-end-3: 55%;
        --x-4: 30%;
        --s-start-4: 3%;
        --s-end-4: 55%;
        --y-4: 84%;
        --c-4: hsla(240, 92%, 66%, 1);
    }

    50% {
        --c-0: hsla(231, 96%, 84%, 1);
        --s-start-0: 3%;
        --s-end-0: 55%;
        --x-0: 48%;
        --y-0: 78%;
        --x-1: 12%;
        --s-start-1: 3%;
        --s-end-1: 55%;
        --y-1: 52%;
        --c-1: hsla(221, 79%, 71%, 1);
        --y-2: 60%;
        --c-2: hsla(189, 76%, 69%, 1);
        --x-2: 55%;
        --s-start-2: 3%;
        --s-end-2: 55%;
        --y-3: 64%;
        --x-3: 35%;
        --c-3: hsla(216, 91%, 75%, 1);
        --s-start-3: 3%;
        --s-end-3: 55%;
        --x-4: 16%;
        --s-start-4: 3%;
        --s-end-4: 55%;
        --y-4: 1%;
        --c-4: hsla(182, 52%, 67%, 1);
    }

    100% {
        --c-0: hsla(205, 79%, 83%, 1);
        --s-start-0: 3%;
        --s-end-0: 55%;
        --x-0: 46%;
        --y-0: 40%;
        --x-1: 11%;
        --s-start-1: 3%;
        --s-end-1: 55%;
        --y-1: 75%;
        --c-1: hsla(236, 80%, 97%, 1);
        --y-2: 80%;
        --c-2: hsla(225, 74%, 52%, 1);
        --x-2: 2%;
        --s-start-2: 3%;
        --s-end-2: 55%;
        --y-3: 67%;
        --x-3: 58%;
        --c-3: hsla(217, 55%, 78%, 1);
        --s-start-3: 3%;
        --s-end-3: 55%;
        --x-4: 89%;
        --s-start-4: 3%;
        --s-end-4: 55%;
        --y-4: 78%;
        --c-4: hsla(182, 79%, 89%, 1);
    }
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(200, 83%, 81%, 1)
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 44%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 83%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 47%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(224, 53%, 72%, 1)
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 46%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(193, 59%, 91%, 1)
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 98%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 69%
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 81%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(230, 73%, 50%, 1)
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 30%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 84%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(240, 92%, 66%, 1)
}

.your_css_selector_here {
    --c-0: hsla(200, 83%, 81%, 1);
    --x-0: 44%;
    --y-0: 83%;
    --x-1: 80%;
    --y-1: 47%;
    --c-1: hsla(224, 53%, 72%, 1);
    --y-2: 46%;
    --c-2: hsla(193, 59%, 91%, 1);
    --x-2: 98%;
    --y-3: 69%;
    --x-3: 81%;
    --c-3: hsla(230, 73%, 50%, 1);
    --x-4: 30%;
    --y-4: 84%;
    --c-4: hsla(240, 92%, 66%, 1);
    ;
    background-color: hsla(183, 60%, 86%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));
    animation: hero-gradient-animation 2s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal, normal;
}