/* ---------- Paleta y tokens ---------- */
:root{
  /* Comentario (ES): Base nocturna y acentos “póster” */
  --bg:#0d1025;
  --bg-soft:#161941;
  --card:#171a48;
  --line:#2c2f62;

  --text:#f6f4ff;
  --muted:#aab0d6;

  --primary:#ff6a3d;          /* naranja quemado */
  --primary-2:#ff864e;         /* degradado cálido */
  --link:#6ee7f0;              /* cian retro */

  --radius:18px;
  --shadow:0 18px 45px rgba(0,0,0,.5);
  --shadow-soft:0 8px 26px rgba(0,0,0,.35);
}

/* ---------- Reset y layout ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  line-height:1.6;

  /* Comentario (ES): Fondo con viñeta espacial + gradientes oblicuos */
  background:
    radial-gradient(1600px 800px at 85% -10%, #292667 0%, var(--bg) 50%),
    radial-gradient(1000px 600px at -10% 10%, #1a1a4c 0%, transparent 60%),
    linear-gradient(200deg, #0b0d22, #0f1029 60%, #0b0d22 100%);
  position:relative;
  overflow-x:hidden;
}

/* ---------- Grano / semitono / viñeta global ---------- */
body.retro-future::before{
  /* Comentario (ES): Capa de grano tipo “impresión” (ruido fino) */
  content:""; position:fixed; inset:-2px; pointer-events:none; z-index:0;
  background:
    radial-gradient(#ffffff33 1px, transparent 1.5px) 0 0/2px 2px,
    radial-gradient(#ffffff1f 1px, transparent 1.6px) 12px 8px/3px 3px;
  mix-blend-mode:soft-light; opacity:.18;
}
body.retro-future::after{
  /* Comentario (ES): Viñeta suave alrededor de toda la página */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(1200px 500px at 50% -120px, transparent 40%, rgba(0,0,0,.45) 80%);
}

/* ---------- Utilidades ---------- */
a{color:inherit; text-decoration:none}
a:hover{color:#fff}
img{max-width:100%; display:block}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.section{padding:30px 0}
@media (max-width:720px){ .section{padding:60px 0} }

/* ---------- Tipografía retro ---------- */
.headline{
  /* Comentario (ES): Bloque “póster” con contorno y sombra múltiple */
  font-family:"Archivo Black", Inter, system-ui;
  text-transform:uppercase;
  font-size:56px; line-height:1.02; letter-spacing:.01em; margin:10px 0 0;
  color:#ffe7de;
  text-shadow:
    -2px -2px 0 #0a0920,
     2px -2px 0 #0a0920,
    -2px  2px 0 #0a0920,
     2px  2px 0 #0a0920,
     0 6px 18px rgba(0,0,0,.55);
}
@media (max-width:1024px){ .headline{font-size:46px} }
@media (max-width:720px){ .headline{font-size:36px} }
.headline-accent{color:var(--primary)}
.sub{font-size:18px; color:var(--muted)}

/* ---------- Botones “píldora póster” ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px;
  border:2px solid #2b2d61;
  background:
    linear-gradient(180deg, #181a48, #12143b);
  color:var(--text); font-weight:800; letter-spacing:.2px;
  transition:.18s transform,.18s box-shadow,.18s background;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 16px 26px rgba(0,0,0,.5)}
.btn.primary{
  background:linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#1a0f12; border-color:#5b2a1e;
  text-shadow:0 1px 0 #ffd2c4;
}
.btn.ghost{background:transparent}

/* ---------- Tarjetas con semitono ---------- */
.card{
  background:
    /* Comentario (ES): patrón semitono (repeating-radial-gradient) */
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.04) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 80% 0%, rgba(255,255,255,.03) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #1b1e56, #141747);
  background-size: 6px 6px, 8px 8px, auto;
  border:2px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.card-soft{padding:24px}

/* ---------- Encabezado ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px) saturate(1.15);
  background:rgba(12,12,30,.6);
  border-bottom:2px solid var(--line);
  /* Comentario (ES): línea “neón” inferior */
  box-shadow:0 2px 0 #0a0b22, 0 8px 18px rgba(0,0,0,.4);
}
.site-header .inner{display:flex; align-items:center; justify-content:space-between; height:74px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.6px}
.brand-mark{
  /* Comentario (ES): insignia tipo “parche” */
  width:30px; height:30px; border-radius:999px;
  background:
    radial-gradient(35% 35% at 30% 30%, #ffd5c7 0%, transparent 60%),
    radial-gradient(100% 100% at 50% 50%, var(--primary-2) 0%, var(--primary) 45%, #c44328 100%);
  box-shadow:0 0 40px rgba(255,106,61,.28);
  border:2px solid #642b1f;
}
.nav{display:flex; gap:6px; align-items:center}
.nav a{
  padding:10px 12px; border-radius:12px;
  color:#d7dbff; text-transform:uppercase; font-weight:800; letter-spacing:.05em;
  border:1px solid transparent;
}
.nav a:hover{background:#1b1d51; color:#fff; border-color:#2a2c66}

/* ---------- Perfil header ---------- */
.header-profile{display:inline-flex; align-items:center; gap:8px; text-decoration:none}
.header-username{font-size:14px}
.header-avatar{width:32px; height:32px; border-radius:999px; overflow:hidden; border:2px solid var(--line); background:#fff}
.header-avatar img{width:100%; height:100%; object-fit:cover}
.header-logout{display:inline}

/* ---------- Hero con luna, estrellas y destellos ---------- */
.hero{padding:25px 0; position:relative; z-index:1}
.hero-wrap{display:grid; grid-template-columns:1.25fr .75fr; gap:34px; align-items:center}
.hero .cta-wrap{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.hero .meta{margin-top:10px; color:var(--muted)}
.hero-visual{position:relative; min-height:280px}

/* Comentario (ES): disco lunar con cráteres y anillo brillante */
.orb{
  position:absolute; right:8%; top:-10px;
  width:320px; height:320px; border-radius:50%;
  background:
    radial-gradient(circle at 65% 30%, rgba(255,255,255,.25) 0 30%, transparent 40%),
    radial-gradient(circle at 28% 62%, rgba(0,0,0,.25) 0 18%, transparent 19%),
    radial-gradient(circle at 58% 68%, rgba(0,0,0,.25) 0 14%, transparent 15%),
    radial-gradient(circle at 38% 34%, rgba(0,0,0,.25) 0 10%, transparent 11%),
    radial-gradient(circle at 62% 45%, rgba(0,0,0,.18) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, #3b3f7e 0%, #232861 60%, #1b1e4c 100%);
  box-shadow: inset 0 -18px 40px rgba(0,0,0,.35), 0 0 120px rgba(90,80,210,.25);
}
.orb::after{
  /* Comentario (ES): halo naranja como en el póster */
  content:""; position:absolute; inset:-12px; border-radius:50%;
  background: conic-gradient(from 210deg, rgba(255,106,61,.45), transparent 35%, transparent 75%, rgba(255,106,61,.25));
  filter: blur(12px); opacity:.7;
}

.cta-wrap{
  padding-top: 20px;
}

/* Comentario (ES): estrellas tipo “cruz” y destellos */
.hero::before,
.hero::after{
  width:16px; height:16px; top:220px; left:auto; right:16%;
  transform: rotate(-10deg);
}

/* ---------- Cabeceras de sección ---------- */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px
}
.pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:2px solid var(--line); color:#cbd1ff; font-size:12px; letter-spacing:.35px;
  background:linear-gradient(180deg, #191c52, #131641);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.head-actions{display:flex; gap:10px}

/* ---------- Carrusel de logos ---------- */
.carousel{position:relative; overflow:hidden; border-radius:var(--radius); border:2px solid var(--line)}
.carousel-track{display:flex; gap:20px; padding:20px; animation:scroll 30s linear infinite}
.logo-card{
  min-width:220px; max-width:260px;
  background:linear-gradient(180deg, #1b1e56, #141747);
  border:2px solid var(--line); border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 8px 16px rgba(0,0,0,.35);
}
.logo-img{
  height:90px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:#12133b; border:2px dashed #333273
}
.vote{display:flex; align-items:center; justify-content:space-between}
.meter{height:10px; background:#1d1e4d; border-radius:999px; overflow:hidden; border:1px solid #23245b}
.meter > span{display:block; height:100%; background:linear-gradient(90deg, #ffcbb6, var(--primary))}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- Promos — tarjeta “póster” con overlay ---------- */
.promo{
  position:relative; overflow:hidden; min-height:380px; padding:18px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
  background:linear-gradient(180deg, rgba(25,24,61,.5), rgba(18,17,42,.96));
  border:2px solid var(--line);
}
.promo-cover{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.05) brightness(.9); opacity:.95;
}
.promo::before{
  /* Comentario (ES): grano + viñeta para legibilidad */
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(60% 55% at 50% 70%, rgba(5,4,18,0) 0%, rgba(5,4,18,.65) 80%),
    radial-gradient(#ffffff25 1px, transparent 1.6px) 0 0/3px 3px;
  mix-blend-mode:soft-light;
}
.promo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:55%; z-index:1;
  background:linear-gradient(180deg, rgba(8,7,20,0) 0%, rgba(8,7,20,.65) 40%, rgba(8,7,20,.95) 100%);
}
.promo h3, .promo p, .promo .promo-actions{position:relative; z-index:2}
.promo h3{margin:0 0 6px; font-size:clamp(18px,2.1vw,22px); line-height:1.2}
.promo h3 a{color:#fff}
.promo h3 a:hover{text-decoration:underline}
.promo .promo-actions{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- Roadmap ---------- */
.roadmap{position:relative}
.roadmap::before{
  content:""; position:absolute; left:calc(50% - 1px); top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, #2d2f6e, #1a1c4b);
  box-shadow:0 0 8px rgba(110,231,240,.1);
}
.step{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:18px 0}
.step .dot{
  position:absolute; left:calc(50% - 9px); top:22px; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #ffd7c6 0 40%, var(--primary) 45% 100%);
  box-shadow:0 0 26px rgba(255,106,61,.55)
}
.step .box{background:var(--card); border:2px solid var(--line); border-radius:14px; padding:16px}
.step-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.step-done .box{opacity:.84}
.done-text{text-decoration:line-through; color:#8ff0a3}
.status-badge{
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800;
  border:2px solid var(--line); background:#17194b; color:#d2d6ff;
}
.status-badge.done{ background:rgba(34,197,94,.12); color:#d1fadd; border-color:#224a2a }
.status-badge.planned{ background:rgba(255,138,80,.18); color:#ffe0d2; border-color:#3a2822 }
@media (max-width:900px){
  .roadmap::before{left:10px}
  .step{grid-template-columns:1fr; padding-left:28px}
  .step .dot{left:2px}
}

/* ---------- News ---------- */
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:1024px){ .grid.cols-3{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:720px){ .grid.cols-3, .grid.cols-2{grid-template-columns:1fr} }

.news-card{display:flex; flex-direction:column; gap:12px; border:2px solid var(--line); border-radius:var(--radius); padding:12px; background:linear-gradient(180deg, #1b1e56, #141747)}
.news-thumb{width:100%; border-radius:10px; overflow:hidden; background:#12133b; border:2px solid #26286a}
.news-card img{width:100%; height:220px; object-fit:cover; border-radius:10px}
.news-meta{font-size:12px; color:var(--muted)}
.home-news h3{margin:0 0 6px}
.home-news h3 a{color:var(--link); font-weight:900; text-transform:uppercase; letter-spacing:.02em}
.home-news h3 a:hover{color:#a8f9ff; text-decoration:underline}

/* ---------- Token y club ---------- */
.token{display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center}
.token .stat{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#12133b; border:2px solid var(--line); border-radius:12px}
.token-stats{margin-top:12px}
.img-brd{border:2px solid var(--line)}
.club-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center}
@media (max-width:900px){ .club-grid{grid-template-columns:1fr} }

/* ---------- Footer ---------- */
.site-footer{padding:44px 0; border-top:2px solid var(--line); background:#0e0f2a}
.footer-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px}
.footer-nav{display:flex; flex-direction:column; gap:6px}
.socials{display:flex; gap:12px}
.socials a{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; }
.subscribe{display:flex; gap:8px; flex-wrap:wrap}
.subscribe input{background:#12133b; border:2px solid var(--line); color:var(--text); border-radius:12px; padding:12px; min-width:260px}
.footer-copy{margin-top:20px; text-align:center; color:var(--muted)}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(7,6,18,.65); backdrop-filter:saturate(1.2) blur(3px); z-index:9999;
}
.modal-card{max-width:520px; width:92%; padding:22px}
.modal-title{font-size:22px; margin:0 0 8px 0}

/* ---------- Pequeñas utilidades ---------- */
.mb-16{margin-bottom:16px}
.tail-right{display:flex; justify-content:flex-end; margin-top:12px}

/* ---------- Compensación por header fijo ---------- */
.has-fixed-header main{ padding-top:10px; }


/* ==========================================
   Fix brillo debajo del HERO
   (Eliminar viñeta global y overlays pesados)
   ========================================== */

/* Comentario (ES): mover las capas globales de grano/viñeta POR DEBAJO del contenido */
body.retro-future::before,
body.retro-future::after{
  z-index:-1;          /* antes era 0, podía quedar por encima del contenido */
  opacity:.12;         /* más suave; si quieres, ponlo en 0 para quitarlas del todo */
}

/* Comentario (ES): quitar oscurecimiento extra en tarjetas tipo póster */
.promo::before,
.promo::after{
  display:none;        /* sin velos: imagen más viva y texto igual de legible */
}

/* Comentario (ES): un pelín más de contraste general para tarjetas comunes */
.card{
  background: linear-gradient(180deg, #20246a, #171b53);
  border-color:#3a3e7a;
  padding: 10px;
}

/* Comentario (ES): mejorar legibilidad de noticias sin “lavado” */
.news-card{
  background: linear-gradient(180deg, #20246a, #171b53);
  border-color:#3a3e7a;
}

/* ---------- Steps section ---------- */
.step-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  text-align:center; /* centramos el contenido */
  transition:.2s transform, .2s box-shadow;
}
.step-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,.45);
}
.step-img{
  border-radius:var(--radius);   /* bordes redondeados */
  border:2px solid var(--line);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  overflow:hidden;              /* asegura que la imagen respete el borde */
}
.step-card h3{
  font-family:"Archivo Black", Inter, sans-serif;
  text-transform:uppercase;
  font-size:20px;
  margin:8px 0 0;
  color:#3DCED7;                 /* color retro cian */
}
.step-card p.sub{
  text-align:center;             /* centramos también el texto secundario */
}

/* =========================================
   Móvil: navegación, hero y rejillas
   (Comentarios en ES)
   ========================================= */

/* Comentario (ES): Botón hamburguesa oculto en escritorio */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg,#181a48,#12143b);
  cursor: pointer;
  flex-direction: column;  /* Comentario (ES): apila las barras verticalmente */
}
.hamburger .bar {
  display: block;       /* Comentario (ES): fuerza a ocupar toda la línea */
  width: 22px;          /* Comentario (ES): ancho de cada barra */
  height: 2px;          /* Comentario (ES): grosor de la barra */
  background: #d7dbff;  /* Comentario (ES): color de la barra */
  margin: 4px auto;     /* Comentario (ES): separación vertical y centrado */
  border-radius: 2px;   /* Comentario (ES): bordes redondeados sutiles */
}
.hamburger .bar + .bar{margin-top:4px}

/* Comentario (ES): En móvil, la barra superior muestra hamburguesa y el nav vira a cajón */
@media (max-width: 900px){
  .site-header .inner{gap:10px}
  .hamburger{display:inline-flex}
  .nav{
    position:fixed; left:0; right:0; top:74px; bottom:auto;
    display:none; flex-direction:column; gap:6px; padding:12px 16px;
    background:rgba(12,12,30,.95); border-bottom:2px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,.5); z-index:60;
  }
  body.nav-open .nav{display:flex}
  .nav a{padding:12px 10px; border:1px solid #24265a; border-radius:10px}
  .header-logout{display:block} /* Comentario (ES): botón logout no se pierde */
}

/* Comentario (ES): Hero: dos columnas -> una columna */
@media (max-width: 900px){
  .hero-wrap{grid-template-columns:1fr; gap:18px}
  .hero-visual{min-height:220px}
  .orb{position:relative; right:auto; top:auto; margin:0 auto; width:260px; height:260px}
  .headline{font-size:34px}
}
@media (max-width: 720px){
  .headline{font-size:30px}
  .sub{font-size:16px}
}

/* Comentario (ES): Rejillas genéricas — reforzamos stacking en móvil */
@media (max-width: 900px){
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .token{grid-template-columns:1fr; gap:16px}
}

/* Comentario (ES): Footer a una columna en móvil */
@media (max-width: 900px){
  .footer-grid{grid-template-columns:1fr}
  .subscribe input{min-width:0; width:100%}
}

/* Comentario (ES): Carrusel táctil — deslizable con impulso */
.carousel{overflow:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory}
.carousel-track{animation:none; gap:16px; padding:16px}
.logo-card{scroll-snap-align:start; min-width:78%; max-width:84%}
@media (min-width: 901px){
  .carousel{overflow:hidden}
  .carousel-track{animation:scroll 30s linear infinite; gap:20px; padding:20px}
  .logo-card{min-width:220px; max-width:260px}
}

/* Comentario (ES): Imágenes de steps ajustadas en teléfonos */
.step-img img{width:100%; height:auto; display:block}

/* Comentario (ES): Pequeño margen superior al main para respirar en móvil */
@media (max-width: 900px){
  .has-fixed-header main{padding-top:14px}
}

@media (max-width: 720px){
  .news-card img{height:180px}
}