/* ===================================================================
   /calculadora — emulador HP-12C. Usa os tokens de styles.css.
   Carregado DEPOIS de styles.css, nunca antes.
=================================================================== */

.page-calc{background:var(--navy-900)}

.calc-page{
  padding:118px 0 72px;
  color:var(--white);
  background:linear-gradient(160deg,var(--navy-800) 0%,var(--navy-900) 55%);
  min-height:100vh;
}

/* ------------------------------------------------------------ cabeçalho */
.calc-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:26px;
}
.calc-page .eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-300);margin:0 0 10px;
}
.calc-page h1{
  font-family:var(--serif);font-weight:600;line-height:1.1;margin:0 0 12px;
  font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--white);
}
.calc-page h1 span{color:var(--gold)}
.calc-head__sub{
  max-width:52ch;margin:0;font-weight:300;font-size:.98rem;color:#b9c1d3;text-wrap:pretty;
}

.calc-tools{display:flex;flex-wrap:wrap;gap:8px}
.tool{
  font:inherit;font-size:.82rem;line-height:1;cursor:pointer;
  padding:10px 14px;border-radius:999px;
  color:#dfe4ef;background:rgba(255,255,255,.05);
  border:1px solid rgba(198,161,91,.35);
  transition:background .2s,border-color .2s,color .2s;
}
.tool:hover{background:rgba(198,161,91,.16);border-color:var(--gold);color:var(--white)}
.tool:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------------------------------------------------------------- ajuda */
.help{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;
  margin:0 0 26px;padding:22px 24px;border-radius:var(--radius);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
}
.help h2{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-300);margin:0 0 12px;font-weight:700;font-family:var(--sans);
}
.help__col h2:not(:first-child){margin-top:20px}
.help p{margin:0 0 10px;font-size:.9rem;font-weight:300;color:#c3cadb;text-wrap:pretty}
.help code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;
  background:rgba(0,0,0,.3);padding:2px 6px;border-radius:4px;color:var(--gold-100);
}
.help em{color:var(--gold-300);font-style:normal}
.help dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.88rem}
.help dt{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--gold-100);white-space:nowrap;
}
.help dd{margin:0;color:#b9c1d3;font-weight:300}

/* --------------------------------------------------------------- palco */
.calc-shell{margin:0 0 44px}
.calc-stage{
  --scale:1;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start;
}
@media (max-width:1040px){.calc-stage{grid-template-columns:minmax(0,1fr)}}

.calc-shell:fullscreen{
  background:var(--navy-900);padding:28px;overflow:auto;
  display:flex;align-items:center;justify-content:center;
}
.calc-shell:fullscreen .calc-stage{width:min(1180px,100%)}

/* ----------------------------------------------------------- a máquina */
.hp{
  font-size:calc(15px * var(--scale));
  border-radius:1em;padding:1.1em 1.1em 1.3em;
  background:linear-gradient(168deg,#243149 0%,#141d2e 46%,#0b1220 100%);
  border:1px solid rgba(198,161,91,.28);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  overflow-x:auto;
}
.hp__top{margin-bottom:1em}
.hp__brand{
  margin:.7em .2em 0;font-size:.62em;letter-spacing:.22em;text-transform:uppercase;
  color:#7b8398;display:flex;gap:.6em;align-items:center;flex-wrap:wrap;
}
.hp__selo{
  background:var(--gold);color:#101828;font-weight:700;letter-spacing:.06em;
  padding:.15em .5em;border-radius:.2em;
}
.hp__brand i{font-style:normal;color:#5d6579}

/* placa do assessor — nome como texto, fio, e o logotipo oficial intacto
   (manual da marca, p.42 e p.50: o logo nunca e recombinado em lockup novo) */
.hp__dono{
  margin-left:auto;display:flex;align-items:baseline;gap:.5em;
  letter-spacing:.16em;line-height:1;
}
.hp__dono b{color:#e7ebf3;font-weight:700}
.hp__dono em{font-style:normal;color:var(--gold-300);letter-spacing:.2em}
.hp__fio{width:1px;height:1.5em;background:rgba(198,161,91,.5)}
.hp__logo{height:1.5em;width:auto;opacity:.92;display:block}

@media (max-width:560px){
  .hp__dono{margin-left:0}
  .hp__modelo{margin-right:auto}
}

/* visor */
.lcd{
  background:linear-gradient(#c6cdbe,#aeb7a5);
  border-radius:.45em;padding:.55em .85em .35em;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.08);
  border:1px solid #6c7466;
}
.lcd__flags{
  display:flex;gap:1em;min-height:1.1em;
  font-size:.68em;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#3b4a3d;
}
.lcd__num{
  display:block;text-align:right;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:2.5em;line-height:1.15;letter-spacing:.04em;color:#15251b;
  overflow:hidden;text-overflow:clip;white-space:nowrap;
}
.lcd__num.is-error{color:#7d2116}

/* teclado */
.pad{
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));
  grid-auto-rows:3.4em;gap:.4em;min-width:44em;
}
.k{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.1em;padding:.3em .15em;cursor:pointer;font:inherit;
  border-radius:.35em;border:1px solid #2e3a52;border-bottom-color:#0a0f1a;
  background:linear-gradient(#2c3a52,#1c2536 60%,#161e2d);
  box-shadow:0 2px 0 #080c15,inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .06s ease,box-shadow .06s ease,background .15s;
}
.k:hover{background:linear-gradient(#35455f,#212c40 60%,#1a2333)}
.k:active,.k.is-hit{
  transform:translateY(2px);
  box-shadow:0 0 0 #080c15,inset 0 2px 6px rgba(0,0,0,.55);
  background:linear-gradient(#1d2637,#2a3750);
}
.k:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.k__m{font-size:1.02em;font-weight:700;color:#eef1f6;line-height:1.05;text-align:center}
.k__f{font-size:.52em;line-height:1;min-height:1em;color:var(--gold-300);letter-spacing:.02em;text-align:center}
.k__g{font-size:.52em;line-height:1;min-height:1em;color:#7fb0c7;letter-spacing:.02em;text-align:center}

.k--num .k__m{font-size:1.2em}
.k--op .k__m{font-size:1.3em}
.k--num,.k--op{background:linear-gradient(#3a4a66,#26324a 60%,#1e2739)}
.k--num:hover,.k--op:hover{background:linear-gradient(#445673,#2b3850 60%,#232e44)}

.k--enter{grid-row:span 2}
.k--enter .k__m{font-size:.62em;letter-spacing:.06em;line-height:1.25}

.k--f{border-color:var(--gold-600)}
.k--f .k__m{color:var(--gold-100)}
.k--g{border-color:#4d7f96}
.k--g .k__m{color:#a9d6e8}

/* ------------------------------------------------------------- lateral */
.side{display:grid;gap:18px}
@media (max-width:1040px){.side{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.side{grid-template-columns:1fr}}

.mon,.tape-box{
  border-radius:var(--radius);padding:16px 18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
}
.mon h2,.tape-box h2{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-300);margin:0 0 12px;
}
.mon__grid{display:grid;gap:5px}
.mon__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.84rem}
.mon__row span{color:#8b94a9;letter-spacing:.04em}
.mon__row b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:400;color:#e7ebf3;
}
.mon__sep{height:1px;background:rgba(255,255,255,.12);margin:9px 0}

.tape-clear{
  font:inherit;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;color:#8b94a9;cursor:pointer;padding:0;
}
.tape-clear:hover{color:var(--gold)}
.tape{
  list-style:none;margin:0;padding:0;max-height:320px;overflow-y:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;
  display:grid;gap:4px;align-content:start;
}
.tape:empty::after{content:"as contas aparecem aqui";font-family:var(--sans);color:#6b7488;font-size:.78rem}
.tape li{color:#c3cadb;line-height:1.35;word-break:break-word}
.tape .tape__sto{color:var(--gold-300)}
.tape .tape__res{color:var(--white);font-weight:700}
.tape .tape__cfg{color:#8b94a9}
.tape .tape__warn{color:#e0a08f}

/* --------------------------------------------------------- sequências */
.recipes{margin:0 0 34px}
.recipes h2{
  font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--white);margin:0 0 18px;
}
.recipes__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.recipes article{
  border-radius:var(--radius);padding:18px 20px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
}
.recipes h3{font-size:.95rem;font-weight:700;color:var(--white);margin:0 0 10px}
.rc{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8rem;line-height:1.6;color:var(--gold-100);margin:0 0 8px;word-break:break-word;
}
.rc__note{font-size:.82rem;font-weight:300;color:#a9b1c4;margin:0}
.rc__note em{color:var(--gold-300);font-style:normal}

.calc-legal{
  font-size:.78rem;font-weight:300;line-height:1.65;color:#8b94a9;
  border-top:1px solid rgba(255,255,255,.1);padding-top:18px;margin:0;max-width:80ch;
}

/* ------------------------------------------------------------- mobile */
@media (max-width:640px){
  .calc-page{padding-top:100px}
  .hp{font-size:calc(13px * var(--scale))}
  .calc-tools{width:100%}
}

/* ===================================================================
   Camada de animação — pareia com calculadora-fx.js.
   Só transform/opacity/filter; nada aqui recalcula layout.
=================================================================== */

/* brilho ambiente que respira atrás de tudo */
.calc-page{position:relative;isolation:isolate}
.calc-page::before{
  content:"";position:absolute;inset:-20% 0 auto;height:120vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(45% 38% at 22% 12%,rgba(198,161,91,.13),transparent 70%),
    radial-gradient(38% 32% at 82% 30%,rgba(66,110,150,.16),transparent 72%);
  animation:respirar 19s ease-in-out infinite alternate;
}
@keyframes respirar{
  from{transform:translate3d(-2%,0,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.08)}
}

/* a máquina: luz que segue o cursor + inclinação 3d */
/* sem min-width:0 a coluna do grid mede pelo teclado (44em) e a pagina
   inteira ganha barra de rolagem horizontal. */
.hp-wrap{will-change:transform;min-width:0;max-width:100%}
.hp{position:relative;transform-style:preserve-3d;will-change:transform}
.hp>*{position:relative;z-index:1}
.hp::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(198,161,91,.15),transparent 62%);
  opacity:0;transition:opacity .45s ease;
}
.hp.tem-luz::before{opacity:1}
.hp__brilho{
  position:absolute;top:0;bottom:0;left:0;width:38%;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
}

/* visor: varredura e pulso */
.lcd{position:relative;overflow:hidden;will-change:box-shadow,transform}
.lcd__sweep{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.8) 50%,transparent 80%);
}
.lcd__num{position:relative;z-index:1}

/* teclas: onda ao toque e realce do prefixo armado */
.k{overflow:hidden}
/* a onda precisa de especificidade maior que .k>span, senao vira relative,
   entra no layout e empurra os rotulos a cada clique. */
.k>.k__onda{
  position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;margin:-75% 0 0 -75%;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(216,189,134,.5),rgba(216,189,134,0) 68%);
}
.k>span:not(.k__onda){position:relative;z-index:1}

.pad.armado-f .k__f{color:var(--gold-100);text-shadow:0 0 12px rgba(216,189,134,.9)}
.pad.armado-g .k__g{color:#cdeaf8;text-shadow:0 0 12px rgba(127,176,199,.9)}
.pad.armado-f [data-k="f"],
.pad.armado-g [data-k="g"]{animation:prefixo 1.1s ease-in-out infinite}
@keyframes prefixo{
  0%,100%{box-shadow:0 2px 0 #080c15,0 0 0 rgba(198,161,91,0)}
  50%{box-shadow:0 2px 0 #080c15,0 0 22px rgba(198,161,91,.55)}
}

/* fita: linha nova acende */
.tape li{position:relative;padding-left:10px;border-radius:3px}
.tape li::before{
  content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:2px;border-radius:2px;background:transparent;
}
.tape .tape__res::before{background:var(--gold)}
.tape .tape__sto::before{background:rgba(198,161,91,.4)}
.tape__novo{animation:fita-acende 1.3s ease-out}
@keyframes fita-acende{
  0%{background:rgba(198,161,91,.26)}
  100%{background:transparent}
}

/* título partido em palavras */
.fx-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.fx-word__in{display:inline-block;will-change:transform}

/* blocos que entram ao rolar */
.fx-on .fx-reveal:not(.fx-visivel){opacity:0}
.tool{will-change:transform}

/* respeito a quem pediu menos movimento */
@media (prefers-reduced-motion:reduce){
  .calc-page::before{animation:none}
  .fx-on .fx-reveal{opacity:1 !important}
  .k__onda,.lcd__sweep,.hp__brilho{display:none}
  .pad.armado-f [data-k="f"],.pad.armado-g [data-k="g"]{animation:none}
  .hp{transform:none !important}
}

/* ===================================================================
   Legenda narrada — banda fixa no rodapé. Fica dentro de #calcShell
   de propósito: assim continua visível em tela cheia.
=================================================================== */
.calc-page{padding-bottom:150px}

.legenda{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:linear-gradient(180deg,rgba(9,15,26,.80),rgba(9,15,26,.96));
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border-top:1px solid rgba(198,161,91,.3);
  box-shadow:0 -20px 50px -30px rgba(0,0,0,.9);
}
.legenda__fio{
  position:absolute;top:-1px;left:0;right:0;height:2px;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  pointer-events:none;
}
.legenda__inner{
  display:flex;align-items:center;gap:24px;min-height:96px;padding:18px 24px;
}

.legenda__tag{
  flex:0 0 auto;align-self:center;
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-100);background:rgba(198,161,91,.14);
  border:1px solid rgba(198,161,91,.4);border-radius:999px;padding:7px 14px;white-space:nowrap;
}
.legenda__txt{
  flex:1 1 auto;margin:0;
  font-family:var(--serif);font-weight:400;line-height:1.25;color:#f2f5fa;
  font-size:clamp(1.05rem,1.85vw,1.62rem);text-wrap:balance;
}
.legenda__txt b{
  color:var(--gold);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.legenda__sub{
  flex:0 1 34ch;margin:0;text-align:right;
  font-size:.86rem;font-weight:300;line-height:1.45;color:#9aa4ba;text-wrap:pretty;
}
.legenda__sub:empty{display:none}

/* tom da mensagem */
.legenda[data-tom="res"]{border-top-color:var(--gold)}
.legenda[data-tom="res"] .legenda__tag{
  color:#101828;background:var(--gold);border-color:var(--gold);
}
.legenda[data-tom="erro"]{border-top-color:#a8462f}
.legenda[data-tom="erro"] .legenda__tag{
  color:#ffd9cf;background:rgba(168,70,47,.22);border-color:rgba(168,70,47,.65);
}
.legenda[data-tom="erro"] .legenda__txt b{color:#e79b86}
.legenda[data-tom="entrada"] .legenda__tag{
  color:#9aa4ba;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
}
.legenda[data-tom="entrada"] .legenda__txt{font-size:clamp(1rem,1.5vw,1.3rem);color:#c9d2e2}

/* em tela cheia a banda acompanha a máquina */
.calc-shell:fullscreen .legenda{position:fixed}

@media (max-width:860px){
  .calc-page{padding-bottom:190px}
  .legenda__inner{flex-wrap:wrap;gap:10px 14px;padding:14px 20px;min-height:0}
  .legenda__txt{flex:1 1 100%;order:2}
  .legenda__sub{flex:1 1 100%;order:3;text-align:left}
  .legenda__tag{order:1}
}

@media (prefers-reduced-motion:reduce){
  .legenda__fio{display:none}
}

/* ===================================================================
   Painel de impacto — aparece quando sai um resultado.
=================================================================== */
.impacto{
  margin:0 0 40px;padding:30px 32px 26px;border-radius:var(--radius);
  background:
    radial-gradient(120% 120% at 12% 0%,rgba(198,161,91,.10),transparent 58%),
    rgba(255,255,255,.045);
  border:1px solid rgba(198,161,91,.28);
  box-shadow:0 26px 60px -40px rgba(0,0,0,.9);
}
.impacto[hidden]{display:none}

.impacto__tag{
  margin:0 0 10px;font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-300);
}
.impacto__valor{
  margin:0 0 10px;font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(2.1rem,5.2vw,3.6rem);color:var(--white);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.impacto__linha{
  margin:0 0 22px;max-width:70ch;font-weight:300;font-size:1rem;line-height:1.5;color:#c3cadb;
}
.impacto__linha b{color:var(--gold-100);font-weight:600;font-variant-numeric:tabular-nums}

/* barra de composição */
.impacto__barra{display:flex;gap:6px;margin:0 0 18px;min-height:82px}
.imp-seg{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:14px 16px;border-radius:10px;overflow:hidden;min-width:0;
  transform-origin:left center;
}
.imp-seg--base{
  background:linear-gradient(180deg,rgba(120,150,190,.30),rgba(120,150,190,.14));
  border:1px solid rgba(120,150,190,.42);
}
.imp-seg--juros{
  background:linear-gradient(180deg,rgba(198,161,91,.34),rgba(198,161,91,.15));
  border:1px solid rgba(198,161,91,.55);
}
.imp-seg__rot{
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#c9d2e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.imp-seg--juros .imp-seg__rot{color:var(--gold-100)}
.imp-seg__val{
  font-size:1.02rem;font-weight:700;color:var(--white);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.imp-seg__pct{font-size:.78rem;color:#9aa4ba}
.imp-seg--juros .imp-seg__pct{color:var(--gold-300)}

/* o marco */
.impacto__marco{
  margin:0 0 22px;padding:13px 16px;border-radius:10px;
  border-left:3px solid var(--gold);background:rgba(198,161,91,.10);
  font-size:.95rem;font-weight:300;line-height:1.5;color:#dde3ee;
}
.impacto__marco b{color:var(--gold);font-weight:700}
.impacto__marco[hidden]{display:none}

/* gráfico */
.impacto__grafico{margin:0 0 16px}
.impacto__grafico svg{width:100%;height:clamp(170px,26vw,260px);display:block;overflow:visible}
.imp-area{transform-origin:bottom center}
.imp-linha{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.imp-eixo line{stroke:rgba(255,255,255,.10);stroke-width:1;vector-effect:non-scaling-stroke}
.imp-eixo text,.imp-eixo-x{
  fill:#7f8aa1;font-family:var(--sans);font-size:15px;font-weight:400;
}
.imp-marco line{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.imp-marco circle{fill:var(--gold);stroke:var(--navy-900);stroke-width:2}

.impacto__grafico figcaption{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:12px;
  font-size:.8rem;color:#9aa4ba;
}
#impChaves span{display:inline-flex;align-items:center;gap:7px}
.chave{width:14px;height:8px;border-radius:3px;display:inline-block;flex:0 0 auto}
.chave--total{background:rgba(198,161,91,.75)}
.chave--base{background:rgba(120,150,190,.7)}
.chave--marco{background:var(--gold);width:8px;height:8px;border-radius:50%}

.impacto__aviso{
  margin:0;font-size:.76rem;font-weight:300;line-height:1.55;color:#7f8aa1;max-width:80ch;
}

@media (max-width:720px){
  .impacto{padding:22px 20px}
  .impacto__barra{flex-direction:column;min-height:0}
  .imp-seg{transform-origin:center left}
  .impacto__grafico svg{height:190px}
}