/* ==========================================================================
   Páginas de categoria: template compartilhado + layout específico de cada mídia
   ========================================================================== */
@layer pages {

  /* ======================= TEMPLATE (todas as categorias) ======================= */
  .cat-hero { position: relative; isolation: isolate; overflow: clip; padding-block: calc(var(--nav-h) + var(--sp-16)) var(--sp-16); min-block-size: 78svh; display: grid; align-content: end; }
  .cat-hero__bg { position: absolute; inset: 0; z-index: var(--z-bg); display: grid; place-items: center; pointer-events: none; }
  .cat-hero__giant { font: 400 var(--fs-giant)/.8 var(--font-display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgb(244 239 232 / .14); white-space: nowrap; }
  .cat-hero__glow { position: absolute; inset: -30% -10% auto 30%; block-size: 90%; z-index: var(--z-atmos); pointer-events: none; background: radial-gradient(45% 45% at 50% 50%, var(--glow, rgb(220 105 25 / .45)), transparent 70%); filter: blur(40px); }
  .cat-hero__inner { position: relative; z-index: var(--z-fg); display: grid; gap: var(--sp-8); }
  .breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); color: var(--c-muted); font-size: var(--fs-100); letter-spacing: .08em; text-transform: uppercase; }
  .breadcrumb a { display: inline-block; padding: .8rem .2rem; margin: -.8rem -.2rem; }   /* toque de 44px, mesmo layout */
  .breadcrumb a:hover { color: var(--c-paper); }
  .breadcrumb [aria-current] { color: var(--c-accent); }
  .cat-hero__title { font-size: var(--fs-800); }
  .cat-hero__title .accent-serif { font-size: 1.05em; }
  .cat-hero__row { display: grid; gap: var(--sp-8); border-block-start: 1px solid var(--c-line); padding-block-start: var(--sp-8); }
  .cat-hero__lead { font-size: var(--fs-400); line-height: 1.4; max-inline-size: 42ch; }
  .cat-hero__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-6); }
  .cat-hero__facts dt { color: var(--c-muted); font-size: var(--fs-100); letter-spacing: .14em; text-transform: uppercase; }
  .cat-hero__facts dd { margin: var(--sp-2) 0 0; font-weight: 600; }
  @media (min-width: 1024px) { .cat-hero__row { grid-template-columns: 1fr 1fr; align-items: start; } }

  /* ======================= 01 · SOCIAL MEDIA — masonry flutuante =======================
     3 colunas explícitas (em vez de CSS columns) para que cada coluna tenha data-speed
     próprio e a grade "respire" no scroll sem reordenar os posts.
     ==================================================================================== */
  .masonry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
  .masonry__col { display: grid; gap: var(--sp-3); }
  .masonry__col:nth-child(n + 3) { display: contents; } /* 2 colunas até o tablet: a 3ª e a 4ª distribuem os itens na grade */
  @media (min-width: 1024px) {
    .masonry { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1vw, 1.75rem); }
    .masonry__col { gap: clamp(1rem, .5rem + 1vw, 1.75rem); }
    .masonry__col:nth-child(n + 3) { display: grid; }
    .masonry__col:nth-child(2) { margin-block-start: var(--sp-24); }
    .masonry__col:nth-child(4) { margin-block-start: var(--sp-16); }
    /* colunas terminam juntas: a sobra da coluna mais curta vira espaço extra entre os cards (sem buraco no fim) */
    .masonry { align-items: stretch; }
    .masonry__col { align-content: space-between; }
  }

  .post { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); isolation: isolate; }
  .post img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }
  .post__cap {
    position: absolute; inset: auto 0 0; padding: var(--sp-8) var(--sp-4) var(--sp-4); display: grid; gap: .15rem;
    background: linear-gradient(transparent, rgb(10 10 11 / .85)); font-size: var(--fs-100);
    translate: 0 101%; transition: translate .6s var(--ease-out-expo);
  }
  .post__cap b { font-size: var(--fs-200); }
  .post:is(:hover, :focus-within, .is-active) .post__cap { translate: 0 0; }
  @media (hover: none) { .post__cap { translate: 0 0; } }

  /* Card estilo feed (header + ações) */
  .post--ig { background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-line); }
  .post--ig .post__cap { position: static; translate: none; background: none; padding: var(--sp-3) var(--sp-4) var(--sp-4); color: var(--c-muted); }
  .post__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); font: 700 var(--fs-100)/1 var(--font-ui); }
  .post__avatar { inline-size: 2rem; aspect-ratio: 1; border-radius: 50%; padding: 2px; background: conic-gradient(var(--c-brand), var(--c-blue), var(--c-brand)); }
  .post__avatar img { border-radius: 50%; block-size: 100%; }
  .post__actions { display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4) 0; }
  .post__actions svg { inline-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

  /* Série 2×2 (várias peças do mesmo cliente) */
  .post--series { padding: var(--sp-3); background: var(--c-surface-2); }
  .post--series .post__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--r-md); overflow: hidden; }
  .post--series .post__cap { position: static; translate: none; background: none; padding: var(--sp-3) var(--sp-2) var(--sp-1); }

  /* Estático padronizado: a arte no formato original + a barra de ícones do feed (decorativa, sem texto).
     O card inteiro abre a imagem em tela cheia (lightbox) */
  .post--feed { box-shadow: 0 0 0 1px var(--c-line); cursor: pointer; }
  .post__open { display: block; inline-size: 100%; padding: 0; border: 0; background: none; overflow: hidden; cursor: pointer; }
  /* proporção fixa ANTES da imagem carregar (lazy): nada pula de lugar durante a rolagem */
  .post--feed img { aspect-ratio: 1; block-size: auto; object-fit: cover; transition: scale .9s var(--ease-out-expo); }
  .post--tall img { aspect-ratio: 4 / 5; }
  .post--feed:hover img { scale: 1.035; }
  html.is-scrolling .post--feed:hover img { scale: 1; }
  .post--feed .post__actions { align-items: center; padding: var(--sp-3) var(--sp-4); color: var(--c-paper); }
  .post--feed .post__actions svg:last-child { margin-inline-start: auto; }
  .post__open:focus-visible { outline-offset: -3px; }

  /* ---------- Último trabalho: post com carrossel que passa sozinho ---------- */
  @media (min-width: 1024px) { .reel-stage--social .reel-stage__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .reel-stage__hint { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-muted); font-size: var(--fs-100); letter-spacing: .12em; text-transform: uppercase; }
  .reel-stage__hint svg { inline-size: 1.4rem; fill: none; stroke: var(--c-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .reel-stage__tag .dot { inline-size: .55rem; aspect-ratio: 1; border-radius: 50%; background: var(--c-brand); box-shadow: 0 0 0 4px rgb(220 105 25 / .25); }

  /* largura limitada pela altura da tela: o post + a faixa de miniaturas cabem inteiros sem rolar */
  .slides { display: grid; gap: var(--sp-4); inline-size: 100%; max-inline-size: clamp(19rem, (100svh - 15rem) / 1.5625, 30rem); justify-self: center; }
  .slides__post { border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); box-shadow: 0 60px 120px -30px rgb(0 0 0 / .9), 0 0 0 1px var(--c-line-strong); }
  .slides__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); font: 700 var(--fs-100)/1.2 var(--font-ui); }
  .slides__head small { display: block; color: var(--c-muted); font-weight: 500; }
  .slides__toggle::after { content: ""; position: absolute; inset: -.25rem; }   /* toque de 44px */
  .slides__toggle { position: relative; margin-inline-start: auto; display: grid; place-items: center; inline-size: 2.25rem; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--c-line-strong); transition: background-color .25s, color .25s; }
  .slides__toggle:hover { background: var(--c-paper); color: var(--c-ink); }
  .slides__toggle svg { inline-size: .8rem; fill: currentColor; }
  .slides__toggle .i-play, .slides.is-paused .slides__toggle .i-pause { display: none; }
  .slides.is-paused .slides__toggle .i-play { display: block; }

  .slides__viewport { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #000; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
  .slides.is-dragging .slides__viewport { cursor: grabbing; }
  .slides__track { display: flex; block-size: 100%; }
  .slides__slide { flex: 0 0 100%; }
  .slides__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; }
  .slides__bars { position: absolute; z-index: 2; inset: var(--sp-3) var(--sp-3) auto; display: flex; gap: 4px; pointer-events: none; }
  .slides__bars i { flex: 1; block-size: 3px; border-radius: 3px; overflow: hidden; background: rgb(255 255 255 / .3); }
  .slides__bars b { display: block; block-size: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
  .slides__count { position: absolute; z-index: 2; inset: calc(var(--sp-3) + 12px) var(--sp-3) auto auto; padding: .3rem .6rem; border-radius: var(--r-pill); background: rgb(0 0 0 / .55); font: 600 .75rem/1 var(--font-ui); pointer-events: none; }

  .slides__foot { position: relative; display: flex; align-items: center; padding: var(--sp-3) var(--sp-4); }
  .slides__foot .post__actions { padding: 0; }
  .slides__foot > svg { margin-inline-start: auto; inline-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .slides__dots { position: absolute; inset-inline-start: 50%; translate: -50% 0; display: flex; gap: 5px; }
  .slides__dots i { inline-size: 6px; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .3); transition: background-color .3s, scale .3s; }
  .slides__dots i.is-on { background: var(--c-accent); scale: 1.15; }

  /* faixa panorâmica: os slides lado a lado, com a moldura marcando o slide atual */
  .slides__map { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 1px var(--c-line-strong); }
  .slides__map button { padding: 0; opacity: .45; transition: opacity .4s; cursor: pointer; }
  .slides__map button[aria-current="true"], .slides__map button:hover { opacity: 1; }
  .slides__map img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .slides__frame { position: absolute; inset: 0 auto 0 0; inline-size: calc(100% / var(--n, 4)); border-radius: var(--r-md); box-shadow: inset 0 0 0 2px var(--c-accent); pointer-events: none; }

  /* ---------- Identidade · Último trabalho: mockups passando sozinhos em formato paisagem ---------- */
  @media (min-width: 1024px) { .reel-stage--id .reel-stage__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); } }
  .slides--wide { max-inline-size: none; }
  .slides--wide .slides__viewport { aspect-ratio: 3 / 2; }
  .slides--wide .slides__map img { aspect-ratio: 3 / 2; }
  .swatches { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin-block-start: var(--sp-2); }
  .swatches li { display: grid; grid-template-columns: auto auto; column-gap: var(--sp-3); align-items: center; font-size: var(--fs-100); }
  .swatches span { grid-row: span 2; inline-size: 2.25rem; aspect-ratio: 1; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
  .swatches b { font-weight: 600; }
  .swatches small { color: var(--c-muted); letter-spacing: .06em; font-variant-numeric: tabular-nums; }

  /* ---------- Identidade · Galeria: um card por marca (2 colunas; os destaques ocupam a linha inteira) ---------- */
  .idgrid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--gutter); }
  @media (min-width: 768px) { .idgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .idcard--full { grid-column: 1 / -1; } }
  .ccard.idcard .carousel__track { aspect-ratio: 3 / 2; }   /* vence o 4:5 dos cards da Social Media */
  @media (min-width: 1024px) { .ccard.idcard--full .carousel__track { aspect-ratio: 21 / 9; } }
  .idcard .carousel__slide img { transition: scale 1.2s var(--ease-out-expo); }
  .idcard .ccard__frame:hover .carousel__slide img { scale: 1.03; }
  html.is-scrolling .idcard .ccard__frame:hover .carousel__slide img { scale: 1; }
  .idcard .ccard__title { font-size: var(--fs-500); }

  /* ---------- Galeria: carrosséis em cards compactos, passados à mão (setas nas duas pontas) ---------- */
  .ccards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gutter) clamp(1rem, .5rem + 1vw, 1.75rem); }
  .ccard { --cols: 1; flex: 0 0 calc((100% - (var(--cols) - 1) * clamp(1rem, .5rem + 1vw, 1.75rem)) / var(--cols)); min-inline-size: 0; margin: 0; display: grid; gap: var(--sp-3); }
  @media (min-width: 600px) { .ccard { --cols: 2; } }
  @media (min-width: 1024px) { .ccard { --cols: 3; } }
  @media (min-width: 1280px) { .ccard { --cols: 4; } }
  .ccard__frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-line); }
  .ccard .carousel__track { aspect-ratio: 4 / 5; }
  .ccard .carousel__slide { padding: 0; cursor: pointer; }
  .ccard .carousel__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  /* setas pequenas e coladas nas bordas: não cobrem o conteúdo do slide */
  .ccard__btn {
    position: absolute; z-index: 2; inset-block-start: 50%; margin-block-start: -1rem; display: grid; place-items: center;
    inline-size: 2rem; aspect-ratio: 1; border-radius: 50%; background: rgb(10 10 11 / .5); color: var(--c-paper);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background-color .25s, color .25s;
  }
  .ccard__btn::after { content: ""; position: absolute; inset: -.5rem; } /* alvo de toque de 48px sem aumentar o botão */
  .ccard__btn--prev { inset-inline-start: .375rem; } .ccard__btn--next { inset-inline-end: .375rem; }
  .ccard__btn:hover { background: var(--c-paper); color: var(--c-ink); }
  .ccard__btn svg { inline-size: .8rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .carousel__count { position: absolute; z-index: 2; inset: var(--sp-3) var(--sp-3) auto auto; padding: .3rem .6rem; border-radius: var(--r-pill); background: rgb(0 0 0 / .6); font: 600 .75rem/1 var(--font-ui); pointer-events: none; }
  .ccard .carousel__dots { position: absolute; z-index: 2; inset: auto 0 var(--sp-3); justify-content: center; pointer-events: none; }
  .ccard .carousel__dots button { pointer-events: auto; background: rgb(255 255 255 / .45); box-shadow: 0 0 0 1px rgb(0 0 0 / .15); }
  .ccard .carousel__dots button[aria-current="true"] { background: var(--c-accent); }
  .ccard__cap { display: flex; align-items: baseline; gap: var(--sp-2) var(--sp-3); padding-inline: var(--sp-1); }
  .ccard__title { font: 400 var(--fs-400)/1 var(--font-display); text-transform: uppercase; }
  .ccard__n { margin-inline-start: auto; color: var(--c-accent); font: 700 var(--fs-100)/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }

  /* Carrossel (scroll-snap nativo + controles reais) */
  .carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel__slide { flex: 0 0 100%; scroll-snap-align: start; }
  .carousel__ui { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); }
  .carousel__dots { display: flex; gap: .35rem; }
  .carousel__dots button { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--c-line-strong); position: relative; }
  .carousel__dots button::after { content: ""; position: absolute; inset: -.8rem; } /* alvo de toque ≥ 44px com a área vizinha */
  .carousel__dots button[aria-current="true"] { background: var(--c-brand); }
  .carousel__nav { display: flex; gap: var(--sp-2); }
  .carousel__nav button { display: grid; place-items: center; inline-size: 2.75rem; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--c-line-strong); }
  .carousel__nav svg { inline-size: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }

  /* ======================= 02 · IDENTIDADE VISUAL — edge-to-edge + parallax profundo ======================= */
  .brand-block { position: relative; isolation: isolate; }
  .brand-block + .brand-block { margin-block-start: var(--gutter); }
  .brand-frame { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 16 / 9); background: var(--c-surface); }
  .brand-frame--full { inline-size: 100%; aspect-ratio: auto; block-size: clamp(420px, 92svh, 1100px); }
  /* Imagem 130% da altura do frame: o parallax desloca no máximo ±11% (skill §3.1: sem vãos) */
  .brand-frame img[data-parallax-media] { position: absolute; inset: -15% 0 auto; inline-size: 100%; block-size: 130%; object-fit: cover; }
  .brand-caption {
    position: absolute; z-index: 2; inset: auto var(--gutter) var(--gutter); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4);
  }
  .brand-caption__title { font: 400 var(--fs-700)/.9 var(--font-display); text-transform: uppercase; text-shadow: 0 2px 30px rgb(0 0 0 / .45); }
  .brand-block--scrim .brand-frame::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(10 10 11 / .75)); pointer-events: none; }
  .brand-split { display: grid; gap: var(--gutter); }
  .brand-split .brand-frame { border-radius: var(--r-lg); --ratio: 3 / 2; }
  .brand-split .brand-caption { inset: auto var(--sp-6) var(--sp-6); }
  .brand-split .brand-caption__title { font-size: var(--fs-600); }
  @media (min-width: 768px) {
    .brand-split { grid-template-columns: 1.25fr 1fr; align-items: end; }
    .brand-split .brand-frame:last-child { --ratio: 4 / 5; }
  }

  /* Specimen: tipografia em difference sobre a imagem (efeito camada do PS) */
  .specimen { display: grid; gap: var(--sp-12); padding-block: var(--section-y); }
  .specimen__stage { position: relative; border-radius: var(--r-xl); overflow: hidden; min-block-size: clamp(360px, 60vw, 720px); display: grid; place-items: center; isolation: isolate; }
  .specimen__stage img { position: absolute; inset: -15% 0 auto; inline-size: 100%; block-size: 130%; object-fit: cover; z-index: -1; }
  .specimen__glyphs { font: 400 clamp(8rem, 2rem + 30vw, 30rem)/.8 var(--font-display); color: #fff; mix-blend-mode: difference; display: flex; align-items: baseline; gap: .05em; }
  .specimen__glyphs .accent-serif { color: #fff; font-size: 1.1em; }
  .specimen__list { display: grid; gap: var(--sp-6); counter-reset: s; }
  .specimen__list li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-4); padding-block-end: var(--sp-6); border-block-end: 1px solid var(--c-line); }
  .specimen__list li::before { counter-increment: s; content: "0" counter(s); color: var(--c-accent); font: 600 var(--fs-100)/1.8 var(--font-ui); letter-spacing: .14em; }
  .specimen__list h3 { font-size: var(--fs-500); margin-block-end: var(--sp-2); }
  .specimen__list p { color: var(--c-muted); }
  @media (min-width: 1024px) { .specimen { grid-template-columns: 1.4fr 1fr; align-items: center; } }

  /* Parede de marcas: blend luminosity → normal */
  .logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--gutter); }
  .logo-tile { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--c-brand); isolation: isolate; }
  .logo-tile img { inline-size: 100%; block-size: 100%; object-fit: cover; mix-blend-mode: luminosity; transition: opacity .6s var(--ease-out-expo), scale 1s var(--ease-out-expo); }
  .logo-tile figcaption { position: absolute; inset: auto auto var(--sp-3) var(--sp-3); }
  .logo-tile:is(:hover, :focus-within, .is-active) img { mix-blend-mode: normal; scale: 1.04; }
  .logo-tile:nth-child(3n + 2) { background: var(--c-blue); }

  /* ======================= 03 · EDIÇÃO DE VÍDEOS — cinema escuro ======================= */
  body[data-page="video"] { --c-ink: #050506; background: var(--c-ink); }
  .reel-stage { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-y); }
  .reel-stage__bg { position: absolute; inset: -10%; z-index: -1; }
  .reel-stage__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: blur(60px) saturate(1.4) brightness(.45); scale: 1.2; }
  .reel-stage__inner { display: grid; gap: var(--sp-12); align-items: center; }
  .reel-stage__hud { display: flex; flex-wrap: wrap; gap: var(--sp-3); font: 600 var(--fs-100)/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; }
  .reel-stage__title { font-size: var(--fs-700); }
  .reel-stage__text { color: var(--c-muted); max-inline-size: 42ch; }
  .reel-stage__copy { display: grid; gap: var(--sp-4); align-content: center; }
  /* "Último projeto" em pílula (mesmo padrão do "Quem sou") */
  .reel-stage__tag {
    justify-self: start; display: inline-flex; align-items: center; gap: .6rem; min-block-size: 2.5rem; padding: 0 1.1rem;
    border-radius: var(--r-pill); background: rgb(8 2 2 / .45); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
    font: 700 var(--fs-100)/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
  }
  .reel-stage__tag .rec { gap: 0; }
  .reel-stage__facts { align-self: center; }

  .vcard { position: relative; display: block; inline-size: 100%; text-align: start; border-radius: var(--r-lg); overflow: hidden; background: #000; isolation: isolate; }
  .vcard__media { position: relative; display: block; aspect-ratio: 9 / 16; } /* span (conteúdo válido de <button>) precisa de display:block para respeitar aspect-ratio */
  .vcard__media :is(img, video) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .vcard__media video { opacity: 0; transition: opacity .5s var(--ease-out-expo); }
  .vcard.is-playing video { opacity: 1; }
  .vcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .35), transparent 25%, transparent 60%, rgb(0 0 0 / .8)); pointer-events: none; }
  .vcard__top { position: absolute; z-index: 1; inset: var(--sp-3) var(--sp-3) auto; display: flex; justify-content: space-between; font: 600 .75rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; }
  .vcard__body { position: absolute; z-index: 1; inset: auto var(--sp-4) var(--sp-4); display: grid; gap: .25rem; }
  .vcard__title { font: 400 var(--fs-500)/1 var(--font-display); text-transform: uppercase; }
  .vcard__meta { color: var(--c-muted); font-size: var(--fs-100); }
  .vcard__play {
    position: absolute; z-index: 1; inset: 50% auto auto 50%; translate: -50% -50%; display: grid; place-items: center;
    inline-size: 4rem; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .3);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: scale .5s var(--ease-out-expo), opacity .4s;
  }
  .vcard__play svg { inline-size: 1.1rem; fill: currentColor; translate: 2px 0; }
  .vcard.is-playing .vcard__play { scale: .6; opacity: 0; }
  .vcard__progress { position: absolute; z-index: 1; inset: auto 0 0; block-size: 2px; background: var(--c-brand); transform-origin: left; scale: 0 1; }
  .reel-stage .vcard { inline-size: 100%; max-inline-size: 420px; justify-self: center; box-shadow: 0 60px 120px -30px rgb(0 0 0 / .9), 0 0 0 1px var(--c-line-strong); }

  /* Galeria separada por formato */
  .vgallery__switch { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .vgallery__switch a {
    display: inline-flex; align-items: center; gap: .6rem; min-block-size: 2.75rem; padding: 0 1rem;
    border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-line-strong); font: 600 var(--fs-200)/1 var(--font-ui);
    transition: background-color .25s, color .25s;
  }
  .vgallery__switch a:hover { background: var(--c-paper); color: var(--c-ink); }
  .vgallery__switch small { color: var(--c-accent); font-weight: 700; }
  .vgallery__ico { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; }
  .vgallery__ico--v { inline-size: .6rem; block-size: 1rem; }
  .vgallery__ico--h { inline-size: 1.1rem; block-size: .65rem; }
  .vgallery__ico--sq { inline-size: .85rem; block-size: .85rem; }
  .vgallery__ico--stack { inline-size: .75rem; block-size: .9rem; box-shadow: 3px -3px 0 -1.5px var(--c-ink), 3px -3px 0 0 currentColor; }
  .vgroup { scroll-margin-top: calc(var(--nav-h) + 1rem); }
  .vgroup + .vgroup { margin-block-start: clamp(4rem, 3rem + 4vw, 7rem); }
  .vgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-6); padding-block-end: var(--sp-6); margin-block-end: var(--sp-8); border-block-end: 1px solid var(--c-line); }
  .vgroup__title { font: 400 var(--fs-600)/1 var(--font-display); text-transform: uppercase; }
  .vgroup__desc { color: var(--c-muted); font-size: var(--fs-200); letter-spacing: .04em; }
  /* Padrão: botões de seleção SEMPRE à direita do título (qualquer seção que tenha .vgallery__switch) */
  @media (min-width: 1024px) {
    .section-head:has(.vgallery__switch) { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .section-head:has(.vgallery__switch) > .eyebrow { grid-column: 1 / -1; }
    .section-head:has(.vgallery__switch) > .section-head__title { grid-column: 1; }
    .vgallery__switch { grid-column: 2; justify-content: flex-end; align-self: end; }
  }

  .vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  @media (min-width: 768px) { .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
  @media (min-width: 1200px) {
    .vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vgrid:not(.vgrid--h) > :nth-child(4n + 2), .vgrid:not(.vgrid--h) > :nth-child(4n + 4) { margin-block-start: var(--sp-16); }
  }
  @media (min-width: 1024px) { .reel-stage__inner { grid-template-columns: 1fr minmax(280px, 420px) 1fr; } }
  /* Horizontais (YouTube): cards 16:9, 1 → 2 → 3 colunas */
  .vcard--h .vcard__media { aspect-ratio: 16 / 9; }
  .vgrid--h { grid-template-columns: 1fr; }
  @media (min-width: 768px) { .vgrid--h { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1200px) { .vgrid--h { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ======================= 04 · WEBSITES — dispositivos + tilt 3D ======================= */
  .device-section { position: relative; padding-block: var(--sp-16); }
  .device-section__inner { display: grid; gap: var(--sp-12); align-items: center; }
  .laptop { --bezel: clamp(8px, 1.2vw, 16px); position: relative; inline-size: min(100%, 980px); margin-inline: auto; }
  .laptop__screen { margin-inline: 6%; } /* a base (mais larga) cabe no container sem overflow */
  .laptop__screen {
    position: relative; border-radius: 18px 18px 0 0; padding: var(--bezel); background: #0d0d0f;
    box-shadow: inset 0 0 0 1px #2c2c30, 0 50px 100px -40px rgb(0 0 0 / .9);
  }
  .laptop__viewport { position: relative; overflow: hidden; border-radius: 6px; background: #fff; }
  /* Scroller com a MESMA proporção dos slides (16:9): o snap cai exatamente em cada projeto */
  .laptop__scroller { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
  .laptop__scroller.is-native { overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; }
  .laptop__scroller.is-native .laptop__page > * { scroll-snap-align: start; }
  .browser-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; background: #ececec; color: #555; font: 500 .6875rem/1 var(--font-ui); }
  .browser-bar i { inline-size: .55rem; aspect-ratio: 1; border-radius: 50%; background: #ff5f57; }
  .browser-bar i:nth-child(2) { background: #febc2e; } .browser-bar i:nth-child(3) { background: #28c840; }
  .browser-bar span { flex: 1; margin-inline: .5rem; padding: .25rem .6rem; border-radius: var(--r-pill); background: #fff; text-align: center; }
  .laptop__page img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .laptop__page > * { margin: 0; }
  .laptop__base { block-size: clamp(10px, 1.6vw, 20px); margin-inline: 0; border-radius: 0 0 22px 22px; background: linear-gradient(#cfcfd3, #8d8d92); position: relative; }
  .laptop__base::before { content: ""; position: absolute; inset: 0 40% auto; block-size: 40%; border-radius: 0 0 10px 10px; background: #9d9da2; }
  .device-progress { display: flex; gap: var(--sp-2); justify-content: center; margin-block-start: var(--sp-8); }
  .device-progress span { block-size: 3px; inline-size: 2rem; border-radius: 2px; background: var(--c-line-strong); overflow: hidden; }
  .device-progress span i { display: block; block-size: 100%; background: var(--c-brand); transform-origin: left; scale: 0 1; }
  .device-section__copy .device-progress { justify-content: flex-start; }
  .device-section__copy .device-hint { text-align: start; }
  @media (min-width: 1024px) {
    .device-section { min-block-size: 100svh; display: grid; align-items: center; padding-block: var(--nav-h) var(--sp-8); }
    .device-section__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 6rem); }
  }
  .device-hint { text-align: center; color: var(--c-muted); font-size: var(--fs-100); letter-spacing: .12em; text-transform: uppercase; margin-block-start: var(--sp-4); }

  .tilt-grid { display: grid; gap: var(--gutter); perspective: 1400px; }
  @media (min-width: 768px) { .tilt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tilt-grid > :first-child { grid-column: 1 / -1; } }
  .tilt { position: relative; display: block; transform-style: preserve-3d; border-radius: var(--r-xl); }
  .tilt__card { position: relative; border-radius: inherit; overflow: hidden; transform-style: preserve-3d; box-shadow: 0 0 0 1px var(--c-line-strong), var(--shadow-float); background: var(--c-surface); }
  .tilt__card img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .tilt__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / .28), transparent 70%); mix-blend-mode: overlay; opacity: 0; transition: opacity .5s; }
  .tilt.is-hover .tilt__glare { opacity: 1; }
  .tilt__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: var(--sp-4) var(--sp-2) 0; }
  .tilt__title { font: 400 var(--fs-500)/1 var(--font-display); text-transform: uppercase; }
  .tilt__tag { color: var(--c-muted); font-size: var(--fs-100); letter-spacing: .12em; text-transform: uppercase; }
  .tilt__badge { position: absolute; inset: var(--sp-4) auto auto var(--sp-4); transform: translateZ(40px); }

  /* ======================= 04 · WEBSITES — Último trabalho + galerias ======================= */
  .live-dot { display: inline-block; inline-size: .55rem; aspect-ratio: 1; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 4px rgb(61 220 132 / .22); }
  .reel-stage__cta { justify-self: start; margin-block-start: var(--sp-2); }
  @media (min-width: 1024px) { .reel-stage--web .reel-stage__inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); } }

  /* Notebook + celular: a LP inteira rola dentro das telas (sites.js) */
  .latest-devices { position: relative; padding-inline-end: clamp(2.5rem, 8vw, 7rem); padding-block-end: clamp(1rem, 3vw, 2.5rem); }
  .latest-devices .laptop { inline-size: 100%; }
  .laptop__scroller[data-autoscroll] img, .phone__screen img { display: block; inline-size: 100%; block-size: auto; will-change: transform; }
  .phone {
    position: absolute; inset: auto 0 0 auto; inline-size: clamp(96px, 13vw, 180px); aspect-ratio: 9 / 19.5;
    padding: clamp(5px, .5vw, 8px); border-radius: clamp(18px, 2vw, 30px); background: #0d0d0f;
    box-shadow: inset 0 0 0 1px #2c2c30, 0 30px 60px -18px rgb(0 0 0 / .85);
  }
  .phone__screen { block-size: 100%; overflow: hidden; border-radius: clamp(13px, 1.5vw, 23px); background: #fff; }

  /* Sites no ar: mockup de navegador; no hover a página inteira rola (sem JS) */
  .site-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--gutter); }
  @media (min-width: 768px) { .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1200px) { .site-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .site-card { display: grid; gap: var(--sp-4); align-content: start; }
  .site-card__frame {
    display: block; border-radius: var(--r-lg); overflow: hidden; background: #fff;
    box-shadow: 0 0 0 1px var(--c-line-strong), 0 30px 60px -30px rgb(0 0 0 / .8);
    transition: translate .45s var(--ease-out-expo), box-shadow .45s;
  }
  .site-card__screen { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; }
  .site-card__screen img { position: absolute; inset: 0 0 auto 0; inline-size: 100%; block-size: auto; translate: 0 var(--y0, 0%); transition: translate .9s var(--ease-out-expo); }  /* --y0: onde a miniatura começa */
  .site-card__meta { display: grid; gap: .3rem; padding-inline: .25rem; }
  .site-card__kind { justify-self: start; padding: .3rem .7rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-muted); font: 600 .75rem/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
  .site-card__name { font: 400 var(--fs-500)/1 var(--font-display); text-transform: uppercase; margin-block-start: .35rem; }
  .site-card__desc { color: var(--c-muted); font-size: var(--fs-200); }
  .site-card__link { display: inline-flex; align-items: center; gap: .35rem; color: var(--c-accent); font: 600 var(--fs-200)/1.2 var(--font-ui); }
  .site-card__link svg { inline-size: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
  @media (hover: hover) {
    .site-card:hover .site-card__frame { translate: 0 -6px; box-shadow: 0 0 0 1px rgb(238 212 180 / .5), 0 40px 70px -30px rgb(0 0 0 / .9); }
    .site-card:hover .site-card__screen img { translate: 0 calc(-100% + 100cqh); transition: translate var(--dur, 8s) linear; }
  }
  .site-card:focus-visible .site-card__screen img { translate: 0 calc(-100% + 100cqh); transition: translate var(--dur, 8s) linear; }

  /* Arquivo: bento — o primeiro projeto grande, os outros quatro em 2×2 ao lado */
  .archive { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
  /* Sem brilho, sombra ou degradê: só a inclinação 3D. A imagem inteira é um botão que abre em tela cheia;
     nome e tipo ficam abaixo da imagem (fora do card que inclina, então nunca são cortados) */
  .archive__item { display: flex; flex-direction: column; border-radius: 0; }
  .archive__item .tilt__card { flex: 1 1 auto; min-block-size: 0; aspect-ratio: 16 / 10; border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--c-line-strong); }
  .archive__item { cursor: pointer; }
  .archive__open { display: block; inline-size: 100%; padding: 0; border: 0; cursor: pointer; }
  .archive__open:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }
  .archive__item .tilt__card img { block-size: 100%; aspect-ratio: auto; object-fit: cover; }
  .archive__item .tilt__meta { flex-wrap: wrap; row-gap: var(--sp-1); padding-inline: var(--sp-1); }
  @media (min-width: 768px) {
    .archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .archive__item:first-child { grid-column: 1 / -1; }
  }
  @media (min-width: 1024px) {
    .archive { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .archive__item:first-child { grid-column: span 2; grid-row: span 2; }
    .archive__item:first-child .tilt__card { aspect-ratio: auto; }
  }
}