/*
 * Estilo do site novo. Mobile-first, sem framework, sem biblioteca de
 * animação. Fonte própria hospedada no repositório (Inter, ver @font-face
 * abaixo) — zero requisição de rede pra CDN de fonte, zero dado do
 * visitante "passeando" por fora (ORDEM-10-KAKA.md, item 3.2: "sem CDN" não
 * é o mesmo que "sem fonte" — a proibição de rede externa continua, o
 * arquivo é nosso).
 *
 * Paleta: laranja da marca (#EF740B, variando até #FA8024) pra preenchimento
 * de botão/faixa, um laranja ESCURO (#B4540A) pra texto/ícone/link/detalhe
 * sobre fundo claro, cinza bem escuro/quase preto para texto, branco.
 *
 * Contraste medido (fórmula WCAG, não "olhômetro" — ver relatório):
 *   - laranja puro sobre branco: 2.93:1 — REPROVA até o mínimo de 3:1 de
 *     componente não textual, então laranja puro NUNCA é cor de texto
 *     corrido nem de link sobre fundo branco aqui.
 *   - texto quase-preto (#1A1D21) sobre branco: 16.9:1 — corpo de texto.
 *   - texto quase-preto sobre laranja puro: 5.78:1 — por isso todo botão de
 *     fundo laranja usa texto escuro, nunca branco (branco sobre laranja
 *     também reprova: 2.93:1).
 *   - cinza médio (#595F66) sobre branco: 6.45:1 — texto secundário/meta.
 *   - laranja ESCURO (#B4540A) sobre branco: 4.98:1 — passa o mínimo de
 *     4.5:1 pra texto corrido pequeno (ORDEM-10-KAKA.md, item 3.3).
 */

/*
 * Sub-setada com pyftsubset (retorno da ORDEM-10-KAKA.md) — Latin + Latin
 * Extended-A + pontuação tipográfica que o site usa de verdade (varri todo
 * o HTML gerado por caractere fora de Basic Latin antes de decidir o
 * intervalo, não chutei): travessão/meia-risca, aspas curvas, reticências,
 * setas (usadas em "R$ 2.824 → Isento"). 358 KB → 77 KB (as duas, -79%).
 * PROVA (não é o tamanho): renderizei um post com R$, aspas curvas e
 * acentuação forte depois do sub-set e OLHEI — nenhum glifo faltando, nada
 * caindo pra fonte de sistema no meio da frase. Os emoji do mesmo post (✅,
 * 1️⃣) não vêm da Inter em nenhum dos dois casos (nenhuma fonte de texto
 * carrega emoji colorido) — isso é resolvido pela fonte de emoji do sistema
 * operacional de quem visita, sempre foi assim, sub-set não muda isso.
 */
@font-face {
  font-family: "Inter";
  src: url("./fontes/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./fontes/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cor-laranja: #ef740b;
  --cor-laranja-clara: #fa8024;
  /* Laranja ESCURO — texto/ícone/link/kicker sobre fundo claro, nunca fundo
     de botão (isso continua sendo --cor-laranja). Medido, não a sugestão de
     olho da ordem: 4.98:1 sobre branco, passa. MAS #1A1D21 (--cor-texto)
     sobre ESTE laranja é só 3.39:1 — serve pra texto grande/negrito ou
     ícone (mínimo de componente gráfico não textual é 3:1), NUNCA pra texto
     corrido. Por isso: NUNCA usar --cor-laranja-escura como FUNDO com texto
     escuro em cima — só como cor de texto/traço sobre --cor-branco ou
     --cor-fundo-alternado (ORDEM-10-KAKA.md, item 3.3, e retorno do OK:
     "escreve isso como comentário... daqui a três meses, quem olhar o token
     sem a nota vai usar de fundo, e vai passar, porque ninguém mede de
     novo"). */
  --cor-laranja-escura: #b4540a;
  --cor-texto: #1a1d21;
  --cor-texto-suave: #595f66;
  --cor-borda: #e4e1dc;
  --cor-fundo-alternado: #faf8f6;
  /* Fundo do bloco de Serviços — laranja bem claro, só pra unir os quatro
     cards visualmente (ORDEM-10-KAKA.md, item 5.1). Não é cor de texto. */
  --cor-fundo-laranja-claro: #fdf0e3;
  --cor-branco: #ffffff;
  --fonte-sistema:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --coluna-leitura: 42rem;
  --largura-pagina: 72rem;
  --raio: 0.75rem;
  /* Ritmo vertical entre seções da home — ORDEM-10-KAKA.md, item 4: os 40px
     fixos de antes eram "aperto", metade da sensação de artesanal em telas
     largas. */
  --espaco-secao: clamp(3.5rem, 2rem + 6vw, 7rem);
  --sombra-cartao:
    0 1px 2px rgba(26, 29, 33, 0.06), 0 8px 24px rgba(26, 29, 33, 0.06);
  --sombra-cartao-hover:
    0 4px 8px rgba(26, 29, 33, 0.08), 0 20px 40px rgba(26, 29, 33, 0.14);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--fonte-sistema);
  color: var(--cor-texto);
  background: var(--cor-branco);
  line-height: 1.65;
  font-size: 1.0625rem;
  /* Respiro pro botão flutuante do WhatsApp nunca ficar por cima da última
     linha de conteúdo — ver ORDEM-2026-09-24-KAKA-5.md, defeito 1. */
  padding-bottom: 4rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  font-weight: 700;
}

h1 {
  /* Escala nova — ORDEM-10-KAKA.md, item 4: hierarquia quase plana antes (h2
     chegava a 30px). */
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  margin: 0 0 1rem;
}

h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.0625rem;
}

ul,
ol {
  padding-left: 1.25rem;
}

/*
 * ORDEM-10-KAKA.md, item 3.1 — causa raiz do "site cortado pela metade":
 * a coluna de leitura (42rem) estava no seletor GLOBAL `p`/`ul`/`ol`, então
 * cortava pela metade todo bloco de texto do site, mesmo dentro de um
 * container de 72rem (diferenciais, FAQ, formulário...). Coluna de leitura
 * é certa pra ARTIGO, não pra página inteira: revogada do global, vira
 * classe aplicada só onde o texto corrido precisa de linha curta pra
 * ler bem — corpo de post de blog, e futura página de texto legal
 * (privacidade, termos). Em todo o resto, quem decide a largura é o
 * container da seção.
 */
.texto-leitura p,
.texto-leitura ul,
.texto-leitura ol {
  max-width: var(--coluna-leitura);
}

/* O rótulo pequeno acima de um título de seção ("kicker") — ORDEM-10-KAKA.md, item 4. */
.kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-laranja-escura);
  margin-bottom: 0.5rem;
}

li + li {
  margin-top: 0.35rem;
}

/* Listagem do blog */
.lista-blog {
  list-style: none;
  padding-left: 0;
  max-width: var(--coluna-leitura);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lista-blog__item {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cor-borda);
}

.lista-blog__item a {
  font-weight: 700;
  font-size: 1.0625rem;
}

.lista-blog__item time {
  display: block;
  margin-top: 0.25rem;
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
}

/* Some visualmente mas continua lido por leitor de tela — ex.: avisar que
   um link abre em nova aba sem poluir o texto visível do botão. */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Link visível só ao focar via teclado — pula direto para o conteúdo,
   antes do cabeçalho, sem exigir tab-tab-tab pelo menu inteiro. */
.pular-para-conteudo {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--cor-texto);
  color: var(--cor-branco);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  text-decoration: none;
}

.pular-para-conteudo:focus {
  left: 0.5rem;
  top: 0.5rem;
}

a {
  color: var(--cor-texto);
  text-decoration-color: var(--cor-laranja);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
  text-decoration-color: var(--cor-laranja-clara);
}

:focus-visible {
  outline: 3px solid var(--cor-texto);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(239, 116, 11, 0.35);
}

/*
 * Componente de botão — ORDEM-10-KAKA.md, item 4: "um componente, três
 * variantes". Altura mínima 44px (alvo de toque confortável) e rótulo
 * sempre em capitular de frase ("Saiba mais", nunca "saiba mais") — os
 * textos vêm do conteúdo extraído, a correção de caixa está em
 * aplicarCorrecoesDeTexto.ts, não aqui.
 */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
  padding: 0.625rem 1.5rem;
  border-radius: 0.5rem;
  border: 1.5px solid transparent;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.botao--principal {
  background: var(--cor-laranja);
  color: var(--cor-texto);
}

.botao--principal:hover {
  background: var(--cor-laranja-clara);
}

/* Secundário — ORDEM-10-KAKA.md, retorno da nota 10: a borda preta de 2px
   grossa lia como campo de formulário, não botão ("Área do Cliente", no
   cabeçalho). Borda mais fina, na cor neutra da paleta — só escurece no
   hover, não no repouso. */
.botao--secundario {
  background: transparent;
  border-color: var(--cor-borda);
  color: var(--cor-texto);
}

.botao--secundario:hover {
  background: var(--cor-fundo-alternado);
  border-color: var(--cor-texto-suave);
}

/* Texto — só o rótulo com seta, sem fundo nem borda (link de ação discreto). */
.botao--texto {
  min-height: auto;
  padding: 0;
  background: none;
  border: none;
  color: var(--cor-laranja-escura);
}

.botao--texto::after {
  content: "→";
}

.botao--texto:hover {
  color: var(--cor-texto);
}

.faixa {
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Cabeçalho */
.cabecalho {
  border-bottom: 1px solid var(--cor-borda);
}

.cabecalho__faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-block: 1rem;
}

.cabecalho__logo img {
  /* 34px no celular — ORDEM-13-KAKA.md, item 2. Cresce em telas maiores, ver
     media query 768px abaixo. Logo oficial atual (LOGO 2, ORDEM-16-OTTO.md):
     arquivo de 600×135 com transparência real, então a altura da caixa é a
     altura da marca. */
  height: 2.125rem;
  width: auto;
}

/* Dois menus no HTML (mesmo conteúdo), só um visível por vez via CSS — não
   um só "desmontado" por breakpoint. Tentei desfazer o <details> com
   `display: contents` pra reaproveitar um só menu, mas o Chromium colapsa o
   conteúdo de <details> fechado via `content-visibility` internamente, e
   nem sobrescrevendo isso o <nav> recuperava largura (comprovado inspecionando
   o computed style via Playwright, não só olhando a tela) — esta versão é
   mais simples e não depende de vencer esse comportamento nativo.
   `display: none` tira o menu escondido da árvore de acessibilidade, então
   não duplica nada pra quem usa leitor de tela. */
.menu--desktop {
  display: none;
}

.menu-disclosure__botao {
  display: inline-block;
  cursor: pointer;
  font-weight: 700;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--cor-borda);
  border-radius: 0.25rem;
  list-style: none;
}

.menu-disclosure__botao::-webkit-details-marker {
  display: none;
}

.menu-disclosure[open] .menu-disclosure__botao {
  margin-bottom: 0.75rem;
}

/* A ".menu__lista" base é uma linha que quebra (pro menu desktop). No
   celular precisa ser uma coluna de verdade — sem isso "Segmentos" e os 4
   recuados (ORDEM-14-KAKA.md, item 4) só quebravam linha misturados com
   "Início"/"Supermercados" soltos, sem parecer grupo nenhum. */
.menu--mobile .menu__lista {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.menu__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
}

/* Zera o "li + li { margin-top }" global (pensado pra lista vertical de
   conteúdo) aqui dentro — nesta lista horizontal ele empurrava todo item
   pra baixo, exceto o primeiro, que não tem irmão anterior. Era a causa
   real do "Início" desalinhado pra cima no render de 1366px (achado na
   ORDEM-13-KAKA.md, item 4) — o espaçamento entre os itens já vem do
   próprio "gap" do flex, essa margem era redundante e o defeito. */
.menu__lista li + li {
  margin-top: 0;
}

.menu__lista a {
  display: inline-block;
  padding: 0.35rem 0;
  text-decoration: none;
  color: var(--cor-texto);
  /* Transparente por padrão (não "none"), pra reservar a mesma altura de
     caixa que o item ativo — sem isso, só o link com aria-current tinha
     2px a mais, e o flex empurrava "Início" pra cima em relação aos outros
     no render de 1366px (achado na ORDEM-13-KAKA.md, item 4). */
  border-bottom: 2px solid transparent;
}

.menu__lista a:hover,
.menu__lista a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--cor-laranja);
  text-decoration-thickness: 2px;
}

.menu__lista a[aria-current="page"] {
  border-bottom-color: var(--cor-laranja);
}

/*
 * "Segmentos" — dropdown que agrupa as 4 landings de nicho, ORDEM-14-KAKA.md
 * (pedido do George: 8 itens soltos no menu, "muito grande", sem hierarquia).
 * O botão recebe o mesmo tratamento visual dos links do menu (cor, padding,
 * borda inferior transparente) — só muda pra "inline-flex" pra alinhar a
 * seta ao lado do texto.
 */
.menu__botao-submenu {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.35rem 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  color: var(--cor-texto);
  cursor: pointer;
}

.menu__botao-submenu:hover,
.menu__botao-submenu[aria-expanded="true"] {
  text-decoration: underline;
  text-decoration-color: var(--cor-laranja);
  text-decoration-thickness: 2px;
}

/* Ativo quando a página atual é uma das 4 de dentro — não é "aria-current"
   porque "Segmentos" em si não é uma página (ver layout.ts). */
.menu__botao-submenu[data-ativo="true"] {
  border-bottom-color: var(--cor-laranja);
}

.menu__seta {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  transition: transform 0.15s ease;
}

.menu__item--aberto .menu__seta {
  transform: rotate(180deg);
}

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

.menu__item--com-submenu {
  position: relative;
}

/*
 * Base sem JS: abre no hover do mouse e ao tabular até o botão ou até
 * qualquer link de dentro (":focus-within") — funciona mesmo se
 * assets/menu.js falhar ao carregar. "menu__item--aberto" é a mesma coisa,
 * ligada por JS (clique/toque, que não têm hover; ver assets/menu.js).
 */
.menu__item--com-submenu:hover > .menu__submenu,
.menu__item--com-submenu:focus-within > .menu__submenu,
.menu__item--aberto > .menu__submenu {
  display: block;
}

/* Mesma especificidade das três regras acima (duas classes + pseudo-classe
   contam igual — por isso repete ".menu__item--com-submenu" aqui, não só
   ".menu__item--fechado-forcado" sozinha), mas vem depois — por isso vence.
   Sem isso, Esc (assets/menu.js) fechava e devolvia o foco pro botão, mas
   o próprio foco no botão reabria na hora via ":focus-within". Marcada
   pelo JS em todo fechamento explícito (Esc, clique fora) e tirada no
   próximo "abrir" — enquanto o JS não decide abrir de novo, fica fechado
   de verdade, mesmo hover/foco batendo aqui. */
.menu__item--com-submenu.menu__item--fechado-forcado > .menu__submenu {
  display: none;
}

.menu__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 13rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--cor-branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
}

.menu__submenu li + li {
  margin-top: 0;
}

.menu__submenu a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--cor-texto);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: none;
}

.menu__submenu a:hover,
.menu__submenu a:focus-visible {
  background: var(--cor-fundo-alternado);
}

.menu__submenu a[aria-current="page"] {
  color: var(--cor-laranja-escura);
  font-weight: 700;
}

/* Grupo "Segmentos" no menu do celular — ORDEM-14-KAKA.md, item 4: rótulo
   estático (não é botão, não abre/fecha nada) com os 4 segmentos recuados
   sempre visíveis logo abaixo. Sem dropdown dentro do <details> do "Menu"
   — segunda camada colapsável obrigaria dois toques só pra ver
   "Supermercados". */
/* Especificidade de propósito (".menu__lista .menu__grupo-titulo", não só a
   classe sozinha) pra vencer ".menu__lista li + li" acima — senão o
   "margin-top" dali (zerado, pensado pros itens de link) ganhava e o
   rótulo colava no item anterior. */
.menu__lista .menu__grupo-titulo {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  margin-top: 0.75rem;
}

.menu__item-recuado {
  padding-left: 1rem;
}

/* No celular, o botão "Área do Cliente" some para a linha de baixo, sozinho
   — junto de logo + botão "Menu" a primeira linha já fica cheia. */
.cabecalho__faixa > .botao--secundario {
  flex: 1 1 100%;
}

/* Conteúdo */
main {
  padding-block: 2.5rem 4rem;
}

/* Espaçamento entre blocos de conteúdo empilhados (título, parágrafo, lista,
   FAQ, depoimento, chamadas) — qualquer bloco depois de outro ganha respiro,
   sem precisar listar classe por classe. */
main .faixa > * + *,
.texto-leitura > * + * {
  margin-top: 1.25rem;
}

main .faixa > h2,
main .faixa > h3,
main .faixa > h4,
.texto-leitura > h2,
.texto-leitura > h3,
.texto-leitura > h4 {
  margin-top: 2rem;
}

.chamadas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/*
 * Perguntas frequentes — <details>/<summary> nativo, sem JavaScript
 * (ORDEM-10-KAKA.md, item 5.3: "continua <details>, sem JavaScript — isso eu
 * mantenho"). Largura do CONTAINER, não mais coluna de leitura (era metade
 * da tela em 1440px, a causa raiz do "site cortado pela metade"). Marcador
 * nativo do navegador (o triângulo nas duas pontas) morto e trocado por um
 * chevron desenhado em CSS puro — duas bordas rotacionadas formando um "v",
 * que gira 180° ao abrir via `details[open]`, sem precisar de JS pra saber
 * o estado.
 */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq details {
  border: none;
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: 1.125rem 1.25rem;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--cor-laranja-escura);
  border-bottom: 2px solid var(--cor-laranja-escura);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(225deg);
}

.faq details[open] summary {
  margin-bottom: 0.75rem;
}

.faq p {
  margin: 0;
  max-width: none;
}

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

/* Depoimento */
.depoimento {
  max-width: var(--coluna-leitura);
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--cor-laranja);
}

.depoimento p {
  margin: 0;
  max-width: none;
  font-style: italic;
}

.depoimento cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--cor-texto-suave);
}

/* Rodapé */
.rodape {
  background: var(--cor-fundo-alternado);
  border-top: 1px solid var(--cor-borda);
  margin-top: 3rem;
}

.rodape__faixa {
  padding-block: 2.5rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

/* Três colunas no desktop (logo+endereço, páginas, contato) — ORDEM-10-KAKA.md,
   item 5.3. Uma embaixo da outra no celular (flex-direction: column acima). */
.rodape__coluna {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 12rem;
}

/* A classe estava no próprio <img>, não num wrapper — corrigido pra bater com o seletor. */
.rodape__logo {
  /* ~36px de altura — ORDEM-13-KAKA.md, item 3 (já valia desde a
     ORDEM-12-KAKA.md; a logo agora é o recorte do bbox, 250×55, então essa
     altura de caixa passou a ser também altura de marca visível). */
  height: 2.25rem;
  width: auto;
  /* Causa real da logo esticada (ORDEM-12-KAKA.md, item 2): ".rodape__coluna"
     é flex-column e o padrão do flex é "align-items: stretch" — mesmo com
     "width: auto" aqui, o Chromium estica um <img> (elemento substituído)
     até a largura da coluna (12rem/192px pelo min-width dela) em vez de
     respeitar a proporção real do arquivo. "flex-start" tira a imagem do
     esticamento e deixa a proporção mandar de novo — continua valendo com
     o arquivo recortado da ORDEM-13-KAKA.md. */
  align-self: flex-start;
}

.rodape__titulo {
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  margin: 0;
}

.rodape__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rodape address,
.rodape__coluna p {
  font-style: normal;
  color: var(--cor-texto-suave);
  line-height: 1.6;
  margin: 0;
}

.rodape address a,
.rodape__coluna a {
  color: var(--cor-texto-suave);
}

.rodape__copy {
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
  width: 100%;
  margin: 0;
}

/* Botão flutuante do WhatsApp — no celular é um círculo pequeno ("WA"), pra
   cobrir o mínimo possível de tela (o primeiro scroll da página já tem
   conteúdo até embaixo, então "reservar respiro no rodapé" sozinho não
   bastava — comprovado renderizando o viewport real, não só o screenshot da
   página inteira). Texto completo só a partir do desktop, onde sobra espaço. */
.whatsapp-flutuante {
  position: fixed;
  /* Achado no retorno da ORDEM-10-KAKA.md: em telas largas (1440px+), o botão
     vira pílula com o texto todo (~200px) — "right: 1rem" fixo deixava a
     pílula invadir a última coluna da grade de cartões, porque o container
     de conteúdo (--largura-pagina, 72rem) já teria acabado bem antes da
     borda da tela. Ancora a partir da borda DO CONTAINER, não da tela: seguem
     1rem além dele. Onde a tela é mais estreita que o container (a imensa
     maioria dos casos), a conta fica negativa e o `max()` volta pro 1rem de
     sempre — mesmo comportamento de antes no celular. */
  right: max(1rem, calc((100vw - var(--largura-pagina)) / 2 + 1rem));
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  gap: 0.6rem;
  /* ORDEM-19-OTTO.md, item 2: símbolo oficial do WhatsApp em verde (#25D366).
     Fundo branco, não laranja: verde sobre laranja vibra e some. O verde da
     marca WhatsApp é logotipo (isento do mínimo de contraste de ícone); o
     nome acessível vem inteiro do `aria-label` do link. */
  background: var(--cor-branco);
  color: var(--cor-texto);
  border: 1.5px solid var(--cor-borda);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.75rem;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 50;
}

.whatsapp-flutuante:hover {
  background: var(--cor-fundo-alternado);
  border-color: var(--cor-texto-suave);
}

.whatsapp-flutuante__icone {
  display: inline-flex;
  color: #25d366;
}

.whatsapp-flutuante__icone svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}

/* Celular: só o símbolo, pra cobrir o mínimo de tela. */
.whatsapp-flutuante__texto {
  display: none;
}

/* Texto só para leitor de tela — fica fora da vista, mas continua na árvore de acessibilidade. */
.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;
}

/* Formulário (página de Contato) */
/*
 * Formulário em cartão, grade — ORDEM-10-KAKA.md, item 5.3: "dentro de um
 * cartão, duas colunas no desktop (nome/e-mail, telefone/cargo, assunto em
 * linha inteira, mensagem em linha inteira), rótulo acima do campo, campo
 * com altura de 44px, foco visível." Uma coluna sempre no celular — a ordem
 * dos campos já vem pareada certa (nome, e-mail, telefone, cargo, assunto),
 * então nome/e-mail caem na mesma linha da grade sem precisar nomear cada
 * um.
 */
.cartao-formulario {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 1.75rem;
  background: var(--cor-branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
}

/*
 * Formulário modo A (WhatsApp, sem servidor) — ORDEM-18-OTTO.md, item 2:
 * e-mail e telefone visíveis ao lado, não só no rodapé. No modo B
 * (".cartao-formulario" sozinho, sem este wrapper) nada muda.
 */
.area-formulario {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.area-formulario .cartao-formulario {
  margin-top: 0;
}

.contato-direto {
  align-self: flex-start;
  padding: 1.5rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  background: var(--cor-branco);
}

.contato-direto p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.contato-direto__icone {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--cor-laranja-escura);
}

@media (min-width: 900px) {
  .area-formulario {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

.campo-formulario {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.campo-formulario--largo {
  grid-column: 1 / -1;
}

form label {
  font-weight: 700;
}

form input,
form textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--cor-borda);
  border-radius: 0.5rem;
  font: inherit;
  color: var(--cor-texto);
}

form input:focus-visible,
form textarea:focus-visible {
  outline: 2px solid var(--cor-laranja-escura);
  outline-offset: 1px;
}

form textarea {
  min-height: 8rem;
  resize: vertical;
}

form button {
  justify-self: start;
}

.mapa {
  border: 0;
  width: 100%;
  max-width: var(--largura-pagina);
  aspect-ratio: 16 / 9;
  margin-top: 2rem;
}

/* Imagem — ver ORDEM-9-KAKA.md. `picture`/`img` sempre com width/height reais
   (evita pulo de layout no celular — a causa técnica do "sem graça" que o
   George reclamou) e `object-fit: cover` porque o espaço na tela raramente
   bate exato com a proporção do arquivo. */
picture {
  display: block;
}

picture img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
}

.imagem-capa img {
  border-radius: 0;
  aspect-ratio: 16 / 9;
}

.galeria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.galeria__item img {
  aspect-ratio: 4 / 3;
}

/* Cartões — hoje só o teaser de blog usa este componente genérico (serviço e
   segmento ganharam layout próprio, ver abaixo — ORDEM-10-KAKA.md, item 5). */
.cartoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.cartao {
  padding: 1.25rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  background: var(--cor-branco);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.cartao img {
  aspect-ratio: 4 / 3;
  margin-bottom: 0.75rem;
}

.cartao h3 {
  margin: 0 0 0.5rem;
}

.cartao ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* Sombra no hover, não escala — "escala borra a foto" (ORDEM-10-KAKA.md, item 4). */
.cartao:hover,
.cartao:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--sombra-cartao-hover);
}

/*
 * Bloco de Serviços — ORDEM-10-KAKA.md, item 5.1: os quatro vivem num bloco
 * só, fundo laranja bem claro que os une, SEM foto (as quatro fotos
 * mostravam a mesma sala — o achado do George). Ícone Lucide monocromático
 * por serviço e por sub-item, todos com o mesmo stroke-width — consistência
 * em vez de originalidade (retorno do OK da nota 10).
 */
.bloco-servicos {
  margin-top: 2rem;
  padding: 2rem;
  border-radius: var(--raio);
  background: var(--cor-fundo-laranja-claro);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Cada serviço é um cartão branco dentro do bloco laranja-claro (ORDEM-15,
   item 3). O botão encosta no pé do cartão, qualquer que seja a altura da
   lista de itens ao lado. */
.servico {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: var(--raio);
  background: var(--cor-branco);
  box-shadow: var(--sombra-cartao);
}

.servico__acao {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
  text-align: center;
}

.servico__icone {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--cor-laranja-escura);
  margin-bottom: 0.75rem;
}

.servico h3 {
  margin: 0 0 0.85rem;
}

.servico__itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.servico__itens li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.servico__item-icone {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--cor-laranja-escura);
}

/*
 * Bloco de Segmentos — ORDEM-10-KAKA.md, item 5.2: mantém foto (aqui ELA é o
 * assunto — "achei o meu caso"), mas em proporção widescreen (16:9, mais
 * larga que a do serviço) e com o nome sobreposto à própria foto, não
 * abaixo — tratamento visivelmente diferente do bloco de serviço, de
 * propósito.
 */
.cartoes--segmentos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.cartao-segmento {
  display: flex;
  flex-direction: column;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-cartao);
  background: var(--cor-branco);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.cartao-segmento:hover,
.cartao-segmento:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--sombra-cartao-hover);
}

.cartao-segmento__midia {
  position: relative;
}

.cartao-segmento__imagem img {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

/* Faixa escura de 0.72 de opacidade sob o título: 7.64:1 pro texto branco
   mesmo no pior caso (foto branca atrás), medido na ORDEM-10. Só a faixa do
   título é escura, o resto da foto segue nítido. */
.cartao-segmento__titulo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.85rem 1.1rem;
  background: rgba(15, 17, 19, 0.72);
  color: var(--cor-branco);
}

.cartao-segmento__frase {
  margin: 0;
  padding: 1rem 1.1rem 0 1.35rem;
  color: var(--cor-texto);
  font-weight: 700;
}

.cartao-segmento ul {
  margin: 0;
  padding: 0.5rem 1.1rem 0 1.35rem;
}

.cartao-segmento .botao {
  margin: 1rem 1.1rem 1.1rem;
  align-self: flex-start;
}

.home-secao {
  padding-block: 2.5rem;
}

.home-secao--alt {
  background: var(--cor-fundo-alternado);
  /* Estoura a borda do "faixa" só nesta seção, pra herdar o fundo alternado até a ponta da tela. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/*
 * Hero dividido — ORDEM-15 (Otto, 06/10), item 1: texto à esquerda com duas
 * chamadas, foto à direita. Sem véu nem caixa escura por cima da foto: o
 * texto fica sobre o fundo da página, então o contraste é o do corpo de
 * texto comum (preto sobre branco), não uma medição de cartão. No celular
 * o texto vem primeiro e a foto desce embaixo.
 */
.home-hero {
  padding-block: 2.5rem 2rem;
}

.home-hero__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.home-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.home-hero__imagem img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio);
}

/* Linha discreta abaixo do botão do hero — ORDEM-17-OTTO.md (Food Services),
   reaproveitada por qualquer página que precise do mesmo texto pequeno e
   suave (ver .home-contato-meio__discreto, mesmo papel visual). */
.home-hero__legenda {
  margin-top: 0.75rem;
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
}

/* Modificador de 3 colunas pra ".cartoes" — ORDEM-17-OTTO.md, seção "Por que
   a Laconts". ".cartoes--blog" já existia com o mesmo número de colunas;
   nome genérico aqui pra não prender o reaproveitamento ao blog. */
@media (min-width: 900px) {
  .cartoes--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * "A conta que muda o lucro" — ORDEM-17-OTTO.md: comparação de dois
 * caminhos, sem componente parecido no site. Reaproveita os tokens dos
 * cartões (--raio, --sombra-cartao) em vez de inventar uma linguagem visual
 * nova — só o número grande (.comparacao__numero) é inédito.
 */
.comparacao {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.comparacao__coluna {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  background: var(--cor-branco);
}

.comparacao__numero {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  line-height: 1.15;
  color: var(--cor-texto);
}

.comparacao__legenda {
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
}

.comparacao__resultado {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cor-borda);
  font-weight: 700;
  color: var(--cor-laranja-escura);
}

@media (min-width: 900px) {
  .comparacao {
    grid-template-columns: 1fr 1fr;
  }
}

/* Faixa de diferenciais — ORDEM-15, item 2: quatro números com ícone, logo
   abaixo do hero. Cartão próprio por número, mais peso que a prova rápida
   antiga (que era só texto solto em faixa cinza). */
.home-diferenciais {
  padding-block: 1rem 2rem;
}

/* "main .faixa > * + *" (espaço entre irmãos do miolo) também pegaria os
   cartões desta grade e empurraria do 2º em diante 1.25rem pra baixo. */
.home-diferenciais__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

main .home-diferenciais__lista > * {
  margin-top: 0;
}

.home-diferenciais__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.25rem;
  border-radius: var(--raio);
  background: var(--cor-branco);
  box-shadow: var(--sombra-cartao);
}

.home-diferenciais__icone {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--cor-laranja-escura);
  margin-bottom: 0.25rem;
}

.home-diferenciais__item strong {
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--cor-texto);
}

.home-diferenciais__item span {
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
}

/* "Como funciona" — ORDEM-15, item 4: linha do tempo em passos numerados.
   Coluna no celular (com linha vertical à esquerda), linha no desktop. */
.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  counter-reset: passo;
}

/* Zera o "li + li { margin-top }" global, igual .menu__lista — a grade
   alinha os passos sozinha, sem o deslocamento de 0.35rem dos itens 2–4. */
.passo {
  position: relative;
  margin-top: 0;
  padding-left: 3.25rem;
  counter-increment: passo;
}

.passo::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cor-laranja);
  color: var(--cor-texto);
  font-weight: 700;
}

.passo h3 {
  margin: 0.25rem 0 0.35rem;
}

.passo p {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

/* Passos com "01 —" no título (ORDEM-19C): sem a bolinha, o número já está escrito. */
.passos--rotulados .passo {
  padding-left: 0;
}

.passos--rotulados .passo::before {
  content: none;
}

/* "O que sai das suas costas" — ORDEM-15, item 5: dois lados lado a lado. */
.costas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.costas__coluna {
  padding: 1.5rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  background: var(--cor-branco);
}

.costas__coluna--laconts {
  background: var(--cor-fundo-laranja-claro);
}

.costas__coluna h3 {
  margin: 0 0 0.85rem;
}

.costas__coluna ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.costas__coluna li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.costas__icone {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--cor-laranja-escura);
}

/* Contato do meio — bloco curto, um botão, sem repetir o formulário */
.home-contato-meio {
  text-align: center;
}

.home-contato-meio__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.home-contato-meio__conteudo p {
  max-width: var(--coluna-leitura);
}

.home-contato-meio__discreto {
  font-size: 0.9375rem;
  color: var(--cor-texto-suave);
}

/* Equipe — largura total, o "momento de encanto" */
.home-equipe {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

.home-equipe__imagem img {
  border-radius: 0;
  aspect-ratio: 21 / 9;
  /* cover, não o padrão fill: sem isso a foto 3:2 era esticada pra 21:9.
     Posição no topo pra não cortar as cabeças do grupo. */
  object-fit: cover;
  object-position: 50% 20%;
}

.home-equipe__legenda {
  text-align: center;
  padding-block: 1.5rem;
}

/* Antes era texto corrido numa linha só, sem separação nem ícone (ORDEM-10-KAKA.md, item 5.3). */
.home-redes-sociais ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.home-redes-sociais li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cor-texto-suave);
}

.icone-redes-sociais {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  color: var(--cor-laranja-escura);
}

/* Animação de entrada — ligada só via JS (ver assets/revelar.js), então sem
   JS ou sem suporte a IntersectionObserver o conteúdo já nasce visível. */
.revelar.revelar--pronta {
  opacity: 0;
  transform: translateY(12px);
}

.revelar.revelar--visivel {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}

.whatsapp-flutuante--escondido {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
}

.whatsapp-flutuante {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .revelar.revelar--pronta {
    opacity: 1;
    transform: none;
  }

  .cartao:hover,
  .cartao:focus-within {
    transform: none;
  }

  .whatsapp-flutuante {
    transition: none;
  }
}

@media (min-width: 700px) {
  .galeria {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .bloco-servicos {
    grid-template-columns: repeat(2, 1fr);
  }

  .cartoes--segmentos {
    grid-template-columns: repeat(2, 1fr);
  }

  .cartoes--blog {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-hero__grade {
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
  }

  .home-diferenciais__lista {
    grid-template-columns: repeat(4, 1fr);
  }

  .passos {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .passo {
    padding-left: 0;
    padding-top: 3rem;
  }

  .costas {
    grid-template-columns: 1fr 1fr;
  }

  .home-contato-meio__conteudo {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Troca de menu — ORDEM-14-KAKA.md, item 4: "mobile (≤900px) mantém o
     botão Menu". Breakpoint subiu de 768px (ordens 11/13) pra 900px:
     com 8 itens soltos, 768px já era apertado; com "Segmentos" agrupado
     (5 entradas), sobra espaço de sobra a partir daqui pro respiro que o
     George pediu. */
  .menu--desktop {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Respiro entre os itens (28–32px, meio da faixa pedida) e texto em
     tamanho de navegação — não mais o "aperta pra caber" das ordens 11/13:
     com só 5 entradas em vez de 8, sobra espaço de verdade. "Peso médio"
     (ORDEM-14-KAKA.md, item 2) já é o padrão sem negrito — só temos Regular
     (400) e Bold (700) hospedados (ver @font-face no topo do arquivo), sem
     variante 500 de verdade pra declarar. */
  .menu--desktop .menu__lista {
    gap: 0.5rem 1.875rem;
    font-size: 0.9375rem;
  }

  .menu-disclosure {
    display: none;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 1.125rem;
    padding-bottom: 0;
  }

  .cabecalho__faixa {
    flex-wrap: nowrap;
    /* Reduzido de 1.5rem, depois de novo de 1rem (ORDEM-13-KAKA.md, item 2:
       a logo recortada no bbox fica bem mais larga pra mesma altura —
       ~200px em vez de ~92px — e "sem isso o menu quebra" continua valendo;
       a ordem foi explícita: aperta o espaçamento do menu, não a logo). */
    gap: 0.75rem;
  }

  .cabecalho__faixa > .botao--secundario {
    flex: 0 0 auto;
  }

  /* Presença de marca no desktop — ORDEM-13-KAKA.md, item 2: ~44px de
     altura de MARCA VISÍVEL (a logo já é o recorte do bbox, então a altura
     da caixa agora é a altura da marca — na ORDEM-12-KAKA.md, 48px de caixa
     rendiam só ~20px de marca visível, por causa da margem transparente do
     PNG original). Em 44px, a largura sai em ~200px (proporção real do
     arquivo recortado, 250×55) — o número que a própria ordem antecipou. */
  .cabecalho__logo img {
    height: 2.75rem;
  }

  .whatsapp-flutuante__texto {
    display: inline;
  }

  .whatsapp-flutuante {
    width: auto;
    height: auto;
    border-radius: 2rem;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }

  .cartao-formulario {
    grid-template-columns: repeat(2, 1fr);
  }

  .rodape__faixa {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .rodape__coluna {
    flex: 1 1 0;
  }
}

/* ===== ORDEM-19-OTTO.md ===== */

/* Redes sociais no rodapé (item 6) */
.rodape__redes {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
}

.rodape__redes li + li {
  margin-top: 0;
}

.rodape__rede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--cor-borda);
  border-radius: 50%;
  background: var(--cor-branco);
  color: var(--cor-laranja-escura);
  transition: border-color 0.15s ease;
}

.rodape__coluna a.rodape__rede {
  color: var(--cor-laranja-escura);
}

.rodape__rede:hover {
  border-color: var(--cor-laranja-escura);
}

.rodape__rede-icone {
  width: 1.35rem;
  height: 1.35rem;
}

/* Botão do WhatsApp com símbolo (chamada do fim, janela de saída) */
.botao__icone-whatsapp {
  display: inline-flex;
}

.botao__icone-whatsapp svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}

/* Chamada do fim das páginas (item 4) */
/* Coluna centralizada em qualquer largura (a regra de 900px do contato do meio antigo punha tudo em linha). */
.home-contato-meio__conteudo.chamada-final__conteudo {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

/* Faixa preta com letra branca, como na image5 (ORDEM-19C, item 1). O botão segue com texto escuro sobre o laranja
   (branco sobre #ef740b é 2,93:1, ver o comentário de contraste no topo deste arquivo). */
.home-secao.chamada-final {
  background: #000;
  color: var(--cor-branco);
}

.chamada-final__conteudo h2 {
  max-width: 28ch;
  margin: 0;
  color: var(--cor-branco);
}

.chamada-final__conteudo p {
  color: var(--cor-branco);
}

.chamada-final__email {
  font-size: 0.9375rem;
}

.chamada-final__email a {
  color: var(--cor-branco);
  text-decoration: underline;
}

.chamada-final .botao:focus-visible,
.chamada-final__email a:focus-visible {
  outline-color: var(--cor-branco);
}

/* Janela de saída (item 3) — véu laranja ESCURO sobre a foto da equipe, texto branco.
   Branco sobre #8f3f06 (média do véu a 92 %) passa de 7:1. Nunca usar o laranja vivo aqui:
   branco sobre ele é 2,93:1 (ver o comentário de contraste no topo deste arquivo). */
html.janela-saida-aberta {
  overflow: hidden;
}

.janela-saida {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(26, 29, 33, 0.65);
}

.janela-saida[hidden] {
  display: none;
}

.janela-saida__caixa {
  position: relative;
  width: min(100%, 38rem);
  border-radius: var(--raio);
  overflow: hidden;
  color: var(--cor-branco);
  text-align: center;
  background:
    linear-gradient(rgba(143, 63, 6, 0.92), rgba(143, 63, 6, 0.92)),
    url("./imagens/equipe-2025-061-960.webp") center / cover no-repeat;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.janela-saida__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  /* Topo maior: o X (2,75rem + 0,5rem de folga) não pode encostar no título no celular (ORDEM-19C, item 8). */
  padding: 4.25rem 1.5rem 2.5rem;
}

.janela-saida__titulo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.janela-saida__antes {
  font-weight: 400;
}

.janela-saida__destaque {
  font-size: 1.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.janela-saida__depois {
  margin: 0;
  font-size: 1.125rem;
}

.janela-saida__botao {
  background: var(--cor-branco);
  color: var(--cor-laranja-escura);
  border-color: var(--cor-branco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-inline: 2rem;
}

.janela-saida__botao:hover {
  background: var(--cor-fundo-laranja-claro);
}

.janela-saida__fechar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cor-branco);
  cursor: pointer;
}

.janela-saida__fechar:hover {
  background: rgba(255, 255, 255, 0.18);
}

.janela-saida__fechar-icone {
  width: 1.5rem;
  height: 1.5rem;
}

.janela-saida a:focus-visible,
.janela-saida button:focus-visible {
  outline: 3px solid var(--cor-branco);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .janela-saida__titulo {
    font-size: 1.5rem;
  }

  .janela-saida__destaque {
    font-size: 2.4rem;
  }
}

/* Vídeo institucional do YouTube — fachada (item 5). O iframe só entra no clique. */
.video-institucional {
  padding-block: 2.5rem;
}

.video-fachada {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cor-texto);
  cursor: pointer;
}

/* Capa local da fachada (sem imagem remota): logo e legenda sobre o laranja claro da marca. */
.video-fachada__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-top: 6%;
  background: var(--cor-fundo-laranja-claro);
}

.video-fachada__logo {
  width: min(46%, 20rem);
  height: auto;
}

.video-fachada__legenda {
  margin-top: 0.25rem;
  font-weight: 700;
  color: var(--cor-texto);
}

.video-institucional iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video-fachada__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: var(--cor-laranja);
  color: var(--cor-texto);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.video-fachada:hover .video-fachada__play {
  background: var(--cor-laranja-clara);
}

.video-fachada:focus-visible {
  outline: 3px solid var(--cor-laranja-escura);
  outline-offset: 3px;
}

.video-fachada__play-icone {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}

/* Páginas de segmento (item 7) — reaproveitam o hero, os cartões e os passos da home/Food Service */
.segmento-kicker-hero {
  margin-bottom: 0.75rem;
}

.segmento-destaques {
  padding-block: 1.5rem 0.5rem;
}

.segmento-destaques__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.segmento-destaque {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1.5px solid var(--cor-borda);
  border-left: 5px solid var(--cor-laranja);
  border-radius: var(--raio);
  background: var(--cor-fundo-laranja-claro);
  color: var(--cor-texto);
  text-decoration: none;
}

.segmento-destaque:hover,
.segmento-destaque:focus-visible {
  border-color: var(--cor-laranja-escura);
}

.segmento-destaque h2 {
  margin: 0;
  font-size: 1.125rem;
}

.segmento-destaque p {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.segmento-destaque__ver {
  margin-top: auto;
  font-weight: 700;
  color: var(--cor-laranja-escura);
}

.segmento-secao {
  scroll-margin-top: 5rem;
}

.segmento-secao__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.segmento-secao__imagem img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio);
}

.segmento-secao__lead {
  font-size: 1.125em;
  font-weight: 700;
}

.segmento-secao__fecho {
  margin-top: 1rem;
  font-weight: 700;
  color: var(--cor-laranja-escura);
}

.segmento-secao__chamada {
  margin-top: 1.5rem;
}

.segmento-lista {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.segmento-lista li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.segmento-lista__icone {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.3rem;
  color: var(--cor-laranja-escura);
}

.cartoes--segmento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.cartao--com-foto {
  padding: 0;
  overflow: hidden;
}

.cartao--com-foto picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.cartao--com-foto .cartao__corpo {
  padding: 1rem 1.25rem 1.25rem;
}

.segmento-encerramento__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.segmento-encerramento__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

@media (min-width: 700px) {
  .segmento-destaques__lista,
  .cartoes--segmento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .segmento-destaques__lista {
    grid-template-columns: repeat(3, 1fr);
  }

  .cartoes--segmento--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .cartoes--segmento--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .segmento-secao__grade--com-imagem {
    grid-template-columns: 1fr 1fr;
  }

  .segmento-secao__grade--imagem-esquerda .segmento-secao__imagem {
    order: -1;
  }
}

/* Política de privacidade (ADENDO-2026-10-30-POLITICA-OTTO.md): texto corrido em coluna de leitura. */
.politica {
  padding-block: 2.5rem 3rem;
}

.politica__secao {
  margin-top: 2rem;
}

.politica__secao h2 {
  font-size: 1.375rem;
  margin: 0 0 0.5rem;
}

.politica__versao {
  margin-top: 2.5rem;
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
}

/* Ponto ainda sem resposta da Laconts: destacado para não ir ao ar sem ser visto. */
.politica__pendente {
  background: #fff3b0;
  color: var(--cor-texto);
  padding: 0 0.2em;
  border-radius: 0.2em;
}