/* meuban.co, direção 1: cor de marca de banco digital (dominios/meuban.co/direcao.md).
   Fonte Bricolage Grotesque (SIL OFL 1.1), ver fontes/LICENCAS.txt. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fontes/bricolage-grotesque-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fontes/bricolage-grotesque-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fontes/bricolage-grotesque-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --marca: #3A1FE0;     /* índigo da marca: fundo da capa, preço, botão, chips */
  --marca-2: #2D14C2;   /* índigo do botão com o ponteiro em cima */
  --tinta: #170B5C;     /* índigo profundo: texto no branco e no selo */
  --sol: #FFD84D;       /* amarelo: só o selo de venda e o foco sobre o índigo */
  --lilas: #D9D2FF;     /* subtítulo sobre o índigo */
  --nevoa: #F0EDFF;     /* chips e argumentos */
  --cinza: #5A5480;     /* rótulo "Preço" e endereço */
  --branco: #FFFFFF;
  --fonte: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--branco); color: var(--tinta); font: 400 1.0625rem/1.5 var(--fonte); overflow-wrap: break-word; }
p, h1, ul { margin: 0; }
/* Palavra com hífen (e-mail): o gerar.py a põe num span.sem-quebra, que fica inteiro na linha. */
.sem-quebra { display: inline-block; }
a:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }

.largura { max-width: 75rem; margin: 0 auto; padding: 0 2rem; }
.capa { background: var(--marca); color: var(--branco); }

/* Topo: o domínio como marca e os idiomas em pílulas num trilho translúcido */
.topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .875rem 1rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
.marca { font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; min-width: 0; overflow-wrap: anywhere; }
.idiomas { display: flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.idiomas a { display: block; padding: .5rem 1rem; border-radius: 999px; color: var(--branco); text-decoration: none; font-size: .9375rem; line-height: 1.2; }
.idiomas a:hover { background: rgba(255, 255, 255, .16); }
.idiomas a[aria-current] { background: var(--branco); color: var(--marca); font-weight: 700; }

/* Capa: texto à esquerda; à direita a folha branca encostada na base do índigo */
.palco { display: grid; grid-template-columns: minmax(0, 1fr) 28.25rem; gap: 4.5rem; align-items: end; padding-top: 3rem; }
.texto { align-self: start; padding-bottom: 4.5rem; }
/* Selo "Domínio à venda": a única cor quente da página, no ponto onde a leitura começa. */
.selo { display: inline-flex; align-items: center; gap: .75rem; background: var(--sol); color: var(--tinta); font-weight: 800; font-size: 1.625rem; line-height: 1; padding: 1rem 1.625rem 1rem 1.25rem; border-radius: 999px; }
.selo::before { content: ""; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--tinta); }
h1 { margin-top: 2.25rem; font-weight: 800; font-size: clamp(3rem, 1rem + 4.5vw, 5rem); line-height: .98; letter-spacing: -.035em; max-width: 12ch; }
.subtitulo { margin-top: 1.75rem; font-size: 1.3125rem; line-height: 1.45; color: var(--lilas); max-width: 34ch; text-wrap: pretty; }

/* Folha de preço, como o bottom sheet de um app */
/* container-type: o preço mede a largura interna da folha (cqi), não a da tela */
.folha { container-type: inline-size; background: var(--branco); color: var(--tinta); border-radius: 2.25rem 2.25rem 0 0; padding: 1.125rem 2.25rem 2.5rem; }
.alca { width: 2.75rem; height: .3125rem; border-radius: 3px; background: #D9D4F5; margin: 0 auto 1.625rem; }
.rotulo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.125rem; line-height: 1.2; color: var(--cinza); }
.moeda { flex: none; font-weight: 700; font-size: .875rem; line-height: 1; color: var(--marca); background: var(--nevoa); padding: .375rem .75rem; border-radius: 999px; }
/* O preço nunca quebra linha, em nenhuma largura (pedido do Gustavo, 18/10/2026). "US$ 15.000" ocupa cerca de
   5,2em; com o espaçamento de texto ampliado da WCAG 1.4.12 (letras .12em, palavras .16em) chega a 6,9em.
   14.2cqi deixa o preço numa linha só e inteiro na folha nos dois casos; o teto de cada largura fica no font-size. */
.valor { margin-top: .625rem; font-weight: 800; font-size: min(4.25rem, 14.2cqi); line-height: 1; letter-spacing: -.03em; color: var(--marca); white-space: nowrap; overflow-wrap: normal; }
.propostas { margin-top: 1.125rem; }
.propostas span { display: inline-block; font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--marca); background: var(--nevoa); padding: .5625rem 1rem; border-radius: 999px; }
.contato { margin-top: 1.75rem; padding-top: 1.625rem; border-top: 1px solid #E6E2FA; }
.chamada { font-weight: 700; font-size: 1.25rem; line-height: 1.3; }

/* Botão-pílula de e-mail: rótulo da copy; o endereço vem abaixo, montado pelo pagina.js */
.botao { margin-top: 1.125rem; }
.botao a.email { display: flex; align-items: center; justify-content: center; min-height: 3.875rem; padding: .75rem 1.5rem; border-radius: 999px; background: var(--marca); color: var(--branco); font-weight: 700; font-size: 1.1875rem; line-height: 1.2; text-align: center; text-decoration: none; }
.botao a.email:hover { background: var(--marca-2); }
.botao a.email:focus-visible { outline-color: var(--tinta); }
.endereco { margin-top: .75rem; text-align: center; font-size: .9375rem; line-height: 1.3; color: var(--cinza); overflow-wrap: anywhere; }
/* Sem JavaScript o botão some (o link não teria destino) e fica o endereço com [arroba] do gerar.py */
.botao noscript { display: block; padding: .875rem 1.25rem; border-radius: 1.25rem; background: var(--nevoa); color: var(--tinta); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }

/* Argumentos sob a coluna do título; não são sequência, sem numeração */
.argumentos { list-style: none; padding: 2.5rem 0 4.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: calc(100% - 32.75rem); }
.argumentos li { background: var(--nevoa); border-radius: 1.5rem; padding: 1.375rem 1.375rem 1.625rem; font-size: 1.125rem; line-height: 1.35; font-weight: 700; text-wrap: pretty; }

/* Um único movimento: a folha sobe e aparece ao carregar */
@media (prefers-reduced-motion: no-preference) {
  .folha { animation: subir 400ms cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes subir { from { opacity: 0; transform: translateY(1.5rem); } }
}

@media (max-width: 75rem) {
  .palco { grid-template-columns: minmax(0, 1fr) 25rem; gap: 3rem; }
  .folha { padding-left: 2rem; padding-right: 2rem; }
  .valor { font-size: min(3.5rem, 14.2cqi); }
  .argumentos { grid-template-columns: minmax(0, 1fr); max-width: calc(100% - 28rem); }
}

@media (max-width: 56rem) {
  .largura { padding: 0 1.25rem; }
  .topo { flex-direction: column; align-items: flex-start; padding-top: 1.25rem; padding-bottom: .5rem; }
  .marca { font-size: 1.375rem; }
  .idiomas a { padding: .4375rem .875rem; font-size: .875rem; }
  /* a folha ocupa a largura toda, como um bottom sheet; só o texto fica com a margem lateral */
  .palco { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 1.375rem 0 0; }
  .texto { padding: 0 1.25rem; }
  .selo { font-size: 1.25rem; padding: .75rem 1.25rem .75rem 1rem; gap: .625rem; }
  .selo::before { width: .625rem; height: .625rem; }
  h1 { margin-top: 1.375rem; font-size: 2.625rem; line-height: 1; max-width: none; }
  .subtitulo { margin-top: 1rem; font-size: 1.0625rem; max-width: 36rem; }
  .folha { border-radius: 1.75rem 1.75rem 0 0; padding: .875rem 1.25rem 1.75rem; }
  .alca { margin-bottom: 1.125rem; }
  .valor { font-size: min(3.25rem, 14.2cqi); margin-top: .375rem; }
  .propostas { margin-top: .875rem; }
  .contato { margin-top: 1.25rem; padding-top: 1.125rem; }
  .chamada { font-size: 1.125rem; }
  .botao { margin-top: .875rem; }
  .botao a.email { min-height: 3.625rem; }
  .endereco { margin-top: .625rem; }
  .argumentos { grid-template-columns: minmax(0, 1fr); max-width: none; gap: .625rem; padding: .25rem 0 2.5rem; }
  .argumentos li { font-size: 1.0625rem; padding: 1.125rem 1.25rem; border-radius: 1.25rem; }
}

/* Telas estreitas (até 375 px): as três pílulas de idioma cabem numa linha mesmo com o espaçamento ampliado */
@media (max-width: 23.4375rem) {
  .idiomas { gap: .125rem; padding: .1875rem; }
  .idiomas a { padding: .375rem .625rem; font-size: .8125rem; white-space: nowrap; }
}