/* Componentes do site do Greg. Só var(--token) (tokens.css). */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo) + var(--e3)); }
body { margin: 0; background: var(--fundo); color: var(--texto); font: var(--t-corpo); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--raio-controle); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
.pular { position: absolute; left: var(--e3); top: -100px; background: var(--fundo); padding: var(--e2) var(--e3); z-index: 10; }
.pular:focus { top: var(--e2); }

.miolo { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e3); }
@media (min-width: 834px) { .miolo { padding: 0 var(--e4); } }
.estreito > * { max-width: var(--largura-texto); }   /* texto estreito, mas alinhado à mesma margem das outras seções */

/* topo: barra de navegação (a única camada que flutua) */
.topo { position: sticky; top: 0; z-index: 5; height: var(--topo); background: var(--fundo); border-bottom: 1px solid var(--fio); }
@supports (backdrop-filter: blur(1px)) {
  .topo { background: color-mix(in srgb, var(--fundo) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); }
}
@media (prefers-reduced-transparency: reduce) { .topo { background: var(--fundo); backdrop-filter: none; } }
.topo .miolo { height: 100%; display: flex; align-items: center; gap: var(--e4); }
.marca { display: flex; align-items: center; gap: var(--e2); color: var(--texto); font-weight: 700; font-size: 1.05rem; }
.marca:hover { text-decoration: none; }
.marca img { width: 28px; height: 28px; border-radius: var(--raio-controle); }
/* o nome é a marca em serifa itálica, em contorno, com o ponto na cor de destaque (docs/design/marca-greg) */
.marca .nome { height: 32px; width: auto; fill: currentColor; }
.marca .nome .ponto { fill: var(--acento); }
.topo nav { display: flex; gap: var(--e1); margin-left: auto; align-items: center; }
.topo nav a { white-space: nowrap; }
@media (max-width: 479px) { .topo .miolo { gap: var(--e2); } }
.topo nav a { color: var(--texto-2); padding: var(--e2); border-radius: var(--raio-controle); font: var(--t-meta); transition: background var(--mov-toque) var(--curva), color var(--mov-toque) var(--curva); }
@media (min-width: 480px) { .topo nav a { padding: var(--e2) var(--e3); } }
.topo nav a:hover { background: var(--fundo-2); text-decoration: none; }
.topo nav a[aria-current="page"] { color: var(--texto); background: var(--selecao); }
.topo nav .so-largo, .marca .nome { display: none; }   /* no celular a marca é só o ícone, para caberem as páginas no menu */
@media (min-width: 700px) { .topo nav .so-largo { display: inline-flex; } }
@media (min-width: 480px) { .marca .nome { display: block; } .marca img { display: none; } }

/* botões (bezel do macOS) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e4);
  border: 0; border-radius: var(--raio-grupo); font: 600 1rem/1 var(--fonte); color: var(--texto); background: var(--fundo);
  box-shadow: var(--bezel); cursor: pointer; text-decoration: none; transition: background var(--mov-toque) var(--curva), transform var(--mov-toque) var(--curva); }
.btn:hover { text-decoration: none; background: var(--fundo-2); }
.btn:active { transform: scale(.97); }
.btn.primario { color: var(--sobre-acento); background: linear-gradient(var(--acento-topo), var(--acento)); box-shadow: none; }
.btn.primario:hover { background: var(--acento-fundo); }
.btn.pequeno { min-height: 36px; padding: 0 var(--e3); font-size: .9rem; }
.topo .btn.pequeno { margin-left: var(--e2); }

/* hero: o nome do produto domina; uma frase; uma ação; a tela real */
.hero { padding: var(--e5) 0 var(--e5); text-align: center; overflow-x: clip; }
@media (min-width: 834px) { .hero { padding-top: var(--e6); } }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("vendor/fontes/InstrumentSerif-Italic.ttf") format("truetype"); }
.hero h1 { font: var(--t-display); letter-spacing: -.02em; }
/* o nome vivo: a marca em contorno, grande, e o sinal na cor de destaque. No celular (texto centrado) o desenho desliza
   10% para a direita, porque a caixa reserva lugar para as reticências e as letras ficariam fora do centro. */
.nome-vivo { margin: 0; line-height: 0; }
.nome-vivo svg { display: block; height: clamp(6.4rem, 21vw, 13.6rem); width: auto; max-width: 100%; margin: 0 auto; fill: var(--texto); transform: translateX(10%); }
.nome-vivo .sinal { fill: var(--acento); opacity: 0; }
.voz { display: grid; margin: var(--e2) 0 0; font: var(--t-voz); color: var(--texto); min-height: 2.4rem; }
.voz span { grid-area: 1 / 1; opacity: 0; white-space: nowrap; }
.nome-vivo .s-dois, .voz .v-dois { opacity: 1; }   /* parado (sem animação): "Greg:" e o que ele achou */
@media (prefers-reduced-motion: no-preference) {
  .nome-vivo .sinal, .voz span { animation: 10s linear infinite; }
  .nome-vivo .s-tres, .voz .v-tres { animation-name: fase-tres; }
  .nome-vivo .s-dois, .voz .v-dois { animation-name: fase-dois; }
  .nome-vivo .s-ponto, .voz .v-ponto { animation-name: fase-ponto; }
  .nome-vivo .s-tres path { animation: digitando 1.2s linear infinite; }
  .nome-vivo .s-tres .p2 { animation-delay: .2s; } .nome-vivo .s-tres .p3 { animation-delay: .4s; }
}
@keyframes fase-tres { 0%, 33% { opacity: 1; } 36%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fase-dois { 0%, 33% { opacity: 0; } 36%, 78% { opacity: 1; } 81%, 100% { opacity: 0; } }
@keyframes fase-ponto { 0%, 78% { opacity: 0; } 81%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes digitando { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.hero .lead { font: var(--t-lead); color: var(--texto-2); max-width: 36ch; margin: var(--e3) auto 0; text-wrap: balance; }
.acoes { display: flex; gap: var(--e3); justify-content: center; flex-wrap: wrap; margin-top: var(--e4); }
.hero .nota { font: var(--t-meta); color: var(--meta); margin-top: var(--e3); }
.captura { margin: var(--e5) auto 0; position: relative; border-radius: var(--raio-bolha); overflow: hidden; box-shadow: var(--sombra-captura); max-width: 1040px; }
.captura img { width: 100%; }
.legenda { font: var(--t-meta); color: var(--meta); text-align: center; margin-top: var(--e3); }

/* hero em duas colunas no largo: o nome e a parede de mensagens */
.hero-grade { display: grid; gap: var(--e4); align-items: center; }
@media (min-width: 900px) {
  .hero-grade { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--e5); text-align: left; }
  .nome-vivo svg { margin-left: -.4rem; transform: none; }
  .hero-grade .lead { margin-left: 0; }
  .hero-grade .acoes { justify-content: flex-start; }
}

/* parede de mensagens: o barulho do WhatsApp em texto corrido. A leitura passa como marca-texto (fase das reticências),
   os pedidos ficam em tinta com o ponto da classe (dois-pontos) e o resto recua (ponto). Parado, fica na fase dos dois-pontos. */
.parede { text-align: left; font: var(--t-meta); color: var(--meta); min-width: 0; }
.parede .cabeca { font: var(--t-rotulo); letter-spacing: .08em; text-transform: uppercase; color: var(--meta); margin: 0 0 var(--e2); max-width: none; }
.parede .linhas { columns: 1; column-gap: var(--e4); border-top: 1px solid var(--fio); }
.parede .linhas p { margin: 0; position: relative; padding: var(--e1) var(--e2) var(--e1) var(--e3); max-width: none; break-inside: avoid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--fio-fraco); opacity: .3; }
.parede .linhas p:nth-child(n+15) { display: none; }
.parede b { font-weight: 600; margin-right: .5em; }
.parede .linhas .pede { color: var(--texto); opacity: 1; white-space: normal; }   /* pedido nunca é cortado: quebra em duas linhas */
.parede .pede::before { content: ""; position: absolute; left: var(--e1); top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: var(--classe-demanda); }
.parede .pede[data-classe="lembrar"]::before { background: var(--classe-lembrar); }
.parede .pede[data-classe="atencao"]::before { background: var(--classe-atencao); }
@media (min-width: 900px) {
  .parede .linhas { columns: 2; }
  .parede .linhas p:nth-child(n+15) { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .parede .linhas p { animation: 10s linear infinite ruido, 10s linear infinite calc(var(--i) * 78ms) leitura; }
  .parede .linhas .pede { animation-name: pedido, leitura; }
  .parede .pede::before { animation: 10s linear infinite fase-achado; }
}
@keyframes ruido { 0%, 33% { opacity: 1; } 36%, 78% { opacity: .3; } 81%, 97% { opacity: .14; } 100% { opacity: 1; } }
@keyframes pedido { 0%, 33% { color: var(--meta); } 36%, 97% { color: var(--texto); } 100% { color: var(--meta); } }
@keyframes fase-achado { 0%, 33% { opacity: 0; } 36%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes leitura { 0% { background: transparent; } .5%, 1.6% { background: var(--selecao); } 3.4%, 100% { background: transparent; } }

/* filme do produto */
.filme video { display: block; width: 100%; height: auto; background: var(--fundo-2); }

/* seções. Macro-espaço: seção (e6) > grupo (e5) > item (e4). O cabeçalho usa a grade: título numa coluna, texto na outra */
.secao { padding: var(--e6) 0 0; }
.secao:last-of-type { padding-bottom: var(--e6); }
.rotulo { font: var(--t-rotulo); letter-spacing: .06em; text-transform: uppercase; color: var(--meta); }
.secao h1 { font: var(--t-h1); letter-spacing: -.015em; margin-top: var(--e2); max-width: 20ch; }
.secao h2 { font: var(--t-h2); letter-spacing: -.01em; margin-top: var(--e2); max-width: 22ch; }
.secao .intro { font: var(--t-lead); color: var(--texto-2); margin-top: var(--e3); max-width: 46ch; }
@media (min-width: 834px) {
  .cab.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e5); align-items: end; }
  .cab.dupla .rotulo { grid-column: 1 / -1; }
  .cab.dupla .intro { margin-top: 0; }
}
/* faixa: a pausa da página. Fundo cinza de ponta a ponta, cabeçalho centrado */
.secao.faixa { background: var(--fundo-2); padding-bottom: var(--e6); margin-top: var(--e5); }
.faixa .cab { text-align: center; }
.faixa .cab h2 { margin-left: auto; margin-right: auto; }
.prosa p + p, .prosa p + ul, .prosa ul + p, .prosa h2 + p, .prosa h2 + ul { margin-top: var(--e3); }
.prosa ul { padding-left: var(--e4); }
.prosa li + li { margin-top: var(--e2); }
.prosa h3 { font: var(--t-h3); margin-top: var(--e5); }
.prosa h2 + h3 { margin-top: var(--e4); }
.prosa h3 + p { margin-top: var(--e2); }

/* vitrine: o que o Greg faz, cada recurso ao lado da tela que o mostra. Sem caixa: a imagem e o texto dividem a grade */
.vitrines { display: grid; gap: var(--e6); margin-top: var(--e5); }
.vitrine { display: grid; gap: var(--e4); align-items: center; }
@media (min-width: 834px) {
  .vitrine { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--e5); }
  .vitrine:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .vitrine:nth-child(even) .amplia { order: 2; }
}
.vitrine h3 { font: var(--t-h3); }
.vitrine p { color: var(--texto-2); margin-top: var(--e2); }
.vitrine p + h3 { margin-top: var(--e4); }
.amplia { display: block; border-radius: var(--raio-grupo); overflow: hidden; box-shadow: var(--sombra-captura); cursor: zoom-in; transition: transform var(--mov-toque) var(--curva); }
.amplia:hover { transform: translateY(-2px); }
.amplia img { width: 100%; }
.captura .amplia { border-radius: 0; box-shadow: none; }
.captura .amplia:hover { transform: none; }
dialog.ampliada { border: 0; padding: 0; background: none; max-width: 96vw; max-height: 94vh; overflow: visible; }
dialog.ampliada::backdrop { background: var(--veu); }
dialog.ampliada img { max-width: 96vw; max-height: 88vh; width: auto; border-radius: var(--raio-grupo); cursor: zoom-out; }
dialog.ampliada form { text-align: right; margin-bottom: var(--e2); }

/* fatos: as quatro regras de privacidade, com o dado maior que o texto (tela de relance) */
.fatos { list-style: none; padding: 0; margin-top: var(--e5); display: grid; gap: var(--e5) var(--e4); grid-template-columns: 1fr; }
@media (min-width: 480px) { .fatos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fatos { grid-template-columns: repeat(4, 1fr); } }
.fatos .dado { display: block; font: var(--t-h2); letter-spacing: -.01em; color: var(--acento-texto); font-variant-numeric: tabular-nums; }
.fatos h3 { font: var(--t-h3); margin-top: var(--e2); }
.fatos p { color: var(--texto-2); margin-top: var(--e2); font: var(--t-meta); }

/* página interna em duas colunas: o principal em 680 px, o secundário ao lado e fixo na rolagem */
.duas { display: grid; gap: var(--e5); margin-top: var(--e5); }
@media (min-width: 1000px) {
  .duas { grid-template-columns: minmax(0, var(--largura-texto)) minmax(0, 320px); justify-content: space-between; align-items: start; }
  .lateral { position: sticky; top: calc(var(--topo) + var(--e4)); }
}
.duas > * { min-width: 0; }
.lateral.antes { order: -1; }   /* requisito vem antes dos passos quando a coluna vira uma só */
@media (min-width: 1000px) { .lateral.antes { order: 0; } }
.duas > :first-child > :first-child { margin-top: 0; }
.lateral h2 { font: var(--t-h3); letter-spacing: 0; margin-top: 0; }
.lateral ul { margin-top: var(--e3); padding-left: var(--e4); color: var(--texto-2); font: var(--t-meta); }
.lateral li + li { margin-top: var(--e2); }
.lateral p { margin-top: var(--e2); color: var(--texto-2); font: var(--t-meta); }
.lateral .aviso { margin-top: 0; font: var(--t-meta); }
.lateral .aviso + h2 { margin-top: var(--e4); }

/* entrada das seções ao rolar: só com JS (classe .js) e só para quem não pediu menos movimento */
@media (prefers-reduced-motion: no-preference) {
  .js .entra { opacity: 0; transform: translateY(var(--e3)); transition: opacity var(--mov-entrada) var(--curva), transform var(--mov-entrada) var(--curva); }
  .js .entra.visto { opacity: 1; transform: none; }
}

/* lista de recursos: fio entre itens, sem caixa */
.recursos { display: grid; gap: 0 var(--e5); margin-top: var(--e5); grid-template-columns: 1fr; }
@media (min-width: 834px) { .recursos { grid-template-columns: 1fr 1fr; } }
.recurso { padding: var(--e4) 0; border-top: 1px solid var(--fio); }
.recurso h3 { font: var(--t-h3); }
.recurso p { color: var(--texto-2); margin-top: var(--e2); }

/* classes: as quatro cores com significado */
.classes { list-style: none; padding: 0; margin-top: var(--e5); display: grid; gap: var(--e3); grid-template-columns: 1fr; }
@media (min-width: 834px) { .classes { grid-template-columns: repeat(4, 1fr); } }
.classes li { padding-top: var(--e3); border-top: 3px solid var(--cor); }
.classes .nome { font: var(--t-h3); color: var(--cor); }
.classes p { color: var(--texto-2); margin-top: var(--e1); font: var(--t-meta); }
.c-demanda { --cor: var(--classe-demanda); } .c-lembrar { --cor: var(--classe-lembrar); }
.c-atencao { --cor: var(--classe-atencao); } .c-aviso { --cor: var(--classe-aviso); }

/* faixa de princípios (privacidade) */
.principios { list-style: none; padding: 0; margin-top: var(--e5); counter-reset: p; }
.principios li:first-child { border-top: 0; padding-top: 0; }
.principios li { counter-increment: p; display: grid; grid-template-columns: var(--e5) 1fr; gap: var(--e3); padding: var(--e4) 0; border-top: 1px solid var(--fio); }
.principios li::before { content: counter(p, decimal-leading-zero); font: var(--t-rotulo); color: var(--meta); padding-top: .3em; }
.principios h3 { font: var(--t-h3); }
.principios p { color: var(--texto-2); margin-top: var(--e1); }

/* aviso (WhatsApp não oficial) */
.aviso { margin-top: var(--e5); padding: var(--e4); border-radius: var(--raio-grupo); background: var(--alerta-fundo); color: var(--alerta-texto); }
.aviso strong { display: block; margin-bottom: var(--e1); }
.aviso .do-criador { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--fio); color: inherit; font: inherit; }

/* passos de instalação */
.abas { display: inline-flex; gap: var(--e1); padding: var(--e1); margin-top: var(--e4); border-radius: var(--raio-grupo); background: var(--fundo-3); }
.abas a { padding: var(--e2) var(--e3); border-radius: var(--raio-controle); color: var(--texto-2); font: 600 .9rem/1.2 var(--fonte); min-height: 44px; display: inline-flex; align-items: center; transition: background var(--mov-toque) var(--curva), color var(--mov-toque) var(--curva); }
.abas a:hover { text-decoration: none; color: var(--texto); }
.abas a[aria-current="true"] { background: var(--fundo); color: var(--texto); box-shadow: var(--bezel); }
.passos { list-style: none; padding: 0; margin-top: var(--e4); counter-reset: passo; }
.passos > li { counter-increment: passo; position: relative; padding: var(--e4) 0 var(--e4) var(--e5); border-top: 1px solid var(--fio); }
.passos > li::before { content: counter(passo); position: absolute; left: 0; top: var(--e4); width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--selecao); color: var(--acento-texto); font: 700 .9rem/1 var(--fonte); }
.passos h3 { font: var(--t-h3); }
.passos p { color: var(--texto-2); margin-top: var(--e2); }
.requisitos { margin-top: var(--e3); padding-left: var(--e4); color: var(--texto-2); }
.requisitos li + li { margin-top: var(--e1); }

/* bloco de código com botão Copiar e os estados dele */
.codigo { position: relative; margin-top: var(--e3); border-radius: var(--raio-grupo); background: var(--codigo-fundo); border: 1px solid var(--fio-fraco); }
.codigo pre { margin: 0; padding: var(--e3); padding-right: 6.5rem; overflow-x: auto; font: var(--t-codigo); color: var(--texto); }
.codigo .copiar { position: absolute; top: var(--e2); right: var(--e2); min-height: 32px; padding: 0 var(--e3); border: 0; border-radius: var(--raio-controle);
  background: var(--fundo); color: var(--texto-2); box-shadow: var(--bezel); font: 600 .8rem/1 var(--fonte); cursor: pointer; }
.codigo .copiar:hover { color: var(--texto); }
.codigo .copiar[data-estado="copiado"] { color: var(--ok); }
.codigo .copiar[data-estado="erro"] { color: var(--erro-texto); }
.codigo .copiar:not([hidden]) { display: inline-flex; align-items: center; }
code { font: var(--t-codigo); font-size: .9em; background: var(--fundo-2); padding: .1em .35em; border-radius: var(--raio-controle); }
pre code { background: none; padding: 0; font-size: inherit; }
.status { min-height: 1.5em; font: var(--t-meta); color: var(--meta); margin-top: var(--e2); }

/* diagrama */
.diagrama { margin-top: var(--e5); }
.diagrama svg { width: 100%; height: auto; }
.diagrama .caixa { fill: var(--fundo); stroke: var(--fio); }
.diagrama .caixa.destaque { stroke: var(--acento); }
.diagrama .rotulo-svg { fill: var(--texto); font: 600 15px var(--fonte); }
.diagrama .sub-svg { fill: var(--meta); font: 400 12.5px var(--fonte); }
.diagrama .seta { stroke: var(--meta); fill: none; }
.diagrama .ponta { fill: var(--meta); }
.diagrama .limite { fill: none; stroke: var(--acento); stroke-dasharray: 6 6; }
.diagrama .limite-texto { fill: var(--acento-texto); font: 700 12px var(--fonte); letter-spacing: .06em; }

/* chamada final e rodapé */
.chamada { text-align: center; padding: var(--e6) 0; border-top: 1px solid var(--fio); margin-top: var(--e6); }
.chamada h2 { font: var(--t-h2); }
.chamada p { color: var(--texto-2); margin-top: var(--e3); }
.rodape { border-top: 1px solid var(--fio); padding: var(--e4) 0 var(--e5); font: var(--t-meta); color: var(--meta); }
.rodape .miolo { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); justify-content: space-between; }
.rodape nav { display: flex; gap: var(--e3); flex-wrap: wrap; }
.rodape a { color: var(--texto-2); }

/* página de erro (404) */
.vazio { min-height: calc(100vh - var(--topo) - 120px); display: grid; place-content: center; text-align: center; padding: var(--e5) var(--e3); }
.vazio h1 { font: var(--t-h2); }
.vazio p { color: var(--texto-2); margin-top: var(--e3); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { .topo, .acoes, .copiar, .chamada { display: none; } }

/* alvos de toque: ≥ 24 px em todo link (WCAG 2.5.8) e ≥ 44 px na barra do topo (Apple HIG) */
p a, li a, .rodape a { display: inline-block; line-height: 1.6; min-height: 24px; }
.rodape nav a { padding: var(--e1) 0; min-height: 44px; display: inline-flex; align-items: center; }
.legenda a { min-height: 44px; display: inline-flex; align-items: center; }
.topo nav a, .marca { min-height: 44px; display: inline-flex; align-items: center; }
.topo .btn.pequeno { min-height: 44px; }
.codigo .copiar { min-height: 44px; top: var(--e1); right: var(--e1); }
.codigo pre { min-height: 52px; }
.pular { min-height: 44px; }

/* Copiar em linha própria, acima do código: nunca cobre o comando, em nenhuma largura. A faixa diz onde o comando roda */
.codigo { display: flex; flex-direction: column; }
.codigo .copiar { position: static; order: -1; align-self: flex-end; margin: var(--e1) var(--e1) 0; transition: color var(--mov-toque) var(--curva); }
.codigo .copiar[hidden] { display: none; }
.codigo pre { padding-right: var(--e3); padding-top: var(--e2); min-height: 0; }
.codigo:has(.copiar:not([hidden]))::before { content: "Terminal"; position: absolute; left: var(--e3); top: var(--e1); height: 44px; display: flex; align-items: center;
  font: var(--t-rotulo); letter-spacing: .06em; text-transform: uppercase; color: var(--meta); }