/* ==========================================================================
   Caelio — folha de estilo da home
   Tokens conforme o manual de marca v1.0 (files/manual-de-marca-caelio.md)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes
   Manrope (títulos/marca) e Inter (texto) — ambas OFL, uso comercial livre.
   As duas são VARIÁVEIS: um .woff2 por família cobre todos os pesos que o
   site usa (400 a 700), em assets/fonts/. Subconjunto latino, que tem os
   acentos do português. Vieram do Fontsource (npm @fontsource-variable),
   em 23/09/2026 — até então a pasta não existia, as quatro fontes davam 404
   e o site aparecia na fonte do sistema. Servir local (e não pelo Google
   Fonts) evita requisição a terceiro — questão de LGPD e de velocidade.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-variavel.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variavel.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Avisa o navegador que a página existe nos dois esquemas. Sem isto ele
     desenha a barra de rolagem, o cursor de texto e a seleção sempre no
     esquema CLARO — e no modo escuro a calha da barra fica branca, colada
     numa página escura. Os campos de formulário não mudam: `.campo-form
     input` e `.hist input` já pintam fundo e cor por token. */
  color-scheme: light dark;

  /* ---- A marca, em UM lugar ------------------------------------------
     O cabecalho e o selo de /contratar e /acesso desenham a mesma marca em
     tamanhos diferentes. Ate 10/09/2026 os numeros estavam escritos nos dois
     blocos, e o selo multiplicava um `42px` literal por `--escala`: aumentar
     o logo do cabecalho deixaria o selo para tras, sem nada acusando.

     Agora ha uma base so. O selo continua multiplicando por `--escala`, mas
     multiplica ESTES valores. Aumentar a marca = mexer aqui, uma vez.

     As proporcoes entre os quatro sao as do manual (§6: o descritor a <=30%
     da altura do wordmark) e foram mantidas ao subir de 42px para 50px. */
  /* O simbolo novo pede duas cores por variavel (o arquivo traz fallback
     igual a estes valores). Amarradas aos tokens do site para que a marca
     nao possa divergir da paleta. Os quatro pontos escuros seguem
     `currentColor` — e por isso o mesmo markup serve o cabecalho escuro e
     o selo claro, sem segunda versao do arquivo. */
  --caelio-linha: var(--nevoa);
  --caelio-ouro:  var(--dourado-fixo);

  --marca-simbolo:        50px;
  --marca-gap:            .83rem;
  --marca-nome:           1.66rem;
  --marca-descritor:      .69rem;
  --marca-descritor-topo: .33rem;

  /* Paleta — manual §3 */
  --azul-noite:  #1B1F32;
  --dourado:     #C8952E;
  --nevoa:       #8A90A6;
  --secundario:  #5C6178;
  --fundo:       #FFFFFF;
  /* A faixa alternada estava a 8 pontos de canal do branco — contraste 1,073,
     que na prática é faixa nenhuma: o que se via era só a borda dos cartões.
     1,133 continua discreto (o manual pede fundo quieto) e desta vez aparece,
     e é ele que dá ao cartão branco alguma coisa de onde se levantar. */
  --fundo-alt:   #F1F1EC;

  /* Derivados */
  --texto:       var(--azul-noite);
  --borda:       #E4E5E9;
  --borda-forte: #D2D4DC;
  --superficie:  #FFFFFF;

  /* Tipografia */
  --fonte-titulo: 'Manrope', 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
  --fonte-texto:  'Inter', 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;

  /* Ritmo */
  /* A RÉGUA DO SITE — 1120px até 13/09/2026, quando o usuário pediu que
     "todo site deve ficar em tela toda".

     Alargar isto é seguro por um motivo que já estava no lugar: NENHUM bloco
     de prosa depende desta régua. Cada um tem a medida dele —
     `.secao__cabeca` 46rem, `.secao__texto` 40rem, `.perguntas` 46rem,
     `.pergunta__resposta` 40rem, `.chamada__texto` 34rem, `.demo-cabeca`
     52rem, `.hero__texto-bloco` 40rem. Quem cresce são as GRADES (produtos,
     recursos, rodapé) e o quadro da demonstração, que é onde a largura vira
     coluna à mostra. Linha de texto de 1500px seria ilegível, e por isso
     nenhuma existe.

     ⚠️ O TETO DE 1600px É DELIBERADO, não preguiça. Sem ele, num monitor
     ultrawide a fileira de produtos viraria três cartões de 800px e a OS mais
     à direita do quadro ficaria longe demais da mão. É o mesmo teto do painel
     da demonstração, de propósito: os dois têm de parar no mesmo lugar, senão
     o quadro fica mais largo que a seção acima dele. Para tirar o teto, mude
     aqui — e mude lá junto. */
  --largura: 1600px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Era clamp(4.5rem, 9vw, 8rem) — 128px em tela de notebook, em CIMA e
     EMBAIXO de cada seção. Sozinho já era generoso; onde duas faixas se
     encontravam virava 256px de nada, uma tela inteira de fundo cinza entre
     um assunto e o outro. Medido em 11/09/2026, com as duas capturas que
     mostraram o defeito: a emenda Sob Medida → Perguntas e o fim do FAQ.
     88px continua sendo respiro de seção e deixa de ser buraco. */
  --secao-y: clamp(3.25rem, 6.5vw, 5.5rem);
  --raio: 14px;

  --sombra: 0 1px 2px rgba(27, 31, 50, .04), 0 8px 24px rgba(27, 31, 50, .05);
  --sombra-alta: 0 2px 4px rgba(27, 31, 50, .05), 0 18px 44px rgba(27, 31, 50, .09);

  /* Tokens FIXOS — não invertem no modo escuro.
     O cabeçalho, o banner e o rodapé são superfícies institucionais: ficam
     azul-noite nos dois modos, como a faixa dos portais de serviço. Se eles
     usassem --azul-noite (que vira quase branco no escuro) a marca sumiria. */
  --azul-noite-fixo: #1B1F32;
  --azul-nav:        #22273D;   /* barra de navegação, um degrau acima */
  --dourado-fixo:    #C8952E;
}

/* Modo escuro — manual §3 */
@media (prefers-color-scheme: dark) {
  :root {
    --azul-noite:  #F5F6FA;
    --dourado:     #E0B44A;
    --nevoa:       #6E7488;
    --secundario:  #A2A8BC;
    --fundo:       #141724;
    --fundo-alt:   #1A1E2E;

    --texto:       #F5F6FA;
    --borda:       #2A2F42;
    --borda-forte: #39405A;
    /* Era #1A1E2E, o MESMO valor de --fundo-alt: contraste 1,000, ou seja o
       cartão desaparecia dentro da faixa alternada e só a borda o denunciava.
       A escada agora sobe: página #141724 → faixa #1A1E2E → cartão #232839. */
    --superficie:  #232839;

    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .4);
  }
}

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

/* --------------------------------------------------------------------------
   `hidden` PRECISA VENCER, e sem isto ele perde.

   O navegador esconde `[hidden]` com uma regra de folha de ESTILO DO AGENTE,
   que qualquer `display` escrito por nós derruba — e a gente escreve muitos.
   O resultado é um elemento com o atributo `hidden` posto, a propriedade
   `.hidden` valendo `true`, e ele lá na tela, ocupando espaço.

   ⚠️ ISSO NÃO É TEORIA: achado em 13/09/2026, e já estava no ar em DOIS
   lugares. Em `/contratar`, o campo da variante ("A oficina tem lava-jato?")
   nascia `hidden` dentro de um `.campo-form { display: grid }` e aparecia
   VAZIO, antes de qualquer sistema ser escolhido — um menu sem opção nenhuma
   no meio do formulário. E as setas do quadro da demonstração, num
   `.demo-rolagem { display: flex }`, não sumiam quando não havia o que rolar.

   Os dois passaram por conferição e passaram, porque o teste lia a
   PROPRIEDADE (`el.hidden`), que estava certa, e não o que a tela mostrava.
   A lição vale para o próximo teste: conferir `getComputedStyle().display`,
   não o atributo.

   `!important` é o ponto da regra, não um atalho: ela existe justamente para
   ganhar de `display` escrito em qualquer classe, agora e no futuro.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 500;      /* manual §4 — nunca 600/700 na marca e nos títulos */
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; }

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--azul-noite);
  color: var(--fundo);
  padding: .75rem 1.25rem;
}
.pular-para-conteudo:focus { left: 0; }

/* --------------------------------------------------------------------------
   Marca
   -------------------------------------------------------------------------- */
.marca { display: inline-flex; align-items: center; gap: var(--marca-gap); }

/* 50px desde 10/09/2026 (era 42, e antes disso 34): o símbolo é a única parte
   da marca que sobrevive ao cabeçalho encolhido e ao favicon, e pequeno demais
   ele lê como ícone de apoio ao lado do nome em vez de marca. O descritor abaixo passou a ser
   'tecnologia' — o wordmark inteiro é `caelio tecnologia`, e 'software de
   gestão' saiu de marca para virar o que sempre foi: o que a empresa
   vende, dito no <title> e na descrição. */
/* ⚠️ `height: auto`, e nao a mesma medida da largura: o simbolo novo tem
   viewBox 465x473 — quase quadrado, nao quadrado. Forcar altura igual o
   achataria 1,7%. E `--marca-simbolo` passou a valer a LARGURA. */
.marca__simbolo {
  width: var(--marca-simbolo);
  height: auto;
  flex: none;
  display: block;
}

/* Área de proteção — manual §5: margem livre de uma unidade de ponto */
.marca__texto { display: flex; flex-direction: column; line-height: 1; }

.marca__nome {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: var(--marca-nome);
  letter-spacing: -0.02em;
  text-transform: lowercase;   /* manual §4 — nunca caixa alta */
  color: var(--texto);
}

.marca__descritor {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--marca-descritor);   /* ≤30% da altura do wordmark — §6 */
  letter-spacing: .18em;
  color: var(--secundario);
  margin-top: var(--marca-descritor-topo);
}

/* ==========================================================================
   CABEÇALHO INSTITUCIONAL
   UMA faixa só, no modelo dos portais de serviço brasileiros (referência
   declarada: caixa.gov.br). Da esquerda para a direita:

     marca · · · · · · · · · · Área do cliente · Quero contratar · ☰

   O ☰ absorveu a antiga barra de utilidades (removida em 20/08/2026), que
   repetia no topo destinos que a navegação já tinha e gastava 38px presos na
   tela. Depois absorveu o resto.

   A conta de destinos à vista foi caindo: três até 09/09/2026, quando
   "Parceiros" saiu do produto; dois em 10/09, quando "Produtos" e
   "Demonstração" saíram a pedido do usuário. Hoje são ZERO — só o ☰ e as duas
   ações. O teto que justificava a régua da Caixa (sete destinos não cabem em
   1120px) deixou de ser o problema: o problema virou o oposto, e a resposta é
   que tudo mora no painel.

   Duas coisas morreram nessa mudança e não devem voltar sem motivo:

     · a GAVETA de 900px (`.nav__lista` empilhada) e o `.nav__alternar`, um
       SEGUNDO hambúrguer na direita. Com um menu só, dois ícones iguais em
       pontas opostas da barra abriam coisas diferentes — agora é um botão, no
       mesmo lugar, em qualquer largura;
     · o `.nav__menu-rotulo`, que existia para dar nome ao ☰ dentro da gaveta.
       Sem gaveta, o nome vive no `aria-label`.
   ========================================================================== */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--azul-noite-fixo);
  color: #FFF;
}

/* ---- a linha do cabeçalho ---- */
.cabecalho__interno {
  position: relative;   /* é ele que ancora os painéis e a gaveta */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
  transition: min-height .2s ease;
}

/* Rolou: o cabeçalho encolhe. Uma faixa presa no topo é barata; ainda assim,
   60px devolvem tela de leitura sem tirar a navegação do alcance. */
.cabecalho[data-rolou='true'] .cabecalho__interno { min-height: 60px; }
.cabecalho[data-rolou='true'] .marca__simbolo { width: 34px; height: 34px; }
/* O DESCRITOR FICA, mesmo com a faixa em 60px. Ele saía daqui até 15/09/2026,
   e o efeito era que o wordmark do topo — a primeira marca que o visitante vê
   — ficava sendo `caelio` enquanto o do rodapé era `caelio tecnologia`: duas
   marcas na mesma página. A conta de altura fecha com folga: nome 26,6px +
   respiro 5,3px + descritor 11px = 43px numa faixa de 60. */

/* Na faixa escura o wordmark e o descritor invertem. */
.cabecalho .marca__nome     { color: #FFF; }
.cabecalho .marca__descritor{ color: rgba(255, 255, 255, .55); }

/* Branco CHEIO desde 10/09/2026. Eram 82%, e faziam sentido para o simbolo
   antigo — traco de 1,6px a 55% de opacidade, desenho de proposito suave.
   O simbolo novo tem traco grosso e pontos grandes, e a arte entregue traz a
   negativa em #FFFFFF. Dimuir aqui seria discordar da propria arte. */
.cabecalho .marca__simbolo  { color: #FFF; }

.cabecalho__acoes { display: flex; align-items: center; gap: 1rem; }

/* ---- navegação ---- */
/* Ate 10/09/2026 a <nav> ficava a ESQUERDA, com `margin-right: auto`
   empurrando a acao primaria para a ponta. Hoje ela e um ☰ so, e mora dentro
   de `.cabecalho__acoes`: a leitura passou a ser identidade a esquerda, tudo
   o que se CLICA junto a direita. O `space-between` do
   `.cabecalho__interno` ja separa os dois — nao ha mais o que empurrar. */
.nav { display: flex; }

.nav__lista {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0; padding: 0;
}

/* O <li> é flex para o item ocupar a altura inteira da faixa. NÃO é
   `position: relative`: se fosse, o painel nasceria sob o item que o abriu, e
   com a marca e o ☰ à esquerda o painel de Produtos começaria a 263px e
   terminaria a 999px — 113px fora da tela em 901px de largura. Ancorado na
   linha do cabeçalho, ele começa na borda do container, como o da Caixa. */
.nav__lista > li { display: flex; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .95rem 1.15rem;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font-family: var(--fonte-texto);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.nav__link:hover,
.nav__link[aria-expanded='true'] {
  color: #FFF;
  background: rgba(255, 255, 255, .06);
  border-bottom-color: var(--dourado-fixo);
}

/* Página corrente: a régua dourada fica acesa. */
.nav__link[aria-current='page'] {
  color: #FFF;
  border-bottom-color: var(--dourado-fixo);
}

/* O ☰. Só o ícone, como o da Caixa — quem o nomeia é o `aria-label`. */
.nav__link--menu { padding-inline: 1rem; }



/* ---- Mega-menu ----
   Painel claro sobre a barra escura: o contraste é o que sinaliza "isto é
   conteúdo, não mais navegação". Fechado por `hidden`, não por opacidade —
   assim o leitor de tela também não o encontra. */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  /* 100% = a largura do container, então o painel nunca passa da borda. */
  width: min(46rem, 100%);
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--dourado);
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: var(--sombra-alta);
  padding: 1.5rem;
}


/* ---- painel institucional ----
   O painel de produtos vende (nome + uma linha de explicação); este apenas
   encaminha. Por isso é lista pelada com um título por coluna, e não cartão:
   é o mesmo par Institucional/Atendimento do painel do ☰ da Caixa. */
/* O ☰ mudou da esquerda para a direita da barra, e o painel acompanha:
   ancorado pela direita, ele cai debaixo do botao em vez de atravessar a
   barra inteira. Ficou mais largo porque ganhou a terceira coluna (Produtos),
   que veio do painel que "Produtos" tinha para si. */
.mega--institucional {
  left: auto;
  right: 0;
  width: min(44rem, 100%);
}

/* Eram duas colunas fixas; com Produtos sao tres. `auto-fit` em vez de
   `repeat(3, ...)` para que no celular elas empilhem sozinhas, sem uma regra
   a mais la embaixo. */
.mega__colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 2rem;
}

.mega__titulo {
  font-family: var(--fonte-titulo);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nevoa);
  margin-bottom: .55rem;
}

.mega__lista { list-style: none; margin: 0; padding: 0; }
.mega__lista a {
  display: block;
  padding: .5rem .6rem;
  margin-left: -.6rem;
  border-radius: 8px;
  font-size: .93rem;
  color: var(--texto);
  transition: background .16s ease;
}
.mega__lista a:hover { background: var(--fundo-alt); }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--fonte-texto);
  font-size: .95rem;
  font-weight: 600;
  /* Entrelinha de botão, não de parágrafo. Sem esta linha o botão herdava o
     1.65 do corpo do texto: 23px de altura de linha para uma palavra só,
     que somados ao respiro davam 44px de botão numa faixa de 84px. */
  line-height: 1.2;
  padding: .8rem 1.4rem;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease,
              background .16s ease, border-color .16s ease;
  white-space: nowrap;
}

.btn--principal {
  background: var(--azul-noite);
  color: var(--fundo);
}
@media (prefers-color-scheme: dark) {
  .btn--principal { background: #F5F6FA; color: #141724; }
}
.btn--principal:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }

.btn--linha {
  background: transparent;
  color: var(--texto);
  border-color: var(--borda-forte);
}
.btn--linha:hover { border-color: var(--texto); transform: translateY(-1px); }

.btn--pequeno { padding: .55rem 1.05rem; font-size: .88rem; }

/* O `.btn--linha` pinta com `--texto` e `--borda-forte`, que sao tokens do
   tema claro. No cabecalho — que fixa `--azul-noite-fixo` e texto branco sem
   virar os tokens — isso daria azul-noite sobre azul-noite: um botao que
   existe no DOM e nao existe na tela. */
.cabecalho__acoes .btn--linha {
  color: #FFF;
  border-color: rgba(255, 255, 255, .32);
}
.cabecalho__acoes .btn--linha:hover { border-color: #FFF; }

/* Ação primária sobre fundo escuro (cabeçalho, banner, chamada final).
   É o único uso do dourado como PREENCHIMENTO. Texto azul-noite sobre o
   dourado passa 8:1 de contraste.

   ⚠️ Este comentário dizia "acento, um por tela — manual §3", e desde
   10/09/2026 não é mais verdade: a home mostra dois, "Quero contratar" no
   cabeçalho e "Ver o sistema funcionando" no banner. Foi DECISÃO DO USUÁRIO,
   tomada depois de eu levantar que os dois disputam a mesma atenção e propor
   que o do banner virasse `btn--linha`.

   Está escrito aqui porque a regra antiga, deixada de pé, faria a próxima
   pessoa "consertar" o que ninguém pediu para consertar. Quem quiser rever a
   decisão, reveja com o usuário — não com o comentário. */
.btn--dourado {
  background: var(--dourado-fixo);
  color: var(--azul-noite-fixo);
  font-weight: 600;
}
.btn--dourado:hover {
  background: #D9A63F;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(200, 149, 46, .28);
}


/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */
.secao { padding-block: var(--secao-y); }

/* --------------------------------------------------------------------------
   Faixas de conteúdo alinhadas ao conteúdo

   A faixa de fundo ia de ponta a ponta da tela (0 → 1265) enquanto tudo o que
   ela continha vivia entre 113 e 1153 — a mesma régua do card do quadro e da
   fileira de acesso rápido, do "Área do cliente" ao "Falar com a gente". Duas
   larguras concorrentes na mesma página, e a de baixo era a que o olho usava
   como referência.

   Agora a faixa nasce e morre na régua do conteúdo. É um pseudo-elemento, e
   não `background` na seção, porque o fundo precisa cobrir também o respiro
   vertical da seção — `background-clip: content-box` cortaria junto com ele.

   A conta bate com a do `.container`: largura máxima menos as duas margens.
   Vale para as faixas de CONTEÚDO. O cabeçalho, o banner e o rodapé seguem de
   ponta a ponta: são a moldura institucional da página, não conteúdo dela.
   -------------------------------------------------------------------------- */
.secao--alt,
.chamada,
.rodape { position: relative; }

.secao--alt::before,
.chamada::before,
.rodape::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  width: calc(min(100%, var(--largura)) - 2 * var(--gutter));
  margin-inline: auto;
  border-radius: var(--raio);
  z-index: 0;
}
.secao--alt::before { background: var(--fundo-alt); }
/* ⚠️ `-fixo`, como o rodapé na linha de baixo. Com `--azul-noite` — que vira
   #F5F6FA no modo escuro — este cartão amanhecia BRANCO à noite, e o texto
   dos canais, que é literalmente branco de propósito (ver `.canal`), sumia
   dentro dele: o visitante via dois ícones dourados, um rótulo fantasma e
   nenhum telefone. Visto no celular em 15/09/2026. */
.chamada::before    { background: var(--azul-noite-fixo); }
.rodape::before     { background: var(--azul-noite-fixo); }

/* --------------------------------------------------------------------------
   DUAS FAIXAS SEGUIDAS SÃO UMA FAIXA SÓ.

   A alternância clara/faixa dá o ritmo da página, e ela pressupõe que uma
   faixa venha entre dois trechos brancos. Quando duas caem lado a lado — hoje
   "Caelio Sob Medida" e "Perguntas que todo mundo faz" — o desenho se desfaz
   de dois jeitos ao mesmo tempo:

     · os cantos arredondados de uma terminam onde os da outra começam, e o
       encontro vira um SULCO branco atravessando a página, que ninguém
       desenhou e que parece defeito de carregamento;
     · os respiros se somam: o de baixo da primeira mais o de cima da segunda.

   Aqui a primeira perde o respiro de baixo e os dois cantos do encontro ficam
   retos, nas duas pontas. O resultado é uma faixa contínua com UM respiro no
   meio, que é o que a pessoa esperava ver desde o começo.

   ⚠️ Depende de `:has()`. Onde ele não existir, NENHUMA das três regras
   aplica e a página volta a ser exatamente o que era — as duas faixas
   separadas. É de propósito que as três dependam da mesma coisa: se só a de
   cima aplicasse, o encontro ficaria reto de um lado e redondo do outro, que
   é pior do que o defeito original. `:has()` já é usado em `.campo-form`.
   -------------------------------------------------------------------------- */
.secao--alt:has(+ .secao--alt) { padding-bottom: 0; }

.secao--alt:has(+ .secao--alt)::before {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.secao--alt:has(+ .secao--alt) + .secao--alt::before {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* O conteúdo sobe para a camada de cima; sem isto o pseudo-elemento, que vem
   depois na ordem de pintura, cobriria o texto. */
.secao--alt > .container,
.chamada > .container,
.rodape > .container {
  position: relative;
  z-index: 1;

  /* Respiro DENTRO da faixa. É o mesmo que o card do quadro já faz:
     a borda externa fica na régua do conteúdo e as colunas recuam por dentro.
     Sem isto o título encostava no canto arredondado — e com a faixa agora
     visível (era contraste 1,073, hoje 1,133) isso saltava aos olhos.

     O recuo é só aqui: fora das faixas, o conteúdo continua na régua, que é
     onde a fileira de acesso rápido e o quadro se alinham. */
  padding-inline: calc(var(--gutter) + clamp(.75rem, 1.6vw, 1.5rem));
}


/* "O mesmo motor, moldado a cada negócio" (rodapé do quadro) e "Três
   sistemas, um motor" (olho da seção seguinte) dizem a mesma coisa duas
   vezes, uma como conclusão e outra como abertura. Com o respiro de seção
   inteira ficavam a 120px um do outro e a rima se perdia; aqui ficam a 76px,
   perto o bastante para o olho ler os dois como um par. */
.secao--emenda { padding-top: clamp(2rem, 4vw, 3.25rem); }

.secao__cabeca { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

/* Centrado, para a seção em que o bloco de baixo também é centrado (Caelio
   Sob Medida). O `margin-inline: auto` é tão necessário quanto o
   `text-align`: sem ele o bloco continua encostado à esquerda, com o texto
   centrado dentro dele — que é pior do que não centrar nada.

   `.secao__texto` tem medida própria de 40rem e precisa da mesma margem
   automática, pelo mesmo motivo. */
.secao__cabeca--centro { text-align: center; margin-inline: auto; }
.secao__cabeca--centro .secao__texto { margin-inline: auto; }

/* A marca aberta uma secao, acima do olho. E o mesmo lockup do cabecalho,
   centrado e 1.3x maior — no tamanho do cabecalho ele leria como um logo
   perdido no meio do branco, longe de qualquer canto que o ancore.

   A escala e UM numero, e todas as medidas saem dele. Isso nao e enfeite: o
   manual §6 prende o descritor a <=30% da altura do wordmark, e §5 pede a
   area de protecao de uma unidade de ponto. Escrever cada tamanho a mao
   deixaria essas duas proporcoes livres para se soltarem na proxima vez que
   alguem achar o logo pequeno. Os numeros-base sao os do cabecalho. */
.selo-marca {
  --escala: 1.3;
  /* `flex`, e nao `inline-flex` como o `.marca` do cabecalho: ali ele divide a
     barra com a navegacao; aqui ele precisa TOMAR a linha. Com inline-flex o
     `.olho` logo abaixo — que e `inline-block` — subia para a mesma linha. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fracao do simbolo, e nao um rem fixo: este gap foi calibrado depois de
     cancelar o vazio do viewBox, e um valor fixo apertaria a marca de novo no
     dia em que --marca-simbolo crescesse. */
  gap: calc(var(--marca-simbolo) * var(--escala) * .19);
  margin-bottom: 1.15rem;
  color: var(--texto);
}

/* O simbolo ate 10/09/2026 tinha viewBox 0 0 64 64 com a tinta so entre
   x=14,90 e x=48,65: 23% de vazio de cada lado, DENTRO da propria caixa.
   Centrado, aquilo cobrava duas vezes — afastava o simbolo do nome (o gap
   somava em cima do vazio) e deslocava o conjunto (o vazio da esquerda nao
   tinha par a direita). Havia aqui duas margens negativas para cancelar
   isso, com as fracoes escritas a mao.

   O simbolo novo tem a tinta encostada nas quatro bordas do viewBox —
   conferido: 0% de vazio dos dois lados. As margens sairam; se voltarem,
   passam a comer desenho de verdade. */
.selo-marca .marca__simbolo {
  width:  calc(var(--marca-simbolo) * var(--escala));
  height: auto;
}

/* No cabecalho o bloco de texto e alinhado a esquerda, e nao ha o que
   centrar. Aqui `tecnologia` e mais largo que `caelio`, entao alinhado a
   esquerda o nome — que e o que o olho procura — ficaria fora do eixo. */
.selo-marca .marca__texto { align-items: center; }

.selo-marca .marca__nome { font-size: calc(var(--marca-nome) * var(--escala)); }

.selo-marca .marca__descritor {
  font-size:  calc(var(--marca-descritor) * var(--escala));
  margin-top: calc(var(--marca-descritor-topo) * var(--escala));
  /* O `letter-spacing` de .18em entra DEPOIS da ultima letra tambem. Sem
     cancelar, `tecnologia` fica meio espaco a esquerda do centro. */
  margin-right: -.18em;
}

.olho {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--secundario);
  margin-bottom: 1rem;
}

.secao__titulo { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }

.secao__texto {
  margin-top: 1.15rem;
  font-size: 1.08rem;
  color: var(--secundario);
  max-width: 40rem;
}

/* --------------------------------------------------------------------------
   Banner (antigo "hero")
   Faixa institucional escura, contínua com o cabeçalho: a marca ocupa o topo
   inteiro da tela antes de a página clarear. Duas colunas — discurso à
   esquerda, prova numérica à direita.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--azul-noite-fixo);
  color: #FFF;
  padding-block: clamp(3.25rem, 7vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

/* Halo dourado quase imperceptível no canto superior direito: dá profundidade
   à faixa chapada sem virar decoração. */
.hero::after {
  content: '';
  position: absolute;
  inset: -40% -25% auto auto;
  width: 46rem; height: 46rem;
  background: radial-gradient(circle, rgba(200, 149, 46, .16), transparent 62%);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__texto-bloco { max-width: 40rem; }

.hero .olho { color: var(--dourado-fixo); }

.hero__titulo {
  font-size: clamp(2.35rem, 5.4vw, 3.7rem);
  letter-spacing: -0.035em;
  color: #FFF;
}

/* O dourado é acento, não cor de apoio — manual §3. */
.hero__titulo em {
  font-style: normal;
  color: var(--dourado-fixo);
}

.hero__texto {
  margin-top: 1.5rem;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, .74);
  max-width: 34rem;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.25rem;
}

.hero__nota {
  margin-top: 1.5rem;
  font-size: .88rem;
  color: rgba(255, 255, 255, .5);
}

/* Painel de números — a promessa do banner, medida. */
.hero__painel {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--raio);
  padding: 1.75rem;
  backdrop-filter: blur(6px);
}

/* Era `.hero__painel-titulo`. Virou `.escolha__titulo` em 14/09/2026, quando a
   mesma pergunta passou a aparecer FORA do banner, na seção Sob Medida: classe
   com nome de lugar envelhece no dia em que serve ao segundo lugar. */
.escolha__titulo {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1.35rem;
}


/* Escolha de segmento — a primeira decisão do visitante.

   Mora no lugar onde antes ficava o painel de números, e reaproveita a caixa
   dele (`.hero__painel`): o banner passa a fazer uma pergunta em vez de dar
   três respostas que ninguém tinha perguntado.

   São rotinas diferentes. Mandar todos para a mesma página
   obriga cada um a filtrar o que não é dele — e o custo disso não aparece em
   lugar nenhum, porque quem desiste vai embora calado. */
.escolha__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.escolha__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .82rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #FFF;
  text-decoration: none;
  /* `padding-inline-start` no lugar de `transform`: a seta e o nome andam
     juntos e nada sai da caixa. */
  transition: color .15s ease, padding-inline-start .15s ease;
}

.escolha__lista li:first-child .escolha__item { border-top: 0; padding-top: 0; }
.escolha__lista li:last-child  .escolha__item { padding-bottom: 0; }

.escolha__item:hover,
.escolha__item:focus-visible {
  color: var(--dourado-fixo);
  padding-inline-start: .35rem;
}

.escolha__nome { font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   O resumo do escopo, sob a escolha do negócio — 14/09/2026.

   Fica DELIBERADAMENTE quieto: sem caixa, sem borda, sem fundo. Ele divide a
   coluna com o painel "Qual é o seu negócio?", que é um cartão branco, e dois
   cartões empilhados brigariam pela mesma atenção. Aqui a hierarquia é:
   primeiro a pergunta que leva a algum lugar, depois a lista que explica.

   O traço dourado no lugar do marcador redondo: a lista não é enumeração de
   itens iguais, é uma amostra — e o traço lê como "entre outros".
   -------------------------------------------------------------------------- */
.escopo-curto { margin-top: 2rem; }

.escopo-curto__titulo {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nevoa);
  margin-bottom: .9rem;
}

.escopo-curto__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.escopo-curto__lista li {
  position: relative;
  padding-left: 1.4rem;
  font-size: .95rem;
  color: var(--secundario);
  line-height: 1.55;
}

.escopo-curto__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: .7rem;
  height: 2px;
  background: var(--dourado);
}

.escopo-curto__mais {
  display: inline-block;
  margin-top: 1.15rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--dourado);
  text-decoration: none;
}
.escopo-curto__mais:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   A MESMA ESCOLHA, SOBRE FUNDO CLARO — 14/09/2026, a pedido: "Qual é o seu
   negócio?" passou a aparecer também abaixo do texto do Caelio Sob Medida.

   O painel do banner tem as cores ESCRITAS em branco translúcido, e não em
   token: ele vive sobre o azul-noite nos dois modos, e token invertido no modo
   escuro deixaria texto branco sobre superfície branca. Fora do banner isso
   não vale, e a variante clara repinta o que era branco com os tokens.

   Só as CORES mudam. Espaçamento, tamanho e o comportamento da seta continuam
   os mesmos, e têm de continuar: são a mesma pergunta, e duas respostas com
   desenho diferente fariam o visitante achar que são coisas diferentes.
   -------------------------------------------------------------------------- */
.escolha--claro {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.75rem;
}
.escolha--claro .escolha__titulo { color: var(--nevoa); }
.escolha--claro .escolha__item {
  color: var(--texto);
  border-top-color: var(--borda);
}
.escolha--claro .escolha__item:hover,
.escolha--claro .escolha__item:focus-visible { color: var(--dourado); }
.escolha--claro .escolha__item--outro .escolha__nome { color: var(--secundario); }
.escolha--claro .escolha__item--outro:hover .escolha__nome { color: var(--dourado); }

/* A SETA TAMBÉM É BRANCA NO ORIGINAL, e some sobre fundo claro. Achado
   olhando a tela: as três linhas apareciam sem a seta, e "Retífica de motores"
   sozinho não parece um caminho — parece um item de lista. Era a única cor
   branca que faltava repintar. */
.escolha--claro .escolha__seta { color: var(--nevoa); }
.escolha--claro .escolha__item:hover .escolha__seta,
.escolha--claro .escolha__item:focus-visible .escolha__seta { color: var(--dourado); }

/* A última linha é a saída para quem não se reconheceu nas de cima. Ela precisa
   estar à vista — mas não com o mesmo peso de quem já sabe o que quer. */
.escolha__item--outro .escolha__nome {
  font-size: .95rem;
  color: rgba(255, 255, 255, .62);
}
.escolha__item--outro:hover .escolha__nome,
.escolha__item--outro:focus-visible .escolha__nome { color: inherit; }

.escolha__seta {
  flex: none;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .35);
  transition: color .15s ease;
}
.escolha__item:hover .escolha__seta,
.escolha__item:focus-visible .escolha__seta { color: var(--dourado-fixo); }

/* Sem animação para quem pediu para não ter. */
@media (prefers-reduced-motion: reduce) {
  .escolha__item { transition: none; }
  .escolha__item:hover,
  .escolha__item:focus-visible { padding-inline-start: 0; }
  .escolha__lista li:first-child .escolha__item:hover { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Acesso rápido
   A fileira de atalhos que caracteriza os portais de serviço: as coisas
   que alguém vem fazer aqui, em um clique, montada por cima da faixa escura.
   -------------------------------------------------------------------------- */
.atalhos-secao { background: var(--fundo); padding-bottom: clamp(2rem, 4vw, 3rem); }

.atalhos {
  display: grid;
  /* CINCO desde 13/09/2026, quando "Quero contratar" entrou entre "Projeto sob
     medida" e o contato. Eram quatro: "Area do cliente" saiu da fileira em
     10/09/2026 e "Demonstracao" em 11/09, quando o quadro interativo passou a
     ficar logo abaixo — o card mandava para outra pagina ver o que ja estava
     ali.

     O numero e escrito porque a fileira e uma FILEIRA — `auto-fit` deixaria os
     cartoes mudarem de tamanho conforme quantos sao, e a regua dos portais de
     servico depende de eles serem iguais. Cartao novo aqui = trocar o 5. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: calc(-1 * clamp(2.25rem, 4vw, 3.25rem));

  /* Sem estas duas linhas o encaixe acontece ao contrário: a faixa escura
     pinta POR CIMA dos cartões e come 51px dos 124px de cada um — 41% da
     altura, o ícone junto. Não é z-index brigando: `.hero` é
     `position: relative`, e elemento posicionado pinta numa fase POSTERIOR à
     do fundo de bloco não posicionado, por mais tarde que o bloco venha na
     árvore. Basta o cartão também ser posicionado para a ordem da árvore
     voltar a valer. O 1 fica abaixo do cabeçalho grudado (50) e do painel do
     menu (60), que precisam continuar por cima ao rolar. */
  position: relative;
  z-index: 1;
}

.atalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .8rem;
  text-align: center;
  padding: 1.5rem .85rem 1.35rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.atalho:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta);
  border-color: var(--borda-forte);
}

.atalho__icone {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--dourado) 14%, transparent);
  color: var(--dourado);
}
.atalho__icone svg { width: 22px; height: 22px; }

.atalho__nome { font-size: .92rem; font-weight: 600; line-height: 1.35; }

/* --------------------------------------------------------------------------
   Produtos
   -------------------------------------------------------------------------- */
.produtos {
  display: grid;
  /* `min(...px, 100%)` e nao `...px` seco: numa tela de 320px sobram 265px
     dentro da calha, e um minimo maior que isso faz a COLUNA estourar a
     pagina inteira para o lado. O `min()` deixa o minimo ceder quando nao
     cabe, e nao muda absolutamente nada acima disso. Achado medindo a home,
     a /retifica e as outras cinco paginas em 320, 360, 390 e 414px. */
  grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
  gap: 1.5rem;
}

.produto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 2rem 1.75rem 1.75rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Alinhamento das faixas entre cards, sem subgrid.
   Subgrid resolveria, mas exige row-gap zero no pai — e assim que a tela
   estreita o grid quebra em duas fileiras, onde row-gap zero cola uma na outra.
   Aqui: o resumo tem piso de altura (as réguas de preço se alinham) e a
   lista de itens é quem estica (as ações encostam no fundo). Funciona com
   qualquer número de cards e qualquer quebra de linha. */
.produto__resumo { min-height: 6.4rem; }   /* ~4 linhas a .97rem/1.65 */
.produto:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta);
  border-color: var(--borda-forte);
}

/* A estrela-guia marca um único produto — manual §3 e §6 */
.produto[data-destaque='true'] { border-color: color-mix(in srgb, var(--dourado) 45%, var(--borda)); }

.produto__guia {
  position: absolute;
  top: 1.15rem;
  right: 1.25rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dourado);
}

.produto__nome { font-size: 1.32rem; margin-bottom: .85rem; }

.produto__resumo {
  color: var(--secundario);
  font-size: .97rem;
}

.produto__preco {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--borda);
}

.produto__valor {
  font-family: var(--fonte-titulo);
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.produto__periodo { font-size: .9rem; color: var(--secundario); }

.produto__itens {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  align-content: start;
  flex-grow: 1;
}

.produto__itens li {
  position: relative;
  padding-left: 1.35rem;
  font-size: .89rem;
  color: var(--secundario);
}
.produto__itens li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--nevoa);
}

/* ⚠️ A fileira PRECISA quebrar. O `.btn` é `white-space: nowrap`, e item de
   flex não encolhe abaixo do próprio conteúdo (`min-width: auto`) — então com
   `flex: 1` (base 0) e dois botões o segundo simplesmente transbordava o card:
   "Falar sobre o projeto" saía 5px para fora da borda do Sob Medida, e o
   navegador não acusa nada. Com `wrap` + base automática, os dois ficam lado a
   lado enquanto couberem e empilham quando não couberem.

   O card de um botão só não muda: `flex-grow: 1` continua enchendo a linha. */
.produto__acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.produto__acoes .btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Implantação
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   O ASSUNTO À ESQUERDA, O CONVITE À DIREITA — 14/09/2026, a pedido.

   Serve a DUAS seções da home, e por isso o nome não fala de nenhuma delas:
   a da implantação (cabeçalho + os dois caminhos à esquerda, o formulário de
   contratação à direita) e a do Sob Medida (cabeçalho à esquerda, o
   formulário de projeto à direita). Nasceu chamando-se `implantacao-e-pedido`
   e foi rebatizada quando a segunda seção pediu o mesmo desenho — classe com
   nome de lugar envelhece no dia em que serve ao segundo lugar.

   A coluna da esquerda é a mais estreita porque o que mora nela é texto e
   cartão; a da direita carrega o formulário, e campo espremido é campo que
   ninguém preenche no celular nem no monitor.

   `align-items: start` para a coluna curta não esticar até a altura do
   formulário: os cartões ficariam com um vazio de meio metro embaixo do
   texto.
   -------------------------------------------------------------------------- */
.secao-com-pedido {
  display: grid;
  /* O PAR DO `minmax(0, 1fr)`, e sem ele a trilha encolhe e o item não.

     Item de grade nasce com `min-width: auto`, que o proibe de ficar menor
     que o próprio conteúdo. Numa tela de 320px a trilha ficava com 240,8px e
     o bloco do convite insistia em 273,6 — 0,6px passando da borda da página,
     o bastante para ela rolar para o lado. Medido, e não deduzido: a cadeia
     de pais mostrava o filho mais largo que o pai.

     `min-width: 0` nos filhos deixa a coluna mandar. A regra vale para os
     dois lados porque o defeito não é do conteúdo, é da grade. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.secao-com-pedido > * { min-width: 0; }

@media (max-width: 980px) {
  /* Abaixo disso as duas colunas ficariam estreitas demais para as duas
     coisas ao mesmo tempo, e aí a ordem de leitura volta a ser a de antes:
     primeiro os caminhos, depois o convite. */
  .secao-com-pedido { grid-template-columns: minmax(0, 1fr); }
}

/* EMPILHADOS, e não lado a lado: eles agora dividem a linha com o formulário,
   e três colunas numa linha só deixariam cada uma com um terço da tela. Na
   coluna única do celular eles voltam a poder ficar lado a lado se couberem,
   e por isso a regra de empilhar mora aqui e não no `.caminho`. */
.implantacao {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (max-width: 980px) {
  .implantacao { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}

.caminho {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.85rem 1.6rem;
}

.caminho__rotulo {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--secundario);
}

.caminho__valor {
  font-family: var(--fonte-titulo);
  font-size: 2.3rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: .7rem 0 .8rem;
}

.caminho__texto { color: var(--secundario); font-size: .97rem; }

.aviso {
  /* O único bloco de prosa que não tinha medida própria, e por isso o único
     que a régua de 1600px esticaria até a ilegibilidade. */
  max-width: 52rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--nevoa);
  background: var(--fundo-alt);
  border-radius: 0 9px 9px 0;
  font-size: .93rem;
  color: var(--secundario);
}
.secao--alt .aviso { background: var(--superficie); }


/* --------------------------------------------------------------------------
   Chamada final
   -------------------------------------------------------------------------- */
.chamada {
  text-align: center;
  padding-block: clamp(4rem, 8vw, 6.5rem);
  color: #F5F6FA;   /* o fundo é o ::before, alinhado ao conteúdo */

  /* Respiro obrigatório: o rodapé também é escuro e de ponta a ponta. Sem
     esta margem os dois se encostam, e os cantos arredondados do card viram
     dois entalhes brancos no encontro. Com ela o card fecha sobre o branco da
     página e o rodapé recomeça como faixa. */
  margin-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
/* Não há sobrescrita de modo escuro aqui, e é de propósito: o `::before` já é
   azul-noite fixo, e pintar a seção por baixo dele só aparecia nas duas tiras
   de gutter — o cartão virava faixa de ponta a ponta, que é o contrário do
   que o desenho pede. */

.chamada__titulo { font-size: clamp(1.8rem, 3.8vw, 2.7rem); color: inherit; }

.chamada__texto {
  margin: 1.2rem auto 0;
  max-width: 34rem;
  color: rgba(245, 246, 250, .72);
}

/* ---- canais de contato ----
   Vivem dentro da `.chamada`, que é escura nos dois modos — por isso as cores
   aqui são literais e não tokens: token invertido no modo escuro deixaria
   texto branco sobre superfície branca. */
.canais {
  display: grid;
  /* DUAS colunas desde 12/09/2026: o cartão "Telefone" saiu, porque repetia o
     número do WhatsApp. Se os números um dia forem distintos, volta o terceiro
     cartão e esta linha volta a `repeat(3, ...)` — ver `parciais/canais.html`. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  /* Largura ditada pelo cartão mais largo: com 46rem à época das três colunas o
     "contato@caelio.com.br" quebrava em "contato@caelio.com." + "br". Com duas
     colunas, 40rem dá a cada cartão mais espaço do que ele tinha antes. */
  max-width: 40rem;
  margin: 2.4rem auto 0;
  text-align: left;
}

.canal {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1.05rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #F5F6FA;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.canal:hover {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .28);
  transform: translateY(-2px);
}

.canal__icone {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--dourado-fixo) 20%, transparent);
  color: var(--dourado-fixo);
}
.canal__icone svg { width: 20px; height: 20px; }

.canal__texto { display: grid; gap: .1rem; min-width: 0; }

.canal__rotulo {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.canal__valor {
  font-size: .93rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .canais { grid-template-columns: 1fr; max-width: 24rem; }
}

.chamada .btn--principal { background: #F5F6FA; color: #141724; margin-top: 2.2rem; }

/* --------------------------------------------------------------------------
   Rodapé institucional
   Escuro nos dois modos, fechando a página com a mesma faixa que a abriu.
   Quatro colunas de destinos + uma base legal.
   -------------------------------------------------------------------------- */
.rodape {
  color: rgba(255, 255, 255, .72);   /* o fundo é o ::before, na régua do conteúdo */
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;

  /* Sem esta margem o card do rodapé encosta na borda de baixo da janela e
     perde os cantos arredondados justamente onde eles se veem melhor. */
  margin-bottom: var(--gutter);
}

.rodape .marca__nome      { color: #FFF; }
.rodape .marca__descritor { color: rgba(255, 255, 255, .5); }
.rodape .marca__simbolo   { color: #FFF; }   /* mesma razao do cabecalho */

.rodape__grade {
  display: grid;
  /* As quatro colunas NÃO carregam a mesma coisa, então não recebem a mesma
     largura. Com `1.5fr repeat(3, 1fr)` a coluna da marca dava 283px e os dois
     selos ("Pagamento via Pix" + "Sem fidelidade") pediam 292: faltavam NOVE
     pixels, e o `flex-wrap` jogava o segundo para a linha de baixo.

     ⚠️ Alargar só a primeira (1.8fr) conserta os selos e QUEBRA OUTRA COISA —
     as três de link caem para 177px e "WhatsApp (27) 98878-1163" passa a
     ocupar duas linhas. Medi: naquela grade a última coluna tinha só 9px de
     folga, ou seja o rodapé inteiro já vivia no limite.

     Esta repartição sai da medida de cada coluna: as duas do meio só têm links
     curtos e cedem; a última, que carrega o telefone e os dois e-mails, ganha.
     Folga medida: selos 15px, links 42/27/30. O `wrap` dos selos fica — é a
     rede do celular, e a folga importa porque, se o .woff2 falhar, a fonte de
     fallback é mais larga. */
  grid-template-columns: 1.75fr .95fr .95fr 1.2fr;
  gap: clamp(2rem, 4vw, 3rem);
}

.rodape__sobre {
  color: rgba(255, 255, 255, .6);
  font-size: .93rem;
  margin-top: 1.2rem;
  max-width: 24rem;
}

.rodape__titulo {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dourado-fixo);
  margin-bottom: 1.1rem;
}

.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }

.rodape__lista a { font-size: .93rem; color: rgba(255, 255, 255, .72); transition: color .16s ease; }
.rodape__lista a:hover { color: #FFF; text-decoration: underline; text-underline-offset: 3px; }

/* Selos de confiança — a fileira que os portais de serviço usam para dizer
   "isto é uma empresa de verdade" sem escrever uma frase. */
.rodape__selos {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}

.selo {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: .35rem .8rem;
}

.rodape__origem { display: inline-flex; align-items: center; gap: .5rem; }

/* Fio de contorno: sobre a faixa escura o branco da bandeira do Espírito
   Santo e o verde da do Brasil encostam no fundo sem borda nenhuma, e as
   duas perdem o formato de bandeira. */
.bandeira {
  width: 22px;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}

.rodape__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .atalhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* O rodapé vai para duas colunas antes do resto (23/09/2026). Com a Inter
   carregada — mais larga que a fonte do sistema —, "WhatsApp (27) 98878-1163"
   quebrava em duas linhas de 900 a 1040px com as quatro colunas. Medi de
   20 em 20px; a 1060px ele cabe em uma. */
@media (max-width: 1040px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero__grade { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }

  /* ⚠️ Aqui havia a GAVETA: abaixo de 900px a `.nav__lista` virava um painel
     empilhado, o `.nav__alternar` (um segundo hamburguer, na direita)
     assumia, e o ☰ institucional escondia o icone e mostrava o rotulo,
     porque dentro da gaveta ele era so mais um item.

     Nada disso existe mais. Com "Produtos" e "Demonstracao" fora da barra
     sobrou UM menu, e um menu so nao precisa de gaveta: o ☰ e o mesmo botao,
     no mesmo lugar, em qualquer largura. O que muda no celular e so a largura
     do painel, logo abaixo. */

  /* ⚠️ O `.mega` era `position: static` e transparente aqui — ele vivia
     DENTRO da gaveta escura e se comportava como lista recolhida. Sem a
     gaveta isso o largaria solto no meio da barra, sem fundo e sem borda.

     Continua painel, entao, e so estica de ponta a ponta: e a largura que
     muda no celular, nao a natureza da coisa. */
  .mega {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }
  .mega__grade { grid-template-columns: 1fr; gap: 0; }
  .mega__item { padding: .65rem .5rem; }
  .mega__item:hover { background: rgba(255, 255, 255, .06); }
  .mega__texto { display: none; }
  .mega__rodape { display: none; }
}

@media (max-width: 700px) {
  .atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

  /* Cinco cartoes em duas colunas deixam UM sozinho na ultima linha, com
     metade da largura e metade do peso dos outros — le como erro, e e o mesmo
     defeito que a grade do fluxo tinha em 4/4/1. O ultimo ocupa a linha
     inteira quando sobra sozinho. O `:nth-child(odd)` e o que faz a regra
     valer para cinco e nao valer para seis, sem ninguem ter de vir aqui
     contar cartao de novo. */
  .atalhos > .atalho:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .atalhos-secao { padding-top: clamp(2rem, 5vw, 3rem); }

  /* O DESCRITOR FICA NO CELULAR (15/09/2026) — ele sumia daqui, e o topo da
     página mostrava `caelio` onde o rodapé, três telas abaixo, mostrava
     `caelio tecnologia`.

     ⚠️ Ele volta ENCOLHIDO, e o número tem conta: em 1.66rem `caelio` mede
     67,0px e `tecnologia` espaçada a .18em mede 71,1 — é o DESCRITOR que
     dita a largura do bloco de texto. A .64rem ele mede 65,9 e a largura
     volta a ser a do nome, então a marca no celular ocupa exatamente o que
     ocupava sem ele. Isso importa: entre 361 e 420px a barra inteira mede
     318,9px numa largura útil de 321, e não há 4px para dar. */
  .cabecalho { --marca-descritor: .64rem; }
}

@media (max-width: 520px) {
  .rodape__grade { grid-template-columns: 1fr; }
  .produto__acoes { flex-direction: column; }
  .hero__acoes .btn { flex: 1 1 100%; }
  .cabecalho__acoes .btn { padding: .55rem .9rem; font-size: .85rem; }
}

/* --------------------------------------------------------------------------
   O cabeçalho nos telefones pequenos.

   Tirar "Área do cliente" da barra (13/09/2026) resolveu o estouro de 115px
   em 390px, mas em 360px sobravam 6 — e 6px de rolagem lateral é rolagem
   lateral do mesmo jeito: a página balança para os lados no dedo, e o
   visitante acha que quebrou.

   O que cede aqui é o ESPAÇO entre as peças, não as peças: a marca continua
   inteira e o "Quero contratar" continua legível. Medido em 320, 360 e 390px.
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .cabecalho__acoes { gap: .45rem; }
  .cabecalho__acoes .btn { padding: .5rem .7rem; font-size: .82rem; }
  .cabecalho__interno { gap: .5rem; }
}

/* Em 320px — iPhone SE de primeira geração e Android antigo — nem assim
   cabia: sobravam 15px. Aqui a MARCA encolhe, e só ela.

   Encolher é melhor do que esconder: o wordmark continua legível e a página
   continua tendo um canto que a ancora. Os quatro números saem das variáveis
   declaradas no `:root`, e o descritor desce JUNTO com o nome — um degrau a
   mais do que a proporção pediria, e de propósito. Quem dita a largura do
   bloco de texto é o MAIOR dos dois, e `tecnologia` espaçada a .18em mede
   MAIS do que `caelio`: no tamanho cheio são 71,1px contra 67,0. A .46rem ela
   mede 47,4 contra os 48,5 de `caelio` em 1.2rem, e assim quem manda na
   largura volta a ser o nome — estes 320px não ganham um pixel por trazer o
   descritor de volta. Medido em 15/09/2026, na fonte Manrope. */
@media (max-width: 360px) {
  .cabecalho {
    --marca-simbolo: 34px;
    --marca-gap: .5rem;
    --marca-nome: 1.2rem;
    --marca-descritor: .46rem;
  }
}

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Páginas internas — produto, sob medida, acesso
   -------------------------------------------------------------------------- */
.pagina-hero { padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 3.5rem); }

.pagina-hero__grade {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.pagina-hero__titulo { font-size: clamp(2.1rem, 4.8vw, 3.2rem); }

.pagina-hero__texto {
  margin-top: 1.35rem;
  font-size: 1.1rem;
  color: var(--secundario);
  max-width: 36rem;
}

/* Caixa de preço */
.preco-caixa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--sombra);
  position: sticky;
  top: 100px;
}

.preco-caixa__rotulo {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nevoa);
}

.preco-caixa__valor {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: .6rem 0 .3rem;
}
.preco-caixa__valor strong {
  font-family: var(--fonte-titulo);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.preco-caixa__valor span { font-size: .95rem; color: var(--secundario); }

.preco-caixa__nota { font-size: .86rem; color: var(--secundario); }

.preco-caixa .btn { width: 100%; margin-top: 1.35rem; }
.preco-caixa .btn + .btn { margin-top: .6rem; }

.preco-caixa__extra {
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borda);
  font-size: .86rem;
  color: var(--secundario);
}

/* Fluxo em etapas */
/* O minimo e um token para que cada pagina escolha quantos cartoes cabem por
   linha SEM abrir mao do `auto-fit` — que e quem cuida do celular sozinho.

   Nao e capricho: com as etapas reais a retifica tem NOVE cartoes, e a 210px
   eles caem em 4/4/1 — a ultima linha com um cartao sozinho, que le como erro.
   A 300px caem em 3/3/3. A oficina tem oito, e a 210px fecha 4/4 certinho. */
.fluxo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--fluxo-min, 210px), 100%), 1fr));
  gap: 1.25rem;
  counter-reset: etapa;
}

.fluxo--tres { --fluxo-min: 300px; }

.etapa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.5rem 1.35rem;
  counter-increment: etapa;
}

.etapa__numero {
  font-family: var(--fonte-titulo);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--nevoa);
}
.etapa__numero::before { content: counter(etapa, decimal-leading-zero); }

.etapa__nome { font-size: 1.08rem; margin: .55rem 0 .6rem; }
.etapa__texto { font-size: .93rem; color: var(--secundario); }

/* Grade de recursos */
.recursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.75rem 2.5rem;
}

.recurso__nome {
  font-size: 1.02rem;
  margin-bottom: .5rem;
  padding-left: 1.1rem;
  position: relative;
}
.recurso__nome::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nevoa);
}
.recurso__texto { font-size: .93rem; color: var(--secundario); padding-left: 1.1rem; }

/* ---- comparativo retífica × oficina (/retifica) ----
   Tabela de verdade, e não três colunas de <div>: as células comparam a MESMA
   pergunta nos dois mundos, e quem usa leitor de tela precisa ouvir de que
   linha e de que coluna a resposta veio. Por isso o `th scope`.

   A primeira célula do cabeçalho fica vazia na tela e preenchida para o leitor
   de tela — `th` vazio é ruído em tabela de comparação.

   No celular a tabela ROLA dentro do próprio bloco (`overflow-x: auto`) em vez
   de empurrar a página: 640px é o mínimo em que as três colunas ainda são
   lisíveis, e página que rola para o lado é defeito, dentro de um bloco que
   rola é tabela. */
.comparativo {
  margin-top: 2.25rem;
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  /* Sem isto, o foco do teclado dentro da tabela some sob a borda arredondada
     no navegador que corta o conteúdo do contêiner que rola. */
  -webkit-overflow-scrolling: touch;
}

.comparativo table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .93rem;
}

.comparativo th,
.comparativo td {
  text-align: left;
  vertical-align: top;
  padding: .95rem 1.15rem;
  border-bottom: 1px solid var(--borda);
}
.comparativo tbody tr:last-child th,
.comparativo tbody tr:last-child td { border-bottom: none; }

.comparativo thead th {
  font-family: var(--fonte-titulo);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--secundario);
  border-bottom: 1px solid var(--borda-forte);
  background: var(--fundo-alt);
}

/* A coluna do produto é a que o leitor deve olhar primeiro; a do outro mundo
   fica em tom secundário. A hierarquia está na COR do texto, não num fundo
   colorido: fundo verde contra fundo vermelho seria a tabela decidindo pelo
   leitor, e esta página prefere deixar a conclusão com ele. */
.comparativo thead th:nth-child(2) { color: var(--dourado); }
.comparativo tbody th[scope="row"] {
  font-family: var(--fonte-titulo);
  font-size: .93rem;
  font-weight: 600;
  color: var(--texto);
  width: 11.5rem;
}
.comparativo tbody td:first-of-type { color: var(--texto); }
.comparativo tbody td + td { color: var(--secundario); }

.comparativo__oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Acesso do cliente */
.acesso-caixa {
  max-width: 30rem;
  margin-inline: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 2rem 1.85rem;
  box-shadow: var(--sombra);
}

/* --------------------------------------------------------------------------
   Pedido embutido numa seção — 13/09/2026, redesenhado em 14/09.

   Nasceu de dois pedidos do usuário: "a página contratar deve ficar visível
   abaixo de Duas formas de começar" e "falar sobre um projeto tem que ser um
   formulário".

   ⚠️ A PRIMEIRA VERSÃO ERA DE DUAS COLUNAS — texto à esquerda, caixa à
   direita — e o usuário devolveu com três capturas e uma frase: "ficaram fora
   de lugar". Ele tinha razão, e a razão é de ritmo: duas colunas com título
   próprio à esquerda têm exatamente a forma de uma SEÇÃO, e o bloco aparecia
   dentro de outra seção que já tinha o título dela. Lia-se como duas seções
   empilhadas, uma dentro da outra.

   Agora ele tem a cara da página /contratar, que é o que o usuário apontou
   como modelo: UMA coluna centrada, o convite curto no meio e a caixa do
   formulário embaixo. Centrado, o bloco lê como um fecho da seção, e não
   como uma seção nova.

   O texto do formulário NÃO herda o centro: campo alinhado ao meio obriga o
   olho a procurar onde cada linha começa, a cada campo.
   -------------------------------------------------------------------------- */
.pedido-embutido {
  /* `min(34rem, 100%)` e não `34rem` seco. Numa tela de 320px a trilha da
     grade fica com 240,8px e este bloco insistia em 273,6 — 0,6px passando da
     borda, o bastante para a página rolar para o lado. Nem `min-width: 0` no
     filho da grade resolveu: o valor era o mesmo nas DUAS seções, em trilhas
     de larguras diferentes, o que diz que ele vinha do conteúdo e não da
     coluna. O `100%` resolve contra a trilha e encerra a discussão. */
  max-width: min(34rem, 100%);
  margin-inline: auto;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

/* Dentro da grade de duas colunas ele já tem o respiro do `gap`, e o de cima
   viraria um degrau: o bloco começaria meio palmo abaixo dos cartões ao lado,
   como se fosse uma linha a mais. */
.secao-com-pedido .pedido-embutido { margin-top: 0; }

/* O selo dentro do bloco do convite: ele abre a /contratar e abre este bloco
   também. Aqui é menor do que na página dedicada — lá abre a tela toda, aqui
   divide a linha com dois cartões e não pode competir com o título.

   ⚠️ Em 14/09/2026 estas regras chegaram a apontar para `.secao__cabeca`,
   quando o selo foi parar no cabeçalho da seção. O usuário mandou voltar no
   mesmo dia. Se ele algum dia for para um cabeçalho de seção, lembrar que a
   parcial traz `justify-content: center` e que cabeçalho alinhado à esquerda
   precisa de `flex-start` — foi o que o fez flutuar longe do título. */
.pedido-embutido .selo-marca {
  --escala: 1;
  margin-bottom: 1.1rem;
}

.pedido-embutido__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-top: .4rem;
}

.pedido-embutido__texto p {
  margin-top: 1rem;
  font-size: 1.02rem;
  color: var(--secundario);
}

/* A caixa já nasce com 30rem e margem automática, de quando servia a uma
   página inteira só dela; aqui ela só precisa de respiro e do texto de volta
   à esquerda. */
.pedido-embutido .acesso-caixa {
  margin-top: 2rem;
  text-align: left;
}

.pedido-enviado { text-align: center; padding-block: 1.5rem; }
.pedido-enviado__titulo { font-size: 1.15rem; font-weight: 700; margin: 0; }
.pedido-enviado__texto { margin: .5rem 0 0; color: var(--secundario); }
.pedido-enviado__texto a { color: var(--dourado); }

.campo-form { display: grid; gap: .45rem; }

/* O VÃO ENTRE UM CAMPO E O SEGUINTE ERA ZERO — medido em 13/09/2026, nos três
   formulários do site. O que separava um campo do outro era só a entrelinha do
   rótulo, e por isso o conjunto lia como uma pilha, não como uma lista de
   perguntas.

   Passou despercebido enquanto todo campo era rótulo + caixa. Apareceu quando
   a nota "Preencha pelo menos um dos dois" entrou sob o e-mail: ela ficava a
   9px do campo de cima e a 0px do rótulo de baixo, ou seja, parecia explicar a
   pergunta ERRADA. Espaçamento entre blocos é o que diz a quem o texto
   pertence. */
.campo-form + .campo-form { margin-top: .9rem; }
.campo-form label { font-size: .88rem; font-weight: 600; }
/* O `select` entra aqui junto com o `input`, e nao por capricho de simetria:
   sem isto ele cai no tamanho padrao do navegador — visivelmente menor que os
   campos ao lado, na mesma coluna. A regra listava so `input` porque ate
   10/09/2026 nenhum formulario do site tinha um select. */
/* O `textarea` entrou em 13/09/2026, com a descrição do projeto sob medida.
   Pelo mesmo motivo que o `select` entrou aqui antes: fora desta lista ele cai
   no desenho padrão do navegador, visivelmente diferente dos campos vizinhos,
   na mesma coluna. */
.campo-form input,
.campo-form select,
.campo-form textarea {
  font-family: var(--fonte-texto);
  font-size: 1rem;
  padding: .8rem .95rem;
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  background: var(--fundo);
  color: var(--texto);
}

/* A altura vem do padding, e o select precisa que ela seja dita: o padding
   vertical dele nao e honrado por todo navegador. */
.campo-form select { min-height: 3.05rem; }

/* `resize: vertical` e não livre: arrastar para o lado estoura a coluna e,
   no celular, a página inteira. */
.campo-form textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }

.campo-form input::placeholder,
.campo-form textarea::placeholder { color: var(--nevoa); }

/* A nota sob o campo: diz a regra ANTES do erro. "Preencha pelo menos um dos
   dois" abaixo do e-mail evita a mensagem vermelha que só apareceria depois
   de a pessoa clicar em enviar. */
.campo-form__nota {
  margin: .1rem 0 0;
  font-size: .82rem;
  color: var(--nevoa);
}

/* O rotulo "Escolha uma opcao" nao e uma resposta — tem a cor de placeholder
   enquanto nada foi escolhido, e a do texto depois. */
.campo-form select:has(option[value=""]:checked) { color: var(--nevoa); }

.campo-form input:focus-visible,
.campo-form select:focus-visible,
.campo-form textarea:focus-visible { outline: 2px solid var(--dourado); outline-offset: 1px; }

.acesso-caixa .btn { width: 100%; margin-top: 1.1rem; }

.acesso-erro {
  margin-top: .85rem;
  font-size: .88rem;
  color: var(--dourado);
  font-weight: 600;
  display: none;
}
.acesso-erro[data-visivel='true'] { display: block; }

.acesso-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.acesso-atalho {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.35rem 1.25rem;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  display: block;
}
.acesso-atalho:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--borda-forte); }
.acesso-atalho strong { display: block; font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.05rem; }
.acesso-atalho span { display: block; margin-top: .35rem; font-size: .88rem; color: var(--secundario); }

/* Página 404 */
.erro-pagina {
  min-height: 62vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: 4rem;
}
.erro-pagina__codigo {
  font-family: var(--fonte-titulo);
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--nevoa);
}
.erro-pagina p { margin: 1.1rem auto 2rem; color: var(--secundario); max-width: 30rem; }

@media (max-width: 860px) {
  .pagina-hero__grade { grid-template-columns: 1fr; }
  .preco-caixa { position: static; }
}

/* --------------------------------------------------------------------------
   Perguntas frequentes

   `<details>` nativo: abre e fecha sem uma linha de JavaScript, responde ao
   teclado e ao leitor de tela sem `aria-expanded` escrito à mão, e continua
   funcionando no dia em que um script não carregar. O único preço é o
   triângulo padrão do navegador, que o `::marker` abaixo troca por um sinal
   que gira.
   -------------------------------------------------------------------------- */
.perguntas {
  max-width: 46rem;
  margin: 0 auto;
  border-top: 1px solid var(--borda);
}

.pergunta { border-bottom: 1px solid var(--borda); }

.pergunta__titulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 0;
  font-family: var(--fonte-titulo);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--texto);
  cursor: pointer;
  list-style: none;              /* Firefox */
}
.pergunta__titulo::-webkit-details-marker { display: none; }

/* O sinal é desenhado no ::after do próprio resumo, e não num <span>: assim a
   marcação da pergunta é só a pergunta. */
.pergunta__titulo::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: .42rem;
  border-right: 2px solid var(--nevoa);
  border-bottom: 2px solid var(--nevoa);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .18s ease, border-color .18s ease;
}
.pergunta[open] .pergunta__titulo::after { transform: rotate(-135deg); }

.pergunta__titulo:hover { color: var(--dourado); }
.pergunta__titulo:hover::after,
.pergunta[open] .pergunta__titulo::after { border-color: var(--dourado); }

.pergunta__resposta {
  padding-bottom: 1.45rem;
  max-width: 40rem;
  color: var(--secundario);
  line-height: 1.65;
}
.pergunta__resposta a { color: var(--dourado); }

@media (prefers-reduced-motion: reduce) {
  .pergunta__titulo::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Impressão
   -------------------------------------------------------------------------- */
@media print {
  /* A barra de segmento, o botão de reiniciar e a dica de arrastar não
     têm sentido no papel: são comandos, não conteúdo. */
  .cabecalho, .hero__acoes, .produto__acoes, .chamada,
  .demo-barra, .dica { display: none; }
  body { color: #000; background: #fff; }
}