/* Direção: grade suíça de fintech. Fontes IBM Plex (SIL OFL 1.1), ver fontes/LICENCAS.txt. */
@font-face { font-family: "IBM Plex Sans"; src: url("fontes/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fontes/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fontes/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --noite: #0B1B2B;
  --noite-2: #132A40;
  --linha-escura: #26405A;
  --branco: #FFFFFF;
  --gelo: #F3F5F8;
  --texto: #1B2633;
  --suave: #556273;
  --claro: #B9C6D3;
  --verde: #3DD68C;
  --verde-escuro: #08734A;
  --linha: #DCE2E9;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--gelo); color: var(--texto); font: 400 1.0625rem/1.6 var(--sans); overflow-wrap: break-word; }
/* Palavra com hífen (e-mail): o gerar.py a põe num span.sem-quebra. Inline-block fica inteira na linha quando cabe
   e só quebra por dentro se for mais larga que a coluna; assim não quebra no hífen nem cria rolagem lateral. */
.sem-quebra { display: inline-block; }
a:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

.escuro { background: var(--noite); color: var(--branco); }
.grade { max-width: 75rem; margin: 0 auto; padding: 0 2.5rem; }

/* Topo: domínio e seletor de idiomas */
.topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; padding: 1.5rem 0; border-bottom: 1px solid var(--linha-escura); }
.marca { display: flex; align-items: center; gap: .625rem; margin: 0; font: 500 1rem/1.2 var(--mono); color: var(--branco); min-width: 0; overflow-wrap: anywhere; }
.marca::before { content: ""; flex: none; width: .75rem; height: .75rem; background: var(--verde); border-radius: 1px; }
.idiomas { display: flex; flex-wrap: wrap; gap: .25rem; font-size: .875rem; }
.idiomas a { color: var(--claro); text-decoration: none; padding: .375rem .75rem; border-radius: 4px; line-height: 1.4; }
.idiomas a:hover { color: var(--branco); background: var(--noite-2); }
.idiomas a[aria-current] { color: var(--noite); background: var(--branco); font-weight: 600; }

/* Capa: título (7) e painel de preço (5) */
.capa { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; padding-top: 5rem; padding-bottom: 0; align-items: start; }
.capa-texto { padding-bottom: 5.5rem; }
/* Selo "Domínio à venda": placa verde cheia sobre a faixa escura, em caixa alta como uma placa de "vende-se".
   É o primeiro ponto de leitura da página. Texto azul-noite sobre verde: 9,3:1.
   Pedido do Gustavo (16/10/2026): o verde, antes só marca gráfica, passa a ser também o fundo do selo. */
.selo { display: inline-block; margin: 0 0 2rem; padding: .75rem 1.375rem .8125rem; background: var(--verde); color: var(--noite); font: 600 1.875rem/1.1 var(--sans); letter-spacing: .06em; text-transform: uppercase; border-radius: 3px; }
h1 { font: 600 clamp(2.375rem, 5vw, 4.25rem)/1.08 var(--sans); letter-spacing: -.025em; margin: 0 0 1.5rem; text-wrap: balance; }
.subtitulo { font-size: 1.25rem; line-height: 1.55; color: var(--claro); max-width: 33rem; margin: 0; }

/* container-type: o preço mede a largura interna do painel (cqi), não a da tela */
.painel { container-type: inline-size; background: var(--branco); color: var(--texto); border-radius: 8px; padding: 2rem; margin-bottom: -6rem; position: relative; box-shadow: 0 30px 60px -30px rgba(11, 27, 43, .55), 0 0 0 1px rgba(11, 27, 43, .06); }
.rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font: 500 .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linha); }
.moeda { flex: none; font: 500 .8125rem/1 var(--mono); letter-spacing: normal; text-transform: none; color: var(--suave); }
/* O preço nunca quebra linha (pedido do Gustavo, 18/10/2026). "US$ 10.000" em Plex Mono ocupa 10 x .6em; com o
   espaçamento de texto do WCAG 1.4.12 (letras .12em, palavras .16em) chega a 7,46em medidos no Chromium. 13cqi deixa
   até 10 caracteres numa linha e inteiros no painel nos dois casos, com folga; preço mais longo sai do painel e o
   checar/geometria.py reprova. */
.valor { font: 500 min(3.25rem, 13cqi)/1.05 var(--mono); letter-spacing: -.03em; color: var(--noite); font-variant-numeric: tabular-nums; margin: 0 0 .75rem; white-space: nowrap; overflow-wrap: normal; }
.propostas { display: flex; align-items: baseline; gap: .5rem; font-size: .9375rem; line-height: 1.4; color: var(--verde-escuro); font-weight: 600; margin: 0; }
.propostas::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--verde-escuro); transform: translateY(-.0625rem); }
.contato { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); }
.chamada { margin: 0 0 1rem; font-weight: 600; color: var(--texto); }

/* Botão de e-mail: o link do e-mail cobre o botão inteiro */
.botao { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; min-height: 3.375rem; background: var(--noite); color: var(--branco); padding: .875rem 1.25rem; border-radius: 6px; }
.botao:has(a.email:hover) { background: var(--noite-2); }
.botao:focus-within { outline: 3px solid var(--verde); outline-offset: 3px; }
.botao-rotulo { font-size: .875rem; line-height: 1.3; color: var(--claro); }
.botao a.email, .botao noscript { font: 500 .9375rem/1.3 var(--mono); color: var(--branco); text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.botao a.email::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.botao a.email:focus-visible { outline: none; }

/* Argumentos sob a coluna do título */
.argumentos-faixa { padding-top: 8.5rem; padding-bottom: 5rem; }
.argumentos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 2rem; counter-reset: arg; max-width: calc(58.333% - 1rem); }
.argumentos li { counter-increment: arg; border-top: 2px solid var(--noite); padding-top: 1rem; font-size: 1rem; line-height: 1.5; }
.argumentos li::before { content: counter(arg, decimal-leading-zero); display: block; font: 500 .8125rem/1 var(--mono); color: var(--suave); margin-bottom: .75rem; }

@media (max-width: 52rem) {
  .grade { padding: 0 1.25rem; }
  .topo { padding: 1rem 0; flex-direction: column; align-items: flex-start; }
  .capa { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 2.5rem; }
  .capa-texto { padding-bottom: 2rem; }
  .selo { display: block; font-size: 1.375rem; letter-spacing: .05em; margin-bottom: 1.5rem; padding: .75rem 1rem .8125rem; }
  h1 { font-size: 2.375rem; }
  .subtitulo { font-size: 1.0625rem; }
  .painel { padding: 1.5rem; margin-bottom: -3rem; }
  .valor { font-size: min(2.5rem, 13cqi); }
  .argumentos-faixa { padding-top: 5rem; padding-bottom: 3rem; }
  .argumentos { grid-template-columns: minmax(0, 1fr); max-width: none; gap: 1.5rem; }
}