/* =========================================
   GruposZap — Light Theme Stylesheet
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---- CSS Variables ---- */
:root {
  --bg-base:    #f4f6fb;
  --bg-surface: #ffffff;
  --bg-card:    #ffffff;
  --bg-card-hover: #f9fbff;
  --border:     #e2e8f2;
  --border-hover: #25d366;

  --green-400: #1fbe56;
  --green-500: #25d366;
  --green-600: #128c3e;
  --accent:    #25d366;
  --accent-soft: rgba(37,211,102,0.12);
  --accent-glow: rgba(37,211,102,0.2);

  --purple: #7c3aed;
  --blue:   #2563eb;
  --orange: #ea580c;
  --pink:   #db2777;
  --cyan:   #0891b2;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --shadow-card: 0 2px 16px rgba(0,0,0,0.07);
  --shadow-hover: 0 8px 30px rgba(0,0,0,0.11);

  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  --font: 'Inter', system-ui, sans-serif;

  --sidebar-width: 260px;
  --header-height: 64px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; border: none; outline: none; }
input, select, textarea { font-family: var(--font); }

/* ---- Utilities ---- */
.gradient-text {
  background: linear-gradient(130deg, #25d366 0%, #2563eb 60%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.accent { color: var(--accent); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.88rem;
  transition: all var(--transition);
}
.btn--primary {
  background: var(--green-500);
  color: #fff;
  box-shadow: 0 2px 12px var(--accent-glow);
}
.btn--primary:hover { background: var(--green-600); transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }
.btn--outline {
  background: transparent; border: 1.5px solid var(--accent); color: var(--accent);
}
.btn--outline:hover { background: var(--accent-soft); }
.btn--white { background: #fff; color: #0f172a; font-weight: 700; }
.btn--white:hover { background: #f0fdf4; }
.btn--sm   { padding: 7px 16px; font-size: 0.8rem; }
.btn--lg   { padding: 13px 30px; font-size: 1rem; }
.btn--full { width: 100%; }

/* ==============================
   HEADER
   ============================== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-height);
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.header__inner {
  max-width: 100%; padding: 0 24px;
  height: 100%; display: flex; align-items: center; gap: 16px;
}
.logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.5px; flex-shrink: 0;
  color: var(--text-primary);
}
.logo__icon { font-size: 1.5rem; }
.logo .accent { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.nav__link {
  padding: 6px 13px; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 500; color: var(--text-secondary);
  transition: all var(--transition);
}
.nav__link:hover { color: var(--text-primary); background: var(--bg-base); }
.nav__link.active { color: var(--accent); font-weight: 600; }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: transparent; padding: 6px; border-radius: 6px; }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--text-secondary); border-radius: 2px; }

/* ==============================
   HERO
   ============================== */
.hero {
  margin-top: var(--header-height);
  background: linear-gradient(135deg, #e8fdf0 0%, #eff6ff 50%, #f5f3ff 100%);
  border-bottom: 1px solid var(--border);
  padding: 52px 24px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.18; }
.hero__blob--1 { width: 500px; height: 500px; top: -200px; left: -100px; background: var(--accent); animation: blobFloat 9s ease-in-out infinite; }
.hero__blob--2 { width: 400px; height: 400px; top: -150px; right: -80px; background: var(--blue); animation: blobFloat 11s ease-in-out infinite reverse; }
.hero__blob--3 { width: 300px; height: 300px; bottom: -100px; left: 40%; background: var(--purple); animation: blobFloat 13s ease-in-out infinite 2s; }
@keyframes blobFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } }

.hero__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.25);
  padding: 5px 14px; border-radius: 100px;
  font-size: 0.78rem; font-weight: 600; color: var(--green-600);
  margin-bottom: 18px;
}
.pulse-dot {
  width: 7px; height: 7px; background: var(--accent); border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); } 50% { box-shadow: 0 0 0 5px rgba(37,211,102,0); } }

.hero__title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -1px; line-height: 1.15; margin-bottom: 14px; }
.hero__subtitle { font-size: 1rem; color: var(--text-secondary); margin-bottom: 28px; }

/* Search Bar */
.search-bar {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 6px 6px 6px 16px;
  max-width: 560px; margin: 0 auto 28px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.search-bar__icon { font-size: 1rem; color: var(--text-muted); flex-shrink: 0; }
.search-bar__input { flex:1; background:transparent; border:none; outline:none; font-size:0.92rem; color:var(--text-primary); }
.search-bar__input::placeholder { color: var(--text-muted); }

/* Stats */
.hero__stats { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.hero__stat { text-align:center; }
.hero__stat-num { display:block; font-size:1.5rem; font-weight:800; color:var(--accent); letter-spacing:-0.5px; }
.hero__stat-label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; }
.hero__stat-sep { width:1px; height:32px; background:var(--border); }

/* ==============================
   PAGE BODY = SIDEBAR + CONTENT
   ============================== */
.page-body {
  display: flex;
  align-items: flex-start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  gap: 24px;
  min-height: calc(100vh - var(--header-height));
}

/* ==============================
   SIDEBAR
   ============================== */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-height) + 16px);
  height: calc(100vh - var(--header-height) - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding: 20px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Sidebar Search (mobile compact) */
.sidebar__search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition);
}
.sidebar__search:focus-within { border-color: var(--accent); }
.sidebar__search input { flex:1; border:none; outline:none; font-size:0.84rem; background:transparent; color:var(--text-primary); }
.sidebar__search input::placeholder { color: var(--text-muted); }

/* Sidebar Panels */
.sidebar__panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sidebar__panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar__clear-btn {
  font-size: 0.7rem; font-weight: 600; color: var(--accent);
  background: none; border: none; cursor: pointer;
}
.sidebar__clear-btn:hover { text-decoration: underline; }

/* Category list */
.cat-list { padding: 8px 0; }
.cat-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  font-size: 0.88rem; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 0;
  transition: all var(--transition);
  border-left: 3px solid transparent;
  background: none; border-top:none; border-right:none; border-bottom:none;
  width: 100%; text-align:left;
}
.cat-item:hover { background: var(--bg-base); color: var(--text-primary); }
.cat-item.active {
  background: var(--accent-soft);
  color: var(--green-600);
  font-weight: 700;
  border-left: 3px solid var(--accent);
}
.cat-item__icon { font-size: 1rem; flex-shrink:0; }
.cat-item__count {
  margin-left:auto;
  font-size: 0.72rem; font-weight: 600;
  background: var(--bg-base);
  color: var(--text-muted);
  padding: 2px 7px; border-radius: 100px;
  border: 1px solid var(--border);
}
.cat-item.active .cat-item__count {
  background: var(--accent-soft);
  color: var(--green-600);
  border-color: rgba(37,211,102,0.3);
}

/* Sort options */
.sort-list { padding: 8px 0; }
.sort-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  font-size: 0.88rem; color: var(--text-secondary);
  cursor: pointer; width: 100%; text-align:left;
  background:none; border:none;
  transition: all var(--transition);
}
.sort-item:hover { background: var(--bg-base); color: var(--text-primary); }
.sort-item.active { color: var(--accent); font-weight: 600; }
.sort-item.active::before {
  content: '●'; color: var(--accent); font-size: 0.5rem; flex-shrink:0;
}

/* Quick stats in sidebar */
.sidebar__stats { padding: 16px; display:flex; flex-direction:column; gap:10px; }
.sb-stat {
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.82rem; color:var(--text-secondary);
}
.sb-stat-val { font-weight:700; color:var(--text-primary); }
.sb-stat-bar {
  height: 4px; background: var(--bg-base); border-radius: 2px; margin-top:3px;
  overflow: hidden;
}
.sb-stat-fill {
  height:100%; border-radius:2px; background: var(--accent);
  transition: width 1s ease;
}

/* ==============================
   MAIN CONTENT
   ============================== */
.main {
  flex: 1;
  min-width: 0;
  padding: 24px 0 80px;
}

/* ==============================
   SECTIONS
   ============================== */
.section { margin-bottom: 48px; }
.section__header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:18px; gap:10px;
}
.section__title-group { display:flex; flex-direction:column; gap:5px; }
.section__tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 0.71rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
  width: fit-content;
}
.featured-tag { background: rgba(234,88,12,0.1); color: var(--orange); border:1px solid rgba(234,88,12,0.2); }
.tech-tag     { background: rgba(37,99,235,0.1);  color: var(--blue);   border:1px solid rgba(37,99,235,0.2); }
.biz-tag      { background: rgba(124,58,237,0.1); color: var(--purple); border:1px solid rgba(124,58,237,0.2); }
.sport-tag    { background: rgba(37,211,102,0.1); color: var(--green-600); border:1px solid rgba(37,211,102,0.2); }
.music-tag    { background: rgba(219,39,119,0.1); color: var(--pink);   border:1px solid rgba(219,39,119,0.2); }

.section__title { font-size:1.35rem; font-weight:700; letter-spacing:-0.4px; color: var(--text-primary); }
.section__link { font-size:0.84rem; font-weight:600; color:var(--accent); white-space:nowrap; transition:opacity var(--transition); }
.section__link:hover { opacity:0.7; }

/* ==============================
   GROUP GRID
   ============================== */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* Group Card */
.group-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: all var(--transition);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.group-card::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(37,211,102,0.03) 0%, transparent 60%);
  opacity:0; transition:opacity var(--transition);
  pointer-events:none;
}
.group-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.group-card:hover::after { opacity:1; }

/* Card Avatar */
.card__top { display:flex; align-items:center; gap:11px; }
.card__avatar {
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; flex-shrink:0; position:relative;
}
.card__avatar--verified::after {
  content:'✓'; position:absolute; bottom:-3px; right:-3px;
  width:15px; height:15px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:0.5rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.card__meta    { flex:1; min-width:0; }
.card__name    { font-size:0.92rem; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.card__category { font-size:0.7rem; font-weight:600; padding:2px 8px; border-radius:100px; display:inline-block; }

.card__desc { font-size:0.81rem; color:var(--text-secondary); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.card__stats { display:flex; align-items:center; gap:12px; font-size:0.77rem; color:var(--text-muted); }
.card__stat  { display:flex; align-items:center; gap:3px; }

.card__actions  { display:flex; gap:8px; }
.card__btn-join {
  flex:1; padding:8px 0; border-radius:var(--radius-sm);
  font-size:0.82rem; font-weight:700;
  background: var(--accent); color:#fff;
  transition: all var(--transition);
  box-shadow: 0 2px 8px var(--accent-glow);
}
.card__btn-join:hover { background: var(--green-600); transform:translateY(-1px); box-shadow:0 4px 14px var(--accent-glow); }
.card__btn-save {
  width:36px; height:36px; border-radius:var(--radius-sm);
  background: var(--bg-base); border:1.5px solid var(--border);
  color:var(--text-muted); font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all var(--transition);
}
.card__btn-save:hover { border-color:var(--accent); color:var(--accent); background:#fff; }

/* Avatar colors (light) */
.av-green  { background: #dcfce7; }
.av-blue   { background: #dbeafe; }
.av-purple { background: #ede9fe; }
.av-orange { background: #ffedd5; }
.av-pink   { background: #fce7f3; }
.av-cyan   { background: #cffafe; }
.av-red    { background: #fee2e2; }
.av-yellow { background: #fef9c3; }

/* Category badge colors */
.cat-tech     { background:#dbeafe; color:#1d4ed8; }
.cat-negocios { background:#ede9fe; color:#5b21b6; }
.cat-esportes { background:#dcfce7; color:#166534; }
.cat-musica   { background:#fce7f3; color:#9d174d; }
.cat-games    { background:#fef9c3; color:#854d0e; }
.cat-edu      { background:#cffafe; color:#155e75; }
.cat-culinaria{ background:#ffedd5; color:#9a3412; }
.cat-saude    { background:#dcfce7; color:#065f46; }
.cat-viagens  { background:#dbeafe; color:#1e40af; }
.cat-featured { background:#ffedd5; color:#9a3412; }

/* ==============================
   CTA BANNER
   ============================== */
.cta-banner {
  border-radius: var(--radius-xl);
  background: linear-gradient(130deg, #0f3d20 0%, #134e4a 50%, #1e1b4b 100%);
  padding: 40px 44px;
  position: relative; overflow: hidden;
  margin-bottom: 20px;
}
.cta-banner::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,211,102,0.18), transparent 70%);
}
.cta-banner__inner {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.cta-banner__text h3 { font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:6px; }
.cta-banner__text p  { font-size:0.9rem; color:rgba(255,255,255,0.7); max-width:420px; }

/* ==============================
   FOOTER
   ============================== */
.footer { background:#fff; border-top:1px solid var(--border); padding-top:48px; }
.footer__inner { max-width:1280px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1fr 2fr; gap:48px; padding-bottom:40px; }
.footer__brand p { font-size:0.85rem; color:var(--text-muted); margin-top:8px; max-width:200px; }
.footer__links { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer__col h4 { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-muted); margin-bottom:12px; }
.footer__col a { display:block; font-size:0.86rem; color:var(--text-secondary); padding:3px 0; transition:color var(--transition); }
.footer__col a:hover { color:var(--accent); }
.footer__bottom { border-top:1px solid var(--border); padding:16px 24px; text-align:center; font-size:0.78rem; color:var(--text-muted); }

/* ==============================
   MODAL
   ============================== */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,0.45);
  backdrop-filter:blur(6px); z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.modal-overlay.active { opacity:1; pointer-events:all; }
.modal {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:32px; width:100%; max-width:460px; position:relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  transform:translateY(16px) scale(0.97); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.modal-overlay.active .modal { transform:translateY(0) scale(1); }
.modal__close {
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  background:var(--bg-base); border:1px solid var(--border); color:var(--text-muted);
  font-size:0.78rem; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
}
.modal__close:hover { border-color:var(--accent); color:var(--accent); }
.modal__title { font-size:1.3rem; font-weight:800; margin-bottom:5px; }
.modal__sub   { font-size:0.85rem; color:var(--text-secondary); margin-bottom:22px; }
.modal__form  { display:flex; flex-direction:column; gap:14px; }
.form-group   { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-size:0.78rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
.form-group input, .form-group select, .form-group textarea {
  background:#fff; border:1.5px solid var(--border);
  color:var(--text-primary); border-radius:var(--radius-sm);
  padding:10px 13px; font-size:0.88rem; width:100%; resize:vertical;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow);
}

/* ==============================
   EMPTY STATE
   ============================== */
.empty-state { grid-column:1/-1; text-align:center; padding:50px 20px; color:var(--text-muted); }
.empty-state__icon { font-size:2.5rem; margin-bottom:10px; }
.empty-state h3 { font-size:1rem; color:var(--text-secondary); margin-bottom:5px; }
.empty-state p { font-size:0.85rem; }

/* ==============================
   ANIMATIONS
   ============================== */
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.animated { animation:fadeInUp 0.45s ease both; }
.animated:nth-child(2){animation-delay:.05s}
.animated:nth-child(3){animation-delay:.1s}
.animated:nth-child(4){animation-delay:.15s}
.animated:nth-child(5){animation-delay:.2s}

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .nav    { display: none; }
  .hamburger { display: flex; }
  .page-body { padding: 0 12px; }
  .footer__inner { grid-template-columns:1fr; }
  .footer__links { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px) {
  .hero { padding: 36px 16px 32px; }
  .hero__title { font-size: 1.9rem; }
  .search-bar { flex-wrap:wrap; border-radius:var(--radius-md); }
  .search-bar__btn { width:100%; }
  .cta-banner { padding: 24px 20px; }
  .cta-banner__inner { flex-direction:column; text-align:center; }
  .groups-grid { grid-template-columns:1fr; }
  .footer__links { grid-template-columns:1fr; }
}

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }