/* =====================================================================
   BRIQUIZ – site de apresentação. Só usa os tokens de design-system/tokens.css.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--giz); color: var(--ink); font-family: var(--font-texto); font-size: 16px; line-height: 24px; }
a { color: var(--tijolo-forte); font-weight: 700; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); color: var(--ink); }
h1 { font-size: 64px; line-height: 64px; font-weight: 700; letter-spacing: -0.5px; }
h2 { font-size: 40px; line-height: 44px; font-weight: 600; }
h3 { font-size: 22px; line-height: 28px; font-weight: 700; }
p { margin: 0; }
i.ph-bold { font-size: 20px; line-height: 1; vertical-align: -3px; }
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }
.ink :focus-visible { outline-color: var(--sol); }
.suave { color: var(--texto-suave); }
.revisar { background: var(--sol); color: var(--ink); border-radius: var(--radius-md); padding: 0 var(--space-2); font-size: 13px; font-weight: 800; white-space: nowrap; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: var(--space-4); top: var(--space-2); z-index: 20; background: var(--branco); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); }

/* Logo */
.logo { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -1px; color: var(--ink); text-decoration: none; }
.logo .i { position: relative; display: inline-block; }
.logo .i::before { content: ""; position: absolute; left: 50%; top: -0.02em; width: .19em; height: .19em; transform: translateX(-50%); background: var(--tijolo); border-radius: 3px; }
.logo.negativo { color: var(--branco); }
.logo.negativo .i::before { background: var(--sol); }

/* Botão */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 0; border-radius: var(--radius-md); padding: 14px 28px; font-family: var(--font-texto); font-weight: 800; font-size: 19px; line-height: 24px; cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .12s; background: var(--tijolo); color: var(--branco); box-shadow: 0 6px 0 var(--tijolo-borda); margin-bottom: 6px; }
a.botao { color: var(--branco); }
.botao:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--tijolo-borda); }
.botao.secundario { background: var(--ink); box-shadow: 0 6px 0 var(--ink-borda); }
.botao.discreto, a.botao.discreto { background: var(--branco); color: var(--ink); box-shadow: inset 0 0 0 2px var(--linha-forte), 0 6px 0 var(--linha); }
.botao.pequeno { padding: var(--space-2) var(--space-4); font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .botao { transition: none; } html { scroll-behavior: auto; } }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 10; background: var(--branco); box-shadow: 0 2px 0 var(--linha); }
.topo .dentro { max-width: 1120px; margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-4); }
.topo nav { margin-left: auto; display: flex; gap: var(--space-1); align-items: center; }
.topo nav a { color: var(--ink); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.topo nav a:hover { background: var(--areia); }
.topo nav .botao { padding: var(--space-2) var(--space-4); font-size: 16px; margin: 0 0 4px; box-shadow: 0 4px 0 var(--tijolo-borda); }
.topo nav a.botao { color: var(--branco); }
.topo nav a.botao:hover { background: var(--tijolo); }
.topo nav a.botao.discreto { color: var(--ink); background: var(--branco); box-shadow: inset 0 0 0 2px var(--linha-forte), 0 4px 0 var(--linha); }
#menu-botao { display: none; margin-left: auto; background: none; border: 0; padding: var(--space-2); border-radius: var(--radius-md); cursor: pointer; color: var(--ink); }
#menu-botao i.ph-bold { font-size: 28px; }

/* Seções */
.secao { padding: var(--space-12) var(--space-4); }
.secao > .dentro { max-width: 1120px; margin: 0 auto; display: grid; gap: var(--space-8); }
.secao.areia { background: var(--areia); }
.secao.ink { background: var(--ink); color: var(--branco); }
.secao.ink h2, .secao.ink h3 { color: var(--branco); }
.secao.ink a { color: var(--sol); }
.secao .cabeca { display: grid; gap: var(--space-3); max-width: 640px; }
.etiqueta { display: inline-flex; align-items: center; gap: var(--space-1); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); background: var(--sol); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 700; justify-self: start; }
.etiqueta.neutra { background: var(--areia); }
.grade { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cartao { background: var(--branco); border-radius: var(--radius-lg); box-shadow: var(--shadow-cartao); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.cartao.tracejado { box-shadow: none; background: transparent; border: 2px dashed var(--linha-forte); }

/* Início */
.heroi > .dentro { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-12); }
.heroi .texto { display: grid; gap: var(--space-6); }
.heroi .lead { font-size: 19px; line-height: 28px; color: var(--texto-suave); }
.heroi .botoes { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.video { aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-bloco); display: grid; place-items: center; text-align: center; color: var(--branco); padding: var(--space-6); position: relative; overflow: hidden; }
.video i.ph-bold { font-size: 64px; color: var(--sol); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .pinos { position: absolute; top: var(--space-3); left: var(--space-4); display: flex; gap: var(--space-2); }
.video .pinos span { width: 12px; height: 12px; border-radius: 50%; background: var(--branco); opacity: .4; }

/* Como funciona */
.passos { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: passo; }
.passo { border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; position: relative; padding-top: var(--space-12); }
.passo .num { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 32px; }
.passo p { font-size: 19px; line-height: 28px; font-weight: 700; }
.passo .pinos { position: absolute; top: var(--space-3); left: var(--space-4); display: flex; gap: var(--space-2); }
.passo .pinos span { width: 12px; height: 12px; border-radius: 50%; background: var(--branco); opacity: .4; }
.passo.a { background: var(--tijolo); color: var(--branco); box-shadow: 0 6px 0 var(--tijolo-borda); }
.passo.b { background: var(--turquesa); color: var(--branco); box-shadow: 0 6px 0 var(--turquesa-borda); }
.passo.c { background: var(--sol); color: var(--ink); box-shadow: 0 6px 0 var(--sol-borda); }
.passo.a .num, .passo.a p { font-size: 22px; line-height: 28px; }
.passo .detalhe { font-weight: 600; font-size: 16px; line-height: 24px; }

/* Jogos */
.jogo { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-6); align-items: center; }
.jogo img { width: 160px; height: 160px; border-radius: var(--radius-lg); object-fit: cover; box-shadow: 0 6px 0 var(--linha); }
.jogo .em-breve { width: 160px; height: 160px; border-radius: var(--radius-lg); background: var(--areia); box-shadow: inset 0 0 0 2px var(--linha-forte); display: grid; place-items: center; }
.jogo .em-breve i.ph-bold { font-size: 48px; color: var(--linha-forte); }
.jogo .corpo { display: grid; gap: var(--space-3); }

/* Lista de itens com ícone */
.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.itens li { display: flex; gap: var(--space-3); align-items: flex-start; }
.itens li i.ph-bold { color: var(--turquesa); margin-top: 2px; }
.ink .itens li i.ph-bold { color: var(--sol); }

/* Planos */
.preco { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 44px; }

/* Perguntas frequentes */
.faq { display: grid; gap: var(--space-3); max-width: 760px; }
.faq details { background: var(--branco); border-radius: var(--radius-md); box-shadow: var(--shadow-cartao); padding: var(--space-4) var(--space-6); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i.ph-bold { transition: transform .12s; flex: none; }
.faq details[open] summary i.ph-bold { transform: rotate(180deg); }
.faq details p { margin-top: var(--space-3); color: var(--texto-suave); }

/* Contato e rodapé */
.contato { display: grid; gap: var(--space-4); justify-items: start; }
.rodape { background: var(--ink); color: var(--branco); padding: var(--space-8) var(--space-4); }
.rodape .dentro { max-width: 1120px; margin: 0 auto; display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.rodape nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.rodape a { color: var(--branco); }
.rodape .legenda { font-size: 13px; line-height: 18px; font-weight: 600; opacity: .8; }

/* Celular */
@media (max-width: 860px) {
  h1 { font-size: 40px; line-height: 44px; }
  h2 { font-size: 28px; line-height: 32px; }
  .secao { padding: var(--space-8) var(--space-4); }
  .heroi > .dentro { grid-template-columns: 1fr; gap: var(--space-8); }
  .jogo { grid-template-columns: 1fr; }
  #menu-botao { display: block; }
  .topo nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--branco); padding: var(--space-3) var(--space-4) var(--space-4); flex-direction: column; align-items: stretch; box-shadow: 0 6px 0 var(--linha); }
  .topo nav.aberto { display: flex; }
  .topo nav a { padding: var(--space-3); }
}