/* -----------------------------------------------------------------------------
   Bianca Ramiro — camada de marca do site.

   Este arquivo e a CONCATENACAO do pacote de design aprovado, que esta em
   `handoff/`. Nao edite regra aqui: edite no pacote e concatene de novo, senao
   a proxima entrega do design sobrescreve a correcao sem ninguem perceber.

   A ordem abaixo e obrigatoria e nao e estetica: a fonte declara o @font-face,
   os primitivos definem a rampa, a camada semantica escolhe da rampa, os
   componentes consomem a semantica.

     1. handoff/fonts/fonts.css
     2. handoff/tokens/bianca-primitivos.css
     3. handoff/tokens/bianca-semantico.css
     4. handoff/bianca-componentes.css
     5. o bloco de base de handoff/bianca.css

   Concatenado, e nao cinco `@import`. Os dois funcionariam — o
   ManifestStaticFilesStorage reescreve `@import` no collectstatic —, mas cinco
   requisicoes em serie custam mais que um arquivo, e ha teste de performance
   no projeto medindo exatamente isso.

   Duas mudancas em relacao ao pacote, ambas deliberadas:

     - o caminho do woff2 vira `../fonts/`, porque este arquivo mora em
       `static/css/` e o pacote assume a fonte ao lado dele;
     - `--im-branco` e `--im-tinta` viram token na camada semantica. No pacote
       eles estavam literais dentro das regras de `.in-move`, o que quebraria a
       invariante que o proprio pacote declara: nenhum hexadecimal em regra de
       componente. Ver tests/test_paleta_canonica.py.

   A cascata que serve este arquivo esta em templates/base.html e continua:

     app.css  ->  movimento.css  ->  /brand.css  ->  {% block brand_css %}

   `/brand.css` vem do painel do Django e vence pela cascata: e por isso que
   `--marca` le `var(--brand-primary, ...)` e nao um valor fixo.
----------------------------------------------------------------------------- */

/* Archivo Variable — auto-hospedada, subconjunto latin.
   =============================================================================
   Um arquivo de ~90 KB, dois eixos: `wght` 100–900 e `wdth` 62–125%. É por isso
   que a família é uma só — o display não precisa de outro arquivo, precisa de
   outra LARGURA.

   Nada sai do domínio: sem CDN, sem Google Fonts. `font-display: swap` de
   propósito, para o texto aparecer imediatamente na fonte do sistema e trocar
   quando o arquivo chegar. Nenhuma tela depende de a fonte ter carregado.

   Licença OFL ao lado, em OFL-Archivo.txt.
   ========================================================================== */
@font-face {
  font-family: "Archivo Variable";
  src: url("../fonts/archivo-variable-latin.de2f1fe81758.woff2") format("woff2-variations"),
       url("../fonts/archivo-variable-latin.de2f1fe81758.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* Bianca Ramiro — CAMADA 1: PRIMITIVOS
   =============================================================================
   A rampa. Nenhum componente consome esta camada diretamente: ela existe para
   que a camada semântica tenha de onde escolher.

   Duas famílias de neutro, e a divisão é o coração do sistema:

     CARVÃO  neutros FRIOS   → a sombra, as superfícies
     AREIA   neutros QUENTES → a luz, o texto

   Isso não é capricho. As duas cores que a Bianca entregou como escuros
   (#0B0B0D e #1F1F23) são frias — puxam para o azul. O claro que ela entregou
   (#F4EFE6) é quente — puxa para o bege. É exatamente a montagem fotográfica
   das imagens dela: ambiente escuro e frio, luz de tungstênio quente. Manter as
   duas temperaturas separadas é o que faz o site parecer as fotos.
   ========================================================================== */

:root {
  /* ---- Carvão — neutros frios, as superfícies ---------------------------- */
  --carvao-950: #0b0b0d;   /* dado pela marca — o fundo */
  --carvao-900: #131318;
  --carvao-800: #1f1f23;   /* dado pela marca — cartão e superfície elevada */
  --carvao-700: #2b2b31;
  --carvao-600: #3a3a42;
  --carvao-500: #55555f;

  /* ---- Areia — neutros quentes, a luz e o texto -------------------------- */
  --areia-50:  #fbf9f5;
  --areia-100: #f4efe6;   /* dado pela marca — texto sobre escuro, seção clara */
  --areia-200: #e7e0d2;
  --areia-300: #d2c9b7;
  --areia-400: #b0a693;
  --areia-500: #877e6d;

  /* ---- Terracota — a cor da marca ----------------------------------------
     O 500 é o hexadecimal que ela mandou. Ela foi específica: usa o laranja
     "um pouco mais escuro, tipo um terracota" — então esta é a cor de marca, e
     a família Luz abaixo é o acento, não o contrário. */
  --terracota-50:  #fdf1ed;
  --terracota-100: #faddd4;
  --terracota-200: #f5baa9;
  --terracota-300: #ee8e76;
  --terracota-400: #e96c50;
  --terracota-500: #e35336;   /* dado pela marca */
  --terracota-600: #c43f24;
  --terracota-700: #9e301a;   /* o único terracota que carrega texto em claro */
  --terracota-800: #7a2515;
  --terracota-900: #591c11;

  /* ---- Luz — laranja e âmbar, a família do tungstênio --------------------
     Os dois valores da marca (#ff6a00 e #ffb000) são vizinhos na mesma rampa,
     então são uma família só e não duas cores soltas. É a luz das fotos: usada
     em fio, brilho, sobrancelha e o facho. Nunca em área grande. */
  --luz-100: #ffefc7;
  --luz-200: #ffdd8f;
  --luz-300: #ffc94d;
  --luz-400: #ffb000;   /* dado pela marca — âmbar */
  --luz-500: #ff9500;
  --luz-600: #ff6a00;   /* dado pela marca — laranja */
  --luz-700: #d14e00;
  --luz-800: #a03c00;

  /* ---- Funcionais --------------------------------------------------------
     Calibrados para superfície ESCURA, que é o padrão deste sistema.

     O problema que estes tokens resolvem: a marca é laranja e âmbar, que é
     exatamente a cor universal de "atenção". Se o aviso fosse âmbar, ninguém
     distinguiria alerta de marca. Por isso "atenção" saiu para o verde-limão
     ácido (#d6e04a): outra família de matiz, alta luminância no escuro, e
     impossível de confundir com o âmbar da marca.

     O erro é o caso delicado: #f2555a e o terracota #e35336 são vizinhos. A
     regra que decorre disso está na camada semântica — erro nunca aparece como
     preenchimento colorido sozinho, sempre com ícone e texto. */
  --sucesso-400: #2fbf71;   --sucesso-fundo: #0f2a1d;   --sucesso-borda: #1f5c3e;
  --sucesso-700: #14663f;   /* texto de sucesso em superfície clara */
  --info-400: #58a6ff;      --info-fundo: #0d1f33;      --info-borda: #1e4a78;
  --info-700: #1155a8;
  --atencao-400: #d6e04a;   --atencao-fundo: #22260c;   --atencao-borda: #4c5411;
  --atencao-700: #5c6410;
  --erro-400: #f2555a;      --erro-fundo: #2b0f12;      --erro-borda: #6b1d22;
  --erro-700: #b3242a;

  /* ---- Tipografia -------------------------------------------------------
     Uma família: Archivo Variable, dois eixos no mesmo arquivo de 90 KB. Já
     está auto-hospedada no projeto — nenhuma requisição sai do domínio.

     O eixo de LARGURA é a identidade tipográfica. Este sistema o usa mais
     agressivamente que o anterior: display a 125% e peso 900, sobrancelha a
     86%. A tensão entre os dois extremos é o que dá o caráter industrial. */
  --fonte: "Archivo Variable", system-ui, ui-sans-serif, -apple-system,
           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --largura-display: 125%;
  --largura-titulo: 112%;
  --largura-sobrancelha: 86%;

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;
  --peso-display: 900;

  --fs-display: clamp(2.75rem, 1.4rem + 5.4vw, 5.5rem);
  --fs-48: 3rem;
  --fs-36: 2.25rem;
  --fs-30: 1.875rem;
  --fs-24: 1.5rem;
  --fs-20: 1.25rem;
  --fs-18: 1.125rem;
  --fs-16: 1rem;
  --fs-15: .9375rem;
  --fs-14: .875rem;
  --fs-12: .75rem;

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

  /* ---- Espaçamento — base 4, escala ordinal -----------------------------
     Escala fechada. Não existem os degraus 7, 9, 11, 13–15, 17–19 e 21–23:
     não inventar. Degrau sem consumidor hoje continua declarado, porque tirá-lo
     abriria um buraco e o próximo a precisar do valor inventaria um número
     solto. */
  --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-32: 8rem;

  /* ---- Raio -------------------------------------------------------------
     Deliberadamente APERTADO. A tipografia é pesada e larga; raio generoso
     amoleceria o conjunto. Botão é 4px, não pílula — é a diferença mais visível
     entre esta marca e qualquer template de academia. */
  --raio-sm: 2px;
  --raio-md: 4px;
  --raio-lg: 8px;
  --raio-xl: 14px;
  --raio-pill: 999px;   /* só etiqueta e chip */
  --raio: var(--raio-md);

  /* ---- Elevação ---------------------------------------------------------
     Um sistema escuro não se separa por sombra: sombra sobre preto não
     aparece. Separa-se por LUMINÂNCIA e por fio de contorno. Por isso existem
     --brilho-* (halo quente de luz) e as sombras ficam reservadas para a seção
     clara, onde funcionam. */
  --fio: 1px solid rgba(244, 239, 230, .10);
  --fio-forte: 1px solid rgba(244, 239, 230, .20);
  --brilho-marca: 0 0 0 1px rgba(227, 83, 54, .38), 0 8px 40px -12px rgba(227, 83, 54, .45);
  --brilho-luz: 0 0 24px -4px rgba(255, 176, 0, .55);
  --sombra-sm: 0 1px 2px rgba(11, 11, 13, .10);
  --sombra-md: 0 10px 30px -8px rgba(11, 11, 13, .18);
  --sombra-lg: 0 24px 60px -12px rgba(11, 11, 13, .28);

  /* ---- Movimento --------------------------------------------------------
     Mais rápido e mais mecânico que o sistema anterior. Nada quica. */
  --mov-rapido: 100ms;
  --mov-base: 160ms;
  --mov-entrada: 500ms;
  --ease-padrao: cubic-bezier(.2, 0, 0, 1);
  --ease-saida: cubic-bezier(.16, 1, .3, 1);

  /* ---- Layout ------------------------------------------------------------ */
  --largura-max: 64rem;
  --largura-larga: 76rem;
  --largura-prosa: 40rem;
  --altura-controle: 3rem;    /* 48px */
  --alvo-toque: 2.75rem;      /* 44px, mínimo do SC 2.5.8 */

  /* Ângulo do facho — o elemento-assinatura. Ver a camada de componentes. */
  --facho-angulo: 22deg;
}

/* Bianca Ramiro — CAMADAS 2 e 3: CONFIGURÁVEIS e SEMÂNTICOS
   =============================================================================
   Camada 2 são as três variáveis que podem ser trocadas em tempo de execução.
   Camada 3 é o vocabulário que os componentes consomem: cada token diz um
   PAPEL, nunca uma cor.

   Regra: componente consome a camada 3. Hexadecimal literal em regra de
   componente é erro, e usar um primitivo (--terracota-500) onde existe um
   semântico (--marca) também é.
   ========================================================================== */

:root {
  /* ---- 2. CONFIGURÁVEIS -------------------------------------------------
     Estas três são a ponte com o painel do Django. `website/models.py` escreve
     `--brand-primary`, `--brand-secondary` e `--brand-accent` em /brand.css a
     partir das cores que a Bianca escolhe no admin — e /brand.css é servido
     DEPOIS desta folha, então vence pela cascata.

     O `var(--brand-*, fallback)` é o que faz as duas coisas funcionarem ao
     mesmo tempo: sem painel configurado, valem os padrões da marca; com painel,
     vale o painel. Trocar isto por um valor fixo desliga o controle do admin em
     silêncio.

     ATENÇÃO ao trocar pelo painel: --marca precisa carregar TEXTO PRETO com
     4,5:1. O terracota faz 5,21:1. Uma cor de marca mais clara quebra isso sem
     avisar — ver a nota de validação no README. */
  --marca: var(--brand-primary, var(--terracota-500));          /* a cor da marca */
  --marca-luz: var(--brand-secondary, var(--luz-400));          /* o âmbar: fio, brilho, sobrancelha */
  --marca-luz-quente: var(--brand-accent, var(--luz-600));      /* o laranja: o facho e degradês */

  /* ---- 3. SEMÂNTICOS — superfícies --------------------------------------
     ESTE SISTEMA É ESCURO POR PADRÃO. É a inversão em relação a qualquer
     template de personal trainer, e vem das fotos: elas são escuras, com luz
     quente pontual. Um site claro brigaria com todas elas.

     --cor-superficie-clara existe para UMA coisa: a seção de leitura longa
     (serviços, valores, regras), onde texto claro sobre escuro cansa. Uma ou
     duas por página, nunca a página inteira. */
  --cor-fundo: var(--carvao-950);
  --cor-superficie: var(--carvao-800);
  --cor-superficie-alta: var(--carvao-700);
  --cor-superficie-clara: var(--areia-100);

  /* ---- Texto -------------------------------------------------------------
     Contrastes medidos com a fórmula da WCAG 2.2, sobre --cor-fundo. */
  --cor-texto: var(--areia-100);              /* 17,20:1 */
  --cor-texto-suave: var(--areia-400);        /*  8,17:1 */
  --cor-texto-marca: var(--marca);            /*  5,21:1 — terracota em escuro */
  --cor-texto-luz: var(--marca-luz);          /* 10,74:1 — âmbar em escuro */

  /* Sobre a seção clara, tudo inverte. */
  --cor-texto-em-claro: var(--carvao-950);          /* 17,20:1 */
  --cor-texto-suave-em-claro: var(--carvao-600);    /*  9,85:1 */
  --cor-texto-marca-em-claro: var(--terracota-700); /*  6,35:1 */

  /* Texto SOBRE as cores de marca. Os três valores que mais quebram sistema. */
  --cor-sobre-marca: var(--carvao-950);       /* preto no terracota:  5,21:1 */
  --cor-sobre-luz: var(--carvao-950);         /* preto no âmbar:     10,74:1 */
  --cor-sobre-luz-quente: var(--carvao-950);  /* preto no laranja:    6,85:1 */

  /* ---- Bordas ------------------------------------------------------------
     A distinção é a mesma de qualquer sistema honesto, e continua sendo o erro
     mais comum: borda DECORATIVA e borda de CONTROLE não são a mesma coisa.

     --cor-borda faz 1,46:1 sobre o cartão. Serve para dividir, nunca para
     delimitar um campo. --cor-borda-forte faz 4,10:1 e é a única que pode
     contornar controle de formulário. */
  --cor-borda: var(--carvao-600);
  --cor-borda-forte: var(--areia-500);
  --cor-borda-em-claro: var(--areia-200);
  --cor-borda-forte-em-claro: var(--areia-500);

  /* ---- Foco --------------------------------------------------------------
     Âmbar no escuro (10,74:1) e tinta no claro (17,20:1). O terracota NÃO é
     anel de foco: sobre a seção clara ele faz 3,30:1, raspando o mínimo de
     3:1 do SC 1.4.11 sem margem nenhuma. */
  --cor-foco: var(--marca-luz);
  --cor-foco-em-claro: var(--carvao-950);

  /* ---- Estado ------------------------------------------------------------
     Cor nunca é o único indicador: todo estado carrega ícone E texto. No caso
     do erro isso é obrigatório e não recomendado — o vermelho de erro e o
     terracota da marca são vizinhos de matiz, então um preenchimento vermelho
     sem rótulo é indistinguível de um destaque de marca. */
  --cor-sucesso: var(--sucesso-400);
  --cor-sucesso-fundo: var(--sucesso-fundo);
  --cor-sucesso-borda: var(--sucesso-borda);
  --cor-info: var(--info-400);
  --cor-info-fundo: var(--info-fundo);
  --cor-info-borda: var(--info-borda);
  --cor-atencao: var(--atencao-400);
  --cor-atencao-fundo: var(--atencao-fundo);
  --cor-atencao-borda: var(--atencao-borda);
  --cor-erro: var(--erro-400);
  --cor-erro-fundo: var(--erro-fundo);
  --cor-erro-borda: var(--erro-borda);

  /* ---- Sub-marca: In Move ----------------------------------------------
     O In Move é um PROGRAMA SEPARADO, com identidade própria (roxo e lima), e
     a Bianca foi explícita: "In Move é um programa isolado, a Bianca personal
     não entra". Ele aparece no site como uma seção que divulga o programa, e
     dentro dessa seção a identidade dele é preservada.

     Estes três tokens existem para que essa seção seja possível sem que o roxo
     escape para o resto do site. Fora do escopo `.in-move`, não use. */
  --im-roxo: #7c2495;
  --im-lima: #c6dc5a;
  --im-roxo-profundo: #2c0b35;
  /* Os dois abaixo nao vieram do pacote como token: estavam literais nas
     regras de `.in-move`. Promovidos aqui para que nenhuma regra de
     componente carregue hexadecimal. */
  --im-branco: #ffffff;
  --im-tinta: #140f16;
}

/* Bianca Ramiro — CAMADA DE COMPONENTES
   =============================================================================
   Os nomes de classe abaixo são OS MESMOS que os templates Django já usam
   (`.botao--principal`, `.cartao__preco`, `.etiqueta--confirmada`, `.campo__erro`,
   `.aviso--sucesso`, `.topo`, `.rodape`, `.fatos`, `.dados`, `.faq`,
   `.depoimento`, `.opcoes`). Isto é intencional e é o ponto do arquivo: trocar a
   marca não deve exigir reescrever `templates/`.

   Três exceções, todas deliberadas:

     `.faixa-escura` → `.faixa-clara`   a página agora é escura por padrão, então
                                        o que se destaca é a faixa CLARA
     `.pista`        → `.facho`         a assinatura mudou de marca
     `.marca`        novo               o logotipo/monograma, que não existia

   Nada aqui usa hexadecimal literal: todo valor sai da camada semântica.
   ========================================================================== */

/* =============================================================================
   1. MARCA — monograma e logotipo
   ============================================================================= */

/* A logo é um monograma BR inscrito num triângulo, em linha fina — desenho
   dela, não tipografia. Isso cria a tensão que dá caráter ao conjunto: marca
   delicada e geométrica contra tipografia pesada e larga. A logo é a assinatura;
   o tipo é a voz.

   Por ser linha fina, ela tem duas exigências que uma logo sólida não tem:
   tamanho mínimo maior (abaixo de 40px o traço fecha) e nunca sobre foto sem
   uma chapada atrás. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-4);
  color: inherit;
  text-decoration: none;
}
.marca__simbolo {
  display: block;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}
.marca__texto {
  display: grid;
  gap: 1px;
  line-height: 1;
}
.marca__nome {
  font-size: var(--fs-16);
  font-stretch: var(--largura-titulo);
  font-weight: var(--peso-forte);
  letter-spacing: -.01em;
}
.marca__descritor {
  font-size: var(--fs-12);
  font-stretch: var(--largura-sobrancelha);
  font-weight: var(--peso-semi);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

/* Empilhado, para rodapé e peça quadrada. */
.marca--vertical { flex-direction: column; text-align: center; gap: var(--espaco-4); }
.marca--vertical .marca__texto { justify-items: center; }
/* Só o símbolo: favicon, avatar, selo. O nome continua no HTML, para leitor
   de tela — esconder visualmente não é remover. */
.marca--so-simbolo .marca__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.marca--grande .marca__simbolo { width: 5.5rem; height: 5.5rem; }

/* Sobre foto: chapada de carvão atrás, nunca a linha direto na imagem. */
.marca--sobre-foto {
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-md);
  background: rgba(11, 11, 13, .72);
  backdrop-filter: blur(8px);
}

/* =============================================================================
   2. O FACHO — elemento-assinatura
   =============================================================================
   Duas ou três barras diagonais de luz cruzando a composição em 22°.

   Não é enfeite: é o que as fotos dela têm. Nas imagens do ensaio há tubos de
   LED diagonais atrás dela, e é essa diagonal que dá a todas as fotos o mesmo
   ar. Trazer a mesma diagonal para o layout faz o site e as fotos parecerem a
   mesma peça — e é o que substitui a pista do sistema anterior.

   `aria-hidden` e sem texto dentro: composição, não conteúdo.
   ========================================================================== */
.facho {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.facho__barra {
  position: absolute;
  top: -30%;
  height: 160%;
  width: clamp(2px, .35vw, 5px);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--marca-luz) 22%,
    var(--marca-luz-quente) 55%,
    transparent
  );
  transform: rotate(var(--facho-angulo));
  opacity: .85;
}
.facho__barra:nth-child(1) { left: 62%; }
.facho__barra:nth-child(2) { left: 71%; width: clamp(1px, .18vw, 3px); opacity: .5; }
.facho__barra:nth-child(3) { left: 84%; }

/* O halo: mancha terracota que sangra por um canto. Sempre atrás do texto. */
.facho__halo {
  position: absolute;
  right: -12%;
  bottom: -34%;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--marca);
  opacity: .20;
  filter: blur(60px);
}

/* Um único facho animado por página, e só no herói. O deslocamento é lateral e
   lento: a luz "passa", não pisca. */
.facho--vivo .facho__barra { animation: facho-desliza var(--mov-ambiente, 26s) linear infinite alternate; }
.facho--vivo .facho__barra:nth-child(2) { animation-duration: 34s; }
.facho--vivo .facho__barra:nth-child(3) { animation-duration: 30s; }
@keyframes facho-desliza { to { transform: rotate(var(--facho-angulo)) translateX(3.5rem); } }

/* Discreto: cabeçalho de página interna. Nasce parado — repetido em treze
   páginas o movimento deixaria de ser assinatura e viraria fundo animado. */
.facho--discreto .facho__barra { opacity: .38; }
.facho--discreto .facho__halo { opacity: .12; }

@media (prefers-reduced-motion: reduce) {
  .facho__barra { animation: none !important; }
}

/* =============================================================================
   3. SUPERFÍCIES E LAYOUT
   ============================================================================= */
.container { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--espaco-6); }
.container--larga { max-width: var(--largura-larga); }
.container--prosa,
.container--leitura { max-width: var(--largura-prosa); }
.container--formulario { max-width: 34rem; }

.secao { padding: clamp(var(--espaco-16), 9vw, var(--espaco-32)) 0; }
.secao__titulo {
  margin: 0 0 var(--espaco-8);
  font-size: var(--fs-36);
  font-stretch: var(--largura-titulo);
  font-weight: var(--peso-display);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* A faixa clara. UMA ou duas por página, para leitura longa: serviços, valores,
   regras de pagamento. Todo token de cor inverte dentro dela — é por isso que
   os semânticos `-em-claro` existem. */
.faixa-clara {
  --cor-texto: var(--cor-texto-em-claro);
  --cor-texto-suave: var(--cor-texto-suave-em-claro);
  --cor-texto-marca: var(--cor-texto-marca-em-claro);
  --cor-superficie: var(--areia-50);
  --cor-borda: var(--cor-borda-em-claro);
  --cor-borda-forte: var(--cor-borda-forte-em-claro);
  --cor-foco: var(--cor-foco-em-claro);
  background: var(--cor-superficie-clara);
  color: var(--cor-texto);
}

/* =============================================================================
   4. SOBRANCELHA
   =============================================================================
   A segunda voz da tipografia e o contrário exato do display: estreita,
   espaçada, pequena, em caixa alta. Aqui ela é um FIO, não uma pílula — o fio
   de luz âmbar à esquerda repete a diagonal do facho em miniatura.
   ========================================================================== */
.sobrancelha {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-3);
  margin: 0 0 var(--espaco-5);
  font-size: var(--fs-12);
  font-stretch: var(--largura-sobrancelha);
  font-weight: var(--peso-forte);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cor-texto-luz);
}
.sobrancelha::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  flex: none;
}
.faixa-clara .sobrancelha { color: var(--cor-texto-marca-em-claro); }

/* =============================================================================
   5. BOTÃO
   =============================================================================
   Raio de 4px, não pílula. Uma ação principal por seção.
   ========================================================================== */
.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: 0 var(--espaco-6);
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  font-family: var(--fonte);
  font-size: var(--fs-14);
  font-stretch: var(--largura-sobrancelha);
  font-weight: var(--peso-forte);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mov-rapido) var(--ease-padrao),
              border-color var(--mov-rapido) var(--ease-padrao),
              color var(--mov-rapido) var(--ease-padrao),
              box-shadow var(--mov-base) var(--ease-padrao);
}
.botao:disabled,
.botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.botao--principal {
  background: var(--marca);
  color: var(--cor-sobre-marca);
}
.botao--principal:hover:not(:disabled) { background: var(--terracota-400); box-shadow: var(--brilho-marca); }
.botao--principal:active:not(:disabled) { background: var(--terracota-600); box-shadow: none; }

/* Âmbar. Reservado para o preço e para a conversão final — a cor mais luminosa
   do sistema, e por isso a que não pode aparecer duas vezes na mesma tela. */
.botao--acento {
  background: var(--marca-luz);
  color: var(--cor-sobre-luz);
}
.botao--acento:hover:not(:disabled) { background: var(--luz-300); box-shadow: var(--brilho-luz); }

.botao--secundario {
  background: transparent;
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
}
.botao--secundario:hover:not(:disabled) { border-color: var(--cor-texto); background: rgba(244, 239, 230, .06); }

.botao--fantasma {
  background: transparent;
  color: var(--cor-texto-marca);
  padding: 0 var(--espaco-2);
  border-color: transparent;
}
.botao--fantasma:hover:not(:disabled) { color: var(--cor-texto); text-decoration: underline; text-underline-offset: 4px; }

.botao--largo { width: 100%; }
.botao--enviando { cursor: progress; }

.faixa-clara .botao--secundario { color: var(--cor-texto-em-claro); }

/* =============================================================================
   6. CAMPO DE FORMULÁRIO
   =============================================================================
   Label sempre visível; placeholder é exemplo, nunca rótulo. Borda
   --cor-borda-forte (4,10:1) — nunca a decorativa. Os ids de ajuda e erro são
   `_helptext` e `_error` porque é o que o Django 5.2 referencia no
   `aria-describedby` que ele mesmo emite.
   ========================================================================== */
.campo { display: grid; gap: var(--espaco-2); margin-bottom: var(--espaco-5); }
.campo > label {
  font-size: var(--fs-14);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
}
.campo__legenda {
  font-size: var(--fs-14);
  font-weight: var(--peso-semi);
  padding: 0;
  margin-bottom: var(--espaco-2);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--altura-controle);
  padding: 0 var(--espaco-4);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: var(--fs-16);   /* piso: abaixo de 16px o iOS dá zoom ao focar */
  transition: border-color var(--mov-rapido) var(--ease-padrao),
              box-shadow var(--mov-rapido) var(--ease-padrao);
}
.campo textarea { min-height: 7rem; padding: var(--espaco-3) var(--espaco-4); line-height: var(--lh-24); resize: vertical; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--areia-500); }
.campo input:hover,
.campo textarea:hover { border-color: var(--cor-texto-suave); }
.campo input:focus,
.campo textarea:focus,
.campo select:focus { outline: none; border-color: var(--marca-luz); box-shadow: 0 0 0 3px rgba(255, 176, 0, .22); }
.campo input:disabled { opacity: .5; cursor: not-allowed; }

.campo__ajuda { font-size: var(--fs-14); line-height: var(--lh-20); color: var(--cor-texto-suave); }
.campo__erro {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  font-size: var(--fs-14);
  font-weight: var(--peso-medio);
  color: var(--cor-erro);
}
.campo--invalido input,
.campo--invalido textarea,
.campo--invalido select { border-color: var(--cor-erro); }
.campo--invalido input:focus { box-shadow: 0 0 0 3px rgba(242, 85, 90, .24); }

/* Chip de escolha: modalidade, plano, horário. */
.opcoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.opcao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-toque);
  min-width: var(--alvo-toque);
  padding: 0 var(--espaco-4);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto);
  font-size: var(--fs-14);
  font-weight: var(--peso-semi);
  cursor: pointer;
  transition: all var(--mov-rapido) var(--ease-padrao);
}
.opcao:hover { border-color: var(--cor-texto); }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao:has(input:checked) { background: var(--marca); border-color: var(--marca); color: var(--cor-sobre-marca); }

/* =============================================================================
   7. CARTÃO
   =============================================================================
   Num sistema escuro o cartão não se separa por sombra — separa-se subindo a
   luminância um degrau e por um fio de contorno.
   ========================================================================== */
.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-6);
  border: var(--fio);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  transition: border-color var(--mov-base) var(--ease-padrao),
              background var(--mov-base) var(--ease-padrao),
              transform var(--mov-base) var(--ease-padrao);
}
.cartao--clicavel:hover {
  border-color: rgba(227, 83, 54, .5);
  background: var(--cor-superficie-alta);
  transform: translateY(-3px);
}
.cartao__titulo { margin: 0; font-size: var(--fs-20); font-stretch: var(--largura-titulo); font-weight: var(--peso-forte); line-height: var(--lh-28); }
/* O alvo de toque cheio fica no título, não numa seta de 24px no canto. */
.cartao__titulo a { color: inherit; text-decoration: none; }
.cartao--clicavel .cartao__titulo a::after { content: ""; position: absolute; inset: 0; }
.cartao__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  margin: 0;
  font-size: var(--fs-14);
  color: var(--cor-texto-suave);
}
.cartao__separador { opacity: .5; }
.cartao__resumo { margin: 0; color: var(--cor-texto-suave); line-height: var(--lh-24); }
.cartao__preco {
  font-size: var(--fs-24);
  font-stretch: var(--largura-titulo);
  font-weight: var(--peso-display);
  color: var(--cor-texto-luz);
  font-variant-numeric: tabular-nums;
}
.cartao__acao { margin-top: auto; padding-top: var(--espaco-3); }
.grade { display: grid; gap: var(--espaco-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.faixa-clara .cartao { border-color: var(--cor-borda-em-claro); background: var(--cor-superficie); }
.faixa-clara .cartao__preco { color: var(--cor-texto-marca-em-claro); }

/* =============================================================================
   8. ETIQUETA
   ============================================================================= */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-3);
  border: 1px solid currentColor;
  border-radius: var(--raio-pill);
  font-size: var(--fs-12);
  font-stretch: var(--largura-sobrancelha);
  font-weight: var(--peso-forte);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: var(--lh-16);
}
.etiqueta--marca { color: var(--cor-sobre-marca); background: var(--marca); border-color: var(--marca); }
.etiqueta--confirmada { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.etiqueta--pendente { color: var(--cor-atencao); background: var(--cor-atencao-fundo); }
.etiqueta--cancelada { color: var(--cor-erro); background: var(--cor-erro-fundo); }
.etiqueta--neutra { color: var(--cor-texto-suave); background: transparent; }

/* =============================================================================
   9. AVISO
   =============================================================================
   Ícone + título + mensagem. Cor nunca é o único indicador — e no erro isso é
   obrigatório, porque o vermelho de erro e o terracota da marca são vizinhos.
   ========================================================================== */
.aviso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
}
.aviso__icone { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.aviso__titulo { margin: 0 0 var(--espaco-1); font-size: var(--fs-15); font-weight: var(--peso-forte); }
.aviso__texto { margin: 0; font-size: var(--fs-15); line-height: var(--lh-24); }
.aviso--sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); }
.aviso--erro { color: var(--cor-erro); background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); }
.aviso--atencao { color: var(--cor-atencao); background: var(--cor-atencao-fundo); border-color: var(--cor-atencao-borda); }
.aviso--info { color: var(--cor-info); background: var(--cor-info-fundo); border-color: var(--cor-info-borda); }

/* =============================================================================
   10. TOPO
   ============================================================================= */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--cor-fundo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: var(--fio);
}
.topo__interno {
  display: flex;
  align-items: center;
  gap: var(--espaco-6);
  max-width: var(--largura-larga);
  margin: 0 auto;
  padding: var(--espaco-4) var(--espaco-6);
}
.menu__lista {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.menu__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  padding: 0 var(--espaco-3);
  border-radius: var(--raio-sm);
  color: var(--cor-texto-suave);
  font-size: var(--fs-14);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: color var(--mov-rapido) var(--ease-padrao);
}
.menu__link:hover { color: var(--cor-texto); }
/* Item atual: fio âmbar embaixo, não preenchimento — o preenchimento roubaria a
   atenção do único botão da barra. */
.menu__link[aria-current="page"] { color: var(--cor-texto); box-shadow: inset 0 -2px 0 var(--marca-luz); border-radius: 0; }

/* =============================================================================
   11. HERÓI
   ============================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--espaco-20), 12vw, var(--espaco-32)) 0;
}
.hero__interno { position: relative; z-index: 1; max-width: var(--largura-larga); margin: 0 auto; padding: 0 var(--espaco-6); }
.hero__titulo {
  max-width: 18ch;
  margin: 0 0 var(--espaco-6);
  font-size: var(--fs-display);
  font-stretch: var(--largura-display);
  font-weight: var(--peso-display);
  line-height: .96;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.hero__apoio { max-width: 38ch; margin: 0 0 var(--espaco-10); font-size: var(--fs-18); line-height: var(--lh-28); color: var(--cor-texto-suave); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); }
.hero__imagem { position: absolute; inset: 0; z-index: 0; }
/* `object-position` ancora o recorte na PESSOA, e nao no centro geometrico da
   imagem. A foto do pacote e 1448x1086 e a cabeca dela vive em y=78..330; com o
   padrao `50% 50%` o excedente sai metade em cima e metade embaixo, e em
   qualquer heroi largo a primeira coisa a sair e a cabeca. Para a cabeca caber
   com recorte centrado o heroi precisaria de 1224px de altura em 1920 - o que
   nao e heroi, e parede.

   12% e o teto util: a janela comeca em `recorte * Y`, e `78 / recorte` da 12%
   no pior caso realista - 1920x700, onde quem manda e o limite de altura e o
   recorte chega a 618px. Nas larguras comuns sobra folga. Ver decisao 24. */
.hero__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}
/* Véu obrigatório: texto nunca vai direto sobre a foto. O gradiente é lateral
   porque os enquadramentos dela deixam o espaço vazio à esquerda. */
.hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--cor-fundo) 0%,
    color-mix(in srgb, var(--cor-fundo) 82%, transparent) 46%,
    transparent 78%
  );
}

/* Faixa de fatos: duração, valor, formato, avaliação. */
.fatos {
  display: grid;
  gap: var(--espaco-6);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin-top: var(--espaco-12);
  padding-top: var(--espaco-8);
  border-top: var(--fio);
}
.fatos__rotulo {
  margin: 0 0 var(--espaco-1);
  font-size: var(--fs-12);
  font-stretch: var(--largura-sobrancelha);
  font-weight: var(--peso-forte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cor-texto-luz);
}
.fatos__valor { margin: 0; font-size: var(--fs-24); font-stretch: var(--largura-titulo); font-weight: var(--peso-display); font-variant-numeric: tabular-nums; }

/* =============================================================================
   12. TABELA DE VALORES
   ============================================================================= */
.valores { width: 100%; border-collapse: collapse; font-size: var(--fs-15); }
.valores caption {
  padding-bottom: var(--espaco-3);
  font-size: var(--fs-12);
  font-stretch: var(--largura-sobrancelha);
  font-weight: var(--peso-forte);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--cor-texto-suave);
}
.valores th,
.valores td { padding: var(--espaco-4) var(--espaco-3); text-align: left; border-bottom: 1px solid var(--cor-borda); }
.valores th { font-weight: var(--peso-semi); }
.valores tbody tr:last-child th,
.valores tbody tr:last-child td { border-bottom: 0; }
.valores__preco {
  text-align: right;
  white-space: nowrap;
  font-size: var(--fs-18);
  font-stretch: var(--largura-titulo);
  font-weight: var(--peso-display);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-luz);
}
.valores__unidade { display: block; font-size: var(--fs-12); font-weight: var(--peso-regular); font-stretch: normal; letter-spacing: 0; text-transform: none; color: var(--cor-texto-suave); }
.faixa-clara .valores__preco { color: var(--cor-texto-marca-em-claro); }

/* =============================================================================
   13. DADOS, FAQ, DEPOIMENTO
   ============================================================================= */
.dados { display: grid; gap: var(--espaco-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0; }
.dados__rotulo { font-size: var(--fs-12); font-stretch: var(--largura-sobrancelha); font-weight: var(--peso-forte); letter-spacing: .14em; text-transform: uppercase; color: var(--cor-texto-suave); }
.dados__valor { margin: var(--espaco-1) 0 0; font-size: var(--fs-18); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }

.faq { display: grid; gap: var(--espaco-2); }
.faq__item { border: var(--fio); border-radius: var(--raio-md); background: var(--cor-superficie); }
.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  min-height: var(--altura-controle);
  padding: var(--espaco-4) var(--espaco-5);
  font-size: var(--fs-16);
  font-weight: var(--peso-semi);
  cursor: pointer;
  list-style: none;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::after { content: "+"; flex: none; font-size: var(--fs-20); font-weight: var(--peso-forte); color: var(--cor-texto-luz); }
.faq__item[open] .faq__pergunta::after { content: "−"; }
.faq__resposta { margin: 0; padding: 0 var(--espaco-5) var(--espaco-5); color: var(--cor-texto-suave); line-height: var(--lh-24); }

.depoimento { display: flex; flex-direction: column; gap: var(--espaco-4); padding: var(--espaco-6); border: var(--fio); border-radius: var(--raio-lg); background: var(--cor-superficie); }
.depoimento__texto { margin: 0; font-size: var(--fs-18); line-height: var(--lh-28); text-wrap: pretty; }
.depoimento__autoria { display: flex; align-items: center; gap: var(--espaco-3); margin-top: auto; }
.depoimento__foto,
.depoimento__inicial { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.depoimento__inicial { display: grid; place-items: center; background: var(--marca); color: var(--cor-sobre-marca); font-weight: var(--peso-forte); }
.depoimento__nome { font-size: var(--fs-15); font-weight: var(--peso-forte); }
.depoimento__contexto { font-size: var(--fs-14); color: var(--cor-texto-suave); }

/* =============================================================================
   14. FOTOGRAFIA
   =============================================================================
   As fotos são escuras e com luz quente pontual. O sistema não as corrige: ele
   se constrói em volta delas.
   ========================================================================== */
.retrato { width: 100%; border-radius: var(--raio-lg); object-fit: cover; aspect-ratio: 4 / 5; }
.capa { width: 100%; border-radius: var(--raio-lg); object-fit: cover; aspect-ratio: 16 / 9; }
/* Recorte alto e estreito, para a coluna de "sobre". */
.retrato--alto { aspect-ratio: 3 / 4; }
/* Fio âmbar num canto: repete a diagonal do facho na moldura da foto. */
.moldura { position: relative; }
.moldura::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, var(--marca-luz), transparent);
}

/* =============================================================================
   15. RODAPÉ
   ============================================================================= */
.rodape { padding: var(--espaco-20) 0 var(--espaco-8); border-top: var(--fio); color: var(--cor-texto-suave); }
.rodape__interno { display: grid; gap: var(--espaco-10); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); max-width: var(--largura-larga); margin: 0 auto; padding: 0 var(--espaco-6); }
.rodape__titulo {
  margin: 0 0 var(--espaco-4);
  font-size: var(--fs-12);
  font-stretch: var(--largura-sobrancelha);
  font-weight: var(--peso-forte);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cor-texto-luz);
}
.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); }
.rodape a { color: inherit; text-decoration: none; }
.rodape a:hover { color: var(--cor-texto); text-decoration: underline; text-underline-offset: 4px; }
.rodape__nota { max-width: var(--largura-larga); margin: var(--espaco-16) auto 0; padding: var(--espaco-6) var(--espaco-6) 0; border-top: var(--fio); font-size: var(--fs-14); }

/* =============================================================================
   16. IN MOVE — sub-marca, escopo isolado
   =============================================================================
   "In Move é um programa isolado. A Bianca personal não entra." A seção existe
   para divulgar o programa, e dentro dela a identidade do In Move é preservada.
   Todo o roxo e o lima vivem AQUI DENTRO e em nenhum outro lugar — é por isso
   que este bloco é um escopo e não um conjunto de variantes soltas.
   ========================================================================== */
.in-move {
  --marca: var(--im-roxo);
  --marca-luz: var(--im-lima);
  --cor-texto-luz: var(--im-lima);
  --cor-sobre-marca: var(--im-branco);
  --cor-sobre-luz: var(--im-tinta);
  background: var(--im-roxo-profundo);
  color: var(--im-branco);
}
.in-move .sobrancelha { color: var(--im-lima); }
.in-move .cartao { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
/* O contraste do lima muda de regra aqui: sobre o roxo profundo faz 5,42:1 e
   pode carregar título curto; sobre claro faria 1,52:1 e não pode nada. */
.in-move .botao--acento { background: var(--im-lima); color: var(--im-tinta); }

/* =============================================================================
   17. UTILITÁRIOS
   ============================================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--espaco-4); top: var(--espaco-4); z-index: 100; transform: translateY(-250%); }
.skip-link:focus { transform: none; }
.texto-suave { color: var(--cor-texto-suave); }
.numeros { font-variant-numeric: tabular-nums; }

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-16);
  line-height: var(--lh-24);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-stretch: var(--largura-titulo);
  font-weight: var(--peso-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

a { color: var(--cor-texto-marca); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cor-texto); }

/* Foco visível sempre. --cor-foco é âmbar no escuro e tinta na faixa clara,
   onde .faixa-clara o redefine. */
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; }

a, button, input, select, textarea, [role="button"] { font: inherit; }

::selection { background: var(--marca); color: var(--cor-sobre-marca); }


/* =============================================================================
   CAMADA DO PROJETO — o que o pacote de design nao cobre
   =============================================================================
   Daqui para baixo NAO e o pacote `handoff/`: e o vocabulario proprio deste
   site, que existe em `templates/` mas nao no design system.

   A divisao importa na hora de trocar de marca outra vez. O bloco acima e
   substituivel inteiro pela proxima entrega do design; este aqui e portado. Se
   as duas partes estivessem misturadas, a proxima concatenacao apagaria o
   cabecalho de pagina, a tabela de camisetas e o bloco do Pix junto com o roxo.

   A regra do pacote vale igual aqui: nenhum hexadecimal literal. Todo valor sai
   da camada semantica, e ha teste varrendo atras disso.
   ========================================================================== */

/* ---- Cabecalho de pagina interna ------------------------------------------
   Antes era uma faixa roxa: a superficie de marca era o que dizia em que site
   a pessoa estava. Agora o site inteiro e escuro por padrao, entao a faixa
   perdeu a funcao de contraste e o que sobra dela e o espaco e o facho. E um
   heroi mais baixo, e nao uma superficie de outra cor. */
.cabecalho {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--espaco-12), 7vw, var(--espaco-20)) 0 var(--espaco-10);
  border-bottom: var(--fio);
}
.cabecalho .container { position: relative; z-index: 1; }
.cabecalho__titulo {
  margin: 0 0 var(--espaco-2);
  font-size: var(--fs-48);
  font-stretch: var(--largura-display);
  font-weight: var(--peso-display);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.cabecalho__linha {
  max-width: var(--largura-prosa);
  margin: 0;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  color: var(--cor-texto-suave);
}
/* Logo do evento no cabecalho dele. O minimo da marca e 40px; 64 e o teto para
   nao competir com o <h1> logo abaixo.

   `height` FIXA, e nao so `max-height`: os modelos usam `FileField`, entao o
   template nao tem como emitir `width`/`height` e a caixa valeria zero ate o
   arquivo chegar. Medido no Firefox antes da correcao: a imagem empurrou o
   conteudo de baixo no instante do carregamento.

   `contain`, e nao `cover`: cortar um logotipo e defeito de marca. `min-width`
   segura a coluna enquanto a proporcao do arquivo e desconhecida. */
.cabecalho__logo {
  display: block;
  width: auto;
  min-width: 160px;
  height: 64px;
  max-height: 64px;
  margin-bottom: var(--espaco-4);
  object-fit: contain;
  object-position: left center;
}

/* ---- Barra fixa -----------------------------------------------------------
   `.topo` ja nasce grudada e desfocada. O que muda ao rolar e so o fio: com
   conteudo passando por baixo, o contorno precisa de mais forca para a barra
   nao encostar visualmente no que esta atras. Quem escreve a classe e a
   sentinela de 1px em base.html, via movimento.js. */
.topo--fixado { border-bottom: var(--fio-forte); }
.topo__sentinela { position: absolute; top: 0; width: 1px; height: 1px; }

/* Os seis itens do menu quebram em duas linhas no celular, e a marca fica
   sozinha na primeira. Sem isto eles ficam numa linha so e empurram o documento
   para 587px de largura num visor de 320 - a pagina inteira ganha rolagem
   horizontal, e nao so a barra.

   O pacote de design declara `.menu__lista` como flex sem `wrap`, o que funciona
   num menu de tres itens. Este tem seis, e nao ha menu sanfonado: a decisao de
   nao usar `<details>` esta registrada em components/_nav.html. Quebrar linha e
   o que substitui o sanfonado. */
.topo__interno,
.menu__lista { flex-wrap: wrap; }

/* ---- Heroi ---------------------------------------------------------------- */
/* O veu do pacote e LATERAL, e a razao esta escrita no README dele: os
   enquadramentos dela deixam o espaco vazio de um lado, entao o texto vai nesse
   lado e o gradiente protege so ele.

   Isso vale enquanto o lado vazio existe. Num visor estreito a foto e recortada
   por `object-fit: cover` e o que sobra e o centro do quadro - o lado vazio foi
   embora no corte, e o texto, que agora ocupa a largura toda, cai em cima do
   assunto. Medido a 375px: o paragrafo de apoio e o botao fantasma ficam sobre
   a figura dela.

   A regra que manda continua sendo a do pacote, e ela e mais forte que a
   direcao: "texto nunca vai direto sobre a foto". Aqui o gradiente mantem a
   inclinacao - 100deg e o mesmo eixo do facho - e deixa de chegar a
   transparente, para que nao exista faixa de texto sem veu por baixo. */
@media (max-width: 60rem) {
  .hero__veu {
    background: linear-gradient(
      100deg,
      var(--cor-fundo) 0%,
      color-mix(in srgb, var(--cor-fundo) 88%, transparent) 55%,
      color-mix(in srgb, var(--cor-fundo) 64%, transparent) 100%
    );
  }
}
/* A coluna de texto para antes da metade: o vertical do veu do pacote e
   lateral, e o espaco livre da foto fica de um lado so. */
.hero__texto { max-width: 40rem; }
/* Sem frase gravada no painel, o heroi encolhe em vez de sumir. */
.hero--vazio { padding: clamp(var(--espaco-12), 7vw, var(--espaco-16)) 0; }
/* Heroi COM foto tem altura propria, e nao a sobra do texto.

   Medido em 1920x1080: o heroi escrito rende 2.07:1 e o de marca rendia 3.69:1,
   com a mesma largura - a diferenca era so quanto texto havia. Sobre uma foto de
   1.33:1 isso e a diferenca entre 65% e 36% da imagem visivel, e a 36% o que sai
   e a cabeca.

   `48vw` mantem a proporcao constante em qualquer largura; `88svh` impede que a
   foto engula a tela em monitor baixo, e e o teto mais alto que ainda cabe numa
   janela curta sem virar tela cheia; `26rem` segura o piso no celular, onde
   `48vw` daria 187px. `align-content` centra o texto na altura que a foto
   pediu - sem isso ele encosta no topo, porque o padding sozinho nao ocupa a
   sobra. */
.hero--com-foto {
  min-height: clamp(26rem, 48vw, 88svh);
  display: grid;
  align-content: center;
}
.fatos__item { margin: 0; }

/* ---- Secao em faixa -------------------------------------------------------
   Bloco que se destaca do fluxo por recorte, e nao por cor: quem da a cor e
   `.faixa-clara` ou `.in-move`, aplicadas junto. */
.secao--faixa {
  padding-block: clamp(var(--espaco-16), 8vw, var(--espaco-20));
  padding-inline: var(--espaco-5);
  border-radius: var(--raio-xl);
  overflow: hidden;
}

/* ---- Paginas de texto corrido --------------------------------------------- */
.pagina-simples { padding: var(--espaco-16) 0; }
.pagina-simples .container { max-width: var(--largura-prosa); }
.pagina-simples h1 { margin-top: 0; font-size: var(--fs-36); }

/* `white-space: pre-line` e o que faz a quebra de linha digitada no painel
   virar quebra na tela, sem que o campo aceite HTML. */
.descricao { white-space: pre-line; }
.texto-pequeno { font-size: var(--fs-14); line-height: var(--lh-20); }

/* ---- Cartoes de evento e de servico ---------------------------------------
   O botao desce para o rodape do cartao para que uma fileira inteira alinhe os
   botoes na mesma altura, independente do tamanho do texto acima. */
.cartao--evento .botao,
.cartao--servico .botao { margin-top: auto; align-self: flex-start; }

/* ---- Chip de escolha: o radio escondido -----------------------------------
   Correcao de um defeito do pacote de design, medido no navegador a 320px.

   O pacote esconde o radio com `.opcao input { position: absolute; opacity: 0 }`
   e nao declara `position` no chip. Sem ancora posicionada, o bloco que contem o
   absoluto sobe na arvore ate o formulario - e o radio, que herda `width: 100%`
   da regra `.campo input` logo acima, resolve esses 100% contra o FORMULARIO.

   Medido em /contato/ num visor de 320px: o radio saia com 271px e empurrava o
   documento para 347px. A pagina inteira ganhava rolagem horizontal por causa de
   um elemento que ninguem ve.

   `position: relative` no chip resolve, e `width: auto` diz o que sempre foi
   verdade: a largura de um radio invisivel nao tem por que acompanhar a de um
   campo de texto. */
.opcao { position: relative; }
.opcao input { width: auto; }

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

/* ---- Pix ------------------------------------------------------------------
   O QR fica sobre chapada clara porque leitor de codigo espera modulo escuro
   sobre fundo claro; invertido, boa parte dos aplicativos nao le. E a unica
   superficie clara que aparece dentro de uma pagina escura sem ser
   `.faixa-clara`, e a razao e funcional, nao estetica. */
.pix__qr {
  display: block;
  width: 220px;
  height: 220px;
  margin: 0 auto var(--espaco-4);
  padding: var(--espaco-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--areia-50);
}
.pix__codigo {
  display: block;
  width: 100%;
  max-height: 9rem;
  margin: 0 0 var(--espaco-3);
  padding: var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-mono);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  word-break: break-all;
  overflow-y: auto;
}
/* O codigo da inscricao. Tabular e monoespacado porque ele e DITADO por
   telefone e conferido caractere a caractere. */
.referencia {
  font-family: var(--fonte-mono);
  font-size: var(--fs-20);
  font-weight: var(--peso-forte);
  letter-spacing: .08em;
  color: var(--cor-texto-luz);
  font-variant-numeric: tabular-nums;
}

/* ---- Contato e identificacao ---------------------------------------------- */
.canais {
  display: grid;
  gap: var(--espaco-2);
  margin: var(--espaco-4) 0 0;
  padding: 0;
  list-style: none;
}
.identificacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0 0 var(--espaco-6);
}

/* ---- Rodape --------------------------------------------------------------- */
.rodape__bloco { min-width: 0; }
.rodape__texto { margin: var(--espaco-1) 0; }

/* ---- Aviso: a forma, e nao so a cor -------------------------------------
   O pacote desenha o alerta como uma grade `auto 1fr` e espera um
   `.aviso__icone` no HTML para ocupar a primeira coluna. Nenhum dos quinze
   avisos do projeto tem esse elemento: eles tem um filho so, e sem estas regras
   ele cairia na coluna do icone, espremido.

   Mais grave que o layout: sem a marca, as quatro variantes ficam identicas
   exceto pelo fundo. Quem nao distingue as cores nao distingue sucesso de erro,
   e isso reprova o SC 1.4.1 - cor nunca pode ser o unico sinal. O pacote diz a
   mesma coisa em palavras ("todo estado carrega icone E texto") e resolve pelo
   HTML; aqui a solucao continua sendo a de sempre, desenhada com borda, sem
   arquivo de icone e sem tocar em quinze templates.

   O `border-left` de 4px vem junto pelo mesmo motivo: e o segundo sinal
   nao-cromatico, e sobrevive em escala de cinza. */
.aviso {
  column-gap: var(--espaco-3);
  border-left-width: 4px;
  margin: var(--espaco-4) 0;
}
.aviso > * { grid-column: 2; }
.aviso::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-top: .45rem;
}
/* Sucesso: traco em L rotacionado - um "certo". */
.aviso--sucesso::before {
  width: .8rem;
  height: .45rem;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
/* Atencao: triangulo. */
.aviso--atencao::before {
  width: 0;
  height: 0;
  border-left: .45rem solid transparent;
  border-right: .45rem solid transparent;
  border-bottom: .8rem solid currentColor;
}
/* Erro: circulo cheio. */
.aviso--erro::before {
  width: .8rem;
  height: .8rem;
  border-radius: var(--raio-pill);
  background: currentColor;
}
/* Informacao: anel. Vazado de proposito, para nao se confundir com o disco
   cheio do erro em escala de cinza - cheio x vazado distingue melhor que duas
   formas parecidas em cores diferentes. */
.aviso--info::before {
  width: .8rem;
  height: .8rem;
  border: 2px solid currentColor;
  border-radius: var(--raio-pill);
}
.aviso--sucesso { border-left-color: var(--cor-sucesso); }
.aviso--erro { border-left-color: var(--cor-erro); }
.aviso--atencao { border-left-color: var(--cor-atencao); }
.aviso--info { border-left-color: var(--cor-info); }

/* ---- Link: o sublinhado e explicito --------------------------------------
   O pacote define espessura e deslocamento do sublinhado, mas nao o sublinhado
   em si: ele conta com o padrao do navegador. Isso funciona ate alguem servir a
   pagina com um `reset` mais agressivo ou um navegador mudar de ideia.

   A garantia nao pode depender disso. Cor sozinha nao pode ser o unico sinal de
   que algo e link (SC 1.4.1), e num site cujo `--brand-primary` vem do banco a
   cor pode chegar a qualquer valor. O sublinhado e o que sobrevive. */
a { text-decoration: underline; }

/* ---- Alvo de toque --------------------------------------------------------
   O pacote ja garante 44px em `.menu__link`, `.opcao` e `.botao`. Faltam dois,
   e os dois foram MEDIDOS antes de virarem regra: os links do rodape tinham
   18px de altura no dedo e o titulo do cartao de evento, 25px.

   A consulta usa largura OU ponteiro grosso. So `(pointer: coarse)` descreve o
   dispositivo de entrada e nenhum navegador em maquina de desenvolvimento
   relata `coarse` - a regra existiria no arquivo sem haver como exercita-la. A
   largura e o que se pode medir; o ponteiro cobre o tablet de tela larga. */
.cartao__titulo a { display: block; }

@media (max-width: 40rem), (pointer: coarse) {
  .rodape__lista a,
  .cartao__titulo a {
    display: flex;
    align-items: center;
    min-height: var(--alvo-toque);
  }
}