/* =============================================================================
   Instituto Aloha — links na bio
   Paleta retirada dos arquivos oficiais de marca:
     amarelo #FFE400 · grafite #191919 · preto #000000 · fundo #EBEBEB
   Tipografia: Creato Display (arquivos da marca, em assets/fontes/)
   ============================================================================= */

@font-face {
  font-family: "Creato Display";
  src: url("../assets/fontes/CreatoDisplay-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("../assets/fontes/CreatoDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("../assets/fontes/CreatoDisplay-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("../assets/fontes/CreatoDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("../assets/fontes/CreatoDisplay-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("../assets/fontes/CreatoDisplay-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --preto:     #000000;
  --grafite:   #191919;
  --grafite-2: #3A3A3A;
  --cinza:     #6B6B6B;
  --fundo:     #EBEBEB;
  --branco:    #FFFFFF;
  --nuvem:     #F6F6F6;
  --amarelo:   #FFE400;
  --amarelo-escuro: #E0C800;
  --linha:     #DCDCDC;

  --largura: 32rem;        /* 512px */
  --gutter: 1rem;
  --raio-bloco: 1.75rem;   /* janela do modal */
  --raio-cartao: 1.125rem;

  --fonte: "Creato Display", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

/* O atributo hidden do HTML tem que vencer qualquer display definido aqui
   (o modal, por exemplo, é display:flex e apareceria aberto sem esta regra). */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--preto);   /* as faixas pintam o resto; isto evita faixa branca */
  color: var(--grafite);
  font-family: var(--fonte);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Todo título da página segue a manchete do topo: mesmo peso, mesmo
   espaçamento entre letras e mesma entrelinha. Só o tamanho muda. */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--grafite);
  outline-offset: 3px;
  border-radius: 6px;
}
.capa :focus-visible, .campanha :focus-visible, .rodape :focus-visible {
  outline-color: var(--amarelo);
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--preto);
  color: var(--amarelo);
  padding: 0.75rem 1rem;
  z-index: 50;
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { left: 0; }

/* --------------------------------------------------------------- estrutura */

/* As três faixas ocupam a largura inteira da tela; só o conteúdo de dentro
   fica preso à coluna central. "centro" é o recuo que faz essa centralização
   sem precisar de uma div a mais dentro de cada faixa. */
.moldura { --centro: max(var(--gutter), calc((100% - var(--largura)) / 2)); }

main {
  display: grid;
  /* minmax(0, 1fr): sem isso, a coluna cresce até caber o trilho de fotos
     inteiro e a página ganha rolagem lateral */
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--grafite);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 0.3125rem 0.75rem;
  margin-bottom: 0.75rem;
}

.etiqueta--campanha {
  background: var(--preto);
  color: var(--amarelo);
  border-color: var(--preto);
}

/* ---------------------------------------------------------------- cabeçalho
   Celular: foto em cima, com o logo sobre ela; manchete logo abaixo, entrando
   no degradê da foto. Computador: texto à esquerda e foto à direita, como na
   arte original. O fundo é o grafite #191919 da própria arte.              */

.capa {
  position: relative;
  overflow: hidden;
  background: var(--grafite);
  color: var(--branco);
}

.capa__foto {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4.4;
  max-height: 30rem;
  width: 100%;
}

.capa__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}

/* escurece o alto (para o logo) e funde a base no grafite (para a manchete) */
.capa__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(25, 25, 25, 0.85) 0%, rgba(25, 25, 25, 0) 30%),
    linear-gradient(to top, var(--grafite) 8%, rgba(25, 25, 25, 0) 52%);
}

.capa__texto {
  position: static;               /* o logo se posiciona em relação à .capa */
  padding: 0 var(--centro) 6rem;
  margin-top: -3rem;
  text-align: center;
}

.capa__texto > * { position: relative; z-index: 1; }

.capa__logo {
  position: absolute !important;
  top: calc(1.25rem + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: 8.5rem;
  z-index: 2 !important;
}

.capa--sem-foto .capa__logo {
  position: relative !important;
  top: auto;
  left: auto;
  transform: none;
  margin: 0 auto 2rem;
}
.capa--sem-foto .capa__texto { margin-top: 0; padding-top: calc(2rem + env(safe-area-inset-top)); }

.capa__manchete {
  font-size: clamp(2.125rem, 10vw, 3rem);
}

.capa__manchete-amarela { color: var(--amarelo); }
.capa__manchete-branca  { color: var(--branco); }
.capa__manchete span { display: inline; }
.capa__manchete span + span::before { content: " "; }

.capa__subtitulo {
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--amarelo);
}

.capa__chamada {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;             /* área de toque confortável */
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--amarelo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.capa__chamada:hover { text-decoration-thickness: 2px; }

/* o sinal de wi-fi cortado no canto, como na arte: só decoração */
.capa__sinal {
  position: absolute;
  left: -2.5rem;
  bottom: -2.75rem;
  width: 8rem;
  transform: rotate(-40deg);
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .capa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: min(36rem, 78vh);
  }

  .capa__foto {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
  }

  .capa__foto img { position: absolute; inset: 0; object-position: 50% 35%; }

  /* no computador a foto funde para a esquerda, entrando no texto */
  .capa__foto::after {
    background: linear-gradient(to right, var(--grafite) 0%, rgba(25, 25, 25, 0) 38%);
  }

  .capa__texto {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    position: relative;
    margin: 0;
    padding: calc(3rem + env(safe-area-inset-top)) 2.5rem 7rem;
  }

  .capa__logo {
    position: relative !important;
    top: auto;
    left: auto;
    transform: none;
    width: 10.5rem;
    margin: 0 auto 3.5rem;
  }

  .capa__manchete { font-size: clamp(2.75rem, 4.6vw, 4rem); }
  .capa__subtitulo { font-size: 1.25rem; margin-top: 1.5rem; }
  .capa__chamada { font-size: 1.25rem; }

  .capa__sinal { width: 13rem; left: -3.5rem; bottom: -4rem; }

  /* sem foto, o texto ocupa as duas colunas */
  .capa--sem-foto .capa__texto { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------- campanha */

.campanha {
  background: var(--amarelo);
  color: var(--preto);
  /* a galeria usa 100vw, que inclui a barra de rolagem no computador;
     o recorte evita esse excesso de virar rolagem lateral */
  overflow-x: hidden;
  overflow-x: clip;
  padding: 2.5rem var(--centro) 3rem;
}

.campanha .etiqueta--campanha { margin-bottom: 0.875rem; }



.campanha__texto {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  max-width: 24rem;
}

.medidor {
  margin-top: 1.5rem;
  background: rgba(0, 0, 0, 0.07);
  border-radius: var(--raio-cartao);
  padding: 1.125rem 1.125rem 1.25rem;
}

.medidor__leitura {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.medidor__percentual {
  font-weight: 900;
  font-size: clamp(2.5rem, 12vw, 3.25rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.medidor__resumo {
  font-weight: 700;
  font-size: 0.9375rem;
}

.barra {
  margin-top: 1rem;
  height: 0.75rem;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  overflow: hidden;
}

.barra__preenchida {
  display: block;
  height: 100%;
  background: var(--preto);
  border-radius: 999px;
}

.medidor__data {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #594F00;
}

.campanha__acoes {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.625rem;
}

/* ---------------------------------------------------------- galeria de fotos
   Faixa que vai de uma borda à outra da tela, saindo do recuo da campanha.
   As fotos têm a mesma altura e cada uma mantém a sua proporção.           */

.galeria {
  /* sai da coluna central e vai de uma borda à outra da tela */
  margin: 1.5rem calc(50% - 50vw) 0;
}

.galeria__janela {
  overflow: hidden;
  cursor: pointer;
  /* as pontas somem em degradê, em vez de cortar a foto seco */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
}

.galeria__trilho {
  --vao: 0.625rem;
  display: flex;
  gap: var(--vao);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: galeria-rolar var(--duracao, 45s) linear infinite;
}

/* anda exatamente uma cópia das fotos e recomeça, sem pulo visível */
@keyframes galeria-rolar {
  to { transform: translateX(calc(-50% - var(--vao) / 2)); }
}

.galeria__item { flex: none; }

.galeria__item img {
  display: block;
  height: 13.75rem;
  width: auto;
  border-radius: var(--raio-cartao);
  background: rgba(0, 0, 0, 0.08);   /* enquanto a foto carrega */
}

/* Para depois de um toque (alterna) ou ao focar pelo teclado. */
.galeria__janela:focus-visible .galeria__trilho,
.galeria--pausada .galeria__trilho {
  animation-play-state: paused;
}

/* Só em aparelho com mouse de verdade: no celular o toque também "conta"
   como mouse por cima e deixaria a faixa presa, sem voltar a rolar. */
@media (hover: hover) {
  .galeria:hover .galeria__trilho { animation-play-state: paused; }
}

@media (min-width: 40rem) {
  .galeria__item img { height: 16rem; }
}

/* quem pediu menos movimento recebe as fotos paradas, roláveis com o dedo */
@media (prefers-reduced-motion: reduce) {
  .galeria__janela {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
            mask-image: none;
    padding-inline: max(var(--gutter), calc(50vw - var(--largura) / 2));
  }
  .galeria__trilho { animation: none; }
  .galeria__item { scroll-snap-align: center; }
  .galeria__item[aria-hidden="true"] { display: none; }
}

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

.botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  font-family: var(--fonte);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.botao__seta {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: currentColor;
}

.botao__seta svg { color: var(--preto); }

.botao--principal {
  background: var(--preto);
  color: var(--amarelo);
}
.botao--principal:hover { background: var(--grafite-2); }
.botao--principal .botao__seta svg { color: var(--preto); }

.botao--destaque {
  background: var(--amarelo);
  color: var(--preto);
}
.botao--destaque:hover { background: #F0D800; }
.botao--destaque .botao__seta { background: var(--preto); }
.botao--destaque .botao__seta svg { color: var(--amarelo); }

.botao--contorno {
  background: transparent;
  color: var(--preto);
  border-color: rgba(0, 0, 0, 0.35);
}
.botao--contorno:hover { background: rgba(0, 0, 0, 0.08); }
.botao--contorno .botao__seta svg { color: var(--amarelo); }

.botao--secundario {
  background: var(--nuvem);
  color: var(--grafite);
  border-color: var(--linha);
  min-height: 3rem;
  font-size: 0.9375rem;
}
.botao--secundario:hover { background: #EDEDED; }
.botao--secundario .botao__seta { background: var(--grafite); }
.botao--secundario .botao__seta svg { color: var(--branco); }

/* ------------------------------------------------------------------ painéis */

/* Toda seção é uma faixa de ponta a ponta, como o topo e a campanha.
   A cor de cada faixa vem de um modificador; o conteúdo fica na coluna
   central pelo mesmo recuo das outras faixas. */
.painel {
  padding: 3rem var(--centro) 3.25rem;
}
.painel:focus { outline: none; }

.painel--branco { background: var(--branco); }
.painel--cinza  { background: var(--fundo); }

.painel--escuro {
  background: var(--grafite);
  color: var(--branco);
}
.painel--escuro :focus-visible { outline-color: var(--amarelo); }


.painel__titulo,


.painel__titulo { margin-bottom: 1.25rem; }

.painel__intro {
  margin-top: -0.375rem;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  color: var(--grafite-2);
  max-width: 34rem;
}

/* ---------------------------------------------------------- pontos de coleta */

.cartao {
  background: var(--fundo);
  border: 1px solid transparent;
  border-radius: var(--raio-cartao);
  padding: 1.125rem;
}
.cartao + .cartao { margin-top: 0.75rem; }

.ponto__logo {
  max-height: 3.5rem;
  width: auto;
  max-width: 11rem;
  margin-bottom: 0.75rem;
}

.ponto__nome { font-size: 1.125rem; }
.ponto__nome a { text-decoration: none; }
.ponto__nome a:hover { text-decoration: underline; }

.ponto__horario {
  margin-top: 0.3125rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--grafite);
}

.unidades {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.unidade {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 0.875rem;
  padding: 0.875rem;
}

.unidade__bairro {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--grafite);
}

.unidade__endereco {
  margin-top: 0.125rem;
  font-size: 0.9375rem;
  color: var(--grafite-2);
}

.unidade__mapa {
  margin-top: 0.75rem;
  min-height: 2.625rem;
  font-size: 0.875rem;
  background: var(--nuvem);
}

/* lista de endereços que abre e fecha, para cartões com muitas lojas */
.unidades__caixa { margin-top: 1rem; }

.unidades__resumo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--grafite);
  cursor: pointer;
  padding: 0.75rem 0.875rem;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 0.875rem;
  list-style: none;
}

.unidades__resumo::-webkit-details-marker { display: none; }

.unidades__resumo::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.16s ease;
}

.unidades__caixa[open] .unidades__resumo::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.unidades__caixa[open] .unidades__resumo {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.unidades__caixa .unidades { margin-top: 0.625rem; }

.detalhes { margin-top: 1.25rem; }
.detalhes__item + .detalhes__item { margin-top: 0.875rem; }

.detalhes__rotulo { font-weight: 700; font-size: 0.9375rem; }

.detalhes__texto { font-size: 0.9375rem; color: var(--grafite-2); }

.itens {
  margin: 0.375rem 0 0;
  padding-left: 1.125rem;
  font-size: 0.9375rem;
  color: var(--grafite-2);
}
.itens li + li { margin-top: 0.25rem; }

.espera {
  background: var(--nuvem);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-cartao);
  padding: 1.125rem;
  font-size: 0.9375rem;
  color: var(--grafite-2);
}

.acoes-secundarias { margin-top: 1rem; display: grid; gap: 0.625rem; }

/* ----------------------------------------------------------------- projetos */

.grupo + .grupo { margin-top: 1.75rem; }

.grupo__titulo {
  font-size: 0.875rem;
  color: var(--grafite);
  margin-bottom: 0.75rem;
  padding-bottom: 0.4375rem;
  border-bottom: 2px solid var(--grafite);
}

.projeto + .projeto { margin-top: 0.75rem; }

/* Todos os projetos são amarelos.
   Ativo: amarelo cheio, texto preto (o inverso do antigo cartão preto).
   Em pausa: amarelo claro. O fundo fica mais fraco, mas o texto continua
   preto e com contraste total; usar opacity no cartão inteiro apagaria
   também o texto e o botão, e ficaria difícil de ler. */
.projeto {
  background: var(--amarelo);
  border-color: var(--amarelo-escuro);
  color: var(--preto);
}

/* Em pausa: amarelo da marca misturado com branco na proporção --tom,
   que o script define para cada cartão (60% no primeiro, 18% no último).
   Só o fundo clareia; o texto segue preto, com contraste total. */
.projeto--pausa {
  background: #FFF6A8;          /* navegador antigo, sem color-mix */
  border-color: #F2E47A;
  background: color-mix(in srgb, var(--amarelo) var(--tom, 35%), var(--branco));
  border-color: color-mix(in srgb, var(--amarelo-escuro) var(--tom, 35%), var(--branco));
}

.projeto__nome { font-size: 1.1875rem; color: var(--preto); }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0.625rem;
  white-space: nowrap;
}

.selo::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.selo--ativo { color: var(--preto); }
.selo--pausa { color: #5C5400; }

.projeto__descricao {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  color: #2A2600;
}

.projeto__pendente {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  color: #5C5400;
}

/* botão do Instagram: preto no ativo, contornado nos pausados */
.projeto__link {
  margin-top: 1rem;
  background: var(--preto);
  color: var(--amarelo);
  border-color: var(--preto);
}
.projeto__link:hover { background: var(--grafite-2); }
.projeto__link .botao__seta { background: var(--amarelo); }
.projeto__link .botao__seta svg { color: var(--preto); }

.projeto--pausa .projeto__link {
  background: transparent;
  color: var(--preto);
  border-color: rgba(0, 0, 0, 0.3);
}
.projeto--pausa .projeto__link:hover { background: rgba(0, 0, 0, 0.06); }
.projeto--pausa .projeto__link .botao__seta { background: var(--preto); }
.projeto--pausa .projeto__link .botao__seta svg { color: var(--amarelo); }

/* -------------------------------------------------------------------- links */

.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.links .botao {
  background: var(--grafite);
  color: var(--branco);
}
.links .botao:hover { background: var(--grafite-2); }
.links .botao__seta { background: var(--amarelo); }
.links .botao__seta svg { color: var(--preto); }

/* ------------------------------------------------------------------- rodapé */

.rodape {
  background: var(--preto);
  color: #8E8E8E;
  text-align: center;
  padding:
    2.5rem var(--centro) calc(2.5rem + env(safe-area-inset-bottom));
  font-size: 0.8125rem;
}

.rodape__marca { width: 2.5rem; margin: 0 auto 1rem; }

.rodape__frase {
  color: var(--branco);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.875rem;
}

.rodape__cnpj { margin-top: 0.25rem; }

/* -------------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal__fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }

.modal__caixa {
  position: relative;
  width: 100%;
  max-width: var(--largura);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--branco);
  border-radius: var(--raio-bloco) var(--raio-bloco) 0 0;
  padding: 1.75rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom));
  animation: sobe 0.22s ease-out;
}

@keyframes sobe {
  from { transform: translateY(1.5rem); }
  to   { transform: translateY(0); }
}

.modal__fechar {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--nuvem);
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--grafite);
  cursor: pointer;
}
.modal__fechar:hover { background: #E8E8E8; }

.modal__caixa .etiqueta { background: var(--nuvem); }

.modal__titulo { font-size: 1.5rem; padding-right: 3rem; }

.modal__texto {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--grafite-2);
}

.dados {
  margin: 1.25rem 0 1.125rem;
  padding: 1rem;
  background: var(--nuvem);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
}

.dados__rotulo { font-size: 0.75rem; font-weight: 700; color: var(--cinza); }
.dados__rotulo + .dados__valor { margin-top: 0.125rem; }
.dados__valor + .dados__rotulo { margin-top: 0.75rem; }

.dados__valor {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--grafite);
  overflow-wrap: anywhere;
}

.dados__valor--pendente {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--grafite-2);
}

.chave__rotulo {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cinza);
  margin-bottom: 0.3125rem;
}

.chave {
  width: 100%;
  font-family: var(--fonte);
  font-size: 1rem;
  font-weight: 700;
  color: var(--grafite);
  padding: 0.875rem 1rem;
  background: var(--branco);
  border: 2px solid var(--grafite);
  border-radius: 999px;
  text-overflow: ellipsis;
}

.chave__ajuda {
  margin: 0.5rem 0 1rem;
  font-size: 0.8125rem;
  color: var(--cinza);
}

.copia-status {
  min-height: 1.25rem;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #146B2E;
  text-align: center;
}

.qr { margin: 1.25rem 0 0; text-align: center; }

.qr img {
  width: 100%;
  max-width: 15rem;
  margin: 0 auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
}

.qr__legenda { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--cinza); }

/* -------------------------------------------------------------- formulários */

.participe__aviso {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--cinza);
}

.painel--escuro .participe__aviso { color: #A8A8A8; }

/* no fundo grafite, o botão preto sumiria: vira contorno branco */
.painel--escuro .botao--principal {
  background: transparent;
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.4);
}
.painel--escuro .botao--principal:hover { background: rgba(255, 255, 255, 0.08); }
.painel--escuro .botao--principal .botao__seta { background: var(--amarelo); }
.painel--escuro .botao--principal .botao__seta svg { color: var(--preto); }

.formulario { margin-top: 1.25rem; }

.campo + .campo { margin-top: 1rem; }

.campo__rotulo {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.3125rem;
}

.campo__opcional { font-weight: 400; color: var(--cinza); }

.campo__ajuda {
  font-size: 0.8125rem;
  color: var(--cinza);
  margin-bottom: 0.375rem;
}

.campo__entrada {
  width: 100%;
  font-family: var(--fonte);
  font-size: 1rem;
  font-weight: 500;
  color: var(--grafite);
  background: var(--branco);
  padding: 0.8125rem 1rem;
  border: 2px solid var(--linha);
  border-radius: var(--raio-cartao);
  resize: vertical;
}

.campo__entrada:focus { border-color: var(--grafite); }

.campo__entrada--erro { border-color: #B3261E; }

.campo__erro {
  margin-top: 0.3125rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #B3261E;
}

.formulario .botao { margin-top: 1.25rem; }

.formulario__status {
  min-height: 1.25rem;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #B3261E;
  text-align: center;
}

.formulario__status--ok { color: #146B2E; }

/* -------------------------------------------------------- aviso para a equipe */

.aviso-equipe {
  background: #2B2300;
  color: var(--amarelo);
  padding: 1rem;
  font-size: 0.875rem;
  border-bottom: 3px solid var(--amarelo);
}

.aviso-equipe__titulo { font-size: 0.9375rem; font-weight: 800; letter-spacing: 0; }

.aviso-equipe__lista {
  margin: 0.5rem 0 0;
  padding-left: 1.125rem;
  color: #F2E6A8;
}
.aviso-equipe__lista li + li { margin-top: 0.25rem; }

.aviso-equipe__rodape { margin-top: 0.625rem; font-size: 0.75rem; color: #B9A96A; }

.aviso-equipe code {
  background: rgba(255, 228, 0, 0.14);
  padding: 0.0625rem 0.25rem;
  border-radius: 3px;
}

/* --------------------------------------------------------------- tela maior */

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
  .painel { padding-top: 4rem; padding-bottom: 4.25rem; }
  .campanha { padding-top: 3.5rem; padding-bottom: 4rem; }
  .modal { align-items: center; padding: var(--gutter); }
  .modal__caixa { border-radius: var(--raio-bloco); padding: 2rem 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}