/* ===========================================================
   Recepta — Site Institucional
   Paleta e tipografia: Manual da Marca (Pedro Scamilla, 2026)
   =========================================================== */

/* Nexa: fonte primária do manual, aplicada nos títulos, subtítulos e
   elementos de destaque, que é o papel que o manual dá a ela. O corpo de
   texto segue na Montserrat, a secundária, também conforme o manual.

   Os quatro pesos do manual (Light, Regular, Bold, Extrabold) mapeados nos
   arquivos da família. font-display: swap desenha em fonte do sistema
   enquanto carrega, em vez de deixar o texto invisível.

   AVISO: estes arquivos são versão de avaliação. Todo caractere acentuado
   vem com um carimbo "TRIAL FONT" no lugar da letra, então "construção"
   apareceria como "constru" mais dois carimbos mais "o".

   Por isso cada declaração leva um unicode-range: ele entrega à Nexa só os
   caracteres que ela desenha de verdade — espaço, letras sem acento, dígitos
   e os sinais ! , - . : ; ? — e deixa todo o resto cair na Montserrat, que é
   a fonte seguinte na pilha de --font-display. O conjunto foi levantado
   medindo a largura de avanço de cada código: o carimbo tem largura fixa,
   diferente da de qualquer letra real.

   Ao trocar pelos arquivos licenciados da Fontfabric: mudar os nomes de
   arquivo e APAGAR as linhas de unicode-range, senão os acentos continuam
   saindo em Montserrat sem necessidade. */
@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-Trial-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0021, U+002C-002E, U+0030-003B, U+003F, U+0041-005A, U+0061-007A, U+00A0;
}

@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-Trial-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0021, U+002C-002E, U+0030-003B, U+003F, U+0041-005A, U+0061-007A, U+00A0;
}

/* O peso intermediário da família chama-se Regular. É ele que ocupa o lugar
   do 600 da Outfit nos títulos de seção: a Nexa não tem 600, e sem esta
   declaração o navegador arredonda para 700 e engorda os títulos. */
@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-Trial-Regular.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0021, U+002C-002E, U+0030-003B, U+003F, U+0041-005A, U+0061-007A, U+00A0;
}

@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-Trial-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0021, U+002C-002E, U+0030-003B, U+003F, U+0041-005A, U+0061-007A, U+00A0;
}

@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-Trial-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0021, U+002C-002E, U+0030-003B, U+003F, U+0041-005A, U+0061-007A, U+00A0;
}

:root {
  --bege: #FFF5D9;
  --bege-claro: #F1EBE0;
  --laranja: #D4432C;
  --laranja-claro: #D97055;
  --preto: #0A0D0C;
  --cinza: #695C57;
  --verde: #6FAF8F;

  --font-display: 'Nexa', 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --section-space: clamp(5rem, 12vw, 9rem);
  --radius: 6px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Gesto de mão desenhando: acelera de leve, mantém, desacelera. O --ease
     arranca rápido demais e leria como chicote, não como lápis. */
  --ease-lapis: cubic-bezier(0.45, 0.05, 0.35, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

/* O JavaScript põe esta classe quando assume a rolagem com inércia. Dois
   amortecimentos ao mesmo tempo brigam: o nativo animaria o scrollTo que o
   nosso laço chama a cada quadro. Fica só um. */
html.rolagem-suave {
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--bege);
  color: var(--preto);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--preto);
}

/* Título com acento sai inteiro na Montserrat. Sem isso a letra acentuada
   vinha da Montserrat e o resto da palavra da Nexa, por causa do
   unicode-range lá em cima: funciona, mas costura duas fontes dentro da
   mesma palavra. Marcado à mão nos títulos que têm acento, não por regra
   automática, porque não existe seletor de CSS que enxergue o texto.
   Quando a Nexa licenciada chegar, esta classe e o unicode-range saem
   juntos e todo título volta para a Nexa. */
.titulo-acentuado {
  font-family: var(--font-body);
}

p { margin: 0; }

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

ul, ol { list-style: none; margin: 0; padding: 0; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--preto);
  color: var(--bege);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

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

/* ---------- abertura em vídeo ---------- */

/* SEM JAVASCRIPT ELA NÃO EXISTE.
   Quem tira a abertura da frente é a classe .is-fim, posta pelo JavaScript.
   Se o script não roda — desligado, bloqueado por extensão, 404 depois de um
   deploy ruim — esta camada de tela cheia em z-index 200 cobria o site para
   sempre, e o botão "Pular abertura" não resolvia, porque o ouvinte de clique
   também é dele.

   Por isso o padrão agora é `display: none`, e só a classe .js-pronto no
   <html> a acende. Ver o comentário do bloco no fim deste arquivo. */
.abertura {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  overflow: hidden;
}

.js-pronto .abertura { display: grid; }

/* Camada própria que some por opacidade, e não o background-color da camada
   de tela cheia: animar background-color repinta a viewport inteira a cada
   quadro, opacidade a GPU compõe.

   O export novo tem fundo bege, não mais preto, e o vídeo entra com
   object-fit: contain, então esta camada preenche a tarja e precisa ser a
   mesma cor do vídeo, senão a emenda aparece.

   O valor NÃO é o que está no arquivo. No arquivo o fundo é rgb(253,241,217);
   o Chrome decodifica como rgb(255,246,219), 2 e 5 pontos acima. A tarja tem
   que casar com o que o navegador PINTA, não com o que o arquivo diz. Foi
   medido desenhando o vídeo num canvas e lendo o pixel. Por coincidência boa,
   o resultado fica a 1 ponto do --bege da marca. */
.abertura__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgb(255, 246, 219);
  opacity: 1;
  transition: opacity 0.9s var(--ease);
  will-change: opacity;
}

.abertura.is-entregando .abertura__fundo { opacity: 0; }

/* z-index explícito nos quatro filhos da abertura: sem isso o vídeo, que
   está em fluxo normal, pinta abaixo de qualquer irmão posicionado — e o
   fundo preto o escondia por completo. */
/* O elemento tem exatamente a proporção do arquivo, em vez de ocupar a tela
   toda e deixar object-fit criar tarja por dentro. Motivo: com decodificação
   por hardware o Chrome compõe a camada de vídeo como OPACA, e aí a tarja
   sai preta e cobre o bege que está atrás dela. Sem área sobrando dentro do
   elemento, não há o que pintar de preto.

   width e height em auto, com os dois máximos em 100%: elemento substituído
   com dimensão natural já encolhe mantendo proporção. O aspect-ratio é
   reforço, para o encaixe valer antes de os metadados chegarem. */
.abertura__video {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1920 / 1080;
  object-fit: contain;
}

/* Amplia no celular: o wordmark ocupa no máximo 74,7% da largura do quadro,
   então 1,3x cabe sem cortar letra. */
@media (max-width: 720px) {
  .abertura__video { transform: scale(1.3); }
}

/* Posicionada por variáveis que o JavaScript calcula no momento da entrega,
   para casar exatamente com o monograma do último quadro do vídeo. */
.abertura__marca {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: var(--marca-larg, 0px);
  height: auto;
  opacity: 0;
  transform: translate3d(var(--marca-x, 0px), var(--marca-y, 0px), 0) scale(var(--marca-escala, 1));
  transform-origin: top left;
  will-change: transform;
}

/* Aparece no mesmo quadro em que o vídeo some: mesma arte, mesma posição,
   mesmo tamanho — a troca não pode ter transição, senão vira piscada. */
/* Só transform na viagem: animar width dispararia layout a cada quadro. */
.abertura.is-entregando .abertura__marca {
  opacity: 1;
  transition: transform 1s var(--ease);
}

/* Só na chegada é que ela dissolve, dando lugar ao logo do menu. */
/* Some no mesmo quadro em que o logo do menu aparece, sem transição.
   As duas são a mesma arte na mesma posição, então a troca é invisível —
   e era o fade que abria uma janela sem nenhum dos dois, o que se via
   como piscada. */
.abertura.is-chegou .abertura__marca {
  opacity: 0;
  transition: none;
}

.abertura.is-entregando .abertura__video { visibility: hidden; }
.abertura.is-fim { display: none; }

/* O logo do menu fica oculto enquanto o monograma viaja até ele, senão os
   dois aparecem ao mesmo tempo. Aparece em is-chegou, não em is-fim: é o
   instante exato em que a marca viajante some, então um cobre o outro.
   O is-fim também libera porque quem pula a abertura nunca passa pelo
   is-chegou: não há viagem, então não há nada para esconder o logo. */
.js-pronto #abertura:not(.is-chegou):not(.is-fim) ~ .nav .nav__logo { opacity: 0; }

/* Sem transição enquanto a abertura está em cena, para a troca ser
   instantânea. Depois dela o logo recupera o fade, que é o usado na troca
   entre monograma e logotipo horizontal durante o scroll. */
#abertura:not(.is-fim) ~ .nav .nav__logo { transition: none; }

.nav__logo { transition: opacity 0.35s var(--ease); }

/* Os dois controles da abertura. As cores são escuras porque o fundo do
   vídeo virou bege: com o export antigo, preto, elas eram claras, e ficaram
   praticamente invisíveis quando o arquivo mudou. */
/* Os dois controles da abertura ficam pouco tempo na tela e são justamente os
   que alguém aperta com pressa: min-height de 44px para o polegar acertar de
   primeira. display: inline-flex porque min-height sozinho não centraliza o
   rótulo em <button>. */
.abertura__pular,
.abertura__som {
  position: absolute;
  z-index: 3;
  bottom: 2rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: transparent;
  border: 1px solid rgba(105, 92, 87, 0.4);
  color: var(--cinza);
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.abertura__pular { right: var(--gutter); }

/* Ao lado do pular, à esquerda dele. Fica escondido até o JavaScript
   descobrir que o navegador barrou o som. */
.abertura__som {
  right: calc(var(--gutter) + 9.5rem);
  border-color: rgba(212, 67, 44, 0.5);
  color: var(--laranja);
}
.abertura__pular:hover,
.abertura__pular:focus-visible {
  color: var(--preto);
  border-color: rgba(105, 92, 87, 0.75);
}

.abertura__som:hover,
.abertura__som:focus-visible {
  color: var(--preto);
  border-color: var(--laranja);
}

.abertura.is-entregando .abertura__pular,
.abertura.is-entregando .abertura__som {
  opacity: 0;
  pointer-events: none;
}

body.abertura-ativa {
  overflow: hidden;
}

/* ---------- layout helpers ---------- */

.section__inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section__inner--split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.section__heading {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 18ch;
}

.section__heading--light {
  color: var(--bege);
}

.section__lead {
  margin-top: 1.25rem;
  max-width: 46ch;
  color: var(--cinza);
  font-size: 1.05rem;
}

section {
  position: relative;
  padding: var(--section-space) 0;
}

/* reveal-text mask wipe, triggered by JS adding .is-visible */
[data-reveal-text] {
  clip-path: inset(0 0 0 0);
}
.js-pronto [data-reveal-text] {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js-pronto [data-reveal-text].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- nav ---------- */

/* Grade de três colunas, e não flex com space-between. Com space-between a
   posição dos links dependia da largura dos vizinhos, e a marca MUDA de
   largura durante a rolagem: de 28px no monograma para 116px no logotipo
   horizontal. Os links deslizavam para a esquerda junto com ela.

   As duas colunas das pontas são `minmax(0, 1fr)` — iguais entre si e
   independentes do conteúdo. Com elas iguais, a coluna do meio fica centrada
   na caixa de conteúdo, e como o recheio lateral é simétrico, centrada na
   janela. O `0` no mínimo é o que garante isso: com o `auto` padrão, um
   vizinho largo esticaria a própria coluna e empurraria o meio.

   No celular os links e o botão de contato saem com display: none, então
   deixam de ser itens da grade: sobram a marca na coluna 1 e o menu na 3, e a
   coluna do meio fica com largura zero. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 1.5rem var(--gutter);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Coluna declarada, e não a ordem do documento: o painel do menu é filho do
   cabeçalho e, embora `position: fixed` o tire do fluxo, deixar a colocação
   automática decidir o resto convida a surpresa quando um irmão some. */
.nav__brand { grid-column: 1; justify-self: start; }
.nav__links { grid-column: 2; justify-self: center; }
.nav__cta { grid-column: 3; justify-self: end; }
.nav__menu { grid-column: 3; justify-self: end; }

/* Sem backdrop-filter de propósito: num fundo bege chapado o desfoque não
   agrega nada visualmente e força recomposição a cada quadro do scroll. */
.nav.is-scrolled {
  background: rgba(255, 245, 217, 0.94);
  border-bottom-color: rgba(105, 92, 87, 0.15);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Sem JavaScript a barra nunca recebe .is-scrolled, então ficaria transparente
   para sempre e o conteúdo rolaria por baixo dos links — as pastilhas do
   Diferencial apareciam atrás deles. Aqui ela já nasce com o fundo que teria
   depois da primeira rolagem. */
/* Os dois `:not` de estado não são decoração. Há uma janela em que .js-pronto
   sai do <html> E o script roda mesmo assim: rede lenta faz o relógio de
   segurança do <head> disparar aos 2,5s e o script.js chegar depois. Aí ele
   segue pondo .passou-hero na rolagem, e esta regra — mais específica que
   `.nav.passou-hero` por causa do `html` — pintaria a barra de bege com o
   texto branco por cima. Branco sobre bege é ilegível.

   Com os `:not`, a reserva só vale enquanto nenhum estado do script está em
   jogo, que é exatamente para o que ela existe. */
html:not(.js-pronto) .nav:not(.is-scrolled):not(.passou-hero) {
  background: rgba(255, 245, 217, 0.94);
  border-bottom-color: rgba(105, 92, 87, 0.15);
}

/* Passado o hero o menu vira faixa laranja chapada, com marca e texto em
   branco. Esta regra vem DEPOIS da de .is-scrolled de propósito: os dois
   estados coexistem sempre que se passa do hero, têm a mesma especificidade,
   e quem decide é a ordem no arquivo. Mexeu de lugar, o bege volta a ganhar.

   O bege não sai por transparência: é chapado por cima, senão o laranja
   ficaria lavado pelo que passa por baixo. */
:is(.nav.passou-hero, .nav.menu-aberto) {
  background: var(--laranja);
  border-bottom-color: rgba(10, 13, 12, 0.16);
}

/* Com o painel laranja logo abaixo, a linha de baixo da barra cortaria a
   superfície ao meio. Aberto, não há duas camadas para separar. */
.nav.menu-aberto {
  border-bottom-color: transparent;
}

/* #fff e não o bege da marca porque o arquivo do logotipo branco é #fff
   cravado: bege no texto ao lado de branco puro na marca denunciaria os
   dois tons. */
.nav.passou-hero .nav__links {
  color: #fff;
}

/* O texto continua branco no hover. Antes o laranja morava no traço e o
   texto firmava para o preto; agora o fundo é que é laranja, então quem
   carrega o estado é o traço, em preto. */
.nav.passou-hero .nav__links a:hover,
.nav.passou-hero .nav__links a:focus-visible {
  color: #fff;
}

.nav.passou-hero .nav__links a::after {
  background: var(--preto);
}

/* Pastilha branca chapada sobre a barra laranja, enchendo de preto no hover.
   O texto em repouso é preto e não laranja: laranja sobre branco dá 4,53 de
   contraste, na trave do mínimo de 4,5, enquanto preto dá 19,52. Num botão,
   que é o alvo de clique da página inteira, não vale ficar na trave. */
.nav.passou-hero .nav__cta {
  background: #fff;
  border-color: #fff;
  color: var(--preto);
}

.nav.passou-hero .nav__cta:hover,
.nav.passou-hero .nav__cta:focus-visible {
  background: var(--preto);
  border-color: var(--preto);
  color: #fff;
}

/* Posicionado de propósito: o painel do menu é um irmão posicionado dentro do
   mesmo contexto de empilhamento, e elemento posicionado pinta acima de
   conteúdo em fluxo normal. Sem isto a marca ficaria atrás do painel.

   O recheio com margem negativa de mesmo valor amplia o alvo de toque de
   28x30 para 44x46 sem mexer no desenho nem na altura da barra: a caixa de
   margem, que é o que a grade mede, continua do tamanho de antes. */
.nav__brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: flex-start;
  padding: 0.5rem;
  margin: -0.5rem;
}

/* No hero o menu usa o monograma, casando com o fim da abertura. Passado o
   hero, troca para o logotipo horizontal. As larguras são derivadas da
   altura: monograma 183,15/199,15 = 0,9197 e horizontal 896,75/232,91 =
   3,8502. A 30px dão 27,6 e 115,5 — arredondadas para cima. */
.nav__marca {
  position: relative;
  display: block;
  height: 30px;
  width: 28px;
  transition: width 0.45s var(--ease);
}

:is(.nav.passou-hero, .nav.menu-aberto) .nav__marca { width: 116px; }

/* max-width: none escapa da regra global de img. Sem isso o logotipo
   horizontal é espremido contra a caixa enquanto ela cresce, e aparece
   achatado durante a troca. */
.nav__logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: auto;
  max-width: none;
  display: block;
  transition: opacity 0.35s var(--ease);
}

.nav__logo--completa { opacity: 0; }
/* Sobre o hero a marca é o monograma laranja: sobre o painel laranja ele
   sumiria. Aberto, vale o logotipo horizontal branco, o mesmo de depois do
   hero. */
:is(.nav.passou-hero, .nav.menu-aberto) .nav__logo--reduzida { opacity: 0; }
:is(.nav.passou-hero, .nav.menu-aberto) .nav__logo--completa { opacity: 1; }

/* Preto, e não o cinza de textos secundários. Sobre o hero o menu é
   transparente, e em cinza os links davam 5,91 de contraste contra o bege:
   passa no mínimo, mas eles ficavam com a MESMA cor do parágrafo do hero, em
   corpo menor, e liam como texto secundário em vez de navegação. Em preto
   dão 17,95 e a barra ganha presença sem precisar de fundo. */
.nav__links {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--preto);
}

/* O traço usa a mesma inclinação de 8° do botão do hero e dos painéis da
   Atuação — uma linguagem de forma só, em três escalas. Pontas arredondadas
   atendem "linhas arredondadas" do manual. Anima em scaleX, que é composto
   na GPU, e não em width. */
.nav__links a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  transition: color 0.25s var(--ease);
}

/* Alvo de toque invisível de 44px sobre o link, sem tocar na caixa dele.
   Aqui não dá para usar recheio com margem negativa como no resto da barra:
   o traço do hover é um ::after ancorado em bottom: 0, e qualquer recheio o
   empurraria para longe do texto. Uma camada posicionada resolve sem mexer
   na composição — e existe porque em tablet, que é touch e recebe o menu de
   desktop, esses links tinham 28px de altura. */
.nav__links a::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--laranja), var(--laranja-claro));
  transform: skewX(-8deg) scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}

/* O texto já é preto em repouso, então quem carrega o estado do hover é o
   traço laranja. Antes o texto firmava de cinza para preto; com o preto como
   base, mudar a cor de novo não teria para onde ir. */
.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--preto);
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after {
  transform: skewX(-8deg) scaleX(1);
}

/* Só aparece depois do hero, junto com a troca para o logotipo horizontal.
   visibility tira o botão da ordem de tabulação enquanto está escondido, e
   como ele continua ocupando o espaço, o menu não pula quando surge. */
.nav__cta {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--preto);
  border-radius: 999px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), opacity 0.4s var(--ease),
              transform 0.4s var(--ease), visibility 0s linear 0.4s;
}

/* Ele entra ao passar do hero, e quem detecta isso é o JavaScript. Sem
   script não há passagem para detectar, então o botão fica visível desde o
   começo em vez de nunca aparecer. */
.js-pronto .nav__cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}

.nav.passou-hero .nav__cta {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), opacity 0.4s var(--ease),
              transform 0.4s var(--ease), visibility 0s;
}
.nav__cta:hover {
  background: var(--preto);
  color: var(--bege);
}

/* ---------- menu do celular ---------- */

/* Escondido acima do ponto de quebra: no desktop a navegação está na barra.
   `display: none` e não visibilidade, para o botão sair da ordem de tabulação
   por completo. */
.nav__menu,
.nav__painel {
  display: none;
}

.nav__menu {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  padding: 0.4rem;
  margin: -0.4rem;
  cursor: pointer;
  color: var(--preto);
  align-items: center;
  gap: 0.55rem;
  transition: color 0.4s var(--ease);
  /* Mesmo truque da marca: o alvo sobe de 80x29 para 80x44, o mínimo
     confortável para o polegar, e a barra não engorda porque a margem
     negativa devolve à grade a altura que o recheio tomou. */
  padding: 0.875rem 0.6rem;
  margin: -0.875rem -0.6rem;
}

/* Branco quando a barra fica laranja, seja por ter passado do hero, seja por
   o menu estar aberto — a mesma dupla de estados do logotipo. */
:is(.nav.passou-hero, .nav.menu-aberto) .nav__menu {
  color: #fff;
}

/* O rótulo em texto acompanha o ícone: três traços sozinhos dependem de o
   visitante reconhecer a convenção, e a palavra custa 34px. */
.nav__menu-rotulo {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav__menu-icone {
  display: grid;
  gap: 4px;
  width: 20px;
}

/* Pontas arredondadas: o manual pede linhas arredondadas, e é a mesma
   terminação do traço dos links da barra. */
.nav__menu-icone span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

/* Vira X. O traço do meio some e os outros dois giram sobre o centro: os 6px
   de translação são a altura de um traço mais o vão, que é o que separa cada
   ponta do centro. */
.nav.menu-aberto .nav__menu-icone span:first-child {
  transform: translateY(6px) rotate(45deg);
}
.nav.menu-aberto .nav__menu-icone span:nth-child(2) {
  opacity: 0;
}
.nav.menu-aberto .nav__menu-icone span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

/* O painel fica DENTRO do cabeçalho para herdar o mesmo contexto de
   empilhamento: assim a barra continua por cima sem precisar disputar
   z-index com o resto da página.

   `top: 100%` prende ele na base da barra, e a barra muda de altura durante
   a rolagem — de 1,5rem de recheio para 1rem. A porcentagem acompanha
   sozinha, sem número repetido em lugar nenhum.

   visibility, e não display, para a transição existir — e ela tira o painel
   da ordem de tabulação enquanto está fechado, que é o que `opacity: 0`
   sozinho não faz. É o mesmo arranjo já usado no botão de contato. */
.nav__painel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 0;
  background: var(--laranja);
  border-bottom: 1px solid rgba(10, 13, 12, 0.16);
  padding: 0 var(--gutter) 0.75rem;
  flex-direction: column;
  /* Em paisagem de celular sobram uns 290px abaixo da barra, e cinco linhas
     não cabem sempre. A conta é exata: 100% aqui resolve contra a altura da
     barra, que é o bloco que contém este painel. */
  max-height: calc(100svh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
              visibility 0s linear 0.24s;
}

.nav.menu-aberto .nav__painel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
              visibility 0s;
}

.nav__painel-links {
  display: flex;
  flex-direction: column;
}

/* Lista compacta, não mais a pilha de tela cheia. O corpo caiu para 1,1rem e
   quem dá a altura da linha agora é o recheio: 0,8rem em cima e embaixo
   levam cada item a 48px, acima do mínimo de 44 para o polegar. */
.nav__painel-links a {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #fff;
  padding: 0.8rem 0;
}

/* Fio entre os itens, e não em volta: separa sem fechar caixa. O primeiro
   fica de fora porque a borda da própria barra já o separa. */
.nav__painel-links a + a {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}



@media (max-width: 720px) {
  .nav__links { display: none; }

  /* O botão de contato sai da barra: com o menu ao lado dele, a 375px a barra
     ficava com marca, botão e ícone disputando a mesma linha. O contato passa
     a viver dentro do painel, onde fecha a lista. */
  .nav__cta { display: none; }

  /* Só aparece se houver JavaScript para abri-lo. Botão que não faz nada é
     pior que botão nenhum: sem script a página continua sendo uma rolagem
     única, e é assim que se navega nela. */
  .js-pronto .nav__menu { display: inline-flex; }
  .nav__painel { display: flex; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.98rem;
  position: relative;
  isolation: isolate;
  /* clip e não hidden: overflow: hidden transforma a caixa num contêiner de
     rolagem de verdade. O .hero tinha 160px de sobra escondida por causa do
     brilho que passa da borda de baixo, aceitava scrollTop e entrava na
     cadeia de rolagem da página. clip recorta igual e não cria contêiner.
     A linha hidden fica antes como reserva para Safari anterior ao 16. */
  overflow: hidden;
  overflow: clip;
}

/* Paralelogramo: elemento gráfico oficial, na mesma inclinação dos painéis
   da Atuação. O rótulo recebe o skew inverso para o texto não distorcer. */
.btn--primary {
  background: var(--laranja);
  color: var(--bege);
  border-radius: 5px;
  transform: skewX(-8deg);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  box-shadow: 0 0 0 0 rgba(212, 67, 44, 0.4);
}

.btn--primary > span {
  display: block;
  transform: skewX(8deg);
}

.btn--primary:hover {
  transform: skewX(-8deg) translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(212, 67, 44, 0.55);
}

/* Sem a fonte monoespaçada que estava aqui. Ela existia porque o conteúdo do
   botão era o endereço de e-mail, e mono é a voz de dado do site — tags,
   esteiras, numeração do Método, linha jurídica. Com o rótulo "Entrar em
   contato" no lugar do endereço, o botão passou a ser um botão como os outros
   dois de mesmo nome, e herda a tipografia de .btn. */
.btn--on-dark {
  background: var(--bege);
  color: var(--preto);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn--on-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(255, 245, 217, 0.35);
}

/* ---------- hero ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 6rem;
  overflow: hidden;
  overflow: clip;
}

/* A suavidade vem só das paradas do degradê. Um filter: blur() por cima
   seria redundante e custa rasterização cara em elemento deste tamanho. */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle,
    rgba(212,67,44,0.34) 0%,
    rgba(217,112,85,0.20) 38%,
    rgba(217,112,85,0.08) 60%,
    rgba(217,112,85,0.02) 76%,
    transparent 88%);
}

.hero__glow--a {
  width: 46rem;
  height: 46rem;
  top: -18rem;
  right: -14rem;
  opacity: 0.55;
}

.hero__glow--b {
  width: 26rem;
  height: 26rem;
  bottom: -10rem;
  left: -8rem;
  opacity: 0.35;
}

/* Campo de fluxo: arcos concêntricos nascendo do mesmo canto que a luz quente.
   Só traço vetorial — sem filtro e sem trabalho por quadro. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  /* Duas janelas na mesma máscara: forte na origem, fraca no canto oposto.
     O campo é um só — aparece em dois pontos, em vez de virar dois enfeites. */
  -webkit-mask-image:
    radial-gradient(ellipse 105% 78% at 100% 0%, #000 0%, #000 38%, rgba(0,0,0,0.55) 58%, rgba(0,0,0,0.16) 76%, transparent 90%),
    radial-gradient(ellipse 88% 72% at 0% 100%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 45%, transparent 80%);
  mask-image:
    radial-gradient(ellipse 105% 78% at 100% 0%, #000 0%, #000 38%, rgba(0,0,0,0.55) 58%, rgba(0,0,0,0.16) 76%, transparent 90%),
    radial-gradient(ellipse 88% 72% at 0% 100%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 45%, transparent 80%);
  /* translate3d e NÃO perspective com rotateX/rotateY. Medido na máquina do
     Felipe, tela de 1,26 milhão de pixels: com a inclinação em 3D o hero
     ficava em 47,7 quadros por segundo COM O MOUSE PARADO, e 59,0 sem ela.
     Onze quadros perdidos sem nada se mexer.

     A razão: transform 3D com perspectiva obriga o navegador a rasterizar a
     camada de novo a cada ângulo, e aqui a camada carrega uma máscara de
     tela cheia. Translação 2D não tem esse problema: rasteriza uma vez e a
     GPU só desloca a textura pronta.

     translate3d, e não translate, para a promoção a camada própria vir do
     próprio transform, sem precisar de will-change. O will-change que estava
     aqui mantinha uma camada de tela cheia viva o tempo todo. */
  transform: translate3d(var(--campo-x, 0px), var(--campo-y, 0px), 0);
  transition: transform 0.5s var(--ease);
}

/* O campo inclina em vez de deslocar — leitura mais limpa, e a perspectiva
   mantém os arcos ancorados no canto de origem.
   Fica no svg, não no <g>: o <g> já carrega a escala da animação de entrada
   e as duas transformações brigariam. */
/* A inclinação fica no MESMO elemento que carrega a máscara, de propósito.
   Com a máscara no pai e o transform no filho, o conteúdo mascarado muda a
   cada quadro e o navegador reaplica a máscara sobre a viewport inteira 60
   vezes por segundo — medido em 14,7 quadros por segundo numa tela de 1,2
   milhão de pixels. Juntos, rasteriza uma vez e a GPU só inclina a textura. */
.hero__field svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Camada só do pulso, irmã do campo e SEM máscara. É o que resolve o hero
   engasgando: o pulso gira 60 vezes por segundo, e enquanto morava dentro
   do .hero__field a máscara era reaplicada sobre a tela inteira em cada um
   desses quadros. Fora dela, o navegador só repinta a área do próprio ponto.

   Recebe a mesma inclinação do campo, lendo as mesmas variáveis, para os
   dois andarem juntos. Como não tem máscara, inclinar aqui é barato. */
.hero__pulso-camada {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  overflow: clip;
  transform: translate3d(var(--campo-x, 0px), var(--campo-y, 0px), 0);
  transition: transform 0.5s var(--ease);
}

.hero__pulso-camada svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Sem will-change aqui. O que estava escrito antes era que ele daria camada
   própria ao pulso: não dá. will-change em elemento DENTRO de um <svg> não
   promove nada no Chrome, porque conteúdo SVG é pintado na camada do pai.
   Era exatamente por isso que a otimização anterior não funcionava, e a
   correção de verdade foi tirar o pulso de dentro da máscara. */
.hero__pulso {
  transform-box: view-box;
  transform-origin: 1395px -70px;
  opacity: 0;
  animation: pulso-arco 14s linear infinite;
}

@keyframes pulso-arco {
  0%   { transform: rotate(85deg);  opacity: 0; }
  5%   { opacity: 0.95; }
  36%  { opacity: 0.95; }
  43%  { transform: rotate(165deg); opacity: 0; }
  100% { transform: rotate(165deg); opacity: 0; }
}

/* Seletor por classe, não por elemento: o grupo do pulso também é um <g>
   e herdaria a animação de entrada. */
.hero__arcos {
  transform-box: view-box;
  transform-origin: 1395px -70px;
}

.js-pronto .hero__arcos {
  opacity: 0;
  transform: scale(0.94);
}

/* Entra como primeira batida da coreografia do hero, uma vez só. */
.hero.is-ready .hero__arcos {
  animation: field-in 1.8s var(--ease) forwards;
}

@keyframes field-in {
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 860px) {
  .hero__field { opacity: 0.55; }
}

/* width: 100% é necessário porque o hero é flex: sem isso este item encolhe
   para o tamanho do conteúdo, desperdiça largura e quebra o título antes da
   hora. Também é o que alinha o hero com o .section__inner do resto do site. */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero__headline {
  /* Calibrado para a Nexa, que é mais larga que a Outfit. Com a escala da
     Outfit a primeira linha ficava com 3px de folga acima de 1440px e
     quebrava; esta dá 8,7% no pior caso, de 640 a 2560px. */
  font-size: clamp(2.3rem, 5.8vw, 4.3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.hero__line {
  display: block;
}

/* Contraste de peso entre as duas linhas — o manual define quatro pesos,
   o hero usava só o 700. Tracking mais solto na linha leve, que aperta
   visualmente mais que a pesada no mesmo valor negativo. */
.hero__line--leve {
  color: var(--preto);
  font-weight: 300;
  letter-spacing: -0.015em;
  /* Um degrau abaixo da linha forte: ela é a que abre, e a segunda é que
     carrega a marca e o peso. */
  font-size: 0.9em;
}

.hero__line--forte {
  color: var(--laranja);
  font-weight: 700;
}

/* Logotipo horizontal no lugar da palavra "Recepta" em títulos.
   min-height garante largura >= 120px, a redução máxima do manual. */
.inline-logo {
  display: inline-block;
  /* Calibrada pela altura de x, e não pela caixa alta. Medido: a altura de x
     da Montserrat 500, que é a fonte deste título, é 0,540em; no arquivo do
     logotipo as minúsculas ocupam 0,5233 da caixa. Para as duas baterem, a
     caixa precisa de 0,540 / 0,5233 = 1,032em.

     Consequência que vem junto: o "R" do logotipo fica 27% mais alto que as
     maiúsculas do texto ao lado. É inevitável, porque as duas letras têm
     proporções diferentes entre minúscula e maiúscula — 0,608 no logotipo
     contra 0,771 na Montserrat. Dá para casar uma das duas, nunca as duas. */
  height: 1.032em;
  min-height: 31.5px;
  width: auto;
  margin: 0 0.1em;
  /* A base das letras no arquivo fica a 86,03% da altura da caixa, então
     sobra 13,97% dela abaixo da linha: 0,1397 x a altura. */
  vertical-align: -0.144em;
}

/* Marca que fica laranja durante todo o percurso em que o título da Atuação
   fica preso no meio da tela, e preta antes e depois. Duas artes empilhadas,
   e não troca de src: trocar src pisca enquanto o arquivo novo decodifica.

   A preta fica em fluxo e é ela que dá largura ao vão. A laranja entra por
   cima, posicionada. Medido: na mesma altura a laranja sai 0,3px MAIS larga
   que a preta (proporções 3,8462 contra 3,8376), então ela cobre a preta
   inteira e não sobra fiapo preto na borda. Por isso a preta não precisa
   sumir junto, e não há meio-termo lamacento entre as duas cores. */
.inline-logo--troca {
  position: relative;
}

.inline-logo--troca img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}

.inline-logo__laranja {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.inline-logo--troca.is-percurso .inline-logo__laranja {
  opacity: 1;
}

/* No hero a marca é o sujeito da frase, e não uma palavra no meio dela:
   sem o "A" na frente, ela abre a linha. Por isso vem maior aqui do que no
   resto do site. A 1em a caixa alta do logotipo dá 0,862em contra os 0,700em
   da caixa alta da fonte, ou seja, 23% mais alta que as maiúsculas ao lado.
   O vertical-align acompanha a altura: 0,1397 x 1em. */
.hero__line--forte .inline-logo {
  height: 1em;
  vertical-align: -0.140em;
}

/* Justificado. Duas coisas medidas antes de fechar este bloco:

   1. A medida importa muito mais do que parece. Justificando este texto,
      o maior vão entre palavras dá 4,28x o espaço natural a 44ch, 2,91x a
      46ch, 3,92x a 48ch e 5,94x a 52ch. 46ch é o fundo do poço e ainda tira
      uma linha, de quatro para três. Não é número redondo por acaso: é o
      ponto onde as palavras deste parágrafo caem bem.

   2. hyphens: auto fica declarado, mas NÃO se pode contar com ele. O Chromium
      testado aqui não tem dicionário de português: a altura do parágrafo é
      idêntica com e sem hifenização. Onde houver dicionário, ajuda; onde não
      houver, a medida de 46ch é que segura o resultado. */
.hero__sub {
  margin-top: 1.75rem;
  max-width: 46ch;
  font-size: 1.16rem;
  color: var(--cinza);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Justificado só na medida cheia. Medindo a pior esticada entre palavras a
   várias larguras de parágrafo: 2,92x a 565px, que é a medida de projeto, e
   entre 4,27x e 10,84x em TODAS as larguras menores, de 300 a 540px. Não é
   degradação suave, é sorte: depende de onde as palavras caem. Abaixo do
   ponto em que o parágrafo deixa de caber inteiro, alinha à esquerda.

   O corte é o mesmo 720px que já esconde os links do menu, para o arquivo
   não ganhar um terceiro ponto de quebra. Nessa largura o parágrafo ainda
   tem os 565px, então ninguém perde justificado que estava bom. */
@media (max-width: 720px) {
  .hero__sub { text-align: left; }
}

.hero__actions {
  margin-top: 2.5rem;
}

/* hero load-in choreography */
.js-pronto [data-reveal] {
  opacity: 0;
  transform: translateY(1.1em);
}
.hero.is-ready [data-reveal] {
  animation: hero-rise 0.95s var(--ease) forwards;
}
.hero.is-ready .hero__line--dim { animation-delay: 0.05s; }
.hero.is-ready .hero__line--forte { animation-delay: 0.2s; }
.hero.is-ready .hero__sub { animation-delay: 0.42s; }
.hero.is-ready .hero__actions { animation-delay: 0.58s; }

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Canais: o título é o ponto alto da seção, então cresce e centraliza. O
   parágrafo acompanha, senão ficaria pendurado à esquerda de um título
   centralizado. text-wrap: balance reparte as linhas em larguras parecidas,
   que é o que faz título centralizado parecer composto e não cortado; onde
   não houver suporte, o max-width sozinho ainda segura a quebra. */
.canais .section__heading {
  font-size: clamp(2.3rem, 4.6vw, 3.7rem);
  max-width: 17ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

.canais .section__lead {
  margin-inline: auto;
  text-align: center;
}

/* ---------- divisor de seção: faixa com o pattern do "t" ---------- */

/* O menu é fixo, então todo alvo de âncora precisa de folga no topo, senão o
   começo da seção nasce atrás da barra. Valia só para o divisor; as outras
   quatro âncoras do menu apontam para <section> e ficavam sem. */
section[id] {
  scroll-margin-top: 5.5rem;
}

.divider {
  position: relative;
  height: clamp(5rem, 9vw, 7.5rem);
  scroll-margin-top: 5.5rem;
  overflow: hidden;
  overflow: clip;
  opacity: 0.32;
  /* dissolve nas bordas para a faixa emergir do bege em vez de cortar seco */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 58%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 58%, transparent);
}

/* O deslocamento é transform, não background-position: assim o navegador
   compõe na GPU em vez de repintar a faixa inteira a cada quadro. */
.divider__layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -180px;
  right: -180px;
  background-image: url("../img/Pattern T Laranja tile.svg");
  background-repeat: repeat;
  background-size: clamp(96px, 11vw, 140px) auto;
  background-position: center;
  transform: translate3d(var(--divider-shift, 0px), 0, 0);
  /* Sem isto o Chrome não promove a faixa e cada quadro da paralaxe repinta
     o padrão inteiro, que é um SVG repetido numa banda mais larga que a
     janela. translate3d sozinho não garante mais a promoção. */
  will-change: transform;
}

/* ---------- sobre ---------- */

.sobre {
  padding-top: calc(var(--section-space) * 0.6);
}

/* A esteira é faixa sangrada com borda própria: ela já encerra a seção.
   O padding de baixo somava com o de cima da seção seguinte e abria 231px
   de vão. Sem ele, sobra só o respiro da seção que vem depois. */
.sobre,
.canais {
  padding-bottom: 0;
}

/* O texto fica acima do grid curvado. z-index explícito porque já me mordeu
   uma vez: elemento posicionado pinta acima de conteúdo em fluxo normal. */
.sobre .section__inner {
  position: relative;
  z-index: 1;
}

/* z-index negativo, e não 0: elemento posicionado com z-index 0 ainda pinta
   ACIMA de conteúdo em fluxo normal. Só o negativo o joga para trás do texto.

   A proporção é a do arquivo, 926,5 por 1200,06. A altura é que manda no
   tamanho, e não a largura: a peça é retrato num bloco de texto que é
   paisagem, então dimensionar pela largura a faria estourar a seção. */
.sobre__grade {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: clamp(260px, 32vw, 430px);
  aspect-ratio: 926.5 / 1200.06;
  pointer-events: none;
  z-index: -1;
}

.sobre__grade svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* A cor sai do CSS e não do arquivo: o SVG veio com fill cravado no estilo
   interno dele, que some ao embutir. */
.sobre__grade path {
  fill: var(--laranja);
}

/* clip-path e não stroke-dashoffset: as faixas são preenchidas, não
   traçadas. Fechado no topo, cada faixa abre para baixo. Sem JavaScript o
   grid já nasce desenhado, em vez de recortado a zero para sempre. */
.js-pronto .sobre__grade path {
  clip-path: inset(0 0 100% 0);
}

/* Desenha da esquerda para a direita, uma faixa a cada 110ms. O --i vem da
   marcação, calculado pelo x inicial de cada faixa, porque a ordem no
   arquivo não é a ordem visual. */
.js-pronto .sobre__grade.is-visible path {
  animation: descobrir 1000ms var(--ease-lapis) forwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}

@keyframes descobrir {
  to { clip-path: inset(0 0 0 0); }
}

@media (max-width: 760px) {
  .sobre__grade { display: none; }
}

.marquee {
  position: relative;
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid rgba(105, 92, 87, 0.2);
  border-bottom: 1px solid rgba(105, 92, 87, 0.2);
  overflow: hidden;
  overflow: clip;
  padding: 1.4rem 0;
}

/* Desvanecer nas pontas com camadas de degradê, e NÃO com mask-image:
   máscara no container com o conteúdo transformando dentro é exatamente o
   padrão que derrubou o hero para 14,7 quadros por segundo. Degradê pintado
   custa uma vez; máscara recomporia a cada quadro da esteira. */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 120px);
  pointer-events: none;
  z-index: 1;
}

.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bege), rgba(255, 245, 217, 0));
}

.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bege), rgba(255, 245, 217, 0));
}

/* O vão entre itens é PADDING nos itens, e não `gap` do flex, e isso é o que
   conserta o corte no fim da volta.

   A animação desloca -50%, e o conteúdo são duas cópias iguais. Com `gap`, a
   faixa tem 20 itens e 19 vãos, então metade da largura dá `soma dos 10
   primeiros + 9,5 vãos`. Para emendar sem salto seria preciso `+ 10 vãos`.
   Faltava meio vão a cada volta, uns 11px, e é ele que aparece como corte.

   Com o vão dentro do item, a faixa vira concatenação pura: metade é
   exatamente uma cópia, e -50% cai no lugar certo. */
.marquee__track {
  --vao: 0.9rem;
  display: flex;
  width: max-content;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--preto);
  white-space: nowrap;
  /* Velocidade em pixels por segundo; o JavaScript converte em duração
     depois de saber a largura da faixa montada. */
  --velocidade: 31;
}

/* A animação só entra quando o JavaScript terminou de clonar. Antes disso a
   faixa tem uma cópia só, e animar ali deixaria uma tela vazia passando. */
.marquee__track.is-pronta {
  animation: marquee-scroll 32s linear infinite;
}

.marquee__track > * {
  padding-inline: calc(var(--vao) / 2);
}

.marquee__track--big {
  --vao: 1.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--preto);
  --velocidade: 37;
}

/* O "+" no lugar do ponto: o manual define esse símbolo como mais vendas,
   mais clientes, mais tecnologia, mais crescimento. Numa lista de valores
   ele lê como acúmulo, não como separador neutro. */
.marquee .dot {
  color: var(--laranja);
  font-weight: 500;
}

/* Todos os itens em preto: eles são pares entre si, nenhum vale mais que
   outro. Alternar cor criaria uma hierarquia que não existe, e o cinza
   leria como secundário. O ritmo fica por conta do "+" laranja. */
.marquee__track span { transition: color 0.25s var(--ease); }

/* Vem depois das regras de ritmo de propósito: mesma especificidade, então
   quem estiver por último vence. */
.marquee__track span:not(.dot):hover { color: var(--laranja); }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Animação infinita fora da tela continua consumindo quadro: o navegador
   mantém a camada viva e compõe do mesmo jeito. O JavaScript marca
   .esta-fora em quem saiu do campo de visão e aqui elas congelam.
   animation-play-state e não display:none, para a peça voltar de onde
   parou em vez de reiniciar. */
.esta-fora .marquee__track,
.esta-fora .hero__pulso {
  animation-play-state: paused;
}

/* ---------- atuação: coluna fixa + cartões rolando ---------- */

/* A divisão voltou a 0,85/1,15 depois de testar 0,68 e 0,75. Estreitando a
   coluna da esquerda, o título quebra em quatro linhas: com a marca embutida
   a 1,032em ela sozinha tem 184px, e "Onde a [marca]" precisa de 355px numa
   linha. Quem cedeu foi a tecla, que desceu de 320 para 250 de teto. */
.atuacao__grade {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* Trava no centro vertical da tela. O sticky prende a caixa em 50vh e o
   transform sobe metade da altura dela, o que centraliza qualquer que seja
   a quebra de linha do título — sem precisar medir a altura em JavaScript. */
.atuacao__fixo {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
}

.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2vw, 1.8rem);
}

/* Cartão de contorno. O fundo saiu: é só um fio em laranja claro, a cor de
   apoio do manual, e a tecla passa POR CIMA dele.

   O corte inclinado saiu junto com o pedido de arredondar em 40px: clip-path
   e border-radius não convivem, o recorte simplesmente vence. As duas camadas
   continuam, porque o fio é um DEGRADÊ, e degradê em borda não sai com
   `border` comum: border-image não aceita raio. Pinta-se a caixa inteira com
   o degradê e sobrepõe-se uma segunda, 1px menor, na cor da página. O que
   sobra entre as duas é o contorno.

   Sem filter aqui. A sombra saiu junto com o preenchimento, e com ela some o
   custo de rasterização que ela cobrava. */
.panel {
  position: relative;
  /* Recheio e transbordo como variáveis porque a margem negativa da tecla
     depende dos dois: para ela passar da borda, a margem tem que vencer o
     recheio primeiro. Só o transbordo sobra do lado de fora. */
  --tecla: clamp(150px, 19vw, 250px);
  /* Recheio enxuto: a caixa aperta contra o conteúdo e fica mais baixa.
     Não mexe no alinhamento da borda com o meio da tecla: a margem negativa
     dela soma o recheio de volta, então a posição da tecla em relação à
     borda não depende deste valor. E o texto ganha a largura que o recheio
     devolve. */
  --recheio: clamp(0.9rem, 1.3vw, 1.2rem);
  /* Transbordo generoso, e não só estética: margem negativa encolhe a coluna
     que a tecla ocupa na grade. A 1440px a coluna dos cartões tem 552px, e
     cada pixel que a tecla joga para fora da caixa é um pixel que sobra para
     o texto. Com 72px de transbordo a tecla continua com 250px na tela mas
     pesa 150px na grade.

     O teto é 5vw, o mesmo da margem lateral da página: assim a peça nunca
     passa da borda da janela, nem no cartão espelhado, que transborda para
     a direita. */
  --transbordo: clamp(16px, 5vw, 72px);

  /* A borda recua até passar pelo MEIO da tecla. A tecla fica onde está: o
     recuo é a diferença entre meia tecla e o quanto ela já saía da coluna.
     Os dois se cancelam na largura do texto, porque a coluna que a tecla
     ocupa na grade encolhe exatamente o que a caixa recuou. */
  --recuo: calc(var(--tecla) / 2 - var(--transbordo));

  padding: var(--recheio);
  margin-left: var(--recuo);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.6rem);
}

/* O fio não é chapado: é um degradê do laranja claro que acende no alto e
   apaga descendo, como luz batendo de cima. Só aparece no anel de 1px que
   sobra entre as duas camadas, então o degradê inteiro vira variação de
   intensidade ao longo do contorno.

   As opacidades são baixas de propósito: o pedido é que o fio fique bonito
   mas em segundo plano. O pico é 0,72 e o vale 0,22. */
.panel__superficie {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    158deg,
    rgba(217, 112, 85, 0.72) 0%,
    rgba(217, 112, 85, 0.34) 38%,
    rgba(217, 112, 85, 0.22) 62%,
    rgba(217, 112, 85, 0.5) 100%
  );
  border-radius: 40px;
  /* Sombra suave caindo para baixo, como luz vindo de cima, no mesmo sentido
     do degradê do fio. Duas camadas: uma de contato, curta e fraca, e uma de
     ambiente, longa e mais fraca ainda.

     box-shadow e não filter: drop-shadow. Sem o clip-path a caixa voltou a
     ser um retângulo arredondado, e box-shadow acompanha o raio sozinho, sem
     o custo de rasterização que o filtro cobrava.

     E, ao contrário da versão antiga do cartão, esta sombra está num IRMÃO do
     vídeo, não num ancestral: nenhum quadro decodificado passa por ela. */
  box-shadow:
    0 2px 4px -2px rgba(10, 13, 12, 0.05),
    0 16px 32px -16px rgba(10, 13, 12, 0.16);
}

/* O miolo na cor da página, recuado pela espessura do fio. 1px é o mínimo
   que aparece: a tela do Felipe é de densidade 1, então meio pixel viraria
   uma linha esmaecida em vez de uma linha fina.

   O raio de dentro é 1px menor que o de fora, senão o anel afina nos cantos:
   duas curvas de mesmo raio deslocadas 1px não ficam paralelas. */
.panel__superficie::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bege);
  border-radius: 39px;
}

/* A tecla e o texto trocam de coluna a cada cartão. Posição explícita, e não
   ordem do documento: a mídia vem antes no HTML nos dois casos, para a
   marcação não depender do lado. */
.panel__midia { grid-column: 1; grid-row: 1; }
.panel__texto { grid-column: 2; grid-row: 1; }

.panel--espelho {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  margin-left: 0;
  margin-right: var(--recuo);
}
.panel--espelho .panel__midia { grid-column: 2; }
.panel--espelho .panel__texto { grid-column: 1; }

/* A tecla vaza o contorno pelo lado de fora do cartão. O transbordo é em vw
   para encolher junto com a tela: numa margem lateral de 24px, um transbordo
   fixo de 34px encostaria na borda da janela. */
.panel__midia {
  position: relative;
  z-index: 1;
  width: var(--tecla);
  aspect-ratio: 1;
  /* Meia tecla para fora da caixa: é o que põe a borda no meio dela. */
  margin-left: calc(-1 * (var(--recheio) + var(--tecla) / 2));
}

.panel--espelho .panel__midia {
  margin-left: 0;
  margin-right: calc(-1 * (var(--recheio) + var(--tecla) / 2));
}

.panel__texto {
  position: relative;
  z-index: 1;
}

/* Imagem e vídeo ocupam a mesma caixa, empilhados. A imagem é a base; o vídeo
   entra por cima e só APARECE depois que o script confirmou que o navegador
   respeita o canal alfa do WebM.

   O motivo é um defeito de verdade: Safari e parte dos Android tocam o arquivo
   e ignoram o alfa, e a tecla sai dentro de um retângulo preto sobre o bege da
   página. Não existe consulta que responda isso — a única resposta confiável é
   desenhar um quadro num canvas e olhar o pixel do canto, e isso só dá para
   fazer depois de o vídeo ter quadro.

   Por isso a ordem é esta e não a inversa: começando pela imagem, o retângulo
   preto nunca chega a piscar. Se o teste passar, o vídeo entra; se não passar
   — ou se não houver script, nem canvas, nem movimento permitido — a imagem
   fica, e é o estado certo nos quatro casos. */
.panel__reserva,
.panel__midia video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.panel__midia video { opacity: 0; }

html.alfa-ok .panel__midia video { opacity: 1; }
html.alfa-ok .panel__reserva { opacity: 0; }

/* Montserrat, e não a fonte de display. Além do pedido, isso conserta uma
   inconsistência: "Estruturação" e "catálogo" têm acento, e o unicode-range
   já puxava essas letras para a Montserrat. O título ficava com duas fontes
   dentro da mesma palavra; agora é uma só. */
.panel h3 {
  font-family: var(--font-body);
  font-size: clamp(1.12rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
  margin-bottom: 0.7rem;
}

/* Entrelinha larga e corpo um pouco maior: no tamanho anterior as três linhas
   fechavam num bloco só. */
.panel p {
  color: var(--cinza);
  font-size: 0.97rem;
  line-height: 1.7;
  max-width: 42ch;
  margin: 0;
}

/* Em coluna única não há por que prender nada: o texto ficaria travado
   por cima dos cartões em vez de ao lado deles. */
@media (max-width: 860px) {
  .atuacao__grade {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 7vw, 3rem);
  }
  /* o transform da centralização também precisa sair: sem sticky ele só
     empurraria o título meia altura para cima, por cima do que vem antes */
  .atuacao__fixo {
    position: static;
    transform: none;
  }
  /* Em coluna única o recuo lateral só desalinharia o cartão da margem da
     página: a tecla volta a sair pouco, sem puxar a caixa. */
  .panel,
  .panel--espelho {
    margin-left: 0;
    margin-right: 0;
  }
  .panel__midia {
    margin-left: calc(-1 * (var(--recheio) + var(--transbordo)));
  }
  .panel--espelho .panel__midia {
    margin-left: 0;
    margin-right: calc(-1 * (var(--recheio) + var(--transbordo)));
  }
  /* Em coluna estreita a tecla e o texto não cabem lado a lado: empilha,
     tecla em cima, e o transbordo lateral continua valendo. */
  .panel,
  .panel--espelho {
    grid-template-columns: 1fr;
  }
  .panel__midia,
  .panel--espelho .panel__midia {
    grid-column: 1;
    grid-row: 1;
  }
  .panel__texto,
  .panel--espelho .panel__texto {
    grid-column: 1;
    grid-row: 2;
  }
  /* A alternância continua na coluna única: a tecla do cartão espelhado
     encosta na direita, senão as três ficariam à esquerda e o ritmo some. */
  .panel--espelho .panel__midia {
    justify-self: end;
  }
}

/* ---------- diferencial ---------- */

/* O recheio desta seção é assimétrico de propósito, para o conteúdo ficar
   centrado entre a esteira de cima e o título da seção de baixo.

   Por que o simétrico não centraliza: a seção Canais termina rente na
   esteira, porque tem padding-bottom zero. Então acima do conteúdo há UM
   recheio, e abaixo há DOIS, o desta seção mais o da seção seguinte. Medido:
   114px em cima contra 246px embaixo.

   A conta mantém o vão total e só o reparte: em cima 1,5 recheio, embaixo
   0,5. Assim `em cima = 1,5` e `embaixo = 0,5 + 1 do Método = 1,5`.

   Depende de a seção seguinte usar --section-space no topo. Se o Método
   ganhar recheio próprio, esta conta precisa ser refeita. */
.diferencial {
  padding-top: calc(var(--section-space) * 1.5);
  padding-bottom: calc(var(--section-space) * 0.5);
}

.diferencial__body p {
  color: var(--cinza);
  max-width: 42ch;
}

.tags {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tags span {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--preto);
  border: 1px solid rgba(105, 92, 87, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}

@media (max-width: 760px) {
  .section__inner--split {
    grid-template-columns: 1fr;
  }
}

/* ---------- método ---------- */

/* O vão da grade é variável porque o fio depende dele: cada trecho precisa
   atravessar o vão inteiro para emendar no nó seguinte. Escrito uma vez,
   lido pelos dois. */
.steps {
  --vao: clamp(2rem, 4vw, 3rem);
  /* Diâmetro do nó. Ele carrega o número dentro, então não pode encolher
     abaixo do que o algarismo pede. */
  --no: clamp(2.1rem, 2.8vw, 2.6rem);
  --fio: 2px;

  margin-top: clamp(3rem, 6vw, 4.5rem);
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vao);
}

/* O filete à esquerda saiu. Ele repartia os passos em três caixas iguais,
   que é exatamente a leitura errada: o terceiro passo não termina junto com
   os outros dois. Quem organiza agora é o fio horizontal, e ele é elemento
   oficial do manual — "linhas arredondadas: organização e ritmo visual". */
.step {
  position: relative;
  padding-top: calc(var(--no) + 1.4rem);
}

/* O número virou o próprio nó do fio, em vez de ficar solto acima do título.
   Dois elementos que faziam o mesmo trabalho viraram um.

   Preto e não laranja: preto é a cor estrutural do manual, e o laranja fica
   com o fio, que é o que guia a atenção. De quebra conserta contraste — o
   laranja sobre bege dava 4,16 num corpo de 14px, abaixo do mínimo de 4,5.
   Bege sobre preto dá 17,95. */
.step__n {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--no);
  height: var(--no);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--preto);
  color: var(--bege);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1;
}

/* Um trecho de fio por passo, saindo da borda do nó e atravessando o vão da
   grade até o nó seguinte. Emendados, os três viram uma linha só.

   Sai da BORDA do nó, não do centro: o nó é opaco, então o resultado é o
   mesmo e nada é desenhado por baixo dele. */
.step::after {
  content: "";
  position: absolute;
  top: calc(var(--no) / 2 - var(--fio) / 2);
  left: var(--no);
  right: calc(-1 * var(--vao));
  height: var(--fio);
  border-radius: var(--fio);
  /* Chapado, e não degradê. Cada trecho é um elemento, então um degradê
     reinicia em cada nó: a linha lia como três traços separados em vez de um
     percurso contínuo. Degradê só na cauda, onde ele tem trabalho a fazer. */
  background: var(--laranja);
  transform-origin: left center;
}

/* Recolhido só quando há JavaScript para desenhá-lo. Sem ele o fio nasce
   inteiro, que é o estado final da animação. */
.js-pronto .step::after { transform: scaleX(0); }

/* O último trecho dissolve em vez de parar. É a única diferença entre os
   três passos, e carrega sozinha a ideia de operação contínua. */
/* A cauda precisa de percurso para ler como continuação: dissolvendo dentro
   da própria coluna, ela só parecia terminar mais fraco. Avança até a margem
   da página e some lá. */
.step--aberto::after {
  right: calc(-1 * var(--gutter));
  background: linear-gradient(90deg,
    var(--laranja) 0%,
    var(--laranja) 46%,
    var(--laranja-claro) 68%,
    rgba(217, 112, 85, 0) 100%);
}

/* Desenha uma vez, quando a seção chega. Mesmo gesto de lápis do grid curvado
   da Sobre, com a mesma curva de tempo: é a linguagem de desenho que o site
   já tem, e não um efeito novo.

   Só o fio anima. Os nós e o texto nascem prontos: sem JavaScript a seção
   perde a linha e continua legível, em vez de ficar em branco. */
.js-pronto .steps.is-visible .step::after {
  animation: fio-cresce 620ms var(--ease-lapis) forwards;
  animation-delay: calc(var(--i, 0) * 420ms);
}

@keyframes fio-cresce {
  to { transform: scaleX(1); }
}

.step h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.step p {
  color: var(--cinza);
  font-size: 0.95rem;
  max-width: 30ch;
}

/* Em coluna única o fio gira: desce pela esquerda, com o texto ao lado do nó.
   Mesma peça, mesma emenda pelo vão — só muda o eixo. O vão é redeclarado
   aqui para o `gap` e o transbordo do fio continuarem sendo o mesmo número. */
@media (max-width: 760px) {
  .steps {
    --vao: 2.2rem;
    grid-template-columns: 1fr;
  }

  .step {
    padding-top: 0;
    padding-left: calc(var(--no) + 1.1rem);
    min-height: var(--no);
  }

  .step::after {
    top: var(--no);
    bottom: calc(-1 * var(--vao));
    left: calc(var(--no) / 2 - var(--fio) / 2);
    right: auto;
    width: var(--fio);
    height: auto;
    background: var(--laranja);
    transform-origin: top center;
  }

  .js-pronto .step::after { transform: scaleY(0); }

  /* Em coluna única a cauda desce: o percurso extra vem do `bottom`, porque
     aqui não há margem lateral para avançar. */
  .step--aberto::after {
    right: auto;
    bottom: calc(-1 * var(--vao) * 1.6);
    background: linear-gradient(180deg,
      var(--laranja) 0%,
      var(--laranja) 46%,
      var(--laranja-claro) 68%,
      rgba(217, 112, 85, 0) 100%);
  }

  .js-pronto .steps.is-visible .step::after {
    animation-name: fio-cresce-vertical;
  }
}

@keyframes fio-cresce-vertical {
  to { transform: scaleY(1); }
}

/* ---------- parceria (dark close) ---------- */

.parceria {
  background: var(--preto);
  color: var(--bege);
  overflow: hidden;
  overflow: clip;
  padding-top: calc(var(--section-space) * 1.1);
  padding-bottom: calc(var(--section-space) * 1.1);
}

.parceria .section__inner {
  position: relative;
  z-index: 1;
  text-align: left;
}

.parceria__glow {
  top: -12rem;
  left: 50%;
  transform: translateX(-50%);
  width: 42rem;
  height: 42rem;
  opacity: 0.28;
}

.parceria__lead {
  margin-top: 1.4rem;
  max-width: 46ch;
  color: rgba(255, 245, 217, 0.7);
  font-size: 1.05rem;
}

.parceria .btn--on-dark {
  margin-top: 2.5rem;
}

.parceria__meta {
  margin-top: 1.8rem;
  font-size: 0.9rem;
  color: rgba(255, 245, 217, 0.55);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

/* Ícone e arroba dentro do mesmo link, para o hover pegar os dois de uma vez.
   O traço do ícone é currentColor, então ele acende junto com o texto.
   O recheio com margem negativa leva o alvo de toque de 23px de altura para
   44 sem abrir vão na composição. */
.parceria__meta a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0;
  margin: -0.7rem 0;
  transition: color 0.25s var(--ease);
}

.parceria__meta a svg {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
}

.parceria__meta a:hover,
.parceria__meta a:focus-visible { color: var(--laranja-claro); }

/* ---------- footer ---------- */

/* Espelho do rodapé de receptaplus.com.br. As declarações vieram do CSS que
   está no ar, não da imagem: estrutura, medidas, opacidades e o ponto de
   quebra de 900px são os mesmos.

   Três adaptações, todas registradas:

   1. O contêiner usa a medida do site (74rem + --gutter) no lugar dos
      1200px + 24px da landing page. Assim o rodapé fica na mesma espinha das
      outras seções desta página; copiar a medida de lá desalinharia ele de
      tudo que vem acima.
   2. As duas peças em Nexa na landing page saem em Montserrat aqui, porque
      "farmácias" e "início" têm acento e os arquivos de avaliação da Nexa não
      desenham acentuado — a mesma razão da classe titulo-acentuado. Quando a
      Nexa licenciada chegar, as duas voltam junto com ela.
   3. A seta virou SVG embutido no lugar do PNG. */
.footer {
  background: var(--preto);
  color: #fff;
  padding: 1.5rem 0 2rem;
}

.footer__container {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* A landing page recua a marca em 50px de cada lado no celular e afasta o
   slogan em 45px fixos. Esses números foram calibrados para "para farmácias.":
   com "para o seu marketplace" eles consomem 100px de uma tela de 375 e a
   palavra corta na borda.

   O recuo saiu e o afastamento virou `auto`, que é o mesmo mecanismo que o
   desktop já usa. A composição é a mesma — marca à esquerda, slogan à
   direita — e passa a valer para qualquer comprimento de texto. */
.footer__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.footer__logo {
  width: 140px;
  height: auto;
  flex: 0 0 auto;
}

.footer__brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-left: auto;
}

.footer__tagline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--bege);
}

.footer__sub {
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(255, 245, 217, 0.55);
}

.footer__divider {
  width: 100%;
  height: 1px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  margin: 0.25rem 0;
}

.footer__top {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
  /* Alvo de toque: 35px de altura era pouco para o polegar. Aqui a barra não
     é apertada, então dá para crescer sem truque de margem. */
  min-height: 44px;
  transition: opacity 0.3s var(--ease);
}

.footer__top:hover { opacity: 0.75; }

/* Cor própria: o texto do link é branco e só a seta é laranja, então ela não
   pode herdar o currentColor do link. */
.footer__top-icon {
  width: 32px;
  height: auto;
  aspect-ratio: 72 / 46;
  flex: 0 0 auto;
  color: var(--laranja);
}

/* Política de Privacidade e Exclusão de dados. A Meta exige as duas para
   aprovar o app do WhatsApp oficial, então elas aparecem no rodapé de toda
   página do site. Um pouco mais claras que o CNPJ logo abaixo, porque são
   links, e com 44px de alvo de toque como o "Voltar ao início".

   A margem negativa devolve a sobra do alvo de toque: sem ela, o texto de
   13px ganhava um vão de 30px de cada lado e a linha se soltava do resto do
   rodapé. Ela é menor que o gap do contêiner, então os alvos não encostam
   nos vizinhos. */
.footer__links {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.5rem;
  margin: -0.75rem 0;
  font-size: 0.8rem;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 245, 217, 0.7);
  transition: color 0.3s var(--ease);
}

.footer__links a:hover,
.footer__links a:focus-visible { color: var(--laranja-claro); }

.footer__legal {
  align-self: center;
  text-align: center;
  margin-top: 0.5rem;
  /* 0,72rem dá 11,5px, abaixo do piso de 12px que texto corrido pede no
     celular. É o único número em que este rodapé se afasta do da landing
     page, e é por legibilidade. */
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
}

.footer__copy {
  align-self: center;
  text-align: center;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Acima de 900px a coluna vira grade de uma linha só que quebra: a marca fica
   à esquerda, o slogan é empurrado para a direita por margin-left: auto, e
   tudo abaixo do fio ocupa a largura inteira. A ordem é declarada, e não a do
   documento, porque .footer__brand vira display: contents e os dois filhos
   dele passam a ser itens diretos do contêiner. */
@media (min-width: 900px) {
  .footer { padding: 2.5rem 0; }

  .footer__container {
    flex-flow: row wrap;
    align-items: center;
    gap: 1.5rem 2rem;
  }

  .footer__brand { display: contents; }

  .footer__logo { order: 1; width: 88px; }

  .footer__brand-text { order: 2; }

  .footer__tagline { font-size: 1.2rem; }

  .footer__sub { font-size: 0.85rem; }

  .footer__divider {
    order: 3;
    flex-basis: 100%;
    margin: 0.75rem 0 0.25rem;
  }

  .footer__top {
    order: 4;
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    font-size: 1.05rem;
  }

  .footer__links {
    order: 5;
    flex-basis: 100%;
  }

  .footer__legal {
    order: 6;
    width: 100%;
    flex-basis: 100%;
  }

  .footer__copy {
    order: 7;
    width: 100%;
    flex-basis: 100%;
  }
}

/* ---------- páginas legais ---------- */

/* Política de Privacidade e Exclusão de dados: página de leitura, sem
   abertura, sem animação e sem script. Usa os tokens e o rodapé do site, e
   mais nada da home.

   Os títulos saem todos na Montserrat. Quase todos têm acento ou parênteses,
   que a Nexa de avaliação não desenha (ver o aviso no topo deste arquivo), e
   alternar as duas fontes de um título para o outro pesaria mais do que a
   troca.

   O laranja da marca sobre o bege dá 4,17 de contraste, abaixo do 4,5 que
   texto pequeno pede. Por isso os links são pretos com sublinhado laranja, e
   o laranja só pinta texto quando ele é grande: o número dos títulos. */
.legal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid rgba(105, 92, 87, 0.15);
}

.legal-topo__marca img {
  width: 116px;
  height: auto;
}

.legal-topo__voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--laranja);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color 0.3s var(--ease);
}

.legal-topo__voltar:hover { color: var(--laranja); }

.legal {
  padding: clamp(3rem, 8vw, 5.5rem) 0 var(--section-space);
}

.legal__inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.legal__cabecalho {
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(105, 92, 87, 0.2);
}

.legal__titulo {
  font-family: var(--font-body);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.legal__empresa {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--cinza);
}

.legal__empresa p + p { margin-top: 0.25rem; }

.legal__data {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cinza);
}

.legal__corpo > * + * { margin-top: 1rem; }

/* 1,2rem em negrito passa de 18,66px, o limite de texto grande: é o que
   deixa o número em laranja dentro do contraste. */
.legal__corpo h2 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2.5rem;
}

.legal__corpo h2 + * { margin-top: 0.75rem; }

.legal__n { color: var(--laranja); }

.legal__corpo ul,
.legal__corpo ol { padding-left: 1.4rem; }

.legal__corpo ul { list-style: disc; }
.legal__corpo ol { list-style: decimal; }

.legal__corpo li + li { margin-top: 0.5rem; }

.legal__corpo li { padding-left: 0.25rem; }

.legal__corpo ul li::marker { color: var(--laranja); }
.legal__corpo ol li::marker { font-weight: 600; }

.legal__corpo strong { font-weight: 600; }

/* O e-mail tem 34 caracteres sem espaço: numa tela de 320px ele não cabe na
   linha e empurraria a página para o lado. */
.legal__corpo a {
  text-decoration: underline;
  text-decoration-color: var(--laranja);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease);
}

.legal__corpo a:hover { color: var(--laranja); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .abertura { display: none !important; }
  /* Sem abertura não há entrega para acompanhar: o logo do menu aparece
     direto, sem fade. A troca entre monograma e logotipo horizontal também
     passa a ser instantânea, que é o comportamento pedido aqui. */
  .nav__logo { transition: none !important; }
  .marquee__track {
    animation: none !important;
  }
  [data-reveal],
  [data-reveal-text] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .divider__layer {
    transform: none !important;
  }
  .hero__arcos {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__pulso {
    display: none !important;
  }
  /* laço de vídeo é exatamente o que a preferência pede para não acontecer.
     A tecla não some junto: a imagem de reserva fica no lugar dele. */
  .panel__midia video {
    display: none !important;
  }
  .panel__reserva {
    opacity: 1 !important;
  }
  .hero__field,
  .hero__pulso-camada {
    transform: none !important;
    transition: none !important;
  }
  /* o traço do menu aparece inteiro, sem desenhar */
  .nav__links a::after {
    transition: none !important;
  }
  /* a marca da Atuação troca de cor seca, sem dissolver */
  .inline-logo__laranja {
    transition: none !important;
  }
  /* o grid curvado da Sobre já nasce desenhado */
  .sobre__grade path {
    clip-path: none !important;
    animation: none !important;
  }
  /* e o fio do Método também */
  .step::after {
    animation: none !important;
    transform: none !important;
  }
  /* o dropdown do celular abre seco, sem deslizar */
  .nav__painel,
  .nav__menu-icone span {
    transition: none !important;
  }
}