/* ============================================================
   NOPLAY LANDING PAGE — DESIGN SYSTEM v3 (Fiel ao Layout)
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'Source Sans Pro';
  src: url('Fontes/Source-sans-pro/SourceSansPro-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('Fontes/Source-sans-pro/SourceSansPro-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('Fontes/Source-sans-pro/SourceSansPro-Semibold.ttf') format('truetype');
  font-weight: 600; font-style: normal;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('Fontes/Source-sans-pro/SourceSansPro-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('Fontes/Source-sans-pro/SourceSansPro-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal;
}

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --navy:          #1A2A5E;
  --navy-deep:     #111D45;
  --roxo:          #5B3F99;
  --roxo-mid:      #7B5BBF;
  --roxo-claro:    #A98FD0;
  --roxo-pill:     #6B5BA0;
  --ciano:         #00B4D8;
  --ciano-light:   #3ECFE8;
  --verde-lima:    #CFFF00;
  --verde-lima-d:  #B8E600;

  /* Neutrals */
  --branco:        #FFFFFF;
  --cinza-bg:      #F0F0F0;
  --cinza-light:   #F5F5F8;
  --cinza-strip:   #5A5A65;
  --cinza-borda:   #E4E4E8;
  --cinza-texto:   #555566;
  --texto-escuro:  #1A1A2E;

  /* Typography */
  --font:          'Source Sans Pro', system-ui, -apple-system, sans-serif;

  /* Radius */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   28px;
  --r-xl:   48px;
  --r-pill: 100px;

  /* Shadows */
  --sh-card:   0 8px 32px rgba(26,42,94,0.06);
  --sh-hover:  0 16px 48px rgba(26,42,94,0.12);
  --sh-play:   0 20px 60px rgba(0,0,0,0.12);

  /* Easing & Timing */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur:    0.3s;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-escuro);
  background: var(--branco);
  overflow-x: hidden;
}
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; outline: none; }

/* ── Layout Container ───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 40px;
}

/* ══════════════════════════════════════════════════════
   NAVBAR (Logo central + abas em pills)
   ══════════════════════════════════════════════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: clamp(60px, 7.5vw, 150px);
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
  
  /* Immersive scroll */
  opacity: var(--scroll-progress, 0);
  pointer-events: calc(var(--scroll-progress, 0) > 0.9 ? 'auto' : 'none');
  transition: opacity 0.2s ease;
}

.navbar__inner {
  height: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Left Group */
.navbar__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Center Logo ("Língua" descendo do navbar) */
.navbar__logo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background: var(--branco);
  /* 23.698% = largura exata do recorte sloped no PNG */
  width: clamp(160px, 23.698vw, 500px);
  /* 10.73vw = total height including navbar and cutout depth */
  height: clamp(80px, 10.73vw, 215px);
  box-sizing: border-box;
  /* Recorte com as inclinações exatas do PNG */
  clip-path: polygon(0.0% 0.0%, 100.0% 0.0%, 100.0% 69.9%, 96.7% 72.8%, 93.4% 77.2%, 90.1% 83.5%, 86.8% 89.8%, 83.5% 94.7%, 80.2% 98.1%, 76.9% 100.0%, 24.2% 100.0%, 20.9% 98.1%, 17.6% 94.7%, 14.3% 89.8%, 11.0% 83.5%, 7.7% 77.2%, 4.4% 72.8%, 0.0% 69.9%);
  box-shadow: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: clamp(8px, 1.5vw, 30px);
}
.navbar__logo img {
  /* Item 137: +28% de área útil (80-180px → 100-230px); o asset -hd de
     460px segura 230px em retina sem borrar */
  width: clamp(100px, 11.5vw, 230px);
  height: auto;
  display: block;
  /* Item 137b/c: "desça a logo" — translate desce o valor CHEIO (margem
     em flex centralizado redistribui e só move metade). ~30px abaixo da
     posição original no desktop; base fica a ~79% do notch (afunilamento
     começa em 69.9% mas a largura ali ainda sobra p/ os 174px da logo). */
  translate: 0 clamp(14px, 2vw, 34px);
}

/* Right Group */
.navbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Nav Pill Style */
.nav-pill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--branco);
  background: var(--roxo-pill);
  transition: all var(--dur) var(--ease);
}
.nav-pill:hover {
  background: var(--roxo);
}
/* Active left pill = lighter lavender bg, dark purple text (matches reference asset) */
.nav-pill.active {
  background: #C8BDE8;
  color: var(--navy);
  box-shadow: none;
}

.nav-pill--menu {
  background: var(--navy);
}
.nav-pill--menu:hover {
  background: var(--navy-deep);
}
.nav-pill--menu.active {
  background: var(--cinza-bg);
  color: var(--navy);
}
.nav-pill .pill-plus {
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
}

/* ── Item 51: mídia de fundo no hover (essência do componente React
   MediaButton adaptada ao stack vanilla do projeto — mesmo padrão de todo
   outro componente portado aqui, ver README itens 40/42/45/46/49). Cada
   pill ganha um clipe de vídeo em loop que só aparece no hover/focus, com
   véu na cor da marca (navy-deep) por cima pra manter o texto legível em
   qualquer frame do vídeo (WCAG AA). ── */
.nav-pill__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.nav-pill:hover .nav-pill__media,
.nav-pill:focus-visible .nav-pill__media {
  opacity: 1;
}
/* Véu escuro (cor da marca, não preto genérico): contraste do texto
   branco garantido (~4.9:1+) sobre qualquer frame de vídeo por baixo. */
.nav-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(17, 29, 69, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.nav-pill:hover::after,
.nav-pill:focus-visible::after {
  opacity: 1;
}
.nav-pill__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .nav-pill__media { display: none; }
}

/* Mobile burger */
.navbar__mobile-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.navbar__mobile-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
}

/* ══════════════════════════════════════════════════════
   HERO (Imagens em tiras — CSS Strips)
   ══════════════════════════════════════════════════════ */
#hero {
  padding-top: clamp(60px, 7.5vw, 150px);
  /* Item 122: min-height:100vh centralizava o card num box gigante —
     desde o item 73 --scroll-progress fica travado em 1 (a intro por
     scroll foi removida), então o hero SEMPRE mostra o card já assentado;
     não há mais razão para reservar a tela cheia. padding-bottom
     substitui a centralização por um respiro deliberado (rítmico, não
     acidental) antes da próxima seção — em qualquer aba. */
  /* Item 127: clamp(56,6vw,96) + os 80px de padding-top de .sec somavam
     até 176px de vão antes do título — lido como "vão gigante" mesmo com
     o scroll pousando no lugar certo (item 126). Reduzido pela metade. */
  padding-bottom: clamp(28px, 3vw, 48px);
  background: var(--branco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
}

/* ══ Entrada do hero (item 48): símbolo play oficial da marca dominando a
   tela, com vídeo em loop mascarado dentro do triângulo. Moldura
   (simbolo-frame.png: contorno gradiente + sombra, miolo vazado) e máscara
   do vídeo (simbolo-video-mask.png) derivadas das artes Simbolo-imagem-1..5
   por mediana pixel a pixel — o vídeo entra alguns px por baixo do contorno,
   sem fresta. Some em zoom ao rolar, reaproveitando a MESMA fórmula
   --scroll-progress já testada e calibrada. ══ */
#cube-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--navy-deep);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: calc(1 - var(--scroll-progress, 0));
  transition: opacity 0.15s ease-out;
}
.logo-intro__mark {
  position: relative;
  z-index: 2;
  /* Símbolo é retrato (492×570 ≈ 0.863): a altura é o limite que manda.
     min(80vw, 67vh) ≡ altura ~78vh — domina a tela sem estourar em nenhuma
     proporção de janela (em paisagem 67vh vence; em retrato/mobile 80vw dá
     mais presença); teto de 1100px p/ monitores muito grandes. */
  width: clamp(260px, min(80vw, 67vh), 1100px);
  animation: logo-float 6s ease-in-out infinite;
  /* Some em zoom ao rolar — mesma fórmula que animava o play antigo (.pa-play) */
  transform: scale(calc(1 + var(--scroll-progress, 0) * 3.4));
  transform-origin: 50% 50%;
}
@keyframes logo-float {
  0%, 100% { translate: 0 0;     rotate: 0deg;    }
  50%      { translate: 0 -16px; rotate: -1.2deg; }
}
.hero-play {
  position: relative;
  aspect-ratio: 492 / 570;
  width: 100%;
  /* sombra extra sutil além da baked na arte, pra assentar no navy escuro */
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.35));
}
/* O contêiner .hero-play__media carrega a máscara: recorta o vídeo E a
   camada de cor (::after) juntos, na janela interna exata do triângulo. */
.hero-play__media {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('Varia%C3%A7%C3%B5es%20em%20PNG/Simbolo/simbolo-video-mask.png');
  mask-image: url('Varia%C3%A7%C3%B5es%20em%20PNG/Simbolo/simbolo-video-mask.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero-play__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* dessatura levemente para a camada de cor dominar, como nas artes */
  filter: saturate(0.7) contrast(1.05);
}
/* Camada de cor sobre o vídeo (mesma ideia das artes de referência: foto
   fortemente tingida de azul/teal, nunca "crua") — herda o recorte da
   máscara do pai. */
.hero-play__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(62,207,232,0.72), rgba(0,180,216,0.58) 45%, rgba(26,42,94,0.72) 100%);
  mix-blend-mode: hard-light;
  pointer-events: none;
}
.hero-play__frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
}
/* ── Item 55: fundo geométrico da entrada (port vanilla do HeroGeometric/
   Kokonut UI — React/framer-motion/Tailwind reimplementado em CSS puro,
   mesmo padrão dos itens 40/42/45/46/49/51). Pílulas translúcidas nas
   cores da marca flutuando em antigravidade atrás do play; as 4 maiores
   carregam cenas de vídeo recortadas pela própria pílula (border-radius +
   overflow hidden), dessaturadas e com véu de cor pra não competir com o
   vídeo principal do play. Ficam DENTRO do #cube-bg: herdam o fade da
   entrada no scroll e o pointer-events:none. ── */
/* ── Item 56: MeshGradient sutil atrás de tudo (canvas do ShaderMount,
   ver initHeroMesh no script.js). Opacity baixa sobre o navy + a vinheta
   do .hero-shapes por cima = movimento de profundidade, não espetáculo. ── */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
}
.hero-mesh canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* véu radial + vinheta (fecho do componente original, cores da marca) */
.hero-shapes::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(91,63,153,0.12), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(0,180,216,0.08), transparent 55%);
  filter: blur(40px);
}
.hero-shapes::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(9,14,35,0.7) 100%);
}
.hshape {
  position: absolute;
  animation: hshape-enter 2s cubic-bezier(0.23, 0.86, 0.39, 0.96) both;
}
.hshape__inner {
  width: var(--w);
  height: var(--h);
  transform: rotate(var(--rot));
  animation: hshape-float 12s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
.hshape__pill {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.hshape__pill video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.45) brightness(0.85);
}
/* véu de cor da marca por cima do vídeo (a pílula continua lendo como
   vidro colorido, não como um vídeo cru) + brilho interno do original */
.hshape__pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c1), transparent);
  box-shadow: inset 0 0 24px rgba(255,255,255,0.06);
}
/* 5 formas — mesmas proporções/posições do demo original, cores da marca */
.hshape--1 { left: -10%; top: 12%; animation-delay: .3s; }
.hshape--1 .hshape__inner { --w: min(600px, 55vw); --h: min(140px, 13vw); --rot: 12deg; }
.hshape--1 .hshape__pill  { --c1: rgba(91,63,153,0.30); }

.hshape--2 { right: -5%; top: 68%; animation-delay: .5s; }
.hshape--2 .hshape__inner { --w: min(500px, 46vw); --h: min(120px, 11vw); --rot: -15deg; --float-delay: -3s; }
.hshape--2 .hshape__pill  { --c1: rgba(0,180,216,0.28); }

.hshape--3 { left: 2%; bottom: 2%; animation-delay: .4s; }
.hshape--3 .hshape__inner { --w: min(300px, 28vw); --h: min(80px, 7.5vw); --rot: -8deg; --float-delay: -6s; }
.hshape--3 .hshape__pill  { --c1: rgba(46,114,196,0.30); }

.hshape--4 { right: 12%; top: 8%; animation-delay: .6s; }
.hshape--4 .hshape__inner { --w: min(200px, 19vw); --h: min(60px, 5.6vw); --rot: 20deg; --float-delay: -9s; }
.hshape--4 .hshape__pill  { --c1: rgba(123,91,191,0.30); }

.hshape--5 { left: 18%; top: 4%; animation-delay: .7s; }
.hshape--5 .hshape__inner { --w: min(150px, 14vw); --h: min(40px, 3.8vw); --rot: -25deg; --float-delay: -5s; }
.hshape--5 .hshape__pill  { --c1: rgba(62,207,232,0.22); background: linear-gradient(90deg, var(--c1), transparent); backdrop-filter: blur(2px); }

@keyframes hshape-enter {
  from { opacity: 0; transform: translateY(-150px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hshape-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hshape { animation: none; }
  .hshape__inner { animation: none; }
}

/* ── Indicador de scroll: chevron pulsando no pé do hero ── */
.logo-intro__scrollcue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(18px, 4vh, 40px);
  translate: -50% 0;
}
.logo-intro__scrollcue span {
  display: block;
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(255,255,255,0.75);
  border-bottom: 2px solid rgba(255,255,255,0.75);
  transform: rotate(45deg);
  animation: scrollcue-pulse 2s ease-in-out infinite;
}
@keyframes scrollcue-pulse {
  0%, 100% { opacity: 0.35; translate: 0 0; }
  50%      { opacity: 1;    translate: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-intro__mark { animation: none; }
  .logo-intro__scrollcue span { animation: none; opacity: 0.75; }
}

.hero__bg-immersion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(15,20,45,0.18) 0%, rgba(8,10,24,0.5) 100%);
  z-index: 1;
  opacity: calc(1 - var(--scroll-progress, 0));
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

/* ── 3D Layered Play Intro Styles ── */
.hero__layered-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(250px, 22vw, 420px);
  aspect-ratio: 967 / 1207;
  z-index: 10;
  pointer-events: none;
  opacity: calc(1 - var(--scroll-progress, 0) * 1.5);
  visibility: calc(var(--scroll-progress, 0) > 0.85 ? 'hidden' : 'visible');
  transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
}

.lp-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  transition: transform 0.08s ease-out;
  will-change: transform;
}

.lp-layer-6 {
  width: 100%;
  z-index: 11;
  transform: translate(calc(-50% + var(--mx, 0) * 6px), calc(-50% + var(--my, 0) * 6px)) scale(calc(1 + var(--scroll-progress, 0) * 2.2));
  opacity: calc(1 - var(--scroll-progress, 0) * 1.5);
}

.lp-layer-5 {
  width: 88.6%;
  z-index: 12;
  transform: translate(calc(-50% + var(--mx, 0) * 12px), calc(-50% + var(--my, 0) * 12px)) scale(calc(1 + var(--scroll-progress, 0) * 1.9));
  opacity: calc(1 - var(--scroll-progress, 0) * 1.5);
}

.lp-layer-4 {
  width: 84.1%;
  z-index: 13;
  transform: translate(calc(-50% + var(--mx, 0) * 18px), calc(-50% + var(--my, 0) * 18px)) scale(calc(1 + var(--scroll-progress, 0) * 1.6));
  opacity: calc(1 - var(--scroll-progress, 0) * 1.5);
}

.lp-layer-3 {
  width: 71.2%;
  z-index: 14;
  transform: translate(calc(-50% + var(--mx, 0) * 24px), calc(-50% + var(--my, 0) * 24px)) scale(calc(1 + var(--scroll-progress, 0) * 1.3));
  opacity: calc(1 - var(--scroll-progress, 0) * 1.5);
}

.lp-layer-2 {
  width: 62.2%;
  z-index: 15;
  transform: translate(calc(-50% + var(--mx, 0) * 30px), calc(-50% + var(--my, 0) * 30px)) scale(calc(1 + var(--scroll-progress, 0) * 1.0));
  opacity: calc(1 - var(--scroll-progress, 0) * 1.5);
}

.lp-layer-1 {
  width: 50.1%;
  z-index: 16;
  transform: translate(calc(-50% + var(--mx, 0) * 36px), calc(-50% + var(--my, 0) * 36px)) scale(calc(1 + var(--scroll-progress, 0) * 0.7));
  opacity: calc(1 - var(--scroll-progress, 0) * 1.5);
}

/* ── Masked video inside the inner cyan play button ── */
.lp-video-container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50.1%;
  aspect-ratio: 484 / 455;
  z-index: 17;
  pointer-events: none;
  overflow: hidden;
  
  /* Masking to the rounded play triangle shape */
  mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  
  transform-origin: center;
  transform: translate(calc(-50% + var(--mx, 0) * 36px), calc(-50% + var(--my, 0) * 36px)) scale(calc(1 + var(--scroll-progress, 0) * 0.7));
  opacity: calc(0.8 - var(--scroll-progress, 0) * 1.2);
  mix-blend-mode: overlay;
  
  transition: transform 0.08s ease-out;
  will-change: transform;
}

.lp-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}

/* ── Hero play: vibrante com vídeo por camada (reaproveita transform de .lp-layer-N) ── */
.lpc, .lpv {
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.lpc {
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
.lpv {
  object-fit: cover;
  mix-blend-mode: normal;
}
.lpc-6 { background: #14b8a6; }
.lpc-5 { background: #22d3ee; }
.lpc-4 { background: #3b82f6; }
.lpc-3 { background: #6366f1; }
.lpc-2 { background: #8b5cf6; }
.lpc-1 { background: #10b981; }
.lpc-6, .lpv-6 { aspect-ratio: 967/1207; -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); }
.lpc-5, .lpv-5 { aspect-ratio: 857/985;  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); }
.lpc-4, .lpv-4 { aspect-ratio: 813/909;  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); }
.lpc-3, .lpv-3 { aspect-ratio: 689/767;  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png'); mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png'); }
.lpc-2, .lpv-2 { aspect-ratio: 602/626;  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png'); mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png'); }
.lpc-1, .lpv-1 { aspect-ratio: 484/455;  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png'); mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png'); }

.hero__wrapper {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding: 4px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 2;
}

/* ── Card wrap (contains arrows, card) ── */
.hero__card-wrap {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  position: relative;
  filter: drop-shadow(0 16px 48px rgba(26,42,94,0.10));
  transform: scale(calc(0.55 + var(--scroll-progress, 0) * 0.45));
  transform-origin: center;
  transition: transform 0.1s ease-out, opacity 0.15s ease-out;
  will-change: transform, opacity;
  opacity: var(--scroll-progress, 0);
  pointer-events: calc(var(--scroll-progress, 0) > 0.85 ? 'auto' : 'none');
}

/* ── The Card Container based on aspect ratio 16:9 ── */
.hero__card {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  background: transparent;
  overflow: hidden;
  margin-top: -8.385%;
  margin-bottom: -5.52%;
  border-radius: calc(32px * (1 - var(--scroll-progress, 0)));
  transition: border-radius 0.1s ease-out;
  will-change: border-radius;
}

.hero__card-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ── Carousel Arrows ── */
.hero__arrow {
  position: absolute;
  /* 51.5% = centro do entalhe lateral corrigido para card-wrap com margens negativas */
  top: 51.5%;
  font-size: clamp(20px, 4.5vw, 90px);
  line-height: 1;
  color: #1A1A2E;
  cursor: pointer;
  z-index: 10;
  background: none;
  border: none;
  padding: 10px;
  user-select: none;
  
  /* Immersive scroll */
  opacity: var(--scroll-progress, 0);
  pointer-events: calc(var(--scroll-progress, 0) > 0.9 ? 'auto' : 'none');
  transition: opacity 0.2s ease, transform var(--dur) var(--ease), color var(--dur) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 3.33vw, 66px);
  height: clamp(24px, 3.33vw, 66px);
}
.hero__arrow--l {
  /* Ajuste fino para a esquerda: 5.3% para centralizar no entalhe esquerdo */
  left: 5.3%;
  transform: translate(-50%, -50%);
}
.hero__arrow--r {
  /* Centro do entalhe direito: 6.12% do card width à dir */
  right: 6.12%;
  transform: translate(50%, -50%);
}
.hero__arrow:hover {
  color: var(--roxo-mid);
}

/* ── Slides ── */
.hero__slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero__slide.active {
  display: block;
  animation: tabFadeIn 0.5s var(--ease) forwards;
}

/* ── Single Photo Underlay ── */
.hero__photo-underlay {
  position: absolute;
  left: 14.11%;
  top: 18.52%;
  width: 44.58%;
  height: 60.46%;
  overflow: hidden;
  border-radius: 4px;
  clip-path: polygon(0% 0%, 50% 0%, 55% 8%, 100% 8%, 100% 100%, 0% 100%);
}
.hero__photo-underlay img,
.hero__photo-underlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(8%) contrast(1.06);
}

/* ── Overlay PNG covering the card ── */
.hero__overlay-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ── Headline text (Right side overlay) ── */
.hero__content {
  position: absolute;
  left: 60%;
  top: 18%;
  width: 34%;
  height: 68%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* card alinhado à direita, descolado das tiras */
  padding-right: 7%;
}
/* ══ Card 3D do hero (port vanilla do ProductHighlightCard: tilt + glow + textura) ══ */
.hero-card3d {
  --rx: 0deg; --ry: 0deg;           /* rotação via mouse (JS) */
  --gx: 50%; --gy: 50%; --go: 0;    /* glow segue o mouse (JS) */
  width: clamp(240px, 22vw, 350px);
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: var(--branco);
  box-shadow: 0 14px 40px rgba(26,42,94,0.14);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: box-shadow 0.3s ease;
  will-change: transform;
}
.hero-card3d:hover { box-shadow: 0 26px 60px rgba(26,42,94,0.24); }
.hc3d-inner {
  position: absolute;
  inset: 14px;
  border-radius: 14px;
  background: rgba(26,42,94,0.04);
  box-shadow: inset 0 2px 8px rgba(26,42,94,0.06);
  transform: translateZ(20px);
  transform-style: preserve-3d;
  overflow: visible;
}
/* textura de grade (como o componente original) */
.hc3d-grid {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background:
    linear-gradient(to right, rgba(128,128,128,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(128,128,128,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}
/* glow que segue o mouse */
.hc3d-glow {
  pointer-events: none;
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  opacity: var(--go);
  background: radial-gradient(90px at var(--gx) var(--gy), rgba(0,180,216,0.55), transparent 45%);
  transition: opacity 0.25s ease;
}
.hc3d-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* título sobe: logo abaixo da categoria */
  gap: 16px;
  padding: clamp(16px, 1.8vw, 26px);
  box-sizing: border-box;
}
.hc3d-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
}
.hc3d-title {
  font-family: var(--font);
  font-size: clamp(22px, 2.3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
}
.hc3d-desc {
  margin: 10px 0 0;
  max-width: 74%;
  font-family: var(--font);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--cinza-texto);
}
/* ── Figura VIVA do card: ícone + órbitas de partículas + anel de pulso ── */
.hc3d-fig {
  position: absolute;
  right: -12%;
  bottom: -12%;
  width: 58%;
  aspect-ratio: 1 / 1;
  transform: translateZ(50px);
  transform-style: preserve-3d;
  pointer-events: none;
}
.hc3d-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 16px 24px rgba(26,42,94,0.25));
  animation: hc3d-meduza 7s ease-in-out infinite;   /* flutuação orgânica */
}
.hero-card3d:hover .hc3d-img { transform: scale(1.1) translate(6px, -12px); }
@keyframes hc3d-meduza {
  0%, 100% { translate: 0 0;     rotate: 0deg;  scale: 1 1; }
  25%      { translate: 0 -10px; rotate: -4deg; scale: 0.97 1.04; }
  50%      { translate: 0 -18px; rotate: 2deg;  scale: 1.05 0.96; }
  75%      { translate: 0 -6px;  rotate: 4deg;  scale: 0.98 1.03; }
}
/* Anel de pulso (radar): energia emanando do ícone */
.hc3d-ring {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 2px solid rgba(0,180,216,0.5);
  animation: hc3d-ping 3.2s ease-out infinite;
}
@keyframes hc3d-ping {
  0%   { scale: 0.55; opacity: 0.6; }
  75%  { scale: 1.3;  opacity: 0; }
  100% { scale: 1.3;  opacity: 0; }
}
/* Partículas orbitando (ecoam os nós/conectores do próprio ícone) */
.hc3d-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px;
  border-radius: 50%;
}
.hc3d-o1 {
  background: #00B4D8;
  box-shadow: 0 0 10px rgba(0,180,216,0.8);
  animation: hc3d-orbit 6s linear infinite;
  --r: 88px;
}
.hc3d-o2 {
  width: 9px; height: 9px; margin: -4.5px;
  background: #7B5BBF;
  box-shadow: 0 0 8px rgba(123,91,191,0.8);
  animation: hc3d-orbit 9s linear infinite reverse;
  --r: 104px;
}
.hc3d-o3 {
  width: 7px; height: 7px; margin: -3.5px;
  background: #10B981;
  box-shadow: 0 0 8px rgba(16,185,129,0.8);
  animation: hc3d-orbit 12s linear infinite;
  animation-delay: -4s;
  --r: 72px;
}
@keyframes hc3d-orbit {
  from { transform: rotate(0deg)   translateX(var(--r)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hc3d-img, .hc3d-ring, .hc3d-orb { animation: none; }
  .hc3d-ring, .hc3d-orb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card3d { transform: none !important; }
}

/* ── Play icon pointing toward text (right of middle strip) ── */
.hero__play-ciano {
  position: absolute;
  left: 58.7%;
  top: 42.3%;
  width: 5.6%;
  z-index: 4;
  pointer-events: none;
  transform: translate(-50%, -50%) scaleX(-1) rotate(-23deg);
}

/* ── Play icon pointing LEFT (left of bottom strip) ── */
.hero__play-esquerdo {
  position: absolute;
  left: 14.11%;
  top: 69.2%;
  width: 3.6%;
  z-index: 4;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* ── Mini plays do hero: vídeo rolando dentro do ícone (mantém a forma glossy) ── */
.hero-mini-play {
  position: relative;
  aspect-ratio: 80 / 93;
}
.hero-mini-play__vid,
.hero-mini-play__glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/playapontaesquerdo.png');
  mask-image: url('png%20trans/HOME/Camadas%20do%20Play/playapontaesquerdo.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.hero-mini-play__vid { object-fit: cover; }
.hero-mini-play__glass {
  object-fit: contain;
  mix-blend-mode: soft-light;
  opacity: 0.95;
}

/* ── Carousel Dots ── */
.hero__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
  
  /* Immersive scroll */
  opacity: var(--scroll-progress, 0);
  pointer-events: calc(var(--scroll-progress, 0) > 0.9 ? 'auto' : 'none');
  transition: opacity 0.2s ease;
}
.hero__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(26,42,94,0.15);
  border: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.hero__dot.active {
  background: var(--navy);
  width: 24px;
  border-radius: 4px;
}

/* ── Split Headline Parts (Immersive Scroll) ── */
.hero__headline-part1 {
  display: inline-block;
  transform: translateX(calc(-1.2 * (1 - var(--scroll-progress, 0)) * 60vw));
  transition: transform 0.1s ease-out;
  will-change: transform;
}
.hero__headline-part2 {
  display: inline-block;
  transform: translateX(calc(1.2 * (1 - var(--scroll-progress, 0)) * 60vw));
  transition: transform 0.1s ease-out;
  will-change: transform;
}


/* ══════════════════════════════════════════════════════
   TAB CONTENT ROUTING & TRANSITIONS
   ══════════════════════════════════════════════════════ */
.tab-content {
  display: none;
  opacity: var(--scroll-progress, 0);
  transition: opacity 0.3s ease;
}
.tab-content.is-active {
  display: block;
  animation: tabFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#tab-home.is-active {
  animation: none;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   SHARED UTILITIES & SECTIONS
   ══════════════════════════════════════════════════════ */
.sec {
  padding: 80px 0;
}
/* Item 127: a 1ª seção de cada aba (logo após o hero) usa um respiro menor
   no topo — o hero já entrega seu próprio padding-bottom (item 122/127);
   somar os 80px padrão aqui duplicava o vão. Demais seções da página
   mantêm o ritmo de 80px normalmente. */
.tab-content > section:first-of-type {
  padding-top: clamp(32px, 3.5vw, 56px);
}
.sec--white { background: var(--branco); }
.sec--light { background: var(--cinza-light); }
.sec--purple {
  background: var(--navy-deep);
  color: var(--branco);
}

.sec-header {
  text-align: center;
  margin-bottom: 48px;
}
.sec-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--roxo-mid);
  margin-bottom: 12px;
}
.sec-label--light {
  color: var(--ciano-light);
}
.sec-headline {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 16px;
}
.sec-headline--light {
  color: var(--branco);
}
.sec-divider {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--ciano), var(--roxo-mid));
  border-radius: 2px;
  margin: 0 auto;
}
.sec-sub {
  font-size: 16px;
  color: var(--cinza-texto);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.6;
}

.sec-subtext-click {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cinza-texto);
  margin-top: 8px;
}
.blue-triangle {
  color: var(--ciano);
  font-size: 8px;
}

/* General Buttons */
.cta--lima {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--verde-lima);
  color: var(--texto-escuro);
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  transition: all var(--dur) var(--ease);
  box-shadow: 0 4px 14px rgba(207,255,0,0.25);
}
.cta--lima:hover {
  background: var(--verde-lima-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(207,255,0,0.35);
}
.cta-bubble {
  width: 24px; height: 24px;
  background: rgba(0,0,0,0.06);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px;
}

.cta--secondary {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--cinza-texto);
  transition: color var(--dur) var(--ease);
}
.cta--secondary:hover {
  color: var(--navy);
}

.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-32 { margin-bottom: 32px; }

/* Two-column layout grid */
.two-col-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.two-col-layout.align-stretch {
  align-items: stretch;
}

/* ══════════════════════════════════════════════════════
   ABA 1: HOME (Sub-seções)
   ══════════════════════════════════════════════════════ */

/* Seção Transforme */
#transforme {
  position: relative;
  height: 185vh;            /* espaço de rolagem p/ a montagem (o palco fica fixo) */
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F2F6 50%, #E8EBF0 100%);
}
.tf-stage {
  --p: 0;                   /* progresso do scroll (0→1), setado via JS */
  /* Largura do play: fonte única de verdade (play e cards das personas leem
     esta mesma variável) — piso baixo o bastante p/ nunca estourar a altura
     fixa de 100vh em janelas de notebook mais baixas (ver item 37). */
  /* Item 111: constante volta a 452 — o diagrama de chips (que forçou
     452→516 no item 106) saiu desta seção; o play reclama o espaço.
     Item 118: teto adicional de 32cqw (32% da largura da CENA, via
     container query) — em monitores largos+altos o vh deixava o play
     chegar a 470px numa cena de 1100px, esmagando as personas contra
     ele; o teto proporcional garante play ≤ ~1/3 da cena em qualquer
     formato de janela. (cqw resolve nos elementos que usam a var —
     todos dentro de .tf-morph, o container.) */
  --play-w: clamp(150px, min(calc((100vh - 452px) / 1.158), 32cqw), 470px);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Item 112: centraliza verticalmente o único conteúdo do palco (.tf-morph)
     — sem o diagrama acima, a cena não deve mais colar no topo. */
  justify-content: center;
  padding: 96px 40px 8px;  /* topo travado na altura real do header fixo (96px) */
  box-sizing: border-box;
}
.transforme__diagram {
  width: 100%;
  max-width: 940px;
  position: relative;
  z-index: 6;               /* diagrama sempre no topo, acima da zona de montagem */
}

/* ── Zona de montagem: cena única do palco (sem diagrama acima) ──
   Item 112: desde o item 111 esta é a ÚNICA coisa dentro de .tf-stage —
   flex:1 (que antes preenchia "o espaço restante abaixo do diagrama")
   agora preenchia o palco INTEIRO, empurrando o play pro topo e abrindo um
   vão vazio enorme embaixo (o "muito afastado" reportado). Volta a ter
   altura própria e controlada; .tf-stage centraliza este bloco no espaço
   disponível (justify-content:center). max-width mais estreito aproxima
   as personas do play — 1400px as jogava pros cantos da tela. */
.tf-morph {
  position: relative;
  width: 100%;
  /* Item 118: cena fluida — 1100px fixos esmagavam as personas contra o
     play em monitores largos (o play cresce com 100vh, a cena não
     acompanhava). 86vw mantém o notebook exatamente como estava
     (86vw@1280 ≈ 1100) e abre respiro progressivo até 1500px. */
  max-width: clamp(1100px, 86vw, 1500px);
  flex: 0 0 auto;
  height: clamp(400px, 62vh, 560px);
  container-type: inline-size; /* base das unidades cqw das personas (.pc-persona) */
}

/* Plays soltos: em vez de encolher juntos como um grupo, cada um agora
   dispara em zoom para a câmera num ritmo próprio e some (port vanilla do
   "ZoomParallax" — scale4/5/6/8/9 por imagem) — funciona nos dois sentidos
   do scroll: descendo, os plays somem em zoom antes do play central se
   formar; subindo de volta, eles "voltam voando" do zoom até a posição
   espalhada de repouso. O PLAY central é sempre o último a permanecer
   visível (opacity dele só liga depois, ver .play-central__main-wrap
   abaixo) — para poder interagir com o site assim que a seção assenta. */
.tf-morph .plays-bg {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 50% 40%;
  opacity: calc(1 - clamp(0, var(--p) / 0.52, 1));
}
/* Progresso local do zoom: 0 nos primeiros 5% do scroll (mantém a montagem
   inicial intacta), 0→1 entre --p 0.05 e 0.5 (mesma janela em que o grupo
   inteiro já estava desaparecendo acima). */
.tf-morph .play-scatter {
  --zoom-t: clamp(0, (var(--p) - 0.05) / 0.45, 1);
  /* transform (propriedade legada) compõe com o scale/rotate individuais já
     usados pela animação de entrada (tf-assemble/ps-float) sem conflito de
     cascata — cada camada some em zoom no seu próprio ritmo. */
  transform: scale(calc(1 + (var(--zoom-mult, 4) - 1) * var(--zoom-t)));
}
.play-s1        { --zoom-mult: 3;   }
.play-s2        { --zoom-mult: 4.5; }
.play-s3        { --zoom-mult: 6;   }
.play-s4        { --zoom-mult: 3.5; }
.play-s5        { --zoom-mult: 5;   }
.play-s6-colored{ --zoom-mult: 4;   }
@media (prefers-reduced-motion: reduce) {
  .tf-morph .play-scatter { transform: none; }
}

/* Play único: oculto no início, FORMA-SE conforme rola (vem das camadas).
   Item 112: centralizado nos dois eixos (era só horizontal, ancorado no
   topo) — agora que .tf-morph tem altura própria e é o único conteúdo do
   palco, o play fica no centro exato da cena. */
.tf-morph .play-central__main-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Play GRANDE no centro (PNG cortado = só o triângulo). Largura vem de
     --play-w (definida em .tf-stage) p/ nunca cortar, mesmo em janelas baixas */
  width: var(--play-w);
  z-index: 3;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  transition: none;
  opacity: clamp(0, (var(--p) - 0.32) / 0.33, 1);
  scale: calc(0.55 + 0.45 * clamp(0, (var(--p) - 0.32) / 0.5, 1));
}

/* Item 112: cards SIMÉTRICOS — homem e mulher na mesma linha vertical
   (centro da cena), flanqueando o play em espelho perfeito. A composição
   assimétrica anterior (homem baixo-esquerda, mulher alta-direita) espalhava
   demais a cena depois que o diagrama de chips saiu de cima. Cada persona
   é um .pc-persona (foto + lista de 3 itens, ver sistema pcp-* abaixo). */
.tf-morph .pc-figure {
  position: absolute;
  top: 50%;
  z-index: 5;
  transition: none;
}
.tf-morph .pc-figure--man {
  left: 0;
  opacity: clamp(0, (var(--p) - 0.58) / 0.4, 1);
  translate: calc(-50px * (1 - clamp(0, (var(--p) - 0.58) / 0.4, 1))) -50%;
}
.tf-morph .pc-figure--woman {
  right: 0;
  opacity: clamp(0, (var(--p) - 0.58) / 0.4, 1);
  translate: calc(50px * (1 - clamp(0, (var(--p) - 0.58) / 0.4, 1))) -50%;
}

/* ══ Personas: foto + lista de 3 itens com ícone (port do PrebuiltUI "group-image") ══ */
/* Item 112: largura derivada do espaço REAL disponível — metade do
   container (50cqw, unidade de container query — mede contra a LARGURA
   DO PRÓPRIO .tf-morph, não da viewport) menos a metade do play
   (var(--play-w)) menos 24px de respiro mínimo. Sem descontar o play, em
   telas altas+largas (--play-w no teto de 470px) a persona invadia o play
   em 15px — os dois cresciam soltos, sem coordenação. */
.pc-persona {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Item 128: teto ampliado 360→420px — o corte dos PNGs no bounding box
     (pessoa preenchendo o arquivo, sem margens de canvas) + a fatia maior
     da foto pedem mais palco; o desconto do play na fórmula continua
     garantindo que nunca invade o centro. */
  width: clamp(200px, calc(50cqw - (var(--play-w) / 2) - 24px), 420px);
}
.pc-figure--woman.pc-persona { flex-direction: row-reverse; }
.pcp-imgwrap {
  display: block;
  position: relative;
  flex-shrink: 0;
  /* % do CARD (não vw): a foto ocupa a fatia dominante da composição —
     dimensionar por viewport a deixava pequena em relação à lista (item 44).
     Item 128: fatia ampliada (55%→62%, teto 280→330) — os cutouts sem
     margens de canvas rendem uma pessoa ~35% maior no mesmo espaço. */
  width: clamp(190px, 62%, 330px);
  /* Some junto com --play-w em janelas baixas: sem isso a foto (mais alta que
     a lista da mulher, que tem frases mais curtas) passa a ditar a altura do
     card e estoura o `.tf-stage` (mesmo risco do item 37). Item 128: fator
     0.88→0.72 — os cutouts têm proporção mais vertical (~1.45 vs 1.19 de
     altura/largura), o fator menor mantém a MESMA altura rendida de antes. */
  max-width: calc(var(--play-w) * 0.72);
}
/* Item 128: tratamento premium (PRD opção A) — o retângulo lilás chapado
   (assado no PNG original) foi removido na origem; os arquivos -cutout
   trazem só a pessoa recortada com alfa real. Aqui entra só um halo de luz
   suave atrás (gradiente radial, bem discreto — não é uma forma geométrica,
   é um "respiro" de cor), sem competir com a foto. */
.pcp-imgwrap::before {
  content: '';
  position: absolute;
  inset: 2% 4%;
  z-index: 0;
  background: radial-gradient(circle at 50% 40%, rgba(91,63,153,0.20), rgba(91,63,153,0) 72%);
  filter: blur(8px);
}
.pcp-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* sombra dupla: contato (curta, firme) + ambiente (longa, difusa) —
     assenta a pessoa no fundo sem o "recorte flutuando" de sombra única */
  filter: drop-shadow(0 6px 12px rgba(26,42,94,0.14)) drop-shadow(0 26px 44px rgba(26,42,94,0.18));
}
/* Selo: mesmo ícone + cor do 1º item da lista de cada figura (câmera/roxo
   pro homem, casa/roxo pra mulher) — a foto passa a citar o 1º item real,
   corrigindo a inconsistência do badge antigo (que citava itens ao acaso). */
.pcp-badge {
  position: absolute;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--branco);
  border: 1px solid rgba(91,63,153,0.16);
  box-shadow: 0 2px 4px rgba(26,42,94,0.10), 0 12px 26px -6px rgba(26,42,94,0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--roxo);
}
.pcp-badge svg { width: 24px; height: 24px; }
.pc-figure--man .pcp-badge { left: -10px; bottom: 5%; }
.pc-figure--woman .pcp-badge { right: -10px; bottom: 5%; }
.pcp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pcp-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pc-figure--woman .pcp-item { flex-direction: row-reverse; text-align: right; }
.pcp-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcp-icon svg { width: 19px; height: 19px; }
.pcp-icon--roxo  { background: rgba(91,63,153,0.12); color: var(--roxo); }
.pcp-icon--ciano { background: rgba(0,180,216,0.14); color: var(--ciano); }
.pcp-icon--navy  { background: rgba(26,42,94,0.10);  color: var(--navy); }
.pcp-title {
  margin: 0 0 3px;
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--navy);
}
.pcp-desc {
  margin: 0;
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cinza-texto);
}

/* ══════════════════════════════════════════════════════════
   TRANSFORME — diagrama de fluxo vivo (montagem sequencial)
   Disparado por .reveal → .visible (IntersectionObserver, 1×)
══════════════════════════════════════════════════════════ */
.tf-flow {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 6px 0 36px;
}
.tf-row { display: flex; align-items: center; gap: 16px; }
.tf-row-2 { margin-left: 150px; }
.tf-row-3 { margin-left: 28px; }

/* Item 106 (versão premium do bloco, layout do designer preservado):
   o diagrama vira um PALCO NAVY institucional — a cor-âncora da marca
   carregando o bloco (estratégia "committed" do DESIGN.md). Dois campos
   de luz suaves (ciano topo-direita = toque interativo, roxo base-
   esquerda = legislativo) dão profundidade sem virar gradiente-clichê;
   pauta de taquígrafo em branco 6% ancora no conceito do produto
   (fala → registro em pauta). */
.transforme__diagram {
  position: relative;
  padding: clamp(26px, 3vw, 34px) clamp(28px, 3.6vw, 46px) clamp(24px, 2.6vw, 30px);
  border-radius: 28px;
  background:
    radial-gradient(420px 240px at 88% 8%, rgba(0, 180, 216, 0.13), transparent 70%),
    radial-gradient(460px 280px at 6% 96%, rgba(91, 63, 153, 0.22), transparent 72%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--navy) 88%, #fff) 0%,
      var(--navy) 46%,
      var(--navy-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 2px 6px rgba(17, 29, 69, 0.12),
    0 34px 70px -34px rgba(17, 29, 69, 0.55);
}
/* entrada do palco: sobe junto com a montagem dos chips (guardado por
   @supports — sem :has, o palco simplesmente já nasce visível) */
@supports selector(:has(*)) {
  .transforme__diagram { opacity: 0; translate: 0 14px; transition: opacity 0.7s var(--ease), translate 0.7s var(--ease); }
  .transforme__diagram:has(.tf-flow.visible) { opacity: 1; translate: 0 0; }
}
.transforme__diagram::before {
  content: '';
  position: absolute;
  inset: 16px 22px 14px;
  border-radius: 18px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.06) 0 1px,
    transparent 1px 26px
  );
  -webkit-mask-image: radial-gradient(80% 100% at 50% 46%, #000 30%, transparent 82%);
  mask-image: radial-gradient(80% 100% at 50% 46%, #000 30%, transparent 82%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease 0.5s;
}
.transforme__diagram:has(.tf-flow.visible)::before { opacity: 1; }

.tf-title {
  font-family: var(--font);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  color: #fff; /* Item 106: branco sobre o palco navy */
  margin-right: 6px;
  white-space: nowrap;
  /* Item 106: sublinhado desenhado (ciano→roxo, gradiente já usado no
     sistema) que risca da esquerda pra direita depois da entrada */
  position: relative;
  padding-bottom: 8px;
}
.tf-title::after {
  content: '';
  position: absolute;
  left: 3px;
  bottom: 0;
  width: 56%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ciano), var(--roxo-mid));
  transform: scaleX(0);
  transform-origin: left center;
}
@keyframes tf-underline { to { transform: scaleX(1); } }
.tf-flow.visible .tf-title::after {
  animation: tf-underline 0.7s cubic-bezier(.22,1,.36,1) 0.55s forwards;
}
.tf-payoff {
  font-family: var(--font);
  font-weight: 800;
  color: #fff; /* Item 106: branco sobre o palco navy */
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.3;
  margin-left: 12px;
  max-width: 210px;
  /* Item 106: marcador ▶ ciano — o payoff é a SAÍDA do fluxo, fechando
     a frase que as setas-play vinham conduzindo */
  position: relative;
  padding-left: 19px;
}
.tf-payoff::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.36em;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--ciano);
}

/* ── Entrada escalonada (translate/scale/rotate independentes de transform p/ não brigar com o hover) ── */
.tf-el { opacity: 0; translate: 0 16px; scale: 0.92; }
@keyframes tf-in { to { opacity: 1; translate: 0 0; scale: 1; } }
.tf-flow.visible .tf-el {
  animation: tf-in 0.6s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 140ms);
}

/* ── Nós (botões do fluxo) ──
   Item 106: superfície com luz física no lugar da cor chapada — gradiente
   vertical sutil (topo iluminado → base sombreada da própria cor),
   hairline interna clara e sombra em duas camadas (contato + ambiente
   tingida pelo --c). O hue de cada chip segue sendo o do designer. */
.tf-node {
  position: relative;
  font-family: var(--font);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  /* camada 1: sheen (faixa de luz que varre o chip 1× após a entrada);
     camada 2: superfície com luz vertical na própria cor do designer */
  background-image:
    linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, 0.32) 50%, transparent 57%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--c) 82%, #fff) 0%,
      var(--c) 46%,
      color-mix(in srgb, var(--c) 84%, #000) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 220% 100%, 100% 100%;
  background-position: -120% 0, 0 0;
  padding: 13px 24px;
  border-radius: 14px;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 12px 26px -8px rgba(0, 0, 0, 0.40);
  transition: transform 0.22s cubic-bezier(.22,1,.36,1), box-shadow 0.22s ease;
}
@keyframes tf-sheen {
  from { background-position: -120% 0, 0 0; }
  to   { background-position:  220% 0, 0 0; }
}
/* nós ganham a 2ª animação (sheen) além da entrada tf-in — o delay do
   sheen persegue a própria entrada do chip, chip a chip */
.tf-flow.visible .tf-node.tf-el {
  animation:
    tf-in 0.6s cubic-bezier(.22,1,.36,1) forwards,
    tf-sheen 1.0s ease-out 1 both;
  animation-delay:
    calc(var(--i, 0) * 140ms),
    calc(var(--i, 0) * 140ms + 0.72s);
}
.tf-node--light {
  color: var(--navy);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.tf-flow.visible .tf-node { cursor: pointer; }
.tf-flow.visible .tf-node:hover,
.tf-flow.visible .tf-node:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.22),
    0 20px 40px -10px rgba(0, 0, 0, 0.50),
    0 0 22px -4px color-mix(in srgb, var(--c) 55%, transparent);
}
.tf-flow.visible .tf-node:active { transform: translateY(-1px) scale(0.99); }
.tf-flow.visible .tf-node:focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 2px;
}

/* ── Tooltip (acende com explicação) ── */
.tf-node::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(5px);
  width: max-content; max-width: 230px;
  /* Item 106: tooltip invertido (branco) para ler sobre o palco navy */
  background: #fff;
  color: var(--navy);
  font-size: 12px; font-weight: 600; line-height: 1.4;
  text-align: center;
  padding: 9px 13px;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(6, 12, 34, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 40;
}
.tf-node::before {
  content: '';
  position: absolute;
  left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 40;
}
.tf-flow.visible .tf-node:hover::after,
.tf-flow.visible .tf-node:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tf-flow.visible .tf-node:hover::before,
.tf-flow.visible .tf-node:focus-visible::before { opacity: 1; }

/* ── Setas-play conectoras (triângulos ciano, sem rotacionar o container) ── */
.tf-arrow { display: inline-flex; align-items: center; gap: 3px; }
.tf-arrow--down { flex-direction: column; gap: 2px; }
.tf-arrow i {
  width: 0; height: 0; border-style: solid;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.tf-a-right i, .tf-a-right2 i {
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--ciano-light); /* Item 106: mais luminoso no navy */
}
.tf-arrow--left i {
  border-width: 6px 9px 6px 0;
  border-color: transparent var(--ciano-light) transparent transparent;
}
.tf-arrow--down i {
  border-width: 9px 6px 0 6px;
  border-color: var(--ciano-light) transparent transparent transparent;
}
/* Item 106: corrente viva — os triângulos-play pulsam em cascata
   contínua (opacidade 0.35→1, fase deslocada por seta e por triângulo),
   como dados fluindo pelo pipeline. Sutil: só opacidade, sem movimento. */
@keyframes tf-stream {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.tf-flow.visible .tf-arrow i {
  animation: tf-stream 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.2s);
}
.tf-flow.visible .tf-arrow i + i {
  animation-delay: calc(var(--i, 0) * 0.2s + 0.3s);
}
/* ao passar o mouse no nó, a próxima seta pulsa (reforça a direção do fluxo) */
.tf-flow.visible .tf-node:hover + .tf-arrow i {
  filter: drop-shadow(0 0 6px var(--ciano));
  transform: scale(1.18);
  animation: none;
  opacity: 1;
}

/* ── Plays de fundo: MONTAGEM com vídeo + liquid glass ── */
.plays-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.play-scatter {
  position: absolute;
  opacity: 0;
  rotate: var(--rot, 0deg);
  scale: 0.5;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,0.16));
}
.ps-vid, .ps-glass {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.ps-vid { object-fit: cover; }
.ps-glass {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: 0.95;
}
@keyframes tf-assemble { to { opacity: 0.9; scale: 1; } }
@keyframes ps-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.plays-bg.visible .play-scatter {
  animation: tf-assemble 0.9s cubic-bezier(.22,1,.36,1) forwards,
             ps-float 6s ease-in-out infinite;
  animation-delay: calc(var(--i,0) * 90ms), calc(var(--i,0) * 90ms + 0.9s);
}

/* posição / rotação / tamanho + proporção da máscara por play */
/* Espalhamento fiel ao mockup de referência: pequeno canto sup.-esq. → médio central-alto →
   grande central-direita (destaque) → grande inferior-esq. → médio inf.-dir. → colorido meio-direita */
/* Espalhamento fiel ao mockup: maiores, mais próximos, sem vão vazio,
   simétrico e "orquestrado" com o diagrama acima (valores em % do
   .tf-morph, agora de altura travada — ver regra acima). */
.play-s1 { top: 3%;   left: -1%;  width: 12%; aspect-ratio: 813/909;  --rot: -10deg; --i: 0; }
.play-s2 { top: 15%;  left: 28%;  width: 16%; aspect-ratio: 857/985;  --rot: 7deg;   --i: 1; }
.play-s3 { top: 30%;  left: 39%;  width: 14%; aspect-ratio: 967/1207; --rot: 7deg;   --i: 2; }
.play-s4 { bottom: 6%; left: 0%;  width: 12%; aspect-ratio: 813/909;  --rot: -7deg;  --i: 3; }
.play-s5 { bottom: 7%; right: 2%;  width: 9%; aspect-ratio: 857/985; --rot: 5deg;   --i: 4; }
.play-s6-colored { top: 30%; right: 5%; width: 11%; aspect-ratio: 484/455; --rot: 3deg; --i: 5; }

/* máscara (forma do play) + imagem do vidro por play */
.play-s1 .ps-vid, .play-s1 .ps-glass,
.play-s4 .ps-vid, .play-s4 .ps-glass {
  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png');
  mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png');
}
.play-s1 .ps-glass, .play-s4 .ps-glass { background-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); }

.play-s2 .ps-vid, .play-s2 .ps-glass,
.play-s5 .ps-vid, .play-s5 .ps-glass {
  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png');
  mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png');
}
.play-s2 .ps-glass, .play-s5 .ps-glass { background-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); }

.play-s3 .ps-vid, .play-s3 .ps-glass {
  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png');
  mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png');
}
.play-s3 .ps-glass { background-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); }

.play-s6-colored .ps-vid, .play-s6-colored .ps-glass {
  -webkit-mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');
  mask-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');
}
.play-s6-colored .ps-glass { background-image: url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png'); }

/* ── Acessibilidade: respeita preferência de menos movimento ── */
@media (prefers-reduced-motion: reduce) {
  .tf-el { opacity: 1 !important; translate: 0 !important; scale: 1 !important; animation: none !important; }
  /* Item 106: estados finais sem animação — setas cheias, sublinhado
     riscado, pauta e palco visíveis, sem sheen */
  .tf-flow .tf-arrow i { animation: none !important; opacity: 1 !important; }
  .tf-title::after { animation: none !important; transform: scaleX(1); }
  .transforme__diagram { opacity: 1 !important; translate: 0 !important; transition: none !important; }
  .transforme__diagram::before { transition: none; opacity: 1; }
  /* Sem montagem por scroll: mostra o estado final (play + figuras), esconde os soltos */
  #transforme { height: auto; }
  .tf-stage { position: static; height: auto; min-height: 0; padding: 40px 40px 56px; }
  .tf-morph { min-height: 600px; }
  .tf-morph .plays-bg { display: none; }
  .tf-morph .play-central__main-wrap { opacity: 1 !important; scale: 1 !important; }
  /* Item 112: preserva o -50% vertical (centraliza no meio de .tf-morph) —
     "translate: 0" zeraria os dois eixos e a persona ficaria com o TOPO
     no centro em vez do CENTRO no centro, quebrando a simetria com o play. */
  .tf-morph .pc-figure { opacity: 1 !important; translate: 0 -50% !important; }
}

/* ── Transforme: empilhamento vertical no mobile ── */
@media (max-width: 760px) {
  .tf-flow { align-items: center; gap: 14px; }
  .tf-row { flex-direction: column; gap: 14px; margin-left: 0 !important; }
  .tf-title { margin: 0 0 4px; text-align: center; }
  /* Item 106: no empilhado a pauta vira ruído e o marcador ▶ desalinha
     o texto centrado — fora dos dois; palco navy mais compacto */
  .transforme__diagram { padding: 22px 16px 26px; border-radius: 20px; }
  .transforme__diagram::before { display: none; }
  .tf-title::after { left: 50%; translate: -50% 0; transform-origin: center; }
  .tf-payoff { margin: 6px 0 0; max-width: 260px; text-align: center; padding-left: 0; }
  .tf-payoff::before { display: none; }
  .tf-arrow { flex-direction: column; gap: 2px; }
  .tf-arrow i {
    border-width: 9px 6px 0 6px !important;
    border-color: var(--ciano-light) transparent transparent transparent !important;
  }
}

/* ══════════════════════════════════════════════════════
   PLAY ÚNICO + FIGURAS (dentro da zona de montagem .tf-morph)
   Posição/opacidade vêm das regras .tf-morph (dirigidas pelo scroll)
   ══════════════════════════════════════════════════════ */
.play-central__main-wrap { width: 360px; }
.pc-play-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,0.16));
}

.pc-figure { margin: 0; }

.play-central__main {
  width: 100%;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.12));
}

/* ── Play Central: arte achatada oficial (item 43) ──
   A remontagem em 6 camadas concêntricas nunca bate com a referência:
   na arte real os anéis são deslocados (vazam p/ baixo-direita). */
.pc-play {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.18));
}
.pc-play-final {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Item 52/53: shader "Liquid Metal" (@paper-design/shaders, WebGL via
   ESM/CDN — ver script.js initLiquidMetalPlay) traçando as BORDAS de cada
   uma das 6 camadas do play (não preenchendo a forma toda). Máscara própria
   (play-layer-edges-mask.png) gerada por detecção de bordas (Sobel) em cima
   da MESMA arte oficial — isola só os contornos entre camadas, já visíveis
   na arte achatada, sem precisar reabrir a remontagem em 6 elementos reais
   (motivo do item 43: os anéis são deslocados, não concêntricos). A máscara
   vai direto no <canvas> (não no container): mascarar só o wrapper deixava
   o canvas WebGL vazar sem recorte em alguns compositores. Só liga com hover
   E play já montado (--p ≥ 0.7, mesmo portão de antes). ── */
.pc-play__liquid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* 0 em repouso — só aparece com hover E play já montado */
  opacity: calc(var(--fx-opacity, 0) * clamp(0, (var(--p) - 0.7) / 0.1, 1));
  transition: opacity 0.35s ease;
}
.pc-play__liquid canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask-image: url('Varia%C3%A7%C3%B5es%20em%20PNG/Simbolo/play-layer-edges-mask.png');
  mask-image: url('Varia%C3%A7%C3%B5es%20em%20PNG/Simbolo/play-layer-edges-mask.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.play-central__main-wrap:hover .pc-play__liquid,
.play-central__main-wrap.is-glowing .pc-play__liquid { --fx-opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pc-play__liquid { display: none; }
}

/* Item 82: mesmo play/shader reaproveitado no diagrama da aba Resultados
   (.diag-center) — sem a zona de montagem por scroll do Transforme, então
   sem o gate de --p (que lá some o efeito antes do play "assentar"); aqui
   o shader liga direto no hover, já que o play já nasce montado. */
.diag-center .pc-play__liquid {
  opacity: var(--fx-opacity, 0);
}

/* ── Item 129: "O que muda na prática" — palco navy (substitui o carrossel
   de blobs teardrop do item 54, aprovado em demo). Painel committed-navy:
   capítulos Produtividade/Agilidade/Transparência à esquerda (pílulas com
   progresso do auto-avanço + frase-líder em word-reveal + setas-play) e UMA
   mídia à direita — o corte real do produto numa janela de console. ── */
.cards-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}

#cards-carousel-sec .container { max-width: 1360px; }

.vnt {
  position: relative;
  margin-top: 44px;
  background: linear-gradient(155deg, #1E2A56 0%, var(--navy-deep, #111D45) 62%);
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) 1.08fr;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 52px);
  align-items: center;
}
/* campos de luz (mesma gramática do diagrama navy do Como Funciona):
   ciano topo-direita = toque interativo; roxo base-esquerda = legislativo */
.vnt__glow { position: absolute; pointer-events: none; }
.vnt__glow--ciano {
  top: -160px; right: -120px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(0,180,216,0.16), transparent 68%);
}
.vnt__glow--roxo {
  bottom: -180px; left: -140px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(91,63,153,0.28), transparent 70%);
}

.vnt__left { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; }

/* capítulos: pílulas discretas com barra de progresso do auto-avanço */
.vnt__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.vnt-tab {
  position: relative;
  appearance: none;
  border: 1px solid rgba(255,255,255,0.16);
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  border-radius: 100px;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.vnt-tab:hover { color: #fff; border-color: rgba(255,255,255,0.34); }
.vnt-tab:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.vnt-tab.active {
  color: var(--navy-deep, #111D45);
  background: #fff;
  border-color: #fff;
}
/* progresso do auto-avanço: filete ciano na base da pílula ativa */
.vnt-tab.active::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--ciano);
  transform-origin: left center;
  transform: scaleX(var(--vp, 0));
}

.vnt__copy { min-height: 150px; }
.vnt__lead {
  margin: 0 0 12px;
  font-family: var(--font);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.vnt__lead .w { opacity: 0; translate: 0 8px; display: inline-block;
  transition: opacity 0.4s ease, translate 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.vnt__lead .w.on { opacity: 1; translate: 0 0; }
.vnt__sub {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.6;
  max-width: 42ch;
  color: rgba(255,255,255,0.75);
  transition: opacity 0.35s ease;
}
.vnt__sub.fading { opacity: 0; }

/* setas-play (linguagem da marca), sóbrias */
.vnt__arrs { display: flex; gap: 10px; }
.vnt-arr {
  appearance: none;
  border: none;
  width: 40px; height: 40px;
  cursor: pointer;
  background: rgba(255,255,255,0.14);
  transition: background 0.25s ease, scale 0.2s ease;
  clip-path: polygon(78% 50%, 22% 14%, 22% 86%);
}
.vnt-arr--prev { clip-path: polygon(22% 50%, 78% 14%, 78% 86%); }
.vnt-arr:hover { background: var(--ciano); scale: 1.08; }
.vnt-arr:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }

/* palco de mídia: janela de console (mesma gramática do svc-stage) */
.vnt__stage {
  position: relative;
  z-index: 1;
  border-radius: 18px;
  overflow: hidden;
  background: #0D1634;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.55);
}
.vnt__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vnt__dots { display: flex; gap: 6px; }
.vnt__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.vnt__cap {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
}
.vnt__media { position: relative; aspect-ratio: 16 / 9; }
.vnt__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.vnt__media video.active { opacity: 1; }

@media (max-width: 900px) {
  .vnt { grid-template-columns: 1fr; padding: 24px 20px 28px; gap: 22px; }
  .vnt__copy { min-height: 0; }
  .vnt__stage { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .vnt__lead .w { transition: none; opacity: 1; translate: 0 0; }
  .vnt__sub { transition: none; }
  .vnt__media video { transition: none; }
  .vnt-tab.active::after { display: none; }
}


/* CTA Row mockups — Item 61: box cinza removido, fundo branco limpo.
   Item 62: container alargado + coluna direita maior (composição ~676px).
   Item 66: drop-shadow removido (a arte tem fundo branco opaco; a sombra
   desenhava uma borda de "card" — sem ela, funde 100% no fundo branco da
   seção) + cena ampliada (coluna direita 1.5fr, cena até 800px). */
#cta-mockup-sec .container { max-width: 1360px; }
.cta-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  align-items: center;
  padding: 48px 0;
}
.cta-headline {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.3;
}
.cta-sub {
  font-size: 15px;
  color: var(--cinza-texto);
  margin-bottom: 24px;
}
.cta-btns {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Item 65: volta pro Elemento-fone-e-celular-2.png em tamanho real (1411×
   697) — os mockups separados do item 63 quebraram visualmente (vídeo
   errado vazando por trás da moldura). O play já vem desenhado na
   própria arte; só a janela da tela recebe o vídeo, recortada por
   clip-path com o quad medido pixel a pixel (ver item 61):
   TL(381,230) TR(782,254) BR(756,535) BL(353,493). */
.cta-scene {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  aspect-ratio: 1411 / 697;
  opacity: 0;
  transform: rotate(-12deg) translateY(60px) scale(0.82);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.cta-scene--in {
  opacity: 1;
  transform: rotate(0) translateY(0) scale(1);
}
.cta-scene__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cta-scene__phone {
  position: absolute;
  left: 25.02%;
  top: 33%;
  width: 30.47%;
  height: 43.9%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.cta-scene__phone:focus-visible {
  outline: 2px solid var(--roxo-mid);
  outline-offset: 4px;
}
/* Tela: bbox do quad + clip-path exato; o iframe fica dentro */
.cta-scene__screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  display: block;
  clip-path: polygon(6.5% 0%, 99.8% 7.8%, 93.7% 99.7%, 0% 85.9%);
}
.cta-scene__yt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 145%;
  height: 145%;
  border: 0;
  transform: translate(-50%, -50%) rotate(3.5deg);
  pointer-events: none; /* clique vai pro botão (abre o modal) */
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.cta-scene--played .cta-scene__yt { opacity: 1; }

/* Item 69: play do earcup — revertido do item 68 (não é mais link/modal).
   Wrapper decorativo do tamanho do disco (bbox medido pixel a pixel na
   arte: centro 985×335 / raio 140×138 em 1411×697) só pra ancorar os
   anéis pulsantes (::before/::after); não é clicável. */
.cta-scene__earcup {
  position: absolute;
  left: 59.89%;
  top: 28.26%;
  width: 19.84%;
  height: 39.6%;
  pointer-events: none;
}
.cta-scene__earcup::before,
.cta-scene__earcup::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ciano);
  opacity: 0;
  animation: cta-earcup-pulse 2.2s var(--ease) infinite;
  animation-play-state: paused;
}
.cta-scene__earcup::after { animation-delay: 1.1s; }
.cta-scene--played .cta-scene__earcup::before,
.cta-scene--played .cta-scene__earcup::after {
  animation-play-state: running;
}
@keyframes cta-earcup-pulse {
  0%   { transform: scale(0.72); opacity: 0.65; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-scene__earcup::before,
  .cta-scene__earcup::after { animation: none; opacity: 0.5; transform: scale(1); }
}

/* Item 70: play do earcup em 3 camadas (bbox 935,269,122×142 em 1411×697).
   Camada 1: a arte oficial INTEIRA (sem máscara) — borda ciano em degradê
   e sombra roxa da logomarca sempre visíveis. Camada 2: o vídeo, recortado
   pela máscara do MIOLO (`playapontadireito-miolo.png` — triângulo frontal
   erodido 5.5px, sombra excluída via alpha), rolando só dentro do
   preenchimento azul, sem tocar borda/sombra. Camada 3: glass em
   soft-light (arte inteira) pro brilho integrar o vídeo ao ícone. */
.cta-scene__earcup-video {
  position: absolute;
  left: 66.26%;
  top: 38.59%;
  width: 8.65%;
  height: 20.37%;
  pointer-events: none;
}
.cta-scene__earcup-icon,
.cta-scene__earcup-vid,
.cta-scene__earcup-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cta-scene__earcup-icon { object-fit: contain; }
.cta-scene__earcup-vid,
.cta-scene__earcup-glass {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.cta-scene__earcup-vid {
  object-fit: cover;
  -webkit-mask-image: url('png%20trans/HOME/playapontadireito-miolo.png');
  mask-image: url('png%20trans/HOME/playapontadireito-miolo.png');
}
.cta-scene__earcup-glass {
  object-fit: contain;
  mix-blend-mode: soft-light;
  opacity: 0.95;
  -webkit-mask-image: url('png%20trans/HOME/playapontadireito.png');
  mask-image: url('png%20trans/HOME/playapontadireito.png');
}

/* Ícones de volume aberto/fechado lado a lado, abaixo do tooltip
   (o estado ativo fica no roxo cheio; o inativo, no roxo claro).
   Item 67: aninhados em .cta-scene__hint junto com o tooltip (fluxo
   normal, não % independente) — assim ficam sempre colados embaixo da
   caixa roxa, mesmo se o texto quebrar em mais linhas. */
.cta-scene__audio {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  transition-delay: 0.45s;
}
/* Áudio e tooltip só aparecem depois que o vídeo entra na tela */
.cta-scene--played .cta-scene__audio { opacity: 1; transform: translateY(0); }
.cta-scene__audio-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--roxo-claro);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cta-scene__audio-btn svg { width: 22px; height: 22px; }
.cta-scene__audio-btn.is-active { color: var(--roxo); }
.cta-scene__audio-btn:hover { color: var(--roxo-mid); transform: scale(1.1); }
.cta-scene__audio-btn:focus-visible {
  outline: 2px solid var(--roxo-mid);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Tooltip no topo-direita, acima do fone (layout do design) — com
   linha-conectora descendo até os ícones de volume. Item 67: agora
   dentro de .cta-scene__hint, que carrega o posicionamento absoluto;
   o tooltip em si fica em fluxo (position: relative) só ocupando a
   largura do wrapper. */
.cta-scene__hint {
  position: absolute;
  top: -12%;
  right: 0;
  /* Item 86: box um pouco maior */
  width: 60%;
  max-width: 330px;
}
.cta-scene__tooltip {
  position: relative;
  width: 100%;
  background: #F3EFFC;
  border-radius: var(--r-md);
  /* Item 86: mais respiro em cima/embaixo (o extra do rodape abriga a
     barra de progresso do video) */
  padding: 20px 16px 26px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  transition-delay: 0.3s;
}

/* Item 86: linha de tempo do video (estilo YouTube) no rodape do box —
   trilha roxa clara + preenchimento roxo escuro dirigido pelo tempo REAL
   do embed do celular (infoDelivery via postMessage, ver script.js) */
.cta-scene__progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(91, 63, 153, 0.16);
  display: block;
}
.cta-scene__progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--roxo);
  transition: width 0.35s linear;
}
@media (prefers-reduced-motion: reduce) {
  .cta-scene__progress-fill { transition: none; }
}
.cta-scene__tooltip::after {
  content: '';
  position: absolute;
  right: 18%;
  bottom: -16px;
  width: 1px;
  height: 16px;
  background: var(--roxo-claro);
}
.cta-scene--played .cta-scene__tooltip { opacity: 1; transform: translateY(0); }
.cta-scene__tooltip p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--texto-escuro);
}

/* Item 105: transcrição em tempo real da locução do vídeo no box roxo.
   O badge com ponto pulsante só aparece em modo live (.is-live, ligado
   pelo JS quando a narração começa); cada palavra é um span .cap-w que
   ganha .is-on na hora exata em que é falada (fade-in de opacidade —
   o span invisível já ocupa espaço, então o box não refaz layout a
   cada palavra). min-height segura a altura entre cues de tamanhos
   diferentes. */
.cta-scene__live {
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* roxo cheio (≈7:1 sobre #F3EFFC) — o roxo-mid ficava em 4.5:1,
     borderline WCAG AA/eMAG para texto deste corpo */
  color: var(--roxo);
}
.cta-scene__tooltip.is-live .cta-scene__live { display: inline-flex; }
.cta-scene__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ciano);
  animation: cta-live-pulse 1.6s ease-in-out infinite;
}
@keyframes cta-live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.35); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 4px rgba(0, 180, 216, 0); }
}
.cta-scene__tooltip.is-live p { min-height: 66px; }
.cta-scene__tooltip p .cap-w {
  opacity: 0;
  transition: opacity 0.28s ease;
}
.cta-scene__tooltip p .cap-w.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cta-scene__live-dot { animation: none; }
  .cta-scene__tooltip p .cap-w { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Direto pro estado final (pose de repouso preservada, sem animação) */
  .cta-scene, .cta-scene__yt, .cta-scene__audio, .cta-scene__tooltip {
    transition: none !important;
    opacity: 1 !important;
  }
  .cta-scene { transform: rotate(0) translateY(0) scale(1) !important; }
  .cta-scene__tooltip, .cta-scene__audio { transform: translateY(0) !important; }
}
@media (max-width: 768px) {
  .cta-scene { max-width: 400px; }
  .cta-scene__tooltip { display: none; }
  .cta-scene__hint { top: 6%; right: 8%; width: auto; max-width: none; }
  .cta-scene__audio { margin-top: 0; }
}

/* Antigravidade sutil nos CTAs desta seção (loop contínuo, independente do scroll) */
.cta-btns .cta--lima,
.cta-btns .cta--secondary {
  animation: cta-float 2.4s var(--ease) infinite alternate;
}
.cta-btns .cta--secondary { animation-delay: 0.3s; }
@keyframes cta-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
.cta-btns .cta--lima:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cta-btns .cta--lima, .cta-btns .cta--secondary { animation: none; }
}

/* Como Funciona Timeline */
.steps-top {
  text-align: center;
  margin-bottom: 56px;
}
.steps-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1100px;
  margin-inline: auto;
}
.step-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.step-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.step-card__num {
  font-size: 24px;
  font-weight: 900;
  color: var(--ciano-light);
  line-height: 1;
}
.step-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--branco);
  margin-bottom: 4px;
}
.step-card p {
  font-size: 13px;
  line-height: 1.5;
}

/* Highlighted step card 2 */
.step-card--active {
  background: var(--verde-lima);
  border-color: var(--verde-lima);
  color: var(--texto-escuro);
  box-shadow: 0 8px 24px rgba(207,255,0,0.2);
}
.step-card--active .step-card__num {
  color: var(--navy);
}
.step-card--active h4 {
  color: var(--texto-escuro);
}

.step-center-visual {
  width: 180px;
  display: flex;
  justify-content: center;
}
.step-center-visual img {
  width: 100%;
  filter: drop-shadow(0 10px 30px rgba(0,180,216,0.3));
}

/* Valor Público */
.valor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 56px;
}
.valor-title {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 14px;
}
.valor-desc {
  font-size: 15px;
  color: var(--cinza-texto);
  line-height: 1.6;
}
.valor-img img {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.08));
}

.valor-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* Item 92: desce os cards pra descolar do bloco azul da composição e
     assenta perto do fim da área cinza (padding da seção é 80px; o
     margin negativo deixa ~40px de respiro até a borda) */
  margin-top: 96px;
  margin-bottom: -40px;
}
.vcol {
  background: var(--branco);
  border-radius: var(--r-md);
  padding: 24px;
  border: 1px solid var(--cinza-borda);
  box-shadow: var(--sh-card);
}
.vcol__num {
  font-size: 32px;
  font-weight: 900;
  color: var(--roxo-claro);
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}
.vcol h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.vcol p {
  font-size: 13.5px;
  color: var(--cinza-texto);
  line-height: 1.5;
}

/* FAQ Accordion */
.faq-list {
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--branco);
  border-radius: var(--r-md);
  border: 1px solid var(--cinza-borda);
  overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.faq-item.open {
  box-shadow: var(--sh-card);
  border-color: var(--roxo-claro);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  text-align: left;
}
.faq-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--cinza-borda);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--cinza-texto);
  transition: all var(--dur) var(--ease);
}
.faq-item.open .faq-icon {
  background: var(--roxo-mid);
  border-color: var(--roxo-mid);
  color: var(--branco);
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
}
.faq-item.open .faq-a {
  max-height: 250px;
}
.faq-a-inner {
  padding: 0 24px 18px;
  font-size: 14px;
  color: var(--cinza-texto);
  line-height: 1.6;
}

/* ── TAB 2: SOBRE ── */
.blue-bullet-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blue-bullet-list li {
  font-size: 14px;
  font-weight: 600;
  color: var(--ciano);
}
.about-p {
  font-size: 15px;
  color: var(--cinza-texto);
  line-height: 1.65;
}
.tcl-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tcl-img img {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  filter: drop-shadow(0 12px 36px rgba(0,0,0,0.06));
}

.one-col-card {
  max-width: 800px;
  margin-inline: auto;
  background: var(--branco);
  border-radius: var(--r-xl);
  padding: 48px;
  border: 1px solid var(--cinza-borda);
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.max-600 {
  max-width: 600px;
}

/* ── TAB 3: SERVIÇOS ── */
.services-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 48px;
}
.services-row--reverse {
  direction: ltr;
}
.services-row--reverse .services-col-img {
  order: -1;
}

.services-col-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.service-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Slanted icon box from sprite images */
.s-icon-box {
  width: 100px;
  height: 72px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.s-icon-box img {
  position: absolute;
  left: 0;
  width: 100px;
  height: auto;
}
.s-icon-box--1 img { top: 0; }
.s-icon-box--2 img { top: -72px; }
.s-icon-box--3 img { top: -144px; }
.s-icon-box--4 img { top: 0; }
.s-icon-box--5 img { top: -72px; }
.s-icon-box--6 img { top: -144px; }

.service-item__content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.service-item__content p {
  font-size: 13.5px;
  color: var(--cinza-texto);
  line-height: 1.5;
}

/* Custom rounded skewed backdrops behind illustrations */
.s-img-backdrop {
  position: relative;
  background: var(--ciano);
  border-radius: 36px 36px 0 36px;
  overflow: hidden;
  height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.s-img-backdrop--teal {
  background: var(--roxo-claro);
  border-radius: 36px 0 36px 36px;
}
.s-img-backdrop img {
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.1));
}

/* ── TAB 4: ESTRUTURA (item 130: ledger + ficha, ver bloco est-* no fim) ── */
.fit-height {
  height: 100%;
  min-height: 420px;
}

/* Interactive Layers Diagram (Aba Resultados) */

.diag-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  cursor: pointer;
  z-index: 5;
  transition: transform var(--dur) var(--ease);
}
.diag-center img {
  width: 100%;
}
.diag-center:hover {
  transform: translate(-50%, -52%) scale(1.04);
}

/* Interactive diagram nodes — Item 83: viraram <button> clicáveis que
   pulsam (anel + respiração do rótulo) e abrem o cartão de informação. */
.diag-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: var(--navy);
  z-index: 6;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
}
.diag-node:focus-visible {
  outline: 2px solid var(--roxo-mid);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Item 84: órbita contínua ao redor do play — posição/escala/opacity
   dirigidas por JS a cada frame (layoutOrbit); só o hint de GPU aqui */
.diag-node { will-change: transform, opacity; }
.diag-node__dot {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ciano);
  box-shadow: 0 0 10px rgba(0,180,216,0.5);
  transition: transform var(--dur) var(--ease);
}
/* anel pulsante (cópia translúcida do próprio dot crescendo) — chama o
   clique; pausa e some no nó ativo (sinal reconhecido) */
.diag-node__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: diag-ping 2.2s var(--ease) infinite;
  animation-delay: var(--dl, 0s);
}
.diag-node__label {
  animation: diag-breathe 2.2s ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes diag-ping {
  0%       { transform: scale(0.9); opacity: 0.7; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes diag-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
/* pulsos defasados entre os nós (não piscam em uníssono) */
.diag-node--video       { --dl: 0s; }
.diag-node--transcricao { --dl: 0.4s; }
.diag-node--revisao     { --dl: 0.8s; }
.diag-node--consulta    { --dl: 1.2s; }
.diag-node--organizacao { --dl: 1.6s; }

.diag-node:hover .diag-node__dot { transform: scale(1.25); }
.diag-node.is-active .diag-node__dot { transform: scale(1.3); }
.diag-node.is-active .diag-node__dot::after { animation: none; opacity: 0; }
.diag-node.is-active .diag-node__label { animation: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .diag-node__dot::after { animation: none; opacity: 0; }
  .diag-node__label { animation: none; }
}

/* ── Item 83: cartão premium de informação do nó ─────────────────────
   Branco, raio 16, sombra suave da casa; selo de etapa na cor do nó;
   encadeamento "próxima etapa" liga um nó ao outro. Reposicionado via
   JS ao lado do nó ativo (acima quando o nó está na metade de baixo). */
.diag-card {
  position: absolute;
  width: 280px;
  z-index: 30;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--r-md);
  box-shadow: var(--sh-hover);
  padding: 18px 20px;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.diag-card.is-open { opacity: 1; transform: translateY(0); }
.diag-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 10px;
}
.diag-card__badge--video       { color: var(--ciano);      background: rgba(0,180,216,0.12); }
.diag-card__badge--transcricao { color: var(--roxo-mid);   background: rgba(169,143,208,0.16); }
.diag-card__badge--revisao     { color: var(--roxo-mid);   background: rgba(123,91,191,0.14); }
.diag-card__badge--consulta    { color: var(--navy);       background: rgba(26,42,94,0.10); }
.diag-card__badge--organizacao { color: var(--ciano);      background: rgba(0,180,216,0.12); }
.diag-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
}
.diag-card__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--cinza-texto);
  margin: 0 0 14px;
}
.diag-card__next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  background: var(--cinza-light);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.diag-card__next:hover, .diag-card__next:focus-visible {
  background: var(--branco);
  border-color: var(--roxo-claro);
}
.diag-card__next:focus-visible { outline: 2px solid var(--roxo-mid); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .diag-card { transition: none; }
}

/* Node layout positions */
.diag-node--video {
  left: 10%; top: 22%;
}
.diag-node--transcricao {
  right: 14%; top: 12%;
}
.diag-node--transcricao .diag-node__dot {
  background: var(--roxo-claro);
  box-shadow: 0 0 10px rgba(169, 143, 208, 0.5);
}
.diag-node--revisao {
  right: 4%; top: 48%;
}
.diag-node--revisao .diag-node__dot {
  background: var(--roxo-mid);
  box-shadow: 0 0 10px rgba(123, 91, 191, 0.5);
}
.diag-node--consulta {
  right: 16%; bottom: 18%;
}
.diag-node--consulta .diag-node__dot {
  background: var(--navy);
  box-shadow: 0 0 10px rgba(26, 42, 94, 0.5);
}
.diag-node--organizacao {
  left: 12%; bottom: 10%;
}
.diag-node--organizacao .diag-node__dot {
  background: var(--ciano);
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
/* ── Item 97: rodapé do designer (Elemento-roda-pé recriado em código) —
   card cinza-claro com o MESMO recorte do topo do site (a linha de corte
   se repete: mask idêntica à do Como funciona), logo colorida à esquerda
   (interativa: clicou = ◀◀ REBOBINA a página até o topo), ícones e
   pílulas roxas à direita. ── */
#footer {
  background: var(--branco);
  padding: 64px 24px 0;
  position: relative;
}

.footer-card {
  max-width: 1400px;
  margin-inline: auto;
  background: #E9E9EC;
  border-radius: 40px 40px 0 0;
  padding: 64px 64px 24px;
  position: relative;
  -webkit-mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1140 60' preserveAspectRatio='none'><path fill='%23000' d='M0,0 H439 C469,0 466,37 496,37 H644 C674,37 671,0 701,0 H1140 V60 H0 Z'/></svg>"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1140 60' preserveAspectRatio='none'><path fill='%23000' d='M0,0 H439 C469,0 466,37 496,37 H644 C674,37 671,0 701,0 H1140 V60 H0 Z'/></svg>"),
    linear-gradient(#000, #000);
  -webkit-mask-size: 100% 61px, 100% calc(100% - 60px);
  mask-size: 100% 61px, 100% calc(100% - 60px);
  -webkit-mask-position: 0 0, 0 60px;
  mask-position: 0 0, 0 60px;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}

.footer-social-row {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 26px;
}
.ficon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: none;
  border: 0;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--roxo-pill);
  cursor: pointer;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ficon svg { width: 20px; height: 20px; }
.ficon:hover, .ficon:focus-visible {
  color: var(--roxo);
  transform: translateY(-2px);
}
.ficon:focus-visible { outline: 2px solid var(--roxo-mid); outline-offset: 3px; }

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 36px;
  margin-bottom: 16px;
}
/* logo interativa: clicou = rebobina a página ("volta a sessão ao início") */
.footer-logo {
  position: relative;
  border: 0;
  background: none;
  padding: 6px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.footer-logo:hover { transform: scale(1.04); }
.footer-logo:focus-visible {
  outline: 2px solid var(--roxo-mid);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}
.footer-logo img { height: 44px; display: block; }
.footer-rew {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%) translateY(6px);
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--roxo);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-logo:hover .footer-rew,
.footer-logo:focus-visible .footer-rew,
.footer-rew.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.footer-rew.is-on { animation: ft-blink 0.5s steps(2) infinite; }
@keyframes ft-blink { 50% { color: var(--roxo-claro); } }

.footer-pills { display: flex; gap: 10px; }
.footer-pills .nav-pill--menu {
  background: var(--roxo-pill);
  border-color: var(--roxo-pill);
  color: var(--branco);
}
.footer-pills .nav-pill--menu:hover {
  background: var(--roxo);
  border-color: var(--roxo);
}

.footer-copy {
  font-size: 12px;
  color: var(--cinza-texto);
  text-align: center;
  padding-bottom: 16px;
}

@media (max-width: 760px) {
  .footer-card { padding: 48px 24px 20px; }
  .footer-main { flex-direction: column; gap: 20px; align-items: flex-start; }
  .footer-social-row { justify-content: flex-start; }
  .footer-pills { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-rew.is-on { animation: none; }
  .footer-logo:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════
   RIGHT EDGE TAB NAVIGATION BUTTONS
   ══════════════════════════════════════════════════════ */
/* Scroll-nav removido a pedido do design */
.scroll-nav {
  display: none;
}

/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(17,29,69,0.7);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.modal-overlay.active {
  opacity: 1; pointer-events: all;
}
.modal {
  background: var(--branco);
  border-radius: var(--r-xl);
  padding: 44px;
  max-width: 520px;
  width: 100%;
  position: relative;
  transform: translateY(28px) scale(0.96);
  transition: transform 0.35s var(--ease);
  box-shadow: 0 40px 80px rgba(17,29,69,0.3);
}
.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
}
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cinza-bg);
  border: 1px solid var(--cinza-borda);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--cinza-texto);
  transition: all var(--dur) var(--ease);
}
.modal-close:hover {
  background: #EDE8F8; color: var(--roxo-mid);
}

/* Item 60: modal do vídeo (disparado pelo clique no celular da cena CTA) —
   mesmo padrão visual/estrutural do .modal-overlay acima. */
.video-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(17,29,69,0.7);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.video-modal-overlay.active {
  opacity: 1; pointer-events: all;
}
.video-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
  transform: translateY(28px) scale(0.96);
  transition: transform 0.35s var(--ease);
}
.video-modal-overlay.active .video-modal {
  transform: translateY(0) scale(1);
}
.video-modal__vid {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: #000;
  box-shadow: 0 40px 80px rgba(17,29,69,0.3);
  overflow: hidden;
}
.video-modal__vid iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-modal__close {
  position: absolute; top: -44px; right: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--branco);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--navy);
  transition: all var(--dur) var(--ease);
}
.video-modal__close:hover {
  background: #EDE8F8; color: var(--roxo-mid);
}

.modal-logo {
  height: 28px; margin-bottom: 20px;
}
.modal-headline {
  font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 6px;
}
.modal-sub {
  font-size: 14px; color: var(--cinza-texto); margin-bottom: 28px;
}
.form {
  display: flex; flex-direction: column; gap: 14px;
}
.form-group {
  display: flex; flex-direction: column; gap: 5px;
}
.form-label {
  font-size: 12px; font-weight: 700; color: var(--navy);
}
.form-input, .form-select {
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 2px solid var(--cinza-borda);
  font-family: var(--font); font-size: 14px;
  background: var(--cinza-bg);
  outline: none; transition: border-color var(--dur) var(--ease);
}
.form-input:focus, .form-select:focus {
  border-color: var(--roxo-mid); background: var(--branco);
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.form-submit {
  padding: 14px;
  background: linear-gradient(135deg, var(--navy), var(--roxo-mid));
  color: var(--branco);
  border-radius: var(--r-md);
  font-size: 15px; font-weight: 700;
  margin-top: 4px; transition: all var(--dur) var(--ease);
}
.form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107,91,191,0.3);
}

/* ══════════════════════════════════════════════════════════
   LIQUID GLASS — gloss sweep + breathing em cada camada
══════════════════════════════════════════════════════════ */

@keyframes lp-gloss {
  0%   { background-position: 0%   0%;   }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0%   0%;   }
}

@keyframes lp-breathe {
  0%,100% { filter: brightness(1.00) saturate(1.00); }
  40%      { filter: brightness(1.12) saturate(1.22); }
  70%      { filter: brightness(0.93) saturate(0.90); }
}

/* ── Hero: sheen sobre cada vídeo ── */
.lps {
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(
    128deg,
    rgba(255,255,255,0)    10%,
    rgba(255,255,255,0.18) 42%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0.18) 58%,
    rgba(255,255,255,0)    90%
  );
  background-size: 260% 260%;
}
.lps-6 { aspect-ratio:967/1207; -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); animation:lp-gloss 5.2s ease-in-out 0.0s infinite; }
.lps-5 { aspect-ratio:857/985;  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); animation:lp-gloss 4.8s ease-in-out 0.7s infinite; }
.lps-4 { aspect-ratio:813/909;  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); animation:lp-gloss 5.5s ease-in-out 1.2s infinite; }
.lps-3 { aspect-ratio:689/767;  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png');  animation:lp-gloss 4.5s ease-in-out 0.4s infinite; }
.lps-2 { aspect-ratio:602/626;  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png');  animation:lp-gloss 5.8s ease-in-out 1.8s infinite; }
.lps-1 { aspect-ratio:484/455;  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');  animation:lp-gloss 4.2s ease-in-out 0.9s infinite; }

/* Hero: breathing + liquid nos vídeos */
.lpv-6 { animation: lp-breathe 5.2s ease-in-out 0.0s infinite; }
.lpv-5 { animation: lp-breathe 4.8s ease-in-out 0.7s infinite; }
.lpv-4 { animation: lp-breathe 5.5s ease-in-out 1.2s infinite; }
.lpv-3 { animation: lp-breathe 4.5s ease-in-out 0.4s infinite; }
.lpv-2 { animation: lp-breathe 5.8s ease-in-out 1.8s infinite; }
.lpv-1 { animation: lp-breathe 4.2s ease-in-out 0.9s infinite; }

/* ── Hero: camada de VIDRO (material glossy do PNG sobre o vídeo) ── */
.lpg {
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  mix-blend-mode: soft-light;  /* imprime brilhos/biséis do vidro sobre o vídeo */
  opacity: 0.92;
}
.lpg-6 { aspect-ratio:967/1207; background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); }
.lpg-5 { aspect-ratio:857/985;  background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); }
.lpg-4 { aspect-ratio:813/909;  background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); }
.lpg-3 { aspect-ratio:689/767;  background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png');  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png'); }
.lpg-2 { aspect-ratio:602/626;  background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png');  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png'); }
.lpg-1 { aspect-ratio:484/455;  background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png'); }

/* ── PC Play: sheen ── */
.pc-play__sheen {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(
    128deg,
    rgba(255,255,255,0)    10%,
    rgba(255,255,255,0.18) 42%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0.18) 58%,
    rgba(255,255,255,0)    90%
  );
  background-size: 260% 260%;
}
.pc-s6 { width:100%;   aspect-ratio:967/1207; z-index:4;  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); animation:lp-gloss 5.2s ease-in-out 0.0s infinite; }
.pc-s5 { width:88.62%; aspect-ratio:857/985;  z-index:8;  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); animation:lp-gloss 4.8s ease-in-out 0.7s infinite; }
.pc-s4 { width:84.07%; aspect-ratio:813/909;  z-index:12; -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); animation:lp-gloss 5.5s ease-in-out 1.2s infinite; }
.pc-s3 { width:71.25%; aspect-ratio:689/767;  z-index:16; -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png');  animation:lp-gloss 4.5s ease-in-out 0.4s infinite; }
.pc-s2 { width:62.25%; aspect-ratio:602/626;  z-index:20; -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png');  animation:lp-gloss 5.8s ease-in-out 1.8s infinite; }
.pc-s1 { width:50.05%; aspect-ratio:484/455;  z-index:24; -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');  animation:lp-gloss 4.2s ease-in-out 0.9s infinite; }

/* PC: breathing + liquid nos vídeos */
.pc-v6 { animation: lp-breathe 5.2s ease-in-out 0.0s infinite; }
.pc-v5 { animation: lp-breathe 4.8s ease-in-out 0.7s infinite; }
.pc-v4 { animation: lp-breathe 5.5s ease-in-out 1.2s infinite; }
.pc-v3 { animation: lp-breathe 4.5s ease-in-out 0.4s infinite; }
.pc-v2 { animation: lp-breathe 5.8s ease-in-out 1.8s infinite; }
.pc-v1 { animation: lp-breathe 4.2s ease-in-out 0.9s infinite; }

/* ── PC Play: camada de VIDRO (material glossy do PNG sobre o vídeo) ── */
.pc-play__glass {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.92;
}
.pc-g6 { width:100%;   aspect-ratio:967/1207; z-index:3;  background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-06.png'); }
.pc-g5 { width:88.62%; aspect-ratio:857/985;  z-index:7;  background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-05.png'); }
.pc-g4 { width:84.07%; aspect-ratio:813/909;  z-index:11; background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elementos-04.png'); }
.pc-g3 { width:71.25%; aspect-ratio:689/767;  z-index:15; background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png');  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-03.png'); }
.pc-g2 { width:62.25%; aspect-ratio:602/626;  z-index:19; background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png');  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-02.png'); }
.pc-g1 { width:50.05%; aspect-ratio:484/455;  z-index:23; background-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');  -webkit-mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png');  mask-image:url('png%20trans/HOME/Camadas%20do%20Play/Play-elemento-01.png'); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE MEDIA QUERIES
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero__wrapper {
    padding: 4px 20px 32px;
  }
  /* Transforme/Play: vira layout estático empilhado no tablet/mobile (sem montagem por scroll) */
  #transforme { height: auto; }
  .tf-stage {
    position: static;
    height: auto;
    min-height: 0;
    padding: 28px 24px 50px;
  }
  .tf-morph {
    height: auto;             /* não herdar a altura travada do desktop */
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin-top: 28px;
  }
  .tf-morph .plays-bg { display: none; }   /* esconde os soltos no mobile */
  .tf-morph .play-central__main-wrap {
    position: static;
    left: auto; top: auto;
    width: min(320px, 78vw);
    translate: 0 !important;
    scale: 1 !important;
    opacity: 1 !important;
    order: -1;
  }
  .tf-morph .pc-figure {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    translate: 0 !important;
    opacity: 1 !important;
  }
  .pc-persona {
    width: min(340px, 88vw);
  }
  .pc-figure--woman.pc-persona { flex-direction: row; }
  .pc-figure--woman .pcp-item { flex-direction: row; text-align: left; }
  .two-col-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .tcl-img {
    order: -1;
  }
  .services-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .services-row--reverse .services-col-img {
    order: 0;
  }
  .valor-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .valor-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .container { padding-inline: 20px; }
  .navbar__inner { padding-inline: 20px; }
  .navbar__left, .navbar__right { display: none; }
  .navbar__mobile-btn { display: flex; }
  .navbar__logo {
    width: auto;
    height: auto;
    padding: 8px 24px 10px;
    border-radius: 0 0 20px 20px;
  }
  .navbar__logo img {
    width: auto;
    height: 28px;
  }
  
  .hero__arrow {
    font-size: 28px;
    top: 53.66%;
  }
  .hero__arrow--l {
    left: 8px;
    transform: translateY(-50%);
  }
  .hero__arrow--r {
    right: 8px;
    transform: translateY(-50%);
  }
  

  .cta-row {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
  .steps-grid {
    grid-template-columns: 1fr;
  }
  .step-center-visual {
    display: none;
  }
  .ciclo-wrapper {
    height: 320px;
  }
  .diag-center {
    width: 150px;
  }
  .diag-node {
    font-size: 12px;
  }
  .diag-node--video { left: 4%; top: 15%; }
  .diag-node--transcricao { right: 4%; top: 10%; }
  .diag-node--revisao { right: 0%; top: 46%; }
  .diag-node--consulta { right: 8%; bottom: 15%; }
  .diag-node--organizacao { left: 4%; bottom: 10%; }
}

/* ══════════════════════════════════════════════════════
   COMO FUNCIONA — Item 87: réplica do PRINT-REF do designer.
   Paleta exata: card #46338B · círculo #434595 · pílula ativa #C7D724 ·
   texto ativo #1A1A1A · inativos #8F94C7 (títulos) e #A9ACD6 (descrições)
   · tag #2A404D. A pílula verde é UM elemento absoluto que desliza
   (translateY 550ms cubic-bezier(0.32,0.72,0.28,1)); círculo+play viajam
   DENTRO dela. Vídeos de cenas/ em cross-fade dentro do aro oficial
   (mesma máscara de precisão da abertura). ══ */
.cf-sec {
  background: var(--branco);
  padding: 72px 0;
}
.cf-outer {
  position: relative;
  max-width: 1140px;
  margin-inline: auto;
}
.cf-card {
  position: relative;
  background: #46338B;
  border-radius: 40px;
  padding: 64px 96px 56px;
  /* Item 89: notch com as MEDIDAS EXATAS do card do hero (arte oficial
     Elemento-principa-frente, medida pixel a pixel: vão 22.97% da largura,
     profundidade 3.23%, fundo PLANO de 250/441 do vão, ombros S de ~97px)
     escaladas pro card de 1140: vão 262px (439→701, centro 570), fundo plano 148px (496→644), profundidade 37px. SVG data-URI (alpha), duas camadas de
     máscara em união: faixa do topo (61px) + resto do card. */
  -webkit-mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1140 60' preserveAspectRatio='none'><path fill='%23000' d='M0,0 H439 C469,0 466,37 496,37 H644 C674,37 671,0 701,0 H1140 V60 H0 Z'/></svg>"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1140 60' preserveAspectRatio='none'><path fill='%23000' d='M0,0 H439 C469,0 466,37 496,37 H644 C674,37 671,0 701,0 H1140 V60 H0 Z'/></svg>"),
    linear-gradient(#000, #000);
  -webkit-mask-size: 100% 61px, 100% calc(100% - 60px);
  mask-size: 100% 61px, 100% calc(100% - 60px);
  -webkit-mask-position: 0 0, 0 60px;
  mask-position: 0 0, 0 60px;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  /* entrada por scroll (initComoFunciona adiciona .cf-in) */
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.cf-card.cf-in { opacity: 1; transform: translateY(0); }

/* pílula grafite assentada no vale do notch (metade acima da linha) */
.cf-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #2A404D;
  color: var(--branco);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 20px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;
}
.cf-outer.cf-in .cf-tag { opacity: 1; transform: translateX(-50%) translateY(0); }

.cf-headline {
  text-align: center;
  color: var(--branco);
  font-size: 29px;
  font-weight: 700;
  margin: 0 0 44px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;
}
.cf-card.cf-in .cf-headline { opacity: 1; transform: translateY(0); }

/* ── lista de passos ── */
.cf-steps { position: relative; }
.cf-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 260px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 110px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease-out calc(0.3s + var(--i, 0) * 0.09s),
              transform 0.55s ease-out calc(0.3s + var(--i, 0) * 0.09s);
}
.cf-card.cf-in .cf-row { opacity: 1; transform: translateY(0); }
.cf-row:focus-visible {
  outline: 2px solid var(--ciano-light);
  outline-offset: 4px;
  border-radius: var(--r-md);
}
.cf-row .cf-num {
  display: inline-block;
  font-size: 64px;
  font-weight: 200;
  line-height: 1;
  color: #8F94C7;
  margin-right: 22px;
  transition: color 0.3s var(--ease), font-weight 0.15s;
}
.cf-row .cf-title {
  display: inline-block;
  vertical-align: middle;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  color: #8F94C7;
  transition: color 0.3s var(--ease);
}
/* número + título juntos na coluna 1 */
.cf-row > .cf-num, .cf-row > .cf-title { grid-row: 1; }
.cf-row > .cf-num { grid-column: 1; justify-self: start; }
.cf-row > .cf-title { grid-column: 1; justify-self: start; margin-left: 96px; }
.cf-row .cf-desc {
  grid-column: 3;
  font-size: 17px;
  line-height: 1.45;
  color: #A9ACD6;
  max-width: 300px;
  transition: color 0.3s var(--ease);
}
.cf-row.is-active .cf-num  { color: #1A1A1A; font-weight: 700; }
.cf-row.is-active .cf-title { color: #1A1A1A; }
.cf-row.is-active .cf-desc  { color: #1A1A1A; }

/* ── pílula verde deslizante (única) ── */
.cf-pill {
  position: absolute;
  left: -34px;
  right: -34px;
  top: 0;
  height: 130px;
  border-radius: 65px;
  background: #C7D724;
  z-index: 1;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0.28, 1);
  /* entrada: por último, com scale suave */
  opacity: 0;
  scale: 0.92;
}
.cf-card.cf-in .cf-pill {
  opacity: 1;
  scale: 1;
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0.28, 1),
              opacity 0.5s ease-out 0.65s, scale 0.5s ease-out 0.65s;
}

/* círculo roxo + play (viajam dentro da pílula) */
.cf-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #434595;
  animation: cf-idle 6s ease-in-out infinite alternate;
}
@keyframes cf-idle {
  from { transform: translate(-50%, calc(-50% - 5px)); }
  to   { transform: translate(-50%, calc(-50% + 5px)); }
}
.cf-playbox {
  position: absolute;
  /* Item 116: play descentrado à direita do círculo (era 50%) — eco da
     composição da logomarca NoPlay, onde o triângulo vaza pela borda
     direita do "O". Offset proporcional ao orb (escala junto no mobile). */
  left: 61%;
  top: 50%;
  width: 118%;
  aspect-ratio: 933 / 1080;
  transform: translate(-50%, -50%);
}
.cf-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  -webkit-mask-image: url('abertura/assets/play-face-mask.png?v=3');
  mask-image: url('abertura/assets/play-face-mask.png?v=3');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.cf-vid.is-on { opacity: 1; }
.cf-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── responsivo ── */
@media (max-width: 1024px) {
  .cf-card { padding: 56px 48px 48px; }
  .cf-row { grid-template-columns: minmax(0, 1.05fr) 190px minmax(0, 1fr); min-height: 96px; }
  .cf-row .cf-num { font-size: 48px; }
  .cf-row .cf-title { font-size: 20px; margin-left: 76px !important; }
  .cf-pill { height: 110px; border-radius: 55px; left: -20px; right: -20px; }
  .cf-orb { width: 180px; height: 180px; }
}
@media (max-width: 640px) {
  .cf-card { padding: 48px 22px 36px; border-radius: 28px; }
  .cf-headline { font-size: 22px; }
  /* círculo+play FIXO acima da lista; pílula deixa de deslizar e vira
     fundo do bloco ativo */
  .cf-pill {
    position: relative;
    left: 0; right: 0;
    height: auto;
    background: none;
    margin-bottom: 18px;
    transition: none;
  }
  .cf-orb {
    position: relative;
    left: auto; top: auto;
    margin: 0 auto;
    transform: none;
    animation: none;
  }
  .cf-row {
    display: block;
    min-height: 0;
    padding: 18px 16px;
    border-radius: 24px;
    margin-bottom: 6px;
    transition: background 0.3s var(--ease);
  }
  .cf-row .cf-num { font-size: 40px; margin-right: 14px; }
  .cf-row .cf-title { margin-left: 0 !important; }
  .cf-row .cf-desc { display: block; margin-top: 8px; max-width: none; }
  .cf-row.is-active { background: #C7D724; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-card, .cf-tag, .cf-headline, .cf-row, .cf-pill {
    transition: opacity 0.2s, none !important;
    opacity: 1 !important;
    transform: none !important;
    scale: 1 !important;
  }
  .cf-tag { transform: translateX(-50%) !important; }
  .cf-orb { animation: none; }
  .cf-pill { transition: none !important; }
}

/* ══════════════════════════════════════════════════════
   VALOR PÚBLICO — Item 90: layout do PRINT-REF com automontagem.
   Paleta exata: azul #54AEC7→#3E8FB0 (radius 40) · roxo #807AB4
   (radius 32) · título #0A0A0A · subtítulo #3A3A3A · fundo #F7F7FA.
   Estados iniciais da montagem são setados via GSAP (sem JS a seção
   renderiza completa). ══ */
.vp-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 48px;
  align-items: center;
  padding: 24px 0 8px;
}
.vp-left { position: relative; }
.vp-title {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.16;
  color: #0A0A0A;
  margin: 0 0 22px;
}
.vp-line { display: block; }
.vp-play {
  position: absolute;
  top: -6px;
  right: 4%;
  width: 120px;
  height: auto;
  pointer-events: none;
  will-change: transform;
}
.vp-sub {
  font-size: 19px;
  line-height: 1.55;
  color: #3A3A3A;
  margin: 0 0 28px;
  max-width: 46ch;
}

/* ── box premium: play que TRANSCREVE o texto ── */
.vp-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F6F5FB 100%);
  border: 1px solid var(--cinza-borda);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(26, 42, 94, 0.10);
  padding: 20px 22px;
  max-width: 480px;
}
.vp-box__btn {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--navy);
  color: var(--branco);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.vp-box__btn svg { width: 22px; height: 22px; }
.vp-box__btn .vp-ic-pause { display: none; }
.vp-box__btn.is-playing .vp-ic-play { display: none; }
.vp-box__btn.is-playing .vp-ic-pause { display: block; }
.vp-box__btn:hover, .vp-box__btn:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px rgba(199, 215, 36, 0.45);
}
.vp-box__btn:focus-visible { outline: 2px solid #C7D724; outline-offset: 3px; }
/* ripple do clique */
.vp-box__btn .vp-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #C7D724;
  animation: vp-ripple 0.5s var(--ease) forwards;
  pointer-events: none;
}
@keyframes vp-ripple {
  from { transform: scale(1); opacity: 0.9; }
  to   { transform: scale(1.7); opacity: 0; }
}
.vp-box__body { flex: 1; min-width: 0; }
.vp-box__kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--roxo-mid);
  margin-bottom: 6px;
}
.vp-box__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto-escuro);
  margin: 0 0 12px;
  min-height: 70px;
}
.vp-box__text .vp-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--roxo-mid);
  vertical-align: -0.15em;
  margin-left: 2px;
  animation: vp-blink 0.9s steps(1) infinite;
}
@keyframes vp-blink { 50% { opacity: 0; } }
.vp-box__bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(26, 42, 94, 0.12);
}
.vp-box__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: #C7D724;
  transition: width 0.25s linear;
}

/* ── composição da direita (camadas) ── */
.vp-right {
  position: relative;
  height: 560px;
}
.vp-blue {
  position: absolute;
  right: 0;
  top: 10%;
  width: 74%;
  height: 90%;
  border-radius: 40px;
  background: linear-gradient(180deg, #54AEC7 0%, #3E8FB0 100%);
  overflow: hidden;
  z-index: 1;
  will-change: transform, clip-path;
}
.vp-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.35) 50%, transparent 62%);
  transform: translateX(-130%);
  will-change: transform;
}
.vp-purple {
  position: absolute;
  left: 10%;
  bottom: 6%;
  width: 38%;
  height: 58%;
  border-radius: 32px;
  background: #807AB4;
  z-index: 2;
  will-change: transform;
}
.vp-man {
  position: absolute;
  bottom: 2%;
  left: 55%;
  transform: translateX(-50%);
  height: 114%;
  width: auto;
  z-index: 3;
  will-change: transform;
}

/* ── responsivo ── */
@media (max-width: 1024px) {
  .vp-grid { gap: 28px; }
  .vp-play { width: 88px; }
  .vp-right { height: 440px; }
}
@media (max-width: 640px) {
  .vp-grid { grid-template-columns: 1fr; }
  .vp-play { width: 72px; right: 0; }
  .vp-right { height: 380px; max-width: 420px; margin: 0 auto; }
  .vp-blue { width: 84%; }
  .vp-purple { left: 0; width: 40%; }
}

/* ── Item 91: 3 boxes como mini-players de transcrição ──────────────
   Extensão do trocadilho do box premium: cabeçalho com número + timecode
   mono + play redondo; texto transcrito por typewriter; barra verde-lima.
   Ao concluir um card, o play do PRÓXIMO pulsa (a sessão continua). */
.vcol { position: relative; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.vcol:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); }
.vcol__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.vcol__head h3 { margin: 0; margin-right: auto; }  /* Item 100: título no lugar do número, alinhado à esquerda, mantém navy bold */
.vcol__time {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--cinza-texto);
  letter-spacing: 0.04em;
}
.vcol__play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--navy);
  color: var(--branco);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.vcol__play svg { width: 16px; height: 16px; }
.vcol__play .vp-ic-pause { display: none; }
.vcol__play.is-playing .vp-ic-play { display: none; }
.vcol__play.is-playing .vp-ic-pause { display: block; }
.vcol__play:hover, .vcol__play:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(199, 215, 36, 0.45);
}
.vcol__play:focus-visible { outline: 2px solid #C7D724; outline-offset: 3px; }
/* convite: quando o card anterior conclui, o play do próximo pulsa 3x */
.vcol__play.vcol--convite::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #C7D724;
  animation: vcol-convite 0.9s var(--ease) 3;
  pointer-events: none;
}
@keyframes vcol-convite {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}
.vcol__text { min-height: 72px; }
.vcol__text .vp-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--roxo-mid);
  vertical-align: -0.15em;
  margin-left: 2px;
  animation: vp-blink 0.9s steps(1) infinite;
}
.vcol__bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(26, 42, 94, 0.12);
  margin-top: 14px;
}
.vcol__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: #C7D724;
  transition: width 0.25s linear;
}
@media (prefers-reduced-motion: reduce) {
  .vcol, .vcol__play { transition: none; }
  .vcol:hover { transform: none; }
  .vcol__play.vcol--convite::after { animation: none; opacity: 0; }
}

/* ── Item 93: FAQ como demo de busca no acervo ──────────────────────
   Campo premium com lupa + contador mono (linguagem dos players),
   chips de sugestão, <mark> nos termos (como a busca em transcrições
   do NoPlay) e estado vazio que converte em demonstração. */
.faq-busca { max-width: 720px; margin: 0 auto 36px; }
.faq-busca__campo {
  position: relative;
  display: flex;
  align-items: center;
}
.faq-busca__lupa {
  position: absolute;
  left: 18px;
  width: 20px;
  height: 20px;
  color: var(--roxo-mid);
  pointer-events: none;
}
#faq-busca-input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--texto-escuro);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--r-pill);
  padding: 15px 120px 15px 50px;
  box-shadow: var(--sh-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#faq-busca-input::placeholder { color: var(--cinza-texto); }
#faq-busca-input:focus {
  outline: none;
  border-color: var(--roxo-claro);
  box-shadow: 0 0 0 4px rgba(199, 215, 36, 0.35), var(--sh-card);
}
.faq-busca__count {
  position: absolute;
  right: 18px;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--roxo-mid);
  letter-spacing: 0.03em;
  pointer-events: none;
}
.faq-busca__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.faq-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: var(--cinza-light);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.faq-chip:hover, .faq-chip:focus-visible {
  background: var(--branco);
  border-color: var(--roxo-claro);
  transform: translateY(-1px);
}
.faq-chip:focus-visible { outline: 2px solid var(--roxo-mid); outline-offset: 2px; }
.faq-chip.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--branco);
}
/* termo marcado — como o destaque de busca nas transcrições */
mark.faq-mark {
  background: rgba(199, 215, 36, 0.55);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}
.faq-vazio {
  text-align: center;
  padding: 28px 20px 8px;
}
.faq-vazio p {
  font-size: 16px;
  color: var(--cinza-texto);
  margin-bottom: 18px;
}
.faq-item.faq-oculto { display: none; }
@media (max-width: 640px) {
  #faq-busca-input { padding-right: 92px; font-size: 15px; }
}

/* ── Item 94: FAQ 2 colunas com o PLAY-player respondendo ───────────
   Port do layout faq-sections (foto → PLAY oficial com vídeo dentro).
   Lista minimalista com border-bottom e chevron girando (o card antigo
   sai); status de player sob o play (dot pulsante + timecode mono). */
.faq2-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  max-width: 1020px;
  margin: 0 auto;
}
.faq2-play {
  position: sticky;
  top: 120px;
}
.faq2-playbox {
  position: relative;
  width: 100%;
  aspect-ratio: 933 / 1080;
}
.faq2-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  -webkit-mask-image: url('abertura/assets/play-face-mask.png?v=3');
  mask-image: url('abertura/assets/play-face-mask.png?v=3');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.faq2-vid.is-on { opacity: 1; }
.faq2-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.faq2-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 10px 14px;
  background: var(--cinza-light);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--r-pill);
}
.faq2-status__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cinza-borda);
}
.faq2-status__dot.is-live {
  background: #C7D724;
  animation: faq2-live 1.2s ease-in-out infinite;
}
@keyframes faq2-live { 50% { opacity: 0.35; } }
.faq2-status__txt {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cinza-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faq2-status__time {
  flex: 0 0 auto;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--roxo-mid);
}
.faq2-label { display: inline-block; margin-bottom: 6px; }
.faq2-title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.faq2-intro {
  font-size: 15px;
  color: var(--cinza-texto);
  margin: 0 0 20px;
  max-width: 52ch;
}
/* busca compacta dentro da coluna */
.faq2-col .faq-busca { max-width: none; margin: 0 0 8px; }
.faq2-col .faq-busca__chips { justify-content: flex-start; margin-top: 10px; margin-bottom: 4px; }
/* lista minimalista: sai o card, entra o border-bottom do componente */
.faq2-col .faq-list { display: block; }
.faq2-col .faq-item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--cinza-borda);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.faq2-col .faq-q {
  padding: 18px 4px;
  font-size: 16px;
}
.faq2-col .faq-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--navy);
  font-size: 0;
  transition: transform 0.5s var(--ease);
}
.faq2-col .faq-icon svg { width: 18px; height: 18px; }
.faq2-col .faq-item.open .faq-icon { transform: rotate(180deg); }
.faq2-col .faq-a-inner { padding: 0 4px 18px; }
@media (max-width: 900px) {
  .faq2-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq2-play { position: static; max-width: 300px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .faq2-status__dot.is-live { animation: none; }
  .faq2-col .faq-icon { transition: none; }
  .faq2-vid { transition: none; }
}

/* ── Item 95: YouTube dentro do play do FAQ ─────────────────────────
   O wrapper leva a MESMA máscara do miolo; o iframe é sobredimensionado
   (210% de largura) pro 16:9 do YouTube cobrir o triângulo sem barras. */
.faq2-ytwrap {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('abertura/assets/play-face-mask.png?v=3');
  mask-image: url('abertura/assets/play-face-mask.png?v=3');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.faq2-yt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210%;
  height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;   /* decorativo — cliques ficam nas perguntas */
}

/* ══════════════════════════════════════════════════════════
   IMPACTO — Item 107: cards-acordeão de resultados
   Porte vanilla do componente React "ImpactSection" (demo aprovado):
   4 cards em escadinha (280/330/390/430 fechados, 460 aberto), o card
   sob hover/foco/clique expande via flex-grow 1.5→4.8 + height (CSS
   transition no lugar do spring do framer-motion). Rampa de cores da
   casa: navy (destaque) → lavanda do box da transcrição → roxo-mid →
   roxo profundo do Como funciona. Lima só no CTA (Regra da Reserva).
   Interações em initImpactCards (script.js); vídeos via initVideoPerf.
══════════════════════════════════════════════════════════ */
.impact__wrap { max-width: 1200px; margin-inline: auto; padding-inline: 40px; }

/* entrada da seção: mesmo contrato .reveal → .visible do resto do site */
#impacto .reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
}
#impacto .reveal.visible { opacity: 1; translate: 0 0; }
#impacto .impact__cards.reveal { transition-delay: 0.12s; }
#impacto .impact__strip.reveal { transition-delay: 0.24s; }

.impact__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 40px;
}
.impact__label {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: var(--roxo); margin-bottom: 16px;
}
.impact__title {
  font-family: var(--font);
  font-size: clamp(28px, 3vw, 38px); line-height: 1.08;
  font-weight: 900; color: var(--navy); max-width: 620px;
  text-wrap: balance;
}
.impact__sub {
  margin-top: 16px; font-size: 15px; color: var(--cinza-texto);
  line-height: 1.7; max-width: 560px;
}
.impact__nav { display: flex; align-items: center; gap: 8px; }
.impact__nav button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--cinza-borda); background: var(--branco); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0; padding: 0;
  transition: transform 0.2s var(--ease), box-shadow 0.2s ease, border-color 0.2s ease;
}
.impact__nav button:hover {
  transform: translateY(-2px);
  border-color: var(--roxo-mid);
  box-shadow: 0 6px 16px rgba(26, 42, 94, 0.14);
}
.impact__nav button:focus-visible { outline: 3px solid var(--ciano); outline-offset: 2px; }
.impact__nav svg { width: 16px; height: 16px; }

.impact__cards { display: flex; align-items: flex-end; gap: 0; }

.ic {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(91, 63, 153, 0.14);
  background: var(--bg);
  color: var(--fg);
  flex-grow: 1.5;
  flex-basis: 0;
  min-width: 0;
  height: var(--h-closed);
  transition:
    flex-grow 0.55s var(--ease),
    height 0.55s var(--ease),
    box-shadow 0.3s ease;
}
.ic:first-child { border-radius: 16px 0 0 16px; }
.ic:last-child  { border-radius: 0 16px 16px 0; }
.ic:focus-visible { outline: 3px solid var(--ciano); outline-offset: -3px; z-index: 2; }
.ic.ic--open {
  flex-grow: 4.8;
  height: 460px;
  box-shadow: 0 24px 48px -18px rgba(17, 29, 69, 0.35);
  z-index: 1;
}

/* estado fechado: métrica ancorada embaixo */
.ic__closed {
  position: absolute; inset: 0;
  padding: 26px;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 1;
  transition: opacity 0.28s ease 0.14s;
}
.ic.ic--open .ic__closed { opacity: 0; transition: opacity 0.16s ease; pointer-events: none; }
.ic__closed .ic-metric {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 900; line-height: 1;
}
.ic__closed .ic-label {
  margin-top: 8px; font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase; font-weight: 700; max-width: 140px;
  line-height: 1.35; opacity: 0.92;
}

/* estado aberto: história completa */
.ic__full {
  position: absolute; inset: 0;
  padding: 36px 40px;
  display: flex; flex-direction: column;
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.2s ease, translate 0.2s ease;
  pointer-events: none;
}
.ic.ic--open .ic__full {
  opacity: 1; translate: 0 0; pointer-events: auto;
  transition: opacity 0.4s ease 0.22s, translate 0.4s var(--ease) 0.22s;
}
.ic__full .ic-kicker {
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 700; opacity: 0.8;
}
.ic__full h3 {
  margin-top: 8px;
  font-family: var(--font);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1; font-weight: 900; max-width: 340px;
  text-wrap: balance;
}
.ic__full .ic-desc {
  margin-top: 12px; font-size: 14px; line-height: 1.6;
  max-width: 320px; opacity: 0.92;
}
.ic-cta {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font);
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 700; color: inherit;
  background: none; border: 0; cursor: pointer; padding: 0;
  width: fit-content;
}
.ic-cta svg { width: 14px; height: 14px; transition: translate 0.2s var(--ease); }
.ic-cta:hover svg { translate: 4px 0; }
.ic-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.ic__bottom {
  margin-top: auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px;
  align-items: end;
}
.ic__bottom .ic-metric-big {
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 900; line-height: 0.95;
}
.ic__bottom .ic-metric-sub {
  margin-top: 8px; font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase; font-weight: 700; opacity: 0.92;
}
.ic__media {
  position: relative; width: 100%; height: 200px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(17, 29, 69, 0.16);
}
.ic__media--tall { height: 250px; }
.ic__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* faixa final: payoff do Transforme conduzindo ao CTA */
.impact__strip {
  margin-top: 28px;
  background: var(--navy);
  color: var(--branco);
  border-radius: 100px;
  padding: 14px 18px 14px 32px;
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap; text-align: center;
}
.impact__strip p { font-size: 15px; line-height: 1.4; font-weight: 600; }

@media (max-width: 860px) {
  .impact__wrap { padding-inline: 20px; }
  .impact__nav { display: none; }
  .impact__cards { flex-direction: column; align-items: stretch; gap: 12px; }
  .ic, .ic.ic--open { height: auto; min-height: 132px; flex-grow: 1; border-radius: 16px; }
  .ic__closed { position: static; padding: 22px; }
  .ic__full { position: static; padding: 24px 22px 26px; display: none; }
  .ic.ic--open .ic__closed { display: none; }
  .ic.ic--open .ic__full { display: flex; opacity: 1; translate: 0 0; }
  .ic__bottom { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
  .ic__media, .ic__media--tall { height: 170px; }
  .impact__strip { border-radius: 24px; padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  #impacto .reveal { transition: none; opacity: 1; translate: 0; }
  .ic, .ic__closed, .ic__full, .ic-cta svg,
  .impact__nav button { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   SOBRE — Item 120: bloco narrativo premium (PRD executado,
   demo aprovado no item 119). Tokens da paleta oficial
   NoPaper/NoPlay; animações em initSobreNarrativo (script.js).
══════════════════════════════════════════════════════════ */
  /* ═══ DEMO SOBRE v2 — tokens do PRD (paleta oficial NoPaper/NoPlay) ═══ */
  :root {
    --np-purple:#4C3189; --np-lilac:#9381BB; --np-purple-dark:#352664;
    --np-lilac-light:#D3B7D9; --np-petrol:#1E374B; --np-night:#131428;
    --np-cyan:#1FB6D5; --np-surface-c:#F4F3F8; --np-gray-lavender:#776D8A;
  }
  .np-surface { background: var(--np-surface-c); }
  .np-eyebrow { display:inline-block; font-size:0.8125rem; font-weight:700; letter-spacing:0.35em; text-transform:uppercase; margin-bottom:16px; }
  .np-eyebrow--purple { color: var(--np-purple); }
  .np-eyebrow--lilac { color: var(--np-lilac); }
  .np-eyebrow--lilacL { color: var(--np-lilac-light); }
  .np-h2 { font-family: var(--font); font-size: clamp(2rem, 4vw, 3rem); font-weight:700; letter-spacing:-0.02em; line-height:1.14; color: var(--np-night); text-wrap: balance; }
  .np-body { font-size:1.0625rem; line-height:1.75; color: var(--np-petrol); margin-top:20px; }
  .np-body strong { font-weight:600; color: var(--np-purple); }

  .np-ctx { max-width: 62rem; }
  .np-ctx__cols { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
  .np-problem-lines { margin-top:44px; list-style:none; padding:0; max-width:46rem; }
  .np-problem-lines li { display:flex; align-items:center; gap:16px; padding:16px 4px; color:var(--np-petrol); font-size:1rem; font-weight:600; }
  .np-problem-lines li + li { border-top:1px solid rgba(147,129,187,0.25); }
  .np-problem-lines .x { flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1.5px solid var(--np-lilac); color:var(--np-lilac); font-size:13px; font-weight:700; }

  .np-underline-wrap { position:relative; display:inline; }
  .np-underline-wrap svg { position:absolute; left:0; bottom:-8px; width:100%; height:10px; overflow:visible; }
  .np-underline-wrap .np-draw { stroke:var(--np-cyan); stroke-width:3.5; fill:none; stroke-linecap:round; }

  .np-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:32px; align-items:center; }
  .np-col-text { grid-column:1/7; }
  .np-col-visual { grid-column:7/13; }
  .np-features { margin-top:30px; list-style:none; padding:0; display:flex; flex-direction:column; gap:14px; }
  .np-features li { display:flex; align-items:center; gap:13px; font-size:1rem; font-weight:600; color:var(--np-petrol); transition:translate .25s ease; }
  .np-features li:hover { translate:4px 0; }
  .np-features .mk { flex-shrink:0; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--np-purple); transition:border-color .25s ease; }
  .np-features li:hover .mk { border-color:transparent transparent transparent var(--np-cyan); }

  .np-mock-wrap { position:relative; }
  .np-shot { display:block; width:100%; height:auto; border-radius:24px; border:1px solid rgba(76,49,137,0.10); box-shadow:0 24px 64px -32px rgba(19,20,40,0.25); will-change:transform; }
  .np-sat { position:absolute; display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:16px; background:rgba(255,255,255,0.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(76,49,137,0.12); box-shadow:0 24px 64px -32px rgba(19,20,40,0.25); font-size:13.5px; font-weight:700; color:var(--np-purple); will-change:transform; }
  .np-sat--a { top:-26px; right:-6px; }
  .np-sat--b { bottom:-22px; left:-10px; color:var(--np-petrol); }
  .np-sat .dot { width:8px; height:8px; border-radius:50%; background:var(--np-cyan); }

  .np-card { border-radius:28px; padding:clamp(36px,5vw,64px); max-width:56rem; will-change:transform; }
  .np-card .np-h2 { margin-top:14px; }
  .np-card .np-body { max-width:46rem; }
  .np-card--a { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--np-purple),var(--np-purple-dark)); margin-right:auto; }
  .np-card--a .np-h2 { color:#fff; }
  .np-card--a .np-h2 .np-cy { color:var(--np-cyan); }
  .np-card--a .np-body { color:rgba(255,255,255,0.8); }
  .np-card--a .glyph-leak { position:absolute; top:-18%; right:-7%; width:300px; height:340px; pointer-events:none; }
  .np-card--b { position:relative; z-index:2; background:#fff; border:1px solid rgba(76,49,137,0.12); box-shadow:0 24px 64px -32px rgba(19,20,40,0.25); margin-left:auto; margin-top:-48px; padding-left:calc(clamp(36px,5vw,64px) + 18px); }
  .np-card--b::before { content:''; position:absolute; left:0; top:28px; bottom:28px; width:4px; border-radius:2px; background:linear-gradient(to bottom,var(--np-cyan),var(--np-purple)); }
  .np-card--b .np-h2 { color:var(--np-purple); }

  @media (max-width: 900px) {
    .np-ctx__cols { grid-template-columns:1fr; }
    .np-col-text, .np-col-visual { grid-column:1/-1; }
    .np-mock-wrap { margin-top:28px; }
    .np-card--b { margin-top:24px; }
    .np-sat--a { right:4px; }
    .np-sat--b { left:4px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .np-features li, .np-features .mk, .np-shot, .np-sat, .np-card { transition:none !important; }
  }

/* ══════════════════════════════════════════════════════════
   SERVIÇOS — Item 121: Console interativo (PRD aprovado).
   6 serviços clicáveis trocam a demo funcional do palco;
   animações em initServicosConsole (script.js).
══════════════════════════════════════════════════════════ */
  /* ═══ Item 121 — Console de Serviços interativo (tokens do sistema) ═══ */
  .np-console .sec-headline { max-width: 640px; margin-top: 10px; }

  .svc-console {
    display: grid;
    grid-template-columns: minmax(340px, 0.86fr) 1.14fr;
    gap: 48px;
    margin-top: 44px;
    align-items: start;
  }

  /* ── Lista de serviços ── */
  .svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .svc-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 16px;
    cursor: pointer;
    background: transparent;
    transition: background 0.25s ease;
  }
  .svc-item:hover { background: rgba(26, 42, 94, 0.04); }
  .svc-item.is-active { background: rgba(26, 42, 94, 0.06); }
  .svc-item:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }

  .svc-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, transparent);
    transition: transform 0.25s var(--ease), background 0.25s ease;
  }
  .svc-icon svg { width: 22px; height: 22px; }
  .svc-item.is-active .svc-icon { transform: scale(1.08); background: color-mix(in srgb, var(--c) 18%, transparent); }

  .svc-item h3 {
    font-size: 15.5px; font-weight: 700; color: var(--cinza-texto);
    margin: 2px 0 4px; transition: color 0.25s ease;
  }
  .svc-item.is-active h3 { color: var(--navy); }
  .svc-item p {
    font-size: 13px; line-height: 1.55; color: var(--cinza-texto);
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.3s var(--ease), opacity 0.25s ease, margin-top 0.3s ease;
  }
  .svc-item.is-active p { max-height: 80px; opacity: 1; margin-top: 2px; }

  /* ── Palco ── */
  .svc-stage {
    position: relative;
    border-radius: 24px;
    background: var(--navy);
    box-shadow: 0 24px 56px -28px rgba(26, 42, 94, 0.45);
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
  }
  .svc-stage__bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: var(--navy-deep);
    flex-shrink: 0;
  }
  .svc-stage__dots { display: flex; gap: 6px; }
  .svc-stage__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); display: block; }
  .svc-stage__play {
    width: 30px; height: 30px; border-radius: 50%;
    border: 0; background: var(--ciano); color: var(--navy-deep);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: transform 0.2s var(--ease), background 0.2s ease;
  }
  .svc-stage__play svg { width: 15px; height: 15px; margin-left: 1px; }
  .svc-stage__play:hover { transform: scale(1.1); background: var(--ciano-light); }
  .svc-stage__play:focus-visible { outline: 2px solid var(--ciano-light); outline-offset: 3px; }

  .svc-stage__demo {
    flex: 1;
    padding: 40px 36px;
    display: flex; flex-direction: column; justify-content: center;
    color: #fff;
    font-family: var(--font);
  }

  /* ── primitivas reutilizadas pelas 6 demos ── */
  .svcd-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ciano-light); margin-bottom: 18px; opacity: 0; transition: opacity 0.3s ease; }
  .svcd-label.on { opacity: 1; }

  .svcd-wave { display: flex; align-items: center; gap: 4px; height: 40px; margin-bottom: 24px; }
  .svcd-wave i { width: 4px; border-radius: 2px; background: var(--roxo-claro); opacity: 0.85; transition: height 0.3s ease; }

  .svcd-line { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; }
  .svcd-tc { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(255,255,255,0.5); flex-shrink: 0; width: 46px; opacity: 0; transition: opacity 0.3s ease; }
  .svcd-tc.on { opacity: 1; }
  .svcd-words { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.92); }
  .svcd-words .w { opacity: 0; transition: opacity 0.22s ease; }
  .svcd-words .w.on { opacity: 1; }

  .svcd-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 360px; }
  .svcd-chip {
    padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
    font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.9);
    opacity: 0; scale: 0.9; transition: opacity 0.35s var(--ease), scale 0.35s var(--ease);
  }
  .svcd-chip.on { opacity: 1; scale: 1; }

  .svcd-edit { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.92); max-width: 420px; }
  .svcd-strike { text-decoration: line-through; color: rgba(255,255,255,0.4); transition: opacity 0.3s ease; }
  .svcd-strike.gone { opacity: 0; display: none; }
  .svcd-replace { opacity: 0; color: var(--ciano-light); font-weight: 700; transition: opacity 0.3s ease; }
  .svcd-replace.on { opacity: 1; }
  .svcd-histo { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 12px; color: rgba(255,255,255,0.55); opacity: 0; transition: opacity 0.3s ease; }
  .svcd-histo.on { opacity: 1; }
  .svcd-histo svg { width: 14px; height: 14px; }

  .svcd-search { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 100px; padding: 12px 18px; max-width: 340px; margin-bottom: 22px; }
  .svcd-search svg { width: 16px; height: 16px; color: rgba(255,255,255,0.5); flex-shrink: 0; }
  .svcd-search-txt { font-size: 14px; color: #fff; font-family: ui-monospace, Menlo, monospace; }
  .svcd-caret { display: inline-block; width: 1px; height: 14px; background: var(--ciano-light); margin-left: 1px; animation: svcd-blink 0.9s step-end infinite; vertical-align: -2px; }
  @keyframes svcd-blink { 50% { opacity: 0; } }
  .svcd-result { display: flex; align-items: center; gap: 10px; padding: 10px 0; opacity: 0; translate: -8px 0; transition: opacity 0.3s ease, translate 0.3s ease; font-size: 13.5px; color: rgba(255,255,255,0.85); border-top: 1px solid rgba(255,255,255,0.08); }
  .svcd-result:first-child { border-top: 0; }
  .svcd-result.on { opacity: 1; translate: 0 0; }
  .svcd-result mark { background: transparent; color: var(--ciano-light); font-weight: 700; }
  .svcd-result .tag { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(255,255,255,0.45); flex-shrink: 0; }

  .svcd-chat { max-width: 380px; }
  .svcd-bubble { border-radius: 14px; padding: 12px 16px; font-size: 14px; line-height: 1.55; margin-bottom: 12px; max-width: 88%; opacity: 0; translate: 0 8px; transition: opacity 0.3s ease, translate 0.3s ease; }
  .svcd-bubble.on { opacity: 1; translate: 0 0; }
  .svcd-bubble--q { background: rgba(255,255,255,0.1); color: #fff; margin-left: auto; }
  .svcd-bubble--a { background: var(--ciano); color: var(--navy-deep); font-weight: 600; }
  .svcd-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
  .svcd-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-deep); opacity: 0.5; animation: svcd-typing 1.1s ease-in-out infinite; }
  .svcd-typing i:nth-child(2) { animation-delay: 0.15s; }
  .svcd-typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes svcd-typing { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

  .svcd-access { display: flex; flex-direction: column; gap: 14px; max-width: 340px; }
  .svcd-row { display: flex; align-items: center; gap: 12px; opacity: 0; translate: 0 6px; transition: opacity 0.3s ease, translate 0.3s ease; }
  .svcd-row.on { opacity: 1; translate: 0 0; }
  .svcd-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--roxo-claro); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--navy-deep); }
  .svcd-name { flex: 1; font-size: 13.5px; color: rgba(255,255,255,0.85); }
  .svcd-toggle { width: 36px; height: 20px; border-radius: 10px; background: rgba(255,255,255,0.15); position: relative; flex-shrink: 0; transition: background 0.3s ease; }
  .svcd-toggle::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: translate 0.3s var(--ease); }
  .svcd-toggle.on { background: var(--ciano); }
  .svcd-toggle.on::after { translate: 16px 0; }
  .svcd-lock { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--ciano-light); opacity: 0; scale: 0.85; transition: opacity 0.3s var(--ease), scale 0.3s var(--ease); }
  .svcd-lock.on { opacity: 1; scale: 1; }
  .svcd-lock svg { width: 15px; height: 15px; }

  @media (max-width: 1024px) {
    .svc-console { grid-template-columns: 1fr; gap: 28px; }
    .svc-stage { min-height: 340px; }
  }
  @media (max-width: 640px) {
    .svc-stage__demo { padding: 28px 22px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .svc-item, .svc-icon, .svc-item h3, .svc-item p,
    .svcd-label, .svcd-tc, .svcd-words .w, .svcd-chip, .svcd-strike,
    .svcd-replace, .svcd-histo, .svcd-result, .svcd-bubble, .svcd-row,
    .svcd-toggle, .svcd-toggle::after, .svcd-lock, .svc-stage__play {
      transition: none !important;
    }
    .svcd-typing i { animation: none !important; opacity: 1 !important; }
    .svcd-caret { animation: none !important; }
  }

/* ══════════════════════════════════════════════════════════
   SOBRE — Item 123: oradores clicáveis na arte do painel.
   Hotspots circulares com anel de luz pulsante sobre os avatares
   da timeline; clique abre o box flutuante com a fala transcrita
   (initOradoresFalas em script.js). Conteúdo fictício.
══════════════════════════════════════════════════════════ */
.np-shot-wrap { position: relative; }
.np-hot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: 5.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(31, 182, 213, 0.75);
  animation: np-hot-ping 2.4s ease-out infinite;
  z-index: 3;
}
.np-hot::before { /* área de toque ampliada (≥44px mesmo com círculo pequeno) */
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}
@keyframes np-hot-ping {
  0%   { box-shadow: 0 0 0 2px rgba(31, 182, 213, 0.75), 0 0 0 2px  rgba(31, 182, 213, 0.45); }
  70%  { box-shadow: 0 0 0 2px rgba(31, 182, 213, 0.75), 0 0 0 14px rgba(31, 182, 213, 0); }
  100% { box-shadow: 0 0 0 2px rgba(31, 182, 213, 0.75), 0 0 0 2px  rgba(31, 182, 213, 0); }
}
.np-hot--voto {
  box-shadow: 0 0 0 2px rgba(76, 49, 137, 0.7);
  animation-name: np-hot-ping-roxo;
}
@keyframes np-hot-ping-roxo {
  0%   { box-shadow: 0 0 0 2px rgba(76, 49, 137, 0.7), 0 0 0 2px  rgba(147, 129, 187, 0.5); }
  70%  { box-shadow: 0 0 0 2px rgba(76, 49, 137, 0.7), 0 0 0 14px rgba(147, 129, 187, 0); }
  100% { box-shadow: 0 0 0 2px rgba(76, 49, 137, 0.7), 0 0 0 2px  rgba(147, 129, 187, 0); }
}
.np-hot:hover, .np-hot:focus-visible, .np-hot.is-open {
  animation-play-state: paused;
  box-shadow: 0 0 0 3px #1FB6D5, 0 0 18px 4px rgba(31, 182, 213, 0.45);
}
.np-hot--voto:hover, .np-hot--voto:focus-visible, .np-hot--voto.is-open {
  box-shadow: 0 0 0 3px #4C3189, 0 0 18px 4px rgba(147, 129, 187, 0.5);
}
.np-hot:focus-visible { outline: 2px solid #1FB6D5; outline-offset: 3px; }

.np-quote {
  position: absolute;
  z-index: 8;
  width: min(300px, 78%);
  background: #fff;
  border: 1px solid rgba(76, 49, 137, 0.14);
  border-radius: 16px;
  box-shadow: 0 24px 56px -20px rgba(19, 20, 40, 0.4);
  padding: 16px 18px 18px;
  translate: 0 6px;
  opacity: 0;
  transition: opacity 0.25s ease, translate 0.25s var(--ease);
}
.np-quote.is-on { opacity: 1; translate: 0 0; }
.np-quote::after { /* seta apontando para o orador */
  content: '';
  position: absolute;
  bottom: -7px;
  left: var(--arrow-x, 50%);
  translate: -50% 0;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 1px solid rgba(76, 49, 137, 0.14);
  border-bottom: 1px solid rgba(76, 49, 137, 0.14);
  rotate: 45deg;
}
.np-quote__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  color: #776D8A;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.np-quote__close:hover { color: #4C3189; }
.np-quote__close:focus-visible { outline: 2px solid #1FB6D5; outline-offset: 2px; border-radius: 4px; }
.np-quote__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; padding-right: 22px; }
.np-quote__who { font-size: 13.5px; font-weight: 700; color: #4C3189; }
.np-quote__tc { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #776D8A; }
.np-quote__text { font-size: 13.5px; line-height: 1.6; color: #1E374B; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .np-hot, .np-hot--voto { animation: none; }
  .np-quote { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   SOBRE — Item 124: Antes/Depois do NoPlay (slider de
   comparação no Contexto). Porte vanilla do Reveal1;
   interação em initRevealAntesDepois (script.js).
══════════════════════════════════════════════════════════ */
  /* ═══ Item 124 — Antes/Depois do NoPlay (slider de comparação) ═══
     Porte vanilla do Reveal1: camada "antes" (acervo bruto, estático,
     p&b) recortada por clip-path sobre a camada "depois" (transcrição
     ao vivo animada). Arrastável por pointer + setas do teclado. */
  /* o wrapper .np-ctx limita o TEXTO a 62rem (item 120); o grid do
     slider escapa desse teto e usa o container inteiro — headline e
     parágrafos continuam com a medida de leitura de antes. */
  .np-ctx { max-width: none; }
  .np-ctx .np-h2 { max-width: 62rem; }
  .np-ctx__cols { max-width: 62rem; }
  .np-ctx__grid {
    display: grid;
    /* lista = só o que as linhas precisam (~30rem); o slider é a âncora
       visual e ocupa o resto (~580px no container de 1200) */
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
    margin-top: 44px;
  }
  .np-ctx__grid .np-problem-lines { margin-top: 0; }

  .np-reveal {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(76, 49, 137, 0.14);
    box-shadow: 0 24px 56px -20px rgba(19, 20, 40, 0.35);
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    --pos: 55%;
  }
  .np-reveal:focus-visible { outline: 3px solid #1FB6D5; outline-offset: 3px; }

  /* DEPOIS (fundo, cheia): transcrição acontecendo */
  .np-reveal__after {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #1E374B 0%, #131428 55%);
    padding: clamp(18px, 4%, 32px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .np-reveal__panel-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1FB6D5;
    margin: 0 0 14px;
  }
  .np-reveal__panel-label::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1FB6D5;
    animation: np-rev-live 1.4s ease-in-out infinite;
  }
  @keyframes np-rev-live { 50% { opacity: 0.3; } }
  .np-reveal__wave { display: flex; align-items: center; gap: 3.5px; height: 38px; margin-bottom: 22px; }
  .np-reveal__wave i {
    width: 3.5px;
    border-radius: 2px;
    background: #9381BB;
    height: 20%;
    animation: np-rev-bar 1.1s ease-in-out infinite alternate;
  }
  @keyframes np-rev-bar { from { height: 15%; } to { height: var(--h, 70%); } }
  .np-reveal__lines { display: flex; flex-direction: column; gap: 10px; min-height: 108px; }
  .np-reveal__line { display: flex; gap: 9px; align-items: baseline; }
  .np-reveal__line .tc { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: rgba(255,255,255,0.5); flex-shrink: 0; opacity: 0; transition: opacity 0.3s ease; }
  .np-reveal__line .tc.on { opacity: 1; }
  .np-reveal__line .tx { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.92); }
  .np-reveal__line .tx .w { opacity: 0; transition: opacity 0.2s ease; }
  .np-reveal__line .tx .w.on { opacity: 1; }

  /* ANTES (por cima, recortada): vídeo bruto estático, p&b */
  .np-reveal__before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  }
  .np-reveal__before img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(0.92) brightness(0.82);
  }
  .np-reveal__before-veil {
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(to bottom, rgba(0,0,0,0.12) 0 2px, transparent 2px 5px),
      linear-gradient(to top, rgba(19, 20, 40, 0.72) 0%, rgba(19, 20, 40, 0.18) 45%);
  }
  .np-reveal__before-info {
    position: absolute;
    left: clamp(16px, 4%, 28px);
    bottom: clamp(14px, 4%, 24px);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .np-reveal__before-info .tc {
    font-family: ui-monospace, Menlo, monospace;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
  }
  .np-reveal__before-info .msg {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
  }

  /* divisor + alça */
  .np-reveal__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 3px;
    translate: -50% 0;
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    z-index: 4;
    pointer-events: none;
  }
  .np-reveal__handle {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #1FB6D5;
    border: 3px solid #fff;
    box-shadow: 0 6px 18px rgba(19, 20, 40, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #131428;
    transition: scale 0.15s ease;
  }
  .np-reveal.is-dragging .np-reveal__handle { scale: 1.12; }
  .np-reveal__handle svg { width: 18px; height: 18px; }

  /* etiquetas */
  .np-reveal__tag {
    position: absolute;
    top: 14px;
    z-index: 5;
    padding: 6px 13px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
  }
  .np-reveal__tag--before { left: 14px; background: rgba(19, 20, 40, 0.7); color: rgba(255, 255, 255, 0.9); }
  .np-reveal__tag--after { right: 14px; background: rgba(31, 182, 213, 0.85); color: #131428; }

  @media (max-width: 900px) {
    .np-ctx__grid { grid-template-columns: 1fr; gap: 32px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .np-reveal__panel-label::before { animation: none; }
    .np-reveal__wave i { animation: none; height: var(--h, 60%); }
    .np-reveal__line .tc, .np-reveal__line .tx .w { transition: none; }
    .np-reveal__handle { transition: none; }
  }


/* ══════════════════════════════════════════════════════════
   ESTRUTURA — Item 130: ledger tipográfico de públicos (Ato 1)
   + ficha técnica viva em 3 capacidades com janela de produto
   sticky e painel de governança em HTML (Ato 2). Aprovado em demo.
══════════════════════════════════════════════════════════ */
/* ── Ato 1: ledger de públicos ── */
.est-ledger {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  max-width: 1160px;
  margin: 44px auto 0;
}
.est-ledger__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.est-row {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--cinza-borda);
  text-align: left;
  font-family: var(--font);
  /* item 131: 4 públicos (eram 7) — linhas maiores p/ equilibrar com o painel */
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #66718E;
  padding: 24px 4px 24px 32px;
  position: relative;
  cursor: pointer;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.est-row:first-child { border-top: 1px solid var(--cinza-borda); }
.est-row::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  translate: 0 -50%;
  width: 14px;
  height: 14px;
  background: var(--ciano);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.25s ease, scale 0.25s ease;
}
.est-row:hover { color: var(--navy); }
.est-row:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; border-radius: 4px; }
.est-row.active { color: var(--navy); }
.est-row.active::before { opacity: 1; scale: 1; }

/* painel de prova */
.est-proof {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--cinza-borda);
  background: var(--branco);
  box-shadow: 0 26px 54px -28px rgba(26, 42, 94, 0.28);
}
.est-proof__media {
  position: relative;
  aspect-ratio: 16 / 9.4;
  background: var(--navy-deep);
}
.est-proof__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.est-proof__media video.active { opacity: 1; }
.est-proof__caption {
  padding: 20px 24px 22px;
}
.est-proof__phrase {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy);
  min-height: 2.9em;
  text-wrap: pretty;
}
.est-proof__phrase .w { opacity: 0; translate: 0 6px; display: inline-block;
  transition: opacity 0.35s ease, translate 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.est-proof__phrase .w.on { opacity: 1; translate: 0 0; }

/* ── Ato 2: ficha técnica viva ── */
.est-ficha {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-top: 8px;
}
.est-groups { display: flex; flex-direction: column; gap: 8px; }
.est-group {
  text-align: left;
  font-family: var(--font);
  padding: 18px 18px 18px 22px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.est-group:hover { background: rgba(26, 42, 94, 0.045); }
.est-group:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.est-group.active { background: var(--branco); box-shadow: 0 14px 34px -20px rgba(26, 42, 94, 0.30); }
.est-group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 800;
  color: var(--navy);
}
.est-group__title::before {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: var(--cinza-borda);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  transition: background 0.25s ease;
}
.est-group.active .est-group__title::before { background: var(--ciano); }
.est-group__items {
  list-style: none;
  margin: 0;
  padding: 0 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.est-group__items li {
  font-size: clamp(14.5px, 1.1vw, 16px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--cinza-texto);
}

/* janela de produto sticky */
.est-window {
  position: sticky;
  top: calc(clamp(60px, 7.5vw, 150px) + 24px);
  border-radius: 20px;
  overflow: hidden;
  background: #0D1634;
  border: 1px solid rgba(17, 29, 69, 0.18);
  box-shadow: 0 30px 60px -24px rgba(13, 22, 52, 0.5);
}
.est-window__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.est-window__dots { display: flex; gap: 6px; }
.est-window__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.est-window__cap {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}
.est-window__view { position: relative; aspect-ratio: 16 / 10; }
.est-pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.est-pane.active { opacity: 1; pointer-events: auto; }
.est-pane video { width: 100%; height: 100%; object-fit: cover; }

/* painel de governança (HTML puro — prova de permissões/trilha) */
.est-gov {
  height: 100%;
  padding: clamp(16px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font);
}
.est-gov__table {
  flex: 1;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  align-content: center;
  gap: 2px 0;
  font-size: clamp(11px, 1vw, 13.5px);
}
.est-gov__table > span {
  padding: 8px 10px;
  display: flex;
  align-items: center;
}
.est-gov__hdr { color: rgba(255,255,255,0.55); font-weight: 700; letter-spacing: 0.04em; }
.est-gov__hdr--c { justify-content: center; }
.est-gov__perm { color: rgba(255,255,255,0.88); font-weight: 600; background: rgba(255,255,255,0.045); border-radius: 8px 0 0 8px; }
.est-gov__cell { justify-content: center; background: rgba(255,255,255,0.045); }
.est-gov__cell:nth-child(4n) { border-radius: 0 8px 8px 0; }
.est-gov__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ciano);
  box-shadow: 0 0 8px rgba(0, 180, 216, 0.55);
}
.est-gov__dot--off { background: rgba(255,255,255,0.16); box-shadow: none; }
.est-gov__trail {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 180, 216, 0.09);
  border: 1px solid rgba(0, 180, 216, 0.22);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  align-items: center;
  gap: 8px;
}
.est-gov__trail::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ciano);
  animation: est-gov-live 1.6s ease-in-out infinite;
}
@keyframes est-gov-live { 50% { opacity: 0.3; } }

/* linha de conformidade */
.est-compliance {
  margin: 40px auto 0;
  text-align: center;
  font-family: var(--font);
  font-size: clamp(12.5px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #66718E;
}
.est-compliance span { white-space: nowrap; }
.est-compliance i {
  font-style: normal;
  color: var(--ciano);
  margin: 0 10px;
}

@media (max-width: 900px) {
  .est-ledger { grid-template-columns: 1fr; gap: 28px; }
  .est-row { font-size: 19px; padding-block: 13px; }
  .est-ficha { grid-template-columns: 1fr; gap: 28px; }
  .est-window { position: relative; top: 0; order: -1; }
  .est-compliance { display: flex; flex-direction: column; gap: 6px; }
  .est-compliance i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .est-row, .est-row::before, .est-group, .est-group__title::before { transition: none; }
  .est-proof__media video, .est-pane { transition: none; }
  .est-proof__phrase .w { transition: none; opacity: 1; translate: 0 0; }
  .est-gov__trail::before { animation: none; }
}

/* ── Item 130b: transcrição simulada ao vivo no painel de prova —
   lower-third de transmissão sobre os vídeos de plenária. ── */
.est-live {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 20px 14px;
  background: linear-gradient(to top, rgba(13, 22, 52, 0.88) 0%, rgba(13, 22, 52, 0.55) 55%, transparent 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.est-live.on { opacity: 1; }
.est-live__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 180, 216, 0.28);
  border: 1px solid rgba(0, 180, 216, 0.45);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 8px;
}
.est-live__chip::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ciano);
  animation: est-live-pulse 1.4s ease-in-out infinite;
}
@keyframes est-live-pulse { 50% { opacity: 0.3; } }
.est-live__line {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font);
  min-height: 1.5em;
}
.est-live__line .tc {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.est-live__line .tx {
  font-size: clamp(13.5px, 1.1vw, 15.5px);
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
}
.est-live__line .tx .w { opacity: 0; transition: opacity 0.18s ease; }
.est-live__line .tx .w.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .est-live { transition: none; }
  .est-live__chip::before { animation: none; }
  .est-live__line .tx .w { transition: none; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   RESULTADOS — Item 132: FeatureCarousel (roda de pílulas navy +
   baralho de cartões com micro-demos vivas; porte vanilla do
   componente motion/react aprovado em demo) + Ciclo NoPlay (play
   liquid + pulso pelas 5 estações fixas do fluxo).
══════════════════════════════════════════════════════════ */
/* respiro extra na 1ª seção da aba: o recorte branco do navbar (curva da
   logo) desce ~40px além da barra — sem isso o headline nasce sob ele */
#tab-resultados > section:first-of-type { padding-top: clamp(52px, 5vw, 80px); }

/* ── Ato 1: "Transformações ao vivo" — os 5 boxes De→Para são os
   CONTROLES: cada um dispara sua micro-demonstração na janela de produto
   (a dor antiga é riscada e a solução acontece na tela). ── */
.tfx-pane {
  position: absolute;
  inset: 0;
  padding: clamp(18px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  font-family: var(--font);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.tfx-pane.active { opacity: 1; pointer-events: auto; }

/* a dor antiga: riscada quando a demo resolve */
.tfx-antes {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.07);
  font-size: clamp(11.5px, 1vw, 13.5px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  transition: opacity 0.4s ease;
}
.tfx-antes::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; top: 50%;
  height: 2px;
  background: var(--ciano);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.tfx-pane.go .tfx-antes { opacity: 0.45; }
.tfx-pane.go .tfx-antes::after { transform: scaleX(1); }

/* elementos "depois" genéricos: entram quando .go */
.tfx-in {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.45s ease, translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}
.tfx-pane.go .tfx-in { opacity: 1; translate: 0 0; }

/* 1 · transcrição: waveform + linhas ao vivo */
.tfx-wave { display: flex; align-items: center; gap: 3.5px; height: 30px; }
.tfx-wave i {
  width: 3.5px;
  border-radius: 2px;
  background: var(--roxo-claro, #A98FD0);
  height: 20%;
}
.tfx-pane.go .tfx-wave i { animation: tfx-bar 1.1s ease-in-out infinite alternate; animation-delay: var(--wd, 0s); }
@keyframes tfx-bar { from { height: 15%; } to { height: var(--h, 70%); } }
.tfx-line {
  font-size: clamp(13.5px, 1.3vw, 17px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
  min-height: 1.55em;
}
.tfx-line .tc { font-family: ui-monospace, Menlo, monospace; font-size: 0.8em; color: rgba(255,255,255,0.5); margin-right: 9px; }
.tfx-line .w { opacity: 0; transition: opacity 0.2s ease; }
.tfx-line .w.on { opacity: 1; }

/* 2 · busca: campo digitado + resultados */
.tfx-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(0, 180, 216, 0.4);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 600;
  color: #fff;
  max-width: 420px;
}
.tfx-search::before {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow: 4px 5px 0 -2.5px rgba(255,255,255,0.55);
}
.tfx-search .caret {
  width: 2px; height: 1.1em;
  background: var(--ciano);
  animation: tfx-caret 0.9s steps(1) infinite;
}
@keyframes tfx-caret { 50% { opacity: 0; } }
.tfx-hit {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  font-size: clamp(12.5px, 1.1vw, 15px);
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
}
.tfx-hit .tc { font-family: ui-monospace, Menlo, monospace; font-size: 0.82em; color: var(--ciano-light, #3ECFE8); }
.tfx-hit mark { background: rgba(0, 180, 216, 0.3); color: #fff; border-radius: 3px; padding: 0 3px; }

/* 3 · revisão: fala corrigida + trilha */
.tfx-edit {
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  max-width: 620px;
}
.tfx-edit .old { color: rgba(255, 255, 255, 0.45); text-decoration: line-through; text-decoration-color: rgba(255,110,110,0.8); }
.tfx-edit .new { color: var(--ciano-light, #3ECFE8); font-weight: 700; }
.tfx-log {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(0, 180, 216, 0.1);
  border: 1px solid rgba(0, 180, 216, 0.28);
  font-size: clamp(11.5px, 1vw, 13.5px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.tfx-log::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); }

/* 4 · organização: pastas com contadores */
.tfx-folders { display: flex; gap: 12px; flex-wrap: wrap; }
.tfx-folder {
  flex: 1;
  min-width: 150px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.tfx-folder b {
  display: block;
  font-size: clamp(12.5px, 1.1vw, 15px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 4px;
}
.tfx-folder span { font-size: clamp(11px, 1vw, 13px); font-weight: 600; color: var(--ciano-light, #3ECFE8); }

/* 5 · valor: entregas prontas */
.tfx-outs { display: flex; gap: 12px; flex-wrap: wrap; }
.tfx-out {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: clamp(12px, 1.05vw, 14.5px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
.tfx-out::before {
  content: '';
  width: 12px; height: 12px;
  flex-shrink: 0;
  background: var(--ciano);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.tfx-out small { display: block; font-size: 0.82em; font-weight: 600; color: rgba(255,255,255,0.55); }

/* ── Ato 1 (v3): porte vanilla do FeatureCarousel (motion/react) com a
   identidade NoPlay — roda vertical de pílulas no painel navy (wrap
   infinito, fade por distância, máscaras de gradiente) + baralho de
   cartões à direita (ativo pleno; prev/next espiando com rotação ±3°,
   blur e escala). Cada cartão = micro-demo viva do produto. ── */
.fcx {
  max-width: 1160px;
  margin: 44px auto 0;
  display: flex;
  border-radius: clamp(28px, 3.5vw, 52px);
  overflow: hidden;
  border: 1px solid rgba(26, 42, 94, 0.12);
  box-shadow: 0 34px 70px -30px rgba(17, 29, 69, 0.4);
  min-height: 540px;
}

/* painel esquerdo: a roda de pílulas */
.fcx__panel {
  position: relative;
  width: 40%;
  background: linear-gradient(160deg, #1E2A56 0%, var(--navy-deep, #111D45) 70%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.fcx__panel::before {
  content: '';
  position: absolute;
  top: -140px; right: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,216,0.14), transparent 68%);
  pointer-events: none;
}
.fcx__fade {
  position: absolute;
  left: 0; right: 0;
  height: 84px;
  z-index: 4;
  pointer-events: none;
}
.fcx__fade--t { top: 0; background: linear-gradient(to bottom, #17224A, rgba(23,34,74,0)); }
.fcx__fade--b { bottom: 0; background: linear-gradient(to top, #111D45, rgba(17,29,69,0)); }
.fcx__wheel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 460px;
}
.fcx-pill {
  position: absolute;
  left: clamp(20px, 3.5vw, 52px);
  top: 50%;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font);
  font-size: clamp(11.5px, 1vw, 13.5px);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  /* a mola do motion/react vira uma curva de saída longa */
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.65s ease, background 0.4s ease,
              color 0.4s ease, border-color 0.4s ease;
}
.fcx-pill { transform: translateY(calc(-50% + var(--wy, 0px))); }
.fcx-pill:hover { border-color: rgba(255,255,255,0.45); color: #fff; }
.fcx-pill:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.fcx-pill svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.55; transition: opacity 0.4s ease; }
.fcx-pill.active {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
  z-index: 5;
}
.fcx-pill.active svg { opacity: 1; }

/* palco direito: o baralho de cartões-demo */
.fcx__stage {
  flex: 1;
  position: relative;
  background: var(--cinza-light, #F5F5F8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px) clamp(22px, 3.5vw, 48px);
  overflow: hidden;
  border-left: 1px solid rgba(26, 42, 94, 0.08);
}
.fcx__deck {
  position: relative;
  width: 100%;
  max-width: 430px;
  aspect-ratio: 4 / 4.6;
}
.fcx-card {
  position: absolute;
  inset: 0;
  border-radius: clamp(22px, 2.4vw, 34px);
  overflow: hidden;
  background: #0D1634;
  border: 6px solid var(--branco);
  box-shadow: 0 26px 54px -22px rgba(13, 22, 52, 0.5);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease, filter 0.45s ease;
}
.fcx-card.is-active { transform: none; opacity: 1; z-index: 20; filter: none; }
.fcx-card.is-prev {
  transform: translateX(-92px) scale(0.85) rotate(-3deg);
  opacity: 0.4;
  filter: blur(2px) brightness(0.75);
  z-index: 10;
  pointer-events: none;
}
.fcx-card.is-next {
  transform: translateX(92px) scale(0.85) rotate(3deg);
  opacity: 0.4;
  filter: blur(2px) brightness(0.75);
  z-index: 10;
  pointer-events: none;
}
.fcx-card.is-hidden { transform: scale(0.7); opacity: 0; z-index: 0; pointer-events: none; }

/* a micro-demo dentro do cartão (reusa os elementos tfx-*) */
.fcx-card .tfx-pane {
  position: absolute;
  inset: 0;
  padding: clamp(18px, 2.2vw, 28px);
  padding-bottom: 128px;
  justify-content: flex-start;
  padding-top: clamp(52px, 5vw, 64px);
}
.fcx-card__live {
  position: absolute;
  top: 18px; left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.75);
  z-index: 6;
}
.fcx-card__live::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff;
  animation: fcx-live 1.6s ease-in-out infinite;
}
@keyframes fcx-live { 50% { opacity: 0.35; } }

.fcx-card__foot {
  position: absolute;
  inset: auto 0 0 0;
  padding: 84px 24px 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.32) 62%, transparent);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.4s ease 0.15s, translate 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.fcx-card.is-active .fcx-card__foot { opacity: 1; translate: 0 0; }
.fcx-card__badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--branco);
  color: var(--navy);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.fcx-card__desc {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .fcx { flex-direction: column; }
  .fcx__panel { width: 100%; min-height: 330px; justify-content: center; }
  .fcx-pill { left: 50%; transform: translate(-50%, calc(-50% + var(--wy, 0px))); }
  .fcx__wheel { min-height: 330px; }
  .fcx__stage { border-left: none; border-top: 1px solid rgba(26, 42, 94, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .fcx-pill, .fcx-card, .fcx-card__foot { transition: none; }
  .fcx-card__live::before { animation: none; }
}

/* ── Ato 2: Ciclo NoPlay ── */
.ciclo-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin-inline: auto;
  margin-top: 40px;
}
.ciclo-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.ciclo-ring ellipse {
  fill: none;
  stroke: rgba(26, 42, 94, 0.13);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
}
.ciclo-pulse {
  position: absolute;
  left: 0; top: 0;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--ciano);
  box-shadow: 0 0 14px 3px rgba(0, 180, 216, 0.55);
  z-index: 8;
  pointer-events: none;
  opacity: 0;
}
/* estação acesa pela passagem do pulso */
.ciclo-wrapper .diag-node { transition: opacity 0.3s ease; }
.ciclo-wrapper .diag-node .diag-node__dot::after { animation: none; }
.ciclo-wrapper .diag-node .diag-node__label { animation: none; }
.ciclo-wrapper .diag-node.is-lit .diag-node__dot { transform: scale(1.5); }
.ciclo-wrapper .diag-node.is-lit .diag-node__dot::after {
  animation: diag-ping 1.1s var(--ease) 2;
}
.ciclo-wrapper .diag-node.is-lit .diag-node__label { font-weight: 800; }

/* chip de microcopy junto à estação ativa */
.ciclo-chip {
  position: absolute;
  z-index: 9;
  max-width: 210px;
  padding: 9px 13px;
  border-radius: 12px;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: 0 14px 30px -12px rgba(17, 29, 69, 0.45);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.3s ease, translate 0.3s ease;
  pointer-events: none;
  text-wrap: pretty;
}
.ciclo-chip.on { opacity: 1; translate: 0 0; }

/* convite pós-ciclo, junto ao play */
.ciclo-invite {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(84px, 12vw, 118px));
  translate: -50% 8px;
  z-index: 9;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 34px -14px rgba(26, 42, 94, 0.5);
  opacity: 0;
  transition: opacity 0.35s ease, translate 0.35s ease;
  pointer-events: none;
  white-space: nowrap;
}
.ciclo-invite span { color: var(--ciano); margin-left: 4px; }
.ciclo-invite.on { opacity: 1; translate: -50% 0; }

/* batida do play quando o pulso entra nele */
@keyframes ciclo-beat {
  0%, 100% { scale: 1; }
  35%      { scale: 1.045; }
}
.ciclo-wrapper .diag-center.beat .pc-play { animation: ciclo-beat 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1; }

@media (max-width: 900px) {
  .ciclo-chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tfx-pane, .tfx-in, .tfx-antes, .tfx-antes::after { transition: none; }
  .tfx-pane.go .tfx-wave i { animation: none; height: var(--h, 60%); }
  .tfx-line .w { transition: none; opacity: 1; }
  .tfx-search .caret { animation: none; }

  .ciclo-pulse, .ciclo-chip, .ciclo-invite { display: none; }
  .ciclo-wrapper .diag-node.is-lit .diag-node__dot { transform: none; }
  .ciclo-wrapper .diag-center.beat .pc-play { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   CTA — Item 144: convite antigravitacional. O play da marca
   nasce no espaço branco à esquerda do celular (mola de entrada
   via IO, dentro dos 3 primeiros segundos em cena), levita com
   sombra que respira em contraponto, e carrega o chip premium
   "Clique para assistir ao vídeo". Some após cumprir a missão.
══════════════════════════════════════════════════════════ */
.cta-scene__invite {
  position: absolute;
  left: -6%;
  top: 24%;
  z-index: 8;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, scale 0.2s ease;
}
.cta-scene__invite.is-born { pointer-events: auto; animation: cta-invite-birth 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.cta-scene__invite.is-done { opacity: 0 !important; pointer-events: none; transition: opacity 0.5s ease; }
@keyframes cta-invite-birth {
  0%   { opacity: 0; scale: 0.55; translate: 0 18px; }
  70%  { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}
.cta-scene__invite:hover { scale: 1.05; }
.cta-scene__invite:active { scale: 0.96; }
.cta-scene__invite:focus-visible { outline: 3px solid var(--ciano); outline-offset: 6px; border-radius: 18px; }

.cta-scene__invite-chip {
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--navy-deep);
  color: #fff;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgba(17, 29, 69, 0.5);
}
.cta-scene__invite-chip span { color: var(--ciano); margin-left: 4px; }

/* levitação: o play sobe e desce; a sombra elíptica respira em oposição */
.cta-scene__invite-float {
  position: relative;
  display: block;
  animation: cta-invite-float 4.2s ease-in-out infinite;
}
.cta-scene__invite-float img {
  display: block;
  width: clamp(92px, 8.5vw, 128px);
  height: auto;
}
.cta-scene__invite-float::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -22px;
  translate: -50% 0;
  width: 62%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(26, 42, 94, 0.28), transparent 70%);
  animation: cta-invite-shadow 4.2s ease-in-out infinite;
}
@keyframes cta-invite-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}
@keyframes cta-invite-shadow {
  0%, 100% { scale: 1; opacity: 1; }
  50%      { scale: 0.78; opacity: 0.55; }
}

@media (max-width: 900px) {
  .cta-scene__invite { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-scene__invite.is-born { animation: none; opacity: 1; pointer-events: auto; }
  .cta-scene__invite-float, .cta-scene__invite-float::after { animation: none; }
  .cta-scene__invite:hover, .cta-scene__invite:active { scale: 1; }
}

/* ═══ Item 145 — "O Circuito da Transformação" (seção Transforme) ═══
   Cada item da esquerda se conecta ao seu PAR da direita através do play:
   arco SVG discreto + pulso ciano atravessando, par acendendo junto,
   chips de prova junto às fotos (entrada bruta → saída viva), fotos
   levitando com paralaxe sutil. Play central intocado (só um beat de
   1.5% quando o pulso o atravessa). */

/* itens viram alvos interativos (JS adiciona tabindex/role) */
.pcp-item {
  cursor: pointer;
  border-radius: 12px;
  padding: 6px 8px;
  margin: -6px -8px;
  transition: opacity 0.3s ease, background 0.25s ease;
}
.pcp-item:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
/* com um par ativo, os irmãos recuam */
.tf-morph.tfc-live .pcp-item { opacity: 0.45; }
.tf-morph.tfc-live .pcp-item.tfc-on { opacity: 1; background: rgba(0, 180, 216, 0.06); }
.pcp-item .pcp-icon { transition: background 0.3s ease, color 0.3s ease, scale 0.3s ease; }
.pcp-item.tfc-on .pcp-icon {
  background: var(--navy);
  color: #fff;
  scale: 1.08;
}
.pcp-item .pcp-title { transition: color 0.3s ease; }
.pcp-item.tfc-on .pcp-title { color: var(--navy); }

/* ── arcos + pulso (overlay SVG desenhado por JS) ── */
.tfc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
.tfc-arc {
  fill: none;
  stroke: rgba(26, 42, 94, 0.10);
  stroke-width: 1.5;
  stroke-dasharray: 4 7;
  transition: stroke 0.35s ease;
}
.tfc-arc.on { stroke: rgba(0, 180, 216, 0.55); }
.tfc-pulse {
  position: absolute;
  left: 0; top: 0;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--ciano);
  box-shadow: 0 0 12px 3px rgba(0, 180, 216, 0.5);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  offset-rotate: 0deg;
}
.tfc-pulse.run {
  animation: tfc-run 0.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}
@keyframes tfc-run {
  0%   { opacity: 0; offset-distance: 0%; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}

/* ── beat sutil do play quando o pulso o atravessa ── */
.tf-morph .pc-play.tfc-beat { animation: tfc-beat 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1; }
@keyframes tfc-beat { 0%, 100% { scale: 1; } 40% { scale: 1.015; } }

/* ── chips de prova junto às fotos ── */
.tfc-chip {
  position: absolute;
  z-index: 7;
  max-width: 230px;
  padding: 10px 14px;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 16px 34px -14px rgba(17, 29, 69, 0.4);
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.35s ease, translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.tfc-chip.on { opacity: 1; translate: 0 0; }
/* entrada bruta: cartão claro com meta em mono */
.tfc-chip--in {
  left: 2%;
  top: 8%;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  color: var(--cinza-texto);
  font-weight: 600;
}
.tfc-chip--in .tc { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--navy); display: block; margin-bottom: 2px; }
/* saída viva: navy com texto digitando */
.tfc-chip--out {
  right: 2%;
  top: 6%;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}
.tfc-chip--out::before {
  content: 'COM O NOPLAY';
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ciano-light, #3ECFE8);
  margin-bottom: 4px;
}
.tfc-chip--out .w { opacity: 0; transition: opacity 0.18s ease; }
.tfc-chip--out .w.on { opacity: 1; }

/* ── fotos: levitação dessincronizada + halo que acende com o lado ── */
.tf-morph.tfc-anim .pc-figure--man .pcp-imgwrap { animation: tfc-lev 5.2s ease-in-out infinite; }
.tf-morph.tfc-anim .pc-figure--woman .pcp-imgwrap { animation: tfc-lev 6.1s ease-in-out 0.9s infinite; }
@keyframes tfc-lev { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.pcp-imgwrap::before { transition: opacity 0.4s ease; }
.pc-persona.tfc-side .pcp-imgwrap::before { opacity: 1 !important; }
.pcp-img { transition: transform 0.25s ease-out; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .pcp-item, .pcp-item .pcp-icon, .pcp-item .pcp-title, .tfc-chip, .tfc-arc { transition: none; }
  .tfc-pulse { display: none; }
  .tf-morph .pc-play.tfc-beat { animation: none; }
  .tf-morph.tfc-anim .pc-figure--man .pcp-imgwrap,
  .tf-morph.tfc-anim .pc-figure--woman .pcp-imgwrap { animation: none; }
  .tfc-chip--out .w { transition: none; opacity: 1; }
  .pcp-img { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   SOBRE — Item 146: a tela do painel de oradores roda cenas
   REAIS do vídeo institucional; a cena troca junto com a fala
   do orador clicado (crossfade curto). Hotspots ficam acima.
══════════════════════════════════════════════════════════ */
.np-screen {
  position: absolute;
  left: 0.2%;
  top: 0;
  width: 99%;
  height: 73.8%;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  pointer-events: none;
  z-index: 1;
}
.np-screen__vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.np-screen__vid.dip { opacity: 0.2; }
.np-hot { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .np-screen__vid { transition: none; }
}