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

html {
min-height: 100%;
}

body {
min-height: 100vh;


font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

color: #ffffff;

display: flex;
align-items: center;
justify-content: center;

padding: 30px;

background:
    radial-gradient(
        circle at 50% -10%,
        rgba(99, 102, 241, 0.35),
        transparent 40%
    ),
    radial-gradient(
        circle at 0% 100%,
        rgba(139, 92, 246, 0.18),
        transparent 35%
    ),
    linear-gradient(
        145deg,
        #080b14 0%,
        #0f172a 50%,
        #090c15 100%
    );

overflow-x: hidden;


}

body::before {
content: "";


position: fixed;
inset: 0;

pointer-events: none;

background:
    radial-gradient(
        circle at 50% 40%,
        rgba(99, 102, 241, 0.06),
        transparent 45%
    );

z-index: -1;


}

/* CONTENEDOR */

.pagina {
width: 100%;
max-width: 470px;


animation: aparecer 0.6s ease-out;


}

/* TARJETA */

.registro-card {
position: relative;

width: 100%;

padding: 40px;

border-radius: 24px;

background:
    linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.92),
        rgba(15, 23, 42, 0.88)
    );

border: 1px solid rgba(255, 255, 255, 0.09);

box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(99, 102, 241, 0.06);

backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);

overflow: hidden;
```

}

/* BRILLO SUPERIOR */

.registro-card::before {
content: "";

```
position: absolute;

top: 0;
left: 12%;
right: 12%;

height: 1px;

background:
    linear-gradient(
        90deg,
        transparent,
        rgba(129, 140, 248, 0.8),
        transparent
    );
```

}

/* CABECERA */

.cabecera {
text-align: center;
}

/* LOGO */

.logo {
width: 62px;
height: 62px;

```
margin: 0 auto 16px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 18px;

background:
    linear-gradient(
        135deg,
        #6366f1,
        #8b5cf6
    );

font-size: 29px;
font-weight: 700;

box-shadow:
    0 12px 35px rgba(99, 102, 241, 0.35);

animation: flotar 4s ease-in-out infinite;
```

}

.cabecera h1 {
font-size: 28px;
font-weight: 850;

```
letter-spacing: 4px;

background:
    linear-gradient(
        90deg,
        #ffffff,
        #c7d2fe
    );

-webkit-background-clip: text;
background-clip: text;

color: transparent;
```

}

.cabecera p {
margin-top: 7px;

```
color: #94a3b8;

font-size: 13px;
```

}

/* SEPARADOR */

.separador {
height: 1px;

```
margin: 30px 0;

background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.10),
        transparent
    );
```

}

/* FORMULARIO */

.formulario h2 {
font-size: 22px;
font-weight: 750;

```
margin-bottom: 7px;
```

}

.descripcion {
color: #94a3b8;

```
font-size: 14px;

line-height: 1.5;

margin-bottom: 26px;
```

}

/* CAMPOS */

.campo {
margin-bottom: 19px;
}

.campo label {
display: block;

```
margin-bottom: 8px;

color: #cbd5e1;

font-size: 13px;
font-weight: 650;
```

}

.campo input {
width: 100%;
height: 51px;

```
padding: 0 15px;

border: 1px solid
    rgba(255, 255, 255, 0.09);

border-radius: 12px;

outline: none;

background:
    rgba(2, 6, 23, 0.45);

color: #ffffff;

font-family: inherit;
font-size: 14px;

transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
```

}

.campo input::placeholder {
color: #64748b;
}

.campo input:hover {
border-color:
rgba(255, 255, 255, 0.16);
}

.campo input:focus {
border-color: #818cf8;

```
background:
    rgba(99, 102, 241, 0.07);

box-shadow:
    0 0 0 3px
    rgba(99, 102, 241, 0.12),

    0 8px 25px
    rgba(0, 0, 0, 0.12);
```

}

/* AUTOCOMPLETADO */

.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus {

```
-webkit-text-fill-color: #ffffff;

transition:
    background-color 9999s ease-in-out 0s;
```

}

/* BOTÓN */

button {
width: 100%;
height: 53px;

```
margin-top: 8px;

border: 0;
border-radius: 13px;

background:
    linear-gradient(
        135deg,
        #6366f1,
        #8b5cf6
    );

color: #ffffff;

font-family: inherit;

font-size: 13px;
font-weight: 850;

letter-spacing: 1px;

cursor: pointer;

box-shadow:
    0 12px 30px
    rgba(99, 102, 241, 0.25);

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
```

}

button:hover {
transform: translateY(-2px);

```
filter: brightness(1.08);

box-shadow:
    0 17px 38px
    rgba(99, 102, 241, 0.35);
```

}

button:active {
transform: translateY(0);

```
box-shadow:
    0 8px 20px
    rgba(99, 102, 241, 0.22);
```

}

button:focus-visible {
outline: 3px solid
rgba(129, 140, 248, 0.35);

```
outline-offset: 3px;
```

}

/* SEGURIDAD */

.seguridad {
text-align: center;

```
margin-top: 18px;

color: #64748b;

font-size: 12px;
```

}

/* RESULTADOS */

.resultado {
text-align: center;

```
animation:
    resultado-aparecer
    0.5s ease-out;
```

}

.resultado-icono {
width: 68px;
height: 68px;

```
margin: 0 auto 20px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

font-size: 30px;
font-weight: 800;

animation:
    icono-aparecer
    0.45s ease-out;
```

}

/* ÉXITO */

.resultado-ok {
color: #4ade80;

```
background:
    rgba(34, 197, 94, 0.12);

border:
    1px solid rgba(34, 197, 94, 0.25);

box-shadow:
    0 0 30px
    rgba(34, 197, 94, 0.08);
```

}

/* ERROR */

.resultado-error {
color: #f87171;

```
background:
    rgba(239, 68, 68, 0.12);

border:
    1px solid rgba(239, 68, 68, 0.25);

box-shadow:
    0 0 30px
    rgba(239, 68, 68, 0.08);
```

}

.resultado h2 {
margin-bottom: 10px;

```
color: #ffffff;

font-size: 23px;
font-weight: 750;
```

}

.resultado p {
max-width: 360px;

```
margin: 0 auto;

color: #94a3b8;

font-size: 14px;

line-height: 1.7;
```

}

/* BOTÓN VOLVER */

.boton {
display: flex;
align-items: center;
justify-content: center;

```
width: 100%;
height: 53px;

margin-top: 25px;

border-radius: 13px;

background:
    linear-gradient(
        135deg,
        #6366f1,
        #8b5cf6
    );

color: #ffffff;

text-decoration: none;

font-family: inherit;

font-size: 13px;
font-weight: 850;

letter-spacing: 1px;

box-shadow:
    0 12px 30px
    rgba(99, 102, 241, 0.25);

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
```

}

.boton:hover {
transform: translateY(-2px);

```
filter: brightness(1.08);

box-shadow:
    0 17px 38px
    rgba(99, 102, 241, 0.35);
```

}

.boton:active {
transform: translateY(0);
}

.boton:focus-visible {
outline: 3px solid
rgba(129, 140, 248, 0.35);

```
outline-offset: 3px;
```

}

/* PIE */

.pie {
display: flex;

```
justify-content: center;
align-items: center;

gap: 9px;

margin-top: 28px;

color: #64748b;

font-size: 12px;
```

}

.pie span:first-child {
color: #818cf8;

```
font-weight: 600;
```

}

/* ANIMACIONES */

@keyframes aparecer {

```
from {
    opacity: 0;
    transform:
        translateY(15px)
        scale(0.98);
}

to {
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
}
```

}

@keyframes flotar {

```
0%,
100% {
    transform: translateY(0);
}

50% {
    transform: translateY(-4px);
}
```

}

@keyframes resultado-aparecer {

```
from {
    opacity: 0;
    transform: translateY(10px);
}

to {
    opacity: 1;
    transform: translateY(0);
}
```

}

@keyframes icono-aparecer {

```
from {
    opacity: 0;
    transform: scale(0.75);
}

to {
    opacity: 1;
    transform: scale(1);
}
```

}

/* MÓVIL */

@media (max-width: 520px) {

```
body {
    padding: 15px;
}


.registro-card {
    padding: 30px 22px;

    border-radius: 20px;
}


.cabecera h1 {
    font-size: 23px;

    letter-spacing: 3px;
}


.logo {
    width: 56px;
    height: 56px;

    border-radius: 16px;

    font-size: 26px;
}


.separador {
    margin: 25px 0;
}


.formulario h2 {
    font-size: 21px;
}


.resultado h2 {
    font-size: 21px;
}


.resultado p {
    font-size: 13px;
}


.resultado-icono {
    width: 62px;
    height: 62px;

    font-size: 27px;
}
```

}

/* REDUCIR ANIMACIONES */

@media (prefers-reduced-motion: reduce) {

```
.pagina,
.logo,
.resultado,
.resultado-icono,
button,
.boton,
.campo input {

    animation: none;
    transition: none;
}
```

}