/* ==========================================================================
   ANIMAÇÕES — camada narrativa

   Cada animação aqui conta um pedaço da história da página, na ordem em que
   o lead percorre: o problema (instabilidade), a solução (alinhamento), o
   processo (trilha que avança) e a decisão (pulso no botão).

   Regra de cor: tudo no mesmo degradê laranja puxado pro vermelho, pra
   leitura não competir com a identidade.

   Este arquivo é carregado DEPOIS do <style> da página, então empata em
   especificidade e vence por ordem — por isso as regras aqui podem
   sobrescrever estados existentes sem precisar de !important.
   ========================================================================== */

:root{
  /* o degradê da marca, do laranja pro vermelho fechado */
  --fogo: linear-gradient(90deg, #ff7a33 0%, #ff5900 38%, #ff2d00 68%, #c10b00 100%);
  --fogo-v: linear-gradient(180deg, #ff7a33 0%, #ff5900 38%, #ff2d00 68%, #c10b00 100%);
}

/* ==========================================================================
   1. FIO DE PROGRESSO — o guia de leitura
   Uma régua fina no topo que enche conforme a pessoa desce. É o elemento
   mais barato que existe pra dizer "você está aqui, falta isso" — dá ao
   lead a noção de tamanho da página antes de decidir se vai ler tudo.
   ========================================================================== */
.fio-progresso{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9998;
  height: 2px;
  transform: scaleX(var(--lido, 0));
  transform-origin: left center;
  background: var(--fogo);
  box-shadow: 0 0 12px rgba(255,89,0,.55);
  pointer-events: none;
}

/* ==========================================================================
   2. DOR — o problema, desenhado como instabilidade
   As barras de cada dor ficam curtas, tortas e fora de compasso entre si:
   é a tradução visual de "cada material tem uma cara diferente". Quando a
   dor entra em foco, a barra se alinha e acende no degradê da marca — o
   contraste entre os dois estados é o que faz o ponto.

   Só no desktop: no tablet e no mobile as quatro dores aparecem juntas, e
   quatro barras tremendo ao mesmo tempo vira ruído, não mensagem.
   ========================================================================== */
@media (min-width: 1101px){
  .dor-item .dor-bar{
    background: var(--fogo-v);
    opacity: .28;
    transform-origin: center;
    animation: dorInstavel 3.6s ease-in-out infinite;
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  }
  /* defasagem diferente por item: juntas elas pulsariam em bloco e o olho
     leria como "ritmo", não como "desalinhado" */
  .dor-item:nth-child(2) .dor-bar{ animation-delay: -1.1s; }
  .dor-item:nth-child(3) .dor-bar{ animation-delay: -2.3s; }
  .dor-item:nth-child(4) .dor-bar{ animation-delay: -.55s; }

  .dor-item.is-active .dor-bar{
    animation: none;
    opacity: 1;
    transform: scaleY(1) skewY(0deg);
    background: var(--fogo-v);
    box-shadow: 0 0 20px rgba(255,89,0,.55);
  }

  /* com o pin desligado não existe "item em foco", então nada treme */
  .dor-section.no-scrub .dor-item .dor-bar{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@keyframes dorInstavel{
  0%,100%{ transform: scaleY(.5) skewY(-1.5deg); }
  50%    { transform: scaleY(.78) skewY(1.5deg); }
}

/* ==========================================================================
   3. FRENTES — a solução, desenhada como alinhamento
   Ao entrar na tela, cada frente monta: o índice chega, o texto sobe e uma
   linha de fogo corre da esquerda pra direita fechando o bloco. É o oposto
   exato da dobra anterior — lá as peças tremiam soltas, aqui elas assentam
   uma embaixo da outra no mesmo padrão.
   ========================================================================== */
.frente{ position: relative; }

.frente::after{
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--fogo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
}
.frente.is-vista::after{ transform: scaleX(1); }

.frente .frente-index,
.frente .frente-texto,
.frente .frente-icone{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
}
.frente.is-vista .frente-index,
.frente.is-vista .frente-texto,
.frente.is-vista .frente-icone{
  opacity: 1;
  transform: none;
}
/* o índice puxa, o texto segue, o ícone fecha — nessa ordem, pra leitura
   acontecer no mesmo sentido em que a pessoa lê */
.frente.is-vista .frente-index{ transition-delay: .04s; }
.frente.is-vista .frente-texto{ transition-delay: .12s; }
.frente.is-vista .frente-icone{ transition-delay: .2s; }

/* ==========================================================================
   4. MÉTODO — o processo, desenhado como trilha que avança
   Quatro nós ligados por um trilho que enche junto com a rolagem da dobra.
   O --progresso vem do mesmo cálculo que já move os cartões, então a
   trilha e os cartões nunca saem de sincronia.
   ========================================================================== */
.metodo-trilha{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin-top: 28px;
}
/* trilho de fundo */
.metodo-trilha::before{
  content: "";
  position: absolute;
  left: 5px; right: 5px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 100px;
  background: rgba(0,0,0,.12);
}
/* trilho preenchido, a fatia que já foi percorrida */
.metodo-trilha::after{
  content: "";
  position: absolute;
  left: 5px; right: 5px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%) scaleX(var(--progresso, 0));
  transform-origin: left center;
  border-radius: 100px;
  background: var(--fogo);
  box-shadow: 0 0 10px rgba(255,89,0,.5);
}

.metodo-no{
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: #d6d2ca;
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.metodo-no.is-alcancado{
  background: #ff5900;
  box-shadow: 0 0 0 4px rgba(255,89,0,.18);
  transform: scale(1.25);
}

/* o cartão da etapa ganha um fio de fogo no topo, desenhado quando ele
   entra em cena — reforça "cada etapa é uma entrega fechada" */
.etapa{ overflow: hidden; }
.etapa::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--fogo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.etapa.is-vista::before{ transform: scaleX(1); }

/* ==========================================================================
   5. DECISÃO — o pulso no botão que fecha a página
   Um anel que sai do botão de tempos em tempos. Não é enfeite: é o único
   ponto da tela com movimento próprio depois que a rolagem para, então é
   pra onde o olho volta quando a pessoa termina de ler.
   ========================================================================== */
.cta-final .btn-primary,
.hero .btn-primary{ position: relative; }

.cta-final .btn-primary::after,
.hero .btn-primary::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 27px;
  border: 1px solid rgba(255,89,0,.75);
  animation: pulsoDecisao 3s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events: none;
}
/* o do hero entra defasado, senão os dois pulsam juntos e viram um
   piscar de página inteira quando os dois estão visíveis */
.hero .btn-primary::after{ animation-delay: 1.5s; }

@keyframes pulsoDecisao{
  0%      { transform: scale(1);    opacity: .85; }
  55%,100%{ transform: scale(1.14); opacity: 0; }
}

/* ==========================================================================
   6. ENTRADA DAS DOBRAS — o ritmo de leitura
   Título e apoio sobem alguns pixels ao entrar. É o que dá cadência pro
   scan: a página responde à rolagem, então a pessoa continua rolando.
   ========================================================================== */
[data-anima]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
[data-anima].is-vista{
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   ACESSIBILIDADE
   Quem pede menos movimento recebe a página inteira parada, no estado
   final. Nenhuma informação vive só na animação.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .fio-progresso{ display: none; }

  .dor-item .dor-bar,
  .dor-item.is-active .dor-bar{ animation: none; opacity: 1; transform: none; }

  .frente::after,
  .etapa::before{ transform: scaleX(1); transition: none; }

  .frente .frente-index,
  .frente .frente-texto,
  .frente .frente-icone,
  [data-anima]{ opacity: 1; transform: none; transition: none; }

  .cta-final .btn-primary::after,
  .hero .btn-primary::after{ animation: none; opacity: 0; }

  .metodo-trilha::after{ transform: translateY(-50%) scaleX(1); }
  .metodo-no{ background: #ff5900; }
}


/* ==========================================================================
   7. CENAS DAS ETAPAS — cada cartão do Método ilustra o que promete

   A primeira versão largava os elementos soltos no vazio do cartão, com
   posição em porcentagem: num cartão alto eles se afastavam uns dos outros
   e a cena perdia a leitura. Agora cada cena mora dentro de um painel de
   altura fixa, encostado no rodapé do cartão, e se organiza por flex — o
   espaçamento é o mesmo em qualquer largura e a composição não se desfaz.

   O painel segue a linguagem do resto do site: canto arredondado, filete
   de 1px e superfície clara sobre o cinza do cartão.
   ========================================================================== */
.etapa-cena{
  position: relative;
  /* auto encosta a cena no rodapé do cartão quando sobra espaço (desktop)
     e não faz nada quando não sobra (tablet e celular, altura automática) */
  margin-top: auto;
  flex: none;
  height: 140px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

/* as cenas só rodam depois que o cartão aparece: quatro loops girando fora
   da tela gastariam bateria à toa e ainda chegariam no meio do ciclo */
.etapa-cena *{ animation-play-state: paused; }
.etapa.is-vista .etapa-cena *{ animation-play-state: running; }

/* ---------- 7.1 "Você me conta o que precisa" — a conversa chegando ---------- */
.etapa-cena--conversa{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.balao{
  height: 22px;
  border-radius: 12px 12px 12px 4px;
  background: #ebe8e2;
  opacity: 0;
  animation: balaoEntra 6s cubic-bezier(.22,.61,.36,1) infinite;
}
.balao--curto{ width: 58%; }
/* a resposta dela sai do outro lado e no laranja da marca: é ela falando,
   e é esse o gesto que a etapa está pedindo */
.balao--voce{
  width: 50%;
  align-self: flex-end;
  border-radius: 12px 12px 4px 12px;
  background: var(--fogo);
  animation-delay: .7s;
}
@keyframes balaoEntra{
  0%      { opacity: 0; transform: translateY(9px) scale(.96); }
  9%, 74% { opacity: 1; transform: none; }
  84%,100%{ opacity: 0; transform: translateY(-5px) scale(.98); }
}

.digitando{
  display: flex;
  align-items: center;
  gap: 5px;
  width: 52px;
  height: 22px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 12px 12px 12px 4px;
  background: #ebe8e2;
}
.digitando i{
  width: 5px; height: 5px;
  border-radius: 100px;
  background: #b3ada3;
  animation: digita 1.3s ease-in-out infinite;
}
.digitando i:nth-child(2){ animation-delay: .16s; }
.digitando i:nth-child(3){ animation-delay: .32s; }
@keyframes digita{
  0%,100%{ transform: translateY(0);    opacity: .45; }
  50%    { transform: translateY(-4px); opacity: 1; }
}

/* ---------- 7.2 "Eu te respondo no WhatsApp" — o aviso chegando ---------- */
/* montado como uma linha de notificação, não como um ícone solto no meio:
   ocupa a largura do painel e se lê na hora como "chegou mensagem" */
.etapa-cena--zap{
  display: flex;
  align-items: center;
}
.zap-linha{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.zap{
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  background: rgba(255,89,0,.08);
}
/* dois anéis defasados dão a sensação de sinal saindo, e não de um ícone
   que só pisca */
.zap-halo{
  position: absolute;
  inset: 0;
  border-radius: 100px;
  border: 1.5px solid rgba(255,89,0,.5);
  animation: zapPulso 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
.zap-halo--dois{ animation-delay: .9s; }
@keyframes zapPulso{
  0%  { transform: scale(.85); opacity: .9; }
  100%{ transform: scale(1.7); opacity: 0; }
}
.zap-glifo{
  position: relative;
  width: 24px;
  height: 24px;
}

.zap-texto{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zap-l{
  height: 9px;
  border-radius: 100px;
  background: #ebe8e2;
  opacity: 0;
  animation: zapLinha 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
.zap-l--1{ width: 72%; }
.zap-l--2{ width: 46%; animation-delay: .12s; }
@keyframes zapLinha{
  0%, 40% { opacity: 0; transform: translateX(-6px); }
  54%,100%{ opacity: 1; transform: none; }
}

.zap-badge{
  flex: none;
  display: grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 100px;
  background: var(--fogo);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  animation: badgePop 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes badgePop{
  0%, 40% { transform: scale(0);    opacity: 0; }
  54%     { transform: scale(1.2);  opacity: 1; }
  62%,100%{ transform: scale(1);    opacity: 1; }
}

/* ---------- 7.3 "Alinhamos o projeto" — as peças assentando ---------- */
.etapa-cena--alinha{
  display: flex;
  align-items: center;
}
.alinha-pilha{
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding-left: 14px;
}
.bloco{
  height: 16px;
  border-radius: 6px;
  background: #ebe8e2;
  transform-origin: left center;
  animation: alinhaBloco 5.2s cubic-bezier(.22,.61,.36,1) infinite;
}
/* cada peça entra torta de um jeito diferente — saindo todas do mesmo
   ângulo pareceria um bloco só se movendo, não peças desalinhadas */
.bloco--1{ width: 52%; --dx:  18px; --dr: -3.5deg; }
.bloco--2{ width: 74%; --dx: -10px; --dr:  2.5deg; animation-delay: .12s; }
.bloco--3{ width: 40%; --dx:  24px; --dr: -2deg;   animation-delay: .24s; }
@keyframes alinhaBloco{
  0%, 16%  { transform: translateX(var(--dx)) rotate(var(--dr)); }
  44%, 78% { transform: none; }
  100%     { transform: translateX(var(--dx)) rotate(var(--dr)); }
}

/* a guia pisca no instante exato do encaixe — é o vocabulário de quem
   trabalha em editor de layout, e diz "alinhamento" sem precisar escrever */
.guia{
  position: absolute;
  top: 20px; bottom: 20px;
  left: 34px;
  width: 1.5px;
  background: var(--fogo);
  opacity: 0;
  animation: guiaFlash 5.2s ease-in-out infinite;
}
@keyframes guiaFlash{
  0%, 34%  { opacity: 0; }
  44%, 74% { opacity: 1; }
  84%,100% { opacity: 0; }
}

/* ---------- 7.4 "Você recebe pronto" — a entrega saindo ---------- */
.etapa-cena--entrega{
  display: flex;
  align-items: center;
}
.entrega-trilho{
  position: relative;
  /* largura fixa e centrada: com a distancia conhecida em px, o pacote
     anda por transform (composto pela GPU) em vez de left, que forcava
     recalculo de layout a cada quadro */
  --percurso: 158px;
  width: 236px;
  max-width: 100%;
  height: 44px;
  margin: 0 auto;
}
.rota{
  position: absolute;
  left: 4px; right: 52px;
  top: 50%;
  border-top: 1.5px dashed rgba(0,0,0,.14);
}
.pacote{
  position: absolute;
  top: 50%;
  left: 4px;
  width: 26px; height: 21px;
  margin-top: -11px;
  border-radius: 5px;
  background: var(--fogo);
  box-shadow: 0 5px 12px rgba(255,89,0,.3);
  animation: entregaAnda 4.6s cubic-bezier(.5,0,.2,1) infinite;
  will-change: transform;
}
/* a fita do pacote, pra ler como caixa e não como retângulo */
.pacote::before{
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.55);
}
/* anima left em vez de translateX: a largura do cartão muda entre desktop,
   tablet e celular, e a porcentagem acompanha sozinha */
@keyframes entregaAnda{
  0%,  6%  { opacity: 1; transform: translateX(0)     scale(1); }
  58%      { opacity: 1; transform: translateX(var(--percurso)) scale(1); }
  70%,100% { opacity: 0; transform: translateX(var(--percurso)) scale(.55); }
}

.destino{
  position: absolute;
  top: 50%; right: 4px;
  width: 38px; height: 30px;
  margin-top: -15px;
  border: 2px solid #d8d3ca;
  border-top-color: transparent;
  border-radius: 3px 3px 8px 8px;
}
.entregue{
  position: absolute;
  top: 50%; right: 15px;
  margin-top: -32px;
  color: #ff5900;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  animation: entreguePop 4.6s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes entreguePop{
  0%,  58% { opacity: 0; transform: translateY(6px) scale(.7); }
  68%      { opacity: 1; transform: translateY(0) scale(1.15); }
  76%, 88% { opacity: 1; transform: translateY(0) scale(1); }
  96%,100% { opacity: 0; transform: translateY(-4px) scale(1); }
}

/* ---------- cartões menores: a cena encolhe junto ---------- */
@media (max-width: 1100px){
  .etapa-cena{ height: 112px; padding: 16px; border-radius: 14px; }
  .etapa-cena--conversa{ gap: 9px; }
  .balao, .digitando{ height: 18px; }
  .zap{ width: 38px; height: 38px; }
  .zap-glifo{ width: 21px; height: 21px; }
  .zap-linha{ gap: 12px; }
  .alinha-pilha{ gap: 10px; padding-left: 12px; }
  .bloco{ height: 13px; }
  .guia{ top: 16px; bottom: 16px; left: 28px; }
  .entrega-trilho{ --percurso: 136px; width: 212px; height: 36px; }
}

@media (prefers-reduced-motion: reduce){
  /* estado final legível, sem nenhum loop */
  .etapa-cena *{ animation: none !important; }
  .balao, .zap-l{ opacity: 1; transform: none; }
  .zap-halo{ opacity: 0; }
  .zap-badge{ opacity: 1; transform: none; }
  .bloco{ transform: none; }
  .guia{ opacity: 1; }
  .pacote{ left: 68%; opacity: 1; }
  .entregue{ opacity: 1; transform: none; }
}

/* ==========================================================================
   8. ESPAÇO PRA CENA — o cartão cresce pra caber a ilustração

   O cartão do Método tem altura fixa (os quatro ficam sobrepostos no mesmo
   slot, então todos precisam medir igual). Essa altura foi calculada quando
   o cartão só tinha texto — com a cena somada, o conteúdo passava do fundo
   e o overflow:hidden do cartão cortava a ilustração pela metade.

   Aqui o slot cresce o suficiente pra caber texto + cena com folga, em cada
   breakpoint. As contas, pra quem for mexer depois:

   DESKTOP  420 = 74 (padding 44+30) + 84 (3 gaps de 28) + 105 (texto, pior
                  caso de 3 linhas) + 132 (cena) + folga
   CELULAR  320 = 48 (padding 24+24) + 24 (3 gaps de 8) + 122 (texto, pior
                  caso) + 100 (cena) + folga

   No tablet o slot é `height: auto` (grade 2×2 estática), então cresce
   sozinho e não entra na conta.
   ========================================================================== */
.pedido-etapas{ height: 420px; }

.etapa-cena{
  height: 132px;
  padding: 18px;
}

/* ---------- tablet: cartão de altura automática, cena mais baixa ---------- */
@media (max-width: 1100px){
  .etapa-cena{ height: 116px; padding: 16px; }
}

/* ---------- celular: cartão estreito, tudo mais compacto ---------- */
@media (max-width: 640px){
  .pedido-etapas{ height: 320px; }

  .etapa-cena{
    height: 100px;
    padding: 14px;
    border-radius: 12px;
  }
  .etapa-cena--conversa{ gap: 8px; }
  .balao, .digitando{ height: 16px; border-radius: 9px 9px 9px 3px; }
  .balao--voce{ border-radius: 9px 9px 3px 9px; }
  .digitando{ width: 44px; padding: 0 10px; gap: 4px; }

  .zap-linha{ gap: 10px; }
  .zap{ width: 34px; height: 34px; }
  .zap-glifo{ width: 19px; height: 19px; }
  .zap-texto{ gap: 6px; }
  .zap-l{ height: 8px; }
  .zap-badge{ min-width: 18px; height: 18px; font-size: 10px; }

  .alinha-pilha{ gap: 8px; padding-left: 10px; }
  .bloco{ height: 12px; border-radius: 5px; }
  .guia{ top: 14px; bottom: 14px; left: 24px; }

  .entrega-trilho{ --percurso: 124px; width: 188px; height: 32px; }
  .pacote{ width: 22px; height: 18px; margin-top: -9px; }
  .destino{ width: 32px; height: 25px; margin-top: -13px; right: 2px; }
  .rota{ right: 44px; }
  .entregue{ font-size: 14px; margin-top: -27px; right: 12px; }
}

/* ==========================================================================
   9. CONTRASTE E ÁREA DE TOQUE

   Correções apontadas pelo Lighthouse. Ficam aqui, no fim da folha, pra
   não se perderem no meio do CSS de cada dobra.
   ========================================================================== */

/* ---------- contraste ----------
   O #737373 dava 4,43:1 sobre o preto e 4,35:1 sobre o cinza claro dos
   cartões — os dois abaixo do mínimo de 4,5:1 pra texto pequeno. São
   ajustes de poucos tons: o cinza continua discreto, só deixa de sumir. */
.numero p,
.proj-header p,
.proj-tags{ color: #7d7d7d; }          /* sobre fundo escuro: 5,0:1 */

.etapa-numero{ color: #6a6a6a; }        /* sobre o cartão claro: 5,2:1 */

/* o marquee era o pior caso da página: 2,69:1 */
.sobre-marquee span{ color: #7d7d7d; }

/* ---------- área de toque ----------
   Os links tinham 15 a 19px de altura clicável. O mínimo recomendado é
   24px. O padding cresce só a área sensível ao toque — a posição do texto
   na tela não muda, porque em todos esses casos o container é flex e
   centraliza o conteúdo. */
.nav-links a{ padding-block: 5px; }

.rodape-col a,
.rodape-col li a{ display: inline-block; padding-block: 3px; }

.proj-link{ padding-block: 3px; }

/* ---------- foco visível ----------
   Navegação por teclado precisa de um indicador. O padrão do Chrome é um
   anel azul que não existe na identidade; este é o mesmo laranja da marca
   e aparece só pra quem está de fato navegando pelo teclado. */
:focus-visible{
  outline: 2px solid var(--laranja-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* os ícones sociais do rodapé são desenhos de 20px: a área clicável
   acompanhava o desenho e ficava abaixo dos 24px mínimos. O flex cresce
   só a área sensível, o ícone continua do mesmo tamanho no centro. */
.rodape-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

/* ---------- marca no navbar ----------
   Versão plana: só o "A", sem quadrado de fundo.

   A foto que estava aqui era um bloco quadrado e preenchia a pílula de
   ponta a ponta. A marca é um desenho aberto: com a mesma medida ela
   encostava na curva da borda. Daí a altura menor e o respiro maior à
   esquerda, onde o raio da pílula fecha. */
.badge .badge-icone{
  width: auto;
  height: 19px;
  border-radius: 0;
}
/* a pílula tinha 38px de altura com a foto de 26px. A marca é mais baixa,
   então o padding vertical cresce pra manter a mesma altura no navbar —
   e dá ao desenho a folga que ele não tinha. */
.nav .badge{ padding: 8px 18px 8px 14px; gap: 11px; }