/* ================================================================
   IMPULSO — Sistema de design "RISCO"
   ----------------------------------------------------------------
   Conceito: o gesto de riscar um fósforo. Escuridão → risco → luz.

   REGRA DE OURO — o fogo nunca ilumina, o fogo MARCA.
   Todo laranja no site é rastro de alguma coisa que passou: um corte,
   uma linha queimada, uma brasa que a pessoa acendeu com uma ação.
   Nunca é luz de fundo, nunca é atmosfera, nunca preenche vazio.

   GESTO ÚNICO — o risco a -24°, em quatro escalas e mais nenhuma:
     máxima   → ignição (a lâmina que revela o site)
     grande   → cortina (transição entre páginas)
     vertical → pavio (progresso de scroll)
     mínima   → .risco-mini (marcador de rótulo)

   GRADIENTE — só onde representa avanço no tempo (pavio, barras de
   progresso, o risco da ignição). Em elemento estático, nunca.
   ================================================================ */

/* ---------------- A fonte da marca é local ----------------
   Anybody vinha do Google Fonts com display=optional. Resultado real,
   medido nos três motores: no Chromium ela não chegava dentro da
   janela do `optional` e a página inteira renderizava na substituta —
   o nome IMPULSO saía com a tipografia errada e o lema quebrava em 4
   linhas em vez de 2. WebKit e Firefox acertavam. Discrepância grave.

   Hospedada aqui (23 KB, só o corte que o site usa) e com <link
   rel="preload"> em cada página, ela está pronta antes da primeira
   pintura — então `optional` cumpre as duas promessas: a tipografia
   certa E zero deslocamento de layout.
   Licença: SIL Open Font License 1.1 (Etcetera Type Co.). */
@font-face {
  font-family: "Anybody";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62.5%;
  font-display: optional;
  src: url("../../assets/fontes/anybody-condensada-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anybody";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62.5%;
  font-display: optional;
  src: url("../../assets/fontes/anybody-condensada-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------- Fallbacks com métrica ajustada ----------------
   As fontes carregam com display=optional: o navegador NUNCA troca a
   fonte depois de pintar, e é isso que garante CLS 0 num hero de
   22vw. O preço seria uma primeira visita lenta caindo num fallback
   de largura completamente diferente — daí estes dois @font-face.

   Medidos no próprio navegador (largura de "IMPULSO" / font-size):
     Anybody wdth 62.5 → 3,847      Arial Narrow → 3,736
     Archivo (corpo)   → 22,255     Arial        → 24,771
   size-adjust = razão real / razão do fallback. */
@font-face {
  font-family: "AnybodySubstituta";
  src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Roboto Condensed"), local("Helvetica Neue Condensed Bold");
  size-adjust: 103%;       /* 3,847 / 3,736 */
  ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "ArchivoSubstituta";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 90%;        /* 22,255 / 24,771 */
  ascent-override: 94%; descent-override: 24%; line-gap-override: 0%;
}

:root {
  /* ---- Paleta: 7 tokens, cada um com UM papel ---- */
  --breu:    #0A0806;   /* base — fundo, e só                          */
  --fuligem: #14100B;   /* superfície elevada                          */
  --carvao:  #2A2015;   /* linha — toda borda e régua do site          */
  --cinza:   #9A8E7F;   /* texto secundário          6,24:1  AA        */
  --osso:    #F2ECE1;   /* texto principal          17,01:1  AAA       */
  --brasa:   #FF4A00;   /* ÚNICO destaque            5,93:1  AA        */
  --calor:   #E4B27E;   /* acolhimento e foco        9,82:1  AAA       */

  /* gradiente restrito a superfície que avança no tempo */
  --grad-fogo: linear-gradient(100deg, var(--brasa), #FF8A24);

  /* ---- Tipografia: quatro famílias, territórios separados ----
     display → a voz da marca (títulos)
     body    → tudo que se lê em frase
     mono    → DADO: hora, referência bíblica, contador, capítulo
     serif   → citação bíblica, e nada mais                       */
  --display: "Anybody", "AnybodySubstituta", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --body: "Archivo", "ArchivoSubstituta", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --serif: "Lora", Georgia, "Times New Roman", serif;

  /* ---- Escala fluida ---- */
  --t-h2: clamp(2.4rem, 8vw, 5.6rem);
  --t-h3: clamp(1.35rem, 3.4vw, 2.1rem);
  --t-body: clamp(1rem, .96rem + .25vw, 1.14rem);
  --t-label: .78rem;

  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --sec: clamp(5.5rem, 14vw, 11rem);

  --risco: -24deg;                              /* o ângulo. único.  */
  --ease: cubic-bezier(.16, 1, .3, 1);          /* layout: firme      */
  --ease-mola: cubic-bezier(.34, 1.45, .42, 1); /* micro-interação    */
}

/* ---------------- Base ---------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--breu);
  color: var(--osso);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* palavras/URLs muito longas nunca vazam do container */
p, h1, h2, h3, h4, li, blockquote, cite, span, a, b { overflow-wrap: break-word; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--brasa); color: var(--breu); }

/* foco em --calor: 9,82:1 contra o breu, visível sobre qualquer
   superfície do site, inclusive sobre o próprio laranja */
:focus-visible { outline: 2px solid var(--calor); outline-offset: 3px; }

h1, h2, h3, h4 { text-wrap: balance; }  /* títulos sem linha órfã */
p, blockquote { text-wrap: pretty; }     /* parágrafos sem viúvas  */

h1, h2, h3, .display {
  font-family: var(--display);
  font-stretch: 62.5%;
  font-variation-settings: "wdth" 62.5;  /* Safari antigo ignora font-stretch em VF */
  font-weight: 900;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: .005em;
}

.wrap { width: min(1280px, 100% - 2 * var(--pad)); margin-inline: auto; }

/* ---------------- Utilitários ---------------- */

/* RÓTULO — Archivo, não monoespaçado.
   O "eyebrow mono + tracking largo" é o padrão de UI mais copiado dos
   últimos anos; era o que fazia cada seção do site abrir igual. Mono
   agora só aparece onde existe DADO (.dado). */
.label {
  font-family: var(--body);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cinza);
}
.label--brasa { color: var(--brasa); }
.label--calor { color: var(--calor); }

/* DADO — número, hora, referência, contador. Aqui o mono trabalha. */
.dado {
  font-family: var(--mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--cinza);
}

/* o gesto, em miniatura */
.risco-mini {
  display: inline-block; width: 1.4em; height: 2px;
  background: var(--brasa); vertical-align: middle;
  transform: rotate(var(--risco)); margin-right: .6em;
}

.skip-link {
  position: fixed; top: -100px; left: var(--pad); z-index: 4000;
  background: var(--brasa); color: var(--breu);
  font-family: var(--body); font-weight: 600; font-size: .85rem;
  letter-spacing: .06em; padding: .7em 1.2em;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 12px; }

/* leitor de tela apenas */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------------- Botões ----------------
   Sem gradiente: o preenchimento do hover é o RISCO passando por
   dentro do botão, no mesmo ângulo de todo o resto do site. */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--body); font-weight: 600; font-size: .86rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 1.05em 1.8em; min-height: 44px;
  border: 1px solid var(--carvao); color: var(--osso);
  overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: -20%;
  background: var(--brasa);
  transform: translateX(-108%) skewX(var(--risco));
  transition: transform .5s var(--ease);
  z-index: -1;
}
.btn:hover, .btn:focus-visible { color: var(--breu); border-color: var(--brasa); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0) skewX(var(--risco)); }

.btn--brasa { background: var(--brasa); border-color: var(--brasa); color: var(--breu); }
.btn--brasa::before { background: var(--osso); }

.btn--fantasma { border-color: rgba(242, 236, 225, .25); }

/* ---------------- Header ---------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.rolou {
  background: color-mix(in srgb, var(--breu) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--carvao);
}
.header.escondido { transform: translateY(-100%); }
/* se o foco do teclado estiver dentro, o header NUNCA se esconde */
.header:focus-within { transform: none; }
.header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.logo { display: inline-flex; align-items: center; gap: .55rem; }
.logo svg { width: 30px; height: 30px; color: var(--brasa); }
.logo b {
  font-family: var(--display); font-stretch: 62.5%; font-weight: 900;
  font-size: 1.45rem; text-transform: uppercase; letter-spacing: .03em;
}

.nav { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav a {
  font-family: var(--body); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--cinza); position: relative;
  padding: .4em 0; transition: color .3s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--brasa); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover, .nav a:focus-visible { color: var(--osso); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a.nav--sos { color: var(--calor); }

.menu-btn { display: none; }

@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; gap: 0;
    background: var(--breu); padding: var(--pad);
    /* visibility (e não só clip-path) para o menu fechado sair também
       da ORDEM DE FOCO — senão o teclado percorre links invisíveis */
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .55s var(--ease), visibility 0s linear .55s;
  }
  body.menu-aberto .nav {
    visibility: visible; clip-path: inset(0 0 0% 0); z-index: 950;
    transition: clip-path .55s var(--ease), visibility 0s;
  }
  .nav a {
    font-family: var(--display); font-stretch: 62.5%; font-weight: 900;
    font-size: clamp(2.2rem, 10vw, 3.6rem); letter-spacing: .01em;
    color: var(--osso); border-bottom: 1px solid var(--carvao);
    padding: .35em 0;
    opacity: 0; transform: translateY(24px);
    transition: opacity .4s var(--ease), transform .5s var(--ease), color .3s;
  }
  body.menu-aberto .nav a { opacity: 1; transform: none; }
  .nav a:nth-child(1) { transition-delay: .10s; } .nav a:nth-child(2) { transition-delay: .14s; }
  .nav a:nth-child(3) { transition-delay: .18s; } .nav a:nth-child(4) { transition-delay: .22s; }
  .nav a:nth-child(5) { transition-delay: .26s; } .nav a:nth-child(6) { transition-delay: .30s; }
  .nav a:nth-child(7) { transition-delay: .34s; } .nav a:nth-child(8) { transition-delay: .38s; }
  .nav a::after { display: none; }

  .menu-btn {
    display: grid; place-items: center; width: 44px; height: 44px; z-index: 960;
  }
  .menu-btn span {
    position: relative; width: 24px; height: 2px; background: var(--osso);
    transition: background .3s;
  }
  .menu-btn span::before, .menu-btn span::after {
    content: ""; position: absolute; left: 0; width: 24px; height: 2px;
    background: var(--osso); transition: transform .4s var(--ease), top .4s var(--ease);
  }
  .menu-btn span::before { top: -7px; }
  .menu-btn span::after { top: 7px; }
  body.menu-aberto .menu-btn span { background: transparent; }
  body.menu-aberto .menu-btn span::before { top: 0; transform: rotate(45deg); }
  body.menu-aberto .menu-btn span::after { top: 0; transform: rotate(-45deg); }
}

/* ---------------- Ignição (o risco em escala máxima) ----------------
   As palavras do lema batem na tela em cortes secos e a lâmina
   revela o site. Toca UMA vez por aparelho (localStorage), não a
   cada aba: a segunda visita não deve custar o LCP de novo. */
.ignicao {
  position: fixed; inset: 0; z-index: 3000;
  background: #050403;
  display: grid; place-items: center;
}
.ignicao__palavras {
  position: relative; width: 100%;
  height: 1.2em;
  font-family: var(--display); font-stretch: 62.5%; font-weight: 900;
  font-size: clamp(3.6rem, 17vw, 12rem);
  text-transform: uppercase; line-height: 1;
}
.ignicao__palavra {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  visibility: hidden; color: var(--osso);
  letter-spacing: .01em;
}
.ignicao__palavra--vazada { color: transparent; -webkit-text-stroke: 2px var(--osso); }
.ignicao__palavra--brasa { color: var(--brasa); }
.ignicao__trilho {
  position: absolute; left: 50%; bottom: max(16%, 6.5rem); translate: -50% 0;
  width: min(300px, 56vw); height: 2px; background: var(--carvao);
}
.ignicao__trilho span {
  position: absolute; inset: 0;
  background: var(--grad-fogo);       /* avanço no tempo: pode gradiar */
  transform: scaleX(0); transform-origin: left center;
}
.ignicao__pular {
  position: absolute; top: max(var(--pad), env(safe-area-inset-top)); right: var(--pad);
  font-family: var(--body); font-weight: 600; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cinza);
  padding: .8em 1.2em; border: 1px solid var(--carvao); min-height: 44px;
  transition: color .3s, border-color .3s;
}
.ignicao__pular:hover, .ignicao__pular:focus-visible { color: var(--osso); border-color: var(--cinza); }

/* ---------------- Cortina (o risco como transição) ---------------- */
.cortina {
  position: fixed; inset: -12% -22%; z-index: 2900;
  background: #0d0a07;
  transform: translateX(-118%) skewX(var(--risco));
  pointer-events: none;
}
.cortina::after {   /* o fio de brasa é a marca deixada pelo corte */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 4px;
  background: var(--brasa);
}

/* ---------------- Pavio (o risco na vertical) ---------------- */
.pavio {
  position: fixed; top: 0; left: 0; bottom: 0; width: 3px; z-index: 800;
  background: rgba(42, 32, 21, .5);
  pointer-events: none;
}
/* O progresso é escrito numa única custom property (--p, de 0 a 1) e
   consumido só por `transform`. Antes o JS esticava `height` a cada
   quadro de scroll: propriedade de LAYOUT, ou seja, recálculo e
   repintura o tempo todo — e um resto de CLS medível. Agora tudo mora
   na camada de composição. */
.pavio__fogo {
  position: absolute; inset: 0;
  background: var(--grad-fogo);       /* avanço no tempo */
  transform: scaleY(var(--p, 0)); transform-origin: top center;
}
/* o "carro" cobre o trilho inteiro, então translateY(100%) percorre a
   barra de ponta a ponta — sem depender de vh, que mente no celular
   quando a barra do navegador aparece e some */
.pavio__carro {
  position: absolute; inset: 0;
  transform: translateY(calc(var(--p, 0) * 100%));
}
.pavio__brasa {
  position: absolute; top: 0; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brasa); translate: -50% -50%;
}
@media (max-width: 900px) { .pavio { width: 2px; } }

/* ---------------- Seções / títulos ---------------- */
.secao { padding-block: var(--sec); position: relative; }
.secao__cabeca { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.secao__cabeca .label { display: block; margin-bottom: 1.1rem; }
.secao__cabeca h2 { font-size: var(--t-h2); max-width: 14ch; }
.secao__cabeca h2 em { font-style: normal; color: var(--brasa); }
/* apagado → aceso: o título entra em cena como contorno e acende.
   É o conceito literal do sistema, aplicado ao texto. */
.js .secao__cabeca h2 {
  color: transparent; -webkit-text-stroke: 1px var(--carvao);
  transition: color .7s var(--ease), -webkit-text-stroke-color .7s var(--ease);
}
.js .secao__cabeca h2 em { color: transparent; }
.js .secao__cabeca h2.aceso { color: var(--osso); -webkit-text-stroke-color: transparent; }
.js .secao__cabeca h2.aceso em { color: var(--brasa); }

.linha { border: 0; border-top: 1px solid var(--carvao); }

/* ---------- FILA — o esqueleto compartilhado de Pilares e Servir ----------
   Duas seções que hoje diziam a mesma coisa com desenhos diferentes.
   Agora é uma gramática só: régua de 1px, palavra em display à
   esquerda, frase à direita. A variação --acao acrescenta o CTA.
   Zero card, zero grade de três, zero hover-gradiente. */
.fila { border-top: 1px solid var(--carvao); }
.fila__item {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 9fr);
  gap: clamp(.6rem, 4vw, 3rem); align-items: baseline;
  padding: clamp(1.5rem, 3.6vw, 2.4rem) 0;
  border-bottom: 1px solid var(--carvao);
  position: relative;
}
.fila__item h3 {
  font-size: clamp(1.7rem, 5.2vw, 3.1rem);
  transition: transform .45s var(--ease);
}
.fila__item p { color: var(--cinza); max-width: 46ch; }
/* a marca do hover é o RISCO subindo pela esquerda — não um brilho */
.fila__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--brasa);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .4s var(--ease);
}
.fila__item:hover::before, .fila__item:focus-within::before { transform: scaleY(1); }
.fila__item:hover h3 { transform: translateX(.12em); }

.fila--acao .fila__item {
  grid-template-columns: minmax(0, 6fr) minmax(0, 8fr) auto;
  align-items: center;
}
.fila--acao .fila__item .btn { white-space: nowrap; }

@media (max-width: 760px) {
  .fila__item, .fila--acao .fila__item {
    grid-template-columns: 1fr; gap: .7rem; align-items: start;
    padding-left: 1rem;
  }
  .fila--acao .fila__item .btn { margin-top: .5rem; }
}

/* Reveal padrão (JS adiciona .visivel) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .reveal.visivel { opacity: 1; transform: none; }
/* ARMADILHA DE TECLADO: um bloco animado para opacity 0 continua
   focável. Quem navega por Tab caía dentro de conteúdo invisível.
   Ao receber foco, o bloco aparece na hora — sem esperar o scroll. */
.js .reveal:focus-within { opacity: 1; transform: none; }

/* ---------- Moldura de foto provisória ----------
   Enquanto as fotos reais do Impulso não entram, o lugar delas não é
   ocupado por foto solta: é o sistema que segura o lugar.

   TRATAMENTO — a foto entra em preto e branco e o RISCO atravessa por
   cima dela, no mesmo ângulo do resto do site. É o que impede uma
   imagem de banco de dar a sensação de "colada ali": ela passa a ser
   material tratado, não ilustração avulsa. Quando as fotos do Impulso
   entrarem, o tratamento continua valendo — só troca o src.

   ESTADO VAZIO — sem <img>, a moldura mostra a nota com o
   enquadramento esperado. Se a foto falhar em carregar, o main.js
   remove o <img> e o estado vazio volta sozinho. */
.moldura { position: relative; background: var(--fuligem); border: 1px solid var(--carvao); overflow: hidden; }
.moldura img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.14) brightness(.72);
}
.moldura::before {   /* o risco — sobre a foto, ou sobre o vazio */
  content: ""; position: absolute; left: -20%; top: 50%; width: 140%; height: 2px;
  background: linear-gradient(to right, transparent, var(--brasa) 24%, var(--brasa) 76%, transparent);
  transform: rotate(var(--risco));
  z-index: 2; pointer-events: none;
}
.moldura::after {   /* fundo de baixo pra cima: encaixa a foto no breu */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--breu), transparent 58%);
}
.moldura__nota {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 3;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cinza); line-height: 1.5;
}
.moldura__nota b { color: var(--calor); font-weight: 400; }
/* com foto dentro, a nota do estado vazio sai de cena */
.moldura:has(img) .moldura__nota { display: none; }

/* legenda da foto — fica POR CIMA do tratamento */
.moldura figcaption {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
}

/* ---------------- Faixa SOS + Footer ---------------- */
.faixa-sos {
  background: #17110B;
  border-block: 1px solid var(--carvao);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.faixa-sos .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 2rem;
}
.faixa-sos h2 { font-size: clamp(1.8rem, 5vw, 3.2rem); max-width: 18ch; margin-top: .8rem; }
.faixa-sos p { color: var(--cinza); max-width: 44ch; margin-top: .9rem; }
.btn--sos {
  border: 1px solid var(--calor); color: var(--calor); border-radius: 999px;
}
.btn--sos::before { background: var(--calor); }
.btn--sos:hover, .btn--sos:focus-visible { color: #17110B; border-color: var(--calor); }

.footer { padding: clamp(3rem, 7vw, 5rem) 0 2rem; }
.footer__grade {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  padding-bottom: 3rem; border-bottom: 1px solid var(--carvao);
}
.footer h3 { font-size: 1rem; letter-spacing: .06em; margin-bottom: 1rem; }
.footer ul { list-style: none; display: grid; gap: .55rem; }
.footer a { color: var(--cinza); transition: color .3s; font-size: .95rem; }
.footer a:hover, .footer a:focus-visible { color: var(--osso); }
.footer a.footer--sos { color: var(--calor); }
.footer__base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-top: 1.6rem; color: var(--cinza);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
}
.footer__marca {
  font-family: var(--display); font-stretch: 62.5%; font-weight: 900;
  font-size: clamp(4rem, 16vw, 12rem); line-height: .8; text-transform: uppercase;
  color: var(--fuligem); -webkit-text-stroke: 1px var(--carvao);
  user-select: none; text-align: center; margin-top: 2.5rem; overflow: hidden;
}

/* ---------------- Micro-interação de toque ----------------
   O clique tem resposta física: o alvo "cede". Curto de propósito —
   é feedback, não animação. */
.btn:active, .chip:active, .prova__tamanho:active, .opcao:active:not(:disabled) {
  transform: scale(.975);
  transition-duration: .1s;
}

/* alvo de toque confortável no mobile */
@media (max-width: 480px) {
  .btn { padding: 1em 1.3em; font-size: .8rem; width: 100%; justify-content: center; }
  .participar__ctas .btn { width: 100%; }
  .footer__base { flex-direction: column; gap: .4rem; }
  :root { --sec: clamp(4.5rem, 16vw, 7rem); }
}

/* ---------------- Movimento reduzido ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cortina { display: none !important; }
  .js .secao__cabeca h2 { color: var(--osso); -webkit-text-stroke-color: transparent; }
  .js .secao__cabeca h2 em { color: var(--brasa); }
}

/* ---------- Alvo de toque (WCAG 2.2 · 2.5.8) ----------
   Links de lista e atalhos de cabeçalho eram caixas de 16–20px de
   altura. Passam dos 24px por padding próprio, sem mexer no ritmo
   visual: o texto continua no mesmo lugar. */
.footer ul a { display: inline-block; padding-block: .28rem; }
.header--ferramenta .voltar,
.header-atalhos a,
.estante__playlist,
.som-toggle { min-height: 26px; display: inline-flex; align-items: center; }

/* o CTA da agenda tem duas versões no HTML; a classe vem do <head> */
.cta-sexta { display: none; }
html.e-sexta .cta-padrao { display: none; }
html.e-sexta .cta-sexta { display: inline; }