/* ============================================================
   COMUNIA — Sistema de Design
   Comunidade Angolana de Inteligência Artificial
   Responsive: mobile-first, funcional em WAMP
   ============================================================ */

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

/* ── Variáveis ────────────────────────────────────────────── */
:root {
  --roxo:          #5B2D8E;
  --roxo-esc:      #3D1A6E;
  --roxo-prof:     #2D0F5C;
  --ciano:         #00B4D8;
  --ciano-cl:      #48CAE4;
  --branco:        #FFFFFF;
  --fundo:         #F5F5F7;
  --borda:         #E5E7EB;
  --cinza:         #6B7280;
  --texto:         #111827;
  --texto-md:      #374151;
  --verde:         #10B981;
  --vermelho:      #EF4444;
  --amarelo:       #F59E0B;

  --grad-hero:   linear-gradient(135deg,#2D0F5C 0%,#1a0a3e 40%,#0d1b4b 70%,#0a2a6e 100%);
  --grad-cta:    linear-gradient(135deg,#1a0a3e 0%,#2D0F5C 50%,#4B0082 100%);
  --sombra:      0 4px 16px rgba(0,0,0,.09);
  --sombra-lg:   0 8px 32px rgba(0,0,0,.14);
  --raio:        12px;
  --raio-sm:     8px;
  --trans:       .2s ease;
  --max:         1200px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; font-size:16px; }
body  { font-family:'Inter',system-ui,sans-serif; background:var(--fundo); color:var(--texto); line-height:1.6; min-height:100vh; display:flex; flex-direction:column; }
img   { max-width:100%; height:auto; display:block; }
a     { color:var(--roxo); text-decoration:none; transition:color var(--trans); }
a:hover { color:var(--ciano); }
ul    { list-style:none; }
main  { flex:1; }
input,select,textarea,button { font-family:inherit; }

/* ── Container ──────────────────────────────────────────────── */
.container { width:100%; max-width:var(--max); margin:0 auto; padding:0 1.25rem; }

/* ── Padrão de fundo (símbolo Comunia repetido) ─────────────── */
.bg-pattern {
  background-color:var(--roxo-prof);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect x='39' y='8' width='13' height='22' rx='6.5' fill='rgba(255,255,255,0.06)'/%3E%3Crect x='39' y='70' width='13' height='22' rx='6.5' fill='rgba(255,255,255,0.06)'/%3E%3Crect x='8' y='39' width='22' height='13' rx='6.5' fill='rgba(255,255,255,0.06)'/%3E%3Crect x='70' y='39' width='22' height='13' rx='6.5' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
  background-size:100px 100px;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  background:var(--branco);
  border-bottom:1px solid var(--borda);
  position:sticky; top:0; z-index:500;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.navbar-inner {
  display:flex; align-items:center; height:64px;
  gap:1rem; max-width:var(--max); margin:0 auto; padding:0 1.25rem;
}
/* Logo */
.logo { display:flex; align-items:center; gap:.5rem; flex-shrink:0; text-decoration:none; }
.logo-svg { height:34px; width:auto; }
.logo-text { font-size:1.3rem; font-weight:900; color:var(--roxo); letter-spacing:-.03em; }
.logo-text .plus { color:var(--ciano); }
/* Nav links */
.nav-links { display:flex; align-items:center; gap:.15rem; flex:1; justify-content:center; }
.nav-links a { padding:.45rem .8rem; border-radius:var(--raio-sm); font-size:.875rem; font-weight:500; color:var(--texto-md); white-space:nowrap; transition:all var(--trans); }
.nav-links a:hover,
.nav-links a.ativo { background:var(--roxo); color:var(--branco) !important; }
/* Acções */
.nav-acoes { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.nav-user { display:flex; align-items:center; gap:.4rem; padding:.35rem .8rem .35rem .4rem; border-radius:999px; border:1.5px solid var(--borda); cursor:pointer; font-size:.82rem; font-weight:600; color:var(--texto-md); transition:all var(--trans); }
.nav-user:hover { border-color:var(--roxo); color:var(--roxo); }
/* Hamburger */
.ham { display:none; background:none; border:none; cursor:pointer; padding:.4rem; flex-direction:column; gap:5px; }
.ham span { display:block; width:22px; height:2px; background:var(--texto); border-radius:2px; transition:all var(--trans); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.35rem; border-radius:var(--raio-sm); font-size:.875rem; font-weight:600; border:none; cursor:pointer; transition:all var(--trans); text-decoration:none; white-space:nowrap; line-height:1.4; }
.btn:hover { text-decoration:none; }
.btn-roxo         { background:var(--roxo);     color:var(--branco); }
.btn-roxo:hover   { background:var(--roxo-esc); color:var(--branco); box-shadow:0 4px 16px rgba(91,45,142,.35); }
.btn-ciano        { background:var(--ciano);    color:var(--branco); }
.btn-ciano:hover  { background:var(--ciano-cl); color:var(--branco); }
.btn-branco-ol    { background:transparent; color:var(--branco); border:1.5px solid rgba(255,255,255,.65); }
.btn-branco-ol:hover { background:rgba(255,255,255,.12); color:var(--branco); border-color:var(--branco); }
.btn-roxo-ol      { background:transparent; color:var(--roxo); border:1.5px solid var(--roxo); }
.btn-roxo-ol:hover{ background:var(--roxo); color:var(--branco); }
.btn-cinza        { background:var(--fundo); color:var(--texto-md); border:1px solid var(--borda); }
.btn-cinza:hover  { background:var(--borda); }
.btn-verde        { background:var(--verde); color:#fff; }
.btn-sm           { padding:.38rem .85rem; font-size:.8rem; }
.btn-lg           { padding:.75rem 1.9rem; font-size:1rem; }
.btn-bloco        { width:100%; justify-content:center; }

/* ============================================================
   FLASH ALERTS
   ============================================================ */
.flash-wrap { padding:.75rem var(--max); max-width:var(--max); margin:0 auto; }
.alerta { display:flex; align-items:center; gap:.6rem; padding:.85rem 1.2rem; border-radius:var(--raio-sm); font-size:.875rem; font-weight:500; margin:.75rem 0; cursor:pointer; }
.alerta-erro  { background:#FEF2F2; color:#991B1B; border-left:4px solid var(--vermelho); }
.alerta-ok    { background:#ECFDF5; color:#065F46; border-left:4px solid var(--verde); }
.alerta-info  { background:#EFF6FF; color:#1E40AF; border-left:4px solid #3B82F6; }

/* ============================================================
   HERO PAGES
   ============================================================ */
.hero-home {
  background:var(--grad-hero);
  color:var(--branco); padding:5rem 0 4rem;
  position:relative; overflow:hidden;
}
.hero-home::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect x='39' y='8' width='13' height='22' rx='6.5' fill='rgba(255,255,255,0.04)'/%3E%3Crect x='39' y='70' width='13' height='22' rx='6.5' fill='rgba(255,255,255,0.04)'/%3E%3Crect x='8' y='39' width='22' height='13' rx='6.5' fill='rgba(255,255,255,0.04)'/%3E%3Crect x='70' y='39' width='22' height='13' rx='6.5' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E"); background-size:100px 100px; pointer-events:none; }
.hero-home .container { position:relative; z-index:1; }
.hero-home h1 { font-size:clamp(2rem,5vw,3.5rem); font-weight:900; letter-spacing:-.03em; line-height:1.15; margin-bottom:1.15rem; max-width:640px; }
.hero-home p  { font-size:1.05rem; opacity:.82; max-width:500px; margin-bottom:2rem; line-height:1.7; }
.hero-home .acoes { display:flex; gap:.75rem; flex-wrap:wrap; }

.hero-interior {
  background:var(--grad-hero); color:var(--branco);
  padding:5rem 1.25rem; text-align:center;
  position:relative; overflow:hidden;
}
.hero-interior::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect x='39' y='8' width='13' height='22' rx='6.5' fill='rgba(255,255,255,0.05)'/%3E%3Crect x='39' y='70' width='13' height='22' rx='6.5' fill='rgba(255,255,255,0.05)'/%3E%3Crect x='8' y='39' width='22' height='13' rx='6.5' fill='rgba(255,255,255,0.05)'/%3E%3Crect x='70' y='39' width='22' height='13' rx='6.5' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E"); background-size:100px 100px; pointer-events:none; }
.hero-interior > * { position:relative; z-index:1; }
.hero-interior .eyebrow { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ciano); margin-bottom:.75rem; }
.hero-interior h1 { font-size:clamp(1.9rem,5vw,3.2rem); font-weight:900; letter-spacing:-.03em; line-height:1.15; margin-bottom:.9rem; }
.hero-interior p  { font-size:1rem; opacity:.8; max-width:520px; margin:0 auto 1.75rem; }

/* ============================================================
   SECÇÕES
   ============================================================ */
.secao       { padding:4rem 0; }
.secao-branca{ background:var(--branco); padding:4rem 0; }
.secao-titulo{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.4rem; }
.secao-sub   { color:var(--cinza); font-size:.925rem; margin-bottom:0; }

/* ============================================================
   CARDS
   ============================================================ */
.card { background:var(--branco); border-radius:var(--raio); border:1px solid var(--borda); overflow:hidden; transition:transform var(--trans),box-shadow var(--trans); width:400px; }
.card:hover { transform:translateY(-4px); box-shadow:var(--sombra-lg); }
.card-img-wrap { position:relative; overflow:hidden; }
.card-img-wrap img { width:100%; height:200px; object-fit:cover; transition:transform .35s ease; }
.card:hover .card-img-wrap img { transform:scale(1.04); }
.card-body  { padding:1.25rem; }
.card-foot  { padding:.9rem 1.25rem; border-top:1px solid var(--borda); display:flex; gap:.5rem; align-items:center; justify-content:space-between; }
.card-titulo { font-size:.975rem; font-weight:700; margin-bottom:.3rem; color:var(--texto); line-height:1.4; }
.card-sub    { font-size:.8rem; color:var(--cinza); margin-bottom:.6rem; display:flex; align-items:center; gap:.3rem; }
.card-desc   { font-size:.845rem; color:var(--texto-md); line-height:1.55; margin-bottom:.7rem; }
.card-meta   { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:.6rem; }
.card-meta-item { display:flex; align-items:center; gap:.3rem; font-size:.78rem; color:var(--cinza); }
.card-meta-item svg { color:var(--roxo); flex-shrink:0; }

/* ============================================================
   BADGES
   ============================================================ */
.badge-card { position:absolute; top:.7rem; left:.7rem; padding:.22rem .65rem; border-radius:999px; font-size:.68rem; font-weight:700; z-index:2; }
.bg-gratuito    { background:#10B981; color:#fff; }
.bg-pago        { background:var(--roxo); color:#fff; }
.bg-conferencia { background:#7C3AED; color:#fff; }
.bg-workshop    { background:#059669; color:#fff; }
.bg-palestra    { background:#2563EB; color:#fff; }
.bg-bootcamp    { background:#D97706; color:#fff; }
.bg-webinar     { background:#DB2777; color:#fff; }
.bg-outro       { background:var(--cinza); color:#fff; }
.bg-codigo      { background:#2563EB; color:#fff; }
.bg-artigo      { background:#7C3AED; color:#fff; }
.bg-produto     { background:#D97706; color:#fff; }
.bg-stock-ok    { background:#D1FAE5; color:#065F46; }
.bg-stock-fim   { background:#FEF3C7; color:#92400E; }

.badge { display:inline-flex; align-items:center; padding:.22rem .7rem; border-radius:999px; font-size:.73rem; font-weight:600; }
.badge-roxo  { background:#EDE9FE; color:var(--roxo); }
.badge-ciano { background:#E0F7FA; color:#0077A8; }
.badge-verde { background:#D1FAE5; color:#065F46; }
.badge-cinza { background:var(--fundo); color:var(--cinza); border:1px solid var(--borda); }
.badge-vermelho { background:#FEE2E2; color:#991B1B; }

.tag { display:inline-block; padding:.18rem .55rem; border-radius:6px; font-size:.72rem; font-weight:500; background:var(--fundo); border:1px solid var(--borda); color:var(--texto-md); }

/* ============================================================
   TABS / FILTROS
   ============================================================ */
.tabs { display:flex; gap:.35rem; flex-wrap:wrap; padding-top:1.5rem; }
.tab  { padding:.42rem 1.05rem; border-radius:var(--raio-sm); font-size:.858rem; font-weight:500; border:1px solid var(--borda); background:var(--branco); color:var(--cinza); cursor:pointer; transition:all var(--trans); text-decoration:none; }
.tab:hover,
.tab.ativo { background:var(--roxo); color:var(--branco); border-color:var(--roxo); }

/* ============================================================
   GRIDS
   ============================================================ */
.grade-1 { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.grade-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grade-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grade-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.form-grupo  { margin-bottom:1.2rem; }
.form-label  { display:block; font-size:.858rem; font-weight:600; color:var(--texto-md); margin-bottom:.45rem; }
.form-ctrl   { width:100%; padding:.62rem 1rem; border:1.5px solid var(--borda); border-radius:var(--raio-sm); font-size:.9rem; color:var(--texto); background:var(--fundo); transition:border-color var(--trans),background var(--trans); outline:none; }
.form-ctrl:focus   { border-color:var(--roxo); background:var(--branco); }
.form-ctrl::placeholder { color:#9CA3AF; }
textarea.form-ctrl { resize:vertical; min-height:90px; }
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-3col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
.form-hint { font-size:.76rem; color:var(--cinza); margin-top:.3rem; }

/* Barra de pesquisa hero */
.hero-search { display:flex; gap:.5rem; max-width:580px; margin:0 auto; }
.hero-search input { flex:1; padding:.82rem 1.2rem; border:2px solid rgba(255,255,255,.18); border-radius:var(--raio-sm); background:rgba(255,255,255,.12); color:var(--branco); font-size:.925rem; backdrop-filter:blur(8px); outline:none; transition:border-color var(--trans); }
.hero-search input::placeholder { color:rgba(255,255,255,.5); }
.hero-search input:focus { border-color:rgba(255,255,255,.55); }

/* ============================================================
   PÁGINA DE DETALHE (Cursos / Eventos)
   ============================================================ */
.detalhe-layout { display:grid; grid-template-columns:1fr 340px; gap:2rem; align-items:start; padding:2.5rem 0 4rem; }
.detalhe-titulo { font-size:1.7rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.5rem; }
.detalhe-org    { display:flex; align-items:center; gap:.4rem; color:var(--cinza); font-size:.875rem; margin-bottom:1.5rem; }
.detalhe-bloco  { background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); padding:1.5rem; margin-bottom:1.2rem; }
.detalhe-bloco h3  { font-size:.975rem; font-weight:700; margin-bottom:.7rem; }
.detalhe-bloco p   { font-size:.875rem; color:var(--texto-md); line-height:1.7; }
.detalhe-bloco ul  { padding-left:0; }
.detalhe-bloco ul li { display:flex; align-items:flex-start; gap:.5rem; font-size:.875rem; color:var(--texto-md); padding:.3rem 0; }
.detalhe-bloco ul li::before { content:'✓'; color:var(--roxo); font-weight:700; flex-shrink:0; }
/* Agenda */
.agenda-linha { display:grid; grid-template-columns:130px 1fr; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--borda); font-size:.855rem; }
.agenda-linha:last-child { border-bottom:none; }
.agenda-hora  { color:var(--cinza); font-weight:600; }
/* Sidebar info */
.sidebar-info { background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); padding:1.4rem; position:sticky; top:80px; }
.info-row { padding:.55rem 0; border-bottom:1px solid var(--borda); }
.info-row:last-of-type { border-bottom:none; }
.info-label { font-size:.68rem; font-weight:700; color:var(--cinza); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.18rem; }
.info-valor { font-size:.925rem; font-weight:700; color:var(--texto); display:flex; align-items:center; gap:.35rem; }
.preco-grande { font-size:1.5rem; font-weight:900; color:var(--roxo); }
.preco-gratis { color:var(--verde) !important; }

/* ============================================================
   CARTÃO DIGITAL DO MEMBRO
   ============================================================ */
.cartao-membro {
  background:linear-gradient(135deg,#5B2D8E 0%,#3D1A6E 50%,#1a0a3e 100%);
  color:var(--branco); border-radius:16px; padding:2rem;
  max-width:440px; position:relative; overflow:hidden;
  box-shadow:0 12px 40px rgba(91,45,142,.4);
  border:1px solid rgba(255,255,255,.1);
}
.cartao-membro::after { content:''; position:absolute; top:-70px; right:-70px; width:220px; height:220px; background:radial-gradient(circle,rgba(0,180,216,.22) 0%,transparent 70%); pointer-events:none; }
.cm-numero   { font-size:.68rem; letter-spacing:.15em; opacity:.58; text-transform:uppercase; }
.cm-nome     { font-size:1.25rem; font-weight:800; margin:.45rem 0 .2rem; }
.cm-categoria{ font-size:.82rem; opacity:.72; }
.cm-habs     { font-size:.78rem; opacity:.65; margin-top:.9rem; }
.cm-validade { font-size:.7rem; opacity:.52; margin-top:.75rem; }
.cm-expirado { color:#FF453A; font-weight:700; }

/* ============================================================
   MEMBROS — CARDS
   ============================================================ */
.membro-card { background:var(--branco); border-radius:var(--raio); border:1px solid var(--borda); overflow:hidden; transition:transform var(--trans),box-shadow var(--trans); }
.membro-card:hover { transform:translateY(-4px); box-shadow:var(--sombra-lg); }
.membro-cover { height:90px; background:linear-gradient(135deg,var(--roxo),var(--ciano)); position:relative; overflow:hidden; }
.membro-cover img { width:100%; height:100%; object-fit:cover; opacity:.5; }
.membro-tipo-badge { position:absolute; top:.55rem; left:.55rem; padding:.18rem .55rem; border-radius:999px; font-size:.68rem; font-weight:700; background:rgba(0,0,0,.38); color:#fff; backdrop-filter:blur(4px); }
.membro-qr-icon { position:absolute; top:.55rem; right:.55rem; background:rgba(0,0,0,.38); border-radius:6px; padding:.28rem; backdrop-filter:blur(4px); }
.membro-body { padding:1rem; }
.membro-avatar { width:50px; height:50px; border-radius:50%; border:3px solid var(--branco); background:var(--fundo); display:flex; align-items:center; justify-content:center; overflow:hidden; margin-top:-28px; margin-bottom:.55rem; }
.membro-avatar img { width:100%; height:100%; object-fit:cover; }
.membro-nome   { font-weight:700; font-size:.925rem; margin-bottom:.15rem; }
.membro-sub    { font-size:.78rem; color:var(--cinza); margin-bottom:.55rem; }
.membro-numero { font-size:.7rem; color:var(--cinza); margin-top:.55rem; }
.membro-links  { display:flex; gap:.55rem; margin-top:.65rem; }
.membro-links a { color:var(--cinza); transition:color var(--trans); }
.membro-links a:hover { color:var(--roxo); }

/* ============================================================
   VAGAS
   ============================================================ */
.vaga-card { background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); padding:1.4rem; transition:box-shadow var(--trans); }
.vaga-card:hover { box-shadow:var(--sombra); }
.vaga-empresa { display:flex; align-items:center; gap:.55rem; margin-bottom:.65rem; }
.vaga-empresa-logo { width:38px; height:38px; border-radius:8px; background:var(--fundo); border:1px solid var(--borda); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.vaga-empresa-logo img { width:100%; height:100%; object-fit:contain; }
.vaga-titulo { font-size:1.02rem; font-weight:700; margin-bottom:.5rem; }
.vaga-tags   { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.85rem; }

/* ============================================================
   LOJA
   ============================================================ */
.loja-layout { display:grid; grid-template-columns:1fr 270px; gap:2rem; align-items:start; }
.produto-variantes { display:flex; gap:.35rem; flex-wrap:wrap; margin:.4rem 0; }
.variante-btn { padding:.22rem .6rem; border-radius:6px; border:1.5px solid var(--borda); font-size:.75rem; font-weight:600; cursor:pointer; background:none; transition:all var(--trans); }
.variante-btn:hover,.variante-btn.sel { border-color:var(--roxo); color:var(--roxo); }
.qty-ctrl  { display:flex; align-items:center; gap:.45rem; }
.qty-btn   { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--borda); background:none; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--trans); }
.qty-btn:hover { border-color:var(--roxo); color:var(--roxo); }
.qty-n     { font-weight:700; font-size:.9rem; min-width:22px; text-align:center; }
.carrinho-float { margin-left: -12rem; width: 300px; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); padding:1.25rem; position:sticky; top:80px; }
.carrinho-total { font-size:1.35rem; font-weight:900; color:var(--roxo); }

/* ============================================================
   ESTATÍSTICAS
   ============================================================ */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; }
.stat-box  { background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); padding:1.25rem; text-align:center; }
.stat-valor{ font-size:2rem; font-weight:900; color:var(--roxo); line-height:1; }
.stat-label{ font-size:.78rem; color:var(--cinza); margin-top:.3rem; }

/* ============================================================
   CTA COMUNIDADE
   ============================================================ */
.cta-comunidade { background:var(--grad-cta); color:var(--branco); text-align:center; padding:5rem 1.25rem; position:relative; overflow:hidden; }
.cta-comunidade::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect x='39' y='8' width='13' height='22' rx='6.5' fill='rgba(255,255,255,0.04)'/%3E%3Crect x='39' y='70' width='13' height='22' rx='6.5' fill='rgba(255,255,255,0.04)'/%3E%3Crect x='8' y='39' width='22' height='13' rx='6.5' fill='rgba(255,255,255,0.04)'/%3E%3Crect x='70' y='39' width='22' height='13' rx='6.5' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E"); background-size:100px 100px; pointer-events:none; }
.cta-comunidade > * { position:relative; z-index:1; }
.cta-comunidade h2 { font-size:clamp(1.7rem,4vw,2.4rem); font-weight:900; letter-spacing:-.02em; margin-bottom:.7rem; }
.cta-comunidade p  { opacity:.8; max-width:440px; margin:0 auto 2rem; font-size:.92rem; }
.cta-acoes { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--branco); border-top:1px solid var(--borda); padding:3rem 0 1.5rem; margin-top:auto; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:2.5rem; }
.footer-marca p { font-size:.82rem; color:var(--cinza); margin-top:.65rem; line-height:1.65; max-width:230px; }
.footer h4  { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--texto); margin-bottom:.85rem; }
.footer ul li { margin-bottom:.45rem; }
.footer a   { font-size:.82rem; color:var(--cinza); }
.footer a:hover { color:var(--roxo); }
.footer-contacto li { display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--cinza); margin-bottom:.4rem; }
.footer-contacto svg { color:var(--roxo); flex-shrink:0; }
.footer-bottom { border-top:1px solid var(--borda); padding-top:1.2rem; text-align:center; font-size:.78rem; color:var(--cinza); }

/* ============================================================
   PAGINAÇÃO
   ============================================================ */
.paginacao { display:flex; justify-content:center; margin-top:2.5rem; }
.paginacao ul { display:flex; gap:.35rem; flex-wrap:wrap; }
.paginacao li a { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--raio-sm); border:1px solid var(--borda); font-size:.82rem; font-weight:500; color:var(--cinza); background:var(--branco); transition:all var(--trans); }
.paginacao li a:hover { border-color:var(--roxo); color:var(--roxo); }
.paginacao li.ativo a { background:var(--roxo); border-color:var(--roxo); color:var(--branco); }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page { min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:3rem 1rem 4rem; position:relative; overflow:hidden; }
.auth-box  { background:var(--branco); border-radius:16px; padding:2.5rem; width:100%; max-width:660px; box-shadow:var(--sombra-lg); position:relative; z-index:1; }
.auth-box h2  { font-size:1.55rem; font-weight:800; text-align:center; margin-bottom:.3rem; }
.auth-box .sub{ text-align:center; color:var(--cinza); font-size:.858rem; margin-bottom:1.75rem; }
.tipo-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; margin-bottom:1.75rem; }
.tipo-btn { display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.85rem .4rem; border-radius:var(--raio-sm); border:1.5px solid var(--borda); background:var(--fundo); cursor:pointer; font-size:.72rem; font-weight:600; color:var(--cinza); text-align:center; transition:all var(--trans); }
.tipo-btn:hover,.tipo-btn.sel { border-color:var(--roxo); color:var(--roxo); background:#EDE9FE; }
.form-panel { display:none; }
.form-panel.activo { display:block; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .detalhe-layout { grid-template-columns:1fr 300px; }
  .grade-4 { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .ham { display:flex; }
  .nav-links {
    display:none; position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--branco); flex-direction:column; justify-content:flex-start;
    padding:1.5rem 1.25rem; gap:.2rem; z-index:490; overflow-y:auto;
    box-shadow:0 8px 32px rgba(0,0,0,.15);
  }
  .nav-links.aberto { display:flex; }
  .nav-links a { width:100%; padding:.75rem 1rem; font-size:1rem; }
  .grade-3 { grid-template-columns:repeat(2,1fr); }
  .grade-4 { grid-template-columns:repeat(2,1fr); }
  .detalhe-layout { grid-template-columns:1fr; }
  .loja-layout    { grid-template-columns:1fr; }
  .footer-grid    { grid-template-columns:1fr 1fr; gap:2rem; }
  .form-2col,.form-3col { grid-template-columns:1fr; }
  .hero-home h1   { font-size:2rem; }
  .nav-acoes .btn-sm:first-child { display:none; }
}

@media (max-width:520px) {
  .grade-2,.grade-3,.grade-4 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .hero-interior h1 { font-size:1.75rem; }
  .tipo-selector { grid-template-columns:1fr 1fr 1fr; }
  .hero-search { flex-direction:column; }
}