/* =============================================================
   OAZE — site de apresentação
   -------------------------------------------------------------
   A ESTRUTURA VEM DA LP DO PIERRE; O MUNDO É O DO OAZE.
   O que foi emprestado é a GRAMÁTICA, e ela cabe em quatro regras:

     1. tudo em DUAS colunas — nunca três, nunca quatro;
     2. título grande com entrelinha 1.0 e tracking negativo,
        quebrado à mão em duas linhas curtas;
     3. cartão sem caixa: ícone, título e texto soltos no fundo,
        sem borda e sem superfície. A caixa só aparece onde existe
        decisão (plano) ou dobra (FAQ);
     4. a mesma ação volta depois de cada seção, sempre redonda.

   O que NÃO foi emprestado, e por quê:
     · "100+ bancos conectados" e "regulado pelo Bacen" — o OAZE
       não tem Open Finance. Anunciar isso seria mentira;
     · a esteira de imprensa — não há imprensa sobre o OAZE, e
       PRODUCT.md proíbe prova social fabricada.
   No lugar deles entram as três verdades que o OAZE tem hoje.

   VISIBILIDADE EM VÁRIAS MÍDIAS
   Pedido explícito: a página precisa continuar legível no celular,
   no tablet e no computador. As duas colunas viram uma abaixo de
   900px, os títulos usam clamp em vez de tamanho fixo, e a quebra
   manual das linhas é desligada no celular — <br> em tela estreita
   produz uma linha órfã de duas palavras.
   ============================================================= */

/* ---------------- fontes do kit (OFL, servidas daqui) ---------------- */

@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/InstrumentSans-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/InstrumentSans-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/InstrumentSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}

/* ---------------- tokens ---------------- */

:root {
  color-scheme: dark;

  --night: #0D1821;
  --milk: #F0E5CF;
  --mineral: #355565;
  --teal: #5FA99B;
  --tangerine: #E9875E;

  --sup: #13232F;
  --sup-alta: #162936;
  --sup-baixa: #101F2A;
  --linha: rgba(240, 229, 207, .09);
  --linha-forte: rgba(240, 229, 207, .18);
  --tinta-2: #9DAFB5;

  --fonte-titulo: 'Unbounded', system-ui, sans-serif;
  --fonte-corpo: 'Instrument Sans', system-ui, sans-serif;
  --fonte-dado: 'IBM Plex Mono', ui-monospace, monospace;

  --env: min(1120px, calc(100% - 44px));
  --curva: cubic-bezier(.22, .61, .36, 1);

  /* O ritmo do Pierre: muito ar entre blocos, pouco dentro deles. */
  --respiro: clamp(64px, 10vw, 132px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--milk);
  font: 400 17px/1.6 var(--fonte-corpo);
  -webkit-font-smoothing: antialiased;
}

/* height:auto junto dos atributos width/height do HTML: sem ele a
   imagem encolhe na largura e mantém a altura declarada. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-decoration: none; }
a:not(.btn):hover { color: var(--milk); }

::selection { background: var(--teal); color: var(--night); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

.env { width: var(--env); margin-inline: auto; }

/* Recortado, não jogado para fora da tela: o off-screen antigo
   estica a página e obriga a um overflow:hidden que corta menus. */
.pular {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--milk); color: var(--night);
  padding: 10px 16px; border-radius: 0 0 12px 0; font-weight: 600;
}
a.pular:hover, a.pular:focus { color: var(--night); }
.pular:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
  left: 0; top: 0; z-index: 200;
}

/* ---------------- tipografia ---------------- */

/* Unbounded em caixa baixa é a voz da marca. A entrelinha 1.0 e o
   tracking negativo são do Pierre: título grande só funciona
   apertado, senão vira um parágrafo em corpo grande. */
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 500; text-transform: lowercase; margin: 0; }
h1 {
  font-size: clamp(2.5rem, 6.6vw, 4.2rem);
  line-height: 1; letter-spacing: -.03em;
}
h2 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.02; letter-spacing: -.028em;
}
h3 { font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.25; letter-spacing: -.01em; }

p { margin: 0; }

.rotulo {
  font: 500 12px/1.5 var(--fonte-dado);
  text-transform: uppercase; letter-spacing: .17em; color: var(--tinta-2);
}
.dado { font-family: var(--fonte-dado); font-variant-numeric: tabular-nums; }
.grande { font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--tinta-2); max-width: 46ch; }

/* A quebra manual das linhas é do desktop. No celular ela deixaria
   uma linha órfã de duas palavras. */
@media (max-width: 720px) { .quebra { display: none; } }

/* ---------------- botões ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 14px 28px;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 16px/1 var(--fonte-corpo); cursor: pointer;
  transition: transform .18s var(--curva), background-color .18s var(--curva), border-color .18s var(--curva);
}
.btn:active { transform: translateY(1px); }
.btn-claro { background: var(--milk); color: var(--night); }
.btn-claro:hover { background: #fff; }
.btn-linha { background: transparent; color: var(--milk); border-color: var(--linha-forte); }
.btn-linha:hover { border-color: var(--milk); }

/* ---------------- cabeçalho ---------------- */

/* ---------------- o topo suspenso ----------------
   Uma barra colada no alto, da borda esquerda à direita, divide a
   tela em duas faixas e come a primeira linha do conteúdo. Suspensa,
   ela vira um objeto sobre a página: o conteúdo passa POR BAIXO e
   continua inteiro, e a barra ganha um lado de fora.

   O vidro precisa de três coisas para ler como vidro, e não como um
   retângulo cinza: o desfoque do que passa atrás, uma saturação
   levemente aumentada (senão a cor de trás chega lavada) e um fio
   claro na borda de cima, que é onde a luz bate primeiro. */
.topo {
  position: fixed; top: clamp(10px, 1.6vh, 18px); left: 50%; z-index: 90;
  width: min(var(--env), 100% - 24px); transform: translateX(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sup) 58%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
          backdrop-filter: blur(20px) saturate(165%);
  border: 1px solid rgba(240, 229, 207, .1);
  box-shadow:
    inset 0 1px 0 rgba(240, 229, 207, .14),
    0 18px 40px -22px rgba(0, 0, 0, .9);
  transition: background-color .3s var(--curva), border-color .3s var(--curva);
}
/* Rolando, o vidro fecha um pouco: sobre conteúdo claro um vidro
   muito aberto deixa o menu ilegível. */
.topo.rolou {
  background: color-mix(in srgb, var(--sup) 78%, transparent);
  border-color: rgba(240, 229, 207, .16);
}
.topo .env { display: flex; align-items: center; gap: 22px; height: 62px; width: auto; padding-inline: clamp(14px, 2vw, 26px); }

/* O conteúdo passa por baixo da barra, então o primeiro bloco precisa
   do espaço dela de volta. O portal não: ele é tela cheia e a barra
   flutua sobre a marca de propósito. */
body { padding-top: 0; }
main > .secao:first-child { padding-top: calc(var(--respiro) + 62px); }

.marca { display: inline-flex; align-items: center; flex: none; }
.marca img { height: 30px; width: auto; }

.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { color: var(--tinta-2); font-size: 15.5px; font-weight: 500; transition: color .16s var(--curva); }
.menu a:hover { color: var(--milk); }

.acoes-topo { display: flex; align-items: center; gap: 10px; flex: none; }
.acoes-topo .btn { min-height: 44px; padding: 11px 20px; font-size: 15px; }

.hamburguer {
  display: none; width: 44px; height: 44px; margin-left: auto;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--linha-forte);
  border-radius: 12px; color: var(--milk); cursor: pointer;
}

/* ---------------- herói ---------------- */

.heroi { position: relative; padding: clamp(40px, 6vw, 76px) 0 var(--respiro); }
.heroi::before {
  content: ''; position: absolute; inset: -18% 0 auto 0; height: 760px; z-index: -1;
  background:
    radial-gradient(50% 42% at 76% 14%, rgba(95, 169, 155, .17), transparent 66%),
    radial-gradient(44% 38% at 10% 2%, rgba(53, 85, 101, .32), transparent 70%);
  pointer-events: none;
}

/* O nó ocupa a largura inteira abaixo do texto: ele é a cena, e
   espremido numa coluna de 400px as curvas não teriam onde correr. */
.heroi .env {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px); justify-items: center; text-align: center;
}
.heroi-texto { display: grid; gap: 22px; justify-items: center; max-width: 46ch; }
.heroi h1 em { font-style: normal; color: var(--teal); }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.heroi-tela { justify-self: center; width: min(100%, 380px); }
.heroi-tela img { border-radius: 26px; }

/* =============================================================
   O GRÃO, O VIDRO E O NÓ
   -------------------------------------------------------------
   A estrutura vem do sistema que o Jonatham anexou: fundo escuro
   com grão de pontos, camadas de vidro desfocado, um nó central
   ligado por curvas a cartões satélites. O MUNDO continua sendo o
   do OAZE: nada de ouro sobre preto — Noite, Leite de Coco e o
   único verde do oásis, nas fontes da marca.

   O grão é fixo e some antes da metade da tela. Um padrão que
   acompanha a rolagem vira textura de tapete; parado e esmaecendo,
   vira profundidade, que é o que ele está ali para dar.
   ============================================================= */

body::before {
  content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-image: radial-gradient(rgba(240, 229, 207, .085) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(130% 70% at 50% 0%, #000 0%, transparent 74%);
          mask-image: radial-gradient(130% 70% at 50% 0%, #000 0%, transparent 74%);
}

/* O vidro: uma regra só, usada por tudo que se sobrepõe. Sem o
   desfoque, duas camadas translúcidas somam o que está atrás e a
   página fica suja justamente onde ela deveria descansar. */
.vidro {
  background: rgba(240, 229, 207, .03);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 229, 207, .1);
  border-radius: clamp(18px, 2.2vw, 30px);
}

/* ---------------- a pílula que diz o que a cena é ---------------- */

.pilula-vivo {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 7px 15px 7px 11px; border-radius: 999px;
  background: rgba(240, 229, 207, .03);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 229, 207, .1);
  font: 500 11px/1 var(--fonte-dado); text-transform: uppercase; letter-spacing: .16em;
  color: var(--milk);
}
.pilula-vivo em {
  font: 400 12px/1 var(--fonte-corpo); font-style: normal;
  text-transform: none; letter-spacing: 0; color: var(--tinta-2);
}
.pilula-ponto {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--teal); box-shadow: 0 0 0 0 rgba(95, 169, 155, .55);
  animation: respira 2.4s ease-out infinite;
}
@keyframes respira {
  0%   { box-shadow: 0 0 0 0 rgba(95, 169, 155, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(95, 169, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 169, 155, 0); }
}

/* ---------------- o nó e os satélites ---------------- */

/* A ALTURA MANDA, e a largura sai da proporção — a mesma regra que
   consertou os aparelhos. Se a largura mandasse, a cena cresceria
   para baixo em tela larga e empurraria a manchete para fora do
   primeiro quadro, que é o único que todo mundo vê. */
.nodo {
  position: relative; grid-column: 1 / -1; justify-self: center;
  height: min(48vh, 430px); aspect-ratio: 1000 / 640; width: auto; max-width: 100%;
  margin-top: clamp(10px, 2vw, 26px);
  --a: 1; --b: 1; --c: 1;
}

.nodo-linhas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; opacity: var(--b);
}
.nodo-fios .fio {
  fill: none; stroke: url(#fioOaze); stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(95, 169, 155, .35));
  animation: pulsa-galho 5s ease-in-out infinite;
}
.nodo-fios .fio:nth-child(2) { animation-delay: -1.2s; }
.nodo-fios .fio:nth-child(3) { animation-delay: -2.4s; }
.nodo-fios .fio:nth-child(4) { animation-delay: -3.6s; }
@keyframes pulsa-galho { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }

/* A segunda camada é o sentido da coisa: os tracinhos correm de
   fora para DENTRO, porque é isso que o OAZE faz. Correndo ao
   contrário, a mesma animação contaria a história errada. */
.nodo-fluxo .fio-fluxo {
  fill: none; stroke: var(--teal); stroke-width: 1.6;
  stroke-dasharray: 5 15; opacity: .5;
  animation: correnteza 2.4s linear infinite;
}
.nodo-fluxo .fio-fluxo:nth-child(2) { animation-delay: -.6s; }
.nodo-fluxo .fio-fluxo:nth-child(3) { animation-delay: -1.2s; }
.nodo-fluxo .fio-fluxo:nth-child(4) { animation-delay: -1.8s; }
@keyframes correnteza { to { stroke-dashoffset: -40; } }

.nodo-centro {
  position: absolute; left: 50%; top: 50%; width: 47%;
  aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: clamp(12px, 1.6vw, 22px);
  background: rgba(240, 229, 207, .03);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 229, 207, .14);
  box-shadow: 0 0 100px rgba(95, 169, 155, .2);
  opacity: calc(.25 + .75 * var(--a));
  transform: translate(-50%, -50%) scale(calc(.93 + .07 * var(--a)));
}
.nodo-centro img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.satelite {
  position: absolute; margin: 0; width: 17%;
  display: grid; gap: 9px; justify-items: center;
}
.satelite > img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  border-radius: 20px; border: 1px solid rgba(240, 229, 207, .1);
  /* Dessaturado, não cinza: o verde do oásis é a assinatura do
     produto, e apagá-lo por completo esconderia justamente o que a
     imagem veio mostrar. Ao passar o mouse, volta inteiro. */
  filter: grayscale(.55) contrast(1.02);
  transition: filter .7s var(--curva), transform .4s var(--curva), box-shadow .4s var(--curva);
}
.satelite figcaption {
  font: 500 11px/1.45 var(--fonte-dado); text-transform: uppercase;
  letter-spacing: .16em; color: var(--tinta-2); text-align: center;
}
.satelite:hover > img {
  filter: grayscale(0); transform: scale(1.05);
  box-shadow: 0 0 60px rgba(95, 169, 155, .3);
}

.sat-a { left: 15%; top: 23.4%; }
.sat-b { left: 86%; top: 20.3%; width: 22%; }
.sat-b > img { aspect-ratio: 4 / 3; }
.sat-c { left: 14%; top: 78.9%; }
.sat-d { left: 87%; top: 81.3%; }

.sat-a, .sat-c {
  opacity: var(--b);
  transform: translate(-50%, -50%) translateX(calc((1 - var(--b)) * -46px));
}
.sat-b, .sat-d {
  opacity: var(--c);
  transform: translate(-50%, -50%) translateX(calc((1 - var(--c)) * 46px));
}

/* Em tela estreita não há volta do nó: as curvas cruzariam os
   próprios cartões. A cena vira o que ela sempre foi por baixo —
   o painel e, embaixo, o que chega nele. */
@media (max-width: 900px) {
  .nodo { aspect-ratio: auto; height: auto; display: grid; gap: 16px; width: 100%; max-width: none; }
  .nodo-linhas { display: none; }
  .nodo-centro,
  .satelite { position: static; transform: none; opacity: 1; }
  .nodo-centro { width: 100%; }
  .satelite { width: 100%; }
  .nodo .satelite { grid-column: span 1; }
  .nodo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nodo-centro { grid-column: 1 / -1; }
  .sat-b > img { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .nodo-fios .fio,
  .nodo-fluxo .fio-fluxo,
  .pilula-ponto { animation: none; }
}

/* ---------------- barra de confiança ----------------
   Três provas, no lugar onde o Pierre põe "100+ bancos". As dele
   não cabem aqui: o OAZE não conecta banco e não é regulado pelo
   Bacen. Estas são verdade hoje, e é isso que as torna úteis. */

.provas { border-block: 1px solid var(--linha); }
.provas .env {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; padding: clamp(26px, 3.4vw, 40px) 0;
}
.prova { display: grid; gap: 5px; justify-items: center; text-align: center; }
.prova strong {
  font: 500 clamp(1.15rem, 2vw, 1.5rem)/1.1 var(--fonte-titulo);
  text-transform: lowercase; color: var(--milk); letter-spacing: -.02em;
}
.prova span { font: 500 11px/1.4 var(--fonte-dado); text-transform: uppercase; letter-spacing: .15em; color: var(--tinta-2); }

/* ---------------- seções ---------------- */

.secao { padding: var(--respiro) 0; }
.secao-topo { display: grid; gap: 14px; max-width: 54ch; margin-bottom: clamp(34px, 4.6vw, 62px); }
.secao-topo p { color: var(--tinta-2); font-size: clamp(1rem, 1.3vw, 1.1rem); }

/* Ação repetida ao fim de cada bloco, como no Pierre: a pessoa
   decide no momento em que o argumento acabou de convencer. */
.fecho { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 60px); }

/* ---------------- recursos: 2×2, sem caixa ----------------
   Os cartões do Pierre não têm borda nem fundo — é o ar entre eles
   que separa. Caixa em volta de tudo é o que faz uma página parecer
   um painel de administração. */

.recursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4.6vw, 56px) 26px; }
.recurso { display: grid; gap: 14px; align-content: start; }
/* A COCO NO LUGAR DO LADRILHO DE ÍCONE
   A primeira versão punha um quadrado de 46px com um ícone genérico
   acima de cada título — o cartão de recurso que qualquer produto
   poderia ter. A Coco existe e faz exatamente estas quatro coisas;
   mostrá-la fazendo diz mais e é só do OAZE. A mancha por trás é o
   único lugar onde o tangerina aparece, e ele chega por ela. */
.recurso-coco {
  position: relative; width: 132px; height: 132px; margin: 0 0 2px;
}
.recurso-coco img { width: 100%; height: 100%; object-fit: contain; }
.recurso-coco::before {
  content: ''; position: absolute; inset: 12% 6% 4% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(95, 169, 155, .26), rgba(233, 135, 94, .08) 54%, transparent 72%);
  filter: blur(18px);
}
.recurso p { color: var(--tinta-2); font-size: 15.5px; max-width: 42ch; }

/* ---------------- garantias ----------------
   Segurança não é recurso: são afirmações. Sem ícone e sem caixa —
   um fio em cima de cada uma, que é o que o olho precisa para saber
   onde uma termina e a outra começa. */
.garantias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 44px) 26px; }
.garantia { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--linha-forte); }
.garantia p { color: var(--tinta-2); font-size: 15.5px; max-width: 42ch; }

/* ---------------- blocos alternados ---------------- */

.bloco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 60px); align-items: center; }
.bloco + .bloco { margin-top: var(--respiro); }
.bloco-texto { display: grid; gap: 20px; justify-items: start; align-content: center; }
.bloco-texto p { color: var(--tinta-2); font-size: clamp(1rem, 1.3vw, 1.08rem); max-width: 44ch; }
.bloco-tela img { border-radius: 24px; }
.bloco.invertido .bloco-tela { order: -1; }

.lista-limpa { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.lista-limpa li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; color: var(--tinta-2); font-size: 15.5px; }
.lista-limpa svg { width: 20px; height: 20px; color: var(--teal); margin-top: 2px; }
.lista-limpa strong { color: var(--milk); font-weight: 600; }

/* ---------------- a Coco ---------------- */

.coco-retrato { position: relative; justify-self: center; width: min(100%, 340px); }
.coco-retrato::before {
  content: ''; position: absolute; inset: 10% 4% 2% 4%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(95, 169, 155, .3), rgba(233, 135, 94, .1) 52%, transparent 72%);
  filter: blur(24px);
}
/* A fala da Coco no formato do app: balão claro, tinta escura. */
/* `.bloco-texto p` pesa (0,2,0) e vencia um `.coco-fala` de (0,1,0):
   a tinta secundária cinza caía sobre o creme do balão, 1,82:1.
   O seletor precisa do contexto e do elemento para ganhar. */
.bloco-texto p.coco-fala, .coco-fala {
  padding: 18px 20px; background: var(--milk); color: var(--night);
  border-radius: 18px 18px 18px 6px; font-size: 16px; line-height: 1.5; max-width: 46ch;
}
.coco-fala strong { font-weight: 600; }

/* ---------------- planos ---------------- */

.ciclo {
  display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 26px;
  border: 1px solid var(--linha); border-radius: 999px; background: var(--sup);
}
.ciclo button {
  min-height: 40px; padding: 9px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14.5px/1 var(--fonte-corpo); color: var(--tinta-2); background: transparent;
  transition: background-color .18s var(--curva), color .18s var(--curva);
}
.ciclo button[aria-pressed="true"] { background: var(--milk); color: var(--night); }
/* Dentro do botão ATIVO o fundo vira creme, e o selo com tinta
   creme por cima dele media 1,76:1. Ele herda a tinta do botão em
   vez de fixar a sua. */
.ciclo button[aria-pressed="true"] .economia {
  /* Teal sólido, sem alfa: a mistura com o creme por baixo parava
     em 4,33:1 para um texto de 11px. Sólido são 6,53:1. */
  background: var(--teal);
  color: var(--night);
}
.ciclo .economia {
  margin-left: 7px; padding: 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 24%, transparent);
  font: 500 11px/1 var(--fonte-dado); color: var(--milk);
}

/* Três planos, não dois: o básico existe no catálogo e some da
   página se a grade for de duas colunas. */
.planos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; max-width: 760px; }
@media (max-width: 1000px) { .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plano {
  display: grid; align-content: start; gap: 6px;
  padding: clamp(26px, 3vw, 36px);
  background: var(--sup); border: 1px solid var(--linha); border-radius: 24px;
}
.plano.e-destaque {
  background: linear-gradient(152deg, var(--sup-alta), var(--sup-baixa));
  border-color: color-mix(in srgb, var(--teal) 42%, transparent);
}
.plano-cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.plano-selo {
  padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 34%, transparent);
  font: 500 11px/1 var(--fonte-dado); letter-spacing: .12em; text-transform: uppercase; color: var(--milk);
}
.preco-valor { font: 500 clamp(2.2rem, 4.2vw, 2.9rem)/1 var(--fonte-titulo); letter-spacing: -.03em; color: var(--milk); }
.preco-ciclo { color: var(--tinta-2); font-size: 15px; }
.preco-nota { margin-top: 10px; font-size: 13.5px; color: var(--tinta-2); }
.plano .btn { margin-top: 20px; width: 100%; }
.plano-lista { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plano-lista li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--tinta-2); font-size: 15.5px; }
.plano-lista svg { width: 18px; height: 18px; color: var(--teal); margin-top: 3px; }
.plano-teto { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--tinta-2); }

/* ---------------- perguntas ---------------- */

.perguntas { display: grid; gap: 0; max-width: 780px; }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font: 500 clamp(1rem, 1.5vw, 1.12rem)/1.4 var(--fonte-corpo); color: var(--milk);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: ''; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--tinta-2); border-bottom: 2px solid var(--tinta-2);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s var(--curva);
}
.pergunta[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.pergunta p { padding: 0 0 24px; color: var(--tinta-2); font-size: 16px; max-width: 68ch; }

/* ---------------- chamada final ---------------- */

.final { padding: var(--respiro) 0; border-top: 1px solid var(--linha); background: var(--sup-baixa); }
.final .env { display: grid; gap: 22px; justify-items: center; text-align: center; }
.final h2 { max-width: 16ch; }
.final p { color: var(--tinta-2); max-width: 44ch; }
/* Sem versal: 67 caracteres em caixa alta perdem a silhueta das
   palavras e viram uma barra cinza. O mono e o tracking bastam
   para marcar que é um selo, não um parágrafo. */
.final-selo { font: 500 13px/1.6 var(--fonte-dado); letter-spacing: .04em; color: var(--tinta-2); }

/* ---------------- rodapé ---------------- */

.rodape { padding: clamp(40px, 6vw, 64px) 0 34px; border-top: 1px solid var(--linha); }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 30px; }
.rodape h3 {
  font-family: var(--fonte-dado); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 14px;
}
.rodape ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.rodape a { color: var(--milk); font-size: 15px; }
.rodape a:hover { color: var(--teal); }
.rodape-sobre { color: var(--tinta-2); font-size: 15px; max-width: 34ch; margin-top: 14px; }
.rodape-fim {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--linha);
  font-size: 14px; color: var(--tinta-2);
}

/* ---------------- revelar ao rolar ---------------- */

.anima .revela { opacity: 0; transform: translateY(18px); }
.anima .revela.visivel {
  opacity: 1; transform: none;
  transition: opacity .62s var(--curva), transform .62s var(--curva);
}
@media (prefers-reduced-motion: reduce) {
  .anima .revela, .anima .revela.visivel { opacity: 1; transform: none; transition: none; }
}

/* =============================================================
   VISIBILIDADE EM VÁRIAS MÍDIAS
   Duas colunas viram uma; a quebra manual some; o menu do topo
   passa a crescer em FLUXO, sem position:absolute — dois painéis
   absolutos com deslocamento fixo se cruzam na primeira mudança de
   altura, e foi exatamente o que aconteceu na versão anterior.
   ============================================================= */

@media (max-width: 900px) {
  :root { --env: calc(100% - 36px); }
  .heroi .env,
  .recursos,
  .garantias,
  .bloco,
  .planos,
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }
  .bloco.invertido .bloco-tela { order: 0; }
  .bloco-tela, .coco-retrato { max-width: 420px; margin-inline: auto; }
  .provas .env { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .prova { grid-template-columns: auto; }
  .menu, .acoes-topo { display: none; }
  .hamburguer { display: inline-flex; }

  .topo.aberto .env { flex-wrap: wrap; height: auto; padding-bottom: 16px; }
  .topo.aberto .menu {
    display: grid; gap: 2px; flex: 1 0 100%; order: 3;
    margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linha);
  }
  .topo.aberto .menu a { padding: 12px 4px; min-height: 44px; display: flex; align-items: center; }
  .topo.aberto .acoes-topo { display: grid; gap: 8px; flex: 1 0 100%; order: 4; margin-top: 10px; }
  .topo.aberto .acoes-topo .btn { width: 100%; min-height: 46px; }

  /* 40px passa no ponteiro e não passa no polegar. */
  .ciclo button { min-height: 44px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }
  .heroi-acoes .btn, .fecho .btn { width: 100%; }
  .fecho { display: grid; }
}

/* =============================================================
   MOTION
   -------------------------------------------------------------
   Quatro peças, e todas com a mesma regra: existem para provar
   alguma coisa que uma imagem parada não prova. Nenhuma é enfeite,
   e nenhuma se mexe embaixo de um texto que está sendo lido.

   Tudo aqui morre em prefers-reduced-motion, no fim do arquivo.
   ============================================================= */

/* ---------------- o hello ----------------
   Um traço só, escrito do começo ao fim, como no OAZE 1. Aqui ele é
   menor e verde-água: lá era ouro sobre preto e tomava a tela
   inteira; nesta página é uma saudação antes da manchete, e quem
   manda é a manchete. */

.hello-linha { margin: 0 0 -6px; }
.hello { display: block; width: clamp(190px, 26vw, 300px); height: auto; overflow: visible; }
.hello-traco {
  fill: none; stroke: url(#hello-tinta);
  stroke-width: 11; stroke-linecap: round; stroke-linejoin: round;
  /* pathLength normaliza o traço no site.js: o tracejado deixa de
     depender do comprimento real do caminho, que muda se alguém
     redesenhar a letra. */
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
/* Quem escreve o traço é o site.js, pelo dashoffset e com o
   comprimento real do caminho. Uma animação de CSS em paralelo
   terminava sozinha no meio do desenho. */

/* ---------------- o palco do herói ---------------- */

.heroi-palco { position: relative; justify-self: center; width: min(100%, 400px); }

.heroi-tela {
  position: relative; margin: 0 auto; width: min(100%, 380px);
  aspect-ratio: 820 / 1728;
}
.heroi-tela .quadro {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 26px; opacity: 0;
  transition: opacity .6s var(--curva);
}
.heroi-tela .quadro.is-ativo { opacity: 1; }

/* A COCO NÃO SOME AO ROLAR
   Ela fica acenando enquanto o herói passa. Antes era um desenho
   parado que o primeiro gesto de rolagem levava embora — a primeira
   coisa que o produto tem de própria saía de cena antes de ser
   vista. */
.coco-acena {
  position: absolute; left: -14%; bottom: -6%; width: 44%; margin: 0;
  z-index: 2; pointer-events: none;
  transform-origin: 62% 88%;
}
.coco-acena img { display: block; width: 100%; height: auto; }
.coco-acena::before {
  content: ''; position: absolute; inset: 14% 6% 2% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(95, 169, 155, .3), rgba(233, 135, 94, .1) 55%, transparent 72%);
  filter: blur(20px);
}
.anima .coco-acena { animation: acenar 2.6s ease-in-out infinite; }
@keyframes acenar {
  0%, 62%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(-7deg); }
  78% { transform: rotate(5deg); }
  86% { transform: rotate(-5deg); }
  94% { transform: rotate(2deg); }
}

/* ---------------- os cartões entrando no OAZE ----------------
   Rodapé do primeiro quadro, por baixo do texto, opacidade baixa. O
   ciclo é longo de propósito: a 14% e quinze segundos por volta ele é
   percebido sem disputar a leitura. */

.fundindo {
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(180px, 22vw, 280px);
  z-index: -1; opacity: .14; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%, #000 76%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 38%, #000 76%, transparent);
}
.fundindo .carta {
  position: absolute; left: 50%; top: 42%;
  width: clamp(112px, 13vw, 168px); aspect-ratio: 1.585;
  margin-left: calc(clamp(112px, 13vw, 168px) / -2);
  border-radius: 12px; border: 1px solid rgba(240, 229, 207, .22);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
}
/* Mesma conta do app: matiz da marca, saturação e claridade do OAZE.
   Aqui os valores são fixos porque o site não tem os bancos de
   ninguém — é uma cena, não a carteira de uma pessoa. */
.fundindo .itau   { background: linear-gradient(135deg, hsl(28 34% 72%), hsl(28 31% 60%)); }
.fundindo .nubank { background: linear-gradient(135deg, hsl(276 34% 72%), hsl(276 31% 60%)); }
.fundindo .inter  { background: linear-gradient(135deg, hsl(29 34% 72%), hsl(29 31% 60%)); }
.fundindo .c6     { background: linear-gradient(135deg, hsl(202 16% 72%), hsl(202 15% 60%)); }
.fundindo .bb     { background: linear-gradient(135deg, hsl(51 34% 72%), hsl(51 31% 60%)); }
.fundindo .oaze {
  background: linear-gradient(135deg, var(--teal), var(--mineral));
  display: grid; place-items: center; opacity: 0;
  border-color: rgba(240, 229, 207, .4);
  --x: 0%; --y: 0%; --r: 0deg;
}
.fundindo .oaze b {
  font: 500 clamp(13px, 1.5vw, 19px)/1 var(--fonte-titulo);
  color: var(--night); letter-spacing: -.02em;
}

.fundindo .c1 { --x: -190%; --y: -52%; --r: -17deg; }
.fundindo .c2 { --x: -88%;  --y: 34%;  --r: 9deg; }
.fundindo .c3 { --x: 12%;   --y: -46%; --r: -6deg; }
.fundindo .c4 { --x: 104%;  --y: 30%;  --r: 14deg; }
.fundindo .c5 { --x: 196%;  --y: -30%; --r: -11deg; }

/* Cada cartão sai do seu lugar e some no centro; o OAZE aparece
   quando o último chega. Os atrasos são escalonados para a fusão ter
   direção: os de fora entram por último. */
.anima .fundindo .carta:not(.oaze) { animation: convergir 15s var(--curva) infinite; }
.anima .fundindo .c1 { animation-delay: 0s; }
.anima .fundindo .c2 { animation-delay: .5s; }
.anima .fundindo .c3 { animation-delay: 1s; }
.anima .fundindo .c4 { animation-delay: 1.5s; }
.anima .fundindo .c5 { animation-delay: 2s; }
.anima .fundindo .oaze { animation: virar-oaze 15s var(--curva) infinite; }

@keyframes convergir {
  0%, 12%   { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 1; }
  34%, 60%  { transform: translate(0, 0) rotate(0deg) scale(.92); opacity: 0; }
  74%       { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 0; }
  86%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 1; }
}
@keyframes virar-oaze {
  0%, 26%   { opacity: 0; transform: translate(0, 0) scale(.86); }
  38%, 58%  { opacity: 1; transform: translate(0, 0) scale(1); }
  70%, 100% { opacity: 0; transform: translate(0, 0) scale(.86); }
}

/* =============================================================
   HERDADOS DO SITE NO AR
   -------------------------------------------------------------
   Duas peças que o JavaScript injeta e que não podiam sumir na
   troca da página: o aviso de cookies (assets/js/cookies.js) e a
   bandeira redonda de idioma (assets/js/idioma-esfera.js).

   O CSS original delas vive em assets/css/site.css e é escrito
   nos tokens do v1 — --ouro, --bruma, --raso, --borda-ouro. Aqui
   nenhum desses existe, e o ouro saiu da marca na V2.1. Então elas
   foram reescritas nos tokens desta página, e não portadas: CSS
   apontando para variáveis inexistentes não quebra com erro, ele
   simplesmente pinta de preto no preto e ninguém vê o aviso legal.
   ============================================================= */

/* ---------------- aviso de cookies ---------------- */

.aviso-cookies {
  position: fixed; z-index: 10000; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  width: min(760px, calc(100% - 28px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px; padding: 16px 18px;
  color: var(--milk); background: color-mix(in srgb, var(--sup) 96%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--linha-forte); border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
.aviso-cookies p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--tinta-2); }
.aviso-cookies a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.aviso-cookies a:hover { color: var(--milk); }
.aviso-cookies-acoes { display: flex; flex: none; gap: 8px; }
.aviso-cookies-botao {
  min-height: 42px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid transparent;
  font: 600 .82rem/1.15 var(--fonte-corpo); cursor: pointer;
  transition: background-color .18s var(--curva), border-color .18s var(--curva);
}
/* Aceitar e recusar têm o MESMO peso visual. Um "recusar" apagado
   ao lado de um "aceitar" cheio é escolha encenada, não oferecida. */
.aviso-cookies-aceitar { color: var(--night); background: var(--milk); }
.aviso-cookies-aceitar:hover { background: #FFF6E4; }
.aviso-cookies-recusar { color: var(--milk); background: transparent; border-color: var(--linha-forte); }
.aviso-cookies-recusar:hover { border-color: var(--milk); }
.aviso-cookies-botao:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

@media (max-width: 620px) {
  .aviso-cookies { align-items: stretch; flex-direction: column; gap: 12px; }
  .aviso-cookies-acoes { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------------- a bandeira redonda ----------------
   Ela se pendura sozinha em .topo .env, que já é fixo. Um elemento
   solto em position:fixed acabaria por cima do "Começar grátis" em
   alguma largura, e isso só se descobre depois de publicado. */

.idioma-esfera { position: relative; flex: none; }

.idioma-esfera-botao {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border-radius: 50%; overflow: hidden; cursor: pointer;
  background: var(--sup); border: 1px solid var(--linha-forte);
  box-shadow: 0 2px 10px rgba(5, 15, 22, .45);
  transition: transform .2s var(--curva), border-color .2s var(--curva);
}
.idioma-esfera-botao svg { width: 100%; height: 100%; display: block; }
.idioma-esfera-botao:hover { transform: translateY(-1px); border-color: var(--teal); }
.idioma-esfera-botao:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.idioma-esfera-painel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--sup-alta); border: 1px solid var(--linha-forte);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  display: none;
}
.idioma-esfera.esta-aberta .idioma-esfera-painel { display: block; }

.idioma-esfera-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--milk);
  font: 500 15px/1 var(--fonte-corpo); text-align: left; cursor: pointer;
}
.idioma-esfera-item:hover { background: rgba(240, 229, 207, .07); }
.idioma-esfera-item svg { flex: none; border-radius: 50%; }
.idioma-esfera-item.is-atual { color: var(--teal); }
.idioma-esfera-item:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }


/* =============================================================
   O PORTAL
   -------------------------------------------------------------
   A página começa fechada. Preto, "bem-vindo ao" pequeno, OAZE
   ocupando a tela. Rolar abre dois painéis para as bordas enquanto
   o letreiro cresce, aperta o espaçamento e se parte em duas
   metades que viajam para lados opostos.

   Crescer e apertar AO MESMO TEMPO é o efeito inteiro. Fazer só um
   dos dois vira zoom, e zoom qualquer página tem.

   Todo valor sai da POSIÇÃO da rolagem, escrita pelo site.js em
   --p (0 a 1). Nada aqui depende de relógio, então a abertura anda
   para a frente e para trás na velocidade do dedo de quem lê.
   ============================================================= */

.portal {
  position: relative;
  /* Duas telas e meia de curso. Menos que isso e a abertura termina
     antes de ser percebida; mais, e vira trabalho. */
  height: 250vh;
}
.portal-palco {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; isolation: isolate;
  --p: 0;
}
.portal-mundo { position: absolute; inset: 0; display: grid; align-content: center; overflow: hidden; }

/* O HERÓI PRECISA CABER EM UMA TELA
   Dentro do portal ele não pode transbordar: o palco tem altura fixa
   de 100vh e o que passa disso é CORTADO — foi assim que a manchete
   sumiu por cima na primeira montagem, sem erro nenhum aparecer.
   Então aqui a manchete é menor que a da página solta, os respiros
   encolhem, e a cena dos aparelhos ganha teto em vh: numa tela baixa
   ela diminui junto, em vez de empurrar o texto para fora. */
.portal-mundo .heroi { padding-block: 86px 0; }
.portal-mundo .heroi .env { gap: clamp(18px, 3.4vh, 34px); }
.portal-mundo .heroi h1 { font-size: clamp(28px, 3.3vw, 46px); }
.portal-mundo .heroi .grande { font-size: clamp(.95rem, 1.2vw, 1.05rem); }
.portal-mundo .heroi-texto { gap: clamp(12px, 2vh, 20px); }

/* ---- os dois painéis ----
   Começam encostados no meio, então a cena nasce fechada. Cada um
   tem um pouco mais de metade da largura e sai ANDANDO ALÉM DA
   PRÓPRIA LARGURA, para limpar a moldura inteira: parar em 100%
   deixaria um fio do painel na borda em telas largas. */
.portal-painel {
  position: absolute; top: 0; bottom: 0; width: 52vw; z-index: 3;
  background: var(--night);
  will-change: transform;
}
.portal-painel-esq { left: 0;  transform: translate3d(calc(var(--p) * -106%), 0, 0); }
.portal-painel-dir { right: 0; transform: translate3d(calc(var(--p) * 106%), 0, 0); }

/* ---- o letreiro ---- */
.portal-letreiro {
  position: absolute; inset: 0; z-index: 4;
  display: grid; align-content: center; justify-items: center;
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--p) * 1.9), 1);
}
.portal-boas {
  margin: 0 0 clamp(4px, 1.2vh, 14px);
  font: 500 clamp(11px, 1.5vw, 15px)/1 var(--fonte-dado);
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--tinta-2);
  /* o subtítulo sobe e some antes da marca: dois textos saindo
     juntos brigam por atenção na saída */
  transform: translateY(calc(var(--p) * -40px));
  opacity: clamp(0, calc(1 - var(--p) * 3.4), 1);
}
/* só para leitor de tela: a marca é imagem decorativa, e o nome
   precisa existir como texto em algum lugar do h1 */
.sr-so {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.portal-marca {
  position: relative; margin: 0;
  width: min(86vw, 900px); aspect-ratio: 1200 / 300;
  /* CRESCE enquanto abre. Uma imagem não tem espaçamento entre letras
     para apertar, então quem faz o papel do aperto é a escala das
     duas metades andando para fora: o miolo some e o olho lê a marca
     se partindo, não uma foto aumentando. */
  transform: scale(calc(1 + var(--p) * .38));
  will-change: transform;
}
.portal-logo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  /* A marca NASCE VISÍVEL. A entrada é um acréscimo, e por isso
     mora atrás de .anima, que só existe quando há script vivo: uma
     logo que depende de uma animação para aparecer é uma logo que
     some quando a animação não roda, e aí não sobra marca nenhuma. */
  opacity: 1;
  will-change: transform, opacity, filter;
}
/* Cada cópia mostra METADE da marca, e as duas metades viajam para
   lados opostos conforme o portal abre. */
.portal-logo-esq { clip-path: inset(0 50% 0 0); }
.portal-logo-dir { clip-path: inset(0 0 0 50%); }

/* A ENTRADA: a marca chega depois do "bem-vindo ao", subindo e
   ganhando foco. Sem isto ela aparece pronta junto com a página, e
   não há o que assistir. */
.anima .portal-logo { opacity: 0; animation: portal-marca-entra 1.15s cubic-bezier(.2, .7, .25, 1) .45s forwards; }

@keyframes portal-marca-entra {
  0%   { opacity: 0; transform: translateY(22px) scale(.94); filter: blur(12px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
/* A viagem só entra depois da animação de chegada; somar as duas num
   transform só faria uma sobrescrever a outra. Por isso ela mora num
   elemento à parte — o wrapper de cada metade. */
.anima .portal-logo-esq { translate: calc(var(--p) * -46%) 0; }
.anima .portal-logo-dir { translate: calc(var(--p) * 46%) 0; }

.portal-dica {
  position: absolute; z-index: 4; left: 50%; bottom: clamp(48px, 9vh, 88px);
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font: 500 .68rem/1 var(--fonte-dado); letter-spacing: .24em; text-transform: uppercase;
  color: var(--tinta-2); pointer-events: none;
  opacity: clamp(0, calc(1 - var(--p) * 5), 1);
}
.portal-dica svg { width: 13px; height: 13px; }

.portal-barra {
  position: absolute; z-index: 5; left: 50%; bottom: 24px;
  width: min(240px, 48vw); height: 1px; transform: translateX(-50%);
  background: rgba(240, 229, 207, .12);
}
.portal-barra i { display: block; width: calc(var(--p) * 100%); height: 100%; background: var(--teal); }

/* A geometria antiga dos aparelhos morava aqui, em LARGURA por
   cento — e continuou vencendo a nova por vir depois na folha: 17%
   de 354px davam os 60px de celular que eu estava caçando. Quem
   dimensiona os aparelhos agora são as faixas lá embaixo, pela
   altura. Aqui fica só o que é do portal. */
@media (max-width: 860px) {
  .portal { height: 210vh; }
  .portal-marca { font-size: clamp(64px, 30vw, 200px); }
}

@media (prefers-reduced-motion: reduce) {
  /* Sem movimento não há portal: a página começa aberta e a cena
     começa montada. É o estado final, não um buraco. */
  .portal { height: auto; }
  .portal-palco { position: static; height: auto; display: flex; flex-direction: column; }
  .portal-mundo { position: static; }
  .portal-painel, .portal-dica, .portal-barra { display: none; }
  /* A boas-vindas continua: quem pediu menos movimento pediu menos
     movimento, não menos marca. */
  .portal-letreiro {
    position: static; inset: auto; order: -1;
    opacity: 1; pointer-events: auto;
    padding: 102px 18px 0;
  }
  .portal-boas { transform: none; opacity: 1; }
  .portal-marca { transform: none; width: min(74vw, 420px); }
  .anima .portal-logo { opacity: 1; animation: none; }
  .anima .portal-logo-esq, .anima .portal-logo-dir { translate: none; }
  .palco3 { --a: 1; --b: 1; --c: 1; }
  .palco3 .ap-fone .quadro:not(.is-ativo) { opacity: 0; }
}

/* =============================================================
   OS APARELHOS — UM SISTEMA SÓ, ENQUADRADO
   -------------------------------------------------------------
   A PÁGINA TINHA DOIS SISTEMAS DE MOCKUP. O do herói (.palco3) e o
   da seção "no bolso e na mesa" (.cena), cada um com sua moldura e
   suas contas. O segundo ficou com a versão crua — retângulo de 1px
   e uma barra fazendo as vezes de notebook — e sem motion nenhum,
   porque o JS que o alimentava saiu junto com uma limpeza. Dois
   sistemas sempre divergem; agora existe um.

   O QUE ESTAVA MAL CONFIGURADO
   Os aparelhos eram dimensionados pela LARGURA da caixa. Como a
   altura deles vem da proporção da captura, ela ficava livre para
   crescer — e crescia para fora. Medido a 390px: o tablet estourava
   pela direita e o celular por baixo, e o celular acabava com 60px
   de largura, onde nenhuma captura é legível.

   Agora é o contrário: a ALTURA manda, e a largura sai da proporção
   da tela de cada aparelho. Um aparelho não tem como passar da caixa
   se a caixa é que define a altura dele.

   Os três aparelhos permanecem na apresentação em qualquer largura.
   Em telas menores, a composição muda de escala e disposição sem
   cortar o notebook ou o tablet da demonstração.
   ============================================================= */

.palco3 {
  position: relative; grid-column: 1 / -1; justify-self: center;
  width: min(100%, 980px); height: min(46vh, 430px);
  --a: 1; --b: 1; --c: 1;
}
.palco3::before {
  content: ''; position: absolute; inset: 12% 8% 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 70%, rgba(95, 169, 155, .12), transparent 67%);
}
.palco3 .ap { position: absolute; }

.palco3 .ap-tela {
  position: relative; display: block; overflow: hidden;
  background: #060D12; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9);
}
/* A captura PREENCHE a moldura. Deixá-la definir a largura foi o que
   esticou o notebook até a borda: uma caixa absoluta sem largura
   declarada estica até o espaço disponível, e a imagem ia junto.
   Medido: 1075px de notebook ao lado de um celular de 124px — nenhum
   laptop é oito vezes mais largo que um telefone. Quem manda na
   proporção agora é o APARELHO, logo abaixo. */
.palco3 .ap-tela { width: 100%; }
.palco3 .ap-tela img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
/* o vidro: um brilho diagonal fraco, e nada mais — reflexo forte
   come a captura que está por baixo, que é o conteúdo a mostrar */
.palco3 .ap-tela::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 26%, transparent 46%);
}

/* ---------------- notebook ----------------
   Uma coluna: tampa em cima, base embaixo. A tampa toma o que sobra
   da altura e a base tem altura fixa, então o conjunto inteiro cabe
   na caixa sem ninguém precisar calcular nada. */
.palco3 .ap-note {
  left: 24%; top: 2%; height: 88%; aspect-ratio: 1.5; z-index: 1;
  display: flex; flex-direction: column;
  opacity: var(--a);
  transform: translateY(calc((1 - var(--a)) * 26px));
}
.palco3 .ap-tampa {
  position: relative; flex: 1; min-height: 0;
  padding: 9px 9px 11px;
  border-radius: 12px 12px 4px 4px;
  background: linear-gradient(170deg, #2B3F4C 0%, #1B2B36 42%, #101C25 100%);
  box-shadow: inset 0 1px 0 rgba(240, 229, 207, .16), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 22px 46px -22px rgba(0, 0, 0, .9);
  transform-origin: 50% 100%;
  transform: perspective(1100px) rotateX(calc((1 - var(--a)) * 74deg));
}
.palco3 .ap-camera {
  position: absolute; left: 50%; top: 3.5px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: radial-gradient(circle at 36% 32%, #4C6675, #0A1218 68%);
}
.palco3 .ap-tampa .ap-tela { height: 100%; border-radius: 4px; }
/* A base é um VOLUME, não um traço: vista em perspectiva ela é mais
   estreita atrás, e um retângulo ali entrega que aquilo é desenho. */
.palco3 .ap-base {
  display: block; position: relative; flex: none; height: 12px; margin: 0 -6%;
  background: linear-gradient(#263A47 0%, #16242E 38%, #0C161D 100%);
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .95);
}
.palco3 .ap-base::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 12%; height: 3px;
  margin-left: -6%; border-radius: 3px 3px 0 0; background: rgba(0, 0, 0, .55);
}

/* ---------------- tablet ---------------- */
.palco3 .ap-tablet {
  left: 2%; top: 37%; height: 45%; aspect-ratio: 1.42; z-index: 2;
  opacity: var(--b);
  transform: translateY(calc((1 - var(--b)) * 34px)) rotate(calc((1 - var(--b)) * 4deg));
}
.palco3 .ap-tablet .ap-tela {
  height: 100%; padding: 8px; border-radius: 16px;
  background: linear-gradient(158deg, #35495A 0%, #1C2C38 46%, #0D171F 100%);
  box-shadow: inset 0 1px 0 rgba(240, 229, 207, .18), inset 0 -1px 0 rgba(0, 0, 0, .7), 0 24px 44px -22px rgba(0, 0, 0, .9);
}
.palco3 .ap-tablet img { border-radius: 9px; }

/* ---------------- celular ---------------- */
/* A proporção mora no APARELHO, não na tela dele: com ela só na
   tela interna, a largura do conjunto saía do conteúdo — e o
   conteúdo são imagens absolutas, que não contribuem com largura
   nenhuma. Medido: 60px de largura para 380 de altura, quando a
   proporção do aparelho pede 180. */
.palco3 .ap-fone {
  right: 8%; bottom: 0; height: 74%; aspect-ratio: 820 / 1728; z-index: 3;
  opacity: var(--c);
  transform: translateY(calc((1 - var(--c)) * 46px));
}
.palco3 .ap-fone .ap-tela {
  width: 100%; height: 100%;
  padding: 4px; border-radius: 19px;
  background: linear-gradient(158deg, #3A4A58 0%, #1E2E3A 46%, #0C161D 100%);
  box-shadow: inset 0 1px 0 rgba(240, 229, 207, .22), inset 0 -1px 0 rgba(0, 0, 0, .75), 0 26px 50px -22px rgba(0, 0, 0, .95);
}
.palco3 .ap-fone .quadro {
  position: absolute; inset: 4px; width: auto; height: auto;
  border-radius: 15px; opacity: 0;
  object-fit: cover; object-position: top center;
  transition: opacity .55s var(--curva);
}
.palco3 .ap-fone .quadro.is-ativo { opacity: 1; }
/* a ilha fica POR CIMA da captura, como no aparelho de verdade */
.palco3 .ap-ilha {
  position: absolute; left: 50%; top: 9px; width: 30%; height: 6px; margin-left: -15%;
  border-radius: 4px; background: #05090D; z-index: 3;
}
/* os botões laterais: dois de volume à esquerda, o de ligar à direita */
.palco3 .ap-bt { position: absolute; width: 2px; border-radius: 2px; background: #2C3B47; }
.palco3 .ap-bt-a { left: -2px; top: 22%; height: 7%; }
.palco3 .ap-bt-b { left: -2px; top: 31%; height: 7%; }
.palco3 .ap-bt-c { right: -2px; top: 26%; height: 10%; }

/* ---- duas colunas: quando o palco vive ao lado de um texto, e não
   embaixo dele, ele não pode ocupar a linha inteira ---- */
.palco3.e-duplo { grid-column: auto; width: 100%; height: min(38vh, 330px); }
.palco3.e-duplo::before { inset-inline: 0; }
.palco3.e-duplo .ap-note { left: 0; height: 84%; }
.palco3.e-duplo .ap-fone { left: auto; right: 0; height: 74%; }

/* ---------------- compactar conforme a tela ---------------- */

@media (max-width: 1000px) {
  .palco3 { height: min(40vh, 360px); }
  .palco3 .ap-note { left: 19%; height: 83%; }
  .palco3 .ap-tablet { left: 1%; top: 43%; height: 42%; }
  .palco3 .ap-fone { right: 5%; height: 70%; }
}

@media (max-width: 760px) {
  .palco3 { height: min(39vh, 340px); }
  .palco3 .ap-note { left: 18%; height: 78%; }
  .palco3 .ap-tablet { top: 47%; height: 40%; }
  .palco3 .ap-fone { right: 2%; height: 72%; }
  .palco3.e-duplo .ap-note { left: 0; height: 78%; }
  .palco3.e-duplo .ap-fone { right: 0; height: 76%; }
}

@media (max-width: 520px) {
  .palco3 { height: clamp(290px, 43vh, 380px); }
  .palco3 .ap-note { left: 2%; top: 1%; height: 43%; }
  .palco3 .ap-tablet { left: 1%; top: auto; bottom: 3%; height: 31%; }
  .palco3 .ap-fone { right: 1%; height: 72%; }
  .palco3.e-duplo { height: clamp(270px, 39vh, 340px); }
  .palco3.e-duplo .ap-note { left: 0; top: 4%; height: 55%; }
  .palco3.e-duplo .ap-fone { right: 1%; height: 78%; }
}

/* Em celulares baixos, a apresentação precisa poder rolar: manter o
   palco preso a 100vh cortava a manchete atrás do cabeçalho. */
@media (max-width: 520px) and (max-height: 740px) {
  .portal { height: auto; }
  .portal-palco { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; }
  .portal-mundo { position: relative; overflow: visible; padding-block: 14px 28px; }
  .portal-painel, .portal-dica, .portal-barra { display: none; }
  /* O LETREIRO NÃO É MÁQUINA DE ROLAGEM, É A BOAS-VINDAS
     Painéis, dica e barra existem só para a abertura; sem o portal
     eles não têm função. O "bem-vindo ao OAZE" tem: era a primeira
     coisa que a pessoa lia. Escondê-lo junto com o resto fez o
     celular baixo abrir o site sem nunca mostrar a marca. Aqui ele
     volta parado, no topo, antes do herói. */
  .portal-letreiro {
    position: static; inset: auto; order: -1;
    opacity: 1; pointer-events: auto;
    padding: 102px 18px 0;
  }
  .portal-boas { transform: none; opacity: 1; }
  .portal-marca { transform: none; width: min(74vw, 380px); }
  .anima .portal-logo-esq, .anima .portal-logo-dir { translate: none; }
  .portal .palco3 { --a: 1 !important; --b: 1 !important; --c: 1 !important; }
}


/* =============================================================
   A ESTRUTURA DO SISTEMA ANEXADO, NO MUNDO DO OAZE
   -------------------------------------------------------------
   O que veio de lá: navegação de links curtos em maiúsculas com
   muito espaçamento e uma ação em cápsula; a grade de recursos em
   QUATRO cartões de vidro; o selo do plano em destaque pendurado na
   borda de cima; imagens que chegam dessaturadas e voltam inteiras
   ao toque; rodapé de cinco colunas.

   O que não veio: o ouro sobre preto. Aqui a base é a Noite e o
   acento é o único verde do oásis — trocar a paleta seria trocar a
   marca para parecer outro produto.
   ============================================================= */

/* ---------------- navegação ---------------- */

.menu { display: flex; gap: clamp(18px, 2.4vw, 34px); margin-inline: auto; }
@media (max-width: 860px) {
  .menu { display: none; }
  .topo.aberto .menu { display: grid; margin-inline: 0; }
}
.menu a {
  color: var(--tinta-2);
  font: 500 11px/1 var(--fonte-dado); text-transform: uppercase; letter-spacing: .14em;
  transition: color .16s var(--curva);
}
.menu a:hover { color: var(--milk); }

/* ---------------- recursos: quatro cartões de vidro ----------------
   Eram dois por linha, soltos no fundo. Quatro em vidro é a grade do
   sistema anexado — e cabe, porque cada cartão diz uma coisa só. A
   Coco continua sendo o ícone: ela faz exatamente estas quatro
   coisas, e um quadrado com um símbolo genérico diria menos. */

.recursos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.recurso {
  display: grid; gap: 12px; align-content: start;
  padding: clamp(20px, 2vw, 26px);
  background: rgba(240, 229, 207, .03);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 229, 207, .1);
  border-radius: clamp(18px, 2vw, 26px);
  transition: border-color .3s var(--curva), background .3s var(--curva);
}
.recurso:hover { border-color: rgba(240, 229, 207, .22); background: rgba(240, 229, 207, .05); }
.recurso h3 { font-size: 18px; }
.recurso-coco { position: relative; width: 76px; height: 76px; margin: 0 0 2px; }
.recurso:hover .recurso-coco img { transform: scale(1.1); }
.recurso-coco img { transition: transform .3s var(--curva); }
.recurso p { font-size: 14.5px; max-width: none; }

@media (max-width: 1000px) { .recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .recursos { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- as telas dos blocos ----------------
   Chegam dessaturadas e voltam inteiras quando a pessoa se aproxima:
   é o gesto do sistema anexado. Dessaturadas, não cinzas — o verde
   do oásis é a assinatura do produto, e apagá-lo esconderia o que a
   imagem veio mostrar. */

.bloco-tela img {
  filter: grayscale(.5) contrast(1.02);
  transition: filter .7s var(--curva);
}
.bloco-tela:hover img { filter: grayscale(0); }

/* ---------------- o selo do plano em destaque ----------------
   Pendurado na borda de cima, centralizado: lido antes do nome do
   plano, que é a ordem em que a decisão acontece. */

.plano.e-destaque { position: relative; }
.plano.e-destaque .plano-selo {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--teal); border-color: var(--teal); color: var(--night);
  white-space: nowrap;
}
.preco-valor { font-size: clamp(2.4rem, 4.6vw, 3rem); }

/* ---------------- rodapé de cinco colunas ---------------- */

.rodape-grade { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* O sistema anexado põe aqui um campo de newsletter com um botão
   redondo de seta. O OAZE não tem newsletter, e um campo que não
   envia a lugar nenhum é um engano desenhado. A forma fica; o
   destino passa a ser o que existe de verdade — o suporte. */
.rodape-fala {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 7px 7px 7px 15px; border-radius: 999px;
  background: rgba(240, 229, 207, .03);
  border: 1px solid rgba(240, 229, 207, .1);
  color: var(--tinta-2); font-size: 14px;
  transition: border-color .2s var(--curva), color .2s var(--curva);
}
.rodape-fala:hover { border-color: var(--teal); color: var(--milk); }
.rodape-fala span {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--teal); color: var(--night);
}
.rodape-fala svg { width: 15px; height: 15px; }

/* O seletor de idioma é gerado dentro do rodapé por tools/gen-idiomas.js.
   Sem regra nenhuma aqui, os quatro links saíam colados — "PortuguêsEnglish
   FrançaisEspañol" — porque o estilo deles mora no site.css, que esta
   página não carrega. */
.idiomas { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.idiomas a { color: var(--tinta-2); font-size: 14px; }
.idiomas a[aria-current="true"] { color: var(--milk); }