/* ==================================================================
   ESTÚDIO 33 — sistema visual
   Valores extraídos dos layouts do Figma (canvas de 1440px).
   ================================================================== */

:root {
  /* Cores — retiradas direto do arquivo do Figma */
  --preto:        #0D0B0E;
  --preto-2:      #101010;
  --superficie:   #181818;
  --placeholder:  #3E3E42;
  --branco:       #FFFFFF;
  --branco-2:     #EDEDED;
  --cinza:        #9B9B9B;
  --cinza-escuro: #6B6B6B;
  --linha:        rgba(255,255,255,.22);
  --linha-fraca:  rgba(255,255,255,.12);

  --rosa:    #FF0054;
  --azul:    #2D79E6;
  --amarelo: #FFBD00;
  --roxo:    #5C28DB;
  --laranja: #FF6B00;

  /* Medidas do layout (1440px) */
  --margem:     clamp(20px, 5.55vw, 80px);
  --margem-hd:  clamp(20px, 3.33vw, 48px);
  --raio-card:  clamp(20px, 2.78vw, 40px);
  --raio-img:   clamp(12px, 1.4vw, 20px);

  /* Escala tipográfica (px do Figma → clamp fluido) */
  --t-hero:     clamp(52px, 12.5vw, 180px);
  --t-secao:    clamp(38px, 5.55vw, 80px);
  --t-faixa:    clamp(38px, 6.95vw, 100px);
  --t-contato:  clamp(46px, 11.1vw, 160px);
  --t-destaque: clamp(24px, 2.78vw, 40px);
  --t-medio:    clamp(18px, 1.67vw, 24px);
  --t-corpo:    16px;
  --t-corpo-g:  18px;
  --t-mini:     14px;

  --fonte: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Nimbus Sans", sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- base --------------------------------------------------- */

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

html { scroll-behavior: smooth; background: #0D0B0E; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* As fotos vêm dentro de <picture> (WebP + tamanhos). O "contents" faz o
   <img> continuar se comportando como filho direto do bloco — e o <source>
   precisa ficar escondido, senão ele ocupa uma célula da grade. */
picture { display: contents; }
picture > source { display: none; }

a { color: var(--branco); text-decoration: none; }
a:hover { color: var(--branco); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 3px;
  border-radius: 2px;
}

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0;
  background: var(--branco); color: var(--preto);
  padding: 12px 20px; z-index: 999;
}
.pular-para-conteudo:focus { left: 16px; top: 16px; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* o cabeçalho é fixo — as âncoras param abaixo dele */
section[id], [id^="t-"] { scroll-margin-top: 96px; }

.container { width: 100%; padding-inline: var(--margem); margin-inline: auto; max-width: 1440px; }

/* ---------- cabeçalho ---------------------------------------------- */

.cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 30px var(--margem-hd);
}
.cabecalho {
  transition: transform .45s var(--ease), background-color .45s var(--ease),
              border-color .45s var(--ease), padding .45s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Véu suave atrás do cabeçalho: garante leitura mesmo sem JavaScript. */
.cabecalho::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(11,9,13,.78), rgba(11,9,13,0));
  pointer-events: none;
}
.cabecalho--colado::before { opacity: 0; }
.cabecalho--colado {
  background: rgba(13,11,14,.78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--linha-fraca);
  padding-block: 16px;
}
.cabecalho--escondido { transform: translateY(-110%); }

.logo { display: inline-flex; align-items: center; }
.logo img { height: clamp(38px, 4.4vw, 60px); width: auto; }

/* Medidas do SVG do Figma: círculo de 52, traços de 24 px com 8 de folga,
   espessura 2.5, borda a 40% de branco. */
.btn-menu {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.4); border-radius: 50%;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.btn-menu:hover { background: rgba(255,255,255,.08); border-color: var(--branco); }
.btn-menu span {
  display: block; width: 24px; height: 2.5px; background: var(--branco);
  border-radius: 2px; transition: transform .3s var(--ease), opacity .2s;
}
.btn-menu span + span { margin-top: 5.5px; }
.btn-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.btn-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.btn-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.link-contato {
  font-size: var(--t-corpo); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.link-contato:hover { border-bottom-color: var(--branco); }

/* menu em tela cheia */
.menu {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(9,7,10,.96);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.menu[data-aberto="true"] { opacity: 1; visibility: visible; }

.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(6px, 1vw, 14px); text-align: center; }
.menu a {
  display: inline-block;
  font-size: clamp(34px, 6.5vw, 84px);
  line-height: 1.06;
  letter-spacing: -.02em;
  opacity: .75;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.menu a:hover, .menu a:focus-visible { opacity: 1; transform: translateX(6px); }

.menu li {
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.menu[data-aberto="true"] li { opacity: 1; transform: none; }
.menu[data-aberto="true"] li:nth-child(1) { transition-delay: .10s; }
.menu[data-aberto="true"] li:nth-child(2) { transition-delay: .16s; }
.menu[data-aberto="true"] li:nth-child(3) { transition-delay: .22s; }
.menu[data-aberto="true"] li:nth-child(4) { transition-delay: .28s; }
.menu[data-aberto="true"] li:nth-child(5) { transition-delay: .34s; }

/* ---------- hero ---------------------------------------------------- */

.hero {
  position: relative;
  background: var(--preto);
  overflow: hidden;
  isolation: isolate;
}
/* A aurora do Figma é animada. Aqui ela volta a se mexer: a imagem
   desliza devagar e um brilho passeia por dentro da faixa colorida.
   A composição continua a mesma — só ganhou vida. */
.hero::before {
  content: ""; position: absolute; inset: 0 -4%;
  background: url('../img/hero-aurora.jpg') center bottom / cover no-repeat;
  transform-origin: 50% 100%;
  z-index: 0; pointer-events: none;
  will-change: transform;
  animation: aurora 38s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
  background:
    radial-gradient(58% 100% at 28% 100%, rgba(255,0,84,.34), transparent 72%),
    radial-gradient(48% 100% at 76% 100%, rgba(92,40,219,.30), transparent 72%);
  mix-blend-mode: screen;
  z-index: 0; pointer-events: none;
  will-change: transform, opacity;
  animation: brilho 26s ease-in-out infinite alternate;
}
.hero > * { position: relative; z-index: 1; }

@keyframes aurora {
  from { transform: translate3d(-1.7%, 0, 0) scale(1.005); }
  to   { transform: translate3d( 1.7%, 0, 0) scale(1.035); }
}
@keyframes brilho {
  from { transform: translate3d(-7%, 0, 0) scaleY(.92); opacity: .42; }
  to   { transform: translate3d( 7%, 0, 0) scaleY(1.06); opacity: .78; }
}

/* hero das páginas internas: 740px no layout de 1440 */
.hero--interno {
  min-height: min(100svh, 740px);
  display: grid; place-items: center;
  padding: 120px var(--margem) 130px;
  text-align: center;
}
.hero--interno .titulo-pagina {
  --letras: 9;                     /* palavra mais longa do título */
  margin: 0;
  /* nunca passa da largura útil: 1.55 é a largura média de letra nesta fonte */
  font-size: clamp(40px, min(12.5vw, calc((100vw - 2 * var(--margem)) / var(--letras) * 1.55)), 180px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* entrada: cada pedaço do hero sobe em sequência */
@keyframes subir { from { opacity: 0; transform: translateY(30px); } }

.hero-titulo .linha-1,
.hero-titulo .linha-2,
.hero-redes,
.hero-base,
.hero--interno .titulo-pagina,
.hero .rolar {
  animation: subir .9s var(--ease) backwards;
}
.hero-titulo .linha-1 { animation-delay: .08s; }
.hero-titulo .linha-2 { animation-delay: .20s; }
.hero-redes           { animation-delay: .36s; }
.hero-base            { animation-delay: .44s; }
.hero .rolar          { animation-delay: .72s; }

/* hero da home */
.hero--home {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 130px var(--margem) 118px;
}

.hero-titulo {
  margin: 0;
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.hero-titulo .linha-1 { display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 48px); }
.hero-titulo .risco {
  flex: 1 1 auto; height: 5px; background: var(--branco);
  margin-bottom: .16em; min-width: 40px;
}
.hero-titulo .linha-2 { display: block; text-align: right; }

.hero-redes {
  display: flex; justify-content: flex-end; gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(16px, 2vw, 28px);
  font-size: var(--t-mini);
  letter-spacing: .1em; text-transform: uppercase;
}
.hero-redes a { opacity: .9; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.hero-redes a:hover { opacity: 1; border-bottom-color: var(--branco); }

.hero-base {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-top: clamp(40px, 6vw, 86px);
}

.hero-servicos { list-style: none; margin: 0; padding: 0; max-width: 620px; }
.hero-servicos li {
  font-size: var(--t-destaque);
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: uppercase;
  padding-bottom: clamp(10px, 1.2vw, 18px);
  border-bottom: 1px solid var(--linha-fraca);
}
.hero-servicos li + li { margin-top: clamp(14px, 1.7vw, 24px); }
.hero-servicos li { transition: border-color .4s var(--ease), letter-spacing .4s var(--ease); }
.hero-servicos li:hover { border-bottom-color: var(--branco); letter-spacing: 0; }

.hero-texto { max-width: 380px; }
.hero-texto p {
  margin: 0;
  font-size: var(--t-corpo);
  line-height: 1.45;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: justify;
}
.hero-texto .saiba-mais {
  display: inline-block; margin-top: 18px;
  font-size: clamp(17px, 1.4vw, 20px);
  border-bottom: 1px solid var(--branco);
  padding-bottom: 2px;
  transition: opacity .25s var(--ease);
}
.hero-texto .saiba-mais:hover { opacity: .7; }

/* indicador de rolagem */
.rolar {
  position: absolute; left: 50%; bottom: clamp(28px, 4vw, 56px);
  translate: -50% 0;
  width: clamp(52px, 5vw, 72px); height: clamp(52px, 5vw, 72px);
  display: grid; place-items: center;
  z-index: 2;
}
.hero .rolar {
  animation: subir .9s var(--ease) backwards,
             flutuar 3.4s ease-in-out .9s infinite;
  transition: opacity .4s var(--ease), visibility .4s;
}
.rolar--sumiu { opacity: 0; visibility: hidden; }
.rolar svg { width: 100%; height: 100%; }
@keyframes flutuar {
  0%, 100% { translate: -50% 0; }
  50%      { translate: -50% 6px; }
}
.rolar .roda { animation: rolar 2s var(--ease) infinite; }
@keyframes rolar {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(4px); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) { .rolar .roda { animation: none; } }

/* ---------- títulos de seção ---------------------------------------- */

.secao { padding-block: clamp(60px, 8vw, 120px); }

.titulo-secao {
  margin: 0;
  font-size: var(--t-secao);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.025em;
}

.cabeca-secao {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

/* Título de seção que leva para a página cheia. A setinha só aparece
   quando o mouse chega — no toque, o título inteiro já é o alvo. */
.titulo-link {
  display: inline-flex; align-items: center; gap: .14em;
  color: inherit;
}
.titulo-link svg {
  width: .38em; height: .38em; flex: none;
  opacity: 0; transform: translate(-.14em, .1em);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.titulo-link:hover svg,
.titulo-link:focus-visible svg { opacity: 1; transform: none; }

/* ---------- porta para outra página ---------- */
/* Faixa larga e clicável: o título grande é o convite. */
.porta {
  position: relative; display: block;
  padding-block: clamp(56px, 9vw, 128px);
  overflow: hidden; isolation: isolate;
  border-bottom: 1px solid var(--linha-fraca);
}
.porta-fundo {
  position: absolute; inset: 0; z-index: 0;
  /* a parte colorida da aurora fica embaixo — é ela que queremos aqui */
  background: url('../img/hero-aurora.jpg') center 88% / cover no-repeat;
  opacity: .85;
  transform: scale(1.04);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.porta:hover .porta-fundo,
.porta:focus-visible .porta-fundo { opacity: 1; transform: scale(1.09); }
.porta::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(13,11,14,.86) 6%, rgba(13,11,14,.34) 55%, rgba(13,11,14,.7));
  pointer-events: none;
}
.porta-dentro {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: clamp(18px, 3vw, 40px);
}
.porta-etiqueta {
  flex: none;
  font-size: var(--t-corpo); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cinza);
}
.porta-titulo {
  flex: 1 1 auto;
  font-size: var(--t-secao); font-weight: 500;
  line-height: 1; letter-spacing: -.025em;
}
.porta-seta {
  flex: none; width: clamp(46px, 5vw, 74px); height: clamp(46px, 5vw, 74px);
  transition: transform .45s var(--ease);
}
.porta-seta svg { width: 100%; height: 100%; }
.porta:hover .porta-seta,
.porta:focus-visible .porta-seta { transform: translateX(12px); }

@media (max-width: 620px) {
  .porta-dentro { flex-wrap: wrap; gap: 14px; }
  .porta-etiqueta { width: 100%; }
  .porta-seta { width: 40px; height: 40px; }
}

/* botão pílula (Ver Mais) */
.btn-pilula {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 15px 30px;
  border: 1px solid var(--linha); border-radius: 999px;
  font-size: var(--t-corpo-g);
  transition: background .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.btn-pilula:hover { background: rgba(255,255,255,.08); border-color: var(--branco); gap: 26px; }
.btn-pilula svg { width: 26px; height: 12px; flex: none; }

/* ---------- alguns projetos (carrossel) ------------------------------ */

.projetos-destaque {
  position: relative;
  background: url('../img/glow-projetos.jpg') 2vw 0 / min(320px, 40vw) auto no-repeat;
}

.projetos-destaque .intro {
  max-width: 340px; margin: clamp(28px, 4vw, 54px) 0 0 auto;
  font-size: var(--t-corpo-g); text-align: justify;
}

.carrossel { position: relative; margin-top: clamp(40px, 6vw, 80px); }

.carrossel-trilho {
  display: flex; gap: clamp(16px, 2.6vw, 38px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 34px clamp(0px, 22vw, 340px) 54px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }

.carrossel-item {
  flex: 0 0 clamp(230px, 30vw, 400px);
  scroll-snap-align: center;
  text-align: center;
  opacity: .4;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.carrossel-item[data-ativo="true"] { opacity: 1; transform: scale(1.06); }

.carrossel-item .ano {
  display: block; margin-bottom: 12px;
  font-size: var(--t-medio); color: var(--cinza);
  font-variant-numeric: tabular-nums;
}
.carrossel-item .quadro {
  aspect-ratio: 1/1; border-radius: var(--raio-img);
  background: var(--placeholder); overflow: hidden;
}
.carrossel-item .quadro img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.carrossel-item:hover .quadro img { transform: scale(1.05); }
.carrossel-item .nome {
  display: block; margin-top: 16px;
  font-size: var(--t-corpo-g); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

.carrossel-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: clamp(46px, 5.5vw, 80px); height: clamp(46px, 5.5vw, 80px);
  display: grid; place-items: center;
  z-index: 3;
  transition: opacity .3s var(--ease);
}
.carrossel-seta:hover { opacity: .6; }
.carrossel-seta[disabled] { opacity: .2; cursor: default; }
.carrossel-seta--ant { left: 0; }
.carrossel-seta--prox { right: 0; }
.carrossel-seta svg { width: 100%; height: 100%; }

/* ---------- serviços -------------------------------------------------- */

.cartao {
  background: var(--superficie);
  border-radius: var(--raio-card);
  padding: clamp(32px, 5vw, 70px);
  position: relative; overflow: hidden;
}

.servicos-grade {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, .55fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 72px);
}
.servicos-imagem {
  aspect-ratio: 416/230; border-radius: var(--raio-img);
  background: var(--superficie); overflow: hidden;
}
.servicos-imagem img { width: 100%; height: 100%; object-fit: cover; }

.servicos-lista { list-style: none; margin: 0; padding: 0; }
.servicos-lista li {
  display: flex; align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  padding-block: clamp(18px, 2.2vw, 28px);
}
/* Cada serviço tem seu ícone, na mesma cor da seta: olho = identidade,
   fluxo = soluções digitais, cérebro = audiovisual. */
.servicos-icone {
  width: clamp(48px, 4.6vw, 66px); height: auto; flex: none;
  border-radius: clamp(11px, 1.1vw, 16px);
  transition: transform .35s var(--ease);
}
.servicos-lista li:hover .servicos-icone { transform: scale(1.06); }
.servicos-lista p { flex: 1 1 auto; }
.servicos-lista li + li { border-top: 1px solid var(--linha-fraca); }
.servicos-lista li { transition: opacity .35s var(--ease); }
.servicos-lista:hover li { opacity: .5; }
.servicos-lista li:hover { opacity: 1; }
.servicos-lista p { margin: 0; max-width: 34ch; line-height: 1.45; }
.servicos-lista strong { font-weight: 700; }

.seta-circulo {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  transition: transform .3s var(--ease);
}
.seta-circulo svg { width: 100%; height: 100%; }
a:hover > .seta-circulo, .servicos-lista li:hover .seta-circulo { transform: translate(3px, -3px); }
.seta-circulo--rosa    { color: var(--rosa); }
.seta-circulo--azul    { color: var(--azul); }
.seta-circulo--amarelo { color: var(--amarelo); }

.servicos-aurora {
  align-self: stretch; min-height: 200px;
  border-radius: var(--raio-img);
  background: url('../img/glow-servicos.jpg') center/cover no-repeat;
}

/* ---------- faixa de especialidades ----------------------------------- */

.faixa {
  border-block: 1px solid var(--linha-fraca);
  padding-block: clamp(24px, 3.5vw, 48px);
  overflow: hidden;
}
.faixa-linha {
  display: flex; width: max-content;
  animation: correr 42s linear infinite;
}
.faixa-linha--volta { animation-direction: reverse; margin-top: clamp(10px, 1.5vw, 22px); }
.faixa:hover .faixa-linha { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .faixa-linha { animation: none; }
  .faixa { overflow-x: auto; }
}
@keyframes correr { to { transform: translateX(-50%); } }

.faixa-grupo {
  display: flex; align-items: center; gap: clamp(20px, 2.8vw, 40px);
  padding-right: clamp(20px, 2.8vw, 40px);
  font-size: var(--t-faixa);
  line-height: 1.12;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.faixa-grupo svg { width: .34em; height: .34em; flex: none; }

/* ---------- lista de portfólio ---------------------------------------- */

.lista-projetos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 8.2vw, 119px);
  margin-top: clamp(30px, 4vw, 56px);
}
/* Na Home o título ocupa a primeira célula da grade, como no Figma */
.lista-projetos .celula-titulo { align-self: start; padding-top: 25px; }

.item-projeto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 16.8vw, 242px);
  gap: clamp(16px, 2.4vw, 34px);
  align-items: start;
  padding-block: 25px clamp(30px, 4vw, 56px);
  border-top: 1px solid var(--linha);
  color: var(--branco);
  transition: opacity .3s var(--ease);
}
.item-projeto:hover { opacity: .82; }

.item-projeto .topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.item-projeto .ano { color: var(--cinza); font-variant-numeric: tabular-nums; }
.item-projeto .nome { text-align: right; font-size: var(--t-corpo); }

.item-projeto .texto { margin-top: clamp(30px, 5vw, 76px); text-align: right; }
.item-projeto .categoria { display: block; font-weight: 700; margin-bottom: 14px; }
.item-projeto .resumo { margin: 0 0 0 auto; max-width: 34ch; }

.item-projeto .capa {
  position: relative;
  aspect-ratio: 242/190;
  border-radius: var(--raio-img);
  background: var(--placeholder);
  overflow: hidden;
}
.item-projeto .capa img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.item-projeto:hover .capa img { transform: scale(1.06); }
.item-projeto .capa .seta-canto {
  position: absolute; right: 14px; bottom: 14px;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.85); border-radius: 50%;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--branco);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.item-projeto:hover .capa .seta-canto { transform: translate(3px, -3px); background: rgba(0,0,0,.62); }
.item-projeto .capa .seta-canto svg { width: 15px; height: 15px; }

.aviso-vazio {
  grid-column: 1 / -1;
  border: 1px dashed var(--linha); border-radius: var(--raio-img);
  padding: clamp(28px, 4vw, 48px); text-align: center; color: var(--cinza);
}

/* ---------- página não encontrada ---------- */
.pagina-perdida {
  max-width: 46ch; margin: 0 0 clamp(28px, 4vw, 44px);
  font-size: var(--t-corpo-g); line-height: 1.6; color: var(--branco-2);
}
.botoes-perdido { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- página do projeto ------------------------------------------ */

.projeto-cabeca {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px); align-items: end;
  padding-block: clamp(50px, 7vw, 100px) clamp(28px, 4vw, 50px);
}
.projeto-cabeca h2 {
  margin: 0; font-size: var(--t-secao); font-weight: 500;
  line-height: 1.02; letter-spacing: -.025em; text-wrap: balance;
}
.projeto-cabeca .ficha { text-align: right; }
.projeto-cabeca .ficha p { margin: 0 0 14px; }

.projeto-cabeca .ficha .meta {
  margin: 0; padding-top: 14px; border-top: 1px solid var(--linha);
  font-weight: 700;
}

.projeto-texto { max-width: 68ch; margin-bottom: clamp(40px, 6vw, 76px); }
.projeto-texto p { margin: 0 0 1em; font-size: var(--t-corpo-g); line-height: 1.6; color: var(--branco-2); }
.projeto-texto h3 {
  margin: clamp(34px, 4vw, 54px) 0 .6em;
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.15; color: var(--branco);
}
.projeto-texto h3:first-child { margin-top: 0; }
.projeto-texto p + h3 { padding-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--linha-fraca); }

.texto-institucional { max-width: 68ch; }
.texto-institucional p { font-size: var(--t-corpo-g); line-height: 1.6; color: var(--branco-2); }
.texto-institucional .titulo-secao { margin-bottom: .5em; }

#detalhes { padding-bottom: clamp(60px, 8vw, 120px); }

/* Galeria em linhas justificadas: cada foto entra com a largura
   proporcional ao que ela é, então a linha inteira fecha na mesma
   altura — e nenhuma imagem é cortada. */
.galeria { display: grid; gap: clamp(12px, 1.7vw, 24px); }

.galeria-linha { display: flex; gap: clamp(12px, 1.7vw, 24px); }

/* ---------- antes e depois ---------- */
.antes-depois {
  display: flex; gap: clamp(12px, 1.7vw, 24px);
  margin-bottom: clamp(24px, 3.4vw, 48px);
}
.antes-depois .galeria-foto { position: relative; }
.antes-depois figcaption {
  position: absolute; left: clamp(12px, 1.2vw, 18px); top: clamp(12px, 1.2vw, 18px);
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--branco);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.galeria-foto {
  margin: 0; min-width: 0;
  border-radius: var(--raio-img);
  background: var(--placeholder);
  overflow: hidden;
}
.galeria-foto img {
  width: 100%; height: 100%;
  object-fit: contain;   /* a peça aparece inteira, do jeito que foi feita */
  display: block;
}

.voltar {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(40px, 6vw, 80px);
  padding-bottom: 3px; border-bottom: 1px solid var(--linha);
}
.voltar:hover { border-bottom-color: var(--branco); }
.voltar svg { width: 24px; height: 11px; transform: rotate(180deg); }

/* ---------- bloco de contato + rodapé ---------------------------------- */

.bloco-contato {
  background: var(--superficie);
  border-radius: var(--raio-card) var(--raio-card) 0 0;
  margin-inline: clamp(12px, 2.8vw, 40px);
  padding: clamp(40px, 6vw, 90px) clamp(24px, 4vw, 60px) clamp(24px, 3vw, 44px);
}

.contato-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 90px);
}

.contato-titulo {
  margin: 0;
  font-size: var(--t-contato);
  font-weight: 500; line-height: .95; letter-spacing: -.03em;
}
.contato-titulo .l { display: block; position: relative; }
.contato-titulo .l2 { padding-left: .82em; }
.contato-titulo .estrela {
  position: absolute; top: -.34em; left: 2.9em;
  width: .6em; height: .6em;
}
.contato-titulo .marca {
  position: absolute; left: 0; top: .2em;
  width: .7em; height: .56em;
}

.formulario { display: grid; gap: clamp(22px, 2.6vw, 36px); align-content: start; }
.campos-duplos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }

.campo { position: relative; }
.campo input, .campo textarea {
  width: 100%; background: none; border: 0;
  border-bottom: 1px solid var(--linha);
  color: var(--branco); font: inherit;
  font-size: var(--t-corpo-g);
  padding: 4px 0 12px;
  border-radius: 0;
}
.campo textarea { resize: vertical; min-height: 34px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--cinza); opacity: 1; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--branco); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--rosa); outline-offset: 4px; }

.btn-enviar {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 22px;
  font-size: var(--t-medio);
  padding: 8px 2px;
  transition: gap .3s var(--ease), opacity .3s var(--ease);
}
.btn-enviar:hover { gap: 30px; }
.btn-enviar[disabled] { opacity: .45; cursor: progress; }
.btn-enviar svg { width: 38px; height: 30px; }

.form-aviso {
  margin: 0; padding: 14px 18px; border-radius: 10px;
  font-size: var(--t-corpo);
  background: rgba(255,255,255,.07); border: 1px solid var(--linha-fraca);
}
.form-aviso[data-tipo="erro"] { border-color: var(--rosa); }

.coluna-form { display: flex; flex-direction: column; }
.contato-dados {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; margin-top: clamp(40px, 8vw, 150px);
}
.contato-dados h3 { margin: 0 0 8px; font-size: var(--t-corpo-g); font-weight: 700; }
.contato-dados p { margin: 0; }
.contato-dados a { border-bottom: 1px solid var(--linha); padding-bottom: 2px; }
.contato-dados a:hover { border-bottom-color: var(--branco); }

.rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: clamp(48px, 7vw, 110px);
}
.rodape-links { display: flex; gap: clamp(28px, 5vw, 78px); }
.rodape-links a { color: var(--branco-2); }
.rodape-links a:hover { color: var(--branco); }
.rodape-copy { color: var(--branco-2); }
.rodape-sociais { display: flex; gap: 14px; }
.rodape-sociais a {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--linha); border-radius: 50%;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.rodape-sociais a:hover { background: rgba(255,255,255,.1); border-color: var(--branco); }
.rodape-sociais svg { width: 22px; height: 22px; }

/* ---------- botão flutuante do WhatsApp -------------------------------- */

.zap {
  position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px);
  z-index: 40;
  width: 58px; height: 58px; display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366; color: #062e14;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .3s var(--ease);
}
.zap {
  animation: zap-entra .6s var(--ease) 1.4s backwards;
}
.zap:hover { transform: translateY(-3px) scale(1.05); }
@keyframes zap-entra { from { opacity: 0; transform: translateY(14px) scale(.8); } }
.zap svg { width: 30px; height: 30px; }

/* ---------- responsivo -------------------------------------------------- */

@media (max-width: 900px) {
  .hero--home { min-height: auto; padding-block: 130px 110px; }
  .hero-titulo .linha-2 { text-align: left; }
  .hero-titulo .risco { display: none; }
  .hero-redes { justify-content: flex-start; }
  .hero-base { grid-template-columns: 1fr; align-items: start; }
  .hero-texto { max-width: none; }
  .hero-texto p { text-align: left; }

  .projetos-destaque .intro { margin-left: 0; max-width: none; text-align: left; }

  .servicos-grade { grid-template-columns: 1fr; }
  .servicos-aurora { display: none; }
  .projetos-destaque { background-size: min(190px, 34vw) auto; }

  .lista-projetos { grid-template-columns: 1fr; }
  .lista-projetos .celula-titulo { padding-top: 0; margin-bottom: 10px; }

  .projeto-cabeca { grid-template-columns: 1fr; align-items: start; }
  .projeto-cabeca .ficha { text-align: left; }
  .projeto-cabeca .ficha .resumo { max-width: none; }

  .contato-grade { grid-template-columns: 1fr; }
  .galeria-linha { flex-wrap: wrap; }
  .rodape { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .item-projeto { grid-template-columns: 1fr; }
  .item-projeto .texto { margin-top: 22px; text-align: left; }
  .item-projeto .nome { text-align: right; }
  .item-projeto .resumo { margin-left: 0; }
  .item-projeto .capa { order: -1; aspect-ratio: 16/10; }

  .campos-duplos { grid-template-columns: 1fr; }
  .contato-dados { grid-template-columns: 1fr; }
  /* No celular cada foto ocupa a largura toda, na proporção dela */
  .galeria-linha, .antes-depois { flex-direction: column; }
  .galeria-foto { flex: none !important; width: 100%; }
  .antes-depois figcaption { font-size: 12px; }

  .carrossel-seta { width: 40px; height: 40px; }
  .carrossel-trilho { padding-inline: 12vw; }
}

/* ==================================================================
   MOVIMENTO — limites e desligamento
   ================================================================== */

/* Celular: uma camada de aurora só, e mais devagar.
   Duas camadas grandes animando pesam em aparelho mais simples. */
@media (max-width: 900px) {
  .hero::before { animation-duration: 54s; }
  .hero::after  { animation-duration: 38s; }
}

/* Telas pequenas de verdade: fundo parado. */
@media (max-width: 620px) and (pointer: coarse) {
  .hero::before { animation: none; transform: none; }
  .hero::after  { animation: none; opacity: .55; }
}

/* Quem pediu menos movimento no sistema não vê movimento nenhum. */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .rolar,
  .rolar .roda,
  .zap,
  .faixa-linha,
  .hero-titulo .linha-1,
  .hero-titulo .linha-2,
  .hero-redes,
  .hero-base,
  .hero--interno .titulo-pagina {
    animation: none !important;
  }
  .hero::before { transform: none; }
  .hero::after  { opacity: .55; transform: none; }
  .surge { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cabecalho { transition: none; }
  .menu li { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   MÉTODO 33 — fase 02
   Sem componente novo: reaproveita .secao, .container, .cartao,
   .titulo-secao e .intro. Só a grade dos quatro passos é nova.
   ============================================================ */
.intro--cartao { max-width: 62ch; margin-top: .8em; }

.metodo-lista {
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
}
.metodo-lista li {
  border-top: 1px solid var(--linha-fraca);
  padding-top: clamp(16px, 1.6vw, 24px);
}
.metodo-num {
  display: block;
  font-size: var(--t-mini);
  letter-spacing: .1em;
  color: var(--branco-2);
  opacity: .55;
  margin-bottom: .9em;
}
.metodo-lista h3 {
  margin: 0 0 .5em;
  font-size: var(--t-medio);
  font-weight: 700;
  letter-spacing: -.02em;
}
.metodo-lista p {
  margin: 0;
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--branco-2);
}

@media (max-width: 900px) {
  .metodo-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .metodo-lista { grid-template-columns: 1fr; }
}