/* ==========================================================================
   LAVYTIER — Reembolso do plano anual
   Simulador ligado à Política Comercial (itens 2.9.2, 3.9.2 e 4.4); fora do
   menu e do rodapé, noindex. Nasceu interna e virou versão cliente em 30/09. Aprovada em 30/09/2026: multa
   de 10% sobre o saldo, meses usados pelo preço mensal. Uma coluna de
   leitura; a simulação é a única peça com moldura. Prefixo .rmb-
   ========================================================================== */

.rmb-root, .rmb-root * { box-sizing: border-box; }
.rmb-root {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
}
.rmb-root :where(p, h1, h2, h3, ul, ol) { margin: 0; }
.rmb-pg {
  max-width: 808px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: calc(var(--nav-h) + 72px) 120px;
  display: grid;
  gap: 72px;
}

.rmb-mono { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.rmb-ficha { display: flex; align-items: center; gap: 10px; }
.rmb-ficha::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: none; }

.rmb-root h1 { margin-top: 20px; font-size: clamp(36px, 6vw, 60px); line-height: 1.02; font-weight: 500; letter-spacing: -.045em; text-wrap: balance; }
.rmb-root h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.15; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
.rmb-lead { margin-top: 20px !important; font-size: 18px; color: var(--slate); max-width: 60ch; text-wrap: pretty; }
.rmb-lead b { color: var(--ink); font-weight: 500; }
.rmb-volta {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 18px 0 14px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
  font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: box-shadow .35s var(--ease);
}
.rmb-volta svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.rmb-pe-link { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(0, 0, 0, .3); }
@media (hover: hover) {
  .rmb-volta:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .rmb-volta:hover svg { transform: translateX(-3px); }
  .rmb-pe-link:hover { text-decoration-color: var(--ink); }
}
.rmb-root :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rmb-meta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 16px; border-top: 1px solid var(--ink); }

.rmb-sec { display: grid; gap: 24px; }
.rmb-cab { display: grid; gap: 10px; }

/* as duas saídas */
.rmb-aviso { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-block: 1px solid var(--cloud); }
.rmb-aviso .rmb-mono { flex: none; min-width: 112px; }
.rmb-aviso p { min-width: 0; }
.rmb-saidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rmb-saida { border: 1px solid var(--cloud); border-radius: var(--r-3); padding: 24px; display: grid; gap: 10px; align-content: start; }
.rmb-saida h3 { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.rmb-saida p { color: var(--slate); font-size: 15px; }
.rmb-saida .rmb-mono { color: var(--ink); }

/* a conta */
.rmb-conta { padding: 0; list-style: none; font-family: var(--mono); font-size: 13.5px; border-top: 1px solid var(--cloud); }
.rmb-conta li { display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--cloud); }
.rmb-conta li span:first-child { color: var(--slate); }
.rmb-conta li.is-tot { font-weight: 500; }
.rmb-conta small { color: var(--slate); font-size: 12px; }

/* simulação */
.rmb-sim { border: 1px solid var(--cloud); border-radius: var(--r-4); padding: clamp(20px, 4vw, 32px); display: grid; gap: 24px; }
.rmb-ctl { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.rmb-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--cloud); }
.rmb-seg input { position: absolute; opacity: 0; pointer-events: none; }
.rmb-seg label { padding: 9px 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; line-height: 1.3; cursor: pointer; color: var(--slate); transition: background-color .25s, color .25s; }
.rmb-seg input:checked + label { background: var(--ink); color: var(--paper); }
.rmb-seg input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.rmb-mes { display: flex; align-items: center; gap: 14px; flex: 1 1 240px; min-width: 0; }
.rmb-mes label { white-space: nowrap; }
.rmb-mes input { flex: 1; min-width: 0; height: 32px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.rmb-mes output { font-family: var(--mono); font-size: 13px; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }

.rmb-barra { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; background: var(--cloud); }
.rmb-barra i { display: block; height: 100%; transition: width .45s var(--ease); }
.rmb-barra .is-u { background: var(--ink); }
.rmb-barra .is-m { background: var(--slate); }
.rmb-legenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rmb-legenda > div { display: grid; gap: 4px; min-width: 0; }
.rmb-legenda .rmb-mono { display: flex; align-items: center; gap: 8px; }
.rmb-legenda .rmb-mono::before { content: ''; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.rmb-legenda .is-u .rmb-mono::before { background: var(--ink); }
.rmb-legenda .is-m .rmb-mono::before { background: var(--slate); }
.rmb-legenda .is-v .rmb-mono::before { background: var(--cloud); box-shadow: inset 0 0 0 1px var(--slate); }
.rmb-legenda b { font-size: clamp(20px, 3.4vw, 28px); font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rmb-legenda small { color: var(--slate); font-size: 13px; }
.rmb-resumo { padding-top: 16px; border-top: 1px solid var(--cloud); color: var(--slate); font-size: 15px; }
.rmb-resumo b { color: var(--ink); font-weight: 500; }

/* tabela */
.rmb-tab { overflow-x: auto; }
.rmb-tab table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; min-width: 560px; }
.rmb-tab th { text-align: right; font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); padding: 0 0 10px 12px; border-bottom: 1px solid var(--ink); }
.rmb-tab th:first-child, .rmb-tab td:first-child { text-align: left; padding-left: 0; }
.rmb-tab td { text-align: right; padding: 14px 0 14px 12px; border-bottom: 1px solid var(--cloud); color: var(--ink); }
.rmb-tab td:first-child, .rmb-tab td.is-volta { font-weight: 500; }

/* regras */
.rmb-regras { padding: 0; list-style: none; display: grid; }
.rmb-regras li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--cloud); }
.rmb-regras li:first-child { border-top: 1px solid var(--cloud); }
.rmb-regras b { font-weight: 500; }
.rmb-regras p { color: var(--slate); }


.rmb-pe { padding-top: 20px; border-top: 1px solid var(--cloud); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

@media (max-width: 640px) {
  .rmb-pg { gap: 56px; padding-block: calc(var(--nav-h) + 40px) 88px; }
  .rmb-saidas { grid-template-columns: minmax(0, 1fr); }
  .rmb-regras li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rmb-aviso { flex-direction: column; gap: 6px; }
  .rmb-legenda { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rmb-legenda > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .rmb-legenda small { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .rmb-barra i, .rmb-seg label { transition: none; }
}