/* ========== Base / Tokens / Layout Global (escuro estável) ========== */
:root{
  --bg:#0f1020; --bg-2:#151634;
  --surface:#1b1d3a; --surface-2:#24264d;
  --text:#e8e9ff; --muted:#a6a8c9;

  --brand:#7a7fff; --brand-2:#5b60ff;

  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;

  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,.06);

  --font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;
  --h1:clamp(28px,4vw,40px);
  --h2:clamp(22px,3vw,28px);
  --h3:clamp(18px,2.4vw,22px);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:var(--font); color:var(--text);
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* A11y */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:10px;top:10px;width:auto;height:auto;padding:8px 12px;
  background:var(--brand);color:#fff;border-radius:10px;z-index:1001;
}

/* Contenção */
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Tipo */
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3)}
p{margin:.6em 0}
small,.small{font-size:.875em}
.muted,.text-muted{color:var(--muted)}

/* Utils */
.band{
  background:linear-gradient(180deg,var(--surface) 0,var(--surface-2) 100%);
  padding:24px;border-radius:var(--radius);box-shadow:var(--shadow);border:var(--border);
}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:.5rem}.mb-1{margin-bottom:.5rem}
.mt-2{margin-top:1rem}.mb-2{margin-bottom:1rem}
.mt-3{margin-top:1.5rem}.mb-3{margin-bottom:1.5rem}

/* Secções */
.hero{padding:36px 0}
.section{padding:28px 0}

/* Grelhas */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* Links/Botões */
a{color:inherit}
.btn,.btn-primary{
  display:inline-flex;align-items:center;gap:.6rem;
  background:linear-gradient(180deg,var(--brand) 0,var(--brand-2) 100%);
  color:#fff;border:none;border-radius:14px;padding:12px 18px;text-decoration:none;font-weight:600;box-shadow:var(--shadow);
  transition:transform .15s ease;
}
.btn:hover,.btn-primary:hover{transform:translateY(-1px)}

/* Rodapé */
.footer-content{padding:22px 0;border-top:var(--border)}

/* === MÓDULOS (ritmo vertical uniforme) =========================== */
:root{
  --module-y: 56px;   /* padding interno vertical por módulo */
  --module-gap: 32px; /* espaço entre módulos */
}
main > section{ padding-block: var(--module-y); }
main > section + section{ margin-block-start: var(--module-gap); }
main > section.band{ padding-block: calc(var(--module-y) + 8px); }
/* respiro extra antes do footer */
main{ padding-bottom: var(--module-gap); }
main > section:last-of-type{ padding-bottom: calc(var(--module-y) + var(--module-gap)); }

/* === Ajuste do logo === */
.logo img {
  height: 80px;   /* altera o tamanho aqui */
  max-width: 100%;
  display: block;
}

/* ========== 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;
}

/* ========== CORREÇÃO NUCLEAR - RESPONSIVIDADE MOBILE ========== */

/* Tablets (920px ou menos) */
@media (max-width: 920px) {
  .cards,
  .features .cards,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile (640px ou menos) - CORREÇÃO DEFINITIVA */
@media (max-width: 640px) {
  /* DESATIVAR COMPLETAMENTE GRIDS EM MOBILE */
  .cards,
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .features .cards,
  .audience .audience-grid,
  .how-it-works .steps,
  .steps-cards,
  [class*="grid"],
  [style*="grid-template-columns"] {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  
  /* FORÇAR TODOS OS CARDS A 100% LARGURA E EMPILHADOS */
  .card {
    width: 100% !important;
    display: block !important;
    margin-bottom: 1rem !important;
    float: none !important;
    clear: both !important;
  }
  
  /* REMOVER GAPS DE GRID E GARANTIR ESPAÇAMENTO VERTICAL */
  .cards,
  .grid,
  [class*="grid"],
  .container > div,
  section > div {
    gap: 0 !important;
    display: block !important;
  }
  
  /* CORREÇÕES ESPECÍFICAS PARA AS SEÇÕES PROBLEMÁTICAS */
  #como-funciona .cards,
  .features .cards,
  #modelo-custos > div,
  .container > div:not(.nav-bar):not(.footer-content):not(.logo) {
    display: block !important;
  }
  
  /* GARANTIR QUE OS CARDS DENTRO DESSAS SEÇÕES FICAM EMPILHADOS */
  #como-funciona .card,
  .features .card,
  #modelo-custos .card,
  .container .card {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* AJUSTES DE TEXTO PARA MOBILE */
  .hero h1 {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .hero p {
    font-size: 1.1rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* Mobile muito pequeno (480px ou menos) */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.75rem !important;
  }
  
  .hero p {
    font-size: 1rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  .card {
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .container {
    padding: 0 16px !important;
  }
}