@import url('/fontes/fontes.css');

/* =========================================================================
   Parceria Hipopó + Rede Inova
   Identidade: o laranja do pacote Hiper como base, o verde da marca Hipopó
   como acento, o vermelho da Inova só nos pontos de assinatura.
   Formas: tudo derivado do "blob" do logo — nada de retângulo seco.
   ========================================================================= */

:root {
  --verde: #5cb531;
  --verde-escuro: #3f8a1f;
  --verde-claro: #8ed45f;

  --laranja: #f26522;
  --laranja-forte: #dc4f10;
  --laranja-claro: #ff9a5c;
  /* Amostrado da própria embalagem HIPER: é o laranja da Hipopó, não um
     parecido. A barra do topo usa ele para o letreiro BRANCO da Rede Inova
     poder ficar solto, sem placa. */
  --laranja-hipopo: #e4601e;

  --vermelho: #e4032e;
  --dourado: #e0a01c;
  --dourado-claro: #ffd76e;

  --creme: #fff5ea;
  --papel: #fffdf9;
  --areia: #f6e6d4;

  --tinta: #22303d;
  --tinta-media: #5a6b7a;
  --tinta-fraca: #93a3b1;

  --raio: 22px;
  --raio-g: 34px;
  --sombra: 0 2px 0 rgba(34, 48, 61, .06), 0 12px 30px -12px rgba(34, 48, 61, .28);
  --sombra-alta: 0 4px 0 rgba(34, 48, 61, .08), 0 26px 50px -18px rgba(34, 48, 61, .4);
  --borda: 2px solid rgba(34, 48, 61, .1);

  --limite: 560px;
}

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

/* text-size-adjust: sem isso o Safari do iPhone aumenta o corpo do texto
   sozinho ao girar a tela, e o layout quebra. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  /* vh primeiro: iOS anterior ao 15.4 não conhece dvh e ficaria sem altura. */
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background-color: var(--creme);
  /* Textura de papel: pontinhos quase invisíveis, tira o "chapado" de tela. */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(242, 101, 34, .10), transparent 42%),
    radial-gradient(circle at 84% 4%, rgba(92, 181, 49, .10), transparent 38%),
    radial-gradient(rgba(34, 48, 61, .045) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  background-attachment: fixed;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

.oculto { display: none !important; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ topo */

.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(14px, env(safe-area-inset-left)) 10px max(14px, env(safe-area-inset-right));
  /* Barra sólida no laranja da Hipopó. A logo da Rede Inova é arte branca:
     aqui ela lê direto, sem precisar de placa por trás. */
  background: var(--laranja-hipopo);
  box-shadow: 0 2px 12px -4px rgba(180, 70, 20, .5);
}

/* Respiro para o gesto de voltar do iPhone não cobrir o último botão. */
.palco { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

.marcas { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* A logo da Inova é uma marca EMPILHADA (girafa ao lado de três linhas de
   texto), quase quadrada. Abaixo de ~44px o letreiro vira borrão. Foi medido:
   a 30px ela saía com 46px de largura e o texto com uns 3px. */
.placa-inova { display: inline-flex; align-items: center; }
.placa-inova img { height: 46px; width: auto; }

.logo-hipopo { height: 30px; width: auto; }

.mais {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px;
  color: rgba(255, 255, 255, .7); flex: 0 0 auto;
}

/* No celular estreito a barra tem logo, volta e catálogo. O texto da volta sai
   e fica só a seta — o alvo de toque continua do mesmo tamanho. */
@media (max-width: 420px) {
  .placa-inova img { height: 25px; }
  .logo-hipopo { height: 23px; }
  .mais { display: none; }
  .topo-acao { font-size: 13px; padding: 7px 11px; }
  .topo-acao.voltar-central { font-size: 0; padding: 7px 12px; }
  .topo-acao.voltar-central span { font-size: 22px; margin: 0; }
}

.acoes-topo { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }

.topo-acao {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 999px;
  background: rgba(255, 255, 255, .14); padding: 8px 14px; cursor: pointer;
  font-weight: 800; font-size: 13.5px; color: #fff; text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.topo-acao:hover { background: rgba(255, 255, 255, .28); border-color: #fff; }
.topo-acao.voltar-central span { font-size: 19px; line-height: 1; margin-top: -2px; }

/* ------------------------------------------------------------------ base */

.palco { max-width: var(--limite); margin: 0 auto; padding: 20px 16px 64px; }

.tela { animation: entra .42s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.cartao {
  background: var(--papel);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  border: var(--borda);
  padding: 22px;
}

.cartao + .cartao { margin-top: 16px; }

.selo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  background: var(--verde); color: #fff;
}
.selo.laranja { background: var(--laranja); }
.selo.dourado { background: linear-gradient(135deg, var(--dourado-claro), var(--dourado)); color: #4a3202; }
.selo.cinza   { background: var(--areia); color: var(--tinta-media); }

.olho {
  font-size: 12.5px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--laranja); margin-bottom: 6px;
}

.legenda { color: var(--tinta-media); font-size: 15px; margin: 8px 0 0; }

/* ------------------------------------------------------------------ botões */

.botao {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 17px 22px; border: 0; cursor: pointer;
  border-radius: 18px;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px;
  color: #fff; background: var(--laranja);
  box-shadow: 0 5px 0 var(--laranja-forte), 0 14px 26px -12px rgba(220, 79, 16, .8);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.botao:hover { filter: brightness(1.05); }
.botao:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--laranja-forte); }
.botao:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.botao.verde   { background: var(--verde); box-shadow: 0 5px 0 var(--verde-escuro), 0 14px 26px -12px rgba(63, 138, 31, .8); }
.botao.escuro  { background: var(--tinta); box-shadow: 0 5px 0 #101a24; }
.botao.zap     { background: #25d366; box-shadow: 0 5px 0 #128c4a; color: #05341c; }
.botao.dourado { background: linear-gradient(135deg, #ffcc4d, var(--dourado)); box-shadow: 0 5px 0 #a97400; color: #4a3202; }

.botao-fantasma {
  width: 100%; padding: 14px; margin-top: 10px; cursor: pointer;
  border: 2px solid rgba(34, 48, 61, .16); border-radius: 16px;
  background: transparent; font-weight: 800; font-size: 15.5px; color: var(--tinta-media);
}
.botao-fantasma:hover { border-color: var(--laranja); color: var(--laranja); background: rgba(242, 101, 34, .05); }

.link-texto {
  background: none; border: 0; padding: 6px; cursor: pointer;
  color: var(--laranja); font-weight: 800; font-size: 15px; text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ capa */

.capa { text-align: center; padding-top: 8px; }

.capa-arte { position: relative; margin: 0 auto 6px; width: min(340px, 86%); }
.capa-arte .balao {
  position: absolute; inset: 8% 0 auto; height: 78%;
  background: radial-gradient(ellipse at 50% 45%, var(--verde-claro), var(--verde) 62%, transparent 71%);
  filter: blur(2px); opacity: .28; border-radius: 50%;
}
.capa-mascotes { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.capa-mascotes .hipo {
  width: 82%;
  filter: drop-shadow(0 18px 26px rgba(34, 48, 61, .28));
  animation: balanca 6s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes balanca {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50%      { transform: rotate(1.6deg) translateY(-6px); }
}

.capa h1 { font-size: clamp(34px, 10vw, 46px); margin-bottom: 8px; }
.capa h1 .destaque { color: var(--laranja); display: block; }

.capa-frase { font-size: 17.5px; color: var(--tinta-media); margin: 0 auto 22px; max-width: 30ch; }

.vantagens { display: grid; gap: 10px; margin: 22px 0; text-align: left; }
.vantagem {
  display: flex; align-items: center; gap: 13px;
  background: var(--papel); border: var(--borda); border-radius: 18px; padding: 13px 15px;
}
.vantagem .icone {
  flex: 0 0 42px; height: 42px; display: grid; place-items: center;
  border-radius: 14px; background: rgba(242, 101, 34, .12); color: var(--laranja);
}
.vantagem b { display: block; font-size: 15.5px; }
.vantagem span { font-size: 13.5px; color: var(--tinta-media); }

/* ------------------------------------------------------------------ formulário */

.campo { margin-bottom: 15px; }
.campo label { display: block; font-weight: 800; font-size: 14.5px; margin-bottom: 6px; }

.campo input {
  width: 100%; padding: 15px 16px;
  border: 2px solid rgba(34, 48, 61, .14); border-radius: 16px;
  background: #fff; font-weight: 600;
  /* Nunca abaixo de 16px: o Safari do iPhone dá zoom sozinho ao focar o campo
     e a tela fica torta pelo resto da sessão. */
  font-size: 17px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus {
  outline: 0; border-color: var(--laranja);
  box-shadow: 0 0 0 4px rgba(242, 101, 34, .16);
}
.campo input.erro { border-color: var(--vermelho); }
.campo .aviso { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 700; color: var(--vermelho); }

/* Todo campo é obrigatório: em vez de marcar o opcional, marca-se o exigido —
   assim ninguém descobre no meio do caminho que faltou preencher. */
.obrigatorio {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(228, 3, 46, .1); color: var(--vermelho);
  font-size: 10.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  vertical-align: 1px;
}

.opcional {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(34, 48, 61, .08); color: var(--tinta-media);
  font-size: 10.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  vertical-align: 1px;
}

.ajuda-campo { margin-top: 5px; font-size: 12.5px; color: var(--tinta-fraca); font-weight: 700; }

/* Cadastro reconhecido pelo CPF: os dados guardados aparecem para conferência
   antes de seguir, em vez de entrar calado. */
.reconhecido {
  padding: 16px 18px; border-radius: var(--raio); margin-bottom: 16px;
  background: rgba(92, 181, 49, .1); border: 2px solid rgba(92, 181, 49, .35);
  animation: abrindo .35s cubic-bezier(.2, .8, .3, 1) both;
}
.cabeca-reconhecido {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  color: var(--verde-escuro); font-family: 'Baloo 2', sans-serif;
  font-weight: 800; font-size: 19px;
}
.reconhecido .bilhete-linha { border-bottom-color: rgba(63, 138, 31, .2); }
.reconhecido .link-texto { margin-top: 10px; padding-left: 0; color: var(--tinta-media); }

.conferindo {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 13.5px; font-weight: 800; color: var(--laranja);
}
.rodinha-mini {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid rgba(242, 101, 34, .25); border-top-color: var(--laranja);
  animation: gira .7s linear infinite;
}

.consentimento {
  display: flex; gap: 11px; align-items: flex-start;
  background: rgba(34, 48, 61, .04); border-radius: 16px; padding: 13px 15px; margin: 16px 0;
  font-size: 13.5px; color: var(--tinta-media); line-height: 1.5;
}
.consentimento input { width: 21px; height: 21px; flex: 0 0 21px; margin-top: 1px; accent-color: var(--laranja); }

/* ------------------------------------------------------------------ carrossel */

.trilho {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 14px; margin-inline: -4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.trilho::-webkit-scrollbar { display: none; }

.opcao {
  scroll-snap-align: center; flex: 0 0 clamp(150px, 46%, 190px);
  background: var(--papel); border: 3px solid transparent; border-radius: var(--raio);
  padding: 12px 12px 14px; cursor: pointer; text-align: center;
  box-shadow: var(--sombra); transition: transform .16s, border-color .16s, box-shadow .16s;
}
.opcao:hover { transform: translateY(-4px); }
.opcao img { width: 100%; height: 132px; object-fit: contain; margin-bottom: 8px; }
.opcao .rotulo { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 25px; line-height: 1; }
.opcao .sub { font-size: 12.5px; color: var(--tinta-media); font-weight: 700; }

.opcao[aria-pressed='true'] {
  border-color: var(--laranja); transform: translateY(-4px);
  box-shadow: 0 0 0 5px rgba(242, 101, 34, .14), var(--sombra-alta);
}
.opcao[aria-pressed='true'] .rotulo { color: var(--laranja); }

.opcao.boneco { position: relative; }
.opcao.boneco .sem-foto { height: 132px; display: grid; place-items: center; font-size: 46px; }

/* Quando são 2 bonequinhos, a fita mostra a ORDEM (1º, 2º) — assim a pessoa vê
   quantos já escolheu sem contar card por card. */
.opcao.boneco .fita {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  min-width: 26px; height: 26px; padding: 0 7px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--verde); color: #fff; font-size: 12.5px; font-weight: 900;
  box-shadow: 0 2px 8px rgba(63, 138, 31, .5);
  animation: fitaEntra .28s cubic-bezier(.2, 1.6, .4, 1) both;
}
.opcao.boneco[aria-pressed='true'] { border-color: var(--verde); }
.opcao.boneco[aria-pressed='true'] .rotulo { color: var(--verde-escuro); }

@keyframes fitaEntra { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }

.dica-arrasta {
  text-align: center; font-size: 13px; font-weight: 800; color: var(--tinta-fraca);
  letter-spacing: .04em; margin-top: -4px;
}

/* ------------------------------------------------------------------ combo */

/* A oferta do lenço tem fundo próprio para se destacar do fluxo da fralda —
   é outra decisão, não um passo obrigatório. */
.combo {
  margin: 4px 0 8px; padding: 16px 14px 6px; border-radius: var(--raio-g);
  background: linear-gradient(150deg, rgba(92, 181, 49, .12), rgba(142, 212, 95, .06));
  border: 2px dashed rgba(92, 181, 49, .4);
}
.combo-cabeca h3 { font-size: 21px; margin: 8px 0 2px; }
.combo-cabeca p { margin: 0 0 12px; font-size: 14px; color: var(--tinta-media); }

.selo.verde-claro { background: var(--verde-escuro); }

.combo-trilho .opcao { flex-basis: clamp(132px, 40%, 158px); }
.opcao.lenco { position: relative; }
.opcao.lenco img { height: 108px; }
.opcao.lenco .sem-foto { height: 108px; display: grid; place-items: center; font-size: 40px; }
.opcao.lenco .risco { text-decoration: line-through; color: var(--tinta-fraca); font-size: 12px; }
.opcao.lenco .preco-lenco {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; color: var(--verde-escuro);
}
.opcao.lenco[aria-pressed='true'] { border-color: var(--verde); box-shadow: 0 0 0 5px rgba(92, 181, 49, .16), var(--sombra-alta); }
.opcao.lenco.recusar[aria-pressed='true'] { border-color: var(--tinta-fraca); box-shadow: 0 0 0 4px rgba(147, 163, 177, .2); }

.etiqueta-off {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 9px; border-radius: 999px;
  background: var(--vermelho); color: #fff; font-size: 12px; font-weight: 900;
  box-shadow: 0 2px 8px rgba(228, 3, 46, .45);
}

.preco-detalhe {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--tinta-media);
}
.preco-detalhe span { background: rgba(34, 48, 61, .06); padding: 3px 10px; border-radius: 999px; }

/* ------------------------------------------------------------------ preço */

.preco-bloco { text-align: center; margin: 20px 0 4px; }
.preco-antes {
  font-size: 17px; color: var(--tinta-fraca); font-weight: 800; text-decoration: line-through;
  text-decoration-color: var(--vermelho); text-decoration-thickness: 2px;
}
.preco-agora {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: clamp(48px, 15vw, 62px); line-height: 1; color: var(--verde-escuro);
}
.preco-agora .cifrao { font-size: .46em; vertical-align: .55em; margin-right: 2px; }
.preco-nota {
  font-size: 13.5px; font-weight: 800; color: var(--tinta-fraca);
  letter-spacing: .04em; text-transform: uppercase;
}

/* Com o tamanho escolhido, a nota deixa de ser instrução e vira o argumento
   de venda: o preço por fralda. Ganha destaque e sai do caixa-alta, porque
   número em maiúsculo é mais difícil de ler. */
.preco-nota.economia {
  display: inline-block; margin-top: 6px; padding: 8px 16px; border-radius: 999px;
  background: rgba(92, 181, 49, .14); color: var(--verde-escuro);
  font-size: 14.5px; letter-spacing: 0; text-transform: none;
  animation: pulsaEconomia .45s cubic-bezier(.2, 1.4, .4, 1);
}
.preco-nota.economia b {
  font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800;
  vertical-align: -1px;
}
.preco-nota .miudinho { font-size: 12.5px; opacity: .75; font-weight: 700; }

@keyframes pulsaEconomia {
  0%   { transform: scale(.9); opacity: .4; }
  100% { transform: scale(1); opacity: 1; }
}

/* ------------------------------------------------------------------ cupom */

/* O cupom é desenhado como bilhete de papel: dois recortes laterais e uma
   linha picotada. É o objeto que a pessoa mostra no balcão — precisa parecer
   uma coisa, não um texto na tela. */
.bilhete {
  position: relative; margin-top: 6px;
  background: linear-gradient(160deg, #fffaf2, #fff);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta);
  border: 2px dashed rgba(242, 101, 34, .45);
  overflow: hidden;
  animation: carimba .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes carimba {
  0%   { transform: scale(.82) rotate(-3deg); opacity: 0; }
  60%  { transform: scale(1.03) rotate(.6deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

.bilhete.dourado { border-color: var(--dourado); background: linear-gradient(160deg, #fffbee, #fff6db); }

.bilhete-topo {
  padding: 18px 20px 14px; text-align: center;
  background: repeating-linear-gradient(135deg, rgba(242,101,34,.07) 0 12px, transparent 12px 24px);
  border-bottom: 2px dashed rgba(34, 48, 61, .18);
}
.bilhete.dourado .bilhete-topo { background: repeating-linear-gradient(135deg, rgba(224,160,28,.14) 0 12px, transparent 12px 24px); }

/* Os recortes que dão o formato de ticket. */
.bilhete-topo::before, .bilhete-topo::after {
  content: ''; position: absolute; bottom: -15px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--creme);
  box-shadow: inset 0 2px 3px rgba(34, 48, 61, .12);
}
.bilhete-topo::before { left: -15px; }
.bilhete-topo::after  { right: -15px; }

/* Só números, então dá pra usar tabular-nums e espaçar bem: o cliente lê em voz
   alta e o balconista digita. Quanto maior e mais separado, menos erro. */
.bilhete-codigo {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: clamp(38px, 12vw, 52px); letter-spacing: .06em;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
  color: var(--tinta); margin: 10px 0 4px; white-space: nowrap;
}
.bilhete-corpo { padding: 18px 20px 20px; }

.bilhete-linhas { display: grid; gap: 9px; margin-bottom: 15px; }
.bilhete-linha {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 14.5px; padding-bottom: 8px;
  border-bottom: 1px dashed rgba(34, 48, 61, .13);
}
.bilhete-linha:last-child { border-bottom: 0; padding-bottom: 0; }
.bilhete-linha .chave { color: var(--tinta-media); font-weight: 700; }
.bilhete-linha .valor { font-weight: 900; text-align: right; }

.relogio {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 14px; margin-bottom: 14px;
  background: rgba(242, 101, 34, .1); color: var(--laranja-forte);
  font-weight: 900; font-size: 14.5px;
}
.relogio.urgente { background: rgba(228, 3, 46, .1); color: var(--vermelho); animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .58; } }

.instrucao {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 14px;
  padding: 13px 15px; border-radius: 16px;
  background: rgba(92, 181, 49, .1); font-size: 14px; line-height: 1.5;
}
.instrucao b { color: var(--verde-escuro); }

/* ------------------------------------------------------------------ checkout */

/* A escolha entrega/retirada vem antes de tudo: o endereço só nasce depois,
   para não pedir rua e número a quem vai buscar na loja. */
.escolha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 6px; }

.cartela {
  position: relative; cursor: pointer; text-align: center;
  padding: 18px 12px 16px; border-radius: var(--raio);
  background: var(--papel); border: 3px solid rgba(34, 48, 61, .12);
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.cartela:hover { transform: translateY(-3px); }
.cartela .emoji { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.cartela b { display: block; font-size: 15.5px; }
.cartela small { display: block; font-size: 13px; color: var(--tinta-media); font-weight: 700; margin-top: 3px; }

.cartela[aria-pressed='true'] {
  border-color: var(--verde); transform: translateY(-3px);
  box-shadow: 0 0 0 5px rgba(92, 181, 49, .14), var(--sombra);
}
.cartela[aria-pressed='true']::after {
  content: '✓'; position: absolute; top: 7px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: #fff;
  font-size: 13px; font-weight: 900; display: grid; place-items: center;
}

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  flex: 1 1 0; min-width: 96px; cursor: pointer; padding: 13px 12px;
  border-radius: 15px; background: var(--papel);
  border: 2.5px solid rgba(34, 48, 61, .12);
  font-weight: 800; font-size: 15.5px; text-align: center; line-height: 1.25;
  transition: border-color .15s, background .15s;
}
/* "maquininha" entra como legenda, não como parte do nome do botão. */
.chip small {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 700; color: var(--tinta-fraca); letter-spacing: .01em;
}
.chip[aria-pressed='true'] { border-color: var(--laranja); background: rgba(242, 101, 34, .08); color: var(--laranja-forte); }
.chip[aria-pressed='true'] small { color: var(--laranja); }

/* O bloco de endereço entra deslizando quando "entrega" é escolhida. */
.abre {
  overflow: hidden;
  animation: abrindo .38s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes abrindo {
  from { opacity: 0; max-height: 0; transform: translateY(-8px); }
  to   { opacity: 1; max-height: 900px; transform: none; }
}

.linha-campos { display: grid; grid-template-columns: 2fr 1fr; gap: 11px; }

.resumo-conta {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--raio);
  background: rgba(34, 48, 61, .04); border: var(--borda);
}
.resumo-conta .linha {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14.5px; padding: 6px 0; color: var(--tinta-media); font-weight: 700;
}
.resumo-conta .linha.total {
  border-top: 2px dashed rgba(34, 48, 61, .18); margin-top: 6px; padding-top: 11px;
  font-family: 'Baloo 2', sans-serif; font-size: 23px; color: var(--tinta); font-weight: 800;
}
.resumo-conta .linha.total .valor { color: var(--verde-escuro); }

.passo-titulo {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px;
  margin: 22px 0 10px;
}
.passo-titulo .numero {
  flex: 0 0 27px; height: 27px; border-radius: 50%;
  background: var(--laranja); color: #fff;
  font-size: 14px; display: grid; place-items: center;
}

/* ------------------------------------------------------------------ status do pedido */

/* Trilha vertical: a linha que liga os passos só é colorida até onde o pedido
   chegou, então dá pra ver o progresso sem ler nada. */
.trilha-status { position: relative; margin-top: 20px; padding-left: 6px; }

.passo { position: relative; display: flex; gap: 14px; padding-bottom: 22px; }
.passo:last-child { padding-bottom: 0; }

.passo::before {
  content: ''; position: absolute; left: 12px; top: 26px; bottom: 0;
  width: 2px; background: rgba(34, 48, 61, .14);
}
.passo:last-child::before { display: none; }
.passo.feito::before { background: var(--verde); }

.passo .marca {
  flex: 0 0 26px; height: 26px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center;
  background: #fff; border: 2px solid rgba(34, 48, 61, .18); color: #fff;
}
.passo.feito .marca { background: var(--verde); border-color: var(--verde); }

.passo .texto b { display: block; font-size: 15.5px; color: var(--tinta-fraca); }
.passo.feito .texto b { color: var(--tinta); }
.passo .texto span { display: block; font-size: 13.5px; color: var(--tinta-media); margin-top: 2px; }

/* O passo atual pulsa de leve: é o único jeito de a pessoa saber, de relance,
   em que ponto o pedido está. */
.passo.agora .marca {
  box-shadow: 0 0 0 0 rgba(92, 181, 49, .55);
  animation: pulsoStatus 2s ease-out infinite;
}
.passo.agora .texto b { color: var(--verde-escuro); font-size: 17px; }

@keyframes pulsoStatus {
  70%  { box-shadow: 0 0 0 12px rgba(92, 181, 49, 0); }
  100% { box-shadow: 0 0 0 0 rgba(92, 181, 49, 0); }
}

.cartao-pedido {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  margin-top: 12px; padding: 14px 16px; text-align: left;
  border: 2px solid rgba(92, 181, 49, .4); border-radius: var(--raio);
  background: rgba(92, 181, 49, .07);
}
.cartao-pedido:hover { border-color: var(--verde); }
.cartao-pedido .info { flex: 1; min-width: 0; }
.cartao-pedido b { display: block; font-size: 15.5px; color: var(--verde-escuro); }
.cartao-pedido span { font-size: 13px; color: var(--tinta-media); }
.cartao-pedido .seta { color: var(--verde); font-size: 20px; font-weight: 900; }

/* Aviso do que vem na PRÓXIMA compra. Aparece enquanto ela está na primeira:
   saber que tem mais coisa depois é o que faz ela voltar. */
.aviso-proxima {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 18px; padding: 14px 16px; border-radius: var(--raio);
  background: rgba(92, 181, 49, .1);
  border: 2px dashed rgba(92, 181, 49, .4);
  font-size: 14px; line-height: 1.5; color: var(--verde-escuro);
}
.aviso-proxima svg { flex: 0 0 auto; margin-top: 1px; }

/* ------------------------------------------------------------------ álbum */

.album { margin-top: 16px; }
.album-cabeca { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.album-contador { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; color: var(--laranja); }

.barra {
  height: 11px; border-radius: 999px; background: rgba(34, 48, 61, .1);
  overflow: hidden; margin: 10px 0 16px;
}
.barra i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--verde-claro), var(--verde));
  transition: width .7s cubic-bezier(.2, .9, .3, 1);
}

/* A prateleira: peça conquistada acende, peça que falta fica só silhueta.
   O buraco visível é o que traz a pessoa de volta à loja. */
.prateleira {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px;
  padding: 14px 12px 16px; border-radius: var(--raio);
  background: linear-gradient(180deg, rgba(34,48,61,.05), rgba(34,48,61,.02));
  border: var(--borda);
}
.peca { text-align: center; }
.peca .moldura {
  position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  display: grid; place-items: center; background: rgba(34, 48, 61, .09);
  border: 2px dashed rgba(34, 48, 61, .18);
}
.peca img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.peca .interrogacao { font-family: 'Baloo 2', sans-serif; font-size: 30px; font-weight: 800; color: rgba(34, 48, 61, .26); }
.peca .nome { font-size: 12px; font-weight: 800; margin-top: 6px; color: var(--tinta-fraca); }

.peca.faltando img { filter: brightness(0) opacity(.17); }

.peca.tem .moldura {
  background: linear-gradient(160deg, #fff, var(--areia));
  border: 2px solid var(--verde); border-style: solid;
  box-shadow: 0 0 0 4px rgba(92, 181, 49, .16);
}
.peca.tem .nome { color: var(--verde-escuro); }
.peca.tem .moldura::after {
  content: '✓'; position: absolute; top: 4px; right: 5px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--verde); color: #fff;
  font-size: 12px; font-weight: 900; display: grid; place-items: center;
}

/* ------------------------------------------------------------------ instagram */

.portao {
  text-align: center; padding: 26px 20px;
  border-radius: var(--raio-g);
  background: linear-gradient(140deg, #f9ce5c, #ee5f68 45%, #b13ab5 78%, #6b3cd4);
  color: #fff; box-shadow: var(--sombra-alta);
}
.portao h2 { font-size: 26px; margin-bottom: 8px; }
.portao p { margin: 0 auto 18px; max-width: 30ch; font-size: 15px; opacity: .95; }
.portao .botao { background: #fff; color: #c1358a; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.portao .arroba { font-weight: 900; font-size: 19px; margin-bottom: 14px; letter-spacing: .02em; }

.confirma-insta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 12px; padding: 12px; width: 100%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 16px;
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 800; font-size: 15.5px;
}
.confirma-insta:hover { background: rgba(255, 255, 255, .24); }

/* ------------------------------------------------------------------ catálogo */

/* Barra de linhas fixa no topo: com 11 linhas, rolar até achar a certa cansa. */
.filtro-linhas {
  position: sticky; top: 51px; z-index: 20;
  display: flex; gap: 7px; overflow-x: auto;
  padding: 10px 14px; margin: 0 -16px 18px;
  background: rgba(255, 245, 234, .93);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(34, 48, 61, .08);
  scrollbar-width: none;
}
.filtro-linhas::-webkit-scrollbar { display: none; }

.pilula {
  flex: 0 0 auto; padding: 8px 15px; cursor: pointer;
  border: 2px solid rgba(34, 48, 61, .12); border-radius: 999px;
  background: var(--papel); font-weight: 800; font-size: 14px; color: var(--tinta-media);
  white-space: nowrap; transition: all .16s;
}
.pilula:hover { border-color: var(--laranja); color: var(--laranja); }
.pilula[aria-pressed='true'] {
  background: var(--laranja); border-color: var(--laranja); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(242, 101, 34, .7);
}

.linha-catalogo { margin-bottom: 30px; scroll-margin-top: 108px; }
.linha-catalogo .cabeca-linha {
  display: flex; align-items: center; gap: 11px; margin-bottom: 3px;
}
.linha-catalogo .risca {
  flex: 1; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--verde), transparent);
}
.linha-catalogo h3 { font-size: 23px; }
.linha-catalogo .resumo { font-size: 14px; color: var(--tinta-media); margin: 2px 0 13px; }

.grade-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }

.item-catalogo {
  position: relative; overflow: hidden;
  background: var(--papel); border: var(--borda); border-radius: var(--raio);
  padding: 12px 10px 12px; text-align: center; box-shadow: var(--sombra);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s;
}
.item-catalogo:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }

/* Brilho que atravessa a embalagem ao passar o dedo/mouse. Só enfeite, mas é o
   que separa "grade de fotos" de vitrine. */
.item-catalogo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.item-catalogo:hover::after { transform: translateX(120%); }

.item-catalogo img { width: 100%; height: 124px; object-fit: contain; }
.item-catalogo .tam {
  display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  background: rgba(92, 181, 49, .14); color: var(--verde-escuro);
  font-weight: 900; font-size: 13.5px;
}
.item-catalogo .det { display: block; font-size: 12px; color: var(--tinta-fraca); font-weight: 700; margin-top: 4px; }

.catalogo-vazio { text-align: center; padding: 40px 20px; color: var(--tinta-fraca); font-weight: 800; }

/* ------------------------------------------------------------------ loja */

.loja-caixa {
  margin-top: 18px; padding: 18px; border-radius: var(--raio-g);
  background: var(--tinta); color: #fff;
}
.loja-caixa h3 { font-size: 20px; margin-bottom: 4px; }
.loja-caixa p { margin: 4px 0; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.loja-caixa .botao-fantasma { border-color: rgba(255, 255, 255, .3); color: #fff; margin-top: 12px; }
.loja-caixa .botao-fantasma:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }

/* ------------------------------------------------------------------ central de campanhas */

/* A página central é da REDE INOVA: vermelho da casa, logo grande.
   Regra de cor aqui: texto é BRANCO. Cinza sobre vermelho suja e some —
   quando precisa de hierarquia, muda o peso ou o tamanho, não a cor. */
body.central {
  background-color: var(--vermelho);
  background-image:
    radial-gradient(circle at 50% -8%, #ff2a4d, transparent 55%),
    radial-gradient(circle at 92% 96%, #8f0016, transparent 55%),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
  background-attachment: fixed;
  color: #fff;
}

/* Halo que respira devagar atrás de tudo. */
.brilho-central {
  position: fixed; top: -18%; left: 50%; margin-left: -320px;
  width: 640px; height: 640px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 62%);
  filter: blur(52px);
  animation: respiraCentral 9s ease-in-out infinite alternate;
}
@keyframes respiraCentral {
  from { transform: scale(1) translateY(0); opacity: .75; }
  to   { transform: scale(1.18) translateY(22px); opacity: 1; }
}

.topo-central {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  padding: 30px 20px 4px;
}
/* A logo já vem completa, com a girafa. Nada de mascote solto ao lado. */
.logo-central {
  height: clamp(78px, 26vw, 118px); width: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .4));
  animation: entraLogo .6s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes entraLogo {
  from { opacity: 0; transform: translateY(-14px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

.selo-central {
  display: inline-block; margin: 16px 0 10px; padding: 7px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .45);
  color: #fff; font-size: 12.5px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.titulo-central {
  font-size: clamp(34px, 11vw, 50px); color: #fff; margin: 0 0 10px; line-height: 1.02;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .3);
}
.frase-central {
  color: #fff; opacity: .92; font-size: 17px; font-weight: 700;
  margin: 0 auto 26px; max-width: 28ch;
}

/* Cada campanha é um cartão claro sobre o vermelho. A pessoa reconhece a MARCA,
   então a logo do parceiro é o elemento maior do cartão. */
.cartao-campanha-publica {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 15px; padding: 22px 20px 22px 26px; overflow: hidden;
  background: #fff; border-radius: var(--raio-g);
  box-shadow: 0 4px 0 rgba(120, 0, 18, .35), 0 22px 40px -18px rgba(0, 0, 0, .6);
  text-decoration: none; color: var(--tinta);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s;
  animation: sobeCartao .5s cubic-bezier(.2, .8, .3, 1) both;
}
.cartao-campanha-publica:nth-child(2) { animation-delay: .07s; }
.cartao-campanha-publica:nth-child(3) { animation-delay: .14s; }
.cartao-campanha-publica:nth-child(4) { animation-delay: .21s; }

@keyframes sobeCartao {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.cartao-campanha-publica:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 0 rgba(120, 0, 18, .35), 0 30px 50px -20px rgba(0, 0, 0, .7);
}
.cartao-campanha-publica:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120, 0, 18, .35); }

/* Faixa na cor do parceiro: é a única pista de cor antes de abrir o portal. */
.cartao-campanha-publica .faixa {
  position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  background: var(--cor-parceiro, var(--laranja));
}
.cartao-campanha-publica img { height: 56px; width: auto; flex: 0 0 auto; }
.cartao-campanha-publica .conteudo { flex: 1; min-width: 0; text-align: left; }
.cartao-campanha-publica .conteudo b {
  display: block; font-family: 'Baloo 2', sans-serif; font-size: 20px; line-height: 1.12;
}
.cartao-campanha-publica .conteudo span {
  display: block; margin-top: 3px; font-size: 13.5px; color: var(--tinta-media); font-weight: 700;
}
.cartao-campanha-publica .ir {
  font-family: 'Baloo 2', sans-serif; font-size: 34px; font-weight: 800;
  color: var(--cor-parceiro, var(--laranja)); line-height: 1;
}

/* Como funciona: quatro passos, numerados na cor da casa. */
.passos-central { position: relative; z-index: 1; margin-top: 34px; text-align: left; }
.passos-central h2 {
  font-size: 22px; color: #fff; text-align: center; margin-bottom: 16px;
}
.passos-central ol { list-style: none; counter-reset: passo; margin: 0; padding: 0; }
.passos-central li {
  counter-increment: passo; position: relative;
  padding: 0 0 20px 52px;
}
.passos-central li::before {
  content: counter(passo);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--vermelho);
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px;
}
.passos-central li::after {
  content: ''; position: absolute; left: 17px; top: 34px; bottom: 4px; width: 2px;
  background: rgba(255, 255, 255, .3);
}
.passos-central li:last-child { padding-bottom: 0; }
.passos-central li:last-child::after { display: none; }
.passos-central li b { display: block; color: #fff; font-size: 16.5px; }
.passos-central li span { display: block; color: #fff; opacity: .8; font-size: 14px; margin-top: 2px; }

.loja-central {
  position: relative; z-index: 1;
  margin-top: 30px; padding: 20px; border-radius: var(--raio-g);
  background: rgba(0, 0, 0, .22); border: 1.5px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff;
}
.loja-central h3 { font-size: 19px; margin-bottom: 6px; }
.loja-central p { margin: 3px 0; font-size: 14.5px; opacity: .9; }
.loja-central a {
  display: block; margin-top: 14px; padding: 13px; border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .5); color: #fff;
  text-decoration: none; font-weight: 800; text-align: center;
}
.loja-central a:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

.rodape-central { position: relative; z-index: 1; color: #fff; opacity: .75; }
.rodape-central strong { color: #fff; }
.rodape-central .assinatura { border-top-color: rgba(255, 255, 255, .22); }
.rodape-central .assinatura strong { color: #fff; }

body.central .carregando { color: #fff; }
body.central .rodinha { border-color: rgba(255, 255, 255, .28); border-top-color: #fff; }
body.central .palco { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ avisos */

.recado {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; border-radius: 16px; margin-bottom: 14px;
  font-size: 14.5px; font-weight: 700; line-height: 1.5;
}
.recado svg { flex: 0 0 auto; margin-top: 1px; }
.recado.ruim  { background: rgba(228, 3, 46, .09); color: #a30020; }
.recado.bom   { background: rgba(92, 181, 49, .12); color: var(--verde-escuro); }
.recado.atento{ background: rgba(242, 101, 34, .12); color: var(--laranja-forte); }

/* Ícones dentro de blocos de texto e botões: alinham pela linha de base do
   texto em vez de flutuar no meio. */
.instrucao svg { flex: 0 0 auto; margin-top: 2px; color: var(--verde-escuro); }
.relogio svg, .confirma-insta svg, .botao svg { flex: 0 0 auto; }
.cartela .emoji { display: flex; align-items: center; justify-content: center; gap: 3px; color: var(--laranja); }
.cartela[aria-pressed='true'] .emoji { color: var(--verde-escuro); }
.opcao .sem-foto { color: var(--tinta-fraca); }
.opcao.lenco[aria-pressed='true'] .sem-foto { color: var(--tinta-media); }
.peca .moldura svg { color: var(--verde); }

.carregando {
  display: grid; place-items: center; padding: 60px 20px; gap: 14px;
  color: var(--tinta-media); font-weight: 800;
}
.rodinha {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid rgba(242, 101, 34, .2); border-top-color: var(--laranja);
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ celebração */

#confete {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 90;
}

.celebra { text-align: center; padding: 26px 20px 30px; }
.celebra .medalha {
  width: 116px; height: 116px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 56px;
  background: radial-gradient(circle at 35% 30%, var(--verde-claro), var(--verde));
  box-shadow: 0 0 0 10px rgba(92, 181, 49, .18), var(--sombra-alta);
  animation: chega .6s cubic-bezier(.2, 1.7, .4, 1) both;
}
.celebra.ouro .medalha { background: radial-gradient(circle at 35% 30%, #ffe08a, var(--dourado)); box-shadow: 0 0 0 10px rgba(224, 160, 28, .2), var(--sombra-alta); }

@keyframes chega { from { transform: scale(0) rotate(-25deg); } to { transform: none; } }

.celebra h1 { font-size: clamp(32px, 9.5vw, 42px); color: var(--verde-escuro); margin-bottom: 10px; }
.celebra.ouro h1 { color: #a97400; }
.celebra p { font-size: 16.5px; color: var(--tinta-media); margin: 0 auto 22px; max-width: 32ch; }

.rodape {
  text-align: center; padding: 26px 16px 40px;
  font-size: 12.5px; color: var(--tinta-fraca); line-height: 1.7;
}
.rodape strong { color: var(--tinta-media); }

.assinatura {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(34, 48, 61, .1);
  font-size: 12px; letter-spacing: .03em;
}
.assinatura strong { color: var(--laranja); font-weight: 900; }

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