/* ============================================================================
   GelaFood — folha única do site institucional.
   ----------------------------------------------------------------------------
   Sistema: creme como papel, roxo como tinta e estrutura, e um painel
   roxo-noite no topo e no rodapé onde o rosa e a menta da identidade podem
   finalmente aparecer. Cantos generosos e sombra rasa ecoam a geometria
   arredondada do logotipo; a camada monoespaçada carrega percentual, faixa e
   rótulo de referência — é dela que vem a cara técnica, não de um efeito.

   Regra de tema: TODA cor sai de token no `:root`. O bloco de
   `prefers-color-scheme: dark` redefine SÓ tokens, nunca componente. Cor
   declarada apenas dentro do media query não existe no estado claro — é o bug
   que pinta texto de um tema sobre o fundo do outro, e o workflow de deploy
   reprova o PR que o introduzir.

   CSP estrita (ver `website/_headers`): nada de `style=""`, `<style>`,
   `<script>` inline ou `on*=`. Nada de asset externo, o que inclui fonte do
   Google — daí a font stack de sistema logo abaixo.
   ========================================================================== */

/* ── CONTRASTE: as medições que mandam nesta folha ────────────────────────────
   Calculadas pela fórmula de luminância relativa da WCAG 2.x, não estimadas a
   olho. Estão escritas aqui para que ninguém "conserte" a paleta de volta para
   o que a identidade sugere e a régua reprova.

     rosa    #FF4F8B sobre creme #FFF6E9 ....  2,91:1  ✗ reprova até para texto grande
     menta   #61D1B6 sobre creme #FFF6E9 ....  1,73:1  ✗ praticamente invisível
     menta   #61D1B6 sobre branco #FFFFFF ...  1,86:1  ✗ reprova até como elemento gráfico
     roxo    #4B2E83 sobre creme #FFF6E9 ....  9,72:1  ✓
     grafite #2B2B2B sobre creme #FFF6E9 .... 13,22:1  ✓
     menta   #61D1B6 sobre roxo  #4B2E83 ....  5,60:1  ✓

   Consequência, e é uma regra dura: **rosa e menta nunca escrevem texto sobre
   fundo claro e nunca são preenchimento de destaque sobre fundo claro.** Texto
   usa roxo ou grafite. Onde a identidade pede rosa ou menta em texto claro,
   entram as duas variantes derivadas — mesma família, luminância corrigida:

     --gf-rosa-texto  #E2004D sobre creme ....  4,52:1  ✓ AA para texto normal
     --gf-menta-texto #257F69 sobre creme ....  4,54:1  ✓ AA para texto normal

   E é por isso que o cabeçalho, o herói e o rodapé ficam num painel escuro:
   sobre o roxo-noite #2A1A4A o rosa mede 5,01:1 e a menta 8,40:1, e as cores da
   marca podem ser elas mesmas sem falsificar a legibilidade.

     creme   #FFF6E9 sobre painel #2A1A4A ... 14,58:1  ✓
     lilás   #CDBFE4 sobre painel #2A1A4A ....  9,05:1  ✓
     rosa    #FF4F8B sobre painel #2A1A4A ....  5,01:1  ✓
     menta   #61D1B6 sobre painel #2A1A4A ....  8,40:1  ✓

   No tema escuro o rosa volta a ser o rosa puro da marca — sobre o papel
   #150E28 ele mede 5,99:1 e a variante escurecida seria desnecessária. As
   variantes derivadas existem para fundo CLARO; usá-las no escuro seria
   escurecer o que já está sobre preto.
   ────────────────────────────────────────────────────────────────────────── */

/* ── tokens ───────────────────────────────────────────────────────────── */
:root {
  /* paleta oficial da identidade — estes cinco NUNCA mudam de valor */
  --gf-roxo:        #4B2E83;
  --gf-rosa:        #FF4F8B;
  --gf-creme:       #FFF6E9;
  --gf-menta:       #61D1B6;
  --gf-grafite:     #2B2B2B;

  /* variantes derivadas: a única forma de rosa e menta virarem TEXTO em fundo
     claro sem reprovar. Não são cores novas da marca — são a mesma família com
     luminância corrigida, e só aparecem em texto. */
  --gf-rosa-texto:  #E2004D;
  --gf-menta-texto: #257F69;

  /* superfícies claras. `--papel-2` é mais CLARA que o papel, não mais escura:
     qualquer faixa alternada abaixo do creme derrubaria o rosa-texto para
     4,23:1, ou seja, abaixo da linha de corte. Alternar para cima resolve sem
     perder o ritmo de seções. */
  --papel:          #FFF6E9;
  --papel-2:        #FFFCF5;
  --card:           #FFFFFF;

  /* tinta */
  --tinta:          #2B2B2B;
  --tinta-2:        #4A4453;   /* 8,74:1 sobre creme */
  --tinta-3:        #6E6678;   /* 5,11:1 sobre creme */

  /* acentos semânticos */
  --acento:         #4B2E83;   /* linha, número, ênfase estrutural */
  --acento-contra:  #FFF6E9;   /* texto POR CIMA de um preenchimento `--acento` */
  --acento-suave:   #EDE7F6;   /* lavagem do acento; roxo por cima dá 8,60:1 */
  --faisca:         #E2004D;   /* o rosa quando ele precisa escrever */
  --menta-txt:      #257F69;   /* a menta quando ela precisa escrever */

  /* estrutura */
  --linha:          #EFE0C8;
  --linha-2:        #E3D0B0;
  --foco:           #4B2E83;
  --sombra:         0 1px 2px rgba(43, 43, 43, .05), 0 10px 30px rgba(75, 46, 131, .07);
  --sombra-2:       0 2px 4px rgba(43, 43, 43, .06), 0 18px 48px rgba(75, 46, 131, .11);

  /* painel roxo-noite: DELIBERADAMENTE igual nos dois temas. Ele não é "o fundo
     escuro do tema escuro" — é uma superfície da marca, o único lugar da página
     onde rosa e menta são legíveis. Se ele clareasse no tema claro, as duas
     cores perderiam o único fundo em que passam. */
  --painel:         #2A1A4A;
  --painel-2:       #211440;
  --painel-linha:   #453077;
  --tinta-painel:   #FFF6E9;
  --tinta-painel-2: #CDBFE4;

  /* símbolo (pote + G + pingo). A marca só aparece sobre o painel, então o pote
     é creme e a letra é vazada na cor do painel. */
  --marca-pote:     #FFF6E9;
  --marca-letra:    #2A1A4A;

  /* tipos. A Poppins é a fonte da identidade e NÃO está aqui: a CSP recusa
     `fonts.googleapis.com` e a página quebraria em produção funcionando ao
     abrir o arquivo local. A stack abaixo persegue a mesma geometria — grotesca
     humanista, terminações arredondadas — com o que já está instalado. Trocar
     pela Poppins de verdade exige auto-hospedar o arquivo da fonte dentro de
     `website/assets/`, com `font-src 'self'` já permitindo; é uma decisão de
     peso de página, não de estilo, e por isso fica registrada e não tomada. */
  --sans: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  /* medidas */
  --wrap:   76rem;
  --medida: 40rem;
  --raio:   .85rem;
  --raio-g: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:         #150E28;
    --papel-2:       #1C1233;
    --card:          #221741;

    --tinta:         #FFF6E9;   /* 17,43:1 sobre o papel escuro */
    --tinta-2:       #CDBFE4;   /* 10,81:1 */
    --tinta-3:       #9C8DB6;   /*  6,13:1 */

    --acento:        #61D1B6;   /* 10,04:1 — o roxo some no escuro, a menta assume */
    --acento-contra: #150E28;
    --acento-suave:  #1E1638;
    --faisca:        #FF4F8B;   /*  5,99:1 — o rosa puro já passa aqui */
    --menta-txt:     #61D1B6;

    --linha:         #2B1E4E;
    --linha-2:       #3B2A69;
    --foco:          #61D1B6;
    --sombra:        0 1px 2px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .35);
    --sombra-2:      0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .45);
  }
}

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

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

/* Quem pede menos movimento recebe o estado FINAL, não um quadro parado no
   começo: toda animação desta folha usa `both`, então zerar a duração entrega o
   resultado já montado. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Dentro do painel o roxo do foco valeria 1,47:1 e ninguém veria o anel. A
   menta sobre o painel mede 8,40:1. */
.painel :focus-visible { outline-color: var(--gf-menta); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--gf-roxo); color: var(--gf-creme);
  padding: .75rem 1.15rem; border-radius: 0 0 var(--raio) 0;
  font-family: var(--mono); font-size: .8rem;
  text-decoration: none;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

/* ── tipografia de serviço ────────────────────────────────────────────── */
.sobrancelha {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-painel-2);
  margin: 0 0 1.5rem;
}
.sobrancelha--escura { color: var(--menta-txt); }

.h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.028em;
  font-weight: 680;
  text-wrap: balance;
  margin: 0 0 1.1rem;
  max-width: 21ch;
}
.h2--largo { max-width: 32ch; }

.h3 {
  font-size: 1.08rem;
  font-weight: 660;
  letter-spacing: -.018em;
  margin: 0 0 .5rem;
  color: var(--tinta);
}

.lede {
  font-size: clamp(1.04rem, 1.5vw, 1.2rem);
  line-height: 1.62;
  color: var(--tinta-painel-2);
  margin: 0 0 1.5rem;
  max-width: var(--medida);
}
.lede--escuro { color: var(--tinta-2); max-width: 48rem; }

.fina {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--tinta-3);
  max-width: 52rem;
}
.fina b { color: var(--tinta-2); }
.fina--painel { color: var(--tinta-painel-2); }

/* ── painel roxo-noite ────────────────────────────────────────────────── */
.painel {
  background: var(--painel);
  color: var(--tinta-painel);
}
.painel b { color: var(--gf-creme); }

/* ── cabeçalho ────────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--painel-linha);
}
.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.3rem;
}

.marca {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--tinta-painel); text-decoration: none;
}
.marca:hover { color: var(--tinta-painel); }
.marca__glifo { display: inline-flex; }
.marca__pote  { fill: var(--marca-pote); }
.marca__bola  { fill: var(--gf-rosa); }
.marca__pingo { fill: var(--gf-rosa); }
.marca__letra { stroke: var(--marca-letra); }

/* O logotipo escreve "Gela" e "Food" em pesos e cores diferentes. Aqui o
   segundo termo usa o rosa da marca — legítimo porque o fundo é o painel
   escuro (5,01:1). `<i>` está semanticamente correto: é uma distinção
   tipográfica de nome próprio, não ênfase, e por isso o itálico é removido. */
.marca__palavra {
  font-size: 1.2rem; letter-spacing: -.025em;
}
.marca__palavra b { font-weight: 700; color: var(--tinta-painel); }
.marca__palavra i { font-style: normal; font-weight: 700; color: var(--gf-rosa); }

.masthead__nav { display: flex; align-items: center; gap: 1.4rem; }
.masthead__nav a {
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .03em;
  color: var(--tinta-painel-2); text-decoration: none;
}
.masthead__nav a:hover { color: var(--gf-creme); }
.masthead__cta {
  border: 1px solid var(--painel-linha);
  border-radius: 100px;
  padding: .45rem .95rem;
  color: var(--gf-creme);
}
.masthead__cta:hover { background: var(--gf-menta); color: var(--gf-grafite); border-color: var(--gf-menta); }

@media (max-width: 860px) {
  .masthead__nav a:not(.masthead__cta) { display: none; }
}

/* ── herói ────────────────────────────────────────────────────────────── */
.heroi {
  padding-block: clamp(3.2rem, 8vw, 6.5rem) clamp(3.5rem, 9vw, 7rem);
  border-bottom-left-radius: var(--raio-g);
  border-bottom-right-radius: var(--raio-g);
}

.heroi__in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 980px) {
  .heroi__in { grid-template-columns: minmax(0, 1fr); }
}

.heroi__titulo {
  font-size: clamp(2.3rem, 6.2vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -.042em;
  font-weight: 700;
  text-wrap: balance;
  margin: 0 0 1.4rem;
  color: var(--gf-creme);
}

.heroi__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }

.botao {
  display: inline-block;
  font-family: var(--mono);
  font-size: .82rem; letter-spacing: .02em;
  padding: .85rem 1.35rem;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
/* Menta preenchida com rótulo em grafite: 7,62:1. É a combinação de destaque
   mais forte que a paleta permite, e ela só existe porque o fundo é escuro. */
.botao--forte { background: var(--gf-menta); color: var(--gf-grafite); }
.botao--forte:hover { background: var(--gf-creme); color: var(--gf-grafite); }
.botao--vazado { border-color: var(--painel-linha); color: var(--gf-creme); }
.botao--vazado:hover { border-color: var(--gf-creme); background: var(--gf-creme); color: var(--painel); }

.nota {
  font-size: .88rem; line-height: 1.6;
  color: var(--tinta-painel-2);
  border-left: 3px solid var(--gf-rosa);
  padding-left: 1rem;
  max-width: 36rem;
  margin: 0;
}

/* ── a leitura de balanceamento (peça do herói) ───────────────────────── */
.leitura {
  margin: 0;
  background: var(--painel-2);
  border: 1px solid var(--painel-linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.leitura__topo {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.15rem;
  border-bottom: 1px solid var(--painel-linha);
}
.etiqueta {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gf-menta);
}
.etiqueta--fraca { color: var(--tinta-painel-2); }

.med { list-style: none; margin: 0; padding: .35rem 1.15rem 1.15rem; }
.med__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "rot val" "barra barra" "ref ref";
  column-gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--painel-linha);
}
.med__item:last-child { border-bottom: 0; }
.med--sem { grid-template-areas: "rot val" "ref ref"; }

.med__rot {
  grid-area: rot; margin: 0;
  font-size: .92rem; color: var(--tinta-painel);
}
.med__val {
  grid-area: val; margin: 0;
  font-family: var(--mono);
  font-size: 1.15rem; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--gf-creme);
}
.med__val span { font-size: .8rem; color: var(--tinta-painel-2); }
.med__ref {
  grid-area: ref; margin: .45rem 0 0;
  font-family: var(--mono); font-size: .7rem; line-height: 1.5;
  color: var(--tinta-painel-2);
}
.med__ref b { color: var(--gf-rosa); }

.med__barra {
  grid-area: barra;
  position: relative;
  height: .5rem;
  margin-top: .7rem;
  border-radius: 100px;
  background: var(--painel-linha);
}
/* A faixa de referência é um trecho da barra, não a barra inteira: é isso que
   deixa visível o quanto de folga existe antes de sair dela. */
.med__faixa {
  position: absolute; top: 0; bottom: 0;
  border-radius: 100px;
  background: var(--gf-menta);
  opacity: .55;
  animation: crescer .7s ease-out both;
}
.med__pino {
  position: absolute; top: 50%;
  width: .78rem; height: .78rem;
  margin-top: -.39rem; margin-left: -.39rem;
  border-radius: 50%;
  background: var(--gf-creme);
  box-shadow: 0 0 0 3px var(--painel-2);
  animation: aparecer .45s ease-out .35s both;
}
.med--fora .med__pino { background: var(--gf-rosa); }

@keyframes crescer  { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
@keyframes aparecer { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* Posição da faixa e do pino, indicador por indicador. Vivem no CSS e não num
   `style=""` porque a CSP recusa atributo de estilo — e, de quebra, a conta
   fica escrita ao lado, que é onde ela pode ser conferida.

   escala = intervalo que a barra inteira representa
   esquerda da faixa = (mínimo − escala_min) / amplitude
   largura da faixa  = (máximo − mínimo)     / amplitude
   posição do pino   = (valor  − escala_min) / amplitude                    */

/* Sólidos totais · escala 28–46 (amplitude 18) · faixa 32–42 · valor 36,40
   faixa: (32−28)/18 = 22,22 %   largura: 10/18 = 55,56 %
   pino:  (36,40−28)/18 = 46,67 %                                          */
.med--st  .med__faixa { left: 22.22%; width: 55.56%; }
.med--st  .med__pino  { left: 46.67%; }

/* Gordura · escala 0–16 (amplitude 16) · faixa 4–10 · valor 12,80 (ACIMA)
   faixa: 4/16 = 25 %   largura: 6/16 = 37,5 %
   pino:  12,80/16 = 80 %                                                  */
.med--gord .med__faixa { left: 25%; width: 37.5%; }
.med--gord .med__pino  { left: 80%; }

/* Açúcares · escala 12–26 (amplitude 14) · faixa 16–22 · valor 18,60
   faixa: 4/14 = 28,57 %   largura: 6/14 = 42,86 %
   pino:  6,60/14 = 47,14 %                                                */
.med--acu .med__faixa { left: 28.57%; width: 42.86%; }
.med--acu .med__pino  { left: 47.14%; }

/* SNG · escala 4–16 (amplitude 12) · faixa 8–12 · valor 9,40
   faixa: 4/12 = 33,33 %   largura: 4/12 = 33,33 %
   pino:  5,40/12 = 45 %                                                   */
.med--sng .med__faixa { left: 33.33%; width: 33.33%; }
.med--sng .med__pino  { left: 45%; }

.leitura__pe {
  padding: 1rem 1.15rem 1.2rem;
  border-top: 1px solid var(--painel-linha);
  background: var(--painel);
  font-size: .8rem; line-height: 1.6;
  color: var(--tinta-painel-2);
}
.leitura__pe b { color: var(--gf-creme); }

/* ── faixas de conteúdo ───────────────────────────────────────────────── */
.faixa { padding-block: clamp(3.5rem, 8vw, 6rem); }
.faixa--alt { background: var(--papel-2); border-block: 1px solid var(--linha); }
.faixa--fecho { border-top: 1px solid var(--linha); }

/* ── cartões ──────────────────────────────────────────────────────────── */
.cartoes {
  display: grid;
  gap: 1.15rem;
  margin-top: 2.5rem;
}
.cartoes--tres { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.cartoes--dois { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }

.cartao {
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  box-shadow: var(--sombra);
}
.cartao p { margin: 0; color: var(--tinta-2); font-size: .95rem; }
.cartao__h {
  font-size: 1.15rem; font-weight: 660; letter-spacing: -.02em;
  margin: 0 0 .6rem; color: var(--tinta);
}
.cartao__idx {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .14em;
  color: var(--faisca);
  margin: 0 0 .5rem !important;
}
.cartao__regra {
  margin-top: 1rem !important;
  padding-top: .85rem;
  border-top: 1px solid var(--linha);
  font-size: .84rem !important;
  line-height: 1.55;
  color: var(--tinta-3) !important;
}

/* ── declaração em destaque ───────────────────────────────────────────── */
.declaracao {
  margin: 2.2rem 0;
  padding: clamp(1.3rem, 3vw, 1.8rem) clamp(1.3rem, 3vw, 2rem);
  border-radius: var(--raio-g);
  background: var(--acento-suave);
  border-left: 5px solid var(--acento);
}
.declaracao--forte { border-left-color: var(--faisca); }
.declaracao__p {
  margin: 0;
  font-size: clamp(1.02rem, 1.7vw, 1.15rem);
  line-height: 1.58;
  color: var(--tinta);
  max-width: 52rem;
}

/* ── tabelas ──────────────────────────────────────────────────────────── */
.tabela { overflow-x: auto; margin: 2.4rem 0 1.8rem; }
.tabela table {
  width: 100%; min-width: 42rem;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.tabela th, .tabela td {
  text-align: left; vertical-align: top;
  padding: .95rem 1.15rem;
  border-bottom: 1px solid var(--linha);
  font-size: .93rem; line-height: 1.55;
}
.tabela thead th {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 500;
  background: var(--acento-suave);
  color: var(--acento);
}
.tabela tbody th { font-weight: 640; color: var(--tinta); width: 12rem; }
.tabela td { color: var(--tinta-2); }
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta) !important; }
.num--sem { color: var(--faisca) !important; white-space: normal; }

.tabela--razao thead th:first-child { color: var(--menta-txt); }
.tabela--razao thead th:last-child  { color: var(--faisca); }
.tabela--razao td:first-child { color: var(--tinta); }

/* ── par de colunas ───────────────────────────────────────────────────── */
.par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.2rem;
}
.par p { margin: 0; color: var(--tinta-2); font-size: .95rem; }
.par b { color: var(--tinta); }

/* ── fases ────────────────────────────────────────────────────────────── */
.fases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.15rem;
  margin-top: 2.4rem;
}
.fase {
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 1.5rem;
  box-shadow: var(--sombra);
}
.fase p { margin: 0; color: var(--tinta-2); font-size: .92rem; }
.fase__n {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3) !important;
  margin-bottom: .4rem !important;
}
.fase__h { font-size: 1.05rem; font-weight: 660; letter-spacing: -.018em; margin: 0 0 .55rem; }
.fase__estado {
  margin-top: .9rem !important;
  padding-top: .75rem;
  border-top: 1px solid var(--linha);
  font-family: var(--mono); font-size: .72rem; line-height: 1.5;
  color: var(--tinta-3) !important;
}
/* A fase ativa é a única com acento. Marcar as quatro seria dizer que as quatro
   existem — que é exatamente a afirmação que este site não faz. */
.fase--ativa { border-color: var(--acento); box-shadow: var(--sombra-2); }
.fase--ativa .fase__n { color: var(--acento) !important; }
.fase--ativa .fase__estado { color: var(--menta-txt) !important; }

/* ── contato ──────────────────────────────────────────────────────────── */
.contato__mail {
  font-family: var(--mono);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: -.01em;
  color: var(--faisca);
  background: var(--acento-suave);
  border: 1px dashed var(--linha-2);
  border-radius: var(--raio);
  padding: .9rem 1.1rem;
  margin: 0 0 1rem;
  display: inline-block;
  overflow-wrap: anywhere;
}

/* ── rodapé ───────────────────────────────────────────────────────────── */
.rodape {
  padding-block: 3rem 3.5rem;
  border-top-left-radius: var(--raio-g);
  border-top-right-radius: var(--raio-g);
}
.rodape__in {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 2rem;
}
@media (max-width: 760px) { .rodape__in { grid-template-columns: minmax(0, 1fr); } }

.rodape__palavra { margin: 0; font-size: 1.2rem; letter-spacing: -.025em; }
.rodape__palavra b { font-weight: 700; color: var(--tinta-painel); }
.rodape__palavra i { font-style: normal; font-weight: 700; color: var(--gf-rosa); }
.rodape__por { margin: .3rem 0 0; font-family: var(--mono); font-size: .74rem; color: var(--gf-menta); }
.rodape__meta p { margin: 0 0 .8rem; font-size: .88rem; color: var(--tinta-painel-2); max-width: 46rem; }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.erro { padding-block: clamp(4rem, 12vw, 8rem); }
.erro__cod {
  font-family: var(--mono);
  font-size: clamp(3rem, 10vw, 5rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--faisca);
  margin: 0 0 1rem;
}
.erro .botao--forte { background: var(--acento); color: var(--acento-contra); }
.erro .botao--forte:hover { background: var(--tinta); color: var(--papel); }
.erro .botao--vazado { border-color: var(--linha-2); color: var(--tinta); }
.erro .botao--vazado:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }