/* Layout: "central de operações" — faixas largas de navy, texto em coluna de leitura,
   telas reais do produto como prova; turquesa do app como única cor de destaque. */
:root {
  /* Cores (escuro por padrão: é o mesmo mundo visual do app) */
  --bg: #0a0f1e;
  --bg-alt: #0d1426;
  --superficie: #131b31;
  --superficie-2: #0f1628;
  --linha: #222d49;
  --texto: #eaf0ff;
  --texto-2: #a3aecb;
  --texto-3: #6f7b99;
  --destaque: #40dbd5;
  --destaque-tinta: #04201f;
  --sinal: #ff9a52;

  /* Etapas do atendimento (as mesmas do app) */
  --recebida: #a78bfa;
  --verificacao: #60a5fa;
  --respondida: #40dbd5;
  --resolvida: #34d399;

  /* Gravidade */
  --critica: #e5484d;
  --alta: #f0883e;
  --media: #f5b83d;
  --baixa: #3dbe6b;

  /* Tipografia */
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --raio: 14px;
  --sombra: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}



/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); line-height: 1.02; font-weight: 800; font-stretch: 112%; }
h1 em { font-style: normal; color: var(--destaque); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); line-height: 1.08; font-weight: 800; font-stretch: 110%; max-width: 22ch; }
h3 { font-size: 1.15rem; line-height: 1.25; font-weight: 700; font-stretch: 105%; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; border-radius: 6px; }

.pular { position: absolute; left: -999px; top: 8px; background: var(--destaque); color: var(--destaque-tinta); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.pular:focus { left: 16px; }

/* Faixa: largura máxima + respiro lateral (inclui área segura do celular) */
.faixa {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--destaque);
  color: var(--destaque-tinta);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--destaque);
  transition: transform 0.15s ease, background 0.15s ease;
}
.botao:hover { transform: translateY(-1px); }
.botao-linha { background: transparent; color: var(--texto); border-color: var(--linha); }
.botao-linha:hover { border-color: var(--texto-3); }
.botao-pequeno { min-height: 40px; padding: 0 16px; font-size: 0.92rem; }

/* ---------- Navegação ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--linha) 70%, transparent);
  padding-top: env(safe-area-inset-top, 0px);
}
.topo-in {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1180px;
  margin-inline: auto;
  padding-block: 12px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-icone { width: 34px; height: 34px; color: var(--destaque); display: grid; place-items: center; }
.marca-icone svg { width: 30px; height: 30px; }
.marca-texto { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 1.08rem; white-space: nowrap; }
.marca-grupo { font-family: var(--f-mono); font-size: 0.72rem; color: var(--texto-3); letter-spacing: 0.06em; text-transform: uppercase; padding-top: 2px; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { text-decoration: none; color: var(--texto-2); font-size: 0.95rem; font-weight: 500; }
.menu a:hover { color: var(--texto); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: 64px 40px; }
.radar { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.55; }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.hero-texto { display: grid; gap: 24px; min-width: 0; }
.indicativo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--destaque);
}
.ponto-vivo { width: 9px; height: 9px; border-radius: 50%; background: var(--sinal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sinal) 60%, transparent); animation: pulso 2.2s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sinal) 55%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.lead { font-size: 1.15rem; color: var(--texto-2); max-width: 56ch; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.selos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.selos li { font-size: 0.9rem; color: var(--texto-2); display: flex; align-items: center; gap: 8px; }
.selos li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--destaque); }

/* Celular */
.hero-visual { position: relative; display: flex; justify-content: center; min-width: 0; }
.celular {
  width: min(320px, 100%);
  border-radius: 42px;
  padding: 10px;
  background: linear-gradient(160deg, #2a3350, #0c1222);
  box-shadow: var(--sombra), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.celular-tela {
  border-radius: 33px;
  background: #0b1020;
  color: #eaf0ff;
  padding: 14px 16px 18px;
  display: grid;
  gap: 12px;
  font-size: 0.82rem;
}
.app-barra { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.75rem; color: #c9d3ff; padding: 2px 8px; }
.app-icones { letter-spacing: -1px; }
.app-titulo { font-family: var(--f-display); font-weight: 800; font-size: 1rem; text-align: center; }
.app-situacao { display: grid; gap: 2px; padding: 12px; border-radius: 16px; border: 1px solid rgba(64, 219, 213, 0.35); background: rgba(64, 219, 213, 0.08); }
.app-situacao strong { color: #40dbd5; font-family: var(--f-display); font-size: 1.05rem; }
.app-situacao span:last-child { color: #aab4c8; }
.app-rotulo { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: #8d90a1; }
.app-etapas { list-style: none; margin: 0; padding: 12px; border-radius: 16px; background: #171d2e; display: grid; gap: 10px; }
.app-etapas li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; color: #6f7b99; }
.app-etapas li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #30364b; }
.app-etapas li.feito { color: #eaf0ff; }
.app-etapas li.feito::before { background: #34d399; border-color: #34d399; }
.app-etapas li.atual { color: #eaf0ff; }
.app-etapas li.atual::before { border-color: #40dbd5; box-shadow: 0 0 0 3px rgba(64, 219, 213, 0.18); }
.app-etapas span { font-size: 0.72rem; color: #8d90a1; }
.app-resposta { padding: 12px; border-radius: 14px; background: #0f1728; border-left: 3px solid #40dbd5; display: grid; gap: 6px; }
.app-autor { color: #40dbd5; font-weight: 700; font-size: 0.72rem; }
.app-resposta p { color: #eaf0ff; line-height: 1.45; }

.cartao-flutuante {
  position: absolute;
  /* fica quase todo fora do celular, só encostando na moldura */
  left: max(-24px, calc(50% - 305px));
  top: -26px;
  display: grid;
  gap: 2px;
  width: 170px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}
.cf-rotulo { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--texto-3); text-transform: uppercase; }
.cf-numero { font-family: var(--f-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--critica); }
.cf-texto { color: var(--texto-2); font-size: 0.85rem; }
.cf-barra { height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; margin-top: 6px; }
.cf-barra i { display: block; height: 100%; background: var(--critica); border-radius: 3px; }

/* Registro (central de rádio) */
.registro {
  margin-top: 48px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie-2);
  font-family: var(--f-mono);
  font-size: 0.82rem;
  overflow: hidden;
}
.registro-linha {
  display: grid;
  grid-template-columns: 110px 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--linha);
  color: var(--texto-2);
}
.registro-linha:last-child { border-bottom: 0; }
.registro-linha time { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.tag { justify-self: start; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 6px; border: 1px solid; }
.tag-recebida { color: var(--recebida); border-color: color-mix(in srgb, var(--recebida) 45%, transparent); }
.tag-verificacao { color: var(--verificacao); border-color: color-mix(in srgb, var(--verificacao) 45%, transparent); }
.tag-respondida { color: var(--respondida); border-color: color-mix(in srgb, var(--respondida) 45%, transparent); }
.tag-resolvida { color: var(--resolvida); border-color: color-mix(in srgb, var(--resolvida) 45%, transparent); }
.nota-exemplo { margin-top: 10px; font-family: var(--f-mono); font-size: 0.72rem; color: var(--texto-3); letter-spacing: 0.04em; }

/* ---------- Seções ---------- */
.secao { padding-block: 96px; }
.secao-alt { background: var(--bg-alt); }
.secao .faixa { display: grid; gap: 22px; }
.sobretitulo { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--destaque); }
.intro { color: var(--texto-2); font-size: 1.1rem; max-width: 60ch; }
.nota { color: var(--texto-3); font-size: 0.9rem; }
.mudo { color: var(--texto-3); }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }

.problema { display: grid; gap: 10px; padding-top: 18px; border-top: 2px solid var(--linha); }
.problema h3 { font-size: 1.25rem; }
.problema p { color: var(--texto-2); }

.publico {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 26px;
  border-radius: var(--raio);
  background: var(--superficie);
  border: 1px solid var(--linha);
}
.publico-tag { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--destaque); }
.publico ul, .plano ul, .roteiro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.publico li, .plano li, .roteiro li { position: relative; padding-left: 20px; color: var(--texto-2); font-size: 0.98rem; }
.publico li::before, .plano li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--destaque);
  border-bottom: 2px solid var(--destaque);
  transform: rotate(-45deg);
}

/* Etapas */
.etapas { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.etapa { position: relative; display: grid; align-content: start; gap: 10px; padding: 0 22px 0 0; }
.etapa::before { content: ""; position: absolute; top: 19px; left: 44px; right: 0; height: 2px; background: linear-gradient(90deg, var(--cor), transparent); }
.etapa:last-child::before { display: none; }
.etapa-num {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--cor);
  border: 2px solid var(--cor);
  background: var(--bg);
}
.etapa h3 { color: var(--texto); margin-top: 6px; }
.etapa p { color: var(--texto-2); font-size: 0.97rem; }

/* Navegador com o painel */
.navegador {
  margin-top: 18px;
  border-radius: 16px;
  border: 1px solid var(--linha);
  background: #0b1020;
  color: #eaf0ff;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.navegador-barra { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #0e1427; border-bottom: 1px solid #1d2640; }
.navegador-barra > span { width: 11px; height: 11px; border-radius: 50%; background: #2a3350; }
.navegador-url { margin-left: 14px; flex: 1; max-width: 360px; font-family: var(--f-mono); font-size: 0.72rem; color: #7c869e; background: #0b1020; border: 1px solid #1d2640; border-radius: 8px; padding: 5px 12px; }
.painel { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 420px; }
.painel-menu { display: grid; align-content: start; gap: 4px; padding: 18px 12px; background: #0a0f1d; border-right: 1px solid #182036; font-size: 0.85rem; color: #aab4c8; }
.painel-menu b { font-family: var(--f-display); color: #eaf0ff; padding: 0 10px 14px; }
.painel-menu span { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; }
.painel-menu span.ativo { background: #1d4ed8; color: #fff; }
.painel-menu i { font-style: normal; font-size: 0.7rem; font-weight: 700; background: #ef4444; color: #fff; border-radius: 10px; padding: 1px 7px; }
.painel-corpo { display: grid; gap: 14px; padding: 18px; min-width: 0; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #141a2b; border: 1px solid #232b40; }
.kpi span { font-size: 0.76rem; color: #aab4c8; }
.kpi strong { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.1; }
.kpi em { font-style: normal; font-size: 0.7rem; color: #7c869e; }
.kpi em.ruim { color: #f87171; }
.kpi em.bom { color: #4ade80; }
.painel-graficos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
.grafico { margin: 0; padding: 12px 14px; border-radius: 12px; background: #141a2b; border: 1px solid #232b40; display: grid; gap: 8px; min-width: 0; }
.grafico figcaption { font-size: 0.78rem; font-weight: 700; color: #eaf0ff; }
.area { width: 100%; height: auto; display: block; }
.grade-linhas line { stroke: #1e2537; stroke-width: 1; }
.area-recebidas { fill: url(#gradRecebidas); }
.area-resolvidas { fill: url(#gradResolvidas); }
.linha-recebidas { fill: none; stroke: #3b82f6; stroke-width: 2; }
.linha-resolvidas { fill: none; stroke: #22c55e; stroke-width: 2; }
.legenda { display: flex; gap: 14px; font-size: 0.72rem; color: #aab4c8; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.l-recebidas { background: #3b82f6; }
.l-resolvidas { background: #22c55e; }
.gravidades { display: grid; gap: 10px; align-content: center; height: 100%; }
.grav { display: grid; grid-template-columns: 56px minmax(0, 1fr) 18px; align-items: center; gap: 8px; font-size: 0.76rem; color: #aab4c8; }
.grav i { height: 8px; border-radius: 4px; background: var(--c); width: calc(var(--v) / 4 * 100%); }
.grav b { color: #eaf0ff; text-align: right; font-variant-numeric: tabular-nums; }
.tabela-rolagem { overflow-x: auto; border-radius: 12px; border: 1px solid #232b40; }
.fila { width: 100%; border-collapse: collapse; font-size: 0.78rem; min-width: 560px; }
.fila th { text-align: left; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: #7c869e; background: #0f1526; padding: 9px 12px; font-weight: 700; }
.fila td { padding: 10px 12px; border-top: 1px solid #1e2537; color: #c9d3ec; white-space: nowrap; }
.selo, .status { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; border: 1px solid; }
.selo-critica { color: #ff8a8d; border-color: rgba(229, 72, 77, 0.5); background: rgba(229, 72, 77, 0.12); }
.selo-alta { color: #f7a96b; border-color: rgba(240, 136, 62, 0.5); background: rgba(240, 136, 62, 0.12); }
.selo-baixa { color: #6fdc95; border-color: rgba(61, 190, 107, 0.5); background: rgba(61, 190, 107, 0.12); }
.s-recebida { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.45); }
.s-verificacao { color: #93c5fd; border-color: rgba(96, 165, 250, 0.45); }
.s-resolvida { color: #6ee7b7; border-color: rgba(52, 211, 153, 0.45); }
.anonimo, .fila td.mudo { color: #7c869e; }
.pendente { color: #fbbf24 !important; }
.enviado { color: #4ade80 !important; }

.destaques-produto > div { display: grid; gap: 8px; }
.destaques-produto p { color: var(--texto-2); }

/* Diferenciais */
.diferenciais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 18px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.diferenciais article { display: grid; align-content: start; gap: 10px; padding: 28px; background: var(--bg); }
.diferenciais p { color: var(--texto-2); font-size: 0.98rem; }

/* Planos */
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; align-items: stretch; }
.plano { position: relative; display: grid; align-content: start; gap: 12px; padding: 26px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); }
.plano h3 { font-size: 1.4rem; }
.plano-para { color: var(--texto-3); font-size: 0.92rem; margin-top: -6px; }
.plano-destaque { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque); }
.plano-selo { position: absolute; top: -12px; left: 24px; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--destaque); color: var(--destaque-tinta); padding: 4px 10px; border-radius: 999px; }
.mercado { display: grid; gap: 14px; margin-top: 28px; }
.segmentos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.segmentos li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha); color: var(--texto-2); font-size: 0.92rem; background: var(--superficie); }

/* Roteiro */
.roteiro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.roteiro-col { display: grid; align-content: start; gap: 16px; padding: 26px; border-radius: var(--raio); border: 1px solid var(--linha); }
.roteiro-col h3 { display: flex; align-items: center; gap: 10px; }
.ponto { width: 10px; height: 10px; border-radius: 50%; }
.ponto-feito { background: var(--resolvida); }
.ponto-proximo { background: transparent; border: 2px solid var(--destaque); }
.roteiro li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3); }

/* Contato */
.contato { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); border-top: 1px solid var(--linha); }
.contato-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: 40px !important; }
.contato-in > div:first-child { display: grid; gap: 18px; }
.contato-cartao { display: grid; gap: 14px; padding: 28px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.contato-cartao p:not(.indicativo):not(.contato-url) { color: var(--texto-2); }
.contato-url { font-family: var(--f-mono); font-size: 0.78rem; color: var(--texto-3); word-break: break-all; user-select: all; }

/* Rodapé */
.rodape { border-top: 1px solid var(--linha); padding-block: 28px; }
.rodape-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 0.92rem; color: var(--texto-2); }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .menu { display: none; }
  .topo-in { justify-content: space-between; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 12px; }
  .cartao-flutuante { left: 0; }
  .grade-3, .diferenciais, .planos { grid-template-columns: 1fr; }
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .etapa:nth-child(2)::before { display: none; }
  .painel { grid-template-columns: 1fr; }
  .painel-menu { display: none; }
  .painel-graficos { grid-template-columns: 1fr; }
  .roteiro, .contato-in { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 1rem; }
  .marca-grupo { display: none; }
  .hero { padding-block: 40px 28px; }
  .secao { padding-block: 64px; }
  .etapas { grid-template-columns: 1fr; }
  .etapa::before { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registro-linha { grid-template-columns: 1fr; gap: 6px; }
  .cartao-flutuante { display: none; }
  .botao { width: 100%; }
  .topo .botao { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ponto-vivo { animation: none; }
  .botao { transition: none; }
}

/* =====================================================================
   MENU MOBILE (hambúrguer)
   ===================================================================== */
.menu-botao {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 12px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  place-content: center;
  gap: 5px;
}
.menu-botao span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; }
.topo.menu-aberto .menu-botao span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo.menu-aberto .menu-botao span:nth-child(2) { opacity: 0; }
.topo.menu-aberto .menu-botao span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-cta { display: none; }

@media (max-width: 980px) {
  .menu-botao { display: grid; }
  .topo-in > .botao { display: none; }
  .topo-in { position: relative; }
  .menu {
    display: grid;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    gap: 2px;
    margin: 0;
    padding: 10px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px));
    background: var(--bg);
    border-bottom: 1px solid var(--linha);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.6);
    transform-origin: top;
    transform: scaleY(0.96) translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .topo.menu-aberto .menu { opacity: 1; visibility: visible; transform: none; }
  .menu a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--linha); color: var(--texto); }
  .menu .menu-cta {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--destaque);
    color: var(--destaque-tinta);
    font-weight: 700;
  }
}

/* =====================================================================
   AJUSTES RESPONSIVOS FINOS
   ===================================================================== */
@media (max-width: 980px) {
  .hero-in { gap: 36px; }
  .hero-visual { padding-top: 18px; }
  .cartao-flutuante { left: 0; top: -6px; }
  .destaques-produto { gap: 18px; }
}
@media (max-width: 620px) {
  .hero-visual { padding-top: 0; }
  .celular { width: min(300px, 100%); border-radius: 38px; }
  .celular-tela { border-radius: 30px; }
  .registro { margin-top: 32px; }
  .registro-linha { padding: 12px 14px; }
  .publico, .plano, .roteiro-col, .contato-cartao { padding: 20px; }
  .diferenciais article { padding: 22px 20px; }
  .painel-corpo { padding: 12px; }
  .kpi strong { font-size: 1.35rem; }
  .navegador-url { display: none; }
  .segmentos li { font-size: 0.86rem; }
  .rodape-in { flex-direction: column; }
}
@media (max-width: 380px) {
  h1 { font-size: 2.05rem; }
  .acoes { gap: 10px; }
  .kpis { gap: 8px; }
  .kpi { padding: 10px; }
}

/* =====================================================================
   EFEITOS DE INTERAÇÃO
   ===================================================================== */
.botao { position: relative; overflow: hidden; isolation: isolate; }
.botao::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}
.botao:hover::after { transform: translateX(120%); }
.botao-linha::after { background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--destaque) 25%, transparent) 50%, transparent 70%); }

.publico, .plano, .roteiro-col, .diferenciais article, .contato-cartao {
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.publico:hover, .plano:hover, .roteiro-col:hover, .contato-cartao:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--destaque) 45%, var(--linha)); }
.diferenciais article:hover { background: var(--superficie); }
.segmentos li { transition: border-color 0.2s ease, color 0.2s ease; }
.segmentos li:hover { border-color: var(--destaque); color: var(--texto); }
.fila tbody tr { transition: background-color 0.2s ease; }
.fila tbody tr:hover { background: #172038; }

/* =====================================================================
   ANIMAÇÕES (só com html.anim: JS ativo e sem "reduzir movimento")
   ===================================================================== */
:root { --inicio: 0.15s; }
html.anim.primeira-visita { --inicio: 2.15s; }

@keyframes entrarCima { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes entrarBaixo { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes entrarEsquerda { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes entrarCelular { from { opacity: 0; transform: translateY(70px) rotate(-5deg) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes entrarPop { 0% { opacity: 0; transform: scale(0.7) translateY(10px); } 70% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes revelarTexto { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(20px); } to { opacity: 1; clip-path: inset(0 0 -10% 0); transform: none; } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Entrada do topo da página (sequência) */
html.anim .topo { animation: entrarBaixo 0.6s ease both; animation-delay: var(--inicio); }
html.anim .hero .indicativo { animation: entrarCima 0.6s ease both; animation-delay: calc(var(--inicio) + 0.1s); }
html.anim .hero h1 { animation: revelarTexto 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--inicio) + 0.2s); }
html.anim .hero .lead { animation: entrarCima 0.7s ease both; animation-delay: calc(var(--inicio) + 0.45s); }
html.anim .hero .acoes { animation: entrarCima 0.7s ease both; animation-delay: calc(var(--inicio) + 0.6s); }
html.anim .hero .selos li { animation: entrarCima 0.5s ease both; }
html.anim .hero .selos li:nth-child(1) { animation-delay: calc(var(--inicio) + 0.75s); }
html.anim .hero .selos li:nth-child(2) { animation-delay: calc(var(--inicio) + 0.83s); }
html.anim .hero .selos li:nth-child(3) { animation-delay: calc(var(--inicio) + 0.91s); }
html.anim .hero .selos li:nth-child(4) { animation-delay: calc(var(--inicio) + 0.99s); }
html.anim .hero-visual .celular { animation: entrarCelular 1s cubic-bezier(0.2, 0.8, 0.2, 1) both, flutuar 7s ease-in-out infinite; animation-delay: calc(var(--inicio) + 0.35s), calc(var(--inicio) + 1.4s); }
html.anim .cartao-flutuante { animation: entrarPop 0.6s ease both; animation-delay: calc(var(--inicio) + 1.1s); }
html.anim .registro-linha { animation: entrarEsquerda 0.5s ease both; }
html.anim .registro-linha:nth-child(1) { animation-delay: calc(var(--inicio) + 1.15s); }
html.anim .registro-linha:nth-child(2) { animation-delay: calc(var(--inicio) + 1.4s); }
html.anim .registro-linha:nth-child(3) { animation-delay: calc(var(--inicio) + 1.65s); }
html.anim .registro-linha:nth-child(4) { animation-delay: calc(var(--inicio) + 1.9s); }
html.anim .app-etapas li.atual::before { animation: pulsoTurquesa 2s infinite; animation-delay: calc(var(--inicio) + 1.6s); }
@keyframes pulsoTurquesa { 0% { box-shadow: 0 0 0 0 rgba(64, 219, 213, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(64, 219, 213, 0); } 100% { box-shadow: 0 0 0 0 rgba(64, 219, 213, 0); } }

/* Aparecer ao rolar (classes colocadas pelo site.js) */
html.anim .revelar { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--atraso, 0ms); }
html.anim .revelar.visivel { opacity: 1; transform: none; }

/* Linha das etapas se preenchendo */
html.anim .etapa::before { transform: scaleX(0); transform-origin: left; transition: transform 0.9s ease; transition-delay: calc(var(--atraso, 0ms) + 250ms); }
html.anim .etapa.visivel::before { transform: scaleX(1); }

/* Gráfico do painel se desenhando */
html.anim .navegador .linha-recebidas,
html.anim .navegador .linha-resolvidas { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s ease 0.3s; }
html.anim .navegador .area-recebidas,
html.anim .navegador .area-resolvidas { opacity: 0; transition: opacity 0.8s ease 1.2s; }
html.anim .navegador.visivel .linha-recebidas,
html.anim .navegador.visivel .linha-resolvidas { stroke-dashoffset: 0; }
html.anim .navegador.visivel .area-recebidas,
html.anim .navegador.visivel .area-resolvidas { opacity: 1; }
html.anim .navegador .grav i { transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s; }
html.anim .navegador.visivel .grav i { transform: scaleX(1); }
html.anim .navegador .fila tbody tr { opacity: 0; transform: translateX(-12px); transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.2s ease; }
html.anim .navegador.visivel .fila tbody tr { opacity: 1; transform: none; }
html.anim .navegador.visivel .fila tbody tr:nth-child(1) { transition-delay: 0.9s; }
html.anim .navegador.visivel .fila tbody tr:nth-child(2) { transition-delay: 1.05s; }
html.anim .navegador.visivel .fila tbody tr:nth-child(3) { transition-delay: 1.2s; }
html.anim .navegador.visivel .fila tbody tr:nth-child(4) { transition-delay: 1.35s; }

/* =====================================================================
   TELA DE CARREGAMENTO (primeira visita)
   ===================================================================== */
.carregando { display: none; }
html.anim.primeira-visita .carregando {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  background: radial-gradient(ellipse at center, var(--bg-alt) 0%, var(--bg) 70%);
  animation: sairCarregando 0.55s ease forwards;
  animation-delay: calc(var(--inicio) - 0.35s);
}
@keyframes sairCarregando { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }

.carregando-radar { position: relative; width: 168px; height: 168px; display: grid; place-items: center; color: var(--destaque); }
.anel { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--destaque) 35%, transparent); }
.anel-2 { inset: 28px; }
.anel-3 { inset: 56px; }
html.anim .anel { animation: pulsoAnel 1.8s ease-out infinite; }
html.anim .anel-2 { animation-delay: 0.3s; }
html.anim .anel-3 { animation-delay: 0.6s; }
@keyframes pulsoAnel { 0% { transform: scale(0.85); opacity: 0.2; } 50% { opacity: 1; } 100% { transform: scale(1.08); opacity: 0.25; } }
.varredura {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--destaque) 45%, transparent) 0deg, transparent 70deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, #000 69%, transparent 70%);
          mask: radial-gradient(circle, #000 69%, transparent 70%);
}
html.anim .varredura { animation: girar 1.4s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.blip { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--sinal); opacity: 0; }
.blip-1 { top: 30px; left: 44px; }
.blip-2 { bottom: 38px; right: 32px; }
.blip-3 { top: 54px; right: 26px; }
html.anim .blip { animation: piscarBlip 1.4s ease-in-out infinite; }
html.anim .blip-2 { animation-delay: 0.45s; }
html.anim .blip-3 { animation-delay: 0.9s; }
@keyframes piscarBlip { 0%, 100% { opacity: 0; transform: scale(0.6); } 30% { opacity: 1; transform: scale(1.2); } 60% { opacity: 0.6; transform: scale(1); } }
.carregando-escudo { position: relative; width: 46px; height: 46px; }
.carregando-check { stroke-dasharray: 20; stroke-dashoffset: 20; }
html.anim .carregando-check { animation: desenharCheck 0.5s ease forwards; animation-delay: 1.2s; }
@keyframes desenharCheck { to { stroke-dashoffset: 0; } }
.carregando-grupo { display: flex; gap: 0.32em; font-family: var(--f-mono); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.1em; color: var(--texto); }
.carregando-grupo span { opacity: 0; }
html.anim .carregando-grupo span { animation: entrarCima 0.35s ease forwards; }
html.anim .carregando-grupo span:nth-child(1) { animation-delay: 0.15s; }
html.anim .carregando-grupo span:nth-child(2) { animation-delay: 0.22s; }
html.anim .carregando-grupo span:nth-child(3) { animation-delay: 0.29s; }
html.anim .carregando-grupo span:nth-child(4) { animation-delay: 0.36s; }
html.anim .carregando-grupo span:nth-child(5) { animation-delay: 0.43s; }
html.anim .carregando-grupo span:nth-child(6) { animation-delay: 0.5s; }
html.anim .carregando-grupo span:nth-child(7) { animation-delay: 0.57s; }
.carregando-texto { color: var(--texto-2); font-size: 0.95rem; text-align: center; }
.carregando-texto b { color: var(--destaque); font-weight: 600; }
.carregando-barra { width: min(220px, 70vw); height: 3px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.carregando-barra i { display: block; height: 100%; width: 100%; background: var(--destaque); transform-origin: left; transform: scaleX(0); }
html.anim .carregando-barra i { animation: encherBarra 1.75s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes encherBarra { 0% { transform: scaleX(0); } 60% { transform: scaleX(0.72); } 100% { transform: scaleX(1); } }

/* =====================================================================
   VERSÃO SUAVE ("reduzir movimento" ligado no sistema):
   mantém o carregamento e as entradas, mas só esmaecendo.
   ===================================================================== */
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
html.anim-suave .topo,
html.anim-suave .hero .indicativo,
html.anim-suave .hero h1,
html.anim-suave .hero .lead,
html.anim-suave .hero .acoes,
html.anim-suave .hero .selos li,
html.anim-suave .cartao-flutuante,
html.anim-suave .registro-linha,
html.anim-suave .carregando-grupo span { animation-name: aparecer !important; }
html.anim-suave .hero-visual .celular { animation: aparecer 0.9s ease both !important; animation-delay: calc(var(--inicio) + 0.35s) !important; }
html.anim-suave .app-etapas li.atual::before { animation: none !important; }
html.anim-suave .revelar { transform: none !important; transition-property: opacity !important; }
html.anim-suave .etapa::before,
html.anim-suave .navegador .grav i { transform: none !important; }
html.anim-suave .navegador .fila tbody tr { transform: none !important; }
html.anim-suave .anel,
html.anim-suave .varredura,
html.anim-suave .blip { animation: none !important; }
html.anim-suave .blip { opacity: 0.8; }
html.anim-suave .carregando { animation-name: aparecerSair !important; }
@keyframes aparecerSair { to { opacity: 0; visibility: hidden; } }
html.anim-suave .botao::after { display: none; }
html.anim-suave .publico:hover,
html.anim-suave .plano:hover,
html.anim-suave .roteiro-col:hover,
html.anim-suave .contato-cartao:hover { transform: none; }

/* Acabamentos do celular */
@media (max-width: 620px) {
  .radar { opacity: 0.28; }
  .kpi-ext { display: none; }
  .registro-linha { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
  .registro-linha > span:last-child { grid-column: 1 / -1; }
}

/* E-mail de contato */
.email {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
}
.email-rotulo { width: 100%; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); }
.email-endereco { flex: 1; min-width: 0; font-weight: 700; font-size: 1.05rem; color: var(--destaque); text-decoration: none; word-break: break-all; user-select: all; }
.email-endereco:hover { text-decoration: underline; }
.email-copiar {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto);
  font: 600 0.85rem var(--f-texto);
  cursor: pointer;
}
.email-copiar:hover { border-color: var(--destaque); }
.email-copiar.copiado { border-color: var(--resolvida); color: var(--resolvida); }
.rodape a { color: var(--texto-2); }

/* =====================================================================
   NAVEGAÇÃO ANIMADA
   ===================================================================== */
/* A rolagem é animada pelo site.js (a do CSS brigaria com ela) */
html.anim { scroll-behavior: auto; }

/* Topo ganha sombra quando a página rola */
.topo { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.topo.rolado { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7); }

/* Barra de progresso de leitura */
.progresso-leitura {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--destaque), color-mix(in srgb, var(--destaque) 40%, var(--verificacao)));
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
}
.topo { position: sticky; }

/* Aba ativa: sublinhado que cresce do centro */
@media (min-width: 981px) {
  .menu a { position: relative; padding-block: 6px; transition: color 0.25s ease; }
  .menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--destaque);
    transform: scaleX(0);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .menu a:hover::after { transform: scaleX(0.5); }
  .menu a.ativo { color: var(--texto); }
  .menu a.ativo::after { transform: scaleX(1); }
}
@media (max-width: 980px) {
  .menu a.ativo { color: var(--destaque); }
  .menu a:not(.menu-cta) { transition: padding-left 0.25s ease, color 0.25s ease; }
  .menu a.ativo:not(.menu-cta) { padding-left: 12px; box-shadow: inset 3px 0 0 var(--destaque); }
}

/* Destaque ao chegar na seção */
@keyframes chegada {
  0% { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}
@keyframes chegadaRotulo {
  0%, 100% { letter-spacing: 0.14em; opacity: 1; }
  40% { letter-spacing: 0.22em; opacity: 0.7; }
}
.secao h2 {
  background-image: linear-gradient(100deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--destaque) 55%, transparent) 50%, transparent 60%, transparent 100%);
  background-size: 200% 100%;
  background-position: -120% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: currentColor;
}
.secao.chegou h2 { animation: chegada 1.1s ease; -webkit-text-fill-color: transparent; color: var(--texto); background-image: linear-gradient(100deg, var(--texto) 0%, var(--texto) 40%, var(--destaque) 50%, var(--texto) 60%, var(--texto) 100%); }
.secao.chegou .sobretitulo { animation: chegadaRotulo 0.9s ease; }
html.anim-suave .secao.chegou h2 { animation-duration: 0.7s; }
section[tabindex="-1"]:focus { outline: none; }

/* Ambientes atendidos (modelo de negócio) */
.ambientes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.ambiente {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
  border-radius: var(--raio);
  background: var(--superficie);
  border: 1px solid var(--linha);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.ambiente:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--destaque) 45%, var(--linha)); }
.ambiente p { color: var(--texto-2); font-size: 0.98rem; }
.ambiente-topo { display: flex; align-items: center; gap: 12px; }
.ambiente-topo h3 { flex: 1; min-width: 0; }
.ambiente-icone {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--destaque);
  background: color-mix(in srgb, var(--destaque) 12%, transparent);
}
.ambiente-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ambiente-selo { flex: none; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--destaque-tinta); background: var(--destaque); padding: 3px 9px; border-radius: 999px; }
.planos-titulo { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-top: 36px; }
@media (max-width: 760px) { .ambientes { grid-template-columns: 1fr; } }
html.anim-suave .ambiente:hover { transform: none; }

/* =====================================================================
   MARCA FOXTROT (logo da equipe)
   ===================================================================== */
:root { --raposa: #ff6b1a; }
.marca-grupo { display: inline-flex; align-items: center; gap: 6px; }
.marca-grupo img { width: 20px; height: 20px; border-radius: 6px; }

/* Tela de carregamento: raposa no centro do radar */
.carregando-raposa {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--raposa) 40%, transparent), 0 0 40px -6px color-mix(in srgb, var(--raposa) 70%, transparent);
}
html.anim .carregando-raposa { animation: raposaEntra 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both, raposaBrilho 1.6s ease-in-out 0.8s infinite; }
@keyframes raposaEntra { from { opacity: 0; transform: scale(0.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes raposaBrilho {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--raposa) 40%, transparent), 0 0 30px -8px color-mix(in srgb, var(--raposa) 60%, transparent); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--raposa) 60%, transparent), 0 0 55px -4px color-mix(in srgb, var(--raposa) 85%, transparent); }
}
html.anim-suave .carregando-raposa { animation: aparecer 0.6s ease both !important; }

/* Seção Equipe */
.equipe-in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 48px !important; }
.equipe-logo {
  margin: 0;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--linha);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--raposa) 45%, transparent), var(--sombra);
  aspect-ratio: 1;
  max-width: 100%;
}
.equipe-logo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.equipe-logo:hover img { transform: scale(1.03); }
.equipe-texto { display: grid; gap: 18px; min-width: 0; }
.equipe-feito { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.equipe-feito li {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--raposa);
}
.equipe-feito b { font-family: var(--f-display); font-size: 1rem; }
.equipe-feito span { color: var(--texto-2); font-size: 0.92rem; }

/* Rodapé com a raposa */
.rodape-marca { display: flex; align-items: center; gap: 10px; }
.rodape-marca img { width: 32px; height: 32px; border-radius: 9px; flex: none; }

@media (max-width: 980px) {
  .equipe-in { grid-template-columns: 1fr; }
  .equipe-logo { max-width: 420px; justify-self: center; width: 100%; }
}
@media (max-width: 480px) {
  .equipe-feito { grid-template-columns: 1fr; }
}
html.anim-suave .equipe-logo:hover img { transform: none; }

/* Radar maior na tela de carregamento, para dar presença à marca */
.carregando-radar { width: 220px; height: 220px; }
.anel-2 { inset: 36px; }
.anel-3 { inset: 72px; }
.carregando-raposa { width: 112px; height: 112px; border-radius: 28px; }
.blip-1 { top: 40px; left: 56px; }
.blip-2 { bottom: 48px; right: 40px; }
.blip-3 { top: 70px; right: 32px; }
.carregando-grupo { font-size: 1.25rem; }

/* Celular: no topo fica só a raposa, sem o texto "por Foxtrot" */
@media (max-width: 620px) {
  .marca-grupo { font-size: 0; gap: 0; letter-spacing: 0; padding-top: 0; }
  .marca-grupo img { width: 22px; height: 22px; }
}

/* =====================================================================
   RAPOSA FOXTROT (versão final: só a raposa, fundo transparente)
   ===================================================================== */
/* Topo e rodapé: sem moldura */
.marca-grupo img, .rodape-marca img { border-radius: 0; }
.marca-grupo img { width: 22px; height: 22px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--raposa) 45%, transparent)); }
.rodape-marca img { width: 34px; height: 34px; }

/* Carregamento: raposa solta, com brilho */
.carregando-raposa {
  width: 118px;
  height: 118px;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--raposa) 55%, transparent));
}
@keyframes raposaBrilho {
  0%, 100% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--raposa) 45%, transparent)); }
  50% { filter: drop-shadow(0 0 30px color-mix(in srgb, var(--raposa) 80%, transparent)); }
}

/* Seção Equipe */
.equipe-marca {
  margin: 0;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 24px 12px;
}
.equipe-brilho {
  position: absolute;
  inset: 4% 8% 22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, color-mix(in srgb, var(--raposa) 38%, transparent), transparent 60%),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, #2f6bff 32%, transparent), transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}
.equipe-raposa {
  position: relative;
  width: min(340px, 78%);
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.equipe-marca:hover .equipe-raposa { transform: translateY(-6px) scale(1.03); }
html.anim .equipe-raposa { animation: flutuar 8s ease-in-out infinite; }
.equipe-nome { position: relative; display: grid; justify-items: center; gap: 6px; }
.equipe-palavra {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 118%;
  font-style: italic;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--texto);
}
.equipe-palavra em { font-style: italic; color: var(--raposa); }
.equipe-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.equipe-sub::before, .equipe-sub::after { content: ""; width: 28px; height: 1px; background: var(--linha); }
html.anim-suave .equipe-raposa { animation: none; }
html.anim-suave .equipe-marca:hover .equipe-raposa { transform: none; }
@media (max-width: 980px) {
  .equipe-marca { max-width: 420px; justify-self: center; width: 100%; }
}


/* #####################################################################
   IDENTIDADE VISUAL FOXTROT (manual da equipe)
   Paleta: #0B1B3B azul principal · #007BFF azul cibernético ·
           #FF6B00 laranja · #D43F00 laranja escuro · #E5E7EB cinza claro
   Tipografia: Orbitron (títulos) · Oxanium (interface) · Rajdhani (texto)
   As telas do produto (celular e painel) mantêm as cores do app.
   ##################################################################### */
:root {
  --bg: #08132b;
  --bg-alt: #0b1b3b;
  --superficie: #102449;
  --superficie-2: #0a1834;
  --linha: #1d3566;
  --texto: #e5e7eb;
  --texto-2: #aab7d4;
  --texto-3: #7486ad;
  --destaque: #ff6b00;
  --destaque-tinta: #0b1b3b;
  --azul: #007bff;
  --laranja-escuro: #d43f00;
  --sinal: #ff6b00;
  --raposa: #ff6b00;
  --respondida: #40dbd5;

  --f-display: "Orbitron", "Eurostile", "Segoe UI", system-ui, sans-serif;
  --f-ui: "Oxanium", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}


/* Tipografia */
body { font-family: var(--f-texto); font-size: 1.14rem; font-weight: 500; line-height: 1.55; }
h1, h2 { font-family: var(--f-display); font-stretch: normal; letter-spacing: 0.01em; }
h1 { font-weight: 800; font-size: clamp(1.95rem, 4.1vw, 3.25rem); line-height: 1.12; }
h2 { font-weight: 700; font-size: clamp(1.45rem, 2.7vw, 2.2rem); line-height: 1.18; max-width: 26ch; }
h3 { font-family: var(--f-ui); font-stretch: normal; font-weight: 700; letter-spacing: 0.01em; }
.lead, .intro { font-weight: 500; }
.menu a, .botao, .chip, .marca-texto, .plano-selo, .publico-tag, .sobretitulo, .indicativo,
.equipe-sub, .email-rotulo, .email-copiar, .kpi strong, .cf-numero, .etapa-num, .segmentos li,
.carregando-texto, .carregando-pct { font-family: var(--f-ui); }
.marca-texto { font-family: var(--f-display); font-stretch: normal; font-weight: 800; letter-spacing: 0.02em; font-size: 1rem; }
.sobretitulo, .indicativo, .publico-tag { letter-spacing: 0.22em; font-weight: 600; }
.sobretitulo::before { content: "// "; color: var(--azul); }

/* Botões em ângulo (cantos cortados, como as formas do manual) */
.botao {
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.92rem;
}
.botao-linha { border-color: var(--azul); color: var(--texto); background: color-mix(in srgb, var(--azul) 10%, transparent); }
.botao-linha:hover { border-color: var(--destaque); }
.botao-pequeno { font-size: 0.8rem; }
.menu .menu-cta { border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* Faixas diagonais //// nos títulos de seção */
.secao h2::after {
  content: "";
  display: block;
  width: 92px;
  height: 8px;
  margin-top: 16px;
  background: repeating-linear-gradient(115deg, var(--destaque) 0 8px, transparent 8px 14px);
  -webkit-text-fill-color: initial;
}
.secao h2 { -webkit-text-fill-color: currentColor; }
.secao.chegou h2 { -webkit-text-fill-color: currentColor !important; animation: none; background: none; }
.secao.chegou h2::after { animation: faixaCorre 0.9s ease; }
@keyframes faixaCorre { from { width: 0; } to { width: 92px; } }

/* Cartões com quina de circuito */
.publico, .plano, .roteiro-col, .ambiente, .contato-cartao { border-radius: 4px; position: relative; }
.publico::before, .plano::before, .ambiente::before, .contato-cartao::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  border-top: 2px solid var(--destaque);
  border-right: 2px solid var(--destaque);
  pointer-events: none;
}
.plano-destaque { box-shadow: 0 0 0 1px var(--destaque), 0 20px 50px -30px color-mix(in srgb, var(--destaque) 60%, transparent); }
.equipe-feito li { border-radius: 2px; border-left-color: var(--destaque); }
.equipe-feito li:nth-child(even) { border-left-color: var(--azul); }
.problema { border-top-color: var(--azul); }
.selos li::before { background: var(--destaque); transform: skewX(-20deg); border-radius: 0; width: 8px; }
.segmentos li { border-radius: 2px; }
.etapa-num { border-radius: 4px; transform: rotate(45deg); }
.etapa-num > * , .etapa-num { font-weight: 700; }
.etapa-num { display: grid; place-items: center; }

/* Nome FOXTROT da seção Equipe em Orbitron, inclinado como no logo */
.equipe-palavra { font-family: var(--f-display); font-style: normal; font-stretch: normal; font-weight: 900; display: inline-block; transform: skewX(-10deg); letter-spacing: 0.02em; }
.equipe-palavra em { font-style: normal; color: var(--destaque); }
.equipe-sub { font-family: var(--f-ui); letter-spacing: 0.5em; }

/* Barra de progresso e indicador do menu nas cores da marca */
.progresso-leitura { background: linear-gradient(90deg, var(--azul), var(--destaque)); height: 3px; }
.menu a::after { background: var(--destaque); }

/* Rodapé: slogan e selo */
.slogan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  padding-block: 26px;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.4em;
  color: var(--texto-2);
  border-bottom: 1px solid var(--linha);
}
.slogan i { width: 7px; height: 7px; background: var(--destaque); transform: rotate(45deg); }
.rodape-dir { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.selo-time {
  font-family: var(--f-ui);
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  padding: 8px 16px;
  border: 1px solid var(--destaque);
  color: var(--texto);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* =====================================================================
   CARREGAMENTO: A RAPOSA É A BARRA DE PROGRESSO
   ===================================================================== */
html.anim.primeira-visita .carregando {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--azul) 18%, transparent), transparent 45%),
    radial-gradient(ellipse at center, #0b1b3b 0%, #060e22 75%);
  gap: 14px;
}
.cr-raposa { position: relative; width: 200px; height: 200px; }
.cr-raposa img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cr-base { filter: grayscale(1) brightness(0.32) contrast(1.1); opacity: 0.9; }
.cr-cor { clip-path: inset(100% 0 0 0); filter: drop-shadow(0 0 22px rgba(255, 107, 0, 0.45)); }
.cr-linha {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff6b00 20%, #ffb37a 50%, #ff6b00 80%, transparent);
  box-shadow: 0 0 14px 2px rgba(255, 107, 0, 0.7);
  opacity: 0;
}
html.anim .cr-raposa { animation: raposaChega 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html.anim .cr-cor { animation: encherRaposa 1.55s cubic-bezier(0.45, 0, 0.25, 1) 0.2s forwards, olhosAcendem 0.6s ease 1.75s forwards; }
html.anim .cr-linha { animation: linhaSobe 1.55s cubic-bezier(0.45, 0, 0.25, 1) 0.2s forwards; }
@keyframes raposaChega { from { opacity: 0; transform: translateY(16px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes encherRaposa { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes linhaSobe {
  0% { bottom: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { bottom: 100%; opacity: 0; }
}
@keyframes olhosAcendem {
  0% { filter: drop-shadow(0 0 22px rgba(255, 107, 0, 0.45)); }
  50% { filter: drop-shadow(0 0 10px rgba(0, 123, 255, 0.95)) drop-shadow(0 0 34px rgba(0, 123, 255, 0.6)) brightness(1.15); }
  100% { filter: drop-shadow(0 0 24px rgba(255, 107, 0, 0.55)); }
}
.carregando-grupo { font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.32em; color: #e5e7eb; transform: skewX(-8deg); }
.carregando-grupo span:nth-child(3) { color: #ff6b00; }
.carregando-texto { color: #aab7d4; font-size: 0.95rem; letter-spacing: 0.06em; }
.carregando-texto b { color: #ff6b00; }

/* Porcentagem contando junto com o preenchimento */
@property --pct { syntax: "<integer>"; inherits: false; initial-value: 0; }
.carregando-pct { font-weight: 600; font-size: 0.9rem; letter-spacing: 0.2em; color: #e5e7eb; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }
.cr-numero { --pct: 0; counter-reset: pct var(--pct); }
.cr-numero::before { content: counter(pct); }
html.anim .cr-numero { animation: contarPct 1.55s cubic-bezier(0.45, 0, 0.25, 1) 0.2s forwards; }
@keyframes contarPct { from { --pct: 0; } to { --pct: 100; } }

/* Modo suave: sem varredura, preenchimento em esmaecer */
html.anim-suave .cr-cor { animation: aparecer 1.2s ease 0.2s forwards !important; clip-path: none; opacity: 0; }
html.anim-suave .cr-linha { display: none; }
html.anim-suave .cr-raposa { animation: aparecer 0.5s ease both !important; }

/* Celular */
@media (max-width: 620px) {
  .cr-raposa { width: 170px; height: 170px; }
  .slogan { letter-spacing: 0.25em; font-size: 0.82rem; gap: 8px 14px; }
  h1 { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
  .botao { font-size: 0.85rem; }
}

/* Número das etapas: quadrado reto (sem girar o número) */
.etapa-num { transform: none; border-radius: 4px; }

/* Raposa do carregamento maior no computador */
@media (min-width: 621px) { .cr-raposa { width: 240px; height: 240px; } }

/* Site sempre escuro: a identidade da Foxtrot é escura, em qualquer aparelho */
html { color-scheme: dark; background: #08132b; }

/* =====================================================================
   TEMA CLARO (opcional, escolhido no botão do topo)
   O padrão é escuro. Carregamento e telas do produto ficam escuros sempre.
   ===================================================================== */
html { background: var(--bg); }
:root[data-theme="light"] {
  --bg: #f3f6fb;
  --bg-alt: #e8eef8;
  --superficie: #ffffff;
  --superficie-2: #eef2f9;
  --linha: #cfd9ea;
  --texto: #0b1b3b;
  --texto-2: #3d4c6e;
  --texto-3: #64739a;
  --destaque: #d43f00;
  --destaque-tinta: #ffffff;
  --azul: #0062cc;
  --sinal: #d43f00;
  --raposa: #d43f00;
  --respondida: #0e8f8a;
  --sombra: 0 30px 70px -35px rgba(15, 30, 60, 0.35);
  color-scheme: light;
}
:root[data-theme="light"] .topo.rolado { box-shadow: 0 10px 30px -20px rgba(15, 30, 60, 0.35); }
:root[data-theme="light"] .menu { box-shadow: 0 24px 40px -28px rgba(15, 30, 60, 0.35); }
:root[data-theme="light"] .equipe-raposa { filter: drop-shadow(0 18px 30px rgba(15, 30, 60, 0.25)); }
:root[data-theme="light"] .equipe-brilho { opacity: 0.6; }
:root[data-theme="light"] .botao-linha { color: var(--texto); }
:root[data-theme="light"] .navegador { box-shadow: 0 30px 60px -30px rgba(15, 30, 60, 0.45); }

/* Troca de tema animada (só durante a troca, para não pesar o resto) */
html.trocando-tema, html.trocando-tema *, html.trocando-tema *::before, html.trocando-tema *::after {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, fill 0.45s ease !important;
}

/* Botão sol/lua */
.tema-botao {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.tema-botao:hover { border-color: var(--destaque); color: var(--destaque); }
.tema-botao svg {
  position: absolute;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
/* No escuro mostra o sol (vai para o claro); no claro mostra a lua */
.icone-lua { opacity: 0; transform: rotate(-90deg) scale(0.5); }
:root[data-theme="light"] .icone-sol { opacity: 0; transform: rotate(90deg) scale(0.5); }
:root[data-theme="light"] .icone-lua { opacity: 1; transform: none; }
html.anim-suave .tema-botao svg { transition: opacity 0.3s ease; transform: none !important; }

@media (max-width: 980px) {
  .tema-botao { margin-left: auto; }
  .menu-botao { margin-left: 0; }
}

/* Ordem do topo: marca, menu, tema, contato (hambúrguer no fim, no celular) */
.topo-in > .marca { order: 0; }
.topo-in > .menu { order: 1; }
.topo-in > .tema-botao { order: 2; }
.topo-in > .botao { order: 3; }
.topo-in > .menu-botao { order: 4; }

/* =====================================================================
   BOTÃO DE TEMA — versão compatível com Safari iOS
   ===================================================================== */
.tema-botao {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  clip-path: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tema-icones { position: relative; display: block; width: 20px; height: 20px; flex: none; pointer-events: none; }
.tema-icones svg { position: absolute; top: 0; left: 0; width: 20px; height: 20px; display: block; }
.marca { min-width: 0; flex: 0 1 auto; }

/* Linha "Tema" no menu do celular */
.menu-tema { display: none; }
@media (max-width: 980px) {
  .menu-tema {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 14px 4px;
    border: 0;
    border-bottom: 1px solid var(--linha);
    background: transparent;
    color: var(--texto);
    font: 500 1.05rem var(--f-ui);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .menu-tema-opcoes { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie-2); }
  .menu-tema-opcoes b { font-weight: 600; font-size: 0.85rem; padding: 6px 12px; border-radius: 6px; color: var(--texto-3); }
  .op-escuro { background: var(--destaque); color: var(--destaque-tinta) !important; }
  :root[data-theme="light"] .op-escuro { background: transparent; color: var(--texto-3) !important; }
  :root[data-theme="light"] .op-claro { background: var(--destaque); color: var(--destaque-tinta) !important; }
}

/* Celular: a troca de tema fica só dentro do menu (☰); o botão do topo é só do computador */
@media (max-width: 980px) {
  .tema-botao { display: none !important; }
  .menu-botao { margin-left: auto; }
}