/* ================
   Base / Tokens
   ================ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root{
  --bg: #0a0a0f;           /* fondo amoled */
  --text: #E8E8F5;         /* texto principal */
  --muted: #A5A6B8;        /* texto secundario */
  --line: rgba(255,255,255,.12);

  --violet-300: #A78BFA;
  --violet-500: #7C3AED;   /* acento principal */
  --violet-600: #6D28D9;
  --cyan-400:   #22D3EE;
  --pink-400:   #F472B6;

  --radius: 16px;          /* bordes pedidos */
  --shadow-sm: 0 4px 14px rgba(0,0,0,.25);
  --shadow-md: 0 8px 28px rgba(0,0,0,.35);

  --container: 980px;
  --pad: 20px;
}

/* ================
   Reset mínimo
   ================ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Contenedor principal sobre layers de fondo */
.overlay{
  position: relative;
  z-index: 2;                /* encima de aurora y canvas */
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--pad);
}
.card{ background: transparent; border:0; box-shadow:none; }

/* ================
   Hero
   ================ */
.hero{
  text-align:center;
  margin: 10px auto 14px;
}
.hero img{
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--violet-600);
  box-shadow: 0 0 0 4px rgba(124,58,237,.16);
}
.hero h1{
  font-size: clamp(24px, 4vw, 32px);
  margin: 10px 0 4px;
  font-weight: 700;
  letter-spacing: .2px;
}
.hero p{
  margin: 0 0 6px;
  color: var(--muted);
  font-weight: 500;
}

/* ================
   Iconos personales
   ================ */
.icons{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin: 10px 0 16px;
}
.ico{
  position:relative;
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: inherit; text-decoration:none;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.ico svg{ display:block; }
.ico:hover{
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(167,139,250,.45);
  background: rgba(124,58,237,.16);
  box-shadow: 0 0 0 3px rgba(167,139,250,.22), var(--shadow-md);
}
/* spotlight de hover + splash de click (JS añade .splash) */
.ico::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(167,139,250,.22), transparent 45%);
  opacity:0; transition: opacity .18s ease; pointer-events:none;
}
.ico:hover::before{ opacity:1; }
.ico .splash{
  position:absolute; left:var(--mx,50%); top:var(--my,50%);
  width:10px; height:10px; border-radius:50%;
  background: rgba(167,139,250,.65);
  transform: translate(-50%,-50%) scale(0);
  opacity:.9; pointer-events:none;
  animation: splash .55s ease-out forwards;
}
@keyframes splash{ to { transform: translate(-50%,-50%) scale(14); opacity:0; } }

/* ================
   Secciones / Panels (glass + modernos)
   ================ */
.sections{ display:grid; gap: 18px; }

.section{
  background: linear-gradient( to bottom, rgba(255,255,255,.06), rgba(255,255,255,.03) );
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}
.section h2{
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--violet-300);
  margin: 4px 0 12px;
}

/* Communities: filas con nombre + iconos (fallback actual) */
.row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; padding: 8px 2px;
  border-top: 1px dashed rgba(255,255,255,.08);
}
.row:first-of-type{ border-top:0; }
.row-title{ font-size: .98rem; opacity:.95; }

/* (Opcional futuro) Cards de comunidad con logo + rol */
.community{
  display:flex; align-items:center; gap: 12px;
  padding: 10px; border-radius: var(--radius);
  text-decoration:none; color:inherit;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.community:hover{
  transform: translateY(-1px);
  border-color: rgba(167,139,250,.45);
  background: rgba(124,58,237,.12);
}
.community .logo{
  width:44px; height:44px; border-radius: 10px;
  object-fit: contain; background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
}
.community-meta{ display:flex; flex-direction:column; }
.community-name{ font-weight:600; line-height:1.15; }
.community-role{ font-size:.88rem; color:var(--muted); margin-top:2px; }

/* Pills de “Building / Interests” */
.pill-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pill{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  text-decoration:none; color:inherit;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--shadow-sm);
}
.pill:hover{
  transform: translateY(-1px);
  background: rgba(124,58,237,.12);
  border-color: rgba(167,139,250,.45);
  box-shadow: 0 0 0 3px rgba(167,139,250,.18), var(--shadow-md);
}
.pill .meta{ margin-left:auto; opacity:.75; }
/* spotlight/splash reaprovechando clases del JS */
.pill::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(160px 160px at var(--mx,50%) var(--my,50%), rgba(167,139,250,.20), transparent 45%);
  opacity:0; transition: opacity .18s ease; pointer-events:none;
}
.pill:hover::before{ opacity:1; }
.pill .splash{
  position:absolute; left:var(--mx,50%); top:var(--my,50%);
  width:12px; height:12px; border-radius:50%;
  background: rgba(167,139,250,.6);
  transform: translate(-50%,-50%) scale(0);
  opacity:.9; pointer-events:none;
  animation: splash .6s ease-out forwards;
}

/* Nota */
.small-note{
  text-align:center; color:var(--muted);
  font-size:.82rem; margin: 8px 0 10px;
}

/* Accesibilidad */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--violet-500);
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 2px);
}

/* Responsive */
@media (max-width: 640px){
  .hero img{ width:92px; height:92px; }
  .icons{ gap:8px; }
  .ico{ width:40px; height:40px; }
  .section{ padding: 12px; }
}

/* Títulos centrados y un poco más grandes */
.section h2{
  text-align: center;
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
}

/* Filas de comunidad: grid -> ancho consistente del card izquierdo */
.row{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto; /* izquierda consistente, derecha compacta */
  align-items: center;
  gap: 14px;
  padding: 10px 2px;
  border-top: 1px dashed rgba(255,255,255,.08);
}
.row:first-of-type{ border-top: 0; }

/* Tarjeta de comunidad: ocupa siempre el 100% de su columna */
.community{
  width: 100%;
  position: relative; /* para el spotlight */
}

/* Texto de la comunidad: nombre más notorio, rol más pequeño */
.community-name{
  font-weight: 700;
  font-size: clamp(.98rem, 1.6vw, 1.05rem);
}
.community-role{
  font-size: .9rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Efecto “luz” que sigue el puntero en la tarjeta (como los .pill/.ico) */
.community::before{
  content:""; position:absolute; inset:0;
  border-radius: var(--radius);
  background: radial-gradient(180px 180px at var(--mx,50%) var(--my,50%), rgba(167,139,250,.22), transparent 45%);
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.community:hover::before{ opacity: 1; }

/* En móvil: apilado y centrado; RRSS abajo del título */
@media (max-width: 720px){
  .row{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .row .icons{
    margin-top: 8px;
    justify-content: center;
  }
  .community{
    justify-content: center;
  }
}
.row .icons{ min-width: 160px; justify-content: flex-end; }
@media (max-width: 720px){ .row .icons{ min-width: 0; } }