/* ============================================================
   NTHFIT — base.css
   Design tokens (§2), reset, tipografia, header/footer (§3),
   botões, forms, cards, badges, utilitários, marquee, toast,
   animações globais e acessibilidade (§11).
   Mobile-first. Breakpoints: 480px, 768px, 1024px, 1280px.
   ============================================================ */

/* ==========================================================
   1. DESIGN TOKENS (§2 — copiados exatamente do spec)
   ========================================================== */
:root {
  color-scheme: dark;

  /* ===== FUNDOS (escala de pretos) ===== */
  --nth-preto-puro: #000000;    /* hero, seções de impacto, container da logomarca */
  --nth-preto-base: #0A0A0A;    /* fundo geral do body */
  --nth-superficie-1: #121212;  /* cards, planos, blocos */
  --nth-superficie-2: #1A1A1A;  /* inputs, elevação maior */
  --nth-borda: #2A2A2A;         /* divisores decorativos (NÃO informativos) */

  /* ===== VERMELHOS (regra dura de uso — §2.1.1) ===== */
  --nth-vermelho: #ED1C24;         /* display ≥24px, ícones, bordas, fundos de CTA */
  --nth-vermelho-texto: #FF4D55;   /* QUALQUER texto vermelho pequeno (links, labels, preços peq.) */
  --nth-vermelho-hover: #FF6B6B;   /* hover, erros, anel de foco */
  --nth-vermelho-profundo: #C8102E;/* fundos de botão com texto branco */
  --nth-vermelho-sombra: #3A0407;  /* sombras duras/camadas decorativas, NUNCA texto */

  /* ===== NEUTROS DE TEXTO ===== */
  --nth-texto-forte: #EDEDED;   /* corpo (nunca #FFF em massa — halação) */
  --nth-texto-medio: #B3B3B3;   /* secundário */
  --nth-texto-fraco: #8C8C8C;   /* mínimo permitido para texto */
  --nth-branco: #FFFFFF;        /* só displays/detalhes pontuais */

  /* ===== ÂNGULO, CHANFRO, RAIOS, SOMBRAS (§2.2) ===== */
  --nth-angulo: -12deg;              /* skew de headlines, carimbos, entradas */
  --nth-angulo-linhas: 78deg;        /* linhas de velocidade (90° - 12°) */
  --nth-chanfro: 0.75rem;
  --nth-raio: 0px;                   /* estética brutal: cantos retos */
  --nth-sombra-dura: 6px 6px 0 0 var(--nth-vermelho-sombra);
  /* Versão em filter para elementos com clip-path (a sombra segue o chanfro) */
  --nth-sombra-dura-filtro: drop-shadow(6px 6px 0 var(--nth-vermelho-sombra));

  /* ===== TIPOGRAFIA (§2.3) ===== */
  --nth-fonte-display: "Archivo", Impact, sans-serif;
  --nth-fonte-corpo: "Archivo", system-ui, sans-serif;
  --nth-fonte-mono: "IBM Plex Mono", ui-monospace, monospace;

  --nth-fs-hero: clamp(3.2rem, 17vw, 11.5rem);      /* TREINO. (linha gigante levantável do hero) */
  --nth-fs-hero-2: clamp(1.3rem, 4.6vw, 3.1rem);    /* UMA NOVA EXPERIÊNCIA / PRO SEU */
  --nth-fs-h2: clamp(2.4rem, 9vw, 6rem);            /* títulos de seção */
  --nth-fs-h3: clamp(1.5rem, 5.5vw, 3rem);          /* subtítulos, linhas do acordeão */
  --nth-fs-preco: clamp(2.6rem, 10vw, 5rem);        /* preços nos cards */
  --nth-fs-corpo: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* corpo — nunca < 16px */
  --nth-fs-mono: 0.8125rem;                          /* labels/eyebrows mono (13px) */
  --nth-fs-mono-corpo: 0.9375rem;                    /* tabelas mono (15px) */

  /* ===== ESPAÇAMENTO / CONTAINER / Z-INDEX (§2.4) ===== */
  --nth-esp-1: 0.25rem;  /* 4px  */
  --nth-esp-2: 0.5rem;   /* 8px  */
  --nth-esp-3: 1rem;     /* 16px */
  --nth-esp-4: 1.5rem;   /* 24px */
  --nth-esp-5: 2rem;     /* 32px */
  --nth-esp-6: 3rem;     /* 48px */
  --nth-esp-7: 4rem;     /* 64px */
  --nth-esp-8: 6rem;     /* 96px */

  --nth-secao-pad: clamp(4rem, 10vw, 8rem);
  --nth-container: 72rem;
  --nth-container-pad: clamp(1rem, 4vw, 2.5rem);

  --nth-z-header: 100;
  --nth-z-sticky-cta: 90;
  --nth-z-zap: 80;
  --nth-z-flash: 300;
  --nth-z-toast: 250;

  /* ===== MOVIMENTO (§2.5) ===== */
  --nth-t-rapido: 150ms;
  --nth-t-medio: 300ms;
  --nth-t-entrada: 600ms;
  --nth-ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --nth-ease-impacto: cubic-bezier(0.7, 0, 0.2, 1);

  /* Altura do header (64px mobile / 72px ≥1024px) */
  --nth-header-h: 64px;
}

@media (min-width: 1024px) {
  :root { --nth-header-h: 72px; }
}

/* ==========================================================
   2. RESET
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* [hidden] SEMPRE vence classes com display próprio (.secao-painel,
   .area-abas__item, .area-vazio, .fin-card, .nth-carimbo etc.) —
   mesma garantia já documentada em cadastro.css e checkout.css,
   agora global para as 6 páginas. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--nth-vermelho) var(--nth-preto-puro);
}

body {
  min-height: 100svh;
  background: var(--nth-preto-base);
  color: var(--nth-texto-forte);
  font-family: var(--nth-fonte-corpo);
  font-size: var(--nth-fs-corpo);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

a { color: var(--nth-vermelho-texto); }

address { font-style: normal; }

fieldset { border: 0; padding: 0; }

legend { padding: 0; }

button { background: none; border: 0; cursor: pointer; }

:target { scroll-margin-top: calc(var(--nth-header-h) + 1rem); }

/* ==========================================================
   3. DETALHES DE MARCA GLOBAIS (§2.6 — contratual)
   ========================================================== */
::selection { background: var(--nth-vermelho); color: #fff; }

:focus-visible {
  outline: 3px solid var(--nth-vermelho-hover);
  outline-offset: 3px;
}
.nth-btn--primario:focus-visible,
[class*="--vermelho"]:focus-visible { outline-color: #FFFFFF; }

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--nth-superficie-2) inset;
  -webkit-text-fill-color: var(--nth-texto-forte);
}

/* Scrollbar customizada (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nth-preto-puro); }
::-webkit-scrollbar-thumb {
  background: var(--nth-vermelho);
  border: 2px solid var(--nth-preto-puro);
}
::-webkit-scrollbar-thumb:hover { background: var(--nth-vermelho-hover); }

/* ==========================================================
   4. TIPOGRAFIA GLOBAL (§2.3)
   ========================================================== */
h1, h2, h3, h4, .nth-display {
  font-family: var(--nth-fonte-display);
  line-height: 1.05;
}

/* Headline display contratual */
.nth-display {
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--nth-branco);
}
.nth-display--vermelho { color: var(--nth-vermelho); }

/* Headline vazada (outline) — fallback sólido quando não há text-stroke */
.nth-display--vazada { color: var(--nth-texto-medio); }
@supports (-webkit-text-stroke: 2px #fff) {
  .nth-display--vazada {
    color: transparent;
    -webkit-text-stroke: 2px var(--nth-texto-forte);
  }
}

/* Eyebrow / label técnico */
.nth-eyebrow {
  font-family: var(--nth-fonte-mono);
  font-weight: 500;
  font-size: var(--nth-fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nth-texto-medio);
}
.nth-eyebrow--vermelho { color: var(--nth-vermelho-texto); }

/* Números / preços / horários */
.nth-num {
  font-family: var(--nth-fonte-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Texto mono de apoio (tabelas, microcopy técnica) */
.nth-mono {
  font-family: var(--nth-fonte-mono);
  font-size: var(--nth-fs-mono-corpo);
}

/* Carimbo (stamps "1 REP", "MATRICULADO", "PRA VOCÊ") */
.nth-carimbo {
  display: inline-block;
  font-family: var(--nth-fonte-mono);
  font-weight: 700;
  font-size: var(--nth-fs-mono-corpo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nth-vermelho-texto);
  border: 2px solid var(--nth-vermelho-texto);
  padding: var(--nth-esp-1) var(--nth-esp-2);
  transform: rotate(var(--nth-angulo));
}

/* Título de seção com corte (§9.3) — revelação por clip-path */
.nth-titulo-corte {
  font-size: var(--nth-fs-h2);
}
.js .nth-titulo-corte {
  clip-path: inset(0 100% 0 0);
  transform: skewX(var(--nth-angulo));
  transition:
    clip-path var(--nth-t-entrada) var(--nth-ease-saida),
    transform var(--nth-t-entrada) var(--nth-ease-saida);
}
.js .nth-titulo-corte.is-visible {
  clip-path: inset(0);
  transform: skewX(0deg);
}

/* ==========================================================
   5. UTILITÁRIOS DE LAYOUT
   ========================================================== */
.nth-container {
  max-width: var(--nth-container);
  margin-inline: auto;
  padding-inline: var(--nth-container-pad);
}

.nth-secao {
  position: relative;
  padding-block: var(--nth-secao-pad);
}
.nth-secao--preto-puro { background: var(--nth-preto-puro); }

/* Grid mobile-first: 1 coluna → N colunas em ≥768px */
.nth-grid { display: grid; gap: var(--nth-esp-4); }
@media (min-width: 768px) {
  .nth-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .nth-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .nth-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .nth-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Chanfro da marca (§2.2) */
.nth-chanfro {
  clip-path: polygon(
    var(--nth-chanfro) 0, 100% 0,
    100% calc(100% - var(--nth-chanfro)),
    calc(100% - var(--nth-chanfro)) 100%,
    0 100%, 0 var(--nth-chanfro));
}

/* Oculto visualmente, presente para leitores de tela */
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link (§3.2) */
.nth-pular {
  position: fixed;
  top: var(--nth-esp-2); left: var(--nth-esp-2);
  z-index: calc(var(--nth-z-header) + 10);
  background: var(--nth-vermelho);
  color: #000;
  font-family: var(--nth-fonte-display);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--nth-esp-2) var(--nth-esp-3);
  transform: translateY(-200%);
}
.nth-pular:focus-visible { transform: translateY(0); }

/* ===== Texturas (§8) ===== */
.textura-grao { position: relative; }
.textura-grao::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background: repeating-conic-gradient(#fff 0% .0001%, transparent .0002% .0004%);
  background-size: 5px 5px;
}

.textura-velocidade {
  background-image: repeating-linear-gradient(var(--nth-angulo-linhas),
    transparent 0 46px, rgba(237, 28, 36, .06) 46px 48px);
}

.textura-glow {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(237, 28, 36, .12), transparent 55%),
    var(--nth-preto-puro);
}

/* Palavra-fantasma de fundo (§8.5) */
.nth-fantasma {
  position: absolute;
  font-family: var(--nth-fonte-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  text-transform: uppercase;
  line-height: 0.85;
  font-size: clamp(6rem, 28vw, 20rem);
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .08);
  user-select: none;
  pointer-events: none;
}

/* ==========================================================
   6. BOTÕES (§2.7 — componentes contratuais)
   ========================================================== */
.nth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nth-esp-2);
  min-height: 48px;
  padding: 0.9rem 1.6rem;
  font-family: var(--nth-fonte-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 110;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  border: 0;
  border-radius: var(--nth-raio);
  cursor: pointer;
  clip-path: polygon(
    var(--nth-chanfro) 0, 100% 0,
    100% calc(100% - var(--nth-chanfro)),
    calc(100% - var(--nth-chanfro)) 100%,
    0 100%, 0 var(--nth-chanfro));
  transition:
    background-color var(--nth-t-rapido) var(--nth-ease-saida),
    color var(--nth-t-rapido) var(--nth-ease-saida),
    transform var(--nth-t-rapido) var(--nth-ease-saida),
    filter var(--nth-t-rapido) var(--nth-ease-saida);
}
/* clip-path cortaria o anel de foco: no foco por teclado o botão
   vira retângulo para o outline aparecer inteiro. */
.nth-btn:focus-visible { clip-path: none; }

/* Primário: fundo vermelho, texto PRETO bold (contraste §2.1.1) */
.nth-btn--primario {
  background: var(--nth-vermelho);
  color: #000;
  filter: var(--nth-sombra-dura-filtro); /* sombra dura seguindo o chanfro */
}
.nth-btn--primario:hover { background: var(--nth-vermelho-hover); }
.nth-btn--primario:active {
  transform: translate(6px, 6px);
  filter: none;
  box-shadow: none;
  transition: none; /* snap seco de carimbo */
}

/* Fantasma: transparente com borda clara; hover inverte SEM easing */
.nth-btn--fantasma {
  background: transparent;
  border: 2px solid var(--nth-texto-forte);
  color: var(--nth-texto-forte);
}
.nth-btn--fantasma:hover,
.nth-btn--fantasma:focus-visible {
  background: #EDEDED;
  color: #000;
  transition: none;
}

/* Vermelho profundo com texto branco (só quando texto precisa ser branco) */
.nth-btn--vermelho-branco {
  background: var(--nth-vermelho-profundo);
  color: var(--nth-branco);
  filter: var(--nth-sombra-dura-filtro);
}
.nth-btn--vermelho-branco:hover { background: var(--nth-vermelho); color: #000; }
.nth-btn--vermelho-branco:active {
  transform: translate(6px, 6px);
  filter: none;
  transition: none;
}

/* CTA principal da seção ocupa a largura toda no mobile */
.nth-btn--bloco { width: 100%; }
@media (min-width: 768px) {
  .nth-btn--bloco { width: auto; }
}

/* Estado de carregamento (checkout) */
.nth-btn[aria-busy="true"] { opacity: .8; pointer-events: none; }

/* Spinner CSS */
.nth-spinner {
  display: inline-block;
  width: 1.1em; height: 1.1em;
  border: 3px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: nth-giro 700ms linear infinite;
}

/* CTA pulsante (marco de reps, §5.1) */
.pulsando { animation: nth-pulso 1.2s ease-in-out infinite; }
/* O pulso não pode vencer o snap seco do :active (§2.7) */
.pulsando:active { animation: none; }

/* ==========================================================
   7. HEADER (§3.2)
   ========================================================== */
.nth-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--nth-z-header);
  background: transparent;
  transition:
    background-color var(--nth-t-medio) var(--nth-ease-saida),
    border-color var(--nth-t-medio) var(--nth-ease-saida);
  border-bottom: 1px solid transparent;
}
.nth-header.rolou {
  background: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nth-borda);
}

.nth-header__inner {
  display: flex;
  align-items: center;
  gap: var(--nth-esp-3);
  height: var(--nth-header-h);
}

/* Lockup em TEXTO (nunca o JPEG no header) */
.nth-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1;
  margin-right: auto;
  user-select: none;
}
/* Logomarca oficial (arquivo da marca, fundo transparente) */
.nth-logo__img {
  display: block;
  height: 34px;
  width: auto;
}
.nth-footer .nth-logo__img { height: 42px; }
.nth-logo__nth {
  font-family: var(--nth-fonte-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  color: var(--nth-vermelho);
  letter-spacing: -0.01em;
}
.nth-logo__fit {
  font-family: var(--nth-fonte-display);
  font-weight: 700;
  font-style: italic;
  color: var(--nth-branco);
}

/* Toggle do menu (mobile) */
.nth-menu-toggle {
  order: 3;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 12px;
  flex-shrink: 0;
}
.nth-menu-toggle__linha {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--nth-texto-forte);
  transition: transform var(--nth-t-rapido) var(--nth-ease-saida),
              opacity var(--nth-t-rapido) var(--nth-ease-saida);
}
.nth-menu-toggle[aria-expanded="true"] .nth-menu-toggle__linha:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nth-menu-toggle[aria-expanded="true"] .nth-menu-toggle__linha:nth-child(2) {
  opacity: 0;
}
.nth-menu-toggle[aria-expanded="true"] .nth-menu-toggle__linha:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Nav: no mobile a LISTA é o painel full-screen; o CTA fica fora dele */
.nth-nav {
  display: flex;
  align-items: center;
  gap: var(--nth-esp-3);
}

.nth-nav__lista {
  position: fixed;
  inset: 0;
  top: var(--nth-header-h);
  z-index: var(--nth-z-header);
  display: flex;
  flex-direction: column;
  gap: var(--nth-esp-4);
  padding: var(--nth-esp-6) var(--nth-container-pad);
  background: var(--nth-preto-puro);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--nth-t-medio) var(--nth-ease-saida),
    transform var(--nth-t-medio) var(--nth-ease-saida),
    visibility 0s var(--nth-t-medio);
}
.menu-aberto .nth-nav__lista {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--nth-t-medio) var(--nth-ease-saida),
    transform var(--nth-t-medio) var(--nth-ease-saida);
}
.menu-aberto { overflow: hidden; } /* aplicada no <html> pelo ui.js */

.nth-nav__link {
  display: inline-block;
  font-family: var(--nth-fonte-corpo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--nth-fs-h3); /* links grandes no painel mobile */
  color: var(--nth-texto-forte);
  text-decoration: none;
  padding: var(--nth-esp-1) 0;
}
.nth-nav__link:hover,
.nth-nav__link:focus-visible {
  color: var(--nth-vermelho-texto);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* CTA do header compacto no mobile */
.nth-nav__cta { padding: 0.6rem 1rem; min-height: 48px; white-space: nowrap; }

/* Telas muito estreitas (≤479px): logo + CTA + toggle precisam caber
   sem cortar o botão do menu (cenário-base 320px, §2.3) */
@media (max-width: 479.98px) {
  .nth-header__inner { gap: var(--nth-esp-2); }
  .nth-nav__cta { font-size: 0.8125rem; padding: 0.5rem 0.75rem; }
}

@media (min-width: 768px) {
  .nth-menu-toggle { display: none; }
  .nth-nav__lista {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--nth-esp-4);
    padding: 0;
    background: transparent;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nth-nav__link { font-size: 0.875rem; padding: var(--nth-esp-2) 0; }
}

/* Barra de progresso de scroll (2px, base do header) */
.nth-progresso {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--nth-vermelho);
  transform-origin: left;
  transform: scaleX(0);
}

/* ==========================================================
   8. FOOTER (§3.3) + WHATSAPP FLUTUANTE
   ========================================================== */
.nth-footer {
  position: relative;
  overflow: hidden;
  background: var(--nth-preto-puro);
  padding-block: calc(var(--nth-secao-pad) + 3rem) var(--nth-esp-5);
  clip-path: polygon(0 3rem, 100% 0, 100% 100%, 0 100%);
  margin-top: var(--nth-esp-6);
}

/* "NTH" gigante vazado sangrando a borda */
.nth-footer__nth {
  position: absolute;
  right: -0.15em;
  bottom: -0.25em;
  font-family: var(--nth-fonte-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: clamp(8rem, 30vw, 22rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .08);
  user-select: none;
  pointer-events: none;
}

.nth-footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nth-esp-6);
}
@media (min-width: 1024px) {
  .nth-footer__inner { grid-template-columns: repeat(4, 1fr); gap: var(--nth-esp-5); }
}

.nth-footer__slogan {
  margin-top: var(--nth-esp-3);
  color: var(--nth-texto-forte);
  font-weight: 500;
}

.nth-footer__selo-mono {
  margin-top: var(--nth-esp-2);
  font-family: var(--nth-fonte-mono);
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nth-texto-fraco);
}

.nth-footer__titulo {
  font-family: var(--nth-fonte-mono);
  font-weight: 500;
  font-size: var(--nth-fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nth-texto-medio);
  margin-bottom: var(--nth-esp-3);
}

.nth-footer__lista {
  display: flex;
  flex-direction: column;
  gap: var(--nth-esp-2);
}
.nth-footer__lista a {
  color: var(--nth-texto-medio);
  text-decoration: none;
}
.nth-footer__lista a:hover,
.nth-footer__lista a:focus-visible {
  color: var(--nth-vermelho-texto);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.nth-footer__endereco,
.nth-footer__horarios {
  color: var(--nth-texto-medio);
  font-size: 0.9375rem;
}
.nth-footer__horarios {
  margin-top: var(--nth-esp-2);
  font-family: var(--nth-fonte-mono);
  font-variant-numeric: tabular-nums;
}

.nth-footer__base {
  position: relative;
  margin-top: var(--nth-esp-6);
  padding-top: var(--nth-esp-4);
  border-top: 1px solid var(--nth-borda);
  display: flex;
  flex-direction: column;
  gap: var(--nth-esp-3);
  color: var(--nth-texto-fraco);
  font-size: 0.8125rem;
}
@media (min-width: 768px) {
  .nth-footer__base {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Selo MODO DEV */
.nth-selo-dev {
  display: inline-block;
  width: fit-content;
  font-family: var(--nth-fonte-mono);
  font-weight: 700;
  font-size: var(--nth-fs-mono);
  text-transform: uppercase;
  background: var(--nth-superficie-1);
  border: 1px solid var(--nth-vermelho-texto);
  color: var(--nth-vermelho-texto);
  padding: 4px 8px;
}

/* WhatsApp flutuante */
.nth-zap {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: var(--nth-z-zap);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nth-preto-base);
  border: 2px solid var(--nth-vermelho);
  color: var(--nth-vermelho-texto);
}
.nth-zap::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--nth-vermelho);
  animation: nth-anel 2s var(--nth-ease-saida) infinite;
  pointer-events: none;
}
.nth-zap:hover { color: var(--nth-vermelho-hover); border-color: var(--nth-vermelho-hover); }

/* ==========================================================
   9. PÁGINAS DE FUNIL (§3.1)
   ========================================================== */
body.pagina-funil .nth-nav__lista,
body.pagina-funil .nth-sticky-cta { display: none; }
body.pagina-checkout .nth-zap { display: none; }

/* Indicador "PASSO X DE 2" — componente ÚNICO do funil
   (mesmo markup no cadastro e no checkout; muda só o bloco ativo) */
.nth-funil-passo {
  max-width: 34rem;
  margin-bottom: var(--nth-esp-5);
}
.nth-funil-passo__rotulo { margin-bottom: var(--nth-esp-2); }
.nth-funil-passo__trilha {
  display: flex;
  gap: var(--nth-esp-2);
  /* respiro para o skew não vazar do container */
  padding-inline: 6px;
}
.nth-funil-passo__bloco {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  overflow: hidden;
  font-family: var(--nth-fonte-mono);
  font-weight: 700;
  font-size: var(--nth-fs-mono);
  letter-spacing: .14em;
  color: var(--nth-texto-fraco);
  border: 1px solid var(--nth-borda);
  transform: skewX(var(--nth-angulo));
}
.nth-funil-passo__bloco > span {
  position: relative;
  z-index: 1;
  transform: skewX(calc(var(--nth-angulo) * -1)); /* endireita o número */
}
.nth-funil-passo__bloco--ativo {
  color: #000;
  border-color: var(--nth-vermelho);
}
.nth-funil-passo__bloco--ativo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nth-vermelho);
  transform-origin: left;
}
.js .nth-funil-passo__bloco--ativo::before {
  animation: nth-funil-preenche var(--nth-t-entrada) var(--nth-ease-saida) both;
}
@keyframes nth-funil-preenche {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Link "trocar plano" dos cards de resumo do funil (padrão de link do footer) */
.nth-link-trocar {
  display: inline-block;
  font-family: var(--nth-fonte-mono);
  font-size: var(--nth-fs-mono);
  letter-spacing: 0.06em;
  color: var(--nth-vermelho-texto);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nth-link-trocar:hover,
.nth-link-trocar:focus-visible { color: var(--nth-vermelho-hover); }

/* ==========================================================
   10. FORMULÁRIOS (§6 — UX contratual)
   ========================================================== */
.nth-form {
  display: flex;
  flex-direction: column;
  gap: var(--nth-esp-4);
}

.nth-campo { display: flex; flex-direction: column; gap: var(--nth-esp-2); }

/* Label SEMPRE visível acima do campo */
.nth-campo__label {
  font-family: var(--nth-fonte-corpo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.875rem;
  color: var(--nth-texto-forte);
}

.nth-campo__input,
.nth-campo input[type="text"],
.nth-campo input[type="tel"],
.nth-campo input[type="email"],
.nth-campo input[type="date"],
.nth-campo input[type="number"],
.nth-campo select,
.nth-campo textarea {
  min-height: 48px;
  font-size: 16px; /* nunca menor: evita zoom forçado no iOS */
  padding: var(--nth-esp-2) var(--nth-esp-3);
  background: var(--nth-superficie-2);
  border: 2px solid var(--nth-borda);
  border-radius: var(--nth-raio);
  color: var(--nth-texto-forte);
  width: 100%;
  transition: border-color var(--nth-t-rapido) var(--nth-ease-saida);
}
.nth-campo input::placeholder,
.nth-campo textarea::placeholder { color: var(--nth-texto-fraco); }

.nth-campo input:focus-visible,
.nth-campo select:focus-visible,
.nth-campo textarea:focus-visible {
  border-color: var(--nth-vermelho-texto);
  outline-offset: 1px;
}

/* Microcopy de ajuda */
.nth-campo__ajuda {
  font-family: var(--nth-fonte-mono);
  font-size: var(--nth-fs-mono);
  color: var(--nth-texto-medio);
}

/* ERRO: cor + ícone + texto (nunca só cor) */
.nth-campo--erro input,
.nth-campo--erro select,
.nth-campo--erro textarea {
  border-color: var(--nth-vermelho-hover);
}
.nth-campo__erro {
  display: none;
  align-items: flex-start;
  gap: var(--nth-esp-2);
  font-size: 0.875rem;
  color: var(--nth-vermelho-hover);
}
.nth-campo--erro .nth-campo__erro { display: flex; }
.nth-campo__erro::before {
  content: "";
  flex-shrink: 0;
  width: 1em; height: 1em;
  margin-top: 0.2em;
  /* ícone de alerta (triângulo com !) em SVG inline */
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 1 21h22L12 2zm-1 7h2v6h-2V9zm0 7h2v2h-2v-2z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 1 21h22L12 2zm-1 7h2v6h-2V9zm0 7h2v2h-2v-2z"/></svg>') center / contain no-repeat;
}

/* SUCESSO: borda clara + check mono */
.nth-campo--sucesso input,
.nth-campo--sucesso select,
.nth-campo--sucesso textarea {
  border-color: var(--nth-texto-forte);
}
.nth-campo__ok {
  display: none;
  font-family: var(--nth-fonte-mono);
  font-size: var(--nth-fs-mono);
  color: var(--nth-texto-medio);
}
.nth-campo--sucesso .nth-campo__ok { display: block; }

/* Checkbox / radio nativos com marca vermelha */
.nth-campo--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--nth-esp-3);
}
.nth-campo--check input[type="checkbox"],
.nth-campo--check input[type="radio"] {
  width: 22px; height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--nth-vermelho);
}
.nth-campo--check .nth-campo__label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.9375rem;
}

/* Input readonly (Pix copia-e-cola) */
.nth-campo input[readonly] {
  color: var(--nth-texto-medio);
  font-family: var(--nth-fonte-mono);
  font-size: var(--nth-fs-mono-corpo);
}

/* ==========================================================
   11. CARDS E BADGES
   ========================================================== */
.nth-card {
  position: relative;
  background: var(--nth-superficie-1);
  border: 1px solid var(--nth-borda);
  padding: var(--nth-esp-5);
  clip-path: polygon(
    var(--nth-chanfro) 0, 100% 0,
    100% calc(100% - var(--nth-chanfro)),
    calc(100% - var(--nth-chanfro)) 100%,
    0 100%, 0 var(--nth-chanfro));
}
.nth-card--destaque { border: 2px solid var(--nth-vermelho); }
.nth-card--fantasma { color: var(--nth-texto-fraco); }

/* Selo cheio (ex.: MAIS ESCOLHIDO): fundo vermelho, texto PRETO */
.nth-selo {
  display: inline-block;
  font-family: var(--nth-fonte-mono);
  font-weight: 700;
  font-size: var(--nth-fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--nth-vermelho);
  color: #000;
  padding: var(--nth-esp-1) var(--nth-esp-2);
}

/* Selo contorno (ex.: EM BREVE) */
.nth-selo--contorno {
  background: transparent;
  border: 1px solid var(--nth-vermelho-texto);
  color: var(--nth-vermelho-texto);
}

/* Lista de benefícios com marcador quadrado vermelho */
.nth-lista-beneficios {
  display: flex;
  flex-direction: column;
  gap: var(--nth-esp-2);
}
.nth-lista-beneficios li {
  position: relative;
  padding-left: var(--nth-esp-4);
}
.nth-lista-beneficios li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--nth-vermelho);
}

/* Tabela mono (ficha técnica, horários) */
.nth-tabela-mono {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--nth-fonte-mono);
  font-size: var(--nth-fs-mono-corpo);
  font-variant-numeric: tabular-nums;
}
.nth-tabela-mono th,
.nth-tabela-mono td {
  text-align: left;
  padding: var(--nth-esp-2) var(--nth-esp-2) var(--nth-esp-2) 0;
  border-bottom: 1px solid var(--nth-borda);
  color: var(--nth-texto-medio);
  font-weight: 400;
}
.nth-tabela-mono td:last-child,
.nth-tabela-mono th:last-child {
  font-weight: 700;
  color: var(--nth-texto-forte);
  text-align: right;
  padding-right: 0;
}

/* ==========================================================
   12. SCROLL REVEAL (§9.3 — só sob .js: nada nasce escondido sem JS)
   ========================================================== */
.js .nth-reveal {
  opacity: 0;
  transform: translateY(24px) skewY(calc(var(--nth-angulo) / 4));
  transition:
    opacity var(--nth-t-entrada) var(--nth-ease-saida),
    transform var(--nth-t-entrada) var(--nth-ease-saida);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .nth-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================
   13. MARQUEE (§9.4)
   ========================================================== */
.nth-marquee {
  display: flex;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  user-select: none;
  white-space: nowrap;
}
.nth-marquee__faixa {
  display: inline-flex;
  align-items: center;
  gap: var(--nth-esp-4);
  flex-shrink: 0;
  min-width: 100%;
  padding-right: var(--nth-esp-4);
  font-family: var(--nth-fonte-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  text-transform: uppercase;
  animation: nth-marquee var(--marquee-dur, 22s) linear infinite;
}
.nth-marquee:hover .nth-marquee__faixa,
.nth-marquee:focus-within .nth-marquee__faixa {
  animation-play-state: paused;
}

/* ==========================================================
   14. TOAST (§9.7)
   ========================================================== */
.nth-toast {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  z-index: var(--nth-z-toast);
  transform: translate(-50%, 16px);
  opacity: 0;
  visibility: hidden;
  max-width: min(92vw, 26rem);
  background: var(--nth-superficie-1);
  border: 2px solid var(--nth-vermelho);
  color: var(--nth-texto-forte);
  font-family: var(--nth-fonte-mono);
  font-size: var(--nth-fs-mono-corpo);
  padding: var(--nth-esp-3) var(--nth-esp-4);
  clip-path: polygon(
    var(--nth-chanfro) 0, 100% 0,
    100% calc(100% - var(--nth-chanfro)),
    calc(100% - var(--nth-chanfro)) 100%,
    0 100%, 0 var(--nth-chanfro));
  transition:
    transform var(--nth-t-medio) var(--nth-ease-saida),
    opacity var(--nth-t-medio) var(--nth-ease-saida),
    visibility 0s var(--nth-t-medio);
  cursor: pointer;
}
.nth-toast.visivel {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--nth-t-medio) var(--nth-ease-saida),
    opacity var(--nth-t-medio) var(--nth-ease-saida);
}

/* ==========================================================
   15. OVERLAY DE FLASH (slam do hero, sucesso do checkout)
   ========================================================== */
.nth-flash {
  position: fixed;
  inset: 0;
  z-index: var(--nth-z-flash);
  background: var(--nth-vermelho);
  opacity: 0;
  pointer-events: none;
}
.nth-flash.ativa { animation: nth-flash 80ms linear 1; }

/* ==========================================================
   16. KEYFRAMES GLOBAIS
   ========================================================== */
@keyframes nth-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes nth-pulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

@keyframes nth-quique { /* indicador "DESCE ↓" */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@keyframes nth-anel { /* anel pulsante do zap / pino do mapa */
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes nth-flash {
  0%   { opacity: 0; }
  50%  { opacity: .35; }
  100% { opacity: 0; }
}

@keyframes nth-slam { /* §5.1.4 — squash & settle */
  0%   { transform: translateY(-6px) scale(1, 1); }
  55%  { transform: translateY(8px) scale(1.1, 0.9); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes nth-shake { /* micro-shake do body: ±4px, nunca > 8px */
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

@keyframes nth-carimbo-cai { /* carimbo MATRICULADO / PRA VOCÊ */
  0%   { transform: scale(3) rotate(var(--nth-angulo)); opacity: 0; }
  100% { transform: scale(1) rotate(var(--nth-angulo)); opacity: 1; }
}

@keyframes nth-giro {
  to { transform: rotate(360deg); }
}

@keyframes nth-surge-some { /* stamps "+1 REP", "BORA." */
  0%   { opacity: 0; transform: translateY(0) rotate(var(--nth-angulo)) scale(.8); }
  20%  { opacity: 1; transform: translateY(-4px) rotate(var(--nth-angulo)) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) rotate(var(--nth-angulo)) scale(1); }
}

/* ==========================================================
   17. PREFERS-REDUCED-MOTION (§11.1 — bloco global obrigatório)
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .nth-marquee__faixa { animation: none; }
  .nth-marquee__faixa[aria-hidden="true"] { display: none; } /* sem duplicata visível */
  .nth-zap::after { animation: none; opacity: 0; }
  .js .nth-reveal { transform: none; transition: opacity 200ms linear; }
  .js .nth-titulo-corte { transform: none; clip-path: none; }
}

/* ==========================================================
   18. LINK ENTRAR DO HEADER (área logada — AREA_SPEC §5.3)
   ========================================================== */
.nth-nav__entrar {
  font-family: var(--nth-fonte-corpo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 0.875rem;
  color: var(--nth-texto-forte);
  text-decoration: none;
  padding: var(--nth-esp-2);
  white-space: nowrap;
}
.nth-nav__entrar:hover,
.nth-nav__entrar:focus-visible,
.nth-nav__entrar[aria-current="page"] {
  color: var(--nth-vermelho-texto);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
@media (max-width: 479.98px) {
  .nth-nav__entrar { font-size: 0.8125rem; padding: var(--nth-esp-1); }
}

/* ==========================================================
   TRANSICAO DE PAGINA - cortina diagonal no eixo da marca (-12 graus).
   Injetada pelo ui.js em todas as paginas; some com reduced-motion.
   ========================================================== */
.nth-transicao {
  position: fixed;
  top: 0; bottom: 0; left: -22%; right: -22%;
  z-index: 9999;
  background: #060606;
  transform: translateX(-118%) skewX(var(--nth-angulo));
  pointer-events: none;
}
.nth-transicao::before,
.nth-transicao::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 10px;
  background: var(--nth-vermelho);
  box-shadow: 0 0 24px rgba(237, 28, 36, 0.6);
}
.nth-transicao::before { left: -4px; }
.nth-transicao::after { right: -4px; }
.nth-transicao.cobrindo { transform: translateX(0) skewX(var(--nth-angulo)); }
.nth-transicao.entrando {
  animation: nth-wipe-entra 320ms cubic-bezier(0.72, 0, 0.28, 1) forwards;
}
.nth-transicao.saindo {
  transform: translateX(0) skewX(var(--nth-angulo));
  animation: nth-wipe-sai 420ms 40ms cubic-bezier(0.72, 0, 0.28, 1) forwards;
}
@keyframes nth-wipe-entra { to { transform: translateX(0) skewX(var(--nth-angulo)); } }
@keyframes nth-wipe-sai { to { transform: translateX(118%) skewX(var(--nth-angulo)); } }

/* Botao em estado de carregamento - feedback imediato de clique */
.nth-btn.carregando {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}
.nth-btn.carregando::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nth-gira 700ms linear infinite;
}
@keyframes nth-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .nth-transicao { display: none; }
  .nth-btn.carregando::after { animation: none; }
}

/* Mini avatar do header logado (ao lado do OLA) */
.nth-nav__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  background-color: rgba(255, 255, 255, 0.08);
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: var(--nth-vermelho-texto);
  font-family: var(--nth-fonte-display);
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
}
.nth-nav__avatar.tem-foto { border-color: var(--nth-vermelho); }