:root {
  --brand: #1D3F66;
  --brand-dark: #0F2340;
  --brand-light: #5A86B3; /* decorativo; nunca em texto pequeno */
  --ink: #1D2224;
  --ink-muted: #5C6669;
  --on-dark-muted: #D9DBDA;
  --surface: #F3F2EF;
  --surface-raised: #FFFFFF;
  --border: #D9DBDA;
  --on-dark: #FFFFFF;                     /* texto e contorno sobre o escuro */
  --on-dark-06: rgba(255, 255, 255, 0.06);
  --on-dark-12: rgba(255, 255, 255, 0.12); /* branco translúcido sobre o escuro */
  --on-dark-18: rgba(255, 255, 255, 0.18);
  --on-dark-30: rgba(255, 255, 255, 0.3);
  --on-dark-35: rgba(255, 255, 255, 0.35);
  --on-dark-45: rgba(255, 255, 255, 0.45);
  --on-dark-60: rgba(255, 255, 255, 0.6);   /* contorno de campo e opcao do montador (>= 3:1 sobre o vidro) */
  --on-dark-10: rgba(255, 255, 255, 0.1);
  --brand-light-40: rgba(90, 134, 179, 0.4);  /* brilho do fundo do Contato */
  --brand-light-16: rgba(90, 134, 179, 0.16);
  --sombra-alta: 0 24px 60px rgba(4, 12, 26, 0.45);
  --sombra-pilula: 0 6px 18px rgba(4, 12, 26, 0.3);
  --sombra-celular: 0 30px 60px -20px rgb(15 35 64 / 0.45); /* celular do projeto (noite-criativa) */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;                      /* painel do Contato (noite-criativa) */
  --radius-pilula: 999px;                 /* opções do montador (noite-criativa) */
  --altura-cabecalho: 64px; /* 10 + 44 do botão + 10; o movimento.css também lê */
  --font-titulo: "Manrope", system-ui, sans-serif;
  --font-corpo: "Inter", system-ui, sans-serif;
  --espaco-1: 8px;
  --espaco-2: 16px;
  --espaco-3: 24px;
  --espaco-4: 32px;
  --margem-lateral: 20px; /* 40px no tablet, 80px no computador */
  --espaco-secao: 56px;   /* 96px no computador */

  /* Site só claro: impede o "modo escuro forçado" do navegador de inverter a marca. */
  color-scheme: only light;
  accent-color: var(--brand);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%; /* iPhone deitado não aumenta o texto sozinho */
  text-size-adjust: 100%;
  hanging-punctuation: first allow-end last; /* só Safari; nos outros não faz nada */
}

/* Tamanhos em rem (1rem = 16px): mesmos valores do DESIGN.md, mas respeitam
   o tamanho de fonte que a pessoa escolheu no navegador. */
body {
  margin: 0;
  font-family: var(--font-corpo);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--surface);
  /* Palavra ou endereço longo quebra em vez de vazar; "anywhere" também deixa
     a coluna do grid encolher (break-word é o reserva de navegador antigo). */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Escala de texto: clamp(mínimo no celular, cresce por vw, máximo no computador),
   calibrado para bater exato em 375px e em 1024px. */

h1 {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.73875rem + 4.31vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

h2 {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: clamp(1.875rem, 1.51375rem + 1.54vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
}

.contato h2 {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); /* noite-criativa: era 32 a 48px */
}

/* Títulos das seções do meio (noite-criativa): cada um com o seu tratamento, para não repetir a fórmula.
   Serviços: traço curto em cima e h2 de 72px (só ele sobe de uma máscara, no movimento.css).
   Projetos: fio que nasce da esquerda e termina no título. Como funciona: quatro traços (os quatro passos).
   Sobre: menor, com barra vertical ao lado. O .titulo-texto existe nos quatro; parado, é só texto. */
.servicos h2,
.projetos h2,
.como-funciona h2,
.sobre h2 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.servicos h2::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-bottom: 0.35em;
  border-radius: var(--radius-xs);
  background-image: linear-gradient(90deg, var(--brand), var(--brand-light));
}

.projetos h2 {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: clamp(2.25rem, 5vw, 4rem);
}

.projetos h2::before {
  content: "";
  flex: 1 1 2rem;
  height: 3px;
  background-image: linear-gradient(90deg, transparent, var(--brand));
}

.como-funciona h2::before {
  content: "";
  display: block;
  width: 5.6rem; /* 4 traços de 1.1rem com 3 vãos de 0.4rem */
  height: 5px;
  margin-bottom: 0.45em;
  background-image: repeating-linear-gradient(90deg, var(--brilho) 0 1.1rem, transparent 1.1rem 1.5rem);
}

.sobre h2 {
  position: relative;
  padding-left: 0.5em;
  font-size: clamp(1.875rem, 4.4vw, 3.25rem);
}

.sobre h2::before {
  content: "";
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  left: 0;
  width: 5px;
  border-radius: var(--radius-xs);
  background-image: linear-gradient(var(--brand), var(--brand-light));
}

h3 {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.0525rem + 0.31vw, 1.25rem);
  line-height: 1.3; /* nomes dos projetos e títulos dos passos; as ofertas usam 1.2 */
  color: var(--brand-dark);
}

.oferta h3 {
  font-weight: 800;
  font-size: clamp(1.5rem, 1.21125rem + 1.23vw, 2rem);
  line-height: 1.2;
}

/* Títulos com linhas de tamanho parecido; parágrafos sem palavra sozinha na última linha. */
h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  max-width: 52ch; /* cerca de 65 caracteres por linha; 60ch dava 75 a 78 */
  text-wrap: pretty;
}

.topo-texto p {
  font-size: clamp(1rem, 0.9275rem + 0.31vw, 1.125rem);
  line-height: 1.65;
}

.oferta-prazo,
.projeto p,
.rodape p {
  font-size: clamp(0.875rem, 0.83875rem + 0.16vw, 0.9375rem);
}

.oferta-prazo,
.projeto p {
  color: var(--ink-muted);
}

/* Fica fora da tela; "display: none" também esconderia do teclado/leitor de tela. */
.pular-link {
  position: absolute;
  z-index: 10; /* acima de qualquer camada posicionada (ex.: topo preso na rolagem) */
  left: -9999px;
}

.pular-link:focus {
  left: 16px;
  top: 16px;
  padding: 12px 16px;
  background-color: var(--surface-raised);
  color: var(--brand-dark);
}

/* Continua legível para leitor de tela, mas invisível na tela. */
.visualmente-escondido {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

h2 {
  margin-bottom: var(--espaco-4);
}

p + p {
  margin-top: var(--espaco-2);
}

/* Largura: menor entre (tela - 2 margens) e 1120px. */
.container {
  width: min(100% - 2 * var(--margem-lateral), 1120px);
  margin-inline: auto;
}

section {
  padding-block: var(--espaco-secao);
}

.projetos,
.sobre {
  background-color: var(--surface-raised);
}

a {
  color: var(--brand);
  text-underline-offset: 0.18em; /* sublinhado longe das letras, sem tocar acentos e colchetes */
}

/* Seleção de texto nas cores da marca (invertida nas faixas escuras). */
::selection {
  background-color: var(--brand);
  color: var(--on-dark);
}

.cabecalho ::selection,
.como-funciona ::selection,
.topo ::selection,
.contato ::selection,
.rodape ::selection {
  background-color: var(--surface-raised);
  color: var(--brand-dark);
}

.projeto h3 a {
  transition: color 150ms;
}

.projeto h3 a:hover {
  color: var(--brand-dark);
}

/* :focus-visible: aparece via teclado, não no clique do mouse. */
:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 3px;
}

.cabecalho :focus-visible,
.topo :focus-visible,
.contato :focus-visible,
.rodape :focus-visible {
  outline-color: var(--on-dark);
}

/* Projeto: o anel de foco contorna a área clicável inteira, não só o nome. */
.projeto h3 a:focus-visible {
  outline: none;
}

.projeto h3 a:focus-visible::after {
  outline: 2px solid var(--brand-light);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--espaco-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-corpo);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  /* Lista única de transições; o toque (scale) só ganha duração quando o movimento.css define as variáveis. */
  transition: background-color 150ms, border-color 150ms, color 150ms,
    scale var(--duracao-toque, 0s) var(--curva-saida, ease);
}

.botao-claro {
  background-color: var(--surface-raised);
  color: var(--brand-dark);
}

.botao-claro:hover {
  background-color: var(--surface);
}

.botao-contorno {
  border-color: var(--on-dark-35);
  color: var(--on-dark);
}

.botao-contorno:hover {
  border-color: var(--on-dark);
}

.cabecalho {
  background-color: var(--brand-dark);
}

/* Altura: 10px + 44px do botão + 10px = 64px. */
.cabecalho .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-block: 10px;
}

.logo {
  margin-right: auto; /* logo à esquerda; o resto do cabeçalho (WhatsApp e menu) junto à direita */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--on-dark);
  text-decoration: none;
}

.logo-simbolo {
  width: 32px; /* marca pede mínimo de 24px */
  height: auto;
}

.logo-nome {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-1);
  font-family: var(--font-titulo);
  line-height: 1;
  white-space: nowrap; /* marca não quebra no meio */
}

.logo-bittante {
  font-size: 22px; /* px: o nome acompanha o símbolo, que tem tamanho fixo */
  font-weight: 800;
  letter-spacing: -0.02em;
}

.logo-studio {
  margin-right: -0.55em; /* desconta o letter-spacing sobrando após a última letra */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.55em;
  text-transform: uppercase;
}

.menu-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--on-dark-30);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--on-dark);
  cursor: pointer;
  transition: scale var(--duracao-toque, 0s) var(--curva-saida, ease);
}

/* WhatsApp do cabeçalho (noite-criativa): só com JS, abaixo do computador e a partir de 360px.
   Em 320px não cabe junto do logo e do botão do menu. */
.cabecalho-whatsapp {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-right: 12px;
  padding-inline: 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: var(--surface-raised);
  color: var(--brand-dark);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 150ms, scale var(--duracao-toque, 0s) var(--curva-saida, ease);
}

.cabecalho-whatsapp:hover {
  background-color: var(--surface);
}

@media (min-width: 22.5em) {
  .js .cabecalho-whatsapp {
    display: inline-flex;
  }

  /* Logo inteiro (200px) + WhatsApp + menu só cabem a partir de 26em (416px); abaixo disso o
     "Studio" espaçado sai e ficam o símbolo e "Bittante". O link mantém o aria-label. */
  @media not all and (min-width: 26em) {
    .js .logo-studio {
      display: none;
    }
  }
}

/* Menu aberto: o botão do menu já traz o seu; o do cabeçalho some (o foco está no botão do menu). */
.js .cabecalho:has(.menu-botao[aria-expanded="true"]) .cabecalho-whatsapp {
  display: none;
}

.icone-fechar,
.menu-botao[aria-expanded="true"] .icone-abrir {
  display: none;
}

.menu-botao[aria-expanded="true"] .icone-fechar {
  display: block;
}

/* JS só troca aria-expanded; quem mostra/esconde é o CSS. */
.cabecalho nav {
  display: none;
  flex-basis: 100%;
  padding-bottom: var(--espaco-2);
}

.menu-botao[aria-expanded="true"] + nav {
  display: block;
}

/* Sem JS (a classe .js vem de um script no <head>): o botão não faria nada,
   então some e a lista fica aberta. */
html:not(.js) .menu-botao {
  display: none;
}

html:not(.js) .cabecalho nav {
  display: block;
}

/* Com JS, abaixo do computador: o menu abre numa folha por cima da página, do pé do
   cabeçalho até o fim da tela, no mesmo fundo escuro. A página não se move. */
@media not all and (min-width: 64em) {
  /* Grudado no topo (noite-criativa): vidro escuro sobre qualquer seção; a folha do menu sai do pé dele.
     Sem JS o cabeçalho fica no fluxo (a lista aberta seria alta demais para grudar). */
  .js .cabecalho {
    position: sticky;
    top: 0;
    z-index: 5; /* acima das janelas e dos painéis, abaixo do pular-link (10) */
    background-color: rgb(15 35 64 / 0.94);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }

  @supports not (backdrop-filter: blur(1px)) {
    .js .cabecalho {
      background-color: var(--brand-dark);
    }
  }

  /* No alto da página o cabeçalho ocupa a faixa acima do topo, e o vidro pegaria o creme do body:
     uma faixa marinho no fundo da página (propaga para a tela) mantém a cor igual à do topo. */
  .js body {
    background-image: linear-gradient(var(--brand-dark), var(--brand-dark));
    background-repeat: no-repeat;
    background-size: 100% var(--altura-cabecalho);
  }

  /* Menu aberto: cabeçalho sólido, emendado na folha. */
  .js .cabecalho:has(.menu-botao[aria-expanded="true"]) {
    background-color: var(--brand-dark);
  }

  /* Âncoras e foco do teclado param abaixo do cabeçalho. */
  html.js {
    scroll-padding-top: var(--altura-cabecalho);
  }

  .js .cabecalho nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5; /* acima das janelas do topo, abaixo do pular-link (10) */
    /* Altura fixa = a parte visível da tela; em tela baixa a folha rola por dentro e o botão do
       WhatsApp continua alcançável (a página fica travada). */
    min-height: calc(100svh - var(--altura-cabecalho));
    max-height: calc(100svh - var(--altura-cabecalho));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Alinha com o .container, inclusive quando ele bate nos 1120px (fonte grande).
       O 8px de cima dá espaço ao anel de foco de "Serviços", que o overflow recortaria. */
    padding: 8px max(var(--margem-lateral), (100% - 1120px) / 2) var(--espaco-3);
    background-color: var(--brand-dark);
  }

  /* A folha segura a página enquanto está aberta; scrollbar-gutter evita que o botão pule
     quando a barra de rolagem clássica some. O fundo escuro pinta essa faixa, que senão
     ficaria creme ao lado da folha. */
  .js:has(.menu-botao[aria-expanded="true"]) {
    overflow: hidden;
    scrollbar-gutter: stable;
    background-color: var(--brand-dark);
  }
}

.menu-lista {
  padding: 0;
  list-style: none;
}

.menu-lista a {
  display: flex;
  align-items: center;
  min-width: 44px; /* "Sobre" tem 42px de texto; a área de toque fica em 44x44 */
  min-height: 44px;
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: color 150ms;
}

.menu-lista a:hover {
  color: var(--on-dark);
}

.menu-lista .botao-menu {
  display: inline-flex;
  margin-top: var(--espaco-1);
  padding-inline: var(--espaco-3);
  border: 1px solid transparent; /* no alto contraste do Windows o fundo some; a borda fica */
  border-radius: var(--radius-md);
  background-color: var(--surface-raised);
  color: var(--brand-dark);
  font-weight: 600;
  transition: background-color 150ms, scale var(--duracao-toque, 0s) var(--curva-saida, ease);
}

.menu-lista .botao-menu:hover {
  background-color: var(--surface);
  color: var(--brand-dark);
}

/* Topo em cena (noite-criativa, V1): aurora da marca ao fundo, título gigante com gradiente e
   janelas de vidro. Tudo estático aqui; a aurora só se mexe no movimento.css (computador).
   Cores decorativas derivadas da paleta, locais do bloco. */
.topo {
  --brilho: #8FB4DC;
  --texto-claro: #BFD3EA;
  position: relative;
  isolation: isolate;
  overflow: clip; /* a aurora passa da caixa; clip não cria rolagem e não quebra o sticky do cinema */
  background-color: var(--brand-dark);
  color: var(--on-dark);
}

/* Manchas afastadas do canto de cima e do texto: o cabeçalho (marinho) emenda sem costura
   e o texto fica sobre o trecho mais escuro. Sem filter: só gradientes. */
.topo::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  /* Celular e tablet (coluna única, texto até a metade de cima): manchas na ilustração e embaixo. */
  background:
    radial-gradient(54% 17% at 76% 60%, rgb(90 134 179 / 1), transparent 70%),
    radial-gradient(46% 14% at 14% 72%, rgb(143 180 220 / 0.6), transparent 70%),
    radial-gradient(60% 16% at 60% 86%, rgb(90 134 179 / 0.85), transparent 70%),
    radial-gradient(60% 12% at 12% 52%, rgb(29 63 102 / 1), transparent 72%);
}

/* Computador (duas colunas, texto à esquerda): manchas vivas à direita, atrás e em volta da ilustração;
   à esquerda só um marinho fundo, para o texto ficar no trecho escuro. */
@media (min-width: 64em) {
  .topo::before {
    background:
      radial-gradient(24% 20% at 80% 26%, rgb(143 180 220 / 0.5), transparent 70%),
      radial-gradient(28% 24% at 66% 49%, rgb(90 134 179 / 0.85), transparent 70%),
      radial-gradient(30% 24% at 80% 72%, rgb(90 134 179 / 0.7), transparent 70%),
      radial-gradient(30% 22% at 34% 86%, rgb(29 63 102 / 1), transparent 72%),
      radial-gradient(26% 18% at 58% 84%, rgb(143 180 220 / 0.3), transparent 70%);
  }
}

/* Emenda com o cabeçalho: a aurora se apaga nos primeiros 96px, sem costura em y=64 (camada própria, não gira). */
.topo::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 96px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(var(--brand-dark), transparent);
}

.topo .container {
  display: grid;
  gap: var(--espaco-4);
}

.topo h1 {
  margin-bottom: var(--espaco-3);
  font-size: clamp(2.75rem, 12.5vw, 5.5rem); /* gigante; o valor do computador vem mais abaixo */
  letter-spacing: -0.03em;
  color: var(--on-dark); /* reserva: sem background-clip o título fica branco sólido */
}

/* Texto em gradiente na diagonal, atravessando as duas linhas: branco, --texto-claro e --brilho no fim
   (azul da marca; >= 4.5:1 sobre o trecho mais claro do fundo atrás do texto, medido). */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .topo h1 {
    background-image: linear-gradient(125deg, var(--on-dark) 15%, var(--texto-claro) 50%, var(--brilho) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.08em; /* o gradiente cobre a descendente do "ç" */
  }
}

.topo-texto p {
  color: var(--on-dark-muted);
}

.topo-botoes {
  display: grid;
  gap: var(--espaco-2);
}

/* Ilustração: proporção fixa 540×400; as 3 janelas usam % para escalar junto. */
.ilustracao {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 540 / 400;
}

.janela {
  position: absolute;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.janela-nome {
  font-size: 12px; /* px: o texto escala junto com o desenho, não com a fonte do navegador */
  font-weight: 500;
  line-height: 1;
}

.janela-esboco {
  left: 0;
  top: 0;
  width: 63%;
  height: 57%;
  padding: 10px 12px;
  border: 1.5px dashed var(--on-dark-60);
  background-color: rgb(15 35 64 / 0.4); /* tinta marinho: a janela se separa da aurora sem clarear o fundo do texto */
  color: var(--on-dark-muted);
}

/* Esboço: riscos e uma caixa tracejada, só nas partes que o Layout não cobre. */
.esboco-risco,
.esboco-caixa {
  position: absolute;
  left: 3.5%;
  border: 0 dashed var(--on-dark-30);
}

.esboco-risco {
  border-top-width: 1.5px;
}

.esboco-risco-1 { top: 18%; width: 68%; }
.esboco-risco-2 { top: 26%; width: 42%; }

.esboco-caixa {
  top: 40%;
  width: 19%;
  height: 26%;
  border-width: 1.5px;
  border-radius: var(--radius-sm);
}

.janela-layout {
  left: 16.3%;
  top: 19.5%;
  width: 63%;
  height: 57%;
  border: 1px solid var(--on-dark-60);
  /* Vidro mais denso: reflexo branco que some para baixo, sobre tinta marinho (a aurora não engole a janela). */
  background: linear-gradient(rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.05)), rgb(15 35 64 / 0.4);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 24px 60px -24px rgb(0 0 0 / 0.5); /* vidro: brilho no topo e sombra longa */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--on-dark-muted);
}

@supports not (backdrop-filter: blur(1px)) {
  .janela-layout {
    background: linear-gradient(rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.05)), rgb(15 35 64 / 0.7);
  }
}

.janela-barra {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding-inline: 10px;
}

.janela-layout .janela-barra {
  border-bottom: 1px solid var(--on-dark-12);
}

.bolinha {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--on-dark-35);
}

.janela-esboco .janela-nome,
.janela-layout .janela-nome {
  color: var(--on-dark); /* o vidro clareia o fundo: branco mantém 4.5:1 mesmo com a janela recuada no cinema */
}

.janela-layout .janela-nome {
  margin-left: 6px;
}

.layout-barra {
  height: 8px;
  margin: 12px 12px 0;
  border-radius: var(--radius-sm);
  background-color: var(--on-dark-18);
}

.layout-barra:nth-child(2) { width: 70%; }
.layout-barra:nth-child(3) { width: 85%; }
.layout-barra:nth-child(4) { width: 50%; }

.janela-pronta {
  left: 33.3%;
  top: 41%;
  width: 66.7%;
  height: 58%;
  background-color: var(--surface-raised);
  /* a sólida é o destino: halo de luz em volta */
  box-shadow: 0 0 0 1px var(--texto-claro), 0 0 60px -10px rgb(143 180 220 / 0.6);
}

.janela-pronta .janela-barra {
  background-color: var(--surface);
  color: var(--ink-muted);
}

.pronta-titulo {
  width: 55%;
  height: 12px;
  margin: 16px 14px 0;
  border-radius: var(--radius-xs);
  background-color: var(--brand-dark);
}

.pronta-linha {
  height: 7px;
  margin: 10px 14px 0;
  border-radius: var(--radius-xs);
  background-color: var(--border);
}

.pronta-linha:nth-child(3) { width: 75%; }
.pronta-linha:nth-child(4) { width: 55%; }

.pronta-botao {
  width: 28%;
  height: 18px;
  margin: 14px 14px 0;
  border-radius: var(--radius-sm);
  background-color: var(--brand);
}

/* Cartões no pé do site pronto: a janela nunca fica vazia embaixo. */
.pronta-cartoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 14px 0;
}

.pronta-cartao {
  aspect-ratio: 2 / 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(var(--border), var(--border)) 8px 8px / 55% 5px no-repeat, var(--surface);
}

.pronta-cartao:first-child {
  background-color: #DCE6F1; /* --brand-light bem clarinho: um cartão em destaque */
}

/* Faixa de fatos (noite-criativa, V5): decoração entre o topo e Serviços. Parada, uma frase por linha, todas
   alinhadas à esquerda e com o mesmo preenchimento legível; o movimento.css a transforma em duas linhas que
   correm com a rolagem (e só nesse modo a segunda linha vira contorno, que precisa de letra grande). */
.faixa {
  --brilho: #8FB4DC;
  --texto-claro: #BFD3EA;
  container-type: inline-size; /* o movimento.css mede o deslocamento em cqw */
  overflow: clip;              /* nada dela cria rolagem horizontal */
  padding-block: clamp(1.25rem, 3.5vw, 2.5rem);
  background-color: var(--brand);
  color: var(--on-dark);
  font-family: var(--font-titulo);
  font-size: clamp(1.375rem, 3.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

/* Parada (sem movimento ou sem suporte): uma frase por linha, sem separadores, todas à esquerda e na mesma
   cor (as duas linhas do HTML viram uma coluna só), completas e dentro da tela. */
.faixa-linha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0.1em;
  padding-inline: var(--margem-lateral);
  text-align: left;
  text-wrap: balance;
}

.faixa-linha + .faixa-linha {
  margin-top: 0.1em;
}

.faixa-contorno {
  color: inherit; /* parada: mesmo preenchimento da primeira linha (o contorno só existe com letra grande, em movimento.css) */
}

/* Separadores em forma pura: ponto na primeira linha, barra inclinada na segunda. */
.faixa-ponto,
.faixa-barra {
  display: none; /* só aparecem quando a faixa corre (movimento.css) */
  flex: none;
  background-color: var(--brilho);
}

.faixa-ponto {
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
}

.faixa-barra {
  width: 0.09em;
  height: 0.75em;
  transform: skewX(-20deg);
}

/* Faixa de largura total, sem fundo/borda, só linha fina em cima. */
.oferta {
  display: grid;
  row-gap: var(--espaco-1);
  padding-block: var(--espaco-4);
  border-top: 1px solid var(--border);
}

.oferta:last-child {
  border-bottom: 1px solid var(--border);
}

.tambem-faco {
  margin-top: var(--espaco-4);
}

.sobre h2,
.contato h2 {
  margin-bottom: var(--espaco-2);
}

.projetos-lista {
  display: grid;
  gap: calc(var(--espaco-4) * 1.5);
}

.projeto picture {
  display: block;
}

/* O fundo --surface ocupa o lugar enquanto a imagem carrega.
   object-position: top garante que o topo do site fotografado nunca seja cortado. */
.projeto-imagem {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  object-fit: cover;
  object-position: top;
}

/* Celular do projeto (noite-criativa): captura real do mesmo site, sobreposta ao canto da imagem grande.
   Tudo deriva da largura do celular (--cel-l), fração da largura do projeto (cqi).
   --cel-fora = quanto ele desce abaixo da imagem (fração --cel-descida da sua altura). Fica no canto inferior
   direito, cobrindo o botão flutuante de WhatsApp da captura, e o topo dele cai entre o último texto e esse botão
   (~78% da altura da imagem), sem tocar em texto. */
.projeto-quadro {
  --cel-l: max(52px, 17cqi);
  --cel-a: calc(var(--cel-l) * 19.5 / 9);
  --cel-fora: calc(var(--cel-a) * var(--cel-descida));
  --cel-descida: 0.62; /* topo do celular a ~78% da altura da imagem: abaixo do último texto e acima do botão de WhatsApp da captura */
  --cel-borda: calc(var(--cel-l) * 0.035);
  position: relative;
  margin-bottom: var(--cel-fora);
}

.projeto-celular {
  position: absolute;
  right: 1%; /* cobre por inteiro o botão de WhatsApp da captura (borda direita a ~2,5% e base a ~4%) */
  bottom: calc(var(--cel-fora) * -1);
  width: var(--cel-l);
  aspect-ratio: 9 / 19.5;
  padding: var(--cel-borda);
  border: 1px solid rgb(191 211 234 / 0.4);
  border-radius: min(var(--radius-lg), calc(var(--cel-l) * 0.2));
  background-color: var(--brand-dark);
  box-shadow: var(--sombra-celular);
}

/* Furo da câmera. */
.projeto-celular::before {
  content: "";
  position: absolute;
  top: calc(var(--cel-borda) * 1.6);
  left: 50%;
  z-index: 1;
  width: 24%;
  height: calc(var(--cel-l) * 0.03);
  translate: -50% 0;
  border-radius: var(--radius-pilula);
  background-color: var(--brand-dark);
}

.projeto-celular-tela {
  height: 100%;
  overflow: hidden;
  border-radius: calc(min(var(--radius-lg), var(--cel-l) * 0.2) - var(--cel-borda));
  background-color: var(--surface);
}

.projeto-celular img {
  display: block;
  width: 100%;
  height: auto;
}

.projeto h3 {
  margin-top: var(--espaco-2);
  margin-bottom: var(--espaco-1);
}

.projeto {
  position: relative;
  container-type: inline-size; /* cqi abaixo = largura do projeto */
}

/* Ao focar o link pelo teclado, a rolagem deixa ver a imagem e o anel inteiros:
   margem = altura da imagem (16:10 = 62.5% da largura) + respiro + anel. */
.projeto h3 a {
  scroll-margin-top: calc(62.5cqi + var(--espaco-2) + 5px);
}

/* Estica a área clicável do link para o card inteiro. */
.projeto h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* --passos-vao e --passos-linha também são lidos pela linha de progresso do movimento.css. */
.passos {
  --passos-vao: var(--espaco-4);
  --passos-linha: 1.625rem; /* altura de linha do número e do título de cada passo */
  display: grid;
  gap: var(--passos-vao);
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passos li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: var(--espaco-2);
  counter-increment: passo;
}

.passos li::before {
  content: counter(passo);
  grid-row: span 2;
  font-family: var(--font-titulo);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums; /* 1 a 4 com a mesma largura */
  font-weight: 800;
  color: var(--brand);
}

/* Número e título na mesma caixa de linha: as bases se alinham (e a linha de progresso
   do movimento.css mede a partir dela). */
.passos h3,
.passos li::before {
  line-height: var(--passos-linha);
}

.passos h3 {
  margin-bottom: var(--espaco-1);
}

.passos p {
  color: var(--ink-muted);
}

/* COMO FUNCIONA (noite-criativa): faixa escura no meio da página. Fundo --brand-dark; a luz do cursor vem do
   js/brilho.js (.com-luz). A linha de progresso dos passos usa --linha-passos (o movimento.css a lê). */
.como-funciona {
  --brilho: #8FB4DC;
  --texto-claro: #BFD3EA;
  --linha-passos: var(--brilho);
  background-color: var(--brand-dark);
  color: var(--on-dark-muted);
}

.como-funciona h2,
.como-funciona h3 {
  color: var(--on-dark);
}

.como-funciona .passos li::before {
  color: var(--texto-claro);
}

.como-funciona .passos p {
  color: var(--on-dark-muted);
}

.sobre .container {
  display: grid;
  gap: var(--espaco-4);
}

.miniatura {
  width: 140px;
  height: 160px;
  padding: var(--espaco-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface-raised);
}

.mini-area {
  position: relative;
  height: 100%;
}

.mini-janela {
  position: absolute;
  border-radius: var(--radius-sm);
}

.mini-esboco {
  left: 0;
  top: 0;
  width: 63%;
  height: 57%;
  border: 1px dashed var(--brand-light);
}

.mini-layout {
  left: 16.3%;
  top: 19.5%;
  width: 63%;
  height: 57%;
  display: flex;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--brand-light);
  background-color: var(--surface-raised);
}

.mini-layout .bolinha {
  width: 4px;
  height: 4px;
  background-color: var(--brand-light);
}

.mini-pronta {
  left: 33.3%;
  top: 41%;
  width: 66.7%;
  height: 58%;
  padding: 8px;
  border: 1px solid var(--brand);
  background-color: var(--surface-raised);
}

.mini-barra {
  width: 60%;
  height: 4px;
  border-radius: var(--radius-xs);
  background-color: var(--brand);
}

.mini-linha {
  width: 80%;
  height: 3px;
  margin-top: 6px;
  border-radius: var(--radius-xs);
  background-color: var(--border);
}

.contato,
.rodape {
  background-color: var(--brand-dark);
  color: var(--on-dark-muted);
}

.contato h2 {
  color: var(--on-dark);
}

.contato .container {
  display: grid;
}

.contato-acao {
  display: grid;
  margin-top: var(--espaco-4);
}

.contato-instagram {
  margin-top: var(--espaco-2);
}

/* Instagram: pílula de vidro discreta, com o ícone num círculo. Mais quieta que o botão branco do WhatsApp. */
.contato-instagram a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px var(--espaco-2) 5px 5px;
  border: 1px solid var(--on-dark-30);
  border-radius: var(--radius-pilula);
  background-color: var(--on-dark-06);
  color: var(--on-dark);
  font-weight: 600;
  text-decoration: none;
}

.instagram-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--on-dark-12);
}

.contato-instagram a:hover {
  border-color: var(--on-dark-60);
  background-color: var(--on-dark-12);
  color: var(--on-dark-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .contato-instagram a {
    transition: color 150ms, border-color 150ms, background-color 150ms;
  }
}

/* CONTATO (noite-criativa): ponto alto da página. Fundo com brilho da marca, painel de vidro e o
   montador da mensagem do WhatsApp. O montador só aparece quando o js/montador.js roda (ele tira o
   hidden e põe .com-montador na seção); sem o script sobram o texto e o botão, como antes. */
.contato {
  background-image:
    radial-gradient(50rem 32rem at 100% 0, var(--brand-light-40), transparent 70%),
    radial-gradient(28rem 22rem at 0 35%, var(--brand-light-16), transparent 70%);
}

.contato-texto p {
  font-size: 1.125rem;
}

/* Contato em palco (V8): botão maior, com anel e sombra de luz da marca. Recorta a faixa de luz (::before,
   z-index -1 numa pilha isolada: passa por cima do fundo e por baixo do texto) sem cortar o anel de foco,
   que é outline e fica por fora. A faixa só se move em movimento.css; parada, é invisível. */
.contato .botao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 68px;
  font-size: clamp(1.0625rem, 0.73rem + 1.67vw, 1.25rem); /* 17px em 320, 20px de 500 em diante: o texto cabe numa linha */
  box-shadow: 0 0 0 6px rgb(191 211 234 / 0.18), 0 18px 40px -12px rgb(143 180 220 / 0.6);
  transition: background-color 150ms, border-color 150ms, color 150ms, box-shadow 200ms,
    translate 200ms var(--curva-saida, ease), scale var(--duracao-toque, 0s) var(--curva-saida, ease);
}

.contato .botao:hover {
  box-shadow: 0 0 0 10px rgb(191 211 234 / 0.26), 0 22px 44px -12px rgb(143 180 220 / 0.7);
}

/* O anel de foco fica por fora do anel de luz (6px + 3px de folga). */
.contato .botao:focus-visible {
  outline-offset: 9px;
}

.contato .botao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(90deg, transparent 32%, rgb(143 180 220 / 0.65) 50%, transparent 68%);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}

/* Halo atrás do botão: gradiente radial (sem filter). Centro no meio do botão, que é o último item
   do bloco; --acao-pad é o respiro do painel de vidro. */
.contato-acao {
  --acao-pad: 0px;
  position: relative;
  isolation: isolate;
  anchor-name: --ficha-limite; /* o painel de medição (V7) abre à esquerda dele */
}

.contato-acao::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  bottom: calc(var(--acao-pad) + 34px - 7rem);
  height: 14rem;
  background-image: radial-gradient(closest-side, rgb(143 180 220 / 0.5), rgb(143 180 220 / 0.16) 55%, transparent);
  pointer-events: none;
}

.contato.com-montador .contato-acao {
  --acao-pad: var(--espaco-3);
  gap: var(--espaco-3);
  padding: var(--acao-pad);
  border: 1px solid var(--on-dark-18);
  border-radius: var(--radius-lg);
  background-color: var(--on-dark-06);
  box-shadow: var(--sombra-alta);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.contato.com-montador .botao {
  justify-self: stretch;
  gap: var(--espaco-1);
  padding-inline: min(var(--espaco-2), 3.4vw);
  line-height: 1.2;
  white-space: nowrap;
}

/* Seta em forma pura (sem emoji nem imagem): o cursor do "vai". */
.contato.com-montador .botao::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border: solid currentcolor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.montador {
  display: grid;
  gap: var(--espaco-3);
}

.montador[hidden] {
  display: none;
}

.montador fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.montador legend,
.montador-nome label {
  padding: 0;
  font-weight: 500;
  color: var(--on-dark);
}

.montador legend {
  margin-bottom: var(--espaco-2);
  font-family: var(--font-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1);
}

/* Rádio nativo esticado sobre a pílula inteira: o toque, as setas e o leitor de tela são os do navegador. */
.opcao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-inline: 12px var(--espaco-2);
  border: 1px solid var(--on-dark-60);
  border-radius: var(--radius-pilula);
  background-color: var(--on-dark-10);
  color: var(--on-dark);
  font-weight: 500;
  cursor: pointer;
}

/* Marcador redondo: anel vazio; marcada, anel e miolo cheios. Não muda a largura da pílula. */
.opcao::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid var(--on-dark-60);
  border-radius: 50%;
}

.opcao input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcao:hover {
  border-color: var(--on-dark);
  background-color: var(--on-dark-12);
}

.opcao:has(:checked) {
  border-color: var(--surface-raised);
  background-color: var(--surface-raised);
  box-shadow: var(--sombra-pilula);
  color: var(--brand-dark);
}

.opcao:has(:checked)::before {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: radial-gradient(circle, var(--surface-raised) 0 32%, transparent 36%);
}

/* O anel vai na pílula, não no rádio invisível. */
.contato .opcao input:focus-visible {
  outline: none;
}

.opcao:has(:focus-visible) {
  outline: 2px solid var(--on-dark);
  outline-offset: 3px;
}

.montador-nome label {
  display: block;
  margin-bottom: var(--espaco-1);
}

.montador-nome label span {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--on-dark-muted);
}

.montador-nome input {
  width: 100%;
  min-height: 48px;
  padding-inline: var(--espaco-2);
  border: 1px solid var(--on-dark-60);
  border-radius: var(--radius-md);
  background-color: var(--on-dark-12);
  color: var(--on-dark);
  font: inherit;
}

.montador-nome input:hover {
  border-color: var(--on-dark);
  background-color: var(--on-dark-18);
}

/* Troca de estado curta; sem movimento liberado, muda de uma vez. */
@media (prefers-reduced-motion: no-preference) {
  .opcao {
    transition: background-color 150ms, border-color 150ms, color 150ms, box-shadow 150ms;
  }

  .opcao::before,
  .montador-nome input {
    transition: border-color 150ms, background-color 150ms;
  }
}

.montador-previa p {
  margin-bottom: var(--espaco-1);
  font-size: 0.875rem;
  color: var(--on-dark-muted);
}

/* A prévia é um balão de mensagem enviada: mostra o que vai para o WhatsApp. */
.montador-previa output {
  display: block;
  width: fit-content;
  max-width: 100%;
  position: relative;
  margin-left: 0; /* o corpo do balão alinha com o rótulo; só o rabinho sai (7px) pela esquerda */
  padding: 12px var(--espaco-2);
  border-radius: 18px 18px 18px 4px;
  background-color: var(--surface-raised);
  box-shadow: var(--sombra-pilula);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  white-space: pre-line;
}

/* Rabinho do balao: triangulo colado no canto de baixo, so CSS. */
.montador-previa output::after {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 0;
  width: 10px;
  height: 14px;
  background-color: var(--surface-raised);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.rodape .container {
  display: grid;
  justify-items: start;
  gap: var(--espaco-2);
  padding-block: var(--espaco-3);
  border-top: 1px solid var(--on-dark-18);
}

.rodape p + p {
  margin-top: 0;
}

/* Painel "Como este site foi medido" (noite-criativa, V7). O botão nasce `hidden` e só o js/ficha.js o mostra;
   o painel só aparece aberto (`:popover-open`), então sem JS ou sem popover o rodapé é o de sempre.
   Vidro escuro: no celular vira folha na base; a partir de 64em fica preso ao botão. */
.rodape-info {
  display: grid;
  justify-items: start;
}

.ficha-botao {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: clamp(0.875rem, 0.83875rem + 0.16vw, 0.9375rem);
  color: var(--on-dark-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ficha-botao:hover {
  color: var(--on-dark);
}

.ficha {
  --ficha-vidro: rgb(15 35 64 / 0.82);
  --ficha-luz: #8FB4DC;
  --ficha-claro: #BFD3EA;
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  width: auto;
  max-width: none;
  max-height: min(88dvh, 40rem);
  margin: 0;
  padding: var(--espaco-3) var(--margem-lateral) calc(var(--espaco-3) + env(safe-area-inset-bottom, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-color: var(--brand-dark);
  color: var(--on-dark);
  box-shadow: 0 -30px 60px -20px rgb(4 12 26 / 0.6);
}

@supports selector(:popover-open) {
  .ficha:popover-open {
    display: block;
  }
}

@supports (backdrop-filter: blur(1px)) {
  .ficha {
    background-color: var(--ficha-vidro);
    backdrop-filter: blur(16px) saturate(140%);
  }
}

.ficha :focus-visible {
  outline-color: var(--on-dark);
}

.ficha-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
}

.ficha .ficha-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-titulo);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--on-dark);
}

.ficha-ponto {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ficha-luz);
}

.ficha-fechar {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  margin-right: -8px;
  padding: 0 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ficha-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ficha-fechar:hover {
  color: var(--on-dark);
}

.ficha .ficha-texto {
  margin: var(--espaco-1) 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ficha-claro);
}

.ficha-lista {
  display: grid;
  gap: var(--espaco-3) var(--espaco-2);
  margin: var(--espaco-3) 0 0;
}

.ficha-item {
  min-width: 0;
  margin: 0;
}

.ficha-item dt {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ficha-claro);
}

.ficha-item dd {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
}

.ficha-valor {
  display: block;
  white-space: nowrap;
  font-family: var(--font-titulo);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark);
}

.ficha-valor-texto {
  font-size: 1.5rem;
}

.ficha-un {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ficha-claro);
}

.ficha-nota {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ficha-claro);
}

/* Barra do LCP: 0 a 4 s; o trecho claro é a faixa "bom" do Google (até 2,5 s = 62,5%). */
.ficha-barra {
  position: relative;
  display: block;
  height: 10px;
  margin-top: 6px;
  border-radius: var(--radius-pilula);
  background-color: rgb(255 255 255 / 0.14);
  overflow: hidden;
}

.ficha-faixa {
  position: absolute;
  inset: 0 auto 0 0;
  width: 62.5%;
  background-color: rgb(143 180 220 / 0.4);
}

.ficha-preenche {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  border-radius: var(--radius-pilula);
  background-color: var(--on-dark);
}

.ficha-marco {
  position: absolute;
  inset: 0 auto 0 62.5%;
  width: 2px;
  margin-left: -1px;
  background-color: var(--ficha-luz);
}

.ficha-escala {
  position: relative;
  display: block;
  height: 1.1em;
  font-size: 0.75rem;
  line-height: 1.1;
  color: var(--ficha-claro);
}

.ficha-escala > span {
  position: absolute;
  top: 0;
}

.ficha-escala > span:first-child { left: 0; }
.ficha-escala > span:last-child { right: 0; }
.ficha-limite {
  left: 62.5%;
  transform: translateX(-50%);
}

@media (min-width: 22.5em) {
  .ficha-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ficha-item-largo {
    grid-column: 1 / -1;
  }
}

@media (min-width: 26em) {
  .ficha-valor {
    font-size: 2.5rem;
  }

  .ficha-valor-texto {
    font-size: 1.75rem;
  }
}

@media (min-width: 64em) {
  /* Abre para a esquerda, na coluna livre do Contato, com a borda direita 24px antes do painel do formulário
     (`.contato-acao`, âncora): nada é coberto (formulário, © e cidade do rodapé) e a base fica 24px acima
     da base da tela. Sem anchor positioning, o mesmo canto de baixo, à esquerda. */
  .ficha {
    inset: auto auto var(--espaco-3) var(--margem-lateral);
    width: 23rem;
    padding: var(--espaco-3);
    border-bottom: 1px solid rgb(255 255 255 / 0.18);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -20px rgb(4 12 26 / 0.6);
  }

  @supports (left: anchor(--ficha-limite left)) {
    .ficha {
      left: max(var(--margem-lateral), calc(anchor(--ficha-limite left, 30rem) - 23rem - var(--espaco-3)));
      right: calc(anchor(--ficha-limite left, 30rem) + var(--espaco-3));
      width: auto;
    }
  }
}

/* TABLET (48em = 768px com a fonte padrão): layout do celular, margens maiores, botões no tamanho do texto.
   Pontos de quebra em em e só com min-width: acompanham a fonte do navegador e não deixam vão. */
@media (min-width: 48em) {
  :root {
    --margem-lateral: 40px;
  }

  .topo-botoes {
    display: flex;
    flex-wrap: wrap;
  }

  .contato .botao {
    justify-self: start;
  }

  .projeto-quadro {
    --cel-l: 18cqi;
    --cel-descida: 0.68;
    margin-bottom: max(0px, calc(var(--cel-fora) - 5rem)); /* o nome e a descrição ficam à esquerda do celular */
  }
}

/* COMPUTADOR (64em = 1024px com a fonte padrão) */
@media (min-width: 64em) {
  :root {
    --margem-lateral: 80px;
    --espaco-secao: 96px;
  }

  .menu-botao,
  .js .cabecalho-whatsapp {
    display: none;
  }

  .cabecalho nav {
    display: block;
    flex-basis: auto;
    padding-bottom: 0;
  }

  .menu-lista {
    display: flex;
    align-items: center;
    gap: var(--espaco-4);
  }

  .menu-lista a {
    font-size: 0.9375rem;
  }

  .menu-lista .botao-menu {
    margin-top: 0;
  }

  .topo .container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "texto  ilustracao"
      "botoes ilustracao";
    align-items: center;
  }

  .topo-texto {
    grid-area: texto;
    align-self: end;
  }

  /* Tamanho pela largura e pela altura da tela: o conteúdo grudado do cinema tem de caber em 100svh. */
  .topo h1 {
    max-width: 560px;
    font-size: clamp(3.25rem, min(6.2vw, 11svh), 5.25rem); /* 84px no máximo: "Do esboço ao" cabe na coluna de 544px e o título fica em 2 linhas */
  }

  .ilustracao {
    grid-area: ilustracao;
  }

  .topo-botoes {
    grid-area: botoes;
    align-self: start;
  }

  .oferta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--espaco-4);
    align-items: baseline;
  }

  .projetos-lista {
    gap: calc(var(--espaco-4) * 2);
  }

  .projeto-imagem {
    aspect-ratio: 2 / 1;
  }

  .projeto-quadro {
    --cel-l: 15cqi;
  }

  .projeto h3 a {
    scroll-margin-top: calc(50cqi + var(--espaco-2) + 5px); /* imagem 2:1 */
  }

  .passos {
    --passos-vao: calc(var(--espaco-4) * 1.5);
  }

  /* Como funciona: título grande à esquerda, lista à direita (a ordem no HTML segue a de leitura). */
  .como-funciona .container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: calc(var(--espaco-4) * 2);
    align-items: center;
  }

  .como-funciona h2 {
    margin-bottom: 0;
  }

  .sobre .container {
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: calc(var(--espaco-4) * 2);
    align-items: center;
  }

  .miniatura {
    width: 300px;
    height: 360px;
    padding: var(--espaco-4);
  }

  .mini-layout {
    gap: 5px;
    padding: 12px;
  }

  .mini-layout .bolinha {
    width: 7px;
    height: 7px;
  }

  .mini-pronta {
    padding: 16px;
  }

  .mini-barra {
    height: 8px;
    border-radius: var(--radius-xs);
  }

  .mini-linha {
    height: 6px;
    margin-top: 12px;
    border-radius: var(--radius-xs);
  }

  .contato .container {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--espaco-4);
    align-items: end;
  }

  .contato-acao {
    margin-top: 0;
  }

  .contato-instagram {
    grid-column: 1 / -1;
  }

  /* Anéis decorativos atrás do texto: só desenho, sem função. */
  .contato {
    position: relative;
    overflow: clip;
  }

  .contato.com-montador::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24rem;
    width: 48rem;
    aspect-ratio: 1;
    translate: 0 -50%;
    border-radius: 50%;
    background-image: repeating-radial-gradient(circle, transparent 0 3rem, var(--on-dark-30) 3rem calc(3rem + 1px));
    /* Some antes de chegar na borda: nada corta seco. */
    -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%);
    mask-image: radial-gradient(circle, #000 25%, transparent 68%);
    pointer-events: none;
  }

  .contato .container {
    position: relative;
  }

  /* Com o montador: texto à esquerda, painel à direita (ocupa as duas linhas); texto e Instagram formam
     um bloco centrado na altura do painel (linhas iguais: o texto encosta na de cima, o Instagram na de baixo). */
  .contato.com-montador .container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    grid-template-rows: 1fr 1fr;
    column-gap: calc(var(--espaco-4) * 2);
    align-items: start;
  }

  .contato.com-montador .contato-acao {
    grid-area: 1 / 2 / 3 / 3;
    --acao-pad: calc(var(--espaco-1) * 5);
    padding: var(--acao-pad);
  }

  .contato.com-montador .contato-texto {
    grid-area: 1 / 1;
    align-self: end;
  }

  .contato.com-montador .contato-instagram {
    grid-area: 2 / 1;
    align-self: start;
  }

  .rodape .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/* WhatsApp flutuante (noite-criativa): canto inferior direito o tempo todo, só o ícone. Verde do WhatsApp escurecido
   (#128C7E) com ícone branco (4,1:1) e anel branco: sobre o bege o verde se destaca (3,7:1) e sobre o marinho o anel
   branco. O main.js põe .oculto enquanto o Contato está na tela; com o menu aberto some por CSS (a folha já tem o
   WhatsApp). Sem JS fica sempre visível. Fica abaixo do painel de medição (camada superior do popover). */
html {
  scroll-padding-bottom: 5rem; /* o foco do teclado não para atrás do botão */
}

.whats-flutuante {
  --whats: #128C7E;
  --whats-escuro: #0B6B5F;
  --flutuante-tam: 52px;
  --flutuante-margem: 12px;
  position: fixed;
  right: calc(var(--flutuante-margem) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--flutuante-margem) + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: grid;
  place-items: center;
  width: var(--flutuante-tam);
  height: var(--flutuante-tam);
  border: 2px solid var(--on-dark);
  border-radius: 50%;
  background-color: var(--whats);
  color: var(--on-dark);
  box-shadow: 0 8px 20px rgb(4 12 26 / 0.35), 0 0 0 4px rgb(18 140 126 / 0.22);
  text-decoration: none;
}

.whats-flutuante:hover {
  background-color: var(--whats-escuro);
}

.whats-flutuante:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 7px; /* por fora do halo */
}

.whats-flutuante svg {
  display: block;
}

.js .whats-flutuante.oculto,
.js:has(.menu-botao[aria-expanded="true"]) .whats-flutuante {
  visibility: hidden;
  opacity: 0;
  translate: 0 12px;
}

/* Abaixo do computador o texto de coluna única não passa por baixo do botão: reserva a pegada dele (52px + 12px +
   8px de folga) do lado direito, só onde a margem lateral não basta (52px em 320, 32px no tablet). */
@media not all and (min-width: 64em) {
  :root {
    --reserva-flutuante: max(0px, calc(72px - var(--margem-lateral)));
  }

  .servicos h2,
  .projetos h2,
  .como-funciona h2,
  .oferta > *,
  .tambem-faco,
  .passos li,
  .projeto > h3,
  .projeto > p,
  .sobre-texto,
  .faixa-linha {
    padding-inline-end: var(--reserva-flutuante);
  }
}

/* Computador: 56px a 16px da borda. O celular do projeto termina a 12px do fim do .container, que fica a 80px da
   borda até 1280px: sobram ~20px entre os dois em qualquer largura. */
@media (min-width: 64em) {
  .whats-flutuante {
    --flutuante-tam: 56px;
    --flutuante-margem: 16px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .whats-flutuante {
    transition: opacity 200ms ease-out, translate 200ms ease-out, background-color 150ms, scale 150ms ease-out, visibility 0s;
  }

  .whats-flutuante:active {
    scale: 0.94;
  }

  /* visibility espera o fim da saída para o botão não ficar focável escondido, e volta na hora ao entrar */
  .js .whats-flutuante.oculto,
  .js:has(.menu-botao[aria-expanded="true"]) .whats-flutuante {
    transition: opacity 200ms ease-out, translate 200ms ease-out, visibility 0s linear 200ms;
  }

  /* Pulso leve: um anel que cresce e some, 3 vezes depois de a página carregar. Só transform e opacity. */
  .whats-flutuante::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid #25D366;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: whats-pulso 2.2s ease-out 1.5s 3;
  }

  @keyframes whats-pulso {
    from { scale: 1; opacity: 0.8; }
    to   { scale: 1.5; opacity: 0; }
  }
}