/* Home do Intérprete ao Vivo. Direção: The split stage · Inter · página escura, azul do app como acento */
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --bg: #07090d; --surface: #131820; --ink: #eef1f6; --muted: #a3adc0;
  --accent: #2f6ee0; --accent-ink: #ffffff;
  --paper: #eef1f6; --paper-ink: #0d0f13;
  --edge: #262d3a;
  --m: clamp(16px, 2vw, 32px);
  --s-small: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
  --s-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --s-lead: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --s-head: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  --s-display: clamp(2.75rem, 6.6vw, 8.5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --t-press: 140ms; --t-hover: 180ms;
  color-scheme: dark;
}
@media (max-width: 820px) { :root { --s-display: 14vw; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--s-body)/1.55 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: "Inter", system-ui, sans-serif; font-weight: 650; letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
h2 { font-size: var(--s-head); }
p { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cta :focus-visible { outline-color: var(--paper-ink); }
.plan.b :focus-visible { outline-color: #fff; }
.skip { position: absolute; left: 12px; top: -80px; background: var(--ink); color: var(--bg); padding: 10px 16px; z-index: 20; }
.skip:focus { top: 12px; }
.small { font-size: var(--s-small); }

/* botões: pílula, um preenchimento só */
.btn { display: inline-flex; align-items: center; min-height: 54px; padding: 0 30px; background: var(--accent); color: var(--accent-ink); font: 600 var(--s-body)/1 "Inter", system-ui, sans-serif; letter-spacing: -0.01em; text-decoration: none; border: 0; border-radius: 999px; cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.btn:active { transform: scale(0.97); }
.btn.dark { background: var(--ink); color: var(--bg); }
.btn.light { background: #fff; color: var(--paper-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink); color: var(--bg); }
  .btn.dark:hover { background: var(--accent); color: var(--accent-ink); }
  .btn.light:hover { background: var(--bg); color: var(--ink); }
}

/* ---------- a página dividida ---------- */
.split { display: grid; grid-template-columns: 47vw 1fr; align-items: start; }
.col { padding: 0 var(--m) 0 clamp(32px, 4.5vw, 72px); min-width: 0; }
.nav { position: sticky; top: 0; z-index: 5; background: var(--bg); display: flex; justify-content: flex-end; align-items: center; gap: 28px; padding: 18px 0; font-size: var(--s-small); }
.nav a { text-decoration: none; }
.nav a:not(.btn) { padding: 6px 0; }
@media (hover: hover) and (pointer: fine) { .nav a:not(.btn):hover { text-decoration: underline; } }
.nav .btn { min-height: 42px; padding: 0 20px; font-size: var(--s-small); }

/* ---------- a metade fixa: um pedaço real do app ---------- */
.stage { position: sticky; top: var(--m); height: calc(100svh - 2 * var(--m)); margin: var(--m) 0 var(--m) var(--m); overflow: hidden; border-radius: 20px; }
[data-ui].stage { border: 1px solid var(--edge); }

[data-ui] { --a-bg: #0f1115; --a-panel: #171a21; --a-panel2: #1e222b; --a-line: #2a2f3a; --a-text: #e8eaf0; --a-muted: #98a0b2; --a-accent: #6ea0ff; --a-ok: #34d17b; --a-btn: #2f6ee0;
  background: var(--a-bg); color: var(--a-text); font: 400 14px/1.45 "Inter", system-ui, sans-serif; letter-spacing: 0; }
[data-ui] * { letter-spacing: 0; }
[data-ui] .app { display: flex; flex-direction: column; height: 100%; }
[data-ui] .top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--a-panel); border-bottom: 1px solid var(--a-line); flex: none; transition: background-color 400ms ease; }
[data-ui] .top b { font-size: 15px; font-weight: 600; }
[data-ui] .chip { padding: 4px 10px; background: var(--a-panel2); border: 1px solid var(--a-line); border-radius: 6px; color: var(--a-text); font-size: 13px; }
[data-ui] .status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--a-muted); font-size: 13px; }
[data-ui] .meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
[data-ui] .meter i { display: block; width: 3px; height: 100%; background: var(--a-ok); transform-origin: bottom; transform: scaleY(0.3); }
[data-ui] .scen { display: flex; gap: 8px; padding: 12px 16px 0; flex: none; flex-wrap: wrap; }
[data-ui] .scen button { min-height: 36px; padding: 0 14px; background: var(--a-panel2); color: var(--a-text); border: 1px solid var(--a-line); border-radius: 6px; font: inherit; font-size: 14px; cursor: pointer; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
[data-ui] .scen button:active { transform: scale(0.97); }
[data-ui] .scen button[aria-pressed="true"] { background: var(--a-btn); border-color: var(--a-btn); color: #fff; }
@media (hover: hover) and (pointer: fine) { [data-ui] .scen button:not([aria-pressed="true"]):hover { background: #262b36; } }
[data-ui] .scen button:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
[data-ui] .pane { margin: 12px 16px 0; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 8px; padding: 12px 16px 14px; transition: border-color 400ms ease; }
[data-ui] .pane h2 { margin: 0 0 8px; font: 600 13px/1.2 "Inter", system-ui, sans-serif; color: var(--a-muted); }
[data-ui] .pane-live { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
[data-ui] .pane-live h2 { margin-bottom: auto; }
[data-ui] .pane-reply { flex: none; border-left: 3px solid var(--a-ok); }
[data-ui] .seg { border-left: 3px solid var(--a-line); padding: 4px 12px; margin: 8px 0 0; }
[data-ui] .seg.now { border-color: var(--a-accent); }
[data-ui] .seg { margin-top: 14px; }
[data-ui] .seg .en { font-size: 20px; line-height: 1.35; color: var(--a-text); min-height: 1.35em; }
[data-ui] .seg .pt { margin-top: 2px; font-size: 16px; color: var(--a-muted); min-height: 1.45em; transition: opacity 400ms ease; }
[data-ui] .seg .pt.wait { opacity: 0; }
[data-ui] .w { transition: color 160ms ease, background-color 160ms ease; border-radius: 3px; }
[data-ui] .w.hide { opacity: 0; }
[data-ui] .reply .en { font-size: 21px; line-height: 1.4; }
[data-ui] .reply .w.on { color: #0f1115; background: var(--a-accent); }
[data-ui] .reply .w.done { color: var(--a-accent); }
[data-ui] .reply .pt { margin-top: 6px; font-size: 15px; color: var(--a-muted); }
[data-ui] .bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--a-muted); font-size: 13px; }
[data-ui] .bar .play { padding: 6px 12px; background: var(--a-btn); color: #fff; border-radius: 6px; font-size: 13px; }
[data-ui] .bar .spd { margin-left: auto; }
[data-ui] .foot-note { margin: auto 16px 14px; padding-top: 10px; color: var(--a-muted); font-size: 13px; flex: none; }
[data-ui] .pane-local { display: none; flex: 1; }
[data-ui] .pane-local ul { list-style: none; margin: 0 0 14px; padding: 0; }
[data-ui] .pane-local li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; font-size: 19px; }
[data-ui] .pane-local li span:last-child { color: var(--a-ok); font-size: 15px; }
[data-ui] .pane-local h3 { margin: 18px 0 6px; font: 600 15px/1.3 "Inter", system-ui, sans-serif; color: var(--a-muted); }
[data-ui] .pane-local { align-self: stretch; margin-top: 16px; }
[data-ui] .pane-local .srv span:last-child { color: var(--a-muted); }

[data-ui][data-state="listen"] .top { background: #1d2a44; }
[data-ui][data-state="read"] .pane-live { border-color: var(--a-accent); }
[data-ui][data-state="reply"] .pane-reply { border-color: var(--a-ok); }
[data-ui][data-state="local"] .scen, [data-ui][data-state="local"] .pane-live, [data-ui][data-state="local"] .pane-reply, [data-ui][data-state="local"] .foot-note { display: none; }
[data-ui][data-state="local"] .pane-local { display: block; }

/* ---------- a coluna de leitura ---------- */
.hero { min-height: calc(100svh - 68px); display: flex; flex-direction: column; padding-bottom: var(--m); }
.hero .intro { order: 1; margin-top: 12vh; max-width: 40ch; }
.hero .lead { font: 500 var(--s-lead)/1.25 "Inter", system-ui, sans-serif; letter-spacing: -0.025em; max-width: 30ch; }
.hero .act { margin-top: 32px; }
.hero .meta { margin-top: 14px; color: var(--muted); font-size: var(--s-small); }
.wordmark { order: 2; margin-top: auto; padding-top: 40px; font-size: var(--s-display); line-height: 0.95; letter-spacing: -0.05em; transform-origin: left bottom; }
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines [data-line] { display: block; }

.how { padding: var(--m) 0 0; }
.how h2 { padding-top: 6svh; max-width: 14ch; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 80svh; display: flex; flex-direction: column; justify-content: center; gap: 16px; max-width: 34ch; }
.js .step h3 { color: var(--muted); transition: color 400ms ease; }
.js .step.is-active h3 { color: var(--ink); }
.step h3 { font-size: var(--s-lead); line-height: 1.12; letter-spacing: -0.01em; }
.step > p { max-width: 36ch; }
.step .crop { margin-top: 8px; max-width: 420px; }
.priv .crop { max-width: 420px; }
.only-small { display: none; }

[data-ui].crop { border-radius: 14px; padding: 14px 16px 12px; border: 1px solid var(--edge); }
[data-ui] h4 { margin: 0 0 8px; font: 600 13px/1.3 "Inter", system-ui, sans-serif; color: var(--a-muted); }
[data-ui] h4:not(:first-child) { margin-top: 14px; }
[data-ui] .opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
[data-ui] .opts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--a-panel2); border: 1px solid var(--a-line); border-radius: 6px; font-size: 15px; }
[data-ui] .opts li span:last-child:not(:first-child) { color: var(--a-muted); font-size: 13px; }
[data-ui] .opts li.sel { border-color: var(--a-accent); background: #1c2740; }
[data-ui] .opts li.sel span:last-child:not(:first-child) { color: var(--a-accent); }
[data-ui] .typed { padding: 10px 12px; background: var(--a-panel2); border: 1px solid var(--a-line); border-radius: 6px; font-size: 15px; }
[data-ui] .say { padding: 10px 12px; border-left: 3px solid var(--a-ok); background: var(--a-panel2); border-radius: 0 6px 6px 0; font-size: 19px; line-height: 1.35; }

.priv { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 22px; max-width: 46ch; padding-bottom: 8svh; }
.priv dl { margin: 6px 0 0; display: grid; gap: 18px; }
.priv dt { font-weight: 600; }
.priv dd { margin: 2px 0 0; }
.priv a { font-weight: 600; }

/* ---------- ofício: uma foto grande em largura total ---------- */
.craft { padding: clamp(80px, 12vw, 200px) var(--m) clamp(56px, 8vw, 140px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; align-items: end; }
.craft h2 { grid-column: 1 / 8; max-width: 16ch; }
.craft-text { grid-column: 8 / 13; max-width: 36ch; }
.pic { margin: 0; grid-column: 1 / 13; }
.pic .frame { overflow: clip; border-radius: 20px; }
.pic img { display: block; width: 100%; height: clamp(300px, 40vw, 660px); object-fit: cover; object-position: 50% 40%; background: var(--surface); transform-origin: 50% 50%; }
.pic figcaption { margin-top: 12px; font-size: var(--s-small); color: var(--muted); max-width: 60ch; }

/* ---------- preços: dois campos ---------- */
.plans { display: grid; grid-template-columns: 5fr 7fr; min-height: 90svh; }
.plan { padding: 40px var(--m) 40px; display: flex; flex-direction: column; gap: 22px; }
.plan.a { background: var(--surface); }
.plan.b { background: var(--accent); color: #fff; }
.plan p.what { max-width: 30ch; }
.plan .prices { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 56px 20px; }
.price { display: contents; }
.price .amt { font: 650 var(--s-display)/0.95 "Inter", system-ui, sans-serif; letter-spacing: -0.05em; white-space: nowrap; }
.price .per { font-size: var(--s-small); max-width: 20ch; }
.plan .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.plan .note { font-size: var(--s-small); max-width: 34ch; }

/* ---------- perguntas ---------- */
.faq { padding: clamp(80px, 12vw, 200px) var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 32px; }
.faq h2 { grid-column: 1 / 4; }
.faq .qa { grid-column: 5 / 13; columns: 2; column-gap: 56px; }
.faq .qa p { margin: 0 0 20px; break-inside: avoid; }
.faq .qa strong { font-weight: 600; }
.faq a { font-weight: 600; }

/* ---------- fechamento ---------- */
.cta { background: var(--paper); color: var(--paper-ink); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; padding: clamp(72px, 9vw, 140px) var(--m) clamp(40px, 4vw, 64px); }
.cta .close { grid-column: 1 / 7; display: grid; gap: 22px; }
.cta .close h2 { font-size: var(--s-display); line-height: 0.95; letter-spacing: -0.05em; }
.cta .close p { max-width: 34ch; }
.cta .dlg { grid-column: 8 / 13; width: min(440px, 100%); justify-self: start; }
[data-ui].dlg { background: #171a21; border: 1px solid #2a2f3a; border-radius: 20px; padding: 26px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
[data-ui].dlg .dlg-t { margin: 0 0 16px; font: 600 20px/1.3 "Inter", system-ui, sans-serif; letter-spacing: 0; }
[data-ui].dlg dl { margin: 0 0 20px; display: grid; gap: 12px; }
[data-ui].dlg dl div { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
[data-ui].dlg dt { color: var(--a-muted); }
[data-ui].dlg dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
[data-ui].dlg .go { display: flex; align-items: center; justify-content: center; min-height: 52px; background: var(--a-btn); color: #fff; font: 600 17px/1 "Inter", system-ui, sans-serif; text-decoration: none; border-radius: 999px; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
[data-ui].dlg .go:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { [data-ui].dlg .go:hover { background: #4a86f0; } }
[data-ui].dlg .go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
[data-ui].dlg .help { margin-top: 16px; color: var(--a-muted); font-size: 14px; }

/* ---------- rodapé ---------- */
.foot { padding: 20svh var(--m) 30px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; font-size: var(--s-small); }
.foot .credit { grid-column: 1 / -1; color: var(--muted); max-width: 70ch; }
.foot nav { display: flex; gap: 24px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .r { text-align: right; color: var(--muted); }
.foot .l { color: var(--muted); }

/* ---------- movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-line] { transform: translateY(105%); animation: line-up 800ms var(--ease-expo) forwards; animation-delay: calc(100ms + var(--i) * 90ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: rise 560ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js .stage { clip-path: inset(0 0 100% 0); animation: open 1000ms cubic-bezier(0.76, 0, 0.24, 1) 150ms forwards; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .pic img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
  [data-ui] .meter i { animation: lvl 900ms ease-in-out infinite alternate; }
  [data-ui] .meter i:nth-child(2) { animation-delay: 120ms; } [data-ui] .meter i:nth-child(3) { animation-delay: 260ms; } [data-ui] .meter i:nth-child(4) { animation-delay: 60ms; } [data-ui] .meter i:nth-child(5) { animation-delay: 200ms; }
  [data-ui] .pane-local { animation: rise 500ms var(--ease-out); }
  @supports (animation-timeline: scroll()) {
    .wordmark { animation: shrink linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes open { to { clip-path: inset(0); } }
@keyframes lvl { to { transform: scaleY(1); } }
@keyframes shrink { to { transform: scale(0.93); } }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .stage { position: relative; top: auto; height: auto; margin: 0; }
  [data-ui] .app { height: auto; padding-bottom: 14px; }
  [data-ui] .pane-live { flex: none; }
  .col { padding: 0 var(--m); }
  .nav { display: none; }
  .only-small { display: block; }
  .hero { min-height: 0; padding-bottom: 28px; }
  .hero .intro { order: 2; margin-top: 18px; }
  .wordmark { order: 1; margin-top: 0; padding-top: 28px; }
  .hero .lead { font-size: 1.25rem; max-width: 26ch; }
  .hero .act { margin-top: 18px; }
  .how { padding-top: 80px; }
  .how h2 { padding-top: 0; }
  .step { min-height: 60svh; }
  .priv { min-height: 70svh; padding-top: 6svh; }
  .plans { grid-template-columns: 1fr; min-height: 0; }
  .plan { min-height: 70svh; padding: 28px var(--m); }
  .plan .row .btn { width: 100%; justify-content: center; }
  .craft { display: block; padding: 72px var(--m) 56px; }
  .craft-text { margin-top: 18px; }
  .pic { margin-top: 28px; }
  .pic img { height: 56vw; }
  .plan .prices { gap: 40px; }
  .faq { display: block; padding: 72px var(--m); }
  .faq .qa { columns: 1; margin-top: 24px; }
  .cta { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 84svh; padding: 32px var(--m); }
  .cta .dlg { width: 100%; }
  .foot { grid-template-columns: 1fr; gap: 8px; padding: 20svh var(--m) 24px; }
  .foot nav { flex-wrap: wrap; gap: 8px 24px; }
  .foot .r { text-align: left; }
  [data-ui] .pane-live .seg.prev, [data-ui] .pane-live .seg.old, [data-ui] .pane-live .seg.old3 { display: none; }
  [data-ui] .scen { padding-top: 10px; }
  [data-ui] .scen button { min-height: 44px; }
  [data-ui] .reply .en { font-size: 18px; }
  [data-ui] .foot-note { margin: 10px 16px 0; padding: 0; }
  [data-ui] .top { padding: 10px 14px; gap: 8px; }
  [data-ui] .top b, [data-ui] .chip, [data-ui] .status { white-space: nowrap; }
  [data-ui] .top b { font-size: 14px; }
  [data-ui] .chip { padding: 4px 8px; font-size: 12.5px; }
  [data-ui] .status { font-size: 12.5px; gap: 6px; }
}
@media (max-height: 820px) and (min-width: 821px) {
  [data-ui] .pane-live .seg.old3 { display: none; }
}
@media (max-height: 740px) and (min-width: 821px) {
  [data-ui] .pane-live .seg.old { display: none; }
}
@media (max-height: 640px) and (min-width: 821px) {
  [data-ui] .pane-live .seg.prev { display: none; }
}