/* O site do KonnektAI (Site-KonnektAI §3 e §5). Uma folha só, servida em /site.css para todas as páginas.
   As cores vêm da folha da marca (marca/README.md); o contraste dos pares de texto é medido no teste.
   **O escuro vem por último**: ele só redefine os tokens e o que muda de verdade, e nada claro vem depois dele. */
:root {
  color-scheme: light;
  --bg: #F5F0EC;
  --surface: #FFFFFF;
  --surface-2: #EDE3D9;
  --ink: #0E0E0E;
  --muted: #3C3C3D;
  --line: #DCCFC0;
  --accent: #E8A943;
  --on-accent: #0E0E0E;
  --link: #0E0E0E;
  --soon-bg: #FBF1DF;
  --soon-ink: #0E0E0E;
  --soon-mark: #E8A943;
  --danger: #A8201A;
  --danger-bg: #FBE9E7;
  --shadow: 0 1px 2px rgba(14, 14, 14, .06), 0 8px 24px rgba(14, 14, 14, .06);
  --radius: 16px;
  --gutter: 16px;
  --max: 72rem;
}

* { box-sizing: border-box; }

/* O que a página esconde fica escondido, mesmo quando a classe dá display ao elemento (o aviso, o tentar de novo, os
   campos da empresa e da pessoa). */
[hidden] { display: none !important; }

/* **O que a página rola até fica abaixo do cabeçalho fixo** (card 483): o foco no cartão de enviado, no formulário que
   volta e na âncora param 69 px (o cabeçalho e a borda) mais um respiro abaixo do topo da janela. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(69px + 1rem); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 "Nunito", "Arimo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--link); text-underline-offset: .2em; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: var(--gutter); top: -4rem; z-index: 20; padding: .5rem 1rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.skip-link:focus { top: .75rem; }
/* Só para o leitor de tela: o título que dá o nível certo aos h3 da vitrine nos Planos (axe heading-order). */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------------------ S1 cabeçalho */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
/* A marca é o lockup aprovado (marca/README.md), claro ou escuro conforme o tema; o nome vem no alt. */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.brand img { display: block; width: auto; height: 48px; }
/* As duas versões ficam no HTML, e o tema decide qual aparece — a escolha da pessoa, e não só o sistema (QA do #165). */
.brand .brand-dark { display: none; }
:root[data-theme="dark"] .brand-light { display: none; }
:root[data-theme="dark"] .brand-dark { display: block; }
.site-header ul { list-style: none; margin: 0; padding: 0; }
.site-nav { display: none; margin-left: .5rem; }
.site-nav ul { display: flex; gap: 1.25rem; }
.site-nav a { color: var(--muted); font-weight: 600; text-decoration: none; padding: .5rem 0; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: .45em; }
.header-actions { position: relative; display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* O seletor de idioma: a bandeira do atual, e a lista das três (o padrão da casca, language-switcher.tsx). */
/* Cada lista abre embaixo do botão que a abriu (o print do Marcio, 2026-10-09: ancoradas na direita do grupo, a do
   tema caía embaixo da bandeira e do Entrar). O tema e o idioma abrem a partir da borda esquerda do botão, porque o
   Entrar e o ☰ vêm à direita deles e a lista tem onde caber; o ☰, último do grupo, abre a partir da borda direita.
   Medido no navegador em 1440, 1024 e 390, nas três línguas: as três listas cabem inteiras na janela. Onde não cabem,
   o script da página as desliza só o necessário, sem tirá-las de cima do botão (ADR-029 §15.8), e mede de novo quando
   a janela muda: em 320 a do idioma e a do ☰; em 360, a do ☰ em /en e /es, porque o cabeçalho já passa da janela. */
details.language, details.theme { position: relative; }
details.menu { position: relative; }
details.language > summary, details.theme > summary, details.menu > summary { list-style: none; cursor: pointer; }
details.language > summary::-webkit-details-marker, details.theme > summary::-webkit-details-marker, details.menu > summary::-webkit-details-marker { display: none; }
details.language > summary, details.theme > summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
details.language > summary:hover, details.theme > summary:hover { background: var(--surface-2); }
/* O seletor de tema (Site-KonnektAI §3.1): o ícone da escolha atual, pelo data-theme que o script de cabeça pôs. */
.theme-icon { display: none; width: 22px; height: 22px; }
:root[data-theme="light"] .theme-icon-light,
:root[data-theme="dark"] .theme-icon-dark,
:root:not([data-theme]) .theme-icon-system { display: block; }
.theme-choice-icon { width: 20px; height: 20px; flex-shrink: 0; }
/* A bandeira é um círculo, com a faixa cortada e não esmagada. A regra geral img { height: auto } passava por cima do
   height do <img>, a altura vinha da proporção do SVG (640×448) e o círculo virava elipse — 28×19,6 no botão, 20×14 na
   lista (UX em produção do #171). O aspect-ratio faz a altura acompanhar a largura do atributo, e o object-fit corta as
   faixas no círculo. (A casca ainda não está assim: o SVG dela não corta, e a bandeira sai como lente — item à parte.) */
.flag { display: block; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.language-list, .theme-list, details.menu nav {
  position: absolute; top: calc(100% + .5rem); z-index: 30; min-width: 13rem; padding: .25rem 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.language-list, .theme-list { left: 0; }
details.menu nav { right: 0; }
.theme-list { list-style: none; margin: 0; }
.theme-list button { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.language-list a, .theme-list button, details.menu nav a { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .5rem 1rem; color: var(--muted); text-decoration: none; }
.language-list a:hover, .theme-list button:hover, details.menu nav a:hover { background: var(--surface-2); color: var(--ink); }
.language-list a[aria-current="page"], .theme-list button[aria-checked="true"], details.menu nav a[aria-current="page"] { background: var(--soon-bg); color: var(--ink); font-weight: 700; }
details.menu > summary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .875rem; border-radius: 999px;
  border: 1px solid var(--line); font-weight: 700;
}
.menu-icon { display: none; width: 22px; height: 22px; }
.sign-in {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .875rem; border-radius: 999px;
  border: 2px solid var(--ink); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.sign-in:hover { background: var(--ink); color: var(--bg); }
/* O cadastro no cabeçalho largo; no estreito ele está no menu. */
.header-cta { display: none; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; text-decoration: none; white-space: nowrap; }
.header-cta:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- seções */
section { padding: 3.5rem 0; }
main > section:nth-of-type(even) { background: var(--surface-2); }
.page-head { padding: 3rem 0 1rem; }
.page-head h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: .75rem; }
.page-head + section { padding-top: 1.5rem; }
.page-head ~ section + section { padding-top: 1rem; }
main > .page-head + section { background: transparent; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0; }
h2 { font-size: clamp(1.625rem, 4vw, 2.25rem); margin-bottom: .75rem; }
h3, .h3 { font-size: 1.125rem; margin-bottom: .375rem; letter-spacing: -.01em; }
.card h3 a { color: var(--ink); }
.intro { max-width: 44rem; color: var(--muted); font-size: 1.0625rem; margin: 0 0 2rem; }
p { margin: 0 0 1rem; }

.cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.5rem;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; text-decoration: none;
  box-shadow: var(--shadow);
}
.cta:hover { filter: brightness(1.05); text-decoration: underline; }
.secondary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 .5rem; font-weight: 700; color: var(--ink); }

.coming-soon {
  background: var(--soon-bg); color: var(--soon-ink);
  border-left: 4px solid var(--soon-mark); border-radius: 8px;
  padding: .625rem .875rem; font-size: .9375rem;
}

/* --------------------------------------------------------------------- S2 herói */
#hero { padding: 3rem 0 3.5rem; }
.hero { display: grid; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(2rem, 5.4vw, 3rem); margin-bottom: 1rem; }
.hero .sub { color: var(--muted); font-size: clamp(1.0625rem, 2.4vw, 1.25rem); max-width: 36rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1.5rem 0; }
.hero .coming-soon { max-width: 36rem; }

.screen { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.screen-bar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); font-weight: 800; }
.screen-bar span { width: .625rem; height: .625rem; border-radius: 50%; background: var(--line); }
.screen-bar strong { margin-left: .5rem; }
.screen-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.contacts { border-bottom: 1px solid var(--line); }
.contact { display: flex; justify-content: space-between; gap: .75rem; padding: .625rem 1rem; font-size: .875rem; border-top: 1px solid var(--line); }
.contact:first-child { border-top: 0; }
.contact.active { background: var(--surface-2); }
.contact b { display: block; }
.contact small { color: var(--muted); font-size: .8125rem; }
.conversation { padding: 1rem; display: grid; gap: .625rem; }
.bubble { max-width: 85%; padding: .5rem .75rem; border-radius: 12px; font-size: .9375rem; }
.bubble small { display: block; color: var(--muted); font-size: .75rem; font-weight: 700; }
.bubble.customer { background: var(--surface-2); justify-self: start; border-bottom-left-radius: 4px; }
.bubble.team { background: var(--soon-bg); justify-self: end; border-bottom-right-radius: 4px; }

/* ---------------------------------------------------------- cartões e grades */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.card p:last-child { margin-bottom: 0; }
.card > p { color: var(--muted); }
.card .coming-soon { margin-top: 1rem; }
.icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--accent); color: var(--on-accent); margin-bottom: .875rem; }
.icon svg { width: 1.375rem; height: 1.375rem; }
#feature-list > .wrap > .coming-soon, #connections .coming-soon, #today > .wrap > .coming-soon { margin-top: 1.5rem; }

/* A faixa dos canais da inicial (card 624): cinco cartões curtos, ícone e uma linha, cada um leva às Integrações. */
#channels { padding: 2.5rem 0; }
#channels h2 { margin-bottom: 1.25rem; }
.channel-strip { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.channel-strip a {
  display: flex; gap: .75rem; align-items: flex-start; height: 100%; padding: 1rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none;
}
.channel-strip a:hover { border-color: var(--accent); }
/* A seta diz que o cartão leva a algum lugar também no toque, onde não há hover (UX do card 624). */
.channel-strip a::after {
  content: ""; flex: none; align-self: center; margin-left: auto; width: .5rem; height: .5rem;
  border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg);
}
.channel-strip a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.channel-strip .icon { flex: none; width: 2.25rem; height: 2.25rem; margin: 0; }
.channel-strip strong { display: block; }
.channel-text { display: block; color: var(--muted); font-size: .9375rem; line-height: 1.4; }
#channels-list { scroll-margin-top: 6rem; }

.steps { counter-reset: passo; }
.steps li { counter-increment: passo; }
.steps li::before {
  content: counter(passo); display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .875rem;
  border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 800;
}

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.list li { position: relative; padding-left: 1.5rem; }
.list li::before { content: ""; position: absolute; left: .25rem; top: .6em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
.list.without li::before { background: var(--muted); border-radius: 2px; }
.note { color: var(--muted); font-size: .9375rem; margin-top: 1.5rem; max-width: 44rem; }

.side-by-side { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.side-by-side .card.with { border: 2px solid var(--accent); }

.list strong { color: var(--ink); }
/* O endereço da situação do pedido de exclusão (card 594): texto, e não link, e quebra no celular em vez de estourar a largura. */
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em; overflow-wrap: anywhere; }

.plan { max-width: 40rem; }
.plan .list { margin: 1rem 0 1.5rem; }

/* ------------------------------------------------------------ S10 perguntas */
.faq { max-width: 48rem; display: grid; gap: .75rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.25rem; font-weight: 700; position: relative; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.25rem; top: .875rem; font-size: 1.25rem; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details > p { padding: 0 1.25rem 1.25rem; margin: 0; color: var(--muted); }
.faq details > p.coming-soon { margin: 0 1.25rem 1.25rem; padding: .625rem .875rem; color: var(--soon-ink); }

/* ------------------------------------------------------- faixa final (todas) */
.band { background: var(--accent); color: var(--on-accent); text-align: center; }
.band h2 { margin-bottom: .75rem; }
.band p { max-width: 40rem; margin-left: auto; margin-right: auto; }
.band .cta { background: var(--on-accent); color: var(--accent); }
.band .secondary { color: var(--on-accent); }
.actions-center { justify-content: center; }

/* ------------------------------------- "Usa outro sistema de gestão?" e Para quem é (card 698) */
/* Em destaque, e não escondido (Marcio, 29/10): a faixa da home, o cartão das Integrações e do Para quem é, e a linha dos Planos. */
main > section.other-system-band { background: var(--soon-bg); color: var(--soon-ink); border-block: 2px solid var(--accent); text-align: center; }
.other-system-band h2 { margin-bottom: .75rem; }
.other-system-band p { max-width: 44rem; margin-left: auto; margin-right: auto; }
.card.other-system { border: 2px solid var(--accent); max-width: 44rem; margin-top: 1.5rem; }
.card.other-system .actions { margin-bottom: 0; }
.list li.other-system { font-weight: 600; }
#audience p { max-width: 44rem; }
.vertical { display: flex; flex-direction: column; }
.lines { color: var(--muted); font-size: .9375rem; }
.lines strong { color: var(--ink); }
.sample-conversation { display: grid; gap: .5rem; margin: .25rem 0 1rem; }
.sample-conversation .bubble { margin: 0; }
.vertical-note { color: var(--muted); font-size: .875rem; margin: auto 0 0; }

/* --------------------------------------------------------------- S12 rodapé */
.site-footer { padding: 3rem 0 6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }
.site-footer .wrap { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.site-footer h2 { font-size: 1rem; margin-bottom: .75rem; color: var(--ink); letter-spacing: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer .signature { grid-column: 1 / -1; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.site-footer .email { overflow-wrap: anywhere; }
/* As redes (card 884): o ícone na cor do link do rodapé, 44 px de alvo de toque, e o foco é o do site. */
.site-footer .social { display: flex; flex-wrap: wrap; gap: .25rem; margin: .25rem 0 0 -.625rem; }
.site-footer .social a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border-radius: 10px; }
.site-footer .social a:hover { color: var(--ink); background: var(--surface-2); }
.site-footer .social-icon { width: 1.5rem; height: 1.5rem; }

/* Os formulários do site: o pedido de acesso, a confirmação e o contato (SPEC-036 fatia 10). 16px nos campos: o iOS
   não amplia a página quando o foco entra. O erro vem embaixo do campo, com a borda e o texto na cor de erro. */
.request-form { max-width: 40rem; }
.request-form .h3 { margin-bottom: .5rem; }
.note-required { color: var(--muted); font-size: .9375rem; }
.form-body { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.25rem; }
.form-section, .form-subsection { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }
.form-section > legend, .form-subsection > legend { padding: 0; margin-bottom: 1rem; font-weight: 800; font-size: 1.0625rem; }
/* A linha entre as seções fica embaixo da anterior: no topo de um fieldset, ela cruzaria a legenda. */
.form-section:has(+ .form-section) { padding-bottom: 1.5rem; background: linear-gradient(var(--line), var(--line)) bottom / 100% 1px no-repeat; }
.form-subsection { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }
.form-subsection > legend { float: left; width: 100%; margin-bottom: .25rem; font-size: 1rem; }
.form-section [hidden], .form-subsection[hidden], .form-body [hidden] { display: none; }
[data-party], [data-segment-other] { display: grid; gap: 1rem; }
.field { display: grid; gap: .375rem; }
.field label { font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .625rem .75rem; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--muted); border-radius: 10px;
}
.field textarea { resize: vertical; min-height: 9rem; }
/* Desligado tem cara de desligado: fundo apagado, borda suave e o cursor que diz que não dá (QA do #162). */
.field input:disabled, .field select:disabled { opacity: .6; cursor: not-allowed; background: var(--surface-2); border-color: var(--line); }
.form-body:disabled textarea, .form-body:disabled .check input, .form-body:disabled .choice input { cursor: not-allowed; }
.field:has(:disabled) label { cursor: not-allowed; }
/* A borda de 2 px do campo com erro é desenhada pela sombra, sem mudar o tamanho da caixa: no WebKit, o campo com o foco que
   muda de tamanho é revelado pelo próprio motor num salto que corta a rolagem suave até ele, e o rótulo parava sob o
   cabeçalho (card 483, 2ª QA do KonnektAI #462). */
.field [aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); outline-color: var(--danger); }
.check [aria-invalid="true"] { border: 2px solid var(--danger); outline-color: var(--danger); }
/* Em alto contraste o sistema apaga a sombra, e o campo com erro ficava igual ao válido (3ª QA do KonnektAI #462): o erro
   ganha um contorno de 2 px por dentro da caixa, que não muda o tamanho dela; com o foco, vale o anel de foco. */
@media (forced-colors: active) { .field [aria-invalid="true"]:not(:focus-visible) { outline: 2px solid CanvasText; outline-offset: -2px; } }
.required { color: var(--danger); font-weight: 800; }
.optional { color: var(--muted); font-weight: 400; }
.hint { margin: 0; color: var(--muted); font-size: .9375rem; }
.hint:empty, .field-error:empty { display: none; }
.field-error { margin: 0; color: var(--danger); font-weight: 700; font-size: .9375rem; }
/* O telefone com o país (ADR-048 R8.1, card 561), no desenho do campo de telefone da Common: o seletor com a bandeira do
   país escolhido por dentro, à esquerda, e o número ao lado, com o resto da linha. **Fechado, o seletor é só a bandeira, o
   código e a seta** (card 561, Marcio na homologação, 29/10 09:22): o `.phone-code` é quem dá a largura, e o `<select>`, sem
   a aparência do sistema e com o texto transparente, cobre a caixa inteira, para o toque e o teclado abrirem a lista, que
   continua com o nome de cada país. A bandeira, o código e a seta ficam por cima, sem pegar o clique. */
.phone-control { display: flex; flex-wrap: wrap; gap: .375rem; }
.phone-country { position: relative; display: flex; flex: none; color: var(--muted); }
.field .phone-country select {
  position: absolute; inset: 0; width: 100%; -webkit-appearance: none; appearance: none; color: transparent; cursor: pointer;
}
/* A lista aberta do Chrome e do Firefox herda a cor do seletor: as opções voltam à cor do texto. */
.field .phone-country option { color: var(--ink); background: var(--bg); }
.phone-code {
  position: relative; z-index: 1; display: flex; align-items: center; min-height: 48px; padding: 0 1.75rem 0 2.5rem;
  border: 1px solid transparent; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
  pointer-events: none;
}
.phone-country::after {
  content: ''; position: absolute; z-index: 1; right: .75rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.375rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none;
}
.phone-flag {
  position: absolute; z-index: 1; left: .625rem; top: 50%; width: 1.375rem; height: 1rem; margin-top: -.5rem; overflow: hidden;
  border-radius: 2px; box-shadow: 0 0 0 1px var(--line); pointer-events: none;
}
.phone-flag svg { display: block; width: 100%; height: 100%; }
/* O número fica ao lado enquanto cabe o do Brasil inteiro, `(11) 98888-7777`; na janela mais estreita (o responsável financeiro
   em 320, dentro da caixa do fieldset), desce para a linha de baixo com a largura toda, em vez de cortar o que se digitou. */
.phone-control input { flex: 1 1 10.25rem; min-width: 0; font-variant-numeric: tabular-nums; }
.phone-control:has(:disabled) .phone-flag, .phone-control:has(:disabled) .phone-code { opacity: .6; }
/* No contraste alto do Windows, a cor do texto é forçada e o nome do país apareceria sob o código: o seletor sai do ajuste,
   com o fundo e a borda do sistema e o texto ainda transparente. */
@media (forced-colors: active) {
  .field .phone-country select { forced-color-adjust: none; color: transparent; background: Canvas; border-color: CanvasText; outline-color: Highlight; }
  .field .phone-country option { color: CanvasText; background: Canvas; }
  .phone-code { color: CanvasText; }
}
.choice-row { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.choice {
  display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .625rem .875rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-weight: 700;
}
.choice:has(:checked) { border: 2px solid var(--accent); background: var(--soon-bg); }
.choice input, .check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: .75rem; row-gap: .25rem; align-items: start; }
.check label { font-weight: 700; cursor: pointer; }
.check .hint, .check .field-error { grid-column: 2; }
.consent-links { margin: -.5rem 0 0 calc(22px + .75rem); font-size: .9375rem; }
.consent-notice { margin: .5rem 0 0; font-size: .9375rem; color: var(--muted, inherit); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.captcha-notice { margin: 0; color: var(--muted); font-size: .875rem; }
.grecaptcha-badge { visibility: hidden; }
.form-actions { margin: 0; }
.form-actions .cta { border: 0; font: inherit; font-weight: 800; cursor: pointer; }
.form-actions .cta:disabled { opacity: .6; cursor: not-allowed; }
.cta[aria-busy="true"] { cursor: progress; }
.button-secondary {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.125rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-weight: 700;
}
.button-secondary:hover { background: var(--ink); color: var(--bg); }
.form-status { margin: 0; color: var(--muted); }
.form-status:empty { display: none; }
.form-alert { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 10px; border-left: 4px solid var(--danger); background: var(--danger-bg); color: var(--ink); }
.form-alert p { margin: 0; }
.form-alert .button-secondary { margin-top: .75rem; }
.form-alert[hidden] { display: none; }
.form-done { max-width: 40rem; border: 2px solid var(--accent); }
.form-done [data-sent-to] { overflow-wrap: anywhere; }
.form-done:focus { outline: none; }
.form-done:focus-visible { outline: 3px solid var(--accent); }
.request-form:focus { outline: none; }

.not-found { padding: 3rem 0; }
.not-found section { padding: 2rem 0 0; }
.not-found h1 { font-size: 1.75rem; margin-bottom: .5rem; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- larguras */
@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .screen-body { grid-template-columns: 13rem minmax(0, 1fr); }
  .contacts { border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  section { padding: 4.5rem 0; }
}
@media (min-width: 1180px) {
  /* Sete itens no menu desde o Para quem é (card 698): o vão e a letra do menu encolhem um pouco para a linha caber em 1180,
     nas três línguas, sem quebrar nenhum item (o espanhol era o mais largo). */
  .site-nav { display: block; margin-left: .25rem; }
  .site-nav ul { gap: .75rem; }
  .site-header .wrap { gap: .75rem; }
  .site-nav a { font-size: .9375rem; }
  details.menu { display: none; }
}
/* O Comece agora do cabeçalho só a partir de 1440 (QA do PR 584, P2): com sete itens no menu, de 1180 a 1439 ele passava da
   margem no Chromium e saía da janela no WebKit (até 101 px no espanhol). Abaixo disso, fica o Comece agora do herói. */
@media (min-width: 1440px) {
  .header-cta { display: inline-flex; }
}
/* O cabeçalho estreito (dívida de 2026-10-09: a 360 e a 320 a linha passava da janela até 50 px e cortava o Menu, sem
   rolagem que o denunciasse, porque o corpo tem overflow-x: hidden). Cabem a marca, o tema, o idioma, o Entrar e o ☰,
   todos com 44 px de alvo: o Menu vira o ícone ☰, com o nome "Menu" lido pelo leitor de tela; a marca e os vãos
   encolhem. Medido no navegador em 320, nas três línguas e nos dois temas (scripts/tests/hotsite-header.browser.test.mjs). */
@media (max-width: 400px) {
  .site-header .wrap { gap: .375rem; }
  /* A imagem encolhe para 32, e o link continua com 44 px de altura para o dedo (UX do #171); só a altura cresce,
     a largura é a da imagem, e a sobra de /es em 320 não muda. */
  .brand { min-height: 44px; }
  .brand img { height: 32px; }
  .header-actions { gap: .25rem; }
  .sign-in { padding: 0 .625rem; }
  details.menu > summary { width: 44px; padding: 0; }
  .menu-icon { display: block; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Quem pediu menos movimento não recebe movimento. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* O claro escolhido: os tokens são os do :root; só o color-scheme precisa dizer, para o navegador não pintar
   campos e barras de rolagem no escuro do sistema. */
:root[data-theme="light"] { color-scheme: light; }

/* **O escuro por último** (memória "tema escuro vem por último"; QA do KonnektAI #145): nenhuma regra clara depois
   daqui. Ele vem de dois lugares, com os mesmos tokens (o teste confere): a escolha da pessoa, e o sistema — este só
   quando ela não escolheu (Site-KonnektAI §3.1). No escuro, o texto discreto é a areia, nunca o cinza médio. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E0E0E;
  --surface: #1A1A1B;
  --surface-2: #232324;
  --ink: #EDE3D9;
  --muted: #DCCFC0;
  --line: #3C3C3D;
  --accent: #E8A943;
  --on-accent: #0E0E0E;
  --link: #E8A943;
  --soon-bg: #2A2418;
  --soon-ink: #EDE3D9;
  --soon-mark: #E8A943;
  --danger: #FFB4AB;
  --danger-bg: #3A1A17;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0E0E0E;
    --surface: #1A1A1B;
    --surface-2: #232324;
    --ink: #EDE3D9;
    --muted: #DCCFC0;
    --line: #3C3C3D;
    --accent: #E8A943;
    --on-accent: #0E0E0E;
    --link: #E8A943;
    --soon-bg: #2A2418;
    --soon-ink: #EDE3D9;
    --soon-mark: #E8A943;
    --danger: #FFB4AB;
    --danger-bg: #3A1A17;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
  :root:not([data-theme]) .brand-light { display: none; }
  :root:not([data-theme]) .brand-dark { display: block; }
}