/* ==========================================================================
   S17 — Landing page de contratação do SporTI Pay  ·  work item #23064
   ==========================================================================

   🔴 PÁGINA ESTÁTICA, AUTOCONTIDA E SEM NENHUMA REQUISIÇÃO EXTERNA.
      Nada de CDN, nada de Google Fonts, nada de analytics, nada de iframe,
      nada de `fetch`. Abre por `file://` numa máquina sem internet e renderiza
      idêntica. O guard é a régua do §6 do prompt da entrega, com controle
      positivo nas duas direções — ver docs/pbi/23064/evidencias/.

   🔴 ESTA PASTA NÃO É PARTE DA APLICAÇÃO. Ela mora na raiz do repositório, fora
      do projeto .NET, e não entra no publish: o pipeline publica só
      `SporTIPay/SporTIPay.csproj` (azure-pipelines-dev.yml:749-755,
      `publishWebProjects: false`), e o SDK Web faz glob dentro da pasta do
      projeto. Provado por `dotnet publish` — evidências no PBI.

   📌 CAMADA 1 (abaixo) É CÓPIA VERBATIM dos tokens oficiais de
      `SporTIPay/Styles/design-system/` (#23291), que por sua vez são cópia
      verbatim do design system. Ela existe aqui porque a página é autocontida e
      não pode importar folha nenhuma. 🔴 Se um valor precisar mudar, ele muda NO
      DESIGN SYSTEM e volta como cópia — igual ao LEIA-ME.md do #23291 manda.

   ⚠️ E a redação acima é deliberada: a régua de requisição externa
      (docs/pbi/23064/regua-requisicao-externa.ps1) casa TEXTO LITERAL, então a
      diretiva de importação escrita por extenso num comentário a deixaria
      vermelha sem defeito nenhum no CSS. Foi o que aconteceu na primeira
      execução dela. 🔑 O conserto foi a PROSA, não a régua — enfraquecer a régua
      para ela ficar verde é o que o §8.3 do prompt proíbe, e a redação em
      linguagem natural não custa nada.
   ========================================================================== */


/* ==========================================================================
   CAMADA 1 · TOKENS  —  cópia verbatim, não editar à mão
   ========================================================================== */

/* --- fontes: reescrito só no CAMINHO, como o _fontes.scss do #23291 -------
   Duas fontes, não três: o Montserrat-Italic (394 KB) fica fora de propósito,
   e a landing não usa itálico de marca.
   🔴 Servidas LOCALMENTE, nunca de CDN — é o D-026, e a razão é a do DT-002:
      recurso de terceiro numa aplicação de pagamento.                       */

@font-face {
  font-family: "Montserrat";
  src: url("assets/fontes/Montserrat.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Orbitron";
  src: url("assets/fontes/Orbitron.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* --- cores: verbatim de design-system/_colors.scss ---------------------- */

:root {
  /* ---- Brand core ---- */
  --sporti-teal:        #47BCC2;  /* primary brand mark — "verde/turquesa" */
  --sporti-gray:        #676767;  /* primary neutral — logo gray */
  --sporti-pay-blue:    #1A7EA2;  /* SporTI Pay product accent */

  /* ---- Teal ramp ---- */
  --teal-50:   #ECF9FA;
  --teal-100:  #D2F0F2;
  --teal-200:  #A6E1E4;
  --teal-300:  #79D1D6;
  --teal-400:  #5FC7CC;
  --teal-500:  #47BCC2;  /* = --sporti-teal */
  --teal-600:  #35989E;
  --teal-700:  #2A787D;
  --teal-800:  #1F585C;
  --teal-900:  #16403F;

  /* ---- Gray / neutral ramp ---- */
  --gray-0:    #FFFFFF;
  --gray-50:   #F6F7F8;
  --gray-100:  #ECEEEF;
  --gray-200:  #DCDFE1;
  --gray-300:  #C2C6C9;
  --gray-400:  #9A9EA1;
  --gray-500:  #7C7F81;
  --gray-600:  #676767;  /* = --sporti-gray */
  --gray-700:  #4E4E4E;
  --gray-800:  #363636;
  --gray-900:  #232323;

  /* ---- Pay blue ramp ---- */
  --blue-50:   #E9F3F8;
  --blue-100:  #C9E2ED;
  --blue-300:  #6FB2CC;
  --blue-500:  #1A7EA2;  /* = --sporti-pay-blue */
  --blue-700:  #135C77;
  --blue-900:  #0C3B4D;

  /* ---- Semantic status ---- */
  --success:   #2FA36B;
  --success-bg:#E5F5ED;
  --warning:   #E0A22B;
  --warning-bg:#FBF1DC;
  --danger:    #D9534F;
  --danger-bg: #FBE9E8;
  --info:      #47BCC2;
  --info-bg:   #ECF9FA;

  /* Text */
  --text-primary:    var(--gray-800);
  --text-secondary:  var(--gray-600);
  --text-muted:      var(--gray-400);
  --text-inverse:    var(--gray-0);
  --text-brand:      var(--teal-600);
  --text-link:       var(--teal-600);
  --text-link-hover: var(--teal-700);

  /* Surfaces */
  --surface-page:    var(--gray-50);
  --surface-card:    var(--gray-0);
  --surface-raised:  var(--gray-0);
  --surface-sunken:  var(--gray-100);
  --surface-brand:   var(--teal-500);
  --surface-brand-soft: var(--teal-50);
  --surface-dark:    var(--gray-800);

  /* Borders */
  --border-subtle:   var(--gray-200);
  --border-default:  var(--gray-300);
  --border-strong:   var(--gray-400);
  --border-brand:    var(--teal-500);

  /* Interactive / accent */
  --accent:          var(--teal-500);
  --accent-hover:    var(--teal-600);
  --accent-active:   var(--teal-700);
  --accent-soft:     var(--teal-50);
  --focus-ring:      var(--teal-400);

  /* --- tipografia: verbatim de design-system/_typography.scss ----------- */

  /* Families */
  --font-display: "Orbitron", "Montserrat", system-ui, sans-serif;
  --font-sans:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    var(--font-sans);

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Type scale (rem-based, 16px root) */
  --fs-display:   clamp(2.75rem, 5vw, 4rem);
  --fs-h1:        2.25rem;   /* 36 */
  --fs-h2:        1.75rem;   /* 28 */
  --fs-h3:        1.375rem;  /* 22 */
  --fs-h4:        1.125rem;  /* 18 */
  --fs-body-lg:   1.0625rem; /* 17 */
  --fs-body:      0.9375rem; /* 15 */
  --fs-body-sm:   0.8125rem; /* 13 */
  --fs-caption:   0.75rem;   /* 12 */
  --fs-overline:  0.6875rem; /* 11 */

  /* Line heights */
  --lh-tight:     1.1;
  --lh-heading:   1.2;
  --lh-snug:      1.35;
  --lh-body:      1.55;
  --lh-relaxed:   1.7;

  /* Letter spacing */
  --ls-display:   0.02em;
  --ls-tight:     -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-overline:  0.14em;

  /* --- layout: verbatim de design-system/_layout.scss ------------------- */

  /* Spacing scale */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Radii */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(35, 35, 35, 0.06);
  --shadow-sm:  0 1px 3px rgba(35, 35, 35, 0.08), 0 1px 2px rgba(35, 35, 35, 0.04);
  --shadow-md:  0 4px 12px rgba(35, 35, 35, 0.08), 0 2px 4px rgba(35, 35, 35, 0.04);
  --shadow-lg:  0 12px 28px rgba(35, 35, 35, 0.12), 0 4px 8px rgba(35, 35, 35, 0.05);
  --shadow-brand: 0 8px 24px rgba(71, 188, 194, 0.28);

  /* Focus */
  --focus-ring-width: 3px;
  --focus-ring-color: rgba(71, 188, 194, 0.45);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 820px;
}


/* ==========================================================================
   CAMADA 2 · DERIVADOS DA LANDING
   Nenhuma cor literal nova: tudo sai de token via `color-mix`. O protótipo
   usava `rgba(16,125,161,.6)` e afins, que são o azul ANTIGO (#107da1) escrito
   à mão — ver Q-5 em docs/pbi/23064/perguntas-abertas.md.
   📌 `color-mix` sem suporte no navegador invalida só a declaração da sombra;
      a página continua legível. Degradação escolhida em vez de literal.
   ========================================================================== */

:root {
  --brilho-pay:      0 12px 26px -8px color-mix(in srgb, var(--blue-500) 62%, transparent);
  --brilho-pay-leve: 0 6px 16px -6px color-mix(in srgb, var(--blue-500) 55%, transparent);
  --sombra-navegador: 0 30px 60px -24px color-mix(in srgb, var(--blue-900) 40%, transparent);
  --sombra-flutuante: 0 20px 40px -16px color-mix(in srgb, var(--blue-900) 45%, transparent);
  --veu-claro:  color-mix(in srgb, var(--gray-0) 8%, transparent);
  --veu-claro-2: color-mix(in srgb, var(--gray-0) 16%, transparent);
  --texto-sobre-escuro:        color-mix(in srgb, var(--gray-0) 92%, transparent);
  --texto-sobre-escuro-suave:  color-mix(in srgb, var(--gray-0) 70%, transparent);
  --texto-sobre-escuro-sutil:  color-mix(in srgb, var(--gray-0) 55%, transparent);
  --trama-clara: color-mix(in srgb, var(--gray-0) 5%, transparent);
  --trama-azul:  color-mix(in srgb, var(--blue-500) 6%, transparent);
  --recuo-lateral: var(--space-5);
  --recuo-secao: var(--space-12);
}

@media (min-width: 48rem) {
  :root {
    --recuo-lateral: var(--space-12);
    --recuo-secao: var(--space-24);
  }
}


/* ==========================================================================
   CAMADA 3 · BASE
   ========================================================================== */

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

html {
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text-primary);
  background: var(--surface-card);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

svg {
  display: block;
  flex: 0 0 auto;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: var(--blue-700);
  text-decoration: none;
}

a:hover {
  color: var(--blue-900);
  text-decoration: underline;
}

*:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 3px;
}

.pular-conteudo {
  position: fixed;
  z-index: 100;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-standard);
}

.pular-conteudo:focus {
  transform: translateY(0);
}

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

.limite {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--recuo-lateral);
}


/* ==========================================================================
   CAMADA 4 · BOTÕES E O ESTADO INERTE
   🔴 O estado inerte é o ponto de honestidade desta página, e ele é a decisão
      do Cristian de 07/09/2026 (Q-2): CTA que não leva a lugar nenhum NÃO PODE
      parecer clicável. "Um CTA que parece clicável e não faz nada é a mesma
      família da D-028." Por isso é `<button disabled>` — o estado é NATIVO: não
      recebe foco, não dispara evento, e o leitor de tela anuncia "desabilitado".
      Nenhum JS simula clique, e a página não tem JS nenhum.

   ⚠️ EMENDA de 08/09/2026 (Q-6, critério de aceite do #23064): os três "Começar
      agora" e o "Entrar" do topo PASSARAM A NAVEGAR para o host de dev do Pay
      (o destino literal está no `index.html`), e deixaram de ser inertes. Sobrou UM
      inerte: o "Falar com vendas" da seção de contratação — não há canal de
      vendas decidido. 🔑 O aviso da camada 14 foi ESTREITADO junto: aviso que
      declara inerte o que funciona é a mesma incoerência na direção oposta.
   ========================================================================== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  line-height: 1.25;
  text-align: center;
  /* ⚠️ MEDIDO a 360 px: sem isto o "Começar agora" do topo quebra em duas linhas,
     cresce em altura e COLIDE com a marca — o botão passa a ser pintado por cima
     do "SporTI Pay". Rótulo de botão não quebra. */
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}

.botao--grande {
  padding: var(--space-4) var(--space-8);
}

.botao--medio {
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-body);
}

.botao--bloco {
  width: 100%;
  padding: var(--space-4);
}

.botao--primario {
  color: var(--text-inverse);
  background: var(--blue-500);
  box-shadow: var(--brilho-pay);
}

.botao--primario:hover {
  color: var(--text-inverse);
  background: var(--blue-700);
  text-decoration: none;
  transform: translateY(-2px);
}

.botao--primario-compacto {
  color: var(--text-inverse);
  background: var(--blue-500);
  box-shadow: var(--brilho-pay-leve);
}

.botao--primario-compacto:hover {
  color: var(--text-inverse);
  background: var(--blue-700);
  text-decoration: none;
  transform: translateY(-2px);
}

.botao--contorno {
  color: var(--text-primary);
  background: var(--surface-card);
  border-color: var(--border-default);
}

.botao--contorno:hover {
  color: var(--text-primary);
  border-color: var(--blue-300);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Botão de texto — o "Entrar" do topo. Navega de verdade desde 08/09/2026. */
.botao--texto {
  padding: var(--space-2) var(--space-1);
  color: var(--text-secondary);
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-body);
}

.botao--texto:hover {
  color: var(--blue-700);
  text-decoration: none;
}

/* Botão claro — o "Começar agora" sobre o bloco azul da seção de contratação. */
.botao--claro {
  color: var(--blue-700);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}

.botao--claro:hover {
  color: var(--blue-900);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Contorno CLARO — o "Falar com vendas" sobre o bloco azul de contratação.
   🔴 EXISTE PORQUE O CONTROLE MUDOU DE NATUREZA em 08/09/2026 (#23501): ele era
      `<button disabled>` com `.botao--inerte-claro`, e virou `<a>` que abre o
      WhatsApp. Sem esta classe os dois CTAs do bloco ficariam ambos
      `.botao--claro` — dois botões idênticos lado a lado, sem hierarquia, e o
      secundário competindo com o "Começar agora" que é o ato principal. */
.botao--contorno-claro {
  color: var(--texto-sobre-escuro);
  background: transparent;
  border-color: var(--texto-sobre-escuro-sutil);
}

.botao--contorno-claro:hover {
  color: var(--texto-sobre-escuro);
  background: var(--veu-claro);
  border-color: var(--texto-sobre-escuro);
  text-decoration: none;
  transform: translateY(-2px);
}

/* 🔴 `.botao--inerte` e `.botao--inerte-claro` FORAM REMOVIDAS em 08/09/2026
   (#23501), e a remoção é deliberada, não faxina.

   Elas existiam para os CTAs sem destino, e depois desta entrega NÃO SOBRA
   nenhum: medido zero `<button disabled>` e zero `href="#"` vivo no index.html.
   🔑 CSS que nenhum seletor alcança é mecanismo órfão — a família da D-163 do
   CLAUDE.md, com o agravante de que folha de estilo não gera aviso nenhum:
   ninguém percebe, e o próximo leitor acredita que a página ainda tem controle
   inerte porque a classe está lá. Se um CTA voltar a não ter destino, as duas
   regras voltam do histórico (23064, entrega original desta landing). */

.botao__seta {
  transition: none;
}


/* ==========================================================================
   CAMADA 5 · TOPO
   ========================================================================== */

.topo {
  position: sticky;
  z-index: 40;
  top: 0;
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
}

.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--space-16);
}

.topo__marca {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topo__logo {
  display: block;
  width: auto;
  height: 26px;
}

.topo__nome {
  color: var(--gray-700);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-normal);
  white-space: nowrap;
}

.topo__nome-produto {
  color: var(--sporti-pay-blue);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
}

.topo__nav {
  display: none;
  align-items: center;
  gap: var(--space-8);
}

.topo__link {
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}

.topo__link:hover {
  color: var(--blue-700);
  text-decoration: none;
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topo__entrar {
  display: none;
}

/* ⚠️ MEDIDO a 360 px: com o recuo de 20 px de cada lado sobram 320 px úteis, e a
   marca (logo 26 + "SporTI Pay" a 17 px) mais o CTA a 15 px com seta NÃO CABEM —
   o botão era pintado por cima do "Pay". Abaixo de 48rem o CTA fica compacto e a
   seta sai; o rótulo permanece inteiro, porque é ele que diz o que o botão faz. */
@media (max-width: 47.9375rem) {
  .topo__interno {
    gap: var(--space-2);
  }

  .topo__acoes .botao {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-body-sm);
  }

  .topo__acoes .botao__seta {
    display: none;
  }

  .topo__nome {
    font-size: var(--fs-body);
  }
}

@media (min-width: 64rem) {
  .topo__nav,
  .topo__entrar {
    display: inline-flex;
  }
}


/* ==========================================================================
   CAMADA 6 · DESTAQUE (hero)
   ========================================================================== */

.destaque {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--surface-card) 78%);
}

.destaque__trama {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, var(--trama-azul) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, var(--trama-azul) 0 1px, transparent 1px 26px);
  pointer-events: none;
}

.destaque__grade {
  position: relative;
  display: grid;
  gap: var(--space-10);
  align-items: center;
  padding-block: var(--space-10) var(--space-16);
}

.destaque__texto {
  min-width: 0;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--blue-700);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.selo__ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sporti-pay-blue);
}

.destaque__titulo {
  margin-top: var(--space-5);
  color: var(--gray-800);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.destaque__titulo-realce {
  color: var(--sporti-pay-blue);
}

.destaque__lead {
  max-width: 34rem;
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.destaque__meios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
}

.chip__icone {
  color: var(--sporti-pay-blue);
}

.destaque__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.destaque__reforco {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
}

.destaque__visual {
  position: relative;
  min-width: 0;
}

@media (min-width: 64rem) {
  .destaque__grade {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-12);
    padding-block: var(--space-20);
  }

  .destaque__titulo {
    font-size: var(--fs-display);
  }
}


/* ==========================================================================
   CAMADA 7 · MOCKUP DE NAVEGADOR
   📌 A barra de endereço mostra `ingressos.seuclube.com.br` — sem esquema e sem
      afirmar domínio nosso. O protótipo trazia `sportipay.com.br`, e o D-002
      registra que o domínio da página pública está EM ABERTO (P-005): página
      publicada não afirma o que ainda não foi decidido.
   ========================================================================== */

.navegador {
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--sombra-navegador);
}

.navegador__barra {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding-inline: var(--space-3);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-subtle);
}

.navegador__ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.navegador__ponto--fechar {
  background: var(--danger);
}

.navegador__ponto--minimizar {
  background: var(--warning);
}

.navegador__ponto--maximizar {
  background: var(--success);
}

.navegador__endereco {
  display: flex;
  align-items: center;
  flex: 1;
  height: 20px;
  margin-left: var(--space-2);
  padding-inline: var(--space-2);
  overflow: hidden;
  color: var(--text-muted);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--fs-overline);
  white-space: nowrap;
}

.navegador__capa {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 150px;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
}

.navegador__capa-trama {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, var(--veu-claro) 0 2px, transparent 2px 20px);
}

.navegador__capa-etiqueta {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  padding: var(--space-1) var(--space-2);
  color: var(--texto-sobre-escuro-suave);
  border: 1px solid var(--texto-sobre-escuro-sutil);
  border-radius: var(--radius-pill);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

.navegador__capa-texto {
  position: relative;
  padding: var(--space-3) var(--space-4);
  color: var(--text-inverse);
}

.navegador__capa-linha {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  opacity: 0.85;
}

.navegador__capa-titulo {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
}

.navegador__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.lote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.lote--realce {
  background: var(--blue-50);
  border-color: var(--blue-100);
}

.lote__nome {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
}

.lote__estado {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-overline);
}

.lote__estado--realce {
  color: var(--sporti-pay-blue);
  font-weight: var(--fw-semibold);
}

.lote__preco {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}

.navegador__botao-falso {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  color: var(--text-inverse);
  background: var(--blue-500);
  border-radius: var(--radius-lg);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}

.cartao-flutuante {
  position: absolute;
  padding: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-flutuante);
}

/* 📌 Os offsets abaixo não são os do protótipo, e a diferença foi MEDIDA em
   captura a 1440: no protótipo o mockup é renderizado num quadro de 3200 px de
   altura e os dois cartões sobram para fora dele; aqui o mockup tem a altura do
   próprio conteúdo, e com `top: 24px` o cartão de taxa cobria a BARRA DE
   ENDEREÇO e o de check-in cobria o texto do botão falso. Empurrados para baixo
   e para fora, eles voltam a ler como profundidade em vez de defeito. */
.cartao-flutuante--checkin {
  right: calc(-1 * var(--space-8));
  bottom: calc(-1 * var(--space-8));
  width: 184px;
}

.cartao-flutuante--taxa {
  top: var(--space-10);
  left: calc(-1 * var(--space-8));
}

.cartao-flutuante__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--success);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
}

.cartao-flutuante__corpo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.cartao-flutuante__qr {
  width: 44px;
  height: 44px;
  background: conic-gradient(var(--blue-900) 0 25%, var(--gray-0) 0 50%, var(--blue-900) 0 75%, var(--gray-0) 0);
  background-size: 11px 11px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.cartao-flutuante__portao {
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
}

.cartao-flutuante__ingresso {
  color: var(--text-muted);
  font-size: var(--fs-overline);
}

.cartao-flutuante__rotulo {
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.cartao-flutuante__valor {
  margin-top: 2px;
  color: var(--sporti-pay-blue);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
}

/* Os dois cartões flutuantes saem do fluxo e, a 360, brigariam com o mockup:
   abaixo de 64rem eles voltam a ser bloco em sequência. */
@media (max-width: 63.9375rem) {
  .cartao-flutuante {
    position: static;
    width: auto;
    margin-top: var(--space-3);
  }
}


/* ==========================================================================
   CAMADA 8 · FAIXA DE PÚBLICO
   ========================================================================== */

.publico {
  position: relative;
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
}

.publico__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5);
}

.publico__rotulo {
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.publico__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.publico__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}

.publico__icone {
  color: var(--sporti-pay-blue);
}

@media (min-width: 64rem) {
  .publico__lista,
  .publico__interno {
    gap: var(--space-8);
  }
}


/* ==========================================================================
   CAMADA 9 · SEÇÕES GENÉRICAS
   ========================================================================== */

.secao {
  background: var(--surface-card);
}

.secao--sunken {
  background: var(--surface-page);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.secao--estreita .limite {
  max-width: var(--container-narrow);
}

.secao__interno {
  padding-block: var(--recuo-secao);
}

.secao__cabecalho {
  max-width: 42.5rem;
}

.secao__cabecalho--centro {
  max-width: none;
  text-align: center;
}

.secao__rotulo {
  color: var(--sporti-pay-blue);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

.secao__titulo {
  margin-top: var(--space-3);
  color: var(--gray-800);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

.secao__lead {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.secao__grade {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .secao__grade {
    margin-top: var(--space-10);
  }
}


/* ==========================================================================
   CAMADA 10 · DIFERENCIAIS E PASSOS
   ========================================================================== */

.cartao {
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}

.cartao:hover {
  border-color: var(--blue-100);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.cartao__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: var(--sporti-pay-blue);
  background: var(--blue-50);
  border-radius: var(--radius-lg);
}

.cartao__titulo {
  margin-top: var(--space-5);
  color: var(--gray-800);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
}

.cartao__texto {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.passo {
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.passo__topo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.passo__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--text-inverse);
  background: var(--blue-500);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
}

.passo__icone {
  color: var(--sporti-pay-blue);
}

.passo__titulo {
  margin-top: var(--space-4);
  color: var(--gray-800);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
}

.passo__texto {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

@media (min-width: 48rem) {
  .diferenciais__grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .passos__grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .passos__grade {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   CAMADA 11 · NÚMEROS (prova social)
   🔴 Os três valores desta seção são afirmação factual, e a fonte é uma só:
      CONFIRMADO PELO CRISTIAN EM 07/09/2026. Ver decisoes.md, D-local-4.
      Não altere número aqui sem nova confirmação datada.
   ========================================================================== */

.numeros {
  position: relative;
  overflow: hidden;
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-500) 100%);
}

.numeros__trama {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, var(--trama-clara) 0 1px, transparent 1px 30px);
}

.numeros__interno {
  position: relative;
}

.numeros .secao__titulo {
  color: var(--text-inverse);
}

.numeros .secao__rotulo {
  color: var(--texto-sobre-escuro-suave);
}

.numero {
  padding: var(--space-6);
  background: var(--veu-claro);
  border: 1px solid var(--veu-claro-2);
  border-radius: var(--radius-xl);
}

.numero__valor {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: var(--ls-display);
}

.numero__rotulo {
  margin-top: var(--space-2);
  color: var(--texto-sobre-escuro);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}

.numero__sub {
  margin-top: var(--space-1);
  color: var(--texto-sobre-escuro-suave);
  font-size: var(--fs-body-sm);
}

.numeros__nota {
  max-width: 40rem;
  margin-top: var(--space-6);
  color: var(--texto-sobre-escuro-suave);
  font-size: var(--fs-body);
}

@media (min-width: 48rem) {
  .numeros__grade {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   CAMADA 12 · TAXAS
   🔴 Os três valores do tarifário são afirmação factual — CONFIRMADO PELO
      CRISTIAN EM 07/09/2026 — e a ressalva de que são ilustrativos, mais o
      "a partir de", são CONDIÇÃO da confirmação: taxa sem "a partir de" vira
      preço de tabela. Não remova nem a ressalva nem o "a partir de".
   ========================================================================== */

.taxas__grade {
  align-items: start;
}

.incluido {
  padding: var(--space-8);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
}

.incluido__titulo {
  color: var(--gray-800);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
}

.incluido__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.incluido__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

.incluido__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--sporti-pay-blue);
  background: var(--blue-50);
  border-radius: 50%;
}

.tarifario {
  padding: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.tarifario__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  color: var(--blue-700);
  background: var(--blue-50);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
}

.tarifario__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.tarifario__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.tarifario__meio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tarifario__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: var(--sporti-pay-blue);
  background: var(--blue-50);
  border-radius: var(--radius-lg);
}

.tarifario__nome {
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}

.tarifario__nota {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.tarifario__valor {
  color: var(--gray-800);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  text-align: right;
}

.tarifario__ressalva {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

.tarifario__acao {
  margin-top: var(--space-5);
}

@media (min-width: 64rem) {
  .taxas__grade {
    grid-template-columns: 1.1fr 0.9fr;
  }
}


/* ==========================================================================
   CAMADA 13 · PERGUNTAS
   📌 Acordeão em `<details name>` NATIVO — zero JavaScript na página inteira.
      O atributo `name` faz o acordeão exclusivo (um aberto por vez) sem script;
      navegador sem suporte a ele simplesmente permite mais de um aberto, que é
      degradação e não defeito. Ver decisoes.md, D-local-3.
   ========================================================================== */

.perguntas__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.pergunta {
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.pergunta__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  color: var(--gray-800);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  cursor: pointer;
  list-style: none;
}

.pergunta__titulo::-webkit-details-marker {
  display: none;
}

.pergunta__seta {
  flex: 0 0 auto;
  color: var(--sporti-pay-blue);
  transition: transform var(--dur-base) var(--ease-standard);
}

.pergunta[open] .pergunta__seta {
  transform: rotate(180deg);
}

.pergunta__resposta {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}


/* ==========================================================================
   CAMADA 14 · CHAMADA FINAL E O AVISO DE PRÉVIA
   🔴 É AQUI que a página é honesta, e é o único lugar em que o aviso aparece.
      Depois da emenda de 08/09/2026 o aviso cobre EXATAMENTE dois conjuntos: o
      "Falar com vendas" deste bloco e os 15 itens do rodapé. O "Começar agora"
      daqui e o "Entrar" do topo NAVEGAM — e por isso saíram do texto do aviso.
      SEM promessa de data, sem mailto, sem WhatsApp.
   ========================================================================== */

.chamada__caixa {
  position: relative;
  overflow: hidden;
  padding: var(--space-10) var(--space-6);
  color: var(--text-inverse);
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  border-radius: var(--radius-xl);
  text-align: center;
}

.chamada__trama {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, var(--trama-clara) 0 1px, transparent 1px 28px);
}

.chamada__conteudo {
  position: relative;
}

.chamada__titulo {
  max-width: 40rem;
  margin-inline: auto;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.chamada__lead {
  max-width: 32.5rem;
  margin: var(--space-4) auto 0;
  color: var(--texto-sobre-escuro);
  font-size: var(--fs-body-lg);
}

.chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}

.aviso-previa {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 36rem;
  margin: var(--space-6) auto 0;
  padding: var(--space-4);
  color: var(--texto-sobre-escuro);
  background: var(--veu-claro);
  border: 1px solid var(--veu-claro-2);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  text-align: left;
}

.aviso-previa__icone {
  margin-top: 2px;
  color: var(--text-inverse);
}

.aviso-previa strong {
  color: var(--text-inverse);
}

@media (min-width: 48rem) {
  .chamada__caixa {
    padding: var(--space-16) var(--space-12);
  }
}


/* ==========================================================================
   CAMADA 15 · RODAPÉ
   📌 Os 15 itens das três colunas apontavam para `href="#"` no protótipo. Aqui
      eles NÃO são links: são texto. Link que não navega é a mesma falha
      silenciosa do CTA que não converte.
   ========================================================================== */

.rodape {
  color: var(--texto-sobre-escuro-suave);
  background: var(--gray-900);
}

.rodape__interno {
  padding-block: var(--space-12);
}

.rodape__grade {
  display: grid;
  gap: var(--space-8);
}

.rodape__marca {
  min-width: 0;
}

.rodape__marca-linha {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.rodape__logo {
  display: block;
  width: auto;
  height: 26px;
}

.rodape__nome {
  color: var(--text-inverse);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
}

.rodape__nome-produto {
  color: var(--teal-400);
  font-family: var(--font-display);
}

.rodape__sobre {
  max-width: 19rem;
  margin-top: var(--space-4);
  color: var(--texto-sobre-escuro-sutil);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.rodape__coluna {
  min-width: 0;
}

.rodape__titulo {
  color: var(--texto-sobre-escuro-sutil);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.rodape__itens {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.rodape__item {
  color: var(--texto-sobre-escuro-suave);
  font-size: var(--fs-body);
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--veu-claro-2);
}

.rodape__copyright {
  color: var(--texto-sobre-escuro-sutil);
  font-size: var(--fs-caption);
}

.rodape__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--texto-sobre-escuro-sutil);
  font-size: var(--fs-caption);
}

@media (min-width: 48rem) {
  .rodape__grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .rodape__grade {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }

  .rodape__interno {
    padding-block: var(--space-16);
  }
}


/* ==========================================================================
   CAMADA 16 · MOVIMENTO REDUZIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .botao:hover,
  .cartao:hover {
    transform: none;
  }
}