/* ═══════════════════════════════════════════════════════════════════════
   CREATO STUDIO — site imersivo · uma agência, dois mundos
   Paleta: #1A1A1A grafite · #F9FAFB gelo · #D4D4D4 cinza · #9E23B2 roxo
   Marketing = CLARO · IA & Tech = ESCURO · roxo conecta os dois
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@500,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap');

:root {
  --graphite:#1A1A1A; --ice:#F9FAFB; --gray:#D4D4D4; --purple:#9E23B2; --purple-deep:#7A1A8A; --purple-soft:#D98FE6;

  --bg: var(--graphite); --surface:#222225; --surface-2:#2A2A2E;
  --border: rgba(212,212,212,.12); --line: rgba(212,212,212,.20);
  --text: var(--ice); --muted: var(--gray); --faint: rgba(212,212,212,.46);
  --accent: var(--purple); --accent-soft: rgba(158,35,178,.16);
  --shadow: 0 30px 60px -34px rgba(0,0,0,.65); --aura:.24; --dot: rgba(212,212,212,.07);

  --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --maxw:1140px;
}
body.world-mkt {
  --bg: var(--ice); --surface:#FFFFFF; --surface-2:#F2F2F4;
  --border:#E7E7EB; --line:#DCDCE1; --text: var(--graphite);
  --muted: rgba(26,26,26,.60); --faint: rgba(26,26,26,.42);
  --accent-soft: rgba(158,35,178,.08); --shadow: 0 26px 60px -30px rgba(26,26,26,.26);
  --aura:.12; --dot: rgba(26,26,26,.08);
}
body.world-tech {
  --bg: var(--graphite); --surface:#222225; --surface-2:#2A2A2E;
  --border: rgba(212,212,212,.12); --line: rgba(212,212,212,.20); --text: var(--ice);
  --muted: var(--gray); --faint: rgba(212,212,212,.46);
  --accent-soft: rgba(158,35,178,.16); --shadow: 0 30px 60px -34px rgba(0,0,0,.65);
  --aura:.24; --dot: rgba(212,212,212,.07);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background: var(--graphite); color: var(--ice); font-family:'Space Grotesk',system-ui,sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.world-mkt { background: var(--ice); }
body[data-screen="entry"] { overflow:hidden; height:100dvh; background: var(--graphite); }

h1,h2,h3,h4 { font-family:'Satoshi',sans-serif; margin:0; line-height:1.1; letter-spacing:-.02em; }
a { color:inherit; text-decoration:none; }
em { font-style:normal; color: var(--accent); }
strong { color: var(--text); font-weight:600; }
.wrap { width:100%; max-width: var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }

/* ── Screens ────────────────────────────────────────────────────────────── */
.screen { display:none; }
.screen.is-active { display:block; }
.world { background: var(--bg); color: var(--text); }
.world.is-active { animation: worldIn .6s var(--ease-out) both; }
@keyframes worldIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }


/* ═══════════════════════════════════════════════════════════════════════
   ENTRADA — split diagonal (estado controlado via JS p/ fluidez)
   ═══════════════════════════════════════════════════════════════════════ */
.entry { position:fixed; inset:0; z-index:10; }
.split { position:relative; height:100dvh; width:100%; overflow:hidden; }

.panel { position:absolute; inset:0; display:flex; align-items:center; cursor:pointer; transition: clip-path .5s var(--ease), background .5s var(--ease), opacity .5s var(--ease); }
.panel--mkt  { background: var(--ice); color: var(--graphite); justify-content:flex-start; padding-left: clamp(1.6rem,9vw,9rem); z-index:1; }
.panel--tech {
  background: var(--graphite); color: var(--ice); justify-content:flex-end; padding-right: clamp(1.6rem,9vw,9rem); z-index:2;
  --seam-top:57%; --seam-bot:45%;
  clip-path: polygon(var(--seam-top) 0, 100% 0, 100% 100%, var(--seam-bot) 100%);
  filter: drop-shadow(-1px 0 0 rgba(158,35,178,.7)) drop-shadow(-9px 0 26px rgba(158,35,178,.4));
  will-change: clip-path;
}
.panel__glow { position:absolute; width:85%; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.18; pointer-events:none; transition: opacity .5s var(--ease), transform .7s var(--ease); }
.panel--mkt  .panel__glow { background: radial-gradient(circle, rgba(158,35,178,.45), transparent 64%); left:-16%; top:4%; }
.panel--tech .panel__glow { background: radial-gradient(circle, rgba(158,35,178,.85), transparent 64%); right:-16%; bottom:0; opacity:.3; }

.panel__inner { position:relative; z-index:1; display:flex; flex-direction:column; gap:.55rem; max-width:26ch; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.panel--mkt  .panel__inner { align-items:flex-start; text-align:left; }
.panel--tech .panel__inner { align-items:flex-end; text-align:right; }
.panel__eyebrow { font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color: var(--purple); font-weight:600; }
.panel__title { font-family:'Satoshi',sans-serif; font-weight:900; letter-spacing:-.03em; font-size: clamp(2.2rem,6vw,4.8rem); line-height:.96; color: var(--purple); transition: transform .5s var(--ease); }
.panel--mkt  .panel__tag { color: rgba(26,26,26,.6); }
.panel--tech .panel__tag { color: var(--gray); }
.panel__tag { font-size: clamp(.9rem,1.5vw,1.06rem); }
.panel__enter { margin-top:.9rem; display:inline-flex; align-items:center; gap:.5rem; font-family:'Satoshi',sans-serif; font-weight:600; font-size:.9rem; padding:.66rem 1.3rem; border-radius:100px; border:1.5px solid currentColor; opacity:0; transform:translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s, color .3s, border-color .3s; }
.panel__enter svg { width:17px; height:17px; transition: transform .3s var(--ease); }

/* estado de hover dirigido por JS (.split.is-mkt / .is-tech) — sem flicker */
@media (hover:hover) and (min-width:781px) {
  .split.is-tech .panel--tech { --seam-top:41%; --seam-bot:29%; background: linear-gradient(120deg,#1A1A1A 40%,#2A0E30); }
  .split.is-mkt  .panel--tech { --seam-top:73%; --seam-bot:61%; }
  .split.is-mkt  .panel--mkt  { background: linear-gradient(120deg,#FFFFFF 40%,#F4E9F6); }

  .split.is-tech .panel--tech .panel__glow,
  .split.is-mkt  .panel--mkt  .panel__glow { opacity:.55; transform:scale(1.16); }
  .split.is-tech .panel--tech .panel__title,
  .split.is-mkt  .panel--mkt  .panel__title { transform:scale(1.04); }
  .split.is-tech .panel--tech .panel__enter,
  .split.is-mkt  .panel--mkt  .panel__enter { opacity:1; transform:none; background: var(--purple); color:#fff; border-color: var(--purple); }
  .split.is-tech .panel--tech .panel__enter svg,
  .split.is-mkt  .panel--mkt  .panel__enter svg { transform:translateX(4px); }
  .split.is-mkt  .panel--tech .panel__inner,
  .split.is-tech .panel--mkt  .panel__inner { opacity:.5; }

  /* enquanto o mouse está sobre a entrada, a diagonal acompanha o cursor de
     forma fluida (transição curta) em vez de saltar entre estados */
  .split.is-hovering .panel--tech { transition: clip-path .26s var(--ease-out), background .45s var(--ease), filter .35s var(--ease), opacity .45s var(--ease); }
  .split.is-hovering .panel--mkt  { transition: background .45s var(--ease); }
  .split.is-hovering .panel__glow { transition: opacity .5s var(--ease), transform .55s var(--ease-out); }
  .split.is-hovering .panel__title { transition: transform .45s var(--ease-out); }
  .split.is-hovering .panel__inner { transition: opacity .45s var(--ease); }
}

/* Núcleo da marca (chip branco — logo tem fundo branco) */
.entry__core { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.entry__drag { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.entry__badge { display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:.4rem .8rem; }
.entry__logo-img { height:46px; width:auto; display:block; filter: drop-shadow(0 3px 14px rgba(0,0,0,.32)); }

/* Indicadores de arrastar (só no mobile) */
.entry__pull { display:none; }
.entry__logo-text { display:none; font-family:'Satoshi',sans-serif; font-weight:600; font-size:1.5rem; color: var(--graphite); }
.entry__logo-text b { color: var(--purple); font-weight:900; }
.entry__sub { font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color: var(--purple); font-weight:600; text-shadow:0 1px 10px rgba(0,0,0,.22); }

/* Durante o arraste, a costura é INSTANTÂNEA (presa ao ícone, sem atraso) */
.split.is-dragging .panel--tech { transition: none; }

/* Saída ao escolher — expansão fluida e contínua do caminho escolhido */
body.is-leaving .entry__core { opacity:0; transition: opacity .3s ease; }
body.is-leaving .panel { transition: clip-path .72s var(--ease-out), opacity .55s var(--ease), transform .72s var(--ease-out), filter .55s var(--ease); }
body.is-leaving.choose-tech .panel--tech { --seam-top:0%; --seam-bot:0%; }
body.is-leaving.choose-tech .panel--mkt { opacity:0; }
body.is-leaving.choose-mkt .panel--tech { --seam-top:100%; --seam-bot:100%; opacity:0; }


/* ═══════════════════════════════════════════════════════════════════════
   HEADER dos mundos
   ═══════════════════════════════════════════════════════════════════════ */
.world-nav { position:fixed; top:0; left:0; right:0; z-index:40; display:none; align-items:center; justify-content:space-between; padding:.8rem clamp(1.25rem,4vw,3rem); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom:1px solid var(--border); }
.world-nav.is-visible { display:flex; }
.world-nav__brand { background:transparent; border:0; border-radius:9px; padding:3px 4px; cursor:pointer; display:inline-flex; align-items:center; transition: transform .2s var(--ease), opacity .25s; }
.world-nav__brand:hover { transform:translateY(-1px); opacity:.82; }
.world-nav__logo-img { height:26px; width:auto; display:block; }
.world-nav__logo-text { display:none; font-family:'Satoshi',sans-serif; font-weight:600; font-size:1.05rem; color: var(--graphite); }
.world-nav__logo-text b { color: var(--purple); font-weight:900; }
.world-nav__switch { display:flex; align-items:center; gap:.7rem; }
.world-nav__here { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--faint); }
.world-nav__toggle { display:inline-flex; align-items:center; gap:.5rem; background: var(--surface); border:1px solid var(--line); border-radius:100px; padding:.48rem .9rem; color: var(--text); cursor:pointer; font-family:'Space Grotesk',sans-serif; transition: border-color .25s, transform .2s var(--ease); }
.world-nav__toggle:hover { border-color: var(--purple); transform:translateY(-1px); }
.world-nav__toggle-label { font-size:.7rem; color: var(--muted); }
.world-nav__toggle-target { font-family:'Satoshi',sans-serif; font-weight:600; font-size:.82rem; }
.world-nav__toggle svg { width:16px; height:16px; color: var(--purple); }


/* ═══════════════════════════════════════════════════════════════════════
   TIPOGRAFIA
   ═══════════════════════════════════════════════════════════════════════ */
.eyebrow { display:inline-block; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color: var(--accent); font-weight:600; margin:0 0 1.1rem; }
.section__eyebrow { display:inline-block; font-family:'Satoshi',sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); margin-bottom:.7rem; }
.section__head { max-width:56ch; margin-bottom:2.4rem; }
.section__title { font-weight:700; font-size: clamp(1.55rem,3vw,2.25rem); margin-bottom:.7rem; }
.section__lead { color: var(--muted); font-size: clamp(1rem,1.5vw,1.12rem); }


/* ═══════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════ */
.hero { position:relative; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding:7rem 0 5rem; overflow:hidden; }
.hero__aura { position:absolute; z-index:0; width:72vmax; aspect-ratio:1; border-radius:50%; top:-28%; left:-8%; filter:blur(90px); opacity: var(--aura); background: radial-gradient(circle, var(--purple), transparent 62%); animation: floaty 18s ease-in-out infinite alternate; }
@keyframes floaty { to { transform: translate(10%,8%) scale(1.12); } }
.hero__grid { position:absolute; inset:0; z-index:0; opacity:.6; background-image: linear-gradient(var(--dot) 1px, transparent 1px), linear-gradient(90deg, var(--dot) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image: radial-gradient(78% 60% at 50% 32%, #000, transparent 76%); mask-image: radial-gradient(78% 60% at 50% 32%, #000, transparent 76%); }
.hero .wrap { position:relative; z-index:1; }
.hero__title { font-weight:900; font-size: clamp(2.3rem,5.4vw,4rem); margin-bottom:1.2rem; max-width:18ch; }
.hero__lead { color: var(--muted); font-size: clamp(1.02rem,1.7vw,1.2rem); max-width:48ch; margin-bottom:2rem; }
.hero__cta { display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__scroll { position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); z-index:1; width:25px; height:40px; border:2px solid var(--line); border-radius:100px; display:flex; justify-content:center; padding-top:7px; }
.hero__scroll span { width:4px; height:8px; border-radius:4px; background: var(--accent); animation: scrollDot 1.7s ease-in-out infinite; }
@keyframes scrollDot { 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(11px);opacity:0} 100%{opacity:0} }


/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.5rem; font-family:'Satoshi',sans-serif; font-weight:600; font-size:.96rem; padding:.82rem 1.55rem; border-radius:100px; cursor:pointer; border:1.5px solid transparent; transition: transform .2s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: linear-gradient(135deg, var(--purple), var(--purple-deep)); color:#fff; box-shadow:0 12px 30px -12px rgba(158,35,178,.6); }
.btn--solid:hover { box-shadow:0 18px 40px -12px rgba(158,35,178,.72); }
.btn--solid::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); }
.btn--solid:hover::after { animation: sheen .85s ease; }
@keyframes sheen { from{left:-60%} to{left:130%} }
.btn--ghost { background:transparent; border-color: var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--purple); background: var(--accent-soft); }
.btn--lg { padding:.98rem 2rem; font-size:1.02rem; }


/* ═══════════════════════════════════════════════════════════════════════
   SECTIONS — diferenciação rítmica + transições fluidas
   ═══════════════════════════════════════════════════════════════════════ */
.section { padding: clamp(4rem,8vw,7rem) 0; position:relative; }
.section > .wrap { position:relative; z-index:1; }
.section--soft { background: var(--surface); }
.section--spot::after { content:""; position:absolute; z-index:0; width:46vmax; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, var(--purple), transparent 64%); filter:blur(100px); opacity: calc(var(--aura) * .8); pointer-events:none; }
.section--spot.spot-br::after { right:-14%; bottom:-18%; }
.section--spot.spot-tr::after { right:-12%; top:-16%; }
.section--pattern::before { content:""; position:absolute; inset:0; z-index:0; opacity:.9; pointer-events:none; background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size:24px 24px; -webkit-mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent 78%); mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent 78%); }

.section--soft { position:relative; }
.section--soft::before, .section--soft::after { content:""; position:absolute; left:0; right:0; height:80px; z-index:0; pointer-events:none; }
.section--soft::before { top:0; background: linear-gradient(var(--bg), transparent); }
.section--soft::after { bottom:0; background: linear-gradient(transparent, var(--bg)); }

/* Banda focal — painel arredondado flutuante (sem o fade grosseiro nas bordas) */
.section--band { position:relative; overflow:hidden; padding: clamp(3.5rem,7vw,6rem) 0; margin: clamp(2rem,6vw,4rem) clamp(.9rem,4vw,2.4rem); border-radius: clamp(24px,4vw,40px); }
body.world-mkt .section--band {
  background: radial-gradient(135% 110% at 50% -12%, #311238 0%, #1c1023 58%, #160b1c 100%);
  border:1px solid rgba(158,35,178,.22);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 90px -34px rgba(158,35,178,.4);
  --text: var(--ice); --muted: var(--gray); --faint: rgba(212,212,212,.5); color: var(--ice);
}
body.world-tech .section--band {
  background: radial-gradient(135% 110% at 50% -12%, #2c1033 0%, #18121e 60%, #141016 100%);
  border:1px solid rgba(158,35,178,.18);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 90px -34px rgba(158,35,178,.28);
}

/* ── Reels ──────────────────────────────────────────────────────────────── */
.reel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.reel { position:relative; aspect-ratio:9/16; border-radius:16px; overflow:hidden; border:1px solid var(--border); background: var(--surface); cursor:pointer; padding:0; transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; }
.reel:hover { transform:translateY(-6px); border-color: var(--purple); box-shadow: var(--shadow); }
.reel__media { position:absolute; inset:0; background: linear-gradient(160deg,#2a0e30,#1c1320 55%,#141016); }
.reel__media::after { content:""; position:absolute; inset:0; opacity:.55; background: radial-gradient(60% 50% at 50% 36%, rgba(158,35,178,.34), transparent 70%); }
.reel__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.28); display:flex; align-items:center; justify-content:center; color:#fff; transition: transform .3s var(--ease), background .3s; }
.reel__play svg { width:21px; height:21px; margin-left:2px; }
.reel:hover .reel__play { transform:translate(-50%,-50%) scale(1.14); background: var(--purple); border-color:transparent; }
.reel__tag { position:absolute; top:.65rem; left:.65rem; z-index:2; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; padding:.24rem .58rem; border-radius:100px; background: rgba(0,0,0,.5); backdrop-filter:blur(4px); color:#fff; }

.placeholder-note { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin-top:1.5rem; font-size:.84rem; color: var(--faint); }
.placeholder-note svg { width:16px; height:16px; flex-shrink:0; color: var(--accent); }
.placeholder-note code { font-family:'Space Grotesk',monospace; font-size:.8rem; background: var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:.08rem .4rem; color: var(--muted); }

/* ── Landing pages & sites ──────────────────────────────────────────────── */
.sites-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.site { display:flex; flex-direction:column; gap:.8rem; }
.site__frame { position:relative; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background: var(--surface); border:1px solid var(--border); box-shadow: var(--shadow); transition: transform .35s var(--ease), border-color .3s; }
.site:hover .site__frame { transform:translateY(-6px) scale(1.01); border-color: var(--purple); }
.site__bar { display:flex; gap:6px; padding:.55rem .7rem; background: var(--surface-2); border-bottom:1px solid var(--border); }
.site__bar i { width:9px; height:9px; border-radius:50%; background: var(--line); }
.site__shot { display:block; position:relative; overflow:hidden; height:calc(100% - 30px); }
/* a prévia (print real) cobre o gradiente/decoração ::after; se a imagem falhar, ela some (onerror) e o fundo decorativo reaparece */
.site__img { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; background:var(--surface); transition: transform .5s var(--ease); }
.site:hover .site__img { transform:scale(1.04); }
.site__shot.s1 { background: linear-gradient(135deg,#9E23B2 0%,#7A1A8A 60%,#4a1054 100%); }
.site__shot.s2 { background: linear-gradient(135deg,#2A0E30,#1A1A1A 70%); }
.site__shot.s3 { background: linear-gradient(135deg,#F2E6F4,#FFFFFF 60%); position:relative; }
.site__shot.s3::after { content:""; position:absolute; left:12%; top:22%; width:46%; height:14%; border-radius:6px; background:#9E23B2; box-shadow:0 30px 0 -2px rgba(158,35,178,.25), 0 56px 0 -6px rgba(26,26,26,.12); }
.site__shot.s4 { background: linear-gradient(135deg,#1f1430,#9E23B2 130%); position:relative; }
.site__shot.s4::after { content:""; position:absolute; left:14%; top:26%; width:40%; height:12%; border-radius:6px; background:rgba(217,143,230,.85); box-shadow:0 26px 0 -3px rgba(217,143,230,.4), 0 48px 0 -6px rgba(217,143,230,.2); }
.site__shot.s5 { background: linear-gradient(135deg,#3a1145,#5e1668 70%,#1A1A1A); position:relative; }
.site__shot.s5::after { content:""; position:absolute; left:14%; bottom:20%; width:64%; height:34%; border-radius:6px; background: linear-gradient(90deg,#9E23B2 30%,transparent 30%) 0 0/22% 100% repeat-x; opacity:.55; }
.site__shot.s6 { background: linear-gradient(135deg,#FDF4FF,#F2E6F4 55%,#E9D3EE); position:relative; }
.site__shot.s6::after { content:""; position:absolute; left:50%; top:30%; transform:translateX(-50%); width:34%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#D98FE6,#9E23B2); box-shadow:0 18px 30px -10px rgba(158,35,178,.4); }
.site__label { display:inline-flex; align-items:center; gap:.45rem; font-family:'Satoshi',sans-serif; font-weight:600; font-size:.92rem; color: var(--text); transition: gap .25s var(--ease), color .25s; }
.site__label svg { width:15px; height:15px; color: var(--accent); }
.site:hover .site__label { gap:.7rem; color: var(--accent); }

/* ── Frase de impacto ───────────────────────────────────────────────────── */
.statement { font-family:'Satoshi',sans-serif; font-weight:700; line-height:1.32; font-size: clamp(1.35rem,3.2vw,2.05rem); max-width:24ch; margin:0 0 2.6rem; letter-spacing:-.01em; }
.statement em { color: var(--accent); }

/* ── Features ───────────────────────────────────────────────────────────── */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.cards-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.feature { background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:1.7rem 1.5rem; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.feature:hover { transform:translateY(-5px); border-color: var(--purple); box-shadow: var(--shadow); }
.feature__icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; margin-bottom:1rem; background: var(--accent-soft); border:1px solid color-mix(in srgb, var(--purple) 28%, transparent); }
.feature__icon svg { width:23px; height:23px; color: var(--accent); }
.feature h3 { font-size:1.12rem; font-weight:600; margin-bottom:.45rem; }
.feature p { color: var(--muted); font-size:.94rem; margin:0; }

/* ── Sinergia (3 frentes → 1 resultado) ─────────────────────────────────── */
.section__head--center { max-width:none; text-align:center; margin-bottom:2.6rem; }
.section__head--center .section__eyebrow { display:block; }
.section__head--center .section__title { max-width:26ch; margin:0 auto .5rem; }
.section__head--center .section__lead { max-width:46ch; margin:0 auto; }

.synergy { position:relative; max-width:880px; margin:0 auto; }
.synergy__inputs { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.synergy__card { position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:1.9rem 1.4rem 1.5rem; text-align:center; opacity:0; transform:translateY(24px); transition: opacity .6s var(--ease-out) calc(var(--i) * 150ms), transform .6s var(--ease-out) calc(var(--i) * 150ms), border-color .3s, box-shadow .3s; }
.synergy.is-in .synergy__card { opacity:1; transform:none; }
.synergy__card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--purple),var(--purple-soft)); transform:scaleX(0); transform-origin:left; transition: transform .55s var(--ease-out) calc(var(--i) * 150ms + .35s); }
.synergy.is-in .synergy__card::before { transform:scaleX(1); }
.synergy__card:hover { border-color:rgba(158,35,178,.55); box-shadow:0 24px 54px -22px rgba(0,0,0,.6); transform:translateY(-5px); }
.synergy__num { position:absolute; top:1rem; right:1.15rem; font-family:'Satoshi',sans-serif; font-weight:900; font-size:.92rem; letter-spacing:.04em; color:rgba(217,143,230,.5); }
.synergy__ic { display:inline-flex; width:54px; height:54px; border-radius:15px; align-items:center; justify-content:center; background:rgba(158,35,178,.2); border:1px solid rgba(158,35,178,.42); margin-bottom:1rem; }
.synergy__ic svg { width:25px; height:25px; color:var(--purple-soft); }
.synergy__card h3 { font-family:'Satoshi',sans-serif; font-weight:700; font-size:1.12rem; color:var(--ice); margin-bottom:.4rem; }
.synergy__card p { font-size:.9rem; color:var(--muted); margin:0; }

.synergy__merge { display:block; width:100%; height:62px; }
.synergy__merge-path { fill:none; stroke:var(--purple); stroke-width:2; stroke-linecap:round; stroke-dasharray:130; stroke-dashoffset:130; filter:drop-shadow(0 0 5px rgba(158,35,178,.6)); transition: stroke-dashoffset 1s var(--ease-out) .55s; }
.synergy.is-in .synergy__merge-path { stroke-dashoffset:0; }

.synergy__down { display:none; }

.synergy__result { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:1.4rem; max-width:560px; margin:0 auto; padding:1.9rem 2.4rem; border-radius:24px; background:linear-gradient(135deg,rgba(158,35,178,.3),rgba(122,26,138,.14)); border:1px solid rgba(158,35,178,.5); box-shadow:0 0 42px -10px rgba(158,35,178,.45); opacity:0; transform:translateY(18px) scale(.96); transition: opacity .6s var(--ease-out) .85s, transform .6s var(--ease-out) .85s, box-shadow .3s; }
.synergy.is-in .synergy__result { opacity:1; transform:none; }
.synergy__result:hover { box-shadow:0 0 60px -8px rgba(158,35,178,.6); }
.synergy__result-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 130% at 50% 0%, rgba(158,35,178,.4), transparent 70%); }
.synergy__result-eq { position:relative; font-family:'Satoshi',sans-serif; font-size:2.8rem; font-weight:900; line-height:1; color:var(--purple-soft); flex-shrink:0; }
.synergy__result-text { position:relative; }
.synergy__result-text strong { display:block; font-family:'Satoshi',sans-serif; font-size:clamp(1.3rem,3vw,1.85rem); font-weight:900; color:var(--ice); margin-bottom:.25rem; }
.synergy__result-text p { color:var(--muted); font-size:.98rem; margin:0; }

/* ── Flutuador da marca na entrada ──────────────────────────────────────── */
.entry__float { position:absolute; z-index:3; pointer-events:none; width:58px; height:auto; top:24%; left:14%; will-change:transform,opacity; filter: drop-shadow(0 0 10px rgba(158,35,178,.55)) drop-shadow(0 0 26px rgba(158,35,178,.28)); animation: floatMark 22s ease-in-out infinite; }
.entry__float--2 { width:38px; top:62%; left:74%; animation: floatMark2 27s ease-in-out infinite; animation-delay:-6s; }
@keyframes floatMark {
  0%   { transform:translate(0,0) rotate(-12deg) scale(.85); opacity:.28; }
  18%  { transform:translate(40vw,20vh) rotate(8deg) scale(1.08); opacity:.42; }
  38%  { transform:translate(56vw,-6vh) rotate(-6deg) scale(.92); opacity:.32; }
  55%  { transform:translate(26vw,34vh) rotate(16deg) scale(1.12); opacity:.46; }
  72%  { transform:translate(64vw,12vh) rotate(-4deg) scale(.95); opacity:.34; }
  88%  { transform:translate(6vw,26vh) rotate(10deg) scale(1.06); opacity:.4; }
  100% { transform:translate(0,0) rotate(-12deg) scale(.85); opacity:.28; }
}
@keyframes floatMark2 {
  0%   { transform:translate(0,0) rotate(14deg) scale(.9); opacity:.2; }
  25%  { transform:translate(-38vw,-22vh) rotate(-8deg) scale(1.05); opacity:.34; }
  50%  { transform:translate(-58vw,10vh) rotate(6deg) scale(.92); opacity:.24; }
  75%  { transform:translate(-22vw,-30vh) rotate(-12deg) scale(1.1); opacity:.32; }
  100% { transform:translate(0,0) rotate(14deg) scale(.9); opacity:.2; }
}

/* ── Indicadores de arraste no mobile (chevrons + bob) ──────────────────── */
@keyframes pullBob { 0%,100%{opacity:.45;transform:translateY(0)} 50%{opacity:1;transform:translateY(var(--bob,-4px))} }
@keyframes badgeBob { 0%,100%{transform:translateY(-3px)} 50%{transform:translateY(3px)} }

/* ── Aplicativos Creato — CARROSSEL ─────────────────────────────────────── */
.carousel { position:relative; }
.carousel__track { display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:1rem .25rem 1.5rem; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.carousel__track::-webkit-scrollbar { display:none; }
.carousel .app { scroll-snap-align:center; flex:0 0 min(86vw, 360px); }

/* Modo LOOP infinito (ativado por JS): o track vira uma faixa transformável,
   com clones nas pontas. Sem scroll nativo → sem bordas, loop contínuo. */
.carousel.is-loop { overflow:hidden; }
.carousel.is-loop .carousel__track { overflow:visible; scroll-snap-type:none; scroll-behavior:auto; touch-action:pan-y; cursor:grab; will-change:transform; }
.carousel.is-loop .carousel__track.is-dragging { cursor:grabbing; }
.carousel.is-loop .carousel__track > * { scroll-snap-align:none; }

/* Carrossel de vídeos (reels) — contínuo, vários visíveis, seta + arraste */
.reel-track { padding:.75rem .25rem 1.25rem; }
.reel-carousel .reel { flex:0 0 clamp(155px, 44vw, 200px); scroll-snap-align:center; }
.reel-carousel .carousel__controls { margin-top:.2rem; }

.app { display:flex; flex-direction:column; gap:.9rem; background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:1.7rem 1.6rem; transition: transform .5s var(--ease), opacity .5s var(--ease), border-color .3s, box-shadow .3s; }
.carousel .app:not(.is-active) { opacity:.62; transform: scale(.94); }
.carousel .app.is-active { opacity:1; transform: translateY(-6px) scale(1.02); border-color: var(--purple); box-shadow: var(--shadow); }
.app__icon { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; flex-shrink:0; background: var(--accent-soft); border:1px solid color-mix(in srgb, var(--purple) 28%, transparent); animation: iconBob 4s ease-in-out infinite; }
@keyframes iconBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.app__icon svg { width:26px; height:26px; color: var(--accent); overflow:visible; }
.app__icon svg * { transform-box: fill-box; transform-origin: center; }
.app__body { display:flex; flex-direction:column; }
.app__badge { align-self:flex-start; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:.24rem .6rem; border-radius:100px; margin-bottom:.6rem; color: var(--accent); background: var(--accent-soft); border:1px solid color-mix(in srgb, var(--purple) 26%, transparent); }
.app h3 { font-size:1.14rem; font-weight:600; margin-bottom:.4rem; }
.app p { color: var(--muted); font-size:.93rem; margin:0; }
.app__cta { display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-family:'Satoshi',sans-serif; font-weight:600; font-size:.88rem; color: var(--accent); transition: gap .25s var(--ease); }
.app__cta svg { width:15px; height:15px; }
.app__cta:hover { gap:.65rem; }

/* ícones animados por sistema */
.ic-pulse { animation: icPulse 2.2s ease-in-out infinite; }
@keyframes icPulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.82)} }
.ic-col2 { animation: icShift 2.6s ease-in-out infinite; }
@keyframes icShift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.ic-d1 { animation: icType 1.4s ease-in-out infinite; }
.ic-d2 { animation: icType 1.4s ease-in-out .2s infinite; }
.ic-d3 { animation: icType 1.4s ease-in-out .4s infinite; }
@keyframes icType { 0%,100%{opacity:.3; transform:translateY(0)} 50%{opacity:1; transform:translateY(-1.5px)} }
.ic-draw { transform-origin:left center; animation: icDraw 2.4s ease-in-out infinite; }
@keyframes icDraw { 0%,100%{transform:scaleX(.25)} 50%{transform:scaleX(1)} }
.ic-line { stroke-dasharray:22; stroke-dashoffset:22; animation: icLine 3s ease-in-out infinite; }
@keyframes icLine { 0%{stroke-dashoffset:22} 45%,100%{stroke-dashoffset:0} }
.ic-dot { animation: icDotBob 1.6s ease-in-out infinite; }
@keyframes icDotBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* controles do carrossel */
.carousel__controls { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:.4rem; }
.carousel__btn { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background: var(--surface); color: var(--text); cursor:pointer; display:grid; place-items:center; transition: border-color .25s, transform .2s var(--ease), background .25s; }
.carousel__btn:hover { border-color: var(--purple); transform:translateY(-2px); background: var(--surface-2); }
.carousel__btn svg { width:20px; height:20px; }
.carousel__dots { display:flex; gap:.5rem; }
.carousel__dot { width:8px; height:8px; border-radius:50%; background: var(--line); border:0; cursor:pointer; padding:0; transition: background .25s, transform .25s; }
.carousel__dot.is-active { background: var(--purple); transform:scale(1.35); }

/* ── Process (Como a gente trabalha) ────────────────────────────────────── */
.process { position:relative; }
.process__track { position:absolute; top:18px; left:12.5%; right:12.5%; height:2px; background: rgba(255,255,255,.08); overflow:hidden; z-index:0; border-radius:2px; }
.process__track-fill { height:100%; background: linear-gradient(90deg, var(--purple), var(--purple-soft)); transform-origin:left center; transform:scaleX(0); transition: transform 1.4s var(--ease-out) .45s; box-shadow:0 0 14px rgba(158,35,178,.6); }
.process.is-in .process__track-fill { transform:scaleX(1); }
.process__list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; position:relative; z-index:1; }
.process__item { display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.process__node { width:36px; height:36px; border-radius:50%; background: linear-gradient(135deg, var(--purple), var(--purple-deep)); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; opacity:0; transform:scale(.5); transition: opacity .45s var(--ease-out) calc(var(--i) * 220ms + 300ms), transform .45s var(--ease-out) calc(var(--i) * 220ms + 300ms); }
.process.is-in .process__node { opacity:1; transform:scale(1); }
.process__ring { position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(158,35,178,.5); opacity:0; }
.process.is-in .process__ring { animation: processRing 2.6s ease-out infinite calc(var(--i) * 650ms + 1.4s); }
@keyframes processRing { 0%{transform:scale(1);opacity:.55} 100%{transform:scale(2.4);opacity:0} }
.process__n { font-family:'Satoshi',sans-serif; font-weight:700; color:#fff; font-size:.88rem; }
.process__card { background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:16px; padding:1.4rem 1.2rem; text-align:center; width:100%; opacity:0; transform:translateY(16px); transition: opacity .6s var(--ease-out) calc(var(--i) * 220ms + 500ms), transform .6s var(--ease-out) calc(var(--i) * 220ms + 500ms), border-color .3s, box-shadow .3s, background .3s; }
.process.is-in .process__card { opacity:1; transform:none; }
.process__card:hover,
.process__item.is-active .process__card { border-color:rgba(158,35,178,.55); background:rgba(158,35,178,.08); box-shadow:0 24px 56px -20px rgba(0,0,0,.6); }
.process__item.is-active .process__node { box-shadow:0 0 0 5px rgba(158,35,178,.22), 0 0 22px rgba(158,35,178,.5); }
.process__icon { display:inline-flex; width:44px; height:44px; border-radius:12px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--purple) 28%, transparent); align-items:center; justify-content:center; margin-bottom:.8rem; }
.process__icon svg { width:22px; height:22px; color:var(--accent); }
.process__card h4 { font-size:1.05rem; margin-bottom:.35rem; font-weight:700; color:var(--ice); }
.process__card p { color:var(--muted); font-size:.88rem; margin:0; }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.cta { padding: clamp(4.5rem,10vw,8rem) 0; text-align:center; position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; inset:0; z-index:0; opacity: var(--aura); background: radial-gradient(50% 60% at 50% 50%, var(--purple), transparent 70%); filter:blur(60px); }
.cta .wrap { position:relative; z-index:1; }
.cta__title { font-size: clamp(1.9rem,4.5vw,3rem); font-weight:900; margin-bottom:.9rem; }
.cta__text { color: var(--muted); font-size: clamp(1.02rem,1.8vw,1.2rem); max-width:42ch; margin:0 auto 2rem; }
.cta__actions { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

.foot { padding:2.4rem 0; border-top:1px solid var(--border); color: var(--faint); font-size:.84rem; }
.foot__inner { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.foot__brand { background:transparent; border:0; padding:0; display:inline-flex; }
.foot__logo { height:20px; width:auto; display:block; }


/* ═══════════════════════════════════════════════════════════════════════
   Reveal + stagger
   ═══════════════════════════════════════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in { opacity:1; transform:none; }
.cards-3.reveal, .cards-4.reveal, .reel-grid.reveal, .sites-grid.reveal, .synergy.reveal, .process.reveal { opacity:1; transform:none; }
.cards-3.reveal > *, .cards-4.reveal > *, .reel-grid.reveal > *, .sites-grid.reveal > * { opacity:0; transform:translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i,0) * 70ms); }
.cards-3.reveal.is-in > *, .cards-4.reveal.is-in > *, .reel-grid.reveal.is-in > *, .sites-grid.reveal.is-in > * { opacity:1; transform:none; }
/* synergy/process têm transições próprias via .is-in nos filhos */


/* ═══════════════════════════════════════════════════════════════════════
   Modal
   ═══════════════════════════════════════════════════════════════════════ */
.vmodal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.vmodal.is-open { display:flex; }
.vmodal__backdrop { position:absolute; inset:0; background: rgba(0,0,0,.78); backdrop-filter: blur(4px); }
.vmodal__box { position:relative; z-index:1; max-width:440px; width:100%; color: var(--ice); background:#222225; border:1px solid rgba(212,212,212,.14); border-radius:18px; padding:2.2rem; text-align:center; animation: modalUp .25s var(--ease-out); }
@keyframes modalUp { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
.vmodal__icon { width:54px; height:54px; border-radius:14px; margin:0 auto 1.1rem; display:flex; align-items:center; justify-content:center; background: rgba(158,35,178,.18); }
.vmodal__icon svg { width:27px; height:27px; color: var(--purple); }
.vmodal__box h3 { font-size:1.35rem; margin-bottom:.6rem; }
.vmodal__box p { color: var(--gray); font-size:.94rem; margin:0; }
.vmodal__box code { font-family:'Space Grotesk',monospace; background:#1A1A1A; border:1px solid rgba(212,212,212,.14); border-radius:5px; padding:.08rem .4rem; font-size:.84rem; color: var(--ice); }
.vmodal__close { position:absolute; top:1rem; right:1rem; width:32px; height:32px; border-radius:50%; background:#1A1A1A; border:1px solid rgba(212,212,212,.14); color: var(--gray); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vmodal__close:hover { color: var(--ice); border-color: var(--purple); }

/* ── Lightbox de vídeo (reels) ──────────────────────────────────────────── */
.rmodal { position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.rmodal.is-open { display:flex; }
.rmodal__backdrop { position:absolute; inset:0; background: rgba(0,0,0,.86); backdrop-filter: blur(7px); }
.rmodal__stage { position:relative; z-index:1; display:inline-flex; animation: modalUp .28s var(--ease-out); }
.rmodal__media { display:flex; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 30px 90px -20px rgba(0,0,0,.85); }
.rmodal__video { display:block; max-height:86vh; max-width:92vw; width:auto; height:auto; background:#000; }
.rmodal__iframe { width:min(92vw,420px); aspect-ratio:9/16; max-height:86vh; border:0; display:block; background:#000; }
.rmodal__close { position:absolute; top:.55rem; right:.55rem; z-index:2; width:40px; height:40px; border-radius:50%; background:rgba(20,20,20,.7); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.25); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.05rem; transition:border-color .2s, background .2s; }
.rmodal__close:hover { border-color:var(--purple); background:rgba(20,20,20,.9); }
body.rmodal-open { overflow:hidden; }


/* ═══════════════════════════════════════════════════════════════════════
   Responsivo
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:980px) {
  .cards-4 { grid-template-columns:repeat(2,1fr); }
  .reel-grid { grid-template-columns:repeat(2,1fr); }
  .sites-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:780px) {
  /* costura controlada na .split (p/ a linha seguir o arraste) */
  .split { --seam-l:54%; --seam-r:46%; }
  .panel { align-items:center; justify-content:center; padding:0; }
  /* Marketing (topo) — texto ancorado na parte de cima */
  .panel--mkt { align-items:flex-start; }
  .panel--mkt .panel__inner { align-items:center; text-align:center; margin-top:8vh; }
  /* IA & Tech (base) — texto ancorado na parte de baixo, recorte segue a costura */
  .panel--tech { z-index:2; align-items:flex-end; clip-path: polygon(0 var(--seam-l), 100% var(--seam-r), 100% 100%, 0 100%); filter: drop-shadow(0 -1px 0 rgba(158,35,178,.7)) drop-shadow(0 -8px 26px rgba(158,35,178,.4)); }
  .panel--tech .panel__inner { align-items:center; text-align:center; margin-bottom:8vh; }
  .panel__title { font-size: clamp(2rem,9vw,3rem); }
  .panel__tag { font-size:.92rem; }
  .panel__glow { width:120%; }
  .cards-3 { grid-template-columns:1fr; }
  .section__head { margin-bottom:1.9rem; }
  body.is-leaving.choose-mkt .panel--tech { clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); opacity:0; }
  body.is-leaving.choose-tech .panel--tech { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }

  /* Mobile — zona de arraste grande e confiável (alvo = .entry__drag) */
  .entry__core { pointer-events:none; }
  .entry__drag { pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; gap:.85rem; padding:1.4rem 2.6rem; border-radius:28px; will-change:transform; animation: badgeBob 2.8s ease-in-out infinite; }
  .entry__drag:active { cursor:grabbing; }
  .entry__drag.is-dragging { animation:none; }
  .entry__badge, .entry__pull { pointer-events:none; }   /* tudo é capturado pelo wrapper */
  .entry__badge .entry__sub { display:none; }
  .entry__logo-img { height:34px; }

  /* Indicadores de puxar (chevrons duplos que pulsam) */
  .entry__pull { display:flex; flex-direction:column; align-items:center; gap:.15rem; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; animation: pullBob 2s ease-in-out infinite; }
  .entry__pull svg { width:22px; height:22px; }
  .entry__pull--up   { color:var(--purple-deep); --bob:-5px; }
  .entry__pull--up b  { color:rgba(26,26,26,.6); font-weight:700; }
  .entry__pull--down { color:var(--purple-soft); --bob:5px; animation-delay:1s; }
  .entry__pull--down b { color:rgba(249,250,251,.72); font-weight:700; }

  /* Feedback visual durante o arraste */
  .split.drag-mkt .panel--mkt .panel__title,
  .split.drag-tech .panel--tech .panel__title { transform:scale(1.06); }
  .split.drag-mkt .panel--mkt .panel__glow,
  .split.drag-tech .panel--tech .panel__glow { opacity:.55; transform:scale(1.2); }
  .split.drag-mkt .panel--mkt .panel__enter,
  .split.drag-tech .panel--tech .panel__enter { opacity:1; transform:none; background:var(--purple); color:#fff; border-color:var(--purple); }

  /* Process — linha do tempo vertical (mobile) */
  .process__track { display:none; }
  .process__list { grid-template-columns:1fr; gap:0; position:relative; }
  .process__list::before { content:""; position:absolute; left:17px; top:18px; bottom:18px; width:2px; background:rgba(255,255,255,.1); border-radius:2px; }
  .process__list::after { content:""; position:absolute; left:17px; top:18px; height:calc(100% - 36px); width:2px; background:linear-gradient(var(--purple),var(--purple-soft)); border-radius:2px; transform-origin:top; transform:scaleY(0); transition: transform 1.4s var(--ease-out) .4s; box-shadow:0 0 12px rgba(158,35,178,.6); }
  .process.is-in .process__list::after { transform:scaleY(1); }
  .process__item { flex-direction:row; align-items:flex-start; gap:1rem; padding-bottom:1.1rem; }
  .process__item:last-child { padding-bottom:0; }
  .process__node { width:36px; height:36px; flex-shrink:0; margin-top:0; z-index:1; }
  .process__ring { display:none; }
  .process__card { text-align:left; padding:1rem 1.1rem; flex:1 1 auto; min-width:0; }
  .process__icon { width:40px; height:40px; margin-bottom:.6rem; }
  .process__icon svg { width:20px; height:20px; }

  /* Synergy — empilhado com convergência vertical */
  .synergy__inputs { grid-template-columns:1fr; gap:.7rem; }
  .synergy__merge { display:none; }
  .synergy__down { display:flex; align-items:center; justify-content:center; margin:.9rem auto; width:34px; height:34px; color:var(--purple); opacity:0; transform:translateY(-6px); transition: opacity .5s var(--ease-out) .3s, transform .5s var(--ease-out) .3s; }
  .synergy.is-in .synergy__down { opacity:.9; transform:none; }
  .synergy__down svg { width:24px; height:24px; }
  .synergy__result { flex-direction:column; text-align:center; gap:.5rem; padding:1.6rem 1.4rem; }
}
@media (max-width:480px) {
  body { font-size:16px; }
  .cards-4, .sites-grid { grid-template-columns:1fr; }
  .reel-grid { grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .world-nav__here { display:none; }
  .hero { padding:6rem 0 4rem; }
  .entry__logo-img { height:32px; }
  .entry__logo-text { font-size:1.3rem; }
  .entry__float { width:46px; }
  .entry__float--2 { width:30px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Acessibilidade
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal, .cards-3.reveal > *, .cards-4.reveal > *, .reel-grid.reveal > *, .sites-grid.reveal > *, .synergy__card, .synergy__result, .synergy__down, .process__node, .process__card { opacity:1 !important; transform:none !important; }
  .entry__float { animation:none !important; opacity:.32 !important; }
  .entry__drag, .entry__pull { animation:none !important; }
}
:focus-visible { outline:2px solid var(--purple); outline-offset:3px; border-radius:6px; }