/* ---------- comum ---------- */
.pular { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--royal); color: var(--swan); padding: 8px 14px; border-radius: var(--raio); }
.pular:focus { left: 8px; }

main > section, .rodape { position: relative; padding: var(--secao) var(--margem); }
main > section > *, .rodape > * { max-width: var(--largura); margin-inline: auto; }

.botao {
  display: inline-flex; align-items: center; gap: .6em;
  background: var(--rubi); color: var(--papel);
  padding: 1em 1.6em; border-radius: 999px;
  font-weight: 500; text-decoration: none;
  box-shadow: 0 0 0 var(--royal);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover: hover) { .botao:hover { transform: translate(-2px, -3px); box-shadow: 3px 4px 0 var(--royal); } }
.botao-pequeno { padding: .7em 1.2em; font-size: .9rem; }

.logo { width: 132px; height: auto; }
.logo .logo-letras { fill: var(--royal); }
.logo .logo-pingo, .logo .logo-lab { fill: var(--sapphire); }

/* ---------- destaque em itálico serifado (mistura de fontes) ---------- */
.serifa {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: -.01em; font-size: 1.08em; line-height: inherit;
}
.display .serifa { font-size: 1.12em; letter-spacing: -.02em; }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--margem);
}
.topo-logo { display: block; }
.topo-nav { position: relative; display: flex; gap: 6px; font-size: .9rem; font-weight: 500; margin-left: auto; }
.topo-nav a, .rodape-contato a { position: relative; z-index: 1; display: inline-block; padding: .3em .55em; text-decoration: none; transition: color .25s var(--ease) .05s; }
.topo-nav a.marcado { color: var(--papel); }
.nav-marca { position: absolute; left: 0; top: 0; z-index: 0; visibility: hidden; background: var(--rubi); border-radius: 3px; pointer-events: none; }
@media (max-width: 700px) { .topo-nav { display: none; } .topo .botao-pequeno { font-size: .8rem; } }

/* ---------- hero ---------- */
.hero {
  min-height: 100svh; display: grid; align-content: end; gap: clamp(14px, 2.6svh, 28px);
  padding-top: clamp(84px, 13svh, 120px); padding-bottom: clamp(32px, 7svh, 96px); overflow: clip;
}
.hero > * { margin-inline: 0; max-width: none; position: relative; z-index: 1; }
@media (min-width: 701px) { .hero { --borda: max(var(--margem), calc((100vw - var(--largura)) / 2)); padding-inline: var(--borda); } }
.hero-titulo { font-size: clamp(2.9rem, min(8vw, 14svh), 9.2rem); }
.hero-titulo .linha { display: block; overflow: clip; padding: .16em 0 .16em; margin: -.16em 0 -.16em; } /* folga para o til e a cedilha */
.hero-titulo .linha > span { display: inline-block; }
.hero-titulo .linha:nth-child(2) { padding-left: 0.7em; }
.hero-texto { max-width: 42ch; font-size: var(--fs-texto); line-height: 1.45; }
.hero-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* no PC o polvo fica na coluna ao lado do texto e tem a altura do bloco, do topo do título à base do botão. A folga de cima
   é a da flutuação (js/hero.js): parado ele encosta embaixo e, no alto da flutuação, encosta em cima */
@media (min-width: 701px) {
  .hero { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); }
  .hero-palco { grid-column: 2; grid-row: 1 / span 3; }
  .polvo-hero { position: absolute; top: 14px; left: 0; width: 100%; height: calc(100% - 14px); object-fit: contain; }
}

@media (max-width: 700px) {
  .hero { padding-top: 84px; padding-bottom: 40px; align-content: start; gap: 14px; }
  .hero-titulo { font-size: clamp(2.3rem, 11.8vw, 3.4rem); }
  .hero-titulo .linha:nth-child(2) { padding-left: .5em; }
  .hero-palco { margin-top: 4px; }
  .polvo-hero { display: block; width: 50%; height: auto; margin: 4% auto 0; }
}

/* ---------- caos ao prumo ---------- */
.secao-caos { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 40px; }
.secao-caos > * { margin-inline: 0; }
.caos-titulo, .resolve-titulo, .como-titulo, .trabalhos-titulo, .quarto-titulo { font-size: var(--fs-titulo); }
.caos-titulo { position: relative; z-index: 1; }
[class$='linha-mask'] { padding-block: .18em; margin-block: -.18em; } /* folga para o g, o p e o ç */
/* o fio de prumo no meio da tela: à esquerda dele o nome do serviço, à direita o texto, os dois saindo de dentro do fio */
.prumo-fio { position: absolute; left: 50%; top: 0; z-index: 1; width: 0; height: 90svh; max-width: none; pointer-events: none; }
.prumo-fio-linha { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--royal); }
.prumo-peso { position: absolute; left: -12px; top: 100%; width: 24px; height: 40px; background: var(--royal); clip-path: polygon(50% 100%, 4% 38%, 20% 0, 80% 0, 96% 38%); }
.prumo-lista { position: relative; z-index: 3; width: 100%; max-width: none; }
.prumo-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 88px); align-items: center; padding-block: clamp(10px, 2.2svh, 24px); }
.prumo-esq, .prumo-dir { overflow: clip; padding-block: .2em; margin-block: -.2em; } /* a máscara: é daqui que o texto sai */
.prumo-linha h3 { text-align: right; font-family: var(--fonte-grotesca); font-weight: 700; letter-spacing: -.032em; line-height: 1.04; font-size: var(--fs-subtitulo); }
.prumo-linha p { max-width: 36ch; font-size: var(--fs-texto); line-height: 1.4; }
.prumo-cortina { display: none; }
@media (min-width: 701px) {
  .caos-titulo { width: calc(50% - clamp(16px, 2.5vw, 44px)); text-align: right; }
  .js .secao-caos { min-height: 100svh; padding-block: clamp(84px, 13svh, 120px) clamp(32px, 6svh, 64px); gap: clamp(16px, 3svh, 32px); }
}
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .js .secao-caos { z-index: 45; height: 100svh; overflow: visible; }
  .js .prumo-cortina { display: block; position: absolute; inset: 0; z-index: 2; max-width: none; margin: 0; visibility: hidden; background: var(--royal); transform-origin: 50% 50%; }
}
@media (prefers-reduced-motion: reduce) { .abertura .correnteza { position: absolute !important; } }

/* ---------- manifesto ---------- */
.manifesto { display: grid; gap: 28px; background: var(--royal) var(--grao); color: var(--papel); z-index: 1; }
main > section.manifesto > * { max-width: none; }
.respiro { display: none; }
.manifesto-texto { font-size: var(--fs-titulo); line-height: 1.04; text-align: center; }
.manifesto-texto .linha { display: block; text-wrap: balance; }
.manifesto-texto .serifa { white-space: nowrap; font-size: 1em; } /* do tamanho da frase, senão a linha 3 quebra */
.manifesto-texto .serifa { color: color-mix(in srgb, var(--rubi) 58%, var(--papel)); } /* o vermelho puro some no azul-marinho */

/* ---------- resolve ---------- */
.resolve { z-index: 2; background: var(--swan) var(--grao); }
.resolve-rolo { display: grid; gap: clamp(6px, 1.4svh, 14px); position: relative; }
.resolve-titulo { line-height: 1.04; text-wrap: balance; }
.lista-resolve .item {
  position: relative; display: inline-block; cursor: pointer;
  font-family: var(--fonte-grotesca); font-weight: 700; text-transform: none; letter-spacing: -.032em;
  font-size: var(--fs-titulo); line-height: 1.04;
  color: var(--apagado); transition: color .18s var(--ease);
}
.lista-resolve li.ativo .item { color: var(--rubi); }
.item-nota { display: block; margin: 4px 0 12px; font-family: var(--fonte); text-transform: none; letter-spacing: 0; line-height: 1.3; color: var(--royal); }
.resolve-mais { font-size: var(--fs-texto); font-weight: 500; }
/* o desenho do item aceso: grande, parado no meio da tela e com a letra passando por cima */
.resolve-previa { position: relative; width: 100%; aspect-ratio: 3 / 2; pointer-events: none; display: none; opacity: 0; transition: opacity .3s var(--ease); }
.resolve-previa.visivel { opacity: 1; }
.previa { position: absolute; inset: 0; opacity: 0; translate: 0 22px; rotate: -2.5deg; transition: opacity .18s var(--ease), translate .4s var(--ease), rotate .4s var(--ease); }
.previa.ativa { opacity: 1; translate: 0 0; rotate: 0deg; }
.previa img { width: 100%; height: 100%; object-fit: contain; }
.previa-nota { position: absolute; right: 0; top: 94%; /* o desenho tem folga no próprio arquivo */ max-width: 62%; text-align: right; text-wrap: balance; font-size: var(--fs-texto); font-weight: 500; line-height: 1.3; }
@media (min-width: 701px) {
  .resolve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(34vw, 66svh)); column-gap: clamp(20px, 3vw, 56px); align-items: center; min-height: 100svh; padding-block: clamp(84px, 13svh, 128px) clamp(32px, 6svh, 80px); }
  .resolve > * { max-width: none; margin-inline: 0; }
  .item-nota { display: none; } /* no PC quem explica é a nota do desenho */
  .resolve-mais { margin-top: clamp(8px, 2svh, 20px); }
  .js .resolve-previa { display: block; }
}
/* a trava: o bloco é uma tela e a coluna da lista passa por ela (quem move a coluna é o js/secoes.js) */
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  /* o manifesto já espera embaixo da última folha, que é da mesma cor: quando ela sobe, o texto aparece sem tela vazia */
  .js .manifesto { height: 100svh; min-height: 0; margin-top: -100svh; }
  .js .respiro { display: block; height: 160svh; }
  .resolve-trava { position: relative; z-index: 2; }
  .js .resolve { position: relative; padding-inline: var(--margem); border-radius: var(--raio-g) var(--raio-g) 0 0; transform-origin: 50% 0%; }
  .js .resolve { height: 100svh; min-height: 0; padding-block: 68px 0; overflow: clip; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(100svh - 68px); }
  .js .resolve-rolo { align-self: center; z-index: 1; }
  .js .resolve-previa { position: absolute; right: var(--margem); top: calc(50% + 24px); translate: 0 -50%; z-index: 0; width: min(36vw, 64svh); }
}
@media (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .resolve { align-items: start; }
  .js .resolve-previa { position: sticky; top: 28svh; }
}

/* ---------- como: painéis na largura da tela; cada um sobe por cima do anterior e o título de cima continua à vista ---------- */
.como { --topo: 66px; --peek: calc(var(--fs-titulo) * 1.08 + 30px); }
main > section.como { padding-inline: 0; padding-bottom: 0; z-index: 2; background: var(--swan) var(--grao); }
/* depois do último painel parar, sobra rolagem para os trabalhos subirem por cima dele */
.passos::after { content: ''; display: block; height: 100svh; }
.como > * { max-width: none; width: 100%; margin: 0; }
.como .como-titulo {
  padding-inline: var(--margem); margin-bottom: clamp(20px, 4svh, 48px);
}
.passos { display: block; }
.passo {
  position: sticky; top: calc(var(--topo) + var(--n) * var(--peek));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30vw); gap: clamp(16px, 2.4vw, 40px);
  height: clamp(340px, 56svh, 640px); padding: 16px var(--margem) clamp(18px, 3svh, 28px);
  border-radius: var(--raio-g) var(--raio-g) 0 0; color: var(--papel);
}
.passo + .passo { margin-top: calc(-1 * var(--raio-g)); } /* o canto arredondado mostra o painel de trás, não o fundo */
.passo:not(:last-child) { height: calc(clamp(340px, 56svh, 640px) + var(--raio-g)); padding-bottom: calc(clamp(18px, 3svh, 28px) + var(--raio-g)); } /* o que o painel de cima perde para a sobreposição */
/* nenhum painel vermelho: o polvo é vermelho e sumiria no fundo */
.passo:nth-child(1) { --n: 0; background: var(--stone) var(--grao); color: var(--royal); }
.passo:nth-child(2) { --n: 1; background: var(--sapphire) var(--grao); }
.passo:nth-child(3) { --n: 2; background: var(--royal) var(--grao); }
.portfolio { z-index: 3; margin-top: -100svh; background: var(--swan) var(--grao); border-radius: var(--raio-g) var(--raio-g) 0 0; transform-origin: 50% 0%; }
.passo-texto { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.passo h3 { order: -1; font-family: var(--fonte-grotesca); font-weight: 700; letter-spacing: -.032em; line-height: 1.08; font-size: var(--fs-titulo); }
.passo-num { margin-top: clamp(12px, 3.4svh, 36px); font-size: var(--t-pequeno); font-weight: 500; }
.passo-num::before { content: 'Passo '; }
.passo p { margin-top: 8px; max-width: 36ch; font-size: var(--fs-texto); line-height: 1.4; }
.passo-tela { position: relative; min-height: 0; }
.passo-polvo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* só o traço, em uma cor: parece impresso no painel */

/* ---------- quarto ---------- */
.quarto { min-height: 100svh; display: grid; align-content: center; gap: 20px; background: var(--swan) var(--grao); }
@media (min-width: 701px) { .quarto { position: sticky !important; top: 0; z-index: 1; } main::after { content: ''; display: block; height: 100svh; } .rodape { margin-top: -100svh; z-index: 4; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--raio-g) var(--raio-g) 0 0; } .rodape > * { width: 100%; } } /* do tamanho da tela: não sobra faixa embaixo dele */
/* palco na proporção do vídeo (7:4); as peças ficam em % do palco e o vídeo cobre tudo no fim */
.quarto-cena {
  position: relative; width: min(100%, calc(72svh * 7 / 4)); aspect-ratio: 7 / 4; margin-bottom: 28px;
  overflow: hidden; mix-blend-mode: multiply; /* o papel do vídeo é branco puro: multiplicado, some e fica só o desenho */
}
.quarto-palco { position: absolute; inset: 0; }
.quarto-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  /* no celular a cena fica em pé e mostra o meio do quarto, onde o polvo trabalha */
  .quarto-cena { width: 100%; aspect-ratio: 4 / 5; max-height: 58svh; margin-bottom: 8px; }
  .quarto-palco { inset: 0 auto; left: 50%; height: 100%; aspect-ratio: 7 / 4; translate: -50% 0; }
}
.quarto-titulo { max-width: 14ch; }
.quarto-fala { display: grid; gap: 20px; justify-items: start; }
.quarto-texto { font-size: var(--fs-texto); }
@media (min-width: 701px) and (max-width: 1023px) {
  .quarto-cena { width: min(100%, calc(52svh * 7 / 4)); }
}
@media (min-width: 1024px) {
  .quarto { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 4vw, 72px); }
  .quarto > * { max-width: none; margin: 0; }
  .quarto-cena { width: min(100%, calc(74svh * 7 / 4)); margin: 0; justify-self: end; }
}

/* ---------- rodapé ---------- */
.rodape { background: var(--rubi) var(--grao); color: var(--papel); padding-bottom: 24px; overflow: clip; }
.rodape-colunas { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.rodape-assinatura { font-size: 1.4rem; font-weight: 500; }
.rodape-contato { position: relative; }
.rodape-contato a { margin-left: -.55em; }
.rodape-contato a.marcado { color: var(--rubi); }
.rodape-contato .nav-marca { background: var(--papel); }
.rodape-marca { margin-top: 64px; max-width: none; }
.rodape-marca { position: relative; }
.rodape-marca .logo { overflow: visible; }
.logo-gigante { width: 100%; }
.logo-gigante .logo-letras, .logo-gigante .logo-pingo, .logo-gigante .logo-lab { fill: var(--papel); }

/* ---------- abertura ---------- */
.abertura {
  min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: clamp(20px, 3vh, 36px);
  position: relative; overflow: clip; text-align: center;
}
.abertura > :not(.correnteza, .abertura-rolar) { position: relative; z-index: 1; }
.abertura .logo { width: min(78vw, 860px); overflow: visible; }
/* o logo grande nasce escondido e o JS monta ele (sem piscar montado antes); sem JS em 3 s ele aparece */
@media (prefers-reduced-motion: no-preference) { .js:not(.abertura-pronta) .abertura .logo path { opacity: 0; } }
/* sem transform-origin aqui: quem gira e achata o pingo é o GSAP, que calcula a origem sozinho */
.abertura .logo-pingo { cursor: pointer; }
/* correnteza: linhas finas que correm atrás do logo */
/* fixa na tela: passa por trás da abertura e do hero e vai sumindo, sem linha de corte entre os dois */
.correnteza { position: fixed !important; inset: 0; z-index: 0 !important; max-width: none !important; margin: 0 !important; pointer-events: none; color: var(--sapphire); }
.correnteza canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura-assinatura { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 500; color: var(--sapphire); margin: 0; }
.abertura-rolar { position: absolute; bottom: clamp(20px, 5vh, 48px); left: 50%; translate: -50% 0; margin: 0; }
.abertura-rolar::after { content: ''; display: block; width: 1px; height: 32px; margin: 10px auto 0; background: currentColor; opacity: .5; }

/* ---------- easter egg do pingo ---------- */
.topo .logo { overflow: visible; }
.topo .logo-pingo { stroke: transparent; stroke-width: 700; pointer-events: all; cursor: pointer; }
.pingo-cursor, .pingo-cursor * { cursor: none !important; }
.pingo-solto {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  width: 16px; height: 17.6px; margin: -8.8px 0 0 -8px;
  background: var(--sapphire);
  clip-path: polygon(0 0, 100% 57%, 100% 100%, 0 100%); /* mesmo recorte do pingo do logo (corte de 32°) */
  transform-origin: 50% 70%;
}
.tinta {
  position: fixed; z-index: 199; pointer-events: none;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--sapphire);
}
.topo { transition: background .3s var(--ease), padding .3s var(--ease); }
.topo.rolou { background: var(--swan) var(--grao); padding-block: 12px; box-shadow: 0 1px 0 var(--stone); }
.topo.rolou.escuro { background: var(--royal) var(--grao); color: var(--papel); box-shadow: none; }
.topo.escuro .logo .logo-letras, .topo.escuro .logo .logo-pingo, .topo.escuro .logo .logo-lab { fill: var(--papel); }

/* ---------- trabalhos: uma linha por projeto, imagem à esquerda e texto ao lado ---------- */
.trabalhos-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 6svh, 64px); }
.trabalho {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 44px); align-items: start;
  padding-block: clamp(24px, 4.6svh, 48px); border-top: 1px dotted color-mix(in srgb, var(--royal) 45%, transparent);
}
.quadro {
  position: relative; margin: 0; width: min(100%, calc(80svh * 3 / 2)); aspect-ratio: 3 / 2; overflow: hidden; isolation: isolate;
  border-radius: var(--raio);
}
.trabalho:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); }
.trabalho:nth-child(even) .quadro { order: 2; justify-self: end; }
.quadro-capa { filter: brightness(.82); }
/* o vídeo em cima da foto: cresce a partir do meio com a rolagem (js/portfolio.js) */
.quadro-tela { position: absolute; inset: 0; margin: auto; width: 80%; height: fit-content; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--royal); box-shadow: 0 24px 48px -18px rgb(0 0 0 / .55); }
.quadro-tela video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
/* a mesma retícula dos cards, no canto de cima: só aparece enquanto o projeto não tem imagem */
.quadro::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--papel) 22%, transparent) 1.1px, transparent 1.6px) 0 0 / 8px 8px;
  -webkit-mask-image: radial-gradient(120% 95% at 100% 0%, #000 0%, transparent 60%);
          mask-image: radial-gradient(120% 95% at 100% 0%, #000 0%, transparent 60%);
}
.trabalho-texto { display: grid; gap: clamp(10px, 1.8svh, 16px); }
.trabalho-tags { font-size: var(--t-pequeno); font-weight: 500; }
.trabalho-nome { font-family: var(--fonte-grotesca); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; font-size: var(--fs-subtitulo); }
.trabalho-resumo { max-width: 40ch; font-size: var(--fs-texto); line-height: 1.45; color: color-mix(in srgb, var(--royal) 80%, var(--swan)); }
/* selo redondo girando que leva para o WhatsApp */
.selo {
  position: relative; flex: none;
  width: clamp(96px, 9vw, 124px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--rubi); color: var(--papel); text-decoration: none;
  box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--royal) 70%, transparent);
  transition: scale .4s var(--ease);
}
@media (hover: hover) { .selo:hover { scale: 1.06; } }
.selo-texto { position: absolute; inset: 6%; width: 88%; height: 88%; fill: currentColor; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; animation: girar 14s linear infinite; }
.selo-seta { font-size: 1.6rem; line-height: 1; transition: rotate .4s var(--ease); }
.selo:hover .selo-seta { rotate: 45deg; }
@keyframes girar { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .selo-texto { animation: none; } }
@media (max-width: 700px) {
  .trabalho, .trabalho:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .quadro, .trabalho:nth-child(even) .quadro { width: 100%; order: 0; }
  .quadro-tela { width: 86%; }
}

/* O polvo que atravessa a página (js/polvo.js): sem JS ele não aparece, o do hero basta */
.polvo { display: none; }
.js .polvo {
  display: block; position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: clamp(120px, 12vw, 200px); visibility: hidden; max-width: none; margin: 0;
}
.polvo img { width: 100%; height: auto; }
.polvo-boia { will-change: transform; }


/* ---------- blocos: no PC cada seção ocupa uma tela e o conteúdo se ajusta a ela ---------- */
@media (min-width: 701px) {
  .manifesto, .quarto {
    min-height: 100svh; align-content: center;
    padding-block: clamp(84px, 13svh, 128px) clamp(32px, 6svh, 80px);
  }
}

/* ---------- carregando: o polvo aparece, o número sobe até 100 e a tela sobe junto (js/carregando.js) ---------- */
.carregando { display: none; }
.js .carregando {
  display: grid; position: fixed; inset: 0; z-index: 300; place-content: center; justify-items: center; gap: 10px;
  background: var(--swan) var(--grao); pointer-events: none;
  animation: carregando-some 0s 4s forwards; /* se o JS falhar, some sozinha */
}
@keyframes carregando-some { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .js .carregando { display: none; } }
.carregando-polvo { width: clamp(130px, 15vw, 210px); height: auto; }
.carregando-marca { width: clamp(150px, 15vw, 210px); }
.carregando-num {
  position: absolute; right: var(--margem); bottom: clamp(14px, 3vh, 36px);
  font-family: var(--fonte-display); font-weight: 800; font-size: clamp(4.5rem, 13vw, 11rem); line-height: .8;
  color: var(--rubi); font-variant-numeric: tabular-nums; letter-spacing: -.04em;
}
.carregando-linha { position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: var(--rubi); transform-origin: 0 50%; scale: 0 1; }

/* ---------- celular: menos vazio entre os blocos, tudo no alcance do dedo ---------- */
.item-figura { display: none; }
@media (max-width: 700px) {
  main > section:not(.abertura, .hero) { padding-block: clamp(44px, 8svh, 64px); }
  .rodape { padding-top: 52px; }

  .topo { padding-block: 8px; }
  .topo.rolou { padding-block: 6px; }
  .topo .logo { width: 104px; }
  .topo-logo { padding-block: 8px; }
  .topo .botao-pequeno { min-height: 40px; }

  .secao-caos { gap: 22px; }
  /* no celular o fio desce pela esquerda e tudo fica à direita dele */
  .js .secao-caos { z-index: 45; }
  .caos-titulo { padding-left: 26px; }
  .prumo-fio { left: calc(var(--margem) + 6px); height: calc(100% - 64px); }
  .prumo-linha { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 14px 0 14px 26px; }
  .prumo-linha h3 { text-align: left; }
  .prumo-linha p { max-width: none; }

  .manifesto { gap: 18px; }
  .manifesto-texto { line-height: 1.08; }
  .manifesto-texto .linha { margin-bottom: .42em; }
  .manifesto-texto .linha:last-child { margin-bottom: 0; }

  /* "o que a gente resolve": o desenho sempre à vista, sem depender de hover */
  .resolve-rolo { gap: 18px; }
  .resolve-rolo > h2 { text-align: center; }
  .lista-resolve { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .lista-resolve li { display: grid; align-content: start; }
  .lista-resolve li:last-child { grid-column: 1 / -1; grid-template-columns: 42% minmax(0, 1fr); align-items: center; }
  .item-figura { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
  .lista-resolve .item {
    display: block; cursor: auto; padding: 8px 0 0; color: var(--royal);
    font-family: var(--fonte-grotesca); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.02rem, 4.5vw, 1.25rem); line-height: 1.08;
  }
  .item-nota { margin: 6px 0 0; opacity: 1; font-weight: 400; font-size: .76rem; }
  .resolve-mais { text-align: center; }

  /* passos: os mesmos painéis, com o quadro do polvo embaixo do texto */
  .como { --topo: 60px; --peek: calc(var(--fs-titulo) * 1.08 + 24px); }
  .passo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto clamp(110px, 20svh, 150px); height: auto; gap: 12px; padding: 14px var(--margem) 18px; }
  .passo:not(:last-child) { height: auto; padding-bottom: calc(18px + var(--raio-g)); }
  .passo-num { margin-top: 10px; }
  .passo p { margin-top: 4px; max-width: none; }

  /* trabalhos: imagem em cima, texto embaixo */
  .trabalhos-cabeca { align-items: flex-start; margin-bottom: 8px; }
  .selo { width: 84px; }

  /* quarto: a cena e a frase quase numa tela só */
  .quarto { gap: 12px; }
  .quarto-fala { gap: 12px; }

  .rodape-colunas { gap: 18px; }
  .rodape-contato a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .rodape-marca { margin-top: 36px; }
}