/* -----------------------------------------------------------------------------
   Estilos da área pública — Design System In Move.

   CSS próprio, sem framework e sem recurso externo. Fontes do sistema: nenhuma
   requisição sai do domínio, o texto aparece imediatamente e nenhum dado do
   visitante chega a um terceiro.

   Os tokens abaixo vêm de identidade/in-move-brand-system/tokens.css e estão em
   três camadas:

     1. PRIMITIVOS     fixos. Nunca vêm do banco.
     2. CONFIGURÁVEIS  --brand-primary/-secondary/-accent. /brand.css (site) e
                       /eventos/<slug>/brand.css (evento) sobrescrevem, nessa
                       ordem, pela cascata.
     3. SEMÂNTICOS     o que os componentes consomem.

   Regra: componente consome a camada 3. Hexadecimal literal em regra de
   componente é erro, com exatamente duas exceções, ambas comentadas onde estão
   — a placa do logo e os fallbacks de color-mix().

   Contrastes medidos (WCAG 2.2) estão em docs/decisions.md. Os dois que mais
   importam: lima e rosa NUNCA carregam texto sobre fundo claro (1,52:1 e
   2,87:1); ambos são decorativos.
----------------------------------------------------------------------------- */

:root {
  /* ---- 1. PRIMITIVOS -----------------------------------------------------
     Da rampa do design system, só os degraus efetivamente consumidos. A rampa
     completa 50–950 está em identidade/in-move-brand-system/tokens.css, que é
     a fonte canônica: declarar 57 cores para usar 17 seria ruído, e token que
     ninguém consome envelhece sem que ninguém perceba.

     A regra vale para RAMPA, não para ESCALA — e a diferença é intencional.
     Uma rampa de cor é um catálogo: dá para levar 17 dos 57 degraus sem que
     falte nada. Uma escala de espaçamento, peso ou raio é ordinal: `--espaco-6`
     sem consumidor hoje continua declarado porque tirá-lo abriria um buraco
     entre o 5 e o 8, e o próximo a precisar de 1.5rem inventaria um valor solto
     em vez de usar o degrau que existia. Nove tokens de escala estão nessa
     situação; é custo aceito, e é a razão de eles não aparecerem como sujeira.

     Outros valores da rampa aparecem como literal em dois lugares, comentados
     onde estão: os fallbacks de color-mix() (roxo-800 #621b76 e roxo-900
     #491356) e o tingimento das sombras (roxo-950 #2c0b35). */
  --roxo-50: #fbf5fc;
  --roxo-700: #7c2495;   /* Roxo In Move */

  --lima-300: #d9e670;
  --lima-400: #c6dc5a;   /* Lima Movimento */

  --rosa-500: #dc6ede;   /* Rosa Energia */

  --neutro-0: #ffffff;
  --neutro-200: #eee7f0;
  --neutro-300: #ded3e1;
  --neutro-500: #8c7a91;
  --neutro-600: #6b5b70;
  --neutro-950: #140f16; /* Tinta */

  --sucesso-50: #ecfdf3;  --sucesso-200: #abefc6;  --sucesso-700: #067647;
  --alerta-50: #fffaeb;   --alerta-200: #fedf89;   --alerta-700: #b54708;
  --erro-50: #fef3f2;     --erro-200: #fecdca;     --erro-700: #b42318;

  /* ---- 2. CONFIGURÁVEIS --------------------------------------------------
     As únicas três que o painel pode trocar. Quem não configurar nada já vê a
     marca, porque o padrão aqui é a paleta In Move.

     Atenção ao homônimo: --brand-accent é o ROSA decorativo deste projeto, e
     não o "accent" lima do design system, que aqui é --brand-secondary. */
  --brand-primary: var(--roxo-700);
  --brand-secondary: var(--lima-400);
  --brand-accent: var(--rosa-500);

  /* ---- 3. SEMÂNTICOS -----------------------------------------------------
     O que os componentes consomem. */
  --cor-texto: var(--neutro-950);
  --cor-texto-suave: var(--neutro-600);
  --cor-fundo: var(--roxo-50);
  --cor-superficie: var(--neutro-0);
  --cor-borda: var(--neutro-200);
  /* Divisória decorativa. Não serve para delimitar controle: 1,45:1. */
  --cor-borda-media: var(--neutro-300);
  /* Contorno de controle: 3,96:1 sobre branco, acima do mínimo de 3:1. */
  --cor-borda-forte: var(--neutro-500);

  /* Texto sobre as superfícies de marca. */
  --cor-sobre-primaria: var(--neutro-0);   /* 8,26:1 sobre o roxo */
  --cor-sobre-acento: var(--neutro-950);   /* 12,42:1 sobre a lima */

  /* Foco: tinta por padrão (18,92:1 sobre branco). Redefinido para lima dentro
     das faixas roxas, onde lima mede 5,42:1 e a tinta desapareceria. Lima sobre
     branco daria 1,52:1 e reprovaria o mínimo de 3:1 do SC 1.4.11 — por isso
     não é o padrão, apesar de o pacote sugerir. */
  --cor-foco: var(--neutro-950);

  --cor-erro: var(--erro-700);
  --cor-erro-fundo: var(--erro-50);
  --cor-erro-borda: var(--erro-200);
  --cor-sucesso: var(--sucesso-700);
  --cor-sucesso-fundo: var(--sucesso-50);
  --cor-sucesso-borda: var(--sucesso-200);
  --cor-alerta: var(--alerta-700);
  --cor-alerta-fundo: var(--alerta-50);
  --cor-alerta-borda: var(--alerta-200);

  /* ---- Espaçamento -------------------------------------------------------
     Escala fechada do design system. Não existem os degraus 7, 9, 11, 13–15,
     17–19 e 21–23: não inventar. Os três nomes antigos viram aliases. */
  --espaco-1: .25rem;   --espaco-2: .5rem;    --espaco-3: .75rem;
  --espaco-4: 1rem;     --espaco-5: 1.25rem;  --espaco-6: 1.5rem;
  --espaco-8: 2rem;     --espaco-10: 2.5rem;  --espaco-12: 3rem;
  --espaco-16: 4rem;    --espaco-20: 5rem;    --espaco-24: 6rem;

  --espaco-md: var(--espaco-4);
  --espaco-lg: var(--espaco-8);
  --espaco-xl: var(--espaco-12);

  /* ---- Raio --------------------------------------------------------------
     --raio continua existindo como alias para não reescrever as regras que já
     o usam; o valor sobe de 10px para 20px. */
  --raio-sm: .5rem;
  --raio-md: .875rem;
  --raio-lg: 1.25rem;
  --raio-xl: 1.75rem;
  --raio-pill: 999px;
  --raio: var(--raio-lg);

  /* ---- Sombra ------------------------------------------------------------
     Ameixa (#2c0b35), nunca preto puro. */
  --sombra-sm: 0 1px 2px rgba(44, 11, 53, .08);
  --sombra: var(--sombra-sm);

  /* ---- Tipografia --------------------------------------------------------
     O design system pede Inter. Sem CDN e sem pipeline de assets, a fonte do
     sistema fica — e a identidade tipográfica é carregada pela ESCALA e pelo
     tracking negativo dos títulos, que é onde o pacote a coloca. A decisão
     está registrada em docs/decisions.md; adotar Inter auto-hospedada depende
     de aprovação. */
  --fonte: system-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;

  --fs-12: .75rem;    --fs-14: .875rem;   --fs-15: .9375rem;
  --fs-16: 1rem;      --fs-18: 1.125rem;  --fs-20: 1.25rem;
  --fs-24: 1.5rem;

  --lh-16: 1rem;      --lh-20: 1.25rem;   --lh-24: 1.5rem;
  --lh-28: 1.75rem;   --lh-32: 2rem;

  /* Peso máximo 700: o design system pede 800 em display, mas várias pilhas de
     sistema não têm 800 e o navegador sintetiza, produzindo desenho sujo. O
     tamanho e o tracking compensam. Nunca abaixo de 400. */
  --peso-regular: 400;  --peso-medio: 500;
  --peso-semi: 600;     --peso-forte: 700;

  /* ---- Movimento e layout ------------------------------------------------ */
  --mov-rapido: 120ms;
  --mov-base: 180ms;
  --ease-padrao: cubic-bezier(.2, 0, 0, 1);

  --altura-controle: 3rem;   /* 48px: alvo de toque confortável */
  --alvo-toque: 2.75rem;     /* 44px: mínimo do WCAG 2.5.8 */
  --largura-max: 64rem;

  /* Exceção 1 de 2 ao "sem hexadecimal literal": esta cor precisa casar com os
     pixels dentro do JPEG do logo, portanto NÃO pode seguir o painel. */
  --cor-superficie-logo: #7c2495;
}

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

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  /* O rodapé encosta no fim da janela mesmo com pouco conteúdo. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

.container {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1rem;
}


/* -------------------------------------------------------------------------
   Acessibilidade
   ------------------------------------------------------------------------- */

/* Atalho para teclado: invisível até receber foco. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  padding: .75rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* Foco sempre visível, inclusive sobre fundo colorido.

   A cor vem de --cor-foco, e não da cor de marca: a primária é configurável
   pelo painel, e um anel de foco que herda uma cor clara desaparece. O padrão é
   tinta; as faixas roxas redefinem para lima logo abaixo. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sobre superfície roxa, tinta some e lima brilha: 5,42:1 sobre o roxo. */
.hero,
.cabecalho {
  --cor-foco: var(--lima-400);
}

@media (prefers-reduced-motion: reduce) {
  /* Zera também os tokens, para cobrir quem os consome diretamente. */
  :root { --mov-rapido: 0ms; --mov-base: 0ms; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* -------------------------------------------------------------------------
   Cabeçalho do evento
   ------------------------------------------------------------------------- */

.cabecalho {
  background: var(--brand-primary);
  color: var(--cor-sobre-primaria);
  padding: var(--espaco-8) 0 var(--espaco-10);
}
/* `:not(.botao)` e o ponto importante: um botao carrega a propria cor de texto,
   e a regra da faixa nao pode sobrescreve-la. Sem isso, `.cabecalho a` (0,1,1)
   vence `.botao--acento` (0,1,0) e pinta de branco o texto do botao lima -
   medido em 1,52:1, exatamente a combinacao que a paleta proibe. */
.cabecalho a:not(.botao) { color: var(--cor-sobre-primaria); }
.cabecalho__logo {
  max-height: 64px;
  width: auto;
  margin-bottom: 1rem;
  display: block;
}
.cabecalho__titulo {
  margin: 0 0 .25rem;
  font-size: clamp(2.25rem, 6vw, 3rem);
  line-height: 1.16;
  letter-spacing: -.03em;
}

/* Resumo e ação na primeira dobra do evento. */
.cabecalho__resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espaco-2);
  margin: var(--espaco-4) 0 var(--espaco-5);
  font-size: var(--fs-18);
}
.cabecalho__valor { font-weight: var(--peso-forte); }
.cabecalho__separador { opacity: .6; }

/* Camisetas agrupadas por modelagem. */
.camisetas {
  display: grid;
  gap: var(--espaco-4);
  margin-top: var(--espaco-4);
}
@media (min-width: 30rem) {
  .camisetas { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.camisetas__modelagem {
  margin: 0 0 var(--espaco-2);
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  font-weight: var(--peso-forte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.camisetas__tamanhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.camisetas__tamanhos li {
  padding: .25rem .7rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pill);
  font-size: var(--fs-14);
  font-weight: var(--peso-semi);
}

.capa {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   Cartões e blocos
   ------------------------------------------------------------------------- */

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin: 1.5rem 0;
}
.cartao > :first-child { margin-top: 0; }
.cartao > :last-child { margin-bottom: 0; }

/* O tracking negativo em título é o que carrega a identidade tipográfica do
   design system sem a fonte proprietária. Ver docs/decisions.md. */
h1, h2, h3 { line-height: 1.25; letter-spacing: -.02em; }
h1 { letter-spacing: -.03em; line-height: 1.16; }
h2 { font-size: var(--fs-24); line-height: var(--lh-32); margin: 0 0 .75rem; }
h3 { font-size: var(--fs-20); line-height: var(--lh-28); margin: 1.5rem 0 .5rem; }

.texto-suave { color: var(--cor-texto-suave); }
.texto-pequeno { font-size: var(--fs-14); line-height: var(--lh-20); }


/* Descrição do evento: texto simples, quebras de linha preservadas.
   Nunca interpretado como HTML. */
.descricao { white-space: pre-line; }

/* -------------------------------------------------------------------------
   Lista de dados (data/local/valor)
   ------------------------------------------------------------------------- */

/* `dt` e `dd` sao filhos diretos do `dl`, como o HTML pede: nenhum `div` no
   meio agrupando a "linha". A linha e desenhada pela grade - uma coluna para
   o rotulo, outra para o valor - e a borda que separa as linhas fica nas duas
   celulas, sem espaco entre as colunas, para que o traco seja continuo. Em
   tela estreita as duas colunas viram uma, com o valor abaixo do rotulo, que e
   o que a versao anterior fazia ao quebrar a linha. */
.dados {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.dados__rotulo {
  padding: .6rem 0 0;
  color: var(--cor-texto-suave);
  font-weight: var(--peso-semi);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
}
.dados__valor {
  margin: 0;
  padding: .25rem 0 .6rem;
  border-bottom: 1px solid var(--cor-borda-media);
}
.dados__valor:last-child { border-bottom: 0; }

@media (min-width: 30rem) {
  .dados { grid-template-columns: 9rem minmax(0, 1fr); }
  .dados__rotulo {
    padding: .6rem 1rem .6rem 0;
    border-bottom: 1px solid var(--cor-borda-media);
  }
  .dados__valor { padding: .6rem 0; }
  /* Ultimo par rotulo/valor: sem traco embaixo, como antes. */
  .dados > :nth-last-child(-n + 2) { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
   Etiquetas de situação
   ------------------------------------------------------------------------- */

.etiqueta {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: var(--raio-pill);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  font-weight: var(--peso-forte);
  border: 1px solid;
}
/* A cor nunca é o único indicador: o texto da etiqueta diz a situação. */
.etiqueta--pendente { color: var(--cor-alerta); background: var(--cor-alerta-fundo); border-color: currentColor; }
.etiqueta--confirmada { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border-color: currentColor; }
.etiqueta--cancelada { color: var(--cor-erro); background: var(--cor-erro-fundo); border-color: currentColor; }

/* -------------------------------------------------------------------------
   Formulário
   ------------------------------------------------------------------------- */

.campo { margin-bottom: 1.25rem; }

.campo label,
.campo__legenda {
  display: block;
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  font-weight: var(--peso-semi);
  margin-bottom: .35rem;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
/* `date` faltava: o campo de nascimento renderizava com o estilo nativo do
   navegador, com altura, borda e raio diferentes dos demais. */
.campo input[type="date"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--altura-controle);
  /* 16px evita que o Safari no iPhone dê zoom ao focar o campo. */
  font-size: var(--fs-16);
  font-family: inherit;
  padding: .7rem .8rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: inherit;
  transition: border-color var(--mov-base) var(--ease-padrao);
}

.campo :is(input, select, textarea)::placeholder { color: var(--cor-texto-suave); }
.campo :is(input, select, textarea):focus-visible { border-color: var(--brand-primary); }

/* O Django 5.2 emite aria-invalid="true" no campo com erro. Aproveitar isso
   dispensa uma classe própria e mantém marcação e estilo em sincronia. */
.campo [aria-invalid="true"] { border-color: var(--cor-erro); }

.campo__ajuda {
  display: block;
  margin-top: .3rem;
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  color: var(--cor-texto-suave);
}

.campo__erro {
  margin: .4rem 0 0;
  padding: .5rem .7rem;
  color: var(--cor-erro);
  background: var(--cor-erro-fundo);
  border-left: 3px solid var(--cor-erro);
  border-radius: var(--raio-sm);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  font-weight: var(--peso-semi);
}

.campo--invalido input { border-color: var(--cor-erro); }

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}

/* Opções de camiseta: alvo de toque grande o suficiente para o dedo. */
.opcoes { display: grid; gap: var(--espaco-2); }
.opcao {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: var(--altura-controle);
  padding: .6rem .8rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  cursor: pointer;
  transition:
    border-color var(--mov-base) var(--ease-padrao),
    background-color var(--mov-base) var(--ease-padrao);
}
.opcao:hover { border-color: var(--brand-primary); }
.opcao input { width: 20px; height: 20px; margin: 0; flex: none; }

/* Cartão tingido, e não roxo sólido com texto branco: o radio nativo continua
   visível e o contraste do texto não depende da cor que veio do banco. O estado
   também não é só cor — a borda dobra de espessura. */
.opcao:has(input:checked) {
  border-color: var(--brand-primary);
  box-shadow: inset 0 0 0 2px var(--brand-primary);
  background: #faf6fb;
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}

/* -------------------------------------------------------------------------
   Botões
   ------------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--altura-controle);
  min-width: var(--alvo-toque);
  padding: .75rem 1.5rem;
  font-size: var(--fs-15);
  line-height: var(--lh-20);
  font-family: inherit;
  font-weight: var(--peso-forte);
  border-radius: var(--raio-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--mov-base) var(--ease-padrao),
    border-color var(--mov-base) var(--ease-padrao),
    color var(--mov-base) var(--ease-padrao),
    transform var(--mov-rapido) var(--ease-padrao);
}
.botao:active:not([disabled]) { transform: translateY(1px); }

.botao--principal { background: var(--brand-primary); color: var(--cor-sobre-primaria); }

/* Hover e active ESCURECEM, na direção do design system (roxo 700 → 800 → 900).
   O `filter: brightness(1.08)` anterior clareava, e sobre uma cor vinda do
   banco o resultado era imprevisível.

   O par de declarações é deliberado: a primeira é o literal de fallback para
   navegador sem color-mix(), a segunda deriva da cor configurada. É uma das
   duas exceções autorizadas ao "sem hexadecimal literal". */
.botao--principal:hover:not([disabled]) {
  background: #621b76;
  background: color-mix(in srgb, var(--brand-primary) 79%, #000);
}
.botao--principal:active:not([disabled]) {
  background: #491356;
  background: color-mix(in srgb, var(--brand-primary) 58%, #000);
}

.botao--secundario {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
}
.botao--secundario:hover:not([disabled]) { border-color: var(--brand-primary); }

/* Ação complementar. Tinta sobre lima = 12,42:1. Nunca destrutiva, nunca como
   segunda ação primária na mesma seção. */
.botao--acento { background: var(--brand-secondary); color: var(--cor-sobre-acento); }
.botao--acento:hover:not([disabled]) { background: var(--lima-300); }

.botao--largo { width: 100%; }
.botao[disabled], .botao[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* -------------------------------------------------------------------------
   Pagamento
   ------------------------------------------------------------------------- */

.pix__qr {
  display: block;
  width: 220px;
  height: 220px;
  margin: 0 auto 1rem;
  /* Branco literal: o QR precisa de fundo claro para ser lido pela câmera,
     independentemente de qualquer tema. */
  background: #fff;
  padding: 8px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
}

.pix__codigo {
  display: block;
  width: 100%;
  font-family: var(--fonte-mono);
  font-size: var(--fs-14);
  line-height: 1.5;
  word-break: break-all;
  padding: .8rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo);
  margin: 0 0 .75rem;
  /* Texto longo não empurra o layout no celular. */
  max-height: 9rem;
  overflow-y: auto;
}

.referencia {
  font-family: var(--fonte-mono);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand-primary);
}

/* As variantes se distinguem por forma, e não apenas por cor: cada uma desenha
   uma marca própria com borda, na mesma técnica da seta do FAQ. Antes as três
   eram idênticas exceto pelo fundo, o que não serve a quem não distingue as
   cores. Nenhum arquivo de ícone, nenhuma biblioteca. */
.aviso {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--espaco-3);
  padding: .9rem 1rem;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--raio-md);
  margin: 1rem 0;
}
/* Todo filho real vai para a segunda coluna. Sem isto, um aviso com dois
   parágrafos jogaria o segundo para baixo da marca, na primeira coluna. */
.aviso > * { grid-column: 2; }

/* Três formas distintas, desenhadas só com borda — a mesma técnica da seta do
   FAQ. Nenhum arquivo de ícone, nenhuma biblioteca, e a distinção sobrevive em
   escala de cinza. */
.aviso::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-top: .45rem;
}

/* Sucesso: traço em L rotacionado — um "certo". */
.aviso--sucesso::before {
  width: .8rem;
  height: .45rem;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

/* Atenção: triângulo. */
.aviso--atencao::before {
  width: 0;
  height: 0;
  border-left: .45rem solid transparent;
  border-right: .45rem solid transparent;
  border-bottom: .8rem solid currentColor;
}

/* Erro: círculo cheio. */
.aviso--erro::before {
  width: .8rem;
  height: .8rem;
  border-radius: var(--raio-pill);
  background: currentColor;
}

.aviso--atencao {
  color: var(--cor-alerta);
  background: var(--cor-alerta-fundo);
  border-color: var(--cor-alerta-borda);
  border-left-color: var(--cor-alerta);
}
.aviso--erro {
  color: var(--cor-erro);
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro-borda);
  border-left-color: var(--cor-erro);
}
.aviso--sucesso {
  color: var(--cor-sucesso);
  background: var(--cor-sucesso-fundo);
  border-color: var(--cor-sucesso-borda);
  border-left-color: var(--cor-sucesso);
}
.aviso > :first-child { margin-top: 0; }
.aviso > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Rodapé
   ------------------------------------------------------------------------- */

.rodape {
  flex: none;
  margin-top: 3rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
}
.rodape__texto { margin: .25rem 0; }

/* -------------------------------------------------------------------------
   Impressão: a página da inscrição costuma ser salva em PDF.
   ------------------------------------------------------------------------- */
@media print {
  body { background: #fff; }
  .cabecalho { background: #fff; color: #000; }
  .botao, .skip-link { display: none; }
  .cartao { box-shadow: none; break-inside: avoid; }
}

/* Texto lido por leitor de tela, invisivel na tela. Usado para complementar
   marcacoes que dependeriam so de simbolo (o asterisco de campo obrigatorio). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Paginas de erro e de indisponibilidade: mesmo cartao, sem cabecalho de marca. */
.pagina-simples { padding: 3rem 0; }
.pagina-simples h1 { font-size: 1.6rem; margin-top: 0; }

/* =========================================================================
   Site institucional
   =========================================================================
   Mobile-first: as regras abaixo valem no celular, e os `min-width` acrescentam
   o que muda em telas maiores. Nenhum framework, nenhuma fonte remota.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Topo e navegacao
   -------------------------------------------------------------------------
   Sem menu sanfonado: os cinco itens quebram em duas linhas no celular e
   ficam em uma no desktop. Nenhum JavaScript participa da navegacao. */

.topo {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.topo__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  max-width: var(--largura-max);
}

.topo__marca {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
  color: inherit;
}
.topo__logo { max-height: 40px; width: auto; display: block; }
.topo__nome {
  font-weight: var(--peso-forte);
  font-size: var(--fs-18);
  letter-spacing: -.02em;
  color: var(--brand-primary);
}

/* Placa para o logotipo.

   Os arquivos da marca são JPEG com o roxo embutido e SEM canal alfa — não há
   versão transparente. Aplicá-los sobre o topo branco mostraria um retângulo
   roxo recortado. A placa reproduz a mesma superfície do arquivo, e o logo
   encaixa nela sem emenda.

   O roxo é literal, e não `var(--brand-primary)`: se alguém trocar a cor
   primária no painel, a placa deixaria de casar com os pixels do arquivo e o
   retângulo apareceria. É uma das duas exceções autorizadas ao "sem
   hexadecimal literal". Ver docs/decisions.md. */
.topo__marca--placa {
  background: var(--cor-superficie-logo);
  border-radius: var(--raio-md);
  padding: var(--espaco-2) var(--espaco-3);
}
/* 160px é a largura mínima declarada para o logo horizontal em interface. Com
   1024x405 de origem, mandar na altura daria ~101px de largura, abaixo do
   mínimo — por isso a largura comanda. */
.topo__marca--placa .topo__logo { min-width: 160px; max-height: 40px; height: auto; }

.menu__lista {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0 .15rem;
}
.menu__lista a {
  display: inline-flex;
  align-items: center;
  /* 48px de altura: alvo de toque confortavel no celular. */
  min-height: var(--altura-controle);
  padding: 0 .6rem;
  border-radius: var(--raio-md);
  text-decoration: none;
  color: inherit;
  font-weight: var(--peso-semi);
  transition: background-color var(--mov-rapido) var(--ease-padrao);
}
.menu__lista a:hover { background: var(--cor-fundo); }

/* O item atual e marcado por cor E por uma barra: cor sozinha nao serve a
   quem nao a distingue. `aria-current` cuida do leitor de tela. */
.menu__lista a[aria-current="page"] {
  color: var(--brand-primary);
  box-shadow: inset 0 -3px 0 var(--brand-primary);
}

/* -------------------------------------------------------------------------
   Hero da home
   ------------------------------------------------------------------------- */

.hero {
  background: var(--brand-primary);
  color: var(--cor-sobre-primaria);
  padding: var(--espaco-xl) 0;
}
.hero a:not(.botao) { color: var(--cor-sobre-primaria); }

.hero__interno {
  display: grid;
  gap: var(--espaco-lg);
  max-width: var(--largura-max);
}

.hero__titulo {
  margin: 0 0 .75rem;
  font-size: clamp(2.25rem, 6vw, 3rem);
  line-height: 1.16;
  letter-spacing: -.03em;
}
.hero__apoio {
  margin: 0 0 1.5rem;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  opacity: .95;
  max-width: 38rem;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__imagem {
  width: 100%;
  height: auto;
  border-radius: var(--raio);
  display: block;
}

.hero--vazio { padding: var(--espaco-lg) 0; }

@media (min-width: 48rem) {
  .hero__interno { grid-template-columns: 3fr 2fr; align-items: center; }
}

/* Botao vazado, para o segundo CTA sobre o hero colorido. */
/* Só válido dentro de .hero e .cabecalho, onde o fundo é roxo. */
.botao--fantasma {
  background: transparent;
  color: var(--cor-sobre-primaria);
  border-color: rgba(255, 255, 255, .7);
}
.botao--fantasma:hover { background: rgba(255, 255, 255, .12); }

/* -------------------------------------------------------------------------
   Secoes e grade de cartoes
   ------------------------------------------------------------------------- */

.secao { margin: var(--espaco-xl) 0; }
.secao__titulo {
  font-size: 1.5rem;
  margin: 0 0 var(--espaco-md);
}

/* Detalhe decorativo da cor de destaque. Puramente ornamental: nenhuma
   informacao depende de ve-lo, e por isso a cor de destaque nao precisa
   alcancar contraste de texto. E o unico consumo de --brand-accent - sem ele,
   o campo "cor de destaque" no painel nao produziria efeito nenhum. */
.secao__titulo::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: .5rem;
  border-radius: var(--raio-pill);
  background: var(--brand-accent);
}

/* A barra lima é decorativa: nenhuma informação depende de vê-la, e por isso
   o contraste da lima sobre superfície clara não se aplica aqui. */
.secao--chamada {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--brand-secondary);
  border-radius: var(--raio);
  padding: var(--espaco-lg);
}

.grade {
  display: grid;
  gap: var(--espaco-4);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dentro da grade os cartoes nao acumulam a margem vertical do bloco solto. */
.grade .cartao { margin: 0; display: flex; flex-direction: column; }

.cartao__titulo { font-size: 1.15rem; margin: 0 0 .35rem; }
.cartao__titulo a { color: inherit; text-decoration: none; }
.cartao__titulo a:hover { text-decoration: underline; }

.cartao__meta {
  margin: 0 0 .5rem;
  color: var(--cor-texto-suave);
  font-size: .92rem;
}
.cartao__separador { margin: 0 .4rem; }

.cartao__resumo { margin: .5rem 0; }

.cartao__preco {
  font-weight: 700;
  color: var(--brand-primary);
}

/* O botao do cartao encosta na base, alinhando cartoes de alturas diferentes. */
.cartao--evento .botao,
.cartao--servico .botao { margin-top: auto; align-self: flex-start; }

/* -------------------------------------------------------------------------
   Sobre e contato
   ------------------------------------------------------------------------- */

.retrato {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  border-radius: var(--raio);
  margin: 0 0 var(--espaco-md);
}

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

/* -------------------------------------------------------------------------
   Rodape do site
   ------------------------------------------------------------------------- */

.rodape__interno {
  display: grid;
  gap: var(--espaco-lg);
  max-width: var(--largura-max);
}
@media (min-width: 48rem) {
  .rodape__interno { grid-template-columns: 2fr 1fr 1fr; }
}

.rodape__marca { margin: 0 0 .25rem; font-weight: var(--peso-forte); color: var(--cor-texto); }
.rodape__titulo {
  margin: 0 0 .5rem;
  font-size: var(--fs-12);
  line-height: var(--lh-16);
  font-weight: var(--peso-forte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cor-texto);
}
.rodape__lista { list-style: none; margin: 0; padding: 0; }
/* O espaçamento vertical importa: os links do rodapé têm ~18px de altura, e o
   WCAG 2.5.8 aceita alvo menor que 24px desde que um círculo de 24px centrado
   nele não alcance o alvo vizinho. Com .35rem o passo dava ~23,6px e ficava
   logo abaixo do limite; .5rem leva a ~26px. */
.rodape__lista li { margin-bottom: .5rem; }
.rodape__nota { margin-top: var(--espaco-lg); }

/* -------------------------------------------------------------------------
   Perguntas frequentes
   -------------------------------------------------------------------------
   Aqui o <details> serve: o conteudo fechado deve mesmo ficar escondido em
   qualquer largura, que e o comportamento nativo do elemento. Diferente do
   menu de navegacao, onde a barra precisava reaparecer no desktop. */

.faq {
  display: grid;
  gap: var(--espaco-2);
}

.faq__item {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: .25rem .9rem;
}

.faq__pergunta {
  display: flex;
  align-items: center;
  min-height: var(--altura-controle);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  padding-right: 1.5rem;
  position: relative;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::marker { content: ""; }

/* Seta desenhada com borda: nenhum arquivo de icone, nenhuma requisicao. */
.faq__pergunta::after {
  content: "";
  position: absolute;
  right: .25rem;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--cor-texto-suave);
  border-bottom: 2px solid var(--cor-texto-suave);
  transform: rotate(45deg) translateY(-25%);
}
.faq__item[open] .faq__pergunta::after { transform: rotate(-135deg) translateY(-25%); }

.faq__resposta {
  padding: 0 0 .9rem;
  color: var(--cor-texto-suave);
}

/* -------------------------------------------------------------------------
   Depoimentos
   ------------------------------------------------------------------------- */

.depoimento__texto {
  margin: 0 0 1rem;
  padding: 0;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  /* white-space preserva as quebras do texto original sem interpretar HTML. */
  white-space: pre-line;
}

.depoimento__autoria {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--cor-borda);
}
.depoimento__autoria p { margin: 0; }

.depoimento__foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.depoimento__nome { font-weight: 700; }

/* -------------------------------------------------------------------------
   Identificacao profissional
   ------------------------------------------------------------------------- */

.identificacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.5rem;
}

/* -------------------------------------------------------------------------
   Campos de formulario acrescentados pelo formulario de contato
   ------------------------------------------------------------------------- */

/* `select` e `textarea` NAO sao restilizados aqui: a regra unica de controle
   (procure por `.campo input[type="text"]`) ja cobre os tres tipos. Existia
   aqui um bloco que repetia largura, fonte, padding e borda com valores
   proprios - raio 8px e fundo `#fff` literal. Como a especificidade era a
   mesma e este bloco vem depois, ele vencia: o campo de texto do formulario
   de contato saia com canto de 14px e a caixa de mensagem logo abaixo com
   canto de 8px, na mesma tela. Duplicar a declaracao e o que criou a
   divergencia; remover a duplicata e o que a corrige. */
.campo textarea { resize: vertical; min-height: 6rem; }

/* Caixa de ciencia da politica: alvo grande, alinhado ao topo do texto. */
.campo > .opcao { align-items: flex-start; }
.campo > .opcao input[type="checkbox"] { margin-top: .8rem; }