:root{
  --violet:#2D2D2D;     /* color del aro/logo */
  --violet-2:#2D2D2D;   /* (reservado) */
  --bg-1:#0b0f2a;       /* fondo oscuro 1 (no usado acá) */
  --bg-2:#10143a;       /* fondo oscuro 2 (no usado acá) */
  --text:#e7e7e7;       /* color de texto principal */
  --muted:#b8b8b8;      /* texto apagado */
}

*{ box-sizing:border-box }  /* evita que padding sume al ancho */
html,body{ height:100% }
body {
  margin: 0;
  color: var(--text);
  background: url("../images/background.png") no-repeat center center fixed; /* fondo fijo */
  background-size: cover;                                                    /* cubrir pantalla */
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;                   /* tipografía */
}

.hero{
  height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; /* centra todo en la portada */
  gap:32px;                                   /* espacio entre bloques */
}

/* círculo con el logo adentro */
.logo-ring{
  width:300px; height:300px; border-radius:50%;
  background: var(--violet);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08),
              0 12px 32px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transform: translateY(-60px); /* lo sube un cachito */
}
.logo-ring img{
  width:120%; height:120%; object-fit:cover;    /* que llene el círculo */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));/* sombrita linda */
}

/* fila de botones */
.cta-row{ display:flex; gap:60px; flex-wrap:wrap; }

/* estilo de los “pills” (botones/enlaces) */
.pill {
  min-width: 220px;
  padding: 12px 22px;
  border-radius: 999px;                          /* súper redondo */
  border: 1px solid rgba(255,255,255,.25);
  background: #e9e9ee;
  color: #8a8a8a;
  font-size: 20px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7),
              0 6px 16px rgba(0,0,0,.25);
  cursor: pointer;
  transition: .2s;
  text-decoration: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
input.pill:focus {
  box-shadow: 0 0 0 3px rgba(117, 30, 168, .25); /* foco accesible */
}

/* texto legal abajo */
.legal{
  margin-top:-10px; color:#cfcfe6; font-size:14px; text-align:center; max-width:520px;
}
.legal a{ 
  color: #751EA8; text-decoration:none;         /* links violeta */
}
.legal a:hover{ 
  text-decoration:underline;
}

/* animación de entrada genérica */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(4px) scale(.98) }
  to{ opacity:1; transform:translateY(0) scale(1) }
}

/* responsive para pantallas chicas */
@media (max-width:520px){
  .cta-row{ gap:16px }
  .pill{ min-width:160px }
}

/* (repetido) mismo transform del logo */
.logo-ring{
  transform: translateY(-60px); /* igual que arriba */
}