/* ---- motor de revelação: deslocamento curto + fade, sem escala em tipografia ---- */
[data-rv]:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
[data-rv="pop"]:not(.is-in) { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); }
[data-rv] {
  transition: opacity var(--rv-time) var(--ease) var(--rv-delay, 0ms),
              transform var(--rv-time) var(--ease) var(--rv-delay, 0ms);
  will-change: auto;
}
[data-rv].is-in { opacity: 1; transform: none; }

body { background: var(--ink); color: var(--paper); }

/* ---- âncoras livres do header fixo ---- */
#top, #sites, #servicos, #processo, #fechamento { scroll-margin-top: 96px; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.light-block :focus-visible { outline-color: var(--orange-deep); }

.pf-section { position: relative; padding: var(--s-9) 0; }
.dark-block { background: var(--ink); color: var(--paper); }
.dark-block-alt { background: var(--surf-section); color: var(--paper); }
.light-block { background: var(--paper); color: var(--ink); }

.section-head { max-width: 720px; }
.section-head.is-centered { margin: 0 auto; text-align: center; }
.pf-title {
  margin: 22px 0 0;
  font-size: var(--t-2);
  font-weight: var(--w-titulo);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
.pf-title b { font-weight: var(--w-forte); }
.pf-title i { font-style: normal; color: var(--orange); }
.light-block .pf-title i { color: var(--orange-deep); }
.pf-lead {
  max-width: 560px;
  margin: 26px 0 0;
  color: rgba(246, 246, 241, 0.74);
  font-size: var(--t-5);
  line-height: var(--lh-corpo);
  text-wrap: pretty;
}
.section-head.is-centered .pf-lead { margin-inline: auto; }
.light-block .pf-lead { color: var(--slate); }
/* site.css pinta .eyebrow com --pale (#dedfe1): 1,3:1 sobre o papel claro */
.light-block .eyebrow { color: var(--slate); }
.light-block .eyebrow::before { background: var(--orange-deep); }

/* ---- CTA ---- */
.pf-cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: var(--r);
  background: var(--orange); color: var(--ink);
  font: inherit; font-size: var(--t-sm); font-weight: var(--w-titulo); text-decoration: none;
  transition: background var(--hover-time) var(--ease), transform var(--hover-time) var(--ease);
}
.pf-cta:hover, .pf-cta:focus-visible { background: var(--orange-deep); color: #ffffff; transform: translateY(-2px); /* fundo escurece, branco volta a passar */ }
.pf-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap);
  color: var(--orange); font-size: var(--t-sm); font-weight: var(--w-titulo); text-decoration: none;
  border-bottom: 1px solid var(--orange-line);
  transition: border-color var(--hover-time) var(--ease);
}
.pf-link:hover, .pf-link:focus-visible { border-bottom-color: var(--orange); }
.light-block .pf-link { color: var(--orange-deep); border-bottom-color: rgba(201, 65, 0, 0.4); }
.light-block .pf-link:hover, .light-block .pf-link:focus-visible { border-bottom-color: var(--orange-deep); }

/* ---- 1. hero: bloco centrado + leque de 3 capturas ---- */
.pf-hero { position: relative; overflow: hidden; padding: clamp(170px, 12vw, 200px) 0 clamp(150px, 10.6vw, 180px); background: var(--ink); }
/* espaçamento em escala: eyebrow→título→lead→botões precisam ler como um
   bloco só. 93px/55px separavam tanto que a hero parecia desmontada. */
.pf-hero-stack { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 2.3vw, 32px); text-align: center; }
.hero-copy { position: relative; z-index: 2; display: flex; max-width: 600px; flex-direction: column; align-items: center; gap: clamp(16px, 1.4vw, 19px); }
/* line-height 1.02 do .pf-title global raspa acento de "Ú" e descendente
   de "p" nesse corpo; na hero sobe para 1.14 + folga de meia-linha */
.pf-hero .pf-title {
  font-size: var(--t-hero);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-display);
  padding-block: 0.06em 0.1em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* 580px forçava três linhas curtas e deixava "você mesmo." órfão;
   com 660px e balance o parágrafo fecha em duas linhas cheias */
.pf-hero .pf-lead {
  max-width: 660px; margin: 0;
  font-size: var(--t-5); line-height: var(--lh-corpo);
  text-wrap: balance;
}
.pf-hero-actions { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.pf-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border: 1px solid var(--edge-strong); border-radius: var(--r);
  color: var(--paper); font-size: var(--t-sm); font-weight: var(--w-titulo); text-decoration: none;
  transition: background var(--hover-time) var(--ease), border-color var(--hover-time) var(--ease);
}
.pf-ghost:hover, .pf-ghost:focus-visible { background: var(--surf-card-hover); border-color: var(--paper); }
.hero-proof { margin: 0; color: rgba(246, 246, 241, 0.55); font-size: var(--t-xs); }

/* O filtro fica estático e só a opacidade anima. Escalar a mesma camada
   filtrada fazia o navegador reamostrar o blur a cada frame, causando
   o salto/rasgo visível no início da hero. */
.hero-blur {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  animation: blur-in 900ms var(--ease) 1.8s forwards;
}
.hero-blur img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}
@keyframes blur-in {
  from { opacity: 0; }
  to { opacity: var(--o); }
}
/* As quatro manchas desfocadas são cards "mais ao fundo". Ficavam em 16,7% e
   58,6%, ou seja, dentro da coluna do texto, lidas como borrões soltos atrás do
   título — e a b3, em -12,5%, era cortada pela borda esquerda. Agora acompanham
   os cards nítidos na faixa externa, fora do miolo de leitura (30%–70%). */
.hero-b1 { left: 3%;  top: 8%;  width: 88px;  height: 132px; filter: blur(30px); --o: 0.34; }
.hero-b2 { left: 90%; top: 12%; width: 66px;  height: 99px; filter: blur(30px); --o: 0.26; }
.hero-b3 { left: 6%;  top: 70%; width: 110px; height: 165px; filter: blur(30px); --o: 0.26; }
.hero-b4 { left: 87%; top: 66%; width: 66px;  height: 99px; filter: blur(20px); --o: 0.26; }

/* ---- hero: entrada dos cards reproduzindo a timeline do arcads.ai ----
   Extraída do index.js do próprio site (GSAP), não estimada:
   1) os quatro cards nascem empilhados no centro em scale 0 e crescem
      juntos até scale 1 em 1s com power2.inOut;
   2) após 0,2s cada um voa para o seu deslocamento — em % do próprio
      card, que é como o original posiciona — com durações distintas
      (0,8s a 1,2s) e o easing literal cubic-bezier(.548,.985,.504,.49);
   3) texto e botões entram em fade de 1,2s junto com o voo. */
.reel { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.reel-card {
  position: absolute; top: 50%; left: 50%;
  width: clamp(96px, 7.9vw, 118px);
  aspect-ratio: 9 / 16;
  margin: calc(clamp(96px, 7.9vw, 118px) * -16 / 9 / 2) 0 0 calc(clamp(96px, 7.9vw, 118px) / -2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surf-card);
  border: 1px solid var(--edge-card);
  opacity: 0;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
.reel-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  opacity: 0;
  /* pré-roll: enquanto a pilha cresce no centro, as 10 capturas passam
     em 0,12s cada (1,2s no total, de 0,8s a 2,0s), acabando no instante
     em que os cards disparam para fora. Depois nada troca mais. */
  animation: reel-intro 1.2s linear 1 both;
  animation-delay: calc(0.8s + var(--i) * 0.12s);
}
/* A captura fixa de cada card NÃO anima: fica acesa desde sempre, como
   primeira do card no DOM. As outras oito passam por cima durante o
   pré-roll e apagam ao fim, deixando-a à vista. Sem animação aqui não
   existe estado em que o card fique sem imagem — foi isso que sumiu um
   card antes. */
.reel-card img.is-hold { animation: none; opacity: 1; }
/* cada captura acende 0,12s dentro da janela de 1,2s (10% do total) */
@keyframes reel-intro {
  0%             { opacity: 0; filter: blur(0); }
  0.01%, 10%     { opacity: 1; filter: blur(0); }
  10.01%, 100%   { opacity: 0; filter: blur(0); }
}
/* brilho varrendo na diagonal: faixa larga girada 25° que desce de fora
   a fora do card. Cada card entra em tempo diferente (--off) para o
   conjunto não piscar junto. */
.reel-card::after {
  content: ""; position: absolute; inset: -40% -20%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(
    200deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0) 58%);
  transform: translateY(-120%);
  animation: card-shine 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(2.4s + var(--off) / 8);
}
@keyframes card-shine {
  0%          { transform: translateY(-120%); }
  45%, 100%   { transform: translateY(120%); }
}

@keyframes fly-is2 {
  0%      { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  41.67%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: linear; }
  50.00%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.548, 0.985, 0.504, 0.49); }
  100%    { opacity: 1; transform: translate(260%, 98%) rotate(-1deg) scale(1); }
}
@keyframes fly-is3 {
  0%      { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  50.00%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: linear; }
  60.00%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.548, 0.985, 0.504, 0.49); }
  100%    { opacity: 1; transform: translate(340%, -60%) rotate(6deg) scale(1); }
}
@keyframes fly-is4 {
  0%      { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  45.45%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: linear; }
  54.55%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.548, 0.985, 0.504, 0.49); }
  100%    { opacity: 1; transform: translate(-280%, 98%) rotate(2deg) scale(1); }
}
@keyframes fly-is7 {
  0%      { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  47.62%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: linear; }
  57.14%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.548, 0.985, 0.504, 0.49); }
  100%    { opacity: 1; transform: translate(-353%, -50%) rotate(-2deg) scale(1); }
}

.reel-is2 { animation-name: fly-is2; animation-duration: 2.4s; transform: translate(260%, 98%) rotate(-1deg); }
.reel-is3 { animation-name: fly-is3; animation-duration: 2.0s; transform: translate(340%, -60%) rotate(6deg); }
.reel-is4 { animation-name: fly-is4; animation-duration: 2.2s; transform: translate(-280%, 98%) rotate(2deg); }
.reel-is7 { animation-name: fly-is7; animation-duration: 2.1s; transform: translate(-353%, -50%) rotate(-2deg); }

/* o bloco central espera o voo começar, como .hero-home-new_wrapper lá */
.pf-hero .hero-copy, .pf-hero .pf-hero-actions { opacity: 0; animation: hero-fade 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) 1.6s forwards; }
@keyframes hero-fade { to { opacity: 1; } }
/* título por caractere, em ordem embaralhada (SplitText + utils.shuffle) */
.pf-hero .pf-title .ch { opacity: 0; animation: hero-fade 0.4s ease-out forwards; animation-delay: var(--d); }

@media (prefers-reduced-motion: reduce) {
  .reel-card { opacity: 1; animation: none; transform: none; }
  .hero-blur { opacity: var(--o); transform: none; animation: none; }
  .reel-card img { animation: none; opacity: 0; }
  .reel-card img.is-hold { opacity: 1; }
  .reel-card::after { animation: none; opacity: 0; }
  .pf-hero .hero-copy, .pf-hero .pf-hero-actions, .pf-hero .pf-title .ch { opacity: 1; animation: none; }
}

/* Notebook de tela baixa: o hero tinha 1015px e a janela util ~820px, entao os
   dois cards de baixo ficavam cortados pela dobra — so 2 dos 4 apareciam
   inteiros. A composicao encolhe junto com o hero e volta a caber (4/4).
   Acima de 900px de altura nada muda: o desenho original ja cabia. */
@media (min-width: 861px) and (max-height: 900px) {
  .pf-hero { padding-block: clamp(150px, 17vh, 300px); }
  .reel { transform: scale(0.9); }
}

@media (max-width: 1024px) {
  .reel-is3, .reel-is7 { display: none; }
}
/* abaixo do tablet o anel viraria ruído atrás do texto: os cards descem
   para uma faixa própria, sem o voo */
@media (max-width: 860px) {
  /* No mobile os cards não explodem para os cantos: viram um carrossel logo
     abaixo dos botões, com as capturas em tamanho de leitura. O trilho sangra
     até as bordas da tela, mas o primeiro card continua alinhado ao texto. */
  .reel {
    position: relative; inset: auto;
    display: flex;
    align-self: stretch;
    gap: 14px;
    width: auto;
    margin: 4px calc(var(--shell-pad) * -1) 0;
    padding: 6px var(--shell-pad) 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--shell-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    pointer-events: auto;
    touch-action: pan-x pan-y;
  }
  .reel::-webkit-scrollbar { display: none; }

  .reel-card {
    position: relative; top: auto; left: auto; margin: 0;
    flex: 0 0 auto;
    width: min(62vw, 250px);
    max-width: none;
    scroll-snap-align: start;
    border-radius: 14px;
    /* entrada em subida, sem o voo para os cantos */
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    animation: reel-card-in 640ms var(--ease) both;
  }
  /* o desktop esconde estes dois abaixo de 1180px; no carrossel eles voltam */
  .reel-is3, .reel-is7 { display: block; }
  .reel-is2 { animation-delay: 0.30s; }
  .reel-is3 { animation-delay: 0.42s; }
  .reel-is4 { animation-delay: 0.54s; }
  .reel-is7 { animation-delay: 0.66s; }

  .hero-blur { display: none; }
}

@keyframes reel-card-in {
  to { opacity: 1; transform: none; }
}

/* ---- 2. segmentos atendidos ---- */
.segments {
  position: relative;
  padding: 30px 0;
  border-top: 1px solid var(--orange-line);
  border-bottom: 1px solid var(--edge);
  background: var(--surf-section);
  overflow: hidden;
}
.segments-track { display: flex; width: max-content; gap: 56px; animation: seg-scroll 44s linear infinite; }
.segments:hover .segments-track,
.segments:focus-within .segments-track { animation-play-state: paused; }
.segments-track span {
  color: var(--pale); font-size: var(--t-xs); font-weight: var(--w-ui);
  letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap;
}
.segments-track span::before { margin-right: 56px; color: var(--orange); content: "•"; }
@keyframes seg-scroll { to { transform: translate3d(calc(-50% - 28px), 0, 0); } }

/* ---- 3. carrossel de sites ---- */


/* ---- modo GSAP: a seção prende e o trilho anda com a rolagem ---- */

/* ---- 4. o que desenvolvemos ---- */
/* fundo: brasa laranja no canto superior esquerdo + arcos finos à direita */
#servicos { position: relative; overflow: hidden; }
#servicos::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 40% at -4% -6%, rgba(255, 87, 1, 0.26) 0%, rgba(255, 87, 1, 0.06) 46%, transparent 74%),
    radial-gradient(42% 40% at 100% 100%, rgba(255, 87, 1, 0.08) 0%, transparent 70%);
}
#servicos::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -330px;
  left: -310px;
  width: 650px;
  height: 650px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  opacity: 0.16;
  pointer-events: none;
}
.offer-arcs {
  position: absolute; inset: 0; pointer-events: none;
  color: var(--orange); opacity: 0.16;
}
.offer-arcs circle:last-child { display: none; }
#servicos > .shell { position: relative; z-index: 1; }
#servicos .pf-title b { color: var(--orange); }

.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 60px; align-items: stretch; }
.offer-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px;
  border: 1px solid var(--edge-card); border-radius: 14px;
  /* vidro sobre o preto: clareia de cima para baixo, como na referência */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.018) 100%);
  color: var(--paper);
}
/* card do meio: borda laranja e a luz que vaza do topo */
.offer-card.is-lead {
  border-color: rgba(255, 87, 1, 0.55);
  background:
    radial-gradient(120% 62% at 50% 0%, rgba(255, 87, 1, 0.20) 0%, rgba(255, 87, 1, 0.05) 45%, transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: 0 0 60px rgba(255, 87, 1, 0.16), inset 0 1px 0 rgba(255, 87, 1, 0.35);
}
.offer-badge {
  position: absolute; top: 22px; right: 22px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--orange); color: #ffffff;
  font-size: var(--t-xs); font-weight: var(--w-ui); letter-spacing: var(--ls-label); text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(255, 87, 1, 0.35);
}
.offer-icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border: 1px solid var(--edge-card); border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); color: var(--orange);
}
.offer-card.is-lead .offer-icon {
  border-color: rgba(255, 87, 1, 0.3);
  background: rgba(255, 87, 1, 0.1);
}
.offer-card h3 { margin: 14px 0 0; font-size: var(--t-4); font-weight: var(--w-titulo); letter-spacing: var(--ls-titulo); }
.offer-card p { margin: 0; color: rgba(246, 246, 241, 0.66); font-size: var(--t-sm); line-height: var(--lh-corpo); }
/* CTA dos três cards: mesma forma, mesma altura, mesma linha de base.
   A ênfase do card do meio vem do badge + glow, não de um segundo botão
   sólido brigando com a CTA principal do fechamento. */
.offer-card .pf-ghost { margin-top: auto; align-self: flex-start; }
.offer-card.is-lead .pf-ghost { border-color: rgba(255, 87, 1, 0.55); color: var(--paper); }
.offer-card.is-lead .pf-ghost:hover, .offer-card.is-lead .pf-ghost:focus-visible { background: rgba(255, 87, 1, 0.14); border-color: var(--orange); color: #ffffff; }
.offer-card .pf-ghost:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; } }

/* ---- 5. processo ---- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 42px;
  margin-top: 60px;
  padding-top: 84px;
}
.steps::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 12.5%;
  right: 12.5%;
  border-top: 2px solid var(--orange);
}
.step {
  position: relative;
  min-height: clamp(16rem, 26vw, 24.375rem);
  padding: 40px 30px 34px;
  border: 1px solid var(--pale);
  border-radius: var(--r);
  background: #ffffff;
  box-shadow: 0 18px 46px color-mix(in oklab, var(--ink) 6%, transparent);
}
.step::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  height: 30px;
  border-left: 1px dashed var(--orange-line);
}
.step-marker {
  position: absolute;
  z-index: 2;
  top: -84px;
  left: 50%;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  transform: translateX(-50%);
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--orange);
  color: #ffffff;
  box-shadow: 0 0 0 1px var(--orange);
  font-size: var(--t-sm);
  font-weight: var(--w-forte);
  line-height: 1;
}
.step-icon {
  display: flex;
  height: 52px;
  align-items: center;
  margin-bottom: 26px;
  color: var(--ink);
}
.step-icon svg { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step-icon svg > * { vector-effect: non-scaling-stroke; }
.step-icon .icon-accent { stroke: var(--orange); }
.step b {
  display: block;
  margin-bottom: 10px;
  color: var(--orange);
  font-size: var(--t-3);
  font-weight: var(--w-forte);
  letter-spacing: var(--ls-display);
  line-height: 1;
}
.step h3 { margin: 0 0 20px; font-size: var(--t-4); font-weight: var(--w-titulo); letter-spacing: var(--ls-titulo); }
.step p { margin: 0; color: var(--slate); font-size: var(--t-sm); line-height: var(--lh-corpo); }

/* ---- 6. fechamento ---- */
.closing {
  isolation: isolate;
  display: grid;
  min-height: min(720px, 82svh);
  place-items: center;
  overflow: hidden;
  padding: 150px 0 136px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}
.closing::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -330px;
  left: -310px;
  width: 650px;
  height: 650px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  background:
    radial-gradient(circle at 83% 68%, var(--orange) 0 7px, transparent 8px),
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--orange) 38%, transparent) 0, color-mix(in oklab, var(--orange) 12%, transparent) 48%, transparent 72%);
}
.closing::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -150px;
  bottom: -220px;
  width: 570px;
  height: 570px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(104deg, transparent 0 31px, color-mix(in oklab, var(--orange) 20%, transparent) 32px 33px),
    repeating-radial-gradient(circle at 100% 100%, transparent 0 22px, color-mix(in oklab, var(--orange) 26%, transparent) 23px 24px);
  opacity: 0.5;
}
.closing .shell { position: relative; z-index: 1; }
.closing .section-head { max-width: 780px; }
.closing .pf-title { color: var(--ink); font-size: var(--t-2); line-height: var(--lh-display); }
.closing .pf-title i { color: var(--orange); }
.closing .pf-lead { max-width: 680px; margin-top: 28px; color: var(--slate); font-size: var(--t-5); line-height: var(--lh-corpo); }
.closing .pf-cta {
  min-width: min(420px, 100%);
  min-height: 84px;
  margin-top: 40px;
  padding: 0 48px;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange));
  color: #ffffff;
  font-size: var(--t-4);
  box-shadow: 0 22px 54px color-mix(in oklab, var(--orange) 30%, transparent);
}
.closing .pf-cta span { margin-left: 14px; font-size: var(--t-4); font-weight: var(--w-titulo); }
/* rodapé escuro: fecha a página no mesmo tom do header e reusa .site-footer do site.css */
.site-footer { padding: 72px 0 30px; border-top: 1px solid var(--edge); background: var(--surf-deep); }
.site-footer .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 56px; }
.site-footer .footer-grid img { width: 118px; }
.site-footer .footer-brand-col p { max-width: 34ch; margin-top: 22px; color: rgba(246, 246, 241, 0.62); }
.site-footer .footer-grid h4 { color: #ffffff; }
.site-footer .footer-grid a { text-decoration: none; }
.site-footer .footer-grid li a { display: inline-flex; min-height: var(--tap); align-items: center; }
.site-footer .footer-grid a:hover, .site-footer .footer-grid a:focus-visible { color: var(--orange); }
.site-footer .footer-grid a[aria-current="page"] { color: rgba(246, 246, 241, 0.95); }
.site-footer .footer-contact-col p { color: rgba(246, 246, 241, 0.62); }
.site-footer .footer-base { margin-top: 72px; border-top: 1px solid var(--edge); color: rgba(246, 246, 241, 0.5); }
.site-footer .footer-base a { display: inline-flex; min-height: var(--tap); align-items: center; color: rgba(246, 246, 241, 0.5); text-decoration: none; }
.site-footer .footer-base a:hover, .site-footer .footer-base a:focus-visible { color: var(--orange); }
.site-footer a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 1024px) {
  .offer-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 126px 32px; }
  .steps::before { display: none; }
  .step { min-height: clamp(15rem, 24vw, 21.25rem); }
  .site-footer { padding: 80px 0 34px; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}
@media (max-width: 720px) {
  .pf-hero { padding: 130px 0 150px; }
  .pf-hero-stack { gap: 36px; }
  .pf-hero-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .pf-hero-actions .pf-cta, .pf-hero-actions .pf-ghost { justify-content: center; }
  .steps { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; padding: 0 0 0 56px; }
  .steps::before { display: block; top: 22px; bottom: 22px; left: 22px; right: auto; border-top: 0; border-left: 2px solid var(--orange); }
  .step { min-height: 0; padding: 28px 24px 30px; }
  .step::before { top: 44px; left: -12px; width: 12px; height: 0; border-top: 1px dashed var(--orange-line); border-left: 0; }
  .step-marker { top: 22px; left: -56px; width: 44px; height: 44px; transform: none; font-size: var(--t-xs); }
  .step-icon { height: 44px; margin-bottom: 20px; }
  .step-icon svg { width: 44px; height: 44px; }
  .step b { font-size: var(--t-3); }
  .section-head.is-centered { text-align: left; }
  .section-head.is-centered .pf-lead { margin-inline: 0; }
  #servicos::after { bottom: -220px; left: -230px; width: 420px; height: 420px; }
  .closing { min-height: 0; padding: 116px 0 104px; }
  .closing::before { top: -220px; left: -230px; width: 420px; height: 420px; }
  .closing::after { right: -150px; bottom: -150px; width: 340px; height: 340px; }
  .closing .section-head.is-centered { text-align: center; }
  .closing .pf-lead { margin: 26px auto 0; font-size: var(--t-5); }
  .closing .pf-cta { width: 100%; min-width: 0; min-height: 72px; margin-top: 38px; padding: 0 28px; font-size: var(--t-5); }
  .closing .pf-cta span { margin-left: 10px; font-size: var(--t-4); }
  .site-footer { padding: 72px 0 32px; }
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .site-footer .footer-grid img { width: 130px; }
  .site-footer .footer-brand-col p { max-width: none; }
  .site-footer .footer-base { align-items: flex-start; flex-direction: column; gap: 6px; margin-top: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .segments-track { animation: none; }
  [data-rv], [data-rv].is-in { transition-duration: 1ms; }
  [data-rv]:not(.is-in) { opacity: 1; transform: none; }
  .pf-cta:hover, .pf-cta:focus-visible { transform: none; }
}

/* ---- corredor de imagens (#sites): port vanilla do ImageStreamHero ----
   Profundidade autorada como tamanho aparente geométrico e trilhos que
   abrem cedo (fan > 1); os cards nascem cruzando o eixo (railBirth < 0)
   para a garganta do corredor nunca abrir buraco no centro. */
#sites { position: relative; min-height: 88svh; display: flex; align-items: center; overflow: hidden; container-type: inline-size; }
#sites > .shell { position: relative; z-index: 1; }
.ish {
  position: absolute; inset: 0; pointer-events: none;
  perspective: 30cqw; perspective-origin: 50% 55%;
}
.ish-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
/* véu: mantém o texto legível sobre o corredor sem apagar o movimento */
.ish-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(88% 58% at 50% 55%, color-mix(in oklab, var(--ink), transparent 6%) 0%, color-mix(in oklab, var(--ink), transparent 34%) 58%, transparent 100%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 26%, transparent 74%, var(--ink) 100%),
    linear-gradient(to right, var(--ink) 0%, transparent 18%, transparent 82%, var(--ink) 100%);
}
.ish-card {
  position: absolute; left: 50%; top: 55%;
  width: 18cqw; height: 25cqw;
  margin-left: -9cqw; margin-top: -12.5cqw;
  border-radius: 0.4cqw;
  overflow: hidden; backface-visibility: hidden;
  animation-duration: 18s; animation-timing-function: linear; animation-iteration-count: infinite;
}
.ish-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ish-r { animation-name: ish-r; }
.ish-l { animation-name: ish-l; }
/* pausar (em vez de desligar) preserva o corredor cheio: cada card já
   está no meio do voo por causa do delay negativo */
@media (prefers-reduced-motion: reduce) { .ish-card { animation-play-state: paused; } }
/* sem o trilho de cards, o corredor é o único conteúdo visual da seção:
   segue visível no mobile, só um pouco mais recolhido */
@media (max-width: 860px) { #sites { min-height: 72svh; } .ish { opacity: 0.85; } }
      @keyframes ish-r{0.00%{transform:translate3d(-11.00cqw,0,-258.46cqw) rotateY(-6.00deg);opacity:0.050}4.17%{transform:translate3d(-3.79cqw,0,-225.92cqw) rotateY(-6.92deg);opacity:0.085}8.33%{transform:translate3d(2.73cqw,0,-197.04cqw) rotateY(-7.83deg);opacity:0.121}12.50%{transform:translate3d(8.60cqw,0,-171.43cqw) rotateY(-8.75deg);opacity:0.156}16.67%{transform:translate3d(13.87cqw,0,-148.70cqw) rotateY(-9.67deg);opacity:0.192}20.83%{transform:translate3d(18.56cqw,0,-128.54cqw) rotateY(-10.58deg);opacity:0.227}25.00%{transform:translate3d(22.72cqw,0,-110.65cqw) rotateY(-11.50deg);opacity:0.263}29.17%{transform:translate3d(26.37cqw,0,-94.78cqw) rotateY(-12.42deg);opacity:0.298}33.33%{transform:translate3d(29.57cqw,0,-80.70cqw) rotateY(-13.33deg);opacity:0.333}37.50%{transform:translate3d(32.34cqw,0,-68.21cqw) rotateY(-14.25deg);opacity:0.369}41.67%{transform:translate3d(34.71cqw,0,-57.13cqw) rotateY(-15.17deg);opacity:0.404}45.83%{transform:translate3d(36.73cqw,0,-47.30cqw) rotateY(-16.08deg);opacity:0.440}50.00%{transform:translate3d(38.42cqw,0,-38.58cqw) rotateY(-17.00deg);opacity:0.475}54.17%{transform:translate3d(39.81cqw,0,-30.84cqw) rotateY(-17.92deg);opacity:0.510}58.33%{transform:translate3d(40.94cqw,0,-23.98cqw) rotateY(-18.83deg);opacity:0.546}62.50%{transform:translate3d(41.84cqw,0,-17.89cqw) rotateY(-19.75deg);opacity:0.581}66.67%{transform:translate3d(42.53cqw,0,-12.48cqw) rotateY(-20.67deg);opacity:0.617}70.83%{transform:translate3d(43.06cqw,0,-7.69cqw) rotateY(-21.58deg);opacity:0.652}75.00%{transform:translate3d(43.43cqw,0,-3.44cqw) rotateY(-22.50deg);opacity:0.688}79.17%{transform:translate3d(43.69cqw,0,0.33cqw) rotateY(-23.42deg);opacity:0.723}83.33%{transform:translate3d(43.85cqw,0,3.68cqw) rotateY(-24.33deg);opacity:0.758}87.50%{transform:translate3d(43.94cqw,0,6.65cqw) rotateY(-25.25deg);opacity:0.794}91.67%{transform:translate3d(43.98cqw,0,9.28cqw) rotateY(-26.17deg);opacity:0.829}95.83%{transform:translate3d(44.00cqw,0,11.62cqw) rotateY(-27.08deg);opacity:0.865}100.00%{transform:translate3d(44.00cqw,0,13.70cqw) rotateY(-28.00deg);opacity:0.900}}
@keyframes ish-l{0.00%{transform:translate3d(11.00cqw,0,-258.46cqw) rotateY(6.00deg);opacity:0.050}4.17%{transform:translate3d(3.79cqw,0,-225.92cqw) rotateY(6.92deg);opacity:0.085}8.33%{transform:translate3d(-2.73cqw,0,-197.04cqw) rotateY(7.83deg);opacity:0.121}12.50%{transform:translate3d(-8.60cqw,0,-171.43cqw) rotateY(8.75deg);opacity:0.156}16.67%{transform:translate3d(-13.87cqw,0,-148.70cqw) rotateY(9.67deg);opacity:0.192}20.83%{transform:translate3d(-18.56cqw,0,-128.54cqw) rotateY(10.58deg);opacity:0.227}25.00%{transform:translate3d(-22.72cqw,0,-110.65cqw) rotateY(11.50deg);opacity:0.263}29.17%{transform:translate3d(-26.37cqw,0,-94.78cqw) rotateY(12.42deg);opacity:0.298}33.33%{transform:translate3d(-29.57cqw,0,-80.70cqw) rotateY(13.33deg);opacity:0.333}37.50%{transform:translate3d(-32.34cqw,0,-68.21cqw) rotateY(14.25deg);opacity:0.369}41.67%{transform:translate3d(-34.71cqw,0,-57.13cqw) rotateY(15.17deg);opacity:0.404}45.83%{transform:translate3d(-36.73cqw,0,-47.30cqw) rotateY(16.08deg);opacity:0.440}50.00%{transform:translate3d(-38.42cqw,0,-38.58cqw) rotateY(17.00deg);opacity:0.475}54.17%{transform:translate3d(-39.81cqw,0,-30.84cqw) rotateY(17.92deg);opacity:0.510}58.33%{transform:translate3d(-40.94cqw,0,-23.98cqw) rotateY(18.83deg);opacity:0.546}62.50%{transform:translate3d(-41.84cqw,0,-17.89cqw) rotateY(19.75deg);opacity:0.581}66.67%{transform:translate3d(-42.53cqw,0,-12.48cqw) rotateY(20.67deg);opacity:0.617}70.83%{transform:translate3d(-43.06cqw,0,-7.69cqw) rotateY(21.58deg);opacity:0.652}75.00%{transform:translate3d(-43.43cqw,0,-3.44cqw) rotateY(22.50deg);opacity:0.688}79.17%{transform:translate3d(-43.69cqw,0,0.33cqw) rotateY(23.42deg);opacity:0.723}83.33%{transform:translate3d(-43.85cqw,0,3.68cqw) rotateY(24.33deg);opacity:0.758}87.50%{transform:translate3d(-43.94cqw,0,6.65cqw) rotateY(25.25deg);opacity:0.794}91.67%{transform:translate3d(-43.98cqw,0,9.28cqw) rotateY(26.17deg);opacity:0.829}95.83%{transform:translate3d(-44.00cqw,0,11.62cqw) rotateY(27.08deg);opacity:0.865}100.00%{transform:translate3d(-44.00cqw,0,13.70cqw) rotateY(28.00deg);opacity:0.900}}

/* ---- bloco de prova da seção #sites: promessa + números ---- */
.pitch {
  display: flex; flex-direction: column; align-items: center;
  max-width: 760px; margin: 0 auto; text-align: center;
}
.hl { color: var(--orange); font-weight: var(--w-titulo); }
.pitch-title {
  margin: 0;
  font-size: var(--t-2); font-weight: var(--w-titulo);
  letter-spacing: var(--ls-display); line-height: var(--lh-titulo); text-wrap: balance;
}
.pitch-lead {
  max-width: 600px; margin: 24px 0 0;
  color: rgba(246, 246, 241, 0.74); font-size: var(--t-body); line-height: var(--lh-corpo); text-wrap: pretty;
}
.stats {
  display: flex; align-items: start; justify-content: center;
  margin: 40px 0 0; padding: 0;
  border-top: 1px solid var(--edge-card);
  padding-top: 32px;
  width: 100%;
}
/* o divisor mora no item, não entre itens: mantém as três colunas
   com a mesma largura mesmo com rótulos de tamanhos diferentes */
.stat { flex: 1 1 0; padding: 0 16px; }
.stat + .stat { border-left: 1px solid var(--edge-card); }
.stat dt {
  color: var(--orange);
  font-size: var(--t-35); font-weight: var(--w-forte);
  letter-spacing: var(--ls-display); line-height: 1;
}
.stat dd {
  margin: 10px 0 0;
  color: rgba(246, 246, 241, 0.62); font-size: var(--t-sm); line-height: var(--lh-lead);
}

/* Composição aprovada: quatro vitrines reais emolduram a prova central. */
#sites {
  isolation: isolate;
  min-height: clamp(760px, 72vw, 940px);
  padding: clamp(96px, 8vw, 132px) 0;
  background: var(--paper);
  color: var(--ink);
}
#sites > .shell { z-index: 3; width: 100%; }
#sites .ish { z-index: 1; perspective: 1600px; perspective-origin: 50% 50%; }
#sites .ish-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
#sites .showcase-card {
  position: absolute;
  top: 50%;
  width: clamp(232px, 17.2vw, 322px);
  aspect-ratio: 12 / 25;
  overflow: hidden;
  border: 1px solid var(--pale);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 28px 72px color-mix(in oklab, var(--ink) 18%, transparent);
  transform-origin: center;
}
#sites .showcase-card.is-outer { width: clamp(266px, 20vw, 380px); z-index: 1; }
#sites .showcase-card.is-inner { z-index: 2; }
#sites .showcase-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
#sites .showcase-lumi { left: -7%; transform: translateY(-50%) rotate(-3deg); }
#sites .showcase-move { left: 9%; transform: translateY(-49%) rotate(1.5deg); }
#sites .showcase-pata { right: 9%; transform: translateY(-49%) rotate(-1.5deg); }
#sites .showcase-passo { right: -7%; transform: translateY(-50%) rotate(3deg); }
#sites .ish-veil {
  z-index: 2;
  background:
    linear-gradient(to bottom, var(--paper), transparent 12%, transparent 88%, var(--paper)),
    linear-gradient(to right, var(--paper), transparent 5%, transparent 95%, var(--paper));
}
#sites .pitch {
  box-sizing: border-box;
  max-width: 900px;
  padding: clamp(62px, 5.3vw, 92px) clamp(53px, 5.3vw, 86px);
  border: 0;
  border-radius: 38px;
  background: #ffffff;
  color: var(--ink);
}
/* tipografia da referência: título pesado ocupando a largura toda do card */
#sites .pitch-title {
  color: #111827;
  font-size: var(--t-1); font-weight: var(--w-titulo);
  letter-spacing: var(--ls-display); line-height: var(--lh-display);
}
#sites .pitch-title .hl { font-weight: var(--w-titulo); }
#sites .pitch-lead {
  max-width: 768px; margin-top: 34px;
  color: #111827; font-size: var(--t-4); line-height: var(--lh-corpo);
}
#sites .stats { margin-top: 53px; padding-top: 41px; border-top-color: var(--pale); }
#sites .stat dt { font-size: var(--t-3); font-weight: var(--w-forte); }
#sites .stat + .stat { border-left-color: var(--pale); }
#sites .stat dd { margin-top: 14px; color: #111827; font-size: var(--t-5); }
/* CTA única da seção: bloco laranja, texto branco (bold ≥18.66px → 3:1 OK) */
#sites .pitch-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 86px; margin-top: 53px; padding: 26px 74px;
  border-radius: 17px;
  background: var(--orange); color: var(--ink);
  font-size: var(--t-4); font-weight: var(--w-titulo); letter-spacing: var(--ls-titulo); text-decoration: none;
  box-shadow: 0 18px 40px color-mix(in oklab, var(--orange) 28%, transparent);
  transition: background 0.2s ease, transform 0.2s ease;
}
#sites .pitch-cta:hover, #sites .pitch-cta:focus-visible {
  background: var(--orange-deep); color: #ffffff; transform: translateY(-2px); /* fundo escurece, branco volta a passar */
}

@media (max-width: 1024px) {
  #sites .showcase-card { width: 20vw; }
  #sites .showcase-card.is-outer { width: 23vw; }
  #sites .showcase-lumi { left: -8%; }
  #sites .showcase-move { left: 4%; }
  #sites .showcase-pata { right: 4%; }
  #sites .showcase-passo { right: -8%; }
}
@media (max-width: 860px) {
  #sites { display: block; min-height: auto; padding: var(--s-9) 0; }
  #sites .ish {
    position: relative;
    inset: auto;
    height: auto;
    margin-bottom: 48px;
    padding: 0 16px;
  }
  #sites .ish-stage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  #sites .showcase-card,
  #sites .showcase-card.is-outer {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 14px 34px color-mix(in oklab, var(--ink) 12%, transparent);
    transform: none;
  }
  #sites .ish-veil { display: none; }
  #sites .pitch { max-width: 680px; padding: 42px 28px; border-radius: 18px; }
  #sites .pitch-cta { width: 100%; margin-top: 32px; padding: 18px 24px; font-size: var(--t-5); }
}
@media (max-width: 720px) {
  .pitch { margin-top: 0; }
  /* empilhado, cada item precisa ocupar a linha inteira para o texto
     continuar centrado — align-items:start encolheria a caixa */
  .stats { flex-direction: column; align-items: stretch; gap: 26px; padding-top: 26px; }
  .stat { padding: 0; }
  .stat + .stat { border-left: 0; }
}

/* ---- 3b · manifesto (estrutura clonada da seção "não entrega sites") ---- */
#manifesto { padding: var(--s-9) 0; background: var(--ink); color: var(--paper); }
.manifesto-grid {
  display: grid; align-items: start; gap: clamp(40px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
}
.manifesto-badge {
  display: inline-block; margin: 0 0 18px;
  padding: 14px 26px; border-radius: 12px;
  background: var(--orange); color: #111827;
  font-size: var(--t-4); font-weight: var(--w-titulo); letter-spacing: var(--ls-titulo);
}
.manifesto-title {
  margin: 0; color: var(--paper);
  font-size: var(--t-2); font-weight: var(--w-titulo);
  letter-spacing: var(--ls-display); line-height: var(--lh-display);
}
.manifesto-lead {
  max-width: 900px; margin: clamp(48px, 5vw, 84px) 0 0;
  font-size: var(--t-4); line-height: var(--lh-lead); letter-spacing: var(--ls-titulo);
}
.manifesto-lead b { font-weight: var(--w-titulo); color: var(--paper); }
.manifesto-lead span { color: rgba(246, 246, 241, 0.55); }
/* pilha de avisos de venda — ilustrativa, sem valores inventados */
.notify-stack { position: relative; height: clamp(11rem, 22vw, 13.375rem); }
.notify {
  position: absolute; right: 0; display: flex; gap: 12px; align-items: center;
  width: 100%; padding: 16px 18px;
  border: 1px solid var(--surf-card-hover); border-radius: 14px;
  background: var(--surf-card); color: var(--paper);
  box-shadow: 0 18px 44px rgba(10, 10, 10, 0.55);
}
/* passagem HyperFrames: chegada, confirmação, acomodação e saída.
   O reinício acontece fora do quadro, então o loop não pisca nem
   troca a ordem visual da pilha. */
.notify {
  top: 0; z-index: 0; opacity: 0;
  transform: translate3d(24px, 96px, 0) scale(0.96);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: notify-hyperframes 12s linear infinite;
  animation-delay: calc(var(--k) * -2.4s);
}
@keyframes notify-hyperframes {
  0% {
    z-index: 5; opacity: 0;
    transform: translate3d(24px, 96px, 0) scale(0.96);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  5% {
    z-index: 5; opacity: 1;
    transform: translate3d(-3px, 70px, 0) scale(1.012);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  8%, 19% {
    z-index: 5; opacity: 1;
    transform: translate3d(0, 72px, 0) scale(1);
  }
  20% {
    z-index: 4; opacity: 1;
    transform: translate3d(0, 72px, 0) scale(1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  27%, 39% {
    z-index: 4; opacity: 0.72;
    transform: translate3d(0, 38px, 0) scale(0.977);
  }
  40% {
    z-index: 3; opacity: 0.72;
    transform: translate3d(0, 38px, 0) scale(0.977);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  47%, 59% {
    z-index: 3; opacity: 0.4;
    transform: translate3d(0, 8px, 0) scale(0.95);
  }
  60% {
    z-index: 2; opacity: 0.4;
    transform: translate3d(0, 8px, 0) scale(0.95);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  67%, 100% {
    z-index: 0; opacity: 0;
    transform: translate3d(0, -20px, 0) scale(0.93);
  }
}
@media (prefers-reduced-motion: reduce) {
  .notify { animation: none; }
  .notify[style*="--k: 0"] { z-index: 3; transform: translateY(72px); opacity: 1; }
  .notify[style*="--k: 1"] { z-index: 2; transform: translateY(38px) scale(0.977); opacity: 0.72; }
  .notify[style*="--k: 2"] { z-index: 1; transform: translateY(8px) scale(0.95); opacity: 0.4; }
  .notify[style*="--k: 3"], .notify[style*="--k: 4"] { display: none; }
}
.notify-icon {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: 10px; background: #ffffff;
}
.notify-icon svg { width: 22px; height: 25px; }
.notify-body { min-width: 0; }
.notify-body b { display: block; color: rgba(246, 246, 241, 0.96); font-size: var(--t-sm); font-weight: var(--w-titulo); }
.notify-body span { color: rgba(246, 246, 241, 0.78); font-size: var(--t-xs); }
.notify time { margin-left: auto; color: rgba(246, 246, 241, 0.72); font-size: var(--t-xs); }

/* ---- 3c · entregáveis: cards empilhados por sticky ---- */
/* seção em light mode: fundo branco, cards seguem escuros (contraste
   invertido dentro do card, por isso a cor de texto é redeclarada nele) */
#entregaveis { padding: var(--s-9) 0 var(--s-10); background: #ffffff; color: #111827; }
.deliver-head {
  max-width: 900px;
  margin: 0 auto clamp(48px, 5vw, 80px);
  color: #111827;
  text-align: center;
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: var(--w-titulo);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
.deliver-head::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 24px auto 0;
  border-radius: 999px;
  background: var(--orange);
}
.deliver-head u {
  display: inline-block;
  color: var(--orange-deep);
  font-family: var(--display);
  font-weight: var(--w-titulo);
  letter-spacing: var(--ls-display);
  text-decoration: none;
}
.deliver-stack { display: flex; flex-direction: column; gap: 26px; }
.deliver-card {
  position: sticky; top: calc(96px + var(--i) * 22px);
  display: grid; gap: clamp(24px, 3vw, 48px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--surf-card-hover); border-radius: 24px;
  background: var(--surf-card); color: var(--paper);
  box-shadow: 0 26px 60px color-mix(in oklab, var(--ink) 16%, transparent);
}
.deliver-copy { display: flex; flex-direction: column; align-items: flex-start; }
.deliver-tag {
  display: inline-flex; gap: 10px; align-items: center;
  padding: 9px 16px; border-radius: 999px;
  background: var(--surf-card-hover); color: var(--paper);
  font-size: var(--t-sm); font-weight: var(--w-ui);
}
.deliver-tag i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.deliver-card h3 {
  margin: clamp(28px, 3vw, 48px) 0 0;
  font-size: var(--t-35); font-weight: var(--w-titulo);
  letter-spacing: var(--ls-titulo); line-height: var(--lh-titulo); text-transform: uppercase;
}
.deliver-card p {
  max-width: 420px; margin: auto 0 0; padding-top: 28px;
  color: rgba(246, 246, 241, 0.62); font-size: var(--t-sm); line-height: var(--lh-corpo);
}
.deliver-media { position: relative; overflow: hidden; border-radius: 18px; background: var(--surf-deep); }
.deliver-media img { display: block; width: 100%; height: 100%; min-height: clamp(13rem, 22vw, 18.75rem); object-fit: cover; object-position: 50% 50%; }
.deliver-quote {
  position: absolute; right: 16px; bottom: 16px; left: 16px;
  padding: 12px 16px; border-radius: 10px;
  background: rgba(10, 10, 10, 0.72); color: var(--paper);
  font-size: var(--t-sm); text-align: right;
  backdrop-filter: blur(6px);
}
.deliver-index {
  position: absolute; top: 16px; left: 16px;
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: rgba(10, 10, 10, 0.72); color: var(--paper);
  font-size: var(--t-4); font-weight: var(--w-titulo);
}
.deliver-close {
  margin: clamp(96px, 10vw, 150px) auto 0; max-width: 900px;
  color: #111827; text-align: center;
  font-size: var(--t-3); font-weight: var(--w-titulo); letter-spacing: var(--ls-titulo); line-height: var(--lh-titulo);
}
@media (max-width: 900px) {
  .manifesto-grid { grid-template-columns: minmax(0, 1fr); }
  .notify-stack { max-width: 420px; }
  .deliver-card { grid-template-columns: minmax(0, 1fr); position: static; }
  .deliver-card p { margin-top: 24px; }
  .deliver-media img { min-height: clamp(11rem, 18vw, 15rem); }
}

/* ============================================================ abertura mobile
   As capturas passam em tela cheia antes do hero. A saída é por animação de
   CSS com fill-mode forwards: se o JS não rodar, a camada some do mesmo jeito
   e nunca fica presa cobrindo a página. No desktop nem existe. */

.splash { display: none; }

@media (max-width: 860px) {
  .splash {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--ink);
    animation: splash-sai 420ms var(--ease) 1900ms forwards;
  }

  .splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
  }

  .splash-logo {
    width: 128px;
    height: auto;
    opacity: 0;
    animation: splash-entra 420ms var(--ease) 80ms forwards;
  }

  /* o card ocupa a tela: limitado pela largura ou pela altura, o que vier antes */
  .splash-card {
    position: relative;
    width: min(78vw, calc((100dvh - 210px) * 9 / 16));
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: 1px solid var(--edge-card);
    border-radius: 18px;
    background: var(--surf-card);
    opacity: 0;
    transform: scale(0.94);
    animation: splash-card-entra 520ms var(--ease) 120ms forwards;
  }

  .splash-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    opacity: 0;
    /* mesma cadência do reel: cada captura aparece por um oitavo do ciclo */
    animation: splash-troca 1440ms linear both;
    animation-delay: calc(340ms + var(--i) * 180ms);
  }

  .splash-legenda {
    margin: 0;
    color: rgba(246, 246, 241, 0.5);
    font-size: var(--t-xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    opacity: 0;
    animation: splash-entra 420ms var(--ease) 260ms forwards;
  }

  /* a página não rola por trás da abertura; a classe só existe com JS */
  .splash-on,
  .splash-on body {
    overflow: hidden;
  }
}

@keyframes splash-sai {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes splash-entra {
  to { opacity: 1; }
}

@keyframes splash-card-entra {
  to { opacity: 1; transform: none; }
}

@keyframes splash-troca {
  0%           { opacity: 0; }
  0.01%, 11%   { opacity: 1; }
  11.01%, 100% { opacity: 0; }
}

/* quem pediu menos movimento não vê a abertura */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none !important; }
}

/* ================================================================== vitrine
   Marca em cima, loja embaixo. Troca por radio + :checked, sem JS: funciona
   com teclado e continua funcionando se o script falhar. */

.vitrine-head { max-width: 780px; margin: 0 0 clamp(32px, 4vw, 52px); }

.vitrine-title {
  margin: 14px 0 0;
  color: var(--paper);
  font-size: var(--t-3);
  font-weight: var(--w-titulo);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-titulo);
}

.vitrine-title em { font-style: normal; color: var(--orange); }

.vitrine-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vitrine-abas {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.vitrine-abas::-webkit-scrollbar { display: none; }

.vitrine-aba {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 22px;
  border: 1px solid var(--edge-card);
  border-radius: 12px 12px 0 0;
  background: var(--surf-card);
  color: rgba(246, 246, 241, 0.6);
  cursor: pointer;
  transition:
    background var(--hover-time) var(--ease),
    border-color var(--hover-time) var(--ease),
    color var(--hover-time) var(--ease);
}

.vitrine-marca {
  font-size: var(--t-5);
  font-weight: var(--w-titulo);
  letter-spacing: var(--ls-titulo);
}

.vitrine-ramo {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0.7;
}

/* A altura vem da proporção do palco, não da imagem: esticada para 1240px de
   largura, a captura de 900x1200 dava 1653px de altura no desktop. Como o
   recorte é pelo topo, aparece a primeira dobra da loja, que é o que interessa. */
.vitrine-palco {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--edge-card);
  border-radius: 0 18px 18px 18px;
  background: var(--surf-card);
  overflow: hidden;
}

@media (min-width: 861px) {
  .vitrine-palco {
    aspect-ratio: 16 / 10;
    max-height: 72vh;
  }
}

/* as telas ficam empilhadas; só a escolhida aparece */
.vitrine-tela { position: absolute; inset: 0; margin: 0; }

.vitrine-tela img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.vitrine-tela figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 22px 18px;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.92), transparent);
  color: var(--paper);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-ui);
}

.vitrine-tela {
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
}

/* liga cada radio à sua aba e à sua tela */
#vit-amekids:checked ~ .vitrine-abas .vitrine-aba:nth-of-type(1),
#vit-bartimeu:checked ~ .vitrine-abas .vitrine-aba:nth-of-type(2),
#vit-focinhoschic:checked ~ .vitrine-abas .vitrine-aba:nth-of-type(3) {
  border-color: var(--orange-line);
  background: var(--surf-card-hover);
  color: var(--paper);
}

#vit-amekids:checked ~ .vitrine-palco .vitrine-tela:nth-of-type(1),
#vit-bartimeu:checked ~ .vitrine-palco .vitrine-tela:nth-of-type(2),
#vit-focinhoschic:checked ~ .vitrine-palco .vitrine-tela:nth-of-type(3) {
  opacity: 1;
  pointer-events: auto;
}

.vitrine-aba:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .vitrine-abas {
    margin-inline: calc(var(--shell-pad) * -1);
    padding-inline: var(--shell-pad);
  }

  .vitrine-aba { padding: 12px 18px; }
  .vitrine-palco { border-radius: 16px; }
}

/* ================================================ hero no formato da referência
   Selo, título centrado, texto de apoio e um CTA com degradê e seta em caixa. */

.pf-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--s-5);
  padding: 0 var(--s-4);
  min-height: 46px;
  border: 1px solid var(--edge-strong);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink), #ffffff 7%);
  color: var(--paper);
  font-size: var(--t-sm);
  font-weight: var(--w-ui);
  letter-spacing: var(--ls-ui);
}

/* o losango laranja do selo, mesmo sinal usado no resto do site */
.pf-badge span {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* o degradê e a seta em caixa vêm da referência */
.pf-cta.is-lead {
  gap: var(--s-3);
  padding: 0 var(--s-3) 0 var(--s-6);
  min-height: 48px;
  border-radius: 12px;
  background: linear-gradient(100deg, var(--accent-deep), var(--accent) 62%);
  color: var(--white);
  font-size: var(--t-5);
  box-shadow: 0 18px 40px color-mix(in oklab, var(--accent) 26%, transparent);
}

.pf-cta.is-lead:hover,
.pf-cta.is-lead:focus-visible {
  background: linear-gradient(100deg, var(--accent-deep), var(--accent-deep) 70%);
  color: var(--white);
}

.pf-cta-seta {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(10, 10, 10, 0.82);
  color: var(--white);
  font-size: 15px;
  line-height: 1;
}

/* o título do hero é o único centrado da página */
.pf-hero .hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Os cards do reel animam com will-change, o que cria contexto de empilhamento
   próprio e os punha na frente do texto. O bloco central sobe acima deles. */
.pf-hero .pf-hero-stack {
  position: relative;
  z-index: 3;
}

/* Véu atrás do texto: os mockups têm capturas claras e, mesmo estando por
   baixo, tiravam a leitura do parágrafo. Escurece só o miolo, sem tocar na
   composição das laterais. */
.pf-hero::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(1100px, 86vw);
  height: min(720px, 78%);
  background: radial-gradient(
    ellipse at center,
    var(--ink) 0%,
    color-mix(in oklab, var(--ink), transparent 22%) 42%,
    transparent 72%
  );
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
}

@media (max-width: 860px) {
  .pf-hero::after { display: none; }
}

/* No desktop os mockups ocupam as laterais: o texto fica no corredor central.
   Como a largura é menor que a da página, o título usa um degrau abaixo da
   escala de hero, e text-wrap: balance distribui as linhas em vez de deixar
   uma órfã curta no fim. */
.pf-hero .pf-title {
  max-width: min(9.8em, 50vw);
  font-size: var(--t-2);
  text-wrap: balance;
}

.pf-hero .pf-badge {
  max-width: min(36rem, 50vw);
}

.pf-hero .pf-lead { text-wrap: pretty; }

@media (max-width: 1024px) {
  .pf-hero .pf-title,
  .pf-hero .pf-badge {
    max-width: none;
  }
}

.pf-hero .pf-lead {
  max-width: min(22.6em, 44vw);
  margin-inline: auto;
}

@media (max-width: 1024px) {
  .pf-hero .pf-lead { max-width: 34rem; }
}

@media (max-width: 860px) {
  /* A abertura já mostra as capturas em tela cheia; repetir o carrossel logo
     abaixo do hero era redundante e empurrava o conteúdo para baixo. */
  .pf-hero .reel { display: none; }

  .pf-cta.is-lead {
    justify-content: space-between;
    width: 100%;
    padding-inline: var(--s-5) var(--s-3);
  }
}