*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#000;
color:white;
overflow-x:hidden;
}

/* =========================
   ESTRELLAS DEL ESPACIO
   ========================= */

.space{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background:
radial-gradient(2px 2px at 20px 30px,#eee,transparent),
radial-gradient(2px 2px at 90px 80px,#fff,transparent),
radial-gradient(1px 1px at 150px 120px,#ddd,transparent),
radial-gradient(1px 1px at 200px 40px,#fff,transparent),
radial-gradient(2px 2px at 250px 200px,#ddd,transparent),
radial-gradient(1px 1px at 300px 300px,#fff,transparent),
radial-gradient(2px 2px at 400px 150px,#ccc,transparent),
radial-gradient(1px 1px at 500px 200px,#fff,transparent),
radial-gradient(2px 2px at 600px 300px,#ddd,transparent),
radial-gradient(1px 1px at 700px 100px,#fff,transparent),
radial-gradient(2px 2px at 800px 250px,#ccc,transparent),
radial-gradient(1px 1px at 900px 350px,#fff,transparent);
background-repeat:repeat;
background-size:1000px 600px;
animation:starsMove 120s linear infinite;
}

@keyframes starsMove{
from{
transform:translateY(0);
}
to{
transform:translateY(-1000px);
}
}

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

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
}

.logo{
display:flex;
align-items:center;
gap:10px;
}

.logo img{
height:32px;
width:auto;
}

.actions button{
background:transparent;
border:1px solid #36B5E5;
color:#36B5E5;
padding:8px 18px;
margin-left:10px;
border-radius:6px;
cursor:pointer;
transition:.3s;
}

.actions button:hover{
background:#36B5E5;
color:#000;
}

/* =========================
   CONTENEDOR CENTRAL
   ========================= */

.container{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:80vh;
}

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

.circle-menu{
position:relative;
width:600px;
height:600px;
display:flex;
align-items:center;
justify-content:center;
}

/* ORBITA */

.orbit{
position:absolute;
width:500px;
height:500px;
border-radius:50%;
border:2px solid rgba(54,181,229,0.5);
box-shadow:
0 0 20px rgba(54,181,229,0.7),
0 0 60px rgba(54,181,229,0.3);
}

/* AVATAR CENTRAL */

.avatar{
width:140px;
height:140px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(54,181,229,0.1);
box-shadow:
0 0 20px #36B5E5,
0 0 60px rgba(54,181,229,0.5);
}

.avatar img{
width:80px;
}

/* =========================
   ITEMS DEL MENU
   ========================= */

.menu-item{
position:absolute;
width:120px;
height:120px;
border-radius:50%;
border:2px solid #36B5E5;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
text-decoration:none;
color:white;
background:rgba(0,0,0,0.6);
transition:.3s;
}

.menu-item img{
width:40px;
margin-bottom:8px;
}

.menu-item:hover{
transform:scale(1.1);
box-shadow:
0 0 20px #36B5E5,
0 0 40px rgba(54,181,229,0.5);
}

/* POSICIONES */

.m1{ top:-40px; left:240px; }
.m2{ top:80px; right:-40px; }
.m3{ bottom:80px; right:-40px; }
.m4{ bottom:-40px; left:240px; }
.m5{ bottom:80px; left:-40px; }
.m6{ top:80px; left:-40px; }

/* =========================
   TITULO
   ========================= */

.titulo{
text-align:center;
margin-top:40px;
}

.titulo h1{
font-size:48px;
letter-spacing:4px;
}

.titulo h2{
color:#36B5E5;
margin-top:10px;
letter-spacing:2px;
}

.titulo p{
margin-top:10px;
opacity:.7;
font-size:14px;
}
.chat-publico{
position:fixed;
right:40px;
bottom:40px;
width:380px;
height:520px;
background:rgba(5, 14, 24, 0.88);
backdrop-filter:blur(14px);
border:1px solid rgba(54,181,229,0.6);
border-radius:18px;
box-shadow:
0 0 25px rgba(54,181,229,0.35),
0 0 80px rgba(54,181,229,0.15);
display:flex;
flex-direction:column;
overflow:hidden;
z-index:9999;
}

.chat-publico__header{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 18px;
border-bottom:1px solid rgba(54,181,229,0.25);
background:rgba(0,0,0,0.2);
}

.chat-publico__title{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:700;
color:#36B5E5;
letter-spacing:1px;
}

.chat-publico__dot{
width:10px;
height:10px;
border-radius:50%;
background:#36B5E5;
box-shadow:0 0 10px #36B5E5;
}

.chat-publico__close{
background:transparent;
border:none;
color:#9edfff;
font-size:18px;
cursor:pointer;
transition:0.3s;
}

.chat-publico__close:hover{
color:#ffffff;
transform:scale(1.1);
}

.chat-publico__messages{
flex:1;
padding:16px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:12px;
}

.chat-msg{
display:flex;
width:100%;
}

.chat-msg--user{
justify-content:flex-end;
}

.chat-msg--alya{
justify-content:flex-start;
}

.chat-msg__bubble{
max-width:82%;
padding:12px 14px;
border-radius:14px;
font-size:14px;
line-height:1.5;
word-wrap:break-word;
}

.chat-msg--user .chat-msg__bubble{
background:rgba(54,181,229,0.18);
border:1px solid rgba(54,181,229,0.4);
color:#ffffff;
}

.chat-msg--alya .chat-msg__bubble{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.08);
color:#d8ecff;
}

.chat-publico__footer{
display:flex;
gap:10px;
padding:14px;
border-top:1px solid rgba(54,181,229,0.2);
background:rgba(0,0,0,0.15);
}

.chat-publico__input{
flex:1;
background:rgba(255,255,255,0.05);
border:1px solid rgba(54,181,229,0.25);
color:#ffffff;
border-radius:12px;
padding:12px 14px;
outline:none;
}

.chat-publico__input::placeholder{
color:rgba(255,255,255,0.45);
}

.chat-publico__input:focus{
border-color:#36B5E5;
box-shadow:0 0 12px rgba(54,181,229,0.25);
}

.chat-publico__send{
background:transparent;
border:1px solid #36B5E5;
color:#36B5E5;
border-radius:12px;
padding:0 16px;
cursor:pointer;
transition:0.3s;
}

.chat-publico__send:hover{
background:#36B5E5;
color:#031018;
}

.chat-publico__messages::-webkit-scrollbar{
width:8px;
}

.chat-publico__messages::-webkit-scrollbar-thumb{
background:rgba(54,181,229,0.35);
border-radius:10px;
}
/* ============================= */
/* ADAPTACION MOVIL */
/* ============================= */

@media (max-width: 900px){

.container{
    transform: scale(0.8);
}

.titulo h1{
    font-size:40px;
}

.titulo h2{
    font-size:18px;
}

}


/* ============================= */
/* MOVIL PEQUEÑO */
/* ============================= */

@media (max-width: 600px){

.container{
    transform: scale(0.55);
}

.titulo{
    margin-top:40px;
}

.titulo h1{
    font-size:28px;
}

.titulo h2{
    font-size:14px;
}

.titulo p{
    font-size:12px;
}

/* chat ocupa toda la pantalla */
.chat-publico{

    width:100%;
    height:100%;
    right:0;
    bottom:0;

    border-radius:0;
}

.chat-publico__messages{
    height:calc(100vh - 160px);
}

}
.informe-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.stat-box {
    flex: 1;
    background: rgba(0, 200, 255, 0.08);
    border: 1px solid rgba(0, 200, 255, 0.2);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}

.stat-num {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: #00c8ff;
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 4px;
}

.informe-titulo-lista {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
    margin-bottom: 10px;
}

.informe-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.88rem;
}

.informe-pos {
    color: #555;
    width: 20px;
    text-align: center;
}

.informe-dominio {
    flex: 1;
    color: #ddd;
}

.informe-total {
    color: #00c8ff;
    font-size: 0.8rem;
}

.informe-actualizado {
    text-align: center;
    font-size: 0.72rem;
    color: #444;
    margin-top: 16px;
}
/* ============================================
   REGISTRO — AVISO INFORMATIVO
   ============================================ */

.registro-aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(54, 181, 229, 0.06);
    border: 1px solid rgba(54, 181, 229, 0.2);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 4px;
}

.registro-aviso-icon {
    font-size: 1.2rem;
    margin-top: 2px;
}

.registro-aviso strong {
    display: block;
    font-size: 0.88rem;
    color: #fff;
    margin-bottom: 6px;
}

.registro-aviso p {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
}

.registro-aviso a {
    color: #36B5E5;
    text-decoration: none;
}

.registro-aviso a:hover {
    text-decoration: underline;
}

/* ============================================
   REGISTRO — SELECTOR TIPO
   ============================================ */

.registro-tipo-selector {
    display: flex;
    gap: 10px;
}

.registro-tipo-btn {
    flex: 1;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(54, 181, 229, 0.2);
    border-radius: 10px;
    color: rgba(255,255,255,0.5);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.registro-tipo-btn:hover {
    border-color: rgba(54, 181, 229, 0.4);
    color: #fff;
}

.registro-tipo-btn.active {
    background: rgba(54, 181, 229, 0.12);
    border-color: #36B5E5;
    color: #36B5E5;
    font-weight: 600;
}

/* ============================================
   REGISTRO — TÉRMINOS
   ============================================ */

.registro-terminos {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    line-height: 1.5;
}

.registro-terminos input[type="checkbox"] {
    margin-top: 2px;
    accent-color: #36B5E5;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.registro-terminos a {
    color: #36B5E5;
    text-decoration: none;
}

.registro-terminos a:hover {
    text-decoration: underline;
}
/* ============================================
   BANNER PATROCINADORES
   ============================================ */

.banner-patrocinadores {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.btn-patrocinadores {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: rgba(5, 14, 24, 0.85);
    border: 1px solid rgba(54, 181, 229, 0.35);
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    font-size: 0.88rem;
    letter-spacing: 0.3px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 24px rgba(54, 181, 229, 0.15);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-patrocinadores:hover {
    border-color: rgba(54, 181, 229, 0.7);
    box-shadow: 0 0 32px rgba(54, 181, 229, 0.25);
    transform: translateY(-2px);
    color: #36B5E5;
}

.btn-pat-icon {
    font-size: 1rem;
}

.btn-pat-texto {
    color: inherit;
}

.btn-pat-arrow {
    color: #36B5E5;
    font-size: 0.9rem;
}