/* ============================================================
   BL KIDS · FILMAGEM INFANTIL — página de vendas
   Direção de arte original: "Feito para durar" — a página como
   um objeto de guardar. Papel quente, tinta marinho, prata do
   emblema. Ritmo de revista, perfuração de filme, molduras com
   plaquinha de legenda. Nada de desenho animado.
   Fraunces (display) · Hanken Grotesk (texto) · JetBrains Mono (rótulos)
   Paleta oficial BL Kids: marinho #0d2739 · aço #aebac7 · cinza #9da3aa
   ============================================================ */

:root {
  --paper:      #f4f1e8;
  --paper-2:    #ece7d9;
  --card:       #fffefa;
  --ink:        #0d2739;
  --ink-2:      #35505f;
  --ink-3:      #6a7c87;
  --mist:       #9aa8b2;
  --accent:     #14405c;
  --accent-2:   #1f5c7e;
  --steel:      #aebac7;
  --silver-lo:  #8b98a8;
  --silver-hi:  #d7dde4;
  /* metais do emblema BL (cromo + lilás) */
  --chrome-1:   #f1f3f7;
  --chrome-2:   #c4ccd8;
  --chrome-3:   #8895a6;
  --lilac:      #9ea6c8;
  --lilac-lo:   #6d75a3;
  /* azul da proposta/orçamento original do cliente */
  --brand-blue: #7191b6;
  --brand-blue-deep: #5c7ca0;
  /* gradientes metálicos prontos: "light" p/ fundos escuros, "dark" p/ fundos claros */
  --metal-light: linear-gradient(100deg, var(--lilac-lo) 0%, var(--chrome-3) 22%, var(--chrome-1) 42%, var(--lilac) 58%, var(--chrome-2) 76%, var(--lilac-lo) 100%);
  --metal-dark:  linear-gradient(100deg, var(--lilac-lo) 0%, var(--accent-2) 28%, var(--lilac) 52%, var(--accent-2) 74%, var(--lilac-lo) 100%);
  --rule:       rgba(13, 39, 57, .13);
  --rule-2:     rgba(13, 39, 57, .07);
  --rule-str:   rgba(13, 39, 57, .24);
  --shadow-s:   0 14px 34px -22px rgba(13, 39, 57, .30);
  --shadow-m:   0 30px 64px -34px rgba(13, 39, 57, .34);
  --shadow-l:   0 46px 90px -40px rgba(13, 39, 57, .40);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease: cubic-bezier(.2, .7, 0, 1);
  --pad:  clamp(24px, 6vw, 110px);
  --rail: 46px;              /* largura da trilha de perfuração */
  --maxw: 1200px;
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: .003em;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-optical-sizing: auto;
}
em {
  font-style: italic;
  background: var(--metal-dark);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  animation: metalShine 10s ease-in-out infinite;
}
@keyframes metalShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { em { animation: none; background-position: 30% 50%; } }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.mono {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- texturas de fundo ---------- */
.paper-tex {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.aura {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 34% at 84% 6%, rgba(20, 64, 92, .10), transparent 62%),
    radial-gradient(40% 32% at 8% 26%, rgba(174, 186, 199, .26), transparent 60%),
    radial-gradient(60% 40% at 50% 108%, rgba(20, 64, 92, .07), transparent 60%);
}
/* luz suave seguindo o cursor (só ponteiro fino) */
.spot {
  position: fixed; width: 520px; height: 520px; left: 0; top: 0; z-index: 1;
  border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate3d(var(--sx, -50vw), var(--sy, -50vh), 0) translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 68%);
  transition: opacity .5s;
}
body.has-pointer .spot { opacity: 1; }
@media (max-width: 900px) { .spot { display: none; } }

/* ---------- trilha de perfuração de filme + progresso ---------- */
.sprocket {
  position: fixed; top: 0; bottom: 0; width: var(--rail); z-index: 55;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='36'%3E%3Crect width='46' height='36' fill='%23ece7d9'/%3E%3Crect x='13' y='9' width='20' height='11' rx='3.5' fill='%230d2739' fill-opacity='0.15'/%3E%3Crect x='13' y='9' width='20' height='2' rx='1' fill='%230d2739' fill-opacity='0.10'/%3E%3C/svg%3E") repeat-y left top;
  background-size: var(--rail) 36px;
}
.sprocket--left  { left: 0;  border-right: 1px solid var(--rule); }
.sprocket--right { right: 0; border-left:  1px solid var(--rule); }
.sprocket__fill {
  position: absolute; left: 0; right: 0; top: 0; height: var(--p, 0%);
  background: linear-gradient(180deg, var(--chrome-1), var(--lilac) 55%, var(--accent));
  opacity: .34; mix-blend-mode: multiply;
  transition: height .12s linear;
}
@media (max-width: 1180px) { .sprocket { display: none; } :root { --rail: 0px; } }

/* ---------------- cabeçalho ---------------- */
.head {
  position: fixed; top: 0; left: var(--rail); right: var(--rail); z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 18px var(--pad);
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s;
}
.head:not(.stuck) .head__nav a {
  text-shadow: 0 1px 3px rgba(244, 241, 232, .9), 0 2px 14px rgba(244, 241, 232, .75);
}
.head.stuck {
  background: rgba(244, 241, 232, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--rule-2), 0 20px 40px -34px rgba(13, 39, 57, .4);
  padding-top: 12px; padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand__coin {
  width: 96px; height: 96px; flex: none;
  transition: width .4s var(--ease), height .4s var(--ease);
  filter: drop-shadow(0 4px 12px rgba(13, 39, 57, .22));
}
.head.stuck .brand__coin { width: 68px; height: 68px; }
.head__nav { display: flex; align-items: center; gap: 30px; }
.head__nav a {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3); position: relative; padding: 5px 0; transition: color .3s;
}
.head__nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent); transition: right .35s var(--ease);
}
.head__nav a:hover, .head__nav a.active { color: var(--ink); }
.head__nav a:hover::after, .head__nav a.active::after { right: 0; }
.head__cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 12px 18px; border-radius: 999px;
  transition: background .3s, transform .3s var(--ease), box-shadow .3s;
}
.head__cta svg { width: 10px; height: 10px; }
.head__cta:hover { background: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-s); }
@media (max-width: 1080px) { .head__nav { display: none; } }
@media (max-width: 520px) { .head__cta span { display: none; } .head__cta { padding: 11px; } }

/* ---------------- WhatsApp flutuante ---------------- */
.wa-fixed {
  position: fixed; right: calc(22px + var(--rail)); bottom: 22px; z-index: 65;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; isolation: isolate;
  transition: transform .3s var(--ease);
}
.wa-fixed svg { position: relative; z-index: 2; width: 32px; height: 32px; }
.wa-fixed::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%;
  background: #25d366; box-shadow: 0 14px 30px -8px rgba(13, 39, 57, .45);
}
.wa-fixed::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%;
  background: #25d366; animation: waPulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.wa-fixed:hover { transform: scale(1.07); }
@keyframes waPulse { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
@media (max-width: 620px) { .wa-fixed { right: 16px; bottom: 16px; width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .wa-fixed::before { animation: none; opacity: 0; } }

/* ---------------- botões ---------------- */
.btn {
  --bg: var(--accent); --fg: #fff; --bd: var(--accent);
  position: relative; display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 26px; border-radius: 999px;
  font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--fg); background: var(--bg); border: 1px solid var(--bd);
  cursor: pointer; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .35s, background .3s, color .3s, border-color .3s;
}
.btn svg { width: 12px; height: 12px; flex: none; }
.btn::after {
  content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .16);
  transform: translateX(-101%); transition: transform .5s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(20, 64, 92, .55), 0 0 0 3px rgba(158, 166, 200, .22); }
.btn:hover::after { transform: translateX(0); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--rule-str); }
.btn--ghost::after { background: rgba(20, 64, 92, .07); }
.btn--ghost:hover { --fg: var(--accent); --bd: var(--accent); }
.btn--lg { padding: 19px 34px; font-size: .68rem; }

/* ---------------- estrutura ---------------- */
main { position: relative; z-index: 2; margin: 0 var(--rail); }
.foot { margin: 0 var(--rail); }
.chapter { position: relative; overflow: clip; padding: clamp(84px, 14vh, 176px) var(--pad); }
.chapter--raise { background: var(--paper-2); }
.chapter--raise::before, .chapter--raise::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule);
}
.chapter--raise::before { top: 0; } .chapter--raise::after { bottom: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; position: relative; }

.chapter__no {
  position: absolute; top: -.28em; right: -.06em; z-index: 0;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(6rem, 20vw, 19rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(13, 39, 57, .11);
  pointer-events: none; user-select: none;
}
.chapter__head { position: relative; z-index: 1; max-width: 44rem; }
.kicker {
  display: inline-flex; align-items: center; gap: 13px; margin-bottom: 22px;
  font-family: var(--mono); font-size: .63rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-2);
}
.kicker::before { content: ""; width: 30px; height: 2px; background: linear-gradient(90deg, var(--lilac), var(--chrome-2)); border-radius: 2px; }
.h-lg { font-size: clamp(1.95rem, 3.9vw, 3.15rem); letter-spacing: -.025em; }
.h-lg em { display: inline; }

/* ---------------- reveal ---------------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-wipe { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .5s var(--ease), clip-path 1.05s var(--ease); }
.rv-wipe.in { opacity: 1; clip-path: inset(0 0 0 0); }
.rv-d1 { transition-delay: .07s; } .rv-d2 { transition-delay: .15s; }
.rv-d3 { transition-delay: .23s; } .rv-d4 { transition-delay: .31s; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; overflow: clip;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(130px, 19vh, 200px) var(--pad) clamp(40px, 7vh, 76px);
}
/* vídeo de fundo passando atrás */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__video {
  position: absolute; inset: -2%; width: 104%; height: 104%;
  object-fit: cover; object-position: 50% 42%;
  filter: saturate(.98) contrast(1.03);
  will-change: transform;
}
.hero__bg { --hy: 0px; }
.hero__video { transform: translateY(var(--hy)) scale(1.06); transition: transform .1s linear; }
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(244, 241, 232, .66) 0%, rgba(244, 241, 232, .48) 30%, rgba(244, 241, 232, .22) 56%, rgba(244, 241, 232, .06) 100%),
    linear-gradient(180deg, rgba(244, 241, 232, .28) 0%, transparent 22%, transparent 48%, rgba(244, 241, 232, .56) 84%, var(--paper) 100%);
}
.hero__inner {
  position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%;
}
.hero__copy { max-width: 42rem; }
.hero h1, .hero__sub {
  text-shadow: 0 2px 4px rgba(244, 241, 232, .9), 0 4px 28px rgba(244, 241, 232, .8);
}
@media (max-width: 860px) {
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(244, 241, 232, .4), rgba(244, 241, 232, .62) 46%, rgba(244, 241, 232, .78) 72%, var(--paper) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { transform: scale(1.06) !important; }
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 999px; padding: 8px 15px;
  opacity: 0; animation: fade .8s var(--ease) .15s forwards;
}
.eyebrow i {
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--chrome-1), var(--lilac));
  box-shadow: 0 0 0 3px rgba(158, 166, 200, .22), 0 0 8px rgba(240, 242, 246, .6);
}
.hero h1 { font-size: clamp(2.5rem, 6.6vw, 5.2rem); letter-spacing: -.035em; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .ln > span { display: block; opacity: 0; transform: translateY(115%); animation: heroRise 1s var(--ease) forwards; }
.hero h1 .ln:nth-child(1) > span { animation-delay: .30s; }
.hero h1 .ln:nth-child(2) > span { animation-delay: .40s; }
.hero h1 .ln:nth-child(3) > span { animation-delay: .50s; }
.hero h1 .ln:nth-child(4) > span { animation-delay: .60s; }
@keyframes heroRise { to { opacity: 1; transform: none; } }
.hero__sub {
  margin-top: 28px; max-width: 44ch; color: var(--ink-2); font-size: clamp(1rem, 1.55vw, 1.16rem);
  opacity: 0; animation: fade .9s var(--ease) .9s forwards;
}
.hero__cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; opacity: 0; animation: fade .9s var(--ease) 1.05s forwards; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero__foot {
  margin: clamp(40px, 7vh, 80px) auto 0; max-width: var(--maxw); width: 100%;
  padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  opacity: 0; animation: fade .9s var(--ease) 1.2s forwards;
}
.hero__foot span { display: flex; align-items: center; gap: 9px; }
.hero__foot span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--chrome-1), var(--lilac));
  box-shadow: 0 0 0 3px rgba(158, 166, 200, .18);
}

/* ============================================================
   MARQUEE DE IDADES
   ============================================================ */
.ages {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--ink); color: var(--paper); overflow: hidden;
  padding: 15px 0;
}
.ages__track {
  display: flex; align-items: center; gap: 32px; width: max-content;
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; letter-spacing: .02em;
  animation: agesScroll 34s linear infinite;
}
.ages__track span { white-space: nowrap; opacity: .92; }
.ages__track i {
  font-style: normal; font-size: .7rem;
  background: linear-gradient(135deg, var(--chrome-1), var(--lilac));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes agesScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ages__track { animation: none; } }

/* ============================================================
   01 · QUEM SOMOS
   ============================================================ */
.about__grid {
  margin-top: clamp(44px, 6vw, 72px);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.about__quote {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.24; color: var(--accent-2); position: relative; padding-left: 26px;
}
.about__quote::before {
  content: ""; position: absolute; left: 0; top: .28em; bottom: .1em; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--lilac), var(--chrome-2), var(--steel));
}
.about__quote cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.about__body p { color: var(--ink-2); font-size: clamp(1rem, 1.5vw, 1.12rem); }
.about__body p + p { margin-top: 16px; }
@media (max-width: 760px) { .about__grid { grid-template-columns: 1fr; } }

/* ============================================================
   02 · PACOTES — vitrine premium (metais do emblema BL)
   ============================================================ */
/* fundo azul da proposta original do cliente por trás de toda a seção */
.packs {
  background: linear-gradient(175deg, var(--brand-blue), var(--brand-blue-deep));
  position: relative;
}
.packs::before, .packs::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .18); }
.packs::before { top: 0; } .packs::after { bottom: 0; }
.packs .kicker { color: #fff; }
.packs .kicker::before { background: linear-gradient(90deg, #fff, var(--chrome-2)); }
.packs .h-lg { color: #fff; }
.packs .chapter__no { -webkit-text-stroke-color: rgba(255, 255, 255, .16); }
.packs__note { margin-top: 20px; color: rgba(255, 255, 255, .78); font-size: .92rem; max-width: 46ch; }
.packs .extras__title { color: #fff; border-bottom-color: rgba(255, 255, 255, .28); }
.packs .extras__list li { color: rgba(255, 255, 255, .88); border-bottom-color: rgba(255, 255, 255, .16); }
.packs .extras__list li::before { background: var(--chrome-1); }
.packs .extras__note { color: rgba(255, 255, 255, .7); }
.packs .sect-cta { border-top-color: rgba(255, 255, 255, .22); }
.packs .sect-cta p { color: rgba(255, 255, 255, .92); }
.packs .sect-cta .btn { --bg: #fff; --fg: var(--brand-blue-deep); --bd: #fff; }
.packs .sect-cta .btn:hover { --bg: var(--chrome-1); box-shadow: 0 18px 34px -16px rgba(13, 39, 57, .4), 0 0 0 3px rgba(255, 255, 255, .3); }
.packs__grid {
  margin-top: clamp(52px, 6vw, 82px);
  display: grid; grid-template-columns: 1fr 1fr 1.22fr 1fr; gap: 16px; align-items: stretch;
}
@media (max-width: 1080px) { .packs__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 560px)  { .packs__grid { grid-template-columns: 1fr; } }

.pack {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 30px 24px 24px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--rule);
  box-shadow: var(--shadow-s);
  transition: transform .55s var(--ease), box-shadow .55s, border-color .45s;
}
/* fio metálico no topo — cresce no hover */
.pack::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, var(--lilac), var(--chrome-2), var(--chrome-3));
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease);
}
.pack:hover { transform: translateY(-10px) scale(1.015); box-shadow: var(--shadow-m), 0 0 0 1px rgba(158, 166, 200, .38); border-color: transparent; }
.pack:hover::before { transform: scaleX(1); }
/* clarão diagonal atravessando no hover */
.pack__glint { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pack__glint::before {
  content: ""; position: absolute; top: -60%; left: -80%; width: 34%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .62), transparent);
  transform: rotate(11deg); transition: left .8s var(--ease);
}
/* textura fina (papel/metal escovado) nas caixas — tira o aspecto "chapado" */
.pack__tex {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  opacity: .6; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
/* medalhão de ícone — dá identidade a cada pacote */
.pack__icon {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto 16px; flex: none;
  background: linear-gradient(145deg, var(--chrome-1), var(--chrome-2));
  box-shadow: 0 8px 18px -10px rgba(13, 39, 57, .4), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pack__icon svg { width: 20px; height: 20px; color: var(--accent-2); }
.pack:hover .pack__icon { transform: translateY(-3px) scale(1.08); box-shadow: 0 14px 26px -12px rgba(13, 39, 57, .5), inset 0 1px 0 rgba(255, 255, 255, .8); }
.pack--feat .pack__icon { background: linear-gradient(145deg, var(--chrome-1), var(--lilac)); }
.pack--feat .pack__icon svg { color: #0d2739; }
/* entrada com leve inclinação 3D — mais cinematográfica que um simples fade */
.pack.rv {
  transition: opacity .9s var(--ease), transform .9s var(--ease), box-shadow .55s, border-color .45s;
  transform: perspective(1100px) rotateX(10deg) translateY(34px);
  transform-origin: bottom center;
}
.pack.rv.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .pack.rv { transform: none; } }
.pack:hover .pack__glint::before { left: 140%; }

.pack__kick {
  font-family: var(--mono); font-size: .55rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pack__kick::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--chrome-1), var(--chrome-3));
  box-shadow: 0 0 0 3px rgba(158, 166, 200, .2);
}
.pack__name { font-size: clamp(1.3rem, 1.5vw, 1.6rem); line-height: 1.08; letter-spacing: -.02em; text-align: center; }
.pack__for { margin-top: 6px; font-size: .82rem; color: var(--ink-3); text-align: center; }
.pack ul { margin: 20px 0 22px; padding-top: 18px; border-top: 1px solid var(--rule-2); flex: 1; }
.pack li { display: flex; gap: 10px; padding: 6px 0; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.pack li::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; margin-top: .62em;
  background: var(--lilac); box-shadow: 0 0 0 3px rgba(158, 166, 200, .2);
}
.pack .btn { width: 100%; justify-content: center; margin-top: auto; padding: 14px 14px; font-size: .56rem; }

.pack--alt { background: linear-gradient(180deg, var(--card), #f2f0e7); }
.pack--alt::before { background: linear-gradient(90deg, var(--steel), var(--chrome-3)); }

/* ---- destaque: Filme de Cinema — moldura de cromo girando ---- */
.pack--feat {
  border: 0; color: var(--paper); overflow: hidden; background: var(--brand-blue-deep); padding-top: 42px;
  box-shadow: 0 46px 90px -38px rgba(13, 39, 57, .65), 0 0 60px -26px rgba(158, 166, 200, .5);
}
.pack__ring { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; }
.pack__ring::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, var(--chrome-3), var(--chrome-1) 17%, var(--lilac) 33%, #0d2739 46%, var(--chrome-2) 64%, var(--chrome-1) 80%, var(--chrome-3));
  animation: packRing 8s linear infinite;
}
.pack__ring::after {
  content: ""; position: absolute; inset: 1.5px; border-radius: 15px;
  background: linear-gradient(185deg, #4b6d90, #33506d 62%);
}
@keyframes packRing { to { transform: translate(-50%, -50%) rotate(360deg); } }
.pack__sheen { position: absolute; inset: 1.5px; z-index: 1; border-radius: 15px; overflow: hidden; pointer-events: none; }
.pack__sheen::before {
  content: ""; position: absolute; top: -40%; left: -70%; width: 26%; height: 190%;
  background: linear-gradient(100deg, transparent, rgba(240, 242, 246, .22), transparent);
  transform: rotate(9deg); animation: packSheen 7s ease-in-out infinite;
}
@keyframes packSheen { 0%, 62%, 100% { left: -70%; } 82% { left: 135%; } }
.pack--feat > *:not(.pack__ring):not(.pack__sheen):not(.pack__ribbon) { position: relative; z-index: 2; }
.pack--feat .pack__kick { color: var(--chrome-2); }
.pack--feat .pack__kick::before { background: linear-gradient(135deg, var(--chrome-1), var(--lilac)); box-shadow: 0 0 8px rgba(240, 242, 246, .5); }
.pack--feat { padding-left: 30px; padding-right: 30px; }
.pack--feat .pack__name { color: #fff; font-size: clamp(1.42rem, 1.8vw, 1.85rem); }
.pack--feat .pack__for { color: var(--steel); font-size: .88rem; }
.pack--feat ul { border-top-color: rgba(158, 166, 200, .32); }
.pack--feat li { color: rgba(240, 242, 246, .9); font-size: .92rem; }
.pack--feat li::before { background: var(--chrome-2); box-shadow: 0 0 0 3px rgba(158, 166, 200, .16); }
.pack--feat:hover { transform: translateY(-24px); box-shadow: 0 60px 110px -40px rgba(13, 39, 57, .7), 0 0 84px -20px rgba(158, 166, 200, .68); }
@media (min-width: 1081px) { .pack--feat:hover { transform: translateY(-30px); } }

.pack__ribbon {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  font-family: var(--mono); font-size: .5rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #0d2739; background: linear-gradient(135deg, var(--chrome-1), var(--chrome-2) 45%, var(--lilac));
  padding: 6px 11px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45);
}
.btn--chrome {
  --fg: #0d2739; --bd: transparent;
  background: linear-gradient(135deg, var(--chrome-1), var(--chrome-2) 50%, var(--lilac));
}
.btn--chrome:hover { --fg: #0d2739; filter: brightness(1.07); box-shadow: 0 18px 34px -16px rgba(158, 166, 200, .7); }

@media (prefers-reduced-motion: reduce) {
  .pack__ring::before, .pack__sheen::before { animation: none !important; }
}

/* extras — livro-razão (centralizado) */
.extras { margin-top: clamp(44px, 6vw, 64px); text-align: center; }
.extras__title {
  font-family: var(--mono); font-weight: 700; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent-2); padding-bottom: 14px; border-bottom: 1px solid var(--rule-str);
}
.extras__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 44px; justify-items: center; }
.extras__list li {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  padding: 13px 0; border-bottom: 1px solid var(--rule-2); width: 100%;
  font-size: .9rem; color: var(--ink-2);
}
.extras__list li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--steel); position: relative; top: -2px; }
.extras__note { margin-top: 20px; color: var(--ink-3); font-size: .85rem; }

/* ============================================================
   04 · COBERTURA — tira de filme
   ============================================================ */
.strip {
  position: relative; overflow: hidden;
  margin: clamp(40px, 6vw, 60px) 0 clamp(14px, 2vw, 26px);
  padding: 22px 0; background: var(--ink);
}
.strip::before, .strip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 16px; z-index: 2;
  background-image: radial-gradient(circle, var(--paper-2) 3px, transparent 3.4px);
  background-size: 30px 16px; background-position: center;
}
.strip::before { top: 0; } .strip::after { bottom: 0; }
.strip__track { display: flex; padding: 6px 0; }
.strip__set { flex: 0 0 auto; display: flex; animation: stripScroll 46s linear infinite; }
@media (hover: hover) and (pointer: fine) { .strip:hover .strip__set { animation-play-state: paused; } }
.strip.is-offscreen .strip__set { animation-play-state: paused; }
@keyframes stripScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@media (max-width: 700px) { .strip__set { animation-duration: 34s; } }
@media (prefers-reduced-motion: reduce) {
  .strip__track { overflow-x: auto; }
  .strip__set { animation: none; }
  .strip__set[aria-hidden="true"] { display: none; }
}
.frame {
  flex: 0 0 min(80vw, 320px);
  padding: 24px 26px 26px; color: var(--paper);
  border-right: 1px solid rgba(174, 186, 199, .18);
}
.frame b { font-family: var(--mono); font-size: .56rem; letter-spacing: .2em; color: var(--steel); display: block; margin-bottom: 12px; }
.frame h3 { font-size: 1.4rem; margin-bottom: 8px; color: var(--silver-hi); }
.frame p { color: var(--mist); font-size: .88rem; }

/* ============================================================
   05 · COMO FUNCIONA — linha do tempo (com vídeo de fundo)
   ============================================================ */
.flow { position: relative; }
.flow__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.flow__video {
  position: absolute; inset: -2%; width: 104%; height: 104%;
  object-fit: cover; object-position: 50% 42%;
  filter: saturate(.94) contrast(1.02);
  transform: translateY(var(--fy, 0px)) scale(1.06);
  will-change: transform;
}
.flow__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244, 241, 232, .58) 0%, rgba(244, 241, 232, .5) 55%, var(--paper) 100%);
}
.flow > .chapter__no, .flow > .wrap { position: relative; z-index: 2; }
.flow__n { box-shadow: 0 8px 20px -10px rgba(13, 39, 57, .35); }
.flow .chapter__head, .flow__step h3, .flow__step p {
  text-shadow: 0 2px 3px rgba(244, 241, 232, .85), 0 4px 22px rgba(244, 241, 232, .7);
}
@media (prefers-reduced-motion: reduce) { .flow__video { transform: scale(1.06) !important; } }

.flow__list { margin-top: clamp(44px, 6vw, 68px); position: relative; }
.flow__list::before { content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 1px; background: var(--rule-str); }
.flow__step {
  position: relative; display: grid; grid-template-columns: 44px 1fr; gap: clamp(18px, 4vw, 40px);
  padding: 0 0 clamp(34px, 5vw, 52px); align-items: start;
}
.flow__step:last-child { padding-bottom: 0; }
.flow__n {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--rule-str);
  font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--accent-2);
}
.flow__step h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-bottom: 7px; padding-top: 6px; }
.flow__step p { color: var(--ink-2); font-size: clamp(.95rem, 1.4vw, 1.03rem); max-width: 52ch; }

/* ============================================================
   PAGAMENTO
   ============================================================ */
.pay__grid { margin-top: clamp(42px, 6vw, 58px); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pay__card { border: 1px solid var(--rule); border-radius: 13px; background: var(--card); padding: 28px 24px; box-shadow: var(--shadow-s); }
.pay__card b { font-family: var(--mono); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2); }
.pay__card h3 { font-size: 1.4rem; margin: 12px 0 8px; letter-spacing: -.02em; }
.pay__card p { color: var(--ink-3); font-size: .9rem; }
.pay__note { margin-top: 22px; color: var(--mist); font-size: .82rem; }

/* ============================================================
   06 · PORTFÓLIO — carrossel infinito (CSS puro)
   ============================================================ */
.portfolio__copy { margin-top: 22px; max-width: 52ch; }
.portfolio__copy p { color: var(--ink-2); font-size: clamp(1rem, 1.5vw, 1.12rem); }
.portfolio__copy p:first-child {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.24;
  color: var(--ink); max-width: 22ch; margin-bottom: 14px;
}
.portfolio__copy--center { margin-left: auto; margin-right: auto; text-align: center; }
.portfolio__copy--center p:first-child { margin-left: auto; margin-right: auto; }
.yt-rail { position: relative; margin: clamp(40px, 6vw, 58px) 0 clamp(24px, 4vw, 42px); overflow: hidden; }
.yt-rail::before, .yt-rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(40px, 12vw, 140px); pointer-events: none;
}
.yt-rail::before { left: 0; background: linear-gradient(90deg, var(--paper), rgba(244, 241, 232, 0)); }
.yt-rail::after { right: 0; background: linear-gradient(270deg, var(--paper), rgba(244, 241, 232, 0)); }
.yt-track { display: flex; padding-left: var(--pad); }
.yt-set { flex: 0 0 auto; display: flex; gap: 18px; padding-right: 18px; animation: ytScroll 64s linear infinite; }
@media (hover: hover) and (pointer: fine) {
  .yt-rail:hover .yt-set { animation-play-state: paused; }
}
.yt-set:focus-within { animation-play-state: paused; }
.yt-rail.is-offscreen .yt-set { animation-play-state: paused; }
@keyframes ytScroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-100%,0,0); } }
@media (max-width: 700px) { .yt-set { animation-duration: 48s; } }
@media (prefers-reduced-motion: reduce) { .yt-track { overflow-x: auto; } .yt-set { animation: none; } .yt-set[aria-hidden="true"] { display: none; } }

.yt-card { flex: 0 0 clamp(272px, 78vw, 384px); }
.yt-card__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--rule); background: #0d2739;
  box-shadow: var(--shadow-s);
}
.yt-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.yt-card__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(13,39,57,.45)); opacity: 0; transition: opacity .4s; }
.yt-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 56px; height: 40px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.4));
  transition: transform .35s var(--ease);
}
.yt-card:hover .yt-card__thumb img { transform: scale(1.06); }
.yt-card:hover .yt-card__thumb::after { opacity: 1; }
.yt-card:hover .yt-card__play { transform: translate(-50%,-50%) scale(1.09); }
.yt-card__cap { display: block; margin-top: 12px; padding-left: 2px; }
.yt-card__cap b { display: block; font-family: var(--serif); font-size: 1rem; line-height: 1.3; color: var(--ink); }
.yt-card:hover .yt-card__cap b {
  background: var(--metal-dark); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.yt-card__cap span { display: block; margin-top: 3px; font-family: var(--mono); font-size: .53rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.portfolio__micro { margin-top: 4px; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--accent-2); }

/* ============================================================
   FICHA — carta do diretor
   ============================================================ */
.crew__grid { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.crew__meta { border-top: 1px solid var(--rule-str); }
.crew__meta div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; }
.crew__meta dt { color: var(--mist); }
.crew__meta dd { color: var(--ink); text-align: right; }
.crew__letter p { color: var(--ink-2); font-size: clamp(1rem, 1.5vw, 1.12rem); }
.crew__letter p + p { margin-top: 15px; }
.crew__letter .sign { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--accent-2); margin-top: 22px; }
@media (max-width: 820px) { .crew__grid { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq__list { margin-top: clamp(38px, 5vw, 48px); border-top: 1px solid var(--rule-str); }
.faq__list details { border-bottom: 1px solid var(--rule); }
.faq__list summary {
  list-style: none; cursor: pointer; padding: 24px 46px 24px 0; position: relative;
  font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: var(--ink);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "＋"; position: absolute; right: 2px; top: 22px; color: var(--lilac-lo); transition: transform .3s; }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p { color: var(--ink-2); padding: 0 46px 26px 0; max-width: 64ch; font-size: .95rem; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.end { text-align: center; }
.end::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: min(720px, 118vw); aspect-ratio: 1;
  transform: translate(-50%, -50%); filter: blur(34px);
  background: radial-gradient(circle, rgba(20, 64, 92, .13), transparent 62%);
}
.end .mono { position: relative; display: block; margin-bottom: 24px; }
.end h2 { position: relative; font-size: clamp(2.4rem, 6.6vw, 4.8rem); letter-spacing: -.03em; max-width: 16ch; margin: 0 auto 20px; }
.end p { position: relative; color: var(--ink-2); max-width: 44ch; margin: 0 auto 34px; }
.end .btn { position: relative; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.foot { padding: clamp(64px, 10vh, 116px) var(--pad) 40px; border-top: 1px solid var(--rule); background: var(--paper-2); position: relative; z-index: 2; text-align: center; }
.foot__in { max-width: var(--maxw); margin: 0 auto; }
.foot__logo { display: flex; justify-content: center; }
.foot__logo img { width: min(320px, 62vw); height: auto; opacity: .92; }
.foot__base {
  margin-top: clamp(40px, 6vw, 56px); padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: center; align-items: center;
  font-family: var(--mono); font-size: .56rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mist);
}

/* ============================================================
   CTA DE FIM DE SEÇÃO
   ============================================================ */
.sect-cta {
  margin-top: clamp(44px, 6vw, 64px); padding-top: clamp(30px, 4vw, 40px);
  border-top: 1px solid var(--rule); text-align: center;
}
.sect-cta p {
  font-family: var(--serif); font-style: italic; color: var(--ink-2);
  font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 46ch; margin: 0 auto 22px;
}
/* ============================================================
   MOTION REDUZIDA
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
  .rv, .rv-wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero h1 .ln > span, .eyebrow, .hero__sub, .hero__cta, .hero__plate, .hero__foot { opacity: 1 !important; transform: none !important; }
  .plate__img img { animation: none !important; }
}