/* ==========================================================================
   Home: hero em camadas, sobre editorial, showcase "Photoshop"
   ========================================================================== */
@layer pages {

  /* =========================== HERO — retrato em movimento ===========================
     Palco (.hero__stage) com a proporção da imagem composta (2400 × 1446): a palavra gigante
     fica a 21% da altura do palco = linha dos olhos, em qualquer tela.
     Fundo de fogo + prancheta do Photoshop a ~10% de opacidade.
     ==================================================================================== */
  main { --hero-r: clamp(28px, 4vw, 64px); }
  .hero {
    --paper-warm: #F1E4CF;
    z-index: 2;   /* acima da seção azul, que passa por baixo da curva */
    position: relative; isolation: isolate; overflow: clip;
    min-block-size: calc(100svh - clamp(3.5rem, 5vw, 4.75rem));
    /* fogo centralizado atrás do retrato + vinheta escura nas bordas (menu e prancheta do PS aparecem no escuro) */
    background:
      radial-gradient(28% 36% at 50% 32%, #ffb35c 0%, #ff7a2a 30%, transparent 70%),
      radial-gradient(42% 56% at 50% 38%, #f24f18 0%, #c02b0c 36%, #4a0c04 66%, #0b0202 94%);
    background-color: #0b0202;   /* deixa o botão "descer" inteiro na 1ª dobra */
    display: grid; align-content: end;
    padding-block: var(--nav-h) clamp(1.25rem, 3.5svh, 2.5rem);
    border-end-start-radius: var(--hero-r);
    border-end-end-radius: var(--hero-r);
    box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7);
  }
  .hero__layer { position: absolute; inset: 0; pointer-events: none; }
  .hero__layer--bg { z-index: 0; }

  /* Fogo: brilho quente atrás da cabeça, bordas escuras (ref. Nike) */
  .hero__fire {
    position: absolute; inset: -8%;
    background:
      radial-gradient(34% 40% at 50% 30%, #ff8a3a 0%, #f24a17 32%, rgb(196 34 10 / .9) 55%, transparent 78%),
      radial-gradient(60% 55% at 50% 42%, rgb(170 22 8 / .75), transparent 76%),
      radial-gradient(40% 30% at 50% 100%, rgb(255 90 30 / .25), transparent 70%);
  }

  /* Prancheta do Photoshop: réguas, guias ciano, marcas de corte e painel de camadas — só textura */
  .hero__wire { position: absolute; inset: 0; opacity: .13; mix-blend-mode: screen; }
  .wire__ruler { position: absolute; background-repeat: repeat-x; }
  .wire__ruler--x { inset: calc(var(--nav-h) + 8px) 0 auto 0; block-size: 16px;
    background-image: linear-gradient(90deg, #fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 10px 5px, 100px 16px; background-position: 0 100%, 0 100%; }
  .wire__ruler--y { inset: var(--nav-h) auto 0 8px; inline-size: 16px; background-repeat: repeat-y;
    background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(#fff 1px, transparent 1px);
    background-size: 5px 10px, 16px 100px; background-position: 100% 0, 100% 0; }
  .wire__guide { position: absolute; background: #3ff0ff; }
  .wire__guide--v1 { inset: 0 auto 0 22%; inline-size: 1px; }
  .wire__guide--v2 { inset: 0 22% 0 auto; inline-size: 1px; }
  .wire__guide--h { inset: 58% 0 auto 0; block-size: 1px; }
  .wire__crop { position: absolute; inline-size: 28px; block-size: 28px; border: 0 solid #fff; }
  .wire__crop--tl { inset: calc(var(--nav-h) + 48px) auto auto 6%; border-width: 1px 0 0 1px; }
  .wire__crop--tr { inset: calc(var(--nav-h) + 48px) 6% auto auto; border-width: 1px 1px 0 0; }
  .wire__crop--bl { inset: auto auto 10% 6%; border-width: 0 0 1px 1px; }
  .wire__crop--br { inset: auto 6% 10% auto; border-width: 0 1px 1px 0; }
  .wire__panel { position: absolute; inset: calc(var(--nav-h) + 60px) calc(6% + 40px) auto auto; inline-size: 170px; display: grid; gap: 6px; padding: 30px 10px 10px; border: 1px solid #fff; border-radius: 6px; }
  .wire__panel i { display: block; block-size: 22px; border: 1px solid #fff; border-radius: 3px; }
  .wire__label { position: absolute; inset: calc(var(--nav-h) + 30px) auto auto calc(6% + 36px); font: 500 11px/1 var(--font-ui); letter-spacing: .08em; color: #fff; }
  @media (max-width: 767px) { .wire__panel, .wire__label, .wire__ruler--y { display: none; } }

  /* Palco: palavra + retrato numa caixa só. Centralizado por flex no wrapper (sem translate),
     descendo ~10% abaixo do hero para o rosto ficar a ~27% da altura */
  .hero__stagewrap { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
  .hero__stage {
    --stage-h: max(600px, 100svh);
    position: relative; flex: none; block-size: var(--stage-h); inline-size: calc(var(--stage-h) * 2400 / 1446);
    margin-block-end: -10svh;
  }
  /* Efeitos do palco (transparente): giro borrado + rastros + flares — só ATRÁS do retrato */
  .hero__fx { position: absolute; inset: 0; z-index: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .hero__subject { position: absolute; inset: 0; z-index: 2; }
  .hero__subject img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; object-position: 50% 100%; }
  /* Palavra logo abaixo do queixo, na linha dos ombros (topo ≈ 44% do palco); flex centraliza mesmo se for mais larga que o palco */
  .hero__word {
    position: absolute; inset: calc(57% - 0.4em) 0 auto 0; z-index: 1;
    display: flex; justify-content: center;
    font: 400 clamp(5.5rem, 1rem + 20vw, 25rem)/.8 var(--font-display); text-transform: uppercase; letter-spacing: -0.005em;
    white-space: nowrap; color: var(--c-sand-200); user-select: none;
  }
  .hero__word-in { position: relative; display: inline-block; }
  /* "Clicou e arrastou" (ref. "MILAGRES"): a letra fica INTEIRA e nítida; uma cópia com desfoque horizontal,
     esticada, sai dela como rastro — o P arrastado para a ESQUERDA, o último O para a DIREITA. */
  .fx { position: relative; display: inline-block; }
  .fx__smear { position: absolute; inset: 0; filter: url(#motion-x); opacity: .8; pointer-events: none; }
  /* a letra também deforma: borrada e levemente esticada no sentido do arrasto */
  .fx--p .fx__sharp { display: inline-block; filter: url(#letter-drag-l); transform-origin: 100% 50%; scale: 1.06 1; }
  .fx--o .fx__sharp { display: inline-block; filter: url(#letter-drag-r); transform-origin: 0% 50%; scale: 1.06 1; }
  .fx--p .fx__smear {
    transform-origin: 100% 50%; scale: 1.9 1;
    -webkit-mask-image: linear-gradient(to left, transparent 30%, #000 50%, rgb(0 0 0 / .45) 75%, transparent 100%);
            mask-image: linear-gradient(to left, transparent 30%, #000 50%, rgb(0 0 0 / .45) 75%, transparent 100%);
  }
  .fx--o .fx__smear {
    transform-origin: 0% 50%; scale: 1.9 1;
    -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 50%, rgb(0 0 0 / .45) 75%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 30%, #000 50%, rgb(0 0 0 / .45) 75%, transparent 100%);
  }
  .hero__word--outline .fx { color: transparent; -webkit-text-stroke: 0; }
  /* Linha de apoio: diz o que é o portfólio. Montserrat, sóbria, centralizada logo abaixo da palavra */
  .hero__tagline {
    position: absolute; inset: calc(100% + clamp(1rem, .4rem + 2.2vw, 2.5rem)) 0 auto 0; text-align: center; white-space: nowrap;
    font: 500 clamp(.85rem, .6rem + .9vw, 1.35rem)/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
    color: rgb(255 255 255 / .9); -webkit-text-stroke: 0; text-shadow: 0 2px 16px rgb(0 0 0 / .55);
  }  /* no contorno, P e O ficam só na camada sólida */
  .hero__word--outline { z-index: 3; color: transparent; -webkit-text-stroke: clamp(1px, 0.1vw, 1.5px) rgb(245 224 198 / .45); }
  /* "Bem-vindo ao meu": serif itálica dourada, sobre o início do "P" (sempre legível: fica na camada da frente) */
  .hero__welcome {
    position: absolute; inset: auto auto calc(100% + .1em) .02em;   /* começa junto com o "P", com respiro */
    font: italic 400 .16em/1 var(--font-accent); text-transform: none; white-space: nowrap;
    color: var(--c-paper); -webkit-text-stroke: 0; letter-spacing: -0.01em;
    text-shadow: 0 2px 24px rgb(0 0 0 / .45);
  }
  /* "Preto final": o fundo afunda para preto na base, onde nasce a barriga do botão */
  .hero__shade { position: absolute; inset: auto 0 0; block-size: 26%; z-index: 3; pointer-events: none; background: linear-gradient(transparent, rgb(8 2 2 / .75) 55%, #080202); }

  /* Botão "descer" (ref. anexo): disco da cor da página encaixado na base arredondada do hero,
     com texto circular (gira com o scroll) e o botão dourado com seta no centro */
  /* A "barriga": disco preto (o mesmo "preto final" do hero) pendurado PARA BAIXO, entrando na seção azul,
     ligado à borda do hero por dois cantos côncavos por baixo (::before/::after) — ref. anexo */
  .scroll-cue {
    --size: clamp(104px, 9vw, 132px);
    --fillet: clamp(16px, 1.6vw, 24px);
    position: relative; z-index: 5; display: block; inline-size: var(--size); aspect-ratio: 1;
    margin: calc(var(--size) / -2) auto calc(var(--size) / -2 - var(--hero-r));
    border-radius: 50%; background: #080202;
  }
  .scroll-cue::before, .scroll-cue::after { content: ""; position: absolute; inset-block-start: 50%; inline-size: var(--fillet); block-size: var(--fillet); pointer-events: none; }
  .scroll-cue::before { inset-inline-end: calc(100% - 1px); background: radial-gradient(circle at 0 100%, transparent calc(var(--fillet) - .5px), #080202 var(--fillet)); }
  .scroll-cue::after { inset-inline-start: calc(100% - 1px); background: radial-gradient(circle at 100% 100%, transparent calc(var(--fillet) - .5px), #080202 var(--fillet)); }
  .scroll-cue__ring { position: absolute; inset: 6%; inline-size: 88%; block-size: 88%; fill: rgb(255 255 255 / .85); font: 600 8.6px/1 var(--font-ui); letter-spacing: .2em; }
  .scroll-cue__btn {
    position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; display: grid; place-items: center;
    inline-size: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--gradient-cta); color: var(--c-ink);
    transition: scale .3s var(--ease-out-expo);
  }
  .scroll-cue__btn svg { inline-size: 42%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s var(--ease-out-expo); }
  .scroll-cue:hover .scroll-cue__btn { scale: 1.08; }
  .scroll-cue:hover .scroll-cue__btn svg { translate: 0 2px; }
  .scroll-cue:focus-visible { outline-offset: 2px; }

  /* Barra de informações (ref. Nike: rótulos em linha sobre o peito) */
  .hero__content { position: relative; z-index: 4; }
  .hero__bar { display: grid; gap: var(--sp-6); justify-items: center; text-align: center; padding-block-start: var(--sp-6); border-block-start: 1px solid rgb(255 255 255 / .14); }
  .hero__id { display: flex; align-items: center; gap: .75rem; text-align: start; }
  .hero__id img { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; }
  .hero__id b { display: block; font: 700 var(--fs-200)/1.2 var(--font-ui); }
  .hero__id small { display: block; color: var(--c-muted); font-size: var(--fs-100); letter-spacing: .04em; }
  .hero__title { font: 400 var(--fs-600)/.95 var(--font-display); text-transform: uppercase; letter-spacing: 0; }
  .hero__title .accent-serif { font-size: 1.1em; }
  .hero__services { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
  .hero__services a {
    display: inline-flex; align-items: center; min-block-size: 2.25rem; padding-inline: .9rem; border-radius: var(--r-pill);
    background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
    font: 600 .75rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted);
    transition: background-color .25s, color .25s;
  }
  .hero__services a:hover { background: var(--c-paper); color: var(--c-ink); }
  .hero__services a { white-space: nowrap; }
  /* 1024–1279px: a barra não comporta as 4 pílulas; elas seguem visíveis no índice de serviços logo abaixo */
  @media (min-width: 1024px) and (max-width: 1279px) { .hero__services { display: none !important; } }
  @media (min-width: 1024px) {
    .hero__bar { grid-template-columns: auto 1fr auto auto; justify-items: stretch; align-items: center; text-align: start; column-gap: clamp(1.5rem, 3vw, 3rem); }
    .hero__title { text-align: center; white-space: nowrap; font-size: min(var(--fs-600), 3.4vw); }
    .hero__services { display: grid; grid-template-columns: auto auto; gap: .35rem; justify-content: start; }
  }

  /* Mobile: palco no topo, bem mais largo que a tela (o rosto fica centralizado), infos abaixo */
  @media (max-width: 767px) {
    .hero { min-block-size: calc(var(--nav-h) + 210vw * 1446 / 2400 * 0.92); } /* sem barra: o hero termina logo abaixo do peito */
    .hero__stagewrap { align-items: flex-start; }
    .hero__stage { --stage-h: calc(210vw * 1446 / 2400); margin-block: var(--nav-h) 0; }
    .hero__word { font-size: 22vw; }
    .hero__content { padding-block-start: calc(210vw * 1446 / 2400 * 0.78); }
    .hero__shade { block-size: 24%; }   /* só na base: não escurece a palavra nem a linha de apoio */
    /* efeito de "arrastar" proporcional ao tamanho da letra no celular */
    .fx__smear { filter: url(#motion-x-sm); }
    .fx--p .fx__sharp { filter: url(#letter-drag-l-sm); }
    .fx--o .fx__sharp { filter: url(#letter-drag-r-sm); }
    /* no celular o último O cai atrás do ombro: a camada da frente ganha o contorno dele, como as outras letras */
    .hero__word--outline .fx--o .fx__sharp { -webkit-text-stroke: 1px rgb(245 224 198 / .7); }
  }

  /* =========================== QUEM SOU — só tipografia ===========================
     Composição editorial sem caixa: número gigante (Anton, laranja) + "anos" (Anton pequeno)
     + "de estrada" (serif itálica) empilhados ao lado; texto pessoal e 3 fatos com ícones.
     ================================================================================= */
  /* Seção azul da marca: passa por baixo da curva do hero e fecha com a mesma curva embaixo */
  .about {
    position: relative; z-index: 1; background: var(--c-blue); color: var(--c-paper);
    padding-block: calc(var(--hero-r) + clamp(5rem, 4rem + 3vw, 7rem)) clamp(3.5rem, 3rem + 3vw, 6rem);
    border-end-start-radius: var(--hero-r); border-end-end-radius: var(--hero-r);
  }
  .about__tag {
    justify-self: start; display: inline-flex; align-items: center; gap: .55rem; min-block-size: 2.5rem; padding: 0 1.1rem;
    border-radius: var(--r-pill); background: rgb(8 2 2 / .35); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), 0 10px 24px -10px rgb(0 0 0 / .5);
    font: 700 var(--fs-100)/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--c-paper);
  }
  .about__tag span { color: var(--c-accent); font-size: 1.15em; letter-spacing: 0; }
  .about__years { text-shadow: 0 6px 0 rgb(8 2 2 / .28), 0 18px 40px rgb(8 2 2 / .45); }  /* dá peso ao "15+ anos de estrada" no azul */
  .about .accent-serif { color: var(--c-accent); }   /* laranja claro: 3.8:1 no azul (texto grande) */
  .about__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: end; }
  .about__years { display: flex; align-items: flex-end; gap: clamp(.75rem, 1.5vw, 1.5rem); font-weight: 400; line-height: 1; }
  .about__num { display: inline-flex; align-items: flex-start; font: 400 clamp(7rem, 3rem + 16vw, 17rem)/.78 var(--font-display); color: var(--c-accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .about__plus { font-size: .45em; line-height: 1; margin-inline-start: .04em; color: var(--c-paper); }
  .about__words { display: grid; gap: .1em; padding-block-end: .35em; }
  .about__anos { font: 400 clamp(2rem, 1rem + 4vw, 4.75rem)/.85 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
  .about__estrada { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5.25rem); line-height: .9; }
  .about__copy { display: grid; gap: var(--sp-6); }
  .about__text { font: 400 var(--fs-400)/1.5 var(--font-ui); color: rgb(255 255 255 / .84); max-inline-size: 38ch; letter-spacing: -0.01em; }
  .about__text strong { color: var(--c-paper); font-weight: 600; }
  .about__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--c-paper); font-size: var(--fs-200); }
  .about__facts li { display: inline-flex; align-items: center; gap: .5rem; }
  .about__facts svg { inline-size: 1.1rem; fill: none; stroke: var(--c-sand-300); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  @media (min-width: 1024px) {
    .about__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 7rem); }
    .about__tag { grid-column: 1 / -1; }
    .about__copy { padding-block-end: 1.2rem; }
  }

  /* =========================== SERVIÇOS — cards empilháveis com galeria ===========================
     Cada serviço é um card grande e arredondado (sticky): o próximo sobe por cima e o anterior
     encolhe/escurece levemente (services.js). Dentro: cabeçalho claro + galeria de prévia passando.
     ================================================================================================ */
  .services { padding-block: clamp(4rem, 3rem + 5vw, 8rem); }
  .services__head { display: grid; gap: var(--sp-4) var(--gutter); margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
  .services__title { font-size: var(--fs-700); }
  .services__index { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .services__index a {
    display: inline-flex; align-items: center; gap: .6rem; min-block-size: 2.75rem; padding: 0 1rem 0 .4rem;
    border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-line);
    font: 600 var(--fs-200)/1 var(--font-ui); transition: background-color .3s, color .3s;
  }
  .services__index a span { display: grid; place-items: center; inline-size: 2rem; aspect-ratio: 1; border-radius: 50%; background: var(--c-surface-2); color: var(--c-accent); font-size: .75rem; letter-spacing: .06em; transition: background-color .3s, color .3s; }
  @media (hover: hover) {
    .services__index a:hover { background: var(--c-paper); color: var(--c-ink); }
    .services__index a:hover span { background: var(--c-brand); color: var(--c-ink); }
  }
  @media (min-width: 1024px) {
    .services__head { grid-template-columns: auto 1fr; align-items: end; }
    .services__head .eyebrow { grid-column: 1 / -1; }
    .services__index { justify-content: flex-end; }
  }

  .services__stack { display: grid; gap: var(--sp-6); }
  .svc { position: sticky; top: calc(var(--nav-h) + 1rem + var(--i) * 0.85rem); }
  @media (max-height: 640px) { .svc { position: relative; top: auto; } }  /* telas baixas: sem empilhar */
  .svc__inner {
    --pad: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
    position: relative; isolation: isolate; overflow: hidden; transform-origin: 50% 0;
    display: grid; gap: clamp(1.25rem, 1rem + 1.4vw, 2rem); padding-block: var(--pad);
    border-radius: clamp(24px, 2.4vw, 36px); background: var(--c-surface); border: 1px solid var(--c-line-strong);
    box-shadow: 0 -24px 60px -30px rgb(0 0 0 / .9);
    will-change: transform;   /* camada própria: o scale vira só composição na GPU */
  }
  .svc__inner::before { content: ""; position: absolute; inset: -40% -20% auto 45%; block-size: 90%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--svc-glow), transparent); opacity: .5; } /* sem filter: blur → não re-rasteriza ao escalar */
  .svc--social { --svc-glow: rgb(220 105 25 / .55); --item-h: clamp(170px, 17vw, 250px); --item-r: 1; }
  .svc--identity { --svc-glow: rgb(22 24 194 / .7); --item-h: clamp(170px, 17vw, 250px); --item-r: 1.5; }
  .svc--video { --svc-glow: rgb(255 59 48 / .45); --item-h: clamp(250px, 24vw, 360px); --item-r: 0.5625; }
  .svc--web { --svc-glow: rgb(139 141 255 / .45); --item-h: clamp(170px, 17vw, 250px); --item-r: 1.7778; }

  .svc__head { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-4); padding-inline: var(--pad); }
  .svc__num { font: 600 var(--fs-100)/1 var(--font-ui); letter-spacing: .14em; color: var(--c-accent); padding-block-start: .7em; }
  .svc__title { font: 400 var(--fs-600)/.95 var(--font-display); text-transform: uppercase; letter-spacing: 0; }
  .svc__title .accent-serif { font-size: 1.08em; }
  .svc__body { grid-column: 1 / -1; display: grid; gap: var(--sp-3); }
  .svc__desc { color: var(--c-muted); max-inline-size: 44ch; }
  .svc__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
  .svc__tags li { padding: .35rem .75rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--c-line-strong); font-size: var(--fs-100); }
  .svc__cta { grid-column: 1 / -1; justify-self: start; }
  @media (max-width: 1023px) { .svc__head { align-items: center; } }
  @media (min-width: 1024px) {
    .svc__head { grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-8); }
    .svc__body { grid-column: auto; }
    .svc__cta { grid-column: auto; justify-self: end; }
  }

  /* Galeria de prévia: marquee CSS (2 trilhas idênticas), pausa no hover/foco e no botão global */
  .svc__reel { display: block; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .svc__marquee { display: flex; inline-size: max-content; }
  .svc__track { display: flex; gap: var(--sp-3); padding-inline-end: var(--sp-3); flex: none; animation: marquee var(--dur, 55s) linear infinite; }
  .svc--video .svc__track { --dur: 45s; }
  .svc__marquee--reverse .svc__track { animation-direction: reverse; }
  .svc__reel:hover .svc__track, .svc__reel:focus-within .svc__track, html.motion-paused .svc__track { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    .svc__track { animation: none; }
    .svc__reel { overflow-x: auto; }
    .svc__track[aria-hidden="true"] { display: none; }
  }
  .svc__item { position: relative; margin: 0; flex: none; block-size: var(--item-h); aspect-ratio: var(--item-r); border-radius: clamp(14px, 1.4vw, 20px); overflow: hidden; background: var(--c-surface-2); box-shadow: 0 0 0 1px var(--c-line); }
  .svc__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .9s var(--ease-out-expo); }
  @media (hover: hover) { .svc__item:hover img { scale: 1.06; } }
  /* ícone de carrossel (como no feed do Instagram) nas capas de carrossel */
  .svc__badge { position: absolute; inset: .6rem .6rem auto auto; display: grid; place-items: center; inline-size: 1.9rem; aspect-ratio: 1; border-radius: 50%; background: rgb(0 0 0 / .45); color: #fff; pointer-events: none; }
  .svc__badge svg { inline-size: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

  /* Itens de vídeo: prévia no hover, clique abre o modal */
  .svc__video { padding: 0; color: var(--c-paper); text-align: start; cursor: pointer; }
  .svc__video .vcard__media { position: absolute; inset: 0; display: block; }
  .svc__video :is(img, video) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .svc__video video { opacity: 0; transition: opacity .4s; }
  .svc__video.is-playing video { opacity: 1; }
  .svc__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(0 0 0 / .85)); pointer-events: none; }
  .svc__play {
    position: absolute; z-index: 1; inset: 50% auto auto 50%; translate: -50% -50%; display: grid; place-items: center;
    inline-size: 3.25rem; aspect-ratio: 1; border-radius: 50%; background: rgb(10 10 11 / .55); border: 1px solid rgb(255 255 255 / .35);
    transition: scale .5s var(--ease-out-expo), opacity .3s;   /* sem backdrop-filter: 16 botões em movimento dentro de um card que escala */
  }
  .svc__play svg { inline-size: .95rem; fill: currentColor; translate: 2px 0; }
  .svc__video.is-playing .svc__play { scale: .6; opacity: 0; }
  .svc__caption { position: absolute; z-index: 1; inset: auto .8rem .8rem; display: grid; gap: .2rem; font-size: var(--fs-100); color: var(--c-muted); }
  .svc__caption b { font: 400 var(--fs-400)/1 var(--font-display); text-transform: uppercase; color: var(--c-paper); }
  .svc__note { display: flex; align-items: center; gap: .6rem; padding-inline: var(--pad); color: var(--c-muted); font-size: var(--fs-100); letter-spacing: .04em; }

  /* Escurecimento do card de baixo enquanto o próximo sobe (services.js) */
  .svc__shade { position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none; border-radius: inherit; }
}