/* =========================================================
   CONVERT — Apresentação comercial Kapila
   Mesmo design system do site (paginas/site/style.css):
   tokens, Degular, pills, filetes de luz, grade, brilhos.
   ========================================================= */

/* ============ Fontes ============ */
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-regularitalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-lightitalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

/* ============ Tokens ============ */
:root {
  --preto: #060809;
  --off: #F7F7F7;
  --laranja: #EB390F;
  --laranja-claro: #FF8A63;
  --pessego: #F6C7B5;
  --grafite: #3F3F3F;
  --bege: #DDDBD3;
  --azul: #052DFC;
  --linha: rgba(255, 255, 255, .09);
  --linha-forte: rgba(255, 255, 255, .16);
  --suave: rgba(247, 247, 247, .64);
  --suave-claro: rgba(63, 63, 63, .74);
  --card: linear-gradient(180deg, #131518, #0b0d0f);

  --font: "Degular", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);

  /* Unidade do slide: 1% da largura de um palco 16:9 que cabe na tela.
     Tudo escala junto, do notebook ao telão. */
  --u: min(1vw, 1.7778vh);

  --t-hero: clamp(72px, calc(var(--u) * 15), 300px);
  --t-h1: clamp(34px, calc(var(--u) * 4.9), 100px);
  --t-h1-sm: clamp(32px, calc(var(--u) * 4.2), 86px);
  --t-h2: clamp(28px, calc(var(--u) * 3.3), 66px);
  --t-h3: clamp(20px, calc(var(--u) * 1.75), 36px);
  --t-lead: clamp(17px, calc(var(--u) * 1.32), 27px);
  --t-body: clamp(15px, calc(var(--u) * 1.08), 22px);
  --t-small: clamp(12px, calc(var(--u) * .78), 15px);

  --gutter: clamp(20px, calc(var(--u) * 5), 104px);
  --pad-t: clamp(76px, calc(var(--u) * 6.2), 128px);
  --pad-b: clamp(84px, calc(var(--u) * 6.4), 132px);
  --max: calc(var(--u) * 88);
  --raio: clamp(16px, calc(var(--u) * 1.15), 24px);
  --frame: clamp(8px, calc(var(--u) * .8), 16px);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--preto);
  color: var(--off);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 4px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ Palco ============ */
.deck { position: fixed; inset: 0; }
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-t) var(--gutter) var(--pad-b);
  overflow: hidden;
  background: var(--preto);
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s var(--ease), visibility .8s;
}
.slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.slide__inner { position: relative; z-index: 2; width: 100%; max-width: var(--max); }

/* Entrada dos elementos: sobe com fade e desfoque (mesmo gesto do site) */
.anim [data-in] {
  opacity: 0;
  transform: translateY(calc(var(--u) * 2.2));
  filter: blur(10px);
  transition:
    opacity .9s var(--ease) calc(var(--i, 0) * 85ms + 180ms),
    transform 1.1s var(--ease) calc(var(--i, 0) * 85ms + 180ms),
    filter .9s var(--ease) calc(var(--i, 0) * 85ms + 180ms);
}
.anim .slide.is-back [data-in] { transform: translateY(calc(var(--u) * -2.2)); }
.anim .slide.is-active [data-in] { opacity: 1; transform: none; filter: blur(0); }

/* ============ Fundo: grade, brilhos, estrelinhas ============ */
.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: calc(var(--u) * 4) calc(var(--u) * 4);
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  opacity: .6;
}
.glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(90px); opacity: .5; }
.glow--orange { background: radial-gradient(circle, rgba(235, 57, 15, .9), transparent 65%); }
.glow--blue { background: radial-gradient(circle, rgba(5, 45, 252, .75), transparent 65%); }
.spark { position: absolute; width: 14px; height: 14px; pointer-events: none; animation: twinkle 3.2s ease-in-out infinite; }
.spark::before, .spark::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--pessego); border-radius: 2px; }
.spark::before { width: 2px; height: 100%; }
.spark::after { width: 100%; height: 2px; }
@keyframes twinkle { 50% { opacity: .25; scale: .6; } }

/* ============ Tipografia ============ */
.h1 {
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: .98;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.h1--sm { font-size: var(--t-h1-sm); }
.h2 { font-weight: 700; font-size: var(--t-h2); line-height: 1; letter-spacing: -.03em; }
.h1 em, .h2 em, .callout em, .cover__sub em, .shot__tag em, .sitemap__note em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--off) 0%, var(--pessego) 45%, var(--laranja-claro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .06em;
}
.lead {
  margin-top: calc(var(--u) * 1.8);
  max-width: 34em;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--suave);
  text-wrap: pretty;
}
.lead + .lead { margin-top: calc(var(--u) * 1); }
.lead--muted { font-size: var(--t-body); }
.label {
  margin: calc(var(--u) * 2.2) 0 calc(var(--u) * .9);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laranja-claro);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  margin-bottom: calc(var(--u) * 1.6);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--suave);
}
.pill::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--laranja);
  box-shadow: 0 0 12px 2px rgba(235, 57, 15, .7);
}
.pill--light { border-color: rgba(6, 8, 9, .14); color: var(--suave-claro); background: rgba(6, 8, 9, .03); }

.head { margin-bottom: calc(var(--u) * 3.6); }
.head--center { text-align: center; }
.head--center .h1 { max-width: 15em; margin: 0 auto; }

.footnote { margin-top: calc(var(--u) * 2.4); font-size: var(--t-small); letter-spacing: .04em; color: var(--suave); }
.footnote--center { text-align: center; }

/* ============ Layouts ============ */
.stack { display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); align-items: center; }

/* ============ Moldura fixa ============ */
.chrome {
  position: fixed;
  left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 calc(var(--gutter) * .7 + var(--frame));
  pointer-events: none;
  transition: opacity .5s, color .5s;
}
.chrome > * { pointer-events: auto; }
.chrome--top { top: calc(var(--frame) + clamp(14px, calc(var(--u) * 1.8), 36px)); }
.chrome--bottom { bottom: calc(var(--frame) + clamp(14px, calc(var(--u) * 1.6), 32px)); }
.chrome__logo { display: block; width: clamp(84px, calc(var(--u) * 6.4), 132px); }
.chrome__logo img { width: 100%; }
.logo-on-light { display: none !important; }
[data-tone="light"] .logo-on-dark, [data-tone="orange"] .logo-on-dark { display: none !important; }
[data-tone="light"] .logo-on-light, [data-tone="orange"] .logo-on-light { display: block !important; }
[data-tone="orange"] .logo-on-light { filter: brightness(0); } /* no laranja, o símbolo some: logo inteiro em preto */

.chrome__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--suave);
}
.chrome__product { font-weight: 700; color: var(--off); }
.chrome__count { font-variant-numeric: tabular-nums; }
.chrome__count b { font-weight: 600; color: var(--off); }
.chrome__section {
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--suave);
}

.controls { display: flex; align-items: center; gap: 8px; }
.controls__sep { width: 1px; height: 20px; margin: 0 4px; background: var(--linha-forte); }
.ctrl {
  width: clamp(40px, calc(var(--u) * 2.6), 52px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  background: rgba(6, 8, 9, .5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color .3s, background .3s, opacity .3s, transform .4s var(--ease);
}
.ctrl svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ctrl:hover { border-color: var(--laranja); background: rgba(235, 57, 15, .14); }
.ctrl:active { transform: scale(.94); }
.ctrl:disabled { opacity: .3; cursor: default; pointer-events: none; }
.ctrl--main { background: var(--laranja); border-color: transparent; color: #fff; box-shadow: 0 10px 30px -10px rgba(235, 57, 15, .8); }
.ctrl--main:hover { background: var(--laranja); box-shadow: 0 0 0 5px rgba(235, 57, 15, .18), 0 12px 34px -8px rgba(235, 57, 15, .9); }
.icon-compress { display: none; }
.is-fullscreen .icon-expand { display: none; }
.is-fullscreen .icon-compress { display: block; }

.progress { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; height: 3px; background: rgba(255, 255, 255, .06); }
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--laranja), var(--laranja-claro));
  box-shadow: 0 0 12px rgba(235, 57, 15, .8);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .8s var(--ease);
}

/* Moldura em slides claros e laranja */
[data-tone="light"] .chrome__meta, [data-tone="light"] .chrome__section { color: var(--suave-claro); }
[data-tone="light"] .chrome__product, [data-tone="light"] .chrome__count b { color: var(--preto); }
[data-tone="light"] .ctrl:not(.ctrl--main) { color: var(--preto); border-color: rgba(6, 8, 9, .16); background: rgba(255, 255, 255, .6); }
[data-tone="light"] .controls__sep { background: rgba(6, 8, 9, .16); }
[data-tone="orange"] .chrome__meta, [data-tone="orange"] .chrome__section { color: rgba(6, 8, 9, .7); }
[data-tone="orange"] .chrome__product, [data-tone="orange"] .chrome__count b { color: var(--preto); }
[data-tone="orange"] .ctrl { color: var(--preto); border-color: rgba(6, 8, 9, .2); background: rgba(255, 255, 255, .12); }
[data-tone="orange"] .ctrl--main { background: var(--preto); color: var(--off); box-shadow: none; }
[data-tone="orange"] .controls__sep { background: rgba(6, 8, 9, .2); }
[data-tone="orange"] .progress span { background: var(--preto); box-shadow: none; }

/* Compartilhamento de tela: parado por alguns segundos, a moldura recua e o cursor some */
.is-idle .chrome--bottom { opacity: 0; }
.is-idle, .is-idle * { cursor: none !important; }

/* ============ 01 — Abertura ============ */
.slide--cover { align-items: center; text-align: center; }
.cover { display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--u) * -4); }
.cover__glow-a { width: calc(var(--u) * 50); height: calc(var(--u) * 50); left: 50%; bottom: calc(var(--u) * -30); transform: translateX(-50%); opacity: .75; }
.cover__glow-b { width: calc(var(--u) * 34); height: calc(var(--u) * 34); right: calc(var(--u) * -10); top: 6%; opacity: .3; }
.cover__spark-a { left: 13%; top: 30%; }
.cover__spark-b { right: 17%; top: 22%; transform: scale(.7); animation-delay: .6s; }
.cover__spark-c { right: 11%; top: 56%; transform: scale(.5); animation-delay: 1.2s; }
.cover__title {
  font-weight: 900;
  font-size: var(--t-hero);
  line-height: .9;
  letter-spacing: -.045em;
  margin: calc(var(--u) * .6) 0 calc(var(--u) * 2.2);
}
.ring { position: relative; display: inline-block; padding: 0 .12em; }
.ring svg { position: absolute; left: -4%; top: -14%; width: 108%; height: 128%; overflow: visible; pointer-events: none; }
.ring ellipse {
  fill: none;
  stroke: var(--laranja);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
/* O anel abre da esquerda pra direita, como se fosse desenhado */
.anim .ring svg { clip-path: inset(-20% 100% -20% -5%); }
.anim .slide.is-active .ring svg { animation: wipe 1.5s var(--ease) .7s forwards; }
@keyframes wipe { to { clip-path: inset(-20% -5% -20% -5%); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.cover__sub {
  max-width: 22em;
  font-size: clamp(22px, calc(var(--u) * 2.3), 46px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.cover__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px calc(var(--u) * 2);
  margin-top: calc(var(--u) * 2.2);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--suave);
}
.cover__pillars span { display: inline-flex; align-items: center; gap: calc(var(--u) * 2); }
.cover__pillars span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--laranja); }

/* Horizonte: o planeta nascendo no rodapé, igual ao hero do site */
.horizon {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(var(--u) * -13);
  width: 200vw;
  max-width: 3200px;
  height: calc(var(--u) * 20);
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #0d0f11, var(--preto) 70%);
  box-shadow:
    0 -1px 0 0 rgba(255, 180, 150, .95),
    0 -12px 44px -4px rgba(235, 57, 15, .8),
    0 -70px 160px -20px rgba(235, 57, 15, .5),
    inset 0 26px 50px -30px rgba(235, 57, 15, .5);
}
.anim .horizon { transform: translate(-50%, 40%); opacity: 0; transition: transform 1.8s var(--ease) .1s, opacity 1.6s var(--ease) .1s; }
.anim .slide.is-active .horizon { transform: translate(-50%, 0); opacity: 1; }

/* ============ 02 — Problema ============ */
.split--problem { grid-template-columns: 1.25fr .9fr; align-items: end; }
.symptoms ul { border-top: 1px solid var(--linha-forte); }
.symptoms li {
  display: flex;
  gap: calc(var(--u) * 1.2);
  align-items: baseline;
  padding: calc(var(--u) * 1.3) 0;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.25;
}
.symptoms__x { position: relative; flex: none; width: .7em; height: .7em; top: .05em; }
.symptoms__x::before, .symptoms__x::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 2px;
  background: var(--laranja); border-radius: 2px;
}
.symptoms__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.symptoms__x::after { transform: translate(-50%, -50%) rotate(-45deg); }

.callout {
  position: relative;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3);
  border-radius: var(--raio);
  background: var(--card);
  border: 1px solid rgba(235, 57, 15, .35);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-align: center;
  overflow: hidden;
}
.callout::before, .contrast__col--kapila::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 99, .9), transparent);
  box-shadow: 0 0 18px 2px rgba(235, 57, 15, .5);
}

/* ============ 03 — Solução (órbita) ============ */
.split--solution { grid-template-columns: 1.05fr 1fr; }
.solution__glow { width: calc(var(--u) * 46); height: calc(var(--u) * 46); right: 0; top: 50%; transform: translateY(-50%); opacity: .35; }
.orbit { position: relative; width: min(100%, calc(var(--u) * 34)); aspect-ratio: 1; margin: 0 auto; }
.orbit svg { width: 100%; height: 100%; overflow: visible; }
.orbit__ring { fill: rgba(6, 8, 9, .88); stroke: rgba(255, 138, 99, .6); stroke-width: 1.5; filter: drop-shadow(0 0 30px rgba(235, 57, 15, .55)); }
.orbit__dash { fill: none; stroke: var(--linha-forte); stroke-width: 1; stroke-dasharray: 3 7; }
.orbit__path { fill: none; stroke: rgba(255, 138, 99, .55); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.slide.is-active .orbit__path { animation: draw 2s var(--ease) .9s forwards; }
.orbit__node { fill: var(--preto); stroke: var(--laranja); stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(235, 57, 15, .9)); }
.orbit__center {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  font-weight: 900;
  font-size: clamp(16px, calc(var(--u) * 1.6), 32px);
  letter-spacing: -.02em;
}
.orbit__label {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  font-weight: 600;
  font-size: clamp(13px, calc(var(--u) * 1.05), 22px);
  line-height: 1.1;
  white-space: nowrap;
}
.orbit__label small { font-size: .62em; letter-spacing: .14em; color: var(--laranja-claro); font-weight: 500; }
.orbit__label--top { left: 50%; top: 13.3%; transform: translate(-50%, calc(var(--u) * 1.5)); }
.orbit__label--bottom { left: 50%; top: 86.7%; transform: translate(-50%, calc(-100% - var(--u) * 1.5)); flex-direction: column-reverse; }
.orbit__label--right { left: 86.7%; top: 50%; transform: translate(calc(-100% - var(--u) * 1.6), -50%); align-items: flex-end; }
.orbit__label--left { left: 13.3%; top: 50%; transform: translate(calc(var(--u) * 1.6), -50%); align-items: flex-start; }

/* ============ Painel claro com moldura em degradê (14) ============ */
.slide--panel {
  padding: var(--frame);
  background:
    radial-gradient(80% 70% at 0% 0%, rgba(235, 57, 15, .95), transparent 60%),
    radial-gradient(70% 70% at 100% 100%, rgba(5, 45, 252, .6), transparent 60%),
    linear-gradient(135deg, #f26a3f, #DDDBD3 55%, #9aa6ff);
}
.panel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--pad-t) - var(--frame)) calc(var(--gutter) - var(--frame)) calc(var(--pad-b) - var(--frame));
  border-radius: calc(var(--raio) + 6px);
  background: var(--off);
  color: var(--grafite);
  overflow: hidden;
}
.panel .h1 { color: var(--preto); }
.panel .h1 em, .slide--cta .h1 em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--laranja);
}

/* ============ 04 e 05 — Vitrine com projeto real ============ */
.split--showcase { grid-template-columns: 1fr 1.08fr; gap: calc(var(--u) * 5); }
.split--reverse { grid-template-columns: 1.02fr 1fr; }
.showcase__glow { width: calc(var(--u) * 44); height: calc(var(--u) * 44); right: -6%; top: 50%; transform: translateY(-50%); opacity: .35; }
.showcase__glow--left { right: auto; left: -6%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 36em; }
.chips li {
  padding: calc(var(--u) * .45) calc(var(--u) * 1);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: var(--t-small);
  font-weight: 500;
  white-space: nowrap;
}
.shot { position: relative; }
.frame {
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--linha-forte);
  background: #0d0f11;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02);
}
.frame__bar { display: flex; gap: 6px; padding: calc(var(--u) * .7) calc(var(--u) * 1); border-bottom: 1px solid var(--linha); }
.frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.shot__tag {
  position: absolute;
  left: calc(var(--u) * -2.4);
  bottom: calc(var(--u) * 3.6);
  max-width: 11em;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6);
  border-radius: calc(var(--raio) * .75);
  background: rgba(6, 8, 9, .82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(235, 57, 15, .45);
  box-shadow: 0 0 30px -8px rgba(235, 57, 15, .6);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.split--reverse .shot__tag { left: auto; right: calc(var(--u) * -2.4); }
.shot figcaption { margin-top: calc(var(--u) * 1); font-size: var(--t-small); letter-spacing: .04em; color: var(--suave); }

/* ============ 06 — Estrutura do site ============ */
.split--structure { grid-template-columns: 1.1fr 1fr; gap: calc(var(--u) * 5); }
.sitemap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * 3.2) calc(var(--u) * 2.4);
  border-radius: var(--raio);
  background: var(--card);
  border: 1px solid var(--linha);
}
.sitemap__root {
  position: relative;
  padding: calc(var(--u) * .8) calc(var(--u) * 2.4);
  border-radius: 999px;
  background: var(--laranja);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-lead);
  box-shadow: 0 10px 34px -10px rgba(235, 57, 15, .9);
}
.sitemap__root::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: calc(var(--u) * 1.8); background: rgba(255, 138, 99, .6); }
.sitemap__branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * .9);
  width: 100%;
  margin-top: calc(var(--u) * 3.6);
}
.sitemap__branches::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: calc(var(--u) * -1.8); height: 1px; background: rgba(255, 138, 99, .6); }
.sitemap__node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1);
  border-radius: 12px;
  border: 1px solid var(--linha-forte);
  background: rgba(255, 255, 255, .03);
}
.sitemap__node::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: calc(var(--u) * 1.8); background: rgba(255, 138, 99, .6); }
.sitemap__node b { font-size: clamp(15px, calc(var(--u) * 1.35), 28px); font-weight: 600; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitemap__node i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.sitemap__node i:nth-of-type(2) { width: 70%; }
.sitemap__node i:nth-of-type(3) { width: 45%; background: rgba(235, 57, 15, .5); }
.sitemap__hint { margin-top: calc(var(--u) * 2.4); font-size: var(--t-small); color: var(--suave); text-align: center; }

/* ============ 07 — Trilha do processo (visão geral) ============ */
.track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 2.6); }
.track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--u) * .7);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 138, 99, .8), rgba(255, 138, 99, .25));
  transform-origin: left center;
}
.anim .track::before { transform: scaleX(0); transition: transform 1.6s var(--ease) .3s; }
.anim .slide.is-active .track::before { transform: scaleX(1); }
.track__node {
  position: relative;
  display: block;
  width: calc(var(--u) * 1.4); min-width: 16px;
  aspect-ratio: 1;
  margin-bottom: calc(var(--u) * 2.4);
  border-radius: 50%;
  background: var(--preto);
  border: 2.5px solid var(--laranja);
  box-shadow: 0 0 14px rgba(235, 57, 15, .9);
}
.track__num { font-size: var(--t-small); letter-spacing: .14em; color: var(--laranja-claro); font-weight: 500; }
.track h3 { margin-top: calc(var(--u) * .5); font-weight: 700; font-size: clamp(22px, calc(var(--u) * 2.5), 52px); letter-spacing: -.03em; line-height: 1; }

/* ============ 08 a 11 — Uma etapa por slide (letra grande pra ler em chamada) ============ */
.step__bg {
  position: absolute;
  right: -1%;
  bottom: -14%;
  z-index: 0;
  font-weight: 900;
  font-size: calc(var(--u) * 40);
  line-height: 1;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 138, 99, .14);
  pointer-events: none;
  user-select: none;
}
.step { display: grid; grid-template-columns: 1fr 1.05fr; gap: calc(var(--u) * 6); align-items: center; }
.step__count {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--suave);
}
.step__dots { display: flex; gap: 6px; }
.step__dots i { width: calc(var(--u) * 1.8); min-width: 18px; height: 3px; border-radius: 3px; background: var(--linha-forte); }
.step__dots i.on { background: var(--laranja); box-shadow: 0 0 10px rgba(235, 57, 15, .8); }
.step__title {
  margin: calc(var(--u) * 1.2) 0 calc(var(--u) * 2);
  font-weight: 700;
  font-size: clamp(56px, calc(var(--u) * 7.4), 150px);
  line-height: .9;
  letter-spacing: -.045em;
}
.step__title--long { font-size: clamp(44px, calc(var(--u) * 4.8), 96px); }
.step__lead {
  max-width: 15em;
  font-size: clamp(22px, calc(var(--u) * 2.3), 46px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.step__lead em {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(100deg, var(--off) 0%, var(--pessego) 45%, var(--laranja-claro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .06em;
}
.step__list { border-top: 1px solid var(--linha-forte); }
.step__list li {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1) 0;
  border-bottom: 1px solid var(--linha);
  font-size: clamp(20px, calc(var(--u) * 2), 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.step__list li::before { content: "✦"; flex: none; color: var(--laranja); font-size: .55em; transform: translateY(-.2em); }

/* ============ 13 — O que você recebe (bento) ============ */
.split--bento { grid-template-columns: .82fr 1.5fr; gap: calc(var(--u) * 5); }
.bento__glow { width: calc(var(--u) * 40); height: calc(var(--u) * 40); left: 20%; bottom: -30%; opacity: .3; }
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, calc(var(--u) * 9.6));
  grid-template-areas:
    "a a b c"
    "d e f c"
    "g h i j";
  gap: calc(var(--u) * .8);
}
.bento__a { grid-area: a; } .bento__b { grid-area: b; } .bento__c { grid-area: c; } .bento__d { grid-area: d; } .bento__e { grid-area: e; }
.bento__f { grid-area: f; } .bento__g { grid-area: g; } .bento__h { grid-area: h; } .bento__i { grid-area: i; } .bento__j { grid-area: j; }
.bento__tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: calc(var(--u) * 1.2);
  border-radius: calc(var(--raio) * .8);
  background: #121417;
  border: 1px solid var(--linha);
}
.bento__tile span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--t-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--suave);
}
.bento__tile span b { font-weight: 600; color: var(--laranja-claro); letter-spacing: .04em; }
.bento__tile strong { font-size: clamp(16px, calc(var(--u) * 1.4), 30px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.bento__tile--orange { background: var(--laranja); border-color: transparent; box-shadow: 0 20px 60px -20px rgba(235, 57, 15, .9); }
.bento__tile--orange span, .bento__tile--orange span b { color: rgba(255, 255, 255, .85); }
.bento__tile--orange strong { font-size: clamp(26px, calc(var(--u) * 2.8), 58px); letter-spacing: -.04em; line-height: .95; }
.bento__tile--light { background: var(--bege); color: var(--preto); border-color: transparent; }
.bento__tile--light span { color: var(--suave-claro); }
.bento__tile--light span b { color: var(--laranja); }
.bento__tile--light strong { font-size: clamp(22px, calc(var(--u) * 2.2), 46px); letter-spacing: -.03em; }
.bento__tile--line { background: transparent; border: 1px dashed rgba(255, 138, 99, .45); }

/* ============ 12 — Diferencial ============ */
.split--pillars { grid-template-columns: 1.1fr 1fr; }
.pillars__glow { width: calc(var(--u) * 42); height: calc(var(--u) * 42); right: 0; top: 50%; transform: translateY(-50%); opacity: .3; }
.contrast { display: grid; gap: calc(var(--u) * 1.2); }
.contrast__col {
  position: relative;
  padding: calc(var(--u) * 2) calc(var(--u) * 2.4);
  border-radius: var(--raio);
  background: var(--card);
  border: 1px solid var(--linha);
  overflow: hidden;
}
.contrast__col--kapila { border-color: rgba(235, 57, 15, .45); box-shadow: 0 30px 80px -40px rgba(235, 57, 15, .5); }
.contrast__label { margin-bottom: calc(var(--u) * .6); font-size: var(--t-small); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.contrast__col--kapila .contrast__label { color: var(--laranja-claro); }
.contrast li {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * .6) 0;
  font-size: var(--t-lead);
  line-height: 1.25;
}
.contrast__col--common li { color: var(--suave); }
.contrast__col--common li::before { content: "✕"; flex: none; font-size: .7em; color: rgba(247, 247, 247, .4); }
.contrast__col--kapila li { font-weight: 600; }
.contrast__col--kapila li::before { content: "✦"; flex: none; font-size: .7em; color: var(--laranja); }

/* ============ 14 — Investimento ============ */
.offer { display: flex; flex-direction: column; align-items: center; text-align: center; }
.offer__name { font-size: var(--t-h3); color: var(--suave-claro); }
.offer__name b { font-weight: 900; letter-spacing: -.02em; color: var(--preto); margin-right: .3em; }
.offer__value {
  display: flex;
  align-items: flex-start;
  margin: calc(var(--u) * 1.2) 0 calc(var(--u) * 1.4);
  font-weight: 700;
  font-size: clamp(110px, calc(var(--u) * 17), 330px);
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--preto);
}
.offer__value small { margin: .1em .1em 0 0; font-size: .3em; letter-spacing: -.02em; color: var(--laranja); }
.offer__installments { font-size: var(--t-lead); color: var(--suave-claro); }
.offer__installments span { font-weight: 600; color: var(--preto); }

/* ============ 15 — Encerramento ============ */
.slide--cta { background: var(--laranja); color: var(--preto); text-align: center; }
.cta { display: flex; flex-direction: column; align-items: center; }
.cta .h1 { max-width: 14em; color: var(--preto); }
.slide--cta .h1 em { color: #fff; }
.badge {
  position: relative;
  width: clamp(110px, calc(var(--u) * 8), 170px);
  aspect-ratio: 1;
  margin-bottom: calc(var(--u) * 2.6);
  border-radius: 50%;
  background: var(--preto);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 8px rgba(6, 8, 9, .12), 0 0 50px -6px rgba(6, 8, 9, .5);
}
.badge__text { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.badge__text text { fill: var(--off); font-family: var(--font); font-size: 12.4px; font-weight: 600; letter-spacing: 2.6px; }
.badge img { width: 32%; }
@keyframes spin { to { transform: rotate(360deg); } }
.cta__sub { margin-top: calc(var(--u) * 1.6); font-size: var(--t-h3); font-weight: 500; color: rgba(6, 8, 9, .8); }
.cta__close { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * 3.4); padding-top: calc(var(--u) * 2.4); border-top: 1px solid rgba(6, 8, 9, .18); }
.cta__ask { font-size: var(--t-lead); font-weight: 600; }
.cta__contact { font-size: var(--t-small); letter-spacing: .06em; color: rgba(6, 8, 9, .72); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(14px, calc(var(--u) * 1), 20px) clamp(26px, calc(var(--u) * 2), 40px);
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--laranja);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-lead);
  white-space: nowrap;
  box-shadow: 0 10px 40px -12px rgba(235, 57, 15, .8);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(4px); }
.btn--dark { background: var(--preto); color: var(--off); box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .7); }
.btn--dark:hover { box-shadow: 0 0 0 6px rgba(6, 8, 9, .12), 0 18px 44px -12px rgba(0, 0, 0, .7); }

/* =========================================================
   Telas menores: o slide vira uma página que rola
   ========================================================= */
@media (max-width: 1080px) and (orientation: portrait), (max-width: 760px) {
  :root {
    --u: 2.6vw;
    --gutter: 20px;
    --pad-t: 84px;
    --pad-b: 104px;
    --max: 100%;
    --t-hero: clamp(64px, 20vw, 140px);
  }
  .slide {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .slide--cover, .slide--cta { display: flex; }
  .slide--panel { display: block; }
  .panel { height: auto; min-height: 100%; display: block; }
  .slide__inner { margin: 0 auto; }
  .split, .split--problem, .split--solution, .split--showcase, .split--reverse, .split--bento,
  .split--structure, .split--pillars, .step { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .shot { order: 2; }
  .head { margin-bottom: 32px; }
  .track { grid-template-columns: 1fr; gap: 0; }
  .track::before { display: none; }
  .track li { display: grid; grid-template-columns: 22px 1fr; column-gap: 16px; padding: 18px 0; border-top: 1px solid var(--linha); }
  .track__node { grid-row: 1 / span 3; margin: 4px 0 0; width: 16px; }
  .step__bg { font-size: 70vw; bottom: auto; top: 40px; }
  .orbit { width: min(100%, 420px); }
  .shot__tag { left: 12px !important; right: auto !important; bottom: auto; top: -18px; font-size: 18px; }
  .shot { margin-top: 12px; }
  .chips li { white-space: normal; }
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(104px, auto);
    grid-template-areas: "a a" "b c" "d c" "e f" "g h" "i j";
  }
  .sitemap__branches { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .sitemap__branches::before { display: none; }
  .panel .offer { padding-top: 40px; }
  .chrome--top {
    top: 0;
    padding-top: 14px;
    padding-bottom: 12px;
    background: linear-gradient(180deg, rgba(6, 8, 9, .96) 60%, rgba(6, 8, 9, 0));
  }
  [data-tone="light"] .chrome--top { top: var(--frame); left: var(--frame); right: var(--frame); border-radius: 24px 24px 0 0; background: linear-gradient(180deg, rgba(247, 247, 247, .97) 60%, rgba(247, 247, 247, 0)); }
  [data-tone="orange"] .chrome--top { background: linear-gradient(180deg, rgba(235, 57, 15, .97) 60%, rgba(235, 57, 15, 0)); }
  .chrome__section { display: none; }
  .chrome--bottom { justify-content: flex-end; }
  .controls__sep { display: none; }
  #print { display: none; }
  .horizon { bottom: -60px; height: 140px; }
}

@media (max-width: 420px) {
  .chrome__product { display: none; }
  .bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j"; }
}

/* Logo que só aparece no PDF (na tela ele fica na moldura fixa) */
.print-logo { display: none; }

/* =========================================================
   Movimento reduzido: tudo aparece parado
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .orbit__path { stroke-dashoffset: 0; }
  .anim .ring svg { clip-path: none; }
}

/* =========================================================
   Impressão / PDF: um slide por página, 16:9 (1920 × 1080)
   ========================================================= */
@page { size: 1920px 1080px; margin: 0; }
@media print {
  :root { --u: 19.2px; }
  html, body { height: auto; overflow: visible; background: var(--preto); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chrome, .progress { display: none !important; }
  .deck { position: static; }
  .slide {
    position: relative;
    inset: auto;
    width: 1920px;
    height: 1080px;
    opacity: 1 !important;
    visibility: visible !important;
    break-after: page;
    page-break-after: always;
    display: flex !important;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .slide [data-in], .horizon { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .horizon { transform: translateX(-50%) !important; }
  .track::before { transform: none !important; }
  .orbit__path { stroke-dashoffset: 0 !important; animation: none !important; }
  .ring svg { clip-path: none !important; animation: none !important; }
  .badge__text { animation: none !important; }
  .print-logo { display: block; position: absolute; z-index: 3; top: 56px; left: 80px; width: 128px; }
  .print-logo--dark { filter: brightness(0); }
  .spark { animation: none !important; }
}