/* Dark 3D IA — estilos v2. Mobile first.
   Dois universos com uma identidade: claro (inspirado no Claude Code) → escuro (inspirado no Codex).
   A troca acontece na seção #virada. Tokens no :root; cada zona redefine as variáveis semânticas. */
:root {
  /* paleta da marca (pacote visual) */
  --ivory: #f0eee6;
  --ivory-2: #e7e4d9;
  --ivory-3: #dcd8cb;
  --ink: #1c1b1a;
  --graphite: #111214;
  --graphite-2: #18191c;
  --graphite-3: #222327;
  --terra: #c46a4c;        /* terracota */
  --terra-soft: #d3967c;
  --coral: #cb6758;
  --sage: #89a893;
  --cool: #a9bcd6;         /* halo frio */

  --f-serif: "Source Serif 4", Georgia, serif;
  --f-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --r: 16px;
}

/* semântica por zona */
.zone-light, .hero, .ambiente, .dor, .caos {
  --bg: var(--ivory); --panel: #f7f6f1; --panel-2: var(--ivory-2); --line: var(--ivory-3);
  --text: var(--ink); --muted: #6c685f; --accent: var(--terra);
  --btn-bg: var(--ink); --btn-fg: var(--ivory);
  --f-head: var(--f-serif);
  color-scheme: light;
}
.zone-dark, body {
  --bg: var(--graphite); --panel: var(--graphite-2); --panel-2: var(--graphite-3); --line: #2b2d31;
  --text: #ecebe7; --muted: #9b9da3; --accent: var(--terra-soft);
  --btn-bg: var(--ivory); --btn-fg: var(--ink);
  --f-head: var(--f-sans);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: linear-gradient(var(--ivory) 0 50%, var(--graphite) 50%); color: var(--text);
  font: 400 17px/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
section, .foot { background: var(--bg); color: var(--text); }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: var(--ivory); padding: 8px 12px; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.wrap--narrow { width: min(780px, 100% - 32px); }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* ---------- Tipografia ---------- */
.eyebrow { font: 500 12.5px/1.3 var(--f-mono); letter-spacing: .02em; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.eyebrow::before { content: "✻"; color: var(--accent); font-size: 14px; }
.zone-dark .eyebrow::before, .virada .eyebrow::before { content: "›_"; letter-spacing: -.05em; }
.eyebrow .dot { display: none; }
.h1, .h2 { font-family: var(--f-head); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
.h1 { font-size: clamp(38px, 6.6vw, 64px); letter-spacing: -.025em; }
.h2 { font-size: clamp(30px, 5vw, 46px); }
.h2--xl { font-size: clamp(34px, 6vw, 58px); }
.zone-dark .h2 { letter-spacing: -.035em; font-weight: 600; }
.h1 em, .h2 em { font-style: italic; color: var(--accent); }
/* Hero: headline curta. Linha 1 + logo que troca (Claude Code ⇄ Codex) + promessa. */
.hero-h1 { display: grid; gap: .08em; font-size: clamp(40px, 6.2vw, 62px); line-height: 1.02; }
.hero-h1__l1 { font-size: .62em; font-weight: 500; color: #4a4741; letter-spacing: -.015em; }
.hero-h1__l3 { color: var(--terra); }
.swap { display: inline-grid; justify-self: start; padding: .08em .28em .1em .16em; margin-left: -.06em; border-radius: .22em; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(60, 40, 20, .35); }
.swap__item { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .22em; opacity: 0; transform: translateY(.18em); filter: blur(6px); transition: opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease); }
.swap__item.is-on { opacity: 1; transform: none; filter: none; }
.swap__logo { width: .82em; height: .82em; flex: none; fill: currentColor; }
.swap__logo--claude { color: #d97757; }
.swap__logo--codex { color: var(--ink); }
.swap__name { font-family: var(--f-sans); font-weight: 700; letter-spacing: -.04em; font-size: .86em; white-space: nowrap; }
.swap__name.is-decoding { color: var(--terra); }
/* efeitos de texto (main.js): cursor durante a digitação; título decodificando ganha a cor de acento */
.is-typing::after { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -.18em; background: var(--accent); animation: blink 1s steps(1) infinite; }
.h2.is-decoding { color: var(--accent); }
.hero-sub { margin-top: 22px; font-size: clamp(17px, 2.1vw, 20px); color: var(--muted); }
.hero-sub b { color: var(--text); font-weight: 600; }

/* O que sai da rotina: pisca, é riscado e apaga, um de cada vez */
.kills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.kills li { font: 500 14px var(--f-mono); padding: 7px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--line); }
/* atrasos fixos por posição (sem var/calc dentro de animation: o Safari do iPhone tratava diferente) */
/* Estado final (cinza + risco) é o estilo normal. O piscar NÃO segura o último quadro (sem fill):
   no celular ele ficava preso no quadro apagado. A cor escura só vale ANTES do fade (backwards). */
.strike { position: relative; display: inline-block; text-decoration: none; white-space: nowrap; color: #a8a39a;
  animation: strike-blink .8s steps(1) .6s 1 none, strike-fade .4s ease 1.7s 1 backwards; }
.strike::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 2px; border-radius: 99px; background: var(--coral); transform: scaleX(1) rotate(-2deg); transform-origin: left center;
  animation: strike-draw .45s cubic-bezier(.6, 0, .2, 1) 1.3s 1 backwards; }
.kills li:nth-child(2) .strike { animation-delay: .95s, 2.05s; }
.kills li:nth-child(2) .strike::after { animation-delay: 1.65s; }
.kills li:nth-child(3) .strike { animation-delay: 1.3s, 2.4s; }
.kills li:nth-child(3) .strike::after { animation-delay: 2s; }
@keyframes strike-blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: .15; } }
@keyframes strike-draw { from { transform: scaleX(0) rotate(-2deg); } to { transform: scaleX(1) rotate(-2deg); } }
@keyframes strike-fade { from { color: var(--text); } to { color: #a8a39a; } }
.zone-dark .h2 em, .virada .h2 em {
  font-style: normal; color: transparent;
  background: linear-gradient(100deg, #f3f1ea 10%, var(--cool) 90%); -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
h3 { font: 600 18px/1.3 var(--f-sans); letter-spacing: -.01em; }
.lead { color: var(--muted); font-size: clamp(17px, 2vw, 19px); margin-top: 20px; max-width: 60ch; text-wrap: pretty; }
.lead strong, .lead b { color: var(--text); font-weight: 600; }
.fine { color: var(--muted); font-size: 13px; margin-top: 14px; opacity: .85; }
.fine b { color: var(--text); font-weight: 600; }

/* ---------- Botões ---------- */
.btn {
  --h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 22px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg); font: 600 16px/1 var(--f-sans); text-decoration: none; letter-spacing: -.005em;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 24px -12px rgba(0,0,0,.5);
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), background .2s;
}
.btn::after { content: "→"; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 14px 32px -12px rgba(0,0,0,.55); }
.btn:hover::after { transform: translateX(3px); }
.btn--xl { --h: 58px; font-size: 17px; padding: 0 28px; }
.btn--sm { --h: 38px; font-size: 14px; padding: 0 14px; border-radius: 10px; }
.btn--sm::after, .btn--ghost::after { content: none; }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--text); }

/* ---------- Bilhete dourado v2: CTAs de decisão ----------
   Ingresso dourado com recortes laterais. Um arco de luz gira pela borda
   (transparente → laranja → brilho → laranja → transparente); no hover o arco abre, desloca e esquenta.
   Pontilhado cintilante gira por dentro; brilho holográfico atravessa; brilho interno "respira" no hover. */
@property --tk-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --tk-off { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --tk-pct { syntax: "<percentage>"; inherits: false; initial-value: 6%; }
@property --tk-shine { syntax: "<color>"; inherits: false; initial-value: #fff; }
/* Paleta do bilhete (troque aqui para mudar a cor de todos) */
.btn--ticket {
  --tk-face: linear-gradient(100deg, #FFEAA6 0%, #FAD05C 38%, #F0B53C 72%, #E59F2D 100%);
  --tk-accent: #ff6a1a; --tk-accent-soft: #ffb36b;
  --tk-ink: #2b1700; --tk-edge: rgba(122, 72, 8, .45); --tk-dots: rgba(255, 255, 255, .95);
}
.btn--ticket {
  position: relative;
  min-height: 0; padding: 0; background: none; border-radius: 14px; box-shadow: none;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s var(--ease), filter .35s var(--ease);
  filter: drop-shadow(0 14px 18px rgba(229, 159, 45, .4)) drop-shadow(0 6px 16px rgba(255, 106, 26, .22));
}
.btn--ticket::before, .btn--ticket::after { content: none; }
.btn--ticket:is(:hover, :focus-visible) { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); box-shadow: none;
  filter: drop-shadow(0 20px 26px rgba(229, 159, 45, .55)) drop-shadow(0 8px 22px rgba(255, 106, 26, .4)); }
.btn--ticket:active { transform: perspective(700px) scale(.97); transition-duration: .08s; }
.tk {
  position: relative; isolation: isolate; display: flex; align-items: stretch; flex: 1; overflow: hidden; border-radius: 14px;
  border: 2px solid transparent;
  background:
    var(--tk-face) padding-box,
    conic-gradient(from calc(var(--tk-a) - var(--tk-off)), transparent, var(--tk-accent) var(--tk-pct),
      var(--tk-shine) calc(var(--tk-pct) * 2), var(--tk-accent) calc(var(--tk-pct) * 3), transparent calc(var(--tk-pct) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--tk-edge);
  animation: tk-spin 3s linear infinite;
  transition: --tk-off .8s cubic-bezier(.25, 1, .5, 1), --tk-pct .8s cubic-bezier(.25, 1, .5, 1), --tk-shine .8s cubic-bezier(.25, 1, .5, 1);
  /* recortes de ingresso nas laterais: furos reais (máscara), não discos pintados */
  -webkit-mask: radial-gradient(circle 9px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.btn--ticket:is(:hover, :focus-visible) .tk { --tk-pct: 20%; --tk-off: 95deg; --tk-shine: var(--tk-accent-soft); }
.tk::before { /* pontilhado cintilante, revelado por uma "janela" que gira junto com o arco */
  content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none; border-radius: 12px;
  background: radial-gradient(circle at 2px 2px, var(--tk-dots) .8px, transparent 0) 0 0 / 4px 4px;
  -webkit-mask: conic-gradient(from calc(var(--tk-a) + 45deg), #000, transparent 24% 76%, #000);
          mask: conic-gradient(from calc(var(--tk-a) + 45deg), #000, transparent 24% 76%, #000);
  opacity: .75; animation: tk-spin 3s linear infinite;
}
.tk::after { /* brilho holográfico atravessando */
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .8) 46%, rgba(255, 106, 26, .2) 52%, transparent 64%);
  transform: translateX(-120%); animation: tk-shine 3.8s var(--ease) 1.2s infinite;
}
.btn--ticket:is(:hover, :focus-visible) .tk::after { animation-duration: 1.4s; }
.tk__main { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 30px; font: 700 17px/1.1 var(--f-sans); color: var(--tk-ink); letter-spacing: -.01em; white-space: nowrap; }
.tk__main::before { /* brilho interno que "respira" no hover */
  content: ""; position: absolute; inset: -10px; z-index: -1; pointer-events: none;
  box-shadow: inset 0 -1ex 2rem 4px var(--tk-accent); opacity: 0; transition: opacity .8s cubic-bezier(.25, 1, .5, 1);
  animation: tk-breathe 4.5s linear infinite;
}
.btn--ticket:is(:hover, :focus-visible) .tk__main::before { opacity: .55; }
.tk__arrow { display: inline-block; transition: transform .25s var(--ease); }
.btn--ticket:is(:hover, :focus-visible) .tk__arrow { transform: translateX(4px); }
@media (max-width: 420px) {
  .tk__main { padding: 0 20px; font-size: 16px; gap: 8px; }
  .price { padding: 22px 16px; }
}
@media (max-width: 360px) { .tk__main { font-size: 15px; padding: 0 16px; } }
@keyframes tk-spin { to { --tk-a: 360deg; } }
@keyframes tk-shine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes tk-breathe { 50% { scale: 1.15; } }

/* Demais botões: mesma moldura metalizada girando, mais discreta */
.btn--foil:not(.btn--ghost) { border: 1.5px solid transparent;
  background: linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box, conic-gradient(from var(--tk-a), #f0b53c33, #ff6a1a 8%, #fff 14%, #ff6a1a 20%, #f0b53c33 28%) border-box;
  animation: tk-spin 5s linear infinite; }
.btn--ghost.btn--foil:hover { box-shadow: none; border: 1.5px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, conic-gradient(from var(--tk-a), #f0b53c33, #ff6a1a 8%, #fff 14%, #ff6a1a 20%, #f0b53c33 28%) border-box;
  animation: tk-spin 3s linear infinite; color: var(--text); }

.micro { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: var(--muted); font-size: 14px; }
.micro li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; background: url(../img/check-salvia.svg) center / contain no-repeat; }
.micro--center { justify-content: center; }

/* ---------- Topbar (acompanha a zona) ---------- */
.topbar { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background .5s, border-color .5s, color .5s; }
html[data-zone="light"] .topbar { background: rgba(240, 238, 230, .9); border-bottom: 1px solid rgba(220, 216, 203, .8); color: var(--ink); --btn-bg: var(--ink); --btn-fg: var(--ivory); }
html[data-zone="dark"] .topbar { background: rgba(17, 18, 20, .8); border-bottom: 1px solid #25272b; color: #ecebe7; --btn-bg: var(--ivory); --btn-fg: var(--ink); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.logo { font: 700 15px/1 var(--f-sans); letter-spacing: -.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.logo b { color: var(--terra); font-weight: 700; }
html[data-zone="dark"] .logo b, .foot .logo b { color: var(--terra-soft); }
.logo__mark { width: 26px; height: 26px; }
.env { display: none; position: relative; align-items: center; gap: 8px; font: 500 12px var(--f-mono); color: inherit; opacity: .7; padding: 6px 10px; border-radius: 99px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 20%, transparent); }
.env i { width: 7px; height: 7px; border-radius: 50%; background: var(--terra); transition: background .5s; }
.env span { transition: opacity .5s, transform .5s var(--ease); }
.env__b { position: absolute; left: 25px; opacity: 0; transform: translateY(6px); }
html[data-zone="dark"] .env i { background: var(--cool); }
html[data-zone="dark"] .env__a { opacity: 0; transform: translateY(-6px); }
html[data-zone="dark"] .env__b { opacity: 1; transform: none; }
.env::before { content: "ambiente:"; opacity: .6; }
.env__a { margin-left: 0; }

/* ---------- Seções ---------- */
.sec { padding: clamp(72px, 11vw, 128px) 0; position: relative; }
.sec--tight { padding: clamp(48px, 7vw, 80px) 0; }
.sec__head { margin-bottom: clamp(36px, 6vw, 56px); max-width: 800px; }
.center-head { margin-inline: auto; text-align: center; }
.center-head .lead { margin-inline: auto; }

/* ---------- Hero ---------- */
.hero { padding: clamp(36px, 7vw, 80px) 0 clamp(56px, 8vw, 96px); overflow-x: clip; position: relative; z-index: 2; } /* vaza na vertical: o 3D pode invadir a vitrine */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 85% 30%, rgba(196, 106, 76, .12), transparent 70%); }
.hero__grid { display: grid; gap: 40px; align-items: center; position: relative; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__cta .btn--xl { flex: 1 1 100%; }
@media (min-width: 560px) { .hero__cta .btn--xl { flex: 0 0 auto; } }

.hero__visual { position: relative; padding-bottom: 46%; }
.hero__visual figcaption { position: absolute; left: 0; bottom: -28px; font-size: 12px; color: var(--muted); max-width: 52%; line-height: 1.4; }
.hero__art { position: absolute; right: -4%; bottom: -2%; width: 70%; z-index: 2; filter: drop-shadow(0 30px 40px rgba(60, 40, 20, .22)); }

/* Workspace (HTML, inspirado em interfaces de agente) */
.ws { display: grid; grid-template-columns: 1fr; border-radius: 14px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 0 #fff inset, 0 30px 60px -30px rgba(60, 45, 25, .35); font-size: 14px; }
.ws__side { display: none; }
.ws__main { padding: 18px 18px 22px; }
.ws__prompt { font: 500 14px/1.45 var(--f-mono); padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); margin-bottom: 16px; }
.ws__caret { color: var(--terra); font-weight: 700; }
.caret { display: inline-block; width: 7px; height: 1.05em; background: var(--terra); vertical-align: -3px; margin-left: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ws__steps { display: grid; gap: 9px; font-family: var(--f-mono); font-size: 13.5px; }
.ws__steps li { display: flex; align-items: center; gap: 10px; color: #a8a49a; transition: color .3s; }
.ws__steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.ws__steps li.run { color: var(--ink); }
.ws__steps li.run::before { border-color: var(--terra); border-right-color: transparent; animation: spin .9s linear infinite; }
.ws__steps li.ok { color: #57544d; }
.ws__steps li.ok::before { border: 0; background: url(../img/check-salvia.svg) center / 16px no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }
.ws__bar { height: 3px; background: var(--ivory-3); border-radius: 3px; margin-top: 18px; overflow: hidden; }
.ws__bar span { display: block; height: 100%; width: 0; background: var(--terra); transition: width .5s var(--ease); }
.ws__done { margin-top: 10px; font: 500 12.5px var(--f-mono); color: var(--terra); opacity: 0; transition: opacity .4s; }
.ws__done.show { opacity: 1; }

/* ---------- Vitrine: vídeos reais "sendo entregues" ---------- */
.hero { padding-bottom: clamp(48px, 7vw, 88px); }
/* Celular/tablet: headline → vídeos → etapas + 3D (o grid "some" e os filhos viram itens do hero) */
@media (max-width: 959px) {
  .hero { display: flex; flex-direction: column; }
  .hero__grid { display: contents; }
  .hero__copy, .hero__visual { width: min(1180px, 100% - 32px); margin-inline: auto; }
  .hero__copy { order: 1; }
  .vitrine { order: 2; }
  .hero__visual { order: 3; margin-top: 32px; margin-bottom: 40px; }
}
.vitrine { padding-top: clamp(28px, 4vw, 56px); } /* sem overflow: hidden — ele cortava a sombra dos cards */
.vitrine__head { display: grid; gap: 6px; }
.vitrine__cmd { font: 500 13px var(--f-mono); color: var(--text); }
.vitrine__cmd span { color: var(--terra); font-weight: 700; }
.vitrine__cmd i { font-style: normal; color: var(--muted); }
.vitrine__proof { font-size: 15px; color: var(--muted); }
.vitrine__proof b { color: var(--text); font-weight: 600; }
/* esteira: a fila (originais + cópias) anda -50% e recomeça no mesmo ponto, sem salto */
/* Janela da esteira: corta só na horizontal. Sem máscara (máscara recorta também em cima/embaixo e cortava a sombra).
   Navegadores sem overflow: clip (Safari < 16) caem no hidden, e os 64px de espaço embaixo seguram a sombra. */
.reels-viewport { position: relative; margin: 0 calc(50% - 50vw) -40px; overflow: hidden; }
@supports (overflow: clip) { .reels-viewport { overflow: visible; overflow-x: clip; } }
.reels-viewport::before, .reels-viewport::after { /* degradê nas bordas pintado por cima, sem recortar nada */
  content: ""; position: absolute; top: 0; bottom: 0; width: 7%; z-index: 2; pointer-events: none; }
.reels-viewport::before { left: 0; background: linear-gradient(90deg, var(--ivory), rgba(240, 238, 230, 0)); }
.reels-viewport::after { right: 0; background: linear-gradient(270deg, var(--ivory), rgba(240, 238, 230, 0)); }
.reels { --gap: 14px; display: flex; gap: var(--gap); width: max-content; padding: 18px var(--gap) 64px 0; animation: reels-marquee 60s linear infinite; }
@media (hover: hover) and (pointer: fine) { .reels-viewport:hover .reels { animation-play-state: paused; } } /* no toque não pausa: o :hover "gruda" no celular e travava a esteira */
@keyframes reels-marquee { to { transform: translateX(-50%); } }
.reel { --y: 0px; flex: 0 0 auto; width: 150px; position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #1c1b1a; box-shadow: 0 24px 40px -22px rgba(40, 25, 10, .55), 0 0 0 1px rgba(0, 0, 0, .06); transform: translateY(var(--y)); }
.reel:nth-child(even) { --y: 18px; }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__ok { position: absolute; top: 10px; left: 10px; font: 500 12px var(--f-mono); padding: 4px 8px; border-radius: 99px; background: rgba(17, 18, 20, .72); color: #d6e5da; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reel__meta { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 28px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; }
.reel__meta b { font-size: 14px; font-weight: 600; line-height: 1.2; }
.reel__meta span { font: 500 12px var(--f-mono); color: #f3c7b5; }
.reel--new .reel__meta span { color: #bfe0c9; }
/* chegada: desfocado → nítido, um de cada vez; depois flutua de leve */
.js .reel { opacity: 0; filter: blur(14px); transform: translateY(calc(var(--y) + 28px)) scale(.94); transition: opacity .7s var(--ease), filter 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i) * .2s); }
.js .reels.in .reel { opacity: 1; filter: none; transform: translateY(var(--y)); animation: reel-float 7s ease-in-out calc(1.6s + var(--i) * .45s) infinite; }
@keyframes reel-float { 50% { transform: translateY(calc(var(--y) - 8px)); } }
@media (min-width: 720px) { .reel { width: 190px; } .reels { --gap: 18px; animation-duration: 75s; } }

/* ---------- Ambiente ---------- */
.ambiente { border-top: 1px solid var(--line); }
.ambiente__grid { display: grid; gap: 28px; align-items: center; }
.ambiente__cards { display: flex; align-items: center; gap: 16px; }
.ambiente__or { font: 500 13px var(--f-mono); color: var(--muted); }
.env-card { display: grid; justify-items: center; gap: 8px; }
.env-card img { width: 104px; border-radius: 18px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.45); transition: transform .35s var(--ease); }
.env-card:hover img { transform: translateY(-4px) rotate(-2deg); }
.env-card figcaption { font: 500 13px var(--f-mono); color: var(--muted); }
.ambiente .fine { grid-column: 1 / -1; margin-top: 0; }

/* ---------- Dor (sessão de terminal) ---------- */
.session { margin-top: 36px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.session__head { display: flex; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); font: 500 12px var(--f-mono); color: var(--muted); background: var(--panel-2); }
.log { padding: 20px 18px 22px; display: grid; gap: 12px; font-size: clamp(16px, 2.2vw, 19px); }
.log li { display: flex; gap: 14px; align-items: baseline; color: #3e3b36; }
.log time { flex: none; font: 500 12.5px var(--f-mono); color: var(--coral); }
.log__end { font-family: var(--f-serif); font-style: italic; color: var(--ink) !important; font-size: 1.1em; }
.punch { margin-top: 28px; display: grid; gap: 10px; }
.punch p:first-child { font: 600 clamp(24px, 3.8vw, 32px)/1.2 var(--f-serif); }
.punch b { color: var(--terra); font-weight: 600; }
.punch p:last-child { color: var(--muted); }

/* ---------- Caos (cadeia de passagens manuais) ---------- */
.caos { padding-bottom: clamp(96px, 14vw, 160px); }
.chain { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 6px; padding: 28px 12px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.chain__tool { display: grid; justify-items: center; gap: 6px; }
.chain__tool img { width: 72px; border-radius: 14px; box-shadow: 0 12px 22px -14px rgba(0,0,0,.5); }
.chain__tool:nth-child(4n+1) img { transform: rotate(-3deg); }
.chain__tool:nth-child(4n+3) img { transform: rotate(2.5deg); }
.chain__tool span, .chain__end span { font: 500 12px var(--f-mono); color: var(--muted); }
.chain__hop { display: grid; justify-items: center; gap: 3px; min-width: 64px; position: relative; padding-top: 2px; }
.chain__hop::before { content: ""; position: absolute; top: 10px; left: 4px; right: 4px; border-top: 1.5px dashed #c9b8a8; z-index: 0; }
.chain__hop img { position: relative; z-index: 1; background: var(--panel); border-radius: 50%; padding: 2px; box-sizing: content-box; }
.chain__hop span { font: 500 12px var(--f-mono); color: var(--coral); }
.chain__end { display: grid; justify-items: center; padding: 14px 16px; border-radius: 12px; border: 1.5px dashed var(--ivory-3); }
.chain__end b { font: 600 18px var(--f-mono); }

.stats { display: grid; gap: 12px; margin-top: 28px; }
.stats li { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.stats b { font: 600 42px/1 var(--f-serif); color: var(--terra); min-width: 2ch; }
.stats span { color: var(--muted); }

/* ---------- Virada (marfim → grafite) ---------- */
.virada {
  --text: var(--ink); --muted: #6c685f; --accent: var(--terra); --f-head: var(--f-serif);
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory) 16%, #d9d4c6 26%, #3a3936 40%, var(--graphite) 52%, var(--graphite) 100%);
  padding-top: clamp(40px, 6vw, 72px);
}
.virada .h2 em { background: none; color: var(--terra); font-style: italic; }
.virada__grid { display: grid; gap: 32px; align-items: center; color: #ecebe7; --muted: #9b9da3; }
.virada__art img { width: 100%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .45)); }
.virada__art .fine { text-align: center; }
.steps { display: grid; gap: 4px; position: relative; }
.steps::before { content: ""; position: absolute; left: 19px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(var(--terra-soft), var(--cool)); opacity: .5; }
.step { display: flex; gap: 18px; padding: 14px 16px 14px 0; position: relative; }
.step__n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 500 12px var(--f-mono); background: var(--graphite-2); border: 1px solid #34363b; color: var(--terra-soft); position: relative; z-index: 1; }
.step p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.step--hl .step__n { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

/* ---------- Fluxo (escuro) ---------- */
.fluxo { background: radial-gradient(60% 50% at 30% 20%, rgba(169, 188, 214, .08), transparent 70%), var(--bg); }
.fluxo__grid { display: grid; gap: 32px; align-items: center; }
.fluxo__art img { width: 100%; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6)); }
.tasks { display: grid; gap: 8px; }
.tasks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 15px; }
.tasks b { font-weight: 600; display: flex; align-items: center; gap: 12px; }
.tasks b::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #4a4c52; transition: border-color .3s, background .3s; }
.tasks span { font: 400 12.5px var(--f-mono); color: var(--muted); text-align: right; }
.tasks.in li b::before { animation: tick .01s forwards; animation-delay: calc(var(--i, 0) * .35s + .3s); }
.tasks li:nth-child(1) { --i: 0 } .tasks li:nth-child(2) { --i: 1 } .tasks li:nth-child(3) { --i: 2 } .tasks li:nth-child(4) { --i: 3 }
.tasks li:nth-child(5) { --i: 4 } .tasks li:nth-child(6) { --i: 5 } .tasks li:nth-child(7) { --i: 6 }
@keyframes tick { to { border-color: transparent; background: url(../img/check-salvia.svg) center / 16px no-repeat; } }
.tasks__end { background: var(--ivory) !important; color: var(--ink); border-color: var(--ivory) !important; }
.tasks__end span { color: #5b5850; }

.video { margin-top: 40px; max-width: 960px; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, rgba(169, 188, 214, .12), transparent 60%), var(--panel); }
.video__btn { all: unset; cursor: pointer; width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 14px; }
.video__play { width: 72px; height: 72px; border-radius: 50%; background: var(--ivory); position: relative; transition: transform .3s var(--ease); }
.video__play::after { content: ""; position: absolute; left: 29px; top: 23px; border-left: 20px solid var(--ink); border-block: 13px solid transparent; }
.video__btn:hover .video__play { transform: scale(1.06); }
.video__txt { font: 600 15px var(--f-sans); }
.video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Comparativo ---------- */
.vs { font: 400 .45em var(--f-mono); vertical-align: middle; color: var(--muted); padding: 0 .3em; }
.effort { display: grid; gap: 18px; margin-bottom: 36px; }
.effort__row span { font-size: 14px; color: var(--muted); display: block; margin-bottom: 8px; }
.effort__bar { height: 10px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.effort__bar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width 1.6s var(--ease) .2s; }
.effort__bar--old i { background: repeating-linear-gradient(45deg, var(--coral), var(--coral) 6px, #a9544a 6px, #a9544a 12px); }
.effort__bar--new i { background: linear-gradient(90deg, var(--ivory), var(--cool)); }
.effort.in .effort__bar--old i { width: 100%; }
.effort.in .effort__bar--new i { width: 18%; }

.table { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 40px; background: var(--panel); }
.table__row { display: grid; grid-template-columns: 1fr 1fr; font-size: 15px; }
.table__row > span { padding: 13px 16px; border-top: 1px solid var(--line); }
.table__row > [role="rowheader"] { grid-column: 1 / -1; font: 500 12px var(--f-mono); color: var(--muted); padding-bottom: 0; }
.table__row > [role="rowheader"] + span, .table__row > [role="rowheader"] + span + span { border-top: 0; }
.table__head { display: none; }
.no { color: #a3a09b; }
.no::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; background: url(../img/x-coral.svg) center / contain no-repeat; }
.ok { background: rgba(240, 238, 230, .04); color: var(--text); font-weight: 600; }
.ok::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -1px; background: url(../img/check-salvia.svg) center / contain no-repeat; }

/* ---------- Benefícios ---------- */
.cards { display: grid; gap: 12px; }
.card { padding: 24px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); position: relative; overflow: hidden; transition: border-color .3s, transform .3s var(--ease); }
.card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(rgba(169, 188, 214, .18), transparent 70%); opacity: 0; transition: opacity .4s; }
.card:hover { border-color: #3d4046; transform: translateY(-3px); }
.card:hover::after { opacity: 1; }
.card__k { display: block; font: 500 12px var(--f-mono); color: var(--terra-soft); margin-bottom: 14px; }
.card p { color: var(--muted); margin-top: 8px; font-size: 15px; }

/* ---------- Sem código ---------- */
.nocode__grid { display: grid; gap: 40px; align-items: center; }
.checks { display: grid; gap: 12px; margin-top: 28px; }
.checks li { padding-left: 30px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: url(../img/check-salvia.svg) center / 18px no-repeat; }
.chat { display: grid; gap: 12px; padding: 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); font-size: 15px; box-shadow: 0 30px 60px -30px #000; }
.chat p { padding: 12px 15px; border-radius: 14px; max-width: 90%; }
.chat__me { justify-self: end; background: var(--graphite-3); border: 1px solid #34363b; font: 500 14px var(--f-mono); }
.chat__ai { color: var(--muted); display: flex; gap: 10px; align-items: center; }
.chat__ai--ok { color: var(--text); }
.chat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cool); animation: pulse 1.4s ease-in-out infinite; flex: none; }
@keyframes pulse { 50% { opacity: .3; } }
.chat__hint { justify-self: end; font: 500 12px var(--f-mono); color: var(--terra-soft); padding: 0 !important; }

/* ---------- Planos ---------- */
.tiers { display: grid; gap: 12px; }
.tier { padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.tier__lvl { font: 500 12px var(--f-mono); color: var(--cool); }
.tier h3 { margin-top: 8px; }
.tier p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.tier__meter { height: 4px; border-radius: 4px; background: var(--panel-2); margin-top: 18px; overflow: hidden; }
.tier__meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--terra-soft), var(--cool)); transition: width 1.2s var(--ease) .3s; }
.tier.in .tier__meter i { width: var(--w); }

/* ---------- Oferta ---------- */
.oferta { background: radial-gradient(50% 40% at 50% 30%, rgba(211, 150, 124, .1), transparent 70%), var(--bg); }
.offer { display: grid; gap: 24px; align-items: center; }
.offer__art img { width: 100%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)); }
.offer__art .fine { text-align: center; }
.offer__body { display: grid; gap: 24px; }
.deliver { display: grid; gap: 14px; }
.deliver li { display: grid; gap: 2px; padding-left: 30px; position: relative; }
.deliver li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: url(../img/check-salvia.svg) center / 17px no-repeat; }
.deliver b { font-weight: 600; }
.deliver span { color: var(--muted); font-size: 15px; }
.price { padding: clamp(24px, 4vw, 34px); border-radius: 20px; background: linear-gradient(170deg, #1d1e21, #141517); border: 1px solid #34363b; text-align: center; box-shadow: 0 40px 80px -40px #000, 0 0 0 1px rgba(240, 238, 230, .03) inset; }
.price__from { color: var(--muted); font-size: 14.5px; }
.price__value { font: 700 clamp(76px, 15vw, 104px)/1 var(--f-sans); letter-spacing: -.05em; margin: 6px 0 2px; }
.price__value small { font-size: .3em; vertical-align: top; margin-right: 6px; letter-spacing: 0; color: var(--muted); font-weight: 500; }
.price__pay { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.guarantee { display: flex; gap: 14px; align-items: center; text-align: left; margin-top: 22px; padding: 14px; border-radius: 14px; border: 1px dashed #3a3c41; }
.guarantee b { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; align-content: center; font: 700 20px/1 var(--f-sans); color: var(--ink); background: var(--ivory); }
.guarantee b small { font: 500 11px var(--f-mono); }
.guarantee p { font-size: 14px; color: var(--muted); }


/* ---------- FAQ ---------- */
.faq__list { display: grid; gap: 8px; }
.faq details { border-radius: 12px; background: var(--panel); border: 1px solid var(--line); transition: border-color .3s; }
.faq details[open] { border-color: #3d4046; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 18px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 400 20px var(--f-mono); color: var(--muted); transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 18px 18px; color: var(--muted); }

/* ---------- Final ---------- */
.final { overflow: hidden; background: radial-gradient(45% 50% at 25% 50%, rgba(211, 150, 124, .1), transparent 70%), var(--bg); }
.final__grid { display: grid; gap: 32px; align-items: center; }
.final__art { width: min(420px, 80%); margin-inline: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6)); }
.final .btn { margin-top: 28px; }

.foot { padding: 48px 0 120px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.foot .wrap { display: grid; gap: 12px; }
.foot .logo { color: var(--text); margin-bottom: 6px; }
.foot__legal { max-width: 90ch; opacity: .8; }

/* ---------- Sticky mobile ---------- */
.sticky {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px;
  border-radius: 14px; background: rgba(24, 25, 28, .92); color: #ecebe7; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #2f3135;
  --btn-bg: var(--ivory); --btn-fg: var(--ink);
  transform: translateY(150%); transition: transform .4s var(--ease); font-size: 14px;
}
.sticky.show { transform: none; }

/* ---------- Consentimento ---------- */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; padding: 16px; border-radius: 14px; background: #1b1c1f; color: #ecebe7; border: 1px solid #303236; display: grid; gap: 12px; font-size: 14px; max-width: 520px; --btn-bg: var(--ivory); --btn-fg: var(--ink); --text: #ecebe7; --line: #3a3c41; }
.consent div { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- Movimento ---------- */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.rise { animation: rise .8s var(--ease) var(--d, 0s) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.hero__art { animation: rise .9s var(--ease) .2s both, float 8s ease-in-out 1.2s infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(.4deg); } }
/* Parallax nativo (scroll-driven), sem JS; navegadores sem suporte mostram estático */
@supports (animation-timeline: view()) {
  /* --par = quanto o elemento "viaja" ao atravessar a tela. Valores diferentes = camadas em profundidade. */
  .par { animation: par linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes par { from { translate: 0 var(--par, 36px); } to { translate: 0 calc(var(--par, 36px) * -1); } }
  .hero__art { animation: rise .9s var(--ease) .2s both, float 8s ease-in-out 1.2s infinite, par linear both; animation-timeline: auto, auto, view(); animation-range: normal, normal, entry 0% exit 100%; --par: 70px; }
  .ws { animation: par linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; --par: 14px; }
}

/* ---------- Breakpoints ---------- */
@media (min-width: 720px) {
  .env { display: inline-flex; }
  .hero__art { width: min(62%, 440px); }
  .ws { grid-template-columns: 150px 1fr; }
  .ws__side { display: grid; align-content: start; gap: 4px; padding: 16px 10px; background: var(--panel-2); border-right: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .ws__side span { padding: 6px 10px; border-radius: 8px; }
  .ws__side .is-on { background: #fff; color: var(--ink); }
  .ws__brand { display: flex !important; align-items: center; gap: 8px; font: 600 13px var(--f-mono); color: var(--ink); margin-bottom: 10px; }
  .ws__brand svg { width: 18px; height: 18px; }
  .ambiente__grid { grid-template-columns: 1.4fr 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats li { flex-direction: column; align-items: flex-start; }
  .chain { gap: 14px 4px; padding: 36px 20px; }
  .chain__tool img { width: 84px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: repeat(3, 1fr); }
  .table__head { display: grid; }
  .table__head span { font: 500 12px var(--f-mono); color: var(--muted); }
  .table__head span:last-child { color: var(--text); }
  .table__row { grid-template-columns: 1.1fr 1.3fr 1.3fr; }
  .table__row > [role="rowheader"] { grid-column: auto; padding-bottom: 13px; display: flex; align-items: center; font-size: 12px; }
  .table__row > [role="rowheader"] + span, .table__row > [role="rowheader"] + span + span { border-top: 1px solid var(--line); }
  .sticky { display: none; }
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.2fr .9fr; gap: 48px; }
  .hero-h1__l3 { white-space: nowrap; }
  .hero__visual { padding-bottom: 24%; }
  .ws { width: 92%; }
  .hero__art { width: 52%; right: -9%; bottom: -22%; }
  .virada__grid, .fluxo__grid { grid-template-columns: 1.15fr .85fr; gap: 56px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .nocode__grid { grid-template-columns: 1.1fr .9fr; gap: 64px; }
  .offer { grid-template-columns: 1fr 1fr; gap: 48px; }
  .final__grid { grid-template-columns: .8fr 1.2fr; gap: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .reel { opacity: 1; filter: none; transform: translateY(var(--y)); }
  .reels-viewport { overflow-x: auto; }
  .reel[aria-hidden="true"] { display: none; }
  .strike { color: #a8a39a; }
  .strike::after { transform: scaleX(1) rotate(-2deg); }
  .tasks li b::before { border-color: transparent; background: url(../img/check-salvia.svg) center / 16px no-repeat; }
}