/* Tela ilustrativa do painel (recriação do visual real do sistema, com dados de exemplo)
   e movimento da home. Toda dimensão da tela usa --p (1px de uma tela de 760px de largura),
   então ela escala inteira com o contêiner, como uma imagem, mas continua texto selecionável. */

:root {
  --ia: #553af6;
  --ia-sobre-escuro: #9d8cff;
  --app-azul: #3b6fd0;
  --app-verde: #1f8a64;
  --app-ambar: #b0720f;
  --app-vermelho: #c0443f;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Marca: "IA" na cor do logotipo ───────────────────────────────────── */
.marca__ia { color: var(--ia); }
.marca--clara .marca__ia { color: var(--ia-sobre-escuro); }

/* ── Herói: proporção e moldura ───────────────────────────────────────── */

.previa { position: relative; }
.previa figcaption { margin-top: 14px; text-align: right; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7590; }
.previa__janela { position: relative; container-type: inline-size; }

.app {
  --p: calc(100cqw / 760);
  display: grid; grid-template-columns: calc(var(--p) * 152) minmax(0, 1fr);
  height: calc(var(--p) * 500);
  background: #fafafa; border: 1px solid #e0e2f1; border-radius: calc(var(--p) * 16);
  box-shadow: 0 30px 60px rgba(48, 41, 121, 0.22); overflow: hidden;
  color: #181a2b; font-size: calc(var(--p) * 10); line-height: 1.35;
}
.app svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app p, .app ul { margin: 0; }

/* Menu lateral */
.app__lateral { display: flex; flex-direction: column; justify-content: space-between; background: #3a2f9c; color: #e5e1ff; padding: calc(var(--p) * 14) calc(var(--p) * 8); min-width: 0; }
.app__lateral li { display: flex; align-items: center; gap: calc(var(--p) * 7); padding: calc(var(--p) * 6.5) calc(var(--p) * 7); border-radius: calc(var(--p) * 7); font-size: calc(var(--p) * 10); white-space: nowrap; }
.app__lateral li svg { width: calc(var(--p) * 13); height: calc(var(--p) * 13); }
.app__lateral li.ativo { background: rgba(21, 17, 54, 0.38); color: #fff; font-weight: 600; }
.app__marca { display: flex; align-items: center; gap: calc(var(--p) * 7); padding: calc(var(--p) * 10) calc(var(--p) * 6) 0; border-top: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: calc(var(--p) * 10.5); font-weight: 600; }
.app__marca img { width: calc(var(--p) * 18); height: calc(var(--p) * 18); }

/* Área principal */
.app__principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app__topo { padding: calc(var(--p) * 14) calc(var(--p) * 16) calc(var(--p) * 8); background: #fafafa; position: relative; z-index: 2; }
.app__cabecalho { display: flex; align-items: center; gap: calc(var(--p) * 10); }
.app__titulo { font-size: calc(var(--p) * 17); font-weight: 800; letter-spacing: -0.01em; }
.app__abas { display: flex; gap: calc(var(--p) * 1); padding: calc(var(--p) * 2); background: #f0f1f4; border-radius: calc(var(--p) * 8); font-size: calc(var(--p) * 9); color: #6a7085; }
.app__abas li { padding: calc(var(--p) * 4) calc(var(--p) * 7); border-radius: calc(var(--p) * 6); white-space: nowrap; }
.app__abas li.ativo { background: #fff; color: #181a2b; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); font-weight: 600; }
.app__atualizado { display: flex; align-items: center; gap: calc(var(--p) * 5); margin-left: auto; font-size: calc(var(--p) * 8.5); color: #6a7085; white-space: nowrap; }
.app__botao { display: flex; align-items: center; gap: calc(var(--p) * 4); padding: calc(var(--p) * 4) calc(var(--p) * 8); border: 1px solid #dfe2ec; border-radius: calc(var(--p) * 7); background: #fff; font-size: calc(var(--p) * 9); }
.app__botao svg { width: calc(var(--p) * 10); height: calc(var(--p) * 10); }
.ao-vivo { width: calc(var(--p) * 6); height: calc(var(--p) * 6); border-radius: 50%; background: #2f9e77; }

.app__filtro { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--p) * 9); padding: calc(var(--p) * 6) calc(var(--p) * 10); background: #fff; border: 1px solid #e3e5ee; border-radius: calc(var(--p) * 8); font-size: calc(var(--p) * 10); color: #50566b; }
.app__filtro p { display: flex; align-items: center; gap: calc(var(--p) * 6); }
.app__filtro svg { width: calc(var(--p) * 12); height: calc(var(--p) * 12); }
.app__periodo b { padding: calc(var(--p) * 2) calc(var(--p) * 7); border-radius: calc(var(--p) * 5); background: #ebe9ff; color: #3b2fa0; }

/* Conteúdo que rola sozinho para mostrar a tela inteira */
.app__janela-rolagem { flex: 1; min-height: 0; overflow: hidden; padding: 0 calc(var(--p) * 16); }
.app__rolagem { padding-bottom: calc(var(--p) * 40); }
.app__secao { margin: calc(var(--p) * 8) 0 calc(var(--p) * 6); font-size: calc(var(--p) * 11.5); font-weight: 700; }
.app__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--p) * 9); }
.app__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--p) * 9); margin-bottom: calc(var(--p) * 9); }

.kpi { position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--p) * 8); padding: calc(var(--p) * 10) calc(var(--p) * 12); background: #fff; border: 1px solid #e3e5ee; border-radius: calc(var(--p) * 9); }
.kpi::before { content: ""; position: absolute; left: 0; top: calc(var(--p) * 9); width: calc(var(--p) * 3); height: calc(var(--p) * 16); border-radius: 0 calc(var(--p) * 3) calc(var(--p) * 3) 0; background: var(--cor); }
.kpi--azul { --cor: var(--app-azul); }
.kpi--ambar { --cor: var(--app-ambar); }
.kpi--verde { --cor: var(--app-verde); }
.kpi__titulo { font-size: calc(var(--p) * 10.5); font-weight: 700; }
.kpi__sub { margin-top: calc(var(--p) * 3); font-size: calc(var(--p) * 8.5); color: #6a7085; }
.kpi__valor { font-size: calc(var(--p) * 27); line-height: 1; font-weight: 800; color: var(--cor); font-variant-numeric: tabular-nums; }
.kpi--compacto .kpi__valor { font-size: calc(var(--p) * 23); }

.caixa { padding: calc(var(--p) * 11) calc(var(--p) * 12); background: #fff; border: 1px solid #e3e5ee; border-radius: calc(var(--p) * 9); min-width: 0; }
.caixa--grafico { margin-bottom: calc(var(--p) * 14); }
.caixa__titulo { font-size: calc(var(--p) * 10.5); font-weight: 700; margin-bottom: calc(var(--p) * 8); }

.idade { display: flex; align-items: center; gap: calc(var(--p) * 12); }
.rosca { position: relative; flex: none; width: calc(var(--p) * 84); height: calc(var(--p) * 84); }
.rosca svg { width: 100%; height: 100%; }
.rosca p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: calc(var(--p) * 8); color: #6a7085; }
.rosca b { font-size: calc(var(--p) * 17); line-height: 1.1; color: #181a2b; font-variant-numeric: tabular-nums; }
.legenda { display: grid; gap: calc(var(--p) * 7); flex: 1; min-width: 0; }
.legenda li { display: flex; align-items: center; gap: calc(var(--p) * 6); font-size: calc(var(--p) * 9.5); }
.legenda b { margin-left: auto; font-variant-numeric: tabular-nums; }
.legenda i { width: calc(var(--p) * 6); height: calc(var(--p) * 6); border-radius: 50%; flex: none; }
.verde { color: var(--app-verde); } i.verde { background: #2f9e77; }
.azul { color: var(--app-azul); } i.azul { background: #3b6fd0; }
i.ambar { background: #c98a1a; }
i.vermelho { background: #d65a57; }

.etapas { display: grid; gap: 0; font-size: calc(var(--p) * 9.5); }
.etapas li { display: flex; justify-content: space-between; padding: calc(var(--p) * 5) 0; border-bottom: 1px solid #eef0f5; }
.etapas li:last-child { border-bottom: 0; }
.etapas b { font-variant-numeric: tabular-nums; }

.legenda-linha { display: flex; gap: calc(var(--p) * 10); margin-bottom: calc(var(--p) * 4); font-size: calc(var(--p) * 9); }
.grafico { display: block; width: 100%; height: auto; }
.grafico__eixo path { stroke: #e6e8f0; stroke-width: 1; stroke-dasharray: 3 4; }
.grafico__eixo text { fill: #8a90a6; font-size: 10px; stroke: none; }
.grafico__area { fill: rgba(59, 111, 208, 0.08); stroke: none; }
.grafico__linha { stroke-width: 2.2; }
.grafico__linha--azul { stroke: #3b6fd0; }
.grafico__linha--verde { stroke: #2f9e77; }

/* Aviso que entra por cima da tela */
.aviso { position: absolute; right: -2%; top: 9%; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: #fff; border: 1px solid #e0e2f1; border-radius: 14px; box-shadow: 0 18px 40px rgba(48, 41, 121, 0.22); font-size: 13px; opacity: 0; transform: translateY(-14px) scale(0.96); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; }
.aviso b { display: block; font-size: 13px; }
.aviso span:not(.aviso__sino) { font-size: 11px; color: #6a7085; }
.aviso__sino { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--roxo); color: #fff; }
.aviso__sino svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10%; }
.aviso.mostrar { opacity: 1; transform: none; }
.aviso.mostrar .aviso__sino svg { animation: tremer 0.7s ease-in-out 0.25s; }

/* ── Movimento ────────────────────────────────────────────────────────── */
@keyframes subir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes surgir { from { opacity: 0; transform: translateY(34px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes girar-entrada { from { opacity: 0; transform: rotate(-110deg) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 158, 119, 0.5); } 60% { box-shadow: 0 0 0 calc(var(--p, 1px) * 6) rgba(47, 158, 119, 0); } }
@keyframes piscar { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes destacar { 0% { background-color: rgba(85, 58, 246, 0.22); } 100% { background-color: transparent; } }
@keyframes tremer { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
@keyframes balancar { 0%, 88%, 100% { transform: translateX(0); } 91% { transform: translateX(-3px); } 94% { transform: translateX(3px); } 97% { transform: translateX(-2px); } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes derivar { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, 28px); } }
@keyframes brilho { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes aro { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
@keyframes rolar { 0%, 14% { transform: translateY(0); } 40%, 58% { transform: translateY(var(--rolar, -34%)); } 84%, 100% { transform: translateY(0); } }

/* Texto do herói entra em sequência */
.heroi__texto > * { animation: subir 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.heroi__texto > :nth-child(2) { animation-delay: 0.08s; }
.heroi__texto > :nth-child(3) { animation-delay: 0.18s; }
.heroi__texto > :nth-child(4) { animation-delay: 0.28s; }
.heroi__texto > :nth-child(5) { animation-delay: 0.38s; }
.acoes .botao--primario { animation: balancar 7s ease-in-out 3s infinite; }
.acoes .botao--primario:hover { animation: none; }

/* Manchas de luz atrás do herói */
.heroi { position: relative; }
.heroi::before, .heroi::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; animation: derivar 16s ease-in-out infinite; }
.heroi::before { width: 420px; height: 420px; right: -80px; top: -120px; background: rgba(117, 97, 255, 0.22); }
.heroi::after { width: 340px; height: 340px; left: -100px; bottom: -140px; background: rgba(18, 168, 131, 0.12); animation-delay: -8s; }
.heroi > * { position: relative; z-index: 1; }

/* A tela só começa a se mexer quando a página marca .ativo (JS) ou, sem JS, de uma vez */
.previa__janela { animation: surgir 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s backwards; }
.app .item { animation: aparecer 0.6s ease backwards; }
.app .i1 { animation-delay: 0.7s; } .app .i2 { animation-delay: 0.85s; } .app .i3 { animation-delay: 1s; }
.app .i4 { animation-delay: 1.15s; } .app .i5 { animation-delay: 1.3s; } .app .i6 { animation-delay: 1.45s; }
.app .i7 { animation-delay: 1.6s; } .app .i8 { animation-delay: 1.75s; }
.app__lateral li { animation: aparecer 0.5s ease backwards; }
.app__lateral li:nth-child(2) { animation-delay: 0.45s; } .app__lateral li:nth-child(3) { animation-delay: 0.52s; }
.app__lateral li:nth-child(4) { animation-delay: 0.59s; } .app__lateral li:nth-child(5) { animation-delay: 0.66s; }
.app__lateral li:nth-child(6) { animation-delay: 0.73s; } .app__lateral li:nth-child(7) { animation-delay: 0.8s; }
.rosca svg { animation: girar-entrada 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.3s backwards; }
.grafico__linha { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .grafico__linha { stroke-dashoffset: 1; animation: desenhar 2.2s ease-out 2s forwards; }
.js .grafico__linha--verde { animation-delay: 2.3s; }
.js .grafico__area { opacity: 0; animation: aparecer 1.2s ease 3s forwards; }
.ao-vivo { animation: pulsar 2s ease-out infinite; }
.kpi__valor--pisca { animation: piscar 1.1s ease-in-out 3.2s 3; }
.kpi__valor.destaque-valor { animation: none; }
.kpi.atualizou { animation: destacar 1.4s ease-out; }
.app__botao svg { animation: giro-unico 1.1s ease 2.6s; }
@keyframes giro-unico { to { transform: rotate(360deg); } }
.app__rolagem { animation: rolar 22s ease-in-out 4s infinite; }
/* Troca de marca: o menu lateral muda de cor, como no White Label. Ciclo de 22 s, junto da rolagem. */
@keyframes tema { 0%, 44% { background-color: #3a2f9c; } 52%, 74% { background-color: #c62f3a; } 82%, 100% { background-color: #3a2f9c; } }
@keyframes tema-faixa { 0%, 44% { border-color: #3a2f9c; } 52%, 74% { border-color: #c62f3a; } 82%, 100% { border-color: #3a2f9c; } }
.app__lateral { animation: tema 22s ease-in-out 4s infinite; }

/* Revelar ao rolar a página (só com JavaScript, para o conteúdo nunca sumir sem ele) */
.js .revelar:not(.visivel) { opacity: 0; }
.js .revelar.visivel { animation: subir 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.cartoes > .revelar:nth-child(2), .planos > .revelar:nth-child(2) { animation-delay: 0.08s !important; }
.cartoes > .revelar:nth-child(3), .planos > .revelar:nth-child(3) { animation-delay: 0.16s !important; }
.cartoes > .revelar:nth-child(4) { animation-delay: 0.24s !important; }
.cartoes > .revelar:nth-child(5) { animation-delay: 0.08s !important; }
.cartoes > .revelar:nth-child(6) { animation-delay: 0.16s !important; }
.cartoes > .revelar:nth-child(7) { animation-delay: 0.24s !important; }
.cartoes > .revelar:nth-child(8) { animation-delay: 0.32s !important; }

.cartao, .plano, .botao { transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.15s, border-color 0.15s; }
.cartao:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(50, 51, 129, 0.14); }
.plano:hover { transform: translateY(-4px); }
.botao--primario:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(85, 58, 246, 0.36); }
.icone { transition: background-color 0.25s, color 0.25s; }
.cartao:hover .icone { background: var(--roxo); color: #fff; }

/* White Label: telas de marca flutuando, com cursor e brilho */
.marca-tela { animation: flutuar 6s ease-in-out infinite; }
.marca-tela--b { animation-delay: -2s; }
.marca-tela--c { animation-delay: -4s; }
.marca-tela .selo { animation: aro 2.6s ease-out infinite; }
.marca-tela--b .selo { animation-delay: -0.9s; }
.marca-tela--c .selo { animation-delay: -1.8s; }
.marca-tela .campo { position: relative; }
.marca-tela--a .campo:first-of-type::after { content: ""; position: absolute; left: 10px; top: 6px; width: 1.5px; height: 14px; background: #553af6; animation: cursor 1.1s steps(1) infinite; }
.marca-tela .entrar { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%); background-size: 250% 100%; background-repeat: no-repeat; animation: brilho 3.4s ease-in-out infinite; }
.marca-tela .entrar { background-color: var(--roxo); }
.marca-tela .entrar--verde { background-color: var(--verde); }

/* Faixa "WHITE LABEL INCLUSO" e foco do plano em destaque */
.plano--destaque { animation: none; }
.plano__faixa { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); background-size: 250% 100%; background-repeat: no-repeat; animation: brilho 4s ease-in-out 1s infinite; }

/* ── Responsivo da tela ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .heroi__grade { grid-template-columns: 1fr; }
  .aviso { right: 0; }
}

@media (max-width: 640px) {
  /* No celular a tela vira só o painel, maior, porque uma foto reduzida ficaria ilegível. */
  .app { --p: calc(100cqw / 430); grid-template-columns: 1fr; height: calc(var(--p) * 560); }
  .app__lateral { display: none; }
  .app__abas, .app__botao, .app__atualizado { display: none; }
  .app__topo { padding-inline: calc(var(--p) * 12); }
  .app__topo { border-top: calc(var(--p) * 5) solid #3a2f9c; animation: tema-faixa 22s ease-in-out 4s infinite; }
  .app__janela-rolagem { padding-inline: calc(var(--p) * 12); }
  .app__duo { grid-template-columns: 1fr; }
  .app__rolagem { --rolar: -50%; }
  .aviso { top: 8px; right: 8px; font-size: 12px; }
  .previa figcaption { text-align: left; }
}

/* Movimento reduzido: tudo parado, no estado final, sem esconder nada. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar:not(.visivel) { opacity: 1; }
  .js .grafico__linha { stroke-dashoffset: 0; }
  .js .grafico__area { opacity: 1; }
  .aviso { display: none; }
}