/*
 * Landing do timerush (Figma, seção 13). Só tokens do guia da v2 (tokens.css, cópia de
 * v2/docs/marca/tokens.css): sem hex, rgb ou px aqui. Medidas de layout em rem.
 */
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-Regular.woff2') format('woff2'), url('/fonts/Barlow-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-Medium.woff2') format('woff2'), url('/fonts/Barlow-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-SemiBold.woff2') format('woff2'), url('/fonts/Barlow-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/fonts/BarlowCondensed-Bold.woff2') format('woff2'), url('/fonts/BarlowCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--tr-bg);
  color: var(--tr-text);
  font: var(--tr-type-body);
  letter-spacing: var(--tr-track-body);
}
/* Cada bloco com tema próprio (topo e rodapé escuros) pega a cor de texto do seu tema. */
[data-theme] { color: var(--tr-text); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tr-accent-text); text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 0.15rem solid var(--tr-accent); outline-offset: 0.2rem; border-radius: var(--tr-radius-xs); }
h1, h2, h3, p, ul { margin: 0; }

.pular { position: absolute; left: var(--tr-space-4); top: calc(-1 * var(--tr-space-16)); padding: var(--tr-space-2) var(--tr-space-4); background: var(--tr-accent); color: var(--tr-on-accent); border-radius: var(--tr-radius-pill); z-index: var(--tr-z-modal); }
.pular:focus { top: var(--tr-space-4); }

.largura { width: min(100% - 2 * var(--tr-space-4), 72rem); margin-inline: auto; }
.estreita { width: min(100% - 2 * var(--tr-space-4), 46rem); margin-inline: auto; }

/* Menu */
.menu { position: sticky; top: 0; z-index: var(--tr-z-header); background: color-mix(in srgb, var(--tr-bg) 88%, transparent); backdrop-filter: blur(0.75rem); border-bottom: var(--tr-hairline) solid var(--tr-border); }
.menu__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--tr-space-4); min-height: 4rem; }
.menu__marca img { width: var(--tr-marca-w); height: var(--tr-marca-h); }
.menu__links { display: none; gap: var(--tr-space-6); list-style: none; padding: 0; }
.menu__links a { color: var(--tr-text-2); text-decoration: none; font: var(--tr-type-label); }
.menu__links a:hover { color: var(--tr-text); }
@media (min-width: 52rem) { .menu__links { display: flex; } }

/* Botões */
.botao {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: var(--tr-target-min); padding: var(--tr-space-2) var(--tr-space-5);
  border-radius: var(--tr-radius-pill); text-decoration: none; font: var(--tr-type-button);
  transition: background var(--tr-dur-fast) var(--tr-ease-out), transform var(--tr-dur-fast) var(--tr-ease-out);
}
.botao small { font: var(--tr-type-overline); opacity: 0.85; }
.botao--principal { background: var(--tr-accent); color: var(--tr-on-accent); }
.botao--principal:hover { background: var(--tr-accent-hover); }
.botao--principal:active { background: var(--tr-accent-press); transform: translateY(var(--tr-hairline)); }
.botao--linha { color: var(--tr-text); border: var(--tr-hairline) solid var(--tr-border-strong); }
.botao--linha:hover { background: var(--tr-surface-2); }
.botao--grande { min-height: var(--tr-target-primary); padding-inline: var(--tr-space-6); }

/* Topo (escuro, como no Figma) */
.topo { position: relative; overflow: hidden; background: var(--tr-bg); padding-block: var(--tr-space-12) var(--tr-space-16); }
.topo::before { content: ''; position: absolute; inset: 0; background: var(--tr-gradient-brand-glow); pointer-events: none; }
.topo__grade { position: relative; display: grid; gap: var(--tr-space-12); align-items: center; }
@media (min-width: 60rem) { .topo__grade { grid-template-columns: 1.1fr 0.9fr; } .topo { padding-block: var(--tr-space-16); } }
.topo__marca { width: min(100%, 22rem); margin-bottom: var(--tr-space-8); }
.topo h1 { font: 600 clamp(2.4rem, 1.4rem + 3.6vw, 4rem)/1.05 var(--tr-font-display); letter-spacing: -0.02em; max-width: 14ch; }
.topo__sub { margin-top: var(--tr-space-5); font: var(--tr-type-body-lg); color: var(--tr-text-2); max-width: 34rem; }
.topo__acoes { display: flex; flex-wrap: wrap; gap: var(--tr-space-3); margin-top: var(--tr-space-8); }
.topo__miudo { margin-top: var(--tr-space-5); font: var(--tr-type-caption); color: var(--tr-text-3); max-width: 34rem; }
.topo__miudo + .topo__miudo { margin-top: var(--tr-space-2); }

/* Celulares com as telas reais do app */
.celulares { position: relative; display: flex; justify-content: center; gap: var(--tr-space-4); padding-bottom: var(--tr-space-12); }
.celular { margin: 0; width: min(46%, 15rem); border-radius: calc(var(--tr-radius-xl) * 2); padding: var(--tr-space-2); background: var(--tr-surface-2); box-shadow: var(--tr-elev-overlay); }
.celular img { border-radius: calc(var(--tr-radius-xl) * 1.5); aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.celular:first-child { transform: translateY(var(--tr-space-8)) rotate(-3deg); }
.celular:last-child { transform: rotate(3deg); }
.celulares__nota { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: var(--tr-type-overline); color: var(--tr-text-3); }

/* Faixa de confiança */
.confianca { background: var(--tr-surface-2); border-block: var(--tr-hairline) solid var(--tr-border); }
.confianca ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tr-space-3) var(--tr-space-8); list-style: none; padding: var(--tr-space-4) 0; font: var(--tr-type-label); color: var(--tr-text-2); }
.confianca li::before { content: '✓ '; color: var(--tr-success); }

/* Seções */
.secao { padding-block: var(--tr-space-16); }
.secao--clara { background: var(--tr-surface); }
.secao h2 { font: 600 clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem)/1.15 var(--tr-font-display); letter-spacing: -0.01em; }
.secao__intro { margin-top: var(--tr-space-3); color: var(--tr-text-2); max-width: 40rem; }
.centro { text-align: center; }
.centro .secao__intro { margin-inline: auto; }

.lados { display: grid; gap: var(--tr-space-5); }
@media (min-width: 52rem) { .lados { grid-template-columns: 1fr 1fr; } }
.cartao { background: var(--tr-surface); border: var(--tr-hairline) solid var(--tr-border); border-radius: var(--tr-radius-xl); padding: var(--tr-space-8); }
.cartao h3 { font: var(--tr-type-title-lg); letter-spacing: var(--tr-track-title-lg); }
.cartao__rotulo { font: var(--tr-type-overline); color: var(--tr-accent-text); margin-bottom: var(--tr-space-2); }
.lista { margin-top: var(--tr-space-5); padding-left: var(--tr-space-5); display: grid; gap: var(--tr-space-3); color: var(--tr-text-2); }
.lista li::marker { color: var(--tr-accent); }

.passos { display: grid; gap: var(--tr-space-8); margin-top: var(--tr-space-10); list-style: none; padding: 0; counter-reset: passo; }
@media (min-width: 52rem) { .passos { grid-template-columns: repeat(3, 1fr); } }
.passos li { counter-increment: passo; border-top: var(--tr-hairline) solid var(--tr-border-strong); padding-top: var(--tr-space-5); }
.passos li::before { content: counter(passo); display: block; font: var(--tr-type-num-xl); color: var(--tr-accent-text); margin-bottom: var(--tr-space-3); }
.passos h3 { font: var(--tr-type-section); }
.passos p { margin-top: var(--tr-space-1); color: var(--tr-text-2); }

.precos { display: grid; gap: var(--tr-space-5); margin: var(--tr-space-10) auto 0; max-width: 46rem; text-align: left; }
@media (min-width: 40rem) { .precos { grid-template-columns: 1fr 1fr; } }
.preco { background: var(--tr-surface); border: var(--tr-hairline) solid var(--tr-border); border-radius: var(--tr-radius-xl); padding: var(--tr-space-6); }
.preco--destaque { border-color: var(--tr-accent); box-shadow: 0 0 0 var(--tr-hairline) var(--tr-accent); }
.preco h3 { font: var(--tr-type-label); }
.preco__valor { margin-top: var(--tr-space-2); font: var(--tr-type-num-xl); }
.preco__periodo { color: var(--tr-text-2); font: var(--tr-type-caption); }
.preco__inclui { margin-top: var(--tr-space-4); color: var(--tr-text-3); font: var(--tr-type-caption); }
.preco__inclui + .preco__inclui { margin-top: var(--tr-space-1); }
.precos__nota { margin-top: var(--tr-space-6); color: var(--tr-text-3); font: var(--tr-type-caption); }
.precos__acao { margin-top: var(--tr-space-8); }

.perguntas { margin-top: var(--tr-space-8); border-top: var(--tr-hairline) solid var(--tr-border); }
.perguntas details { border-bottom: var(--tr-hairline) solid var(--tr-border); }
.perguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--tr-space-4); padding-block: var(--tr-space-5); font: var(--tr-type-section); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: '+'; color: var(--tr-accent-text); font: var(--tr-type-title); transition: transform var(--tr-dur-fast) var(--tr-ease-out); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas p { padding-bottom: var(--tr-space-5); color: var(--tr-text-2); max-width: 44rem; }

/* Rodapé (escuro) */
.rodape { background: var(--tr-bg); color: var(--tr-text-2); padding-block: var(--tr-space-12) var(--tr-space-10); font: var(--tr-type-caption); }
.rodape__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tr-space-6); }
.rodape__marca img { width: var(--tr-marca-w); height: var(--tr-marca-h); }
.rodape nav ul { display: flex; flex-wrap: wrap; gap: var(--tr-space-2) var(--tr-space-6); list-style: none; padding: 0; }
.rodape nav a { color: var(--tr-text); text-decoration: none; font: var(--tr-type-label); }
.rodape nav a:hover { color: var(--tr-accent-text); }
.rodape__legal { margin-top: var(--tr-space-8); padding-top: var(--tr-space-6); border-top: var(--tr-hairline) solid var(--tr-border); display: grid; gap: var(--tr-space-2); color: var(--tr-text-3); }

/* Páginas de texto: Termos e Privacidade */
.texto { padding-block: var(--tr-space-12) var(--tr-space-16); }
.texto h1 { font: var(--tr-type-title-lg); letter-spacing: var(--tr-track-title-lg); }
.texto__versao { margin-top: var(--tr-space-2); color: var(--tr-text-3); font: var(--tr-type-caption); }
.texto__aviso { margin-top: var(--tr-space-6); padding: var(--tr-space-4); border-radius: var(--tr-radius-lg); background: var(--tr-warning-soft); color: var(--tr-text); font: var(--tr-type-caption); }
.texto h2 { margin-top: var(--tr-space-10); font: var(--tr-type-title); letter-spacing: var(--tr-track-title); }
.texto p, .texto ul { margin-top: var(--tr-space-3); color: var(--tr-text-2); }
.texto ul { padding-left: var(--tr-space-5); display: grid; gap: var(--tr-space-2); }
.texto strong { color: var(--tr-text); font-weight: 600; }
.texto table { margin-top: var(--tr-space-4); width: 100%; border-collapse: collapse; font: var(--tr-type-caption); }
.texto th, .texto td { text-align: left; vertical-align: top; padding: var(--tr-space-3) var(--tr-space-2); border-bottom: var(--tr-hairline) solid var(--tr-border); color: var(--tr-text-2); }
.texto th { color: var(--tr-text); font-weight: 600; }
.tabela { overflow-x: auto; }
.tabela:focus-visible { outline: 0.15rem solid var(--tr-accent); outline-offset: 0.2rem; }
.visualmente-oculto { position: absolute; width: var(--tr-hairline); height: var(--tr-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }