/* ─────────────────────────────────────────────────────────────────────────
   METRICUT — a página de apresentação e venda (site.html, a raiz do site)

   Só o ARRANJO desta página. Cor, família de letra, raio e sombra vêm de tokens.css; botão,
   cartão, nota, passos, a marca, a fita e o título em Archivo Black vêm de componentes.css.
   ⛔ Nenhuma cor literal aqui (node design/conferir.mjs reprova). O único uso de token de acento
   deste arquivo está no censo do auditor, com a superfície dele (as barras do passo da demonstração,
   na ficha de papel do aparelho).

   O CENÁRIO (11/10/2026) — a página deixou de ser "página em branco com coisas coladas":
   · a página é a MESA (--fundo, tingida) e sobre ela ficam FOLHAS (.site-folha): blocos inteiros de
     papel claro, de canto largo, pousados com sombra — a mesma ideia do cartão da gestão, em escala
     de página. Uma delas é a FAIXA ESCURA (.site-noite, data-faixa="escura"): a do dinheiro.
     O RITMO, na ordem da página (12/10/2026): abertura (VÍDEO, sob a faixa escura) · 09:00 para a
     barbearia (mesa, com cartões) · 19:30 o dinheiro (FAIXA ESCURA) · chamada (mesa) · 22:00 para o
     cliente (folha) · as fotos (mesa) · as garantias + chamada (mesa) · como começa (folha) · fecho
     (a peça elevada, na mesa).
     ⭐ A PÁGINA É UM DIA DE BARBEARIA: a abertura põe o visitante dentro da casa, e as três seções do
     produto são três horas do dia (.site-hora, em DM Mono, como relógio). A faixa escura é a noite;
     ⛔ Duas folhas nunca se encostam: entre a escura e a clara fica a chamada, na mesa;
   · as telas do produto ficam ASSENTADAS: aparelho de moldura escura, janela com barra, sombra em
     camadas (--sombra-3) e sobreposição entre elas (o celular por cima da janela);
   As telas são capturas reais da barbearia de demonstração (em /site/) — sem ilustração.
   As FOTOS da faixa de ambiente (/site/ambiente-*.webp) são fotografias de verdade, de banco gratuito
   (a origem de cada uma está em docs/creditos-fotos-site.md) — nada gerado. São cenário, não prova:
   ⛔ não são clientes do Metricut, e por isso não levam legenda, nome nem crédito na página.

   O VÍDEO da abertura (/site/abertura-*.mp4) é filmagem real de banco gratuito, com a origem no mesmo
   arquivo de créditos. É a ÚNICA exceção nomeada à regra de movimento abaixo: nasce vazio, só entra
   depois da carga e sob quatro condições (site.js), e tem botão de pausar.

   O MOVIMENTO — só `transform` e `opacity`, uma vez, e nada dele esconde conteúdo:
   · o estado escondido de quem "entra ao rolar" só existe sob `html.site-vivo`, classe que site.js
     põe DEPOIS de saber que há IntersectionObserver e que a pessoa não pediu menos movimento.
     Sem script, com script bloqueado ou com movimento reduzido, a página inteira está visível e parada;
   · quem pediu menos movimento não recebe nenhum (a regra geral de componentes.css zera animação e
     transição; as daqui repetem o estado final por garantia).
   Cor de INTERFACE tem orçamento, e aqui ele é UM: o botão do WhatsApp. A marca e a fita levam as
   cores do poste (vermelho, branco e azul — os tokens --poste-*), que não são cor de interface: não
   pintam botão, texto, borda nem estado, e não existem em nenhum outro lugar desta página.
   ───────────────────────────────────────────────────────────────────────── */

/* a fita ocupa 14px fixos à esquerda (peça .pub-fita); a página começa depois dela */
.site { --site-curva: cubic-bezier(.2, .7, .3, 1); padding-left: 14px; font-size: 16px; overflow-x: clip; }
/* A fita aqui é progresso de leitura. Sem script ela fica inteira. O avanço é RECORTE (clip-path), não altura:
   a peça original anima `height`, que refaz o layout a cada passo de rolagem. */
.site .pub-fita > i {
  --avanco: 100%; height: 100%;
  clip-path: inset(0 0 calc(100% - var(--avanco)) 0); transition: clip-path .5s cubic-bezier(.3, .8, .3, 1);
}

.site-largura { width: 100%; max-width: 1136px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 640px)  { .site-largura { padding-inline: 32px; } }
@media (min-width: 1024px) { .site-largura { padding-inline: 48px; } }

/* quem navega por teclado pula o topo: aparece só com foco */
.site-pular {
  position: absolute; z-index: 20; left: 26px; top: 8px; transform: translateY(-300%);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  background: var(--sup-alta); color: var(--texto); border: 1px solid var(--borda-controle); border-radius: var(--r-campo);
  font-weight: 700;
}
.site-pular:focus { transform: none; }

/* ── topo ─────────────────────────────────────────────────────────────── */
/* o topo fica por cima do vídeo da abertura e veste a faixa escura (data-faixa no HTML): ⚠️ `color` tem de ser
   redeclarada, porque a herdada do <body> já chegou resolvida no tema claro. Atrás dele o véu é cheio (ver a cena). */
.site-topo { position: relative; z-index: 3; color: var(--texto); }
.site-topo__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 76px; }
/* a marca é a peça .marca; aqui só o tamanho e o alvo de toque do link */
.site-marca { --marca-t: 30px; min-height: 44px; }
/* "Entrar": a seta anda 3px no hover — diz que o botão leva a outro lugar */
.site-topo .btn::after { content: "→"; content: "→" / ""; display: inline-block; transition: transform .2s var(--site-curva); }
.site-topo .btn:hover::after { transform: translateX(3px); }

/* ── abertura: dentro da barbearia ─────────────────────────────────────────
   A CENA (.site-abertura__cena) ocupa a tela inteira: o poster/vídeo no fundo, o véu, e o texto ancorado embaixo.
   Ela veste a faixa escura (data-faixa no HTML): texto claro, botão secundário escuro.
   O APARELHO fica FORA da cena, com os tokens claros: no celular vem logo abaixo, subindo --site-emerge por cima da
   borda dela; em tela larga flutua à direita, por cima do vídeo.

   O VÉU — ⛔ o texto sobre vídeo tem de ser legível NO PIOR QUADRO POSSÍVEL (branco puro atrás):
   · é UMA cor só: o --fundo da faixa escura a --site-veu (tokens.css) de opacidade. O auditor mede --texto contra esse
     véu composto sobre BRANCO e reprova abaixo de 4,5:1; por isso todo texto solto da cena é --texto (nada de
     --texto-2/-3 aqui — eles pediriam um véu que mata a imagem);
   · ele é cheio em DOIS lugares e some no resto, para o vídeo respirar: atrás do topo (os 76 px da marca e do
     "Entrar") e atrás do bloco de texto. O de trás do texto é ANCORADO NO BLOCO (::before dele), não na cena: o
     texto pode ter 3 ou 6 linhas que continua inteiro em cima do véu cheio; acima dele o véu esmaece em 140 px e,
     em tela larga, também para a direita (por máscara), onde está o aparelho.
   Quem não tem color-mix (Safari < 16.2) recebe o véu sem transparência: perde imagem, não perde leitura. */
.site-abertura { --site-emerge: 88px; position: relative; margin-top: -76px; }
.site-abertura__cena {
  --site-veu-cor: var(--fundo);
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh; min-height: 100svh;
  padding-block: calc(76px + var(--e-7)) calc(var(--site-emerge) + var(--e-6));
  background: var(--fundo); color: var(--texto);
}
@supports (background: color-mix(in srgb, transparent 50%, transparent)) {
  .site-abertura__cena { --site-veu-cor: color-mix(in srgb, var(--fundo) var(--site-veu), transparent); }
}
/* O POSTER é o fundo: um arquivo por aparelho (a consulta de largura escolhe), com o lugar garantido pela própria
   cena — nada pula quando ele chega (CLS 0), e o <video> vazio por cima é transparente até tocar.
   ⚠️ A consulta é a MESMA dos <link rel="preload"> de site.html e de `telaLarga` em site.js. */
.site-abertura__midia { position: absolute; inset: 0; z-index: -2; background: var(--fundo) url("/site/abertura-celular.webp") center / cover no-repeat; }
@media (min-width: 900px) and (orientation: landscape) { .site-abertura__midia { background-image: url("/site/abertura-mesa.webp"); } }
.site-abertura__midia::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 176px;
  background: linear-gradient(to bottom, var(--site-veu-cor) 76px, transparent);
}
.site-abertura__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ⚠️ Sem arquivo o <video> NÃO é desenhado: o WebKit pinta um botão de tocar cinza em cima de vídeo vazio (visto em
   12/10/2026, sem script, no motor do Safari). Vazio é o estado de quem não tem script, pediu menos movimento ou
   teve o play recusado — nesses casos o que se vê é só o poster. */
.site-abertura__video:not([src]) { display: none; }
/* o vídeo só aparece quando já está tocando (site.js põe data-tocando no primeiro quadro): antes disso é o poster */
.site-vivo .site-abertura__video { opacity: 0; transition: opacity .8s ease; }
.site-vivo .site-abertura__video[data-tocando] { opacity: 1; }

.site-abertura__texto { position: relative; z-index: 0; }
.site-abertura__texto::before {
  content: ""; position: absolute; z-index: -1; inset: -140px -100vw -100vh; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--site-veu-cor) 140px);
}
.site-olho { margin-bottom: var(--e-3); color: var(--texto-3); }
.site-abertura__cena .site-olho { color: var(--texto); }
/* A RESERVA do título: enquanto a Archivo Black não chega, o título é escrito numa fonte do aparelho ESTICADA até a
   mesma largura. Sem isto a reserva (estreita) quebrava o título em 4 linhas e a Archivo Black em 5 — o texto, os
   botões e o aparelho desciam 33 px ao trocar (CLS 0,17 a 390 px, medido em 12/10/2026 com o título novo, mais longo).
   Larguras medidas com o próprio título, a 100 px: Archivo Black 3874 · Arial Black 3874 · Arial/Helvetica Bold 3450.
   A altura de linha é fixa, então só a largura importa. Aparelho sem nenhuma destas cai em system-ui, como antes. */
@font-face { font-family: "Archivo Black reserva"; src: local("Arial Black"), local("Arial-Black"); }
@font-face {
  font-family: "Archivo Black reserva 2"; size-adjust: 112.3%;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Roboto Bold"), local("Roboto-Bold");
}
.site-h1 {
  font: clamp(31px, 8.3vw, 56px)/.98 var(--f-display); letter-spacing: -.02em;
  font-family: "Archivo Black", "Archivo Black reserva", "Archivo Black reserva 2", system-ui, sans-serif;
  text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word;
}
.site-lide { margin-top: var(--e-4); max-width: 50ch; font-size: 16px; line-height: 1.5; color: var(--texto); }
.site-lide b { font-weight: 700; }

/* a ação. Enquanto o contato não chegou o botão GUARDA O LUGAR (invisível), para nada pular. */
.site-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-6); }
.site-abertura__cena .site-acoes { margin-top: var(--e-5); }
.site-acoes[data-contato="carregando"] [data-whatsapp], .site-acoes [data-demo="carregando"] { visibility: hidden; }
.site-btn-grande { min-height: 54px; padding: 0 24px; }
/* o botão do WhatsApp diz o que a pessoa quer ("Quero o Metricut na minha barbearia"): é longo, e em tela estreita
   quebra em duas linhas equilibradas em vez de estourar a largura */
.site-btn-grande.btn--primario { white-space: normal; text-align: center; text-wrap: balance; line-height: 1.2; padding-block: 12px; max-width: 100%; }
:root:not([data-pele="interna"]) .site-btn-grande.btn--primario { font-size: 14.5px; }
.site-btn-grande.btn--secundario { font-size: 16px; }
.site-sem-contato { flex: 1 1 100%; max-width: 54ch; font-size: 14px; }
@media (max-width: 479.98px) { .site-acoes > .btn { flex: 1 1 100%; } }

/* o botão principal responde: sobe 2px e ganha sombra no hover, afunda ao apertar. A sombra é uma
   camada à parte que só muda de opacidade (animar box-shadow repintaria o botão a cada quadro). */
.site .btn--primario { position: relative; isolation: isolate; transition: transform .2s var(--site-curva), filter var(--t); }
.site .btn--primario::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: var(--sombra); opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.site .btn--primario:hover:not(:disabled) { transform: translateY(-2px); }
.site .btn--primario:hover:not(:disabled)::after { opacity: 1; }
.site .btn--primario:active:not(:disabled) { transform: translateY(0) scale(.98); }
.site .btn--secundario { transition: transform .2s var(--site-curva), background var(--t), border-color var(--t); }
.site .btn--secundario:active { transform: scale(.98); }

/* O APARELHO da abertura e a FICHA dele (papel claro: a legenda, as barras do passo e o botão de pausar).
   ⚠️ A ficha existe porque em tela larga o aparelho flutua sobre o vídeo: legenda solta ali não teria fundo medido. */
.site-abertura__imagem {
  position: relative; z-index: 2; width: min(292px, 76%); margin: calc(-1 * var(--site-emerge)) auto 0; padding-bottom: var(--e-5);
}
.site-abertura__ficha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-2) var(--e-3);
  margin-top: var(--e-3); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  background: var(--sup); border-radius: var(--r-cartao); box-shadow: var(--sombra-1);
}
.site-legenda { position: relative; z-index: 1; margin-top: var(--e-3); font-size: 14px; line-height: 1.5; color: var(--texto-2); }
/* a legenda em cima, de ponta a ponta; embaixo, as barras do passo à esquerda e o botão de pausar à direita */
.site-abertura__ficha .site-legenda { grid-area: 1 / 1 / 2 / -1; margin-top: 0; font-size: 13.5px; line-height: 1.45; }
.site-abertura__ficha .site-conta__barras { grid-area: 2 / 1; }
.site-abertura__ficha .site-conta__pausa { grid-area: 2 / 2; }

@media (min-width: 900px) {
  .site-abertura__cena { min-height: max(100svh, 720px); padding-bottom: var(--e-8); }
  /* o texto deixa a coluna da direita para o aparelho; o véu dele esmaece para lá */
  .site-abertura__texto { max-width: calc(100% - 340px); }
  .site-abertura__texto::before {
    right: -300px;
    -webkit-mask-image: linear-gradient(to right, var(--texto) calc(100% - 300px), transparent);
    mask-image: linear-gradient(to right, var(--texto) calc(100% - 300px), transparent);
  }
  /* três linhas: o título cabe em ~20 letras por linha, e a largura dele acompanha o corpo da letra */
  .site-h1 { font-size: clamp(38px, 3.6vw, 45px); max-width: 15.6em; }
  .site-lide { font-size: 18px; }
  .site-abertura__imagem {
    position: absolute; right: max(32px, calc((100% - 1136px) / 2 + 48px)); bottom: var(--e-7);
    width: 272px; margin: 0; padding-bottom: 0;
  }
}

/* ── a moldura do celular e a da janela: o produto aparece dentro delas ──
   O aparelho tem moldura na cor do TEXTO (preta na página clara): é o que o faz parecer um objeto,
   e não um retângulo cinza colado. */
.site-fone {
  position: relative; padding: 9px; background: var(--texto); border-radius: 40px; box-shadow: var(--sombra-3);
}
.site-fone img { display: block; width: 100%; height: auto; border-radius: 31px; background: var(--fundo); }
.site-fone--menor { padding: 5px; border-radius: 24px; box-shadow: var(--sombra); }
.site-fone--menor img { border-radius: 19px; }

.site-figura { min-width: 0; }
.site-janela { border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; background: var(--sup); box-shadow: var(--sombra-3); }
.site-janela__barra { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--sup-2); border-bottom: 1px solid var(--borda); }
.site-janela__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--borda-controle); }
.site-janela img { display: block; width: 100%; height: auto; }
/* no celular a janela mostra a MESMA tela como ela é no celular (<picture>): a captura de mesa
   encolhida para 330px virava um borrão de números */
.site-janela picture { display: block; }

/* ── a demonstração dentro do aparelho da abertura ─────────────────────────
   Três capturas reais empilhadas. A do horário (.site-conta__quadro--base) está no fluxo e é a que se vê
   sem script; as outras duas ficam por cima, transparentes, até site.js ligar o passo (data-passo na figura). */
.site-conta__tela { position: relative; overflow: hidden; border-radius: 31px; background: var(--fundo); }
.site-conta__quadro:not(.site-conta__quadro--base) { position: absolute; inset: 0; height: 100%; opacity: 0; }
.site-vivo [data-passo] .site-conta__quadro { opacity: 0; transform: scale(1.03); transition: opacity .5s ease, transform .8s var(--site-curva); }
.site-vivo [data-passo="1"] [data-quadro="1"],
.site-vivo [data-passo="2"] [data-quadro="2"],
.site-vivo [data-passo="3"] [data-quadro="3"] { opacity: 1; transform: none; }
/* o toque: um ponto que aparece onde o cliente tocaria, logo antes de a tela trocar */
.site-conta__toque {
  position: absolute; left: var(--toque-x, 50%); top: var(--toque-y, 50%); width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: var(--texto); opacity: 0; pointer-events: none;
}
/* onde o dedo toca em cada captura (% da tela): a unidade "Centro", o serviço "Máquina", o horário "09:30".
   ⚠️ Acompanha as capturas de /site/: se o enquadramento delas mudar, estes três pares mudam junto. */
[data-passo="1"] .site-conta__toque { --toque-x: 50%; --toque-y: 40%; }
[data-passo="2"] .site-conta__toque { --toque-x: 50%; --toque-y: 53%; }
[data-passo="3"] .site-conta__toque { --toque-x: 81%; --toque-y: 73.5%; }
.site-vivo [data-toque] .site-conta__toque { animation: site-toque .65s ease-out; }
@keyframes site-toque { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: .2; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
/* em que passo a demonstração está: três barras, a do passo atual enche no tempo dele */
/* ⚠️ As barras e o botão de pausar GUARDAM O LUGAR desde o primeiro quadro (invisíveis): se aparecessem só quando o
   script liga a demonstração, empurrariam a página inteira para baixo no celular (medido: CLS 0,024). */
.site-conta__barras { display: flex; visibility: hidden; gap: 6px; }
.site-vivo [data-passo] .site-conta__barras { visibility: visible; }
.site-conta__barras i { position: relative; width: 30px; height: 4px; border-radius: var(--r-pilula); background: var(--borda-controle); overflow: hidden; }
.site-conta__barras i::after { content: ""; position: absolute; inset: 0; background: var(--acento-marca); transform: scaleX(0); transform-origin: left; }
[data-passo="2"] .site-conta__barras i:nth-child(1)::after,
[data-passo="3"] .site-conta__barras i:nth-child(-n+2)::after { transform: none; }
[data-passo="1"] .site-conta__barras i:nth-child(1)::after,
[data-passo="2"] .site-conta__barras i:nth-child(2)::after,
[data-passo="3"] .site-conta__barras i:nth-child(3)::after { animation: site-enche var(--dur, 3s) linear forwards; }
@keyframes site-enche { to { transform: none; } }
.site-conta__pausa { min-height: 44px; margin: calc(-1 * var(--e-2)) 0; font-size: 14px; }
.site-conta__pausa[data-espera] { visibility: hidden; }

/* a abertura assenta ao carregar: o aparelho sobe. Só transform — a captura já está lá para ser lida. */
@media (prefers-reduced-motion: no-preference) {
  .site-conta { animation: site-pousa .9s var(--site-curva) both; }
}
@keyframes site-pousa { from { transform: translateY(26px) scale(.965); } }

/* ── seção e folha ────────────────────────────────────────────────────── */
.site-secao { padding-block: 64px; }
@media (min-width: 900px) { .site-secao { padding-block: 104px; } }
/* a FOLHA: um bloco inteiro de papel pousado na mesa. Entre uma folha e a mesa não há fio — há borda de papel. */
.site-folha { margin-inline: 8px; background: var(--sup); border-radius: 28px; box-shadow: var(--sombra-1); }
@media (min-width: 640px) { .site-folha { margin-inline: 16px; border-radius: 36px; } }
@media (min-width: 1280px) { .site-folha { margin-inline: 28px; border-radius: 44px; } }
.site-folha .site-largura { padding-inline: 16px; }
@media (min-width: 640px)  { .site-folha .site-largura { padding-inline: 28px; } }
@media (min-width: 1024px) { .site-folha .site-largura { padding-inline: 48px; } }
/* a FAIXA ESCURA: os tokens do tema escuro vêm de data-faixa="escura" (tokens.css). ⚠️ `color` tem de ser
   redeclarada aqui: a cor herdada do <body> já chegou resolvida no valor do tema claro. */
.site-noite { background: var(--fundo); color: var(--texto); box-shadow: var(--sombra); }
/* ⭐ A HORA: o olho das três seções do produto. É um relógio (DM Mono, algarismos de mesma largura), grande o bastante
   para ser lido como hora e não como número de seção; ao lado, em rótulo, o que acontece na barbearia naquela hora. */
.site-hora { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3); margin-bottom: var(--e-4); }
.site-hora__relogio { font-size: clamp(30px, 8vw, 44px); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--texto); }
.site-hora__rotulo { color: var(--texto-2); }
.site-sub { max-width: 58ch; margin-bottom: 0; font-size: 17px; line-height: 1.55; }
.site-h3 { font: 700 18px/1.25 var(--f-corpo); letter-spacing: -.005em; }

/* ── a chamada no meio da página: o MESMO botão do WhatsApp da abertura e do fecho, com uma linha de apoio ──
   São duas: uma solta na mesa, entre a faixa escura do dinheiro e a folha clara do cliente (é a mesa que separa as
   duas folhas), e uma no pé das garantias. O botão guarda o lugar até o número chegar (a regra de .site-acoes). */
.site-chamada { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); }
.site-chamada .site-acoes { flex: 0 1 auto; margin-top: 0; }
.site-chamada .pub-miudo { flex: 1 1 240px; max-width: 46ch; margin-top: 0; font-size: 14px; }
@media (max-width: 479.98px) { .site-chamada .site-acoes { flex-basis: 100%; } }
.site-chamada-solta { padding-block: var(--e-7); }
@media (min-width: 900px) { .site-chamada-solta { padding-block: var(--e-8); } }
.site-secao .site-chamada { margin-top: var(--e-7); }

/* ── o ambiente: a faixa de fotos de barbearia ─────────────────────────────
   No celular, a grande em cima (4:3) e as quatro em duas colunas (quadradas); em tela larga, a grande à esquerda
   ocupando as duas linhas e as quatro menores em pé (2:3). Cada moldura tem proporção própria e a foto a preenche
   (object-fit): o lugar está guardado antes de a imagem chegar (CLS 0), e elas são adiáveis (lazy).
   ⚠️ "Adiável" só as tira da carga inicial porque a faixa fica LONGE da abertura (é a quinta seção): o navegador busca
   imagem adiável que esteja perto da dobra. Subir a faixa para logo abaixo da abertura põe as cinco de volta na carga.
   O fundo da moldura é a cor do texto (como a do aparelho): foto escura não pisca em claro enquanto carrega. */
.site-ambiente__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-7); }
.site-ambiente__foto {
  position: relative; overflow: hidden; aspect-ratio: 1; background: var(--texto);
  border-radius: var(--r-cartao); box-shadow: var(--sombra-1);
}
.site-ambiente__foto--grande { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
/* a foto fica fora do fluxo da moldura: quem dá a altura é a proporção, nunca o tamanho natural do arquivo */
.site-ambiente__foto img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--site-curva);
}
/* o que cada foto NÃO pode perder no recorte (x vale na moldura em pé, y na quadrada e na 4:3).
   ⚠️ Acompanha os arquivos de /site/ambiente-*.webp: trocou a foto, confere estes cinco pares. */
.site-ambiente__foto:nth-child(1) img { object-position: 45% 12%; }   /* ⛔ o rosto e o riso do barbeiro, inteiros */
.site-ambiente__foto:nth-child(2) img { object-position: 65% 18%; }   /* a luminária e a cadeira */
.site-ambiente__foto:nth-child(3) img { object-position: 60% 90%; }   /* as ferramentas alinhadas na bancada */
.site-ambiente__foto:nth-child(4) img { object-position: 50% 70%; }   /* ⛔ o rosto inteiro e os braços cruzados */
.site-ambiente__foto:nth-child(5) img { object-position: 45% 36%; }   /* as mãos, a máquina e a nuca */
/* a foto chega mais perto sob o ponteiro: só transform, e a moldura recorta */
@media (hover: hover) { .site-ambiente__foto:hover img { transform: scale(1.05); } }
@media (min-width: 900px) {
  .site-ambiente__grade { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-4); }
  .site-ambiente__foto { aspect-ratio: 2 / 3; }
  .site-ambiente__foto--grande { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
}

/* ── o caminho do cliente: três passos, cada um com a tela de verdade ──── */
.site-caminho__chamada { margin-top: var(--e-7); font: 700 18px/1.3 var(--f-corpo); }
.site-caminho { list-style: none; display: grid; gap: var(--e-5); margin-top: var(--e-5); }
.site-caminho__passo { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--e-4); align-items: center; }
.site-caminho__texto p { margin-top: 6px; color: var(--texto-2); line-height: 1.5; }
.site-num {
  display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: var(--e-2);
  border: 1px solid var(--borda-controle); border-radius: 50%; font-size: 13px; line-height: 1; color: var(--texto-2);
}
@media (min-width: 768px) {
  .site-caminho { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); }
  .site-caminho__passo { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: var(--e-5); }
  .site-caminho .site-fone--menor { max-width: 250px; padding: 7px; border-radius: 32px; }
  .site-caminho .site-fone--menor img { border-radius: 25px; }
  /* os três aparelhos em degraus: o caminho desce da esquerda para a direita */
  .site-caminho__passo:nth-child(2) { margin-top: var(--e-6); }
  .site-caminho__passo:nth-child(3) { margin-top: var(--e-8); }
}

/* três fatos lado a lado, sob um fio preto: o que o dono costuma perguntar em seguida */
.site-trio, .site-garantias { list-style: none; display: grid; gap: var(--e-5); margin-top: var(--e-7); }
.site-trio li, .site-garantias li { padding-top: var(--e-4); border-top: 2px solid var(--texto); color: var(--texto-2); line-height: 1.55; }
.site-trio b { display: block; margin-bottom: 4px; color: var(--texto); font-size: 17px; line-height: 1.3; }
.site-garantias p { margin-top: 6px; }
.site-garantias .site-h3 { color: var(--texto); }
@media (min-width: 640px) { .site-garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-5); } }
@media (min-width: 900px) {
  .site-trio, .site-garantias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-7) var(--e-6); }
}

/* ── para a barbearia ─────────────────────────────────────────────────── */
.site-secao .site-largura > .site-figura { margin-top: var(--e-7); }
/* a janela e, por cima dela (em tela larga), o celular com a mesma agenda */
.site-dupla__cena { position: relative; }
.site-dupla__fone { display: none; }
@media (min-width: 900px) {
  .site-dupla__cena { padding: 0 72px 56px 0; }
  .site-dupla__fone { display: block; position: absolute; z-index: 2; right: 0; bottom: 0; width: 212px; padding: 7px; border-radius: 32px; }
  .site-dupla__fone img { border-radius: 25px; }
}
.site-blocos { list-style: none; display: grid; gap: var(--e-4); margin-top: var(--e-7); }
/* o cartão sobe 2px no hover; a sombra maior é uma camada que só muda de opacidade */
.site-bloco { position: relative; padding: var(--pad-cartao); overflow: visible; transition: transform .25s var(--site-curva); }
.site-bloco::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--sombra);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
@media (hover: hover) {
  .site-bloco:hover { transform: translateY(-2px); }
  .site-bloco:hover::after { opacity: 1; }
}
.site-bloco p { margin-top: var(--e-2); color: var(--texto-2); line-height: 1.55; }
@media (min-width: 640px)  { .site-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-blocos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── o dinheiro (dentro da faixa escura): as duas telas em degrau ───────── */
.site-dinheiro { display: grid; gap: var(--e-6); }
.site-dinheiro .site-figura + .site-figura { margin-top: var(--e-4); }
.site-noite .site-janela { border-color: var(--borda-controle); }
@media (min-width: 1024px) {
  .site-dinheiro { gap: var(--e-7); }
  .site-dinheiro .site-figura { width: 84%; }
  /* a segunda tela encosta à direita e sobe por cima do pé da primeira; a legenda da primeira fica no vão que sobra */
  .site-dinheiro .site-figura + .site-figura { position: relative; z-index: 1; justify-self: end; width: 72%; margin-top: -88px; }
  .site-dinheiro .site-figura:first-of-type .site-legenda { max-width: 24%; }
}

/* ── como começa: a peça .passos, com o respiro da pele pública ─────────── */
.site-passos { max-width: 760px; margin-top: var(--e-7); border-radius: var(--r-cartao); background: var(--fundo); }
.site-passos .passos__item { align-items: flex-start; gap: var(--e-4); padding: var(--e-5); }
.site-passos .passos__marca { width: 30px; height: 30px; font-size: 13px; background: var(--sup); }
.site-passos .passos__texto > b { font-size: 17px; line-height: 1.3; }
.site-passos .passos__texto > span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; }

/* ── fecho e rodapé ───────────────────────────────────────────────────── */
.site-fecho { padding-block: 72px 56px; }
@media (min-width: 900px) { .site-fecho { padding-block: 112px 88px; } }
/* o fecho é a peça ELEVADA da página: a única com --sombra cheia fora das telas do produto */
.site-fecho__miolo {
  padding: 36px 24px; background: var(--sup-alta); border: 1px solid var(--borda); border-radius: 28px; box-shadow: var(--sombra);
}
@media (min-width: 900px) { .site-fecho__miolo { padding: 64px; border-radius: 36px; } }
.site-fecho .site-acoes { margin-top: var(--e-6); }

.site-rodape { padding-block: var(--e-5) calc(var(--e-6) + env(safe-area-inset-bottom)); }
.site-rodape__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--borda); }
.site-rodape .site-marca { --marca-t: 26px; }
.site-rodape__texto { flex: 1 1 200px; font-size: 14px; color: var(--texto-2); }
.site-rodape__entrar { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ── entrar ao rolar ──────────────────────────────────────────────────────
   site.js marca com data-entra SÓ o que ainda está abaixo da dobra, e só depois de pôr `site-vivo` no <html>.
   Cada item espera a sua vez dentro do grupo (--i). Quando a entrada acaba o script tira o atributo, para o
   atraso não sobrar no hover do cartão. */
.site-vivo [data-entra] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .85s var(--site-curva); transition-delay: calc(var(--i, 0) * 85ms);
}
/* as telas do produto chegam um pouco menores e assentam */
.site-vivo [data-entra="tela"] { transform: translateY(34px) scale(.972); }
.site-vivo [data-entra].visto { opacity: 1; transform: none; }

/* paralaxe leve do celular que fica por cima da janela: anda ±28px enquanto a figura atravessa a tela.
   É animação ligada à rolagem pelo próprio CSS (sem script, sem ouvir scroll); onde o navegador não tem, fica parado. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .site-dupla__fone { animation: site-desliza linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; }
  }
}
@keyframes site-desliza { from { transform: translateY(28px); } to { transform: translateY(-28px); } }

/* quem pediu menos movimento: tudo no estado final, mesmo que alguma classe de movimento tenha sobrado */
@media (prefers-reduced-motion: reduce) {
  .site-vivo [data-entra], .site-vivo [data-passo] .site-conta__quadro { opacity: 1; transform: none; }
  .site-vivo [data-passo] .site-conta__quadro:not(.site-conta__quadro--base) { opacity: 0; }
  .site-conta__barras, .site-conta__pausa { display: none !important; }
}