/* ===== inicio-contato-blog.css ===== */
/* Início, dobras 12 e 13: CONTATO (09) e BLOG (10). Clone do "Book a call" e do "Articles" do Mira.
   Contato: referencias-figma.md, receitas 2 (✱ nítido de um lado, dissolvido no grão do outro) e 4 (brasa subindo de baixo).
   Grão e ✱ desfocado são as 2 únicas camadas com mix-blend-mode; o grão fica abaixo da letra. */

/* =================== 12. CONTATO =================== */
.inicio-contato { padding: 6px; scroll-margin-top: 0; }
.inicio-contato-cartao { position: relative; isolation: isolate; contain: paint; overflow: clip; border-radius: 12px;
  background: var(--tinta); color: var(--creme); }

/* --- cena: foto desfocada, véu, brasa e ✱ --- */
.inicio-contato-cena { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.inicio-contato-foto { position: absolute; inset: 0; transform-origin: 48% 52%; }
.inicio-contato-foto picture { position: absolute; inset: 0; }
/* o rosto dele bem perto, como o close do Mira: olhos e cabelo enchem o cartão (a parede clara da foto fica de fora) */
.inicio-contato-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 58%;
  transform: scale(var(--perto, 3.6)); transform-origin: var(--mira, 51.7% 59.6%); filter: blur(4px) saturate(1.25) contrast(1.12) brightness(.92); }
.inicio-contato-foto-cinza { opacity: 0; }
.inicio-contato-foto-cinza img { filter: grayscale(1) blur(4px) contrast(1.12) brightness(.92); }
/* uma cor só, em luz e sombra (Ref 080 / capa do Behance): vinheta em tinta, brasa subindo de baixo, a luz do ✱ no canto */
.inicio-contato-veu { position: absolute; inset: 0;
  background:
    radial-gradient(64% 46% at 50% 112%, rgb(196 52 26 / .55) 0%, rgb(196 52 26 / 0) 72%),            /* brasa: a luz sobe de baixo */
    radial-gradient(40% 44% at 4% 100%, rgb(255 90 54 / .3) 0%, rgb(255 90 54 / 0) 70%),             /* luz do ✱, embaixo à esquerda */
    radial-gradient(90% 72% at 52% 48%, rgb(21 20 19 / .5) 0%, rgb(21 20 19 / .66) 55%, rgb(21 20 19 / .86) 100%),   /* vinheta */
    linear-gradient(180deg, rgb(21 20 19 / .3) 0%, rgb(21 20 19 / 0) 28%, rgb(21 20 19 / 0) 72%, rgb(21 20 19 / .25) 100%),
    linear-gradient(rgb(110 26 12 / .16), rgb(110 26 12 / .16)); }   /* ferrugem bem leve: tira o cinza da parede e deixa a sombra no matiz do laranja */

/* o ✱ (receita 2): cortado pela borda, NÍTIDO no miolo e no braço de baixo (o lado de dentro do cartão)
   e virando grão nos braços que apontam pro formulário; o nítido fica longe da letra */
.inicio-contato-ast { position: absolute; aspect-ratio: 1400 / 1375; width: min(50vw, 780px);
  left: calc(min(50vw, 780px) * -.4); bottom: calc(min(50vw, 780px) * -.18); rotate: -8deg; }
.inicio-contato-ast img { position: absolute; display: block; max-width: none; }
.inicio-contato-ast-mole { width: 162.5%; height: 162.5%; left: -31.25%; top: -31.25%; mix-blend-mode: screen; opacity: .5; }
.inicio-contato-ast-nitido { inset: 0; width: 100%; height: 100%; opacity: .94;
  /* núcleo nítido até --n1/--n2; faixa de spray (ruído binário) até --b2; o ruído em pontos de 1,5 px, fino como o da capa */
  -webkit-mask-image: linear-gradient(var(--lado, 58deg), #000 var(--n1, 47%), transparent var(--n2, 57%)), linear-gradient(var(--lado, 58deg), #000 var(--b1, 38%), transparent var(--b2, 86%)), url(../marca/grao-mascara.png);
          mask-image: linear-gradient(var(--lado, 58deg), #000 var(--n1, 47%), transparent var(--n2, 57%)), linear-gradient(var(--lado, 58deg), #000 var(--b1, 38%), transparent var(--b2, 86%)), url(../marca/grao-mascara.png);
  -webkit-mask-size: 100% 100%, 100% 100%, var(--ruido, 96px) var(--ruido, 96px);
          mask-size: 100% 100%, 100% 100%, var(--ruido, 96px) var(--ruido, 96px);
  -webkit-mask-composite: source-over, source-in;
          mask-composite: add, intersect; }

/* grão do cartão inteiro: abaixo do texto, nunca na letra */
.inicio-contato-grao { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url(../marca/grao-256.png) 0 0 / 256px 256px; mix-blend-mode: screen; opacity: .07; }

/* --- conteúdo --- */
.inicio-contato-dentro { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.4vw, 20px); padding: 28px calc(var(--g) - 6px) clamp(80px, 8.4vw, 120px); }
.inicio-contato-apagado { color: rgb(246 241 232 / .62); }   /* texto pequeno: creme a 62% passa de 4,5:1 no fundo do cartão */

.inicio-contato-topo { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: inherit; align-items: start; }
.inicio-contato-rotulo { grid-column: 1 / 4; padding-top: 2px; }
/* o rótulo tem espaço de verdade entre o número e a palavra (leitor de tela); a margem do .num some pra não dobrar o vão */
.inicio-contato-rotulo .num, .inicio-blog-titulos .t-rotulo .num { margin-right: .05em; }
.inicio-contato-atende { grid-column: 4 / 10; padding-top: 2px; }
.inicio-contato-autor { grid-column: 10 / -1; display: flex; align-items: center; gap: 10px; }
.inicio-contato-autor img { width: 40px; height: 40px; object-fit: cover; object-position: 50% 28%; border-radius: 5px; }
.inicio-contato-autor p { margin: 0; display: grid; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }

.inicio-contato-cabeca { grid-column: 4 / -1; grid-row: 2; margin-top: clamp(90px, 10.5vw, 150px); }
.inicio-contato-titulo { margin: 0; max-width: 10.6em;   /* duas linhas, como os 700 px do Mira */
  font-size: clamp(40px, 4.75vw, 84px); font-weight: 800;
  letter-spacing: -0.045em; line-height: .94; text-wrap: balance; }
.inicio-contato-sub { margin: 28px 0 0; max-width: 27em; font-size: clamp(16px, 1.25vw, 19px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.16; text-wrap: balance; }
.inicio-contato-sub-1 { display: block; text-indent: 3.4em; color: var(--creme-50); }
.inicio-contato-sub-1 > .linha:first-child > span { margin-left: 3.4em; }   /* o movimento.js zera o recuo das linhas; o recuo volta aqui */
.inicio-contato-sub-2 { display: block; }

/* --- formulário em frases --- */
.inicio-contato-form { position: relative; grid-column: 4 / 10; grid-row: 3; margin-top: clamp(56px, 5.6vw, 80px); display: grid; gap: 15px; max-width: 760px; }
.inicio-contato-campos { display: grid; gap: 15px; transform-origin: 50% 45%; transition: opacity .6s var(--e-mira), transform .6s var(--e-mira); }
/* estados do Mira (1.13): enviando e enviado = campos apagados e menores; o desfoque do Mira vira só opacidade */
.inicio-contato-form.enviando .inicio-contato-campos, .inicio-contato-form.enviado .inicio-contato-campos { opacity: .35; transform: scale(.95); }
.inicio-contato-form.enviado .inicio-contato-campos { pointer-events: none; }
.inicio-contato-linha, .inicio-contato-campo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.inicio-contato-dupla .inicio-contato-campo { flex: 1 1 0; }
.inicio-contato-coluna { flex-direction: column; align-items: stretch; }
.inicio-contato-diz { flex: none; white-space: nowrap; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; }
.inicio-contato-caixa { flex: 1 1 auto; display: block; width: 100%; min-width: 0; height: 49px; margin: 0; padding: 0 15px;
  border: 1px solid transparent; border-radius: 8px; background: rgb(21 20 19 / .72); color: var(--creme);
  font: 500 16px/1.2 var(--sans); letter-spacing: -0.03em; -webkit-appearance: none; appearance: none;
  transition: border-color .3s var(--e-padrao), background-color .3s var(--e-padrao); }
textarea.inicio-contato-caixa { height: auto; min-height: 100px; padding: 15px; line-height: 1.4; resize: vertical; }
.inicio-contato-caixa::placeholder { color: var(--creme-50); opacity: 1; }
.inicio-contato-caixa:hover { border-color: var(--creme-14); }
.inicio-contato-caixa:focus { outline: none; border-color: var(--laranja); background-color: rgb(21 20 19 / .86); }
.inicio-contato-caixa:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.inicio-contato-escolha { position: relative; flex: 1 1 auto; display: block; min-width: 0; }
.inicio-contato-escolha::after { content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-right: 1.6px solid var(--creme-70); border-bottom: 1.6px solid var(--creme-70); transform: rotate(45deg); pointer-events: none; }
.inicio-contato-escolha select { padding-right: 44px; cursor: pointer; }
.inicio-contato-escolha select:invalid { color: var(--creme-50); }
.inicio-contato-escolha option { background: var(--tinta); color: var(--creme); }
.inicio-contato-mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.inicio-contato-envio { display: flex; align-items: center; gap: 20px; margin-top: 15px; }
.inicio-contato-aviso { flex: 1 1 0; margin: 0; max-width: 300px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--creme-70); text-wrap: balance; }
.inicio-contato-aviso a { color: var(--creme); font-weight: 600; text-decoration: underline; text-decoration-color: var(--creme-50); text-underline-offset: 2px; }
.inicio-contato-aviso a:hover { text-decoration-color: currentColor; }
.inicio-contato-botao { flex: 1 1 0; display: grid; place-items: center; height: 46px; padding: 0 18px; border-radius: 8px;
  background: var(--creme); color: var(--tinta); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em;
  transition: opacity .56s var(--e-mira), border-radius .56s var(--e-mira); }
.inicio-contato-botao:hover, .inicio-contato-botao:focus-visible { border-radius: 16px; }
.inicio-contato-form.incompleto .inicio-contato-botao { opacity: .75; cursor: not-allowed; }   /* o "Incomplete" do Mira */
.inicio-contato-form.enviando .inicio-contato-botao { cursor: progress; }
/* rolo do texto do botão (8.3): .56 s --e-mira */
.inicio-contato-botao-rolo { display: grid; overflow: clip; height: 1.15em; line-height: 1.15; }
.inicio-contato-botao-rolo > span { grid-area: 1 / 1; transition: transform .56s var(--e-mira), opacity .56s var(--e-mira); }
.inicio-contato-botao-rolo > span + span { transform: translateY(100%); opacity: 0; }
.inicio-contato-botao:is(:hover, :focus-visible) .inicio-contato-botao-rolo > span:first-child { transform: translateY(-100%); opacity: 0; }
.inicio-contato-botao:is(:hover, :focus-visible) .inicio-contato-botao-rolo > span + span { transform: none; opacity: 1; }
.inicio-contato-status { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.inicio-contato-status:empty { display: none; }
.inicio-contato-status.erro { color: var(--laranja); }
/* sucesso: o popup do Mira, um cartão creme por cima dos campos apagados */
.inicio-contato-status.ok { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; width: min(380px, calc(100% - 24px));
  padding: 22px 24px 24px; border-radius: 12px; background: var(--creme); color: var(--tinta); box-shadow: 0 24px 60px rgb(21 20 19 / .35);
  font-size: 18px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.inicio-contato-status.ok::before { content: ""; display: block; width: 26px; height: 26px; margin-bottom: 14px;
  background: url(../marca/ast-laranja-200.webp) center / contain no-repeat; }

/* --- e-mail direto (o "telefone grande" do Mira) --- */
.inicio-contato-direto { grid-column: 10 / -1; grid-row: 3; align-self: start; margin-top: clamp(56px, 5.6vw, 80px); display: grid; gap: 10px; justify-items: start; }
.inicio-contato-email { font-size: clamp(18px, 1.5vw, 25px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.1; white-space: nowrap; }   /* hover: rolo do movimento.js */
.inicio-contato-logo { margin-top: 26px; height: 18px; width: auto; }

/* --- 3 passos numerados --- */
.inicio-contato-passos { grid-column: 4 / -1; grid-row: 4; margin: clamp(90px, 9.4vw, 130px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px); }
.inicio-contato-passos li { display: grid; align-content: start; justify-items: start; }
.inicio-contato-num { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 3px;
  background: var(--creme); color: var(--tinta); font-size: 12px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 18px; }
.inicio-contato-passos h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.inicio-contato-passos p { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.38; color: var(--creme-70); text-wrap: pretty; }

/* --- movimento (Mira: a foto entra cinza, girada e ampliada, e ganha cor; o título sobe letra por letra) --- */
@media (prefers-reduced-motion: no-preference) {
  /* fundo (1.13): grayscale(1) → (0) e scale(1.3) rotate(2deg) → none, mola M3 (1367 ms); o cinza é uma camada que some */
  .inicio-contato-foto { transition: transform 1367ms var(--m3); }
  .inicio-contato-foto-cinza { transition: opacity 1367ms var(--m3); }
  .js .inicio-contato:not(.ligado) .inicio-contato-foto { transform: scale(1.3) rotate(2deg); }
  .js .inicio-contato:not(.ligado) .inicio-contato-foto-cinza { opacity: 1; }
  /* o brilho do ✱ respira (só opacidade) */
  .inicio-contato-ast-mole { animation: inicio-contato-respira 7s var(--e-simetrica) infinite alternate; }
  @keyframes inicio-contato-respira { from { opacity: .38; } to { opacity: .62; } }
  /* passos: y 20, .85 s --e-texto, atrasos .1 / .2 / .3 */
  .js .inicio-contato-passos li.revela { transition-duration: .85s; transition-timing-function: var(--e-texto); }
  /* popup de sucesso: opacity 0, scale .9, y -25 → normal em .6 s --e-linha */
  .inicio-contato-status.ok { animation: inicio-contato-sucesso .6s var(--e-linha) both; }
  @keyframes inicio-contato-sucesso { from { opacity: 0; transform: translateY(-25px) scale(.9); } }
}

/* --- entre 900 e 1199: o formulário ganha a largura do filler (como o tablet do Mira) --- */
@media (min-width: 900px) and (max-width: 1199px) {
  .inicio-contato-cabeca, .inicio-contato-passos { grid-column: 1 / -1; }
  .inicio-contato-form { grid-column: 1 / 9; }
  .inicio-contato-direto { grid-column: 9 / -1; }
  .inicio-contato-atende { grid-column: 4 / 9; }
  .inicio-contato-autor { grid-column: 9 / -1; }
}

/* --- celular (390): tudo numa coluna, como no Mira --- */
@media (max-width: 899px) {
  .inicio-contato { scroll-margin-top: 58px; }   /* a barra fixa do celular ocupa 58 px */
  .inicio-contato-cartao { border-radius: 10px; }
  .inicio-contato-dentro { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 60px; }
  .inicio-contato-topo { grid-template-columns: auto minmax(0, 1fr); row-gap: 26px; }
  .inicio-contato-rotulo { grid-column: 1; }
  .inicio-contato-atende { grid-column: 2; text-align: right; }
  .inicio-contato-autor { grid-column: 1 / -1; }
  .inicio-contato-cabeca, .inicio-contato-form, .inicio-contato-direto, .inicio-contato-passos { grid-column: 1; }
  .inicio-contato-cabeca { margin-top: 56px; }
  .inicio-contato-titulo { font-size: clamp(36px, 10.6vw, 56px); }
  .inicio-contato-sub { margin-top: 22px; font-size: 16px; }
  .inicio-contato-form { margin-top: 40px; }
  .inicio-contato-dupla { flex-direction: column; align-items: stretch; gap: 15px; }
  .inicio-contato-diz { font-size: 13px; }
  .inicio-contato-linha { flex-wrap: wrap; row-gap: 10px; }
  .inicio-contato-linha:not(.inicio-contato-coluna) > .inicio-contato-caixa { flex: 1 1 228px; }
  .inicio-contato-escolha { flex: 1 1 150px; }
  .inicio-contato-dupla .inicio-contato-caixa { flex: 1 1 160px; }
  .inicio-contato-envio { flex-direction: column; align-items: stretch; gap: 16px; }
  .inicio-contato-aviso { flex: none; max-width: 260px; }
  .inicio-contato-botao { flex: none; height: 48px; }
  .inicio-contato-direto { grid-row: 4; margin-top: 52px; }
  .inicio-contato-passos { grid-row: 5; margin-top: 56px; grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .inicio-contato-num { margin-bottom: 14px; }
  .inicio-contato-passos p { max-width: 230px; }   /* a coluna de texto do Mira no celular; deixa o canto do ✱ livre */
  .inicio-contato-sub-1 { text-indent: 2.6em; }
  .inicio-contato-sub-1 > .linha:first-child > span { margin-left: 2.6em; }
  /* o ✱ sai de trás do texto: vai pro canto de baixo à DIREITA (os passos são curtos e deixam esse canto livre),
     cortado pela borda, nítido do lado de fora e virando grão na direção do texto */
  .inicio-contato-ast { width: 64vw; left: auto; right: -27.5vw; bottom: -14vw; --lado: 302deg; --n1: 58%; --n2: 66%; --b1: 50%; --b2: 92%; --ruido: 64px; }
  .inicio-contato-veu { background:
    radial-gradient(90% 34% at 50% 108%, rgb(196 52 26 / .5) 0%, rgb(196 52 26 / 0) 72%),
    radial-gradient(70% 30% at 100% 100%, rgb(255 90 54 / .3) 0%, rgb(255 90 54 / 0) 70%),
    radial-gradient(120% 60% at 50% 45%, rgb(21 20 19 / .5) 0%, rgb(21 20 19 / .64) 55%, rgb(21 20 19 / .82) 100%),
    linear-gradient(180deg, rgb(21 20 19 / .25) 0%, rgb(21 20 19 / 0) 25%, rgb(21 20 19 / 0) 75%, rgb(21 20 19 / .2) 100%); }
  .inicio-contato-foto img { --perto: 2; --mira: 49% 72%; object-position: 48% 50%; }   /* o cartão é alto e estreito: cabelo, óculos e olhos enchem a faixa */
}

/* =================== 13. BLOG =================== */
.inicio-blog-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px); align-items: end; }
.inicio-blog-titulos { grid-column: 4 / 10; display: grid; gap: 20px; justify-items: start; }
.inicio-blog-titulo { margin: 0; }
.inicio-blog-todos { grid-column: 10 / -1; justify-self: end; margin-bottom: .4em; }
.inicio-blog-grade { list-style: none; margin: clamp(56px, 5.6vw, 80px) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(12px, 1.4vw, 20px); align-items: start; }
.inicio-blog-grade:not(:has(> li)) { display: none; }   /* sem post nenhum (nem reserva nem CMS): fica só o título e o "Ver todos" */
.inicio-blog-post { display: grid; gap: 10px; }
.inicio-blog-cat { min-height: 1.2em; color: var(--tinta-60); }   /* 12 px: a tinta a 40% dá 2,5:1 no creme; a 60% passa (4,6:1) */
.inicio-blog-capa { position: relative; isolation: isolate; overflow: clip; border-radius: 10px; aspect-ratio: var(--forma, 3 / 4); background: var(--creme-2); }
/* o hover do Mira: a capa encolhe pra 75% e mostra ela mesma desfocada por trás */
.inicio-blog-capa-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%);
  filter: blur(5px); transition: transform .56s var(--e-mira); }   /* o desfoque é fixo; só a escala anima */
.inicio-blog-capa-frente { position: absolute; inset: 0; z-index: 1; overflow: clip; border-radius: 10px; transition: transform .56s var(--e-mira); }
.inicio-blog-post:is(:hover, :focus-visible) .inicio-blog-capa-fundo { transform: scale(1.2); }
.inicio-blog-capa-frente img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); }
.inicio-blog-post:hover .inicio-blog-capa-frente, .inicio-blog-post:focus-visible .inicio-blog-capa-frente { transform: scale(.75); }
.inicio-blog-nome { margin: 5px 0 0; font-size: clamp(17px, 1.5vw, 22px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.inicio-blog-tempo { color: var(--tinta-60); margin-top: -4px; }
/* alturas diferentes nas 4 colunas, como no Mira (1,43 · 3:4 · 1,78 · 3:4); o recorte é no centro, e cada post de reserva
   pode mirar a foto da própria capa com --foco no style do item (no HTML) */
.inicio-blog-forma-1 { --forma: 1.43; }
.inicio-blog-forma-2 { --forma: 3 / 4; }
.inicio-blog-forma-3 { --forma: 1.78; }
.inicio-blog-forma-4 { --forma: 3 / 4; }
@media (prefers-reduced-motion: no-preference) {
  .js .inicio-blog-grade li.revela { transition-duration: .85s; transition-timing-function: var(--e-texto); }   /* y 40, .85 s, .3 s + i × .1 s */
}
@media (max-width: 1099px) {
  .inicio-blog-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .inicio-blog-titulos { grid-column: 1 / 9; gap: 14px; }
  .inicio-blog-todos { grid-column: 9 / -1; margin-bottom: .2em; }
  .inicio-blog-grade { margin-top: 40px; gap: 32px 12px; }
  .inicio-blog-nome { font-size: 16px; }
}

/* ===== inicio-depoimentos.css ===== */
/* Depoimentos (07), 06/10: bloco tinta de ponta a ponta com grão de filme e o ✱ laranja desfocado como luz;
   a fala do cliente grande, com uma palavra em serifa laranja, e a imagem do projeto ao lado. */
.dep { padding: clamp(40px, 5vw, 80px) 6px; }
.dep-bloco { position: relative; isolation: isolate; overflow: clip; border-radius: 12px; background: var(--tinta); color: var(--creme);
  padding: clamp(28px, 4vw, 64px) max(16px, calc(var(--g) - 6px)) clamp(36px, 4.5vw, 72px); }
/* luz: o ✱ desfocado, grande, saindo do canto de baixo à esquerda, mais um halo quente atrás da fala */
.dep-bloco::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 12% 100%, rgba(255, 90, 54, .26), transparent 70%), radial-gradient(40% 40% at 88% 8%, rgba(246, 241, 232, .05), transparent 70%); }
.dep-luz { position: absolute; z-index: -1; left: -14%; bottom: -46%; width: min(70vw, 1100px); height: auto; opacity: .9; pointer-events: none;
  transform: rotate(-12deg); filter: saturate(1.1); }
.dep-grao { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../marca/grao-256.png") 0 0 / 176px 176px; mix-blend-mode: overlay; opacity: .42; }
.dep-dentro { position: relative; z-index: 1; }
.dep-luz, .dep-bloco::before { z-index: -1; }

.dep-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g, 20px); align-items: end;
  padding-bottom: clamp(28px, 3.4vw, 52px); border-bottom: 1px solid rgba(246, 241, 232, .14); }
.dep-rotulo { grid-column: 1 / span 3; align-self: start; padding-top: .6em; color: var(--creme-50, rgba(246, 241, 232, .5)); }
.dep-rotulo .num { color: var(--laranja); }
.dep-titulo { grid-column: 4 / span 6; margin: 0; font-size: clamp(40px, 5.2vw, 88px); font-weight: 800; letter-spacing: -0.055em; line-height: .92; }
.dep-titulo em.serifa { color: var(--laranja); }
.dep-apoio { grid-column: 10 / -1; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: rgba(246, 241, 232, .6); }

.dep-carrossel { margin-top: clamp(36px, 4.6vw, 72px); }
.dep-palco { display: grid; }
.dep-slide { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g, 20px); align-items: end;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--e-mira), visibility 0s .6s; }
.dep-slide.ativo { opacity: 1; visibility: visible; transition: opacity .6s var(--e-mira); }

.dep-fala { grid-column: 1 / span 8; position: relative; display: grid; gap: clamp(18px, 2vw, 28px); align-content: start; }
.dep-aspas { display: block; height: .36em; margin-bottom: -.2em; font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(120px, 13vw, 220px);
  line-height: .8; color: var(--laranja); }
.dep-destaque { margin: 0; max-width: 15em; font-size: clamp(34px, 4.4vw, 76px); font-weight: 800; letter-spacing: -0.05em; line-height: .98; text-wrap: balance; }
.dep-destaque em.serifa { color: var(--laranja); }
.dep-destaque:empty { display: none; }
.dep-texto { margin: 0; max-width: 40em; font-size: clamp(16px, 1.2vw, 19px); font-weight: 500; line-height: 1.55; color: rgba(246, 241, 232, .66); }
.dep-texto p { margin: 0; }
.dep-assina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 6px;
  padding-top: 22px; border-top: 1px solid rgba(246, 241, 232, .14); max-width: 46em; }
.dep-quem { display: grid; gap: 3px; margin: 0; }
.dep-nome { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.dep-cargo { font-size: 13px; color: rgba(246, 241, 232, .55); }
.dep-projeto[hidden] { display: none; }

.dep-foto { grid-column: 9 / -1; margin: 0; align-self: stretch; display: grid; grid-template-rows: 1fr auto; gap: 10px; }
.dep-foto:not(:has(img)) { display: none; }
.dep-foto picture, .dep-foto > img { display: block; min-height: 0; border-radius: 10px; overflow: clip; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.dep-foto img { width: 100%; height: 100%; max-height: 640px; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--e-mira); }
.dep-slide.ativo .dep-foto img { transform: none; }
.dep-foto figcaption { color: rgba(246, 241, 232, .5); }

.dep-pe { display: flex; justify-content: space-between; align-items: center; margin-top: clamp(28px, 3vw, 44px); }
.dep-pe[hidden] { display: none; }
.dep-contador { margin: 0; font-size: 13px; font-weight: 700; color: rgba(246, 241, 232, .5); font-variant-numeric: tabular-nums; }
.dep-atual { color: var(--creme); }
.dep-setas { display: flex; gap: 6px; }
.dep-seta { width: 38px; height: 38px; border-radius: 4px; background: var(--laranja); color: var(--tinta); display: grid; place-items: center; transition: transform .36s var(--e-mira), border-radius .36s var(--e-mira); }
.dep-seta:hover, .dep-seta:focus-visible { transform: scale(.95); border-radius: 10px; }

@media (max-width: 899px) {
  .dep-rotulo, .dep-titulo, .dep-apoio { grid-column: 1 / -1; }
  .dep-titulo { margin-top: 14px; }
  .dep-apoio { margin-top: 16px; }
  .dep-fala, .dep-foto { grid-column: 1 / -1; }
  .dep-foto { margin-top: 32px; }
  .dep-foto img { max-height: 420px; }
  .dep-luz { width: 150vw; left: -50%; bottom: -20%; }
  .dep-aspas { font-size: 130px; }
}
@media (prefers-reduced-motion: reduce) { .dep-foto img { transform: none; transition: none; } }

/* troca automática (7 s): uma linha fina que enche até o próximo depoimento */
.dep-pe { gap: 20px; }
.dep-progresso { order: 2; flex: 1; height: 2px; margin: 0 24px; background: rgba(246, 241, 232, .14); border-radius: 2px; overflow: hidden; }
.dep-progresso i { display: block; height: 100%; width: 100%; background: var(--laranja); transform: scaleX(0); transform-origin: 0 50%; }
.dep.rodando .dep-progresso i { animation: dep-encher 7s linear infinite; }
.dep-contador { order: 1; } .dep-setas { order: 3; }
@keyframes dep-encher { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .dep-progresso { display: none; } }

/* ===== inicio-equipe.css ===== */
/* ---------- 7. Equipe (05): clone da dobra "Meet the team" do Mira ----------
   Bloco laranja de raio 12 a 6 px das bordas; por dentro, a mesma grade de 12 colunas das outras dobras.
   Medidas do Mira em 1440: logo na coluna 4, selo no fim; rótulo na 1 e frase justificada da 4 ao fim, com recuo de ~22%;
   cartões 3 colunas cada, em escada (7-9 e 10-12 em cima, 1-3 e 4-6 embaixo); "trabalho de casa" na 1-3 e foto 10:7 na 7-12.
   Fundo (referencias-figma.md, receitas 1 a 3): laranja com luz e sombra do mesmo matiz, poças de sombra onde não tem texto,
   o ✱ aceso dentro delas e o grão em overlay entre o fundo e o conteúdo (grão nunca na letra nem na foto).
   Planos: fundo (0) → cena do ✱ (0, depois no DOM) → grão (1) → texto e cartões (2). */
.equipe { padding-inline: 6px; }
.equipe-bloco { --equipe-pad: max(16px, calc(var(--g) - 6px)); position: relative; isolation: isolate; contain: paint; overflow: clip;
  border-radius: 12px; color: var(--tinta); background: #EF4F2B;
  padding: clamp(18px, 2.4vw, 34px) var(--equipe-pad); }

/* luz e sombra do laranja (tons da capa do Behance, só aqui dentro); o texto fica sempre na parte laranja */
.equipe-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 22% at 92% 96%, rgb(255 96 58 / .95), rgb(255 96 58 / 0) 100%),       /* luz, embaixo à direita (atrás do escritório) */
    radial-gradient(38% 18% at 0% 100%, rgb(150 38 18 / .55), rgb(150 38 18 / 0) 100%),         /* sombra no canto de baixo à esquerda */
    radial-gradient(30% 14% at 100% 0%, rgb(170 44 21 / .3), rgb(170 44 21 / 0) 100%),          /* sombra no canto de cima à direita (fraca: o selo de 12 px mora nela e precisa de 4,5:1) */
    linear-gradient(180deg, #F2522D 0%, #EF4F2B 45%, #EC4C2A 100%); }

/* grão do bloco inteiro (receita 1): entre o fundo e o conteúdo */
.equipe-bloco::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../marca/grao-256.png") 0 0 / 176px 176px; mix-blend-mode: overlay; opacity: .3; }
.equipe-topo, .equipe-cabeca, .equipe-casa, .equipe-contagem, .equipe-cartoes { position: relative; z-index: 2; }
.equipe-time { position: relative; }      /* sem z-index de propósito: a cena dele fica abaixo do grão */

/* ---------- topo do bloco: logo + selo ---------- */
.equipe-topo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px); align-items: center; }
.equipe-logo { grid-column: 4 / span 3; height: clamp(18px, 1.6vw, 24px); width: auto; }
.equipe-selo { grid-column: 10 / -1; justify-self: end; display: inline-flex; align-items: stretch; height: 30px; margin: 0;
  border: 1px solid rgb(21 20 19 / .55); border-radius: 3px; white-space: nowrap; }
.equipe-selo-globo { display: grid; place-items: center; width: 30px; border-right: 1px solid rgb(21 20 19 / .55); }
.equipe-selo-globo svg { width: 14px; height: 14px; }
.equipe-selo-texto { display: flex; align-items: center; padding: 1px 10px 0; }

/* ---------- rótulo + frase justificada ---------- */
.equipe-cabeca { margin-top: clamp(64px, 9.4vw, 140px); align-items: start; }
.equipe-rotulo { grid-column: 1 / span 3; padding-top: .55em; }
.equipe-num { font-weight: 600; }
.equipe-frase { grid-column: 4 / -1; text-align: justify; text-indent: 22%; text-wrap: wrap; hyphens: manual; }
.equipe-frase em.serifa { color: var(--creme); }
.equipe-creme { font-style: normal; color: var(--creme); white-space: nowrap; }
/* depois de quebrada em linhas (movimento.js), cada linha vira um bloco: a justificação passa pra cada linha, menos a última */
.js .equipe-frase .linha > span { display: block; text-indent: 0; }
.js .equipe-frase .linha:first-child > span { text-indent: 22%; }
.js .equipe-frase .linha:not(:last-child) > span { text-align-last: justify; }
/* Mira 1.7: a frase usa TL-1 com threshold .5 (só entra com metade dela à vista). O inicio-equipe.js põe .equipe-espera
   e tira quando chega na metade; sem o script, nada fica preso */
@media (prefers-reduced-motion: no-preference) {
  .js .equipe-frase.equipe-espera .linha > span { opacity: .001; transform: translateY(var(--tl-y, 15px)); }
}

/* ---------- os 4 cartões, em escada ---------- */
.equipe-time { margin-top: clamp(56px, 6vw, 86px); align-items: start; }
.equipe-contagem { grid-column: 4 / span 3; grid-row: 1; padding-top: 2px; }
.equipe-cartoes { grid-column: 1 / -1; grid-row: 1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px); row-gap: clamp(16px, 1.5vw, 22px); }
.equipe-cartao-1 { grid-column: 7 / span 3; grid-row: 1; }
.equipe-cartao-2 { grid-column: 10 / span 3; grid-row: 1; }
.equipe-cartao-3 { grid-column: 1 / span 3; grid-row: 2; }
.equipe-cartao-4 { grid-column: 4 / span 3; grid-row: 2; }
.equipe-cartao figure { margin: 0; }
.equipe-foto { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: clip; background: var(--tinta-2); }
.equipe-foto picture, .equipe-foto picture img { display: block; width: 100%; height: 100%; }
.equipe-foto picture img { object-fit: cover; object-position: 50% 40%; }   /* Mira 1.7: os cartões do time não têm hover */
/* o ✱ creme fica sobre a janela clara das fotos: uma sombra curta de tinta segura a leitura (é imagem parada, não anima) */
.equipe-foto-ast { position: absolute; left: 12px; top: 12px; width: 22px; height: auto; filter: drop-shadow(0 1px 5px rgb(21 20 19 / .5)); }
.equipe-foto-num { position: absolute; right: 12px; top: 15px; color: var(--creme); text-shadow: 0 1px 10px rgb(21 20 19 / .45); }
.equipe-cartao figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; padding: 13px 10px 0; }
/* nome do Mira: a condensada de 21 px (19 no celular) vira Inter 800 apertada; papel em microtexto à direita */
.equipe-cartao-nome { font-size: clamp(16px, 1.25vw, 19px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.equipe-cartao-papel { margin-left: auto; text-align: right; text-wrap: balance; }

/* ---------- a cena do ✱ (receita 2): poça de sombra com borda em spray + ✱ nítido de um lado, dissolvido e brilhando do outro ----------
   O grande mora no vazio ao lado dos cartões de cima (cortado pela borda); o pequeno, no vazio ao lado dos de baixo. */
.equipe-cena { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.equipe-poca { position: absolute; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(170 44 21 / .92) 0%, rgb(184 48 24 / .78) 45%, rgb(196 52 26 / .5) 72%, rgb(196 52 26 / 0) 100%);
  /* núcleo cheio ∪ (borda ∩ ruído): a sombra termina em pontinhos, como tinta spray, e não num degradê liso */
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 64%), radial-gradient(closest-side, #000 40%, transparent 100%), url("../marca/grao-mascara.png");
          mask-image: radial-gradient(closest-side, #000 52%, transparent 64%), radial-gradient(closest-side, #000 40%, transparent 100%), url("../marca/grao-mascara.png");
  -webkit-mask-size: 100% 100%, 100% 100%, 128px 128px;
          mask-size: 100% 100%, 100% 100%, 128px 128px;
  -webkit-mask-composite: source-over, source-in;
          mask-composite: add, intersect; }
.equipe-poca-g { left: -30%; top: -20%; width: 66%; }
.equipe-ast { position: absolute; aspect-ratio: 400 / 393; }
.equipe-ast-g { left: -8%; top: -3%; width: 42%; transform: rotate(-8deg); will-change: transform; mix-blend-mode: screen; }
.equipe-ast-p { left: 73%; top: 63%; width: 6.4%; transform: rotate(6deg); opacity: .92; }
.equipe-ast img { position: absolute; display: block; max-width: none; }
/* o desfocado tem 50 px de folga em 260 px: 162,5% do nítido, deslocado 31,25% */
.equipe-ast-mole { width: 162.5%; height: 162.5%; left: -31.25%; top: -31.25%; opacity: .85; }
/* brilho fraco embaixo do ✱ creme (Ref 081): o próprio laranja aceso, sem clarear com filtro (virava um borrão rosado) */
.equipe-ast-p .equipe-ast-mole { opacity: .7; }
.equipe-ast-nitido { inset: 0; width: 100%; height: 100%;
  /* núcleo nítido ∪ (faixa de transição ∩ ruído): dissolve salteado, como spray */
  -webkit-mask-image: linear-gradient(var(--equipe-lado, 115deg), #000 34%, transparent 46%), linear-gradient(var(--equipe-lado, 115deg), #000 30%, transparent 74%), url("../marca/grao-mascara.png");
          mask-image: linear-gradient(var(--equipe-lado, 115deg), #000 34%, transparent 46%), linear-gradient(var(--equipe-lado, 115deg), #000 30%, transparent 74%), url("../marca/grao-mascara.png");
  -webkit-mask-size: 100% 100%, 100% 100%, 128px 128px;
          mask-size: 100% 100%, 100% 100%, 128px 128px;
  -webkit-mask-composite: source-over, source-in;
          mask-composite: add, intersect; }
/* Ref 080 e capa do Behance: o grande é nítido do lado da borda (alto à esquerda) e derrete na direção dos cartões.
   O ângulo aponta pra onde ele dissolve: 120deg = some pra baixo e pra direita. */
.equipe-ast-g .equipe-ast-nitido { --equipe-lado: 120deg;
  -webkit-mask-image: linear-gradient(120deg, #000 42%, transparent 54%), linear-gradient(120deg, #000 36%, transparent 80%), url("../marca/grao-mascara.png");
          mask-image: linear-gradient(120deg, #000 42%, transparent 54%), linear-gradient(120deg, #000 36%, transparent 80%), url("../marca/grao-mascara.png"); }
/* o pequeno é o plano do meio: quase todo nítido, só a ponta de baixo à direita se desfaz (Ref 081) */
.equipe-ast-p .equipe-ast-nitido { --equipe-lado: 135deg;
  -webkit-mask-image: linear-gradient(135deg, #000 60%, transparent 70%), linear-gradient(135deg, #000 52%, transparent 94%), url("../marca/grao-mascara.png");
          mask-image: linear-gradient(135deg, #000 60%, transparent 70%), linear-gradient(135deg, #000 52%, transparent 94%), url("../marca/grao-mascara.png"); }
@media (prefers-reduced-motion: no-preference) {
  .equipe-ativo .equipe-ast-mole { animation: equipe-respira 7s var(--ease-io) infinite alternate; }
  .equipe-ativo .equipe-ast-p .equipe-ast-mole { animation-name: equipe-respira-p; animation-delay: -3.5s; }
  @keyframes equipe-respira { from { opacity: .6 } to { opacity: .95 } }
  @keyframes equipe-respira-p { from { opacity: .45 } to { opacity: .8 } }
}

/* ---------- "trabalho de casa" + foto do escritório ---------- */
.equipe-casa { margin-top: clamp(80px, 9vw, 130px); align-items: start; }
/* a trilha da grade fica na largura das 3 colunas (minmax): o título não alarga a coluna e o link encosta no fim da coluna 3, como no Mira */
.equipe-casa-texto { grid-column: 1 / span 3; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; }
.equipe-casa-titulo { margin: 0; width: max-content; max-width: 200%; font-size: clamp(28px, 2.75vw, 42px); font-weight: 800;
  letter-spacing: -0.045em; line-height: .94; text-wrap: balance; }
.equipe-casa-apoio { margin: 20px 0 0; max-width: 32ch; font-size: clamp(14px, 1vw, 16px); line-height: 1.45; text-wrap: pretty; }
.equipe-vagas { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; }
.equipe-vagas-num { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 1px 3px 0; border-radius: 3px; background: var(--creme); color: var(--tinta); }
.equipe-casa-link { justify-self: end; margin-top: 30px; white-space: nowrap; }
/* tablet (Mira: 810 a 1199): 3 colunas não cabem o título e o link numa linha; o texto ganha a 4ª coluna */
@media (min-width: 900px) and (max-width: 1199px) { .equipe-casa-texto { grid-column: 1 / span 4; } }
.equipe-casa-link .seta { background: var(--tinta); color: var(--laranja); }
.equipe-casa-link:focus-visible { outline-color: var(--tinta); }
.equipe-casa-foto { grid-column: 7 / -1; margin: 0; aspect-ratio: 10 / 7; border-radius: 10px; overflow: clip; background: var(--tinta-2); }
.equipe-casa-foto picture, .equipe-casa-foto img { display: block; width: 100%; height: 100%; }
.equipe-casa-foto img { object-fit: cover; object-position: 62% 50%; }

/* foco visível sobre o laranja: tinta, não laranja */
.equipe :focus-visible { outline-color: var(--tinta); }

/* ---------- celular: 2 colunas, a escada do Mira (1 à direita, 2 lado a lado, 1 à esquerda) ---------- */
@media (max-width: 899px) {
  .equipe-topo { display: flex; justify-content: space-between; gap: 12px; }
  .equipe-selo { height: 28px; }
  .equipe-selo-globo { width: 28px; }
  .equipe-cabeca { margin-top: 64px; }
  .equipe-rotulo, .equipe-frase { grid-column: 1 / -1; }
  .equipe-rotulo { padding-top: 0; }
  /* 5,55vw (~21,6 px em 390, a mesma densidade de ~29 letras por linha da condensada do Mira): medido de 360 a 430 px,
     PT e EN fecham todas as linhas justificadas acima de ~84%, sem buraco entre palavras e sem palavra sozinha no fim.
     Com 6,6vw o EN abria "project.  Whether  your" e com 6,15vw o PT deixava "pessoa." sozinho. Se a copy mudar, medir de novo. */
  .equipe-frase { margin-top: 22px; text-indent: 17%; font-size: clamp(19px, 5.55vw, 30px); }
  .js .equipe-frase .linha:first-child > span { text-indent: 17%; }
  .equipe-time { margin-top: 64px; }
  .equipe-contagem { grid-column: 1 / span 6; }
  .equipe-cartoes { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 18px; }
  .equipe-cartao-1 { grid-column: 2; grid-row: 1; }
  .equipe-cartao-2 { grid-column: 1; grid-row: 2; }
  .equipe-cartao-3 { grid-column: 2; grid-row: 2; }
  .equipe-cartao-4 { grid-column: 1; grid-row: 3; }
  .equipe-foto-ast { left: 9px; top: 9px; width: 18px; }
  .equipe-foto-num { right: 9px; top: 11px; }
  /* Mira no celular: nome à esquerda e o papel embaixo, encostado à direita */
  .equipe-cartao figcaption { flex-direction: column; align-items: flex-start; gap: 6px; padding: 11px 8px 0; }
  .equipe-cartao-nome { font-size: 16px; }
  .equipe-cartao-papel { align-self: flex-end; max-width: 100%; }
  .equipe-poca-g { left: -46%; top: 2%; width: 112%; }
  .equipe-ast-g { left: -16%; top: 8%; width: 70%; }   /* o lado nítido (o da borda) precisa aparecer também no celular */
  .equipe-ast-p { left: 66%; top: 79%; width: 17%; }
  .equipe-casa { margin-top: 72px; }
  .equipe-casa-texto, .equipe-casa-foto { grid-column: 1 / -1; }
  .equipe-casa-texto { justify-items: stretch; }
  .equipe-casa-titulo { width: auto; max-width: none; }
  .equipe-vagas { justify-self: start; }
  .equipe-casa-foto { margin-top: 40px; }
}

/* ===== inicio-instagram-faq.css ===== */
/* Dobras 10 e 11 da página inicial: INSTAGRAM (07) e PERGUNTAS (08).
   Clone de "Client stories" e "FAQ" do Mira: mesma grade (rótulo e título à esquerda, apoio justificado na coluna 7,
   contador na coluna 4 e setas no fim; slide com foto nas colunas 1 a 3 e texto grande da 7 em diante;
   sanfona da coluna 4 à 10 em faixas claras com +, a faixa aberta fica escura). Identidade: Inter 800 apertada,
   laranja nas setas e no número do rótulo; nas perguntas, o respiro claro da Ref 081 (papel + spray de canto, Receita 5). */

/* ================= INSTAGRAM ================= */
.ig { padding-bottom: clamp(56px, 6.5vw, 100px); }
.ig + .faq { padding-top: clamp(56px, 5.5vw, 84px); }
.ig .grade { align-items: start; }
.ig-cabeca { align-items: end; }
.ig-cabeca-esq { grid-column: 1 / span 6; }
.ig-rotulo { margin-bottom: clamp(16px, 1.7vw, 26px); }
.ig-titulo, .faq-titulo { font-weight: 800; font-size: clamp(40px, 4.9vw, 80px); letter-spacing: -0.052em; line-height: .9; margin: 0; text-wrap: balance; }
.ig-cabeca-dir { grid-column: 7 / span 5; --recuo: 21%; }
.ig-intro { margin: 0; font-weight: 700; font-size: clamp(16px, 1.42vw, 21px); line-height: 1.12; letter-spacing: -0.032em;
  text-align: justify; text-indent: var(--recuo); hyphens: manual; }
/* depois que o movimento.js parte o apoio em linhas, cada linha continua justificada (como no Mira) e só a primeira tem recuo */
.ig-intro .linha { text-indent: 0; }
.js .ig-intro .linha > span { display: block; text-indent: 0; text-align: justify; text-align-last: justify; }
.js .ig-intro .linha:first-child > span { text-indent: var(--recuo); text-align-last: right; }
.js .ig-intro .linha:last-child > span { text-align-last: auto; }
.ig-intro-apagado { font-style: normal; color: var(--tinta-40); }
.ig-perfil { margin-top: 22px; }
.ig-perfil .seta svg { width: 8px; height: 8px; }

/* contador e setas (o "01 / 03" e os quadradinhos vermelhos do Mira) */
.ig-carrossel { margin-top: clamp(56px, 6.4vw, 94px); }
.ig-controles { align-items: center; }
.ig-contador { grid-column: 4 / span 3; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--tinta-60);
  font-variant-numeric: tabular-nums; }
.ig-contador-num { display: inline-block; overflow: clip; vertical-align: bottom; }
.ig-atual { display: inline-block; color: var(--tinta); }
.ig-setas { grid-column: 10 / -1; justify-self: end; display: flex; gap: 6px; }
.ig-seta { width: 30px; height: 30px; border-radius: 4px; background: var(--laranja); color: var(--tinta); display: grid; place-items: center;
  transition: transform .35s var(--ease); }
.ig-seta svg { width: 11px; height: 11px; transition: translate .35s var(--ease); }
.ig-seta[data-ir="1"]:hover svg { translate: 2px 0; }
.ig-seta[data-ir="-1"]:hover svg { translate: -2px 0; }
.ig-seta:active { transform: scale(.92); }
.ig-anuncio { margin: 0; }
/* sem JS não há troca: o contador e as setas saem e os posts ficam um embaixo do outro */
html:not(.js) .ig-controles { display: none; }

/* palco: sem JS, os slides ficam um embaixo do outro; com JS, empilhados na mesma célula (altura do maior, sem pulo) */
.ig-palco { margin-top: clamp(30px, 3.4vw, 50px); display: grid; gap: clamp(64px, 7vw, 110px); }
.ig-slide { align-items: start; }
.ig-esq { grid-column: 1 / span 3; }
.ig-capa { display: block; position: relative; border-radius: 8px; overflow: clip; background: var(--creme-2); aspect-ratio: 3 / 4; }
.ig-capa picture, .ig-capa img { display: block; width: 100%; height: 100%; }
.ig-capa img { object-fit: cover; transition: scale .9s var(--ease); }
.ig-capa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(21, 20, 19, .09); pointer-events: none; }
.ig-capa:hover img { scale: 1.03; }
.ig-autor { margin: 14px 0 0; display: grid; justify-items: start; gap: 2px; font-size: 13px; line-height: 1.25; letter-spacing: -0.015em; }
.ig-autor-nome { font-weight: 700; }
.ig-autor-papel { color: var(--tinta-60); }
.ig-pontos { margin: 24px 0 0; display: flex; gap: 4px; }
.ig-pontos span { width: 5px; height: 5px; border-radius: 50%; background: var(--tinta-12); }
.ig-pontos span.ativo { background: var(--tinta); }
.ig-dir { grid-column: 7 / -1; }
.js .ig-palco.ligado .ig-dir { cursor: pointer; }
.ig-lingua { color: var(--tinta-60); margin-bottom: 16px; }
.ig-post-titulo { margin: 0; max-width: 11em; font-weight: 800; font-size: clamp(32px, 4.15vw, 66px); letter-spacing: -0.05em; line-height: .93; text-wrap: balance; }
.ig-trecho { margin-top: clamp(22px, 2.2vw, 32px); max-width: 37ch; }
.ig-p, .ig-w { display: inline-block; }
.ig-linha { display: block; height: 1px; background: var(--tinta-12); margin-top: clamp(40px, 4.6vw, 66px); transform-origin: 0 50%; }
.ig-dados { margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ig-dados div { min-width: 0; }
.ig-dados dt { color: var(--tinta-60); }
.ig-dados dd { margin: 10px 0 0; font-weight: 800; font-size: clamp(26px, 2.6vw, 42px); letter-spacing: -0.05em; line-height: .95; overflow-wrap: anywhere; text-wrap: balance; }

.js .ig-palco { gap: 0; }
.js .ig-slide { grid-area: 1 / 1; }
.js .ig-palco:not(.ligado) .ig-slide:not(:first-child) { visibility: hidden; }
/* a troca REMONTA o slide (Mira 1.10): o que sai some na hora, sem fade cruzado */
.js .ig-palco.ligado .ig-slide:not(.ativo) { visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  /* estado de espera (slide fora): sem transição, pra o próximo começar do zero */
  .js .ig-palco.ligado .ig-slide:not(.ativo) .ig-capa { clip-path: inset(0 100% 0 0); }
  .js .ig-palco.ligado .ig-slide:not(.ativo) .ig-capa img { transform: scale(1.3); }
  .js .ig-palco.ligado .ig-slide:not(.ativo) .ig-sobe { opacity: .001; transform: translateY(var(--sy, 15px)); }
  .js .ig-palco.ligado .ig-slide:not(.ativo) .ig-acende { opacity: 0; }
  .js .ig-palco.ligado .ig-slide:not(.ativo) .ig-linha { transform: scaleX(0); background-color: var(--laranja); }
  /* entrada: cortina da esquerda pra direita + scale 1.3 → 1, 1,2 s --e-mira ("Reveal Image" do Mira) */
  .js .ig-palco.ligado .ig-slide.ativo .ig-capa { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--e-mira); }
  .js .ig-palco.ligado .ig-slide.ativo .ig-capa img { transform: none; transition: transform 1.2s var(--e-mira), scale .9s var(--ease); }
  /* texto: linhas (y 15) e palavras (y 2) com a curva de texto do Mira; o atraso de cada peça vem em --d */
  .js .ig-palco.ligado .ig-slide.ativo .ig-sobe { transition: opacity var(--sd, .8s) var(--e-texto) var(--d, .2s), transform var(--sd, .8s) var(--e-texto) var(--d, .2s); }
  /* números e pontos: aparecem com a mola M1 */
  .js .ig-palco.ligado .ig-slide.ativo .ig-acende { transition: opacity 1168ms var(--m1) var(--d, .3s); }
  /* a linha se desenha, laranja → cinza (1 s --e-linha) */
  .js .ig-palco.ligado .ig-slide.ativo .ig-linha { transition: transform 1s var(--e-linha) .2s, background-color 1s var(--e-linha) .2s; }
}

/* ================= PERGUNTAS ================= */
/* respiro claro (Ref 081, Receita 5 de referencias-figma.md): spray laranja CHEIO e pontilhado no canto, nunca véu transparente.
   Sem grão no creme da seção inteira: medido, ele escurece o papel e cria uma emenda com o Instagram logo acima. */
.faq { position: relative; isolation: isolate; overflow: clip; }
.faq::before { content: ""; position: absolute; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  width: min(32vw, 480px); aspect-ratio: 490 / 330; background: url(../marca/spray-canto.png) right bottom / 100% 100% no-repeat; image-rendering: pixelated; }
.faq .grade { align-items: start; }
.faq-rotulo { grid-column: 1 / span 3; padding-top: .7em; }
.faq-corpo { grid-column: 4 / span 7; }
.faq-cabeca { position: relative; width: max-content; max-width: 100%; }
.faq-rabisco { position: absolute; left: calc(100% + 24px); bottom: .06em; width: auto; height: clamp(40px, 3.9vw, 64px); rotate: 7deg; pointer-events: none; }
.faq-lista { margin-top: clamp(44px, 5.6vw, 84px); display: flex; flex-direction: column; gap: 6px; }
.faq-pergunta { margin: 0; font: inherit; }
/* a faixa do Mira: fechada clara (raio 10, 15 px de respiro); aberta, tinta com texto creme (.46 s --e-mira) */
.faq-botao { width: 100%; display: flex; align-items: center; gap: 20px; padding: 15px 16px; text-align: left; border-radius: 10px;
  background: var(--creme-2); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--tinta);
  transition: background-color .46s var(--e-mira), color .46s var(--e-mira); }
.faq-botao:hover { background: color-mix(in srgb, var(--creme-2), var(--tinta) 5%); }
.js .faq-botao[aria-expanded="true"] { background: var(--tinta); color: var(--creme); }   /* sem JS todas ficam abertas e claras */
.faq-texto { flex: 1; min-width: 0; text-wrap: balance; }
/* o + (12 px num quadro de 20): aberto, gira 360° e o traço vertical cai pra fora (vira −), .26 s --e-mira */
.faq-mais { position: relative; flex: none; width: 12px; height: 12px; overflow: clip; transition: transform .26s var(--e-mira); }
.faq-mais i { position: absolute; background: currentColor; border-radius: 1px; }
.faq-mais-h { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.faq-mais-v { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; transition: transform .26s var(--e-mira); }
.faq-botao[aria-expanded="true"] .faq-mais { transform: rotate(360deg); }
.faq-botao[aria-expanded="true"] .faq-mais-v { transform: translateY(110%); }
/* a resposta vem embaixo da faixa, no papel (Mira: 20 px de respiro, até 450 px) */
.faq-resposta p { margin: 0; padding: 20px 16px 22px; max-width: calc(450px + 32px); font-size: 15px; line-height: 1.5; color: var(--tinta-60); text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  /* entrada dos itens: y 20 → 0 e opacity, .85 s --e-texto (Mira 1.12) */
  .js .faq-item.revela { --y: 20px; transition: opacity .85s var(--e-texto), transform .85s var(--e-texto); transition-delay: var(--atraso, 0s); }
  /* avatares: x 15 → 0 com a mola M4 */
  .js .faq-av.revela:not(.visto) { transform: translateX(15px); }
  .js .faq-av.revela { transition: opacity 1119ms var(--m4), transform 1119ms var(--m4); transition-delay: var(--atraso, 0s); }
}

/* "More questions?" do Mira: título e apoio à esquerda; à direita, avatar, e-mail e o atalho pro formulário */
.faq-outra { margin-top: clamp(64px, 7vw, 100px); display: flex; justify-content: space-between; align-items: end; gap: 28px 40px; }
.faq-outra-titulo { margin: 0 0 14px; font-weight: 800; font-size: clamp(28px, 2.7vw, 44px); letter-spacing: -0.05em; line-height: .95; text-wrap: balance; }
.faq-outra .t-corpo { max-width: 34ch; font-size: 14px; text-wrap: balance; }
.faq-falar { display: grid; justify-items: end; gap: 12px; }
.faq-avatares { margin: 0 0 2px; display: flex; gap: 2px; }
.faq-avatares > img, .faq-avatar-ast { display: block; width: 30px; height: 30px; border-radius: 4px; }
.faq-avatares > img { object-fit: cover; object-position: 50% 24%; }
.faq-avatar-ast { display: grid; place-items: center; background: var(--tinta); }
.faq-avatar-ast img { width: 15px; height: auto; }
.faq-email { font-size: 14px; letter-spacing: -0.01em; }

@media (max-width: 899px) {
  .ig-cabeca-esq, .ig-cabeca-dir { grid-column: 1 / -1; }
  .ig-cabeca-dir { margin-top: 26px; --recuo: 14%; }
  .ig-intro { font-size: 17px; }
  .ig-contador { grid-column: 1 / span 6; }
  .ig-setas { grid-column: 7 / -1; }
  .ig-esq, .ig-dir { grid-column: 1 / -1; }
  .ig-capa { width: 54%; }
  .ig-pontos { margin-top: 18px; }
  .ig-dir { margin-top: 34px; }
  .ig-post-titulo { font-size: clamp(30px, 8.4vw, 44px); }
  .ig-linha { margin-top: 34px; }
  .faq::before { width: 44vw; }
  .faq-rotulo, .faq-corpo { grid-column: 1 / -1; }
  .faq-rotulo { padding-top: 0; margin-bottom: 18px; }
  .faq-rabisco { left: calc(100% + 16px); }
  .faq-outra { flex-direction: column; align-items: start; }
  .faq-falar { justify-items: start; }
}

/* ===== inicio-mosaico.css ===== */
/* ---------- 3. mosaico (clone da dobra "50 brands" do Mira, animacoes.md 1.3) ----------
   Estado padrão = mosaico pronto e parado (sem JS ou com movimento reduzido).
   Com JS (.mosaico-anima): o palco fica preso, a mídia sai de scale(~3,1) pra 1, o véu escurece até .65,
   cada linha do título desliza 10% com máscara e cada palavra acende; passando de 75% (.mosaico-fim) entram o logo e o selo. */
.mosaico { position: relative; --mosaico-gap: 6px; }
.mosaico-palco { position: relative; height: 100vh; min-height: 540px; padding: 6px; }
.mosaico-dentro { position: relative; height: 100%; border-radius: 12px; overflow: clip; background: var(--creme); isolation: isolate; }

/* mídia: 3 colunas (2 + 3 + 2 células de mesma altura), igual ao Mira; tudo escala junto a partir do centro */
.mosaico-midia { position: absolute; inset: 0; display: flex; justify-content: center; gap: var(--mosaico-gap); transform-origin: 50% 50%; }
.mosaico-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--mosaico-gap); }
.mosaico-celula { position: relative; flex: 1 0 0; min-height: 0; margin: 0; border-radius: 10px; overflow: clip; background: var(--tinta-2); }
.mosaico-celula picture, .mosaico-celula img { display: block; width: 100%; height: 100%; }
.mosaico-celula img { object-fit: cover; object-position: 50% 50%; }
.mosaico-centro img { object-position: 50% 42%; }
/* véu do Mira: #0d0d0d a .65 no fim; aqui, a tinta */
.mosaico-escuro { position: absolute; inset: 0; z-index: 1; background: var(--tinta); opacity: .65; pointer-events: none; }

/* texto por cima: mesma grade de 12 colunas do resto da página (Mira: logo na 1ª de 4 colunas, título nas 2 do meio, selo na última) */
.mosaico-texto { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  padding-inline: calc(var(--g) - 6px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.4vw, 20px); align-items: start; color: var(--creme); }
.mosaico-logo { grid-column: 1 / span 3; width: auto; height: 18px; margin-top: .12em; font-size: clamp(34px, 4.9vw, 92px); }
.mosaico-titulo { grid-column: 4 / span 6; margin: 0; font-weight: 800; font-size: clamp(34px, 4.9vw, 92px);
  letter-spacing: -0.05em; line-height: .94; color: var(--creme); text-shadow: 0 1px 24px rgba(21, 20, 19, .3); }
/* cada linha é a máscara (só na horizontal, pra não cortar a serifa que passa da altura da linha) */
/* as quebras são as da copy (3 linhas), então a linha não quebra de novo */
.mosaico-linha { display: block; overflow-x: clip; overflow-y: visible; white-space: nowrap; }
.mosaico-linha-in { display: block; }

/* selo "Ver todos (6)" (Mira 8.7): cartão creme de 200 px com miniatura que troca de projeto */
.mosaico-selo { grid-column: 10 / span 3; align-self: center; display: flex; align-items: center; width: 200px; padding: 3px;
  border-radius: 10px; background: var(--creme); color: var(--tinta); }
.mosaico-selo-fotos { position: relative; flex: none; width: 67px; aspect-ratio: 1; border-radius: 8px; overflow: clip; background: var(--creme-2); }
.mosaico-selo-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity .7s var(--e-padrao), transform 1367ms var(--m3); }
.mosaico-selo-fotos img.ativa { opacity: 1; }
.mosaico-selo-rotulo { flex: 1; text-align: center; padding-inline: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
/* hover do Mira: a miniatura cresce 1,3 e gira 2° com a mola M3 (o cinza do Mira fica de fora: só transform e opacity) */
.mosaico-selo:hover .mosaico-selo-fotos img, .mosaico-selo:focus-visible .mosaico-selo-fotos img { transform: scale(1.3) rotate(2deg); }
.mosaico-selo:focus-visible { outline-offset: 4px; }

/* trilha de rolagem: só existe com o movimento ligado (Mira: 100vh preso + 200vh de gatilho + 50vh parado, no computador e no celular) */
.mosaico-curso, .mosaico-pausa { display: none; }
.mosaico-anima .mosaico-curso { display: block; height: 200vh; }
.mosaico-anima .mosaico-pausa { display: block; height: 50vh; }
.mosaico-anima .mosaico-palco { position: sticky; top: 0; }
.mosaico-anima .mosaico-midia, .mosaico-anima .mosaico-linha-in { will-change: transform; }
.mosaico-anima .mosaico-escuro { opacity: 0; }
/* logo e selo: .6 s na curva simétrica do Mira, o selo com .1 s de atraso; desfazem ao voltar */
.mosaico-anima .mosaico-logo, .mosaico-anima .mosaico-selo { transition: opacity .6s var(--e-simetrica), transform .6s var(--e-simetrica); }
.mosaico-anima .mosaico-selo { transition-delay: .1s; }
.mosaico-anima:not(.mosaico-fim) .mosaico-logo { opacity: 0; transform: translateX(-100px); }
.mosaico-anima:not(.mosaico-fim) .mosaico-selo { opacity: 0; transform: translateX(50px); pointer-events: none; }
.mosaico-anima:not(.mosaico-fim) .mosaico-selo:focus-visible { opacity: 1; transform: none; transition-delay: 0s; }   /* teclado sempre vê o selo */

/* tablet: colunas de 50% (Mira) */
@media (min-width: 810px) and (max-width: 1199px) {
  .mosaico-col { flex: none; width: 50%; }
}
/* celular: colunas de 67% (Mira), texto empilhado */
@media (max-width: 899px) {
  .mosaico { --mosaico-gap: 4px; }
  .mosaico-palco { padding: 4px; min-height: 520px; }
  .mosaico-col { flex: none; width: 67%; }
  /* mudança consciente: o bloco desce pro terço de baixo, sobre o moletom (zona escura da foto), e o rosto dele fica livre.
     O palco tem 100vh como no Mira; a diferença pra 100svh é a barra do navegador, então o bloco sobe junto e nunca fica atrás dela. */
  .mosaico-texto { top: auto; bottom: 28px; bottom: calc(28px + (100vh - 100svh)); transform: none; padding-inline: 16px;
    grid-template-columns: minmax(0, 1fr); row-gap: 18px; justify-items: start; }
  .mosaico-logo, .mosaico-titulo, .mosaico-selo { grid-column: 1; }
  .mosaico-logo { height: 16px; margin-top: 0; }
  .mosaico-titulo { font-size: clamp(30px, 8.6vw, 46px); }
  .mosaico-selo { align-self: start; }
}
@media (min-width: 810px) and (max-width: 899px) { .mosaico-col { width: 50%; } }

/* ===== inicio-porque.css ===== */
/* Dobras 4 (Clientes 02) e 5 (Por que eu 03) da página inicial · clone do Mira (home-desk 011 a 016).
   Tudo com prefixo porque-. Movimento: só transform e opacity; sem JS ou com movimento reduzido, tudo parado e visível. */

/* ================= 4. CLIENTES (02) ================= */
/* sobre o creme-2 o cinza de .6 dá 4,47:1 (abaixo do AA no texto pequeno); aqui ele sobe pra .68 (5,8:1) */
.porque-cli-cartao, .porque-bloco { --tinta-60: rgba(21, 20, 19, .68); }
.porque-clientes { padding-block: clamp(96px, 9vw, 132px) clamp(84px, 8.4vw, 124px); }
.porque-cli-rotulo { grid-column: 1 / span 3; padding-top: 2px; }
.porque-cli-grade { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.porque-cli-item { min-width: 0; }

/* cartão do Mira (cinza claro, raio 10) com o nome no lugar do logo */
.porque-cli-cartao { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: grid; place-items: center;
  height: clamp(104px, 8.4vw, 136px); padding: 30px 18px; border-radius: 10px; background: var(--creme-2); color: var(--tinta); }
.porque-cli-nome { position: relative; font-weight: 800; font-size: clamp(21px, 2.2vw, 34px); letter-spacing: -0.045em; line-height: .94;
  text-align: center; text-wrap: balance; transition: color .56s var(--e-mira), transform .56s var(--e-mira); }
.porque-cli-num, .porque-cli-servico, .porque-cli-ver { position: absolute; z-index: 1; color: var(--tinta-60); transition: color .56s var(--e-mira), opacity .56s var(--e-mira), transform .56s var(--e-mira); }
.porque-cli-num { left: 14px; top: 13px; }
.porque-cli-servico { left: 14px; bottom: 13px; }
/* "Ver projeto" no canto de cima à direita: embaixo ele batia no serviço quando o cartão estreita (tablet) */
.porque-cli-ver { right: 12px; top: 9px; display: inline-flex; align-items: center; gap: 8px; color: var(--creme); opacity: 0; transform: translateX(-6px); }
.porque-cli-ver .seta { width: 16px; height: 16px; border-radius: 3px; background: var(--laranja); color: var(--tinta); display: grid; place-items: center; }
.porque-cli-ver .seta svg { width: 8px; height: 8px; }

/* hover (pedido do site; no Mira os logos não têm hover): a capa do case aparece por baixo do nome, só opacidade e escala */
.porque-cli-capa { position: absolute; inset: 0; z-index: -1; opacity: 0; transform: scale(1.08);
  transition: opacity .56s var(--e-mira), transform .56s var(--e-mira); }   /* como o hover do cartão de artigo (8.5) */
.porque-cli-capa img { width: 100%; height: 100%; object-fit: cover; }
.porque-cli-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,20,19,.5), rgba(21,20,19,.62)); }
@media (hover: hover) {
  .porque-cli-cartao:hover .porque-cli-capa, .porque-cli-cartao:focus-visible .porque-cli-capa { opacity: 1; transform: scale(1); }
  .porque-cli-cartao:hover .porque-cli-nome, .porque-cli-cartao:focus-visible .porque-cli-nome { color: var(--creme); transform: translateY(-4px); }
  .porque-cli-cartao:hover .porque-cli-num, .porque-cli-cartao:hover .porque-cli-servico,
  .porque-cli-cartao:focus-visible .porque-cli-num, .porque-cli-cartao:focus-visible .porque-cli-servico { color: var(--creme-70); }
  .porque-cli-cartao:hover .porque-cli-ver, .porque-cli-cartao:focus-visible .porque-cli-ver { opacity: 1; transform: none; }
}
@media (hover: none) {
  .porque-cli-capa { display: none; }   /* no toque a capa nem baixa */
  .porque-cli-ver { opacity: 1; transform: none; }
  .porque-cli-ver-txt { display: none; }
}
.porque-cli-cartao:focus-visible { outline-offset: 2px; }

/* rodapé da grade: os anos à esquerda e a frase no lugar dos avatares e da nota */
.porque-cli-pe { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(30px, 3.2vw, 46px); align-items: start; }
.porque-cli-anos { grid-column: 1 / span 3; line-height: 1.25; }
.porque-cli-intro { grid-column: 4 / span 5; max-width: 40ch; font-size: clamp(14px, 1vw, 15px); line-height: 1.4; }

@media (max-width: 899px) {
  .porque-cli-rotulo, .porque-cli-grade, .porque-cli-pe { grid-column: 1 / -1; }
  .porque-cli-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
  .porque-cli-cartao { height: 118px; padding: 28px 12px; }
  .porque-cli-nome { font-size: clamp(19px, 5.4vw, 26px); }
  .porque-cli-num { left: 11px; top: 10px; }
  .porque-cli-servico { left: 11px; bottom: 10px; font-size: 10px; }
  .porque-cli-ver { right: 9px; top: 8px; }
  .porque-cli-pe { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 26px; }
  .porque-cli-anos { grid-column: 1 / span 4; }
  .porque-cli-intro { grid-column: 5 / -1; }
}

/* ================= 5. POR QUE EU (03) ================= */
.porque { padding-inline: 6px; }
.porque-bloco { position: relative; border-radius: 10px; background: var(--creme-2);
  padding: clamp(84px, 8.8vw, 128px) max(16px, calc(var(--g) - 6px)) clamp(84px, 8.4vw, 124px); }
.porque-topo { align-items: start; }
.porque-rotulo { grid-column: 1 / span 3; padding-top: .55em; }
.porque-cabeca { grid-column: 4 / span 6; }
.porque-titulo { font-size: clamp(42px, 5.5vw, 90px); }
/* depois que o movimento.js quebra o título em linhas (blocos), o <br> do \n sobraria como uma linha vazia */
.porque-titulo .linha + br { display: none; }

/* a frase do Mira: recuo na 1ª linha, justificada, duas cores (a 1ª frase apagada e o resultado cheio) */
.porque-frase { margin: clamp(28px, 3vw, 46px) 0 0; max-width: 23em; font-weight: 800; font-size: clamp(17px, 1.6vw, 25px);
  letter-spacing: -0.035em; line-height: 1.1; text-align: justify; text-indent: 34%; hyphens: manual; text-wrap: pretty; }   /* balance + justify abre buracos (EN chega a 60 px entre palavras) */
.porque-cinza { font-style: normal; color: var(--tinta-60); }
/* quebrada em linhas (movimento.js), cada linha vira bloco: a justificação passa pra cada linha, menos a última */
.js .porque-frase.revela-linhas .linha > span { display: block; }
.js .porque-frase.revela-linhas .linha:first-child > span { text-indent: 34%; }
.js .porque-frase.revela-linhas .linha:not(:last-child) > span { text-align-last: justify; }
.porque-nota { margin: 22px 0 0; max-width: 46ch; font-size: 13px; line-height: 1.4; color: var(--tinta-60); text-wrap: pretty; }

/* gráfico: barra do "depois" em tinta com o número dentro; a do "antes" em creme; eixo de 0 a 100 tracejado */
.porque-grafico { margin: clamp(60px, 6.4vw, 96px) 0 0; }
.porque-area { position: relative; padding: 38px 0 50px; }
.porque-eixo { position: absolute; inset: 0; pointer-events: none; }
.porque-eixo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 30px; border-top: 1px dashed rgba(21,20,19,.16); }
.porque-tique { position: absolute; top: 0; bottom: 30px; left: calc(var(--x) * 100%); border-left: 1px dashed rgba(21,20,19,.13); }
.porque-tique > span { position: absolute; top: calc(100% + 10px); left: 0; transform: translateX(-50%);
  font-size: 12px; font-weight: 700; letter-spacing: .01em; color: var(--tinta-60); }
.porque-tique-0 > span { transform: none; }
.porque-tique-fim { border-left: 0; border-right: 1px dashed rgba(21,20,19,.13); transform: translateX(-1px); }
.porque-tique-fim > span { left: auto; right: 0; transform: none; }
.porque-serie { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; }
.porque-serie + .porque-serie { margin-top: 24px; }
.porque-serie-nome { display: flex; align-items: center; gap: 9px; }
.porque-serie-nome img { width: 15px; height: auto; }
/* a caixa tem a largura do valor; a trilha recorta a barra que entra; número e oval ficam fora do recorte */
.porque-caixa { position: relative; width: calc(var(--v) * 100%); min-width: 76px; }
.porque-trilha { border-radius: 10px; overflow: hidden; overflow: clip; }
.porque-barra { height: clamp(46px, 4vw, 58px); border-radius: 10px; background: var(--tinta); }
.porque-serie-antes .porque-barra { background: var(--creme); }
.porque-valor { position: absolute; right: clamp(12px, 1.2vw, 18px); top: 50%; transform: translateY(-50%);
  font-weight: 800; font-size: clamp(20px, 2vw, 30px); letter-spacing: -0.045em; line-height: 1; color: var(--creme); }
.porque-serie-antes .porque-valor { color: var(--tinta); }
.porque-serie-depois .porque-valor { right: clamp(22px, 2.2vw, 34px); }
/* o único rabisco do bloco: o oval do kit circulando o 95 (mão de quem revisa) */
.porque-oval { position: absolute; left: 50%; top: 50%; width: 5em; max-width: none; height: auto; pointer-events: none;
  transform: translate(-45%, -46%) rotate(4deg); }   /* o PNG já vem inclinado (~-12°): +4° deixa o oval a ~-8° */
.porque-legenda { margin-top: 24px; font-size: 13px; line-height: 1.4; color: var(--tinta-60); }

/* cartão laranja chapado com grão (texto em tinta: 5,9:1) + os dois números à direita */
.porque-provas { margin-top: clamp(64px, 7vw, 100px); align-items: start; }
.porque-cartao { grid-column: 1 / span 3; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  min-height: clamp(440px, 33.5vw, 520px); padding: clamp(24px, 2.1vw, 32px); border-radius: 10px; background: var(--laranja); color: var(--tinta); }
.porque-cartao em.serifa { color: var(--tinta); }
.porque-cartao-ast { width: 36px; height: auto; transform: rotate(-6deg); }
.porque-cartao-titulo { margin: 34px 0 0; font-weight: 800; font-size: clamp(21px, 1.75vw, 27px); letter-spacing: -0.045em; line-height: .98; text-wrap: balance; }
.porque-cartao-texto { margin: 14px 0 0; font-size: 14px; line-height: 1.4; text-wrap: pretty; }
.porque-cartao-dados { margin: 0; display: grid; gap: 22px; }
.porque-cartao-dados > div { display: flex; flex-direction: column-reverse; gap: 8px; }
.porque-cartao-dados dd { margin: 0; font-weight: 800; font-size: clamp(38px, 3.5vw, 54px); letter-spacing: -0.05em; line-height: .86; }
/* o "antes" apagado só no número grande (3,3:1, texto grande); o rótulo pequeno fica em tinta cheia (5,9:1) */
.porque-cartao-antes dd { color: rgba(21, 20, 19, .62); }

.porque-numeros { grid-column: 7 / -1; }
.porque-numero { position: relative; padding-bottom: clamp(30px, 2.8vw, 40px); margin-bottom: clamp(30px, 2.8vw, 40px); }
.porque-numero-i { color: var(--laranja); }
.porque-numero-corpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: end; margin-top: clamp(26px, 2.6vw, 40px); }
.porque-numero-valor { margin: 0; font-weight: 800; font-size: clamp(46px, 4.6vw, 74px); letter-spacing: -0.055em; line-height: .8; white-space: nowrap; }
.porque-numero-txt { display: grid; gap: 14px; }
.porque-numero-txt .t-rotulo { text-wrap: balance; }
.porque-numero-txt .t-corpo { max-width: 30ch; font-size: 14px; line-height: 1.4; }
/* linha divisória do Mira: se desenha da esquerda e passa de laranja pra cinza durante o traço (1 s, --e-linha) */
.porque-numero-linha { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tinta-12); transform-origin: 0 50%; }
.porque-numero-linha > span { position: absolute; inset: 0; background: var(--laranja); opacity: 0; }

.porque-citacao { margin-top: clamp(8px, 1vw, 14px); display: grid; gap: 22px; }
.porque-citacao blockquote { margin: 0; }
.porque-citacao blockquote p { margin: 0; max-width: 19em; font-weight: 800; font-size: clamp(15px, 1.2vw, 18px); letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
.porque-fim { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.porque-autor { margin: 0; display: flex; align-items: center; gap: 12px; }
.porque-autor img { width: 40px; height: 40px; object-fit: cover; object-position: 50% 22%; border-radius: 4px; }
.porque-autor > span { display: grid; gap: 2px; font-size: 14px; line-height: 1.2; }
.porque-autor-nome { font-weight: 600; }
.porque-autor-papel { color: var(--tinta-60); }
.porque-cta { margin-left: auto; font-size: 13px; }

@media (min-width: 900px) and (max-width: 1199px) {
  .porque-cabeca { grid-column: 4 / -1; }
  .porque-cartao { grid-column: 1 / span 5; }
  .porque-numeros { grid-column: 7 / -1; }
}
@media (max-width: 899px) {
  .porque { padding-inline: 4px; }
  .porque-rotulo, .porque-cabeca, .porque-cartao, .porque-numeros { grid-column: 1 / -1; }
  .porque-rotulo { padding-top: 0; }
  .porque-cabeca { margin-top: 22px; }
  /* 16 px em 390 fecha a frase em 4 linhas sem sobra no fim (17 px deixava "eu fiz." sozinho); em 360 cai pra 15 px */
  .porque-frase { max-width: none; text-indent: 30%; font-size: clamp(15px, 4.1vw, 17px); }
  .porque-area { padding-top: 30px; }
  .porque-tique > span { font-size: 11px; }
  .js .porque-frase.revela-linhas .linha:first-child > span { text-indent: 30%; }
  .porque-cartao { min-height: 0; gap: 56px; }
  .porque-numeros { margin-top: 44px; }
  .porque-numero-corpo { gap: 14px; }
  .porque-numero-txt .t-corpo { font-size: 13px; }
}

/* entradas (só quando o script da seção rodou: se ele não rodar, fica tudo visível) */
@media (prefers-reduced-motion: no-preference) {
  /* barras (Mira 1.5): começam com 20 px e vão à largura cheia saindo da origem do eixo; .76 s --e-mira, atraso .4 s */
  .porque-vivo .porque-barra { transition: transform .76s var(--e-mira) .4s; }
  .porque-vivo .porque-grafico:not(.visto) .porque-barra { transform: translateX(calc(-100% + 20px)); }
  /* linhas dos números: largura 0 → 100% e laranja → cinza, 1 s --e-linha */
  .porque-vivo .porque-numero-linha { transition: transform 1s var(--e-linha); }
  .porque-vivo .porque-numero-linha > span { transition: opacity 1s var(--e-linha); }
  .porque-vivo .porque-numero:not(.visto) .porque-numero-linha { transform: scaleX(0); }
  .porque-vivo .porque-numero:not(.visto) .porque-numero-linha > span { opacity: 1; }
  .porque-vivo .porque-valor { transition: opacity .45s var(--e-texto) 1.05s; }
  .porque-vivo .porque-grafico:not(.visto) .porque-valor { opacity: 0; }
  .porque-vivo .porque-oval { transition: opacity .35s var(--e-texto) 1.35s, transform .6s var(--e-texto) 1.35s; }
  .porque-vivo .porque-grafico:not(.visto) .porque-oval { opacity: 0; transform: translate(-45%, -46%) rotate(-6deg) scale(.7); }
}

/* ===== inicio-processo.css ===== */
/* ================= 8. PROCESSO (06) + 9. VITRINE =================
   Clone das dobras "The process" e "Play reel" do Mira (animacoes.md 1.8, 1.9 e 9).
   Estado padrão (sem JS ou com movimento reduzido): no computador os 4 painéis numa grade, tudo visível, e o cartão reto;
   no celular a fileira que rola na horizontal (do Mira, só CSS) e o cartão reto.
   .processo-vivo e .vitrine-viva (postas pelo js/secoes/inicio-processo.js) ligam o movimento. */

/* ---------- cabeça ---------- */
.processo { position: relative; padding-top: clamp(80px, 10vw, 150px); }
.processo-cabeca { align-items: start; }
.processo-rotulo { grid-column: 1 / span 3; padding-top: .7em; }
.processo-titulo { grid-column: 4 / -1; font-size: clamp(36px, 4.75vw, 84px); line-height: .94; max-width: 15.5em; }
.processo-textos { grid-column: 4 / span 4; display: grid; gap: 16px; margin-top: clamp(28px, 3.2vw, 46px); }
.processo-frase { margin: 0; font-weight: 800; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.06; letter-spacing: -0.035em;
  text-indent: 34%; text-wrap: pretty; }
.processo-frase .serifa { line-height: .9; }
.processo-frase-cinza { color: rgba(21, 20, 19, .52); } /* o cinza do Mira; .52 pra passar 3:1 em texto grande no creme */
/* o \n do título vira <br>; depois que o movimento.js quebra em linhas, o <br> sobra e dobraria o espaço */
.processo-titulo .linha + br { display: none; }
.processo-apoio { max-width: 38ch; font-size: clamp(14px, .98vw, 15px); }

/* ---------- painéis: estado padrão (grade no computador, tudo visível) ---------- */
.processo-trilha { position: relative; margin-top: clamp(56px, 6.2vw, 92px); }
.processo-palco { position: relative; z-index: 1; padding: 0 6px; }
.processo-paineis { --pad: clamp(18px, 2.1vw, 30px); list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.processo-painel { position: relative; overflow: clip; aspect-ratio: 3 / 4.2; border-radius: 10px; background: var(--tinta); color: var(--creme);
  isolation: isolate; }
.processo-foto { position: absolute; inset: 0; z-index: -3; }
.processo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* véu do Mira (preto a .55 no aberto, .75 no fechado), aqui em degradê de tinta pra foto quente respirar no meio */
.processo-veu { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(21,20,19,.5) 0%, rgba(21,20,19,.12) 26%, rgba(21,20,19,.18) 52%, rgba(21,20,19,.72) 80%, rgba(21,20,19,.9) 100%); }
.processo-escuro { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: rgba(21,20,19,.66); opacity: 0; }
/* número gigante cortado pela base (Ref 018 / Ref 038): só aparece no painel fechado do computador */
.processo-numero { display: none; }
.processo-topo { position: absolute; left: 0; right: 0; top: 0; height: 64px; padding: 0 var(--pad); display: flex; align-items: center; gap: 12px; }
.processo-num { font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.processo-pontos { margin-left: auto; display: flex; gap: 4px; }
.processo-pontos i { width: 5px; height: 5px; border-radius: 50%; background: var(--creme-50); }
.processo-pontos i.cheio { background: var(--creme); }
.processo-pe { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); }
.processo-nome { margin: 0; font-size: clamp(28px, 3vw, 50px); font-weight: 800; letter-spacing: -0.05em; line-height: .9; }
/* "←v1?" do kit anotando o passo de design: morde a borda do título, nunca a letra */
.processo-rabisco { display: inline-block; width: 2.3em; height: auto; margin-left: .32em; vertical-align: -.02em; rotate: -7deg; pointer-events: none; }
.processo-texto { margin: 14px 0 0; max-width: 30ch; font-size: clamp(14px, 1vw, 15px); font-weight: 600; line-height: 1.32; letter-spacing: -0.015em;
  color: rgba(246, 241, 232, .86); text-wrap: pretty; }
.processo-botao { display: none; }

/* ---------- celular (Mira, seção 9): fileira que rola na horizontal, cada cartão com 90% da tela e 450 px de altura ---------- */
@media (max-width: 899px) {
  .processo-rotulo, .processo-titulo, .processo-textos { grid-column: 1 / -1; }
  .processo-titulo { margin-top: 18px; }
  .processo-titulo br { display: none; }
  .processo-frase { text-indent: 22%; }
  .processo-palco { padding: 0; }
  .processo-paineis { --pad: 20px; display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 0 6px; scroll-padding-inline: 6px; scrollbar-width: none; }
  .processo-paineis::-webkit-scrollbar { display: none; }
  .processo-paineis:focus-visible { outline-offset: -2px; }
  .processo-painel { flex: 0 0 min(89vw, 420px); height: 450px; aspect-ratio: auto; scroll-snap-align: start; }
  .processo-nome { font-size: 34px; }
}

/* ---------- painéis vivos (computador): presos na tela, um se abre por vez ----------
   Cada painel tem a largura do aberto (--o) e é recortado dos dois lados pra virar estreito (--s): a foto fica centrada
   na janela, como no Mira, e só transform + clip-path se movem (.46 s, --e-mira). --o, --s e --g vêm do JS. */
@media (min-width: 900px) {
  .processo-vivo .processo-trilha { height: 400vh; }
  .processo-vivo .processo-palco { position: sticky; top: 0; height: 100vh; padding: 6px; will-change: transform; }
  .processo-vivo .processo-paineis { --c: calc((var(--o, 600px) - var(--s, 200px)) / 2); display: block; position: relative; height: 100%; }
  .processo-vivo .processo-painel { --d: 0px; --corte: 0px; position: absolute; top: 0; left: 0; height: 100%; width: var(--o, 600px); aspect-ratio: auto; border-radius: 0;
    transform: translate3d(calc(var(--i) * (var(--s, 200px) + var(--g, 4px)) + var(--d)), 0, 0);
    clip-path: inset(0 var(--corte) 0 var(--corte) round 10px);
    transition: transform .46s var(--e-mira), clip-path .46s var(--e-mira); }
  .processo-vivo .processo-painel.antes { --d: calc(var(--c) * -1); --corte: var(--c); }
  .processo-vivo .processo-painel.depois { --d: var(--c); --corte: var(--c); }
  .processo-vivo .processo-botao { display: block; position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--corte, 0px); right: var(--corte, 0px);
    border-radius: 10px; cursor: pointer; }
  .processo-vivo .processo-botao:focus-visible { outline-offset: -4px; }
  .processo-vivo .processo-topo { height: 76px; }
  .processo-vivo .processo-escuro,
  .processo-vivo .processo-pe,
  .processo-vivo .processo-pontos,
  .processo-vivo .processo-numero,
  .processo-vivo .processo-num { transition: opacity .46s var(--e-mira), transform .46s var(--e-mira); }
  .processo-vivo .processo-painel:not(.aberto) .processo-escuro { opacity: 1; }
  .processo-vivo .processo-painel:not(.aberto) .processo-pe,
  .processo-vivo .processo-painel:not(.aberto) .processo-pontos { opacity: 0; }
  .processo-vivo .processo-painel:not(.aberto) .processo-botao:hover ~ .processo-escuro { opacity: .7; }
  /* número: no meio do painel estreito, no canto quando abre */
  .processo-vivo .processo-num { position: absolute; left: 50%; transform: translateX(-50%); }
  .processo-vivo .processo-painel.aberto .processo-num { transform: translateX(calc(var(--o, 600px) / -2 + var(--pad))); }
  /* o número gigante fica no meio da janela estreita, cortado pela base, e some quando o painel abre */
  .processo-vivo .processo-numero { display: block; position: absolute; z-index: -1; left: 50%; bottom: 0; transform: translate(-50%, .2em);
    font-size: calc(var(--s, 200px) * .6); font-weight: 800; letter-spacing: -0.06em; line-height: .8; white-space: nowrap;
    color: rgba(246, 241, 232, .1); pointer-events: none; }
  .processo-vivo .processo-painel.aberto .processo-numero { opacity: 0; }
}

/* ---------- 9. vitrine: o cartão inclinado que se endireita e cresce ---------- */
.vitrine { position: relative; z-index: 2; margin-top: 6px; }
.vitrine-palco { position: relative; padding: 0 6px; }
.vitrine-cartao { position: relative; display: block; height: min(86vh, 860px); min-height: 460px; border-radius: 10px; overflow: clip;
  background: var(--tinta); color: var(--creme); isolation: isolate; transform-origin: 50% 50%; }
.vitrine-foto { position: absolute; inset: 0; z-index: -2; }
.vitrine-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%;
  transform: scale(1.16); transform-origin: 50% 100%; } /* a sacola desce do meio: o botão cai no verde liso, não em cima do logo dela */
/* sem grão por cima de imagem de projeto (referencias-figma.md, mapa: "Vitrine: não sobre o projeto") */
.vitrine-veu { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 60% at 50% 50%, rgba(21,20,19,.5), rgba(21,20,19,.28) 70%),
  linear-gradient(180deg, rgba(21,20,19,.25), rgba(21,20,19,.45)); }
/* o grupo do botão fica por cima do cartão, mas fora dele (como no Mira); o clique passa pro cartão */
.vitrine-rotulo { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: start; padding: 0 var(--g);
  color: var(--creme); pointer-events: none; }
.vitrine-linha { display: flex; align-items: center; gap: .16em; font-size: clamp(36px, 5.5vw, 94px); font-weight: 800; letter-spacing: -0.055em;
  line-height: .82; white-space: nowrap; }
.vitrine-palavra { display: block; padding-bottom: .06em; }
.vitrine-play { flex: none; display: grid; place-items: center; width: .62em; height: .62em; border-radius: 50%; background: var(--laranja); color: var(--tinta);
  box-shadow: 0 0 40px rgba(255, 90, 54, .35); transition: transform .5s var(--ease); }
.vitrine-play svg { width: 42%; height: 42%; transition: transform .5s var(--ease); }
.vitrine-cartao:is(:hover, :focus-visible) ~ .vitrine-rotulo .vitrine-play { transform: scale(1.1); }
.vitrine-cartao:is(:hover, :focus-visible) ~ .vitrine-rotulo .vitrine-play svg { transform: translateX(8%); }
.vitrine-sobre { margin-bottom: 10px; }
.vitrine-sob { justify-self: end; margin-top: 10px; color: var(--creme-70); }
.vitrine-cartao:focus-visible { outline-offset: -6px; }
@media (max-width: 899px) {
  .vitrine-cartao { height: clamp(380px, 52svh, 520px); min-height: 0; }
  .vitrine-foto img { object-position: 50% 50%; transform: none; }
  .vitrine-linha { gap: .14em; }
}

/* vivo, computador: seção de 250vh com o palco preso; o cartão entra por baixo, inclinado e em .6, logo depois que os painéis
   soltam, e se endireita nos 100vh seguintes; depois fica 50vh travado em tela cheia e solta (Mira 1.9) */
.vitrine-viva { pointer-events: none; }
.vitrine-viva .vitrine-palco { position: sticky; top: 0; overflow: clip; }
.vitrine-viva .vitrine-cartao { height: 100%; min-height: 0; pointer-events: auto; will-change: transform; backface-visibility: hidden; }
.vitrine-viva .vitrine-linha, .vitrine-viva .vitrine-palavra, .vitrine-viva .vitrine-sobre, .vitrine-viva .vitrine-sob { will-change: transform, opacity; }
@media (min-width: 900px) {
  .vitrine-viva { margin-top: 0; height: 250vh; }
  .vitrine-viva .vitrine-palco { height: 100vh; padding: 6px; }
}
/* vivo, celular (Mira, seção 9): palco de meia tela preso logo abaixo da barra, o cartão se endireita em 50vh */
@media (max-width: 899px) {
  .vitrine-viva { margin-top: 0; height: 100svh; }
  .vitrine-viva .vitrine-palco { top: 58px; height: 50svh; padding: 4px 6px 0; }
}

/* ===== inicio-servicos.css ===== */
/* ---------- 6. Serviços (04): clone da dobra "Services" do Mira ----------
   Cabeça em 12 colunas (rótulo na 4, título e intro na 7). Sanfona: cartões tinta quase de ponta a ponta,
   raio 12, grade interna de 4 colunas com 30 px de respiro (medidas do Mira em 1440).
   Fechado: véu tinta cheio, número + nome + "+". Aberto: véu a 85%, a imagem aparece por baixo.
   Movimento do Mira (animacoes.md 1.6): tudo em .46 s --e-mira; hover no fechado = véu a .65 e o "+" dá uma volta (-360°). */
.servicos { padding-block: clamp(80px, 10vw, 150px) clamp(64px, 8.4vw, 124px); }
.servicos-cabeca { align-items: start; }
.servicos-rotulo { grid-column: 4 / span 3; padding-top: clamp(4px, .6vw, 10px); }
.servicos-titulo { grid-column: 7 / -1; }
.servicos-intro { grid-column: 7 / span 4; margin: clamp(30px, 3.6vw, 54px) 0 0; font-size: clamp(18px, 1.5vw, 23px); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.1; text-align: justify; text-indent: 38%; hyphens: manual; }
.servicos-cinza { font-style: normal; color: var(--tinta-40); }
/* depois de quebrada em linhas (movimento.js), cada linha vira um bloco: a justificação passa pra cada linha, menos a última */
.js .servicos-intro.revela-linhas .linha > span { display: block; }
.js .servicos-intro.revela-linhas .linha:first-child > span { text-indent: 38%; }
.js .servicos-intro.revela-linhas .linha:not(:last-child) > span { text-align-last: justify; }

/* ---------- sanfona ---------- */
.servicos-lista { list-style: none; margin: clamp(48px, 5.6vw, 82px) 0 0; padding: 0 6px; display: grid; gap: 4px; }
.servicos-cartao { position: relative; overflow: clip; border-radius: 12px; background: var(--tinta); color: var(--creme); isolation: isolate; }
/* fundo: a mesma imagem, 4:3 centralizada e com altura mínima fixa (não reescala enquanto o cartão cresce) */
.servicos-fundo { position: absolute; z-index: 0; left: 0; width: 100%; top: 50%; aspect-ratio: 4 / 3; min-height: 820px; transform: translateY(-50%); pointer-events: none; }
.servicos-fundo img { width: 100%; height: 100%; object-fit: cover; }
.servicos-veu { position: absolute; inset: 0; z-index: 1; background: var(--tinta); opacity: .85; transition: opacity .46s var(--e-mira); pointer-events: none; }

/* cabeça do cartão: o botão é a linha inteira */
.servicos-cabeca-item { margin: 0; font: inherit; position: relative; z-index: 2; }
.servicos-botao { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: center;
  padding: 30px; text-align: left; border-radius: 12px; }
.servicos-botao:focus-visible { outline: 2px solid var(--laranja); outline-offset: -6px; }
.servicos-num { white-space: nowrap; }
.servicos-nome-curto { grid-column: 2 / span 2; font-size: clamp(21px, 2.3vw, 34px); font-weight: 800; letter-spacing: -0.045em; line-height: .94;
  white-space: nowrap; transition: opacity .46s var(--e-mira), transform .46s var(--e-mira); }
.servicos-mais { grid-column: 4; justify-self: end; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--creme);
  display: grid; transition: transform .46s var(--e-mira); }
.servicos-cruz { position: relative; overflow: clip; }
.servicos-cruz i { position: absolute; background: var(--tinta); }
.servicos-cruz i:first-child { left: 0; right: 0; top: calc(50% - 1px); height: 2px; }
.servicos-cruz i:last-child { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; transition: transform .46s var(--e-mira); }
.servicos-item.aberto .servicos-cruz i:last-child { transform: translateY(12px); }   /* o traço vertical desce e some: vira "−" */

/* painel: a altura abre com grid-template-rows 0fr -> 1fr (o "layout" do Framer); o conteúdo só cruza a opacidade, como no Mira */
.servicos-painel { position: relative; z-index: 2; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .46s var(--e-mira); }
.servicos-painel-dentro { min-height: 0; overflow: hidden; }
.servicos-info { padding: 10px 30px 30px; display: grid; gap: 60px; transition: opacity .46s var(--e-mira); }
.servicos-linha-1, .servicos-linha-2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: end; }
.servicos-miniatura { grid-column: 1; position: relative; margin: 0; }
.servicos-miniatura img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.servicos-texto { grid-column: 3 / span 2; display: grid; gap: 20px; justify-items: start; }
.servicos-nome { margin: 0; color: var(--creme); max-width: 5.6em; }   /* nome de duas palavras quebra em 2 linhas, como o "Brand / Identity." do Mira */
.servicos-prazo { margin-top: -8px; }
.servicos-apagado { color: var(--creme-50); }
.servicos-desc { margin: 0; max-width: 30ch; font-size: 14px; line-height: 1.4; color: var(--creme-70); text-wrap: balance; }
.servicos-credito, .servicos-inclui { margin: 0; display: flex; align-items: flex-end; gap: 15px; }
.servicos-credito { grid-column: 1 / span 2; }
.servicos-inclui { grid-column: 3; }
.servicos-credito dd, .servicos-inclui dd { margin: 0; }
.servicos-inclui ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.servicos-link { position: relative; }
.servicos-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.servicos-link:hover::after, .servicos-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.servicos-cta { grid-column: 4; justify-self: end; white-space: nowrap; }

/* visor da câmera (E04 do kit, laranja no escuro): só na miniatura da Fotografia, mordendo a borda da foto. UI fica reta. */
.servicos-visor::after { content: ""; position: absolute; inset: -9px; pointer-events: none;
  border-style: solid; border-width: 0; border-image: url("../marca/kit-E04-laranja.webp") 142 192 / clamp(36px, 5.4vw, 78px) clamp(48px, 7.3vw, 105px); }

/* ---------- estados (só com JS: sem JS, os três ficam abertos e legíveis) ---------- */
.js .servicos-item:not(.aberto) .servicos-veu { opacity: 1; }
.js .servicos-item:not(.aberto) .servicos-painel { grid-template-rows: 0fr; }
.js .servicos-item:not(.aberto) .servicos-info { opacity: 0; }
.js .servicos-item:not(.aberto) .servicos-painel-dentro { visibility: hidden; transition: visibility 0s linear .46s; }
.js .servicos-item.aberto .servicos-nome-curto { opacity: 0; transform: translateY(-50px); }   /* Mira: top -50 px e some */
@media (hover: hover) {
  /* Mira: no fechado, a foto aparece por trás (véu 1 -> .65) e o "+" dá uma volta; ao abrir, ele volta girando e vira "−" */
  .js .servicos-item:not(.aberto):hover .servicos-veu { opacity: .65; }
  .js .servicos-item:not(.aberto):hover .servicos-mais { transform: rotate(-360deg); }
}

/* ---------- celular (Mira 390: cartões a 4 px da borda, 2 colunas por dentro) ---------- */
@media (max-width: 899px) {
  .servicos-rotulo, .servicos-titulo, .servicos-intro { grid-column: 1 / -1; }
  .servicos-titulo { margin-top: 18px; }
  .servicos-intro { margin-top: 28px; text-indent: 34%; }
  .js .servicos-intro.revela-linhas .linha:first-child > span { text-indent: 34%; }
  .servicos-lista { padding: 0 4px; }
  .servicos-botao { grid-template-columns: 72px minmax(0, 1fr) 20px; gap: 16px; padding: 22px 20px; }
  .servicos-nome-curto { grid-column: 2; }
  .servicos-mais { grid-column: 3; }
  .servicos-info { padding: 0 20px 24px; gap: 30px; }
  .servicos-linha-1, .servicos-linha-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  .servicos-miniatura { grid-column: 1; }
  .servicos-texto { grid-column: 1 / -1; gap: 16px; }
  .servicos-nome { font-size: clamp(36px, 10.4vw, 48px); max-width: none; }
  .servicos-prazo { margin-top: -6px; }
  .servicos-credito, .servicos-inclui { flex-direction: column; align-items: flex-start; gap: 12px; }
  .servicos-inclui ul { gap: 9px; }   /* item que quebra em 2 linhas ainda lê como um só */
  .servicos-inclui { grid-column: 1; order: 0; }
  .servicos-credito { grid-column: 2; order: 1; }
  .servicos-cta { grid-column: 1 / -1; order: 2; justify-self: start; margin-top: 6px; }
  .servicos-visor::after { inset: -7px; }
}

/* sem JS: tudo aberto, então o "+" (que não faria nada) sai e o nome pequeno some da vista, mas segue como nome do botão pro leitor de tela */
html:not(.js) .servicos-mais { visibility: hidden; }
html:not(.js) .servicos-nome-curto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== pagina-blog.css ===== */
/* BLOG (/blog) e POST (/blog/<slug>) · clone do /journal e do post do Mira (paginas/journal_*.jpg e post_*.jpg;
   animacoes.md, seções 5, 6, 8.5 e 1.14). Tudo com prefixo blog-.
   Lista: barra logo | Blog (n) | ano, título na 2ª coluna, frase de duas cores, grade de 4 colunas em alvenaria
   (o js põe .blog-alvenaria; sem js é uma grade comum). Post: capa presa à esquerda (desfocada no fundo, nítida no meio),
   ficha e artigo à direita, "Mais histórias" embaixo. Movimento só com transform e opacity. */

.pagina-blog { --blog-gap: clamp(12px, 1.4vw, 20px); --blog-fila: 40px; }

/* ================= LISTA ================= */
.blog-lista { padding: 18px var(--g) clamp(52px, 5.4vw, 80px); }

/* barra do Mira: 4 colunas, como o menu */
.blog-barra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--blog-gap); align-items: center;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.blog-barra p { margin: 0; }
.blog-barra-logo { width: max-content; }
.blog-barra-logo img { height: 18px; width: auto; }
.blog-barra sup { color: var(--laranja); font-size: .7em; margin-left: .15em; }
.blog-barra-ano { grid-column: 4; }

/* título na 2ª coluna e a frase embaixo, com a 1ª linha recuada (Mira: "OUR JOURNAL." + "NOTES FROM THE STUDIO…") */
.blog-abertura { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--blog-gap); margin-top: clamp(70px, 8.4vw, 122px); }
.blog-titulo { grid-column: 2 / -1; }
.blog-frase { grid-column: 2 / span 2; max-width: 30em; margin: clamp(22px, 2.3vw, 34px) 0 0; font-size: clamp(14px, 1.15vw, 17px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.14; text-transform: uppercase; text-indent: 30%; text-wrap: pretty; }
.blog-frase-apagada { color: var(--tinta-60); }
.blog-frase-link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .16em; transition: text-decoration-color .3s var(--e-padrao); }
.blog-frase-link:hover { text-decoration-color: var(--laranja); }

/* ---------- grade de cartões ---------- */
.blog-grade { list-style: none; margin: clamp(80px, 9vw, 130px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--blog-fila) var(--blog-gap); align-items: start; }
/* alvenaria (o js mede cada cartão e põe --linhas): cada coluna empilha os seus, na ordem do Mira (o 5º embaixo do 1º) */
.blog-grade.blog-alvenaria { grid-auto-rows: 4px; grid-auto-flow: row dense; row-gap: 0; }
.blog-alvenaria > .blog-item { grid-row-end: span var(--linhas, 1); }
@media (min-width: 1100px) {
  .blog-alvenaria > .blog-item:nth-child(4n + 1) { grid-column: 1; }
  .blog-alvenaria > .blog-item:nth-child(4n + 2) { grid-column: 2; }
  .blog-alvenaria > .blog-item:nth-child(4n + 3) { grid-column: 3; }
  .blog-alvenaria > .blog-item:nth-child(4n + 4) { grid-column: 4; }
}

/* ---------- cartão de artigo (Mira 8.5) ---------- */
.blog-item { margin: 0; }
.blog-cartao { display: grid; gap: 10px; color: inherit; }
.blog-cartao-cat, .blog-cartao-data { color: var(--tinta-60); }
.blog-cartao-cat { min-height: 1.2em; }
.blog-cartao-capa { position: relative; isolation: isolate; overflow: clip; border-radius: 10px; aspect-ratio: var(--forma, 3 / 4); background: var(--creme-2); }
/* hover: o fundo (a mesma capa, já desfocada) cresce e a capa nítida encolhe pra 75% no meio */
.blog-cartao-fundo { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; object-position: var(--foco, 50% 50%);
  filter: blur(5px); transition: transform .56s var(--e-mira); }   /* Mira 8.5 e o cartão da inicial: blur(5px) fixo, só a escala anima */
.blog-cartao-frente { position: absolute; inset: 0; z-index: 1; overflow: clip; border-radius: 10px; transition: transform .56s var(--e-mira); }
.blog-cartao-frente img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); }
.blog-cartao:hover .blog-cartao-frente, .blog-cartao:focus-visible .blog-cartao-frente { transform: scale(.75); }
.blog-cartao:hover .blog-cartao-fundo, .blog-cartao:focus-visible .blog-cartao-fundo { transform: scale(1.2); }
.blog-cartao:focus-visible { outline: none; }
.blog-cartao:focus-visible .blog-cartao-capa { outline: 2px solid var(--laranja); outline-offset: 3px; }
.blog-cartao-titulo { margin: 4px 0 0; font-size: clamp(17px, 1.5vw, 22px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
/* as quebras da copy (\n): no cartão largo cada pedaço é uma linha; no estreito o título corre e equilibra */
@media (min-width: 700px) { .blog-cartao-titulo > span { display: block; } }
.blog-cartao-data { margin-top: -3px; }

/* entrada dos cartões (Mira 5 e 1.14): sobem 40 px e aparecem, .85 s, curva de texto; o atraso vem no style */
@media (prefers-reduced-motion: no-preference) {
  .js .blog-item.revela { transition: opacity .85s var(--e-texto), transform .85s var(--e-texto); transition-delay: var(--atraso, 0s); }
  .js .blog-item.revela:not(.visto) { transform: translateY(40px); }
  /* o bloco de cima do Mira: y 40 com a mola M3 */
  .js .blog-frase.revela, .js .blog-vazio.revela { transition: opacity 1367ms var(--m3), transform 1367ms var(--m3); transition-delay: var(--atraso, 0s); }
}

/* ---------- capa reserva (referencias-figma.md, receita 10 em camadas): ferrugem, luz, ✱ desfocado e grão ---------- */
.blog-reserva { position: absolute; inset: 0; overflow: clip; isolation: isolate; contain: paint;
  background:
    radial-gradient(58% 52% at var(--rx, 72%) var(--ry, 78%), var(--laranja) 0%, rgb(255 90 54 / 0) 70%),
    radial-gradient(85% 80% at 60% 64%, var(--brasa) 0%, rgb(196 52 26 / 0) 75%),
    linear-gradient(160deg, var(--ferrugem) 0%, #8A2410 55%, var(--ferrugem) 100%); }
.blog-reserva::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url(../marca/grao-256.png) 0 0 / 256px 256px;
  mix-blend-mode: overlay; opacity: .3; }   /* grão fino; a .45 o ferrugem virava chuvisco */
.blog-reserva-brilho { position: absolute; z-index: 0; width: 170%; height: auto; max-width: none; left: var(--ax, -34%); top: var(--ay, -26%);
  transform: rotate(var(--rg, -8deg)); mix-blend-mode: screen; opacity: .8; }
.blog-reserva-ast { position: absolute; z-index: 3; width: 24%; height: auto; right: 16%; bottom: 16%; transform: rotate(6deg); }

/* ---------- estado vazio ---------- */
.blog-vazio { position: relative; isolation: isolate; overflow: clip; margin-top: clamp(80px, 9vw, 130px); min-height: clamp(400px, 38vw, 560px);
  border-radius: 12px; background: var(--creme-2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--blog-gap);
  align-content: end; padding: clamp(24px, 3vw, 44px); }
.blog-vazio-ast { position: absolute; z-index: -1; width: min(80vw, 1100px); height: auto; max-width: none; right: -34%; bottom: -78%;
  opacity: .05; transform: rotate(14deg); pointer-events: none; }   /* o miolo do ✱ longe do texto (SPEC, regra 7) */
.blog-vazio-texto { grid-column: 2 / span 2; display: grid; gap: 18px; justify-items: start; }
.blog-vazio-rotulo { color: var(--tinta-60); }
.blog-vazio-titulo { margin: 0; }
.blog-vazio-apoio { max-width: 34ch; }
.blog-vazio-link { margin-top: 6px; }
.blog-vazio-rabisco { position: absolute; right: clamp(28px, 7vw, 120px); top: clamp(30px, 4.4vw, 64px); width: clamp(92px, 9.5vw, 142px); height: auto; transform: rotate(-7deg); }

/* ================= POST ================= */
.blog-post { position: relative; }
.blog-post-capa { position: relative; isolation: isolate; overflow: clip; border-radius: 12px; background: var(--tinta); color: var(--creme); }
.blog-post-capa-fundo { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.blog-post-capa-fundo img { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover;
  filter: blur(26px) saturate(1.05); opacity: .8; transform: scale(1.02); }
/* sombra no alto, pro "Voltar" ler sobre qualquer capa */
.blog-post-capa-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(21 20 19 / .62), rgb(21 20 19 / 0) 28%); }   /* creme 13 px legível até sobre capa clara (Omo) */
.blog-post-capa-frente { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%;
  width: min(54%, calc((100svh - 12px) * .64 * var(--ar, .75))); border-radius: 10px; overflow: clip; }
.blog-post-capa-frente img { width: 100%; height: auto; }
.blog-post-capa .blog-reserva { z-index: 0; }
.blog-post-voltar { position: absolute; z-index: 3; left: clamp(18px, 2vw, 28px); top: 26px; color: var(--creme); font-size: 13px; }
.blog-post-voltar .seta svg { width: 9px; height: 9px; }

.blog-post-info { display: grid; grid-template-rows: auto 1fr auto; padding: 24px clamp(20px, 2.6vw, 36px) 36px; }
.blog-post-info-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 22px; }
.blog-post-logo img { height: 18px; width: auto; }
.blog-post-info-meio { align-self: center; justify-self: center; display: grid; justify-items: center; gap: 18px; max-width: 640px; padding-block: 48px; text-align: center; }
.blog-post-cat { color: var(--tinta-60); }
.blog-post-titulo { margin: 0; font-size: clamp(36px, 3.9vw, 62px); font-weight: 800; letter-spacing: -0.05em; line-height: .94; text-wrap: balance; }
.blog-post-resumo { margin: 2px 0 0; max-width: 42ch; font-size: clamp(14px, 1.02vw, 16px); line-height: 1.42; color: var(--tinta-60); text-wrap: balance; }
.blog-post-autor { justify-self: center; display: flex; align-items: center; gap: 12px; }
.blog-post-autor img { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; object-position: 50% 28%; }
.blog-post-autor p { margin: 0; display: grid; font-size: 13px; line-height: 1.3; letter-spacing: -0.01em; }
.blog-post-autor-nome { font-weight: 700; }
.blog-post-autor-papel { color: var(--tinta-60); }

/* ---------- artigo: coluna de 500 px, como no Mira ---------- */
.blog-artigo { width: min(calc(100% - 2 * clamp(20px, 2.6vw, 36px)), 500px); margin-inline: auto; padding-block: clamp(36px, 5vw, 80px) 24px; }
/* o "cabeçalho do artigo": 1º parágrafo em caixa alta, justificado, 1ª linha recuada */
.blog-artigo-intro { margin: 0 0 clamp(32px, 3vw, 46px); font-size: clamp(16px, 1.32vw, 19px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.16;
  text-transform: uppercase; text-align: justify; text-indent: 30%; }
.blog-artigo-intro a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .14em; }
/* depois que o movimento.js quebra em linhas, cada linha é um bloco: justifica todas menos a última */
.js .blog-artigo-intro .linha > span { display: block; text-align: justify; text-align-last: justify; }
.js .blog-artigo-intro .linha:last-child > span { text-align-last: auto; }
.blog-artigo-intro .linha:first-child > span { text-indent: 30%; }

.blog-artigo-corpo { font-size: clamp(15px, 1.05vw, 16px); line-height: 1.62; color: rgb(21 20 19 / .74); text-wrap: pretty; }
.blog-artigo-corpo > * { margin: 0; }
.blog-artigo-corpo > * + * { margin-top: 1.05em; }
.blog-artigo-corpo h2, .blog-artigo-corpo h3, .blog-artigo-corpo h4 { color: var(--tinta); font-weight: 800; text-transform: uppercase; text-wrap: balance; }
.blog-artigo-corpo h2 { margin-top: clamp(40px, 3.6vw, 54px); font-size: clamp(18px, 1.45vw, 21px); letter-spacing: -0.03em; line-height: 1.04; }
.blog-artigo-corpo h3, .blog-artigo-corpo h4 { margin-top: 32px; font-size: 15px; letter-spacing: -0.02em; line-height: 1.1; }
.blog-artigo-corpo :is(h2, h3, h4) + * { margin-top: 16px; }
.blog-artigo-corpo a { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .3s var(--e-padrao); }
.blog-artigo-corpo a:hover { text-decoration-color: var(--laranja); text-decoration-thickness: 2px; }
.blog-artigo-corpo strong { color: var(--tinta); font-weight: 700; }
.blog-artigo-corpo blockquote { padding-left: 18px; border-left: 2px solid var(--laranja); color: var(--tinta); font-size: 1.1em; font-weight: 700;
  line-height: 1.38; letter-spacing: -0.025em; }
.blog-artigo-corpo blockquote > * { margin: 0; }
.blog-artigo-corpo blockquote > * + * { margin-top: .7em; }
.blog-artigo-corpo :is(ul, ol) { padding-left: 1.25em; }
.blog-artigo-corpo li + li { margin-top: .45em; }
.blog-artigo-corpo li::marker { color: var(--laranja); font-weight: 700; }
.blog-artigo-corpo hr { height: 1px; border: 0; background: var(--tinta-12); margin-block: 40px; }
.blog-artigo-corpo img { width: 100%; height: auto; border-radius: 8px; }
.blog-artigo-corpo code { font-size: .9em; padding: .1em .35em; border-radius: 4px; background: var(--creme-2); }

/* fontes (o blog promete as fontes no fim de cada texto) */
.blog-fontes { margin-top: clamp(48px, 5vw, 66px); padding-top: 20px; border-top: 1px solid var(--tinta-12); }
.blog-fontes-titulo { margin: 0 0 14px; }
.blog-fontes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: blog-fonte; }
.blog-fontes-lista li { counter-increment: blog-fonte; display: grid; grid-template-columns: 2.1em minmax(0, 1fr); font-size: 13px; line-height: 1.35; color: var(--tinta-60); }
.blog-fontes-lista li::before { content: counter(blog-fonte, decimal-leading-zero); font-weight: 700; font-variant-numeric: tabular-nums; }
.blog-fontes-lista a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color .3s var(--e-padrao); }
.blog-fontes-lista a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: .2em; }

/* compartilhar (Mira: SHARE + ícones; aqui os nomes, em caixa alta pequena, com o rolo de texto) */
.blog-partilha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--tinta-12); }
.blog-fontes:not([hidden]) + .blog-partilha { margin-top: 26px; }
.blog-partilha-rotulo { color: var(--tinta-60); }
.blog-partilha-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.blog-partilha-lista li { display: flex; }
.blog-partilha-lista :is(a, button) { display: block; font-weight: 700; line-height: 1.2; }

/* ---------- Mais histórias (Mira: "MORE ARTICLES." na 2ª coluna, VIEW ALL à direita) ---------- */
.blog-mais-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--blog-gap); align-items: end; }
.blog-mais-titulos { grid-column: 4 / 10; display: grid; gap: 20px; justify-items: start; }
.blog-mais-titulo { margin: 0; }
.blog-mais-todos { grid-column: 10 / -1; justify-self: end; margin-bottom: .4em; }
.blog-grade-mais { margin-top: clamp(56px, 5.6vw, 80px); }

/* ---------- computador: duas metades, capa presa (Mira: 707 px de 1440, sticky, 100vh) ---------- */
@media (min-width: 900px) {
  .blog-post { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); align-items: start; }
  .blog-post-capa { position: sticky; top: 6px; height: calc(100svh - 12px); min-height: 540px; margin-top: 6px; }
  .blog-post-info { min-height: 100svh; }
}

/* ---------- movimento do post (Mira 6): tudo ao carregar, depois da transição de página ---------- */
/* no /blog/_cms o relógio começa quando o js preenche, por isso o --blog-ini adianta tudo */
.blog-post-cms { --blog-ini: -.75s; }
@media (prefers-reduced-motion: no-preference) {
  .js .blog-post:not(.blog-post-vazio) .blog-post-capa-fundo img { animation: blog-fundo 1367ms var(--m3) calc(var(--blog-ini, 0s) + .8s) both; }
  .js .blog-post:not(.blog-post-vazio) .blog-post-capa-frente { animation: blog-frente 1367ms var(--m3) calc(var(--blog-ini, 0s) + .9s) both; }
  .js .blog-post:not(.blog-post-vazio) .blog-post-voltar { animation: blog-aparece 1168ms var(--m1) calc(var(--blog-ini, 0s) + 1.2s) both; }
  .js .blog-post:not(.blog-post-vazio) .blog-post-cat { --blog-y: 15px; animation: blog-sobe .6s var(--e-texto) calc(var(--blog-ini, 0s) + 1.1s) both; }
  .js .blog-post:not(.blog-post-vazio) .blog-post-titulo { --blog-y: 40px; animation: blog-sobe 1367ms var(--m3) calc(var(--blog-ini, 0s) + 1s) both; }
  .js .blog-post:not(.blog-post-vazio) .blog-post-resumo { --blog-y: 15px; animation: blog-sobe .8s var(--e-texto) calc(var(--blog-ini, 0s) + 1.15s) both; }
  .js .blog-post:not(.blog-post-vazio) .blog-post-autor { animation: blog-aparece 1168ms var(--m1) calc(var(--blog-ini, 0s) + 1.3s) both; }
  .js .blog-post:not(.blog-post-vazio) .blog-post-info-topo { animation: blog-aparece 1168ms var(--m1) calc(var(--blog-ini, 0s) + 1.5s) both; }
  /* corpo do artigo: y 40 com a mola M3, atraso .2 s, no 1º pixel (o .revela do movimento.js) */
  .js .blog-artigo-corpo.revela, .js .blog-artigo-intro.revela { transition: opacity 1367ms var(--m3), transform 1367ms var(--m3); transition-delay: var(--atraso, 0s); }
  @keyframes blog-fundo { from { opacity: 0; transform: scale(1.3); } }
  @keyframes blog-frente { from { opacity: 0; transform: scale(1.3); } }
  @keyframes blog-sobe { from { opacity: 0; transform: translateY(var(--blog-y, 40px)); } }
  @keyframes blog-aparece { from { opacity: 0; } }
}

/* ---------- tablet e celular ---------- */
@media (max-width: 1099px) {
  .blog-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-grade-mais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-alvenaria > .blog-item:nth-child(3n + 1) { grid-column: 1; }
  .blog-alvenaria > .blog-item:nth-child(3n + 2) { grid-column: 2; }
  .blog-alvenaria > .blog-item:nth-child(3n + 3) { grid-column: 3; }
}
@media (max-width: 899px) {
  .pagina-blog { --blog-fila: 30px; }
  /* Mira no celular: a barra preta fica por cima da capa do post */
  body.pagina-post .pagina { padding-top: 0; }

  .blog-lista { padding-top: 22px; }
  .blog-barra { grid-template-columns: 1fr auto; font-size: 14px; }
  .blog-barra-logo { display: none; }
  .blog-barra-ano { grid-column: auto; }
  .blog-abertura { grid-template-columns: minmax(0, 1fr); margin-top: clamp(46px, 13vw, 70px); }
  .blog-titulo, .blog-frase { grid-column: 1 / -1; }
  .blog-frase { max-width: 36em; font-size: 15px; margin-top: 22px; }
  .blog-grade { margin-top: clamp(48px, 14vw, 64px); column-gap: 16px; }
  .blog-cartao { gap: 8px; }
  .blog-cartao-titulo { font-size: 16px; }

  .blog-vazio { grid-template-columns: minmax(0, 1fr); min-height: 460px; padding: 22px; }
  .blog-vazio-texto { grid-column: 1; }
  .blog-vazio-ast { width: 170vw; right: -96%; bottom: -46%; }
  .blog-vazio-rabisco { right: 22px; top: 26px; width: 96px; }

  .blog-post-capa { height: 74svh; min-height: 470px; margin: 6px 6px 0; }
  .blog-post-capa-frente { width: min(54%, calc(74svh * .58 * var(--ar, .75))); }
  .blog-post-voltar { top: 78px; left: 18px; }
  .blog-post-info { display: block; padding: 32px var(--g) 0; }
  .blog-post-info-topo { justify-content: center; }
  .blog-post-logo { display: none; }
  .blog-post-info-meio { padding-block: 26px 30px; gap: 16px; }
  .blog-post-titulo { font-size: clamp(32px, 9.4vw, 46px); }
  .blog-post-resumo { font-size: 15px; }
  .blog-post-autor { justify-content: center; }
  .blog-artigo { width: auto; margin-inline: var(--g); padding-top: 56px; }
  .blog-artigo-intro { font-size: 16px; letter-spacing: -0.02em; }
  .blog-partilha { align-items: flex-start; flex-direction: column; }

  .blog-mais-titulos { grid-column: 1 / 9; gap: 14px; }
  .blog-mais-todos { grid-column: 9 / -1; margin-bottom: .2em; }
  .blog-grade-mais { margin-top: 40px; }
}
@media (max-width: 699px) {
  .blog-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-alvenaria > .blog-item:nth-child(2n + 1) { grid-column: 1; }
  .blog-alvenaria > .blog-item:nth-child(2n + 2) { grid-column: 2; }
}

/* ===== pagina-contato.css ===== */
/* Páginas CONTATO (/contato), PRIVACIDADE e TERMOS (legal.html) e 404. Clone das mesmas páginas do Mira.
   Prefixos: .pagina-contato-* (contato), .pagina-legal-* (privacidade e termos), .pagina-erro-* (404).
   No contato, o cartão do formulário e o FAQ são as dobras da página inicial (inicio-contato-blog e inicio-instagram-faq):
   aqui só se ajusta o que muda nesta página, sempre dentro de body.pagina-contato.
   Movimento: só transform e opacity; tempos do Mira depois da transição de página (animacoes.md, seção 7);
   sem JS ou com prefers-reduced-motion, tudo parado e visível. */

/* =================== CONTATO =================== */

/* --- 1. topo (Mira: não fica preso nem encolhe) --- */
.pagina-contato-topo { padding-top: clamp(64px, 8.4vw, 124px); padding-bottom: clamp(28px, 2.5vw, 36px); }
.pagina-contato-grade { align-items: start; }
.pagina-contato-cabeca { grid-column: 4 / -1; }
.pagina-contato-titulo { margin: 0; font-weight: 800; font-size: clamp(46px, 6.5vw, 112px); letter-spacing: -0.05em; line-height: .9; text-wrap: balance; }
.pagina-contato-titulo .serifa { line-height: .78; }
/* depois que o movimento.js parte o título em linhas (blocos), o <br> da copy sobraria como uma linha vazia */
.js .pagina-contato-titulo .linha + br { display: none; }
.pagina-contato-sub { grid-column: 4 / span 5; margin: clamp(26px, 2.5vw, 36px) 0 0; max-width: 31em;
  font-size: clamp(17px, 1.4vw, 21px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.16;
  text-indent: 22%; text-wrap: pretty; }
.pagina-contato-sub-1 { color: var(--tinta-60); }

/* a linha de baixo do Mira: rede | "Address" | "Office hours" */
.pagina-contato-linha { margin-top: clamp(64px, 8vw, 120px); align-items: end; }
.pagina-contato-redes { grid-column: 1 / span 3; display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pagina-contato-redes a { display: grid; place-items: center; width: 22px; height: 22px; transition: opacity .3s var(--e-padrao); }
.pagina-contato-redes a:hover { opacity: .5; }
.pagina-contato-redes svg { width: 19px; height: 19px; }
.pagina-contato-dado { margin: 0; display: flex; align-items: flex-end; gap: 14px; min-width: 0; }
.pagina-contato-dado dt { flex: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.25; }
.pagina-contato-dado dd { margin: 0; display: grid; justify-items: start; min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--tinta-60); }
.pagina-contato-dado a { max-width: 100%; overflow-wrap: anywhere; transition: color .3s var(--e-padrao); }
.pagina-contato-dado a:hover { color: var(--tinta); }
.pagina-contato-dado-email { grid-column: 4 / span 5; }
.pagina-contato-dado-ig { grid-column: 10 / -1; }

/* --- 2. o cartão (dobra da inicial): no Mira o bloco inteiro ainda sobe 40 px ao carregar (.85 s, atraso 1,4 s) --- */
.pagina-contato .inicio-contato-rotulo .num,
.pagina-contato .faq-rotulo .num { display: none; }        /* os números (09) e (08) são da ordem da página inicial */

/* --- 3. o FAQ (dobra da inicial): o formulário fica em cima nesta página, então a seta do atalho aponta pra cima --- */
.pagina-contato .faq-form .seta svg { rotate: 180deg; }

@media (prefers-reduced-motion: no-preference) {
  .js .pagina-contato-cabeca.revela { transition-duration: 1367ms; transition-timing-function: var(--m3); }
  .js .pagina-contato-cartao { animation: pagina-contato-sobe .85s var(--e-texto) 1.4s both; }
  @keyframes pagina-contato-sobe { from { opacity: 0; transform: translateY(40px); } }
}

@media (max-width: 899px) {
  .pagina-contato-topo { padding-top: 64px; padding-bottom: 28px; }
  .pagina-contato-cabeca, .pagina-contato-sub { grid-column: 1 / -1; }
  .pagina-contato-titulo { font-size: clamp(44px, 12.6vw, 72px); }
  .pagina-contato-sub { margin-top: 22px; font-size: 16px; text-indent: 18%; }
  .pagina-contato-linha { margin-top: 52px; row-gap: 26px; align-items: start; }
  .pagina-contato-redes { grid-column: 1 / -1; }
  .pagina-contato-dado { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pagina-contato-dado-email { grid-column: 1 / span 7; }
  .pagina-contato-dado-ig { grid-column: 8 / -1; }
  .pagina-contato-dado dd { font-size: 13px; }
}

/* =================== PRIVACIDADE E TERMOS =================== */
/* (o body desta página também tem a classe .pagina-legal: as regras vão no artigo) */
.pagina-legal-artigo { padding-top: clamp(64px, 8.4vw, 124px); padding-bottom: clamp(90px, 10vw, 160px); }
.pagina-legal-artigo > .grade { align-items: start; }
.pagina-legal-lado { grid-column: 1 / span 3; align-self: stretch; }
/* Mira: o "Last updated" fica preso na coluna da esquerda enquanto o texto rola */
.pagina-legal-preso { position: sticky; top: 28px; display: grid; gap: 40px; padding-top: 1.1em; }
.pagina-legal-data { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pagina-legal-indice ol { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pagina-legal-indice a { display: inline-block; max-width: 22ch; font-size: 13px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25;
  color: var(--tinta-60); transition: color .3s var(--e-padrao); }
.pagina-legal-indice a:hover { color: var(--tinta); }

.pagina-legal-corpo { grid-column: 4 / span 6; min-width: 0; }
.pagina-legal-titulo { margin: 0; font-weight: 800; font-size: clamp(46px, 6.5vw, 112px); letter-spacing: -0.05em; line-height: .9; text-wrap: balance; }
/* abertura do Mira: texto pesado com a primeira linha recuada. O Mira justifica, mas na Inter (mais larga que a condensada)
   o justificado abre buracos entre as palavras: aqui fica alinhado à esquerda, com as linhas equilibradas */
.pagina-legal-intro { margin-top: clamp(30px, 3vw, 44px); max-width: 31em; }
.pagina-legal-intro p { margin: 0; font-size: clamp(18px, 1.45vw, 22px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.18;
  text-indent: 22%; text-wrap: pretty; }
.pagina-legal-intro p + p { margin-top: .8em; text-indent: 0; }
.pagina-legal-secao { margin-top: clamp(56px, 5.6vw, 84px); scroll-margin-top: 28px; }
.pagina-legal-h2 { margin: 0 0 clamp(16px, 1.4vw, 22px); font-weight: 800; font-size: clamp(26px, 2.5vw, 40px); letter-spacing: -0.045em; line-height: .98; text-wrap: balance; }
/* coluna de leitura: ~65 caracteres por linha */
.pagina-legal-texto { max-width: 34em; }
.pagina-legal-texto p, .pagina-legal-texto li { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: rgb(21 20 19 / .74); text-wrap: pretty; }
.pagina-legal-texto p { margin: 0 0 1em; }
.pagina-legal-texto > :last-child { margin-bottom: 0; }
.pagina-legal-texto ul, .pagina-legal-texto ol { margin: 0 0 1em; padding-left: 1.2em; }
.pagina-legal-texto a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--tinta-40); text-underline-offset: 3px; }
.pagina-legal-texto strong { color: var(--tinta); font-weight: 700; }

.pagina-legal-pe { margin-top: clamp(80px, 8vw, 120px); padding-top: 26px; border-top: 1px solid var(--tinta-12);
  display: flex; flex-wrap: wrap; gap: 32px clamp(48px, 7vw, 110px); }
.pagina-legal-pe > div { display: grid; gap: 12px; justify-items: start; }

@media (prefers-reduced-motion: no-preference) {
  .js .pagina-legal-cabeca.revela { transition-duration: 1367ms; transition-timing-function: var(--m3); }
}

@media (max-width: 899px) {
  .pagina-legal-artigo { padding-top: 64px; }
  .pagina-legal-lado, .pagina-legal-corpo { grid-column: 1 / -1; }
  .pagina-legal-preso { position: static; padding-top: 0; }
  .pagina-legal-indice { display: none; }             /* no celular o Mira só mostra a data em cima do título */
  .pagina-legal-corpo { margin-top: 22px; }
  .pagina-legal-titulo { font-size: clamp(44px, 12.6vw, 72px); }
  .pagina-legal-intro p { font-size: 17px; text-indent: 18%; }
  .pagina-legal-secao { scroll-margin-top: 76px; }    /* a barra do celular fica presa no alto */
}

/* =================== 404 =================== */
/* uma tela só, como no Mira: sem rodapé */
.pagina-erro .rodape { display: none; }
.pagina-erro-palco { height: 100svh; min-height: 560px; padding: 6px; }
.pagina-erro-cartao { position: relative; height: 100%; isolation: isolate; contain: paint; overflow: clip; border-radius: 12px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--tinta); color: var(--creme); }

/* fundo no estilo da capa do Behance: a brasa sobe de baixo, um ✱ gigante desfocado cortado pela borda e o grão (abaixo da letra) */
.pagina-erro-cena { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none;
  background:
    radial-gradient(66% 52% at 50% 112%, rgb(196 52 26 / .55) 0%, rgb(196 52 26 / 0) 72%),
    radial-gradient(40% 42% at 8% 104%, rgb(255 90 54 / .26) 0%, rgb(255 90 54 / 0) 70%); }
.pagina-erro-fundo-ast { position: absolute; width: 118vw; max-width: none; height: auto; right: -56vw; top: -64vw; rotate: 14deg; opacity: .42; }
.pagina-erro-grao { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url(../marca/grao-256.png) 0 0 / 256px 256px; mix-blend-mode: screen; opacity: .07; }

.pagina-erro-cartao > .cabecalho { grid-row: 1; position: relative; z-index: 3; padding-top: 20px; }

/* o "4✱4": o ✱ desenhado no lugar do 0, como no logo */
.pagina-erro-numero { grid-row: 2; position: relative; z-index: 2; align-self: center; justify-self: center; margin: 0; display: flex; align-items: center;
  font-weight: 800; font-size: min(25vw, 44svh); letter-spacing: -0.06em; line-height: .74; color: var(--creme); user-select: none; }
/* os 4 ficam acima do brilho do ✱ (o brilho nunca tinge a letra) */
.pagina-erro-quatro { position: relative; z-index: 2; display: block; }
.pagina-erro-ast { position: relative; z-index: 1; display: block; flex: none; width: .78em; aspect-ratio: 1400 / 1375; margin: 0 .03em 0 .01em; }
.pagina-erro-ast-dentro { position: absolute; inset: 0; }
.pagina-erro-ast img { position: absolute; display: block; max-width: none; pointer-events: none; }
/* o brilho é luz difusa (Ref 080), não contorno de neon: o ✱ desfocado bem maior que o nítido e fraco */
.pagina-erro-ast-mole { width: 290%; height: 290%; left: -95%; top: -95%; mix-blend-mode: screen; opacity: .5; }
.pagina-erro-ast-nitido { inset: 0; width: 100%; height: 100%; }
/* o "?" do kit mordendo a borda de cima do último 4 (um rabisco só) */
.pagina-erro-rabisco { position: absolute; left: 86%; top: -.3em; width: auto; height: .4em; rotate: 8deg; pointer-events: none; }

/* embaixo: "← Voltar pro início" à esquerda e a frase na coluna 4 */
.pagina-erro-pe { grid-row: 3; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px);
  align-items: end; padding: 0 var(--g) clamp(22px, 2.4vw, 34px); }
.pagina-erro-volta { grid-column: 1 / span 3; justify-self: start; margin-bottom: .35em; }
.pagina-erro-texto { grid-column: 4 / span 6; }
.pagina-erro-titulo { margin: 0; font-weight: 800; font-size: clamp(30px, 3.4vw, 56px); letter-spacing: -0.045em; line-height: .94; text-wrap: balance; }
.pagina-erro-frase { margin: 14px 0 0; max-width: 36ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45; color: var(--creme-70); text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  .js .pagina-erro-quatro.revela { transition-duration: 1367ms; transition-timing-function: var(--m3); }
  .js .pagina-erro-ast { animation: pagina-erro-ast-entra 1168ms var(--m1) 1.2s both; }
  @keyframes pagina-erro-ast-entra { from { opacity: 0; transform: scale(.55) rotate(-100deg); } }
  .pagina-erro-ast-mole { animation: pagina-erro-respira 7s var(--ease-io) infinite alternate; }
  @keyframes pagina-erro-respira { from { opacity: .35; } to { opacity: .6; } }
  /* passar o mouse (ou segurar o dedo) gira o ✱; com movimento reduzido ele fica parado */
  .pagina-erro-ast-dentro { transition: transform 1.2s var(--e-mira); }
  .pagina-erro-ast:hover .pagina-erro-ast-dentro, .pagina-erro-ast:active .pagina-erro-ast-dentro { transform: rotate(120deg); }
}

@media (min-width: 900px) {
  .pagina-erro-palco { padding: 6px 6px 6px 0; }     /* a coluna escura da esquerda já dá o respiro desse lado */
}
@media (max-width: 899px) {
  .pagina-erro-palco { height: calc(100svh - 64px); min-height: 500px; padding: 0 6px 6px; }
  .pagina-erro-cartao { border-radius: 10px; }
  .pagina-erro-numero { font-size: min(33vw, 30svh); margin-left: -.1em; }
  .pagina-erro-fundo-ast { width: 190vw; right: -92vw; top: -70vw; }
  .pagina-erro-pe { grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding: 0 20px 24px; }
  .pagina-erro-volta, .pagina-erro-texto { grid-column: 1; }
  .pagina-erro-volta { order: 2; margin-bottom: 0; }
  .pagina-erro-titulo { font-size: clamp(30px, 9vw, 40px); }
}

/* ===== pagina-estudio.css ===== */
/* ESTÚDIO (/estudio) · clone do /studio do Mira (mira-estudo/paginas/studio_desk.jpg e _cel.jpg; animacoes.md, seção 4).
   Medidas do Mira em 1440: topo de 900 preso, que encolhe (scale 1 → .925, opacity 1 → .6) enquanto a cultura (860) sobe;
   cultura com rótulo e 2 fotos na coluna 1, frase justificada da 4 ao fim; números 2 x 2 nas colunas 7 e 10;
   princípios com título grande à esquerda e 4 linhas da coluna 7 ao fim; clientes 3 x 2 da 4 ao fim; artigos em 4 colunas;
   contato em cartão escuro. Tudo com prefixo estudio-. Movimento só com transform e opacity (a foto do contato ganha cor
   cruzando duas camadas). Sem JS ou com movimento reduzido, tudo parado e visível. */

/* ================= 1. TOPO ================= */
.estudio-topo { position: relative; height: 100svh; min-height: 620px; padding: 6px 6px 0; }
.estudio-topo-cartao { position: relative; isolation: isolate; height: 100%; border-radius: 12px; overflow: clip; background: var(--tinta); color: var(--creme); }
@media (min-width: 900px) {
  .estudio-topo { position: sticky; top: 0; z-index: 0; padding: 6px 6px 6px 0; }
  .estudio-topo-cartao { transform-origin: 50% 50%; will-change: transform, opacity; }
  .estudio-abre > .estudio-cultura { position: relative; z-index: 1; background: var(--creme); }
}
.estudio-topo-foto { position: absolute; inset: 0; z-index: 0; }
/* ele de perfil olhando pra janela, e o título mora no vazio pra onde ele olha. O nariz (53% da largura da foto) fica
   sempre a 56% da largura do cartão, seja qual for a proporção da tela: --estudio-lf é a largura da foto depois do cover */
.estudio-topo-cartao { container-type: size; }
.estudio-topo-foto img { --estudio-lf: max(100cqw, 177.68cqh); width: 100%; height: 100%; object-fit: cover; object-position: 100% 42%;
  object-position: clamp(calc(100cqw - var(--estudio-lf)), calc(56cqw - .53 * var(--estudio-lf)), 0px) 42%; }
.estudio-topo-veu { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(21 20 19 / .74) 0%, rgb(21 20 19 / .58) 30%, rgb(21 20 19 / .2) 52%, rgb(21 20 19 / 0) 66%),
    linear-gradient(180deg, rgb(21 20 19 / .42) 0%, rgb(21 20 19 / 0) 20%, rgb(21 20 19 / 0) 66%, rgb(21 20 19 / .62) 100%); }
.estudio-topo-menu { position: absolute; inset: 0 0 auto; z-index: 4; padding-top: 20px; }
.estudio-topo-texto, .estudio-topo-pe { translate: 0 var(--estudio-par, 0px); }

.estudio-topo-texto { position: absolute; z-index: 3; left: var(--g); top: 31%; width: min(46vw, 760px); }
.estudio-titulo { margin: 0; font-size: clamp(64px, 9.6vw, 176px); font-weight: 800; letter-spacing: -0.055em; line-height: .86; text-wrap: balance; }
.estudio-titulo .serifa { line-height: .7; margin-right: -.1em; }   /* a itálica deixava um buraco antes do ponto ("eu .") */
.estudio-topo-frase { margin: clamp(26px, 2.6vw, 40px) 0 0; max-width: 28em; font-size: clamp(16px, 1.32vw, 21px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.18; text-indent: 4.2em; text-wrap: pretty; }
.js .estudio-topo-frase .linha > span { display: block; }
.js .estudio-topo-frase .linha:first-child > span { text-indent: 4.2em; }

/* linha de baixo do Mira: "Atendo" | "Serviços" | (no lugar do selo do Framer) os dois Instagrams */
.estudio-topo-pe { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 var(--g) 24px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px); align-items: end; }
.estudio-topo-dado { margin: 0; display: flex; align-items: flex-end; gap: 14px; }
.estudio-topo-dado:first-child { grid-column: 1 / span 3; }
.estudio-topo-dado:nth-child(2) { grid-column: 4 / span 3; }
.estudio-topo-dado dd { margin: 0; line-height: 1.35; }
.estudio-topo-dado dt { line-height: 1.35; }
.estudio-topo-redes { grid-column: 9 / -1; justify-self: end; display: flex; gap: 18px; }
.estudio-topo-redes a { text-transform: none; font-size: 13px; letter-spacing: -0.01em; }

/* ================= 2. CULTURA + NÚMEROS ================= */
.estudio-cultura { padding-block: clamp(96px, 8.9vw, 128px) clamp(96px, 8.4vw, 124px); }
.estudio-cultura-grade { align-items: start; }
.estudio-cultura-lado { grid-column: 1 / span 3; }
.estudio-cultura-lado .t-rotulo { padding-top: .5em; }
.estudio-cultura-fotos { display: flex; gap: 4px; margin-top: 16px; }
.estudio-cultura-foto { margin: 0; width: clamp(84px, 8.1vw, 130px); aspect-ratio: 1; border-radius: 8px; overflow: clip; background: var(--creme-2); }
.estudio-cultura-foto picture, .estudio-cultura-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.estudio-frase { grid-column: 4 / -1; margin: 0; font-size: clamp(30px, 4.35vw, 66px); font-weight: 800; letter-spacing: -0.045em; line-height: .96;
  text-align: justify; text-indent: 25%; hyphens: manual; text-wrap: pretty; }
/* depois de quebrada em linhas (movimento.js), cada linha vira bloco e se justifica sozinha, menos a última */
.js .estudio-frase .linha > span { display: block; text-indent: 0; }
.js .estudio-frase .linha:first-child > span { text-indent: 25%; }
.js .estudio-frase .linha:not(:last-child) > span { text-align-last: justify; }

.estudio-numeros { margin-top: clamp(80px, 8.3vw, 120px); align-items: start; }
.estudio-numeros-rotulo { grid-column: 1 / span 3; padding-top: 16px; }
.estudio-numeros-lista { grid-column: 7 / -1; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(12px, 1.4vw, 20px); row-gap: clamp(36px, 3.6vw, 52px); }
.estudio-numero { position: relative; padding-top: 16px; min-width: 0; }
/* linha que se desenha (Mira 1.5): cinza por baixo e uma cópia laranja por cima que some enquanto o traço anda
   (nos números a linha é o ::before e a cópia laranja o ::after do próprio item, porque dentro do <dl> só cabem dt e dd) */
.estudio-princ-linha, .estudio-numero::before { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--tinta-12); transform-origin: 0 50%; }
.estudio-princ-linha::after { content: ""; position: absolute; inset: 0; background: var(--laranja); opacity: 0; }
.estudio-numero::before, .estudio-numero::after { content: ""; }
.estudio-numero::after { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--laranja); opacity: 0; transform-origin: 0 50%; }
.estudio-numero-rotulo { max-width: 26ch; color: var(--tinta-60); text-wrap: balance; }
.estudio-numero-valor { margin: 18px 0 0; font-size: clamp(42px, 5vw, 76px); font-weight: 800; letter-spacing: -0.055em; line-height: .86; white-space: nowrap; }

/* ================= 4. PRINCÍPIOS ================= */
.estudio-principios { padding-block: clamp(110px, 10vw, 150px) clamp(110px, 10.4vw, 150px); }
.estudio-principios .grade { align-items: start; }
.estudio-princ-titulo { grid-column: 1 / span 6; margin: 0; font-size: clamp(48px, 7vw, 120px); font-weight: 800; letter-spacing: -0.05em; line-height: .88; text-wrap: balance; }
.estudio-princ-lista { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; }
/* cada linha corta o que passa da borda (Mira: overflow clip), e o "(01)" desce de fora pra dentro na rolagem */
.estudio-princ { position: relative; overflow: clip; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px);
  padding: 30px 0 clamp(36px, 3.1vw, 46px); }
/* Mira (rWbx8J1Z4): o "01" é um h2 de 80 px (60 no tablet, 45 no celular), na cor de acento, que desce de −100 px a 0
   saindo de trás da borda da linha. Laranja no creme só em tamanho de título (referencias-figma.md, seção 3) */
.estudio-princ-num { grid-column: 1 / span 3; align-self: start; font-size: clamp(45px, 5.6vw, 80px); font-weight: 800; letter-spacing: -0.05em;
  line-height: .9; color: var(--laranja); font-variant-numeric: tabular-nums; }
.estudio-princ-texto { grid-column: 4 / -1; }
.estudio-princ-nome { margin: 0; font-size: clamp(24px, 2.3vw, 36px); font-weight: 800; letter-spacing: -0.045em; line-height: .96; text-wrap: balance; }
.estudio-princ-apoio { margin: 18px 0 0; max-width: 34ch; font-size: clamp(14px, 1vw, 16px); line-height: 1.45; color: var(--tinta-60); text-wrap: pretty; }

/* ================= 5. CLIENTES ================= */
.estudio-clientes { padding-block: clamp(20px, 2vw, 30px) clamp(110px, 10vw, 150px); }
.estudio-cli-rotulo { grid-column: 1 / span 3; padding-top: 2px; }
.estudio-cli-grade { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.estudio-cli-item { min-width: 0; }
/* a célula cinza-clara do Mira (raio 10) com o nome no lugar do logo; no hover a capa do case aparece por baixo */
.estudio-cli-cartao { position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center;
  height: clamp(104px, 8.4vw, 124px); padding: 30px 18px; border-radius: 10px; background: var(--creme-2); color: var(--tinta); }
.estudio-cli-nome { position: relative; font-weight: 800; font-size: clamp(21px, 2.2vw, 34px); letter-spacing: -0.045em; line-height: .94;
  text-align: center; text-wrap: balance; transition: color .45s var(--ease); }
.estudio-cli-num, .estudio-cli-servico { position: absolute; z-index: 1; color: rgb(21 20 19 / .66); transition: color .45s var(--ease); }
.estudio-cli-num { color: var(--tinta-40); }   /* só enfeite (aria-hidden) */
.estudio-cli-num { left: 14px; top: 13px; }
.estudio-cli-servico { left: 14px; bottom: 13px; }
.estudio-cli-capa { position: absolute; inset: 0; z-index: -1; opacity: 0; transform: scale(1.08); transition: opacity .55s var(--ease), transform 1s var(--ease); }
.estudio-cli-capa img { width: 100%; height: 100%; object-fit: cover; }
.estudio-cli-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(21 20 19 / .5), rgb(21 20 19 / .62)); }
@media (hover: hover) {
  .estudio-cli-cartao:hover .estudio-cli-capa, .estudio-cli-cartao:focus-visible .estudio-cli-capa { opacity: 1; transform: none; }
  .estudio-cli-cartao:hover .estudio-cli-nome, .estudio-cli-cartao:focus-visible .estudio-cli-nome { color: var(--creme); }
  .estudio-cli-cartao:hover :is(.estudio-cli-num, .estudio-cli-servico),
  .estudio-cli-cartao:focus-visible :is(.estudio-cli-num, .estudio-cli-servico) { color: var(--creme-70); }
}
@media (hover: none) { .estudio-cli-capa { display: none; } }
.estudio-cli-pe { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(30px, 3.2vw, 46px); align-items: start; }
.estudio-cli-anos { grid-column: 1 / span 3; line-height: 1.25; }
.estudio-cli-intro { grid-column: 4 / span 5; max-width: 40ch; font-size: clamp(14px, 1vw, 15px); line-height: 1.4; }

/* ================= 6. ARTIGOS ================= */
.estudio-blog { padding-block: clamp(20px, 2vw, 30px) clamp(110px, 10vw, 150px); }
.estudio-blog-cabeca { align-items: end; }
.estudio-blog-titulos { grid-column: 4 / 10; display: grid; gap: 22px; justify-items: start; }
.estudio-blog-titulo { margin: 0; }
.estudio-blog-todos { grid-column: 10 / -1; justify-self: end; margin-bottom: .5em; }
.estudio-blog-grade { list-style: none; margin: clamp(64px, 6vw, 90px) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(12px, 1.4vw, 20px); align-items: start; }
.estudio-blog-post { display: grid; gap: 10px; }
.estudio-blog-cat { color: var(--tinta-60); }
.estudio-blog-capa { position: relative; isolation: isolate; overflow: clip; border-radius: 10px; aspect-ratio: var(--estudio-forma, 3 / 4); background: var(--creme-2); }
/* hover do Mira (8.5): a capa encolhe pra 75% e mostra ela mesma desfocada por trás */
.estudio-blog-capa-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--estudio-foco, 50% 50%);
  filter: blur(16px) saturate(1.05); transform: scale(1.12); }
.estudio-blog-capa-frente { position: absolute; inset: 0; z-index: 1; overflow: clip; border-radius: 10px; transition: transform .56s var(--e-mira); }
.estudio-blog-capa-frente img { width: 100%; height: 100%; object-fit: cover; object-position: var(--estudio-foco, 50% 50%); }
.estudio-blog-post:hover .estudio-blog-capa-frente, .estudio-blog-post:focus-visible .estudio-blog-capa-frente { transform: scale(.75); border-radius: 8px; }
.estudio-blog-nome { margin: 5px 0 0; font-size: clamp(17px, 1.5vw, 22px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.estudio-blog-tempo { color: var(--tinta-60); margin-top: -4px; }
.estudio-blog-forma-1 { --estudio-forma: 1.43; --estudio-foco: 50% 76%; }
.estudio-blog-forma-2 { --estudio-forma: 3 / 4; }
.estudio-blog-forma-3 { --estudio-forma: 1.78; --estudio-foco: 50% 48%; }
.estudio-blog-forma-4 { --estudio-forma: 3 / 4; }

/* ================= 7. CONTATO ================= */
.estudio-contato { padding: 6px; }
.estudio-contato-cartao { position: relative; isolation: isolate; contain: paint; overflow: clip; border-radius: 12px; background: var(--tinta); color: var(--creme); }
.estudio-contato-cena { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.estudio-contato-foto { position: absolute; inset: 0; transform-origin: 60% 45%; }
/* a foto de 480 px ampliada já sai macia; o desfoque leve só tira o serrilhado */
.estudio-contato-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 66% 40%;
  transform: scale(1.7); transform-origin: 64% 44%; filter: blur(6px) saturate(.95); }
.estudio-contato-foto img.estudio-contato-foto-cinza { opacity: 0; filter: grayscale(1) blur(6px); }
.estudio-contato-veu { position: absolute; inset: 0;
  background:
    radial-gradient(62% 48% at 50% 114%, rgb(196 52 26 / .5) 0%, rgb(196 52 26 / 0) 72%),
    radial-gradient(42% 46% at 6% 100%, rgb(255 90 54 / .3) 0%, rgb(255 90 54 / 0) 70%),
    linear-gradient(180deg, rgb(21 20 19 / .76) 0%, rgb(21 20 19 / .62) 38%, rgb(21 20 19 / .7) 70%, rgb(21 20 19 / .86) 100%); }
/* o ✱ (receita 2): cortado pela borda da esquerda, nítido do lado de fora e virando grão na direção do texto */
.estudio-contato-ast { position: absolute; aspect-ratio: 1400 / 1375; width: min(50vw, 780px);
  left: calc(min(50vw, 780px) * -.3); bottom: calc(min(50vw, 780px) * -.34); rotate: -8deg; }
.estudio-contato-ast img { position: absolute; display: block; max-width: none; }
.estudio-contato-ast-mole { width: 162.5%; height: 162.5%; left: -31.25%; top: -31.25%; mix-blend-mode: screen; opacity: .5; }
.estudio-contato-ast-nitido { inset: 0; width: 100%; height: 100%; opacity: .92;
  -webkit-mask-image: linear-gradient(62deg, #000 46%, transparent 56%), linear-gradient(62deg, #000 40%, transparent 80%), url(../marca/grao-mascara.png);
          mask-image: linear-gradient(62deg, #000 46%, transparent 56%), linear-gradient(62deg, #000 40%, transparent 80%), url(../marca/grao-mascara.png);
  -webkit-mask-size: 100% 100%, 100% 100%, 128px 128px;
          mask-size: 100% 100%, 100% 100%, 128px 128px;
  -webkit-mask-composite: source-over, source-in;
          mask-composite: add, intersect; }
.estudio-contato-grao { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url(../marca/grao-256.png) 0 0 / 256px 256px; mix-blend-mode: screen; opacity: .07; }

.estudio-contato-dentro { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.4vw, 20px); padding: 28px calc(var(--g) - 6px) clamp(80px, 8.4vw, 120px); }
.estudio-contato-apagado { color: var(--creme-50); }
.estudio-contato-topo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: inherit; align-items: start; }
.estudio-contato-topo > .t-rotulo { grid-column: 1 / 4; padding-top: 2px; }
.estudio-contato-atende { grid-column: 4 / 10; padding-top: 2px; }
.estudio-contato-autor { grid-column: 10 / -1; display: flex; align-items: center; gap: 10px; }
.estudio-contato-autor img { width: 40px; height: 40px; object-fit: cover; object-position: 50% 28%; border-radius: 5px; }
.estudio-contato-autor p { margin: 0; display: grid; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }

.estudio-contato-cabeca { grid-column: 4 / -1; margin-top: clamp(90px, 10.5vw, 150px); }
.estudio-contato-titulo { margin: 0; max-width: 10.6em; font-size: clamp(44px, 5.6vw, 96px); font-weight: 800; letter-spacing: -0.05em; line-height: .9; text-wrap: balance; }
.estudio-contato-sub { margin: 30px 0 0; max-width: 24em; text-indent: 3.4em; font-size: clamp(16px, 1.25vw, 19px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.16; text-wrap: balance; }
/* o \n da copy vira <br>; depois que o movimento.js põe cada linha num bloco, o <br> sobraria como linha vazia */
:is(.estudio-contato-titulo, .estudio-princ-titulo, .estudio-blog-titulo) .linha + br { display: none; }

/* o botão claro de largura cheia do formulário do Mira (8.3: raio → 16, rolo do texto) leva pra página de contato */
.estudio-contato-acao { grid-column: 4 / 10; margin-top: clamp(56px, 5.6vw, 80px); }
.estudio-contato-botao { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; height: 64px; padding: 0 22px;
  border-radius: 8px; background: var(--creme); color: var(--tinta); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em;
  transition: border-radius .56s var(--e-mira), transform .56s var(--e-mira); }
.estudio-contato-botao .seta { width: 22px; height: 22px; }
.estudio-contato-botao .seta svg { width: 10px; height: 10px; }
.estudio-contato-botao:hover, .estudio-contato-botao:focus-visible { border-radius: 16px; transform: scale(.985); }
.estudio-contato-botao:hover .seta, .estudio-contato-botao:focus-visible .seta { transform: scale(.95); border-radius: 8px; }
.estudio-contato-botao-rolo { display: grid; overflow: clip; height: 1.15em; line-height: 1.15; }
.estudio-contato-botao-rolo > span { grid-area: 1 / 1; transition: transform .56s var(--e-mira), opacity .56s var(--e-mira); }
.estudio-contato-botao-rolo > span + span { transform: translateY(115%); opacity: 0; }
.estudio-contato-botao:hover .estudio-contato-botao-rolo > span:first-child,
.estudio-contato-botao:focus-visible .estudio-contato-botao-rolo > span:first-child { transform: translateY(-115%); opacity: 0; }
.estudio-contato-botao:hover .estudio-contato-botao-rolo > span + span,
.estudio-contato-botao:focus-visible .estudio-contato-botao-rolo > span + span { transform: none; opacity: 1; }

.estudio-contato-direto { grid-column: 10 / -1; align-self: start; margin-top: clamp(56px, 5.6vw, 80px); display: grid; gap: 10px; justify-items: start; }
.estudio-contato-email { font-size: clamp(18px, 1.55vw, 26px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 2px; }
.estudio-contato-email:hover { background-size: 100% 1.5px; }
.estudio-contato-logo { margin-top: 26px; height: 18px; width: auto; }

.estudio-contato-passos { grid-column: 4 / -1; margin: clamp(90px, 9.4vw, 130px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px); }
.estudio-contato-passo { display: grid; align-content: start; justify-items: start; }
.estudio-contato-num { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 3px;
  background: var(--creme); color: var(--tinta); font-size: 12px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 18px; }
.estudio-contato-passo h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.estudio-contato-passo p { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.38; color: var(--creme-70); text-wrap: pretty; }

/* ================= MOVIMENTO (valores do Mira; o estado visível é o padrão) ================= */
@media (prefers-reduced-motion: no-preference) {
  /* topo: bloco de baixo sobe 40 px com a mola M3 */
  .js .estudio-sobe.revela { transition: opacity 1367ms var(--m3), transform 1367ms var(--m3); transition-delay: var(--atraso, 0s); }
  .js .estudio-sobe.revela:not(.visto) { transform: translateY(40px); }
  /* cultura: as 2 fotos entram da esquerda (.85 s, curva de texto) */
  .js .estudio-entra-lado.revela { transition: opacity .85s var(--e-texto), transform .85s var(--e-texto); transition-delay: var(--atraso, 0s); }
  .js .estudio-entra-lado.revela:not(.visto) { transform: translateX(-20px); }
  /* números: TL-1 de uma linha (y 15, 1,1 s, início .2 s) e a linha que se desenha (1 s, laranja → cinza) */
  .js .estudio-numero-valor.revela { transition: opacity 1.1s var(--e-texto), transform 1.1s var(--e-texto); transition-delay: calc(.2s + var(--atraso, 0s)); }
  .js .estudio-numero-valor.revela:not(.visto) { transform: translateY(15px); }
  .js .estudio-princ-linha, .js .estudio-numero::before, .js .estudio-numero::after { transform: scaleX(0); }
  .js .estudio-princ-linha::after, .js .estudio-numero::after { opacity: 1; }
  .js .estudio-traco > .estudio-princ-linha, .js .estudio-numero.estudio-traco::before { transform: none; transition: transform 1s var(--e-linha); }
  .js .estudio-traco > .estudio-princ-linha::after { opacity: 0; transition: opacity 1s var(--e-linha); }
  .js .estudio-numero.estudio-traco::after { transform: none; opacity: 0; transition: transform 1s var(--e-linha), opacity 1s var(--e-linha); }
  /* princípios: o "(01)" desce de −100 px a 0 ligado à rolagem, saindo de trás da borda da linha (o script mexe em --estudio-desce) */
  .js .estudio-princ-num { transform: translate3d(0, var(--estudio-desce, 0px), 0); }
  /* artigos e passos do contato: sobem (40 e 20 px) em .85 s */
  .js .estudio-blog-item.revela, .js .estudio-contato-passo.revela { transition: opacity .85s var(--e-texto), transform .85s var(--e-texto); transition-delay: var(--atraso, 0s); }
  .js .estudio-blog-item.revela:not(.visto) { transform: translateY(40px); }
  .js .estudio-contato-passo.revela:not(.visto) { transform: translateY(20px); }
  /* contato: a foto entra cinza, girada e ampliada, e ganha cor (mola M3) quando meio cartão está à vista */
  .estudio-contato-foto { transition: transform 1367ms var(--m3); }
  .estudio-contato-foto-cinza { transition: opacity 1367ms var(--m3); }
  .js .estudio-contato:not(.estudio-ligado) .estudio-contato-foto { transform: scale(1.3) rotate(2deg); }
  .js .estudio-contato:not(.estudio-ligado) .estudio-contato-foto img.estudio-contato-foto-cinza { opacity: 1; }
  .estudio-contato-ast-mole { animation: estudio-respira 7s var(--ease-io) infinite alternate; }
  @keyframes estudio-respira { from { opacity: .38; } to { opacity: .62; } }
}

/* ================= 900 a 1199 (tablet do Mira): mais largura pros blocos de texto ================= */
@media (min-width: 900px) and (max-width: 1199px) {
  .estudio-topo-texto { width: 54vw; }
  .estudio-numeros-lista { grid-column: 5 / -1; }
  .estudio-princ-titulo { grid-column: 1 / span 5; }
  .estudio-princ-lista { grid-column: 6 / -1; }
  .estudio-princ { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .estudio-princ-texto { grid-column: 3 / -1; }
  .estudio-princ-num { grid-column: 1 / span 2; }
  .estudio-blog-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estudio-contato-cabeca, .estudio-contato-passos { grid-column: 1 / -1; }
  .estudio-contato-acao { grid-column: 1 / 9; }
  .estudio-contato-direto { grid-column: 9 / -1; }
  .estudio-contato-atende { grid-column: 4 / 9; }
  .estudio-contato-autor { grid-column: 9 / -1; }
}

/* ================= CELULAR (390): como o /studio do Mira no celular ================= */
@media (max-width: 899px) {
  /* topo: cartão abaixo da barra, sem prender e sem encolher; título no alto (a parede acima da cabeça),
     frase e dados embaixo, sobre o moletom escuro, pra não cobrir o rosto */
  .estudio-topo { height: calc(100svh - 70px); min-height: 600px; max-height: 820px; }
  .estudio-topo-cartao { border-radius: 10px; }
  .estudio-topo-foto img { object-position: 66% 50%; }   /* no celular o rosto vai pro meio e o título sobe pra parede */
  .estudio-topo-veu { background:
    linear-gradient(180deg, rgb(21 20 19 / .55) 0%, rgb(21 20 19 / .12) 28%, rgb(21 20 19 / 0) 48%, rgb(21 20 19 / .5) 72%, rgb(21 20 19 / .86) 100%); }
  .estudio-topo-texto { position: absolute; inset: 0; width: auto; display: flex; flex-direction: column; justify-content: space-between;
    padding: 22px 20px 0; pointer-events: none; }
  .estudio-titulo { font-size: clamp(54px, 17.4vw, 92px); }
  .estudio-topo-frase { margin: 0 0 128px; max-width: none; font-size: clamp(15px, 4.1vw, 18px); text-align: justify; text-indent: 14%; hyphens: manual; }
  .js .estudio-topo-frase .linha:first-child > span { text-indent: 14%; }
  .js .estudio-topo-frase .linha:not(:last-child) > span { text-align-last: justify; }
  .estudio-topo-pe { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 18px; padding: 0 20px 20px; }
  .estudio-topo-dado:nth-child(2) dd { white-space: nowrap; }
  .estudio-topo-dado:first-child, .estudio-topo-dado:nth-child(2) { grid-column: auto; }
  .estudio-topo-dado { gap: 10px; }
  .estudio-topo-redes { grid-column: 1 / -1; justify-self: start; }

  .estudio-cultura { padding-block: 56px 72px; }
  .estudio-cultura-lado, .estudio-frase { grid-column: 1 / -1; }
  .estudio-cultura-fotos { gap: 4px; margin-top: 14px; }
  .estudio-cultura-foto { width: calc(50% - 2px); }
  .estudio-frase { margin-top: 40px; font-size: clamp(25px, 7vw, 34px); letter-spacing: -0.05em; text-indent: 18%; }
  .js .estudio-frase .linha:first-child > span { text-indent: 18%; }
  .estudio-numeros { margin-top: 72px; }
  .estudio-numeros-rotulo, .estudio-numeros-lista { grid-column: 1 / -1; }
  .estudio-numeros-rotulo { padding-top: 0; }
  .estudio-numeros-lista { margin-top: 30px; column-gap: 14px; row-gap: 34px; }
  .estudio-numero-valor { font-size: clamp(36px, 10.6vw, 46px); }

  .estudio-principios { padding-block: 80px 84px; }
  .estudio-princ-titulo, .estudio-princ-lista { grid-column: 1 / -1; }
  .estudio-princ-titulo { font-size: clamp(42px, 12.4vw, 60px); }
  .estudio-princ-lista { margin-top: 44px; }
  .estudio-princ { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 26px 0 34px; }
  .estudio-princ-num { grid-column: 1 / span 4; }
  .estudio-princ-texto { grid-column: 5 / -1; }
  .estudio-princ-nome { font-size: clamp(24px, 6.6vw, 30px); }
  .estudio-princ-apoio { margin-top: 14px; font-size: 15px; }

  .estudio-clientes { padding-block: 10px 84px; }
  .estudio-cli-rotulo, .estudio-cli-grade, .estudio-cli-pe { grid-column: 1 / -1; }
  .estudio-cli-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
  .estudio-cli-cartao { height: 118px; padding: 28px 12px; }
  .estudio-cli-nome { font-size: clamp(19px, 5.4vw, 26px); }
  .estudio-cli-num { left: 11px; top: 10px; }
  .estudio-cli-servico { left: 11px; bottom: 10px; font-size: 10px; }
  .estudio-cli-pe { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 26px; }
  .estudio-cli-anos { grid-column: 1 / span 4; }
  .estudio-cli-intro { grid-column: 5 / -1; }

  .estudio-blog { padding-block: 10px 84px; }
  .estudio-blog-titulos { grid-column: 1 / 9; gap: 14px; }
  .estudio-blog-todos { grid-column: 9 / -1; margin-bottom: .3em; }
  .estudio-blog-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; gap: 32px 12px; }
  .estudio-blog-nome { font-size: 16px; }

  .estudio-contato-cartao { border-radius: 10px; }
  .estudio-contato-dentro { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 132px; }
  .estudio-contato-topo { grid-template-columns: minmax(0, 1fr) auto; row-gap: 26px; }
  .estudio-contato-topo > .t-rotulo { grid-column: 1; }
  .estudio-contato-atende { grid-column: 2; text-align: right; }
  .estudio-contato-autor { grid-column: 1 / -1; }
  .estudio-contato-cabeca, .estudio-contato-acao, .estudio-contato-direto, .estudio-contato-passos { grid-column: 1; }
  .estudio-contato-cabeca { margin-top: 64px; }
  .estudio-contato-titulo { font-size: clamp(42px, 12.6vw, 60px); }
  .estudio-contato-sub { margin-top: 22px; font-size: 16px; }
  .estudio-contato-sub { text-indent: 2.6em; }
  .estudio-contato-acao { margin-top: 40px; }
  .estudio-contato-botao { height: 56px; }
  .estudio-contato-direto { margin-top: 44px; }
  .estudio-contato-passos { margin-top: 56px; grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .estudio-contato-num { margin-bottom: 14px; }
  /* o ✱ ganha uma faixa só dele embaixo dos passos: nada de laranja atrás do texto (receita 4, celular) */
  .estudio-contato-ast { width: 70vw; left: -24vw; bottom: -40vw; }
  .estudio-contato-foto img { transform: scale(1.25); transform-origin: 62% 42%; object-position: 64% 40%; }
}

/* ===== pagina-projeto.css ===== */
/* PROJETO (/projetos/<slug>) · clone do case do Mira (mira-estudo/paginas/projeto-nike_desk.jpg e _cel.jpg).
   Medidas do Mira em 1440: cartão do topo com 3 px de folga e raio 12, conteúdo a 30 px da borda, coluna da direita na
   7ª de 12; miniatura de 314 × 177; bloco do cliente com 578 de altura; imagens de ponta a ponta com 3 px entre elas;
   rótulo à esquerda e título + texto na 7ª coluna; cartão escuro com rótulo, lista numerada e a citação com a foto na 4ª;
   "more projects" começando na 4ª coluna. Aqui a folga é 6 px, como no resto do site.
   Movimento (animacoes.md, seção 3): só transform e opacity; a cortina das imagens é o único clip-path (é o efeito do Mira).
   Tudo com prefixo projeto-. */

.pagina-projeto { --pj-folga: 6px; }

/* =================== TOPO =================== */
.projeto-topo { position: relative; padding: 0 var(--pj-folga); }
.projeto-topo-cartao { position: relative; isolation: isolate; overflow: clip; border-radius: 12px; background: var(--tinta); color: var(--creme);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.4vw, 20px);
  grid-template-rows: auto minmax(0, 1fr) auto; padding: 26px var(--g) 28px; }
.projeto-topo-fundo { position: absolute; inset: 0; z-index: -2; }
.projeto-topo-fundo img { width: 100%; height: 100%; object-fit: cover; }
/* a capa escurecida, como a do Mira; um pouco mais escura embaixo, onde mora a ficha */
.projeto-topo-veu { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(48% 44% at 70% 50%, rgb(21 20 19 / .3) 0%, rgb(21 20 19 / 0) 100%),   /* atrás do nome e da linha: capa clara também passa no contraste */
    linear-gradient(180deg, rgb(21 20 19 / .58) 0%, rgb(21 20 19 / .5) 38%, rgb(21 20 19 / .56) 70%, rgb(21 20 19 / .78) 100%); }

.projeto-topo-barra { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: center; }
.projeto-voltar { grid-column: 1 / span 6; justify-self: start; font-size: 13px; }
.projeto-topo-logo { grid-column: 7 / span 3; justify-self: start; }
.projeto-topo-logo img { height: 18px; width: auto; }

.projeto-topo-mini { grid-column: 1 / span 3; grid-row: 2; align-self: center; margin: 0; }
.projeto-topo-mini img { width: 100%; aspect-ratio: 314 / 177; object-fit: cover; border-radius: 8px; }

.projeto-topo-texto { grid-column: 7 / -1; grid-row: 2; align-self: center; padding-block: 24px; }
.projeto-titulo { margin: 0; font-size: clamp(46px, 7vw, 132px); font-weight: 800; letter-spacing: -0.055em; line-height: .86; text-wrap: balance; }
.projeto-folio { margin-top: 16px; letter-spacing: .02em; }
.projeto-topo-risco { display: block; width: min(240px, 70%); height: 1px; margin: 26px 0 22px; background: var(--creme-14); transform-origin: 0 50%; }
.projeto-linha { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.4; color: rgb(246 241 232 / .86); text-wrap: balance; }

.projeto-topo-pe { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: subgrid; align-items: end; }
.projeto-topo-pe dl { margin: 0; }
.projeto-prazo > div { display: flex; gap: 14px; align-items: baseline; }
.projeto-topo-pe dt { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--creme-70); }
.projeto-topo-pe dd { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.35; }
.projeto-prazo { grid-column: 1 / span 6; }
.projeto-escopo { grid-column: 7 / -1; display: grid; grid-template-columns: max-content 1fr; column-gap: 14px; row-gap: 3px; }
.projeto-escopo > div { display: contents; }
.projeto-topo-texto, .projeto-topo-mini, .projeto-topo-pe { translate: 0 var(--par, 0px); }

@media (min-width: 900px) {
  /* Mira: o topo fica preso e encolhe (scale 1 → .925, opacity 1 → .6) enquanto o bloco do cliente sobe por cima */
  .projeto-topo { position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 640px; padding: 6px 6px 6px 0; }
  .projeto-topo-cartao { height: 100%; transform-origin: 50% 50%; will-change: transform, opacity; }
  .projeto-brief { position: relative; z-index: 1; background: var(--creme); }
}
@media (max-width: 899px) {
  /* Mira no celular: cartão que não prende nem encolhe; voltar, miniatura larga, nome, linha e a ficha embaixo */
  .projeto-topo-cartao { display: flex; flex-direction: column; min-height: min(720px, calc(100svh - 76px)); padding: 24px 18px 22px; }
  .projeto-topo-barra { display: block; }
  .projeto-topo-logo { display: none; }
  .projeto-topo-mini { margin-top: 56px; }
  .projeto-topo-mini img { aspect-ratio: 16 / 9; }
  .projeto-topo-texto { padding-block: 40px 36px; }
  .projeto-titulo { font-size: clamp(46px, 13.6vw, 72px); }
  .projeto-topo-pe { display: grid; grid-template-columns: max-content 1fr; column-gap: 14px; row-gap: 4px; margin-top: auto; }
  .projeto-topo-pe dl, .projeto-prazo > div { display: contents; }
  .projeto-topo-pe dd { font-size: 12px; }
  .projeto-topo-pe dt { font-size: 12px; }
}

/* entrada depois da transição de página (Mira: miniatura M3 1,05 s; nome M3 1,15 s; linha 1,25 s; ficha M1 1,35 e 1,45 s; botão 1,55 s) */
@media (prefers-reduced-motion: no-preference) {
  .js .projeto-topo-mini { animation: projeto-sobe 1367ms var(--m3) 1.05s both; }
  .js .projeto-titulo, .js .projeto-folio { animation: projeto-sobe 1367ms var(--m3) 1.15s both; }
  .js .projeto-topo-risco { animation: projeto-risca 1s var(--e-linha) 1.2s both; }
  .js .projeto-escopo { animation: projeto-aparece 1168ms var(--m1) 1.35s both; }
  .js .projeto-prazo { animation: projeto-aparece 1168ms var(--m1) 1.45s both; }
  .js .projeto-voltar, .js .projeto-topo-logo { animation: projeto-aparece 1168ms var(--m1) 1.55s both; }
}
@keyframes projeto-sobe { from { opacity: 0; transform: translateY(40px); } }
@keyframes projeto-aparece { from { opacity: 0; } }
@keyframes projeto-risca { from { transform: scaleX(0); } }

/* =================== CLIENTE + TEXTOS =================== */
.projeto-brief, .projeto-texto { padding-block: clamp(72px, 8.7vw, 125px) clamp(72px, 8.4vw, 122px); }
.projeto-brief .grade, .projeto-texto .grade { align-items: start; }
.projeto-brief-cliente { grid-column: 1 / span 3; }
.projeto-brief-marca { margin: 0 0 16px; font-size: 22px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; text-wrap: balance; }
.projeto-brief-resumo { margin: 0; max-width: 30ch; font-size: 13px; line-height: 1.4; color: var(--tinta-60); text-wrap: pretty; }
.projeto-texto-rotulo { grid-column: 1 / span 3; padding-top: .45em; }
.projeto-texto-corpo { grid-column: 7 / -1; }
.projeto-brief-corpo .projeto-texto-rotulo { padding-top: 0; }
.projeto-texto-titulo { margin: 0; max-width: 15ch; }
/* o \n da copy vira <br>; depois que o movimento.js quebra em .linha, o <br> fica sobrando entre elas e abre uma linha vazia */
.projeto .revela-linhas .linha + br { display: none; }
.projeto-texto .projeto-texto-titulo { margin-top: 0; }
.projeto-brief-corpo .projeto-texto-titulo { margin-top: 18px; }
.projeto-texto-p { margin: 24px 0 0; max-width: 37ch; font-size: clamp(15px, 1.1vw, 16px); line-height: 1.42; color: var(--tinta-60); text-wrap: pretty; }
.projeto-link { margin-top: 44px; }
@media (max-width: 899px) {
  .projeto-brief, .projeto-texto { padding-block: 56px 60px; }
  .projeto-brief-cliente, .projeto-texto-rotulo, .projeto-texto-corpo { grid-column: 1 / -1; }
  .projeto-brief-corpo { margin-top: 52px; }
  .projeto-texto-rotulo { padding-top: 0; margin-bottom: 16px; }
  .projeto-brief-corpo .projeto-texto-titulo { margin-top: 16px; }
  .projeto-texto-titulo { font-size: clamp(30px, 8.4vw, 40px); max-width: none; }
  .projeto-texto-p { margin-top: 20px; }
  .projeto-link { margin-top: 36px; }
}

/* =================== GALERIA =================== */
/* fileiras justificadas: cada imagem cresce na proporção do formato (--r), então a fileira toda fica na mesma altura e nada do trabalho é cortado */
.projeto-galeria { display: grid; gap: var(--pj-folga); padding: 0 var(--pj-folga); }
.projeto-galeria:empty { display: none; }
.projeto-fila { display: flex; gap: var(--pj-folga); }
.projeto-img { position: relative; flex: var(--r) 1 0%; min-width: 0; aspect-ratio: var(--r); margin: 0; overflow: clip; border-radius: 10px; background: var(--creme-2); }
.projeto-img picture, .projeto-img img, .projeto-img video { display: block; width: 100%; height: 100%; }
.projeto-img img, .projeto-img video { object-fit: cover; object-position: var(--foco, 50% 38%); }
@media (min-width: 900px) { .projeto-galeria { padding: 0 6px 0 0; } }
/* uma imagem só e em pé (projeto do CMS com pouca imagem): no formato dela, com a altura da tela, alinhada à coluna dos textos */
.projeto-fila-alta { justify-content: flex-end; }
.projeto-fila-alta .projeto-img { flex: none; width: min(100%, calc(86svh * var(--r))); }
@media (min-width: 900px) { .projeto-fila-alta .projeto-img { width: min(50%, calc(86svh * var(--r))); } }
@media (max-width: 899px) {
  /* Mira no celular: o par vira uma imagem embaixo da outra, na largura toda; a grade continua em fileiras */
  .projeto-fila-par { flex-direction: column; }
  .projeto-fila-par .projeto-img { flex: none; width: 100%; }
  .projeto-fila[data-larga] { flex-wrap: wrap; }
  .projeto-fila[data-larga] > .projeto-img:first-child { flex-basis: 100%; }
  .projeto-img { border-radius: 8px; }
}
/* Mira ("Project Reveal Image"): cortina da esquerda pra direita e a imagem de 1,3 → 1, 1,2 s, no 1º pixel visível */
@media (prefers-reduced-motion: no-preference) {
  .projeto-anima .projeto-img { clip-path: inset(0 100% 0 0 round 10px); transition: clip-path 1.2s var(--e-mira); }
  .projeto-anima .projeto-img img, .projeto-anima .projeto-img video { transform: scale(1.3); transition: transform 1.2s var(--e-mira); }
  .projeto-anima .projeto-img.projeto-visto { clip-path: inset(0 0 0 0 round 10px); }
  .projeto-anima .projeto-img.projeto-visto img, .projeto-anima .projeto-img.projeto-visto video { transform: none; }
}

/* =================== CARTÃO ESCURO (ficha + frase) =================== */
.projeto-numeros { padding: clamp(0px, 1vw, 6px) var(--pj-folga) 0; }
@media (min-width: 900px) { .projeto-numeros { padding: 0 6px 0 0; } }
.projeto-numeros-cartao { position: relative; isolation: isolate; contain: paint; overflow: clip; border-radius: 12px; background: var(--tinta); color: var(--creme);
  padding: clamp(64px, 8.9vw, 128px) var(--g) clamp(64px, 8.3vw, 120px); }
/* capa do Behance, leve: a luz em brasa sobe do canto de baixo, o ✱ desfocado fica longe do texto e o grão por cima de tudo, menos da letra */
.projeto-numeros-cena { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip;
  background:
    radial-gradient(46% 58% at 0% 100%, rgb(196 52 26 / .42) 0%, rgb(196 52 26 / 0) 72%),
    radial-gradient(30% 36% at 6% 104%, rgb(255 90 54 / .3) 0%, rgb(255 90 54 / 0) 70%); }
.projeto-numeros-cena::after { content: ""; position: absolute; inset: 0; background: url(../marca/grao-256.png) 0 0 / 256px 256px; mix-blend-mode: screen; opacity: .07; }
.projeto-numeros-ast { position: absolute; width: min(64vw, 920px); max-width: none; height: auto; left: max(-24vw, -340px); bottom: max(-30vw, -430px);
  opacity: .62; mix-blend-mode: screen; rotate: -8deg; }
@media (prefers-reduced-motion: no-preference) {
  .projeto-numeros-ast { animation: projeto-respira 7s var(--ease-io) infinite alternate; }
}
@keyframes projeto-respira { from { opacity: .48; } to { opacity: .7; } }

.projeto-numeros-grade { row-gap: clamp(72px, 8.8vw, 128px); align-items: start; }
.projeto-numeros-rotulo { grid-column: 1 / span 3; color: var(--creme-70); }
.projeto-numeros-lista { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; }
.projeto-numero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(12px, 1.4vw, 20px);
  align-items: center; padding-bottom: 36px; }
.projeto-numero + .projeto-numero { padding-top: 38px; }
.projeto-numero-i { grid-column: 1 / -1; margin-bottom: 28px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--laranja); }
.projeto-numero-valor { margin: 0; font-size: clamp(30px, 3.5vw, 54px); font-weight: 800; letter-spacing: -0.05em; line-height: .94; text-wrap: balance; }
.projeto-numero-lado { align-self: center; }
.projeto-numero-rotulo { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.projeto-numero-texto { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--creme-70); }
.projeto-numero-texto span { color: var(--creme-50); margin-right: .3em; }
/* linha que se desenha (Mira: 1 s --e-linha, laranja virando cinza) */
.projeto-numero-risco { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--creme-14); transform-origin: 0 50%; }
.projeto-numero-risco::after { content: ""; position: absolute; inset: 0; background: var(--laranja); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .projeto-anima .projeto-numero-risco { transform: scaleX(0); transition: transform 1s var(--e-linha) calc(.15s + var(--k, 0) * .12s); }
  .projeto-anima .projeto-numero-risco::after { opacity: 1; transition: opacity .9s var(--e-padrao) calc(1s + var(--k, 0) * .12s); }
  .projeto-anima .projeto-numero.projeto-visto .projeto-numero-risco { transform: none; }
  .projeto-anima .projeto-numero.projeto-visto .projeto-numero-risco::after { opacity: 0; }
  .projeto-anima .projeto-numero > :not(.projeto-numero-risco) { opacity: 0; transform: translateY(15px);
    transition: opacity .8s var(--e-texto) calc(.2s + var(--k, 0) * .1s), transform .8s var(--e-texto) calc(.2s + var(--k, 0) * .1s); }
  .projeto-anima .projeto-numero.projeto-visto > :not(.projeto-numero-risco) { opacity: 1; transform: none; }
}

.projeto-frase-rotulo { grid-column: 1 / span 3; color: var(--creme-70); }
.projeto-frase-autor { grid-column: 4 / span 3; margin: 0; }
.projeto-frase-autor img { width: min(200px, 100%); aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 10px; }
.projeto-frase-autor figcaption { display: grid; gap: 2px; margin-top: 22px; font-size: 13px; line-height: 1.35; }
.projeto-frase-autor figcaption span + span { color: var(--creme-50); }
.projeto-frase { grid-column: 7 / -1; margin: 0; max-width: 24ch; font-size: clamp(22px, 2.1vw, 32px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; }
@media (max-width: 899px) {
  .projeto-numeros-cartao { padding: 56px 20px 60px; }
  .projeto-numeros-grade { row-gap: 0; }
  .projeto-numeros-rotulo, .projeto-numeros-lista, .projeto-frase { grid-column: 1 / -1; }
  .projeto-numeros-lista { margin-top: 18px; }
  .projeto-numero { padding-bottom: 28px; }
  .projeto-numero + .projeto-numero { padding-top: 26px; }
  .projeto-numero-i { margin-bottom: 18px; }
  .projeto-numero-valor { font-size: clamp(26px, 7.4vw, 34px); }
  .projeto-frase { order: 1; margin-top: 56px; font-size: 22px; max-width: none; }
  .projeto-frase-rotulo { order: 2; grid-column: 1 / span 6; margin-top: 44px; }
  .projeto-frase-autor { order: 3; grid-column: 7 / -1; margin-top: 44px; }
  .projeto-frase-autor img { width: 100%; }
  .projeto-numeros-ast { width: 150vw; left: -70vw; bottom: -40vw; }
}

/* =================== MAIS PROJETOS =================== */
.projeto-mais { padding-block: clamp(96px, 17vw, 248px) clamp(96px, 16vw, 236px); }
.projeto-mais-rotulo { grid-column: 4 / -1; margin: 0 0 18px; color: var(--tinta-60); }
.projeto-mais-lista { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; }
.projeto-mais-link { position: relative; display: inline-flex; align-items: flex-start; gap: .1em; font-size: clamp(34px, 3.95vw, 58px); font-weight: 800;
  letter-spacing: -0.05em; line-height: 1.28; transition: opacity .46s var(--e-mira); }
.projeto-mais-link .rolo { margin-block: -.14em; }
.projeto-mais-link .rolo > span { padding-block: .14em; }
.projeto-mais-link sup { position: relative; top: .55em; margin-left: .32em; font-size: 12px; font-weight: 700; letter-spacing: .01em; line-height: 1; text-transform: uppercase; color: var(--tinta-60); white-space: nowrap; }
.projeto-mais-link .rolo > span { transition-duration: .46s; }   /* "More Project Nav" do Mira: .46 s --e-mira */
.projeto-mais-mini { align-self: center; flex: none; width: 1.5em; margin-left: .32em; opacity: 0; transform: scale(.9); transition: opacity .6s var(--e-mira), transform .6s var(--e-mira); }
.projeto-mais-mini img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.projeto-mais-link:hover .projeto-mais-mini, .projeto-mais-link:focus-visible .projeto-mais-mini { opacity: 1; transform: none; }
@media (hover: hover) {
  .projeto-mais-lista:hover .projeto-mais-link:not(:hover) { opacity: .32; }
}
@media (prefers-reduced-motion: no-preference) {
  .projeto-anima .projeto-mais-item { opacity: 0; transform: translateY(20px); transition: opacity .85s var(--e-texto), transform .85s var(--e-texto); transition-delay: calc(.2s + var(--k, 0) * .1s); }
  .projeto-anima .projeto-mais-item.projeto-visto { opacity: 1; transform: none; }
}
@media (max-width: 899px) {
  .projeto-mais { padding-block: 88px 96px; }
  .projeto-mais-rotulo, .projeto-mais-lista { grid-column: 1 / -1; }
  .projeto-mais-item + .projeto-mais-item { margin-top: 14px; }
  .projeto-mais-link { display: flex; width: 100%; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.2; }
  .projeto-mais-link sup { top: .3em; font-size: 10px; margin-left: .45em; flex: 0 10 auto; white-space: normal; }   /* quem cede espaço é o rótulo, não o nome */
  .projeto-mais-mini { margin-left: auto; width: 52px; opacity: 1; transform: none; }
  .projeto-mais-mini img { aspect-ratio: 1; border-radius: 8px; }
}

/* =================== CONTATO =================== */
/* o bloco é o da página inicial; no case do Mira o rótulo vem sem o número da dobra ("BOOK A CALL"), e aqui também.
   O fundo continua a foto dele: a do projeto ficaria com o grão do bloco por cima do trabalho do cliente (referencias-figma.md, 1.4) */
.pagina-projeto .inicio-contato-rotulo .num { display: none; }

/* =================== CHAMADA (só se o contato da página inicial não existir) =================== */
.projeto-chamada { padding-block: 80px 120px; display: grid; gap: 28px; justify-items: start; }

/* CMS: o esqueleto vazio não mostra os blocos sem conteúdo */
.projeto-vazio .projeto-topo-risco, .projeto-vazio .projeto-numeros, .projeto-vazio .projeto-texto, .projeto-vazio .projeto-brief { visibility: hidden; }

/* ===== pagina-projetos.css ===== */
/* PROJETOS (/projetos) · clone do /projects do Mira (paginas/projects_desk.jpg e _cel.jpg; animacoes.md, seção 2).
   Valores do Mira (componente "Curvy Project Showcase"): computador ≥1200 com cartão 1,6:1 em 65% da largura, vizinhas a .69
   aparecendo 15%; tablet 810 a 1199 com 1,15:1; celular com .85:1 em 75%, vizinhas a .5 aparecendo 7%; raio 12; nomes com
   60/40/30 px de espaço, o atual aceso e os outros apagados; contador 450 ms. Tudo com prefixo projetos-.
   As vizinhas ficam nítidas e cortadas pela borda do palco, como no Mira parado: o grão mora só no fundo, nunca sobre o
   trabalho do cliente (referencias-figma.md, regras de desempenho e de uso).
   Movimento só com transform e opacity. Sem JS: fila que rola pro lado. Movimento reduzido: sem curva e sem deslizar. */

.pagina-projetos { --pp-lado: .69; }
.projetos-palco { position: relative; height: 100svh; min-height: 600px; padding: 6px 6px 0; }
.projetos-cartao { position: relative; isolation: isolate; contain: paint; height: 100%; border-radius: 10px; overflow: clip; color: var(--creme);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  /* luz de ferrugem fraca nos cantos (o laranja dele no escuro, como a capa do Behance), sem cor nova */
  background:
    radial-gradient(46% 58% at 98% 0%, rgb(196 52 26 / .34) 0%, rgb(196 52 26 / 0) 72%),
    radial-gradient(52% 50% at 0% 104%, rgb(110 26 12 / .55) 0%, rgb(110 26 12 / 0) 70%),
    var(--tinta); }

/* ---------- fundo: ✱ já desfocado cortado pela borda + grão de filme (2 camadas com mistura, no máximo) ---------- */
.projetos-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.projetos-fundo::after { content: ""; position: absolute; inset: 0; background: url(../marca/grao-256.png) 0 0 / 256px 256px;
  mix-blend-mode: screen; opacity: .05; }
.projetos-fundo-ast { position: absolute; width: min(56vw, 820px); height: auto; right: -19%; top: -44%; max-width: none;
  opacity: .5; mix-blend-mode: screen; transform: rotate(14deg); }
@media (prefers-reduced-motion: no-preference) {
  .projetos-fundo-ast { animation: projetos-respira 7s var(--ease-io) infinite alternate; }
  @keyframes projetos-respira { from { opacity: .36; } to { opacity: .56; } }
}

/* ---------- cabeçalho: logo | título | período ---------- */
.projetos-cabecalho { padding-top: 20px; }
.projetos-titulo, .projetos-periodo { margin: 0; font-size: clamp(17px, 1.6vw, 24px); font-weight: 800; letter-spacing: -0.035em;
  line-height: 1; text-transform: uppercase; white-space: nowrap; }
.projetos-titulo .serifa { text-transform: none; line-height: .7; }
.projetos-titulo sup { font-size: .5em; font-weight: 700; letter-spacing: 0; color: var(--laranja); vertical-align: top; margin-left: .2em; position: relative; top: -.15em; }
.projetos-titulo { grid-column: 2; }
.projetos-periodo { grid-column: 4; justify-self: start; }

/* ---------- carrossel ---------- */
.projetos-carrossel { position: relative; z-index: 1; min-height: 0; outline: none; }
.projetos-trilha { margin: 0; padding: 0; }
.projetos-slide { margin: 0; }
.projetos-capa { display: block; color: inherit; -webkit-tap-highlight-color: transparent; }
.projetos-dobra { display: block; position: relative; height: 100%; border-radius: 12px; overflow: hidden; background: var(--tinta-2);
  transform-origin: 50% 50%; backface-visibility: hidden; }
.projetos-dobra picture, .projetos-dobra img, .projetos-dobra video { display: block; width: 100%; height: 100%; }
.projetos-dobra img, .projetos-dobra video { object-fit: cover; object-position: var(--pp-foco, 50% 50%); transition: transform 1.1s var(--ease);
  -webkit-user-drag: none; user-select: none; }
.projetos-capa:focus-visible { outline: none; }
.projetos-capa:focus-visible .projetos-dobra { outline: 2px solid var(--laranja); outline-offset: 4px; }

/* ficha embaixo do cartão, 15 px abaixo (no Mira: ramo | ano): serviço | prazo, uma linha de microtexto
   (a frase do projeto fica só pro leitor de tela, com .visualmente-oculto no modelo) */
.projetos-detalhes { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 15px; }
.projetos-servico, .projetos-prazo { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; line-height: 1.2; }
.projetos-prazo { color: var(--creme-50); text-align: right; white-space: nowrap; }

/* sem JS: uma fila de cartões que rola pro lado (com encaixe) */
.projetos-carrossel { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.projetos-carrossel::-webkit-scrollbar { display: none; }
.projetos-trilha { display: flex; gap: 16px; align-items: center; height: 100%; padding: 0 var(--g); width: max-content; }
.projetos-slide { flex: 0 0 auto; width: min(75vw, calc((100svh - 330px) * .85)); scroll-snap-align: center; }
.projetos-capa { aspect-ratio: .85; }
@media (min-width: 810px) {
  .projetos-slide { width: min(62vw, calc((100svh - 330px) * 1.15)); }
  .projetos-capa { aspect-ratio: 1.15; }
}
@media (min-width: 1200px) {
  .projetos-slide { width: min(62vw, calc((100svh - 330px) * 1.6)); }
  .projetos-capa { aspect-ratio: 1.6; }
}

/* com JS: o palco do Mira. O CSS já põe cada cartão no lugar inicial (--p, --ap) pra não piscar; o script afina e move.
   Medidas de partida (o script troca pelas exatas): cartão em 75% (celular) ou 65% (tablet e computador) da largura. */
.js .projetos-carrossel { overflow: hidden; overflow: clip; scroll-snap-type: none; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  --pp-w: calc(100vw - var(--trilho) - 12px);
  --pp-cw: min(var(--pp-w) * .75, (100svh - 340px) * .85); --pp-ch: calc(var(--pp-cw) / .85);
  --pp-passo: calc(var(--pp-w) / 2 + var(--pp-cw) * var(--pp-lado) / 2 - var(--pp-w) * .07);
  --pp-topo: calc(50% - var(--pp-ch) / 2 - 20px); }
@media (min-width: 810px) {
  .js .projetos-carrossel { --pp-cw: min(var(--pp-w) * .65, (100svh - 330px) * 1.15); --pp-ch: calc(var(--pp-cw) / 1.15);
    --pp-passo: calc(var(--pp-w) / 2 + var(--pp-cw) * var(--pp-lado) / 2 - var(--pp-w) * .15); }
}
@media (min-width: 1200px) {
  .js .projetos-carrossel { --pp-cw: min(var(--pp-w) * .65, (100svh - 330px) * 1.6); --pp-ch: calc(var(--pp-cw) / 1.6); }
}
@media (max-width: 809px) { .pagina-projetos { --pp-lado: .5; } }
.js .projetos-carrossel.arrastando, .js .projetos-carrossel.arrastando .projetos-capa { cursor: grabbing; }

/* o palco do Mira: as vizinhas aparecem nítidas e a borda do cartão escuro corta (sem máscara: repintar máscara a cada quadro pesa) */
.js .projetos-trilha { position: absolute; inset: 0; display: block; width: auto; height: auto; padding: 0;
  opacity: 0; transition: opacity .45s ease; }
.js .projetos-trilha.pronta { opacity: 1; }
.js .projetos-trilha:not(.pronta) { animation: projetos-mostra 0s 2.5s forwards; }   /* reserva se o script falhar */
@keyframes projetos-mostra { to { opacity: 1; } }

.js .projetos-slide { position: absolute; left: calc(50% - var(--pp-cw) / 2); top: var(--pp-topo); width: var(--pp-cw);
  transform-origin: 50% calc(var(--pp-ch) / 2);
  transform: translate3d(calc(var(--p) * var(--pp-passo)), 0, 0) scale(calc(1 - (1 - var(--pp-lado)) * var(--ap))); }
.js .projetos-capa { aspect-ratio: auto; height: var(--pp-ch); }
.js .projetos-slide:not(.ativo) .projetos-capa { cursor: pointer; }
.js .projetos-slide:not(.ativo) .projetos-detalhes { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .js .projetos-slide.ativo .projetos-capa:hover img { transform: scale(1.035); }
}

/* ---------- base: nomes gigantes + setas e contador ---------- */
.projetos-base { position: relative; z-index: 2; display: grid; gap: 14px; padding: 0 var(--g) 22px; }
.projetos-faixa { display: none; }
.js .projetos-faixa { display: block; overflow: hidden; margin-inline: calc(var(--g) * -1); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.projetos-faixa-trilho { display: inline-flex; gap: max(60px, 3.125vw); white-space: nowrap; padding: .04em 0 .14em; will-change: transform; }
.projetos-nome { font-size: max(80px, 4.17vw); font-weight: 800; letter-spacing: -0.055em; line-height: .9; color: var(--creme);
  opacity: .38; transition: opacity 320ms ease; cursor: pointer; }
.projetos-nome.ativo { opacity: 1; }
@media (max-width: 1199px) { .projetos-faixa-trilho { gap: 40px; } .projetos-nome { font-size: 64px; } }
@media (max-width: 809px) { .projetos-faixa-trilho { gap: 30px; } .projetos-nome { font-size: 45px; } }

.projetos-controles { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.projetos-dica { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; line-height: 1.2; color: var(--creme-50); }
.projetos-nav { display: none; }
.js .projetos-nav { display: flex; align-items: center; gap: 14px; }
.projetos-seta { width: 34px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--creme); transition: color .3s, transform .35s var(--ease); }
.projetos-seta svg { width: 11px; height: 11px; }
.projetos-seta:focus-visible { color: var(--laranja); }
@media (hover: hover) {
  .projetos-seta:hover { color: var(--laranja); }
  .projetos-seta[data-dir="-1"]:hover { transform: translateX(-2px); }
  .projetos-seta[data-dir="1"]:hover { transform: translateX(2px); }
}
.projetos-conta { margin: 0; display: flex; align-items: baseline; gap: .45em; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.projetos-conta-barra { color: var(--creme-50); }
.projetos-conta-atual { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.projetos-conta-atual > span { display: block; }
.projetos-conta-atual > span.sai { position: absolute; left: 0; top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .projetos-conta-atual > .entra-cima { animation: projetos-entra-cima .45s var(--e-contador) both; }
  .projetos-conta-atual > .entra-baixo { animation: projetos-entra-baixo .45s var(--e-contador) both; }
  .projetos-conta-atual > .sai.cima { animation: projetos-sai-cima .45s var(--e-contador) both; }
  .projetos-conta-atual > .sai.baixo { animation: projetos-sai-baixo .45s var(--e-contador) both; }
}
@keyframes projetos-entra-cima { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes projetos-entra-baixo { from { transform: translateY(-110%); } to { transform: translateY(0); } }
@keyframes projetos-sai-cima { from { transform: translateY(0); } to { transform: translateY(-110%); } }
@keyframes projetos-sai-baixo { from { transform: translateY(0); } to { transform: translateY(110%); } }

/* ---------- celular: a barra fixa do topo (logo + menu) fica por cima do cartão, como no Mira; o título desce pra linha de baixo ---------- */
@media (max-width: 899px) {
  .projetos-palco { margin-top: -64px; min-height: 640px; }
  .projetos-cartao { padding-top: 52px; border-radius: 12px;
    background:
      radial-gradient(70% 40% at 100% 100%, rgb(196 52 26 / .3) 0%, rgb(196 52 26 / 0) 72%),
      radial-gradient(60% 34% at 0% 0%, rgb(110 26 12 / .4) 0%, rgb(110 26 12 / 0) 70%),
      var(--tinta); }
  .projetos-fundo-ast { width: 120vw; right: -66vw; top: auto; bottom: -40vw; }
  @media (prefers-reduced-motion: no-preference) { .projetos-fundo-ast { animation-name: projetos-respira-cel; } }
  @keyframes projetos-respira-cel { from { opacity: .22; } to { opacity: .34; } }
  .projetos-cabecalho { display: block; padding-top: 34px; }
  .projetos-logo { display: none; }
  .projetos-barra { grid-template-columns: 1fr auto; }
  .projetos-titulo { grid-column: 1; }
  .projetos-periodo { grid-column: 2; justify-self: end; }
}
@media (max-width: 809px) {
  .projetos-base { gap: 12px; padding-bottom: 18px; }
  .projetos-controles { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
  .projetos-dica { order: -1; text-align: center; font-size: 11px; }
}

/* ===== pagina-servico.css ===== */
/* Páginas de SERVIÇO (14/10, SEO): /branding, /identidade-visual, /criacao-de-site e as versões em inglês.
   Prefixo .servico-*. A grade de projetos (.porque-cli-*) e a sanfona de perguntas (.faq-*) são as mesmas da inicial;
   aqui só se ajusta o que muda nesta página, dentro de body.pagina-servico.
   Movimento: só transform e opacity (classes .revela e .revela-linhas do movimento.js); sem JS, tudo parado e visível. */

/* --- 1. topo --- */
.servico-topo { padding-top: clamp(64px, 8.4vw, 124px); padding-bottom: clamp(72px, 8vw, 120px); }
.servico-topo-grade { align-items: start; row-gap: clamp(28px, 3vw, 44px); }
.servico-rotulo { grid-column: 1 / span 3; padding-top: 10px; }
.servico-rotulo a { color: inherit; text-decoration: underline; text-decoration-color: var(--tinta-40); text-underline-offset: 3px; }
.servico-rotulo a:hover { text-decoration-color: var(--laranja); }
.servico-cabeca { grid-column: 4 / -1; }
.servico-titulo { margin: 0; font-weight: 800; font-size: clamp(54px, 9vw, 160px); letter-spacing: -0.055em; line-height: .86; text-wrap: balance; }
.servico-titulo .serifa { line-height: .76; }
.js .servico-titulo .linha + br { display: none; }
.servico-resposta { grid-column: 4 / span 6; }
.servico-lead { margin: 0; max-width: 32em; font-size: clamp(19px, 1.6vw, 25px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.16;
  text-indent: 22%; text-wrap: pretty; }
.servico-apoio { margin: clamp(16px, 1.4vw, 22px) 0 0; max-width: 34em; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.45; color: var(--tinta-60); text-wrap: pretty; }
.servico-botao { margin-top: clamp(24px, 2.2vw, 34px); }

.servico-fatos { margin: clamp(64px, 7vw, 110px) 0 0; padding-top: 18px; border-top: 1px solid var(--tinta-12); row-gap: 28px; }
.servico-fato { grid-column: span 4; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; margin: 0; }
.servico-fato-valor { margin: 0; font-weight: 800; font-size: clamp(36px, 4.4vw, 72px); letter-spacing: -0.05em; line-height: .9; }
.servico-fato-rotulo { color: var(--tinta-60); max-width: 18em; }

/* --- 2. o que entra: cartão escuro com grão --- */
.servico-cartao { position: relative; overflow: hidden; border-radius: var(--raio); background: var(--tinta); color: var(--creme);
  padding: clamp(40px, 5vw, 84px) clamp(20px, 3vw, 48px); }
.servico-cartao > .grade { position: relative; z-index: 2; }
.servico-cartao-grao { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("../marca/grao-256.png") 0 0 / 176px 176px; mix-blend-mode: overlay; opacity: .18; }
.servico-inclui-rotulo { grid-column: 1 / span 3; color: var(--creme-70); padding-top: 6px; }
.servico-inclui-lista { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px); }
.servico-inclui-item { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 8px; align-items: baseline;
  padding-top: 18px; border-top: 1px solid var(--creme-14); }
.servico-inclui-num { grid-row: span 2; font-family: var(--serifa); font-style: italic; font-size: clamp(22px, 1.8vw, 30px); color: var(--laranja); line-height: 1; }
.servico-inclui-nome { margin: 0; font-weight: 800; font-size: clamp(20px, 1.7vw, 28px); letter-spacing: -0.035em; line-height: 1.02; }
.servico-inclui-texto { margin: 0; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.45; color: var(--creme-70); text-wrap: pretty; }

/* --- 3. como funciona --- */
.servico-passos { padding-block: clamp(96px, 9vw, 132px) 0; }
.servico-passos-rotulo { grid-column: 1 / span 3; padding-top: 6px; }
.servico-passos-lista { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 32px); }
.servico-passo { padding-top: 16px; border-top: 1px solid var(--tinta-12); }
.servico-passo-num { display: block; font-family: var(--serifa); font-style: italic; font-size: clamp(40px, 4vw, 64px); line-height: .9; color: var(--laranja); }
.servico-passo-nome { margin: 14px 0 8px; font-weight: 800; font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -0.035em; line-height: 1; }

/* --- 4. projetos: a grade da inicial, sem o "2020 / 2026©" de baixo --- */
.pagina-servico .servico-projetos { padding-bottom: clamp(40px, 4vw, 64px); }

/* --- 5. perguntas --- */
.pagina-servico .servico-faq .faq-titulo { text-wrap: balance; }

/* --- 6. contato + outros serviços --- */
.servico-fim { padding-block: clamp(40px, 4vw, 64px) clamp(64px, 6vw, 96px); }
.servico-fim-cartao { position: relative; overflow: hidden; border-radius: var(--raio); background: var(--laranja); color: #fff;
  padding: clamp(40px, 5vw, 84px) clamp(20px, 3vw, 48px); }
.servico-fim-cartao > .grade { position: relative; z-index: 2; align-items: end; row-gap: 40px; }
.servico-fim-texto { grid-column: 1 / span 7; }
.servico-fim-titulo { color: #fff; }
.servico-fim-titulo .serifa { color: var(--tinta); }
.servico-fim-apoio { margin: clamp(18px, 1.6vw, 26px) 0 0; max-width: 30em; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.4; font-weight: 600; }
.servico-fim-botao { margin-top: clamp(24px, 2.2vw, 34px); }
.pagina-servico .servico-fim .botao.servico-fim-botao { background: var(--tinta); color: var(--creme); border-color: var(--tinta); }
.pagina-servico .servico-fim .botao.servico-fim-botao .seta { background: var(--laranja); color: #fff; }
.servico-outros { grid-column: 9 / -1; }
.servico-outros-rotulo { margin-bottom: 12px; opacity: .8; }
.servico-outros ul { list-style: none; margin: 0; padding: 0; }
.servico-outros li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; color: #fff; text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, .35); font-weight: 800; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: -0.03em; }
.servico-outros li:last-child a { border-bottom: 1px solid rgba(255, 255, 255, .35); }
.servico-outros li a .seta { transition: transform .4s var(--ease); }
.servico-outros li a:hover .seta { transform: translate(3px, -3px); }
.servico-fim-ast { position: absolute; z-index: 1; right: -6%; top: -18%; width: clamp(180px, 22vw, 360px); height: auto; opacity: .16; filter: brightness(0) invert(1); pointer-events: none; }

/* --- celular --- */
@media (max-width: 899px) {
  .servico-rotulo, .servico-cabeca, .servico-resposta { grid-column: 1 / -1; }
  .servico-rotulo { padding-top: 0; }
  .servico-lead { text-indent: 18%; }
  .servico-fato { grid-column: 1 / -1; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 14px; }
  .servico-fato-rotulo { text-align: left; }
  .servico-inclui-rotulo, .servico-inclui-lista, .servico-passos-rotulo, .servico-passos-lista { grid-column: 1 / -1; }
  .servico-inclui-rotulo, .servico-passos-rotulo { margin-bottom: 28px; }
  .servico-inclui-lista { grid-template-columns: 1fr; }
  .servico-passos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .servico-fim-texto, .servico-outros { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .servico-passos-lista { grid-template-columns: 1fr; }
}

/* ===== zz-ajustes.css ===== */
/* Ajustes do dono da sessão por cima das seções (carrega por último).
   06/10, pedido do Mateus: textos de apoio alinhados à esquerda, sem justificar e sem recuo/centro. */
.inicio-contato-sub, .pagina-contato-sub, .estudio-contato-sub,
.ig-intro, .servicos-intro, .porque-frase, .blog-artigo-intro, .estudio-topo-frase {
  text-align: left !important; text-indent: 0 !important; text-align-last: auto !important; justify-self: start; margin-left: 0; }
:is(.inicio-contato-sub, .pagina-contato-sub, .estudio-contato-sub, .ig-intro, .servicos-intro, .porque-frase, .blog-artigo-intro, .estudio-topo-frase) .linha,
:is(.inicio-contato-sub, .pagina-contato-sub, .estudio-contato-sub, .ig-intro, .servicos-intro, .porque-frase, .blog-artigo-intro, .estudio-topo-frase) .linha > span {
  text-align: left !important; text-indent: 0 !important; text-align-last: auto !important; }
.inicio-contato-sub-1, .pagina-contato-sub-1 { text-indent: 0 !important; }
.inicio-contato-sub-1 > .linha:first-child > span, .pagina-contato-sub-1 > .linha:first-child > span { margin-left: 0 !important; }

/* 06/10: os cartões dos clientes e as perguntas do FAQ ganham destaque: tinta, texto creme, número/sinal laranja */
.porque-cli-cartao { background: var(--tinta); color: var(--creme); }
.porque-cli-num { color: var(--laranja); }
.porque-cli-servico { color: var(--creme-50); }
.faq-botao { background: var(--tinta); color: var(--creme); padding: 20px 22px; font-size: 16px; }
.faq-botao:hover { background: var(--tinta-2); }
.js .faq-botao[aria-expanded="true"] { background: var(--laranja); color: var(--tinta); }
.faq-mais { color: var(--laranja); width: 14px; height: 14px; }
.js .faq-botao[aria-expanded="true"] .faq-mais { color: var(--tinta); }

/* 06/10: Quem faz refeito — 4 cartões iguais numa fileira, papel grande sobre a foto */
.equipe-papeis { position: relative; z-index: 2; list-style: none; margin: clamp(48px, 5vw, 80px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.equipe-papel figure { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 10px; overflow: clip; background: var(--tinta); isolation: isolate; }
.equipe-papel picture, .equipe-papel img { display: block; width: 100%; height: 100%; }
.equipe-papel img { object-fit: cover; transition: transform 1.1s var(--e-mira); }
.equipe-papel figure:hover img { transform: scale(1.05); }
.equipe-papel figure::after { content: ""; position: absolute; inset: 45% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(21,20,19,0), rgba(21,20,19,.78)); }
.equipe-papel-num { position: absolute; z-index: 2; left: 16px; top: 14px; font-size: 13px; font-weight: 700; color: var(--creme); }
.equipe-papel figcaption { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 6px; color: var(--creme); }
.equipe-papel-nome { font-size: clamp(22px, 2.1vw, 34px); font-weight: 800; letter-spacing: -0.045em; line-height: .95; }
.equipe-papel-texto { font-size: 13px; font-weight: 600; color: var(--creme-70); }
.equipe-papeis-link { position: relative; z-index: 2; display: flex; width: max-content; margin: 28px 0 0 auto; }
@media (max-width: 899px) {
  .equipe-papeis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .equipe-papel-nome { font-size: 20px; }
  .equipe-papel-texto { font-size: 11px; }
  .equipe-papeis-link { margin: 22px 0 0; }
}

/* 06/10: vitrine vira reel — capas dos projetos se revezando (opacidade + escala), véu mais leve */
.vitrine-reel .vitrine-quadro { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--e-mira); }
.vitrine-reel .vitrine-quadro.ativo { opacity: 1; }
.vitrine-reel .vitrine-quadro img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.08); transition: transform 2.4s cubic-bezier(.22, 1, .36, 1); }
.vitrine-reel .vitrine-quadro.ativo img { transform: scale(1); }
.vitrine-veu { background: radial-gradient(60% 55% at 50% 50%, rgba(21,20,19,.42), rgba(21,20,19,.12) 75%), linear-gradient(180deg, rgba(21,20,19,.1), rgba(21,20,19,.35)) !important; }
.vitrine-sob { text-transform: none; }

/* 06/10: "O que dá pra medir" — o site da Toothbar de verdade, computador + celular sobrepostos */
.porque-site { position: relative; margin: clamp(48px, 5vw, 84px) 0 clamp(70px, 7vw, 120px); padding-right: 14%; }
.porque-site-desk { border-radius: 12px; overflow: clip; background: var(--tinta); box-shadow: 0 30px 60px -30px rgba(21,20,19,.35); border: 6px solid var(--tinta); }
.porque-site-desk img, .porque-site-cel img { display: block; width: 100%; height: auto; }
.porque-site-cel { position: absolute; right: 0; bottom: -8%; width: 24%; border-radius: 26px; overflow: clip; border: 6px solid var(--tinta);
  background: var(--tinta); box-shadow: 0 30px 60px -24px rgba(21,20,19,.45); aspect-ratio: 390 / 760; }
.porque-site-cel img { height: 100%; object-fit: cover; object-position: 50% 0; }
.porque-site-legenda { position: absolute; left: 0; bottom: -34px; color: var(--tinta-60); }
.porque-serie-depois .porque-barra { background: var(--laranja) !important; }
@media (max-width: 899px) {
  .porque-site { padding-right: 18%; margin-bottom: 80px; }
  .porque-site-desk { border-width: 3px; border-radius: 8px; }
  .porque-site-cel { width: 34%; border-width: 3px; border-radius: 16px; bottom: -14%; }
}

/* 06/10: a moldura E04 da Fotografia saiu (pedido do Mateus) */
.servicos-visor::after { content: none !important; display: none !important; }

/* 06/10: composições do nome no topo (a = faixa de ponta a ponta, b = editorial em 2 linhas, c = centrado com o designer embaixo) */
.topo-designer { position: absolute; z-index: 4; font-family: var(--serifa); font-style: italic; font-weight: 400; letter-spacing: 0; line-height: 1; color: var(--laranja); white-space: nowrap; pointer-events: none; }
/* a: o "designer" pousado acima do M, alinhado com o começo do nome */
.topo[data-v="a"] .topo-designer { left: var(--l1x); top: var(--l1y); font-size: calc(var(--nome-fs) * .3); transform: translate(.04em, -88%); }
/* b: Mateus à esquerda, Cremon à direita; o designer no vão, antes do Cremon */
@media (min-width: 900px) {
  .topo[data-v="b"] .topo-nome { text-align: left; white-space: normal; line-height: .84; padding: 0 5%; }
  .topo[data-v="b"] .topo-nome-l { display: block; }
  .topo[data-v="b"] .topo-nome-l + .topo-nome-l { text-align: right; }
  .topo[data-v="b"] .topo-designer { left: var(--l2x); top: var(--l2y); font-size: calc(var(--nome-fs) * .34); transform: translate(calc(-100% - .3em), -120%); }
}
/* c: nome centrado e contido; o designer embaixo, centrado, na frente do cabelo */
.topo[data-v="c"] .topo-designer { left: 50%; top: var(--nb); font-size: calc(var(--nome-fs) * .36); transform: translate(-50%, -30%); }
@media (max-width: 899px) {
  .topo-designer { left: var(--l1x) !important; top: var(--l1y) !important; font-size: calc(var(--nome-fs) * .3) !important; transform: translate(.04em, -88%) !important; }
}
/* d: tarja laranja do kit (Instrument Serif) colada embaixo do nome, centrada na cabeça; o cabelo passa por cima dela */
.topo[data-v="d"] .topo-designer { z-index: 4; left: var(--l2r); top: calc(var(--nb) - var(--nome-fs) * .1); font-size: calc(var(--nome-fs) * .3);
  transform: translate(-96%, 0) rotate(-3deg); background: var(--laranja); color: var(--tinta); padding: .02em .32em .1em; border-radius: 2px; line-height: 1; }
@media (max-width: 899px) {
  .topo[data-v="d"] .topo-designer { left: var(--l2r) !important; top: calc(var(--nb) - var(--nome-fs) * .1) !important; font-size: calc(var(--nome-fs) * .3) !important; transform: translate(-96%, 0) rotate(-3deg) !important; }
}

/* 06/10: a tarja do "designer" é a do kit (C06, pintada à mão), e uma seta do kit aponta pra ela */
.topo[data-v="d"] .topo-designer { background: url(../marca/kit-C06-laranja.webp) center / 100% 100% no-repeat; border-radius: 0; padding: .1em .5em .2em; }
.topo[data-v="d"] .topo-designer::before { content: ""; position: absolute; right: calc(100% + .1em); top: 40%; width: 1.7em; aspect-ratio: 412 / 158;
  background: url(../marca/kit-M02a-creme.webp) center / contain no-repeat; transform: rotate(-10deg); opacity: .95; }
@media (max-width: 899px) { .topo[data-v="d"] .topo-designer::before { width: 1.3em; } }

/* 06/10: o oval do kit em volta do "comigo" saiu (cobria a palavra; reprovado) */
/* Quem faz: o ✱ desenhado em creme, pequeno, ao lado do rótulo */
.equipe-rotulo { position: relative; }
.equipe-rotulo::after { content: ""; display: inline-block; vertical-align: middle; width: 26px; height: 26px; margin-left: 10px;
  background: url(../marca/kit-M04-creme-160.webp) center / contain no-repeat; transform: rotate(12deg); }

/* 06/10: botões no modelo do "Vamos conversar": barra laranja com o texto dentro e o quadrado tinta da seta;
   no hover o botão e o quadrado arredondam juntos (o quadrado sempre 3 px menor). Os links do Instagram do rodapé ficam como link. */
.botao:not(.rodape-redes .botao) { height: 40px; padding: 3px 3px 3px 16px; gap: 14px; background: var(--laranja); color: var(--tinta); border-radius: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; transition: transform .56s var(--e-mira), border-radius .56s var(--e-mira); }
.botao:not(.rodape-redes .botao) .seta { width: 34px; height: 34px; border-radius: 1px; background: var(--tinta); color: var(--creme); transition: border-radius .56s var(--e-mira); }
.botao:not(.rodape-redes .botao) .seta svg { width: 12px; height: 12px; transition: transform .56s var(--e-mira); }
.botao:not(.rodape-redes .botao):is(:hover, :focus-visible) { transform: scale(.95); border-radius: 16px; }
.botao:not(.rodape-redes .botao):is(:hover, :focus-visible) .seta { transform: none; border-radius: 13px; }
.botao:not(.rodape-redes .botao):is(:hover, :focus-visible) .seta svg { transform: translateX(2px); }
.rodape-redes .botao .seta { display: none; }

/* 06/10: o nome do projeto embaixo do reel saiu (pedido do Mateus) */
.vitrine-sob { display: none !important; }

/* 06/10: "Voltar" não é botão laranja: vira link simples com a seta, rolo no hover */
.botao[class*="voltar"] { height: auto !important; padding: 0 !important; gap: 10px !important; background: none !important; color: inherit !important; border-radius: 0 !important; transform: none !important; }
.botao[class*="voltar"] .seta { width: 26px !important; height: 26px !important; border-radius: 50% !important; background: var(--laranja) !important; color: var(--tinta) !important; }
.botao[class*="voltar"]:is(:hover, :focus-visible) .seta { transform: translateX(-3px) !important; border-radius: 50% !important; }
/* botão em cima de fundo laranja: tinta com texto creme e quadrado laranja (contraste) */
:is(.equipe, .porque-cartao, [class*="laranja"]) .botao:not([class*="voltar"]) { background: var(--tinta) !important; color: var(--creme) !important; }
:is(.equipe, .porque-cartao, [class*="laranja"]) .botao:not([class*="voltar"]) .seta { background: var(--laranja) !important; color: var(--tinta) !important; }

/* 06/10: a faixa de nomes cortava as pernas (g, j); e a contagem de projetos saiu */
.projetos-faixa-trilho { padding: .12em 0 .3em !important; }
.projetos-nome { line-height: 1.12 !important; }
.projetos-periodo, .projetos-titulo sup { display: none !important; }

/* 06/10: "Quem faz" com contraste: fundo tinta com a luz laranja do ✱ (capa do Behance), frase creme, destaques em laranja, sem justificar */
.equipe-bloco { background: var(--tinta) !important; color: var(--creme) !important; }
.equipe-fundo { background: radial-gradient(60% 70% at 0% 100%, rgb(255 90 54 / .32), rgb(255 90 54 / 0) 70%), radial-gradient(50% 60% at 100% 0%, rgb(196 52 26 / .22), rgb(196 52 26 / 0) 70%) !important; }
.equipe-bloco::after { opacity: .5; }
.equipe-frase { color: var(--creme) !important; text-align: left !important; text-indent: 0 !important; }
.equipe-frase .linha, .equipe-frase .linha > span { text-align: left !important; text-align-last: auto !important; text-indent: 0 !important; }
.equipe-frase em.serifa, .equipe-frase .equipe-creme { color: var(--laranja) !important; }
.equipe-rotulo, .equipe-selo { color: var(--creme) !important; }
.equipe-selo { border-color: var(--creme-50) !important; }
.equipe .botao:not([class*="voltar"]) { background: var(--laranja) !important; color: var(--tinta) !important; }
.equipe .botao:not([class*="voltar"]) .seta { background: var(--tinta) !important; color: var(--creme) !important; }

/* 06/10: seta diagonal do Phosphor (ArrowUpRight, regular, preenchida, sem stroke) em todos os botões.
   Centro ótico: a massa da seta diagonal fica no canto de cima à direita, então ela desce e vai pra esquerda 4% da caixa. */
.botao .seta { display: grid !important; place-items: center !important; }
.botao .seta svg, .cta-seta, .vitrine-play svg { display: block; width: 18px !important; height: 18px !important; translate: -2.5% 2.5%; overflow: visible; }
.botao[class*="voltar"] .seta svg { width: 15px !important; height: 15px !important; translate: 2.5% 2.5%; }
.dep-seta svg, .ig-seta svg, .projetos-seta svg { width: 15px !important; height: 15px !important; }
.vitrine-play svg { width: 46% !important; height: 46% !important; }
.botao:not([class*="voltar"]):is(:hover, :focus-visible) .seta svg,
.topo-cta:is(:hover, :focus-visible) .cta-seta { transform: translate(2px, -2px) !important; }
.botao[class*="voltar"]:is(:hover, :focus-visible) .seta svg { transform: translate(-2px, -2px) !important; }
.vitrine-cartao:is(:hover, :focus-visible) ~ .vitrine-rotulo .vitrine-play svg { transform: translate(6%, -6%); }

/* 06/10: "Por que comigo" refeito. O cartão laranja ocupa metade da largura e mostra as três entregas
   (uma imagem de projeto de cada: marca, site, foto) e dois números; os números da direita chegam mais perto. */
.porque-provas { align-items: stretch !important; }
.porque-cartao { grid-column: 1 / span 6 !important; isolation: isolate; gap: clamp(28px, 2.6vw, 40px) !important; min-height: 0 !important;
  padding: clamp(26px, 2.4vw, 40px) !important; }
.porque-cartao > *:not(.porque-cartao-marca):not(.porque-cartao-grao) { position: relative; z-index: 2; }
.porque-cartao-marca { position: absolute; z-index: 0; right: -9%; bottom: -14%; width: 58%; height: auto; opacity: .1; transform: rotate(-12deg); pointer-events: none; }
.porque-cartao-grao { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("../marca/grao-256.png") 0 0 / 176px 176px; mix-blend-mode: multiply; opacity: .22; }
.porque-cartao-titulo { font-size: clamp(28px, 2.7vw, 44px) !important; margin-top: 26px !important; max-width: 12em; }
.porque-cartao-texto { font-size: 15px !important; max-width: 30em; }
.porque-entregas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.porque-entrega a { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.porque-entrega picture { display: block; aspect-ratio: 4 / 5; border-radius: 8px; overflow: clip; background: var(--tinta); box-shadow: 0 18px 30px -18px rgba(21, 20, 19, .5); }
.porque-entrega img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--e-mira); }
.porque-entrega a:is(:hover, :focus-visible) img { transform: scale(1.05); }
.porque-entrega-legenda { display: grid; gap: 2px; }
.porque-entrega-tipo { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.porque-entrega-nome { font-size: 13px; color: rgba(21, 20, 19, .72); }
.porque-cartao-numeros { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-top: 22px; border-top: 1px solid rgba(21, 20, 19, .22); }
.porque-cartao-numeros > div { display: flex; flex-direction: column-reverse; gap: 8px; }
.porque-cartao-numeros dd { margin: 0; font-weight: 800; font-size: clamp(44px, 4.4vw, 72px); letter-spacing: -0.055em; line-height: .82; }
.porque-cartao-numeros dt { font-size: 13px; font-weight: 600; line-height: 1.3; max-width: 16em; }
.porque-numeros { grid-column: 8 / -1 !important; display: flex; flex-direction: column; }
.porque-numeros .porque-citacao { margin-top: auto !important; padding: clamp(22px, 2vw, 30px); border-radius: 10px; background: var(--tinta); color: var(--creme); }
.porque-numeros .porque-citacao blockquote p { font-size: clamp(20px, 1.8vw, 28px) !important; max-width: 16em; }
.porque-numeros .porque-autor-papel { color: rgba(246, 241, 232, .6) !important; }
.porque-numeros .porque-autor img { width: 52px !important; height: 52px !important; border-radius: 50% !important; object-fit: cover; }
@media (min-width: 900px) and (max-width: 1199px) {
  .porque-cartao { grid-column: 1 / span 7 !important; }
  .porque-numeros { grid-column: 8 / -1 !important; }
}
@media (max-width: 899px) {
  .porque-cartao, .porque-numeros { grid-column: 1 / -1 !important; }
  .porque-entregas { gap: 8px; }
  .porque-entrega-nome { font-size: 11px; }
  .porque-entrega-tipo { font-size: 11px; }
}

/* 06/10: a tarja do "designer" (e a seta, que é o ::before dela) sobe junto com o nome na rolagem */
.topo-designer { translate: 0 var(--par, 0px); }

/* 06/10: Clientes (02) com os 9 projetos. A capa de cada um aparece sempre ao fundo, escurecida embaixo;
   o nome curto fica no pé, à esquerda, com o serviço embaixo. No hover a capa acende e cresce de leve. */
.porque-cli-grade { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
.porque-cli-cartao { place-items: end start !important; height: auto !important; aspect-ratio: 4 / 3; padding: clamp(14px, 1.3vw, 20px) !important; text-align: left; }
.porque-cli-capa { opacity: 1 !important; transform: scale(1.02) !important; transition: transform 1s var(--e-mira) !important; }
.porque-cli-capa img { filter: saturate(.92); transition: filter .8s var(--e-mira); }
.porque-cli-capa::after { background: linear-gradient(180deg, rgba(21,20,19,.28) 0%, rgba(21,20,19,.12) 35%, rgba(21,20,19,.82) 100%) !important; transition: opacity .8s var(--e-mira); }
.porque-cli-nome { color: var(--creme) !important; font-size: clamp(20px, 1.9vw, 30px) !important; margin-bottom: 1.35em; text-wrap: balance; transform: none !important; }
.porque-cli-servico { left: clamp(14px, 1.3vw, 20px) !important; bottom: clamp(14px, 1.3vw, 20px) !important; color: rgba(246, 241, 232, .7) !important; }
.porque-cli-num { left: clamp(14px, 1.3vw, 20px) !important; top: clamp(12px, 1.2vw, 18px) !important; color: var(--laranja) !important; }
@media (hover: hover) {
  .porque-cli-cartao:is(:hover, :focus-visible) .porque-cli-capa { transform: scale(1.07) !important; }
  .porque-cli-cartao:is(:hover, :focus-visible) .porque-cli-capa img { filter: saturate(1.05); }
  .porque-cli-cartao:is(:hover, :focus-visible) .porque-cli-capa::after { opacity: .75; }
}
@media (max-width: 899px) {
  .porque-cli-grade { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  .porque-cli-cartao { aspect-ratio: 1 / 1; height: auto !important; }
  .porque-cli-capa { display: block !important; }
  .porque-cli-nome { font-size: clamp(17px, 4.6vw, 22px) !important; }
}
.porque-cli-num { padding: 3px 7px; border-radius: 4px; background: rgba(21, 20, 19, .72); line-height: 1.2; }
@media (max-width: 899px) {
  .porque-cli-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .porque-cli-item:last-child:nth-child(odd) .porque-cli-cartao { aspect-ratio: 2 / 1; }
}

/* 06/10: Estúdio, "Por trás do nome" + "Em números" refeitos.
   Frase alinhada à esquerda (sem justificar, que abria buracos), retrato grande com a foto do ✱ por cima do canto,
   e os números num bloco tinta de ponta a ponta, com grão e a luz laranja, os 4 lado a lado. */
.estudio-cultura-lado { grid-column: 1 / span 4 !important; }
.estudio-frase { grid-column: 5 / -1 !important; text-align: left !important; font-size: clamp(30px, 3.9vw, 62px) !important; line-height: .98 !important; }
.js .estudio-frase .linha:not(:last-child) > span { text-align-last: auto !important; }
.estudio-cultura-fotos { position: relative; display: block !important; margin-top: 20px !important; width: 82%; }
.estudio-cultura-foto { width: 100% !important; }
.estudio-cultura-foto:nth-child(2) { aspect-ratio: 4 / 5 !important; border-radius: 10px !important; box-shadow: 0 30px 60px -34px rgba(21, 20, 19, .45); }
.estudio-cultura-foto:first-child { position: absolute; z-index: 2; right: -22%; bottom: -12%; width: 46% !important; aspect-ratio: 1 !important;
  border-radius: 10px !important; border: 5px solid var(--creme); transform: rotate(5deg); box-shadow: 0 20px 40px -20px rgba(21, 20, 19, .5); }

.estudio-numeros { position: relative; isolation: isolate; overflow: clip; margin-top: clamp(96px, 9vw, 140px) !important; padding: clamp(28px, 3vw, 52px) clamp(20px, 2.6vw, 44px) clamp(32px, 3.4vw, 56px);
  border-radius: 12px; background: var(--tinta); color: var(--creme); row-gap: clamp(28px, 3vw, 48px); }
.estudio-numeros::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 90% at 100% 100%, rgba(255, 90, 54, .32), transparent 70%); }
.estudio-numeros::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../marca/grao-256.png") 0 0 / 176px 176px; mix-blend-mode: overlay; opacity: .3; }
.estudio-numeros-rotulo { grid-column: 1 / -1 !important; padding-top: 0 !important; color: rgba(246, 241, 232, .6); }
.estudio-numeros-lista { grid-column: 1 / -1 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 0 !important; row-gap: 32px !important; }
.estudio-numero { padding: 0 clamp(16px, 2vw, 32px) 0 !important; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 16px; border-left: 1px solid rgba(246, 241, 232, .16); }
.estudio-numero:first-child { border-left: 0; padding-left: 0 !important; }
.estudio-numero::before, .estudio-numero::after { display: none !important; }
.estudio-numero-valor { margin: 0 !important; color: var(--creme); font-size: clamp(56px, 6.4vw, 108px) !important; }
.estudio-numero:nth-child(odd) .estudio-numero-valor { color: var(--laranja); }
.estudio-numero-rotulo { color: rgba(246, 241, 232, .66) !important; max-width: 22ch !important; }
@media (max-width: 899px) {
  .estudio-cultura-lado, .estudio-frase { grid-column: 1 / -1 !important; }
  .estudio-cultura-fotos { width: 70%; }
  .estudio-frase { margin-top: 64px !important; }
  .estudio-numeros-lista { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .estudio-numero:nth-child(3) { border-left: 0; padding-left: 0 !important; }
}
.estudio-cultura-grade { grid-template-rows: auto 1fr; }
.estudio-cultura-lado { grid-row: 1 / span 2; }
.estudio-frase-apoio { grid-column: 7 / span 5; grid-row: 2; align-self: end; margin: 40px 0 0; max-width: 34em; font-size: clamp(16px, 1.25vw, 19px); font-weight: 600; line-height: 1.4; color: var(--tinta-60); }
@media (max-width: 899px) { .estudio-cultura-lado { grid-row: auto; } .estudio-frase-apoio { grid-column: 1 / -1; grid-row: auto; margin-top: 24px; } }

/* 06/10: a lista suspensa é a própria (/lib/controles.js), nunca a do sistema. As cores dela vêm destas variáveis,
   na página toda porque a caixa abre presa ao <body>. */
:root { --ink: var(--tinta); --ink-2: #1E1C1A; --ink-3: #2B2825; --line: rgba(246, 241, 232, .09); --line-2: rgba(246, 241, 232, .2);
  --cream: var(--creme); --lime: var(--laranja); --mute: rgba(246, 241, 232, .6); --mute-2: rgba(246, 241, 232, .5); }
button.cds-gat.inicio-contato-caixa { text-align: left; font: inherit; cursor: pointer; }
.cds-caixa { font-family: inherit; border-radius: 10px !important; }
.cds-op.cds-escolhida .cds-ck { background: var(--laranja); border-color: var(--laranja); }
/* 07/10: serviço logo embaixo do nome (o espaço entre os dois estava grande) */
.porque-cli-cartao { align-content: end !important; grid-auto-rows: min-content; row-gap: 8px; }
.porque-cli-nome { margin-bottom: 0 !important; }
.porque-cli-servico { position: relative !important; left: auto !important; bottom: auto !important; }
/* 07/10: contraste do cartão laranja. O grão em multiply escurecia o laranja e os textos pequenos estavam transparentes:
   grão leve em overlay, todo texto em tinta cheia e mais pesado, o ✱ do fundo quase sumindo. */
.porque-cartao { background: var(--laranja) !important; }
.porque-cartao-grao { mix-blend-mode: overlay !important; opacity: .14 !important; }
.porque-cartao-marca { opacity: .06 !important; }
.porque-cartao-texto { font-weight: 600; font-size: 16px !important; color: var(--tinta); }
.porque-entrega-tipo { font-size: 12.5px; }
.porque-entrega-nome { color: var(--tinta) !important; font-weight: 600; }
.porque-cartao-numeros { border-top-color: rgba(21, 20, 19, .4) !important; }
.porque-cartao-numeros dt { font-weight: 700 !important; font-size: 14px !important; }
/* 07/10: texto do cartão laranja em branco (creme), a pedido */
.porque-cartao, .porque-cartao em.serifa, .porque-cartao-texto, .porque-entrega-nome, .porque-entrega-tipo, .porque-cartao-numeros dt, .porque-cartao-numeros dd { color: var(--creme) !important; }
.porque-cartao-numeros { border-top-color: rgba(246, 241, 232, .45) !important; }
.porque-cartao-marca { filter: invert(1) brightness(1.8); opacity: .1 !important; }

/* 07/10: acessibilidade (Lighthouse): número das provas em tinta (o laranja claro no creme ficava 2,9:1)
   e os links legais do rodapé com área de toque de 24 px */
.porque-numero-i { color: var(--tinta) !important; }
.rodape a[href$="/privacidade"], .rodape a[href$="/termos"], .rodape a[href$="/privacy"], .rodape a[href$="/terms"] { display: inline-block; min-height: 24px; padding-block: 4px; }

/* 08/10: no celular a 1ª linha do "Sobre" estourava a tela: o parágrafo era medido sem recuo e a linha ganhava 22% depois.
   O recuo agora é o mesmo na medição e na linha. */
@media (max-width: 899px) {
  .sobre-frase { text-indent: 18% !important; }
  .sobre-frase .linha:first-child { text-indent: 18% !important; }
}

/* 08/10: revisão do celular (harmonia e alinhamentos) */
@media (max-width: 899px) {
  /* pé do topo (inicial e Estúdio): rótulo em cima do valor, os dois blocos alinhados pelo topo */
  .topo-pe { align-items: start !important; }
  .topo-dado { grid-template-columns: 1fr !important; gap: 4px !important; align-content: start; }
  .estudio-topo-pe { align-items: start !important; }
  .estudio-topo-dado { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
  .estudio-topo-dado:nth-child(2) dd { white-space: normal !important; }
  /* lista de projetos: serviço e nicho empilhados, à esquerda */
  .projetos-detalhes { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
  .projetos-prazo { text-align: left !important; white-space: normal !important; }
  /* "Mais projetos": o serviço embaixo do nome, sempre no mesmo lugar */
  .projeto-mais-link { flex-wrap: wrap; align-items: center !important; }
  .projeto-mais-link .rolo { order: 1; flex: 1 1 auto; }
  .projeto-mais-mini { order: 2; }
  .projeto-mais-link sup { order: 3; flex: 0 0 100% !important; top: 0 !important; margin: 4px 0 0 !important; white-space: nowrap !important; }
}
/* rodapé: "Voltar pro topo" na mesma linha de "Termos de uso" (mesma caixa de toque) */
.rodape a.rodape-topo { display: inline-block; min-height: 24px; padding-block: 4px; line-height: 1.6; }

/* 14/10 (SEO): links das páginas de serviço no rodapé e nos cartões de serviço */
.rodape-servicos a, .rodape-legal a { color: inherit; }
.servicos-pagina { grid-column: 4; justify-self: end; align-self: end; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) { .servicos-pagina { grid-column: 1 / -1; order: 2; justify-self: start; } }
.rodape-servicos { grid-column: 4 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; margin-top: 28px; }
.rodape-servicos-rotulo { color: var(--tinta-60); }
.rodape-servicos a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tinta-40); }
.rodape-servicos a:hover { text-decoration-color: var(--laranja); }
@media (max-width: 899px) { .rodape-servicos { grid-column: 1 / -1; } }