/* ===== Tokens ===== */
:root {
  --preto: #0d0e0e;
  --preto-2: #17191a;
  --preto-3: #222526;
  --amarelo: #fdc837;
  --branco: #ffffff;
  --cinza: #a3a8a8;
  --linha: rgba(255, 255, 255, 0.12);
  --titulo: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --texto: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --raio: 4px;
  --vidro-fundo: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  --vidro-fundo-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  --vidro-borda: rgba(255, 255, 255, 0.16);
  --vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--amarelo); color: var(--preto); }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ===== Cabeçalho ===== */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: rgba(13, 14, 14, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--linha);
}
.topo .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { width: 30px; height: auto; }
.marca span { font-family: var(--titulo); font-weight: 700; font-size: 17px; letter-spacing: 0.01em; }
.menu { display: flex; gap: 28px; align-items: center; }
.menu a { text-decoration: none; font-size: 15px; color: var(--cinza); transition: color .2s; }
.menu a:hover { color: var(--branco); }
.menu .btn { color: var(--preto); }
/* com o cabeçalho mais transparente, uma sombra leve mantém o texto legível sobre imagens claras */
.marca span, .menu a:not(.btn) { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.5); }

/* ===== Botões ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 99px;
  font-family: var(--titulo); font-weight: 700; font-size: 15px;
  text-decoration: none; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-amarelo {
  background: var(--amarelo); color: var(--preto);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px rgba(253, 200, 55, 0.18);
}
.btn-amarelo:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 28px rgba(253, 200, 55, 0.3); }

/* Vidro: padrão dos elementos flutuantes */
.btn-contorno, .voltar, .ferramentas li, .lightbox button, .faixa-seta {
  background: var(--vidro-fundo);
  border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--vidro-brilho), 0 8px 24px rgba(0, 0, 0, 0.25);
  color: var(--branco);
}
.btn-contorno:hover, .voltar:hover, .lightbox button:hover, .faixa-seta:hover { background: var(--vidro-fundo-hover); border-color: rgba(253, 200, 55, 0.6); }

/* ===== Flow button =====
   No hover (ou foco pelo teclado): um círculo cresce do centro e preenche o botão,
   a seta da direita sai, outra entra pela esquerda, o texto desliza e o canto passa
   de pílula para 12px. Amarelo vira preto com texto amarelo; vidro vira amarelo com texto preto. */
.flow {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 12px 32px;
  transition: border-radius .6s cubic-bezier(.23, 1, .32, 1), border-color .6s cubic-bezier(.23, 1, .32, 1),
              color .6s cubic-bezier(.23, 1, .32, 1), background .2s, box-shadow .3s, transform .2s;
}
.btn-amarelo.flow { border: 1.5px solid transparent; }
.flow-texto { position: relative; z-index: 1; transform: translateX(-12px); transition: transform .8s cubic-bezier(.23, 1, .32, 1); }
.flow-circulo {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 150%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  transition: transform .8s cubic-bezier(.19, 1, .22, 1), opacity .8s cubic-bezier(.19, 1, .22, 1);
}
.btn-amarelo .flow-circulo { background: var(--preto); }
.btn-contorno .flow-circulo { background: var(--amarelo); }
.flow-seta {
  position: absolute; top: 50%; z-index: 2; width: 16px; height: 16px; margin-top: -8px;
  transition: left .8s cubic-bezier(.34, 1.56, .64, 1), right .8s cubic-bezier(.34, 1.56, .64, 1);
}
.flow-seta-sai { right: 14px; }
.flow-seta-entra { left: -25%; }
/* "Voltar": o mesmo movimento, espelhado */
.flow-volta .flow-texto { transform: translateX(12px); }
.flow-volta .flow-seta-sai { right: auto; left: 14px; }
.flow-volta .flow-seta-entra { left: auto; right: -25%; }
.flow:active { transform: scale(0.96); }

/* foco pelo teclado */
.flow:focus-visible { border-radius: 12px; outline: 2px solid var(--amarelo); outline-offset: 3px; }
.flow:focus-visible .flow-circulo { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.flow:focus-visible .flow-texto { transform: translateX(12px); }
.flow:focus-visible .flow-seta-sai { right: -25%; }
.flow:focus-visible .flow-seta-entra { left: 14px; }
.flow-volta:focus-visible .flow-texto { transform: translateX(-12px); }
.flow-volta:focus-visible .flow-seta-sai { right: auto; left: -25%; }
.flow-volta:focus-visible .flow-seta-entra { left: auto; right: 14px; }
.btn-amarelo.flow:focus-visible { color: var(--amarelo); }
.btn-contorno.flow:focus-visible { color: var(--preto); border-color: var(--amarelo); }

/* mouse por cima (só em aparelhos com mouse, para não "grudar" no toque) */
@media (hover: hover) {
  .flow:hover { border-radius: 12px; transform: none; }
  .flow:hover .flow-circulo { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .flow:hover .flow-texto { transform: translateX(12px); }
  .flow:hover .flow-seta-sai { right: -25%; }
  .flow:hover .flow-seta-entra { left: 14px; }
  .flow-volta:hover .flow-texto { transform: translateX(-12px); }
  .flow-volta:hover .flow-seta-sai { right: auto; left: -25%; }
  .flow-volta:hover .flow-seta-entra { left: auto; right: 14px; }
  .btn-amarelo.flow:hover { color: var(--amarelo); }
  .btn-contorno.flow:hover { color: var(--preto); border-color: var(--amarelo); }
  .flow:active { transform: scale(0.96); }
}

/* ===== Hero ===== */
.hero { padding: clamp(72px, 12vw, 150px) 0 clamp(64px, 9vw, 110px); position: relative; overflow: hidden; isolation: isolate; }
/* Feixes de luz animados atrás do título (desenhados pelo site.js) */
.feixes {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.feixes svg { display: block; width: 100%; height: 100%; }
.etiqueta {
  display: inline-block; margin-bottom: 24px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amarelo);
}
.hero h1 {
  margin: 0; max-width: 16ch;
  font-family: var(--titulo); font-weight: 800;
  font-size: clamp(42px, 7.5vw, 96px); line-height: 0.98; letter-spacing: -0.03em;
}
.hero h1 em { font-style: normal; color: var(--amarelo); }
.hero p { max-width: 56ch; margin: 28px 0 36px; color: var(--cinza); font-size: clamp(17px, 1.6vw, 20px); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== Seções ===== */
section { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--linha); }
.sec-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.sec-topo h2 {
  margin: 0; font-family: var(--titulo); font-weight: 800;
  font-size: clamp(32px, 4.5vw, 56px); line-height: 1; letter-spacing: -0.02em;
}
.sec-topo p { margin: 0; max-width: 42ch; color: var(--cinza); }

/* ===== Projetos ===== */
.grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.projeto { text-decoration: none; display: flex; flex-direction: column; gap: 16px; }
.projeto .capa {
  aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  background: var(--preto-2); border: 1px solid var(--linha);
  display: grid; place-items: center; position: relative;
}
.projeto .capa picture { display: contents; }
.projeto .capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.projeto:hover .capa img { transform: scale(1.03); }
.capa .vazio { font-size: 14px; color: var(--cinza); text-align: center; padding: 16px; }
.projeto:hover .capa { border-color: var(--amarelo); }
.projeto h3 { margin: 0; font-family: var(--titulo); font-weight: 700; font-size: 22px; line-height: 1.2; }
.projeto .tags { margin: 4px 0 0; font-size: 14px; color: var(--cinza); }

/* ===== Serviços ===== */
.servicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.servico { padding: 32px 28px; }
.servico .num { font-family: var(--titulo); font-weight: 700; color: var(--amarelo); font-size: 14px; }
.servico h3 { margin: 12px 0 8px; font-family: var(--titulo); font-size: 20px; line-height: 1.25; }
.servico p { margin: 0; color: var(--cinza); font-size: 15px; }
.servico .icone { display: block; width: 28px; height: 28px; margin-bottom: 18px; color: var(--amarelo); }

.servicos.duas { grid-template-columns: repeat(2, 1fr); }
.servicos.duas .servico h3 { margin-top: 0; }

/* ===== Cartões com luz: um foco amarelo segue o mouse e acende a borda =====
   (versão em CSS/JS puro do "spotlight card"; as coordenadas --lx/--ly vêm do site.js) */
.luz {
  --luz-h: 44;          /* matiz do amarelo da marca (#fdc837) */
  --borda-luz: 2px;
  --foco: 240px;
  position: relative;
  border-radius: 14px;
  border: var(--borda-luz) solid rgba(255, 255, 255, 0.08);
  background-color: rgba(255, 255, 255, 0.03);
  background-image: radial-gradient(var(--foco) var(--foco) at var(--lx, -999px) var(--ly, -999px), hsl(var(--luz-h) 100% 70% / 0.1), transparent);
  background-origin: border-box;
  background-repeat: no-repeat;
  box-shadow: var(--vidro-brilho), 0 1rem 2rem -1rem #000;
}
.luz::before, .luz::after, .luz-halo::before {
  content: ""; position: absolute; pointer-events: none;
  inset: calc(var(--borda-luz) * -1);
  border: var(--borda-luz) solid transparent;
  border-radius: inherit;
  background-origin: border-box;
  background-repeat: no-repeat;
  /* mostra só o anel da borda */
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: padding-box, border-box;
  mask-composite: exclude;
}
.luz::before {
  background-image: radial-gradient(calc(var(--foco) * 0.75) calc(var(--foco) * 0.75) at var(--lx, -999px) var(--ly, -999px), hsl(var(--luz-h) 100% 55%), transparent 100%);
  filter: brightness(1.5);
}
.luz::after {
  background-image: radial-gradient(calc(var(--foco) * 0.45) calc(var(--foco) * 0.45) at var(--lx, -999px) var(--ly, -999px), hsl(0 0% 100% / 0.9), transparent 100%);
}
.luz-halo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; filter: blur(18px); opacity: 0.6; }
.luz-halo::before {
  inset: -10px; border-width: 10px; border-radius: 24px;
  background-image: radial-gradient(calc(var(--foco) * 0.75) calc(var(--foco) * 0.75) at calc(var(--lx, -999px) + 8px) calc(var(--ly, -999px) + 8px), hsl(var(--luz-h) 100% 55%), transparent 100%);
}
.luz > :not(.luz-halo) { position: relative; z-index: 1; }

/* ===== Sobre ===== */
.sobre { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 80px); }
.sobre p { margin: 0 0 18px; color: #d6d9d9; }
.ferramentas h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amarelo); }
.ferramentas ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ferramentas li { padding: 7px 14px; border-radius: 99px; font-size: 14px; box-shadow: var(--vidro-brilho), 0 4px 14px rgba(0, 0, 0, 0.22); }

/* ===== Contato ===== */
.contato { text-align: left; }
.contato h2 {
  margin: 0 0 24px; font-family: var(--titulo); font-weight: 800;
  font-size: clamp(40px, 7vw, 88px); line-height: 1; letter-spacing: -0.03em; max-width: 14ch;
}
.contato h2 em { font-style: normal; color: var(--amarelo); }
.nowrap { white-space: nowrap; }
.contato-sub { margin: 0 0 32px; color: var(--cinza); font-size: 18px; }
.links-contato { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 40px; }
.links-contato a { color: var(--cinza); text-decoration: none; font-size: 15px; }
.links-contato a:hover { color: var(--amarelo); }

/* ===== Rodapé ===== */
.rodape { background: var(--amarelo); color: var(--preto); padding: 32px 0; font-size: 14px; }
.rodape .container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.redes a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 99px;
  color: var(--preto); background: rgba(13, 14, 14, 0.08);
  transition: background .2s, color .2s, transform .2s;
}
.redes a:hover, .redes a:focus-visible { background: var(--preto); color: var(--amarelo); transform: translateY(-2px); }
.redes a:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }
.redes svg { width: 20px; height: 20px; }

/* ===== Página de projeto ===== */
.case-hero { padding: 32px 0 40px; }
.voltar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 99px;
  text-decoration: none; font-size: 15px; font-weight: 500;
  transition: background .2s, border-color .2s, transform .2s;
}
.voltar:hover { transform: translateX(-2px); }
.case-etiqueta { display: block; margin: clamp(56px, 8vw, 104px) 0 16px; }
.case-hero h1 {
  margin: 0 0 16px; font-family: var(--titulo); font-weight: 800;
  font-size: clamp(38px, 6vw, 76px); line-height: 1; letter-spacing: -0.03em;
}
.case-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); margin-top: 40px; }
.case-info dt { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amarelo); margin-bottom: 6px; }
.case-info dd { margin: 0; }
.case-texto { max-width: 70ch; padding: 48px 0; }
.case-texto h2 { font-family: var(--titulo); font-size: 26px; margin: 32px 0 10px; }
.case-texto p { color: #d6d9d9; margin: 0 0 16px; text-wrap: pretty; }
.case-texto ul { margin: 0; padding-left: 20px; color: #d6d9d9; display: flex; flex-direction: column; gap: 10px; }
.case-texto li::marker { color: var(--amarelo); }
.case-texto strong { color: var(--branco); }
.case-imagens { display: flex; flex-direction: column; gap: 24px; padding-bottom: 80px; }
.case-imagens .vazio {
  aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed var(--linha);
  border-radius: var(--raio); color: var(--cinza); font-size: 14px;
}

.case-sub { color: var(--cinza); max-width: 60ch; margin: 0; font-size: clamp(17px, 1.6vw, 20px); }
.bloco { padding: 40px 0; border-top: 1px solid var(--linha); }
.bloco h2 { font-family: var(--titulo); font-size: 22px; margin: 0 0 20px; }
.galeria { display: grid; gap: 16px; }
.galeria img { width: 100%; height: auto; border-radius: var(--raio); background: var(--preto-2); }
.galeria.cols-1 { grid-template-columns: 1fr; }
.galeria.cols-2 { grid-template-columns: repeat(2, 1fr); }
.galeria.cols-3 { grid-template-columns: repeat(3, 1fr); }
.galeria.cols-4 { grid-template-columns: repeat(4, 1fr); }
.galeria.cols-ia { grid-template-columns: 16fr 5.1fr; align-items: start; }
.galeria.strip { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow-x: auto; }
.case-cta { padding: 64px 0 96px; border-top: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.case-cta p { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: clamp(28px, 4vw, 44px); }

/* ===== Destaque com anotações ===== */
.destaque { padding: 56px 0; border-top: 1px solid var(--linha); }
.destaque h2 { margin: 0 0 12px; font-family: var(--titulo); font-weight: 800; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; }
.destaque-intro { margin: 0 0 40px; max-width: 60ch; color: var(--cinza); font-size: 18px; }
.destaque-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.destaque-grid.invertido { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.destaque-grid.invertido .anotada { order: 2; }
.anotada { margin: 0; }
.anotada img { display: block; width: 100%; height: auto; border-radius: var(--raio); }
.notas .num { font-family: var(--titulo); font-weight: 700; font-size: 14px; line-height: 1.9; color: var(--amarelo); }
.notas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.notas li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.notas h3 { margin: 2px 0 6px; font-family: var(--titulo); font-size: 19px; line-height: 1.25; }
.notas p { margin: 0; color: #d6d9d9; font-size: 16px; }

/* ===== Catálogo (grade com peça principal) ===== */
.catalogo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.catalogo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--raio); }
.catalogo-grid .principal { grid-column: span 2; grid-row: span 2; }
.notas.linha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }

/* ===== Grupos da página de projeto ===== */
.grupo { padding: clamp(64px, 8vw, 104px) 0 8px; border-top: 1px solid var(--linha); }
.grupo h2 { margin: 0 0 12px; font-family: var(--titulo); font-weight: 800; font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em; }
.grupo p { margin: 0; max-width: 56ch; color: var(--cinza); font-size: 18px; }
.grupo + .destaque { border-top: 0; }

/* ===== Carrossel em sequência ===== */
.carrossel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.carrossel li { display: flex; flex-direction: column; gap: 10px; }
.carrossel img { display: block; width: 100%; height: auto; border-radius: var(--raio); }
.carrossel-etapa { font-size: 14px; color: var(--cinza); }
.carrossel-etapa b { margin-right: 6px; font-family: var(--titulo); color: var(--amarelo); }
.faixa { position: relative; }
.faixa-seta {
  position: absolute; top: calc(50% - 21px); z-index: 2; transform: translateY(-50%);
  width: 52px; height: 52px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.faixa-seta svg { width: 22px; height: 22px; }
.faixa-seta:hover { transform: translateY(-50%) scale(1.06); }
.faixa-seta[hidden] { display: none; }
.faixa-ant { left: 14px; }
.faixa-prox { right: 14px; }
.dica { margin: 14px 0 0; font-size: 13px; color: var(--cinza); }
.carrossel.grade4 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; }
.sequencia-titulo { margin: 56px 0 18px; font-family: var(--titulo); font-size: 19px; }
.carrossel.rolagem { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 12px) / 4.35); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.carrossel.rolagem li { scroll-snap-align: start; }
.carrossel.rolagem.grande { gap: 16px; grid-auto-columns: calc((100% - 2 * 16px) / 2.5); }

/* ===== Ampliar imagens ===== */
.ampliavel { cursor: zoom-in; }
.ampliavel:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 64px 88px; background: rgba(8, 9, 9, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 128px); width: auto; height: auto; border-radius: var(--raio); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.lightbox button { position: absolute; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.lightbox button[hidden] { display: none; }
.lightbox-fechar { top: 16px; right: 16px; }
.lightbox-ant { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-prox { right: 20px; top: 50%; transform: translateY(-50%); }

/* ===== Fechamento do projeto ===== */
.fechamento { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--linha); }
.fechamento p { margin: 0; max-width: 62ch; text-wrap: pretty; font-size: clamp(19px, 2vw, 24px); line-height: 1.55; color: #e4e6e6; }
.fechamento + .case-cta { border-top: 0; padding-top: 0; }

/* ===== Frase de marca (ideia por trás do nome) ===== */
.frase { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--linha); }
.frase .etiqueta { margin-bottom: 20px; }
.frase p { margin: 0; max-width: 21ch; text-wrap: balance; font-family: var(--titulo); font-weight: 800; font-size: clamp(32px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.025em; }
.frase em { font-style: normal; color: var(--amarelo); }
.bloco-intro { margin: -8px 0 24px; max-width: 60ch; color: var(--cinza); }

/* ===== Pranchas do estudo de caso (sequência de apresentação) ===== */
.prancha { margin: 0; }
.prancha img { width: 100%; height: auto; border-radius: var(--raio); background: var(--preto-2); }
.prancha figcaption { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 62ch); gap: 6px 32px; margin-top: 18px; }
.prancha .rotulo { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amarelo); line-height: 1.9; }
.prancha figcaption p { margin: 0; color: #d6d9d9; font-size: 16px; text-wrap: pretty; }
.prancha-abertura { padding-bottom: 8px; }
.pranchas { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); padding: clamp(32px, 4vw, 48px) 0 clamp(56px, 7vw, 88px); }

/* ===== Responsivo ===== */
@media (max-width: 860px) {
  .grade, .sobre { grid-template-columns: 1fr; }
  .servicos, .servicos.duas { grid-template-columns: 1fr; }
  .case-info { grid-template-columns: 1fr; }
  .galeria.cols-3, .galeria.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .galeria.cols-ia { grid-template-columns: 1fr; }
  .destaque-grid, .destaque-grid.invertido { grid-template-columns: 1fr; }
  .catalogo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogo-grid .principal { grid-row: auto; }
  .notas.linha { grid-template-columns: 1fr; gap: 26px; }
  .carrossel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .carrossel li { scroll-snap-align: start; }
  .carrossel.rolagem, .carrossel.rolagem.grande { grid-auto-columns: 82%; }
  .faixa-seta { width: 44px; height: 44px; }
  .faixa-ant { left: 8px; }
  .faixa-prox { right: 8px; }
  .carrossel.grade4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; }
  .lightbox { padding: 72px 12px; }
  .lightbox-ant, .lightbox-prox { top: auto; bottom: 16px; transform: none; }
  .destaque-grid.invertido .anotada { order: 0; }
  .galeria.strip { grid-auto-columns: 62%; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .galeria.strip img { scroll-snap-align: start; }
  .menu a:not(.btn) { display: none; }
  .prancha figcaption { grid-template-columns: 1fr; gap: 4px; margin-top: 14px; }
  .case-cta .acoes { width: 100%; }
  .case-cta .acoes .btn { flex: 1 1 220px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .projeto .capa img, .redes a, .flow-texto, .flow-circulo, .flow-seta { transition: none; }
}

/* Foto em "Quem sou": colorida, inteira, à direita */
.foto-caio { margin: 0; justify-self: end; width: 100%; max-width: 420px; border-radius: 18px; overflow: hidden; background: #1a1b1b; box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }
.foto-caio img { display: block; width: 100%; height: auto; }
.sobre { align-items: center; }
.sobre .ferramentas { margin-top: 32px; }
@media (max-width: 860px) { .foto-caio { justify-self: start; max-width: 360px; } }