/* 01 · calculadora (S1). A do v9 (mesma fórmula, painel com recorte chanfrado .notch),
   com o resultado em números que giram como caça-níquel (hodômetro do v7.1) e o bloco
   "E o que não cabe na conta". Campos acompanham o tom; o painel é bloco de cor fixa. */

#calculadora .ca-head { max-width: 46rem; margin-bottom: clamp(36px, 5vw, 60px); }

#calculadora .ca-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 48px); align-items: start; }

/* campos */
#calculadora .ca-in { border-top: 1px solid var(--line); }
#calculadora .ca-field { display: grid; gap: 4px; padding: 16px 0 8px; border-bottom: 1px solid var(--line); }
#calculadora .ca-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; font-size: .97rem; line-height: 1.4; color: var(--ink-2); }
#calculadora .ca-field output { flex: none; color: var(--ink); font: 500 1.2rem/1.2 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

#calculadora input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
#calculadora input[type=range]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--f, 50%), var(--line) var(--f, 50%)); }
#calculadora input[type=range]::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line); }
#calculadora input[type=range]::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--ink); }
#calculadora input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -9px; background: var(--ink); border: 4px solid var(--page); outline: 1px solid var(--ink); border-radius: 4px; transition: transform .2s var(--ease-out); }
#calculadora input[type=range]::-moz-range-thumb { width: 12px; height: 12px; background: var(--ink); border: 4px solid var(--page); outline: 1px solid var(--ink); border-radius: 4px; }
#calculadora input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
#calculadora input[type=range]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }

/* painel de resultado (cor fixa, recorte chanfrado do v9) */
#calculadora .ca-out { --n: 26px; --nw: 120px; position: relative; background: var(--panel-2); color: var(--on-panel); padding: 46px clamp(20px, 3vw, 36px) 28px;
  clip-path: polygon(0 0, calc(100% - var(--nw) - var(--n)) 0, calc(100% - var(--nw)) var(--n), 100% var(--n), 100% 100%, 0 100%); }
#calculadora .ca-lead { font-size: 1.1rem; color: var(--on-panel-2); }
#calculadora .ca-val { font: 400 clamp(2.7rem, 5.4vw, 4.4rem)/1 var(--sans); letter-spacing: -.04em; margin: 12px 0 8px; color: var(--on-panel); }
#calculadora .ca-per { color: var(--on-panel-2); font-size: 1rem; }
#calculadora .ca-dl { margin: 26px 0 0; }
#calculadora .ca-dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(238, 242, 245, .09); font-size: .95rem; }
#calculadora .ca-dl dt { color: var(--on-panel-2); }
#calculadora .ca-dl dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
#calculadora .ca-x { padding: 14px 0 0; border-top: 1px solid rgba(238, 242, 245, .09); color: var(--on-panel-2); font-size: .95rem; }
#calculadora .ca-x b { color: var(--teal-hi); font-weight: 500; font-size: 1.35rem; letter-spacing: -.01em; margin-right: 4px; }
#calculadora .ca-note { margin-top: 18px; font-size: .82rem; line-height: 1.5; color: var(--on-panel-2); max-width: 40em; }

/* hodômetro (v7.1): cada dígito é uma fita de 0 a 9 que gira até o valor */
#calculadora .ca-odo { display: inline-block; white-space: nowrap; }
#calculadora .odo-v { display: inline-flex; align-items: flex-start; line-height: 1; vertical-align: baseline; letter-spacing: 0; font-variant-numeric: tabular-nums; }
#calculadora .odo-v .dg { display: inline-block; height: 1em; overflow: hidden; width: .62em; text-align: center; }
#calculadora .odo-v .ch { display: inline-block; height: 1em; line-height: 1; white-space: pre; }
#calculadora .odo-v .strip { display: flex; flex-direction: column; transition: transform var(--odo-d, 1.25s) var(--ease-out); }
#calculadora .odo-v .strip span { display: block; height: 1em; line-height: 1; }
#calculadora .ca-odo.reset .strip { transition: none; }
#calculadora .ca-val .odo-v .dg { width: .6em; }

/* E o que não cabe na conta */
#calculadora .ca-more { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(18px, 4vw, 64px); margin-top: clamp(56px, 8vw, 104px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
#calculadora .ca-more-t { font: 500 clamp(1.7rem, 3.2vw, 2.7rem)/1.06 var(--sans); letter-spacing: -.03em; color: var(--ink); }
#calculadora .ca-more-b p { font-size: clamp(1.08rem, 1.55vw, 1.32rem); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
#calculadora .ca-more-b strong { color: var(--ink); font-weight: 500; }
#calculadora .ca-more-b .btn { margin-top: 28px; }

@media (max-width: 900px) {
  #calculadora .ca-grid, #calculadora .ca-more { grid-template-columns: minmax(0, 1fr); }
  #calculadora .ca-out { --nw: 92px; --n: 22px; }
}
@media (max-width: 420px) {
  #calculadora .ca-field label { gap: 12px; font-size: .93rem; }
  #calculadora .ca-dl div { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  #calculadora .odo-v .strip { transition: none; }
  #calculadora input[type=range]::-webkit-slider-thumb { transition: none; }
}