/* =========================================================
   Tokens
   ========================================================= */
:root {
  /* Esquema de phamilia.co: Nimbus Sans (≈ Helvetica) + Times New Roman + IBM Plex Mono */
  /* TESTE: Roc Grotesk na frente (kit no header.php); para voltar, tirar "roc-grotesk" */
  --font-sans: "roc-grotesk", "Nimbus Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* TESTE: Lavigne Display na frente (mesmo kit Adobe); para voltar, tirar "lavigne-display" */
  --font-serif: "lavigne-display", "Times New Roman", Times, "Liberation Serif", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Ênfase em serif dentro de texto sans (medido no navegador, com as
     duas fontes no mesmo corpo):
     - tamanho: a Times itálica tem o olho (altura do x) 15% menor que a
       Nimbus Sans; a 1.14em chega a ~98% sem inflar as maiúsculas
     - peso: a itálica tem ~17% menos tinta; um contorno fino na própria
       cor recupera metade disso sem virar negrito
     - espaçamento: no mesmo olho ela é ~3% mais larga; o tracking das
       ênfases (abaixo, por grupo) compensa */
  --serif-scale: 1.14em;
  --serif-stroke: 0.008em;

  --pad-x: 3vw;

  --ease-reveal: cubic-bezier(0.23, 1, 0.32, 1);   /* ≈ GSAP power4.out */
  --ease-reveal-soft: cubic-bezier(0.215, 0.61, 0.355, 1); /* ≈ power3.out */
}

@media (max-width: 767px) {
  :root {
    --pad-x: 16px;
  }
}

/* Transição suave entre páginas (réplica de igorbdm.com): a View
   Transitions API nativa, entre documentos — o navegador faz um
   crossfade da página antiga para a nova. Funciona hoje em Chrome/Edge
   (e Safari 18.2+); nos demais a navegação continua normal, sem efeito.
   Só com a preferência de movimento do sistema liberada. Precisa das
   páginas servidas pelo mesmo endereço (não funciona abrindo o arquivo
   direto, em file://). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
}

h1,
h2,
h3,
p {
  margin: 0;
  font: inherit;
}

/* =========================================================
   Hero — "Foco"
   Ao fundo, a imagem de cada case da Home, desfocada, em cinza e
   escurecida: o trabalho como o mercado o enxerga. Os cases
   trocam sozinhos — ver js/hero-focus.js.
   Texto: título na base, à esquerda, com o subtítulo logo abaixo.
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: var(--color-stage);
  isolation: isolate;
}

/* --- Imagens --- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s var(--ease-reveal-soft);
}

.hero__shot.is-active {
  opacity: 1;
}

/* Escurece só a base, onde fica o texto */
.hero__layer--blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
}

.hero__layer--blur .hero__shot {
  filter: blur(24px) grayscale(1) brightness(0.62) contrast(1.15);
}

/* --- TESTE: pixels (js/hero-focus.js) ---
   Canvas do tamanho da hero; o script só pinta os quadrados acesos,
   com a imagem nítida e em cor, no mesmo enquadramento do fundo */
.hero__pixels {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- Texto --- */
.hero__content {
  position: absolute;
  inset: calc(var(--frame-band) + 1.6vw) calc(var(--frame-side) + var(--pad-x));
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr auto auto;
  gap: 0 1.25vw;
  pointer-events: none;
}

.hero__title {
  --reveal-delay: 300ms; /* a revelação espera junto com os textos */
  grid-column: 1 / 9;
  grid-row: 2;
  align-self: end;
  text-box: trim-start cap alphabetic;
  font-family: var(--font-sans);
  font-size: min(3.5vw, 6.6svh);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.hero__line {
  display: block;
  white-space: nowrap;
}

/* Subtítulo logo abaixo do título, na mesma margem esquerda */
.hero__aside {
  grid-column: 1 / 13;
  grid-row: 3;
  justify-self: start;
  width: min(36vw, 36rem);
  margin-top: clamp(20px, 2.2vw, 36px);
}

.hero__subtitle {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.12vw, 1.25rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: #9a9a95; /* cinza: contraste com o título em branco */
  text-wrap: pretty;
  text-box: trim-start cap alphabetic;
}

/* Rótulos em mono */
.ed-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Microtexto: sans com ênfase em serif itálica */
.ed-text {
  max-width: 24ch;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* Ênfase em serif itálica (ver --serif-* nos tokens) */
.ed-text em,
.hero__title em,
.intro__title em,
.intro__lead em,
.intro__note em,
.intro__close em,
.offer__title em,
.offer__lead em,
.outro__title em {
  font-family: var(--font-serif);
  font-size: var(--serif-scale);
  font-style: italic;
  word-spacing: 0.08em; /* TESTE Lavigne: o espaço entre palavras dela é estreito */
  -webkit-text-stroke: var(--serif-stroke) currentColor;
}

/* Tracking: o do texto em volta, mais a folga da Times */
.hero__title em,
.intro__title em,
.offer__title em,
.outro__title em { letter-spacing: -0.01em; }   /* títulos — TESTE Lavigne (Times: -0.03em) */

.intro__lead em,
.intro__close em,
.offer__lead em { letter-spacing: -0.005em; }   /* frases de abertura — TESTE Lavigne (Times: -0.02em) */

.ed-text em,
.intro__note em { letter-spacing: 0; }   /* microtexto — TESTE Lavigne (Times: -0.012em) */

/* Entrada escalonada (--d = ordem) */
.ed {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

.hero.is-ready .ed {
  animation: ed-in 1.1s var(--ease-reveal) forwards;
  animation-delay: calc(0.35s + var(--d, 0) * 0.09s);
}

@keyframes ed-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ed-in-label {
  to { opacity: 0.55; transform: translate3d(0, 0, 0); }
}

@media (max-width: 767px) {
  /* No celular a hero ocupa exatamente a tela (o vídeo só aparece com
     a rolagem); texto na base, imagens cobrindo a hero inteira por trás */
  .hero__content {
    position: absolute;
    inset: 0;
    padding: calc(var(--frame-band) + 20px) calc(var(--frame-side) + var(--pad-x)) calc(var(--frame-band) + 84px); /* folga do botão do WhatsApp */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
  }

  .hero__title { grid-column: 1; grid-row: 2; align-self: end; }
  .hero__aside { grid-column: 1; grid-row: 3; justify-self: start; align-self: start; width: auto; max-width: 36ch; margin: 28px 0 0; }

  .ed-text { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__shot { transition-duration: 0.01s; }

  .ed,
  .hero.is-ready .ed {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =========================================================
   Moldura fixa (menu · relógio · contato · logo)
   Uma janela arredondada recorta o site; tudo fora dela é
   preto (box-shadow gigante). Fica fixa por cima do scroll.
   ========================================================= */
:root {
  --frame-band: 76px;   /* faixas de cima e de baixo */
  --frame-nav-size: clamp(1.25rem, 1.55vw, 1.625rem); /* menu e logo */
  --frame-side: 14px;   /* laterais */
  --frame-radius: 10px;
  --color-stage: #111;  /* fundo dentro da janela */
}

.frame {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.frame__window {
  position: absolute;
  inset: var(--frame-band) var(--frame-side);
  border-radius: var(--frame-radius);
  box-shadow: 0 0 0 100vmax #000;
}

.frame__corner {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.5em;
  height: var(--frame-band);
  pointer-events: auto;
}

.frame__corner--tl { top: 0; left: var(--frame-side); }
.frame__corner--tr { top: 0; right: var(--frame-side); }
.frame__corner--bl { bottom: 0; left: var(--frame-side); }
.frame__corner--br { bottom: 0; right: var(--frame-side); }

.frame a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.frame a:hover {
  opacity: 0.5;
}

/* Menu: no hover a cor da marca, em vez de esmaecer */
.frame__nav a {
  transition: color 0.3s ease;
}

.frame__nav a:hover,
.frame__nav a:focus-visible {
  color: var(--color-accent, #1351fe);
  opacity: 1;
}

address.frame__corner {
  font-style: normal;
}

/* Menu em sans, bem maior que os demais itens da moldura (mono) */
.frame__nav {
  display: flex;
  gap: 1.6em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--frame-nav-size);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.frame__clock {
  font-variant-numeric: tabular-nums;
}

.frame__clock-city {
  opacity: 0.5;
  margin-right: 0.75em;
}

/* Logo do mesmo tamanho do menu: o H do SVG (≈94% da altura total,
   o pingo do i sobra) fica na altura das maiúsculas da sans (≈0.72em) */
.frame__logo {
  font-size: var(--frame-nav-size);
}

.frame__logo-svg {
  display: block;
  height: 0.765em;
  width: auto;
  color: #fff;
}

@media (max-width: 767px) {
  :root {
    --frame-band: 56px;
    --frame-side: 8px;
    --frame-nav-size: 1.0625rem;
  }

  .frame__nav { gap: 1.1em; }
  .frame__clock-city,
  .frame__contact-extra { display: none; }
}

/* Com quatro itens no menu (Serviços entrou), o relógio não cabe ao lado
   em telas estreitas: sai, e o menu fica sozinho na faixa de cima */
@media (max-width: 479px) {
  .frame__clock { display: none; }
  .frame__nav { gap: 0.9em; }
}

/* =========================================================
   Transição hero → seção 02 (réplica de nudot.com.tw)
   A hero fica fixa (sticky) num trilho de 100vh + 60vh; a seção
   seguinte sobe por cima dela (margin-top: -100vh) e é revelada
   de baixo para cima por uma máscara — ver js/hero-reveal.js.
   ========================================================= */
.hero-track {
  position: relative;
  height: 160vh; /* 100vh da hero + 60vh de revelação */
}

.hero-track .hero {
  position: sticky;
  top: 0;
  height: 100vh;
}

[data-hero-next] {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
}

html.is-reveal-pending [data-hero-next] {
  visibility: hidden;
}

/* Telas pequenas e movimento reduzido: fluxo normal, sem revelação */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .hero-track { height: auto; }
  .hero-track .hero { position: relative; height: 100svh; }
  [data-hero-next] { margin-top: 0; }
}


/* =========================================================
   Seção 02 — Vídeo em loop (galeria "home-video")
   Ocupa a janela da moldura inteira (cobre, sem barras); sem som,
   sem controles e sem reagir ao cursor. No celular volta ao fluxo,
   na versão 4:5 do vídeo (outro arquivo), sem cortar nada.
   ========================================================= */
.reel {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: #000;
}

/* Vai até a base da seção: ao rolar, a faixa de baixo fica visível
   dentro da janela, e é dali que os pixels da dissolução sobem. Em cima
   a faixa nunca aparece (a seção chega presa ao topo, pela revelação) */
.reel__media {
  position: absolute;
  /* 1px a mais por baixo da moldura: durante a rolagem a seção fica em
     posições fracionadas, e sem essa sobra aparecia uma fresta fina */
  inset: calc(var(--frame-band) - 1px) calc(var(--frame-side) - 1px) 0;
  overflow: hidden; /* corta o excesso da camada de granulado */
}

.reel__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* Em algumas cenas o arquivo traz pixels escuros nas bordas (sobra
     da renderização): ampliado 3%, a borda fica fora da janela, que
     corta o excesso */
  transform: scale(1.03);
}

/* Lente preta a 5% sobre o vídeo: escurece um pouco o tom para ele
   se separar do papel claro da seção seguinte */
.reel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

@media (max-width: 767px) {
  .reel { height: auto; }
  .reel__media { position: relative; inset: auto; margin: -1px; }
  .reel__video { height: auto; aspect-ratio: 4 / 5; }
}

/* =========================================================
   Seção 02 (fora de uso na Home) — A distância (valor entregue × valor percebido)
   Papel claro dentro da moldura preta (o contraste deixa visível a
   revelação sobre a hero). Mesmo sistema tipográfico do título da
   hero; o campo de tradução é o elemento interativo — ver
   js/translate-field.js.
   ========================================================= */
.intro {
  --color-paper: #e6e6e2;
  --color-ink: #0c0c0c;
  --color-dot-mute: #9a9a95;      /* ponto "percebido" */
  --color-dot-bg: rgba(12, 12, 12, 0.14);
  --color-translate: #0000ff;     /* só no instante da tradução */

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  padding:
    calc(var(--frame-band) + 5vh)
    calc(var(--frame-side) + var(--pad-x))
    calc(var(--frame-band) + 3.5vh);
  background-color: var(--color-paper);
  color: var(--color-ink);
  cursor: crosshair;
}

/* Cabe numa tela: o campo de tradução ocupa a altura que sobra. No
   desktop o campo fica por trás de tudo (.intro__field); a grade não
   recebe o cursor, para ele chegar ao campo */
.intro__grid {
  position: relative;
  z-index: 1;
  pointer-events: none;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 1.25vw;
}

.intro__title {
  grid-column: 1 / 8;
  grid-row: 2;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 3.57vw, 4.25rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.025em;
}

.intro__break {
  display: block;
}

/* Encostado na margem direita, espelhando o título na esquerda */
.intro__text {
  grid-column: 8 / -1;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  max-width: 34ch;
}

.intro__lead {
  max-width: 22ch;
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.55vw, 1.625rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* --- Campo de tradução ---
   No desktop o campo cobre a janela inteira da seção, por trás do
   conteúdo, e a palavra fica no centro (o script limita o tamanho dela
   para não encostar no título, no texto nem no painel). */
.intro__figure {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  margin: 0;
}

/* Posicionado em relação à grade: os valores negativos desfazem o
   padding da seção (ver .intro) e levam o campo às bordas da janela */
.intro__field {
  position: absolute;
  inset: -5vh calc(-1 * var(--pad-x)) -3.5vh;
  z-index: 0;
}

.intro__field canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Painel de leituras ---
   Quatro células iguais sobre um fio: rótulo, número e legenda, todos
   alinhados à esquerda; a última fecha com o que o Haikai faz. Sem
   fundo: os pontos continuam por trás, como textura. */
.intro__readout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2vh;
  border-top: 1px solid var(--color-dot-bg);
}

.intro__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 1.25vw 0.25rem;
  border-left: 1px solid var(--color-dot-bg);
}

.intro__stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.intro__num {
  margin-top: 1.1rem;
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 2.9vw, 3.25rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.intro__num sup {
  margin-left: 0.08em;
  font-size: 0.42em;
  vertical-align: 1.1em;
}

.intro__note,
.intro__close {
  max-width: 34ch;
  margin-top: 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.intro__note {
  opacity: 0.6;
}

/* A conclusão no corpo da abertura, onde as outras células têm o número */
.intro__close {
  font-size: clamp(1rem, 1.2vw, 1.375rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.intro__stat--close .intro__reset {
  margin-top: auto;
  padding-top: 1rem;
}

.intro__reset {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
  pointer-events: auto;
}

.intro__reset:hover { opacity: 0.6; }

.intro__reset:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  /* No celular o conteúdo empilhado não cabe numa tela: altura livre */
  .intro {
    height: auto;
    min-height: 100svh;
    padding-top: calc(var(--frame-band) + 48px);
    padding-bottom: calc(var(--frame-band) + 40px);
  }

  .intro__grid { grid-template-rows: none; }

  .intro__grid,
  .intro__readout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
  }

  /* Painel em duas colunas: cada célula ganha o próprio fio */
  .intro__readout { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; border-top: 0; }
  .intro__stat,
  .intro__stat:first-child { padding: 14px 0 24px; border-left: 0; border-top: 1px solid var(--color-dot-bg); }
  .intro__stat--close { grid-column: 1 / -1; }

  .intro__title { grid-column: 1 / -1; }
  .intro__text { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 28px; }
  /* No celular o campo volta ao fluxo, acima das leituras */
  .intro { cursor: auto; }
  .intro__grid { pointer-events: auto; }
  .intro__figure { grid-row: 4; margin-top: 40px; }
  .intro__field {
    position: relative;
    inset: auto;
    aspect-ratio: 3 / 2;
    margin-bottom: 20px;
    touch-action: pan-y;
  }
}

/* =========================================================
   Seção 05 — Cases (ideia de petrikor.design/projetos)
   Nomes gigantes em caixa-alta na largura toda, alinhamento
   alternado (direita / esquerda) e fios entre as linhas. Ao passar
   o cursor, as letras rolam e uma miniatura do case abre na borda
   alinhada, empurrando o nome para dentro. Ver js/cases.js.
   ========================================================= */
.cases {
  --color-paper: #e6e6e2;
  --color-ink: #0c0c0c;
  --rule: rgba(12, 12, 12, 0.18);

  position: relative;
  z-index: 2;
  padding:
    calc(var(--frame-band) + 3vh)
    calc(var(--frame-side) + var(--pad-x))
    calc(var(--frame-band) + 6vh);
  background-color: var(--color-paper);
  color: var(--color-ink);
}

.cases__head {
  padding-bottom: 1.2em;
}

/* --- Lista --- */
.cases__list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* js/cases.js ajusta para o maior nome ocupar a largura toda */
  font-size: 7vw;
}

.cases__item {
  border-top: 1px solid var(--rule);
}

.cases__item:last-child {
  border-bottom: 1px solid var(--rule);
}

/* Nome alinhado à direita nos ímpares, à esquerda nos pares */
.cases__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.08em 0;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.cases__item:nth-child(even) .cases__link {
  justify-content: flex-start;
}

.cases__link:focus-visible .cases__name {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* Miniatura: fechada (largura 0) até o hover; fica na borda alinhada
   — depois do nome nos ímpares, antes nos pares */
.cases__thumb {
  order: 1;
  flex: none;
  width: 0;
  height: 0.72em;
  margin-left: 0;
  overflow: hidden;
  transition:
    width 0.6s var(--ease-reveal),
    margin 0.6s var(--ease-reveal);
}

.cases__item:nth-child(even) .cases__thumb {
  order: -1;
}

.cases__thumb img {
  display: block;
  width: 0.96em;          /* 4:3 com a altura acima */
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.cases__link:hover .cases__thumb,
.cases__link:focus-visible .cases__thumb {
  width: 0.96em;
  margin-left: 0.12em;
}

.cases__item:nth-child(even) .cases__link:hover .cases__thumb,
.cases__item:nth-child(even) .cases__link:focus-visible .cases__thumb {
  margin-left: 0;
  margin-right: 0.12em;
}

/* Folga em cima para acentos (o Í de Lunaví); a margem negativa
   mantém a linha no mesmo lugar */
.cases__name {
  --ch-pad: 0.3em;
  display: flex;
  padding-top: var(--ch-pad);
  margin-top: calc(0.06em - var(--ch-pad));
  overflow: hidden;
  overflow: clip;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Cada letra tem uma cópia logo abaixo (::after); no hover as letras
   sobem uma a uma e a cópia toma o lugar */
.cases__ch {
  position: relative;
  display: block;
  transition: transform 0.7s var(--ease-reveal);
  transition-delay: calc(var(--i, 0) * 18ms);
}

.cases__ch::after {
  content: attr(data-ch);
  position: absolute;
  top: calc(100% + 2 * var(--ch-pad, 0em)); /* longe o bastante para o acento da cópia não aparecer */
  left: 0;
}

.cases__ch--space {
  width: 0.24em;
}

/* Sobe a própria altura + a distância da cópia: a original sai
   inteira por cima e a cópia assenta no lugar dela */
.cases__link:hover .cases__ch,
.cases__link:focus-visible .cases__ch {
  transform: translate3d(0, calc(-100% - 2 * var(--ch-pad, 0em)), 0);
}

/* Toque (sem hover): sem miniatura, só a lista */
@media (hover: none) {
  .cases__thumb { display: none; }
}

@media (max-width: 767px) {
  .cases {
    padding-block: calc(var(--frame-band) + 40px);
  }

  .cases__link { padding: 0.18em 0 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .cases__ch,
  .cases__thumb { transition: none; }
}

/* =========================================================
   Seção 04 — Princípios sobre foto (réplica do bloco "2026" de
   paulkalkbrenner.net; classes .concept do antigo bloco do conceito)
   Foto de fundo com paralaxe (a camada da foto é 14% mais alta que a
   seção — ver js/concept.js). No fim, a foto se dissolve em pixels
   na cor da seção seguinte. Textos: ver .principles, logo abaixo.
   ========================================================= */
.concept {
  position: relative;
  z-index: 2;
  aspect-ratio: 1.2 / 1;
  min-height: 100vh;
  overflow: hidden;
  background-color: #000;
  color: #fff;
}

.concept__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.concept__inner {
  position: absolute;
  inset: 0 0 -14%;
  will-change: transform;
}

.concept__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Princípios por cima da foto ---
   Tipografia contida: título discreto no topo, à direita, e os
   três princípios em corpo pequeno, um embaixo do outro à esquerda,
   longe da faixa de baixo onde entram os pixels. Véu escuro
   para o branco ler bem sobre a foto. */
.principles {
  color: #fff;
}

.principles .concept__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
}

/* Mesma grade de 12 colunas da seção do estúdio acima (margens,
   colunas e vão de 1.25vw), refeita em medidas para posicionar os
   textos soltos sobre a foto:
   --x-text = eixo dos textos corridos lá de cima (.offer__text e
   .offer__desc: coluna 10, mais o recuo de fio + 1.25vw) */
.principles__content {
  --edge: calc(var(--frame-side) + var(--pad-x));
  --gap: 1.25vw;
  --col: calc((100% - 2 * var(--edge) - 11 * var(--gap)) / 12);
  --x-text: calc(var(--edge) + 9 * (var(--col) + var(--gap)) + var(--gap) + 1px);

  position: absolute;
  inset: 0;
  z-index: 2;
  padding: calc(var(--frame-band) + 3vh) var(--edge) 0;
}

/* No topo, no eixo dos textos corridos do bloco de cima */
.principles__heading {
  position: absolute;
  top: calc(var(--frame-band) + 3vh);
  left: var(--x-text);
  width: calc(100% - var(--x-text) - var(--edge));
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.principles__heading em {
  font-family: var(--font-serif);
  font-size: var(--serif-scale);
  font-style: italic;
  letter-spacing: -0.01em;
  word-spacing: 0.08em;
  -webkit-text-stroke: var(--serif-stroke) currentColor;
}

/* Os três princípios um embaixo do outro, na margem esquerda
   (largura de 4 colunas); o primeiro a 24% da altura do bloco */
.principles__list {
  position: absolute;
  top: 24%;
  left: var(--edge);
  width: calc(4 * var(--col) + 3 * var(--gap));
}

.principles__item + .principles__item {
  margin-top: 3.5rem;
}

.principles__item .ed-label {
  opacity: 0.75;
}

.principles__title {
  margin-top: 0.9rem;
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.principles__title em {
  font-family: var(--font-serif);
  font-size: var(--serif-scale);
  font-style: italic;
  letter-spacing: -0.005em;
  word-spacing: 0.08em;
  -webkit-text-stroke: var(--serif-stroke) currentColor;
}

.principles__text {
  margin-top: 0.8em;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.42;
  text-wrap: pretty;
  opacity: 0.85;
}

/* Telas médias: as colunas ficam estreitas e os textos, mais altos;
   a seção cresce para o princípio 3 terminar antes da faixa de pixels */
@media (min-width: 768px) and (max-width: 1199px) {
  .concept.principles { aspect-ratio: auto; height: 1200px; }
}

/* Celular: a seção cresce com o texto (sem proporção fixa), título
   em cima e os princípios embaixo;
   folga embaixo para a faixa de pixels */
@media (max-width: 767px) {
  .concept.principles {
    aspect-ratio: auto;
  }

  .principles__content {
    position: relative;
    padding: calc(var(--frame-band) + 20px) calc(var(--frame-side) + var(--pad-x)) 300px;
  }

  .principles__heading { position: static; width: auto; }

  .principles__list { position: static; width: auto; }

  .principles__item,
  .principles__item + .principles__item {
    margin-top: 48px;
  }
}

/* --- Dissolução em pixels (js/pixel-scroll-transition.js) ---
   Os pixels têm a cor da seção seguinte (papel) */
.pixelated-scroll-transition {
  position: absolute;
  inset: auto 0 0;
  z-index: 10;
  pointer-events: none;
  color: #e6e6e2;
}

.pixelated-scroll-transition[data-mode="reveal"] {
  inset: 0 0 auto;
}

[data-pixelated-scroll-panel] {
  display: flex;
  flex-direction: row;
  width: 100%;
}

[data-pixelated-scroll-column] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  flex: 1 1 0%;
  min-width: 0;
}

[data-pixelated-scroll-pixel] {
  aspect-ratio: 1;
  width: 100%;
  background-color: currentColor;
  backface-visibility: hidden;
  will-change: opacity;
}

@media (max-width: 767px) {
  .concept {
    aspect-ratio: 3 / 4;
    min-height: 0;
  }
}

/* =========================================================
   Seção 05 — O estúdio + serviços
   Papel claro; mesmo sistema tipográfico da seção 02. Os serviços
   são uma lista (não uma sequência): nome à esquerda, descrição à
   direita, fios entre as linhas.
   ========================================================= */
.offer {
  --color-paper: #e6e6e2;
  --color-ink: #0c0c0c;
  --rule: rgba(12, 12, 12, 0.18);

  position: relative;
  z-index: 2;
  padding:
    7vh
    calc(var(--frame-side) + var(--pad-x))
    calc(var(--frame-band) + 9vh);
  background-color: var(--color-paper);
  color: var(--color-ink);
}

/* A seção 05 virou duas: o estúdio + serviços sobe para logo depois
   do vídeo (.offer--studio); depois dos cases vêm os princípios
   (.principles, mais abaixo) */
.offer--studio {
  padding-top: 12vh;
}

.offer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25vw;
  align-items: end;
}

.offer__label {
  grid-column: 1 / -1;
  margin-bottom: 1.4rem;
}

.offer__label--services {
  margin-top: 14vh;
}

.offer__title {
  grid-column: 1 / 9;
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 3.57vw, 4.25rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Colunas 10–12, com recuo de fio + 1.25vw: mesmo eixo das descrições
   dos serviços e dos textos dos princípios */
.offer__text {
  grid-column: 10 / -1;
  padding-left: calc(1.25vw + 1px);
  font-size: 0.9375rem; /* mesma medida (ch) das descrições dos serviços */
}

/* Frase de abertura do estúdio, acima do texto corrido (mesma escala de .intro__lead) */
.offer__lead {
  max-width: 22ch;
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.55vw, 1.625rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.offer__lead + .offer__body {
  margin-top: 1.4em;
}

/* Título curto ao lado de um texto mais longo: as duas colunas partem do
   mesmo topo, logo abaixo da etiqueta (como na seção 02) */
.offer__grid--top {
  align-items: start;
}

.offer__break {
  display: block;
}

.offer__body,
.offer__desc {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  opacity: 0.6;
}

.offer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}

.offer__item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25vw;
  align-items: center;
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
}

.offer__name {
  grid-column: 1 / 7;
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Mesmo eixo do texto do estúdio (.offer__text) */
.offer__desc {
  grid-column: 10 / -1;
  padding-left: calc(1.25vw + 1px);
}

/* "Saiba mais" abaixo da descrição, com seta → página Serviços (frente
   aberta); no hover fica azul e a seta avança */
.offer__more {
  display: flex;
  align-items: center;
  gap: 0.45em;
  width: fit-content;
  margin-top: 0.9em;
  color: inherit;
  font-family: var(--font-serif);  /* ênfase serifada itálica do site */
  font-size: var(--serif-scale);
  font-style: italic;
  letter-spacing: 0;
  word-spacing: 0.08em;
  -webkit-text-stroke: var(--serif-stroke) currentColor;
  text-decoration: none;
  transition: color 0.3s ease;
}

.offer__more-arrow {
  flex: none;
  width: 1em;
  height: 1em;
  transition: transform 0.4s var(--ease-reveal-soft, ease);
}

.offer__more:hover,
.offer__more:focus-visible {
  color: var(--color-accent, #1351fe);
}

.offer__more:hover .offer__more-arrow,
.offer__more:focus-visible .offer__more-arrow {
  transform: translateX(4px);
}

/* Imagem do serviço sob o cursor: abre no vão entre o nome e a
   descrição (colunas 7–9 da grade), acompanha o cursor na vertical e
   troca de mídia ao mudar de linha. Tamanho e posição vêm do
   js/offer-preview.js; só existe com mouse, fora do celular */
.offer__services {
  position: relative;
}

.offer__preview {
  --gap: 1.25vw;
  --col: calc((100% - 11 * var(--gap)) / 12);
  position: absolute;
  top: 0;
  left: calc(6 * (var(--col) + var(--gap)));
  z-index: 2;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--color-ink);
  clip-path: inset(50% 0 50% 0);
  transition:
    clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1),
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, clip-path;
}

.offer__preview.is-open {
  clip-path: inset(0 0 0 0);
}

.offer__preview-media {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.12);
  transition:
    opacity 0.35s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.offer__preview-media.is-active {
  opacity: 1;
  transform: scale(1);
}

.offer__preview-media img,
.offer__preview-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: none), (max-width: 767px) {
  .offer__preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .offer__preview,
  .offer__preview-media { transition-duration: 0.01s; }
  .offer__preview-media { transform: none; }
}

@media (max-width: 767px) {
  .offer {
    padding-top: 64px;
    padding-bottom: calc(var(--frame-band) + 48px);
  }

  .offer__title,
  .offer__text { grid-column: 1 / -1; }
  .offer__text { justify-self: start; margin-top: 28px; }
  .offer__label--services { margin-top: 64px; }

  .offer__item { row-gap: 10px; padding-block: 20px; }
  .offer__name,
  .offer__desc { grid-column: 1 / -1; }
  .offer__text,
  .offer__desc { padding-left: 0; }
  .offer--studio { padding-top: 64px; }
}

/* =========================================================
   Seção 06 — Prova social
   Escura. Depoimentos um por vez, na diagramação do bloco do
   estúdio (.offer__grid): a frase em destaque à esquerda (colunas
   1–8) e, no eixo do texto do estúdio (10–12), quem fala e o
   depoimento completo. Todos na mesma célula (a altura é a do mais
   longo: trocar não pula a página); as setas ficam no pé da coluna
   da frase. Embaixo, os logos dos clientes numa esteira.
   Ver js/proof.js.
   ========================================================= */
.proof {
  --rule: rgba(255, 255, 255, 0.22);

  position: relative;
  z-index: 2;
  padding:
    calc(var(--frame-band) + 9vh)
    calc(var(--frame-side) + var(--pad-x))
    calc(var(--frame-band) + 9vh);
  overflow: hidden; /* a esteira de logos é mais larga que a seção */
  background-color: var(--color-stage);
  color: #fff;
}

.proof__head {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  padding-bottom: 1.4rem;
}

/* Palco: a lista e as setas dividem a mesma célula; as setas descem
   para o pé, sob a frase */
.proof__stage {
  display: grid;
  border-block: 1px solid var(--rule);
}

/* Setas: botões redondos com fio; com o cursor, preenchem de branco.
   O desenho da seta é o do rodapé (haste da sans) */
.proof__nav {
  grid-area: 1 / 1;
  z-index: 1;
  align-self: end;
  justify-self: start;
  display: flex;
  gap: 0.625rem;
  margin-bottom: 2.75rem;
}

.proof__arrow {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  transition:
    background-color 0.35s var(--ease-reveal-soft),
    border-color 0.35s var(--ease-reveal-soft),
    color 0.35s var(--ease-reveal-soft);
}

.proof__arrow:focus-visible {
  border-color: #fff;
  background-color: #fff;
  color: var(--color-stage);
}

/* Só com mouse: no toque, o botão tocado ficaria preso preenchido */
@media (hover: hover) {
  .proof__arrow:hover {
    border-color: #fff;
    background-color: #fff;
    color: var(--color-stage);
  }
}

.proof__arrow:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

.proof__arrow svg {
  width: 1.375rem;
  height: 1.375rem;
  overflow: visible;
  transition: transform 0.6s var(--ease-reveal);
}

.proof__arrow path {
  stroke-width: 1.6;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.proof__arrow[data-proof-prev]:hover svg { transform: translate3d(-3px, 0, 0); }
.proof__arrow[data-proof-next]:hover svg { transform: translate3d(3px, 0, 0); }

.proof__head--clients {
  margin-top: 14vh;
}

.proof__list {
  grid-area: 1 / 1;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proof__item {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s linear, visibility 0s 0.35s;
}

.proof__item.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.7s var(--ease-reveal-soft) 0.15s, visibility 0s;
}

/* A frase e o texto sobem um pouco ao trocar */
.proof__say {
  transform: translate3d(0, 14px, 0);
  transition: transform 0s 0.35s;
}

.proof__item.is-active .proof__say {
  transform: translate3d(0, 0, 0);
  transition: transform 1.1s var(--ease-reveal) 0.15s;
}

.proof__fig {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 1.25vw;
  row-gap: 2rem;
  align-items: start;
  margin: 0;
  /* embaixo, o vão das setas */
  padding-block: 2.75rem calc(2.75rem + 3.75rem + 3rem);
}

/* --- Quem fala: foto + nome + cargo, no topo da coluna da direita
       (mesmo eixo de .offer__text) --- */
.proof__who {
  grid-column: 10 / -1;
  grid-row: 1;
  padding-left: calc(1.25vw + 1px);
}

.proof__person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Foto discreta: uma miniatura ao lado do nome */
.proof__photo {
  position: relative; /* recebe a camada de grão */
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border-radius: 50%;
}

.proof__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--pos, 50% 50%);
  filter: grayscale(1);
}

.proof__by {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  min-width: 0;
}

.proof__name {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.proof .proof__role {
  opacity: 0.55;
}

/* --- Frase em destaque e depoimento completo: subgrade da figura
       inteira (colunas e linhas), para a frase ocupar as duas linhas
       à esquerda e o texto cair sob quem fala, à direita --- */
.proof__say {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  align-items: start;
  margin: 0;
}

.proof__quote {
  grid-column: 1 / 9;
  grid-row: 1 / -1;
  padding-right: 2vw;
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.5vw, 2.875rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Aspas como elemento gráfico: grandes, na serifada, numa linha
   própria acima e abaixo da frase. O desenho da Times fica no alto
   da caixa; a altura de linha curta tira o vão que sobraria */
.proof__mark {
  display: block;
  height: 0.42em;
  font-family: var(--font-serif);
  font-size: 3.2em;
  line-height: 0.9;
  letter-spacing: 0;
}

.proof__mark:first-child {
  margin-top: -0.06em; /* topo das aspas no eixo da foto */
  margin-bottom: 0.08em;
}

.proof__mark--close {
  margin-top: 0.14em;
}

/* Sem itálico na frase: o destaque é só o tamanho */
.proof__quote em {
  font-style: normal;
}

/* Sob quem fala, no mesmo eixo */
.proof__body {
  grid-column: 10 / -1;
  grid-row: 2;
  padding-left: calc(1.25vw + 1px);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  opacity: 0.6;
}

.proof__body p + p {
  margin-top: 0.9em;
}

/* --- Logos: esteira contínua, da esquerda para a direita. A fila é
       duplicada (js/proof.js) e a trilha anda meia largura por volta. --- */
.proof__belt {
  display: flex;
  width: max-content;
  min-width: 100%;
  /* sangra até as bordas da janela */
  margin-inline: calc(-1 * var(--pad-x));
  padding-block: 2.5vh;
}

.proof__belt.is-running {
  animation: proof-belt 32s linear infinite;
}

.proof__belt.is-running:hover {
  animation-play-state: paused;
}

@keyframes proof-belt {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.proof__logos {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 7vw;
  min-width: 100vw;
  margin: 0;
  padding: 0 3.5vw;
  list-style: none;
}

.proof__logo {
  flex: none;
  display: flex;
  align-items: center;
  height: clamp(64px, 10vh, 104px);
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity 0.4s var(--ease-reveal-soft);
}

.proof__logo:hover {
  opacity: 1;
}

/* Altura base × --logo-scale (peso óptico, calculado em index.php) */
.proof__logo img {
  display: block;
  width: auto;
  height: calc(42% * var(--logo-scale, 1));
}

/* Marcas provisórias: cada nome num desenho diferente, só para dar ritmo */
.proof__logo--a { font-family: var(--font-serif); letter-spacing: 0.02em; }
.proof__logo--b { font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: clamp(0.875rem, 1.3vw, 1.3rem); }
.proof__logo--c { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 2.3vw, 2.3rem); }
.proof__logo--d { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.05em; font-size: clamp(1.5rem, 2.6vw, 2.6rem); }
.proof__logo--e { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(0.875rem, 1.3vw, 1.3rem); }

@media (max-width: 767px) {
  .proof {
    padding-top: calc(var(--frame-band) + 56px);
    padding-bottom: calc(var(--frame-band) + 48px);
  }

  /* Empilhado: quem fala, a frase, o texto; setas no pé */
  .proof__fig {
    grid-template-rows: none;
    padding-block: 24px calc(56px + 24px + 32px);
    row-gap: 22px;
  }

  .proof__who {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .proof__say {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-rows: none;
    row-gap: 18px;
  }

  .proof__quote,
  .proof__body { grid-column: 1 / -1; grid-row: auto; }
  .proof__quote { padding-right: 0; }
  .proof__body { padding-left: 0; }
  .proof__nav { margin-bottom: 24px; }
  .proof__arrow { width: 56px; height: 56px; }

  .proof__head--clients { margin-top: 72px; }
  .proof__logos { gap: 44px; padding-inline: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .proof__item,
  .proof__item.is-active,
  .proof__say,
  .proof__item.is-active .proof__say { transition: none; transform: none; }
}

/* =========================================================
   Rodapé — chamada + contato
   Papel claro, fechando a página depois da prova social. Em cima, a
   frase à esquerda e o CTA gigante à direita, com as letras que sobem
   ao passar o cursor (estrutura de petrikor.design/projetos). Embaixo,
   entre fios, a grade de 12 colunas com o resumo justificado, o
   índice, as redes e o contato (estrutura de signal-a.studio).
   Ver js/outro.js.
   ========================================================= */
.outro {
  --color-paper: #e6e6e2;
  --color-ink: #0c0c0c;
  --rule: rgba(12, 12, 12, 0.18);

  position: relative;
  z-index: 2;
  padding:
    calc(var(--frame-band) + 9vh)
    calc(var(--frame-side) + var(--pad-x))
    calc(var(--frame-band) + 2.5vh);
  background-color: var(--color-paper);
  color: var(--color-ink);
}

.outro a {
  color: inherit;
  text-decoration: none;
}

.outro__head {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
}

/* --- Frase + CTA --- */
.outro__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25vw;
  align-items: end;
  padding-block: 1.4rem 12vh;
}

.outro__pitch {
  grid-column: 1 / 6;
  align-self: start;
}

.outro__title {
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 3.57vw, 4.25rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.outro__body {
  max-width: 34ch;
  margin-top: 2.2rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  opacity: 0.6;
}

.outro__cta {
  grid-column: 7 / -1;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 10vh;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 6vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  outline: none;
}

.outro__cta:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 8px;
}

.outro__word {
  display: flex;
  align-items: center;
  gap: 0.1em;
}

.outro__word[data-roll],
.outro__word [data-roll] {
  display: flex;
  overflow: hidden;
  overflow: clip;
}

/* "Vamos" é a própria palavra rolante: o gap de .outro__word (que separa
   "conversar" da seta) não pode cair entre as letras */
.outro__word[data-roll] { gap: 0; }

/* Cada letra tem uma cópia logo abaixo (::after); ao passar o cursor
   as letras sobem uma a uma e a cópia toma o lugar */
.outro__ch {
  position: relative;
  display: block;
  transition: transform 0.7s var(--ease-reveal);
  transition-delay: calc(var(--i, 0) * 18ms);
}

.outro__ch::after {
  content: attr(data-ch);
  position: absolute;
  top: 100%;
  left: 0;
}

.outro__cta:hover .outro__ch,
.outro__cta:focus-visible .outro__ch {
  transform: translate3d(0, -100%, 0);
}

.outro__arrow {
  flex: none;
  width: 0.62em;
  height: 0.62em;
  overflow: visible;
  transition: transform 0.7s var(--ease-reveal);
}

.outro__arrow path {
  stroke-width: 3.68; /* = haste da sans (0.095em) na escala do viewBox (24 = 0.62em) */
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.outro__cta:hover .outro__arrow,
.outro__cta:focus-visible .outro__arrow {
  transform: translate3d(0.08em, -0.08em, 0);
}

/* --- Grade: resumo, índice, redes, contato --- */
.outro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25vw;
  align-items: start;
  padding-block: 1.75rem 9vh;
  border-top: 1px solid var(--rule);
}

.outro__summary,
.outro__links {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Bloco justificado, com recuo na primeira linha */
.outro__summary {
  grid-column: 1 / 5;
  max-width: 38ch;
  text-align: justify;
  text-indent: 3em;
  hyphens: auto;
}

.outro__col {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-style: normal;
}

.outro__col:nth-child(2) { grid-column: 6 / 8; }
.outro__col--contact { grid-column: 10 / -1; }

.outro__links {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.outro__links a,
.outro__base a {
  transition: opacity 0.3s ease;
}

.outro__links a:hover,
.outro__base a:hover {
  opacity: 0.5;
}

/* --- Linha final --- */
.outro__base {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  padding-top: 1.2em;
  border-top: 1px solid var(--rule);
}

@media (max-width: 767px) {
  .outro {
    padding-top: calc(var(--frame-band) + 56px);
    padding-bottom: calc(var(--frame-band) + 20px);
  }

  .outro__top { padding-bottom: 56px; }
  .outro__pitch,
  .outro__cta { grid-column: 1 / -1; }
  .outro__body { margin-top: 24px; }
  .outro__cta { margin-top: 56px; font-size: 12vw; }

  .outro__grid { row-gap: 32px; padding-block: 24px 48px; }
  .outro__summary { grid-column: 1 / -1; max-width: none; }
  .outro__col,
  .outro__col:nth-child(2) { grid-column: span 6; }
  .outro__col--contact { grid-column: 1 / -1; }

  .outro__base { flex-wrap: wrap; gap: 0.5em 1.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .outro__ch,
  .outro__arrow { transition: none; }

  .outro__cta:hover .outro__ch,
  .outro__cta:focus-visible .outro__ch,
  .outro__cta:hover .outro__arrow,
  .outro__cta:focus-visible .outro__arrow { transform: none; }
}

/* =========================================================
   Cor da marca (#1351fe) — páginas com <html class="accent">
   O site continua monocromático; o azul entra em pontos pequenos:
   - seleção de texto e contorno de foco
   - as porcentagens das leituras, na seção 02
   - o nome do case ativo
   - o nome de quem assina o depoimento selecionado
   - a seta do CTA e o ponto do relógio
   ========================================================= */
html.accent {
  --color-accent: #1351fe;
}

html.accent ::selection {
  background-color: var(--color-accent);
  color: #fff;
}

html.accent :focus-visible {
  outline-color: var(--color-accent);
}

/* Seção 02: as porcentagens das leituras; na palavra, o azul fica só
   no instante da tradução (o ponto traduzido assenta na tinta) */
html.accent .intro {
  --color-translate: var(--color-accent);
}

html.accent .intro__num {
  color: var(--color-accent);
}

/* Cases: nome do case sob o cursor */
html.accent .cases__name {
  transition: color 0.5s var(--ease-reveal-soft);
}

html.accent .cases__link:hover .cases__name,
html.accent .cases__link:focus-visible .cases__name {
  color: var(--color-accent);
}

/* Rodapé: a seta do CTA */
html.accent .outro__arrow {
  color: var(--color-accent);
}

/* Relógio da moldura: um ponto que pisca a cada segundo */
html.accent .frame__clock time::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.7em;
  border-radius: 50%;
  background-color: var(--color-accent);
  vertical-align: 0.12em;
  animation: accent-tick 2s steps(1) infinite;
}

@keyframes accent-tick {
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  html.accent .frame__clock time::before { animation: none; }
}

/* =========================================================
   Film grain — só na hero, nas imagens e no vídeo da Home ([data-grain], js/grain.js)
   A camada é maior que a área (um tile a mais em cada eixo) e salta
   entre posições aleatórias; quem a recebe corta o excesso.
   ========================================================= */
.grain-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: calc(100% + 512px);
  height: calc(100% + 512px);
  pointer-events: none;
  background-image: var(--grain-tile);
  background-size: 512px 512px;
  opacity: 0.06;
  will-change: transform;
  animation: grain-jump var(--grain-duration, 0.4s) step-end infinite;
}

/* =========================================================
   Títulos letra a letra (réplica de igorbdm.com) — js/title-reveal.js
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.reveal-word {
  display: inline-block;
}

.reveal-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.28em);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.is-revealed .reveal-letter {
  opacity: 1;
  transform: translateY(0);
}

/* Antes de o script quebrar o título em letras (ver o script inline em
   templates/header.php) */
html.is-letters-pending [data-letter-reveal] {
  visibility: hidden;
}

/* Sem contorno na ênfase enquanto as letras se movem (o Safari o
   desenha com falhas); volta ao terminar, com .is-settled */
[data-letter-reveal]:not(.is-settled) em {
  -webkit-text-stroke-width: 0;
}

/* Terminada a entrada, as letras deixam de ser camadas animadas */
.is-settled .reveal-letter {
  transform: none;
  transition: none;
}

/* =========================================================
   Aviso de cookies (só com Google Analytics ativo em Configurações)
   ========================================================= */
.cookie-consent {
  position: fixed;
  z-index: 60;
  right: calc(var(--frame-band) + 12px);
  bottom: calc(var(--frame-band) + 12px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  max-width: 34rem;
  padding: 16px 18px;
  background: var(--color-paper, #e6e6e2);
  color: var(--color-ink, #000);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.35;
}

.cookie-consent[hidden] { display: none; }

.cookie-consent__text { flex: 1 1 16rem; margin: 0; }

.cookie-consent__actions { display: flex; gap: 8px; }

.cookie-consent button {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.cookie-consent button[data-consent="granted"] { background: var(--color-ink, #000); color: var(--color-paper, #fff); }

/* =========================================================
   Moldura — crédito de autoria no fim da rolagem (js/frame-credit.js)
   ========================================================= */
.frame__credit {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.frame__credit a {
  margin-left: 0.6em;
}

.frame__credit a:hover,
.frame__credit a:focus-visible {
  color: var(--color-accent, #1351fe);
  opacity: 1;
}

.frame.is-end .frame__credit {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
}

/* =========================================================
   Botão fixo do WhatsApp (js/whatsapp-float.js)
   Círculo na cor de destaque, no canto inferior direito da janela
   (dentro da moldura). No mouse, abre um rótulo à esquerda. Some
   quando o rodapé, que já tem o CTA, está na tela.
   ========================================================= */
.wa-float {
  position: fixed;
  right: calc(var(--frame-side) + 20px);
  bottom: calc(var(--frame-band) + 20px);
  z-index: 1001;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  height: 52px;
  padding: 0 14px;
  border-radius: 26px;
  background-color: #1351fe;
  background-color: var(--color-accent, #1351fe);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--ease-reveal),
    visibility 0s linear 0s;
}

.wa-float__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.wa-float__label {
  max-width: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.5s var(--ease-reveal), margin 0.5s var(--ease-reveal), opacity 0.3s ease;
}

@media (hover: hover) {
  .wa-float:hover .wa-float__label,
  .wa-float:focus-visible .wa-float__label {
    max-width: 12em;
    margin-right: 10px;
    opacity: 1;
  }
}

.wa-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.3s ease,
    transform 0.4s ease,
    visibility 0s linear 0.4s;
}

@media (max-width: 767px) {
  .wa-float {
    right: calc(var(--frame-side) + 12px);
    bottom: calc(var(--frame-band) + 12px);
    height: 48px;
    padding: 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float,
  .wa-float__label { transition: none; }
}

/* Projetos: o contador de figuras cede o centro ao crédito */
.frame__fig {
  transition: opacity 0.4s ease;
}

.frame.is-end .frame__fig {
  opacity: 0;
}

/* Celular: sem espaço para e-mail, crédito e logo — o crédito vai para a esquerda no lugar do e-mail */
@media (max-width: 767px) {
  .frame__credit {
    left: var(--frame-side);
    transform: none;
  }

  .frame__corner--bl {
    transition: opacity 0.4s ease, visibility 0s linear 0s;
  }

  .frame.is-end .frame__corner--bl {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }
}

/* Menu — item da página atual (Home na Home, Trabalhos nos projetos):
   sublinhado discreto (esmaecido), com a espessura da haste da sans
   (0.095em — a mesma medida da seta do CTA do rodapé) */
.frame__nav a.is-current {
  text-decoration: underline;
  text-decoration-thickness: 0.095em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}



/* =========================================================
   Home no celular — escala tipográfica e microtextos
   Três níveis claros: títulos (≈ 9–10vw), aberturas (1.125rem) e
   texto/rótulos. Microtextos que repetem informação saem.
   ========================================================= */
@media (max-width: 767px) {
  /* As 3 linhas do desktop, sem quebrar: a linha mais longa mede
     ~12.1em, cabe na largura útil (100vw − moldura − margens ≈ 60px) */
  .hero__title {
    font-size: min(calc((100vw - 60px) / 12.6), 2.5rem);
    line-height: 1.02;
  }

  .intro__title,
  .offer__title,
  .outro__title {
    font-size: clamp(2rem, 9.3vw, 2.625rem);
    line-height: 0.98;
  }

  .proof__quote {
    font-size: clamp(1.375rem, 6vw, 1.75rem);
  }

  /* Repetem o que já está na tela */
  .outro__head > span:last-child {         /* agenda aberta */
    display: none;
  }

  /* Justificado com hifenização quebra mal em coluna estreita */
  .outro__summary {
    text-align: left;
    hyphens: manual;
  }
}

/* =========================================================
   Abertura da Home (.splash) — templates/header.php
   Só existe com html.has-splash (primeira visita da sessão, sem
   movimento reduzido). O logo sobe por uma máscara, segura um
   instante e a cortina preta abre para cima. ~1,9s no total; o
   site e o vídeo da seção 02 carregam por trás.
   ========================================================= */
.splash {
  display: none;
}

html.has-splash .splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background-color: #000;
  color: #e6e6e2;
  pointer-events: none;
  animation: splash-out 0.8s cubic-bezier(0.76, 0, 0.24, 1) 1.1s forwards;
}

.splash__mask {
  display: block;
  overflow: hidden;
}

.splash__logo {
  display: block;
  width: clamp(150px, 16vw, 260px);
  height: auto;
  transform: translate3d(0, 110%, 0);
  animation: splash-logo 0.9s var(--ease-reveal) 0.15s forwards;
}

@keyframes splash-logo {
  to { transform: translate3d(0, 0, 0); }
}

@keyframes splash-out {
  to { clip-path: inset(0 0 100% 0); }
}

/* O título da hero aparece quando a cortina abre */
html.has-splash .hero__title {
  --reveal-delay: 1500ms;
}