/* Home (versão 3 de 01/10/2026). Identidade tirada das referências da Marcela
   (Lunetra, Obelisk, Vertis, ferramentas criativas): preto, um azul só que vai do
   profundo ao gelo, luz em degradê com grão fino, blocos em grade, grotesca em
   caixa normal e título em dois tons. A cor entra como luz, não como botão.
   A home é sempre escura; o seletor de tema fica só nas páginas de case. */

/* ds-allow-hardcode: paleta azul da home, definida aqui e usada só por variável */
body.home {
  --fundo: #000; --superficie: #0C0D10; --texto: var(--papel); --texto-2: #8E9096; --linha: #1E1F22;
  --azul-fundo: #04142E; --azul: #0F56B8; --azul-luz: #4C9BF2; --gelo: #BFE2FF;
  --display: "Inter Tight", var(--sans);
  --borda: color-mix(in srgb, var(--papel) 10%, transparent);
  --raio: 20px;
  --vao: clamp(16px, 1.8vw, 24px);      /* espaço entre cartões */
  --pad: clamp(24px, 2.6vw, 36px);      /* respiro interno dos cartões */
  --sec: clamp(104px, 12vw, 176px);     /* espaço entre seções */
  --t-card: 400 clamp(24px, 2.4vw, 32px)/1.08 var(--display); /* título de cartão */
  --margem: max(clamp(16px, 3vw, 40px), calc((100vw - 1180px) / 2));
  --degrade: linear-gradient(180deg, #000 12%, var(--azul-fundo) 42%, var(--azul) 72%, var(--gelo) 118%);
  color-scheme: dark;
}
.home .topo-dir .seg[data-seg="tema"] { display: none; }
.brilho { display: none; }

/* logo no canto */

/* ---------- peças comuns ---------- */
.vidro {
  background: color-mix(in srgb, var(--papel) 6%, transparent); border: 1px solid var(--borda); border-radius: var(--raio);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
}
@media (prefers-reduced-transparency: reduce) { .vidro { background: var(--superficie); -webkit-backdrop-filter: none; backdrop-filter: none; } }

.botao { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 999px; font: 500 14px/1 var(--sans); white-space: nowrap; transition: background var(--medio) var(--curva), transform var(--medio) var(--curva); }
.botao-luz { background: var(--papel); color: var(--tinta); }
.botao-luz:hover { background: var(--gelo); transform: translateY(-2px); }
.link-sub { font: 400 14px/1.3 var(--sans); color: var(--texto); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--texto) 40%, transparent); text-underline-offset: 5px; transition: text-decoration-color var(--rapido), color var(--rapido); }
.link-sub:hover { color: var(--gelo); text-decoration-color: currentColor; }

/* bloco: a unidade da grade. Três acabamentos: preto, degradê e gelo. */
.bloco { position: relative; overflow: hidden; border-radius: var(--raio); isolation: isolate; }
.b-preto { background: var(--superficie); }
.b-degrade { background: var(--degrade); }
.b-gelo { background: var(--gelo); color: var(--tinta); }
/* grão fino por cima da luz */
.b-degrade::after, .abre::after, .fim-painel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ruido); background-size: 180px; opacity: .22; mix-blend-mode: overlay; pointer-events: none;
}

/* ---------- abertura ---------- */
/* a abertura é um bloco arredondado, preenchido de azul (sem contorno) contra o preto da página.
   Ao rolar, ela fica fixa e cresce até preencher a tela: --p vai de 0 a 1 (site.js). */
body.home { --moldura: 12px; --hero-texto: 176px; /* altura reservada ao título e ao texto no pé do hero */ }
.abre-cena { --p: 0; height: 175svh; }
.abre-fixo { position: sticky; top: 0; height: 100svh; padding: calc(var(--moldura) * (1 - var(--p))); }
.abre {
  position: relative; isolation: isolate; overflow: hidden; height: 100%;
  border-radius: calc(28px * (1 - var(--p)));
  padding: 96px calc(var(--margem) - var(--moldura) * (1 - var(--p))) clamp(28px, 4vh, 44px);
  display: grid; grid-template-rows: 1fr auto; gap: 24px;
  /* o bloco é claro, nos tons do fundo da imagem do hero (medidos no arquivo: #DEDAD9 em cima, #F1EEEA embaixo) */
  background: linear-gradient(180deg, #DEDAD9 0%, #E9E6E2 55%, #F1EEEA 100%); /* ds-allow-hardcode: tons da imagem */
  color: var(--tinta);
}
.abre-palco { position: static; min-height: 200px; }
/* a imagem ocupa a parte de cima do bloco, inteira (sem cortar o cartão), e as bordas se desfazem no fundo */
.abre-img {
  position: absolute; z-index: -1; left: 50%; top: 56px; height: calc(100% - 56px - var(--hero-texto)); width: auto; max-width: none; aspect-ratio: 2880 / 1608;
  transform: translateX(-50%); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-composite: intersect; /* ds-allow-hardcode: canal alfa da máscara */
  animation: revelar 1600ms var(--curva) both;
}
@keyframes revelar { from { opacity: 0; } }

.abre-base { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: end; }
.abre-p { margin: 0 0 20px; max-width: 42ch; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--tinta) 72%, transparent); }
.abre-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
/* botão do hero = um item do menu: em repouso é o vidro transparente da barra (aro de luz,
   texto escuro sobre o fundo claro, igual às abas inativas); no hover ganha a pílula fumê da aba ativa.
   Mesmos valores de .menu, .menu a e .menu a[aria-current] em site.css. */
/* ds-allow-hardcode: brancos e pretos em alfa são a luz e a sombra do vidro */
.abre .botao-luz {
  height: 54px; padding: 4px; color: var(--menu-txt); border-radius: 999px; border: 1px solid var(--menu-aro);
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .10) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(0, 0, 0, .10), 0 10px 26px rgba(0, 0, 0, .10);
}
.abre .botao-luz span {
  display: inline-flex; align-items: center; height: 100%; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  transition: background var(--medio) var(--curva), border-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva), color var(--medio);
}
.abre .botao-luz:hover { background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .10) 100%); }
.abre .botao-luz:hover span, .abre .botao-luz:focus-visible span {
  color: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .36);
  background: linear-gradient(118deg, rgba(60, 60, 62, .40) 0%, rgba(28, 28, 30, .46) 55%, rgba(44, 44, 46, .40) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 12px rgba(0, 0, 0, .16);
}
.abre .link-sub { color: var(--tinta); text-decoration-color: color-mix(in srgb, var(--tinta) 40%, transparent); }
.abre .link-sub:hover { color: var(--azul); }

/* ---------- seções ---------- */
.sec { padding: var(--sec) var(--margem) 0; }
.sec-cab { margin-bottom: clamp(36px, 4.4vw, 64px); }
/* título em dois tons: a frase branca e a continuação em cinza */
.titulo-sec, .fim-titulo { margin: 0; max-width: 24ch; font: 400 clamp(26px, 3vw, 42px)/1.12 var(--display); letter-spacing: -.03em; }
.titulo-sec em, .fim-titulo em { display: block; font-style: normal; color: var(--texto-2); }
.titulo-sec { max-width: none; }
/* subtítulo em linhas curtas e equilibradas, sem palavra sobrando sozinha */
.titulo-sec em { max-width: 26ch; text-wrap: balance; }
/* quebras escolhidas à mão: valem no desktop; no celular o texto corre normal */
.titulo-sec em.quebras { max-width: none; text-wrap: wrap; }
@media (max-width: 700px) { .titulo-sec em.quebras br { display: none; } .titulo-sec em.quebras { text-wrap: balance; } }

/* casos: uma forma só. A tela do projeto ocupa o topo do cartão e se desfaz no fundo;
   tags em cápsulas em cima, nome e descrição embaixo, sobre fundo liso. */
.casos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vao); }
.caso, .poster { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: var(--raio); color: var(--papel); transition: transform var(--lento) var(--curva); }
.caso { min-height: clamp(440px, 44vw, 560px); background: linear-gradient(180deg, #0C0D10 0%, #081328 100%); } /* ds-allow-hardcode: fundo do cartão */
.caso:hover, .poster:hover { transform: translateY(-6px); }
.caso-img { position: absolute; inset: 0 0 40% 0; display: block; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); } /* ds-allow-hardcode: canal alfa da máscara */
.caso-img img, .poster-img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform var(--devagar) var(--curva); }
.caso:hover .caso-img img, .poster:hover .poster-img img { transform: scale(1.04); }
.caso-topo { position: absolute; z-index: 2; top: 20px; left: 20px; right: 20px; display: flex; justify-content: flex-end; align-items: flex-start; gap: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
/* tag: retângulo arredondado discreto, de vidro escuro */
.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px; font: 400 12.5px/1 var(--sans); color: var(--papel);
  background: color-mix(in srgb, var(--papel) 7%, transparent); border: 1px solid color-mix(in srgb, var(--papel) 14%, transparent); }
.seta { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, #000 46%, transparent); border: 1px solid color-mix(in srgb, var(--papel) 22%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background var(--medio), color var(--medio), transform var(--medio) var(--curva); } /* ds-allow-hardcode: fundo da seta */
.caso:hover .seta, .poster:hover .seta { background: var(--papel); color: var(--tinta); transform: rotate(45deg); }
.caso-pe { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: var(--pad); display: grid; gap: 10px; }
.caso-nome { font: var(--t-card); letter-spacing: -.035em; }
.caso-desc { max-width: 40ch; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--papel) 68%, transparent); }

/* campanhas (direção de arte): a forma dos cartazes está no bloco "masonry", no fim do arquivo */

/* processo: lista de etapas à esquerda, painel que troca à direita */
.metodo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.metodo-lista { display: grid; gap: 2px; }
.metodo-lista button {
  position: relative; display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 8px 0; text-align: left;
  font: 400 clamp(30px, 3.6vw, 50px)/1.1 var(--display); letter-spacing: -.04em; color: color-mix(in srgb, var(--papel) 34%, transparent);
  transition: color var(--medio) var(--curva), padding var(--medio) var(--curva);
}
.metodo-lista button:hover { color: color-mix(in srgb, var(--papel) 70%, transparent); }
.metodo-lista button[aria-selected="true"] { color: var(--papel); }
.m-n { font: 400 12px/1 var(--sans); letter-spacing: 0; color: var(--texto-2); min-width: 18px; }
.metodo-painel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--vao); padding: 16px; min-height: clamp(340px, 34vw, 420px); }
.metodo-painel:not([hidden]) { animation: surgir var(--lento) var(--curva); }
@keyframes surgir { from { opacity: 0; transform: translateY(10px); } }
.mp-txt { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(8px, 1.2vw, 16px); }
.mp-etapa { font: 400 13px/1 var(--sans); color: var(--texto-2); }
.mp-txt h3 { margin: 0 0 12px; font: var(--t-card); letter-spacing: -.035em; }
.mp-txt p { margin: 0; font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, var(--papel) 70%, transparent); max-width: 38ch; }
.mp-recebe { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--borda); }
.mp-recebe span { font-size: 12.5px; color: var(--sinal); }
.mp-recebe b { font-weight: 400; color: var(--papel); line-height: 1.45; }

/* o desenho de cada etapa, feito só de luz e linha */
.mp-vis { position: relative; overflow: hidden; border-radius: 12px; min-height: 220px; background: radial-gradient(100% 90% at 50% 110%, var(--azul) 0%, var(--azul-fundo) 55%, #000 100%); } /* ds-allow-hardcode: fim do degradê em preto */
.mp-vis i { position: absolute; display: block; }
/* 1 entender: anéis, como um radar */
.pv-1 i { left: 50%; top: 54%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid color-mix(in srgb, var(--gelo) 34%, transparent); }
.pv-1 i:nth-child(1) { width: 18%; background: var(--gelo); border: 0; box-shadow: 0 0 40px 8px rgba(143, 196, 255, .7); } /* ds-allow-hardcode: luz */
.pv-1 i:nth-child(2) { width: 42%; }
.pv-1 i:nth-child(3) { width: 68%; opacity: .6; }
.pv-1 i:nth-child(4) { width: 96%; opacity: .3; }
/* 2 desenhar: blocos de um layout */
.pv-2 { background: linear-gradient(180deg, #000 0%, var(--azul-fundo) 60%, var(--azul) 130%); } /* ds-allow-hardcode: começo do degradê em preto */
.pv-2 i { border-radius: 8px; border: 1px solid color-mix(in srgb, var(--gelo) 30%, transparent); }
.pv-2 i:nth-child(1) { left: 12%; top: 14%; width: 76%; height: 16%; }
.pv-2 i:nth-child(2) { left: 12%; top: 36%; width: 44%; height: 50%; background: linear-gradient(180deg, var(--azul-luz), var(--gelo)); border: 0; box-shadow: 0 0 50px rgba(76, 155, 242, .55); } /* ds-allow-hardcode: luz */
.pv-2 i:nth-child(3) { left: 60%; top: 36%; width: 28%; height: 22%; }
.pv-2 i:nth-child(4) { left: 60%; top: 64%; width: 28%; height: 22%; }
/* 3 construir: linhas de código */
.pv-3 i { left: 14%; height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--gelo) 26%, transparent); }
.pv-3 i:nth-child(1) { top: 26%; width: 46%; }
.pv-3 i:nth-child(2) { top: 40%; left: 22%; width: 58%; background: var(--gelo); box-shadow: 0 0 24px 2px rgba(143, 196, 255, .7); } /* ds-allow-hardcode: luz */
.pv-3 i:nth-child(3) { top: 54%; left: 22%; width: 34%; }
.pv-3 i:nth-child(4) { top: 68%; width: 52%; }
/* 4 publicar: a linha de horizonte acesa */
.pv-4 { background: radial-gradient(80% 60% at 50% 46%, var(--azul) 0%, var(--azul-fundo) 50%, #000 100%); } /* ds-allow-hardcode: fim do degradê em preto */
.pv-4 i:nth-child(1) { z-index: 1; left: 16%; right: 16%; top: 50%; height: 3px; border-radius: 3px; background: var(--gelo); box-shadow: 0 0 22px 4px rgba(191, 226, 255, .85), 0 -34px 80px 22px rgba(76, 155, 242, .55); } /* ds-allow-hardcode: luz */
.pv-4 i:nth-child(2) { left: 0; right: 0; top: 50%; bottom: 0; background: #000; opacity: .82; } /* ds-allow-hardcode: sombra abaixo do horizonte */
.pv-4 i:nth-child(n+3) { display: none; }


/* ---------- o que eu entrego: cinco cartões, três em cima e dois largos embaixo ---------- */
.entrego { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--vao); }
.ent { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: clamp(400px, 38vw, 480px); padding: var(--pad) var(--pad) 0; }
.ent-largo { grid-column: span 3; min-height: clamp(340px, 30vw, 400px); }
.ent-txt h3 { margin: 0 0 14px; max-width: 13ch; font: var(--t-card); letter-spacing: -.035em; }
.ent-largo .ent-txt h3 { max-width: 16ch; }
.ent-txt p { margin: 0; max-width: 36ch; font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, currentColor 66%, transparent); }
.ent-largo .ent-txt p { max-width: 44ch; }
.ent-vis { position: relative; height: 150px; margin: 0 calc(var(--pad) * -1) 0; overflow: hidden; }
.ent-vis i, .ent-vis span, .ent-vis b { position: absolute; display: block; }
.ent-vis b, .ent-vis span { font: 400 13px/1 var(--sans); }
/* luz de base de cada vinheta */
.ent-vis::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 90% at 50% 120%, var(--azul) 0%, var(--azul-fundo) 48%, transparent 100%); opacity: .9; }

/* 1 conceito: uma letra grande e a paleta */
.ev-1 .ev-marca { left: 10%; top: 50%; transform: translateY(-50%); font: 400 clamp(72px, 7vw, 96px)/1 var(--display); letter-spacing: -.06em; color: var(--papel); }
.ev-1 .ev-sw { width: 26px; height: 26px; border-radius: 50%; top: 38%; border: 1px solid color-mix(in srgb, var(--gelo) 50%, transparent); }
.ev-1 .s1 { right: 10%; background: var(--gelo); border: 0; } .ev-1 .s2 { right: 19%; background: var(--azul-luz); border: 0; } .ev-1 .s3 { right: 28%; background: var(--azul); border: 0; } .ev-1 .s4 { right: 37%; background: #000; } /* ds-allow-hardcode: amostra da paleta */
/* 2 prazo: linha do tempo com o marcador aceso no dia 3 */
.ev-2 .ev-dia { top: 26px; left: 10%; color: var(--texto-2); } .ev-2 .d3 { left: auto; right: 10%; color: var(--papel); }
.ev-2 .ev-trilha { left: 10%; right: 10%; top: 64px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--gelo) 20%, transparent), var(--gelo)); }
.ev-2 .ev-ponto { right: 10%; top: 59px; width: 12px; height: 12px; border-radius: 50%; background: var(--gelo); box-shadow: 0 0 18px 4px rgba(191, 226, 255, .75); } /* ds-allow-hardcode: luz */
.ev-2 .ev-tag { right: 10%; top: 86px; padding: 8px 12px; border-radius: 999px; background: var(--papel); color: var(--tinta); font-weight: 500; }
/* 3 responsivo: três telas */
.ev-3 .ev-dev { bottom: -18px; border: 1px solid color-mix(in srgb, var(--gelo) 55%, transparent); border-bottom: 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--gelo) 14%, transparent), transparent); }
.ev-3 .desk { left: 8%; width: 48%; height: 118px; } .ev-3 .tab { left: 60%; width: 20%; height: 92px; } .ev-3 .fone { left: 84%; width: 9%; height: 70px; }
/* 4 interação: o botão muda de estado sob o cursor */
.ev-4 .ev-btn { top: 50%; transform: translateY(-50%); padding: 12px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--papel) 24%, transparent); color: var(--papel); }
.ev-4 .ev-btn b { position: static; font-weight: 500; }
.ev-4 .ev-btn:first-child { left: 8%; }
.ev-4 .on { left: 30%; background: var(--papel); color: var(--tinta); border-color: transparent; box-shadow: 0 0 0 6px color-mix(in srgb, var(--gelo) 22%, transparent), 0 0 30px rgba(143, 196, 255, .5); } /* ds-allow-hardcode: luz */
.ev-4 .ev-cursor { left: calc(30% + 56px); top: calc(50% + 4px); width: 0; height: 0; border-left: 9px solid var(--papel); border-top: 7px solid transparent; border-bottom: 7px solid transparent; transform: rotate(-30deg); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); } /* ds-allow-hardcode: sombra */
/* 5 no ar: o endereço e a linha de horizonte acesa */
.ev-5::before { opacity: 0; }
.ev-5 .ev-url { left: 50%; top: 34px; transform: translateX(-50%); padding: 9px 14px; border-radius: 999px; background: color-mix(in srgb, #000 40%, transparent); border: 1px solid color-mix(in srgb, var(--papel) 18%, transparent); color: var(--papel); font-size: 12.5px; } /* ds-allow-hardcode: fundo do endereço */
.ev-5 .ev-horizonte { left: 14%; right: 14%; top: 96px; height: 3px; border-radius: 3px; background: var(--gelo); box-shadow: 0 0 22px 4px rgba(191, 226, 255, .85), 0 -26px 60px 16px rgba(76, 155, 242, .5); } /* ds-allow-hardcode: luz */
@media (max-width: 900px) {
  .entrego { grid-template-columns: 1fr 1fr; }
  .ent, .ent-largo { grid-column: span 1; min-height: 0; }
  .ent-largo:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .entrego { grid-template-columns: 1fr; } .ent-largo:last-child { grid-column: auto; } }

/* sobre: grade de blocos de tamanhos diferentes */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: var(--vao); }
.bento .bloco { padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.bento b { font: 400 clamp(44px, 4.6vw, 64px)/.9 var(--display); letter-spacing: -.045em; }
.bento b small { font: 400 .4em/1 var(--display); letter-spacing: -.02em; }
.bento .bloco > span:not(.aro) { font-size: 13.5px; line-height: 1.4; color: color-mix(in srgb, currentColor 76%, transparent); max-width: 26ch; }
.s-bio { grid-column: 1 / 3; grid-row: 1 / 3; align-items: flex-start; }
.s-bio p { margin: 0; font: 400 clamp(15px, 1.3vw, 17px)/1.65 var(--sans); color: color-mix(in srgb, var(--papel) 88%, transparent); }
.s-dez { grid-column: 3; grid-row: 1; }
.s-tres { grid-column: 3; grid-row: 2; }
.s-circ { grid-column: 4; grid-row: 1 / 3; }
.s-circ b, .s-circ > span:not(.aro) { position: relative; z-index: 1; }
/* círculos com borda de luz */
.aro { position: absolute; z-index: 0; left: 50%; top: -8%; width: 118%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #000; box-shadow: inset 0 0 26px 2px rgba(143, 196, 255, .6), 0 0 34px rgba(76, 155, 242, .35); } /* ds-allow-hardcode: luz */
.aro-2 { top: 52%; }

/* fim: painel com a linha de horizonte acesa */
.fim { padding: var(--sec) var(--margem) 24px; }
.fim-painel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--raio); padding: var(--pad); padding-top: clamp(150px, 20vw, 250px); background: radial-gradient(60% 52% at 50% 0%, var(--azul) 0%, var(--azul-fundo) 46%, #000 100%); } /* ds-allow-hardcode: fim do degradê em preto */
.horizonte { position: absolute; top: clamp(74px, 10vw, 124px); left: 50%; width: min(46%, 420px); height: 3px; transform: translateX(-50%); border-radius: 3px; background: var(--gelo); box-shadow: 0 0 22px 4px rgba(191, 226, 255, .8), 0 -40px 90px 26px rgba(76, 155, 242, .5); } /* ds-allow-hardcode: luz */
.fim-card { margin-top: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: clamp(14px, 1.6vw, 20px); }
.fim-email { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; padding: 10px 8px; font: 400 clamp(17px, 1.7vw, 23px)/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.fim-copiar { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--papel); color: var(--tinta); font: 500 12px/1 var(--sans); transition: background var(--medio); }
.fim-email:hover .fim-copiar { background: var(--gelo); }
.fim-canais { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.canal { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px; border-radius: 12px; background: color-mix(in srgb, var(--papel) 6%, transparent); border: 1px solid var(--borda); font: 500 13.5px/1 var(--sans); transition: background var(--medio), border-color var(--medio); }
.canal:hover { background: color-mix(in srgb, var(--gelo) 16%, transparent); border-color: color-mix(in srgb, var(--gelo) 40%, transparent); }
.fim-marca { display: flex; align-items: center; gap: 12px; }
.fim-marca .simbolo { width: 22px; height: 22px; color: var(--papel); }
.fim-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; font-size: 13px; color: var(--texto-2); }
.voltar-topo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borda); color: var(--texto); transition: background var(--medio), color var(--medio); }
.voltar-topo:hover { background: var(--papel); color: var(--tinta); }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  body.home { --hero-texto: 318px; } /* título e texto empilhados ocupam mais altura */
  .abre-base { grid-template-columns: 1fr; gap: 20px; }
  .casos { grid-template-columns: 1fr; }
  .metodo { grid-template-columns: 1fr; }
  .metodo-lista { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .metodo-lista button { width: auto; flex: none; padding: 10px 14px !important; font-size: 17px; letter-spacing: -.02em; border-radius: 999px; border: 1px solid var(--borda); }
  .m-n { display: none; }
  .metodo-lista button[aria-selected="true"] { background: var(--papel); color: var(--tinta); border-color: transparent; }
  .bento { grid-template-columns: 1fr 1fr; }
  .s-bio { grid-column: 1 / -1; grid-row: auto; }
  .s-dez { grid-column: 1; grid-row: auto; }
  .s-tres { grid-column: 1; grid-row: auto; }
  .s-circ { grid-column: 2; grid-row: 2 / 4; }
  .fim-card { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body.home { --moldura: 8px; }
  .abre { padding-top: 92px; }
  body.home { --hero-texto: 330px; }
  .abre-img { top: 84px; height: auto; width: 190%; }
  .trilho { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); }
  .poster { flex: none; width: 68vw; scroll-snap-align: start; }
  .fim-canais { grid-template-columns: 1fr; }
  .metodo-painel { grid-template-columns: 1fr; }
  .mp-vis { min-height: 180px; order: -1; }
}

.fim-titulo { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .abre-cena { height: auto; }
  .abre-fixo { position: static; height: auto; }
  .abre { min-height: calc(100svh - var(--moldura) * 2); }
}

/* ---------- movimento: os blocos entram suavemente quando chegam à tela ---------- */
.rev { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--curva), transform 900ms var(--curva); transition-delay: var(--atraso, 0ms); }
.rev-in { opacity: 1; transform: none; } /* uma classe só, para o hover dos cartões continuar valendo */
/* depois de entrar, o cartão volta a responder rápido ao hover */
.rev-fim { transition: transform var(--lento) var(--curva); transition-delay: 0ms; }
/* entrada do texto da abertura */
.abre-base > * { animation: entrar 1100ms var(--curva) both; }
.abre-base > *:nth-child(2) { animation-delay: 140ms; }
@keyframes entrar { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; } }

/* =========================================================================
   Identidade clara (v4, 02/10/2026): a mesma do hero. Fundo de estúdio claro,
   vidro fosco com aro branco, cromo nos detalhes e a pasta como motivo.
   Referências: o cartão-pasta do hero, menu de vidro da Apple e pílulas foscas
   numeradas. Esta camada sobrescreve as cores escuras/azuis acima.
   ========================================================================= */
/* ds-allow-hardcode: brancos, pretos e cinzas em alfa são luz, sombra e vidro */
body.home {
  --fundo: #F4F4F1; /* 28/10: o mesmo off-white das páginas de case (era #E7E4E0) */ --texto: var(--tinta); --texto-2: #66635E; /* 07/10: era #77746F (3,67:1, reprovava AA); 4,72:1 sobre o fundo */ --linha: rgba(14, 14, 14, .10); --borda: rgba(14, 14, 14, .10);
  /* o "azul" vira grafite e prata: as vinhetas e degradês herdam o tom novo */
  --azul-fundo: #2E2D2B; --azul: #5F5C57; --azul-luz: #A8A49E; --gelo: #FFFFFF; --sinal: #6B6862;
  --vidro: linear-gradient(135deg, rgba(255, 255, 255, .64) 0%, rgba(255, 255, 255, .30) 100%);
  --vidro-aro: rgba(255, 255, 255, .85);
  --vidro-sombra: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35), 0 24px 50px rgba(48, 44, 38, .10);
  --vidro-blur: blur(24px) saturate(1.3);
  --menu-txt: rgba(14, 14, 14, .78); --menu-aro: rgba(255, 255, 255, .7);
  color-scheme: light;
  background: var(--fundo);
}
.defs-cromo { position: absolute; width: 0; height: 0; overflow: hidden; }

/* luz de estúdio: manchas escuras e desfocadas no fundo, para o vidro ter o que desfocar */
.brilho { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.brilho::before, .brilho::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); }
.brilho::before { width: 40vw; height: 40vw; left: -10vw; top: 38vh; background: radial-gradient(circle, rgba(46, 45, 43, .38), transparent 66%); }
.brilho::after { width: 34vw; height: 34vw; right: -8vw; top: 8vh; background: radial-gradient(circle, rgba(95, 92, 87, .30), transparent 66%); }

/* marca: símbolo cromado */
.home .topo-id { mix-blend-mode: normal; color: var(--tinta); }
.home .simbolo path { fill: currentColor; } /* símbolo oficial em cor sólida, sem cromo (05/10/2026) */

/* vidro claro: a unidade de superfície da página */
.b-preto { background: var(--vidro); border: 1px solid var(--vidro-aro); -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur); box-shadow: var(--vidro-sombra); color: var(--tinta); }
.b-gelo { background: rgba(255, 255, 255, .78); border: 1px solid var(--vidro-aro); box-shadow: var(--vidro-sombra); color: var(--tinta); }
.b-degrade { color: var(--papel); }

/* seta: círculo de vidro com a seta em cromo */
.seta { width: 40px; height: 40px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(0, 0, 0, .10); }
.seta svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)); }
.seta svg path { stroke: url(#cromo); stroke-width: 2.6; }
.caso:hover .seta, .poster:hover .seta { background: #fff; color: inherit; }

/* tags: cápsulas de vidro, totalmente arredondadas (pílula), como o menu */
.tag { border-radius: 999px; padding: 0 13px; color: var(--tinta); background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff; }

/* ---------- cases: a pasta. A tela do projeto fica atrás e sai pela boca da pasta;
   a aba e a frente são de vidro fosco e desfocam a tela por trás ---------- */
.caso.pasta { background: none; overflow: visible; color: var(--tinta); min-height: clamp(460px, 46vw, 580px); }
.caso.pasta:hover { transform: none; }
.caso.pasta::after { content: none; }
.pasta .caso-img { position: absolute; inset: auto; left: 7%; right: 7%; bottom: 50%; height: auto; aspect-ratio: 1800 / 1020; border-radius: 14px; overflow: hidden; -webkit-mask-image: none; mask-image: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .14); transition: transform var(--lento) var(--curva); }
.pasta:hover .caso-img { transform: translateY(-16px); }
.pasta:hover .caso-img img { transform: none; }
.pasta .caso-img img { object-position: center; }
/* a pasta é UMA peça de vidro: aba e corpo no mesmo elemento, recortado no formato da pasta
   (clip-path calculado em px pelo site.js, que também desenha o aro contínuo em SVG).
   --aba é a altura da aba. Sem JS, vira um cartão arredondado comum. */
.pasta { --aba: 42px; }
.pasta-frente {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: calc(66% + var(--aba));
  background: var(--vidro); -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur);
  border-radius: 18px 24px 24px 24px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--pad);
}
.pasta-rotulo { position: absolute; top: 0; left: 0; height: var(--aba); display: flex; align-items: center; padding: 0 20px; font: 500 13px/1 var(--sans); color: color-mix(in srgb, var(--tinta) 66%, transparent); }
.pasta-aro { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pasta-aro path { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2; }
.pasta-frente .seta { position: absolute; top: calc(var(--aba) + 18px); right: 18px; }
.pasta .caso-pe { position: static; }
.pasta .caso-desc { color: color-mix(in srgb, var(--tinta) 62%, transparent); }


/* ---------- o que eu entrego: vinhetas em grafite e prata ---------- */
.ent-vis::before { background: radial-gradient(90% 100% at 50% 120%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .25) 55%, transparent 100%); opacity: 1; }
.ev-1 .ev-marca { color: var(--tinta); }
.ev-1 .s1 { border: 1px solid rgba(14, 14, 14, .15); }
.ev-2 .ev-dia { color: var(--texto-2); } .ev-2 .d3 { color: var(--tinta); }
.ev-2 .ev-trilha { background: linear-gradient(90deg, rgba(14, 14, 14, .08), #2a2a2a); }
.ev-2 .ev-ponto { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%238a8a8a'/%3E%3Cstop offset='1' stop-color='%23222'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='6' cy='6' r='6' fill='url(%23g)'/%3E%3C/svg%3E"); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.ev-2 .ev-tag { background: var(--tinta); color: var(--papel); }
.ev-3 .ev-dev { border-color: rgba(14, 14, 14, .22); background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2)); }
.ev-4 .ev-btn { border-color: rgba(14, 14, 14, .18); color: var(--tinta); }
.ev-4 .on { background: var(--tinta); color: var(--papel); box-shadow: 0 0 0 6px rgba(14, 14, 14, .06), 0 10px 24px rgba(0, 0, 0, .18); }
.ev-4 .ev-cursor { border-left-color: var(--tinta); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.ev-5 .ev-horizonte { box-shadow: 0 0 22px 4px rgba(255, 255, 255, .85), 0 -26px 60px 16px rgba(255, 255, 255, .22); }

/* ---------- processo ---------- */
.metodo-lista button { color: rgba(14, 14, 14, .30); }
.metodo-lista button:hover { color: rgba(14, 14, 14, .62); }
.metodo-lista button[aria-selected="true"] { color: var(--tinta); }
.mp-txt p { color: color-mix(in srgb, var(--tinta) 66%, transparent); }
.mp-recebe span { color: var(--texto-2); }
.mp-recebe b { color: var(--tinta); }
.pv-1 i:nth-child(1) { box-shadow: 0 0 40px 8px rgba(255, 255, 255, .55); }
.pv-2 i:nth-child(2) { box-shadow: 0 0 50px rgba(255, 255, 255, .30); }
.pv-3 i:nth-child(2) { box-shadow: 0 0 24px 2px rgba(255, 255, 255, .55); }
.pv-4 i:nth-child(1) { box-shadow: 0 0 22px 4px rgba(255, 255, 255, .85), 0 -34px 80px 22px rgba(255, 255, 255, .20); }

/* ---------- sobre: esferas perolizadas no lugar dos anéis de luz ---------- */
.s-bio p { color: color-mix(in srgb, var(--tinta) 80%, transparent); }
.aro { background: radial-gradient(circle at 50% 28%, #fdfdfd 0%, #d6d2cc 58%, #9c9892 100%); box-shadow: inset 0 0 22px rgba(255, 255, 255, .9), 0 14px 30px rgba(0, 0, 0, .12); }

/* ---------- fim: painel de vidro escuro, como o menu da referência ---------- */
.fim-painel { color: var(--papel); border: 1px solid rgba(255, 255, 255, .5); }
.fim-titulo em { color: rgba(255, 255, 255, .55); }
.horizonte { box-shadow: 0 0 22px 4px rgba(255, 255, 255, .85), 0 -40px 90px 26px rgba(255, 255, 255, .18); }
.fim-marca .simbolo { color: var(--tinta); }

/* ---------- fim: o contato é o último bloco e ocupa a largura inteira da tela (a altura
   é a do conteúdo), com o rodapé dentro dele. Só os cantos de cima são arredondados. ---------- */
.fim { padding: var(--sec) 0 0; }
.fim-painel {
  border: 0; border-radius: 28px 28px 0 0; padding: clamp(150px, 20vw, 250px) var(--margem) 28px;
  background: radial-gradient(70% 46% at 50% 0%, var(--azul) 0%, var(--azul-fundo) 48%, #000 100%); /* ds-allow-hardcode: fim do degradê em preto */
}
.fim-base { margin-top: clamp(28px, 4vw, 48px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .55); }
.fim .fim-marca .simbolo { color: var(--papel); }
.fim .simbolo path { fill: var(--papel); }
.fim .voltar-topo { border-color: rgba(255, 255, 255, .22); color: var(--papel); }
.fim .voltar-topo:hover { background: var(--papel); color: var(--tinta); }
@media (max-width: 600px) { .fim-painel { border-radius: 20px 20px 0 0; } }

/* =========================================================================
   Polimento premium (05/10/2026). Hierarquia, composição e textura.
   ========================================================================= */
/* 1. Títulos de seção: a frase principal manda; a continuação cinza vira linha de apoio,
   menor e com medida curta, em vez de disputar com o título no mesmo corpo. */
.titulo-sec em, .fim-titulo em {
  margin-top: 14px; max-width: 46ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; letter-spacing: -.005em;
  text-wrap: pretty;
}
.titulo-sec em.quebras br { display: none; }
.titulo-sec em.quebras { text-wrap: pretty; }
.fim-titulo em { color: rgba(255, 255, 255, .6); }

/* 2. Pastas dos cases: o print entra mais fundo no vidro (como o símbolo atrás do cartão do hero),
   a pasta fica mais baixa e o corpo deixa de ser vidro vazio. */
.caso.pasta { min-height: clamp(430px, 41vw, 530px); }
.pasta .caso-img { left: 5%; right: 5%; bottom: 36%; border-radius: 12px; }
.pasta-frente { height: calc(58% + var(--aba)); }
.pasta:hover .caso-img { transform: translateY(-22px); }

/* 3. Hero: sem o título, o texto no canto direito ficou órfão. Agora é uma legenda centrada
   sob o cartão, no mesmo eixo da composição da imagem. */
.abre-base { grid-template-columns: 1fr; gap: 0; justify-items: center; text-align: center; }
.abre-lado { display: grid; justify-items: center; }
.abre-p { max-width: 44ch; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.5; margin-bottom: 22px; text-wrap: balance; color: color-mix(in srgb, var(--tinta) 76%, transparent); }
.abre-acoes { justify-content: center; }
@media (max-width: 900px) { .abre-base { gap: 0; } }

/* 4. Grão de filme sobre o estúdio: a textura fina que o render do hero tem, agora na página inteira.
   Camada fixa, sem interação, bem discreta. */
/* ds-allow-hardcode: ruído em preto e branco */
body.home::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
/* com a legenda centrada o bloco de texto é mais baixo: menos altura reservada no celular */
@media (max-width: 900px) { body.home { --hero-texto: 250px; } }
@media (max-width: 600px) { body.home { --hero-texto: 240px; } }

/* =========================================================================
   Vidro premium (05/10/2026). O mesmo material em tudo: aro de luz que varia ao redor
   (claro em cima à esquerda, apagado embaixo à direita), lavagem de luz no topo, reflexo
   especular diagonal, borda de espessura embaixo e sombra em duas camadas (contato + ambiente).
   ========================================================================= */
/* ds-allow-hardcode: brancos e pretos em alfa são luz, sombra e espessura do vidro */
body.home {
  --vidro: linear-gradient(160deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .30) 46%, rgba(255, 255, 255, .42) 100%);
  --vidro-aro: transparent; /* o aro passa a ser desenhado em degradê pelo ::before */
  --vidro-aro-grad: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .55) 28%, rgba(255, 255, 255, .18) 55%, rgba(255, 255, 255, .42) 78%, rgba(255, 255, 255, .95) 100%);
  --vidro-sombra:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .55),
    inset 0 28px 56px -28px rgba(255, 255, 255, .70),
    inset 0 -20px 40px -30px rgba(60, 56, 50, .10),
    0 1px 0 rgba(255, 255, 255, .55),
    0 2px 4px rgba(48, 44, 38, .05),
    0 18px 40px -14px rgba(48, 44, 38, .20),
    0 48px 90px -36px rgba(48, 44, 38, .16);
  --vidro-blur: blur(30px) saturate(1.55) brightness(1.02);
  --vidro-brilho: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .34) 46%, rgba(255, 255, 255, .06) 54%, transparent 64%);
}
/* aro em degradê: anel de 1px recortado por máscara, por cima do conteúdo e sem interação */
.b-preto, .b-gelo, .tag, .fim-card.vidro, .abre .botao-luz { position: relative; } /* a frente da pasta e a seta dentro dela já são absolutas */
.seta:not(.pasta-frente *) { position: relative; }
.b-preto::before, .b-gelo::before, .seta::before, .tag::before, .fim-card.vidro::before, .abre .botao-luz::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--vidro-aro-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
/* reflexo especular: faixa de luz diagonal que desliza um pouco no hover */
.b-preto::after, .pasta-frente::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: var(--vidro-brilho); background-size: 200% 100%; background-position: 100% 0; opacity: .9;
  transition: background-position 1200ms var(--curva);
}
.b-preto:hover::after, .pasta:hover .pasta-frente::after { background-position: 0% 0; }
@media (prefers-reduced-motion: reduce) { .b-preto::after, .pasta-frente::after { transition: none; } }

/* cartões */
.b-preto { border-color: transparent; }
.b-gelo { background: linear-gradient(160deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .74) 100%); border-color: transparent; box-shadow: var(--vidro-sombra); -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur); }
.metodo-painel.b-preto { overflow: hidden; }

/* pasta: o aro contínuo (SVG) ganha degradê, e o vidro ganha espessura e lavagem de luz */
/* vidro da pasta 30% menos transparente que o --vidro padrão (pedido de 06/10) */
.pasta-frente { background: linear-gradient(160deg, rgba(255, 255, 255, .76) 0%, rgba(255, 255, 255, .51) 46%, rgba(255, 255, 255, .59) 100%); }
.pasta-frente { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .55), inset 0 30px 60px -30px rgba(255, 255, 255, .75), inset 0 -24px 48px -36px rgba(60, 56, 50, .12); }
.pasta-aro path { stroke: url(#aro-vidro); stroke-width: 1.5; }
.pasta { filter: drop-shadow(0 2px 3px rgba(48, 44, 38, .06)) drop-shadow(0 24px 40px rgba(48, 44, 38, .14)); }

/* seta: lente de vidro com a seta cromada */
.seta { background: linear-gradient(160deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .40)); border-color: transparent; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .5), inset 0 10px 18px -8px rgba(255, 255, 255, .9), 0 2px 4px rgba(48, 44, 38, .06), 0 10px 22px -8px rgba(48, 44, 38, .22); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.seta svg { position: relative; z-index: 1; }

/* tags */
.tag { background: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .30)); border-color: transparent; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(48, 44, 38, .05), 0 6px 14px -6px rgba(48, 44, 38, .16); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }

/* botão do hero */
.abre .botao-luz { border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .45), inset 0 12px 20px -10px rgba(255, 255, 255, .8), 0 2px 4px rgba(48, 44, 38, .05), 0 14px 30px -10px rgba(48, 44, 38, .22); -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur); }
.abre .botao-luz span { position: relative; z-index: 1; }

/* vidro escuro do contato: mesmo material, luz mais contida */
.fim-card.vidro {
  background: linear-gradient(160deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .07) 100%); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(255, 255, 255, .10), inset 0 28px 56px -28px rgba(255, 255, 255, .14), 0 24px 60px -20px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
}
.fim-card.vidro::before { background: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .18) 30%, rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .28) 100%); }
.fim-card .canal { background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.fim-card .canal:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08)); border-color: rgba(255, 255, 255, .3); }

@media (prefers-reduced-transparency: reduce) {
  .b-preto::before, .b-gelo::before, .seta::before, .tag::before, .fim-card.vidro::before, .abre .botao-luz::before,
  .b-preto::after, .pasta-frente::after { content: none; }
  .b-preto, .b-gelo, .pasta-frente, .seta, .tag, .abre .botao-luz { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .92); border: 1px solid rgba(14, 14, 14, .12); }
}

/* Direção de arte como bloco na cor clara do hero (pedido de 06/10) */
#direcao-de-arte {
  margin: var(--sec) 0 0; padding: clamp(56px, 7vw, 104px) var(--margem);
  background: #F6F4F1; /* faixa de ponta a ponta na horizontal */
}

/* Fundo liso: sem manchas (pedido de 06/10) */
.brilho { display: none; }
body.home { background: var(--fundo); } /* sem o degradê fixo: uma cor só */

/* ---------- Direção de arte: belt 3D (08/10/2026). Referência: o vídeo "Headset Index", de
   ROYJAD, visto em godly.design/posts. Os cartazes ficam presos a um anel (um cilindro de eixo
   vertical) e a rolagem gira o anel com uma mola. A seção fica fixa na tela (sticky) enquanto o
   anel dá a volta; depois a página segue. Os números vêm do painel do próprio vídeo e moram no
   site.js: raio 400px, perspectiva 1600px, cartão 420px, vão 36px, fade em 6 cartões, mola de
   2,4 Hz com amortecimento crítico e 160px de rolagem por cartão.
   Sem JS, ou com "reduzir movimento", os cartazes ficam numa grade parada (regras logo abaixo). ---------- */
.sec-trilho .trilho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--vao); }
.sec-trilho .poster { overflow: visible; border-radius: 0; color: var(--tinta); }
.sec-trilho .poster:hover { transform: none; }
.sec-trilho .poster-img { position: relative; display: block; overflow: hidden; border-radius: 22px; background: var(--papel-2); }
.sec-trilho .poster-img img, .sec-trilho .poster:hover .poster-img img { display: block; width: 100%; height: auto; transform: none; transition: none; }
.sec-trilho .poster .seta { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; }
.sec-trilho .poster .seta svg { width: 15px; height: 15px; }
/* legenda centrada sob o cartaz: nome + a peça numa pílula, como na referência */
.poster-pe { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 16px; white-space: nowrap; }
.poster-nome { font: 500 15px/1.2 var(--display); letter-spacing: -.015em; color: var(--tinta); }
.poster-tag { padding: 5px 9px; border-radius: 999px; font: 500 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); background: rgba(14, 14, 14, .055); }
@media (max-width: 900px) { .sec-trilho .trilho { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sec-trilho .trilho { display: flex; align-items: flex-start; } }

/* belt ligado: as classes .tem-belt e .belt são postas pelo site.js */
#direcao-de-arte.tem-belt, #direcao-de-arte.tem-leque { height: calc(100svh + var(--belt-curso, 800px)); padding-block: 0; } /* com o id, para vencer o respiro do bloco */
.tem-belt .belt-pino {
  position: sticky; top: 0; height: 100svh; box-sizing: border-box; display: flex; flex-direction: column;
  margin-inline: calc(var(--margem) * -1); padding: clamp(84px, 13vh, 128px) var(--margem) clamp(20px, 5vh, 56px);
  overflow: clip; /* corta o anel na borda da tela (no celular ele é mais largo que ela) */
}
.tem-belt .sec-cab { margin-bottom: clamp(16px, 3vh, 40px); }
.sec-trilho .trilho.belt {
  display: block; position: relative; flex: 1; min-height: 0; margin: 0; padding: 0; overflow: visible;
  perspective: var(--belt-persp, 1600px); cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.sec-trilho .trilho.belt.arrastando { cursor: grabbing; }
/* cada cartaz parte do centro do palco; o site.js escreve largura, transform, opacidade e ordem */
.sec-trilho .belt .poster { position: absolute; left: 50%; top: 50%; flex: none; transition: none; will-change: transform, opacity; }
.sec-trilho .belt .poster-img { height: var(--belt-h, 328px); }

/* acabamento do belt: o site.js informa, por cartaz, --frente (1 de frente, 0 de lado ou de costas),
   --foco (legenda e seta), --penumbra (queda de luz) e --luz (posição do reflexo, em %) */
.sec-trilho .belt .poster-img {
  border-radius: 24px;
  box-shadow: 0 2px 5px rgba(48, 44, 38, calc(.10 * var(--frente, 1))), 0 46px 70px -34px rgba(48, 44, 38, calc(.40 * var(--frente, 1)));
}
/* aro de vidro: fio de luz de 1px na borda da imagem */
.sec-trilho .belt .poster-img::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .14) 28%, rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .38) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
/* reflexo que cruza o vidro quando o cartaz gira, por cima da penumbra */
.sec-trilho .belt .poster-img::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, .22) 48.5%, rgba(255, 255, 255, .06) 52%, transparent 57%) calc(var(--luz, 0) * 1%) 0 / 300% 100% no-repeat,
    linear-gradient(rgba(14, 12, 10, var(--penumbra, 0)), rgba(14, 12, 10, var(--penumbra, 0)));
}
.sec-trilho .belt .poster .seta { z-index: 3; opacity: var(--foco, 1); }
.sec-trilho .belt .poster-pe { opacity: var(--foco, 1); }
@media (prefers-reduced-transparency: reduce) { .sec-trilho .belt .poster-img::before, .sec-trilho .belt .poster-img::after { content: none; } }
.sec-trilho .belt .poster-img img, .sec-trilho .belt .poster:hover .poster-img img { height: 100%; object-fit: cover; object-position: center; }

/* ---------- Direção de arte: leque de cartões (10/10/2026; o belt 3D acima ficou desligado, sem
   nenhuma seção que o use). Referência: o vídeo
   "Cards 07", de Rico (Instagram rico.supply, de onde saiu o pin do Pinterest). A palavra fica no
   centro; os cartazes começam num maço fechado sobre ela, presos por um canto ao centro da tela,
   abrem em leque até formar um cata-vento completo, giram e fecham de novo. Aqui a linha do
   tempo do vídeo (8s) é comandada pela rolagem, com a seção fixa na tela; os ângulos moram no
   site.js. As classes .tem-leque e .leque são postas por ele. ---------- */
.tem-leque .belt-pino { position: sticky; top: 0; height: 100svh; margin-inline: calc(var(--margem) * -1); overflow: clip; }
/* o título vira a palavra do meio; o subtítulo desce para o pé, como os rótulos pequenos do vídeo */
.tem-leque .sec-cab { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; pointer-events: none; }
.tem-leque .titulo-sec { font: 500 min(6.8vh, 9vw)/1 var(--display); letter-spacing: -.035em; text-align: center; white-space: nowrap; }
.tem-leque .titulo-sec em { position: absolute; left: var(--margem); right: var(--margem); bottom: clamp(18px, 4vh, 40px); max-width: none; font: 400 13px/1.4 var(--sans); letter-spacing: 0; white-space: normal; }
.sec-trilho .trilho.leque { position: absolute; inset: 0; display: block; margin: 0; padding: 0; overflow: visible; }
/* cada cartaz nasce com o canto de cima à esquerda no centro da tela e gira em torno desse canto */
.sec-trilho .leque .poster { position: absolute; left: 50%; top: 50%; width: var(--leque-l); flex: none; transform-origin: 0 0; transition: none; will-change: transform; }
.sec-trilho .leque .poster-img { height: var(--leque-a); border-radius: clamp(4px, .9vh, 9px); box-shadow: 0 1px 2px rgba(20, 16, 12, .16), 0 14px 34px -12px rgba(20, 16, 12, .42); }
.sec-trilho .leque .poster-img img, .sec-trilho .leque .poster:hover .poster-img img { height: 100%; object-fit: cover; }
/* cartaz vertical: entra deitado, para todas as lâminas do leque terem o mesmo formato */
.sec-trilho .leque .poster.deitado .poster-img img, .sec-trilho .leque .poster.deitado:hover .poster-img img { position: absolute; left: 50%; top: 50%; width: var(--leque-a); height: var(--leque-l); transform: translate(-50%, -50%) rotate(-90deg); }
.sec-trilho .leque .poster-pe, .sec-trilho .leque .seta { display: none; }


/* ---------- Projetos (22/10/2026): Cases e Direção de arte num bloco só. Cada projeto é um cartão de
   imagem inteira (cantos de 28px), com a categoria numa tag de vidro em cima e, embaixo, um painel de
   vidro com nome, linha de apoio e o botão. Dois por linha no desktop, um no celular. ---------- */
.projetos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vao); }
.projeto { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 28px; background: var(--papel-2); color: var(--tinta); }
.projeto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--devagar) var(--curva); }
.projeto-tag { position: absolute; z-index: 2; top: 16px; left: 16px; }
.projeto-pe {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 20px; border-radius: 20px;
  background: var(--vidro); -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .45), 0 10px 24px -8px rgba(0, 0, 0, .28);
}
.projeto-txt { display: grid; gap: 4px; min-width: 0; }
.projeto-nome { font: 400 22px/1.15 var(--display); letter-spacing: -.025em; color: var(--tinta); }
.projeto-sub { font-size: 13.5px; line-height: 1.4; color: color-mix(in srgb, var(--tinta) 66%, transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.projeto-cta { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; background: #fff; font: 500 13px/1 var(--sans); color: var(--tinta); box-shadow: 0 2px 6px rgba(48, 44, 38, .12); transition: background var(--medio) var(--curva), color var(--medio) var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .projeto:hover img { transform: scale(1.04); }
  .projeto:hover .projeto-cta { background: var(--tinta); color: var(--papel); }
}
.projeto:active .projeto-cta { background: var(--tinta); color: var(--papel); }
@media (max-width: 700px) {
  .projetos { grid-template-columns: 1fr; }
  .projeto { aspect-ratio: 4 / 5; border-radius: 22px; }
  .projeto-nome { font-size: 19px; }
}

/* Projetos um pouco menores (22/10/2026): de volta a dois por linha, com o cartão mais baixo
   (3:2 no lugar de 5:4, cerca de 17% menos altura) e a legenda um pouco mais enxuta. */
.projeto { aspect-ratio: 3 / 2; border-radius: 24px; }
.projeto-pe { padding: 14px 14px 14px 18px; }
.projeto-nome { font-size: 20px; }
.projeto-cta { height: 36px; padding: 0 16px; }

/* Projetos minimalistas (22/10/2026): sem descrição e sem a tag de cima. Na legenda fica só o nome,
   duas ou três tags pequenas e a seta. */
.projeto-pe { padding: 12px 12px 12px 18px; }
.projeto-txt { gap: 8px; }
.projeto-nome { font-size: 19px; }
.projeto-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.projeto-tags > span { padding: 4px 9px; border-radius: 999px; background: rgba(14, 14, 14, .06); font: 400 11.5px/1.2 var(--sans); color: color-mix(in srgb, var(--tinta) 72%, transparent); white-space: nowrap; }
.projeto-cta { width: 38px; height: 38px; padding: 0; justify-content: center; }

/* Tags que mostram o trabalho (22/10/2026): papel, entregas e status, tirados das páginas de cada projeto.
   O status ("No ar", "Em uso") ganha um ponto verde, como um indicador de produto vivo. */
.projeto-tags { row-gap: 5px; }
.projeto-tags > .projeto-status { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .7); color: var(--tinta); }
.projeto-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2F9E5B; box-shadow: 0 0 0 3px rgba(47, 158, 91, .18); } /* ds-allow-hardcode: verde de status */

/* ---------- OPÇÃO DE TESTE (22/10/2026): bento vivo, com Processo e Sobre juntos. Os blocos ficam
   numa grade de 4 × 2; a cada poucos segundos o site.js muda a grade: os blocos deslizam para a
   esquerda e mudam de tamanho, quem sai vai pela esquerda e quem entra vem pela direita. Frases são
   digitadas e números contam quando o bloco entra. Material: o mesmo vidro, degradê e cromo do site. ---------- */
.vivo { --vivo-troca: 1000ms; position: relative; height: clamp(440px, 40vw, 540px); margin-inline: calc(var(--margem) * -1); overflow: clip; }
.vivo-t { position: absolute; left: 0; top: 0; border-radius: 20px; overflow: hidden; visibility: hidden; opacity: 0;
  transition: transform var(--vivo-troca) var(--curva), width var(--vivo-troca) var(--curva), height var(--vivo-troca) var(--curva), opacity 600ms var(--curva); will-change: transform; }
.vivo-t.sem-troca { transition: none; }
.vivo.pronto .vivo-t.visivel { visibility: visible; opacity: 1; }
.vivo-img { background: var(--papel-2); box-shadow: var(--vidro-sombra); }
.vivo-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* etapas: o desenho de luz de cada etapa ocupa o bloco, com o texto em claro por cima */
.vivo-etapa { color: var(--papel); background: #000; } /* ds-allow-hardcode: fundo das etapas */
.vivo-etapa .mp-vis { position: absolute; inset: 0; min-height: 0; border-radius: 0; }
.vivo-etapa-txt { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; display: grid; gap: 6px; }
.vivo-n { font: 400 12px/1 var(--sans); color: rgba(255, 255, 255, .55); }
.vivo-etapa-txt b { font: 400 clamp(24px, 2.4vw, 34px)/1 var(--display); letter-spacing: -.04em; }
.vivo-etapa-txt > span:last-child { max-width: 30ch; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
/* frases digitadas */
.vivo-frase { padding: var(--pad); display: flex; align-items: flex-end; }
.vivo-frase p { margin: 0; font: 400 clamp(19px, 1.8vw, 26px)/1.2 var(--display); letter-spacing: -.03em; }
.b-preto.vivo-frase p { color: var(--tinta); }
.b-degrade.vivo-frase p { color: var(--papel); }
.vivo-frase p.digitando::after { content: ""; display: inline-block; width: 2px; height: .95em; margin-left: 3px; vertical-align: -.12em; background: currentColor; animation: piscar 900ms steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
/* números */
.vivo-num { padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.vivo-num b { position: relative; z-index: 1; font: 400 clamp(44px, 4.6vw, 64px)/.9 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.vivo-num b small { font: 400 .4em/1 var(--display); letter-spacing: -.02em; }
.vivo-num > span:not(.aro) { position: relative; z-index: 1; max-width: 26ch; font-size: 13.5px; line-height: 1.4; color: color-mix(in srgb, currentColor 76%, transparent); }
.vivo-circ .aro { width: 130%; top: -18%; }
.vivo-circ .aro-2 { top: 58%; }
/* sem animação (celular ou "reduzir movimento"): grade parada */
.vivo.vivo-parado { height: auto; margin-inline: 0; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vao); }
.vivo-parado .vivo-t { position: relative; visibility: visible; opacity: 1; transform: none !important; width: auto !important; height: 220px !important; transition: none; }
.vivo-parado .vivo-img, .vivo-parado .vivo-etapa { grid-column: 1 / -1; }
/* véu escuro no pé das etapas, para o texto claro não sumir sobre as partes claras do desenho */
.vivo-etapa::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .45) 32%, transparent 60%); } /* ds-allow-hardcode: véu de legibilidade */

/* ---------- Bento vivo premium (22/10/2026): mais perto da referência. Uma moldura escura (o mesmo
   degradê do rodapé) com barra de topo (símbolo, as quatro etapas acendendo conforme a história avança,
   contador) e barra de pé (título, uma frase e o convite). As etapas ganharam imagens próprias,
   geradas no material do site: vidro fosco e cromo líquido sobre cinza quente. ---------- */
#processo .vivo-moldura { border-radius: 28px; padding: 14px; background: radial-gradient(70% 46% at 50% 0%, var(--azul) 0%, var(--azul-fundo) 48%, #000 100%); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .45); } /* ds-allow-hardcode: fim do degradê em preto, igual ao rodapé */
.vivo-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 8px 16px; color: var(--papel); }
.vivo-marca { justify-self: start; display: grid; place-items: center; width: 52px; height: 32px; border-radius: 999px; background: var(--papel); color: var(--tinta); }
.vivo-marca .simbolo { width: 18px; height: 18px; }
.vivo-passos { display: flex; gap: 4px; margin: 0; padding: 4px; list-style: none; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.vivo-passos li { padding: 7px 14px; border-radius: 999px; font: 500 12.5px/1 var(--sans); color: rgba(255, 255, 255, .45); transition: background var(--medio) var(--curva), color var(--medio) var(--curva); }
.vivo-passos li.ativo { background: var(--papel); color: var(--tinta); }
.vivo-contador { justify-self: end; font: 400 12.5px/1 var(--sans); color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.vivo-contador b { font-weight: 500; color: var(--papel); }
#processo .vivo { margin-inline: 0; border-radius: 16px; height: clamp(440px, 38vw, 520px); }
#processo .vivo-t { border-radius: 16px; }
/* etapas: a imagem ocupa o bloco, a etapa numa pílula de vidro e a frase curta embaixo */
#processo .vivo-etapa { background: var(--papel-2); color: var(--tinta); }
#processo .vivo-etapa::after { content: none; }
.vivo-etapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vivo-pilula { position: absolute; z-index: 1; top: 14px; left: 14px; display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 999px; font: 500 12.5px/1 var(--sans); background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.vivo-pilula span { color: color-mix(in srgb, currentColor 50%, transparent); }
.vivo-legenda { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; margin: 0; font: 400 clamp(19px, 1.7vw, 24px)/1.15 var(--display); letter-spacing: -.03em; }
#processo .vivo-escura { background: #000; color: var(--papel); } /* ds-allow-hardcode: fundo da imagem escura */
.vivo-escura .vivo-pilula { background: rgba(255, 255, 255, .12); color: var(--papel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
/* blocos de texto e números, sem vidro (sobre o preto, o vidro viraria cinza) */
.vivo-papel { background: linear-gradient(160deg, #F6F4F1 0%, #ECE9E4 100%); color: var(--tinta); } /* ds-allow-hardcode: papel quente */
.vivo-grafite { background: linear-gradient(180deg, #0C0C0C 0%, #2E2D2B 60%, #5F5C57 130%); color: var(--papel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } /* ds-allow-hardcode: grafite */
.vivo-cromo { color: var(--tinta); background: linear-gradient(135deg, #F2F0EC 0%, #CFCBC5 38%, #FBFAF8 52%, #B9B4AD 76%, #E9E6E1 100%); } /* ds-allow-hardcode: cromo */
.vivo-cromo p { color: var(--tinta) !important; }
.vivo-frase { flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 18px; }
.vivo-seta { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tinta); color: var(--papel); transition: transform var(--medio) var(--curva); }
.vivo-cromo .vivo-seta { position: absolute; top: 16px; right: 16px; }
@media (hover: hover) and (pointer: fine) { .vivo-cromo:hover .vivo-seta, .vivo-cta:hover .vivo-seta { transform: rotate(45deg); } }
.vivo-circ .aro { opacity: .9; }
/* pé da moldura */
.vivo-pe { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 20px 8px 6px; color: var(--papel); }
.vivo-titulo { margin: 0; font: 400 clamp(26px, 2.6vw, 36px)/1 var(--display); letter-spacing: -.035em; }
.vivo-resumo { margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .6); }
.vivo-cta { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 18px; border-radius: 999px; background: var(--papel); color: var(--tinta); font: 500 13.5px/1 var(--sans); }
@media (max-width: 900px) { .vivo-pe { grid-template-columns: 1fr; gap: 14px; } .vivo-passos { display: none; } .vivo-topo { grid-template-columns: 1fr 1fr; } }
#processo .vivo-parado .vivo-t { height: 240px !important; }
#processo .vivo.vivo-parado { height: auto; overflow: visible; } /* no modo parado a grade cresce com os blocos (antes ficava presa na altura do modo animado e invadia o Contato) */

/* ---------- Contato (22/10/2026): o meio do painel escuro na linha da versão "Vamos dar forma?".
   Linha de cima com o assunto e uma frase; a chamada gigante com a seta verde, que é um link para o
   e-mail; embaixo, o convite, o endereço, "copiar e-mail" e as redes em texto. O verde é o único
   acento da página: aparece na seta, nos sublinhados e no estado de hover. ---------- */
.fim { --verde: #D4F59C; } /* ds-allow-hardcode: verde de acento do contato */
.fim-painel { padding-top: clamp(72px, 8vw, 112px); } /* sem a linha de luz (tirada em 22/10), o painel começa direto na linha de cima */
.fim-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.fim-sobre { font: 500 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.fim-frase { font-size: 14.5px; color: rgba(255, 255, 255, .62); }
.fim-chamada { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: clamp(48px, 6vw, 88px) 0 clamp(44px, 5.5vw, 80px); border-bottom: 1px solid rgba(255, 255, 255, .12); color: var(--papel); }
.fim-grande { margin: 0; max-width: 8ch; font: 400 clamp(64px, 9.4vw, 152px)/.9 var(--display); letter-spacing: -.055em; }
.fim-flecha { flex: none; width: clamp(80px, 9vw, 132px); height: auto; overflow: visible; margin-right: clamp(0px, 2vw, 32px); transition: transform var(--lento) var(--curva); }
.fim-flecha path { fill: none; stroke: var(--verde); stroke-width: 4; stroke-linecap: square; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--curva) 300ms; }
.fim-painel.rev-in .fim-flecha path, .fim-painel:not(.rev) .fim-flecha path { stroke-dashoffset: 0; } /* a seta se desenha quando o painel entra */
@media (hover: hover) and (pointer: fine) { .fim-chamada:hover .fim-flecha { transform: translate(10px, -10px); } }
.fim-contato { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: clamp(28px, 3.4vw, 44px); }
.fim-convite { margin: 0 0 18px; font-size: 16px; color: rgba(255, 255, 255, .62); }
.fim-linha-email { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 22px; }
.fim-endereco { font: 400 clamp(26px, 2.9vw, 40px)/1.1 var(--display); letter-spacing: -.035em; color: var(--papel); }
.fim-copiar-link, .fim-links a span { position: relative; }
.fim-copiar-link { padding: 4px 0; font: 400 14.5px/1 var(--sans); color: rgba(255, 255, 255, .75); }
.fim-copiar-link::after, .fim-links a span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform-origin: left; transition: transform var(--medio) var(--curva), background var(--medio); }
.fim-links a span::after { transform: scaleX(0); }
.fim-links { display: flex; gap: clamp(20px, 2.6vw, 36px); }
.fim-links a { display: inline-flex; align-items: center; gap: 5px; font: 400 17px/1 var(--display); letter-spacing: -.01em; color: var(--papel); transition: color var(--medio) var(--curva); }
.fim-links a svg { transition: transform var(--medio) var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .fim-links a:hover, .fim-copiar-link:hover, .fim-endereco:hover { color: var(--verde); }
  .fim-links a:hover span::after { transform: scaleX(1); }
  .fim-links a:hover svg { transform: translate(2px, -2px); }
}
.fim-copiar-link::after { background: var(--verde); }
@media (max-width: 760px) {
  .fim-topo { flex-direction: column; gap: 10px; }
  .fim-chamada { align-items: flex-end; }
  .fim-contato { flex-direction: column; align-items: flex-start; }
  .fim-links { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .fim-flecha path { stroke-dashoffset: 0; transition: none; } }

/* Contato com ícones (22/10/2026): copiar e-mail e redes viram botões redondos de 48px, com o nome
   como dica (title + aria-label). Em repouso, só o aro fino; no hover, enchem de verde. */
.fim-linha-email { align-items: center; gap: 14px; }
.fim-links { gap: 10px; }
.fim-icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--papel); border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); transition: background var(--medio) var(--curva), color var(--medio) var(--curva), border-color var(--medio) var(--curva), transform var(--medio) var(--curva); }
.fim-icone svg { width: 20px; height: 20px; }
.fim-linha-email .fim-icone { width: 40px; height: 40px; }
.fim-linha-email .fim-icone svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .fim-icone:hover { background: var(--verde); border-color: var(--verde); color: var(--tinta); transform: translateY(-2px); } }
.fim-icone:active { background: var(--verde); border-color: var(--verde); color: var(--tinta); }
.fim-icone:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

/* sem a linha do e-mail (tirada em 22/10): o convite e os ícones ficam alinhados pelo meio */
.fim-contato { align-items: center; }
.fim-convite { margin: 0; font-size: 17px; }
/* ícone no centro do círculo: vence a regra antiga dos links em texto (.fim-links a, inline-flex à esquerda) */
.fim-links .fim-icone { display: grid; place-items: center; gap: 0; padding: 0; }
/* sem a linha entre os ícones e o rodapé (tirada em 22/10) */
.fim .fim-base { border-top: 0; padding-top: 0; }

/* ---------- Acabamento final (22/10/2026). Do Processo para baixo: um processo só (o bento vivo, com o
   cabeçalho de seção igual aos outros), cada etapa com o seu entregável, as provas do processo dentro
   dele (auditoria, ferramentas, 3 dias) e o Sobre só com a bio e os números de carreira. ---------- */
#processo .vivo-moldura { margin-top: 0; }
/* legenda das etapas: a frase e o entregável */
#processo .vivo-legenda { display: grid; gap: 6px; }
#processo .vivo-legenda b { font: 400 clamp(19px, 1.7vw, 24px)/1.15 var(--display); letter-spacing: -.03em; }
#processo .vivo-legenda small { max-width: 34ch; font: 400 12.5px/1.4 var(--sans); color: color-mix(in srgb, currentColor 62%, transparent); }
#processo .vivo-escura .vivo-legenda small { color: rgba(255, 255, 255, .62); }
/* número com denominador (60/103) */
#processo .vivo-num b small { margin-left: 2px; font-size: .38em; letter-spacing: -.01em; opacity: .6; }
#processo .vivo-num > span:not(.aro):not(.vivo-rotulo) { max-width: 30ch; }
/* ferramentas */
.vivo-ferramentas { justify-content: space-between; }
.vivo-rotulo { font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--tinta) 55%, transparent); }
.vivo-ferramentas ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vivo-ferramentas li { padding: 8px 12px; border-radius: 999px; background: rgba(14, 14, 14, .06); font: 500 13px/1 var(--sans); color: var(--tinta); }
/* pé da moldura: frase + convite (o título agora fica no cabeçalho da seção) */
#processo .vivo-pe { grid-template-columns: 1fr auto; }
#processo .vivo-resumo { font-size: 14.5px; }
/* modo parado (tablet, celular, "reduzir movimento"): grade em pares, sem animação */
#processo .vivo.vivo-parado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: auto; overflow: visible; }
#processo .vivo-parado .vivo-t { position: relative; inset: auto; visibility: visible; opacity: 1; transform: none !important; width: auto !important; height: auto !important; min-height: 220px; transition: none; }
#processo .vivo-parado .vivo-img { grid-column: 1 / -1; aspect-ratio: 16 / 9; min-height: 0; }
#processo .vivo-parado .vivo-etapa { aspect-ratio: 4 / 5; min-height: 0; }
#processo .vivo-parado [data-id="H"] { order: 0; } #processo .vivo-parado [data-id="D1"] { order: 1; } #processo .vivo-parado [data-id="A"] { order: 2; }
#processo .vivo-parado [data-id="D2"] { order: 3; } #processo .vivo-parado [data-id="F"] { order: 4; } #processo .vivo-parado [data-id="D3"] { order: 5; }
#processo .vivo-parado [data-id="S3"] { order: 6; } #processo .vivo-parado [data-id="D4"] { order: 7; } #processo .vivo-parado [data-id="Q"] { order: 8; }
#processo .vivo-parado [data-id="T"] { order: 9; grid-column: 1 / -1; }
@media (max-width: 600px) {
  #processo .vivo.vivo-parado { grid-template-columns: 1fr; }
  #processo .vivo-parado .vivo-etapa { aspect-ratio: 4 / 3; }
  #processo .vivo-moldura { padding: 10px; border-radius: 22px; }
  #processo .vivo-pe { grid-template-columns: 1fr; }
}
/* Sobre: bio larga e os dois números de carreira em pé, lado a lado */
.s-dez { grid-row: 1 / 3; }
#sobre .bento { grid-template-rows: repeat(2, minmax(200px, auto)); }
@media (max-width: 900px) { .s-dez { grid-row: auto; } }
#processo .vivo-parado .vivo-etapa { grid-column: auto; }

.vivo-img img { object-position: center 72%; }

.vivo-img img { object-position: center 72%; }
/* Sobre: o 6+ em grafite (o degradê antigo terminava em branco atrás da legenda clara) e a bio maior */
#sobre .s-dez { background: linear-gradient(180deg, #0C0C0C 0%, #2E2D2B 62%, #5F5C57 130%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--vidro-sombra); } /* ds-allow-hardcode: grafite, igual ao Processo */
#sobre .s-dez::after { content: none; }
#sobre .s-bio p { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; }
/* modo parado: a legenda das etapas sai de cima da imagem e vai para baixo dela, sobre fundo liso */
#processo .vivo-parado .vivo-etapa { display: flex; flex-direction: column; aspect-ratio: auto; }
#processo .vivo-parado .vivo-etapa img { position: relative; inset: auto; aspect-ratio: 4 / 3; height: auto; }
#processo .vivo-parado .vivo-legenda { position: static; padding: 16px 18px 18px; }
#processo .vivo-parado .vivo-etapa:not(.vivo-escura) { background: linear-gradient(160deg, #F6F4F1 0%, #ECE9E4 100%); } /* ds-allow-hardcode: papel quente */

/* contato (28/10/2026): sem o topo ("Seu próximo projeto" e a linha); o título é o mesmo dos cases,
   mais comprido, então a letra desce um pouco e a linha cabe em duas */
#contato .fim-chamada { padding-top: 0; }
#contato .fim-grande { max-width: 13ch; font-size: clamp(52px, 7.4vw, 124px); line-height: 1.02; letter-spacing: 0; } /* 28/10: letras sem encostar umas nas outras */
@media (max-width: 600px) {
  #contato .fim-chamada { flex-direction: column; align-items: flex-start; gap: 20px; }
  #contato .fim-grande { max-width: none; font-size: clamp(38px, 11.6vw, 56px); }
  #contato .fim-flecha { width: 56px; height: 56px; align-self: flex-end; }
}

/* Sobre (28/10/2026): o segundo cartão fala do alcance sem número; a palavra entra no lugar do "4+",
   um pouco menor para caber inteira na largura do cartão */
#sobre .s-circ .s-palavra { font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -.03em; line-height: 1; }

/* ---------- Sobre (28/10/2026): manifesto + bio em duas colunas e a trajetória em dois passos
   (direção de arte → product design). Sem números de campanha: o passo "Antes" leva os 6+ anos. ---------- */
/* ds-allow-hardcode: brancos e pretos em alfa são a luz e a sombra do vidro; grafite igual ao do contato */
.sobre-topo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
#sobre .sobre-esq { margin: 0; }
.sobre-rot { margin: 0 0 18px; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.sobre-titulo { margin: 0; max-width: 14ch; font: 400 clamp(34px, 4.2vw, 60px)/1.04 var(--display); letter-spacing: -.03em; color: var(--tinta); }
.sobre-dir { padding-top: clamp(30px, 3vw, 36px); }
#sobre .sobre-bio { margin: 0 0 28px; max-width: 54ch; font: 400 clamp(17px, 1.4vw, 19px)/1.62 var(--sans); color: color-mix(in srgb, var(--tinta) 78%, transparent); }

.trajeto { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(14px, 2vw, 24px); }
.trajeto-passo { display: flex; flex-direction: column; gap: 10px; min-height: clamp(180px, 18vw, 240px); padding: clamp(24px, 2.6vw, 36px); border-radius: 24px; }
.trajeto-quando { font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.trajeto-passo b { margin-top: auto; font: 400 clamp(28px, 3vw, 44px)/1.05 var(--display); letter-spacing: -.025em; }
.trajeto-nota { font-size: 15px; line-height: 1.45; }
.trajeto-antes {
  color: var(--tinta);
  background: linear-gradient(135deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .38) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 24px 50px -22px rgba(48, 44, 38, .22);
}
.trajeto-antes .trajeto-quando, .trajeto-antes .trajeto-nota { color: var(--texto-2); }
.trajeto-hoje {
  color: var(--papel);
  background: radial-gradient(120% 90% at 50% 0%, #5F5C57 0%, #2E2D2B 48%, #0E0E0E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 24px 50px -22px rgba(14, 14, 14, .45);
}
.trajeto-hoje .trajeto-quando, .trajeto-hoje .trajeto-nota { color: rgba(255, 255, 255, .62); }
.trajeto-seta { display: grid; place-items: center; }
.trajeto-seta svg { width: clamp(40px, 5vw, 64px); height: 16px; overflow: visible; }
.trajeto-seta path { fill: none; stroke: var(--texto-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 860px) {
  .sobre-topo { grid-template-columns: 1fr; gap: 20px; }
  .sobre-dir { padding-top: 0; }
  .trajeto { grid-template-columns: 1fr; }
  .trajeto-seta svg { transform: rotate(90deg); }
  .trajeto-passo { min-height: 0; }
  .trajeto-passo b { margin-top: 14px; }
}
/* o sinal de mais entre os dois cartões: somar, não trocar */
.trajeto-mais svg { width: clamp(22px, 2.4vw, 30px); height: clamp(22px, 2.4vw, 30px); }
.trajeto-mais path { stroke-width: 1.2; }
@media (max-width: 860px) { .trajeto-mais svg { transform: none; } }
/* sem os rótulos: o cartão fica só com o nome e a linha de apoio, mais baixo */
.trajeto-passo { min-height: 0; justify-content: flex-end; padding-top: clamp(40px, 4.4vw, 64px); }
.trajeto-passo b { margin-top: 0; }

/* Sobre (28/10/2026): no hover o cartão sobe um pouco, a sombra afunda e o "+" gira */
.trajeto-passo { position: relative; isolation: isolate; overflow: hidden; transition: transform 500ms var(--mola, cubic-bezier(.16, 1, .3, 1)), box-shadow 500ms var(--curva); }
.trajeto-mais svg { transition: transform 600ms var(--mola, cubic-bezier(.16, 1, .3, 1)); }
@media (hover: hover) and (pointer: fine) {
  .trajeto-passo:hover { transform: translateY(-6px); }
  .trajeto-antes:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 34px 60px -24px rgba(48, 44, 38, .32); }
  .trajeto-hoje:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 34px 60px -24px rgba(14, 14, 14, .55); }
  .trajeto:hover .trajeto-mais svg { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .trajeto-passo, .trajeto-mais svg { transition: none; } .trajeto-passo:hover { transform: none; } }

/* ---------- Projetos (28/10/2026): diagramação editorial. A imagem aparece limpa, sem vidro por cima;
   nome, seta e tags ficam embaixo, numa linha só de leitura. No hover a foto aproxima dentro do quadro
   e a seta enche de tinta. ---------- */
/* ds-allow-hardcode: tinta em alfa nos aros das pílulas */
.projetos { row-gap: clamp(40px, 4.4vw, 64px); }
.projeto { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; display: flex; flex-direction: column; }
.projeto-img { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 24px; background: var(--papel-2, #E6E3DE); isolation: isolate; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 24px 48px -28px rgba(48, 44, 38, .35); }
.projeto-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.projeto-pe {
  position: static; inset: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 18px 4px 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.projeto-txt { gap: 10px; }
.projeto-nome { font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -.02em; }
.projeto-tags > span { background: none; border: 1px solid rgba(14, 14, 14, .14); padding: 4px 10px; color: color-mix(in srgb, var(--tinta) 72%, transparent); }
.projeto-tags > .projeto-status { background: rgba(47, 158, 91, .08); border-color: rgba(47, 158, 91, .22); color: var(--tinta); }
.projeto-cta { margin-top: 2px; background: transparent; border: 1px solid rgba(14, 14, 14, .16); box-shadow: none; transition: background var(--medio) var(--curva), color var(--medio) var(--curva), border-color var(--medio) var(--curva), transform var(--medio) var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .projeto:hover .projeto-img img { transform: scale(1.035); }
  .projeto:hover .projeto-cta { background: var(--tinta); border-color: var(--tinta); color: var(--papel); transform: rotate(45deg); }
}
.projeto:active .projeto-cta { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* Projetos (28/10/2026): a grade conta a frase da seção. "Products" abre com os dois produtos grandes,
   lado a lado; "Art direction" segue com as seis peças em três colunas, menores. */
/* ds-allow-hardcode: tinta em alfa no fio do rótulo */
.projetos { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--vao); row-gap: clamp(36px, 4vw, 56px); }
.projetos > .projeto { grid-column: span 3; }
.projetos > .projetos-rot ~ .projetos-rot ~ .projeto { grid-column: span 2; }
.projetos-rot {
  grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 0 0 calc(clamp(36px, 4vw, 56px) * -1 + 18px); padding-bottom: 14px; border-bottom: 1px solid rgba(14, 14, 14, .1);
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2);
}
.projetos-rot b { font-weight: 500; color: var(--texto-2); }
.projetos-rot ~ .projetos-rot { margin-top: clamp(16px, 2vw, 32px); }
.projetos-rot ~ .projetos-rot ~ .projeto .projeto-img { aspect-ratio: 4 / 3; border-radius: 20px; }
.projetos-rot ~ .projetos-rot ~ .projeto .projeto-nome { font-size: clamp(18px, 1.35vw, 20px); }
@media (max-width: 980px) {
  .projetos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projetos > .projeto, .projetos > .projetos-rot ~ .projetos-rot ~ .projeto { grid-column: span 1; }
}
@media (max-width: 640px) {
  .projetos { grid-template-columns: 1fr; }
}
/* nos cards menores, só as duas primeiras tags (cliente e tipo de trabalho), numa linha só */
.projetos-rot ~ .projetos-rot ~ .projeto .projeto-tags > span:nth-child(n + 3) { display: none; }
.projetos-rot ~ .projetos-rot ~ .projeto .projeto-tags { flex-wrap: nowrap; overflow: hidden; }