/* ==========================================================================
   IAN MATEUS ALVES — SITE  ·  componentes do sistema "Sessão"
   Depende de tokens.css.
   ========================================================================== */

/* --- RESET ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
  background: var(--c-void);
  color: var(--c-paper);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--c-gold); color: var(--c-void); }

:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: var(--s-4); top: -200%; z-index: 999;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  background: var(--c-gold); color: var(--c-void); text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: var(--s-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- TEXTURA GLOBAL -------------------------------------------------------
   Grão fino fixo sobre a página inteira. É o que tira o aspecto de "tela
   lisa gerada por computador" — nenhuma superfície do site é limpa.    */

body::after {
  content: ""; position: fixed; inset: -50%;
  z-index: 9999; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halftone macio no fundo das seções escuras — o "borrão" de luz do fundo */
.halftone { position: relative; isolation: isolate; }
.halftone::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--halftone-color) var(--halftone-dot), transparent var(--halftone-dot));
  background-size: var(--halftone-gap) var(--halftone-gap);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 30%, #000 0%, transparent 72%);
          mask-image: radial-gradient(70% 55% at 50% 30%, #000 0%, transparent 72%);
  opacity: .5;
}

/* --- PRIMITIVAS ----------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.display {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "opsz" 90;
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.label {
  font-size: var(--t-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; font-weight: 700; line-height: 1;
  color: var(--fg-dim);
}
.label--gold { color: var(--c-gold); }
.on-card .label--gold { color: var(--c-gold-deep); }

.lead { font-size: var(--t-lead); color: var(--fg-dim); max-width: 48ch; }
.prose { max-width: 60ch; color: var(--fg-dim); }
.prose strong { color: var(--fg); font-weight: 700; }
.prose + .prose { margin-top: var(--s-4); }

/* --- CROMADO --------------------------------------------------------------
   Metal polido em texto. O brilho varre uma vez quando o bloco entra —
   não fica piscando sozinho.                                           */

.chrome {
  background-image: var(--chrome);
  background-size: 100% 260%;
  background-position: 0% 42%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.28))
          drop-shadow(0 6px 26px rgba(170,190,230,.20));
}
.chrome.is-in { animation: shimmer var(--d-shimmer) var(--e-soft) 1 both; }
@keyframes shimmer {
  0%   { background-position: 0% 100%; }
  100% { background-position: 0% 42%; }
}

/* --- BRILHO QUE SEGUE O CURSOR --------------------------------------------
   A ideia do "Flat Text" do Originkit (luz correndo pelo metal atrás do
   ponteiro) sem os 150 KB de three.js e, principalmente, sem transformar o
   texto em textura — aqui ele continua sendo texto de verdade.

   São duas camadas de fundo recortadas pelo mesmo texto: um brilho radial
   na posição do cursor, por cima do degradê cromado.

   O @property é o truque: sem registrar o tipo, --mx e --my seriam apenas
   strings e não poderiam ser animadas nem ter transição.                 */

/* inherits: true porque na headline as variáveis são escritas na LINHA e
   lidas por cada letra — sem herança, cada letra ficaria no valor inicial. */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

.sheen {
  --mx: 50%; --my: 50%;
  /* A caixa precisa abraçar a palavra: num bloco de largura cheia, o
     ponteiro passaria metade do tempo longe do texto e o brilho ficaria
     fora do recorte, sem aparecer. */
  display: inline-block;
  background-image:
    radial-gradient(30% 130% at var(--mx) var(--my),
      rgba(255,255,255,.95), rgba(255,255,255,.35) 38%, rgba(255,255,255,0) 70%),
    var(--chrome);
  background-size: 100% 100%, 100% 260%;
  background-position: 0 0, 0% 42%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.28))
          drop-shadow(0 8px 30px rgba(170,190,230,.22));
  /* Sem cursor (celular, ou ninguém passando por cima) a luz não fica
     parada: vagueia devagar sozinha, como o "drift" do original. */
  animation: sheenDrift 11s var(--e-soft) infinite alternate;
  cursor: default;
}

@keyframes sheenDrift {
  0%   { --mx: 20%; --my: 32%; }
  50%  { --mx: 56%; --my: 72%; }
  100% { --mx: 84%; --my: 28%; }
}

/* Enquanto o ponteiro manda, a divagação para. A transição é o "follow":
   a luz chega ao cursor com um atraso curto, não grudada nele. */
.sheen.is-tracking {
  animation: none;
  transition: --mx 240ms var(--e-soft), --my 240ms var(--e-soft);
}

/* Estrelinhas de brilho — SVG posicionado, nunca emoji */
.spark { position: absolute; color: #fff; pointer-events: none;
         filter: drop-shadow(0 0 6px rgba(200,220,255,.9)); }
.spark svg { width: 100%; height: 100%; }
.is-in .spark { animation: sparkPop 520ms var(--e-settle) both; }
@keyframes sparkPop {
  0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: .92; }
}

/* --- BLUR REVEAL DA HEADLINE ----------------------------------------------
   Porte do "blur-reveal" do Spell UI para CSS puro: cada letra entra saindo
   de um desfoque, escalonada. O `--i` de cada letra vem do HTML.
   A caixa da letra é inline-block porque translate não funciona em inline. */

.ch { display: inline-block; }
/* O espaço precisa de largura própria E de white-space: pre. Sem o pre, o
   espaço dentro de um inline-block é colapsado e o texto vira "Cortovídeo"
   para quem lê o DOM — buscador inclusive. */
.ch--sp { width: 0.26em; white-space: pre; }

/* ATENÇÃO, é o detalhe que quebra este componente:
   `filter` num FILHO cria um contexto de renderização próprio e o
   `background-clip: text` do PAI deixa de recortar aquele filho. Resultado:
   letra com preenchimento transparente e nenhum degradê atrás — invisível.
   Por isso o cromado mora em cada letra, não na linha. Como o degradê é
   quase vertical (177deg) e as letras têm a mesma altura, letra a letra
   fica visualmente idêntico ao contínuo. */
.chrome--hero {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.28))
          drop-shadow(0 6px 26px rgba(170,190,230,.20));
}
.chrome--hero .ch {
  /* Duas camadas: a luz que segue o cursor, por cima do cromado.
     A camada da luz é dimensionada pela LINHA inteira (--lw) e deslocada
     pela posição da letra (--lx). Sem isso, cada letra mostraria o próprio
     brilho na mesma posição relativa e a luz apareceria repetida em todas. */
  background-image:
    radial-gradient(26% 120% at var(--mx) var(--my),
      rgba(255,255,255,.95), rgba(255,255,255,.30) 40%, rgba(255,255,255,0) 72%),
    var(--chrome);
  background-size: var(--lw, 100%) 100%, 100% 260%;
  background-position: calc(-1 * var(--lx, 0px)) 0, 0% 42%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Respiro nos DOIS eixos. O background-clip só pinta dentro da caixa da
     letra, e a caixa de uma letra é pequena demais para o próprio desenho
     dela nos dois sentidos. A margem negativa devolve o espaço ao layout,
     então nada se move de lugar.

     Vertical: line-height 0.86 deixa a caixa mais curta que o glifo. Com
     0.22em faltavam 1.1px embaixo e o rabo do "g" saía decepado.

     Horizontal: a caixa é a largura de AVANÇO, que o letter-spacing de
     -0.03em ainda encolhe — mas a serifa passa disso. Medido letra a letra,
     faltavam de 2px ("." ) a 8.9px ("g") à direita, em TODAS as letras.

     Os dois valores vieram de medida. Trocando fonte, tamanho ou
     letter-spacing, meça de novo antes de assumir que continua servindo. */
  padding-block: 0.32em;
  margin-block: -0.32em;
  padding-inline: 0.32em;
  margin-inline: -0.32em;
}

/* O espaço fica FORA da regra acima. Ele tem `width` fixa e o reset usa
   box-sizing: border-box, então o padding seria descontado da largura em vez
   de somado — o espaço zerava e as palavras grudavam ("Vocêgrava"). Como não
   tem desenho nenhum para proteger, não precisa da folga. */
.chrome--hero .ch--sp {
  padding-inline: 0;
  margin-inline: 0;
}

/* A luz da headline vagueia sozinha, mas só depois das letras assentarem. */
.sheen-text {
  --mx: 50%; --my: 50%;
  animation: sheenDrift 11s var(--e-soft) var(--d-chrome) infinite alternate;
}
.sheen-text.is-tracking {
  animation: none;
  transition: --mx 240ms var(--e-soft), --my 240ms var(--e-soft);
}

.js .hero__title .ch { opacity: 0; filter: blur(14px); transform: translateY(0.12em); }

/* A letra sai do desfoque. O brilho varrendo saiu daqui de propósito: quem
   dá vida ao cromado agora é a luz que vagueia/segue o cursor, e duas luzes
   na mesma palavra brigariam. */
.js .hero__title.is-revealed .ch {
  animation: blurIn var(--d-reveal) var(--e-soft) forwards;
  animation-delay: calc(var(--i, 0) * var(--d-seg));
}
@keyframes blurIn {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* --- ASSINATURA ------------------------------------------------------------
   Mesmo princípio do componente do Spell UI (glifo virando path e o traço
   sendo desenhado), mas a conversão foi feita aqui no projeto em vez de em
   tempo de execução: o path já vem pronto no HTML, então não carrega fonte
   nem biblioteca. O comprimento de cada traço o JS mede uma vez.          */

.sig { margin-top: var(--s-7); }
.sig__art {
  width: min(330px, 78%); height: auto; overflow: visible;
  color: var(--c-paper);
}
.sig figcaption { margin-top: var(--s-4); }

/* A TINTA. Não é o contorno da letra sendo desenhado e depois preenchido —
   isso lia como "desenho", não como escrita. Aqui é um traço GROSSO correndo
   pelo contorno, recortado pela própria letra (clip-path). Resultado: a
   tinta aparece seguindo o caminho da caneta e a letra vai surgindo. */
.sig__ink {
  fill: none;
  stroke: currentColor;
  stroke-width: 30;          /* maior que a espessura da letra; o clip apara */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.js .sig__ink { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.js .sig.is-writing .sig__ink {
  animation: sigWrite var(--d-sig) linear forwards;
  animation-delay: calc(var(--i, 0) * var(--d-sig-step));
}
@keyframes sigWrite { to { stroke-dashoffset: 0; } }

/* A mesma assinatura na barra do topo, pequena e parada. */
.sig__mini {
  height: 1.55rem; width: auto; overflow: visible;
  fill: currentColor;
  display: block;
}

/* --- ASSENTAR: o vocabulário de movimento do site -------------------------
   Os blocos caem de cima, giram um pouco e assentam passando do ponto.
   É recorte sendo jogado na mesa — não é fade-up.                      */

.js .settle { opacity: 0; transform: translateY(34px) rotate(calc(var(--tilt, 0deg) * 2.6)) scale(.955); }
.js .settle.is-in { animation: settle var(--d-settle) var(--e-settle) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes settle { to { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); } }
.no-js .settle { opacity: 1; }

/* --- CABEÇALHO: pílula flutuante ------------------------------------------ */

.header { position: fixed; top: var(--s-4); left: 0; right: 0; z-index: var(--z-header); pointer-events: none; }
.header__in {
  pointer-events: auto;
  margin-inline: auto; width: fit-content; max-width: calc(100% - var(--s-6));
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  background: rgba(16, 14, 20, 0.82);
  border: 1px solid var(--c-void-3);
  box-shadow: var(--sh-ui);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
/* Agora carrega a assinatura, não texto: só precisa de área de clique. */
.header__id { display: flex; align-items: center; text-decoration: none; padding-block: var(--s-1); }
.header__nav { display: flex; gap: var(--s-1); margin-inline: var(--s-3); }
.header__nav a {
  display: block; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  font-size: var(--t-small); color: var(--c-paper-dim); text-decoration: none;
  transition: color var(--d-cut) var(--e-cut), background var(--d-cut) var(--e-cut);
}
.header__nav a:hover { color: var(--c-paper); background: rgba(239,235,227,.07); }
.header__nav a[aria-current="true"] { color: var(--c-void); background: var(--c-gold); }
@media (max-width: 62rem) { .header__nav { display: none; } }

/* --- BOTÕES --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6); border-radius: var(--r-pill);
  background: var(--c-gold); color: var(--c-void);
  font-weight: 700; font-size: var(--t-small); text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(212,167,44,.6);
  transition: transform var(--d-cut) var(--e-settle), box-shadow var(--d-cut) var(--e-cut);
}
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 40px -12px rgba(212,167,44,.75); }
.btn:active { transform: translateY(0) scale(.99); }
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }

.btn--quiet {
  background: transparent; color: var(--fg);
  border: 1px solid var(--line); box-shadow: none;
}
.btn--quiet:hover { background: rgba(239,235,227,.07); border-color: var(--c-paper-dim); box-shadow: none; }
.on-card .btn--quiet:hover { background: rgba(22,19,15,.05); }
.btn--sm { padding: var(--s-3) var(--s-4); }

/* --- CARTÃO: a peça central da colagem ------------------------------------ */

.card {
  position: relative;
  background: var(--c-card); color: var(--c-ink);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--d-cut) var(--e-settle), box-shadow var(--d-cut) var(--e-cut);
}
.card--dark { background: var(--c-void-2); color: var(--c-paper); border: 1px solid var(--c-void-3); }
.card--pad { padding: var(--s-6); }
.card--hover:hover { transform: rotate(0deg) translateY(-5px); box-shadow: var(--sh-lift); }

/* Textura do cartão: grão de papel, para não ficar um retângulo chapado */
.card::before, .midcta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: multiply;
}
.card--dark::before { mix-blend-mode: screen; opacity: .045; }

/* --- HERO ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(7rem, 14vh, 10rem);
  /* Bem menor que --sec-y de propósito: a seção seguinte já traz a margem
     de topo dela inteira, e as duas somadas davam 272px de vão morto entre
     o vídeo em destaque e o título "Os cortes". */
  padding-bottom: calc(var(--sec-y) * 0.32);
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--halo); pointer-events: none; }

.hero__title { text-align: center; }
/* As estrelinhas se posicionam contra o H1, não contra o bloco inteiro —
   senão caem em cima do rótulo e do parágrafo de apoio no mobile. */
.hero__title h1 { position: relative; display: block; }
.hero__title .l1 {
  /* fit-content para a caixa abraçar a palavra: é contra ela que a posição
     do cursor é medida, e precisa ser a mesma caixa que a luz usa. */
  display: block; width: fit-content; margin-inline: auto;
  font-family: var(--f-display);
  font-variation-settings: "SOFT" var(--fr-soft), "WONK" 1, "opsz" 144;
  font-weight: 900; font-size: var(--t-hero); line-height: .86; letter-spacing: -0.03em;
}
/* Caixa alternada: letras soltas maiores, como no letreiro de cartaz */
.hero__title .up { font-size: 1.14em; line-height: 0; }
.hero__title .l2 {
  display: block; margin-top: var(--s-3);
  font-family: var(--f-display);
  font-variation-settings: "SOFT" var(--fr-soft), "WONK" 1, "opsz" 72;
  font-style: italic; font-weight: 500;
  font-size: clamp(1.35rem, 4.2vw, 3rem); letter-spacing: 0.01em;
  color: var(--c-paper-dim);
}

.hero__sub { margin: var(--s-6) auto 0; text-align: center; max-width: 52ch; font-size: var(--t-lead); color: var(--c-paper-dim); }
.hero__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }

/* A colagem do hero */
.collage {
  margin-top: clamp(var(--s-7), 7vw, var(--s-9));
  display: grid; gap: var(--s-5);
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 6fr) minmax(0, 3.2fr);
  align-items: center;
}
@media (max-width: 70rem) {
  .collage { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .collage__main { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 40rem) { .collage { grid-template-columns: 1fr; } }

.collage__side { display: grid; gap: var(--s-5); }

/* --- JANELA DE PLAYER (interface como material gráfico) -------------------- */

.window {
  border-radius: var(--r-ui); overflow: hidden;
  background: var(--c-void-2); border: 1px solid var(--c-void-3);
  box-shadow: var(--sh-lift);
  font-family: var(--f-ui);
}
.window__bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(#232030, #1a1824);
  border-bottom: 1px solid var(--c-void-3);
}
.window__lights { display: flex; gap: 6px; }
.window__lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.window__lights i:nth-child(1) { background: #FF5F57; }
.window__lights i:nth-child(2) { background: #FEBC2E; }
.window__lights i:nth-child(3) { background: #28C840; }
.window__name { font-size: 12px; color: var(--c-paper-dim); margin-inline: auto; padding-right: 34px; }

.window__stage { position: relative; aspect-ratio: 16/9; background: #000; }
.window__stage img { width: 100%; height: 100%; object-fit: cover; }
.window__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.window__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8,7,10,.3); transition: background var(--d-cut) var(--e-cut);
}
.window__play:hover { background: rgba(8,7,10,.08); }
.play-dot {
  display: grid; place-items: center; width: clamp(58px, 6vw, 78px); aspect-ratio: 1;
  border-radius: 50%; background: rgba(244,241,234,.94); color: var(--c-void);
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  transition: transform var(--d-cut) var(--e-settle), background var(--d-cut) var(--e-cut);
}
.window__play:hover .play-dot { transform: scale(1.09); background: var(--c-gold); }
.play-dot svg { width: 34%; height: 34%; margin-left: 8%; }

.window__foot { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }

/* Legenda do destaque: fica FORA da janela porque é conteúdo editorial, não
   parte da interface imitada. É ela que diz de quem é o vídeo e por que
   vale assistir — sem isso o player lia como vídeo institucional qualquer. */
.window__cap { margin-top: var(--s-5); max-width: 46ch; }
.window__cap p + p { margin-top: var(--s-3); color: var(--fg-dim); }
.window__cap strong { color: var(--fg); font-weight: 700; }
.window__track { flex: 1; height: 4px; border-radius: var(--r-pill); background: rgba(239,235,227,.14); overflow: hidden; }
.window__track i { display: block; height: 100%; width: 34%; background: var(--c-gold); border-radius: inherit; }
.window__time { font-size: 11px; color: var(--c-paper-dim); font-variant-numeric: tabular-nums; }

/* --- DIÁLOGO (interface como material gráfico) ---------------------------- */

.dialog {
  border-radius: var(--r-ui); overflow: hidden;
  background: rgba(247,246,243,.92);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--sh-ui); color: var(--c-ink);
  font-family: var(--f-ui); text-align: center;
  transform: rotate(var(--tilt, 0deg));
}
.dialog__body { padding: var(--s-5) var(--s-5) var(--s-4); }
.dialog__body h3 { font-size: 15px; font-weight: 600; }
.dialog__body p { font-size: 13px; color: #5c5850; margin-top: 4px; line-height: 1.4; }
.dialog__actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(0,0,0,.12); }
.dialog__actions a {
  padding: var(--s-3); font-size: 15px; color: #0A7CFF; text-decoration: none;
  transition: background var(--d-cut) var(--e-cut);
}
.dialog__actions a:hover { background: rgba(10,124,255,.08); }
.dialog__actions a + a { border-left: 1px solid rgba(0,0,0,.12); font-weight: 600; }

/* --- BALÃO DE MENSAGEM ---------------------------------------------------- */

.bubble {
  position: relative; padding: var(--s-5) var(--s-5) var(--s-5);
  border-radius: 22px; background: var(--c-card); color: var(--c-ink);
  box-shadow: var(--sh-card); transform: rotate(var(--tilt, 0deg));
}
.bubble::after {
  content: ""; position: absolute; left: 26px; bottom: -11px;
  width: 22px; height: 22px; background: var(--c-card);
  clip-path: polygon(0 0, 100% 0, 18% 100%);
}
.bubble q { quotes: none; font-family: var(--f-display);
            font-variation-settings: "SOFT" var(--fr-soft), "WONK" 1, "opsz" 40;
            font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.34; }
.bubble .hl { background: linear-gradient(transparent 62%, rgba(212,167,44,.5) 62%); }

/* --- PÍLULAS DE FERRAMENTA ------------------------------------------------ */

.pills { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pill {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  background: var(--c-void-2); border: 1px solid var(--c-void-3);
  font-size: var(--t-small); font-weight: 600;
  transition: transform var(--d-cut) var(--e-settle), border-color var(--d-cut) var(--e-cut);
}
.pill:hover { transform: translateY(-3px); border-color: var(--c-gold); }
.pill svg { width: 1.1rem; height: 1.1rem; color: var(--c-gold); flex: none; }
.on-card .pill { background: rgba(22,19,15,.05); border-color: rgba(22,19,15,.12); }

/* --- CABEÇA DE SEÇÃO ------------------------------------------------------ */

.sec { position: relative; padding-block: var(--sec-y); }
.sec-head { display: flex; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; }
.sec-head__main { flex: 1 1 22rem; }
.sec-head h2 { font-size: var(--t-title); margin-top: var(--s-4); }
.sec-head h2 em { font-style: italic; font-variation-settings: "SOFT" var(--fr-soft), "WONK" 1, "opsz" 100; color: var(--c-gold); }
.sec-head__note { margin-top: var(--s-4); }

/* --- TIRA DE FILME (galeria de reels) ------------------------------------- */

.strip-wrap { position: relative; margin-top: var(--s-8); }

.perf {
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='20'%3E%3Crect x='5' y='4' width='18' height='12' rx='3.5' fill='%23EFEBE3' fill-opacity='.42'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}
.strip-wrap .perf:first-child { border-top: 1px solid var(--c-void-3); }
.strip-wrap .perf:last-child  { border-bottom: 1px solid var(--c-void-3); }

.strip {
  display: flex; gap: var(--s-4);
  padding: var(--s-5) 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  background: var(--c-void-2);
}
.strip::-webkit-scrollbar { display: none; }
.strip::before, .strip::after { content: ""; flex: 0 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }

.frame { flex: 0 0 auto; width: clamp(150px, 17vw, 215px); scroll-snap-align: center; }
.frame[hidden] { display: none; }
.frame__btn { display: block; width: 100%; text-align: left; }
.frame__shot {
  position: relative; display: block; aspect-ratio: 9/16; overflow: hidden;
  border-radius: var(--r-tile); background: #000;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.9);
}
.frame__shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.18) brightness(.62) contrast(1.04);
  transition: filter 420ms var(--e-soft), transform 620ms var(--e-soft);
}
/* O quadro no centro da tira ganha cor — como o frame que está "no ar" */
.frame.is-live .frame__shot img { filter: saturate(1) brightness(1) contrast(1); transform: scale(1.03); }
.frame__btn:hover .frame__shot img { filter: saturate(1) brightness(1); transform: scale(1.05); }

.frame__num {
  position: absolute; top: 10px; left: 10px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(8,7,10,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
}
.frame.is-live .frame__num { background: var(--c-gold); color: var(--c-void); }
.frame__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); }

.strip-hint { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); justify-content: center; }

/* --- FILTROS -------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.filter {
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  border: 1px solid var(--c-void-3); color: var(--c-paper-dim);
  font-size: var(--t-small); font-weight: 600;
  transition: all var(--d-cut) var(--e-cut);
}
.filter:hover { color: var(--c-paper); border-color: var(--c-paper-dim); }
.filter[aria-pressed="true"] { background: var(--c-card); border-color: var(--c-card); color: var(--c-ink); }

/* --- SOBRE ---------------------------------------------------------------- */

.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--s-6), 4vw, var(--s-8)); margin-top: var(--s-8); align-items: start; }
@media (max-width: 62rem) { .about { grid-template-columns: 1fr; } }

/* Espaço reservado para a foto do Ian, enquanto ela não chega */
.photo {
  position: relative; max-width: 440px;   /* sem isso o 4:5 vira um vão de 900px */
  border-radius: var(--r-card); overflow: hidden;
  background: var(--c-void-2); border: 1px solid var(--c-void-3);
}
/* align-content: center agrupa as linhas no meio. Só place-items faz as
   linhas esticarem e o conteúdo se espalhar pelos cantos da caixa. */
.photo__slot { aspect-ratio: 4/5; display: grid; align-content: center; justify-items: center;
               gap: var(--s-3); padding: var(--s-6); text-align: center; }
.photo__slot svg { width: 2.5rem; height: 2.5rem; color: var(--c-paper-dim); }
.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.photo__cap { padding: var(--s-4); border-top: 1px solid var(--c-void-3); display: flex; justify-content: space-between; gap: var(--s-3); }

.facts { margin-top: var(--s-6); }
.fact { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-4); padding-block: var(--s-4); border-top: 1px solid var(--line); }
.fact:last-child { border-bottom: 1px solid var(--line); }
.fact dt { padding-top: .18rem; }
.fact dd { margin: 0; }

/* --- SERVIÇOS ------------------------------------------------------------- */

.services { margin-top: var(--s-8); }
.service {
  display: grid; grid-template-columns: 3.5rem minmax(0,3fr) minmax(0,5fr) auto;
  gap: var(--s-5); align-items: start;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-tile);
  border-bottom: 1px solid var(--line);
  transition: background var(--d-cut) var(--e-cut);
}
.service:hover { background: var(--c-void-2); }
.service__ico { width: 2.5rem; height: 2.5rem; color: var(--c-gold); }
.service h3 { font-family: var(--f-display); font-variation-settings: "SOFT" var(--fr-soft), "WONK" 1, "opsz" 40;
              font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.05; }
@media (max-width: 62rem) {
  .service { grid-template-columns: 3rem 1fr; }
  .service > p, .service > .label { grid-column: 2; }
}

/* Terceiro serviço (roteiro) é deliberadamente secundário: existe, mas não
   compete com os dois formatos que são o trabalho principal. */
/* Diferenciado por cor e tamanho, NÃO por opacity: a animação de entrada
   termina em opacity 1 com `forwards` e ganharia de qualquer opacidade
   estática declarada aqui. */
.service--soft h3 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--fg-dim); }
.service--soft .service__ico { width: 2rem; height: 2rem; color: var(--c-paper-dim); }
.service--soft .label { color: var(--c-paper-dim); }

/* Produção completa: é o serviço de maior ticket e o único presencial, então
   ganha um destaque discreto — fio dourado à esquerda e fundo levantado.
   Sem opacity nem transform aqui: a animação de entrada terminaria por cima. */
.service--full {
  background: var(--c-void-2);
  border-left: 3px solid var(--c-gold);
  padding-inline: var(--s-6);
}
.service--full:hover { background: var(--c-void-3); }
.service--full .service__ico { color: var(--c-gold); }

/* A linha que substituiu a seção Ferramentas inteira. */
.toolline {
  display: flex; gap: var(--s-4); align-items: flex-start;
  margin-top: var(--s-6); padding: var(--s-5) var(--s-6);
  border-radius: var(--r-tile); border: 1px dashed var(--c-void-3);
  color: var(--fg-dim); max-width: 78ch;
}
.toolline svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--c-gold); margin-top: .15em; }
.toolline strong { color: var(--fg); font-weight: 700; }

/* --- CTA DO MEIO ----------------------------------------------------------
   Logo depois da galeria, enquanto a pessoa ainda está com os vídeos na
   cabeça. É o único bloco claro entre duas seções escuras.              */

.sec--tight { padding-block: clamp(2rem, 5vw, 4rem); }

.midcta {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  background: var(--c-card); color: var(--c-ink);
  border-radius: var(--r-card); box-shadow: var(--sh-card);
  transform: rotate(var(--tilt, 0deg));
}
.midcta h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }

/* --- COMO FUNCIONA -------------------------------------------------------- */

.steps {
  margin-top: var(--s-8);
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.step {
  display: grid; gap: var(--s-4); align-content: start;
  padding: var(--s-6);
  border-radius: var(--r-tile);
  background: var(--c-void-2); border: 1px solid var(--c-void-3);
}
.step__n {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" var(--fr-soft), "WONK" 0, "opsz" 72;
  font-weight: 900; font-size: 2.25rem; line-height: 1;
  color: var(--c-gold);
}
.step p { color: var(--fg-dim); }
.steps__note { margin-top: var(--s-5); }

/* --- FAQ ------------------------------------------------------------------
   <details> nativo: abre e fecha sem uma linha de JS, e o leitor de tela
   já anuncia o estado sozinho.                                          */

.faq { margin-top: var(--s-8); display: grid; gap: var(--s-3); max-width: 62rem; }
.faq__item {
  border-radius: var(--r-tile); overflow: hidden;
  background: var(--c-void-2); border: 1px solid var(--c-void-3);
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--t-lead);
  transition: background var(--d-cut) var(--e-cut);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__item summary:hover { background: rgba(239, 235, 227, .05); }
.faq__item summary svg {
  width: 1.2rem; height: 1.2rem; flex: none; color: var(--c-gold);
  transition: transform var(--d-cut) var(--e-soft);
}
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__a { padding: 0 var(--s-6) var(--s-6); }
.faq__a p { color: var(--fg-dim); max-width: 68ch; }

/* --- CONTATO: ingresso ---------------------------------------------------- */

.ticket {
  position: relative; margin-top: var(--s-7);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  background: var(--c-card); color: var(--c-ink);
  border-radius: var(--r-card); box-shadow: var(--sh-lift);
  overflow: hidden;
}
@media (max-width: 58rem) { .ticket { grid-template-columns: 1fr; } }

.ticket__main { padding: clamp(var(--s-6), 4vw, var(--s-8)); }
.ticket__stub {
  position: relative; padding: clamp(var(--s-6), 4vw, var(--s-8)) var(--s-6);
  background: var(--c-card-2);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-4);
}
/* Linha serrilhada entre o corpo e o canhoto */
.ticket__stub::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background-image: linear-gradient(var(--c-ink) 50%, transparent 50%);
  background-size: 2px 12px; opacity: .3;
}
@media (max-width: 58rem) {
  .ticket__stub::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px;
    background-image: linear-gradient(90deg, var(--c-ink) 50%, transparent 50%); background-size: 12px 2px; }
}
.ticket h2 { font-size: var(--t-title); }
.ticket h2 em { font-style: italic; font-variation-settings: "SOFT" var(--fr-soft), "WONK" 1, "opsz" 100; color: var(--c-gold-deep); }
.ticket__line { display: flex; align-items: center; gap: var(--s-3); }
.ticket__line svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--c-gold-deep); }
.ticket__line a { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--c-gold); }

/* --- RODAPÉ: cartela de FIM ----------------------------------------------- */

.footer { padding-block: var(--s-8) var(--s-7); text-align: center; }
.footer__fim {
  font-family: var(--f-display); font-variation-settings: "SOFT" var(--fr-soft), "WONK" 1, "opsz" 144;
  font-weight: 900; font-size: clamp(4rem, 16vw, 12rem); line-height: .82; letter-spacing: -0.04em;
}
.footer__meta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; align-items: center; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--c-gold); }

/* --- MODAL DO REEL -------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; }
.modal.is-open { display: block; }
.modal[hidden] { display: none !important; }
.modal__veil { position: absolute; inset: 0; background: rgba(8,7,10,.93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal__in { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: var(--s-4); padding: var(--s-5) var(--gutter) var(--s-6); }
.modal__top { display: flex; align-items: center; gap: var(--s-4); }
.modal__top .spacer { flex: 1; }
.modal__close {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  border: 1px solid var(--c-void-3); background: rgba(16,14,20,.8);
  font-size: var(--t-small); font-weight: 600;
}
.modal__close:hover { background: var(--c-card); color: var(--c-ink); border-color: var(--c-card); }
.modal__close svg { width: .85rem; height: .85rem; }
.modal__stage { display: grid; place-items: center; min-height: 0; }
.modal__box { position: relative; height: 100%; aspect-ratio: 9/16; max-width: 100%; border-radius: var(--r-tile); overflow: hidden; background: #000; box-shadow: var(--sh-lift); }
.modal__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.is-locked { overflow: hidden; }

/* --- MOVIMENTO REDUZIDO ---------------------------------------------------
   Sem desfoque, sem assentar, sem brilho. Tudo já nasce pronto.        */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: 1ms !important;
  }
  .js .settle { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
  .strip { scroll-snap-type: none; }
  /* Headline e assinatura já nascem prontas, sem depender de animação. */
  .js .hero__title .ch { opacity: 1; filter: none; transform: none; }
  .js .sig__ink { stroke-dasharray: none; stroke-dashoffset: 0; }
  /* O brilho para de vaguear sozinho; seguir o cursor continua, porque é a
     pessoa que comanda — não é movimento imposto a ela. */
  .sheen { animation: none; }
}

/* A headline é feita de letras em inline-block, e o navegador pode quebrar a
   linha entre duas delas — numa tela estreita isso vira "Voc / ê gra / va.".
   Agrupar por palavra deixa o espaço como único ponto de quebra possível. */
.hw { display: inline-block; white-space: nowrap; }