/* tela-resultado-v2.css - a tela de resultado nova (PROJETO-TELA-RESULTADO-v4.md; textos de COPY-TELA-RESULTADO-NOVA-v1.md, aprovados em 07/11/2026).
 * Vem depois de tela-resultado-v1.css, que continua valendo para o MEI, o erro de cálculo e o caso do especialista, e para o aviso de pergunta pulada.
 * O problema apontado pelo Rogério na tela de antes: números sem destaque e muito texto pequeno. Aqui: o número principal tem de 48 a 64px no celular (de 72 a 96px no computador),
 * nenhum texto abaixo de 16px no celular, uma coluna no celular e duas no computador, e no máximo três blocos antes do primeiro botão (a ordem vem de js/resultado-nova.js).
 * Fundo azul-marinho liso e cartões de fundo opaco: nenhum texto fica por cima de brilho ou de desenho. Sem white-space: nowrap. Letra DM Sans (nenhuma fonte com serifa).
 * Celular = até 559px. Espaços na grade de 8px: 16px entre blocos, 14px de preenchimento no cartão. */

.rn { position: relative; background-color: var(--marinho); color: #ffffff; min-height: 100vh; min-height: 100svh; font-family: var(--sans); }
.rn-in { width: 100%; max-width: 1152px; margin: 0 auto; padding: 88px 16px 32px; }
.rn-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rn-bloco, .rn .res-aviso { min-width: 0; background-color: #10244d; border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; padding: 14px; max-width: none; }
.rn :focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ------------------------------------------------------------------ textos */
.rn-titulo { font-family: var(--sans); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #ffffff; margin: 0 0 8px; overflow-wrap: break-word; }
.rn-titulo:focus { outline: none; }   /* o foco vai para o título para o leitor de tela; o contorno não aparece quando é o programa que põe o foco */
.rn-apoio { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--bege); margin: 0 0 16px; max-width: 60ch; overflow-wrap: break-word; }
.rn-subtitulo { font-family: var(--sans); font-size: 18px; font-weight: 700; line-height: 1.3; color: #ffffff; margin: 0 0 12px; overflow-wrap: break-word; }
.rn-texto { font-size: 16px; font-weight: 400; line-height: 1.5; color: #ffffff; margin: 12px 0 0; max-width: 60ch; overflow-wrap: break-word; }
.rn-subtitulo + .rn-texto { margin-top: 0; }
.rn-rotulo { font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--bege); margin-top: 8px; overflow-wrap: break-word; }
.rn-aprox, .rn-aprox-linha { font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--bege); letter-spacing: 0; }
.rn-aprox { margin: 0 0 4px; }
.rn-ressalva { font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--bege); margin: 16px 0 0; max-width: 60ch; overflow-wrap: break-word; }

/* ------------------------------------------------------------------ bloco 1: os números em destaque */
/* O bloco 1 não tem cartão: assim o número de 48px ocupa os 320px da coluna do celular (num cartão sobrariam 290px e "R$380.000,00" passaria da borda). */
.rn-bloco.rn-b1 { background-color: transparent; border: 0; border-radius: 0; padding: 0; }
.rn-valores { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rn-secundarios { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rn-num { font-family: var(--sans); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ouro-claro); font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.rn-num-5 { font-size: clamp(48px, 13.6vw, 64px); letter-spacing: -0.045em; }   /* 48px em 352 de largura (R$999.900,00 cabe nos 320px úteis) e 64px a partir de 470px */
.rn-num-2 { font-size: clamp(32px, 9vw, 40px); }
.rn-unidade { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: 0; margin-top: 6px; color: var(--ouro-claro); overflow-wrap: break-word; }
.rn-num-5 .rn-unidade { font-size: 22px; }

/* ------------------------------------------------------------------ bloco 2: as duas barras */
.rn-barra-linha { margin: 0 0 16px; }
.rn-rotulo-barra { font-size: 16px; font-weight: 700; line-height: 1.3; color: #ffffff; }
.rn-valor-barra { margin-top: 4px; line-height: 1.25; }
.rn-din { font-size: 20px; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.rn-din-grande { font-size: 28px; color: var(--ouro-claro); }
.rn .res-barra { height: 14px; margin-top: 8px; border-radius: 7px; }
.rn .res-barra i { border-radius: 7px; }
.rn-b2 .rn-texto { margin-top: 0; }

/* ------------------------------------------------------------------ bloco 3: o raio-x */
.rn-total { margin: 12px 0 0; }
.rn-total .rn-rotulo { margin-top: 0; }
.rn-lista-titulo { font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1.3; color: #ffffff; margin: 16px 0 4px; }
.rn-impostos, .rn-lista, .rn-cartoes { list-style: none; margin: 0; padding: 0; }
.rn-imposto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.rn-imposto-nome { font-size: 16px; line-height: 1.35; color: var(--bege); overflow-wrap: anywhere; }
.rn-imposto .rn-din { font-size: 18px; }

/* ------------------------------------------------------------------ bloco 4: as oportunidades, com o nome escondido */
.rn-por-cima { font-weight: 700; margin: 0 0 16px; }
.rn-cartoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rn-cartao { background-color: var(--marinho); border: 1px dashed rgba(218, 168, 83, .8); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.rn-cartao-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rn-cartao-titulo { font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1.3; color: #ffffff; margin: 0; }
.rn-cartao-valor { font-size: 16px; line-height: 1.35; color: var(--bege); overflow-wrap: break-word; }
.rn-cartao-valor .rn-din { color: var(--ouro-claro); font-size: 22px; line-height: 1.3; }
/* "de economia por ano" ocupa a linha de baixo: o valor e a frase nunca dividem a mesma linha, então nenhum texto toca o outro (352px) */
.rn-cartao-ano { display: block; margin-top: 2px; line-height: 1.35; }
.rn-cartao-nome { font-size: 16px; line-height: 1.4; color: var(--bege); margin: 8px 0 0; }
/* O cadeado é só um desenho de 18px de largura, ao lado do título (nunca por baixo de texto) */
.rn-cadeado { position: relative; flex: 0 0 18px; width: 18px; height: 14px; margin-top: 9px; border-radius: 3px; background-color: var(--ouro-claro); }
.rn-cadeado::before { content: ""; position: absolute; left: 3px; top: -9px; width: 12px; height: 10px; box-sizing: border-box; border: 2px solid var(--ouro-claro); border-bottom: 0; border-radius: 7px 7px 0 0; }

/* ------------------------------------------------------------------ bloco 6: o que a consultoria entrega */
.rn-item { position: relative; padding: 0 0 12px 24px; font-size: 16px; line-height: 1.5; color: #ffffff; overflow-wrap: break-word; }
.rn-item:last-child { padding-bottom: 0; }
.rn-item::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--ouro); }

/* ------------------------------------------------------------------ botões */
.rn-cta { border-color: var(--ouro); border-width: 2px; }
.rn-cta-frase { font-size: 18px; font-weight: 700; line-height: 1.35; color: #ffffff; margin: 0 0 12px; max-width: 60ch; overflow-wrap: break-word; }
.rn .rn-botao { width: 100%; min-height: 56px; font-size: 16px; font-weight: 700; line-height: 1.25; padding: 10px 16px; }
.rn .btn-ouro { background-color: var(--ouro); color: var(--marinho); border-color: var(--ouro-borda); }
.rn .btn-ouro:hover { background-color: var(--ouro-claro); }
.rn .btn-fantasma { background: transparent; color: #ffffff; border: 2px solid #ffffff; }
.rn .btn-fantasma:hover { color: var(--ouro-claro); border-color: var(--ouro-claro); }
.rn-salvar .rn-texto { margin-top: 0; margin-bottom: 12px; }
.rn .res-aviso .res-aviso-botao { width: 100%; min-width: 0; font-size: 16px; }

/* ------------------------------------------------------------------ o escritório */
.rn-escritorio { background: transparent; border: 0; padding: 0 0 8px; }
.rn-escritorio-linha { font-size: 16px; line-height: 1.5; color: var(--bege); max-width: 60ch; overflow-wrap: break-word; }

/* ------------------------------------------------------------------ tablet e celular deitado */
@media (min-width: 560px) {
  .rn-in { padding: 112px 24px 56px; }
  .rn-bloco, .rn .res-aviso { padding: 20px; }
  .rn-titulo { font-size: 28px; }
  .rn-num-5 { font-size: 64px; letter-spacing: -0.03em; }
  .rn-num-2 { font-size: 40px; }
  .rn-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn .rn-botao { width: auto; min-width: 320px; max-width: 460px; }
  .rn .res-aviso .res-aviso-botao { width: auto; min-width: 320px; }
}

/* ------------------------------------------------------------------ computador: duas colunas */
@media (min-width: 900px) {
  .rn-in { padding-top: 120px; }
  .rn-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .rn-cheio { grid-column: 1 / -1; }
  .rn-titulo { font-size: 36px; }
  .rn-apoio, .rn-texto, .rn-rotulo, .rn-item, .rn-cartao-valor, .rn-cartao-nome, .rn-imposto-nome, .rn-escritorio-linha { font-size: 18px; }
  .rn-aprox, .rn-aprox-linha { font-size: 18px; }
  .rn-subtitulo { font-size: 22px; }
  .rn-valores { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: end; }
  .rn-num-5 { font-size: 80px; }
  .rn-num-2 { font-size: 48px; }
  .rn-din { font-size: 22px; }
  .rn-din-grande { font-size: 32px; }
  .rn-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .rn-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
  .rn-cta-frase { margin: 0; font-size: 20px; }
  .rn .rn-botao { max-width: 420px; }
}
@media (min-width: 1500px) {
  .rn-num-5 { font-size: 96px; }
  .rn-num-2 { font-size: 56px; }
}

/* ------------------------------------------------------------------ 08/11/2026: aviso de atividade diferente (PROJETO-COMPARACAO-ATIVIDADE-v2.md, seção 1)
 * Uma frase de 16px (18px no computador) em cartão de fundo opaco com filete dourado à esquerda, logo abaixo da frase de apoio do resultado.
 * Nenhum texto fica em cima de desenho: o fundo do cartão é liso. Vale também para o MEI, o cálculo que não respondeu e o caso do especialista (tela-resultado-v1.css). */
.aviso-atividade { margin: 0 0 16px; padding: 12px 14px; background-color: #10244d; border: 1px solid rgba(255, 255, 255, .18); border-left: 4px solid var(--ouro); border-radius: 12px; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--bege); max-width: 60ch; overflow-wrap: break-word; }
@media (min-width: 900px) { .aviso-atividade { font-size: 18px; } }

/* ------------------------------------------------------------------ 08/11/2026: método 30 (janelas de 12 meses)
 * Situação "b": gráfico de barras na horizontal, um grupo por janela (o ano, ou os 12 meses que a barra soma). Em cada grupo, "Hoje" e "Com a consultoria".
 * Nenhum texto fica em cima de barra: o nome e o valor ficam numa linha própria (quebram para a linha de baixo quando não cabem) e a barra vem logo depois, sozinha.
 * Aviso do mês de início: o cartão de aviso que já existe (.aviso-atividade), com margem de baixo. Texto 4 (cinco anos incompletos): só o texto, sem botão. */
.rn-gr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rn-gr-janela { min-width: 0; }
.rn-gr-rotulo { font-size: 16px; font-weight: 700; line-height: 1.3; color: #ffffff; margin: 0 0 8px; overflow-wrap: break-word; }
.rn-gr-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin: 0 0 8px; min-width: 0; }
.rn-gr-nome { font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--bege); overflow-wrap: break-word; }
.rn-gr-valor { font-size: 16px; line-height: 1.3; color: #ffffff; overflow-wrap: break-word; min-width: 0; }
.rn-gr-valor .rn-din { font-size: 18px; }
.rn-gr-linha .res-barra { flex: 0 0 100%; height: 10px; margin-top: 4px; border-radius: 5px; }
.rn-gr-linha .res-barra i { border-radius: 5px; }
.rn-grafico .rn-texto { margin-top: 16px; }
.rn-aviso-mes { margin: 0 0 16px; }
.rn-alivio .rn-texto { margin-top: 0; }
.rn-incompleto-texto { font-size: 16px; color: #ffffff; margin: 0; }
.rn-incompleto-texto:focus { outline: none; }
@media (min-width: 900px) {
  .rn-gr-nome, .rn-gr-valor, .rn-gr-rotulo { font-size: 18px; }
  .rn-gr-valor .rn-din { font-size: 20px; }
  .rn-incompleto-texto { font-size: 18px; }
}

/* ================================================================== 09/11/2026: página final nova (BRIEFING-PAGINA-FINAL-v1.md)
 * Paleta do briefing: fundo #081426, superfícies #11233F, cartão principal #F7F9FC com texto #10213A, dourado #D9AD56, botão #E6BD6A com texto #081426,
 * verde #087F5B sobre #E8F6EF só para a economia, âmbar #F0BE62 sobre #302719 só para a divergência, bordas em branco com 12%.
 * Uma coluna de até 1120px; 40px entre seções no computador e 28px no celular; cartão principal com raio de 24px; os outros com 16px. Sem roxo.
 * Nenhum white-space: nowrap. Movimento: entrada do cartão de 350ms (uma vez), barras de 500ms, botão de 150ms; nada disso roda com "reduzir movimento". */
.rn { background-color: #081426; color: #F8FAFC; }
.rn-in { max-width: 1120px; padding: 88px 16px 40px; }
.rn-com-barra .rn-in { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
.rn-grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.rn-bloco, .rn .res-aviso { background-color: #11233F; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; }
.rn-bloco.rn-b1 { background-color: transparent; border: 0; border-radius: 0; padding: 0; }

/* identificação, título e frase de contexto */
.rn-ident { font-size: 16px; line-height: 1.4; color: #B8C5D6; margin: 0 0 8px; overflow-wrap: anywhere; }
.rn-topo .rn-titulo { font-size: 30px; line-height: 1.15; margin: 0 0 12px; }
.rn-topo .rn-apoio { color: #B8C5D6; margin: 0; max-width: 62ch; }
.rn-subtitulo { color: #F8FAFC; }
.rn-texto { color: #F8FAFC; }

/* cartão principal claro */
.rn-bloco.rn-principal { background-color: #F7F9FC; color: #10213A; border: 0; border-radius: 24px; padding: 20px 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); animation: rn-entra .35s ease-out both; }
@keyframes rn-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rn-cartao-esq, .rn-cartao-dir { min-width: 0; }
.rn-cartao-dir { margin-top: 20px; }
.rn-etiqueta { display: inline-block; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; padding: 4px 12px; border-radius: 999px; margin: 0 0 12px; overflow-wrap: break-word; }
.rn-etiqueta-verde { background-color: #E8F6EF; color: #087F5B; }
.rn-etiqueta-neutra { background-color: rgba(16, 33, 58, .08); color: #10213A; }
.rn-principal .rn-aprox, .rn-principal .rn-aprox-linha, .rn-principal .rn-rotulo { color: #10213A; opacity: .78; font-size: 16px; }
.rn-principal .rn-aprox { margin: 0 0 2px; }
.rn-principal .rn-num-5 { font-size: clamp(40px, 12vw, 48px); letter-spacing: -.03em; color: #087F5B; }
.rn-sem-economia .rn-num-5 { color: #10213A; }
.rn-principal .rn-unidade { color: inherit; font-size: 18px; margin-top: 4px; }
.rn-por-ano, .rn-complemento { font-size: 18px; font-weight: 700; line-height: 1.3; color: #10213A; margin: 4px 0 0; overflow-wrap: break-word; }
.rn-complemento { font-weight: 400; font-size: 16px; }
.rn-linha-mes, .rn-cinco { font-size: 16px; line-height: 1.45; color: #10213A; margin: 8px 0 0; overflow-wrap: break-word; }
.rn-principal .rn-din { color: #10213A; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rn-cinco-rotulo { color: #10213A; }
.rn-principal .rn-ressalva { color: #10213A; opacity: .8; margin: 12px 0 0; font-size: 16px; }
.rn-comparados { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rn-comparado { min-width: 0; background-color: rgba(16, 33, 58, .05); border: 1px solid rgba(16, 33, 58, .1); border-radius: 16px; padding: 14px; }
.rn-comp-rotulo { font-size: 16px; font-weight: 700; line-height: 1.3; color: #10213A; }
.rn-comp-valor { margin-top: 4px; line-height: 1.3; overflow-wrap: break-word; }
.rn-comp-valor .rn-din { font-size: 22px; }
.rn-comp-ano { font-size: 16px; color: #10213A; opacity: .78; }
.rn-principal .res-barra { height: 12px; margin-top: 10px; border-radius: 6px; background: rgba(16, 33, 58, .12); }
.rn-principal .res-barra i { border-radius: 6px; transition: transform .5s ease-out; }
.rn-principal .res-barra.ficar i { background: #7F93AD; }
.rn-principal .res-barra.com i { background: #087F5B; }
.rn-reducao { font-size: 16px; font-weight: 700; line-height: 1.4; color: #087F5B; margin: 12px 0 0; overflow-wrap: break-word; }
.rn-indicadores { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.rn-indicador { background-color: rgba(16, 33, 58, .05); border: 1px solid rgba(16, 33, 58, .1); border-radius: 16px; padding: 14px; }
.rn-cartao-acao { margin-top: 20px; }
.rn-so-acao .rn-cartao-acao { margin-top: 0; }
.rn-separador { border: 0; border-top: 1px solid rgba(16, 33, 58, .14); margin: 0 0 16px; }
.rn-frase-cartao { font-size: 18px; font-weight: 700; line-height: 1.4; color: #10213A; margin: 0 0 12px; overflow-wrap: break-word; }
.rn-micro { font-size: 16px; line-height: 1.45; color: #10213A; opacity: .8; margin: 10px 0 0; overflow-wrap: break-word; }
.rn-principal :focus-visible { outline: 3px solid #10213A; outline-offset: 3px; }

/* botão principal: dourado do briefing; 150ms; sobe até 2px */
.rn .btn.btn-ouro.rn-botao { background-color: #E6BD6A; color: #081426; border: 1px solid #D9AD56; border-radius: 12px; min-height: 56px; width: 100%; max-width: none; font-weight: 700; transition: background-color .15s ease, transform .15s ease; }
.rn .btn.btn-ouro.rn-botao:hover { background-color: #EDC97F; transform: translateY(-2px); }
.rn .btn.btn-ouro.rn-botao:focus-visible { outline: 3px solid #F8FAFC; outline-offset: 3px; }
.rn-principal .btn.btn-ouro.rn-botao:focus-visible { outline-color: #10213A; }

/* cartões da divergência (âmbar discreto) e da nota do mês de início */
.rn-bloco.rn-divergencia { display: flex; gap: 12px; align-items: flex-start; background-color: #302719; border: 1px solid rgba(240, 190, 98, .45); padding: 16px; }
.rn-info { flex: 0 0 24px; width: 24px; height: 24px; border: 2px solid #F0BE62; border-radius: 50%; color: #F0BE62; font-size: 16px; font-weight: 700; line-height: 20px; text-align: center; font-family: var(--sans); }
.rn-div-corpo { min-width: 0; flex: 1 1 auto; }
.rn-div-titulo { font-family: var(--sans); font-size: 18px; font-weight: 700; line-height: 1.3; color: #F0BE62; margin: 0 0 8px; overflow-wrap: break-word; }
.rn-div-linha, .rn-div-fecho { font-size: 16px; line-height: 1.5; color: #F8FAFC; margin: 0 0 4px; overflow-wrap: anywhere; }
.rn-div-fecho { margin-top: 8px; color: #B8C5D6; }
.rn-bloco.rn-nota-mes { background-color: transparent; padding: 0; border: 0; }
.rn .aviso-atividade.rn-aviso-mes { background-color: #11233F; border: 1px solid rgba(255, 255, 255, .12); border-left: 4px solid #D9AD56; border-radius: 16px; color: #F8FAFC; margin: 0; max-width: none; }
.rn-incompleto-texto { color: #F8FAFC; }

/* próximo passo, conferência e blocos mantidos */
.rn-lista-conf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rn-conf-titulo { font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1.3; color: #D9AD56; margin: 0 0 4px; }
.rn-conf-texto { font-size: 16px; line-height: 1.5; color: #F8FAFC; margin: 0; overflow-wrap: break-word; }
.rn-cartao { background-color: #081426; border: 1px dashed rgba(217, 173, 86, .7); }
.rn-cartao-valor .rn-din, .rn-din-grande { color: #D9AD56; }
.rn-item::before { background-color: #D9AD56; }
.rn-grafico .res-barra { background: rgba(255, 255, 255, .12); }
.rn-gr-linha .res-barra i { transition: transform .5s ease-out; }
.rn-grafico .res-barra.ficar i { background: #8FA3BD; }
.rn-grafico .res-barra.com i { background: #087F5B; }

/* detalhes do cálculo: accordion fechado */
.rn-bloco.rn-detalhes-bloco { padding: 0; }
.rn-detalhes { min-width: 0; }
.rn-resumo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; font-size: 16px; font-weight: 700; line-height: 1.35; color: #F8FAFC; cursor: pointer; list-style: none; border-radius: 16px; overflow-wrap: break-word; }
.rn-resumo::-webkit-details-marker { display: none; }
.rn-resumo::after { content: ""; flex: 0 0 10px; width: 10px; height: 10px; border-right: 2px solid #D9AD56; border-bottom: 2px solid #D9AD56; transform: rotate(45deg); transition: transform .15s ease; }
.rn-detalhes[open] > .rn-resumo::after { transform: rotate(-135deg); }
.rn-detalhes .rn-resumo:focus-visible { outline: 3px solid #F8FAFC; outline-offset: -3px; }
.rn-det-corpo { padding: 0 16px 16px; min-width: 0; }
.rn-tabela { margin: 0; min-width: 0; }
.rn-tabela .rn-lista-titulo { color: #D9AD56; margin: 16px 0 4px; }
.rn-tab-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rn-tab-rotulo { margin: 0; font-size: 16px; line-height: 1.4; color: #B8C5D6; overflow-wrap: anywhere; }
.rn-tab-valor { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: #F8FAFC; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 60vw; }
.rn-tab-total .rn-tab-rotulo, .rn-tab-total .rn-tab-valor { color: #F8FAFC; font-weight: 700; }
.rn-det-frase { color: #B8C5D6; }

/* ações secundárias (discretas) e rodapé */
.rn-bloco.rn-salvar { display: flex; flex-wrap: wrap; gap: 8px 24px; background: transparent; border: 0; padding: 0; }
.rn .rn-acao { background: transparent; border: 0; color: #F8FAFC; font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.3; min-height: 48px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: color .15s ease; }
.rn .rn-acao:hover { color: #D9AD56; }
.rn-bloco.rn-escritorio { background: transparent; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0; padding: 20px 0 8px; }
.rn-escritorio-nome { font-size: 18px; font-weight: 700; line-height: 1.3; color: #F8FAFC; margin: 0; }
.rn-escritorio-resp { font-size: 16px; line-height: 1.4; color: #B8C5D6; margin: 4px 0 12px; overflow-wrap: break-word; }
.rn-escritorio-linha { color: #B8C5D6; margin: 0; }

/* barra fixa do celular */
.rn-barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background-color: #081426; border-top: 1px solid rgba(255, 255, 255, .12); }
.rn-barra-fixa[hidden] { display: none; }

@media (min-width: 560px) {
  .rn-in { padding: 112px 24px 56px; max-width: 1168px; }
  .rn-bloco.rn-principal { padding: 28px; }
  .rn-topo .rn-titulo { font-size: 32px; }
  .rn-comparados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn .btn.btn-ouro.rn-botao { width: auto; min-width: 320px; max-width: 460px; }
  .rn-lista-conf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .rn-in { padding-top: 104px; padding-bottom: 56px; }
  .rn-com-barra .rn-in { padding-bottom: 56px; }
  .rn-barra-fixa { display: none; }
  .rn-grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rn-topo .rn-titulo { font-size: 44px; }
  .rn-ident, .rn-div-linha, .rn-div-fecho, .rn-conf-texto, .rn-conf-titulo, .rn-tab-rotulo, .rn-tab-valor, .rn-resumo, .rn-linha-mes, .rn-cinco, .rn-micro, .rn .rn-acao, .rn-escritorio-resp { font-size: 18px; }
  .rn-bloco.rn-principal { padding: 32px 36px; }
  .rn-bloco.rn-duas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .rn-bloco.rn-duas .rn-cartao-dir { margin-top: 0; }
  .rn-bloco.rn-duas .rn-cartao-acao { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: center; margin-top: 24px; }
  .rn-bloco.rn-duas .rn-cartao-acao .rn-micro { margin: 0; }
  .rn-principal .rn-num-5 { font-size: 64px; }
  .rn-por-ano { font-size: 20px; }
  .rn-comparados { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) { .rn-principal .rn-num-5 { font-size: 72px; } }
@media (prefers-reduced-motion: reduce) {
  .rn-bloco.rn-principal { animation: none; }
  .rn .btn.btn-ouro.rn-botao, .rn .btn.btn-ouro.rn-botao:hover { transition: none; transform: none; }
  .rn-principal .res-barra i, .rn-gr-linha .res-barra i { transition: none; }
  .rn-principal .res-barra.inicio i, .rn-gr-linha .res-barra.inicio i { transform: scaleX(var(--p, 1)); }
}

/* ------------------------------------------------------------------ 11/11/2026: tela de resultado com economia (COPY-TELA-RESULTADO-v4.md)
 * Os dois valores grandes ficam um embaixo do outro em qualquer largura (o de 1 ano em verde, o de 5 anos em dourado escuro, mesmo tamanho); texto de 16px (18px no computador);
 * o gráfico por ano usa as barras horizontais da situação "b", com o valor escrito na linha de cada barra e nunca por cima dela. Nenhum nowrap. */
.rn-principal .rn-linha1, .rn-principal .rn-linha5 { margin: 0 0 2px; }
.rn-principal .rn-linha5 { margin-top: 20px; }
.rn-principal .rn-num { overflow-wrap: anywhere; }
.rn-principal .rn-v5 { color: #A97618; }   /* dourado da paleta do site (--ouro-borda), escuro o bastante para ler sobre o cartão claro */
.rn-principal .rn-por-ano-5 { color: #10213A; }
.rn-no-primeiro { font-size: 16px; line-height: 1.45; color: #10213A; margin: 2px 0 0; overflow-wrap: break-word; }
.rn-escritorio-conta { font-size: 16px; line-height: 1.5; color: #B8C5D6; margin: 12px 0 0; overflow-wrap: break-word; }
.rn-grafico-anos .rn-gr-valor .rn-din { color: #F8FAFC; }
.rn-d2 .rn-texto + .rn-texto { margin-top: 12px; }
@media (min-width: 900px) {
  .rn-no-primeiro, .rn-escritorio-conta { font-size: 18px; }
}