/* ── cliquey ─────────────────────────────────────────────────────────────
   A página é o céu do ícone do app, e tudo o que é interface flutua sobre ele em
   vidro. O verde continua sendo só do cursor: aparece onde o cliquey está agindo —
   o cursor, a seleção, o neon, o balão da fala — para continuar significando "é aqui".

   A letra é a do sistema: no Mac e no iPhone isso é a SF Pro, com o tamanho óptico
   e as tabelas de espaçamento que a Apple desenha para ela.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --ceu-alto: #2F45A8;
  --ceu-baixo: #8EA4E4;
  --tinta: #FFFFFF;
  --tinta-2: rgba(255, 255, 255, .78);
  --tinta-3: rgba(255, 255, 255, .56);
  --papel: #FFFFFF;
  --grafite: #0B0D12;
  --neon: #26D07C;
  --neon-fala: #1DB36A;
  --neon-halo: rgba(38, 208, 124, .55);

  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sf-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sf-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* As curvas das molas que o CSS consegue fazer sozinho (o resto é o main.js). */
  --mola: cubic-bezier(.2, .9, .25, 1.12);
  --suave: cubic-bezier(.25, .9, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ceu-alto); }
/* O fundo pintado é o do html; o body fica transparente para o canvas do céu,
   que está em z-index negativo, não ficar escondido atrás dele. */
body {
  margin: 0;
  background: transparent;
  color: var(--tinta);
  font: 400 17px/1.5 var(--sf);
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  overflow-x: hidden;
  /* Uma sombra quase invisível: é o que mantém o branco legível quando passa nuvem. */
  text-shadow: 0 1px 14px rgba(16, 26, 90, .28);
}
.mesa, .botao-claro, .painel { text-shadow: none; }
img, svg { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
p { margin: 0; }

h1, h2, h3 { font-family: var(--sf-display); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.7rem, min(7.2vw, 11.5vh), 6.1rem); line-height: .98; font-weight: 700; letter-spacing: -0.045em; }
h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.038em; }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; font-weight: 650; letter-spacing: -0.026em; }

kbd {
  display: inline-grid; place-items: center;
  min-width: 1.7em; height: 1.7em; padding: 0 .38em; margin: 0 .1em;
  font: 560 .8em/1 var(--sf-rounded);
  color: #fff; letter-spacing: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
  border-radius: .45em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.12), 0 2px 6px -2px rgba(10,20,70,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  vertical-align: .08em;
}
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 12px; }
.ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); flex: none; }

/* ── o céu ─────────────────────────────────────────────────────────────── */
.ceu { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.filtros { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════════
   O VIDRO
   Três camadas, como o material de verdade: o desfoque do que está atrás (e, no
   Chromium, a refração da borda — ver main.js), uma borda que pega luz em cima e
   devolve menos embaixo, e um reflexo que acompanha o ponteiro.
   ════════════════════════════════════════════════════════════════════════ */
.vidro {
  --lx: 30%; --ly: 0%;
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.07) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(1.06);
  backdrop-filter: blur(18px) saturate(150%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 24px 60px -28px rgba(8, 16, 60, .55);
}
.vidro::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 90% at var(--lx) var(--ly), rgba(255,255,255,.28), transparent 55%);
  opacity: .75; transition: opacity .4s var(--suave);
}
.vidro-escuro {
  background: linear-gradient(180deg, rgba(12,16,40,.42), rgba(12,16,40,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 80px -30px rgba(0,0,0,.6);
}
.vidro-escuro::after { opacity: .35; }

@media (prefers-reduced-transparency: reduce) {
  .vidro { background: rgba(40, 56, 140, .92); -webkit-backdrop-filter: none; backdrop-filter: none !important; }
  .vidro-escuro { background: rgba(10, 14, 36, .95); }
}

/* ── topo: a cápsula flutuante ────────────────────────────────────────── */
.topo {
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center; padding-inline: 16px; pointer-events: none;
}
.capsula {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 8px; border-radius: 999px;
  max-width: 100%;
  transition: transform .5s var(--suave);
}
.topo.encolhido .capsula { transform: scale(.94); }
.marca { display: inline-flex; align-items: center; gap: 9px; padding-right: 10px; font: 650 1.02rem/1 var(--sf-display); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.marca-icone {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: radial-gradient(60% 50% at 75% 78%, rgba(255,255,255,.5), transparent 70%), linear-gradient(180deg, #3549B0, #7890DA);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 8px -2px rgba(10,20,80,.5);
}
.marca-icone .carinha { width: 24px; height: auto; }
.links { position: relative; display: flex; align-items: center; }
.links a {
  position: relative; z-index: 1;
  padding: 8px 14px; border-radius: 999px;
  color: var(--tinta-2); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap;
  transition: color .25s ease;
}
.links a.ativo, .links a:hover { color: #fff; }
/* A lente que desliza entre os links: um pingo de vidro que estica quando corre. */
.lente {
  position: absolute; left: 0; top: 50%; height: 34px; width: 60px; margin-top: -17px;
  border-radius: 999px; opacity: 0;
  background: rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.18);
  transform-origin: center;
  will-change: transform, width;
}

/* ── botões ───────────────────────────────────────────────────────────── */
.botao {
  --lx: 50%; --ly: 0%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border-radius: 999px; border: 0;
  font: 600 1.02rem/1 var(--sf); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  will-change: transform;
}
.botao svg { width: 19px; height: 19px; fill: currentColor; margin-top: -2px; }
.botao-claro {
  background: linear-gradient(180deg, #fff, #EEF2FF);
  color: #16204F;
  box-shadow: inset 0 -1px 0 rgba(20,40,120,.12), 0 1px 0 rgba(255,255,255,.4), 0 14px 34px -14px rgba(8,16,70,.7);
}
.botao-pequeno { padding: 10px 17px; font-size: .9rem; }
.botao-grande { padding: 19px 34px; font-size: 1.15rem; }
.letra-miuda { font-size: .85rem; color: var(--tinta-3); }

/* ── abertura ─────────────────────────────────────────────────────────── */
.abertura {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 16px 40px;
  max-width: 1240px; margin: 0 auto;
}
.abertura > * + * { margin-top: 22px; }
/* A primeira tela é só a frase: ocupa a janela inteira, e o Mac mora abaixo da dobra. */
.abertura-tela {
  position: relative; width: 100%;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 84px 0 96px;
}
.abertura-tela > * + * { margin-top: 22px; }
.descer {
  position: absolute; left: 50%; bottom: 30px; margin: 0 !important;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 14px; border-radius: 999px;
  color: rgba(255,255,255,.9); text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: -0.005em;
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.14);
  transform: translateX(-50%);
  transition: opacity .45s ease, translate .6s var(--suave), background-color .25s ease;
  animation: chamar 2.6s var(--suave) infinite;
}
.descer:hover { background: rgba(255,255,255,.18); }
.descer svg { width: 14px; height: 14px; }
@keyframes chamar { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
.descer.sumiu { opacity: 0; pointer-events: none; }
.abertura h1 { max-width: 12ch; }
.realce {
  background: linear-gradient(100deg, #fff 10%, #C7FFE2 45%, #7CF2B6 60%, #fff 90%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: reluz 7s var(--suave) infinite;
  text-shadow: none;
}
@keyframes reluz { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
.selo { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; font-size: .86rem; font-weight: 500; color: #fff; }
.lide { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.45; color: var(--tinta-2); max-width: 34ch; letter-spacing: -0.018em; }
.acoes { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 34px !important; }
.acoes .botao.vidro { color: #fff; }

/* A logo solta, sem caixa: só a carinha, flutuando no céu e piscando. */
.icone-app {
  --rx: 0deg; --ry: 0deg;
  position: relative; width: clamp(130px, min(22vw, 24vh), 280px);
  display: grid; place-items: center;
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  animation: flutuar 6s ease-in-out infinite;
}
@keyframes flutuar { 50% { translate: 0 -10px; } }
.icone-app::before {
  content: ""; position: absolute; left: 50%; top: 55%; width: 70%; aspect-ratio: 2.4;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent);
  filter: blur(18px); z-index: -1;
  animation: halo 6s ease-in-out infinite;
}
@keyframes halo { 50% { opacity: .6; transform: translate(-50%, -50%) scale(1.12); } }
.icone-app .carinha { position: relative; width: 100%; height: auto; color: #fff; filter: drop-shadow(0 2px 10px rgba(16,26,90,.35)) drop-shadow(0 0 18px rgba(255,255,255,.25)); }
.icone-fim { width: clamp(150px, 17vw, 220px); }
/* A carinha: dois galhos e uma boca, desenhados pelo main.js. */
.carinha { display: block; overflow: visible; }
.carinha path { fill: none; stroke: currentColor; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }
.carinha rect { fill: currentColor; }
.marca-icone .carinha { color: #fff; filter: drop-shadow(0 1px 1.5px rgba(10,20,80,.35)); }

/* ════════════════════════════════════════════════════════════════════════
   O MAC — a moldura, a tela com papel de parede, a barra de menu e o notch.
   Tudo dentro da .mesa se mede em cqw, a largura da própria tela: uma tela pequena
   e a grande da abertura ficam com as MESMAS proporções.
   ════════════════════════════════════════════════════════════════════════ */
.mac {
  --rx: 0deg; --ry: 0deg;
  position: relative; width: 100%;
  padding: clamp(6px, 1.1%, 14px);
  border-radius: clamp(16px, 2.6vw, 30px);
  background: linear-gradient(180deg, #23252B, #0D0E12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.22), 0 50px 100px -40px rgba(4,8,40,.8), 0 18px 36px -18px rgba(4,8,40,.55);
}
.mac-grande { margin-top: 0 !important; max-width: 1080px; scroll-margin-top: 90px; }
.mac-base {
  width: min(1240px, 114%); max-width: calc(100vw - 24px); height: clamp(10px, 1.4vw, 18px); margin-top: 0 !important;
  border-radius: 2px 2px 40% 40% / 2px 2px 100% 100%;
  background: linear-gradient(180deg, #D5D9E3 0%, #A4AAB8 45%, #6D7282 100%);
  box-shadow: 0 30px 50px -20px rgba(4,8,40,.7);
  position: relative;
}
.mac-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 45%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: rgba(0,0,0,.22); }

.mesa {
  container-type: inline-size;
  position: relative; aspect-ratio: 16 / 10.4;
  border-radius: clamp(10px, 1.8vw, 20px);
  background:
    radial-gradient(40% 16% at 18% 70%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(30% 12% at 82% 34%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(50% 18% at 60% 96%, rgba(255,255,255,.4), transparent 70%),
    linear-gradient(180deg, #2C40A0 0%, #5570CB 58%, #97ABE6 100%);
  overflow: hidden; isolation: isolate;
  user-select: none; -webkit-user-select: none;
}
/* cqw só mede a mesa nos filhos dela — na própria mesa ele mediria a janela. */
.mesa > * { font-size: max(8px, 1.6cqw); letter-spacing: -0.01em; }

.barra-mac {
  position: absolute; left: 0; right: 0; top: 0; height: 3.4cqw; z-index: 4;
  display: flex; align-items: center; gap: 2.2cqw; padding: 0 2.2cqw;
  background: rgba(20, 30, 80, .18);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  color: #fff; font-weight: 500;
}
.barra-mac b { font-weight: 700; }
.barra-mac svg { width: 1.5cqw; min-width: 8px; fill: #fff; }
.barra-mac .relogio { margin-left: auto; font-variant-numeric: tabular-nums; }
.barra-mac .fantasma { opacity: .85; }

/* O notch de verdade, e a pílula do cliquey que o abraça (NotchHUDView). Ela nasce
   do notch e volta para ele: a largura é notch + 2 × lado × --p, com --p numa mola. */
.pilula {
  --notch: 15cqw; --lado: 11.5cqw; --alto: 3.4cqw; --p: 0;
  position: absolute; left: 50%; top: 0; z-index: 7;
  width: calc(var(--notch) + 2 * var(--lado) * var(--p));
  height: calc(var(--alto) + .5cqw * var(--p));
  transform: translateX(-50%);
  border-radius: 0 0 1.6cqw 1.6cqw;
  background: #000;
  box-shadow: 0 .8cqw 2.4cqw -1cqw rgba(0,0,0, calc(.6 * var(--p)));
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.3cqw;
  overflow: hidden;
}
.pilula-lado { display: flex; align-items: center; gap: .8cqw; opacity: calc(var(--p) * 1.4 - .4); white-space: nowrap; }
.pilula .carinha { width: 3.4cqw; min-width: 16px; height: auto; color: #fff; }
.pilula-palavra { font: 600 max(8px, 1.3cqw)/1 var(--sf); letter-spacing: -0.005em; }
.pilula-dir { position: relative; justify-content: flex-end; min-width: 4cqw; height: 100%; }
.pilula-dir > * { position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: opacity .2s ease, transform .35s var(--mola); }
.pilula:not([data-estado="ouvindo"]):not([data-estado="falando"]):not([data-estado="ditando"]) .barras,
.pilula:not([data-estado="pensando"]):not([data-estado="guiando"]) .pontinhos,
.pilula:not([data-estado="colado"]) .visto,
.pilula:not([data-estado="copiado"]) .tecla-v { opacity: 0; transform: translateY(-50%) scale(.4); }

.barras { display: flex; align-items: center; gap: .32cqw; height: 1.8cqw; }
.barras i { width: .34cqw; min-width: 2px; height: 100%; border-radius: 2px; background: #fff; transform: scaleY(var(--n, .25)); transition: transform .07s linear; }
.pontinhos { display: flex; gap: .4cqw; }
.pontinhos i { width: .55cqw; height: .55cqw; min-width: 3px; min-height: 3px; border-radius: 50%; background: #fff; animation: pulinho 1.1s ease-in-out infinite; }
.pontinhos i:nth-child(2) { animation-delay: .15s; } .pontinhos i:nth-child(3) { animation-delay: .3s; }
@keyframes pulinho { 0%, 70%, 100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-35%); } }
.visto { width: 2cqw; min-width: 11px; height: auto; }
.visto path { fill: none; stroke: var(--neon); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.pilula[data-estado="colado"] .visto path { animation: riscar .45s .08s var(--suave) forwards; }
@keyframes riscar { to { stroke-dashoffset: 0; } }
.tecla-v { font: 600 max(7px, 1.1cqw)/1 var(--sf-rounded); padding: .45cqw .7cqw; border-radius: .5cqw; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); white-space: nowrap; }
.pilula[data-estado="guiando"] .pontinhos i { background: var(--neon); }

/* A pergunta da pessoa, num balão de vidro logo abaixo do notch. */
.pergunta {
  position: absolute; left: 50%; top: 5.2cqw; z-index: 6;
  transform: translate(-50%, -.6cqw) scale(.94); opacity: 0;
  padding: .9cqw 1.6cqw; border-radius: 99px; white-space: nowrap;
  font-weight: 500; color: #fff;
  background: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.14), 0 1cqw 2.4cqw -1cqw rgba(8,16,60,.6);
  transition: opacity .3s ease, transform .5s var(--mola);
}
.pergunta.visivel { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pergunta::before { content: "você  "; white-space: pre; color: rgba(255,255,255,.6); font-weight: 400; }

/* ── as janelas do Mac ────────────────────────────────────────────────── */
.janela {
  position: absolute; inset: 11.5cqw 5.5cqw 4cqw; display: flex; flex-direction: column;
  background: rgba(255,255,255,.96); color: #10131A; border-radius: 1.8cqw;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 3cqw 6cqw -2.4cqw rgba(8,14,60,.6), 0 .6cqw 1.6cqw -.6cqw rgba(8,14,60,.3);
  overflow: hidden;
}
.janela-barra { display: flex; align-items: center; gap: 1.6cqw; padding: 1.3cqw 2cqw; background: #F5F6FA; border-bottom: 1px solid #E6E8EF; }
.janela-barra-escura { background: #26292F; border-color: #1B1D22; }
.janela-barra-escura .janela-titulo { color: #AEB4BD; }
.luzes { display: flex; gap: .8cqw; }
.luzes i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #FF5F57; }
.luzes i:nth-child(2) { background: #FEBC2E; } .luzes i:nth-child(3) { background: #28C840; }
.janela-titulo { color: #7A8090; margin-right: auto; font-weight: 600; }
.janela-ferramentas { display: flex; gap: 1cqw; }
.ferramenta { padding: .6cqw 1.5cqw; border-radius: 99px; background: #E9EBF2; color: #444A58; font-weight: 500; }
.ferramenta-forte { background: #10131A; color: #fff; }
.janela-corpo { position: relative; flex: 1; min-height: 0; }

/* conteúdo: editor de vídeo */
.editor { display: grid; grid-template-columns: 26% 1fr; }
.lateral { padding: 2.4cqw 2cqw; border-right: 1px solid #ECEEF3; color: #555B69; display: grid; align-content: start; gap: 1.3cqw; }
.lateral-titulo { font-weight: 650; color: #10131A; }
.previa { padding: 2.6cqw; display: grid; grid-template-rows: 1fr auto; gap: 2.4cqw; min-height: 0; }
.quadro-video { position: relative; border-radius: 1cqw; overflow: hidden; background: linear-gradient(180deg, #F7B267 0%, #F4845F 45%, #6A4C93 100%); }
.sol { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; left: 58%; top: 26%; background: #FFE3A3; }
.morro { position: absolute; bottom: -20%; border-radius: 50% 50% 0 0; background: #2E2A4F; }
.m1 { width: 80%; height: 55%; left: -12%; } .m2 { width: 70%; height: 45%; right: -15%; background: #3F3769; }
.linha-do-tempo { position: relative; display: flex; gap: 1cqw; height: 4cqw; padding: .6cqw; background: #F1F2F7; border-radius: .8cqw; }
.clipe { border-radius: .5cqw; background: #BFD0F2; } .c1 { flex: 3; } .c2 { flex: 2; background: #D6C9EC; } .c3 { flex: 4; background: #F0D6C2; }
.agulha { position: absolute; left: 41%; top: -12%; bottom: -12%; width: 2px; background: #E5484D; }

/* conteúdo: prova em PDF */
.documento { padding: 2.6cqw 4cqw 1cqw; display: flex; flex-direction: column; gap: .9cqw; background: #FCFCFA; }
.doc-questao { font-weight: 700; font-size: 1.15em; }
.doc-texto { max-width: 62ch; line-height: 1.35; }
.doc-considere { color: #555B69; }
.doc-considere span { font-family: var(--mono); color: #10131A; white-space: nowrap; }
.figura { flex: 1; min-height: 0; width: 100%; }
.giz { stroke: #10131A; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.giz-tracejado { stroke-dasharray: 8 7; }
.giz-texto { font: 500 15px var(--mono); fill: #10131A; }
.aviao { fill: #10131A; }
.traco { fill: none; stroke: var(--neon); stroke-width: 3.2; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 8px var(--neon-halo)); }

/* conteúdo: Keynote com menu */
.barra-de-menu { display: flex; gap: 2.2cqw; padding: .9cqw 2cqw; background: #FBFBFD; border-bottom: 1px solid #ECEEF3; }
.menu-app { font-weight: 700; }
.menu-item { padding: 0 .6cqw; border-radius: .6cqw; }
.menu-item.aberto { background: #3478F6; color: #fff; }
.slides { display: grid; grid-template-columns: 18% 1fr; gap: 2.4cqw; padding: 2.4cqw; background: #EEF0F5; }
.miniaturas { display: grid; align-content: start; gap: 1.4cqw; }
.miniaturas i { aspect-ratio: 16 / 10; border-radius: .6cqw; background: #fff; border: 2px solid transparent; }
.miniaturas i.ativa { border-color: #3478F6; }
.slide { position: relative; background: #fff; border-radius: .8cqw; box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); display: grid; align-content: center; justify-items: center; gap: 3cqw; }
.slide-titulo { font: 700 2.4cqw/1.1 var(--sf-display); letter-spacing: -0.03em; }
.slide-barras { display: flex; align-items: end; gap: 1.6cqw; height: 12cqw; }
.slide-barras i { width: 4cqw; border-radius: .5cqw .5cqw 0 0; background: #BFD0F2; }
.slide-barras i:nth-child(1) { height: 40%; } .slide-barras i:nth-child(2) { height: 65%; }
.slide-barras i:nth-child(3) { height: 52%; } .slide-barras i:nth-child(4) { height: 90%; background: #3E57C2; }
.menu-lista {
  position: absolute; left: 9cqw; top: 0; z-index: 2;
  min-width: 26cqw; padding: .8cqw;
  background: rgba(248,249,252,.86); border-radius: 1.2cqw;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.08);
  transform-origin: top left; animation: abrir-menu .32s var(--mola);
}
@keyframes abrir-menu { from { opacity: 0; transform: scale(.92) translateY(-4px); } }
.menu-lista p { padding: .7cqw 1.2cqw; border-radius: .6cqw; }
.menu-lista hr { border: 0; border-top: 1px solid #E1E4EB; margin: .6cqw .8cqw; }

/* conteúdo: capa no Preview */
.visor { display: grid; place-items: center; padding: 3cqw; background: #1C1F24; }
.capa { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: .8cqw; overflow: hidden; background: linear-gradient(135deg, #0F4C5C 0%, #1F7A8C 55%, #E36414 130%); }
.capa-titulo { position: absolute; left: 5%; top: 9%; width: 30%; font: 800 3.1cqw/1 var(--sf-display); color: #fff; letter-spacing: -0.03em; }
.capa-rosto { position: absolute; right: 18%; bottom: -8%; width: 28%; aspect-ratio: .8; border-radius: 45% 45% 10% 10%; background: #F2C9A0; box-shadow: 0 -2.4cqw 0 -.8cqw #3B2A20 inset; }
.capa-poste { position: absolute; right: 0; top: 0; bottom: 0; width: 7%; background: linear-gradient(90deg, transparent, #0B2027 30%); }

/* conteúdo: Notas, para o ditado */
.notas { display: grid; grid-template-columns: 30% 1fr; background: #fff; }
.notas-lista { padding: 1.6cqw 1.2cqw; background: #F6F6F3; border-right: 1px solid #ECECE8; display: grid; align-content: start; gap: .6cqw; }
.notas-item { display: grid; gap: .2cqw; padding: 1cqw 1.2cqw; border-radius: .9cqw; }
.notas-item b { font-weight: 650; }
.notas-item span { color: #8A8F99; font-size: .88em; }
.notas-item.ativa { background: #FFE38A; }
.nota-aberta { padding: 2.6cqw 3.2cqw; display: grid; align-content: start; gap: 1.1cqw; }
.nota-titulo { font: 700 2.6cqw/1.1 var(--sf-display); letter-spacing: -0.03em; }
.nota-linha { color: #3B404B; line-height: 1.4; }
.nota-ditada { min-height: 1.4em; }
.nota-ditada [data-texto] { border-radius: .4cqw; transition: background-color 1.2s ease; }
.nota-ditada [data-texto].acabou { background: rgba(38,208,124,.28); transition: none; }
.caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: #E0A400; opacity: 0; }
.mesa.foco .caret { animation: piscar 1.05s steps(1) infinite; }
@keyframes piscar { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ════════════════════════════════════════════════════════════════════════
   O GESTO DO CLIQUEY — criado pelo main.js, com o visual do app.
   ════════════════════════════════════════════════════════════════════════ */
.camada { position: absolute; inset: 0; pointer-events: none; z-index: 8; }

.selecao { position: absolute; border-radius: .9cqw; background: rgba(38,208,124,.13); border: 2px dashed var(--neon); }
.selecao.neon { border-style: solid; box-shadow: 0 0 0 1px rgba(210,255,230,.55) inset, 0 0 6px var(--neon), 0 0 18px var(--neon-halo); }
.alca { position: absolute; width: 1.1cqw; height: 1.1cqw; min-width: 7px; min-height: 7px; margin: -.55cqw 0 0 -.55cqw; border-radius: 50%; background: #fff; border: 2px solid var(--neon); }
.anel { position: absolute; width: 3cqw; height: 3cqw; margin: -1.5cqw 0 0 -1.5cqw; border-radius: 50%; border: 1.5px solid var(--neon); background: rgba(38,208,124,.25); opacity: 0; }
.anel.pessoa { border-color: rgba(13,19,16,.5); background: rgba(13,19,16,.12); }
.feito { position: absolute; display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; margin: -1.7cqw 0 0 -1.7cqw; border-radius: 50%; background: var(--neon); color: #03170C; font: 800 1.9cqw/1 var(--sf); box-shadow: 0 0 14px var(--neon-halo); }

.haste { position: absolute; width: 1.5px; background: rgba(38,208,124,.6); transform-origin: top left; }
.etiqueta {
  position: absolute; display: inline-flex; align-items: center; gap: .9cqw;
  height: 3.6cqw; min-height: 18px; padding: 0 1.5cqw 0 1.2cqw; border-radius: 99px; white-space: nowrap;
  background: rgba(14,16,22,.72); color: #fff;
  -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(38,208,124,.45), 0 1.2cqw 2.6cqw -1cqw rgba(0,0,0,.55);
  font: 550 max(8px, 1.5cqw)/1 var(--sf);
}
.etiqueta .ponto { width: .9cqw; height: .9cqw; min-width: 5px; min-height: 5px; }

.mao { position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none; will-change: transform; opacity: 0; transition: opacity .3s ease; }
.mesa.agindo .mao { opacity: 1; }
.mao .cursor { position: absolute; width: 3.6cqw; min-width: 16px; height: auto; left: calc(max(3.6cqw, 16px) * -0.1875); top: calc(max(3.6cqw, 16px) * -0.125); filter: drop-shadow(0 .5cqw .7cqw rgba(0,0,0,.28)); }
.mao .cursor path { fill: var(--neon); stroke: #06140C; stroke-width: 1.6; stroke-linejoin: round; }
/* O balão do app: à direita da ponta, fundo na cor do cursor, texto branco em 600.
   As letras ainda não ditas ficam transparentes — a caixa não pula a cada letra. */
.balao {
  position: absolute; left: 2.8cqw; top: 1.5cqw;
  width: max-content; max-width: 34cqw; padding: 1cqw 1.6cqw;
  border-radius: 1.6cqw; background: var(--neon-fala); color: #fff;
  font: 600 max(8px, 1.6cqw)/1.25 var(--sf);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1.2cqw 2.4cqw -1cqw rgba(4,60,30,.5);
  opacity: 0; transform: scale(.85); transform-origin: top left;
  transition: opacity .18s ease-out, transform .45s var(--mola);
}
.balao.visivel { opacity: 1; transform: scale(1); }
.balao.esquerda { left: auto; right: 2.8cqw; transform-origin: top right; }
.balao.escuro { background: rgba(18,20,26,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.5); font-weight: 500; }
.balao .falta { color: transparent; }

.ponteiro { position: absolute; left: 0; top: 0; z-index: 8; width: 2.6cqw; min-width: 12px; opacity: 0; pointer-events: none; }
.ponteiro path { fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }

.teclas-flutuantes { position: absolute; left: 50%; bottom: 7cqw; z-index: 9; display: flex; gap: .8cqw; transform: translateX(-50%); }
.teclas-flutuantes span {
  display: grid; place-items: center; min-width: 5.4cqw; height: 5.4cqw; padding: 0 1.2cqw; border-radius: 1.2cqw;
  font: 600 2.4cqw/1 var(--sf-rounded); color: #fff; background: rgba(20,24,34,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1.4cqw 3cqw -1.2cqw rgba(0,0,0,.6);
}

/* ── o painel do notch (NotchPanelView) ──────────────────────────────── */
.mesa-palco { cursor: default; }
/* O palco é pequeno na coluna e é onde a pessoa brinca: notch e pílula maiores. */
.mesa-palco .barra-mac { height: 4.6cqw; font-size: max(8px, 1.9cqw); }
.mesa-palco .pilula { --notch: 19cqw; --lado: 14cqw; --alto: 4.6cqw; padding: 0 1.8cqw; }
.mesa-palco .pilula .carinha { width: 4.6cqw; }
.mesa-palco .pilula-palavra { font-size: max(9px, 1.9cqw); }
.mesa-palco .barras { height: 2.4cqw; gap: .45cqw; }
.mesa-palco .barras i { width: .45cqw; }
.mesa-palco .balao { font-size: max(9px, 2.1cqw); max-width: 44cqw; }
.painel {
  --p: 0;
  position: absolute; left: 50%; top: 0; z-index: 6;
  width: 64cqw; transform: translateX(-50%);
  padding: 5.6cqw 2.6cqw 2.4cqw;
  background: #000; color: #fff;
  border-radius: 0 0 3.4cqw 3.4cqw;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(0,0,0,calc(.7 * var(--p)));
  /* nasce do retângulo do notch: o recorte vai de 15cqw × 3.4cqw até o painel inteiro */
  clip-path: inset(0 calc((64cqw - 19cqw) / 2 * (1 - var(--p))) calc(100% - 4.6cqw - (100% - 4.6cqw) * var(--p)) round 0 0 calc(1.6cqw + 1.8cqw * var(--p)) calc(1.6cqw + 1.8cqw * var(--p)));
  pointer-events: none;
}
.painel.aberto { pointer-events: auto; }
.painel > * { opacity: clamp(0, calc(var(--p) * 1.8 - .7), 1); transform: translateY(calc((1 - var(--p)) * -1.4cqw)); }
.painel-topo { display: flex; justify-content: space-between; align-items: center; }
.abas { position: relative; display: flex; gap: .2cqw; padding: .3cqw; border-radius: 99px; background: rgba(255,255,255,.08); }
.aba { position: relative; z-index: 1; border: 0; background: none; padding: .7cqw 1.6cqw; border-radius: 99px; font: 600 max(8px, 1.35cqw)/1 var(--sf); color: rgba(255,255,255,.55); cursor: pointer; transition: color .25s ease; }
.aba.ativa { color: #fff; }
.abas-lente { position: absolute; top: .3cqw; bottom: .3cqw; left: 0; width: 0; border-radius: 99px; background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.painel-estado { display: inline-flex; align-items: center; gap: .7cqw; padding: .6cqw 1.3cqw; border-radius: 99px; background: rgba(255,255,255,.08); font: 500 max(8px, 1.25cqw)/1 var(--sf); color: rgba(255,255,255,.75); }
.painel-pagina { min-height: 27cqw; }
.painel-palco { display: grid; justify-items: center; gap: 1.6cqw; padding: 2.6cqw 0 2cqw; }
.carinha-painel { width: 30cqw; height: auto; color: #fff; filter: drop-shadow(0 0 2cqw rgba(38,208,124,.35)); }
.atalhos { display: grid; gap: .7cqw; }
.atalhos p { display: flex; align-items: center; gap: .9cqw; font: 400 max(8px, 1.25cqw)/1 var(--sf); color: rgba(255,255,255,.45); }
.teclinhas { display: inline-flex; gap: .4cqw; width: 6.4cqw; }
.teclinhas kbd { min-width: 2.4cqw; height: 2.4cqw; padding: 0 .5cqw; margin: 0; font-size: max(7px, 1.15cqw); color: rgba(255,255,255,.75); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); border-radius: .5cqw; -webkit-backdrop-filter: none; backdrop-filter: none; }
.painel-rodape { display: flex; justify-content: space-between; align-items: end; }
.integracoes { display: grid; gap: .6cqw; }
.rotulo { font: 650 max(7px, 1cqw)/1 var(--sf); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.apps { display: flex; gap: .5cqw; }
.app { display: grid; place-items: center; width: 2.8cqw; height: 2.8cqw; border-radius: .7cqw; font-style: normal; font-size: max(8px, 1.3cqw); color: rgba(255,255,255,.7); }
.a1 { background: linear-gradient(180deg, #FFD65C, #F5A623); } .a2 { background: linear-gradient(180deg, #5FD3FF, #1E7BF2); } .a3 { background: linear-gradient(180deg, #7DE38D, #23A942); }
.app.mais { background: rgba(255,255,255,.1); border-radius: 50%; }
.painel-botoes { display: flex; gap: .8cqw; align-items: center; }
.pilulinha { padding: .9cqw 1.5cqw; border-radius: 99px; background: rgba(255,255,255,.1); font: 500 max(8px, 1.2cqw)/1 var(--sf); color: rgba(255,255,255,.8); }
.redondo { display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: rgba(255,255,255,.1); font: 600 max(8px, 1.4cqw)/1 ui-serif, Georgia, serif; font-style: italic; }
.pedidos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; padding-top: 2cqw; }
.pedido { display: grid; gap: .5cqw; align-content: start; padding: 1.5cqw 1.6cqw; border-radius: 1.6cqw; background: linear-gradient(160deg, color-mix(in srgb, var(--matiz) 26%, transparent), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); min-height: 11.5cqw; }
.pedido b { font: 600 max(8px, 1.35cqw)/1.15 var(--sf); }
.pedido span { font-size: max(7px, 1.1cqw); line-height: 1.3; color: rgba(255,255,255,.55); }
.pedido em { font: 500 max(7px, 1cqw)/1 var(--sf); font-style: normal; color: var(--matiz); }
.pedido em.rodando::before { content: ""; display: inline-block; width: .7cqw; height: .7cqw; margin-right: .5cqw; border-radius: 50%; background: currentColor; animation: pulinho 1.1s infinite; vertical-align: .1em; }
.pedido-novo { background: none; box-shadow: none; border: 1px dashed rgba(255,255,255,.2); place-content: center; text-align: center; }

/* ── seções ───────────────────────────────────────────────────────────── */
.secao { max-width: 1180px; margin: 0 auto; padding: clamp(72px, 11vw, 150px) clamp(16px, 4vw, 48px); }
.secao > h2 { margin-bottom: clamp(36px, 5vw, 64px); max-width: 16ch; }
.sobretitulo { font: 600 .95rem/1 var(--sf); letter-spacing: -0.005em; color: #B8F5D5; margin-bottom: 14px; }
.corpo { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--tinta-2); max-width: 40ch; line-height: 1.5; }

.palco-secao { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1280px; }
.palco-texto { display: grid; gap: 20px; }
.palco-texto .sobretitulo { margin-bottom: -4px; }
.teclas-grandes { display: flex; gap: 14px; margin-top: 8px; }
.tecla-grande {
  --afunda: 0;
  display: grid; place-items: center; align-content: center; gap: 6px;
  width: clamp(84px, 9vw, 104px); aspect-ratio: 1; border: 0; border-radius: 24px;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  transform: translateY(calc(var(--afunda) * 4px)) scale(calc(1 - var(--afunda) * .05));
}
.tecla-grande span { font: 500 2.1rem/1 var(--sf-rounded); }
.tecla-grande small { font: 500 .78rem/1 var(--sf); color: var(--tinta-2); }
.tecla-grande.apertada { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(38,208,124,.7), 0 0 0 4px rgba(38,208,124,.25), 0 6px 20px -10px rgba(8,16,60,.6); }
.dica { font-size: .92rem; color: var(--tinta-3); }

.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.cartao {
  --rx: 0deg; --ry: 0deg;
  display: grid; gap: 12px; align-content: start;
  padding: clamp(24px, 3vw, 34px); border-radius: 32px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
}
.cartao h3 { font-size: 1.45rem; }
.cartao p { color: var(--tinta-2); }
.cartao q { quotes: "“" "”"; color: #fff; }
.passo-tecla { display: flex; align-items: center; gap: 4px; height: 60px; font-size: 1.4rem; margin-bottom: 6px; }
.passo-voz { gap: 6px; }
.passo-voz i { width: 6px; height: 40px; border-radius: 4px; background: #fff; transform: scaleY(.35); animation: onda 1s ease-in-out infinite; }
.passo-voz i:nth-child(2) { animation-delay: -.3s; } .passo-voz i:nth-child(3) { animation-delay: -.6s; } .passo-voz i:nth-child(4) { animation-delay: -.15s; } .passo-voz i:nth-child(5) { animation-delay: -.45s; }
@keyframes onda { 50% { transform: scaleY(1); } }
.passo-cursor svg { width: 44px; height: 44px; filter: drop-shadow(0 4px 10px rgba(4,60,30,.4)); animation: apontar 3.2s var(--suave) infinite; }
.passo-cursor path { fill: var(--neon); stroke: #06140C; stroke-width: 1.6; stroke-linejoin: round; }
@keyframes apontar { 0%, 100% { transform: translate(0, 0) rotate(0); } 45% { transform: translate(10px, -6px) rotate(-8deg); } 60% { transform: translate(10px, -6px) rotate(-8deg) scale(.9); } }

.recurso { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(28px, 5vw, 64px) 0; }
.recurso-invertido { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.recurso-invertido .recurso-texto { order: 2; }
.recurso-texto { display: grid; gap: 14px; }
.recurso-texto .sobretitulo { margin-bottom: 0; }
.recurso-texto p:not(.sobretitulo) { color: var(--tinta-2); max-width: 44ch; font-size: 1.08rem; }
.recurso-texto .nota { font-size: .92rem !important; color: var(--tinta-3) !important; }
#ditado { padding-top: 0; }

/* ── princípio ────────────────────────────────────────────────────────── */
.principio {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(100px, 16vw, 220px) 16px;
  display: grid; gap: clamp(36px, 5vw, 64px);
}
.principio-titulo { font: 700 clamp(3rem, 9vw, 8rem)/.95 var(--sf-display); letter-spacing: -0.05em; text-wrap: balance; max-width: 11ch; }
.principio-titulo .palavra { opacity: var(--acesa, .22); transition: opacity .25s linear; }
.principio-texto { display: grid; gap: 16px; max-width: 560px; margin-left: auto; padding: clamp(24px, 3vw, 36px); border-radius: 30px; color: var(--tinta-2); font-size: 1.1rem; }
.principio-texto p:first-child { color: #fff; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }

/* ── perguntas ────────────────────────────────────────────────────────── */
.perguntas { display: grid; max-width: 860px; border-radius: 32px; padding: 8px clamp(18px, 3vw, 34px); }
.perguntas details + details { border-top: 1px solid rgba(255,255,255,.14); }
.perguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; font: 600 1.18rem/1.3 var(--sf-display); letter-spacing: -0.02em; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.14) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform .45s var(--mola), background-color .3s ease;
}
.perguntas details[open] summary::after { transform: rotate(135deg); background-color: rgba(38,208,124,.55); }
.perguntas details p { padding: 0 0 26px; color: var(--tinta-2); max-width: 62ch; }
/* Onde o navegador sabe animar até "auto", a resposta abre como folha e não pula. */
@supports (interpolate-size: allow-keywords) {
  .perguntas { interpolate-size: allow-keywords; }
  .perguntas details::details-content { height: 0; overflow: clip; opacity: 0; transition: height .5s var(--suave), opacity .35s ease, content-visibility .5s allow-discrete; }
  .perguntas details[open]::details-content { height: auto; opacity: 1; }
}

/* ── fim ──────────────────────────────────────────────────────────────── */
.fim { display: grid; justify-items: center; gap: 28px; text-align: center; padding: clamp(80px, 12vw, 170px) 16px clamp(90px, 12vw, 160px); }
.fim h2 { max-width: 14ch; }

.rodape { display: flex; justify-content: space-between; align-items: center; max-width: 1180px; margin: 0 auto; padding: 26px 16px 40px; border-top: 1px solid rgba(255,255,255,.14); color: var(--tinta-3); font-size: .9rem; }
.rodape .marca { color: #fff; }

/* ── entradas guiadas pela rolagem ────────────────────────────────────────
   Só onde o navegador faz isso sozinho, sem JavaScript vigiando. E só com
   transform: opacidade e filtro num pai quebram o vidro dos filhos. O texto já
   está no lugar e legível antes de qualquer animação. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .surge { animation: surgir linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes surgir { from { transform: translateY(46px) scale(.97); } }
    /* Sem rotateX: o Mac inclinado em perspectiva deformava a tela, e as marcas que o
       cursor desenha — medidas na tela deformada — saíam tortas em volta do botão. */
    .mac:not(.mac-grande) { animation: erguer linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes erguer { from { transform: translateY(60px) scale(.94); } }
    .passos .cartao { animation: surgir linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}

@media (max-width: 900px) {
  .links { display: none; }
  .capsula { gap: 10px; }
  .palco-secao, .recurso, .recurso-invertido { grid-template-columns: minmax(0, 1fr); }
  .recurso-invertido .recurso-texto { order: 0; }
  .passos { grid-template-columns: minmax(0, 1fr); }
  .principio-texto { margin-left: 0; }
}
@media (hover: none) { .dica [data-teclado] { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .realce, .icone-app, .icone-app::before, .descer, .passo-voz i, .passo-cursor svg, .pontinhos i { animation: none !important; }
  .balao, .pergunta { transition: opacity .2s ease; transform: none !important; }
}

/* ── o Finder do palco ────────────────────────────────────────────────── */
.janela-finder { inset: 12cqw 9cqw 5cqw; }
.finder { display: grid; grid-template-columns: 28% 1fr; }
.finder-lateral { display: grid; align-content: start; gap: .3cqw; padding: 1.8cqw 1.2cqw; background: #F3F4F8; border-right: 1px solid #E6E8EF; }
.finder-lateral p { display: flex; align-items: center; gap: 1cqw; padding: .7cqw 1cqw; border-radius: .8cqw; color: #2B303B; white-space: nowrap; }
.finder-lateral p.ativa { background: rgba(10,132,255,.14); }
.finder-rotulo { font-size: .85em; font-weight: 600; color: #8A90A0 !important; padding-bottom: .2cqw !important; }
.glifo { width: 1.7cqw; height: 1.7cqw; min-width: 9px; min-height: 9px; border-radius: .45cqw; background: #0A84FF; opacity: .85; flex: none; }
.g-airdrop { border-radius: 50%; background: radial-gradient(circle, #fff 22%, #0A84FF 24%, #0A84FF 44%, #fff 46%, #fff 54%, #0A84FF 56%); }
.finder-arquivos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw 1.6cqw; padding: 2.6cqw; align-content: start; }
.finder-arquivos figure { margin: 0; display: grid; justify-items: center; gap: .8cqw; }
.finder-arquivos figcaption { font-size: .9em; color: #3B404B; white-space: nowrap; }
.arq { width: 6.4cqw; aspect-ratio: .8; border-radius: .6cqw; background: #fff; box-shadow: inset 0 0 0 1px #E1E4EB, 0 .4cqw 1cqw -.4cqw rgba(0,0,0,.25); position: relative; overflow: hidden; }
.arq::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; }
.a-pdf::after { background: #FF453A; } .a-img { background: linear-gradient(160deg, #FFD27A, #FF8A5B 60%, #6A4C93); } .a-img::after { display: none; }
.a-zip::after { background: #8E8E93; } .a-mov::after { background: #5E5CE6; }

/* ── integrações: os apps em órbita ───────────────────────────────────── */
.integ { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 90px); align-items: center; max-width: 1280px; }
.integ-texto { display: grid; gap: 20px; }
.integ-texto .sobretitulo { margin-bottom: -4px; }
.garantias { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; max-width: 46ch; }
.garantias li { position: relative; padding-left: 30px; color: var(--tinta-2); line-height: 1.45; }
.garantias li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: rgba(38,208,124,.9) no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='%2303170C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: 0 0 12px rgba(38,208,124,.45); }
.garantias b { color: #fff; font-weight: 600; }

.orbita { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.anel-orbita { position: absolute; inset: 11%; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 60px rgba(124,242,182,.06); }
.anel-2 { inset: 30%; border-color: rgba(255,255,255,.08); animation: respirar 5s ease-in-out infinite; }
@keyframes respirar { 50% { transform: scale(1.06); opacity: .5; } }
.feixes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.feixe { stroke: url(#feixe-cor); stroke-width: .7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 1.2px #7CF2B6); }
.faisca { fill: #fff; opacity: 0; filter: drop-shadow(0 0 1.5px #7CF2B6); }

.nucleo {
  position: absolute; left: 50%; top: 50%; width: 21cqw; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 26%;
  background: radial-gradient(60% 50% at 50% 30%, rgba(255,255,255,.28), transparent 70%), linear-gradient(180deg, #3549B0, #6F87D6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 10px rgba(255,255,255,.04), 0 20px 50px -18px rgba(0,0,0,.6), 0 0 60px rgba(124,242,182,.18);
  transition: box-shadow .5s ease;
}
.nucleo.trabalhando { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(124,242,182,.5), 0 0 0 10px rgba(124,242,182,.08), 0 20px 50px -18px rgba(0,0,0,.6), 0 0 80px rgba(124,242,182,.4); }
.nucleo .carinha { width: 80%; height: auto; color: #fff; }

.app-o { position: absolute; left: var(--x); top: var(--y); width: 13cqw; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1.2cqw; }
.icone-o {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 24%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1.6cqw 3.6cqw -1.4cqw rgba(0,0,0,.55);
  transition: filter .4s ease, opacity .4s ease;
}
.icone-o svg { width: 62%; height: auto; }
.app-o small { font: 500 max(10px, 2.3cqw)/1 var(--sf); color: var(--tinta-2); white-space: nowrap; transition: color .3s ease; }
.orbita.ativa .app-o:not(.acesa) .icone-o { filter: saturate(.55) brightness(.85); opacity: .7; }
.app-o.acesa small { color: #fff; }
.app-o.acesa .icone-o { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 .6cqw rgba(124,242,182,.55), 0 0 5cqw rgba(124,242,182,.55), 0 1.6cqw 3.6cqw -1.4cqw rgba(0,0,0,.55); }
.i-musica { background: linear-gradient(180deg, #FF6B8A, #FA233B); }
.i-lembretes { background: #fff; }
.i-calendario { background: #fff; align-content: center; gap: 0; }
.i-calendario b { font: 700 max(7px, 1.9cqw)/1 var(--sf); color: #FF3B30; letter-spacing: .02em; }
.i-calendario strong { font: 300 max(14px, 5.6cqw)/1 var(--sf-display); color: #1C1C1E; letter-spacing: -0.04em; }
.i-finder { background: linear-gradient(180deg, #6CB8FF, #1E7BF2); }
.i-mail { background: linear-gradient(180deg, #5FC4FF, #1E7BF2); }
.i-notas { background: linear-gradient(180deg, #FFE27A 0 26%, #FFFBEA 26%); }
.i-safari { background: linear-gradient(180deg, #5FD3FF, #1E6BF2); }

.balao-o {
  position: absolute; left: 50%; transform: translate(-50%, 0) scale(.92); opacity: 0;
  display: inline-flex; align-items: center; gap: 1.6cqw;
  max-width: 62cqw; padding: 1.8cqw 2.8cqw; border-radius: 99px; white-space: nowrap;
  font: 550 max(11px, 2.7cqw)/1.2 var(--sf); color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  transition: opacity .35s ease, transform .6s var(--mola);
}
.balao-o.visivel { opacity: 1; transform: translate(-50%, 0) scale(1); }
.balao-pedido { top: 26.5%; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.14), 0 1.6cqw 4cqw -1.6cqw rgba(0,0,0,.5); }
.balao-pedido .quem { color: rgba(255,255,255,.6); font-weight: 400; }
.balao-resultado { top: 64.5%; background: rgba(10,14,30,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(124,242,182,.35), 0 1.6cqw 4cqw -1.6cqw rgba(0,0,0,.6); }
.marca-res { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; min-width: 18px; min-height: 18px; border-radius: 50%; background: var(--neon); color: #03170C; font-weight: 800; font-size: .85em; flex: none; }
.balao-resultado.perguntando .marca-res { background: #FFD60A; }

@media (max-width: 900px) {
  .integ { grid-template-columns: minmax(0, 1fr); }
  .janela-finder { inset: 12cqw 4cqw 4cqw; }
}
@media (prefers-reduced-motion: reduce) { .anel-2 { animation: none; } .balao-o { transition: opacity .2s ease; transform: translate(-50%, 0) !important; } }
/* No celular a órbita tem ~350px: frase longa quebra em duas linhas em vez de passar
   por cima dos nomes dos apps. */
@media (max-width: 600px) {
  .balao-o { white-space: normal; width: max-content; max-width: 58cqw; border-radius: 16px; text-align: left; font-size: 11px; padding: 7px 11px; }
  .balao-pedido { top: 24%; }
}

/* ── "Em breve": o cliquey aparece e responde o clique ────────────────── */
.botao[data-em-breve] { position: relative; overflow: hidden; }
.botao[data-em-breve]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(124,242,182,.55) 48%, rgba(255,255,255,.9) 52%, transparent 70%);
  transform: translateX(-120%);
}
.botao[data-em-breve].brilhando::after { animation: varrer .9s var(--suave); }
@keyframes varrer { to { transform: translateX(120%); } }

.espetaculo { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.espetaculo .choque { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 0 24px rgba(124,242,182,.6), inset 0 0 18px rgba(255,255,255,.4); }
.espetaculo .bolha { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.35) 38%, rgba(255,255,255,.08) 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 4px 14px -4px rgba(10,20,80,.4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.espetaculo .cursorzinho { position: absolute; left: 0; top: 0; width: 24px; height: 24px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.espetaculo .clarao { position: absolute; width: 1100px; height: 1100px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200,255,225,.45), rgba(124,242,182,.18) 40%, transparent 70%); }
.espetaculo .cursorzinho path { fill: var(--neon); stroke: #06140C; stroke-width: 2; stroke-linejoin: round; }
.espetaculo .faisca-e { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(124,242,182,.9); }

.espetaculo .agente { position: absolute; left: 0; top: 0; will-change: transform; }
.espetaculo .agente svg { position: absolute; width: 30px; left: -6px; top: -4px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.espetaculo .agente path { fill: var(--neon); stroke: #06140C; stroke-width: 1.6; stroke-linejoin: round; }
.espetaculo .fala {
  position: absolute; left: 24px; top: 14px; width: max-content; max-width: 260px;
  padding: 9px 14px; border-radius: 16px; background: var(--neon-fala); color: #fff;
  font: 600 15px/1.3 var(--sf); letter-spacing: -0.01em; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px -10px rgba(4,60,30,.6);
  transform-origin: top left; opacity: 0;
}
.espetaculo .fala.esquerda { left: auto; right: 24px; transform-origin: top right; }
.espetaculo .fala .falta { color: transparent; }
.espetaculo .moldura { position: absolute; border-radius: 999px; border: 2px dashed var(--neon); background: rgba(38,208,124,.12); }
.espetaculo .moldura.neon { border-style: solid; box-shadow: 0 0 0 1px rgba(210,255,230,.6) inset, 0 0 8px var(--neon), 0 0 26px var(--neon-halo); }