/* ============================================================
   NTHFIT — index.css (CSS específico da HOME)
   Usa somente tokens/classes de base.css + estilos das seções §5.
   Mobile-first. Breakpoints: 480 / 768 / 1024 / 1280.
   ============================================================ */

/* ==========================================================
   HERO — §5.1
   ========================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--nth-preto-puro);
  padding-top: calc(var(--nth-header-h) + var(--nth-esp-5));
}

/* Uma linha diagonal vermelha fina atravessando a tela */
.hero__diagonal {
  position: absolute;
  top: 50%; left: 50%;
  width: 240vmax;
  height: 2px;
  background: var(--nth-vermelho);
  opacity: .5;
  /* Mesma convenção do itálico da marca e do checkout: -12° */
  transform: translate(-50%, -50%) rotate(var(--nth-angulo));
  pointer-events: none;
}

.hero__miolo {
  position: relative;
  width: 100%;
  margin-block: auto;
  padding-block: var(--nth-esp-5);
}

.hero__titulo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.85;
  margin: 0;
}

.hero__linha {
  display: inline-block;
  white-space: nowrap;   /* nenhuma linha do hero quebra em duas */
  font-family: var(--nth-fonte-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.85;
}

.hero__linha--seu {
  font-size: var(--nth-fs-hero-2);
  font-variation-settings: 'wdth' 80;
  color: var(--nth-branco);
}

/* A BARRA — a palavra levantável (botão real, reset de estilos) */
.hero__linha--barra {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--nth-fs-hero);
  color: var(--nth-vermelho);
  font-variation-settings: 'wght' 900, 'wdth' 125;
  transform: skewX(var(--nth-angulo));
  transform-origin: left bottom;
  will-change: font-variation-settings, transform;
}
.hero__linha--barra:active { cursor: grabbing; }

/* Micro-flexão de descoberta (a cada 6s até a 1ª rep) */
.hero__linha--barra.flexiona { animation: hero-flexao 300ms ease-in-out 1; }
@keyframes hero-flexao {
  0%, 100% { font-variation-settings: 'wght' 900, 'wdth' 125; }
  50%      { font-variation-settings: 'wght' 700, 'wdth' 125; }
}

/* Slam (§5.1.4) — squash & settle, 260ms impacto.
   Keyframes próprios que COMPÕEM o skewX: os nth-slam de base.css
   perderiam o eixo itálico de -12° durante o impacto. */
.hero__linha--barra.slam {
  animation: hero-slam 260ms var(--nth-ease-impacto) 1;
}
@keyframes hero-slam {
  0%   { transform: skewX(var(--nth-angulo)) translateY(-6px) scale(1, 1); }
  55%  { transform: skewX(var(--nth-angulo)) translateY(8px) scale(1.1, 0.9); }
  100% { transform: skewX(var(--nth-angulo)) translateY(0) scale(1, 1); }
}

.hero__linha--nivel {
  font-size: var(--nth-fs-hero-2);
  color: var(--nth-texto-medio);
}
@supports (-webkit-text-stroke: 2px #fff) {
  .hero__linha--nivel {
    color: transparent;
    -webkit-text-stroke: 2px var(--nth-texto-forte);
  }
}

/* Entrada no load: linhas deslizam de lados alternados com clip-path (§5.1) */
.js .hero__linha--seu,
.js .hero__linha--barra,
.js .hero__linha--nivel {
  clip-path: inset(0 0 0 0);
}
.js .hero:not(.hero--pronta) .hero__linha--seu {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-24px);
}
.js .hero:not(.hero--pronta) .hero__linha--barra {
  clip-path: inset(0 0 0 100%);
  transform: skewX(var(--nth-angulo)) translateX(24px);
}
.js .hero:not(.hero--pronta) .hero__linha--nivel {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-24px);
}
.js .hero--pronta .hero__linha--seu {
  transition: clip-path var(--nth-t-entrada) var(--nth-ease-saida),
              transform var(--nth-t-entrada) var(--nth-ease-saida);
}
.js .hero--pronta .hero__linha--barra {
  transition: clip-path var(--nth-t-entrada) var(--nth-ease-saida) 120ms,
              transform var(--nth-t-entrada) var(--nth-ease-saida) 120ms;
}
.js .hero--pronta .hero__linha--nivel {
  transition: clip-path var(--nth-t-entrada) var(--nth-ease-saida) 240ms,
              transform var(--nth-t-entrada) var(--nth-ease-saida) 240ms;
}
.js .hero--pronta .hero__sub,
.js .hero--pronta .hero__ident,
.js .hero--pronta .hero__ctas,
.js .hero--pronta .hero__micro {
  animation: hero-surge 400ms var(--nth-ease-saida) both;
}
@keyframes hero-surge {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Barra de esforço: faixa vermelha sob A BARRA */
.hero__esforco {
  display: block;
  width: min(100%, 34rem);
  height: 6px;
  margin-top: var(--nth-esp-3);
  background: var(--nth-superficie-2);
  overflow: hidden;
}
.hero__esforco-fill {
  display: block;
  height: 100%;
  background: var(--nth-vermelho);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__ident {
  margin-top: var(--nth-esp-4);
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.14em;
  color: var(--nth-texto-medio);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nth-esp-2) var(--nth-esp-4);
}

/* Status vivo — bolinha pulsa quando aberto */
.hero__status { color: var(--nth-texto-medio); white-space: nowrap; }
.hero__status.aberto { color: var(--nth-vermelho-texto); }
.hero__status.aberto::first-letter { color: var(--nth-vermelho-texto); }
.hero__status.aberto { animation: status-pulso 2s ease-in-out infinite; }
@keyframes status-pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: .65; }
}

.hero__sub {
  margin-top: var(--nth-esp-3);
  max-width: 38rem;
  color: var(--nth-texto-forte);
}

/* Chip-instrução pulsante */
.hero__dica {
  display: inline-block;
  margin-top: var(--nth-esp-4);
  padding: var(--nth-esp-1) var(--nth-esp-2);
  border: 1px solid var(--nth-vermelho-texto);
  color: var(--nth-vermelho-texto);
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.1em;
  animation: nth-pulso 1.6s ease-in-out infinite;
}

.hero__placar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nth-esp-3);
  margin-top: var(--nth-esp-3);
}
.hero__reps {
  font-size: var(--nth-fs-mono-corpo);
  letter-spacing: 0.14em;
  color: var(--nth-texto-forte);
}
.hero__recorde { color: var(--nth-texto-medio); font-size: var(--nth-fs-mono); letter-spacing: 0.08em; }
.hero__carimbo-pr { font-size: var(--nth-fs-mono); }

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--nth-esp-3);
  margin-top: var(--nth-esp-5);
}
.hero__micro {
  margin-top: var(--nth-esp-3);
  font-size: var(--nth-fs-mono);
  color: var(--nth-texto-medio);
  letter-spacing: 0.04em;
}

.hero__desce {
  position: relative;
  text-align: center;
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.2em;
  color: var(--nth-texto-medio);
  margin-bottom: var(--nth-esp-3);
  animation: nth-quique 1.2s ease-in-out infinite;
}

.hero__marquee {
  border-top: 1px solid var(--nth-borda);
  padding-block: var(--nth-esp-3);
  font-size: clamp(1.1rem, 4vw, 1.9rem);
  color: var(--nth-texto-forte);
}

/* Carimbos efêmeros: "+1 REP" e "BORA." */
.carimbo-rep,
.carimbo-bora {
  position: absolute;
  z-index: 5;
  font-family: var(--nth-fonte-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nth-vermelho-texto);
  pointer-events: none;
  white-space: nowrap;
  animation: nth-surge-some 900ms var(--nth-ease-saida) forwards;
}
/* "+1 REP" tem vida própria: surge rápido, SEGURA visível e só
   desvanece no fim (o keyframe compartilhado sumia cedo demais) */
.carimbo-rep {
  animation: rep-surge 2000ms var(--nth-ease-saida) forwards;
  font-size: 1.1rem;
}
@keyframes rep-surge {
  0%   { opacity: 0; transform: translateY(0) rotate(var(--nth-angulo)) scale(.8); }
  8%   { opacity: 1; transform: translateY(-5px) rotate(var(--nth-angulo)) scale(1.08); }
  14%  { transform: translateY(-7px) rotate(var(--nth-angulo)) scale(1); }
  75%  { opacity: 1; transform: translateY(-12px) rotate(var(--nth-angulo)) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) rotate(var(--nth-angulo)) scale(1); }
}

/* Micro-shake do body no slam (aplicado num wrapper via classe no html) */
.treme main { animation: nth-shake 120ms linear 3; }

@media (min-width: 768px) {
  .hero__ctas { flex-direction: row; align-items: center; }
}

/* ==========================================================
   SEÇÕES — base comum
   ========================================================== */
.secao-sub {
  margin-top: var(--nth-esp-3);
  max-width: 40rem;
  color: var(--nth-texto-medio);
}
.secao-fecho {
  margin-top: var(--nth-esp-4);
  color: var(--nth-texto-fraco);
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.06em;
}
.nth-container--estreito { max-width: 48rem; }

.faixa-honestidade {
  margin-top: var(--nth-esp-6);
  padding: var(--nth-esp-3);
  border: 1px solid var(--nth-borda);
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.1em;
  color: var(--nth-texto-medio);
  text-align: center;
  text-transform: uppercase;
}

/* ==========================================================
   REGRAS DA CASA — §5.2
   ========================================================== */
.regras__grid {
  display: grid;
  gap: var(--nth-esp-6);
  margin-top: var(--nth-esp-6);
}
.regra__numero {
  display: block;
  font-family: var(--nth-fonte-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 62;
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 0.85;
  color: var(--nth-vermelho);
}
.regra__titulo {
  margin-top: var(--nth-esp-3);
  font-weight: 800;
  font-variation-settings: 'wdth' 110;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}
.regra__texto { margin-top: var(--nth-esp-2); color: var(--nth-texto-medio); }

@media (min-width: 768px) {
  .regras__grid { grid-template-columns: repeat(3, 1fr); gap: var(--nth-esp-5); }
}

/* ==========================================================
   MARQUEE-MANIFESTO — §5.3
   ========================================================== */
.manifesto-marquee {
  overflow: hidden;
  border-block: 1px solid var(--nth-borda);
  padding-block: var(--nth-esp-4);
  display: grid;
  gap: var(--nth-esp-2);
}
.nth-marquee--reversa .nth-marquee__faixa { animation-direction: reverse; }
.manifesto-marquee__solida {
  font-size: clamp(1.6rem, 6vw, 3.4rem);
  color: var(--nth-branco);
}
.manifesto-marquee__vazada {
  font-size: clamp(1.6rem, 6vw, 3.4rem);
  color: var(--nth-texto-medio);
}
@supports (-webkit-text-stroke: 2px #fff) {
  .manifesto-marquee__vazada {
    color: transparent;
    -webkit-text-stroke: 2px var(--nth-texto-forte);
  }
}

/* ==========================================================
   MODALIDADES — §5.4 (acordeão tipográfico)
   ========================================================== */
.acordeao { margin-top: var(--nth-esp-6); border-top: 1px solid var(--nth-borda); }
.acordeao__item { border-bottom: 1px solid var(--nth-borda); }
.acordeao__titulo { margin: 0; }

.acordeao__botao {
  display: flex;
  align-items: center;
  gap: var(--nth-esp-3);
  width: 100%;
  padding: var(--nth-esp-4) 0;
  text-align: left;
  color: var(--nth-texto-medio);
}
.acordeao__icone { flex-shrink: 0; color: currentColor; }
.acordeao__nome {
  font-family: var(--nth-fonte-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 80;
  text-transform: uppercase;
  line-height: 0.9;
  font-size: var(--nth-fs-h3);
  letter-spacing: -0.01em;
  transition: font-variation-settings var(--nth-t-medio) var(--nth-ease-saida),
              color var(--nth-t-medio) var(--nth-ease-saida);
}
.acordeao__botao:hover .acordeao__nome,
.acordeao__botao:focus-visible .acordeao__nome { color: var(--nth-texto-forte); }

.acordeao__item--ativo .acordeao__botao { color: var(--nth-vermelho); }
.acordeao__item--ativo .acordeao__nome {
  font-variation-settings: 'wdth' 125;
  color: var(--nth-vermelho);
  font-size: clamp(1.9rem, 7vw, 4rem);
}

/* Painel: grid-rows 0fr→1fr (300ms). Sem JS: aberto. */
.js .acordeao__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--nth-t-medio) var(--nth-ease-saida);
}
.js .acordeao__item--ativo .acordeao__painel { grid-template-rows: 1fr; }
.js .acordeao__conteudo { overflow: hidden; }
.acordeao__conteudo { max-width: 44rem; }
.acordeao__conteudo p:first-child { margin-top: 0; color: var(--nth-texto-forte); }
.acordeao__conteudo { padding-bottom: 0; }
.js .acordeao__item--ativo .acordeao__conteudo { padding-bottom: var(--nth-esp-4); }
.acordeao__horarios {
  margin-top: var(--nth-esp-2);
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.1em;
  color: var(--nth-vermelho-texto);
  text-transform: uppercase;
}

.embreve { margin-top: var(--nth-esp-6); }
.embreve__card { display: grid; gap: var(--nth-esp-2); justify-items: start; }
.embreve__nome { font-size: var(--nth-fs-h3); color: var(--nth-texto-fraco); }
.embreve__linha { font-size: var(--nth-fs-mono); letter-spacing: 0.1em; color: var(--nth-texto-fraco); }

/* ==========================================================
   ESTRUTURA — §5.5
   ========================================================== */
.secao-estrutura { overflow: hidden; }
.secao-estrutura__fantasma { top: 10%; right: -4%; }
.ficha-tecnica { margin-top: var(--nth-esp-6); max-width: 44rem; position: relative; }

/* ==========================================================
   PLANOS — §5.6
   ========================================================== */

/* Mini-diagnóstico */
.diagnostico {
  margin-top: var(--nth-esp-6);
  background: var(--nth-superficie-1);
  border: 1px solid var(--nth-borda);
}
.diagnostico__summary {
  cursor: pointer;
  list-style: none;
  padding: var(--nth-esp-4);
  font-family: var(--nth-fonte-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 110;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.diagnostico__summary::-webkit-details-marker { display: none; }
.diagnostico__summary:hover { color: var(--nth-vermelho-texto); }
.diagnostico__form {
  display: grid;
  gap: var(--nth-esp-4);
  padding: 0 var(--nth-esp-4) var(--nth-esp-4);
}
.diagnostico__pergunta legend {
  font-family: var(--nth-fonte-mono);
  font-weight: 500;
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nth-texto-medio);
  margin-bottom: var(--nth-esp-2);
}
.diagnostico__pills { display: flex; flex-wrap: wrap; gap: var(--nth-esp-2); }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--nth-esp-2) var(--nth-esp-3);
  border: 2px solid var(--nth-borda);
  color: var(--nth-texto-forte);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9375rem;
}
.pill:hover { border-color: var(--nth-texto-medio); }
input:checked + .pill {
  border-color: var(--nth-vermelho);
  background: var(--nth-superficie-2);
  color: var(--nth-branco);
}
input:focus-visible + .pill {
  outline: 3px solid var(--nth-vermelho-hover);
  outline-offset: 3px;
}

/* Seletor de período: a barra olímpica */
.periodo { margin-top: var(--nth-esp-6); }
.periodo__conjunto { position: relative; }
.periodo__barra {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 56px;
  color: var(--nth-texto-fraco);
  pointer-events: none;
}
.periodo__barra-flex {
  transform-origin: center;
  transition: transform var(--nth-t-rapido) var(--nth-ease-impacto);
}
.periodo__barra-flex.verga { transform: scaleY(1.06); }

.periodo__anilhas {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--nth-esp-2);
  max-width: 40rem;
  margin-inline: auto;
}
.periodo__opcao { display: block; }
.periodo__anilha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: clamp(88px, 26vw, 128px);
  height: clamp(88px, 26vw, 128px);
  border-radius: 50%;
  border: 3px solid var(--nth-borda);
  background: var(--nth-superficie-1);
  color: var(--nth-texto-medio);
  cursor: pointer;
  text-align: center;
  font-family: var(--nth-fonte-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 90;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  transition: border-color var(--nth-t-rapido) var(--nth-ease-saida),
              color var(--nth-t-rapido) var(--nth-ease-saida);
}
.periodo__pct { font-size: 0.75rem; color: var(--nth-vermelho-texto); min-height: 1em; }
.periodo__anilha:hover { border-color: var(--nth-texto-medio); }

/* Anilha encaixa com CLANK: snap sem easing */
input:checked + .periodo__anilha {
  border-color: var(--nth-vermelho);
  border-width: 6px;
  background: var(--nth-superficie-2);
  color: var(--nth-branco);
  transform: translateY(4px);
  transition: none;
}
input:focus-visible + .periodo__anilha {
  outline: 3px solid var(--nth-vermelho-hover);
  outline-offset: 3px;
}
.periodo__micro {
  margin-top: var(--nth-esp-4);
  text-align: center;
  font-size: var(--nth-fs-mono);
  color: var(--nth-texto-medio);
  letter-spacing: 0.06em;
}

/* Cards */
.planos__grid {
  display: grid;
  gap: var(--nth-esp-4);
  margin-top: var(--nth-esp-6);
  align-items: start;
}
.plano { display: flex; flex-direction: column; gap: var(--nth-esp-3); }
.plano__selo { position: absolute; top: var(--nth-esp-3); right: var(--nth-esp-3); }
.plano__nome { font-size: var(--nth-fs-h3); }
.plano--destaque .plano__nome { color: var(--nth-vermelho); }
/* Pulso compositável (§2.5): loop infinito só com transform/opacity —
   animar font-variation-settings forçaria layout+paint contínuos */
.plano__nome--pulso {
  animation: plano-pulso 2s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes plano-pulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
.plano__slogan { font-style: italic; color: var(--nth-texto-medio); }
.plano__de {
  text-decoration: line-through;
  color: var(--nth-texto-fraco);
  font-size: var(--nth-fs-mono-corpo);
  margin-bottom: calc(var(--nth-esp-2) * -1);
}
.plano__preco {
  display: flex;
  align-items: baseline;
  gap: var(--nth-esp-2);
  line-height: 1;
}
.plano__moeda { font-size: 1.1rem; color: var(--nth-texto-medio); }
.plano__mes { font-size: var(--nth-fs-mono-corpo); color: var(--nth-texto-medio); }

/* Odômetro: colunas de dígito 0–9 (§9.6) */
.plano__odometro {
  display: inline-flex;
  align-items: baseline;
  font-size: var(--nth-fs-preco);
  font-weight: 700;
  color: var(--nth-branco);
  line-height: 1;
}
.odometro__coluna {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}
.odometro__tira {
  display: block;
  transition: transform var(--nth-t-entrada) var(--nth-ease-saida);
}
.odometro__tira span { display: block; height: 1em; line-height: 1; }
.odometro__fixo { display: inline-block; }

.plano__economia { margin-top: calc(var(--nth-esp-2) * -1); }
.plano__total { color: var(--nth-texto-medio); font-size: var(--nth-fs-mono); }
.plano__dia { color: var(--nth-texto-medio); font-size: var(--nth-fs-mono); }
.plano__beneficios { margin-top: var(--nth-esp-2); }
.plano__cta { margin-top: auto; }
.plano__matricula { font-size: var(--nth-fs-mono); color: var(--nth-texto-fraco); }

/* Recomendação do diagnóstico */
.plano.recomendado { border: 2px solid var(--nth-vermelho-hover); }
.plano__pra-voce {
  position: absolute;
  top: calc(var(--nth-esp-3) * -1);
  left: var(--nth-esp-3);
  background: var(--nth-preto-base);
  animation: nth-carimbo-cai 300ms var(--nth-ease-impacto) both;
}

@media (min-width: 1024px) {
  .planos__grid { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .plano--destaque { padding-block: calc(var(--nth-esp-5) * 1.4); }
}

.planos__noscript { margin-top: var(--nth-esp-4); color: var(--nth-texto-medio); }
.planos__gatilho-anual {
  margin-top: var(--nth-esp-4);
  text-align: center;
  color: var(--nth-vermelho-texto);
  font-size: var(--nth-fs-mono-corpo);
  letter-spacing: 0.06em;
}
.planos__fidelidade { margin-top: var(--nth-esp-6); max-width: 44rem; margin-inline: auto; }
.planos__fidelidade > p:first-child { color: var(--nth-texto-medio); }
.planos__fidelidade .faixa-honestidade { margin-top: var(--nth-esp-4); }

.faixa-turista {
  margin-top: var(--nth-esp-6);
  background: var(--nth-superficie-1);
  border: 1px solid var(--nth-borda);
  padding: var(--nth-esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--nth-esp-3);
  align-items: flex-start;
}
.faixa-turista p { font-size: var(--nth-fs-mono-corpo); color: var(--nth-texto-medio); }
.faixa-turista strong { color: var(--nth-texto-forte); }
.faixa-turista__btn { padding: 0.6rem 1.2rem; min-height: 48px; }
@media (min-width: 768px) {
  .faixa-turista { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================
   UNIDADES — §5.7
   ========================================================== */
.secao-unidades { overflow: hidden; }
.secao-unidades__fantasma { bottom: 4%; left: -6%; }
.unidades__grid { display: grid; gap: var(--nth-esp-4); margin-top: var(--nth-esp-6); }
.unidade { display: flex; flex-direction: column; gap: var(--nth-esp-3); }
.unidade__titulo { font-size: clamp(1.3rem, 4.5vw, 2rem); }
.unidade__status { font-size: var(--nth-fs-mono-corpo); }
.unidade__endereco { color: var(--nth-texto-medio); }

.unidade__grade { position: relative; }
.unidade__horarios { max-width: 26rem; }
.unidade__agulha {
  position: absolute;
  top: 0;
  width: 2px;
  background: var(--nth-vermelho);
  pointer-events: none;
}
.unidade__agulha-etiqueta {
  position: absolute;
  top: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--nth-vermelho-texto);
  white-space: nowrap;
}

.unidade__turma5 {
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.06em;
  color: var(--nth-vermelho-texto);
  text-transform: uppercase;
}

.unidade__mapa-wrap { max-width: 26rem; border: 1px solid var(--nth-borda); }
.unidade__mapa { width: 100%; height: auto; }
.unidade__pino-anel { transform-origin: 168px 150px; animation: nth-anel 2s var(--nth-ease-saida) infinite; }

.unidade__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--nth-esp-3);
  align-items: flex-start;
}
.unidade__como-chegar {
  color: var(--nth-vermelho-texto);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.unidade--fantasma { justify-content: center; gap: var(--nth-esp-3); }
.unidade--fantasma .unidade__titulo { color: var(--nth-texto-fraco); }
@supports (-webkit-text-stroke: 2px #fff) {
  .unidade--fantasma .unidade__titulo {
    color: transparent;
    -webkit-text-stroke: 2px var(--nth-texto-fraco);
  }
}

@media (min-width: 768px) {
  .unidades__grid { grid-template-columns: 2fr 1fr; align-items: stretch; }
  .unidade__acoes { flex-direction: row; align-items: center; gap: var(--nth-esp-5); }
}

.unidades__ticker {
  margin-top: var(--nth-esp-6);
  border-block: 1px solid var(--nth-borda);
  padding-block: var(--nth-esp-2);
}
.unidades__ticker-faixa {
  font-family: var(--nth-fonte-mono);
  font-weight: 500;
  font-variation-settings: normal;
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.14em;
  color: var(--nth-texto-fraco);
}

/* ==========================================================
   TRIBO — §5.8
   ========================================================== */
.manifesto { margin-top: var(--nth-esp-6); max-width: 44rem; }
.manifesto__display { font-size: clamp(1.5rem, 5.5vw, 2.6rem); line-height: 1; }
.manifesto__display--fecho { color: var(--nth-vermelho); margin-top: var(--nth-esp-4); }
.manifesto__corpo { margin-top: var(--nth-esp-4); color: var(--nth-texto-medio); }

.varal { margin-top: var(--nth-esp-6); }
.varal__svg { width: 100%; height: auto; }
.varal__bandeira {
  transform-origin: center 60px;
  transform-box: fill-box;
  animation: varal-balanca 3.4s ease-in-out infinite;
  animation-delay: calc(var(--b, 0) * -0.7s);
}
@keyframes varal-balanca {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.varal__bandeira--preenchida polygon { fill: var(--nth-vermelho); stroke: var(--nth-vermelho); }
.varal__bandeira--preenchida text { fill: #000; font-weight: 700; }
.varal__legenda { margin-top: var(--nth-esp-3); color: var(--nth-texto-medio); max-width: 36rem; }

.tribo__badge { margin-top: var(--nth-esp-5); }
.tribo__cta { margin-top: var(--nth-esp-5); }
.tribo__nota {
  margin-top: var(--nth-esp-3);
  font-size: var(--nth-fs-mono);
  color: var(--nth-texto-fraco);
  letter-spacing: 0.04em;
}

/* Cards de depoimento (estrutura pronta p/ depoimentos reais) */
.depoimento { padding-top: var(--nth-esp-6); }
.depoimento__aspas {
  position: absolute;
  top: 0; left: var(--nth-esp-3);
  font-family: var(--nth-fonte-display);
  font-weight: 900;
  font-size: 6rem;
  line-height: 1;
  color: var(--nth-vermelho);
  user-select: none;
}
.depoimento blockquote { color: var(--nth-texto-forte); }
.depoimento figcaption { margin-top: var(--nth-esp-3); color: var(--nth-vermelho-texto); font-size: var(--nth-fs-mono-corpo); }

/* ==========================================================
   FAQ — §5.9
   ========================================================== */
.faq { margin-top: var(--nth-esp-5); }
.faq__item { border: 1px solid var(--nth-borda); border-bottom: 0; }
.faq__item:last-child { border-bottom: 1px solid var(--nth-borda); }
.faq__pergunta {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: var(--nth-esp-4);
  padding-right: var(--nth-esp-7);
  font-family: var(--nth-fonte-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:hover { color: var(--nth-vermelho-texto); }

/* Marcador +/− quadrado */
.faq__pergunta::after {
  content: "";
  position: absolute;
  right: var(--nth-esp-4);
  top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  background:
    linear-gradient(var(--nth-vermelho-texto), var(--nth-vermelho-texto)) center / 100% 2px no-repeat,
    linear-gradient(var(--nth-vermelho-texto), var(--nth-vermelho-texto)) center / 2px 100% no-repeat;
}
.faq__item[open] .faq__pergunta::after {
  background:
    linear-gradient(var(--nth-vermelho-texto), var(--nth-vermelho-texto)) center / 100% 2px no-repeat;
}
.faq__resposta { padding: 0 var(--nth-esp-4) var(--nth-esp-4); color: var(--nth-texto-medio); max-width: 42rem; }

/* ==========================================================
   CONTATO — §5.10
   ========================================================== */
.secao-contato { overflow: hidden; }
.secao-contato__fantasma { top: 6%; right: -8%; }
.contato__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--nth-esp-3);
  margin-top: var(--nth-esp-5);
}
.contato__micro { margin-top: var(--nth-esp-3); font-size: var(--nth-fs-mono); color: var(--nth-texto-medio); }
.contato__fecho { margin-top: var(--nth-esp-6); color: var(--nth-texto-forte); font-weight: 500; }
@media (min-width: 768px) {
  .contato__ctas { flex-direction: row; }
}

/* ==========================================================
   STICKY CTA MOBILE — §5.11
   ========================================================== */
.nth-sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--nth-z-sticky-cta);
  display: flex;
  align-items: center;
  gap: var(--nth-esp-2);
  height: 64px;
  padding: var(--nth-esp-2) var(--nth-esp-3);
  background: rgba(0, 0, 0, .92);
  border-top: 1px solid var(--nth-borda);
  transform: translateY(100%);
  transition: transform var(--nth-t-medio) var(--nth-ease-saida);
}
.nth-sticky-cta.visivel { transform: translateY(0); }
.nth-sticky-cta__btn { flex: 1; min-height: 48px; padding: 0.6rem 1rem; }
.nth-sticky-cta__zap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border: 2px solid var(--nth-vermelho);
  color: var(--nth-vermelho-texto);
}
@media (min-width: 768px) {
  .nth-sticky-cta { display: none; }
}
/* Com o sticky visível, o zap flutuante sobe para não sobrepor */
@media (max-width: 767.98px) {
  body.pagina-home.tem-sticky .nth-zap { bottom: calc(64px + 1rem); }
}

/* ==========================================================
   PAUSA FORA DA VIEWPORT — classe alternada pelo observer do
   index.js: animações infinitas não commitam frames invisíveis
   ========================================================== */
.anim-pausada,
.anim-pausada * { animation-play-state: paused !important; }

/* ==========================================================
   REDUCED MOTION — complementos da página (§11)
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__dica,
  .hero__desce,
  .hero__status.aberto,
  .plano__nome--pulso,
  .varal__bandeira,
  .unidade__pino-anel,
  .hero__linha--barra.flexiona,
  .hero__linha--barra.slam { animation: none; }

  .hero__linha--barra { transition: font-variation-settings 200ms linear; }

  .js .hero:not(.hero--pronta) .hero__linha--seu,
  .js .hero:not(.hero--pronta) .hero__linha--barra,
  .js .hero:not(.hero--pronta) .hero__linha--nivel {
    clip-path: inset(0);
    transform: none;
  }
  .js .hero:not(.hero--pronta) .hero__linha--barra { transform: skewX(var(--nth-angulo)); }

  .treme main { animation: none; }
  .odometro__tira { transition: none; }
}

/* ==========================================================
   PROGRESSÃO DO LEVANTAMENTO — anilhas, aquecimento, modo lenda
   Cada rep: anilha nas pontas da palavra + glow (--heat via JS).
   10 reps: MODO LENDA (palavra dourada, permanente).
   ========================================================== */
.hero__linha--barra { position: relative; }

.hero__anilhas {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.045em;
  pointer-events: none;
}
.hero__anilhas--esq { right: calc(100% + 0.12em); flex-direction: row-reverse; }
.hero__anilhas--dir { left: calc(100% + 0.12em); }

.hero__anilha {
  width: 0.055em;
  height: 0.62em;
  border-radius: 0.03em;
  background: var(--nth-vermelho);
  box-shadow: 0 0 0.06em rgba(237, 28, 36, 0.5);
  animation: anilha-encaixa 260ms var(--nth-ease-saida) backwards;
}
.hero__anilha:nth-child(even) { height: 0.48em; opacity: 0.85; }
@keyframes anilha-encaixa {
  from { transform: scaleY(1.6) translateY(-0.08em); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Aquecimento: glow cresce com as reps (--heat 0→10) */
.hero__linha--barra {
  text-shadow:
    0 0 calc(var(--heat, 0) * 0.6px) rgba(237, 28, 36, 0.65),
    0 0 calc(var(--heat, 0) * 2.4px) rgba(237, 28, 36, 0.32);
}

/* MODO LENDA — desbloqueado aos 10 reps, fica pra sempre */
.hero__linha--barra.modo-lenda {
  color: #F2C14E;
  text-shadow:
    0 0 calc(6px + var(--heat, 0) * 0.5px) rgba(242, 193, 78, 0.55),
    0 0 calc(18px + var(--heat, 0) * 1px) rgba(242, 193, 78, 0.28);
}
.modo-lenda .hero__anilha {
  background: #F2C14E;
  box-shadow: 0 0 0.06em rgba(242, 193, 78, 0.55);
}

/* Parceiro oficial de maquinário (Supreme) — seção Estrutura.
   Logo em chip branco arredondado: cores oficiais do parceiro
   preservadas sobre o tema escuro do site. */
.parceiro {
  display: flex;
  align-items: center;
  gap: var(--nth-esp-4);
  margin-top: var(--nth-esp-4);
  flex-wrap: wrap;
}
.parceiro__chip {
  background: #fff;
  border-radius: 12px;
  padding: 10px 18px;
  line-height: 0;
  flex-shrink: 0;
}
.parceiro__logo { height: 64px; width: auto; display: inline-block; }
.parceiro__texto { max-width: 46ch; color: var(--nth-texto-medio); margin: 0; }
.parceiro__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--nth-vermelho-texto);
  margin-bottom: 0.35rem;
}

/* Barra da série: enche a cada rep rumo aos 10, marcos em 3 e 5.
   O brilho deslizante roda sempre — convite visual pra continuar. */
.hero__serie {
  position: relative;
  margin-top: 0.6rem;
  height: 6px;
  max-width: 340px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
}
.hero__serie-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  background: var(--nth-vermelho);
  border-radius: 3px;
  transition: width 420ms var(--nth-ease-saida);
  overflow: hidden;
}
.hero__serie-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: serie-brilho 1.8s linear infinite;
}
@keyframes serie-brilho { to { transform: translateX(100%); } }
.hero__serie-tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.hero__serie-tick.batido { background: var(--nth-branco); }
.hero__serie.dourada .hero__serie-fill { background: #F2C14E; }

/* Escada de desbloqueios (linha "DESBLOQUEIO EM N REPS → ...") */
.hero__marco {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--nth-texto-medio);
}
.hero__marco.pulou { animation: marco-pulso 420ms ease-out 1; }
@keyframes marco-pulso {
  0%   { color: var(--nth-vermelho-texto); transform: translateX(0.35rem); }
  100% { color: var(--nth-texto-medio); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__anilha,
  .hero__marco.pulou { animation: none; }
  .hero__serie-fill::after { animation: none; }
  .hero__serie-fill { transition: none; }
}

/* ==========================================================
   TRIBO — carrossel de alunos matriculados (substitui o varal)
   ========================================================== */
.tribo-carrossel { margin-top: var(--nth-esp-5); }

.tribo-carrossel__cabeca {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--nth-esp-3);
  flex-wrap: wrap;
}
.tribo-carrossel__titulo {
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  color: var(--nth-texto-medio);
  margin: 0;
}
.tribo-carrossel__setas { display: flex; gap: 0.5rem; }
.tribo-carrossel__seta {
  width: 42px;
  height: 42px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--nth-branco);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.tribo-carrossel__seta:hover,
.tribo-carrossel__seta:focus-visible {
  border-color: var(--nth-vermelho);
  color: var(--nth-vermelho-texto);
}

.tribo-carrossel__pista {
  display: flex;
  gap: var(--nth-esp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  margin: var(--nth-esp-3) 0 0;
  padding: 2px 2px var(--nth-esp-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--nth-vermelho) transparent;
}

.tribo-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 172px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  padding: var(--nth-esp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}
.tribo-card__foto,
.tribo-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tribo-card__foto {
  background-size: cover;
  background-position: center;
  border: 2px solid var(--nth-vermelho);
}
.tribo-card__avatar {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--nth-vermelho-texto);
  font-family: var(--nth-fonte-display);
  font-weight: 900;
  font-size: 2rem;
}
.tribo-card__numero {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--nth-vermelho-texto);
}
.tribo-card__nome {
  font-weight: 700;
  color: var(--nth-branco);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Vaga em aberto: convite pra virar o próximo número */
.tribo-card--vaga { border-style: dashed; padding: 0; }
.tribo-card--vaga .tribo-card__nome { color: var(--nth-texto-medio); }
.tribo-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: var(--nth-esp-3);
  text-decoration: none;
}
.tribo-card__link:hover .tribo-card__avatar,
.tribo-card__link:focus-visible .tribo-card__avatar {
  border-color: var(--nth-vermelho);
  color: var(--nth-vermelho-texto);
}

.tribo-carrossel__nota {
  margin: 0.4rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--nth-texto-medio);
}

/* ==========================================================
   CARTÃO DE VISITA — infos + tela de fotos com cinema
   ========================================================== */
.cartao {
  display: grid;
  margin-top: var(--nth-esp-5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
@media (min-width: 900px) {
  .cartao { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
}

.cartao__info {
  padding: var(--nth-esp-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nth-esp-3);
  border-top: 3px solid var(--nth-vermelho);
}
@media (min-width: 900px) {
  .cartao__info { border-top: 0; border-left: 3px solid var(--nth-vermelho); }
}
.cartao__logo { height: 44px; width: auto; }
.cartao__cidade {
  color: var(--nth-vermelho-texto);
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  margin: 0;
}
.cartao__dados { margin: 0; width: 100%; }
.cartao__dados div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.42rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 0.76rem;
}
.cartao__dados dt { color: var(--nth-texto-medio); letter-spacing: 0.08em; }
.cartao__dados dd { margin: 0; color: var(--nth-branco); overflow-wrap: anywhere; }
.cartao__cta { margin-top: auto; }

/* Tela de fotos: cinema (crossfade + Ken Burns) */
.cartao__tela {
  position: relative;
  min-height: 280px;
  background: #0c0c0c;
  overflow: hidden;
}
@media (min-width: 900px) { .cartao__tela { min-height: 380px; } }
.cartao__tela::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 42%);
}
.cartao__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.cartao__slide.ativo { opacity: 1; animation: cartao-kb 7s ease-out forwards; }
.cartao__slide--kb2.ativo { animation-name: cartao-kb2; }
@keyframes cartao-kb {
  from { transform: scale(1.12) translateX(2%); }
  to   { transform: scale(1); }
}
@keyframes cartao-kb2 {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12) translateY(-2%); }
}

/* Estado reservado (pré-reforma) */
.cartao__reservado {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: var(--nth-esp-4);
}
.cartao__reservado-selo {
  border: 1px solid var(--nth-vermelho);
  color: var(--nth-vermelho-texto);
  padding: 0.4rem 0.9rem;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  animation: reservado-pulso 2.6s ease-in-out infinite;
}
@keyframes reservado-pulso {
  50% { box-shadow: 0 0 20px rgba(237, 28, 36, 0.35); }
}
.cartao__reservado-texto { color: var(--nth-texto-medio); max-width: 34ch; margin: 0; }

/* Legenda (lower-third) + HUD */
.cartao__legenda {
  position: absolute;
  left: var(--nth-esp-3);
  bottom: var(--nth-esp-3);
  margin: 0;
  z-index: 1;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--nth-branco);
  text-transform: uppercase;
}
.cartao__hud {
  position: absolute;
  right: var(--nth-esp-3);
  bottom: var(--nth-esp-3);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cartao__contador { font-size: 0.72rem; color: var(--nth-texto-medio); }
.cartao__seta {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--nth-branco);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.cartao__seta:hover,
.cartao__seta:focus-visible { border-color: var(--nth-vermelho); color: var(--nth-vermelho-texto); }

@media (prefers-reduced-motion: reduce) {
  .cartao__slide { transition: opacity 250ms linear; }
  .cartao__slide.ativo,
  .cartao__slide--kb2.ativo { animation: none; }
  .cartao__reservado-selo { animation: none; }
}