/* =====================================================================
   FIVPRO — landing
   ---------------------------------------------------------------------
   Sem framework e sem build de propósito: a página tem que abrir rápido
   em conexão de fazenda e continuar funcionando daqui a dois anos sem
   ninguém ter atualizado dependência nenhuma.

   A cor sai da logo: o azul do wordmark. Fora dele, cinza — cor aqui
   serve para dizer "clique" ou "isto é urgente", nunca para enfeitar.
   ===================================================================== */

:root {
  --azul: #1b66d2;
  --azul-escuro: #1550a8;
  --azul-fraco: #e8f0fd;

  --tinta: #12161c;
  --tinta-media: #4a5360;
  --tinta-fraca: #6b7480;

  --fundo: #ffffff;
  --fundo-alt: #f6f8fb;
  --borda: #e2e7ee;

  --critico: #c8371f;
  --critico-fundo: #fdecea;
  --atencao: #9a6100;
  --atencao-fundo: #fdf4e3;

  --raio: 14px;
  --gutter: 20px;
  --max: 1080px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --azul: #5b9bff;
    --azul-escuro: #7cb0ff;
    --azul-fraco: #16243a;

    --tinta: #eef2f7;
    --tinta-media: #aeb8c6;
    --tinta-fraca: #8b95a3;

    --fundo: #0e1319;
    --fundo-alt: #141b24;
    --borda: #26303c;

    --critico: #ff8a73;
    --critico-fundo: #2c1713;
    --atencao: #e8b45c;
    --atencao-fundo: #2a2113;
  }
}

:root[data-theme="dark"] {
  --azul: #5b9bff;
  --azul-escuro: #7cb0ff;
  --azul-fraco: #16243a;
  --tinta: #eef2f7;
  --tinta-media: #aeb8c6;
  --tinta-fraca: #8b95a3;
  --fundo: #0e1319;
  --fundo-alt: #141b24;
  --borda: #26303c;
  --critico: #ff8a73;
  --critico-fundo: #2c1713;
  --atencao: #e8b45c;
  --atencao-fundo: #2a2113;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--azul); }
a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 6px;
}

.pular {
  position: absolute;
  left: -9999px;
}
.pular:focus {
  left: var(--gutter);
  top: 12px;
  z-index: 10;
  background: var(--fundo);
  padding: 10px 16px;
  border: 2px solid var(--azul);
  border-radius: 8px;
}

/* ── Topo ─────────────────────────────────────────────────────────── */

.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}

.faixa {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

.marca { display: flex; line-height: 0; }
.marca img { width: 118px; }

.menu {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 15px;
}
.menu a {
  color: var(--tinta-media);
  text-decoration: none;
}
.menu a:hover { color: var(--tinta); }

/* As duas acoes do topo, lado a lado.
   Gap proprio, menor que o da faixa: elas sao um par, e o espaco entre elas
   nao pode ser igual ao que as separa do menu. */
.acoes-topo {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Botões ───────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  border: 1.5px solid transparent;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, background-color .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-solido {
  background: var(--azul);
  color: #fff;
}
.btn-solido:hover { background: var(--azul-escuro); }

:root[data-theme="dark"] .btn-solido,
.btn-solido { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-solido { color: #0b1220; }
}

/* Mesmo botao do WhatsApp, ao contrario: borda e texto azuis sobre o fundo
   da pagina. Peso visual menor que o solido — quem chega pela primeira vez
   esta atras de conversar, nao de logar —, mas ainda lido como botao. */
.btn-invertido {
  background: var(--fundo);
  border-color: var(--azul);
  color: var(--azul);
}
.btn-invertido:hover { background: var(--azul-fraco); }

.btn-vazado {
  border-color: var(--borda);
  color: var(--tinta);
}
.btn-vazado:hover { border-color: var(--azul); color: var(--azul); }

.btn-grande { padding: 16px 32px; font-size: 17px; }
.btn-topo { font-size: 15px; padding: 10px 18px; }

/* ── Herói ────────────────────────────────────────────────────────── */

.heroi {
  max-width: var(--max);
  margin: 0 auto;
  padding: 88px var(--gutter) 72px;
  text-align: center;
}

.sobrancelha {
  display: inline-block;
  background: var(--azul-fraco);
  color: var(--azul);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.heroi h1 {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 800;
  margin-bottom: 22px;
}

.linha-fina {
  max-width: 620px;
  margin: 0 auto;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--tinta-media);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}
.acoes-centro { margin-top: 30px; }

/* ── Seções ───────────────────────────────────────────────────────── */

.secao {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px var(--gutter);
  border-top: 1px solid var(--borda);
}

.secao h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  font-weight: 750;
  margin-bottom: 14px;
}

.subtitulo {
  max-width: 660px;
  color: var(--tinta-media);
  font-size: 1.05rem;
}

/* ── Cartões do problema ──────────────────────────────────────────── */

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
  margin-top: 38px;
}

.cartao {
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 26px 24px;
}
.cartao h3 {
  font-size: 1.12rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.cartao p {
  color: var(--tinta-media);
  font-size: 0.98rem;
}

/* ── Painel ilustrado ─────────────────────────────────────────────── */

.secao-painel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 820px) {
  .secao-painel { grid-template-columns: 1fr; gap: 34px; }
}

.painel {
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: 0 18px 40px -28px rgba(10, 20, 40, .45);
}

.painel-barra {
  display: flex;
  gap: 6px;
  padding: 2px 4px 14px;
}
.painel-barra span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--borda);
}

.alertas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.alerta {
  border-radius: 10px;
  padding: 13px 15px;
  border-left: 4px solid transparent;
}
.alerta-topo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
  margin-bottom: 3px;
}
.alerta-topo span { color: var(--tinta-media); font-variant-numeric: tabular-nums; }
.alerta p { font-size: 0.92rem; color: var(--tinta-media); }

.alerta-critico {
  background: var(--critico-fundo);
  border-left-color: var(--critico);
}
.alerta-critico strong { color: var(--critico); }

.alerta-atencao {
  background: var(--atencao-fundo);
  border-left-color: var(--atencao);
}
.alerta-atencao strong { color: var(--atencao); }

.painel-nota {
  text-align: center;
  font-size: 0.78rem;
  color: var(--tinta-fraca);
  padding-top: 14px;
}

/* ── Grade de recursos ────────────────────────────────────────────── */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 34px 40px;
  margin-top: 40px;
}

.item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 9px;
  padding-left: 14px;
  border-left: 3px solid var(--azul);
}
.item p {
  color: var(--tinta-media);
  font-size: 0.98rem;
  padding-left: 17px;
}

/* ── Trilha da agenda ─────────────────────────────────────────────── */

.trilha {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  counter-reset: etapa;
}

.trilha li {
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
}

.dia {
  display: block;
  color: var(--azul);
  font-weight: 800;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.etapa {
  display: block;
  color: var(--tinta-media);
  font-size: 0.88rem;
  margin-top: 4px;
}

/* ── Fecho ────────────────────────────────────────────────────────── */

.secao-final { text-align: center; }
.secao-final .subtitulo { margin: 0 auto; }

.rodape {
  border-top: 1px solid var(--borda);
  padding: 40px var(--gutter);
  text-align: center;
  color: var(--tinta-fraca);
  font-size: 0.88rem;
}
.rodape img { width: 92px; opacity: .55; margin-bottom: 12px; }
.rodape-entrar { margin-top: 10px; }

@media (max-width: 640px) {
  .menu { display: none; }

  /* No celular so cabe uma acao no topo, e ela e o LOGIN: o WhatsApp esta
     logo abaixo, na primeira tela do heroi, e repetido no fim da pagina.
     O caminho para o sistema nao esta em nenhum outro lugar. */
  .acoes-topo { margin-left: auto; }
  .btn-solido.btn-topo { display: none; }
  .heroi { padding-top: 56px; padding-bottom: 52px; }
  .secao { padding: 54px var(--gutter); }
}