/* AIRYA VÍDEO CONFERÊNCIA — a vitrine. O molde da família (Airya Financeiro →
   Airya Folha → Airya Ponto), copiado sem mudança: noite azul, o dourado da estrela da Airya e um ciano de
   painel de instrumentos. As cores --ouro e --ciano são trocadas pelas
   Páginas externas (vitrine.js). Sem framework, sem fonte de fora, sem rastreador.

   As cores de fundo do <style> de primeiro instante, no index.html, têm de ser
   IDÊNTICAS às de --papel aqui: se discordarem, a página pisca de uma cor
   para outra ao abrir. */
:root {
  --ouro: #d8a847; --ouro-claro: #f1cf82; --ciano: #43d1c0;
  --noite: #060a17; --escuro: #0d1530; --fundo-palco: #111c3d;
  --papel: #f4f6fb; --cartao: #ffffff; --texto: #141a2c; --suave: #5b6379;
  --borda: #e1e5ef; --fraco: #eef1f8;
  --perigo: #d8574f; --ok: #2f9e7e;
  --fonte: Candara, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --raio: 12px; --largura: 1140px;
}
:root[data-tema="escuro"] {
  --papel: #0a1022; --cartao: #111a33; --texto: #e7ebf6; --suave: #9aa3bd;
  --borda: #1f2a4a; --fraco: #16213f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--fonte); color: var(--texto); background: var(--papel);
  line-height: 1.55; font-size: 16px; overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; }
.dentro { width: min(var(--largura), calc(100% - 32px)); margin: 0 auto; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent;
  border-radius: var(--raio); padding: 12px 20px; font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.botao.cheio { background: linear-gradient(135deg, var(--ouro-claro), var(--ouro)); color: #1b1405; box-shadow: 0 10px 26px rgba(216,168,71,.28); }
.botao.cheio:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(216,168,71,.38); }
.botao.vazio { border-color: rgba(255,255,255,.3); color: #eef1fa; background: rgba(255,255,255,.04); }
.botao.vazio:hover { border-color: var(--ciano); color: #fff; }
.botao.escuro { background: var(--escuro); color: #eef1fa; }
:root[data-tema="escuro"] .botao.escuro { background: #1b2750; }
.botao:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }

/* ── TOPO ── */
header.topo { position: sticky; top: 0; z-index: 30; background: rgba(6,10,23,.86); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); }
.topo .dentro { display: flex; align-items: center; gap: 16px; padding: 12px 0; color: #eef1fa; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; text-decoration: none; letter-spacing: .2px; }
.marca img { width: 34px; height: 34px; }
.marca em { font-style: normal; color: var(--ouro); }
.topo nav { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
.topo nav a { text-decoration: none; opacity: .78; }
.topo nav a:hover { opacity: 1; color: var(--ouro-claro); }
.tema-botao {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #eef1fa; border-radius: 999px;
  padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
}

/* ── PALCO 3D ── */
.palco {
  position: relative; overflow: hidden; color: #eef1fa; padding: 76px 0 110px; perspective: 1500px;
  background: radial-gradient(1200px 700px at 60% -20%, #1f2f66 0%, var(--escuro) 45%, var(--noite) 100%);
}
.palco canvas.particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .75; }
/* O chão em grade, fugindo para o horizonte. */
.chao {
  position: absolute; left: -50%; right: -50%; bottom: -38%; height: 80%;
  background-image:
    linear-gradient(rgba(67,209,192,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,209,192,.22) 1px, transparent 1px);
  background-size: 64px 64px; transform: rotateX(76deg); transform-origin: center top;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  pointer-events: none;
}
.camadas { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.camada { position: absolute; border-radius: 30px; border: 1px solid rgba(255,255,255,.08); will-change: transform; }
.camada.a { --z: -260px; inset: 8% 14%; transform: rotateX(52deg) rotateZ(-16deg) translateZ(-260px); background: linear-gradient(135deg, rgba(216,168,71,.16), transparent 62%); }
.camada.b { --z: -150px; inset: 22% 24%; transform: rotateX(52deg) rotateZ(-16deg) translateZ(-150px); background: linear-gradient(135deg, rgba(67,209,192,.14), transparent 66%); }
.camada.c { --z: -60px; inset: 36% 34%; transform: rotateX(52deg) rotateZ(-16deg) translateZ(-60px); background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 70%); }
.palco::after {
  content: ''; position: absolute; width: 640px; height: 640px; border-radius: 999px; top: 2%; left: 58%;
  transform: translateX(-50%); background: radial-gradient(circle, rgba(216,168,71,.24), transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.palco .dentro { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.selo-topo { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ciano); margin-bottom: 14px; }
.selo-topo::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--ciano); box-shadow: 0 0 12px var(--ciano); }
.palco h1 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08; margin: 0 0 16px; letter-spacing: -.6px; }
.palco h1 span { background: linear-gradient(90deg, var(--ouro-claro), var(--ouro) 45%, var(--ciano)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.palco p.linha { font-size: 17.5px; opacity: .86; margin: 0 0 28px; max-width: 48ch; }
.acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.botao.play::before { content: ''; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* A "tela" flutuando em 3D — desenho, não captura. Os números são exemplo, e dizem. */
.maquete-caixa { position: relative; }
.maquete { transform: perspective(1400px) rotateY(-16deg) rotateX(6deg); transform-style: preserve-3d; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.janela { position: relative; background: var(--cartao); color: var(--texto); border-radius: 16px; overflow: hidden; box-shadow: 0 50px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12); }
.janela::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.4) 48%, transparent 58%); transform: translateX(-120%);
}
.barra-janela { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--fraco); }
.bolinha { width: 10px; height: 10px; border-radius: 999px; background: #c9cfdd; }
.barra-janela .exemplo { margin-left: auto; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); border: 1px dashed var(--borda); border-radius: 999px; padding: 2px 8px; }
.corpo { display: grid; grid-template-columns: 74px 1fr; min-height: 270px; }
.lateral { background: var(--escuro); padding: 12px 8px; display: flex; flex-direction: column; gap: 9px; }
.lateral i { display: block; height: 9px; border-radius: 3px; background: rgba(255,255,255,.2); }
.lateral i.on { background: var(--ouro); }
.conteudo { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.holerite-topo { display: flex; justify-content: space-between; font-size: 11px; color: var(--suave); }
.holerite-topo b { color: var(--texto); font-size: 12.5px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { border: 1px solid var(--borda); border-radius: 10px; padding: 9px; }
.kpi b { display: block; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 9.5px; color: var(--suave); letter-spacing: .06em; }
.kpi.liquido { border-color: rgba(216,168,71,.6); background: rgba(216,168,71,.08); }
.linhas { display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.linhas div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--borda); padding-bottom: 5px; }
.linhas small { color: var(--ciano); font-size: 9.5px; }
.etapas-mini { display: flex; gap: 5px; margin-top: 2px; }
.etapas-mini i { flex: 1; height: 5px; border-radius: 3px; background: var(--fraco); }
.etapas-mini i.feito { background: var(--ok); }
.etapas-mini i.agora { background: var(--ouro); }
.flutua {
  position: absolute; right: -14px; bottom: 22px; width: 190px; transform: translateZ(70px);
  background: rgba(13,21,48,.94); color: #eef1fa; border: 1px solid rgba(67,209,192,.4); border-radius: 14px; padding: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,.45); font-size: 11.5px;
}
.flutua b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 4px; color: var(--ouro-claro); }
.flutua b img { width: 16px; height: 16px; }

/* ── SEÇÕES ── */
section { padding: 72px 0; }
section h2 { font-size: clamp(23px, 2.8vw, 32px); margin: 0 0 8px; letter-spacing: -.3px; }
section p.sub { color: var(--suave); margin: 0 0 30px; max-width: 64ch; }
.rotulo { display: inline-block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro); margin-bottom: 8px; font-weight: 700; }
.grade { display: grid; gap: 16px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 20px; }
.cartao h3 { margin: 0 0 6px; font-size: 16.5px; }
.cartao p { margin: 0; color: var(--suave); font-size: 14px; }

/* ── A SEQUÊNCIA OPERACIONAL: páginas em sequência, uma de cada vez ── */
.sequencia { background: linear-gradient(180deg, var(--papel), var(--fraco)); }
.seq-palco { perspective: 1600px; position: relative; }
.seq-trilho { display: grid; grid-template-columns: 1fr; min-height: 300px; }
.seq-pagina {
  grid-area: 1 / 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 20px; padding: 28px;
  box-shadow: 0 30px 70px rgba(13,21,48,.12); opacity: 0; transform: rotateY(-24deg) translateX(8%) scale(.94);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.3,1); pointer-events: none; visibility: hidden;
}
.seq-pagina.agora { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.seq-pagina.passou { opacity: 0; transform: rotateY(24deg) translateX(-8%) scale(.94); visibility: hidden; }
.seq-num { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); font-weight: 700; }
.seq-pagina h3 { font-size: 23px; margin: 6px 0 8px; }
.seq-pagina p { margin: 0 0 12px; color: var(--suave); }
.seq-pagina ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.seq-pagina li::before { content: '›'; color: var(--ciano); font-weight: 700; margin-right: 8px; }
.seq-pagina .plano-min { display: inline-block; margin-top: 14px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; background: rgba(216,168,71,.15); color: #8a6414; font-weight: 700; }
:root[data-tema="escuro"] .seq-pagina .plano-min { color: var(--ouro-claro); }
.seq-cena { background: radial-gradient(420px 260px at 50% 40%, #1b2a5c, var(--escuro) 70%); border-radius: 16px; min-height: 250px; display: grid; place-items: center; overflow: hidden; }
.seq-cena svg { width: 100%; max-width: 440px; height: auto; }
.seq-controles { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.seq-regua { display: flex; gap: 6px; flex-wrap: wrap; }
.seq-regua button {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.seq-regua button.agora { background: var(--escuro); color: var(--ouro-claro); border-color: var(--escuro); }
.seq-seta { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); border-radius: 999px; width: 38px; height: 38px; font-size: 16px; cursor: pointer; }
.seq-barra { flex: 1; min-width: 120px; height: 4px; background: var(--borda); border-radius: 4px; overflow: hidden; }
.seq-barra span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ouro), var(--ciano)); }
.seq-barra span.corre { animation: seqcorre var(--dur, 7s) linear forwards; }
@keyframes seqcorre { to { width: 100%; } }

/* ── AIRYA ── */
.airya { background: linear-gradient(170deg, var(--escuro) 0%, var(--noite) 72%); color: #eef1fa; position: relative; overflow: hidden; }
.airya::before {
  content: ''; position: absolute; width: 760px; height: 760px; border-radius: 999px; top: -28%; right: -14%;
  background: radial-gradient(circle, rgba(67,209,192,.18), transparent 62%); filter: blur(50px); pointer-events: none;
}
.airya .dentro { position: relative; z-index: 2; }
.airya h2 { color: #f4f6fc; }
.airya p.sub { color: rgba(238,241,250,.74); }
.airya .cartao { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); color: inherit; }
.airya .cartao p { color: rgba(238,241,250,.76); }
.airya-marca { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.airya-marca img { width: 46px; height: 46px; filter: drop-shadow(0 0 18px rgba(216,168,71,.55)); }
.airya-marca span { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
.airya-palco { display: grid; grid-template-columns: 1.02fr .98fr; gap: 34px; align-items: center; margin-bottom: 46px; }
.conversa {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: 18px;
  padding: 18px; min-height: 290px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 70px rgba(0,0,0,.34);
}
.conversa-linha { display: flex; gap: 10px; align-items: flex-start; }
.conversa-quem { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; min-width: 54px; padding-top: 4px; }
.conversa-balao { background: rgba(255,255,255,.07); border-radius: 12px; padding: 10px 13px; font-size: 14px; line-height: 1.5; flex: 1; }
.conversa-balao.dela { background: rgba(67,209,192,.1); border: 1px solid rgba(67,209,192,.26); }
.conversa-balao b { color: var(--ouro-claro); font-weight: 600; }
.cursor { display: inline-block; width: 2px; height: 1em; background: var(--ciano); vertical-align: -2px; animation: pisca 1s steps(2) infinite; }
@keyframes pisca { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.conversa-rodape { margin-top: auto; border-top: 1px dashed rgba(255,255,255,.16); padding-top: 12px; font-size: 12.5px; opacity: .7; display: flex; gap: 8px; align-items: center; }
.conversa-rodape i { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.passo { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px; position: relative; }
.passo b { display: block; font-size: 13.5px; margin-bottom: 5px; color: #f4f6fc; }
.passo span { font-size: 12.5px; color: rgba(238,241,250,.72); line-height: 1.45; }
.passo i { position: absolute; top: 12px; right: 13px; font-style: normal; font-size: 11px; opacity: .4; }
.passo.trava { border-color: rgba(216,168,71,.45); background: rgba(216,168,71,.09); }
.faixa-estado { display: flex; align-items: center; gap: 12px; margin: 44px 0 20px; flex-wrap: wrap; }
.faixa-estado h3 { margin: 0; font-size: 19px; color: #f4f6fc; }
.marca-estado { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.marca-estado.hoje { background: var(--ciano); color: #04211d; }
.marca-estado.vem { background: rgba(255,255,255,.1); color: #eef1fa; border: 1px dashed rgba(255,255,255,.34); }
.faixa-estado .risco { flex: 1; height: 1px; background: rgba(255,255,255,.14); min-width: 40px; }
.cartao.futuro { border-style: dashed; background: rgba(255,255,255,.03); }

/* ── MÓDULOS ── */
.modulo-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cartao.modulo { display: flex; flex-direction: column; gap: 8px; transition: transform .2s ease, box-shadow .2s ease; }
.cartao.modulo:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(13,21,48,.12); }
.modulo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.modulo-topo h4 { margin: 0; font-size: 15.5px; }
.modulo-plano { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(67,209,192,.14); color: #16776c; }
:root[data-tema="escuro"] .modulo-plano { color: var(--ciano); }

/* ── REGRAS ── */
.regra { display: flex; gap: 14px; align-items: flex-start; }
.regra .n { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(216,168,71,.15); color: #8a6414; font-weight: 700; font-size: 13.5px; }
:root[data-tema="escuro"] .regra .n { color: var(--ouro-claro); }
.regra h3 { margin: 0 0 4px; font-size: 15.5px; }

/* ── PLANOS EM 3D ── */
.planos { perspective: 1600px; display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px; align-items: start; }
.plano {
  position: relative; background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 10px; transform: rotateY(5deg); transform-origin: left center;
  box-shadow: 0 12px 28px rgba(13,21,48,.09); transition: transform .2s ease, box-shadow .2s ease;
}
.plano:hover { transform: rotateY(0) translateZ(34px) translateY(-6px); box-shadow: 0 30px 60px rgba(13,21,48,.18); }
.plano.destaque { transform: rotateY(0) translateZ(46px) translateY(-10px); border-color: var(--ouro); box-shadow: 0 34px 70px rgba(13,21,48,.28); z-index: 2; }
.plano.destaque:hover { transform: rotateY(0) translateZ(66px) translateY(-14px); }
.fita { position: absolute; top: -11px; left: 20px; background: linear-gradient(135deg, var(--ouro-claro), var(--ouro)); color: #1b1405; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.plano h3 { margin: 4px 0 0; font-size: 20px; }
.preco { display: flex; align-items: baseline; gap: 4px; }
.preco .moeda { font-size: 14px; color: var(--suave); }
.preco .valor { font-size: 32px; font-weight: 700; letter-spacing: -.6px; }
.preco .ciclo { font-size: 12.5px; color: var(--suave); }
.plano .resumo { color: var(--suave); font-size: 13.4px; min-height: 58px; margin: 0; }
.faixas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.faixas div { font-size: 11.5px; background: var(--fraco); border-radius: 8px; padding: 6px 8px; line-height: 1.3; color: var(--suave); }
.faixas b { display: block; font-size: 14px; color: var(--texto); }
.airya-inclusa { display: flex; align-items: center; gap: 8px; font-size: 12.5px; border: 1px solid rgba(67,209,192,.35); background: rgba(67,209,192,.08); border-radius: 8px; padding: 6px 10px; }
.airya-inclusa img { width: 16px; height: 16px; }
.plano ul { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.plano ul li.nao { opacity: .42; }
.plano ul li b { color: var(--ok); }
.plano .botao { margin-top: auto; }

.franqueza { background: var(--escuro); color: #eef1fa; }
.franqueza h2 { color: #f4f6fc; }
.franqueza p.sub { color: rgba(238,241,250,.72); }
.franqueza .cartao { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: inherit; }
.franqueza .cartao p { color: rgba(238,241,250,.76); }

footer { padding: 40px 0 56px; color: var(--suave); font-size: 13.5px; }
footer .dentro { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer .botao { margin-left: auto; }
.flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 40; box-shadow: 0 16px 36px rgba(0,0,0,.34); }

/* ── MOVIMENTO ── lento de propósito: animação rápida numa vitrine cansa. */
@keyframes deriva {
  0%, 100% { transform: rotateX(52deg) rotateZ(-16deg) translateZ(var(--z)) translateY(0); }
  50% { transform: rotateX(55deg) rotateZ(-13deg) translateZ(calc(var(--z) + 30px)) translateY(-18px); }
}
@keyframes respira {
  0%, 100% { transform: perspective(1400px) rotateY(-16deg) rotateX(6deg) translateY(0); }
  50% { transform: perspective(1400px) rotateY(-11deg) rotateX(3deg) translateY(-14px); }
}
@keyframes flutuaCard { 0%,100% { transform: translateZ(70px) translateY(0); } 50% { transform: translateZ(96px) translateY(-10px); } }
@keyframes varrer { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes chao { to { background-position: 0 64px, 0 0; } }
@keyframes flutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html[data-movimento="suave"] .camada.a { animation: deriva 19s ease-in-out infinite; }
html[data-movimento="suave"] .camada.b { animation: deriva 24s ease-in-out infinite reverse; }
html[data-movimento="suave"] .camada.c { animation: deriva 28s ease-in-out infinite; }
html[data-movimento="suave"] .maquete { animation: respira 16s ease-in-out infinite; }
html[data-movimento="suave"] .flutua { animation: flutuaCard 11s ease-in-out infinite; }
html[data-movimento="suave"] .janela::after { animation: varrer 7s ease-in-out 1.2s infinite; }
html[data-movimento="suave"] .chao { animation: chao 3.2s linear infinite; }
html[data-movimento="suave"] .flutuante { animation: flutua 5s ease-in-out infinite; }
/* Pausa quando a aba some ou o palco sai da tela: numa máquina de quatro
   núcleos com a casa inteira no ar, animação invisível rouba o quadro. */
html.pausado .palco *, html.pausado .palco::after, .palco.fora *, .fora .s-pulso, .fora .s-corre { animation-play-state: paused !important; }
.surge { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.surge.dentro-da-tela { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .palco .dentro, .airya-palco, .seq-pagina { grid-template-columns: 1fr; }
  .maquete { transform: none !important; animation: none !important; margin-top: 10px; }
  .flutua { position: static; width: auto; transform: none !important; animation: none !important; margin-top: 12px; }
  .topo nav { display: none; }
  .seq-pagina { padding: 20px; }
  .plano, .plano.destaque, .plano:hover { transform: none; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .flutuante { right: 16px; bottom: 16px; }
  .topo .entrar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .surge { opacity: 1; transform: none; }
  .s-entra { opacity: 1; }
  .seq-pagina.agora { transform: none; }
}
html[data-movimento="nenhum"] .surge, html[data-movimento="nenhum"] .s-entra { opacity: 1; transform: none; }
