/* =============================================================
   We 🧡 Claude · Página de vendas — CINEMATOGRÁFICA IMERSIVA
   Self-contained. Sem dependência de styles.css (scrapbook).
   Tokens = DI-003-wlb (tabela da Iris). Mobile-first.
   ============================================================= */

/* ---------- Fontes ---------- */
@font-face { font-family:'Lufga'; src:url('assets/fonts/lufga-regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Lufga'; src:url('assets/fonts/lufga-medium.otf')  format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Lufga'; src:url('assets/fonts/lufga-bold.otf')    format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Lufga'; src:url('assets/fonts/lufga-black.otf')   format('opentype'); font-weight:900; font-display:swap; }
@font-face { font-family:'Chalkiez'; src:url('assets/fonts/chalkiez-regular.otf') format('opentype'); font-weight:400; font-display:swap; }

/* ---------- Tokens (SSOT: DI-003-wlb) ---------- */
:root {
  --wlb-ink:#1E1B2E;
  --wlb-beige:#F5EFE8;
  --wlb-white:#FFFCF8;
  --wlb-ink-on-dark:#F3ECFB;
  --wlb-mist:#C8BFE0;
  --wlb-orange:#D97559;
  --wlb-orange-deep:#B85C42;
  --wlb-orange-ink:#A8472E;
  --wlb-orange-soft:#F2B39A;
  --wlb-lilac:#C7A5F3;
  --wlb-lilac-mid:#9B7BC7;
  --wlb-lilac-deep:#6B3FA0;
  --wlb-lilac-soft:#E4D4FA;

  --hair:rgba(30,27,46,.08);
  --hair-on-dark:rgba(199,165,243,.20);
  --r-md:14px;
  --r-lg:20px;
  --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(30,27,46,.08);
  --shadow-md:0 12px 36px rgba(30,27,46,.18);
  --cta-bg:var(--wlb-orange-ink);
  --cta-hover:#8F3B26;

  /* color grade golden-hour, uma fórmula só */
  --grade:brightness(1.02) saturate(1.12) contrast(1.02) sepia(.08);
  --wrap:1120px;
  --pad-y:clamp(64px,11vw,128px);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;} }

body {
  font-family:'Lufga',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.55;
  color:var(--wlb-ink);
  background:var(--wlb-ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,source { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
strong { font-weight:700; }

.skip-link {
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--wlb-orange); color:var(--wlb-white);
  padding:12px 18px; border-radius:0 0 var(--r-md) 0; font-weight:700;
}
.skip-link:focus { left:0; }

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

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.wrap--narrow { max-width:760px; }

/* Acento brush — 1-3 palavras só */
.brush { font-family:'Chalkiez',cursive; font-weight:400; font-size:1.18em; line-height:1; }

/* ============================================================
   SCENE — ritmo claro/escuro
   ============================================================ */
.scene { position:relative; }
.scene--dark  { background:var(--wlb-ink);  color:var(--wlb-ink-on-dark); padding-block:var(--pad-y); }
.scene--light { background:var(--wlb-beige); color:var(--wlb-ink);         padding-block:var(--pad-y); }

/* AJUSTE 2 — cenas coloridas de marca (laranja + lilás), intercaladas com
   as cenas escuras/foto. Texto continua --wlb-ink (AA forte sobre soft). */
.scene--lilac { background:var(--wlb-lilac-soft); color:var(--wlb-ink); padding-block:var(--pad-y); }
.scene--orange{ background:var(--wlb-orange-soft); color:var(--wlb-ink); padding-block:var(--pad-y); }
/* eyebrow sobre superfícies soft: lilás-deep / laranja-ink mantêm AA */
.scene--lilac .eyebrow { color:var(--wlb-lilac-deep); }
/* orange-soft é claro: orange-ink reprova AA p/ texto pequeno (3.24).
   ink passa (9.34) e mantém o calor — o laranja já vem do fundo. */
.scene--orange .eyebrow { color:var(--wlb-ink); }
.scene--lilac .narra__speech,
.scene--orange .narra__speech { color:var(--wlb-ink); }
.scene--lilac .narra__sign { color:var(--wlb-lilac-deep); }
.scene--orange .narra__sign { color:var(--wlb-orange-ink); }

/* seam — fade de câmera entre cenas */
.seam { position:absolute; left:0; right:0; height:80px; pointer-events:none; z-index:1; }
.seam--down { top:-1px; background:linear-gradient(180deg,var(--wlb-ink) 0%,rgba(30,27,46,0) 100%); }
.seam--up   { top:-80px; background:linear-gradient(0deg,var(--wlb-ink) 0%,rgba(30,27,46,0) 100%); }
.seam--up-light { top:-80px; background:linear-gradient(0deg,var(--wlb-beige) 0%,rgba(245,239,232,0) 100%); }
.seam::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:120px; height:2px; background:linear-gradient(90deg,transparent,var(--wlb-orange-soft),transparent); opacity:.5; }

/* ============================================================
   TIPOGRAFIA compartilhada
   ============================================================ */
.eyebrow {
  font-weight:700; text-transform:uppercase; letter-spacing:.22em;
  font-size:11px; color:var(--wlb-orange-ink); margin-bottom:14px;
}
.eyebrow--on-dark { color:var(--wlb-orange-soft); }

.section-head { max-width:760px; margin:0 auto clamp(40px,6vw,72px); text-align:center; }
.section-title {
  font-weight:900; letter-spacing:0; line-height:1.06;
  font-size:clamp(32px,3.5rem,56px);
}
.section-lede { margin-top:20px; font-size:clamp(17px,1.1875rem,19px); color:#4a4458; }
.section-lede--dark { color:var(--wlb-mist); }
.section-head--dark .section-title { color:var(--wlb-ink-on-dark); }

/* ============================================================
   BOTÕES — UM CTA dominante (laranja, exclusivo)
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  /* 19px bold = "large text" WCAG → 3.09 sobre laranja passa AA */
  font-family:'Lufga',sans-serif; font-weight:700; font-size:19px;
  min-height:54px; padding:0 32px; border-radius:var(--r-pill);
  border:2px solid transparent; cursor:pointer; text-align:center;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn--primary { background:var(--cta-bg); color:var(--wlb-white); box-shadow:0 8px 24px rgba(168,71,46,.34); }
.btn--primary:hover { background:var(--cta-hover); transform:translateY(-2px); box-shadow:0 12px 30px rgba(168,71,46,.42); }
.btn--primary:active { transform:scale(.98); }
.btn--ghost {
  background:rgba(255,252,248,.04); color:var(--wlb-ink-on-dark);
  border-color:rgba(199,165,243,.4); font-weight:500;
}
.btn--ghost:hover { background:rgba(199,165,243,.12); border-color:var(--wlb-lilac); transform:translateY(-2px); }
.btn--block { width:100%; }
.btn--lg { min-height:62px; font-size:19px; padding:0 44px; }

.cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.cta-micro { font-size:13px; margin-top:16px; color:#6a6478; }
.cta-micro--on-dark { color:var(--wlb-mist); }

/* ============================================================
   CENA 1 · HERO
   ============================================================ */
.hero {
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(80px,14vh,120px); overflow:hidden;
}
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; filter:var(--grade); animation:kenburns 26s ease-out forwards; }
.hero__bg video { width:100%; height:100%; object-fit:cover; filter:var(--grade); }
@keyframes kenburns { from{transform:scale(1.06)} to{transform:scale(1.0)} }
/* máscara CONCENTRADA só atrás do texto (eyebrow + headline) — a foto colorida fica à mostra */
.hero__scrim { position:absolute; inset:0; z-index:1;
  background:
    /* nuvem escura elíptica atrás do bloco de texto (esquerda-centro) */
    radial-gradient(ellipse 56% 48% at 30% 50%,
      rgba(18,15,28,.88) 0%, rgba(18,15,28,.55) 46%, transparent 72%),
    /* leve âncora na borda esquerda, dissolve cedo pra liberar a foto */
    linear-gradient(100deg, rgba(18,15,28,.52) 0%, rgba(18,15,28,.10) 28%, transparent 46%);
}
/* vignette bem leve só nos cantos — a foto respira */
.hero__vignette { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 66%, rgba(18,15,28,.26) 100%); }
@media (max-width:760px){
  /* no mobile o texto centraliza → máscara elíptica atrás do centro */
  .hero__scrim {
    background:
      radial-gradient(ellipse 94% 44% at 50% 47%,
        rgba(18,15,28,.85) 0%, rgba(18,15,28,.5) 52%, transparent 80%),
      linear-gradient(180deg, transparent 0%, rgba(18,15,28,.18) 100%);
  }
}
.hero__grain { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero__content { position:relative; z-index:3; max-width:820px; }

/* Conteúdo do hero direto sobre a foto — sem caixa/scrapbook.
   Legibilidade vem da máscara direcional (.hero__scrim) + text-shadow.
   Coluna de texto à esquerda; a foto respira à direita. */
.hero__panel {
  position:relative; max-width:580px;
  animation:heroRise 1s cubic-bezier(.2,.7,.2,1) both;
}
/* sem caixa: garante leitura de eyebrow/micro/trust sobre a foto */
.hero__panel .eyebrow,
.hero__panel .cta-micro,
.hero__trust { text-shadow:0 1px 8px rgba(18,15,28,.7); }
@keyframes heroRise { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
.hero__h1 {
  font-weight:900; letter-spacing:-.03em; line-height:1.04;
  font-size:clamp(32px,5vw,54px); color:var(--wlb-white);
  text-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 44px rgba(18,15,28,.5);
  text-wrap:balance;
}
.hero__h1 .brush { font-size:1.02em; color:var(--wlb-lilac); text-shadow:0 2px 26px rgba(199,165,243,.4); }
/* número-herói "10 peças" — acento de destaque (blueprint Pax: especificidade) */
.hero__h1 .hero__hl { position:relative; color:var(--wlb-orange-soft); white-space:nowrap; }
.hero__h1 .hero__hl::after {
  content:""; position:absolute; left:-2px; right:-2px; bottom:.06em; height:.14em; z-index:-1;
  background:linear-gradient(90deg, rgba(217,117,89,.55), rgba(242,179,154,.35));
  border-radius:2px;
}
.hero__sub {
  margin-top:22px; max-width:584px; font-size:clamp(17px,2.3vw,20px);
  color:rgba(243,236,251,.93); line-height:1.58; font-weight:450; letter-spacing:.002em;
  text-shadow:0 1px 10px rgba(18,15,28,.55);
}
.hero .cta-row { margin-top:30px; }
/* faixa de confiança imediata */
.hero__trust {
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.6vw,28px);
  margin-top:28px; padding-top:22px; border-top:1px solid rgba(199,165,243,.18);
}
.hero__trust li {
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:450; letter-spacing:.01em; color:rgba(243,236,251,.82);
}
.hero__trust li::before {
  content:"✓"; flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--wlb-orange); color:var(--wlb-white);
  font-size:11px; font-weight:900; line-height:1; display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(217,117,89,.4);
}
.hero__trust strong { color:var(--wlb-white); font-weight:700; }
.hero__trust--center { justify-content:center; }

/* ============================================================
   FAIXA COMEÇAR — valor + CTA movidos do hero (logo abaixo)
   ============================================================ */
.herobar { text-align:center; }
.herobar__inner { max-width:680px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.herobar__sub {
  font-size:clamp(18px,2.5vw,23px); line-height:1.5; color:var(--wlb-ink); font-weight:450;
}
.herobar__sub strong { color:var(--wlb-orange-deep); font-weight:700; }
.herobar .btn--ghost { background:rgba(30,27,46,.04); color:var(--wlb-ink); border-color:rgba(107,63,160,.32); }
.herobar .btn--ghost:hover { background:rgba(199,165,243,.16); border-color:var(--wlb-lilac-mid); }
.herobar .hero__trust { border-top-color:rgba(30,27,46,.12); }
.herobar .hero__trust li { color:var(--wlb-ink); text-shadow:none; }
/* orange-deep reprova AA em 13.5px (3.95) → orange-ink (4.94) */
.herobar .hero__trust strong { color:var(--wlb-orange-ink); }
.cta-row--center { justify-content:center; margin-top:30px; }
.herobar .cta-micro { margin-top:16px; }

/* ============================================================
   SCRAPBOOK — primitivos portados de decor.jsx (washi, polaroid,
   paper-tag, scribble, chalk-underline). Camada decorativa POR CIMA
   do cinematográfico. Tokens DI-003-wlb. Sem blur, sem gradiente-fundo.
   ============================================================ */

/* Washi tape — faixa com listras translúcidas */
.washi, .polaroid__washi, .tl__washi {
  background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,252,248,.30) 14px 18px);
}

/* Paper tag — etiqueta presa, leve rotação */
.paper-tag {
  display:inline-block; background:var(--wlb-white); color:var(--wlb-orange-ink);
  font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 16px; transform:rotate(-3deg); margin-bottom:14px;
  box-shadow:0 6px 14px rgba(30,27,46,.22); border-radius:2px;
}
.paper-tag--lilac { color:var(--wlb-lilac-deep); }

/* Polaroid — moldura branca, rotação leve, legenda manuscrita */
.polaroid {
  position:relative; background:var(--wlb-white); width:200px;
  padding:12px 12px 14px; border-radius:3px;
  box-shadow:0 20px 38px rgba(30,27,46,.28); transform:rotate(-4deg);
}
.polaroid__washi {
  position:absolute; top:-12px; left:50%; width:96px; height:24px;
  transform:translateX(-50%) rotate(3deg); pointer-events:none;
  background:var(--wlb-orange);
  background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,252,248,.34) 14px 18px);
  box-shadow:0 4px 9px rgba(30,27,46,.28); border-radius:2px;
}
.polaroid__img { display:block; width:100%; aspect-ratio:1/1.04; overflow:hidden; background:var(--wlb-ink); }
.polaroid__img img, .polaroid__img picture { width:100%; height:100%; object-fit:cover; filter:var(--grade); }
.polaroid__cap {
  display:block; text-align:center; margin-top:8px; line-height:1;
  font-size:26px; color:var(--wlb-lilac-mid);
}

/* Chalk underline — traço Chalkiez ondulado sob keyword.
   Aplicado em .brush dentro de títulos de seção via ::after opcional. */
.chalk-underline { position:relative; display:inline-block; }
.chalk-underline::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:10px;
  background:
    radial-gradient(120% 100% at 0 50%, transparent 60%, var(--wlb-lilac-mid) 61%) no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14' preserveAspectRatio='none'%3E%3Cpath d='M4 8 C 60 2, 140 12, 200 5 S 300 3, 316 7' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14' preserveAspectRatio='none'%3E%3Cpath d='M4 8 C 60 2, 140 12, 200 5 S 300 3, 316 7' stroke='black' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  background:var(--wlb-lilac-mid);
}

.scroll-cue {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3;
  color:var(--wlb-lilac); font-size:22px; animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* ============================================================
   NARRAÇÃO
   ============================================================ */
.narra__grid { display:grid; gap:clamp(28px,5vw,56px); align-items:center; grid-template-columns:1fr; }
.narra__char { position:relative; max-width:360px; margin-inline:auto; }
.narra__char img { width:100%; height:auto; filter:drop-shadow(0 26px 30px rgba(30,27,46,.32)); }
.narra__body { max-width:560px; }
.narra__h { font-weight:900; letter-spacing:0; line-height:1.08; font-size:clamp(28px,2.875rem,46px); margin-bottom:18px; }
.narra__speech { font-size:clamp(16px,1.9vw,18px); line-height:1.6; }
.scene--light .narra__speech { color:#3c3650; }
.narra__sign { display:block; width:fit-content; margin-top:16px; font-size:26px; color:var(--wlb-lilac-mid); }
.narra .btn { margin-top:64px; }
.narra__sign { margin-bottom:10px; }
@media (min-width:860px){
  .narra__grid { grid-template-columns:340px 1fr; }
  .narra__grid--rev { grid-template-columns:1fr 340px; }
  .narra__grid--rev .narra__char { order:2; }
}

/* STACK (dentro de Penn) */
.stack { margin-top:30px; padding-top:24px; border-top:1px solid var(--hair); }
.stack__lead { font-weight:700; font-size:18px; margin-bottom:14px; }
.stack__logos { list-style:none; display:flex; gap:14px; flex-wrap:wrap; }
.stack__logos li {
  display:flex; align-items:center; gap:10px; background:var(--wlb-white);
  border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:10px 20px; font-weight:700; box-shadow:var(--shadow-sm);
}
.stack__logos img { width:26px; height:26px; }

/* ============================================================
   TIMELINE — pipeline / takes do dia
   ============================================================ */
.timeline { padding-top:0; }
.tl__hero {
  position:relative; overflow:hidden; margin-bottom:clamp(40px,5vw,64px);
  width:100%; aspect-ratio:16/9; background:var(--wlb-ink);
  display:flex; align-items:center; justify-content:center;
}
.tl__hero-bg { position:absolute; inset:0; z-index:0; }
.tl__hero-bg video { width:100%; height:100%; object-fit:contain; }
.tl__hero-scrim {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(18,15,28,.18) 0%, rgba(18,15,28,.62) 100%),
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(18,15,28,.42) 0%, transparent 70%);
}
.tl__hero-content { position:relative; z-index:2; text-align:center; padding-inline:clamp(20px,5vw,40px); }
.tl__hero-content .eyebrow { text-shadow:0 1px 8px rgba(18,15,28,.7); }
.tl__hero-title {
  margin-top:10px; color:var(--wlb-white);
  text-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 44px rgba(18,15,28,.55);
}
.tl__hero-title .brush { color:var(--wlb-lilac); text-shadow:0 2px 26px rgba(199,165,243,.4); }
.tl__lede { margin-top:0; margin-bottom:clamp(28px,4vw,40px); max-width:760px; margin-inline:auto; text-align:center; }
.tl { list-style:none; display:grid; gap:18px; grid-template-columns:1fr; }
.tl__item {
  position:relative; display:flex; flex-direction:column;
  background:var(--wlb-white); border:1px solid var(--hair); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow-sm); text-align:left; width:100%;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-family:inherit;
  border-top:4px solid var(--wlb-orange);
}
.tl__item--lilac { border-top-color:var(--wlb-lilac-mid); }
.tl__item--orange { border-top-color:var(--wlb-orange); }
.tl__item:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(217,117,89,.45); }
.tl__item--lilac:hover { border-color:rgba(155,123,199,.55); }
.tl__item:not([data-agent]) { cursor:default; }

.tl__photo { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--wlb-beige); }
.tl__photo img { width:100%; height:100%; object-fit:cover; filter:var(--grade); }

/* status do Flow — selo no canto */
.tl__stage {
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--wlb-ink); color:var(--wlb-orange-soft);
  font-weight:900; font-size:12px; letter-spacing:.06em;
  padding:5px 11px; border-radius:var(--r-pill);
}
.tl__item--lilac .tl__stage { color:var(--wlb-lilac); }

.tl__open {
  display:inline-block; margin-top:12px;
  color:var(--wlb-orange-ink); font-size:12px; font-weight:700; letter-spacing:.02em;
}
.tl__item--lilac .tl__open { color:var(--wlb-lilac-deep); }

.tl__meta { padding:16px 20px 22px; display:flex; flex-direction:column; }
/* lilac-mid em 13px reprova AA (3.39) → lilac-deep (7.22) */
.tl__step { font-weight:900; font-size:13px; color:var(--wlb-lilac-deep); letter-spacing:.1em; }
.tl__item--orange .tl__step { color:var(--wlb-orange-ink); }
.tl__agent { font-weight:900; font-size:20px; line-height:1.1; margin-top:2px; }
.tl__role { font-size:14px; color:var(--wlb-orange-ink); font-weight:700; margin:3px 0 8px; }
.tl__item--lilac .tl__role { color:var(--wlb-lilac-deep); }
.tl__action { font-size:15px; color:#3c3650; line-height:1.5; }
.tl__foot { text-align:center; margin-top:40px; font-weight:700; font-size:19px; }

/* washi prendendo o topo de cards especiais (gate + placeholder) */
.tl__washi {
  position:absolute; top:-2px; left:50%; width:108px; height:22px; z-index:3;
  transform:translateX(-50%) rotate(-2deg); pointer-events:none;
  background:var(--wlb-orange);
  box-shadow:0 4px 9px rgba(30,27,46,.25); border-radius:2px;
}
.tl__item--lilac .tl__washi { background:var(--wlb-lilac-mid); }

/* portão humano "Você" — foto de portão WeAgency + selo de aprovação por cima */
.tl__photo--gate {
  position:relative; display:grid; place-items:center; aspect-ratio:16/10; overflow:hidden;
  background:var(--wlb-lilac-soft);
}
.tl__item--orange .tl__photo--gate { background:var(--wlb-orange-soft); }
.tl__gate-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:var(--grade); }
/* scrim radial pra o selo + label lerem sobre a foto do portão */
.tl__photo--gate::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 72% 62% at 50% 50%, rgba(18,15,28,.52), rgba(18,15,28,.12) 74%);
}
.tl__gate-seal { position:relative; z-index:2; display:grid; place-items:center; gap:10px; text-align:center; }
.tl__gate-seal svg {
  color:var(--wlb-white); background:var(--wlb-lilac-deep);
  width:56px; height:56px; padding:14px; border-radius:50%;
  box-shadow:0 10px 24px rgba(18,15,28,.5);
}
.tl__item--orange .tl__gate-seal svg { background:var(--wlb-orange); box-shadow:0 10px 24px rgba(18,15,28,.5); }
.tl__gate-label {
  font-weight:900; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wlb-white); text-shadow:0 1px 8px rgba(18,15,28,.85);
}

/* placeholder de marca — Pixel/Charta ainda sem asset */
.tl__photo--ph {
  display:grid; place-items:center; gap:10px; aspect-ratio:16/10;
  background:
    repeating-linear-gradient(135deg, rgba(155,123,199,.08) 0 12px, transparent 12px 24px),
    var(--wlb-ink);
}
.tl__ph-mark { width:54px; height:54px; opacity:.92; }
.tl__ph-note {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wlb-mist);
}

@media (min-width:680px){ .tl { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .tl { grid-template-columns:repeat(3,1fr); } }

/* Flow real em tela cheia */
.tl-stage {
  position:relative;
  min-height:100svh;
  margin-inline:calc(50% - 50vw);
  padding:clamp(24px,4vw,54px);
  display:grid;
  align-items:center;
  overflow:hidden;
  color:var(--wlb-ink-on-dark);
  background:
    radial-gradient(circle at 12% 14%, rgba(217,117,89,.34), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(155,123,199,.32), transparent 24%),
    linear-gradient(135deg, #1e1b2e 0%, #2a2138 50%, #181525 100%);
}
.tl-stage::before {
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,252,248,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,252,248,.045) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.18));
  pointer-events:none;
}
.tl-board {
  position:relative; z-index:1;
  width:min(1320px,100%);
  margin-inline:auto;
  display:grid;
  gap:clamp(14px,1.8vw,22px);
}
.tl-board__head {
  max-width:760px;
  display:grid;
  gap:8px;
}
.tl-board__kicker {
  width:fit-content;
  padding:6px 12px;
  border-radius:var(--r-pill);
  background:rgba(255,252,248,.1);
  border:1px solid rgba(255,252,248,.22);
  color:var(--wlb-orange-soft);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.tl-board__title {
  color:var(--wlb-white);
  font-size:clamp(28px,4vw,50px);
  line-height:1.02;
  font-weight:900;
}
.tl-board__copy {
  color:var(--wlb-mist);
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.48;
  max-width:700px;
}
.tl-stage .tl {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(10px,1.2vw,14px);
}
.tl-stage .tl > li { min-width:0; display:flex; }
.tl-stage .tl__item {
  min-height:clamp(285px,35vh,350px);
  height:100%;
  background:rgba(255,252,248,.96);
  box-shadow:0 18px 44px rgba(9,7,16,.24);
}
.tl-stage .tl__photo,
.tl-stage .tl__photo--gate,
.tl-stage .tl__photo--ph { aspect-ratio:16/8.5; }
.tl-stage .tl__meta { padding:14px 14px 16px; }
.tl-stage .tl__stage {
  max-width:calc(100% - 20px);
  white-space:normal;
  line-height:1.08;
  font-size:10px;
  letter-spacing:.04em;
}
.tl-stage .tl__step {
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.tl-stage .tl__agent { font-size:18px; }
.tl-stage .tl__role { font-size:13px; margin-bottom:6px; }
.tl-stage .tl__action { font-size:13px; line-height:1.38; }
.tl-stage .tl__open {
  margin-top:auto;
  padding-top:10px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.flow-pieces {
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:8px;
}
.flow-piece {
  min-width:0;
  min-height:86px;
  display:grid;
  align-content:start;
  gap:3px;
  padding:10px;
  border-radius:10px;
  background:rgba(255,252,248,.08);
  border:1px solid rgba(255,252,248,.16);
  box-shadow:0 12px 26px rgba(9,7,16,.18);
}
.flow-piece__id {
  width:fit-content;
  padding:3px 7px;
  border-radius:var(--r-pill);
  background:rgba(255,252,248,.14);
  color:var(--wlb-mist);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.flow-piece__type {
  color:var(--wlb-white);
  font-size:13px;
  line-height:1.12;
}
.flow-piece__label {
  color:var(--wlb-mist);
  font-size:11px;
  line-height:1.2;
}
.flow-piece__status {
  width:fit-content;
  margin-top:4px;
  padding:4px 7px;
  border-radius:var(--r-pill);
  color:#102014;
  background:#2AC769;
  font-size:10px;
  font-weight:900;
  line-height:1;
}
.flow-piece--youtube { border-color:rgba(192,57,43,.5); }
.flow-piece--carrossel { border-color:rgba(155,123,199,.55); }
.flow-piece--reel { border-color:rgba(176,124,46,.6); }
.flow-piece--stories { border-color:rgba(74,127,165,.58); }
.flow-piece--youtube .flow-piece__status,
.flow-piece--reel .flow-piece__status,
.flow-piece--stories .flow-piece__status { background:#2AC769; }
.flow-piece__status--para-aprovar { background:#2AC769; color:#102014; }
.flow-piece__status--aprovado { background:#9B7BC7; color:var(--wlb-white); }
.flow-queues {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.flow-queue {
  min-width:0;
  display:grid;
  gap:2px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,252,248,.1);
  border:1px solid rgba(255,252,248,.18);
}
.flow-queue small {
  color:var(--wlb-orange-soft);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.flow-queue strong {
  color:var(--wlb-white);
  font-size:14px;
  line-height:1.12;
}

@media (max-width:1180px){
  .tl-stage .tl { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tl-stage .tl__item { min-height:280px; }
  .flow-pieces { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:760px){
  .tl-stage {
    min-height:auto;
    padding:34px 20px;
  }
  .tl-board__title { font-size:32px; }
  .tl-stage .tl { grid-template-columns:1fr; }
  .tl-stage .tl__item { min-height:0; }
  .flow-pieces { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flow-queues { grid-template-columns:1fr; }
}

/* ============================================================
   STRIP cinemascope
   ============================================================ */
.strip { position:relative; min-height:62vh; display:flex; align-items:center; overflow:hidden; color:var(--wlb-white); }
.strip__bg { position:absolute; inset:0; z-index:0; }
.strip__bg img { width:100%; height:100%; object-fit:cover; filter:var(--grade); }
.strip__scrim { position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(242,179,154,.18), transparent 55%),
    linear-gradient(90deg, rgba(30,27,46,.86) 0%, rgba(30,27,46,.55) 60%, rgba(30,27,46,.30) 100%);
}
/* Cleo: texto fica à direita -> scrim forte e uniforme pra ler bem */
.strip--cleo .strip__scrim {
  background:
    radial-gradient(ellipse at 18% 50%, rgba(242,179,154,.12), transparent 55%),
    linear-gradient(90deg, rgba(18,15,28,.9) 0%, rgba(18,15,28,.84) 55%, rgba(18,15,28,.76) 100%);
}
.strip--cleo .strip__sub { color:#F4EEFC; text-shadow:0 1px 10px rgba(18,15,28,.75); }
.strip__content { position:relative; z-index:2; padding-block:clamp(56px,9vw,96px); max-width:680px; }
.strip__h { font-weight:900; letter-spacing:0; line-height:1.06; font-size:clamp(28px,3.25rem,52px); color:var(--wlb-white); text-shadow:0 2px 20px rgba(30,27,46,.5); }
.strip__sub { margin-top:18px; font-size:clamp(16px,2vw,19px); color:var(--wlb-ink-on-dark); }

.strip__content--char { display:grid; gap:28px; align-items:center; }
.strip__char { max-width:240px; }
.strip__char img { width:100%; filter:drop-shadow(0 22px 26px rgba(0,0,0,.4)); }
@media (min-width:820px){
  .strip__content--char { grid-template-columns:240px 1fr; max-width:920px; }
}

/* strip collage — polaroid presa por washi sobre o golden-hour (AJUSTE 3) */
.strip__content--collage { display:grid; gap:clamp(28px,5vw,48px); align-items:center; max-width:940px; }
.strip__copy { max-width:560px; }
.polaroid--strip { width:200px; justify-self:start; transform:rotate(-5deg); }
.polaroid--strip .polaroid__cap { color:var(--wlb-orange); }
@media (min-width:820px){
  .strip__content--collage { grid-template-columns:1fr 220px; }
  .polaroid--strip { justify-self:end; transform:rotate(4deg); }
}

/* ============================================================
   PRODUTO REAL
   ============================================================ */
.product-demo {
  margin-top:clamp(36px,4rem,64px);
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:stretch;
}
.product-demo__copy {
  background:var(--wlb-white);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  padding:clamp(28px,2.75rem,44px);
  box-shadow:var(--shadow-sm);
}
.product-demo__copy h3 {
  font-size:clamp(28px,2.375rem,38px);
  line-height:1.08;
  font-weight:900;
  letter-spacing:0;
  color:var(--wlb-ink);
  margin-bottom:14px;
}
.product-demo__copy p {
  color:#3c3650;
  font-size:17px;
  line-height:1.58;
}
.product-demo__facts {
  list-style:none;
  display:grid;
  gap:10px;
  margin-top:22px;
}
.product-demo__facts li {
  position:relative;
  padding-left:24px;
  font-size:14.5px;
  line-height:1.4;
  color:#4a4458;
  font-weight:600;
}
.product-demo__facts li::before {
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--wlb-orange-ink);
}
.flow-real {
  min-width:0;
  display:grid;
  gap:14px;
}
.flow-real__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.flow-real__shot {
  margin:0;
  min-width:0;
  overflow:hidden;
  border-radius:var(--r-md);
  border:1px solid var(--hair);
  background:var(--wlb-white);
  box-shadow:var(--shadow-md);
}
.flow-real__shot img {
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:top left;
}
.flow-real__shot figcaption {
  padding:10px 14px 12px;
  color:var(--wlb-ink);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-top:1px solid var(--hair);
}
@media (min-width:920px){
  .product-demo { grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr); }
  .flow-real__grid { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   BÔNUS
   ============================================================ */
.bonus__head { text-align:left; max-width:920px; margin-inline:0; }
.bonus__panel {
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  padding-block:clamp(24px,2.5rem,40px);
  border-top:1px solid var(--hair-on-dark);
  border-bottom:1px solid var(--hair-on-dark);
}
.bonus__intro {
  max-width:420px;
  color:var(--wlb-mist);
  font-size:17px;
  line-height:1.56;
}
.bonus__list {
  list-style:none;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
.bonus__list li {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:18px;
  padding:20px 0;
  border-top:1px solid rgba(199,165,243,.18);
}
.bonus__list li:first-child { border-top:0; padding-top:0; }
.bonus__list li:last-child { padding-bottom:0; }
.bonus__list span {
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--wlb-orange-soft);
  color:var(--wlb-ink);
  font-weight:900;
  font-size:13px;
  grid-row:1 / span 2;
}
.bonus__list strong {
  display:block;
  grid-column:2;
  color:var(--wlb-ink-on-dark);
  font-size:20px;
  line-height:1.15;
  margin-bottom:6px;
}
.bonus__list em {
  display:block;
  grid-column:2;
  color:var(--wlb-mist);
  font-style:normal;
  font-size:15px;
  line-height:1.5;
}
@media (min-width:860px){
  .bonus__panel { grid-template-columns:.48fr 1fr; align-items:start; }
}

/* ============================================================
   PRA QUEM É / NÃO É
   ============================================================ */
.forwho__head { text-align:left; max-width:880px; margin-inline:0; }
.forwho__grid { display:grid; gap:24px; grid-template-columns:1fr; align-items:start; }
@media (min-width:840px){ .forwho__grid { grid-template-columns:1fr 1fr; } }
.forwho__card { position:relative; border-radius:var(--r-md); padding:clamp(28px,4vw,40px); }
.forwho__card--yes { background:var(--wlb-white); border:1px solid var(--hair); box-shadow:var(--shadow-md); }
.forwho__washi {
  position:absolute; top:-9px; left:24px; right:24px; height:16px; transform:rotate(-.5deg);
  background:var(--wlb-orange);
  background-image:repeating-linear-gradient(90deg,transparent 0 16px,rgba(255,252,248,.3) 16px 20px);
  border-radius:3px; box-shadow:0 6px 14px -4px rgba(30,27,46,.4);
}
.forwho__tag { font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin-bottom:22px; }
.forwho__tag--yes { color:var(--wlb-orange-ink); }
.forwho__list { list-style:none; display:grid; gap:16px; }
.forwho__list li { position:relative; padding-left:38px; font-size:16px; line-height:1.5; }
.forwho__list--yes li { color:#3c3650; }
.forwho__list--yes li::before {
  content:"✓"; position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%;
  background:var(--wlb-orange); color:var(--wlb-white); font-weight:900; font-size:13px;
  display:grid; place-items:center;
}
.forwho__card--no { background:var(--wlb-ink); padding-top:clamp(40px,5vw,52px); }
.forwho__tab {
  position:absolute; top:-15px; left:24px;
  background:var(--wlb-lilac); color:var(--wlb-ink);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 18px; border-radius:8px 8px 8px 0; box-shadow:0 6px 16px -4px rgba(30,27,46,.5);
}
.forwho__list--no li { color:var(--wlb-ink-on-dark); }
.forwho__list--no li::before {
  content:"✕"; position:absolute; left:0; top:0; width:24px; height:24px;
  color:var(--wlb-lilac); font-weight:900; font-size:16px; display:grid; place-items:center;
}

/* ============================================================
   CALCULADORA
   ============================================================ */
.calc__card {
  max-width:680px; margin:0 auto; background:rgba(255,252,248,.05);
  border:1px solid var(--hair-on-dark); border-radius:var(--r-lg);
  padding:clamp(28px,5vw,48px); text-align:center;
}
.calc__label { display:block; font-weight:700; font-size:18px; margin-bottom:24px; color:var(--wlb-ink-on-dark); }
.calc__bignum { display:block; font-weight:900; font-size:clamp(64px,12vw,96px); color:var(--wlb-orange-soft); line-height:1; margin-bottom:20px; }
.calc__sliderbox { margin-bottom:28px; }

#calc-slider {
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--wlb-orange) var(--fill,40%),rgba(199,165,243,.35) var(--fill,40%));
  cursor:pointer;
}
#calc-slider::-webkit-slider-thumb { -webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:var(--wlb-white); border:3px solid var(--wlb-orange); box-shadow:0 4px 12px rgba(0,0,0,.4); cursor:pointer; }
#calc-slider::-moz-range-thumb { width:30px; height:30px; border-radius:50%; background:var(--wlb-white); border:3px solid var(--wlb-orange); cursor:pointer; }

.calc__out { font-size:clamp(17px,2.2vw,20px); line-height:1.55; color:var(--wlb-ink-on-dark); text-align:left; }
.calc__out strong { color:var(--wlb-orange-soft); }
.calc__mul { color:var(--wlb-mist); font-weight:500; }
.calc__emotional { margin-top:18px; font-size:15px; color:var(--wlb-mist); font-weight:500; text-align:left; }
.calc__cta { margin-top:30px; }
@media (min-width:560px){ .calc__cta{ min-width:320px; } }

/* ============================================================
   CURRÍCULO — takes numerados
   ============================================================ */
/* cards de aula estilo "ficha com washi tape": número grande + conteúdo, sobre fundo claro */
.takes { list-style:none; display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:740px){ .takes { grid-template-columns:1fr 1fr; } }
.take {
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  background:var(--wlb-white); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:28px 24px 24px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.take:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.take__washi {
  position:absolute; top:-8px; left:18px; right:18px; height:14px; transform:rotate(-.4deg);
  background:var(--wlb-orange);
  background-image:repeating-linear-gradient(90deg,transparent 0 15px,rgba(255,252,248,.3) 15px 19px);
  border-radius:3px; box-shadow:0 5px 12px -4px rgba(30,27,46,.35);
}
.take__num { font-weight:900; font-size:clamp(40px,3.25rem,52px); line-height:.9; color:var(--wlb-orange); letter-spacing:0; }
.take:nth-child(even) .take__num { color:var(--wlb-lilac-deep); }
.take__body { min-width:0; }
.take__t { font-weight:700; font-size:19px; margin:0 0 6px; color:var(--wlb-ink); }
.take__d { font-size:15px; color:#5a5468; line-height:1.5; }
.take__items {
  list-style:none;
  display:grid;
  gap:8px;
  margin-top:10px;
}
.take__items li {
  position:relative;
  padding-left:18px;
  color:#5a5468;
  font-size:14.5px;
  line-height:1.42;
}
.take__items li::before {
  content:"";
  position:absolute;
  left:0;
  top:.56em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--wlb-lilac-mid);
}
.take__badge {
  display:inline-block; margin-top:12px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  /* orange puro reprova AA em 11px → orange-ink (5.6 sobre branco) */
  background:var(--wlb-orange-ink); color:var(--wlb-white); padding:4px 12px; border-radius:var(--r-pill);
}

/* ============================================================
   OFERTA
   ============================================================ */
.offer-brief {
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:stretch;
  background:var(--wlb-ink);
  color:var(--wlb-ink-on-dark);
  border-radius:var(--r-lg);
  padding:clamp(28px,3rem,48px);
  box-shadow:var(--shadow-md);
}
.offer-brief__label {
  width:fit-content;
  margin-bottom:18px;
  color:var(--wlb-orange-soft);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.offer-brief__main h3 {
  max-width:580px;
  font-size:clamp(26px,2rem,32px);
  line-height:1.08;
  letter-spacing:0;
  font-weight:900;
  margin-bottom:16px;
}
.offer-brief__main p {
  max-width:620px;
  color:var(--wlb-mist);
  font-size:17px;
  line-height:1.58;
}
.offer-steps {
  list-style:none;
  display:grid;
  gap:14px;
}
.offer-steps li {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  padding:13px 0;
  border-top:1px solid rgba(199,165,243,.18);
}
.offer-steps li:first-child { border-top:0; padding-top:0; }
.offer-steps span {
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--wlb-lilac);
  color:var(--wlb-ink);
  font-size:12px;
  font-weight:900;
  grid-row:1 / span 2;
}
.offer-steps strong {
  display:block;
  grid-column:2;
  margin-bottom:4px;
  color:var(--wlb-white);
  font-size:17px;
}
.offer-steps em {
  display:block;
  grid-column:2;
  color:var(--wlb-mist);
  font-style:normal;
  font-size:14.5px;
  line-height:1.45;
}
.offer-includes {
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  padding:clamp(24px,2.5rem,40px) 0 0;
  border-top:1px solid var(--hair);
}
.offer-includes h3 {
  font-size:clamp(24px,2rem,32px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:0;
  color:var(--wlb-ink);
}
.offer-includes ul {
  list-style:none;
  display:grid;
  gap:14px;
}
.offer-includes li {
  position:relative;
  padding-left:30px;
  color:#3c3650;
  font-size:16px;
  line-height:1.5;
}
.offer-includes li::before {
  content:"";
  position:absolute;
  left:0;
  top:.48em;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--wlb-lilac-mid);
}
@media (min-width:860px){
  .offer-brief { grid-template-columns:1.1fr .9fr; }
  .offer-includes { grid-template-columns:.42fr 1fr; }
}

/* card de preço */
.price { max-width:920px; margin:0 auto; text-align:center; }
.price__head {
  max-width:680px;
  margin:0 auto 28px;
}
.price__head p:not(.eyebrow) {
  margin-top:14px;
  color:var(--wlb-mist);
  font-size:17px;
  line-height:1.55;
}
.price__anchor { max-width:680px; margin:0 auto 34px; font-size:clamp(16px,1.1875rem,19px); color:var(--wlb-ink-on-dark); line-height:1.6; }
.price__card {
  background:var(--wlb-white); color:var(--wlb-ink);
  border-radius:var(--r-lg); padding:clamp(30px,5vw,44px);
  box-shadow:var(--shadow-md); border:1px solid var(--hair);
}
.price__eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--wlb-orange-ink); margin-bottom:8px; }
.price__value { display:flex; align-items:baseline; justify-content:center; gap:4px; color:var(--wlb-ink); }
.price__value--text { align-items:center; min-height:86px; }
.price__cur { font-size:24px; font-weight:700; color:var(--wlb-lilac-mid); }
.price__num { font-size:clamp(56px,5rem,80px); font-weight:900; letter-spacing:0; line-height:1; }
.price__per { font-size:20px; font-weight:500; color:#6a6478; }
.price__sub { margin:10px 0 24px; font-size:16px; color:#3c3650; }
.price__card .cta-micro { color:#6a6478; }
.price__card .btn--primary { box-shadow:0 8px 0 var(--wlb-ink), 0 10px 24px rgba(217,117,89,.35); }
.price__micro { margin-top:14px; }
.price__included {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:24px;
}
.price__included li {
  padding:8px 13px;
  border-radius:var(--r-pill);
  border:1px solid var(--hair-on-dark);
  color:var(--wlb-ink-on-dark);
  font-size:13px;
  font-weight:700;
}
.price__close { margin-top:24px; font-size:15px; color:var(--wlb-mist); }

/* ============================================================
   FAQ
   ============================================================ */
.faq__wrap { display:grid; gap:12px; }
.faq__item { background:var(--wlb-white); border:1px solid var(--hair); border-radius:var(--r-md); overflow:hidden; }
.faq__q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:inherit; font-weight:700; font-size:17px; color:var(--wlb-ink);
  padding:20px 22px;
}
.faq__q-icon { font-size:24px; color:var(--wlb-orange-ink); transition:transform .2s ease; flex:none; line-height:1; }
.faq__item.is-open .faq__q-icon { transform:rotate(45deg); }
.faq__a { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq__a p { padding:0 22px 22px; font-size:16px; color:#3c3650; line-height:1.55; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { text-align:center; }
.foot__inner { display:flex; flex-direction:column; align-items:center; gap:18px; }
.foot__logo { width:160px; height:auto; opacity:.95; }
.foot__h { font-weight:900; letter-spacing:0; line-height:1.15; font-size:clamp(26px,2.75rem,44px); color:var(--wlb-ink-on-dark); max-width:680px; }
.foot__finale { margin-top:10px; font-size:26px; color:var(--wlb-lilac); }

/* ============================================================
   CTA STICKY (mobile)
   ============================================================ */
.cta-float {
  position:fixed; left:12px; right:12px; bottom:10px; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 10px 10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--wlb-ink);
  color:var(--wlb-ink-on-dark);
  border:1px solid var(--hair-on-dark);
  border-radius:18px;
  box-shadow:0 18px 48px rgba(9,7,16,.42);
  transform:translateY(110%); transition:transform .3s ease;
}
.cta-float.is-visible { transform:translateY(0); }
.cta-float__copy { display:grid; gap:2px; min-width:0; }
.cta-float__copy span {
  color:var(--wlb-mist);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cta-float__copy strong {
  color:var(--wlb-white);
  font-size:18px;
  line-height:1.1;
}
.cta-float__btn {
  flex:none;
  min-height:44px;
  display:inline-grid;
  place-items:center;
  border-radius:14px;
  padding-inline:22px;
  background:var(--cta-bg);
  color:var(--wlb-white);
  font-weight:900;
}
@media (min-width:860px){ .cta-float { display:none; } }
/* respiro pro sticky não cobrir o footer no mobile */
@media (max-width:859px){ .foot { padding-bottom:104px; } }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(30,27,46,.78); padding:20px; opacity:0; transition:opacity .2s ease;
}
.modal-overlay[hidden] { display:none; }
.modal-overlay.is-open { opacity:1; }
.modal {
  position:relative; width:100%; max-width:560px; max-height:90vh; overflow:auto;
  background:var(--wlb-white); color:var(--wlb-ink);
  border-radius:var(--r-lg); box-shadow:var(--shadow-md);
}
.modal__close {
  position:absolute; top:12px; right:12px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:var(--wlb-ink); color:var(--wlb-white); font-size:22px; line-height:1;
}
.modal__close:hover { background:var(--wlb-orange-deep); }
.modal__body { display:grid; grid-template-columns:1fr; }
.modal__photo { background:var(--wlb-lilac-soft); }
.modal__photo img { width:100%; height:100%; object-fit:cover; max-height:280px; }
/* placeholder Pixel/Charta — sem asset ainda */
.modal__photo--ph {
  display:grid; place-items:center; min-height:200px; gap:10px;
  background:
    repeating-linear-gradient(135deg, rgba(155,123,199,.1) 0 12px, transparent 12px 24px),
    var(--wlb-ink);
}
.modal__photo--ph img { display:none; }
.modal__photo--ph::before {
  content:""; width:56px; height:56px;
  background:url("assets/logos/wlb-logo-transparente-claro.png") center/contain no-repeat;
}
.modal__photo--ph::after {
  content:attr(data-ph); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--wlb-mist);
}
.modal__info { padding:26px; }
.modal__breed { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--wlb-lilac-deep); }
.modal__name { font-weight:900; font-size:30px; letter-spacing:0; margin:4px 0 4px; }
.modal__role { font-size:15px; color:var(--wlb-orange-ink); font-weight:700; margin-bottom:16px; }
.modal__bullets { list-style:none; display:grid; gap:10px; margin-bottom:18px; }
.modal__bullets li { position:relative; padding-left:22px; font-size:15px; color:#3c3650; line-height:1.5; }
.modal__bullets li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--wlb-orange); }
.modal__forvoce { font-size:15px; background:var(--wlb-lilac-soft); border-radius:var(--r-md); padding:14px 16px; color:var(--wlb-ink); }
@media (min-width:560px){
  .modal__body { grid-template-columns:200px 1fr; }
  .modal__photo img { max-height:none; height:100%; }
}

/* ============================================================
   UPGRADE PREMIUM CINEMATIC · 2026-07-05
   Camada de movimento (GSAP + Lenis) + preço em 2 opções.
   Tudo degrada graciosamente sem JS e com prefers-reduced-motion.
   ============================================================ */

/* ---------- Ritmo da oferta: mata o vazio entre as cenas ---------- */
.oferta { padding-block-end:clamp(56px,5rem,80px); }
.preco-sec { padding-block-start:clamp(48px,5rem,80px); }

/* ---------- Mobile: hero enquadra os personagens (crop 16:9 → retrato) ---------- */
@media (max-width:760px){
  .hero__bg video { object-position:68% 50%; }
}

/* ---------- PREÇO · duas opções de pagamento ---------- */
.price__duo { display:grid; gap:22px; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:820px){ .price__duo { grid-template-columns:1fr 1fr; } }
.price__duo .price__card { position:relative; display:flex; flex-direction:column; }
.price__duo .price__card .btn { margin-top:auto; }
.price__duo .price__sub { min-height:48px; }
.price__card--anual { border:2px solid var(--wlb-orange); box-shadow:0 18px 44px rgba(217,117,89,.28); }
.price__flag {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-2deg);
  background:var(--wlb-orange-ink); color:var(--wlb-white);
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 16px; border-radius:var(--r-pill); box-shadow:0 6px 14px rgba(30,27,46,.3);
  white-space:nowrap;
}
.price__num--anual { font-size:clamp(34px,3rem,48px); }
.price__value { margin-bottom:6px; }

/* ---------- Barra de progresso do filme (topo) ---------- */
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:150;
  background:linear-gradient(90deg,var(--wlb-orange),var(--wlb-lilac));
  transform-origin:0 50%; transform:scaleX(0); pointer-events:none;
}

/* ---------- HERO pin + scrub (só quando o JS ativa .is-scrub) ---------- */
.hero-stage.is-scrub { height:300vh; }
.hero-stage.is-scrub .hero { height:100svh; min-height:100svh; }
.hero-stage.is-scrub .hero__bg video { will-change:transform; }
.hero-stage.is-scrub .hero__panel { will-change:transform,opacity; }

/* ---------- TIMELINE: progresso legado desativado no Flow em tela cheia ---------- */
.tl-progress { display:none; }
.tl-progress.is-on {
  display:block; height:4px; margin-top:18px; border-radius:var(--r-pill);
  background:rgba(30,27,46,.1); overflow:hidden;
}
.tl-progress__bar {
  height:100%; width:100%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--wlb-orange),var(--wlb-lilac-mid));
  transform-origin:0 50%; transform:scaleX(0);
}

/* ---------- Reveals (estado inicial só com .anim no <html>) ---------- */
html.anim [data-rv] { opacity:0; transform:translateY(46px); }
html.anim .no-rv [data-rv] { opacity:1; transform:none; }

/* ---------- Tilt 3D nos cards (JS pointermove, desktop) ---------- */
.tl__item, .bonus__panel, .price__card, .take { transform-style:preserve-3d; }

/* ---------- Cursor cinematográfico (desktop fino) ---------- */
.cursor-dot, .cursor-ring { display:none; }
@media (hover:hover) and (pointer:fine){
  html.anim .cursor-dot {
    display:block; position:fixed; z-index:9999; pointer-events:none;
    width:8px; height:8px; border-radius:50%; background:var(--wlb-orange);
    transform:translate(-50%,-50%); mix-blend-mode:difference;
  }
  html.anim .cursor-ring {
    display:block; position:fixed; z-index:9998; pointer-events:none;
    width:34px; height:34px; border-radius:50%;
    border:1.5px solid rgba(199,165,243,.75);
    transform:translate(-50%,-50%);
    transition:width .18s ease, height .18s ease, opacity .18s ease;
  }
  html.anim .cursor-ring.is-hover { width:56px; height:56px; opacity:.9; }
}

/* ---------- Reduced motion: nada de pin/scrub/reveal ---------- */
@media (prefers-reduced-motion:reduce){
  html.anim [data-rv] { opacity:1; transform:none; }
  .hero-stage.is-scrub { height:auto; }
  .scroll-progress, .cursor-dot, .cursor-ring { display:none !important; }
}

/* ============================================================
   COMPONENTES DINÂMICOS · 2026-07-05
   ============================================================ */

/* ---------- Chips da calculadora ---------- */
.calc__chips { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; justify-content:center; }
.calc__chip {
  font-size:13.5px; font-weight:500; color:var(--wlb-ink-on-dark);
  background:rgba(255,252,248,.06); border:1px solid var(--hair-on-dark);
  padding:8px 14px; border-radius:var(--r-pill);
}
.calc__chip b { font-weight:900; font-size:16px; color:var(--wlb-orange-soft); margin-right:2px; }
.calc__chip.is-pop b { display:inline-block; animation:chip-pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes chip-pop { 0%{transform:scale(1.35)} 100%{transform:scale(1)} }

@media (prefers-reduced-motion:reduce){
  .calc__chip.is-pop b { animation:none; }
}