/* ========== Componentes do Site (nav, cards, secções) + Chat ========== */

/* NAV */
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo a{color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.3px}
.nav-links{list-style:none;display:flex;gap:16px;margin:0;padding:0}
.nav-links a{color:var(--text);opacity:.85;text-decoration:none;padding:8px 10px;border-radius:10px}
.nav-links a:hover{opacity:1}
.nav-links a.active{background:var(--surface-2);opacity:1}
.burger{display:none;background:transparent;border:0;color:var(--text);font-size:20px;cursor:pointer}

.lang-switcher{display:flex;gap:6px}
.lang-switcher button{
  background:transparent;border:1px solid var(--surface-2);color:var(--text);
  padding:6px 10px;border-radius:12px;cursor:pointer
}
.lang-switcher button.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* Navegação móvel (adição) */
@media (max-width: 960px){
  .burger{display:block}
  .nav-links{
    position:absolute; right:16px; top:64px;
    background:var(--surface); border:var(--border); border-radius:14px;
    padding:8px; flex-direction:column; gap:8px; min-width:220px;
    display:none; z-index:30;
    box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
}

/* CARDS / ELEMENTOS */
.card{background:var(--surface);border:var(--border);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.card h3{margin-top:4px}
.icon-lg{font-size:24px}

/* SEÇÕES */
.features .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.audience .audience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.how-it-works .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.contact .band a{text-decoration:underline}

/* FOOTER */
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* Quick replies */
.quick-replies{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.quick-replies button{
  border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--text);
  padding:6px 10px;border-radius:12px;cursor:pointer
}
.quick-replies button:hover{border-color:var(--brand)}

/* ===== Spacing scale ===== */
:root{
  --space-1: .25rem;   /* 4px  */
  --space-2: .5rem;    /* 8px  */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --section-y: clamp(2.5rem, 4vw, 4rem);
}

/* ===== Ritmo vertical entre blocos ===== */
main > .container,
main .container{ display:block; }

main > section,
main .container > section{
  padding-block: var(--section-y);
  /* opcional: linha suave entre blocos */
  /* border-top: 1px solid color-mix(in oklab, currentColor 12%, transparent); */
}

/* Se preferires só espaçar (sem borda), usa margin-top entre sections */
main > section + section,
main .container > section + section{
  margin-top: var(--space-6);
}

/* ===== Grelhas e cards ===== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--space-4);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--space-4);
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--space-4);
}
@media (max-width: 768px){
  .grid-2{ grid-template-columns:1fr; }
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-4);
}
@media (max-width: 992px){
  .grid-3{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid-3{ grid-template-columns:1fr; }
}

/* opcional: 4 colunas utilitária */
.grid-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-4);
}
@media (max-width:1024px){ .grid-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-4{ grid-template-columns:1fr;} }

/* ULs usadas como grelha */
ul.grid-2, ul.grid-3, ul.grid-4{ display:grid; gap:var(--space-4); }

/* Cards mais “respiráveis” */
.card{
  padding:clamp(14px, 2.2vw, 22px);
  border-radius:14px;
}

/* Títulos com respiro */
section > h2,
.container > h2{ margin-bottom:var(--space-3); }
.card h3{ margin-bottom:.5rem; }

/* ===== Hero, features, bandas ===== */
.hero{ padding-block:clamp(2.5rem, 5vw, 5rem); }
.features{ margin-top:var(--space-5); }
.band{ padding-block:clamp(2rem, 4vw, 3.5rem); }

/* ===== Navegação/rodapé ===== */
.nav-bar{ gap:var(--space-2); }
.footer-content{ padding-block:var(--space-3); }

/* ===== Chat widget (espaços internos) ===== */
.chat-panel .chat-header,
.chat-panel .chat-footer,
.chat-panel .chat-transcript{ padding:.75rem 1rem; }

.chat-panel .chat-body{
  padding:.75rem 1rem;
  gap:.5rem;
}
.chat-panel .chat-messages{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

/* === Sibling spacing mais robusto === */

/* 1) Entre quaisquer <section> consecutivas */
section + section{ margin-top:var(--space-6); }

/* 2) Garantir margem antes/depois de bandas/módulos/contacto */
:where(.module, .band, .contact) {}
:where(section.module, section.band, section.contact),
:where(.module, .band, .contact) + :where(section, .module, .band, .contact){
  margin-top:var(--space-6);
}

/* 3) Fallback específico para contact+band */
section.contact.band{ margin-top:var(--space-6) !important; }

/* 4) Dentro de .container, respiro entre filhos diretos */
.container > * + *{ margin-top:var(--space-4); }

/* ===== Utilitários ===== */
.stack > * + *{ margin-top:var(--space-3); }
.stack-lg > * + *{ margin-top:var(--space-5); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }

/* ====== Como Funciona em “cards” (ADIÇÃO) ====== */
#como-funciona{ padding-block:var(--section-y, 3rem); }
#como-funciona > h2{ margin-bottom:var(--space-3, 1rem); }

.steps-cards{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--space-4, 1.5rem);
}
@media (max-width:1024px){
  .steps-cards{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .steps-cards{ grid-template-columns:1fr; }
}
.steps-cards > .card{
  position:relative;
  padding:clamp(16px, 2.4vw, 22px);
  display:grid; align-content:start; gap:.4rem;
}