/* QuemÉoCantô — shared design system for the landing + app prototype pages.
 *
 * Same visual language as "Praticar Canto" and the static study site: frosted
 * glass over lavender, Manrope in light weights for display type, mint accent,
 * big soft shadows. This file adds the dark counterpart ("lavanda-noite"): the
 * ground shifts to indigo-violet — never neutral black — and the glass becomes
 * low-alpha white over it, so both themes read as the same material under
 * different light.
 *
 * Every color lives in a token. Components never hardcode an rgba that changes
 * between themes — that is what keeps the dark theme one block of overrides
 * instead of a fork of the whole file.
 *
 * Theme resolution: light is the default, @media (prefers-color-scheme: dark)
 * follows the OS, and [data-theme="dark"|"light"] (stamped by comum.js from
 * localStorage) wins over both directions.
 */

:root {
  --ink: #2b2e42;
  --ink-2: #3a3e55;
  --ink-3: rgba(50, 54, 84, 0.62);
  --ink-4: rgba(60, 64, 96, 0.46);

  --mint: #8fe7bf;
  --mint-ink: #123a2b;
  --mint-strong: #1a9e6e;
  --peri: #b0aeee;                    /* the brand "Q" periwinkle */
  --peri-ink: #0a0a0b;

  /* register semantics, same as the analysis plots (blue = compressed, red = breathy) */
  --belt: #1c5cab;
  --leve: #a32f2e;

  /* placar semantics — distinct from register colors on purpose */
  --ok: #1a9e6e;
  --atencao: #a87a18;
  --alerta: #a33636;

  --glass: rgba(255, 255, 255, 0.42);
  --glass-2: rgba(255, 255, 255, 0.26);
  --glass-hover: rgba(255, 255, 255, 0.6);
  --glass-line: rgba(255, 255, 255, 0.55);
  --hair: rgba(60, 64, 96, 0.14);
  --brilho: rgba(255, 255, 255, 0.5);  /* inner top highlight of glass cards */
  --tinta-suave: rgba(60, 64, 96, 0.13); /* meter tracks, muted fills */

  --fundo-solido: #a6a3c2;
  --fundo: radial-gradient(120% 90% at 50% 12%,
    #d8dae6 0%, #c4c7d8 34%, #b3b4cb 60%, #a6a3c2 100%);
  --nevoa-1: rgba(150, 160, 220, 0.5);
  --nevoa-2: rgba(120, 220, 190, 0.2);

  --sombra: 0 26px 60px -22px rgba(40, 45, 90, 0.42);
  --sombra-sm: 0 10px 26px -14px rgba(40, 45, 90, 0.34);

  --max: 1120px;
  color-scheme: light;
}

/* lavanda-noite */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef8;
    --ink-2: #cdd0e4;
    --ink-3: rgba(214, 218, 240, 0.66);
    --ink-4: rgba(206, 211, 240, 0.44);

    --mint: #8fe7bf;
    --mint-ink: #0f3526;
    --mint-strong: #6fdcac;
    --peri: #b0aeee;
    --peri-ink: #0a0a0b;

    --belt: #6ea8e8;
    --leve: #e07a76;

    --ok: #6fdcac;
    --atencao: #e6c072;
    --alerta: #e08585;

    --glass: rgba(255, 255, 255, 0.07);
    --glass-2: rgba(255, 255, 255, 0.045);
    --glass-hover: rgba(255, 255, 255, 0.12);
    --glass-line: rgba(255, 255, 255, 0.15);
    --hair: rgba(214, 220, 255, 0.13);
    --brilho: rgba(255, 255, 255, 0.07);
    --tinta-suave: rgba(214, 220, 255, 0.12);

    --fundo-solido: #181a2c;
    --fundo: radial-gradient(120% 90% at 50% 12%,
      #35375a 0%, #2a2c49 34%, #20223a 60%, #181a2c 100%);
    --nevoa-1: rgba(139, 148, 222, 0.25);
    --nevoa-2: rgba(120, 220, 190, 0.1);

    --sombra: 0 26px 60px -22px rgba(5, 6, 20, 0.65);
    --sombra-sm: 0 10px 26px -14px rgba(5, 6, 20, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="light"] {
  --ink: #2b2e42; --ink-2: #3a3e55;
  --ink-3: rgba(50, 54, 84, 0.62); --ink-4: rgba(60, 64, 96, 0.46);
  --mint: #8fe7bf; --mint-ink: #123a2b; --mint-strong: #1a9e6e;
  --peri: #b0aeee; --peri-ink: #0a0a0b;
  --belt: #1c5cab; --leve: #a32f2e;
  --ok: #1a9e6e; --atencao: #a87a18; --alerta: #a33636;
  --glass: rgba(255, 255, 255, 0.42); --glass-2: rgba(255, 255, 255, 0.26);
  --glass-hover: rgba(255, 255, 255, 0.6); --glass-line: rgba(255, 255, 255, 0.55);
  --hair: rgba(60, 64, 96, 0.14); --brilho: rgba(255, 255, 255, 0.5);
  --tinta-suave: rgba(60, 64, 96, 0.13);
  --fundo-solido: #a6a3c2;
  --fundo: radial-gradient(120% 90% at 50% 12%,
    #d8dae6 0%, #c4c7d8 34%, #b3b4cb 60%, #a6a3c2 100%);
  --nevoa-1: rgba(150, 160, 220, 0.5); --nevoa-2: rgba(120, 220, 190, 0.2);
  --sombra: 0 26px 60px -22px rgba(40, 45, 90, 0.42);
  --sombra-sm: 0 10px 26px -14px rgba(40, 45, 90, 0.34);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #eceef8; --ink-2: #cdd0e4;
  --ink-3: rgba(214, 218, 240, 0.66); --ink-4: rgba(206, 211, 240, 0.44);
  --mint: #8fe7bf; --mint-ink: #0f3526; --mint-strong: #6fdcac;
  --peri: #b0aeee; --peri-ink: #0a0a0b;
  --belt: #6ea8e8; --leve: #e07a76;
  --ok: #6fdcac; --atencao: #e6c072; --alerta: #e08585;
  --glass: rgba(255, 255, 255, 0.07); --glass-2: rgba(255, 255, 255, 0.045);
  --glass-hover: rgba(255, 255, 255, 0.12); --glass-line: rgba(255, 255, 255, 0.15);
  --hair: rgba(214, 220, 255, 0.13); --brilho: rgba(255, 255, 255, 0.07);
  --tinta-suave: rgba(214, 220, 255, 0.12);
  --fundo-solido: #181a2c;
  --fundo: radial-gradient(120% 90% at 50% 12%,
    #35375a 0%, #2a2c49 34%, #20223a 60%, #181a2c 100%);
  --nevoa-1: rgba(139, 148, 222, 0.25); --nevoa-2: rgba(120, 220, 190, 0.1);
  --sombra: 0 26px 60px -22px rgba(5, 6, 20, 0.65);
  --sombra-sm: 0 10px 26px -14px rgba(5, 6, 20, 0.5);
  color-scheme: dark;
}

/* ---- base ---------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', -apple-system, system-ui, sans-serif;
  font-size: 15.5px; line-height: 1.62; font-weight: 400;
  color: var(--ink);
  background: var(--fundo-solido);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  padding: 24px 16px calc(56px + env(safe-area-inset-bottom));
  position: relative; overflow-x: hidden;
  transition: background 0.25s, color 0.25s;
}
/* The atmosphere lives on fixed viewport layers, not on background-attachment:
 * fixed — iOS ignores that and long pages would scroll past the gradient.
 * ::before is the lavender vignette, ::after holds both haze blobs. */
body::before, body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
body::before { background: var(--fundo); }
body::after {
  background:
    radial-gradient(760px 760px at 50% -8%, var(--nevoa-1) 0%, transparent 62%),
    radial-gradient(620px 620px at 8% 104%, var(--nevoa-2) 0%, transparent 60%),
    radial-gradient(900px 620px at 92% 60%, var(--nevoa-2) 0%, transparent 58%);
}
main { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }

a { color: var(--mint-strong); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--mint-strong); outline-offset: 2px; border-radius: 4px; }

/* ---- type ---------------------------------------------------------------- */

h1 {
  font-size: clamp(32px, 6vw, 46px); font-weight: 300; line-height: 1.08;
  letter-spacing: -0.015em; text-wrap: balance;
}
h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 13px; text-wrap: balance; }
h3 {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--ink-4); margin-bottom: 13px;
}
.olho {
  font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-4); margin-bottom: 12px;
}
.lede { font-size: 17.5px; font-weight: 300; color: var(--ink-2); margin-top: 14px; line-height: 1.55; max-width: 34em; }
.dim { color: var(--ink-3); }
.mini { font-size: 12.5px; color: var(--ink-4); font-weight: 500; }
.belt { color: var(--belt); font-weight: 700; }
.leve { color: var(--leve); font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }

/* ---- brand --------------------------------------------------------------- */

.marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--peri); color: var(--peri-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; font-size: 17px;
  box-shadow: var(--sombra-sm);
}
.marca.g { width: 44px; height: 44px; border-radius: 12px; font-size: 25px; }
.logotipo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em;
}
.logotipo:hover { text-decoration: none; }
.logotipo .sub { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-4); display: block; margin-top: 1px; }

/* ---- topbar -------------------------------------------------------------- */

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: var(--max); margin: 0 auto 44px; position: relative; z-index: 2;
}
.topo nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topo nav a.item {
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  padding: 8px 13px; border-radius: 18px;
}
.topo nav a.item:hover { background: var(--glass-2); text-decoration: none; }
@media (max-width: 640px) {
  .topo nav a.item { display: none; }
  /* app screens keep their two tabs — hiding them would strand navigation */
  .topo.app nav a.item { display: inline-flex; }
}
@media (max-width: 480px) {
  /* tiny screens: drop the secondary pill (still reachable via footer links) */
  .topo:not(.app) nav a.btn:not(.primario) { display: none; }
}

/* ---- glass surfaces ------------------------------------------------------ */

.card {
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-line); border-radius: 22px;
  box-shadow: var(--sombra), inset 0 1px 10px var(--brilho);
  padding: 22px 23px;
}
.card.suave { background: var(--glass-2); box-shadow: var(--sombra-sm), inset 0 1px 8px var(--brilho); }
.card.pousa { transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s; }
.card.pousa:hover { transform: translateY(-3px); }

.sec { margin: 76px 0 18px; }
.sec p.intro { color: var(--ink-3); font-size: 15px; max-width: 40em; margin-top: -4px; margin-bottom: 16px; }

/* layout helpers */
.duas { display: grid; gap: 16px; grid-template-columns: 1fr; }
.tres { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 680px) {
  .duas { grid-template-columns: 1fr 1fr; }
  .tres { grid-template-columns: 1fr 1fr 1fr; }
}
.linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---- buttons ------------------------------------------------------------- */

.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--hair);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 22px; padding: 11px 19px; min-height: 42px; cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.btn:hover { background: var(--glass-hover); text-decoration: none; }
.btn:active { transform: scale(0.985); }
.btn.primario {
  background: var(--mint); border-color: rgba(40, 120, 90, 0.3);
  color: var(--mint-ink); font-weight: 700;
}
.btn.primario:hover { filter: brightness(1.04); background: var(--mint); }
.btn.grande { font-size: 15px; padding: 14px 26px; min-height: 50px; border-radius: 26px; }
.btn.icone { width: 42px; padding: 0; border-radius: 50%; }
.btn[disabled] { opacity: 0.5; cursor: default; }

/* chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 11px; border-radius: 14px;
  background: var(--glass-2); border: 1px solid var(--hair); color: var(--ink-2);
}
.chip.ok      { color: var(--ok);      background: rgba(60, 190, 140, 0.13); border-color: rgba(60, 190, 140, 0.25); }
.chip.atencao { color: var(--atencao); background: rgba(220, 170, 60, 0.14); border-color: rgba(220, 170, 60, 0.26); }
.chip.alerta  { color: var(--alerta);  background: rgba(200, 80, 80, 0.13);  border-color: rgba(200, 80, 80, 0.25); }
.chip .ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- forms --------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink-4);
}
.campo input, .campo textarea, .campo select {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--glass-2); border: 1px solid var(--hair); border-radius: 14px;
  padding: 12px 14px; min-height: 46px; width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.campo textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--mint-strong); background: var(--glass);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink-4); }
.ajuda { font-size: 13px; color: var(--ink-3); line-height: 1.55; }

/* ---- data ---------------------------------------------------------------- */

.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 15px; }
.kv dt { color: var(--ink-3); font-weight: 400; }
.kv dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.stats { display: flex; gap: 10px; flex-wrap: wrap; }
.st {
  flex: 1 1 120px; padding: 13px 16px; border-radius: 16px;
  background: var(--glass-2); border: 1px solid var(--hair);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.st .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.16em;
         color: var(--ink-4); font-weight: 600; }
.st .v { font-size: 26px; font-weight: 300; font-variant-numeric: tabular-nums;
         line-height: 1.3; letter-spacing: -0.01em; }
.st .v small { font-size: 11.5px; color: var(--ink-4); font-weight: 500; }

.tabela { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: right; padding: 10px 11px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--ink-4); font-weight: 600; font-size: 10px;
     text-transform: uppercase; letter-spacing: 0.14em; }
td { font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

/* meter bar (placar) */
.medidor { display: flex; flex-direction: column; gap: 6px; }
.medidor .rotulo { display: flex; justify-content: space-between; font-size: 12px;
  font-weight: 600; color: var(--ink-3); }
.medidor .trilho { height: 9px; border-radius: 5px; overflow: hidden; background: var(--tinta-suave); }
.medidor .trilho i { display: block; height: 100%; border-radius: 5px;
  background: var(--mint-strong); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

/* note-by-note ribbon (mock of the comparison page) */
.fita { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding: 4px 2px; }
.fita .bl { flex: none; border-radius: 5px; min-width: 10px; opacity: 0.92;
  transition: transform 0.15s; }
.fita .bl:hover { transform: translateY(-3px); }
.fita .bl.alvo   { background: var(--peri); opacity: 0.75; }
.fita .bl.abaixo { background: var(--belt); }
.fita .bl.acima  { background: var(--leve); }
.fita .bl.fora   { background: repeating-linear-gradient(45deg,
  var(--tinta-suave) 0 4px, transparent 4px 8px); border: 1px solid var(--hair); }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3);
  font-weight: 500; margin-top: 10px; }
.legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3.5px;
  vertical-align: -1.5px; margin-right: 6px; }

/* ---- membrane (the "Praticar Canto" lens, reusable) ----------------------- */

@keyframes qc-gira { to { transform: rotate(360deg); } }
@keyframes qc-gira-r { to { transform: rotate(-360deg); } }
@keyframes qc-respira { 0%, 100% { transform: translateY(0) scale(1); }
                        50% { transform: translateY(-6px) scale(1.012); } }
@keyframes qc-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 231, 191, 0.5); }
                      60% { box-shadow: 0 0 0 22px rgba(143, 231, 191, 0); } }

.membrana { --tam: 280px; position: relative; width: var(--tam); height: var(--tam);
  display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.membrana.respira { animation: qc-respira 7s ease-in-out infinite; }
.membrana .halo { position: absolute; inset: -36px; border-radius: 50%;
  background: radial-gradient(circle, var(--nevoa-1) 0%, transparent 66%);
  filter: blur(20px); }
.membrana .anel { position: absolute; inset: 10px; border-radius: 50%;
  border: 1px solid var(--glass-line); animation: qc-gira-r 90s linear infinite; }
.membrana .marcas { position: absolute; inset: 0; animation: qc-gira 60s linear infinite; }
.membrana .marcas i { position: absolute; display: block; border-radius: 50%; }
.membrana .casca { position: absolute; inset: 24px; border-radius: 50%;
  background: linear-gradient(150deg, var(--brilho), transparent 46%, rgba(30, 40, 80, 0.14));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--sombra), inset 0 2px 14px var(--brilho), inset 0 -18px 40px rgba(30, 40, 90, 0.22);
}
.membrana .centro { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center; padding: 0 30px; }
.membrana .centro .g { font-size: 34px; font-weight: 300; letter-spacing: -0.015em; line-height: 1; }
.membrana .centro .m { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-4); }
.membrana.gravando .casca { animation: qc-pulsa 1.6s ease-out infinite; border-color: rgba(143, 231, 191, 0.6); }

/* ---- pitch contour canvas ------------------------------------------------ */

.contorno-wrap { position: relative; height: 240px; }
canvas.contorno { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.contorno-wrap .selo { position: absolute; right: 12px; bottom: 10px; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-4); }

/* ---- drawer (turma side panel) ------------------------------------------- */

.veu { position: fixed; inset: 0; background: rgba(30, 34, 58, 0.4);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none;
  transition: opacity 0.25s; z-index: 40; }
.veu.aberto { opacity: 1; pointer-events: auto; }
.gaveta { position: fixed; top: 0; bottom: 0; right: 0; width: 440px; max-width: 94vw; z-index: 41;
  background: var(--glass); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border-left: 1px solid var(--glass-line);
  box-shadow: -18px 0 60px -18px rgba(20, 24, 60, 0.5);
  transform: translateX(104%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto; padding: 26px 24px calc(30px + env(safe-area-inset-bottom)); }
.gaveta.aberta { transform: translateX(0); }
.gaveta .fechar { position: absolute; top: 16px; right: 16px; }

/* ---- faixa de exemplo (telas-protótipo) ----------------------------------- */

.faixa-exemplo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--glass-2); border: 1px solid var(--hair); border-radius: 16px;
  padding: 11px 16px; margin: 0 auto 26px; max-width: var(--max);
  font-size: 13px; color: var(--ink-3); position: relative; z-index: 1; }
.faixa-exemplo .rotulo-ex { flex: none; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--peri-ink);
  background: var(--peri); border-radius: 12px; padding: 3px 10px; }

/* ---- toast --------------------------------------------------------------- */

.toast { position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px); z-index: 60;
  background: var(--ink); color: var(--fundo, #fff);
  font-size: 13.5px; font-weight: 600; padding: 11px 20px; border-radius: 22px;
  box-shadow: var(--sombra-sm); opacity: 0; pointer-events: none;
  transition: opacity 0.22s, transform 0.22s; }
:root[data-theme="dark"] .toast, .toast { color: #fff; background: #23253c; }
:root[data-theme="light"] .toast { background: #2b2e42; }
.toast.ligado { opacity: 1; transform: translate(-50%, 0); }

/* ---- reveal on scroll ---------------------------------------------------- */

/* hidden only when JS is present to reveal it again (comum.js stamps html.js) */
html.js .surge { opacity: 0; transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease; }
html.js .surge.visivel { opacity: 1; transform: none; }

/* ---- editorial (handoff do Claude Design, 31/07) --------------------------
 * Seções numeradas com fio no topo, tipografia fina gigante, passos com
 * numeral aberto, pull-quote, estatística solta e a janela-mockup. As landings
 * usam isto; as telas de app continuam nos cards. */

.gigante {                     /* h1 de landing */
  font-size: clamp(38px, 5.6vw, 72px); font-weight: 250; line-height: 1.04;
  letter-spacing: -0.02em; text-wrap: balance;
}
.gigante em { font-style: normal; font-weight: 600; color: var(--mint-strong); }
.lede-g { font-size: clamp(16px, 1.6vw, 19px); font-weight: 300; color: var(--ink-2);
  line-height: 1.55; max-width: 32em; }

.secn { display: flex; align-items: baseline; gap: 18px;
  border-top: 1px solid var(--hair); padding-top: 26px; }
.secn .num { font-size: 44px; font-weight: 200; line-height: 1; color: var(--ink-4);
  letter-spacing: -0.02em; flex: none; }
.secn h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); font-weight: 300;
  letter-spacing: -0.015em; }
.secn h2 em { font-style: normal; font-weight: 600; color: var(--mint-strong); }
.secn .olho { margin-bottom: 6px; letter-spacing: 0.3em; }
.secn .nota-sec { margin: 8px 0 0; color: var(--ink-3); font-size: 14.5px; max-width: 44em; }
section.editorial { max-width: var(--max); margin: 0 auto; padding: 110px 0 0; }

.passo-num { font-size: 64px; font-weight: 200; line-height: 1;
  color: var(--mint-strong); letter-spacing: -0.03em; }
.passo-titulo { margin: 16px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.passo-texto { margin: 0; color: var(--ink-3); max-width: 30em; }

.citacao { margin: 0; border-left: 2px solid var(--mint-strong); padding: 4px 0 4px 22px;
  font-size: clamp(18px, 2vw, 23px); font-weight: 300; color: var(--ink-2);
  line-height: 1.5; max-width: 26em; }

.stat-solto .v { font-size: 34px; font-weight: 200; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; }
.stat-solto .v small { font-size: 14px; color: var(--ink-4); }
.stat-solto .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-4); font-weight: 600; }

/* janela-mockup (painel na landing) */
.janela { position: relative; max-width: 940px; margin: 0 auto; background: var(--glass);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-line); border-radius: 18px;
  box-shadow: var(--sombra), inset 0 1px 10px var(--brilho); overflow: hidden; }
.janela .barra-j { display: flex; align-items: center; gap: 8px; padding: 13px 16px;
  border-bottom: 1px solid var(--hair); }
.janela .barra-j i { width: 11px; height: 11px; border-radius: 50%; }
.janela .barra-j .url { margin-left: 12px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-4); letter-spacing: 0.04em; }

/* halo atmosférico atrás de um bloco */
.halo-bloco { position: absolute; inset: -40px -60px; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 45%, var(--nevoa-1) 0%, transparent 70%);
  filter: blur(28px); }

/* fita interativa: bloco selecionado ganha anel menta */
.fita .bl { cursor: pointer; padding: 0; }
.fita .bl:focus-visible { outline: 2px solid var(--mint-strong); outline-offset: 2px; }
.fita .bl.tocando { transform: translateY(-4px);
  box-shadow: 0 6px 18px -4px rgba(26, 158, 110, 0.55), 0 0 0 2px var(--mint-strong); }

/* chips de voz do herói: a legenda É o seletor do que toca */
.voz-chip { display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  background: var(--glass-2); border: 1px solid var(--hair); border-radius: 16px;
  padding: 6px 12px; cursor: pointer; transition: opacity 0.15s, background 0.15s; }
.voz-chip i { width: 11px; height: 11px; border-radius: 3.5px; flex: none; }
.voz-chip:hover { background: var(--glass-hover); }
.voz-chip[aria-pressed="false"] { opacity: 0.45; }
.voz-chip[aria-pressed="false"] i { background: var(--tinta-suave) !important; }
.voz-chip:disabled { cursor: default; opacity: 0.35; }

/* detalhe da nota selecionada (mesmo fluxo da página de comparação real) */
.ex-detalhe { border-top: 1px solid var(--hair); margin-top: 16px; padding-top: 16px; }
.ex-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ex-quem { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-4); font-weight: 600; }
.ex-nota { font-size: 30px; font-weight: 200; letter-spacing: -0.01em; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.ex-sub { font-size: 12px; color: var(--ink-3); font-weight: 500;
  font-variant-numeric: tabular-nums; }
.ex-veredito { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.6; }
.ex-veredito b { color: var(--ink); }

/* ---- misc ---------------------------------------------------------------- */

details summary { color: var(--ink-2); font-size: 14.5px; font-weight: 600;
  cursor: pointer; padding: 13px 0; list-style: none; position: relative; padding-right: 30px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-weight: 300; font-size: 19px; color: var(--ink-4);
  transition: transform 0.2s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details + details { border-top: 1px solid var(--hair); }
details p { margin: 2px 0 14px; font-size: 14px; color: var(--ink-3); line-height: 1.68; max-width: 56em; }
details p b { color: var(--ink); font-weight: 700; }

kbd { background: var(--glass-2); border: 1px solid var(--hair); border-radius: 6px;
      padding: 2px 7px; font-size: 11.5px; font-weight: 600; }

footer { color: var(--ink-4); font-size: 12.5px; margin-top: 76px;
         border-top: 1px solid var(--hair); padding-top: 20px; line-height: 1.65;
         max-width: var(--max); margin-left: auto; margin-right: auto;
         position: relative; z-index: 1; }
footer a { font-weight: 600; }

.erro { color: var(--alerta); font-size: 14px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .surge { opacity: 1; transform: none; }
}