@charset "UTF-8";
/* ==========================================================================
   StokDok — sistema visual do site institucional
   --------------------------------------------------------------------------
   Partido: "ficha tecnica de operacao". O site se parece com o documento que
   circula dentro de um centro de distribuicao, nao com um site institucional
   generico. Duas materias:

     TINTA  (charcoal #111418) = a operacao. Tecnica, densa, com codigos.
     PAPEL  (branco)           = o documento. Leitura longa, formulario.

   A secao escolhe a materia pelo que ela DIZ, nao por alternancia decorativa.

   Restricoes duras da identidade (workspace/brand/VISUAL_IDENTITY.md v1.1):
     - so quatro cores; nada fora da lista
     - NUNCA texto branco sobre laranja (contraste < 3:1). Sobre laranja,
       o texto e sempre #111418. Isto molda todo botao do site.
     - tipografia geometrica, industrial, condensada — nunca serifada
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- cores da marca: as quatro, e so elas --- */
  --tinta:    #111418;  /* preto-marca   */
  --cinza:    #555A61;  /* cinza-neutro  */
  --laranja:  #FF6A00;  /* laranja-marca */
  --papel:    #FFFFFF;  /* branco        */

  /* --- derivadas: mistura das quatro, nenhum matiz novo --- */
  --tinta-alta:   #191E24;  /* bloco elevado sobre tinta       */
  --tinta-baixa:  #0B0E11;  /* rodape, poco                    */
  --papel-osso:   #F4F4F3;  /* superficie sobre papel          */
  --fio-claro:    rgba(255, 255, 255, .13);
  --fio-escuro:   rgba(17, 20, 24, .14);
  --texto-fraco:  rgba(255, 255, 255, .62);

  /* --- tipos --- */
  --face-titulo: "Saira Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --face-texto:  "Barlow", -apple-system, "Segoe UI", Arial, sans-serif;
  --face-dado:   "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  /* --- escala de espaco: base 4 --- */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px;  --e6: 32px;  --e7: 48px;  --e8: 64px;
  --e9: 96px;  --e10: 128px;

  /* --- medidas --- */
  --largura: 1520px;
  --rail: 108px;              /* calha da margem, onde mora o codigo da etapa */
  --corte: 11px;             /* o chanfro de 45deg, eco da geometria do cubo */

  --transicao: 160ms cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* o header e fixo: ancora nao pode parar embaixo dele */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--face-texto);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--fio-escuro); margin: var(--e7) 0; }

::selection { background: var(--laranja); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 1px;
}

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--laranja); color: var(--tinta);
  padding: var(--e3) var(--e5);
  font-family: var(--face-dado); font-weight: 500;
}
.pular-para-conteudo:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--face-titulo);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.015em;
  margin: 0 0 var(--e4);
  text-wrap: balance;
}

.t-gigante {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: .9;
  letter-spacing: -.025em;
}
.t-grande  { font-size: clamp(1.95rem, 4.2vw, 3.1rem); }
.t-media   { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.05; }
.t-pequena { font-size: clamp(1.1rem, 1.6vw, 1.3rem);  line-height: 1.15; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

.t-guia {
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.5;
  color: var(--texto-fraco);
  max-width: 54ch;
}
.papel .t-guia { color: var(--cinza); }

/* rotulo de dado: o texto de anotacao da ficha tecnica */
.rotulo {
  font-family: var(--face-dado);
  font-weight: 500;
  font-size: .705rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--laranja);
  display: block;
  margin: 0 0 var(--e4);
}
.rotulo--fraco { color: var(--texto-fraco); }
.papel .rotulo--fraco { color: var(--cinza); }

.num {
  font-family: var(--face-dado);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }


/* --------------------------------------------------------------------------
   3b. Contraste sobre PAPEL
   --------------------------------------------------------------------------
   #FF6A00 sobre #FFFFFF da 3,15:1. Isso passa para texto GRANDE (a partir de
   ~19px em negrito) e reprova para texto pequeno, que precisa de 4,5:1. E a
   tabela de contraste da propria identidade so autoriza #111418 ou #555A61
   sobre branco.

   Entao, sobre papel: o laranja continua sendo o acento — mas como TRACO, nao
   como cor de letra pequena. Numero grande segue laranja (passa em 3:1).
   -------------------------------------------------------------------------- */
.papel .rotulo {
  color: var(--tinta);
  display: flex; align-items: center; gap: var(--e2);
}
.papel .rotulo::before {
  content: ""; width: 14px; height: 2px; background: var(--laranja); flex: 0 0 14px;
}
.papel .rotulo--fraco { color: var(--cinza); }
.papel .rotulo--fraco::before { background: var(--cinza); }
.papel .rotulo a { color: inherit; }

.papel .codigo {
  color: var(--tinta);
  background: rgba(255, 106, 0, .09);
  border-color: rgba(255, 106, 0, .55);
}
.papel .codigo small { color: var(--cinza); }

.papel .tabela .sim { color: var(--tinta); font-weight: 600; }
.papel .tabela .sim::before { content: "✓ "; color: var(--laranja); font-weight: 700; }

.papel .paginacao a:hover { color: var(--tinta); border-color: var(--laranja); }
.papel .artigo-cartao h3 a:hover { color: var(--tinta); text-decoration: underline;
  text-decoration-color: var(--laranja); text-decoration-thickness: 2px; }
.papel .pergunta summary:hover { color: var(--tinta); }
.papel .pergunta summary:hover::after { color: var(--laranja); }

/* .etapa__sigla e .trilho__fecho b vivem sobre tinta, onde o laranja da 5,9:1
   e passa com folga — nao entram nesta correcao. */

/* --------------------------------------------------------------------------
   4. Estrutura: a calha da margem
   -------------------------------------------------------------------------- */
.faixa { padding: clamp(56px, 8vw, 116px) 0; position: relative; }
.faixa--curta { padding: clamp(40px, 5vw, 72px) 0; }

.tinta { background: var(--tinta); color: var(--papel); }
.tinta-alta { background: var(--tinta-alta); color: var(--papel); }
.papel { background: var(--papel); color: var(--tinta); }
.papel .t-guia, .papel p { color: var(--cinza); }
.papel h1, .papel h2, .papel h3, .papel h4, .papel strong { color: var(--tinta); }

.limite {
  width: min(100% - 72px, var(--largura));
  margin-inline: auto;
}

/* A calha carrega o codigo da etapa — nome real da operacao, nao ornamento.
   -------------------------------------------------------------------------
   Ela ja foi uma COLUNA de 108px a esquerda do conteudo, e isso estava errado:
   empurrava todo o texto para dentro enquanto o logo e a borda do container
   ficavam na margem real. A pagina inteira parecia deslocada a direita, com o
   codigo mandando na composicao em vez de anotar ela.

   Agora o conteudo comeca na borda do container, alinhado com o logo, e o
   codigo vira anotacao acima dele. So em tela realmente larga — onde ha
   margem de pagina sobrando — ele volta a pendurar na margem, que e onde uma
   nota de margem deve estar. */
.calha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); position: relative; }

.codigo {
  font-family: var(--face-dado);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--laranja);
  background: rgba(255, 106, 0, .1);
  border: 1px solid rgba(255, 106, 0, .34);
  padding: 5px 9px 4px;
  display: inline-block;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  justify-self: start;
}
.codigo small {
  display: block;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--texto-fraco);
  margin-top: 3px;
  text-transform: uppercase;
}

/* Tela larga: ha margem de pagina de sobra, entao o codigo pendura FORA do
   container — nota de margem de verdade — e o conteudo nao se mexe um pixel. */
@media (min-width: 1720px) {
  .calha > div:first-child {
    position: absolute;
    right: 100%;
    top: 0;
    margin-right: var(--e5);
  }
  .calha { gap: 0; }
  .codigo { position: sticky; top: 96px; }
}

/* --------------------------------------------------------------------------
   5. Botoes — texto sobre laranja e SEMPRE tinta (regra de contraste da marca)
   -------------------------------------------------------------------------- */
/* Botao precisa PARECER botao. O secundario era transparente e, sobre a foto
   do hero, lia como etiqueta com borda — o visitante nao reconhecia o alvo.
   Agora os dois tem superficie propria, peso de texto e estado de pressao. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--face-titulo);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .015em;
  padding: 16px 28px 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  /* o chanfro: eco da aresta cortada do cubo do logo. Fica. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)),
                     calc(100% - var(--corte)) 100%, 0 100%);
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              filter var(--transicao);
}

/* PROFUNDIDADE COM CHANFRO — o problema e a solucao.
   -------------------------------------------------------------------------
   `box-shadow` e recortado pelo `clip-path`: a sombra simplesmente desaparece
   e o botao fica chapado, sem nenhuma pista de que e clicavel. Foi o que
   aconteceu na primeira versao.

   `filter: drop-shadow()` faz o contrario — ele traca a SILHUETA JA RECORTADA,
   entao a base escura acompanha a quina cortada em vez de brigar com ela.
   O chanfro continua, e o botao ganha volume.

   O brilho interno no topo sobrevive porque o corte e na quina de BAIXO. */
.btn:active { transform: translateY(2px); }
.btn__icone { width: 19px; height: 19px; flex: 0 0 19px; fill: currentColor; }

.btn--primario {
  background: var(--laranja); color: var(--tinta);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .34);
  filter: drop-shadow(0 3px 0 #A33F00);
}
.btn--primario:hover { background: #FF8124; }
.btn--primario:active { filter: drop-shadow(0 1px 0 #A33F00); }
.btn--primario .btn__seta { transition: transform var(--transicao); }
.btn--primario:hover .btn__seta { transform: translateX(3px); }

/* secundario com SUPERFICIE: sobre foto, borda sozinha nao sustenta o alvo */
.btn--vazado {
  background: rgba(255, 255, 255, .13);
  color: var(--papel);
  border-color: rgba(255, 255, 255, .36);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .18);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5));
}
.btn--vazado:hover { background: rgba(255, 255, 255, .22); border-color: var(--papel); }
.btn--vazado:active { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }

.papel .btn--vazado {
  color: var(--tinta);
  background: rgba(17, 20, 24, .06);
  border-color: rgba(17, 20, 24, .3);
  backdrop-filter: none;
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(17, 20, 24, .24));
}
.papel .btn--vazado:active { filter: drop-shadow(0 1px 0 rgba(17, 20, 24, .24)); }
.papel .btn--vazado:hover { background: rgba(17, 20, 24, .11); border-color: var(--tinta); }

.btn--largo { width: 100%; justify-content: center; }

.acoes { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

/* --------------------------------------------------------------------------
   6. Cabecalho
   -------------------------------------------------------------------------- */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(17, 20, 24, .93);
  backdrop-filter: saturate(140%) blur(9px);
  border-bottom: 1px solid var(--fio-claro);
}
.topo__linha {
  display: flex;
  align-items: center;
  gap: var(--e5);
  height: 78px;
}
.topo__marca { display: flex; align-items: center; flex: 0 0 auto; }
.topo__marca img { height: 34px; width: auto; }

.menu { display: flex; gap: var(--e5); margin-left: auto; list-style: none; padding: 0; }
.menu a {
  font-family: var(--face-texto);
  font-weight: 600;
  font-size: .95rem;
  color: var(--texto-fraco);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
  white-space: nowrap;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--papel); border-bottom-color: var(--laranja); }

.topo__acoes { display: flex; align-items: center; gap: var(--e3); flex: 0 0 auto; }
.topo .btn { font-size: .95rem; padding: 11px 19px 9px; --corte: 8px; }

/* Area do cliente: quem ja e cliente entra por aqui todo dia, entao precisa
   estar no cabecalho — mas nao pode disputar peso com o CTA de quem ainda nao
   e cliente. Vazado resolve os dois. */
.btn--cliente {
  background: rgba(255, 255, 255, .07); color: var(--texto-fraco);
  border-color: var(--fio-claro);
  font-family: var(--face-texto); font-weight: 600;
  box-shadow: none; filter: none; clip-path: none;
}
.btn--cliente:active { transform: none; }
.btn--cliente:hover { color: var(--papel); border-color: var(--papel); }

.hamburger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--fio-claro);
  color: var(--papel);
  width: 42px; height: 42px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.hamburger span { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; }
.hamburger span::before, .hamburger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor;
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }


/* --------------------------------------------------------------------------
   6b. Cabecalho no celular — o bug que deixou o site SEM NAVEGACAO
   --------------------------------------------------------------------------
   Medido no ar em 375x812: o hamburguer caia em `x=393`, ou seja, FORA DA
   TELA. Logo (176) + botao (158) + hamburguer (32) nao cabem em 375 com as
   goteiras. O menu ficou inalcancavel no celular — nao "apertado": inacessivel.

   A conta que passa a valer, em 375: 32 de goteira, logo 145, botao ~118,
   hamburguer 44, mais dois vaos de 10 = 359. Cabe com folga.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .limite { width: calc(100% - 28px); }
  .topo__linha { gap: 10px; height: 68px; }
  .topo__marca img { height: 28px; }

  /* "Pedir" some; "Orçamento" basta quando o botao e o unico laranja da barra */
  .topo .btn { font-size: .88rem; padding: 10px 13px 9px; --corte: 7px; }
  .topo .btn .btn__seta { display: none; }
  .so-largo { display: none; }

  /* alvo de toque: 44px de lado, que e o minimo da Apple HIG e o dobro do
     minimo da WCAG 2.2 — a barra tem espaco, entao vale o maior */
  .hamburger { width: 44px; height: 44px; flex: 0 0 44px; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   7. Abertura
   -------------------------------------------------------------------------- */
.abertura { padding-top: calc(78px + clamp(20px, 1.8vw, 32px)); padding-bottom: clamp(18px, 1.6vw, 26px); }
.abertura__texto { max-width: 20ch; }
.abertura__texto em { font-style: normal; color: var(--laranja); }
.abertura .t-guia { margin: var(--e3) 0 var(--e5); }

.selo-tagline {
  font-family: var(--face-dado);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cinza);
  margin-top: var(--e5);
  margin-bottom: 0;
}



/* --------------------------------------------------------------------------
   7d. Fundo do hero
   --------------------------------------------------------------------------
   Corredor com porta-pallets, atras de um veu de #111418. A identidade exige
   no minimo 70% de veu sobre foto ("nunca confiar na foto crua"); aqui o veu
   e um degrade que fica quase opaco do lado do texto e abre para a direita,
   onde so ha a ficha. Assim a foto da profundidade sem disputar leitura.

   A imagem entra por CSS e nao por <img>: ela e ambiente, nao conteudo, e
   assim nao vira o elemento de maior pintura (LCP) da pagina — quem tem de
   ser o LCP e a manchete. 37 KB em WebP, com JPEG de reserva.
   -------------------------------------------------------------------------- */
.abertura { position: relative; isolation: isolate; }

/* --- carrossel de fundo -------------------------------------------------- */
/* `.cenas` NAO leva z-index: se levasse negativo, criaria contexto de
   empilhamento e enterraria o proprio controle debaixo do veu (::after, -1),
   deixando os botoes invisiveis e sem clique. O palco vai para -2 sozinho;
   o controle sobe. E a caixa toda ignora o ponteiro, para nao roubar o clique
   do conteudo do hero. */
.cenas { position: absolute; inset: 0; pointer-events: none; }
.cenas__palco { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cena {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: 62% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translate3d(5%, 0, 0);
  /* SO opacity e transform: as duas unicas que a placa de video resolve sem
     repintar a tela inteira. Animar background-image ou left trava Android. */
  transition: opacity 900ms ease-in-out, transform 900ms cubic-bezier(.22,.61,.36,1);
}
.cena--ativa  { opacity: .72; transform: none; }
.cena--saindo { opacity: 0; transform: translate3d(-5%, 0, 0); }

/* o controle: mostra a etapa, nao uma bolinha sem significado */
.cenas__controle {
  display: inline-flex; gap: 1px;
  margin-top: var(--e3);
  background: var(--fio-claro);
  border: 1px solid var(--fio-claro);
}
.cena-btn {
  appearance: none; cursor: pointer;
  background: rgba(17, 20, 24, .78);
  border: 0; padding: 9px 14px 8px;
  text-align: left; color: var(--texto-fraco);
  transition: background var(--transicao), color var(--transicao);
}
.cena-btn:hover { background: rgba(17, 20, 24, .94); color: var(--papel); }
.cena-btn__sigla {
  display: block;
  font-family: var(--face-dado); font-weight: 500;
  font-size: .66rem; letter-spacing: .16em; color: inherit;
}
.cena-btn__nome {
  display: block;
  font-family: var(--face-texto); font-weight: 600;
  font-size: .74rem; opacity: .72; margin-top: 1px;
}
.cena-btn--ativo {
  background: var(--laranja); color: var(--tinta);   /* nunca branco sobre laranja */
}
.cena-btn--ativo:hover { background: var(--laranja); color: var(--tinta); }
.cena-btn--ativo .cena-btn__nome { opacity: .9; }
.abertura::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(17, 20, 24, .96) 0%,
      rgba(17, 20, 24, .90) 38%,
      rgba(17, 20, 24, .62) 66%,
      rgba(17, 20, 24, .46) 100%),
    linear-gradient(to bottom,
      rgba(17, 20, 24, .60) 0%,
      rgba(17, 20, 24, 0) 20%,
      rgba(17, 20, 24, .10) 52%,
      var(--tinta) 92%);
}
/* a ficha ganha corpo proprio para nao flutuar sobre a foto */
.abertura .ficha { background: rgba(17, 20, 24, .84); backdrop-filter: blur(4px); }

@media (max-width: 860px) {
  /* em tela estreita o texto ocupa a largura toda: o veu precisa ser parelho */
  .cena--ativa { opacity: .34; }
  .cenas__controle { display: none; }
  .abertura::after {
    background:
      linear-gradient(to bottom, rgba(17,20,24,.90) 0%, rgba(17,20,24,.93) 60%, var(--tinta) 100%);
  }
}

/* --------------------------------------------------------------------------
   7b. Hero em duas colunas, e a ficha
   --------------------------------------------------------------------------
   Em tela larga o texto do hero parava em ~620px dentro de uma coluna de
   1076px: sobrava um vazio assimetrico a direita. Esticar a linha resolveria o
   buraco e estragaria a leitura. Entao o vazio recebe a ficha da operacao —
   informacao que o comprador procura antes de pedir orcamento.
   -------------------------------------------------------------------------- */
.abertura__grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .85fr);
  gap: var(--e8); align-items: start; }

.ficha { border: 1px solid var(--fio-claro); background: rgba(255, 255, 255, .02); }
.ficha__topo { padding: var(--e4) var(--e5); border-bottom: 1px solid var(--fio-claro); }
.ficha__lista { margin: 0; padding: 0; }
.ficha__lista > div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e4);
  align-items: baseline;
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--fio-claro);
}
.ficha__lista dt {
  font-family: var(--face-dado); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--cinza); line-height: 1.4;
}
.ficha__lista dd {
  margin: 0; text-align: right; font-size: .93rem; line-height: 1.35;
  font-weight: 600;
}
.ficha__nota {
  display: block; font-weight: 400; font-size: .78rem; color: var(--texto-fraco);
}
.ficha__canais {
  padding: var(--e4) var(--e5) var(--e5);
  font-size: .88rem; line-height: 1.5; color: var(--texto-fraco); margin: 0;
}
.ficha__canais .rotulo { margin-bottom: var(--e2); }


/* --------------------------------------------------------------------------
   7c. As tres portas de entrada
   --------------------------------------------------------------------------
   Segmentacao acima da dobra: cada perfil se reconhece na propria linha em vez
   de a manchete tentar falar com os tres e nao morder nenhum. A numeracao aqui
   NAO e sequencia — sao caminhos alternativos, e por isso vem em coluna e nao
   em fila com seta.
   -------------------------------------------------------------------------- */
.portas {
  margin-top: clamp(24px, 2.2vw, 32px);
  border-top: 1px solid var(--fio-claro);
  padding-top: var(--e5);
}
.portas__topo { margin-bottom: var(--e4); }
.portas__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--fio-claro);
}
.porta {
  background: rgba(17, 20, 24, .86);
  backdrop-filter: blur(2px);
  padding: var(--e4) var(--e4) var(--e5);
  display: flex; flex-direction: column;
}
.porta__sigla {
  font-family: var(--face-dado); font-weight: 500;
  font-size: .72rem; letter-spacing: .16em; color: var(--laranja);
  margin-bottom: var(--e3);
}
.porta__titulo {
  font-family: var(--face-titulo); font-weight: 700;
  font-size: clamp(1.18rem, 1.6vw, 1.36rem); line-height: 1.04;
  margin: 0 0 var(--e2);
}
.porta__texto {
  font-size: .89rem; line-height: 1.45; color: var(--texto-fraco);
  margin: 0 0 var(--e4); flex: 1 1 auto;
}
.porta__saida { margin: 0; }
.porta__saida a {
  font-family: var(--face-titulo); font-weight: 700; font-size: 1.02rem;
  color: var(--laranja); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color var(--transicao);
}
.porta__saida a::after { content: " →"; }
.porta__saida a:hover { border-bottom-color: var(--laranja); }


/* a porta que fala de GANHAR, e nao de parar de sofrer, e a unica com numero.
   O numero e a ancora: ele carrega o argumento sozinho. */
.porta--destaque { background: rgba(255, 106, 0, .07); }
.porta__numero {
  margin: 0 0 2px;
  font-family: var(--face-titulo); font-weight: 700;
  line-height: .9; color: var(--laranja);
}
.porta__numero strong {
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.porta__numero span {
  display: block; font-size: .96rem; letter-spacing: .01em;
  color: var(--papel); margin-top: 3px;
}
/* A fonte do numero vira etiqueta chapada de laranja. Fundo laranja com texto
   ESCURO e a combinacao que a identidade autoriza — branco sobre laranja da
   2,87:1 e e proibida. Aqui ela ganha o peso de citacao carimbada, que e o
   que ela e: o numero tem procedencia. */
.porta__legenda {
  display: inline-block;
  font-family: var(--face-dado); font-weight: 500;
  font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  background: var(--laranja); color: var(--tinta);
  padding: 4px 7px 3px;
  margin: 0 0 var(--e3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   16d. Lista de canais
   --------------------------------------------------------------------------
   O seller procura o NOME do canal dele. Nao achar e motivo de sair da pagina,
   entao a lista e literal e longa em vez de "e os principais marketplaces".
   -------------------------------------------------------------------------- */
.canais-grade { display: grid; grid-template-columns: 1.75fr 1fr; gap: var(--e8); }
.canais-grupo .rotulo { margin-bottom: var(--e4); }
.canais-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0;
}
.canais-lista li {
  font-family: var(--face-titulo); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .005em;
  padding: var(--e3) var(--e4) var(--e3) 0;
  border-top: 1px solid var(--fio-claro);
  color: var(--papel);
}
.papel .canais-lista li { border-top-color: var(--fio-escuro); color: var(--tinta); }

/* --------------------------------------------------------------------------
   8. O TRILHO — elemento de assinatura
   --------------------------------------------------------------------------
   As cinco etapas reais pelas quais um pedido passa dentro do CD. A parte que
   sai da mao do seller aparece cortada. O trilho e o argumento do site
   desenhado: nao ha foto porque nao ha foto honesta, entao a operacao se
   mostra como dado.
   -------------------------------------------------------------------------- */
.trilho {
  margin-top: clamp(44px, 4.5vw, 68px);
  border-top: 1px solid var(--fio-claro);
  padding-top: var(--e5);
}
.trilho__topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e3) var(--e5); flex-wrap: wrap; margin-bottom: var(--e5);
}
.trilho__topo > * { margin-bottom: 0; }
.trilho__etapas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  list-style: none; padding: 0; margin: 0;
}
.etapa {
  background: var(--tinta-alta);
  border-top: 2px solid var(--laranja);
  padding: var(--e4) var(--e3) var(--e5) var(--e4);
  min-height: 138px;
  display: flex; flex-direction: column;
  position: relative;
  /* revelacao em sequencia no carregamento: uma vez, da esquerda para a direita */
  animation: sobe 520ms cubic-bezier(.22, .61, .36, 1) backwards;
  animation-delay: calc(var(--i) * 70ms);
}
.etapa__sigla {
  font-family: var(--face-dado); font-weight: 500;
  font-size: .72rem; letter-spacing: .16em;
  color: var(--laranja); margin-bottom: var(--e2);
}
.etapa__nome {
  font-family: var(--face-titulo); font-weight: 700;
  font-size: 1.06rem; line-height: 1; margin-bottom: var(--e2);
}
.etapa__desc { font-size: .845rem; line-height: 1.4; color: var(--texto-fraco); margin: 0; }

@keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.trilho__fecho {
  margin: var(--e5) 0 0; padding-top: var(--e4);
  border-top: 1px dashed var(--fio-claro);
  font-family: var(--face-dado); font-size: .78rem; line-height: 1.6;
  letter-spacing: .05em; color: var(--cinza);
}
.trilho__fecho b { color: var(--laranja); font-weight: 500; }

/* --------------------------------------------------------------------------
   9. Grades de conteudo
   -------------------------------------------------------------------------- */
.grade { display: grid; gap: var(--e5); }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* bloco: sem sombra, sem raio. A hierarquia vem do fio e do espaco. */
.bloco { border-top: 1px solid var(--fio-escuro); padding-top: var(--e4); }
.tinta .bloco, .tinta-alta .bloco { border-top-color: var(--fio-claro); }
.bloco h3 { margin-bottom: var(--e2); }
.bloco p { font-size: .95rem; margin: 0; }

/* numero em destaque */
.metrica__valor {
  font-family: var(--face-titulo); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .9;
  letter-spacing: -.02em; color: var(--laranja);
  font-variant-numeric: tabular-nums;
}
.metrica__rotulo {
  font-family: var(--face-dado); font-size: .72rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--texto-fraco); margin-top: var(--e2);
}
.papel .metrica__rotulo { color: var(--cinza); }
.papel .metrica__valor { color: var(--tinta); }
.papel .metrica__valor::before {
  content: ""; display: block; width: 34px; height: 3px;
  background: var(--laranja); margin-bottom: var(--e3);
}


/* --- vantagens: cada uma com o mecanismo que a sustenta ------------------ */
.vantagens { gap: var(--e6) var(--e7); }
.vantagem { border-top: 2px solid var(--laranja); padding-top: var(--e4); }
.vantagem__titulo {
  font-family: var(--face-titulo); font-weight: 700;
  font-size: clamp(1.16rem, 1.5vw, 1.3rem); line-height: 1.06;
  margin: 0 0 var(--e2);
}
.vantagem__texto { font-size: .93rem; line-height: 1.5; margin: 0 0 var(--e3); }
.vantagem__como {
  font-family: var(--face-dado); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cinza); margin: 0;
  padding-top: var(--e3); border-top: 1px solid var(--fio-escuro);
}
.tinta .vantagem__como, .tinta-alta .vantagem__como { border-top-color: var(--fio-claro); }

/* --------------------------------------------------------------------------
   10. Tabela de servicos
   -------------------------------------------------------------------------- */
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela caption { text-align: left; margin-bottom: var(--e4); }
.tabela th, .tabela td {
  text-align: left; padding: var(--e4) var(--e4) var(--e4) 0;
  border-bottom: 1px solid var(--fio-escuro); vertical-align: top;
}
.tinta .tabela th, .tinta .tabela td { border-bottom-color: var(--fio-claro); }
.tabela th {
  font-family: var(--face-dado); font-weight: 500;
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--cinza); border-bottom-width: 1px;
}
.tabela td:first-child {
  font-family: var(--face-titulo); font-weight: 700; font-size: 1.1rem;
  white-space: nowrap; padding-right: var(--e5);
}
.tabela .sim { color: var(--laranja); font-family: var(--face-dado); font-size: .8rem; letter-spacing: .1em; }

/* --------------------------------------------------------------------------
   11. Perguntas
   -------------------------------------------------------------------------- */
.pergunta { border-top: 1px solid var(--fio-escuro); }
.tinta .pergunta { border-top-color: var(--fio-claro); }
.pergunta:last-of-type { border-bottom: 1px solid var(--fio-escuro); }
.tinta .pergunta:last-of-type { border-bottom-color: var(--fio-claro); }

.pergunta summary {
  cursor: pointer; list-style: none;
  padding: var(--e5) var(--e7) var(--e5) 0;
  font-family: var(--face-titulo); font-weight: 700;
  font-size: clamp(1.06rem, 1.7vw, 1.24rem); line-height: 1.15;
  position: relative;
  transition: color var(--transicao);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:hover { color: var(--laranja); }
.pergunta summary::after {
  content: "+";
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--face-dado); font-size: 1.3rem; color: var(--laranja);
  transition: transform var(--transicao);
}
.pergunta[open] summary::after { content: "\2212"; }
.pergunta__resposta { padding: 0 var(--e7) var(--e5) 0; max-width: 66ch; }
.pergunta__resposta p { font-size: .97rem; }

/* --------------------------------------------------------------------------
   12. Depoimentos
   -------------------------------------------------------------------------- */
.depoimento { border-left: 2px solid var(--laranja); padding-left: var(--e5); }
.depoimento blockquote {
  margin: 0 0 var(--e4);
  font-size: 1.04rem; line-height: 1.5;
}
.depoimento figcaption {
  font-family: var(--face-dado); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cinza);
}
.depoimento figcaption b { color: var(--papel); font-weight: 500; display: block; }
.papel .depoimento figcaption b { color: var(--tinta); }

/* --------------------------------------------------------------------------
   13. Formulario
   -------------------------------------------------------------------------- */
.campo { display: block; margin-bottom: var(--e5); }
.campo > span {
  display: block;
  font-family: var(--face-dado); font-weight: 500;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cinza); margin-bottom: var(--e2);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  font-family: var(--face-texto); font-size: 1rem; color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--fio-escuro);
  border-radius: 0;
  padding: 13px 14px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
  -webkit-appearance: none; appearance: none;
}
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23555A61' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.campo textarea { min-height: 118px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--laranja);
  box-shadow: inset 0 0 0 1px var(--laranja);
}
.campo input:user-invalid, .campo select:user-invalid, .campo textarea:user-invalid {
  border-color: #C4360A;
}
.campo__ajuda { font-size: .82rem; color: var(--cinza); margin-top: var(--e2); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* --- grupo de opcoes e aviso de erro do formulario ----------------------- */
.campo--grupo { border: 0; padding: 0; margin: 0 0 var(--e5); }
.campo--grupo legend { padding: 0; margin-bottom: var(--e2); }
.campo--grupo legend span {
  font-family: var(--face-dado); font-weight: 500;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cinza);
}
.opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e4); }
.opcoes label {
  display: flex; align-items: center; gap: var(--e2);
  font-size: .95rem; cursor: pointer; line-height: 1.3;
}
.opcoes input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; flex: 0 0 17px;
  border: 1px solid var(--fio-escuro); background: var(--papel);
  display: grid; place-content: center; cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.opcoes input[type="checkbox"]::before {
  content: ""; width: 9px; height: 9px; transform: scale(0);
  background: var(--tinta); transition: transform var(--transicao);
}
.opcoes input[type="checkbox"]:checked { background: var(--laranja); border-color: var(--laranja); }
.opcoes input[type="checkbox"]:checked::before { transform: scale(1); }

.aviso-erro {
  border-left: 3px solid var(--laranja);
  background: rgba(255, 106, 0, .07);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e6);
  font-size: .95rem;
}

/* o botao de enviar nao pode parecer clicavel enquanto ja esta enviando */
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* a coluna lateral do orcamento acompanha o formulario, nao vira rodape solto */
form + aside .tabela td:first-child { font-size: .95rem; }

/* --------------------------------------------------------------------------
   14. Rodape
   -------------------------------------------------------------------------- */
.rodape { background: var(--tinta-baixa); color: var(--texto-fraco); padding: var(--e8) 0 var(--e6); }
.rodape a { color: var(--texto-fraco); text-decoration: none; transition: color var(--transicao); }
.rodape a:hover { color: var(--laranja); }
.rodape__grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--e6); }
.rodape h4 {
  font-family: var(--face-dado); font-weight: 500;
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--papel); margin-bottom: var(--e4);
}
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: var(--e3); font-size: .93rem; }
.rodape__marca img { height: 40px; margin-bottom: var(--e5); }
.rodape__fim {
  margin-top: var(--e8); padding-top: var(--e5);
  border-top: 1px solid var(--fio-claro);
  display: flex; justify-content: space-between; gap: var(--e4); flex-wrap: wrap;
  font-family: var(--face-dado); font-size: .74rem; letter-spacing: .06em;
  color: var(--cinza);
}

/* --------------------------------------------------------------------------
   15. Blog
   -------------------------------------------------------------------------- */
.artigo-cartao { display: flex; flex-direction: column; height: 100%; }
/* As capas sao CARTAZES quadrados com o titulo dentro da imagem. Recortar em
   16:9 decapitava o texto — que e o conteudo. Entao a moldura acompanha a
   imagem, e nao o contrario. */
.artigo-cartao__capa {
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--tinta-alta);
  margin-bottom: var(--e4); border-top: 2px solid var(--laranja);
  display: block;
}
.artigo-cartao__capa img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 400ms ease;
}
/* capa ausente: o quadrado vazio fica pior que quadrado nenhum */
.artigo-cartao--sem-capa .artigo-cartao__capa { display: none; }
.artigo-cartao--sem-capa { border-top: 2px solid var(--laranja); padding-top: var(--e4); }
.artigo-cartao:hover .artigo-cartao__capa img { transform: scale(1.03); }
.artigo-cartao h3 { font-size: 1.22rem; line-height: 1.1; margin-bottom: var(--e3); }
.artigo-cartao h3 a { text-decoration: none; }
.artigo-cartao h3 a:hover { color: var(--laranja); }
.artigo-cartao time {
  font-family: var(--face-dado); font-size: .72rem;
  letter-spacing: .12em; color: var(--cinza); display: block; margin-bottom: var(--e2);
}
.artigo-cartao p { font-size: .92rem; color: var(--texto-fraco); margin: 0; }
.papel .artigo-cartao p { color: var(--cinza); }

/* corpo do artigo: aqui manda a leitura, nao o partido grafico */
.prosa { max-width: 68ch; font-size: 1.09rem; line-height: 1.72; color: var(--tinta); }
.prosa h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: var(--e8) 0 var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--fio-escuro);
}
.prosa h3 { font-size: 1.32rem; margin: var(--e7) 0 var(--e3); }
.prosa p { margin: 0 0 var(--e5); color: var(--tinta); }
.prosa ul, .prosa ol { margin: 0 0 var(--e5); padding-left: var(--e5); }
.prosa li { margin-bottom: var(--e3); }
.prosa li::marker { color: var(--laranja); }
.prosa a { color: var(--tinta); text-decoration-color: var(--laranja); text-decoration-thickness: 2px; }
.prosa a:hover { color: var(--laranja); }
.prosa strong { font-weight: 600; }
.prosa img { margin: var(--e6) 0; }
.prosa blockquote {
  margin: var(--e6) 0; padding-left: var(--e5);
  border-left: 2px solid var(--laranja);
  font-size: 1.14rem;
}

.paginacao { display: flex; gap: var(--e2); list-style: none; padding: 0; margin: var(--e8) 0 0; }
.paginacao a, .paginacao span {
  display: block; min-width: 42px; padding: 9px 12px; text-align: center;
  font-family: var(--face-dado); font-size: .86rem; text-decoration: none;
  border: 1px solid var(--fio-escuro); color: var(--tinta);
}
.paginacao a:hover { border-color: var(--laranja); color: var(--laranja); }
.paginacao [aria-current="page"] { background: var(--laranja); color: var(--tinta); border-color: var(--laranja); }


/* --------------------------------------------------------------------------
   15b. Destaques do blog — trilho horizontal
   --------------------------------------------------------------------------
   Padrao trazido do statflow-blogger. Scroll-snap nativo: sem JavaScript, sem
   setas, e o gesto de arrastar ja e conhecido do visitante.
   -------------------------------------------------------------------------- */
.destaques__topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e4);
}
.destaques__topo > * { margin-bottom: 0; }

.destaques__trilho {
  display: flex; gap: var(--e5);
  list-style: none; margin: 0; padding: 2px 0 var(--e4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* Edge antigo */
  overscroll-behavior-x: contain;
}
.destaques__trilho::-webkit-scrollbar { display: none; }

.cartaz {
  flex: 0 0 auto;
  width: min(88vw, 700px);
  scroll-snap-align: start;
  display: grid; grid-template-columns: 1fr 240px;
  gap: var(--e5);
  align-items: center;
  background: var(--papel-osso);
  border-top: 2px solid var(--laranja);
  padding: var(--e5);
}
.tinta .cartaz, .tinta-alta .cartaz { background: var(--tinta-alta); }

.cartaz__data {
  font-family: var(--face-dado); font-size: .7rem; letter-spacing: .12em;
  color: var(--cinza); display: block; margin-bottom: var(--e2);
}
.cartaz__titulo {
  font-size: clamp(1.24rem, 1.8vw, 1.55rem); line-height: 1.06;
  margin: 0 0 var(--e3);
}
.cartaz__titulo a { text-decoration: none; }
.cartaz__titulo a:hover { color: var(--laranja); }
.cartaz__resumo { font-size: .92rem; line-height: 1.5; color: var(--cinza); margin: 0 0 var(--e4); }
.tinta .cartaz__resumo, .tinta-alta .cartaz__resumo { color: var(--texto-fraco); }
.cartaz__saida { margin: 0; }
.cartaz__saida a {
  font-family: var(--face-titulo); font-weight: 700; font-size: 1rem;
  color: var(--tinta); text-decoration: none;
  border-bottom: 2px solid var(--laranja); padding-bottom: 2px;
}
.tinta .cartaz__saida a, .tinta-alta .cartaz__saida a { color: var(--papel); }
.cartaz__saida a:hover { color: var(--laranja); }

/* SEM CORTE: a capa e cartaz quadrado com o titulo dentro dela */
.cartaz__capa { align-self: center; }
.cartaz__capa img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; display: block; }

/* O TRILHO FICA NO CELULAR — e aqui a decisao se separa da do statflow.
   -------------------------------------------------------------------------
   La ele era escondido abaixo de 699px porque os mesmos artigos continuavam na
   grade logo abaixo: a secao era repeticao, e esconder nao custava conteudo.

   AQUI NAO HA GRADE. Na home o bloco de blog E o trilho, entao `display:none`
   deixou a secao com 225px de altura e ZERO artigo — medido no ar em 2026-09-10.
   Um titulo sozinho, sem nada embaixo.

   E o trilho e justamente o componente que o dedo resolve melhor: arrastar na
   horizontal e gesto nativo. O que sai no celular sao as SETAS, que ali roubam
   area do cartao sem acrescentar nada. */
@media (max-width: 699px) {
  .cartaz { width: min(84vw, 380px); grid-template-columns: 1fr; }
  .destaques__trilho { gap: var(--e4); }
}
@media (max-width: 860px) { .cartaz { grid-template-columns: 1fr; } .cartaz__capa { max-width: 260px; } }


/* --- setas do trilho ------------------------------------------------------
   Mesma forma do statflow (circulo de 44px, que e o controle de carrossel que
   todo mundo ja reconhece) com as cores daqui. No hover o fundo vira laranja e
   o simbolo vira ESCURO: branco sobre laranja da 2,87:1 e a identidade proibe.
   Escondidas no celular — ali o dedo ja resolve e a seta rouba area do card.
   -------------------------------------------------------------------------- */
.destaques__caixa { position: relative; }
.destaques__seta {
  display: none;
  position: absolute; top: calc(50% - 14px);
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 1px solid var(--fio-claro); border-radius: 50%;
  background: var(--tinta); color: var(--papel);
  font-size: 24px; line-height: 1; padding: 0 0 3px;
  cursor: pointer; z-index: 2;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  transition: background var(--transicao), color var(--transicao), opacity var(--transicao);
}
.papel .destaques__seta { border-color: var(--fio-escuro); }
@media (min-width: 900px) and (hover: hover) {
  .destaques__seta:not([hidden]) { display: flex; }
}
.destaques__seta--antes  { left: -14px; }
.destaques__seta--depois { right: -14px; }
.destaques__seta:hover, .destaques__seta:focus-visible {
  background: var(--laranja); color: var(--tinta); border-color: var(--laranja);
}
.destaques__seta[disabled] { opacity: .28; cursor: default; }
.destaques__seta[disabled]:hover {
  background: var(--tinta); color: var(--papel); border-color: var(--fio-claro);
}
/* o trilho precisa poder ser focado sem ganhar contorno de caixa inteira */
.destaques__trilho:focus-visible { outline: 2px solid var(--laranja); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .destaques__trilho { scroll-behavior: auto; }
  .destaques__seta { transition: none; }
}

/* --------------------------------------------------------------------------
   16. Marketplaces — monocromaticos: a cor de concorrente nao entra na paleta
   -------------------------------------------------------------------------- */
.canais { display: flex; flex-wrap: wrap; gap: var(--e6); align-items: center; }
.canais li {
  font-family: var(--face-titulo); font-weight: 700; font-size: 1.16rem;
  letter-spacing: .01em; color: var(--cinza);
}


/* --------------------------------------------------------------------------
   16b. Desenhos tecnicos
   --------------------------------------------------------------------------
   Nao ha foto honesta da operacao, entao o que ilustra o site e desenho de
   planta e de cota — o mesmo tipo de peca que circula dentro de um galpao.
   Herdam currentColor: o mesmo SVG serve sobre tinta e sobre papel.
   -------------------------------------------------------------------------- */
.planta {
  margin: var(--e7) 0 0;
  padding: var(--e6) var(--e6) var(--e5);
  background: var(--tinta);
  color: var(--papel);
  border-top: 2px solid var(--laranja);
}
.tinta .planta { background: var(--tinta-alta); }
.tinta-alta .planta { background: var(--tinta); }
.planta svg { width: 100%; height: auto; display: block; }
.planta figcaption {
  margin-top: var(--e5); padding-top: var(--e4);
  border-top: 1px solid var(--fio-claro);
  font-size: .9rem; line-height: 1.5; color: var(--texto-fraco); max-width: 62ch;
}
.planta--pallet svg { max-width: 340px; margin-inline: auto; }

/* a rota se desenha uma vez, da entrada para a saida — o sentido do fluxo e a
   informacao; sem movimento a linha e so um tracejado */
.planta__rota { animation: tracar 1400ms cubic-bezier(.4, 0, .2, 1) 260ms forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   16c. Listas fora do corpo de artigo
   -------------------------------------------------------------------------- */
.bloco ul, .lista { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.bloco ul li, .lista li {
  position: relative; padding-left: var(--e5); margin-bottom: var(--e3);
  line-height: 1.5;
}
.bloco ul li::before, .lista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1.5px; background: var(--laranja);
}

/* --------------------------------------------------------------------------
   17. Chamada final
   -------------------------------------------------------------------------- */
.chamada { border-top: 2px solid var(--laranja); }
.chamada__linha { display: flex; gap: var(--e7); align-items: end; flex-wrap: wrap; }
.chamada__linha > div:first-child { flex: 1 1 460px; }

/* --------------------------------------------------------------------------
   18. Utilidades
   -------------------------------------------------------------------------- */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.centro { text-align: center; }
.mt-6 { margin-top: var(--e6); }
.mt-7 { margin-top: var(--e7); }
.mb-0 { margin-bottom: 0; }
.max-60 { max-width: 60ch; }

/* --------------------------------------------------------------------------
   19. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  .portas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1160px) {
  .abertura__grade { grid-template-columns: 1fr; gap: var(--e7); }
  .ficha { max-width: 460px; }
  .canais-grade { grid-template-columns: 1fr; gap: var(--e7); }
}

@media (max-width: 1080px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; gap: var(--e7) var(--e6); }
  .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Cinco etapas em 3 colunas viram 3+2, com um buraco no canto que quebra a
     leitura de sequencia. Abaixo da largura que comporta as cinco lado a lado,
     a sequencia vira lista: cada etapa uma linha, sigla na calha. */
  .trilho__etapas { grid-template-columns: 1fr; gap: 0; }
  .etapa {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: baseline;
    gap: 0 var(--e4);
    min-height: 0;
    padding: var(--e4) var(--e4) var(--e4) 0;
    background: transparent;
    border-top: 1px solid var(--fio-claro);
  }
  .etapa:first-child { border-top: 2px solid var(--laranja); }
  .etapa__sigla { grid-row: 1 / span 2; margin: 0; }
  .etapa__nome  { margin-bottom: 2px; }
}

@media (max-width: 1080px) {
  .menu, .btn--cliente { display: none; }
  .hamburger { display: flex; order: 3; margin-left: var(--e3); }
  .topo__acoes { margin-left: auto; }
  .topo__linha { gap: var(--e4); }

  .topo--aberto .menu {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; inset: 78px 0 auto; margin: 0;
    background: var(--tinta); border-bottom: 1px solid var(--fio-claro);
    padding: var(--e4) 20px var(--e5);
  }
  .topo--aberto .menu li { border-top: 1px solid var(--fio-claro); }
  .topo--aberto .menu a { display: block; padding: var(--e4) 0; font-size: 1.05rem; border: 0; }
  .topo--aberto .btn--cliente {
    display: flex; justify-content: center;
    margin: var(--e4) 20px var(--e5);
  }
}

@media (max-width: 860px) {
  .grade--2, .grade--3, .grade--4 { grid-template-columns: 1fr; }
  .portas__lista { grid-template-columns: 1fr; }
  .abertura__texto { max-width: none; }

  /* a planta tem 920 de largura util; espremida ela vira risco ilegivel.
     Rola dentro do proprio quadro, e o corpo da pagina nunca rola de lado. */
  .planta { overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: var(--e5) var(--e4) var(--e4); }
  .planta > svg { min-width: 640px; }
  .planta--pallet { overflow: visible; }
  .planta--pallet > svg { min-width: 0; }
  body { font-size: 16px; }
}

@media (max-width: 520px) {
  .limite { width: calc(100% - 32px); }
  .opcoes { grid-template-columns: 1fr; }
  /* o corte e uma quina do cubo, nao um bisel: num botao de largura total
     ele vira uma rampa. Encolhe junto. */
  .acoes .btn { width: 100%; justify-content: center; --corte: 7px; }
  .rodape__grade { grid-template-columns: 1fr; }
}


/* ==========================================================================
   21. CELULAR — adaptacao do conteudo, nao encolhimento do desktop
   ==========================================================================
   Medido no ar em 375x812 antes desta secao existir: 19,2 telas de rolagem,
   18 alvos de toque abaixo de 44px, e o menu inalcancavel (o hamburguer caia
   fora da tela).

   A regra que orientou tudo aqui, e ela vem do Google, nao de gosto:
   "Instead of removing content, consider moving content into accordions or
   tabs to save space" — e, no mesmo documento, o aviso de que site com MENOS
   conteudo no celular deve esperar perda de trafego.
   (developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing)

   Por isso NADA aqui usa `display:none` para encurtar a pagina. O que encurta
   e sanfona — o conteudo continua no HTML e continua indexado.
   ========================================================================== */

@media (max-width: 760px) {

  /* --- alvo de toque -------------------------------------------------------
     As fontes divergem: WCAG 2.2 AA (2.5.8) exige 24px e e o piso obrigatorio;
     WCAG AAA (2.5.5) e a Apple pedem 44; o Material pede 48. Onde ha espaco,
     vale o maior — o dedo nao le norma. */
  .rodape li { margin-bottom: 0; }
  .rodape li a,
  .menu a {
    display: block;
    min-height: 44px;
    display: flex; align-items: center;
  }
  .rodape ul { margin-top: calc(var(--e2) * -1); }

  /* Link SOLTO (unico conteudo do seu paragrafo) e alvo de toque e precisa de
     area. Link EM LINHA dentro de uma frase e isento pela propria WCAG 2.5.8
     ("Inline: The target is in a sentence or its size is otherwise constrained
     by the line-height of non-target text") — por isso o "ver a lista" da ficha
     fica como esta: aumenta-lo quebraria a linha do paragrafo. */
  .porta__saida a,
  .cartaz__saida a,
  .trilho__topo a,
  .destaques__topo a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .topo__marca { min-height: 44px; align-items: center; }

  .opcoes label { min-height: 44px; padding: 4px 0; }
  .opcoes input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 22px; }
  .opcoes input[type="checkbox"]::before { width: 12px; height: 12px; }

  .pergunta summary { padding-top: var(--e5); padding-bottom: var(--e5); }

  /* --- tabela: empilha com rotulo ------------------------------------------
     A NN/g aceita rolagem horizontal para tabela larga, com a coluna de rotulo
     fixa — mas isso serve a COMPARACAO NUMERICA, onde o olho vai e volta entre
     celulas. Aqui a terceira coluna e prosa, e prosa em 99px de largura nao se
     le. Empilhar com o rotulo em cada celula preserva o significado da coluna.
     (nngroup.com/articles/mobile-tables) */
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela tbody tr {
    display: block;
    border-top: 1px solid var(--fio-escuro);
    padding: var(--e4) 0 var(--e5);
  }
  .tinta .tabela tbody tr, .tinta-alta .tabela tbody tr { border-top-color: var(--fio-claro); }
  .tabela tbody tr:first-child { border-top-width: 2px; border-top-color: var(--laranja); }
  .tabela td { display: block; border: 0; padding: 0 0 var(--e2); }
  .tabela td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-family: var(--face-dado); font-weight: 500;
    font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cinza); margin-bottom: 3px;
  }
  .tabela td:first-child {
    font-size: 1.16rem; white-space: normal; padding-right: 0; padding-bottom: var(--e3);
  }
  .tabela td:first-child[data-rotulo]::before { display: none; }

  /* O check do desktop e o rotulo da coluna disputam o mesmo ::before, e o
     check vencia — a celula mostrava "✓" no lugar de "De quem é". No celular,
     onde a coluna nao existe mais como coluna, o rotulo vale mais: ele e a
     unica coisa que diz o que aquele valor significa. */
  .papel .tabela td.sim[data-rotulo]::before,
  .tabela td.sim[data-rotulo]::before {
    content: attr(data-rotulo);
    font-family: var(--face-dado); font-weight: 500;
    font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cinza);
  }
  .tabela caption { margin-bottom: var(--e3); }

  /* --- sanfona de secao ----------------------------------------------------
     Encurta a pagina SEM tirar conteudo do HTML. Nasce aberta: se o JS falhar,
     tudo continua visivel — o pior caso e a pagina longa de antes, nunca
     conteudo sumido. */
  .dobravel > summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e4);
    min-height: 44px;
    padding: var(--e4) 0;
    border-top: 1px solid var(--fio-escuro);
    font-family: var(--face-titulo); font-weight: 700; font-size: 1.06rem;
  }
  .tinta .dobravel > summary, .tinta-alta .dobravel > summary { border-top-color: var(--fio-claro); }
  .dobravel > summary::-webkit-details-marker { display: none; }
  .dobravel > summary::after {
    content: "+"; font-family: var(--face-dado); font-size: 1.35rem;
    color: var(--laranja); line-height: 1;
  }
  .dobravel[open] > summary::after { content: "‘2"; }
  .dobravel > summary span {
    font-family: var(--face-dado); font-weight: 500;
    font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cinza);
  }
  .dobravel__corpo { padding-top: var(--e4); }

  /* --- as quatro portas: mesmas quatro, mais justas ----------------------
     Elas sao a segmentacao acima da dobra e NAO saem — o visitante precisa se
     reconhecer numa delas. O que encolhe e o respiro, nao o conteudo. */
  .porta { padding: var(--e4) var(--e4) var(--e4); }
  .porta__titulo { font-size: 1.14rem; margin-bottom: var(--e2); }
  .porta__texto { font-size: .88rem; line-height: 1.42; margin-bottom: var(--e3); }
  .porta__numero strong { font-size: 2rem; }
  .porta__saida a { font-size: .95rem; }
  .portas__lista { gap: 1px; }

  /* a ficha da operacao e densa de proposito; no celular ela so aperta */
  .ficha__lista > div { padding: var(--e3) var(--e4); }
  .ficha__canais { padding: var(--e3) var(--e4) var(--e4); }

  /* --- respiro: a mesma escala do desktop empilhada vira rolagem morta --- */
  .faixa { padding: clamp(40px, 9vw, 60px) 0; }
  .faixa--curta { padding: clamp(32px, 7vw, 48px) 0; }
  .grade { gap: var(--e5); }
  .vantagens { gap: var(--e5); }
  .canais-grade { gap: var(--e6); }
  .mt-7 { margin-top: var(--e5); }

  /* o desenho tecnico rola dentro do proprio quadro; a pagina nunca de lado */
  .planta > svg { min-width: 560px; }
}

@media (min-width: 761px) {
  /* fora do celular a sanfona nao existe: o gatilho some e o corpo fica aberto */
  .dobravel > summary { display: none; }
  .dobravel__corpo { display: block !important; }
}

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

@media (prefers-reduced-motion: reduce) {
  .cena { transform: none; }
  .cena--saindo { transform: none; }
}

@media print {
  .topo, .rodape, .acoes, .hamburger { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .tinta, .tinta-alta { background: #fff !important; color: #000 !important; }
  .prosa { max-width: none; }
}