/* R2B Agency · landing de vendas
   Layout: referencia-estilo/ (palco preto, faixas #111, títulos de exposição, cartões 28px, pílulas, seletores 36px).
   Marca: Brandbook 2.1 (90-COMPARTILHADO/marca/r2b-tokens.css). Sun Glare é o sinal de ação, só sobre escuro
   e abaixo de 8% da superfície. Laranja e violeta nunca na mesma superfície. Logo sem 3D nem efeito. */
:root {
  /* Marca */
  --darkest-hour: #201E1F; --cloud-dancer: #F0EEE9; --sun-glare: #DAFF02;
  --blue-violet: #685BC7; --exuberant-orange: #FE572A; --electric-rose: #EA4A7E; --deep-lagoon: #1BA39C;
  /* Superfícies da referência */
  --palco: #000000; --carbono: #111111; --controle: #333336; --polar: #F0EEE9;
  --texto: #F0EEE9; --texto-2: rgba(240, 238, 233, .64); --linha: rgba(240, 238, 233, .14);
  /* Tipografia (Archivo no lugar de SF Pro; Plex Mono para rótulos) */
  --f-titulo: "Archivo", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --hero: clamp(44px, 7.4vw, 104px); --secao: clamp(34px, 5vw, 64px);
  /* Forma */
  --raio-cartao: 28px; --raio-chip: 36px; --raio-pilula: 980px;
  --largura: 1240px; --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { background: var(--carbono); scroll-behavior: auto; }
body { margin: 0; background: var(--carbono); color: var(--texto); font: 400 17px/1.47 var(--f-titulo); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--sun-glare); color: var(--darkest-hour); }
:focus-visible { outline: 2px solid var(--sun-glare); outline-offset: 3px; }
.cont { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--sun-glare); color: var(--darkest-hour); padding: 10px 16px; border-radius: 999px; }
.pular:focus { left: 8px; }

/* ---------- Tipografia ---------- */
.titulo-hero { font: 800 var(--hero)/.98 var(--f-titulo); letter-spacing: -.03em; text-transform: uppercase; margin: 0; }
.titulo-secao-grande { font: 700 var(--secao)/1.02 var(--f-titulo); letter-spacing: -.025em; margin: 0 0 24px; max-width: 18ch; }
.apagado { color: rgba(240, 238, 233, .38); }
.sinal, .destaque { color: var(--sun-glare); }
.rotulo-mono { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 20px; }
.apoio { color: var(--texto-2); font-size: 19px; line-height: 1.5; max-width: 52ch; margin: 0; }
.no { display: inline-block; width: .52em; height: .52em; border-radius: 50%; background: var(--sun-glare); }
.no.grande { width: 34px; height: 34px; box-shadow: 0 0 60px 10px rgba(218, 255, 2, .35); }

/* ---------- Pílulas (980px) ---------- */
.pilula { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: var(--raio-pilula); padding: 15px 26px; font: 600 15px/1 var(--f-titulo); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s; will-change: transform; }
.pilula-acao { background: var(--sun-glare); color: var(--darkest-hour); }
.pilula-acao:hover { background: #e6ff4d; }
.pilula-contorno { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px rgba(240, 238, 233, .35); }
.pilula-contorno:hover { box-shadow: inset 0 0 0 1px var(--texto); }
.pilula-compacta { padding: 9px 16px; font-size: 13px; }
.pilula-grande { padding: 20px 34px; font-size: 18px; }
.seta { transition: transform .4s var(--ease); }
.pilula:hover .seta { transform: translateX(4px); }
.icone-whats { width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-13.4 7.8L3 21l1.3-4.4A9 9 0 1 1 21 12z'/%3E%3Cpath d='M9 10c0 3 2 5 5 5l1-1.5-2-1-1 .8c-1-.4-1.9-1.3-2.3-2.3l.8-1-1-2L9 10z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-13.4 7.8L3 21l1.3-4.4A9 9 0 1 1 21 12z'/%3E%3Cpath d='M9 10c0 3 2 5 5 5l1-1.5-2-1-1 .8c-1-.4-1.9-1.3-2.3-2.3l.8-1-1-2L9 10z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Navegação ---------- */
.nav { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 56px; background: rgba(17, 17, 17, .72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--linha); transition: transform .5s var(--ease); }
.nav.escondida { transform: translateY(-100%); }
.nav-dentro { max-width: var(--largura); height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.nav-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.nav-logo img { height: 20px; width: auto; }
.nav-logo span { font: 600 17px/1 var(--f-titulo); color: rgba(240, 238, 233, .8); letter-spacing: -.02em; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { font-size: 12px; color: rgba(240, 238, 233, .8); text-decoration: none; position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--polar); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav-links a:hover::after, .nav-links a.ativo::after { transform: scaleX(1); }
.nav-menu { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; position: relative; }
.nav-menu span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--texto); transition: transform .4s var(--ease), top .4s var(--ease); }
.nav-menu span:first-child { top: 16px; } .nav-menu span:last-child { top: 23px; }
.nav.aberta .nav-menu span:first-child { top: 19.5px; transform: rotate(45deg); }
.nav.aberta .nav-menu span:last-child { top: 19.5px; transform: rotate(-45deg); }

/* ---------- Abertura ---------- */
.abertura { position: relative; min-height: 100svh; background: var(--palco); display: grid; place-items: center; overflow: hidden; }
.cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.abertura-texto { position: relative; z-index: 2; text-align: center; padding: 120px 24px 140px; max-width: 1100px; pointer-events: none; }
.abertura-texto::before, .fecho-texto::before { content: ""; position: absolute; inset: 8% -8%; z-index: -1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .35) 45%, transparent 72%); pointer-events: none; }
.titulo-hero { text-shadow: 0 4px 40px rgba(0, 0, 0, .55); }
.abertura-texto a, .abertura-texto button { pointer-events: auto; }
.selo-produto { display: inline-flex; align-items: center; gap: 10px; font: 600 19px/1.2 var(--f-titulo); letter-spacing: .01em; margin: 0 0 22px; }
.selo-produto .no { width: 10px; height: 10px; }
.titulo-hero .linha { display: block; overflow: hidden; padding-bottom: .04em; }
.titulo-hero .palavra { display: inline-block; will-change: transform; }
.hero-apoio { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--texto-2); max-width: 46ch; margin: 28px auto 36px; }
.hero-acoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-nota { margin: 22px 0 0; font: 400 12px/1.4 var(--f-mono); color: var(--texto-2); letter-spacing: .06em; }
.rolar { position: absolute; z-index: 2; bottom: 28px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 500 10px/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--texto-2); }
.rolar::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--sun-glare), transparent); animation: desce 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes desce { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Faixa ---------- */
.faixa { background: var(--carbono); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); overflow: hidden; }
.faixa-trilho { display: flex; width: max-content; animation: corre 36s linear infinite; }
.faixa span { display: flex; align-items: center; gap: 48px; padding: 26px 24px; font: 700 clamp(22px, 2.4vw, 34px)/1 var(--f-titulo); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; color: rgba(240, 238, 233, .9); }
.faixa span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sun-glare); }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- Problema (fixado na rolagem) ---------- */
.problema { position: relative; height: 340vh; background: var(--palco); }
.problema-fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: center; }
.problema-fixo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 38%, transparent 62%); }
@media (max-width: 980px) { .problema-fixo::after { background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .6) 45%, transparent 75%); } }
.problema-textos { position: relative; z-index: 2; max-width: var(--largura); width: 100%; margin: 0 auto; padding: 0 24px; }
.etapa-problema { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); max-width: 640px; opacity: 0; pointer-events: none; }
.etapa-problema.ativa { pointer-events: auto; }
.problema-progresso { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 40px; max-width: var(--largura); margin: 0 auto; height: 2px; background: var(--linha); border-radius: 2px; overflow: hidden; }
.problema-progresso span { display: block; height: 100%; width: 100%; background: var(--sun-glare); transform-origin: left; transform: scaleX(0); }

/* ---------- Serviços ---------- */
.servicos { background: var(--carbono); padding: 160px 0 120px; }
.servicos-modulo { display: grid; grid-template-columns: 300px 1fr; gap: 24px; margin-top: 48px; align-items: stretch; }
.servicos-lista { display: grid; gap: 10px; align-content: start; }
.chip { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; cursor: pointer; background: rgba(66, 66, 69, .72); color: rgba(240, 238, 233, .8); border-radius: var(--raio-chip); padding: 14px 20px 14px 14px; font: 600 15px/1.2 var(--f-titulo); letter-spacing: -.01em; transition: background .35s, color .35s, transform .35s var(--ease); }
.chip:hover { background: rgba(86, 86, 90, .8); color: var(--texto); transform: translateX(4px); }
.chip.ativo { background: var(--polar); color: var(--darkest-hour); }
.mais { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; position: relative; }
.mais::before, .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.mais::after { transform: translate(-50%, -50%) rotate(90deg); }
.chip.ativo .mais::after, details[open] .mais::after { transform: translate(-50%, -50%) rotate(0deg); }
.servicos-palco { position: relative; min-height: 600px; border-radius: var(--raio-cartao); overflow: hidden; background: var(--palco); }
.servicos-palco::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(20deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 32%, transparent 58%); }
.servico-info { position: absolute; z-index: 2; left: 0; bottom: 0; max-width: 460px; padding: 36px; }
.servico-num { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--sun-glare); margin: 0 0 14px; }
.servico-info h3 { font: 700 clamp(28px, 3vw, 40px)/1.05 var(--f-titulo); letter-spacing: -.02em; margin: 0 0 14px; }
.servico-info p { color: var(--texto-2); margin: 0 0 16px; }
.servico-info ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.servico-info li { font: 500 12px/1 var(--f-mono); padding: 8px 12px; border-radius: 999px; background: rgba(240, 238, 233, .08); color: var(--texto); }

/* ---------- Método (rolagem horizontal) ---------- */
.metodo { position: relative; background: var(--palco); }
.metodo-fixo { min-height: 100svh; display: grid; align-content: center; gap: 48px; overflow: hidden; padding: 120px 0; }
.metodo-trilho { display: flex; gap: 20px; padding: 0 24px 0 max(24px, calc((100vw - var(--largura)) / 2 + 24px)); width: max-content; perspective: 1400px; }
.passo { position: relative; width: min(380px, 78vw); min-height: 420px; flex: none; border-radius: var(--raio-cartao); padding: 32px; display: flex; flex-direction: column; background: var(--carbono); box-shadow: inset 0 0 0 1px var(--linha); transform-style: preserve-3d; }
.passo:nth-child(2) { background: var(--darkest-hour); }
.passo:last-child { background: var(--polar); color: var(--darkest-hour); }
.passo:last-child p { color: rgba(32, 30, 31, .64); }
.passo-num { font: 800 96px/1 var(--f-titulo); letter-spacing: -.04em; color: rgba(240, 238, 233, .12); margin-bottom: auto; transform: translateZ(40px); }
.passo:last-child .passo-num { color: rgba(32, 30, 31, .14); }
.passo h3 { font: 700 32px/1.1 var(--f-titulo); letter-spacing: -.02em; margin: 24px 0 12px; transform: translateZ(30px); }
.passo p { color: var(--texto-2); margin: 0 0 20px; transform: translateZ(20px); }
.passo-prazo { font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sun-glare); }
.passo:last-child .passo-prazo { color: var(--darkest-hour); }

/* ---------- Números ---------- */
.numeros { background: var(--carbono); padding: 120px 0; border-top: 1px solid var(--linha); }
.numeros-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.numero b { display: block; font: 800 clamp(56px, 7vw, 96px)/1 var(--f-titulo); letter-spacing: -.04em; color: var(--sun-glare); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.numero span { color: var(--texto-2); font-size: 15px; }

/* ---------- IA ---------- */
.ia { background: var(--palco); padding: 160px 0; overflow: hidden; }
.ia-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lista-check { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.lista-check li { display: flex; gap: 14px; align-items: center; font-weight: 500; }
.lista-check li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sun-glare) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201E1F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
.anel-texto { position: relative; height: 520px; perspective: 1200px; display: grid; place-items: center; }
.anel-texto-gira { position: relative; width: 1px; height: 1px; transform-style: preserve-3d; }
.anel-texto-gira span { position: absolute; left: 0; top: 0; font: 800 52px/1 var(--f-titulo); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; transform-origin: 0 0; backface-visibility: hidden; color: var(--texto); }
.anel-texto-gira span.sol { color: var(--sun-glare); }
.anel-texto-gira span { padding: 0 6px; }
.anel-texto-centro { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }

/* ---------- Para quem ---------- */
.para-quem { background: var(--carbono); padding: 160px 0; }
.nichos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; perspective: 1400px; }
.nicho { position: relative; min-height: 260px; border-radius: var(--raio-cartao); padding: 32px; background: var(--palco); box-shadow: inset 0 0 0 1px var(--linha); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transform-style: preserve-3d; }
.nicho::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(218, 255, 2, .12), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.nicho:hover::before { opacity: 1; }
.nicho-num { position: absolute; top: 28px; left: 32px; font: 500 12px/1 var(--f-mono); color: var(--texto-2); letter-spacing: .14em; }
.nicho h3 { font: 700 26px/1.1 var(--f-titulo); letter-spacing: -.02em; margin: 0 0 10px; transform: translateZ(30px); }
.nicho p { margin: 0; color: var(--texto-2); font-size: 15px; transform: translateZ(18px); }

/* ---------- Perguntas ---------- */
.perguntas { background: var(--palco); padding: 160px 0; }
.perguntas-grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.acordeao { display: grid; gap: 10px; }
.linha-acordeao { background: var(--controle); border-radius: var(--raio-chip); overflow: hidden; transition: background .3s; }
.linha-acordeao[open] { background: #3d3d40; }
.linha-acordeao summary { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 600; color: rgba(240, 238, 233, .9); }
.linha-acordeao summary::-webkit-details-marker { display: none; }
.linha-acordeao p { margin: 0; padding: 0 22px 22px 60px; color: var(--texto-2); }

/* ---------- Fecho ---------- */
.fecho { position: relative; min-height: 92svh; background: var(--palco); display: grid; place-items: center; overflow: hidden; text-align: center; }
.fecho-texto { position: relative; z-index: 2; padding: 120px 24px; max-width: 1000px; pointer-events: none; }
.fecho-texto a { pointer-events: auto; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--polar); color: var(--darkest-hour); padding: 56px 0; }
.rodape-grade { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rodape img { height: 54px; width: auto; }
.rodape nav { display: flex; gap: 24px; flex-wrap: wrap; }
.rodape a { font-size: 14px; color: var(--darkest-hour); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape p { margin: 0; font: 400 12px/1.4 var(--f-mono); color: rgba(32, 30, 31, .64); }

/* ---------- Flutuantes ---------- */
.whats-flutuante { position: fixed; z-index: 90; right: 20px; bottom: 20px; width: 60px; height: 60px; border-radius: 50%; background: var(--sun-glare); color: var(--darkest-hour); display: grid; place-items: center; box-shadow: 0 10px 40px rgba(218, 255, 2, .25); }
.whats-flutuante .icone-whats { width: 28px; height: 28px; }
.whats-flutuante::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(218, 255, 2, .6); animation: pulso 2.4s ease-out infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 18px rgba(218, 255, 2, 0); } 100% { box-shadow: 0 0 0 0 rgba(218, 255, 2, 0); } }
.botao-pausa { position: fixed; z-index: 90; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 999px; background: rgba(51, 51, 54, .72); color: var(--texto); font: 500 11px/1 var(--f-mono); letter-spacing: .06em; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html.pausado *, html.pausado *::before, html.pausado *::after { animation-play-state: paused !important; }
.cursor { position: fixed; z-index: 150; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--sun-glare); pointer-events: none; mix-blend-mode: difference; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease); opacity: 0; }
.cursor.grande { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 12px 24px 24px; background: rgba(17, 17, 17, .96); backdrop-filter: blur(20px); border-bottom: 1px solid var(--linha); }
  .nav.aberta .nav-links { display: flex; }
  .nav-links a { font-size: 17px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
  .nav-menu { display: block; }
  .nav-dentro { gap: 12px; }
  .servicos-modulo { grid-template-columns: 1fr; }
  .servicos-lista { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: none; }
  .chip { width: auto; flex: none; white-space: nowrap; }
  .servicos-palco { min-height: 560px; }
  .numeros-grade { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .ia-grade, .perguntas-grade { grid-template-columns: 1fr; }
  .anel-texto { height: 380px; }
  .nichos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cont, .nav-dentro { padding: 0 16px; }
  .nav .pilula-compacta { display: none; }
  .servicos, .ia, .para-quem, .perguntas { padding: 110px 0; }
  .servico-info { padding: 24px; }
  .servicos-palco { min-height: 600px; }
  .nichos { grid-template-columns: 1fr; }
  .nicho { min-height: 200px; }
  .anel-texto { height: 300px; }
  .linha-acordeao p { padding-left: 22px; }
  .botao-pausa { bottom: 88px; }
  .problema-progresso { left: 16px; right: 16px; }
  .etapa-problema { left: 16px; right: 16px; }
}

/* =====================================================================
   Rodada 2 (12/11/2026): sem cubos. Indicadores em vidro, mensagens que
   viram painel, telas dos sistemas em operação e números ilustrativos.
   ===================================================================== */

/* ---------- Indicadores flutuantes da abertura ---------- */
.hero-chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: 1200px; }
.chip-vidro { position: absolute; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-width: 190px; padding: 14px 18px; border-radius: 20px; background: rgba(32, 30, 31, .55); box-shadow: inset 0 0 0 1px rgba(240, 238, 233, .16), 0 30px 60px -30px rgba(0, 0, 0, .8); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); will-change: transform; }
.chip-vidro .ponto { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); }
.chip-vidro small { font: 500 11px/1.2 var(--f-mono); color: var(--texto-2); letter-spacing: .02em; }
.chip-vidro b { font: 700 24px/1.1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chip-vidro i { font-style: normal; color: var(--texto-2); font-size: 15px; }
.chip-vidro i.cai { color: var(--sun-glare); font-size: 13px; }
.c1 { left: 6%; top: 22%; } .c2 { right: 6%; top: 18%; } .c3 { left: 9%; bottom: 22%; }
.c4 { right: 8%; bottom: 26%; } .c5 { left: 18%; top: 44%; } .c6 { right: 15%; top: 47%; }

/* ---------- Problema: mensagens em 3D que viram painel ---------- */
.problema { height: 380vh; }
.problema-fixo { background: radial-gradient(900px 600px at 70% 50%, #1a1a1a, var(--palco) 70%); }
.fragmentos { position: absolute; z-index: 2; top: 50%; left: 68%; width: 0; height: 0; perspective: 1600px; transform-style: preserve-3d; }
.frag { position: absolute; left: 0; top: 0; width: clamp(200px, 12.5vw, 290px); height: clamp(132px, 8.2vw, 190px); transform-style: preserve-3d; will-change: transform; }
.frag-face p { font-size: clamp(16px, 1.05vw, 21px); }
.frag-gira { position: absolute; inset: 0; transform-style: preserve-3d; transition: none; }
.frag-face { position: absolute; inset: 0; border-radius: 22px; padding: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.frag-face.frente { background: #1b1b1c; box-shadow: inset 0 0 0 1px rgba(240, 238, 233, .12); }
.frag-face.verso { transform: rotateY(180deg); background: #0c0c0c; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 40px -10px color-mix(in srgb, var(--c) 40%, transparent); }
.frag-de { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); display: flex; align-items: center; gap: 8px; }
.frag-de i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.frag-face p { margin: 0; font: 600 18px/1.25 var(--f-titulo); letter-spacing: -.01em; }
.frag-face.frente p { color: rgba(240, 238, 233, .82); }
.frag-face.verso p { font-size: 21px; }
.frag-alerta { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--f-titulo); background: rgba(240, 238, 233, .1); color: rgba(240, 238, 233, .7); }
.frag-centro .frag-face.verso { background: var(--sun-glare); box-shadow: 0 0 80px -10px rgba(218, 255, 2, .6); }
.frag-centro .frag-face.verso p, .frag-centro .frag-face.verso .frag-de { color: var(--darkest-hour); }
.frag-centro .frag-face.verso .frag-de i { background: var(--darkest-hour); }

/* ---------- Sistemas em operação ---------- */
.sistemas { background: var(--palco); padding: 160px 0 120px; overflow: hidden; }
.sist-abas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }
.sist-aba { border: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; background: rgba(66, 66, 69, .72); color: rgba(240, 238, 233, .8); border-radius: 36px; padding: 12px 20px; font: 600 14px/1 var(--f-titulo); transition: background .3s, color .3s, transform .3s var(--ease); }
.sist-aba::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.sist-aba:hover { transform: translateY(-2px); }
.sist-aba.ativa { background: var(--polar); color: var(--darkest-hour); }
.sist-palco { position: relative; height: calc(clamp(480px, 46vw, 660px) + 40px); margin-top: 48px; perspective: 2200px; transform-style: preserve-3d; }
.tela { position: absolute; left: 50%; top: 0; width: min(1080px, 88vw); height: clamp(480px, 46vw, 660px); margin-left: calc(min(1080px, 88vw) / -2); border-radius: 22px; overflow: hidden; background: #0d0d0e; color: var(--texto); box-shadow: 0 0 0 1px rgba(240, 238, 233, .12), 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 120px -60px var(--c); transform-style: preserve-3d; will-change: transform; cursor: pointer; }
.tela.frente { cursor: default; }
.tela::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .07), transparent 40%); }
.tela-barra { height: 40px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: #161617; border-bottom: 1px solid rgba(240, 238, 233, .08); }
.bolinhas { display: flex; gap: 6px; } .bolinhas i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3c; }
.url { flex: 1; text-align: center; font: 400 12px/1 var(--f-mono); color: var(--texto-2); background: rgba(240, 238, 233, .06); border-radius: 8px; padding: 6px 10px; max-width: 360px; margin: 0 auto; }
.tag-demo { font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c); border: 1px solid var(--c); border-radius: 5px; padding: 4px 7px; white-space: nowrap; }
.tela-corpo { height: calc(100% - 40px); padding: 26px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.t-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.t-topo h4 { margin: 0; font: 700 22px/1.1 var(--f-titulo); letter-spacing: -.02em; }
.t-pill { font: 500 11px/1 var(--f-mono); padding: 7px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); white-space: nowrap; }
.tela-central .t-pill, .tela-central .tag-demo { color: var(--sun-glare); }
.t-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.t-kpis > div { position: relative; background: #161617; border-radius: 16px; padding: 14px 16px; }
.t-kpis small { display: block; font: 500 11px/1.2 var(--f-mono); color: var(--texto-2); margin-bottom: 8px; }
.t-kpis b { font: 700 clamp(20px, 2.2vw, 30px)/1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-kpis em { position: absolute; top: 12px; right: 12px; font: 600 11px/1 var(--f-mono); font-style: normal; color: var(--sun-glare); }
.t-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.t-duas-larga { grid-template-columns: 1.6fr 1fr; }
.t-card { background: #161617; border-radius: 16px; padding: 16px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.t-card > small { font: 500 11px/1 var(--f-mono); color: var(--texto-2); letter-spacing: .06em; text-transform: uppercase; }
/* Central */
.central-corpo { flex-direction: row; padding: 0; gap: 0; }
.t-lateral { width: 190px; flex: none; background: #121213; border-right: 1px solid rgba(240, 238, 233, .06); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.t-lateral b { display: flex; align-items: center; gap: 8px; font: 700 16px/1 var(--f-titulo); margin: 0 6px 18px; }
.t-lateral b .no { width: 9px; height: 9px; }
.t-lateral span { padding: 9px 10px; border-radius: 10px; color: var(--texto-2); display: flex; justify-content: space-between; }
.t-lateral span.on { background: rgba(240, 238, 233, .08); color: var(--texto); }
.t-lateral em { font-style: normal; background: var(--sun-glare); color: var(--darkest-hour); border-radius: 999px; font: 700 11px/18px var(--f-titulo); padding: 0 7px; }
.t-main { flex: 1; padding: 26px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.t-empresa { display: grid; grid-template-columns: 10px 1fr auto; grid-template-rows: auto 6px; column-gap: 10px; row-gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.t-empresa > span { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.t-empresa em { font: 400 11px/1 var(--f-mono); color: var(--texto-2); font-style: normal; }
.t-empresa i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(240, 238, 233, .08); position: relative; overflow: hidden; }
.t-empresa i::after { content: ""; position: absolute; inset: 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--c); transform-origin: left; transform: scaleX(var(--cresce, 0)); transition: transform 1.4s var(--ease); }
.tela.frente .t-empresa i::after { --cresce: 1; }
.t-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.t-feed li { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 10px 12px; border-radius: 12px; background: rgba(240, 238, 233, .04); }
.t-feed li span { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c); }
.t-feed li small { margin-left: auto; font: 400 10px/1 var(--f-mono); color: var(--texto-2); white-space: nowrap; }
/* Lab */
.t-grafico { width: 100%; flex: 1; min-height: 120px; }
.t-grafico .linha { stroke-dasharray: 800; stroke-dashoffset: 800; }
.tela.frente .t-grafico .linha { animation: desenha 2.4s var(--ease) forwards; }
.t-grafico .area { opacity: 0; }
.tela.frente .t-grafico .area { animation: aparece 1.6s .8s var(--ease) forwards; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; } }
.t-funil { display: grid; gap: 8px; }
.t-funil span { position: relative; display: flex; justify-content: space-between; font-size: 13px; padding: 9px 12px; border-radius: 10px; overflow: hidden; z-index: 0; }
.t-funil span::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--c) 45%, #161617); width: calc(var(--p) * 100%); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.tela.frente .t-funil span::before { transform: scaleX(1); }
.tela.frente .t-funil span:nth-child(2)::before { transition-delay: .15s; } .tela.frente .t-funil span:nth-child(3)::before { transition-delay: .3s; } .tela.frente .t-funil span:nth-child(4)::before { transition-delay: .45s; }
/* SMIA */
.smia-corpo { display: grid; grid-template-columns: 1fr 200px; grid-template-rows: 1fr auto; gap: 16px; }
.smia-corpo > div:first-child { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.t-calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; flex: 1; min-height: 0; }
.t-calendario div { border-radius: 10px; background: #161617; padding: 6px; font: 500 10px/1 var(--f-mono); color: var(--texto-2); position: relative; min-height: 34px; overflow: hidden; }
.t-calendario div.post { color: var(--darkest-hour); }
.t-calendario div.post::after { content: attr(data-tipo); position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 4px 5px; border-radius: 6px; background: var(--electric-rose); color: #fff; font: 600 9px/1.1 var(--f-titulo); transform: scale(0); transform-origin: left bottom; transition: transform .5s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-calendario div.post.ok::after { background: var(--cloud-dancer); color: var(--darkest-hour); }
.tela.frente .t-calendario div.post::after { transform: scale(1); transition-delay: var(--d); }
.t-celular { grid-row: span 2; align-self: center; width: 200px; height: 400px; border-radius: 34px; background: #1d1d1f; padding: 10px; box-shadow: inset 0 0 0 1px rgba(240, 238, 233, .15); }
.t-cel-tela { height: 100%; border-radius: 26px; background: #000; overflow: hidden; display: flex; flex-direction: column; }
.t-cel-topo { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px; font: 600 11px/1 var(--f-titulo); }
.t-cel-topo span { width: 22px; height: 22px; border-radius: 50%; background: var(--electric-rose); }
.t-carrossel { position: relative; flex: 1; overflow: hidden; }
.t-carrossel div { position: absolute; inset: 0; display: grid; place-items: end start; padding: 16px; font: 700 20px/1.1 var(--f-titulo); letter-spacing: -.02em; background: var(--c); color: #fff; animation: carrossel 9s infinite; opacity: 0; }
.t-carrossel div:nth-child(2) { animation-delay: 3s; } .t-carrossel div:nth-child(3) { animation-delay: 6s; color: var(--darkest-hour); }
@keyframes carrossel { 0% { opacity: 0; transform: translateX(30%); } 6%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateX(-30%); } }
.t-cel-acoes { padding: 10px 12px 16px; font: 500 11px/1 var(--f-mono); color: var(--texto-2); }
.t-kpis-col { grid-template-columns: repeat(3, 1fr); }
/* PHOTO EDIT */
.t-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 1; min-height: 0; }
.t-fotos figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.t-ab { position: relative; flex: 1; min-height: 0; border-radius: 14px; overflow: hidden; background: #161617; }
.t-ab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.25) brightness(.62) contrast(.9) sepia(.25); }
.t-ab img.depois { filter: none; clip-path: inset(0 100% 0 0); }
.tela.frente .t-ab img.depois { animation: trata 5s var(--ease) infinite; }
.tela.frente .t-fotos figure:nth-child(2) img.depois { animation-delay: .6s; } .tela.frente .t-fotos figure:nth-child(3) img.depois { animation-delay: 1.2s; } .tela.frente .t-fotos figure:nth-child(4) img.depois { animation-delay: 1.8s; }
.t-ab::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--deep-lagoon); box-shadow: 0 0 14px var(--deep-lagoon); left: -4px; }
.tela.frente .t-ab::after { animation: varre 5s var(--ease) infinite; }
.tela.frente .t-fotos figure:nth-child(2) .t-ab::after { animation-delay: .6s; } .tela.frente .t-fotos figure:nth-child(3) .t-ab::after { animation-delay: 1.2s; } .tela.frente .t-fotos figure:nth-child(4) .t-ab::after { animation-delay: 1.8s; }
@keyframes trata { 0%, 10% { clip-path: inset(0 100% 0 0); } 55%, 90% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes varre { 0%, 10% { left: -4px; opacity: 1; } 55% { left: 100%; opacity: 1; } 56%, 100% { opacity: 0; left: 100%; } }
.t-fotos figcaption { display: flex; justify-content: space-between; font: 400 11px/1 var(--f-mono); color: var(--texto-2); }
.t-fotos figcaption em { font-style: normal; color: var(--deep-lagoon); }
.t-fotos figcaption em.rev { color: var(--sun-glare); }

/* ---------- Números (ilustrativos) ---------- */
.numeros { padding: 160px 0; }
.numeros .numeros-grade { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; perspective: 1400px; }
.cartao-3d { position: relative; background: var(--palco); border-radius: var(--raio-cartao); padding: 32px; box-shadow: inset 0 0 0 1px var(--linha); transform-style: preserve-3d; overflow: hidden; }
.cartao-3d::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(218, 255, 2, .1), transparent 45%); }
.cartao-3d b { transform: translateZ(40px); }
.cartao-3d .mini { display: block; width: 100%; height: 34px; margin-top: 22px; overflow: visible; }
.cartao-3d .mini path { fill: none; stroke: var(--sun-glare); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.8s var(--ease); }
.cartao-3d.visto .mini path { stroke-dashoffset: 0; }
.nota-ilustrativa { margin: 28px 0 0; font: 400 11px/1.4 var(--f-mono); color: rgba(240, 238, 233, .4); }

@media (max-width: 1180px) { .c5, .c6 { display: none; } }
@media (max-width: 980px) {
  .hero-chips { display: none; }
  .fragmentos { left: 50%; top: 66%; }
  .frag { width: 170px; height: 118px; }
  .frag-face { padding: 13px; border-radius: 18px; }
  .frag-face p { font-size: 14px; } .frag-face.verso p { font-size: 16px; }
  .etapa-problema { top: 22%; }
  .numeros .numeros-grade { grid-template-columns: 1fr 1fr; }
  .t-lateral { display: none; }
  .t-kpis { grid-template-columns: 1fr 1fr; }
  .t-duas, .t-duas-larga { grid-template-columns: 1fr; }
  .t-duas .t-card:last-child { display: none; }
  .smia-corpo { grid-template-columns: 1fr; }
  .t-celular { display: none; }
  .t-fotos { grid-template-columns: 1fr 1fr; }
  .t-fotos figure:nth-child(n+3) { display: none; }
}
@media (max-width: 640px) {
  .numeros .numeros-grade { grid-template-columns: 1fr; }
  .frag { width: 128px; height: 96px; }
  .frag-face p { font-size: 12px; } .frag-face.verso p { font-size: 13px; }
  .frag-alerta { display: none; }
  .tela-corpo, .t-main { padding: 16px; gap: 12px; }
  .t-topo h4 { font-size: 17px; }
  .tag-demo { display: none; }
  .sist-palco { height: 560px; }
  .tela { height: 520px; }
}

.rodape .creditos { flex-basis: 100%; font-size: 10px; color: rgba(32, 30, 31, .5); }

.cartao-3d b { white-space: nowrap; font-size: clamp(44px, 4.6vw, 80px); }
.anel-texto { overflow: visible; }

/* nada de rolagem lateral causada por giros 3D (clip não quebra o "sticky") */
main > section, main > div { overflow-x: clip; }
@media (max-width: 980px) {
  .etapa-problema { top: 18%; }
  .etapa-problema .titulo-secao-grande { font-size: 30px; margin-bottom: 12px; }
  .etapa-problema .apoio { font-size: 15px; }
  .fragmentos { top: 70%; }
}
@media (max-width: 640px) {
  .frag { width: 112px; height: 84px; }
  .frag-face { padding: 10px; border-radius: 14px; }
  .frag-face p { font-size: 11px; } .frag-face.verso p { font-size: 12px; }
  .frag-de { font-size: 8px; }
}
@media (max-width: 640px) {
  .etapa-problema { top: 20%; }
  .etapa-problema .apoio { display: none; }
  .fragmentos { top: 64%; }
}
/* o bloco de textos ocupa a tela inteira, para "top" em % funcionar */
.problema-textos { position: absolute; inset: 0; }
/* título do problema mais estreito, para o painel caber ao lado em telas médias */
.etapa-problema { max-width: 470px; }
.etapa-problema .titulo-secao-grande { font-size: clamp(30px, 3.6vw, 60px); max-width: 11ch; }
.etapa-problema .apoio { max-width: 38ch; }
@media (min-width: 981px) { .fragmentos { left: max(68%, 720px); } }
@media (min-width: 981px) and (max-width: 1250px) { .fragmentos { left: 72%; } .frag { width: 165px; height: 112px; } .frag-face p { font-size: 13px; } .frag-face.verso p { font-size: 14px; } }

/* ---------- Abertura v3: feixes de luz + painel do cliente em 3D ---------- */
.abertura { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: auto; padding-bottom: 80px; }
.abertura-texto { padding: 150px 24px 0; }
.abertura-texto::before { inset: 0 -10% -10%; }
.hero-palco { position: relative; z-index: 2; width: min(1100px, 92vw); margin-top: 72px; perspective: 1800px; }
.tela.tela-hero { position: relative; left: auto; top: auto; margin: 0; width: 100%; height: auto; cursor: default; transform-origin: 50% 0%; box-shadow: 0 0 0 1px rgba(240, 238, 233, .14), 0 80px 160px -60px rgba(0, 0, 0, .95), 0 0 160px -40px rgba(218, 255, 2, .25); }
.tela-hero .tela-corpo { height: auto; }
.tela-hero .t-duas { min-height: 260px; }
.tela-hero .t-pill::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sun-glare); margin-right: 7px; animation: pisca 1.6s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .25; } }
.hero-palco .hero-chips { inset: 0; }
.hero-palco .c1 { left: -70px; top: 22%; right: auto; bottom: auto; }
.hero-palco .c2 { right: -80px; top: 6%; left: auto; bottom: auto; }
.hero-palco .c4 { right: -60px; bottom: 18%; left: auto; top: auto; }
.hero-palco .c5 { left: -50px; bottom: 8%; right: auto; top: auto; }
.rolar { display: none; }
@media (max-width: 1180px) { .hero-palco .chip-vidro { display: none; } }
@media (max-width: 640px) {
  .abertura-texto { padding-top: 120px; }
  .hero-palco { margin-top: 48px; }
  .tela-hero .t-duas { min-height: 160px; }
}

/* ---------- Manifesto (frases dos posts da @r2bagency) ---------- */
.manifesto { background: var(--palco); padding: 160px 0; }
.frase-manifesto { margin: 0 0 .25em; font: 800 clamp(40px, 7.6vw, 118px)/.98 var(--f-titulo); letter-spacing: -.035em; text-transform: uppercase; }
.frase-manifesto span { display: inline-block; color: rgba(240, 238, 233, .12); will-change: color, transform; }
.frase-manifesto.pequena { font-size: clamp(28px, 4vw, 56px); margin-top: .8em; }

/* ---------- Fundador ---------- */
.fundador { background: var(--carbono); padding: 160px 0; }
.fundador-grade { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
.fundador-fotos { position: relative; height: 560px; perspective: 1400px; }
.foto-3d { position: absolute; margin: 0; border-radius: var(--raio-cartao); overflow: hidden; background: var(--palco); box-shadow: 0 0 0 1px var(--linha), 0 50px 100px -40px rgba(0, 0, 0, .9); will-change: transform; }
.foto-3d img { width: 100%; height: 100%; object-fit: cover; }
.foto-3d figcaption { position: absolute; left: 14px; bottom: 14px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(0, 0, 0, .6); backdrop-filter: blur(8px); padding: 8px 11px; border-radius: 999px; }
.foto-3d.f1 { left: 4%; top: 0; width: 56%; height: 82%; z-index: 2; }
.foto-3d.f2 { right: 0; top: 30%; width: 52%; height: 52%; z-index: 3; }
.foto-3d.selo-ig { left: 30%; bottom: 0; z-index: 4; padding: 18px 22px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; background: rgba(32, 30, 31, .7); backdrop-filter: blur(14px); }
.selo-ig .no { grid-row: span 2; width: 12px; height: 12px; box-shadow: 0 0 16px var(--sun-glare); }
.selo-ig b { font: 700 18px/1.2 var(--f-titulo); } .selo-ig small { font: 400 12px/1.3 var(--f-mono); color: var(--texto-2); }
.fundador-acoes { justify-content: flex-start; margin-top: 32px; }

/* ---------- Para quem: 3 nichos ---------- */
.nichos.nichos-3 { grid-template-columns: repeat(3, 1fr); }
.nichos-3 .nicho { min-height: 380px; padding: 36px; }
.nichos-3 .nicho h3 { font-size: clamp(30px, 3vw, 44px); }
.nicho-itens { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; transform: translateZ(24px); }
.nicho-itens li { font: 500 12px/1 var(--f-mono); padding: 8px 12px; border-radius: 999px; background: rgba(240, 238, 233, .08); }

@media (max-width: 980px) {
  .fundador-grade { grid-template-columns: 1fr; gap: 48px; }
  .fundador-fotos { height: 440px; }
  .nichos.nichos-3 { grid-template-columns: 1fr; }
  .nichos-3 .nicho { min-height: 260px; }
}
@media (max-width: 640px) { .manifesto, .fundador { padding: 110px 0; } .fundador-fotos { height: 380px; } }

/* ---------- Órbita dos cartões de números em volta do painel ---------- */
.hero-palco { transform-style: preserve-3d; }
.hero-palco .hero-chips { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; z-index: auto; }
.hero-palco .chip-vidro { position: absolute; display: grid; transition: none; }
.tela.tela-hero { transform-style: flat; }
@media (max-width: 1180px) { .hero-palco .chip-vidro { display: grid; } }
@media (max-width: 640px) { .hero-palco .chip-vidro { min-width: 150px; padding: 10px 12px; } .hero-palco .chip-vidro b { font-size: 18px; } }

/* ---------- Central v2: mapa da operação, quadro de tarefas e decisões ---------- */
.c2-corpo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; }
.c2-mapa { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.c2-svg { flex: 1; min-height: 0; width: 100%; }
.c2-svg .c2-nos circle { transform-box: fill-box; transform-origin: center; }
.c2-svg .c2-nos circle:first-child { animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(1.12); } }
.c2-kpis { grid-template-columns: 1fr 1fr; }
.c2-dir { display: grid; grid-template-rows: 1.2fr 1fr; gap: 12px; min-height: 0; }
.c2-quadro { position: relative; }
.c2-colunas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1; }
.c2-colunas div { border-radius: 10px; background: rgba(240, 238, 233, .03); padding: 8px; }
.c2-colunas span { font: 500 10px/1 var(--f-mono); color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; }
.c2-trilho { position: absolute; left: 16px; right: 16px; top: 66px; bottom: 16px; }
.c2-tarefa { position: absolute; left: 0; width: calc(25% - 10px); padding: 8px 9px; border-radius: 9px; background: #1f1f21; box-shadow: inset 3px 0 0 var(--c); font: 600 11px/1.25 var(--f-titulo); color: var(--texto); will-change: transform; }
.c2-tarefa small { display: block; font: 400 9px/1.2 var(--f-mono); color: var(--texto-2); margin-top: 3px; }
.c2-decisao { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(240, 238, 233, .04); }
.c2-decisao > span { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.c2-decisao p { margin: 0; font-size: 11px; color: var(--texto-2); line-height: 1.35; flex: 1; }
.c2-decisao p b { display: block; color: var(--texto); font-size: 13px; }
.c2-decisao em { font: 700 11px/1 var(--f-titulo); font-style: normal; padding: 8px 12px; border-radius: 999px; background: var(--sun-glare); color: var(--darkest-hour); }
.c2-decisao + .c2-decisao em { background: rgba(240, 238, 233, .12); color: var(--texto); }

/* ---------- Studio: editor de vídeo (laranja sozinho nesta tela) ---------- */
.st-corpo { gap: 14px; }
.st-cima { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; flex: 1; min-height: 0; }
.st-previa { position: relative; border-radius: 14px; overflow: hidden; background: #000; min-height: 0; }
.st-previa img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.tela.frente .st-previa img { animation: kenburns 12s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.22) translate(-3%, -2%); } }
.st-legenda { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); font: 800 clamp(16px, 1.8vw, 26px)/1.1 var(--f-titulo); text-transform: uppercase; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); white-space: nowrap; }
.st-legenda b { color: var(--exuberant-orange); }
.st-tempo { position: absolute; left: 12px; bottom: 10px; font: 500 11px/1 var(--f-mono); background: rgba(0, 0, 0, .6); padding: 6px 8px; border-radius: 6px; }
.st-rec { position: absolute; right: 12px; top: 10px; font: 600 11px/1 var(--f-mono); color: var(--exuberant-orange); background: rgba(0, 0, 0, .6); padding: 6px 8px; border-radius: 6px; }
.st-lado { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.st-export { background: #161617; border-radius: 14px; padding: 14px 16px; }
.st-export small { display: block; font: 500 11px/1 var(--f-mono); color: var(--texto-2); margin-bottom: 8px; }
.st-export b { font: 700 30px/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.st-export i { display: block; height: 6px; border-radius: 6px; background: rgba(240, 238, 233, .08); margin-top: 12px; overflow: hidden; }
.st-export i span { display: block; height: 100%; width: 0; background: var(--exuberant-orange); border-radius: inherit; }
.st-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.st-check li { display: flex; align-items: center; gap: 10px; }
.st-check li::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--exuberant-orange); color: var(--darkest-hour); font-weight: 700; }
.st-check li.pendente { color: var(--texto-2); }
.st-check li.pendente::before { content: "…"; background: rgba(240, 238, 233, .12); color: var(--texto); }
.st-timeline { position: relative; background: #121213; border-radius: 14px; padding: 10px 12px 12px 44px; display: grid; gap: 6px; }
.st-regua { display: flex; justify-content: space-between; font: 400 9px/1 var(--f-mono); color: var(--texto-2); padding-bottom: 2px; }
.st-faixa { position: relative; height: 26px; }
.st-faixa > b { position: absolute; left: -34px; top: 50%; transform: translateY(-50%); font: 600 10px/1 var(--f-mono); color: var(--texto-2); }
.st-clipes { display: flex; gap: 3px; height: 100%; }
.st-clipes i { flex: 0 0 calc(var(--w) - 3px); border-radius: 5px; background: linear-gradient(180deg, #ff7a52, var(--exuberant-orange)); opacity: .9; }
.st-clipes i:nth-child(even) { background: linear-gradient(180deg, #c9441f, #a83818); }
.st-clipes.leg i { background: rgba(240, 238, 233, .8); height: 60%; align-self: center; }
.st-onda { display: flex; align-items: center; gap: 2px; height: 100%; }
.st-onda span { flex: 1; background: rgba(240, 238, 233, .45); border-radius: 1px; }
.st-cabeca { position: absolute; top: 6px; bottom: 6px; left: 44px; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; }
.st-cabeca::before { content: ""; position: absolute; top: -4px; left: -5px; border: 6px solid transparent; border-top-color: #fff; }
@media (max-width: 980px) {
  .c2-corpo { grid-template-columns: 1fr; }
  .c2-dir { display: none; }
  .st-cima { grid-template-columns: 1fr; }
  .st-lado { display: none; }
}

/* =====================================================================
   Rodada 4 (13/11/2026): público definido (advogados, médicos, dentistas
   e imobiliárias), acabamento mais sóbrio e profissional.
   ===================================================================== */
/* Faixa de confiança com os conselhos */
.hero-confianca { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; font: 400 12px/1 var(--f-mono); color: var(--texto-2); letter-spacing: .04em; }
.hero-confianca b { font: 600 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--texto); padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(240, 238, 233, .2); background: rgba(240, 238, 233, .04); }

/* Rótulos numerados das seções */
.num-secao { display: inline-flex; align-items: center; gap: 10px; margin-right: 12px; color: var(--sun-glare); }
.num-secao::after { content: ""; width: 28px; height: 1px; background: rgba(240, 238, 233, .3); }

/* Grade técnica sutil nas faixas escuras */
.servicos, .para-quem, .numeros, .fundador { position: relative; isolation: isolate; }
.servicos::before, .para-quem::before, .numeros::before, .fundador::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(240, 238, 233, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 238, 233, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
}

/* Públicos: cartões que viram */
.para-quem .apoio { margin-bottom: 8px; }
.publicos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; perspective: 1600px; }
.publico { position: relative; height: 440px; cursor: pointer; outline: none; }
.publico-gira { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .publico:hover .publico-gira { transform: rotateY(180deg); } }
.publico.virado .publico-gira, .publico:focus-visible .publico-gira { transform: rotateY(180deg); }
.publico:focus-visible { box-shadow: 0 0 0 2px var(--sun-glare); border-radius: var(--raio-cartao); }
.publico-face { position: absolute; inset: 0; border-radius: var(--raio-cartao); padding: 28px; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.publico-face.frente { background: linear-gradient(180deg, #151515, #0b0b0b); box-shadow: inset 0 0 0 1px var(--linha); }
.publico-face.verso { transform: rotateY(180deg); background: var(--polar); color: var(--darkest-hour); }
.publico-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: auto; }
.publico .nicho-num { position: static; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--texto-2); }
.publico-face.verso .nicho-num { color: rgba(32, 30, 31, .6); }
.publico-selo { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; padding: 7px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; color: var(--sun-glare); }
.publico-face.verso .publico-selo { color: var(--darkest-hour); }
.publico h3 { font: 700 34px/1.05 var(--f-titulo); letter-spacing: -.02em; margin: 24px 0 12px; }
.publico p { margin: 0; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
.publico .nicho-itens { margin-top: 18px; transform: none; }
.virar { margin-top: 18px; font: 500 12px/1 var(--f-mono); color: var(--sun-glare); }
.publico-face.verso .virar { color: var(--darkest-hour); }
.publico-face.verso h4 { font: 700 26px/1.1 var(--f-titulo); letter-spacing: -.02em; margin: 20px 0 16px; }
.publico-kpis { display: grid; gap: 10px; }
.publico-kpis div { background: #fff; border-radius: 16px; padding: 12px 14px; }
.publico-kpis b { display: block; font: 800 28px/1 var(--f-titulo); letter-spacing: -.02em; }
.publico-kpis small { font: 400 12px/1.3 var(--f-titulo); color: rgba(32, 30, 31, .64); }

@media (max-width: 1180px) { .publicos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .publicos { grid-template-columns: 1fr; }
  .publico { height: 420px; }
  .hero-confianca span { flex-basis: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html:not(.movimento) .publico-gira { transition: none; } }
/* frente e verso ocupam a mesma célula: o cartão fica com a altura da face maior */
.publico { height: auto; }
.publico-gira { position: relative; inset: auto; display: grid; height: 100%; }
.publico-face { position: relative; inset: auto; grid-area: 1 / 1; min-height: 420px; }
.publico-topo { margin-bottom: 0; }
.publico h3 { margin-top: auto; padding-top: 28px; }
@media (max-width: 640px) { .publico { height: auto; } .publico-face { min-height: 360px; } }
/* no celular, o botão de pausa vira só um ícone, para não cobrir o texto */
@media (max-width: 640px) {
  .botao-pausa { bottom: 24px; width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .botao-pausa span { font-size: 12px; }
}