/* Prisma1 landing. Tokens em tokens.css; decisões em DESIGN.md.
   Movimento em três camadas: entrada da cena no carregamento, revelação ligada à rolagem
   (animation-timeline, com IntersectionObserver de reserva em site.js) e resposta ao ponteiro. */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 88px; interpolate-size: allow-keywords; }
body {
  margin: 0; background: var(--ink-0); color: var(--paper);
  font: 400 var(--t-corpo)/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--ia-imagens); color: var(--ink-0); }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
section { padding: var(--e-32) max(16px, calc((100vw - var(--largura)) / 2)); position: relative; }
.cabeca { max-width: 46rem; margin-bottom: var(--e-16); }
.cabeca::before, .perguntas > h2::before { content: ""; display: block; width: 56px; height: 2px; margin-bottom: var(--e-6);
  background: var(--tom); transform-origin: 0 50%; transition: background-color 1.4s var(--ease-sai); }
.cabeca p { color: var(--paper-2); margin-top: var(--e-4); font-size: 1.125rem; }

/* Botões: a ação principal é a luz branca. */
.botao {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.5rem; border-radius: 999px; background: var(--acao); color: var(--acao-texto);
  font-weight: 600; text-decoration: none; border: 1px solid var(--acao);
  transition: translate .35s var(--ease-sai), scale var(--d-curta) var(--ease-sai), background-color var(--d-curta), border-color var(--d-curta);
}
/* Botões sóbrios: o espectro fica só no prisma, nos raios e nas IAs. Hover = um pouco mais de luz e elevação. */
.botao:hover { background: #fff; border-color: #fff; box-shadow: 0 10px 24px -14px rgb(0 0 0 / .9); }
.botao:active { scale: .97; }
.botao.fantasma { background: transparent; color: var(--paper); border-color: var(--ink-4); }
.botao.fantasma:hover { background: rgb(255 255 255 / .06); border-color: var(--paper-2); }
.botao-p { min-height: 40px; padding: 0 1.1rem; font-size: .9375rem; }

/* Barra de progresso: o espectro se forma conforme a página é lida. */
/* Luz ambiente: a cor do raio da seção na tela tinge a página, com transição suave entre seções (site.js troca --tom). */
@property --tom { syntax: "<color>"; inherits: true; initial-value: #4f6bff; }
html { transition: --tom 1.4s var(--ease-sai); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(55% 45% at 85% 10%, color-mix(in srgb, var(--tom) 13%, transparent), transparent 70%),
    radial-gradient(40% 35% at 5% 95%, color-mix(in srgb, var(--tom) 8%, transparent), transparent 70%); }
body { background: var(--ink-0); }
main, .rodape { position: relative; }
section:not(.hero) { background: transparent; }

.progresso {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 30; background: var(--espectro);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* Topo */
.barra {
  position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: var(--e-8);
  padding: var(--e-4) max(16px, calc((100vw - var(--largura)) / 2)); transition: background-color var(--d-media), backdrop-filter var(--d-media), border-color var(--d-media);
  border-bottom: 1px solid transparent;
}
.barra.rolou { background: rgb(7 7 11 / .72); backdrop-filter: blur(14px) saturate(1.4); border-color: var(--ink-3); }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 600 1.25rem var(--f-display); letter-spacing: -.03em; }
.marca b, .nome-grande b { color: var(--ia-imagens); font-weight: inherit; }
.barra nav { display: flex; gap: var(--e-6); margin-left: auto; }
.barra nav a { color: var(--paper-2); text-decoration: none; font-size: .9375rem; transition: color var(--d-curta); }
.barra nav a:hover { color: var(--paper); }

/* Hero: o palco (canvas do prisma, hero.js) ocupa a seção inteira; o texto fica por cima, à esquerda. */
.hero {
  min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  padding-top: 7rem; padding-bottom: var(--e-16); overflow: clip; isolation: isolate;
}
.palco { position: absolute; inset: 0; z-index: -1; }
.palco canvas { width: 100%; height: 100%; display: block; }
/* Véu à esquerda: os raios soltos podem passar atrás do título sem disputar leitura. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--ink-0) 0%, rgb(7 7 11 / .82) 30%, rgb(7 7 11 / 0) 55%); }
.hero-texto { position: relative; z-index: 1; }
.hero h1 { font-size: var(--t-hero); letter-spacing: -.045em; line-height: .98; }
.hero h1 .linha { display: block; }
.apoio { color: var(--paper-2); font-size: 1.1875rem; max-width: 34rem; margin-top: var(--e-6); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-8); }
.selo { margin-top: var(--e-6); color: var(--paper-3); font-size: var(--t-miuda); }
.selo b { color: var(--paper); font-weight: 600; }

/* IAs: nomes flutuando na ponta do raio da própria cor (desktop) e a faixa de chips sob o texto. */
.ia-flut {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .5rem; padding: .35rem .95rem .35rem .35rem;
  border-radius: 999px; background: rgb(7 7 11 / .72); backdrop-filter: blur(10px); white-space: nowrap; opacity: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); will-change: transform, opacity;
  font-size: 1.125rem; transition: opacity .5s var(--ease-sai);
}
.ia-flut b { font-weight: 500; }
.ia-flut img, .ia-flut svg { width: 52px; height: 52px; padding: 8px; border-radius: 50%; background: var(--ink-1); color: var(--c); }
.inverte { filter: invert(1); }
.ia-flut img.inverte { filter: none; background: var(--paper); }
.ias-faixa { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--e-8) 0 0; padding: 0; max-width: 40rem; }
.ias-faixa li {
  display: flex; align-items: center; gap: .4rem; padding: .4rem .85rem .4rem .45rem; border-radius: 999px; font-size: .9375rem;
  color: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-3); cursor: default;
  transition: box-shadow var(--d-curta), color var(--d-curta), background-color var(--d-curta), translate var(--d-curta) var(--ease-sai);
}
.ias-faixa li:hover, .ias-faixa li:focus-visible { color: var(--paper); translate: 0 -2px; outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.ias-faixa img, .ias-faixa svg { width: 30px; height: 30px; color: var(--c); }
.ias-faixa img.inverte { filter: none; background: var(--paper); border-radius: 50%; padding: 2px; }

@media (prefers-reduced-motion: no-preference) {
  /* O título aparece já no primeiro quadro (é o maior conteúdo da página); o resto chega depois que o prisma acende. */
  .js .hero-texto > :not(h1) { opacity: 0; animation: chega .9s var(--ease-sai) forwards; animation-delay: calc(1.1s + var(--o, 0) * .12s); }
  .js .hero h1 .linha { animation: mascara-linha 1s var(--ease-sai) both; }
  .js .hero h1 .linha + .linha { animation-delay: .12s; }
  .js .hero-texto > :nth-child(2) { --o: 1; }
  .js .hero-texto > :nth-child(3) { --o: 2; }
  .js .hero-texto > :nth-child(4) { --o: 3; }
  .js .hero-texto > :nth-child(5) { --o: 4; }
}
@keyframes mascara-linha { from { clip-path: inset(0 0 100% 0); translate: 0 .35em; } to { clip-path: inset(0 0 -15% 0); translate: 0 0; } }
@keyframes chega { from { opacity: 0; translate: 0 18px; filter: blur(6px); } to { opacity: 1; filter: none; } }

/* Espectro: cada IA é uma faixa de luz que se acende ao entrar na tela. */
.faixas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-3); }
.faixas li {
  position: relative; display: grid; grid-template-columns: 40px minmax(9rem, 16rem) 1fr auto; align-items: center; gap: var(--e-6);
  padding: var(--e-6) var(--e-4); border-bottom: 1px solid var(--ink-3); transition: background-color var(--d-media);
}
.faixas li::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--c);
  box-shadow: 0 0 14px 1px var(--c); transform-origin: 0 50%;
}
.faixas li > svg { color: var(--c); }
.faixas h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
.faixas p { color: var(--paper-2); }
.tipo { font-size: .8125rem; color: var(--paper-3); border: 1px solid var(--ink-4); border-radius: 999px; padding: .2rem .7rem; white-space: nowrap; }

/* Recursos: o prisma fica parado e muda de cor conforme o passo que está na tela. */
.trilho { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: var(--e-16); }
.fixo { position: sticky; top: 7rem; align-self: start; }
/* Prisma vivo (hero.js, modo 'lente'): o passo no meio da tela acende o raio da sua cor e gira o prisma. */
.lente { position: relative; margin-top: var(--e-8); width: 100%; height: min(54vh, 460px); border-radius: var(--raio); overflow: hidden;
  background: radial-gradient(60% 55% at 40% 55%, color-mix(in srgb, var(--ativa, var(--ia-gemini)) 10%, transparent), transparent 75%);
  box-shadow: inset 0 0 0 1px var(--ink-3); transition: background 1s var(--ease-sai); }
.lente canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-24); padding-block: var(--e-12) 30vh; }
.passos li { transition: opacity .6s var(--ease-sai); }
.js .passos li { opacity: .3; }
.js .passos li.atual { opacity: 1; }
.passos h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }
.passos h3::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 3px; background: var(--c); margin-bottom: var(--e-4); box-shadow: 0 0 12px var(--c); }
.passos p { color: var(--paper-2); margin-top: var(--e-3); max-width: 32rem; font-size: 1.125rem; }

/* Planos */
.ciclo { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ink-1); border: 1px solid var(--ink-3); margin-bottom: var(--e-8); }
.ciclo button { font: 500 .9375rem var(--f-texto); color: var(--paper-2); background: none; border: 0; border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer; min-height: 40px; transition: background-color var(--d-curta), color var(--d-curta); }
.ciclo button[aria-pressed="true"] { background: var(--paper); color: var(--ink-0); }
.ciclo button span { font-size: .75rem; color: var(--ia-gpt); margin-left: .3rem; }
.ciclo button[aria-pressed="true"] span { color: #087a52; }
.grade-planos { perspective: 1400px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); align-items: stretch; }
.plano {
  position: relative; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-8); border-radius: var(--raio);
  background: linear-gradient(var(--ink-1), var(--ink-1)) padding-box, linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, var(--ink-3)), var(--ink-3) 45%) border-box;
  border: 1px solid transparent; transition: transform var(--d-media) var(--ease-sai), box-shadow var(--d-media) var(--ease-sai);
}
.plano:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
.plano::after, .faixas li::after, .passos li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), color-mix(in srgb, var(--c) 14%, transparent), transparent 60%);
  transition: opacity .4s var(--ease-sai); }
.plano:hover::after, .faixas li:hover::after, .passos li:hover::after { opacity: 1; }
.passos li { position: relative; padding: var(--e-6); margin: calc(var(--e-6) * -1); border-radius: var(--raio); }
.plano.destaque { background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, linear-gradient(var(--paper-2), var(--ink-4)) border-box; }
.selo-plano { position: absolute; top: -12px; left: var(--e-8); background: var(--paper); color: var(--ink-0); font-size: .75rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; }
.para { color: var(--paper-2); }
.preco { font: 600 1rem var(--f-display); margin-top: var(--e-4); }
.preco b { font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem); font-weight: 600; letter-spacing: -.04em; }
.preco small { color: var(--paper-3); font: 400 .9375rem var(--f-texto); }
.cobranca { color: var(--paper-3); font-size: var(--t-miuda); }
.plano ul { list-style: none; padding: 0; margin: var(--e-4) 0 var(--e-6); display: grid; gap: var(--e-2); color: var(--paper-2); }
.plano li { display: flex; gap: .6rem; }
.plano li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); margin-top: .62em; box-shadow: 0 0 8px var(--c); }
.plano .botao { margin-top: auto; }
.miuda { margin-top: var(--e-8); color: var(--paper-3); font-size: var(--t-miuda); max-width: 60rem; }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: .35s; animation-timing-function: var(--ease-sai); }

/* Comparar */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--ink-3); border-radius: var(--raio); }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ink-3); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { font: 600 .9375rem var(--f-display); letter-spacing: -.01em; }
tbody th { font-weight: 500; color: var(--paper-2); }
.nos { background: rgb(255 255 255 / .04); }
.nao { color: var(--paper-3); }

/* Perguntas */
.perguntas h2 { margin-bottom: var(--e-12); }
.lista { max-width: 52rem; border-top: 1px solid var(--ink-3); }
details { border-bottom: 1px solid var(--ink-3); }
summary { list-style: none; cursor: pointer; padding: var(--e-6) 0; font: 500 1.1875rem var(--f-texto); display: flex; justify-content: space-between; gap: var(--e-4); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--f-display); color: var(--paper-3); transition: rotate var(--d-media) var(--ease-sai); }
details[open] summary::after { rotate: 45deg; }
details p { color: var(--paper-2); padding-bottom: var(--e-6); max-width: 46rem; }
details::details-content { height: 0; overflow: clip; transition: height var(--d-media) var(--ease-sai), content-visibility var(--d-media) allow-discrete; }
details[open]::details-content { height: auto; }

/* Fechamento: o feixe branco atravessa a tela e vira espectro. */
.fechamento { text-align: center; padding-block: var(--e-32) calc(var(--e-32) + 2rem); overflow: clip; }
.fechamento h2 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem); max-width: 16ch; margin-inline: auto; }
.fechamento p { color: var(--paper-2); margin: var(--e-6) 0 var(--e-8); font-size: 1.1875rem; }
.feixe-final { position: absolute; left: 0; right: 0; bottom: var(--e-16); height: 2px; background: linear-gradient(90deg, #fff 0 40%, transparent 40%), var(--espectro); background-size: 100% 100%;
  opacity: .8; filter: drop-shadow(0 0 10px rgb(255 255 255 / .6)); z-index: -1; transform-origin: 0 50%; }

/* Rodapé */
.rodape { padding: var(--e-16) max(16px, calc((100vw - var(--largura)) / 2)) var(--e-8); border-top: 1px solid var(--ink-3); overflow: clip; }
.nome-grande { font: 700 clamp(3rem, 1rem + 11vw, 14rem) / .9 var(--f-display); letter-spacing: -.06em; color: var(--ink-2); -webkit-text-stroke: 1px var(--ink-4); margin-bottom: var(--e-8); }
.nome-grande b { -webkit-text-stroke: 0; }
.linhas { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); color: var(--paper-3); font-size: var(--t-miuda); }
.linhas a { color: var(--paper-2); }
.marcas { flex-basis: 100%; }

/* Revelação ligada à rolagem. Sem suporte, site.js usa IntersectionObserver e a classe .visto. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .progresso { animation: enche linear both; animation-timeline: scroll(root); }
    [data-revela] { animation: revela linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    :is(.cabeca, .fixo, .perguntas, .fechamento) h2 { animation: mascara linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    :is(.cabeca, .perguntas) > h2::before, .cabeca::before { animation: risca-x linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    .plano { animation: ergue linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    .plano:nth-child(2) { animation-range: entry 5% cover 40%; }
    .plano:nth-child(3) { animation-range: entry 10% cover 45%; }
    .faixas li::before { animation: risca-x linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .faixas li > :is(img, svg) { animation: gira-entra linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .hero-texto { animation: sai linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .feixe-final { animation: abre linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
    .nome-grande { animation: sobe-nome linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
  @supports not (animation-timeline: view()) {
    .js [data-revela], .js .faixas li::before { transition: opacity .9s var(--ease-sai), translate .9s var(--ease-sai), filter .9s var(--ease-sai), transform 1.1s var(--ease-sai); }
    .js [data-revela]:not(.visto) { opacity: 0; translate: 0 40px; filter: blur(8px); }
    .js .faixas li:not(.visto)::before { transform: scaleX(0); }
  }
}
@keyframes mascara { from { clip-path: inset(0 0 100% 0); translate: 0 .5em; } to { clip-path: inset(0 0 -10% 0); translate: 0 0; } }
@keyframes ergue { from { opacity: 0; translate: 0 80px; rotate: x 18deg; } to { opacity: 1; translate: 0 0; rotate: x 0deg; } }
@keyframes enche { to { transform: scaleX(1); } }
@keyframes revela { from { opacity: 0; translate: 0 48px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes risca-x { from { transform: scaleX(0); opacity: .2; } to { transform: scaleX(1); opacity: 1; } }
@keyframes gira-entra { from { rotate: -90deg; scale: .4; opacity: 0; } to { rotate: 0deg; scale: 1; opacity: 1; } }
@keyframes sai { to { opacity: 0; translate: 0 -80px; filter: blur(6px); } }
@keyframes abre { from { transform: scaleX(.05); background-size: 250% 100%; } to { transform: scaleX(1); background-size: 100% 100%; } }
@keyframes sobe-nome { from { translate: 0 30%; opacity: 0; } to { translate: 0 0; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .progresso { display: none; }
}

/* Celular */
@media (max-width: 860px) {
  section { padding-block: var(--e-24); }
  .barra nav { display: none; }
  .barra .botao-p { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: min(88vw, 370px); }
  .hero::before { background: linear-gradient(180deg, rgb(7 7 11 / 0) 0, rgb(7 7 11 / .55) min(70vw, 300px), var(--ink-0) min(95vw, 420px)); }
  .faixas li { grid-template-columns: 32px 1fr; gap: var(--e-2) var(--e-4); padding-inline: 0; }
  .faixas li p, .faixas li .tipo { grid-column: 2; justify-self: start; }
  .trilho { grid-template-columns: 1fr; gap: 0; }
  .fixo { position: static; }
  .fixo { position: sticky; top: 72px; z-index: 2; background: var(--ink-0); padding-bottom: var(--e-4); }
  .lente { margin-top: var(--e-4); aspect-ratio: auto; height: 220px; }
  .passos { gap: var(--e-12); padding-bottom: 0; }
  .js .passos li { opacity: 1; }
  .grade-planos { grid-template-columns: 1fr; gap: var(--e-8); }
}