/* Site Silógica AI — estilos compartilhados.
   Paleta = paleta do logo (CLAUDE.md). Violeta só no que é IA/MCP. Sem modo escuro. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --azul: #2b38d8;
  --azul-escuro: #1f2aa8;
  --violeta: #7c3aed;
  --violeta-texto: #6d28d9;
  --violeta-fundo: #efe7fd;
  --navy: #031528;
  --fundo: #f4f6fa;
  --papel: #ffffff;
  --tinta: #0f1520;
  --tinta-2: #5b6478;
  --linha: #e1e6f0;
  --linha-2: #edf0f7;
  --ok: #0e8f72;
  --alerta: #a85510;

  /* A inclinação do bloco do logo: 126 de deslocamento em 785 de altura. */
  --inclinacao: 9.1deg;

  --largura: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --raio: 10px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  font-stretch: 100%;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--azul); text-underline-offset: 0.18em; }
a:hover { color: var(--azul-escuro); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }

.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--navy); color: #fff; padding: 0.6rem 1rem; border-radius: 6px;
}
.pular:focus { top: 1rem; }

.miolo { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }

/* Títulos: o Archivo estreito e pesado ecoa as letras condensadas do logotipo. */
h1, h2, h3 {
  font-stretch: 78%;
  font-weight: 760;
  color: var(--navy);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.45rem; line-height: 1.15; }
p { margin: 0; max-width: 64ch; text-wrap: pretty; }

.abertura { font-size: 1.2rem; color: var(--tinta-2); margin-top: 1.1rem; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linha);
}
.topo .miolo { display: flex; align-items: center; gap: 2rem; min-height: 4.25rem; }
.topo .marca img { height: 26px; width: auto; }
.topo nav { margin-left: auto; }
.topo nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.topo nav a { color: var(--tinta); text-decoration: none; font-size: 0.97rem; font-weight: 500; }
.topo nav a:hover { color: var(--azul); }
@media (max-width: 64rem) { .topo nav { display: none; } .topo .botao { margin-left: auto; } }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.35rem; border-radius: 8px;
  background: var(--azul); color: #fff; text-decoration: none;
  font-weight: 650; font-size: 1rem; line-height: 1.2;
  border: 2px solid var(--azul);
}
.botao:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); color: #fff; }
.botao.secundario { background: transparent; color: var(--azul); }
.botao.secundario:hover { background: var(--azul); color: #fff; }
.topo .botao { padding: 0.55rem 1rem; font-size: 0.95rem; white-space: nowrap; }
@media (max-width: 30rem) { .topo .botao { padding: 0.5rem 0.75rem; font-size: 0.88rem; } .topo .marca img { height: 22px; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem); background: var(--fundo); }
.hero .miolo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 56rem) { .hero .miolo { grid-template-columns: minmax(0, 1fr); } }
.hero .abertura { font-size: 1.25rem; }
.hero .acoes { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero .compat { margin-top: 1.8rem; font-size: 0.95rem; color: var(--tinta-2); }
.assistentes { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0.7rem 0 0; padding: 0; }
/* Lugar dos logos oficiais (ver PENDENTE no HTML). Até lá, o nome. */
.assistente {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1rem;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 8px;
  color: var(--tinta); font-weight: 650; font-size: 1.02rem;
}
.assistentes img { display: block; height: 24px; width: auto; }

/* A conversa: o momento memorável da página. Moldura neutra, sem imitar a tela de nenhum assistente. */
.conversa {
  margin: 0;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(3, 21, 40, 0.06), 0 18px 40px -18px rgba(3, 21, 40, 0.22);
  padding: 1.25rem 1.25rem 1rem;
  font-size: 0.98rem;
}
.conversa .barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.85rem; color: var(--tinta-2);
  padding-bottom: 0.9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linha-2);
}
.conversa .conectado { display: inline-flex; align-items: center; gap: 0.45rem; }
.conversa .conectado::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ok);
}
.fala { margin: 0 0 0.9rem; }
.fala.pessoa {
  margin-left: auto; max-width: 85%;
  background: var(--fundo); border-radius: 12px 12px 4px 12px;
  padding: 0.7rem 0.95rem;
}
.fala.ia { max-width: 100%; }
.consulta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--violeta-texto); background: var(--violeta-fundo);
  padding: 0.25rem 0.7rem 0.25rem 0.85rem; margin-bottom: 0.6rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.35rem) 100%, 0.35rem 100%);
}
.fala.ia { overflow-x: auto; }
.fala.ia table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 0.5rem; font-variant-numeric: tabular-nums; }
.fala.ia th, .fala.ia td { text-align: left; padding: 0.38rem 0.5rem; border-bottom: 1px solid var(--linha-2); font-size: 0.92rem; }
.fala.ia th { color: var(--tinta-2); font-weight: 500; }
.fala.ia td.n, .fala.ia th.n { text-align: right; }
.permissao {
  display: flex; gap: 0.5rem; align-items: flex-start;
  font-size: 0.84rem; color: var(--tinta-2);
  border-top: 1px dashed var(--linha); padding-top: 0.7rem; margin-top: 0.4rem;
}
.permissao svg { flex: none; margin-top: 0.15rem; }
.rotulo-exemplo { margin-top: 0.8rem; font-size: 0.8rem; color: var(--tinta-2); }

/* Entrada da conversa: uma sequência só, ao carregar. */
@media (prefers-reduced-motion: no-preference) {
  .conversa .fala, .conversa .permissao { animation: entra 0.5s ease-out both; }
  .conversa .fala.pessoa { animation-delay: 0.25s; }
  .conversa .fala.ia { animation-delay: 1.1s; }
  .conversa .permissao { animation-delay: 1.7s; }
}
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Seções ---------- */
.secao { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.secao.cinza { background: var(--fundo); }
.secao header { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Perguntas: um registro de conversa, não uma grade de cartões. */
.perguntas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.perguntas li {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--linha); align-items: baseline;
}
.perguntas .area { font-weight: 600; color: var(--navy); }
.perguntas q { font-size: 1.12rem; quotes: "“" "”"; }
.perguntas .faz { color: var(--tinta-2); font-size: 0.97rem; }
@media (max-width: 52rem) {
  .perguntas li { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* Continuação do "Pergunte": mesmo fundo, separada só pelo respiro. */
.secao.continua { padding-top: 0; }

/* Análise: a conversa do hero, agora com um gráfico. */
.analise .miolo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 56rem) { .analise .miolo { grid-template-columns: 1fr; } }
.titulo-grafico { margin-top: 1rem; font-size: 0.85rem; color: var(--tinta-2); }
.colunas { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; margin-top: 0.6rem; height: 11rem; }
.colunas .eixo {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 0.72rem; color: var(--tinta-2); text-align: right; font-variant-numeric: tabular-nums;
  padding-bottom: 1.3rem; transform: translateY(0.45em);
}
.colunas ol {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px;
  /* Linhas de grade: quatro níveis, hairline, recessivas. */
  background:
    linear-gradient(var(--linha-2), var(--linha-2)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--linha-2), var(--linha-2)) 0 calc((100% - 1.3rem) / 3) / 100% 1px no-repeat,
    linear-gradient(var(--linha-2), var(--linha-2)) 0 calc((100% - 1.3rem) * 2 / 3) / 100% 1px no-repeat;
  border-bottom: 0;
}
.colunas li { display: grid; grid-template-rows: minmax(0, 1fr) 1.3rem; justify-items: center; position: relative; }
.colunas li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.3rem; border-bottom: 1px solid var(--linha); }
.barra-v {
  align-self: end; width: min(100%, 24px); height: calc(var(--v) * 100%);
  background: var(--azul); border-radius: 4px 4px 0 0; position: relative;
}
.colunas .pico .barra-v::before {
  content: attr(data-v); position: absolute; bottom: calc(100% + 0.2rem); left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; font-weight: 650; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.colunas .mes { align-self: end; font-size: 0.72rem; color: var(--tinta-2); line-height: 1; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* IA + Silógica: cada pergunta mostra de onde vem cada parte da resposta. */
.perguntas.combina li { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.perguntas.combina .fonte { color: var(--tinta-2); font-size: 0.95rem; }
.fonte .rotulo {
  display: block; width: fit-content; margin-bottom: 0.3rem; padding: 0.1rem 0.7rem 0.1rem 0.75rem;
  font-size: 0.78rem; font-weight: 650;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.3rem) 100%, 0.3rem 100%);
}
.da-ia .rotulo { color: var(--violeta-texto); background: var(--violeta-fundo); }
.do-silogica .rotulo { color: var(--azul); background: #e8eafb; }
@media (max-width: 52rem) { .perguntas.combina li { grid-template-columns: 1fr; gap: 0.6rem; } }

/* Controle: uma sequência real (o caminho de uma pergunta), por isso numerada. */
.caminho { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: grid; gap: 0; }
.caminho li {
  counter-increment: passo;
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1.2rem;
  padding: 1.4rem 0; border-top: 1px solid var(--linha);
}
.caminho li::before {
  content: counter(passo);
  font-stretch: 78%; font-weight: 760; font-size: 2rem; line-height: 1; color: var(--azul);
}
.caminho h3 { margin-bottom: 0.35rem; }
.caminho p { color: var(--tinta-2); }
.controle .miolo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); }
.controle header { position: sticky; top: 6rem; align-self: start; }
@media (max-width: 56rem) { .controle .miolo { grid-template-columns: 1fr; } .controle header { position: static; } }

.destaque-alcada {
  margin-top: 2rem; padding: 1.3rem 1.5rem; background: var(--papel);
  border-left: 4px solid var(--violeta); border-radius: 0 var(--raio) var(--raio) 0;
}
.destaque-alcada p { color: var(--tinta); font-size: 1.1rem; }

/* Blocos de produto: texto + lista concreta, alternando lado. */
.produto .miolo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.produto.invertido .texto { order: 2; }
/* A coluna mais curta acompanha a rolagem, para não deixar um vão ao lado da lista. */
@media (min-width: 56.01rem) { .produto .miolo > * { position: sticky; top: 6rem; } }
@media (max-width: 56rem) { .produto .miolo { grid-template-columns: 1fr; } .produto.invertido .texto { order: 0; } }
.produto .texto p + p { margin-top: 1rem; }
.produto .texto .lista-feita { margin-top: 2rem; }
.produto .nota { margin-top: 1.5rem; color: var(--tinta-2); }
.lista-feita { list-style: none; margin: 0; padding: 0; }
.lista-feita li { padding: 0.95rem 0 0.95rem 1.6rem; border-bottom: 1px solid var(--linha); position: relative; }
.lista-feita li:first-child { border-top: 1px solid var(--linha); }
.lista-feita li::before {
  content: ""; position: absolute; left: 0; top: 1.45rem;
  width: 0.7rem; height: 0.45rem; background: var(--azul);
  transform: skewX(var(--inclinacao));
}
.lista-feita strong { color: var(--navy); font-weight: 650; }

/* Moldura de tela (print real da base de Demonstração entra aqui). */
.tela {
  margin: 0; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; background: var(--papel);
  box-shadow: 0 1px 2px rgba(3, 21, 40, 0.06), 0 8px 24px rgba(3, 21, 40, 0.06);
}
.tela .reservado {
  aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center; padding: 1.5rem;
  color: var(--tinta-2); font-size: 0.9rem;
  background: repeating-linear-gradient(-45deg, var(--fundo) 0 12px, var(--papel) 12px 24px);
}
.tela.celular { max-width: 18rem; margin-inline: auto; border-radius: 28px; border-width: 6px; border-color: var(--navy); }
.tela.celular .reservado { aspect-ratio: 9 / 19; }
.tela figcaption { padding: 0.6rem 0.9rem; font-size: 0.85rem; color: var(--tinta-2); border-top: 1px solid var(--linha-2); }

/* Portal do cliente: vantagens em painéis, pouco texto. */
.portal-topo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: end; }
@media (max-width: 56rem) { .portal-topo { grid-template-columns: 1fr; } }
.numero-portal { color: var(--tinta-2); font-size: 0.95rem; border-left: 4px solid var(--azul); padding-left: 1.2rem; }
.numero-portal strong {
  display: block; font-stretch: 78%; font-weight: 760; font-size: clamp(3rem, 6vw, 4.2rem); line-height: 0.95; color: var(--navy);
  margin-bottom: 0.4rem;
}
.vitrine { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 56rem) { .vitrine { grid-template-columns: 1fr; } .palco { height: auto; min-height: 12rem; } .palco:has(.mini-portal) { height: 17rem; } }
.vitrine h3 { margin-top: 1.2rem; font-size: 1.3rem; }
.vitrine p { margin-top: 0.4rem; color: var(--tinta-2); }
.palco {
  height: 17rem; background: var(--fundo); border-radius: 14px; padding: 1.4rem;
  display: grid; place-items: center; position: relative; overflow: hidden;
}

/* Painel 1: o portal com a marca de cada empresa (cores fictícias, de propósito fora da paleta da Silógica). */
.mini-portal {
  width: min(100%, 17rem); background: var(--papel); border-radius: 10px; overflow: hidden; font-size: 0.78rem;
  box-shadow: 0 1px 2px rgba(3, 21, 40, 0.08), 0 14px 30px -14px rgba(3, 21, 40, 0.3); position: relative;
}
.mini-portal.atras { position: absolute; top: 1.1rem; right: -1.2rem; transform: rotate(5deg); width: 13rem; height: 10rem; box-shadow: 0 1px 2px rgba(3, 21, 40, 0.08); }
.palco .mini-portal:not(.atras) { transform: translate(-0.9rem, 1.1rem); }
.mp-barra { display: flex; align-items: center; gap: 0.5rem; background: var(--marca); color: var(--marca-texto); padding: 0.6rem 0.75rem; font-weight: 650; }
.mp-logo { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 4px; background: var(--marca-texto); color: var(--marca); font-size: 0.62rem; font-weight: 800; }
.mp-busca { margin: 0.7rem 0.75rem 0.3rem; padding: 0.4rem 0.6rem; border: 1px solid var(--linha); border-radius: 6px; color: var(--tinta-2); }
.mp-item { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--linha-2); }
.mp-item .prazo { font-size: 0.7rem; }
.mp-botao { margin: 0.7rem 0.75rem 0.8rem; padding: 0.45rem; text-align: center; border-radius: 6px; background: var(--marca); color: var(--marca-texto); font-weight: 650; }

/* Painel 2: a conversa do comprador. */
.mini-chat { width: 100%; font-size: 0.8rem; display: grid; gap: 0.45rem; align-content: center; }
.mini-chat .fala.pessoa { margin: 0; justify-self: end; max-width: 88%; background: var(--papel); padding: 0.45rem 0.7rem; color: var(--tinta); }
.mini-chat .consulta { margin: 0.1rem 0 0; font-size: 0.7rem; width: fit-content; }
.mini-chat .fala-ia { color: var(--tinta); }

/* Painel 3: a linha do tempo de um pedido fora do horário. */
.relogio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1rem; align-items: baseline; width: 100%; }
.relogio .hora { font-stretch: 78%; font-weight: 760; font-size: 2.6rem; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.relogio .hora.menor { font-size: 1.6rem; color: var(--tinta-2); margin-top: 1rem; }
.relogio .evento { color: var(--tinta-2); font-size: 0.9rem; }
.relogio .hora.menor + .evento { margin-top: 1rem; }

.prazo { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.prazo.ok { color: var(--ok); }
.prazo.previsao { color: var(--alerta); }

.extras { list-style: none; margin: 2.2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; }
.extras li { position: relative; padding-left: 1.2rem; font-weight: 550; color: var(--navy); }
.extras li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6rem; height: 0.4rem; background: var(--azul); transform: skewX(var(--inclinacao)); }
.portal .rotulo-exemplo { margin-top: 1.2rem; }

/* Etiqueta do que é IA: inclinada e violeta, a mesma do "Consultando…" do hero. */
.chip-ia {
  display: inline-block; margin-right: 0.35rem;
  font-size: 0.82rem; font-weight: 600; color: var(--violeta-texto); background: var(--violeta-fundo);
  padding: 0.2rem 0.75rem 0.2rem 0.8rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.35rem) 100%, 0.35rem 100%);
}

/* Contabilidade: dois caminhos à escolha (não é sequência). O da IA leva o violeta. */
.produto .texto .risco { margin-top: 1.5rem; font-weight: 600; color: var(--navy); }
.caminhos-contabeis { display: grid; gap: 1.5rem; }
.caminhos-contabeis > div { background: var(--papel); padding: 1.5rem; border-top: 3px solid var(--azul); border-radius: 0 0 var(--raio) var(--raio); }
.caminhos-contabeis > .ia { border-top-color: var(--violeta); }
.caminhos-contabeis .chip-ia { margin-bottom: 0.7rem; }
.caminhos-contabeis h3 { margin-bottom: 0.45rem; }
.caminhos-contabeis p { color: var(--tinta-2); }

/* O que o Silógica resolve: módulo, o que é e para quem serve. */
.resolve { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem 2rem; }
@media (max-width: 64rem) { .resolve { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .resolve { grid-template-columns: minmax(0, 1fr); } }
.resolve li { border-top: 3px solid var(--azul); padding-top: 1.1rem; }
.resolve h3 { font-size: 1.3rem; }
.resolve h3 a { color: inherit; text-decoration: none; }
.resolve h3 a:hover { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.resolve dl { margin: 0.8rem 0 0; }
.resolve dt { font-size: 0.82rem; font-weight: 650; color: var(--navy); margin-top: 0.7rem; }
.resolve dt:first-child { margin-top: 0; }
.resolve dd { margin: 0.15rem 0 0; color: var(--tinta-2); font-size: 0.95rem; }

/* IA + Silógica, dentro da seção de análise. */
.analise .miolo.combina-bloco { display: block; margin-top: clamp(3rem, 6vw, 4.5rem); }
.combina-bloco h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1.2rem; }

/* Prints reais nas molduras de tela. */
.tela img { display: block; width: 100%; height: auto; }
.tela.celular { max-width: 18rem; }
.produto .miolo + .miolo { display: block; }
.tela.larga { margin-top: 2.5rem; }

/* Operação: quatro cartões, cada um leva à página própria. */
.operacao h2 { margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 64rem) { .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .cartoes { grid-template-columns: minmax(0, 1fr); } }
.cartoes a { display: block; color: inherit; text-decoration: none; height: 100%; }
.cartoes a:hover h3 { color: var(--azul); }
.cartoes h3 { margin-top: 1rem; font-size: 1.35rem; }
.cartoes p { margin-top: 0.8rem; color: var(--tinta); font-size: 0.97rem; }
.cartao-img {
  height: 13rem; border-radius: 12px; background: var(--fundo); overflow: hidden;
  display: grid; place-items: start center; padding: 1.2rem 1.2rem 0;
}
.cartao-img img { width: 100%; height: auto; border-radius: 8px 8px 0 0; box-shadow: 0 1px 2px rgba(3, 21, 40, 0.08), 0 10px 24px -12px rgba(3, 21, 40, 0.25); }
.cartao-img.celular img { width: 62%; border-radius: 14px 14px 0 0; border: 4px solid var(--navy); border-bottom: 0; }
.cartao-img.larga { place-items: center; padding: 1rem; }
.cartao-img.larga img { width: auto; height: 100%; max-width: none; object-fit: cover; object-position: left center; border-radius: 8px; }
.operacao .rotulo-exemplo { margin-top: 1.5rem; }

/* Páginas de produto: a seção abre logo abaixo do cabeçalho. */
.pagina-produto .secao:first-child { padding-top: clamp(3rem, 6vw, 5rem); }

/* Chamada final */
.chamada { background: var(--azul); color: #fff; padding: clamp(3.5rem, 7vw, 5.5rem) 0; position: relative; overflow: hidden; }
.chamada h2 { color: #fff; }
.chamada p { color: #e6e9ff; margin-top: 1rem; font-size: 1.15rem; }
.chamada .botao { background: #fff; color: var(--azul); border-color: #fff; margin-top: 2rem; }
.chamada .email { font-size: 1rem; margin-top: 1rem; }
.chamada .email a { color: #fff; }
.chamada .botao:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
/* O bloco inclinado do logo, em violeta, entrando pela direita. */
.chamada::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -6rem; width: 30%;
  background: var(--violeta); transform: skewX(var(--inclinacao)); transform-origin: top;
}
.chamada .miolo { position: relative; z-index: 1; }
@media (max-width: 52rem) { .chamada::after { display: none; } }

/* Rodapé */
.rodape { padding: 3rem 0; font-size: 0.92rem; color: var(--tinta-2); border-top: 1px solid var(--linha); }
.rodape .miolo { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: center; }
.rodape img { height: 22px; width: auto; }
.rodape ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.rodape a { color: var(--tinta-2); }

@media (max-width: 30rem) {
  .hero .abertura { font-size: 1.08rem; }
  .hero .acoes { margin-top: 1.5rem; }
  .conversa { padding: 1rem 0.9rem 0.8rem; }
  .fala.ia th, .fala.ia td { padding: 0.35rem 0.3rem; font-size: 0.82rem; }
}

/* Texto corrido (privacidade, 404): coluna estreita para leitura. */
.texto-legal .miolo { max-width: 46rem; }
.texto-legal h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.texto-legal .datas { margin-top: 0.8rem; color: var(--tinta-2); font-size: 0.92rem; }
.texto-legal h2 { font-size: 1.5rem; margin-top: 2.4rem; }
.texto-legal p, .texto-legal ul { margin-top: 0.9rem; }
.texto-legal ul { padding-left: 1.2rem; }
.texto-legal li + li { margin-top: 0.4rem; }

/* Faixa para quem já é cliente: acesso ao sistema e ao suporte. */
.faixa-clientes { background: var(--navy); color: #c9d0e0; font-size: 0.85rem; }
.faixa-clientes .miolo { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.3rem 1.4rem; min-height: 2.2rem; padding-block: 0.35rem; }
.faixa-clientes a { color: #fff; text-decoration: none; font-weight: 550; }
.faixa-clientes a:hover { text-decoration: underline; text-underline-offset: 3px; }
.faixa-clientes a:focus-visible { outline-color: #fff; }
.faixa-clientes .curto { display: none; }
@media (max-width: 30rem) {
  .faixa-clientes .miolo { justify-content: flex-start; gap: 0.2rem 1.1rem; }
  .faixa-clientes .miolo > span, .faixa-clientes .longo { display: none; }
  .faixa-clientes .curto { display: inline; }
}

/* WhatsApp: verde da marca do WhatsApp, reconhecível (fora da paleta de propósito). */
.botao-whatsapp svg { flex: none; }
.chamada .botao.botao-whatsapp { background: #fff; color: var(--azul); }
.chamada .botao.botao-whatsapp svg path[fill="#fff"] { fill: #25d366; }
.chamada .botao.botao-whatsapp svg path[stroke="#fff"] { stroke: #25d366; }
.whatsapp-flutuante {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 10;
  width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; box-shadow: 0 6px 18px -6px rgba(3, 21, 40, 0.45);
}
.whatsapp-flutuante:hover { background: #1ebe5a; }
.whatsapp-flutuante:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
@media print { .whatsapp-flutuante { display: none; } }
@media (max-width: 30rem) { .whatsapp-flutuante { width: 3.1rem; height: 3.1rem; right: 0.9rem; bottom: 0.9rem; } }