/* ============================================================================
   NEURAH — app · identidade OFICIAL da marca: dourado sobre papel.
   Paleta amostrada do logotipo que a Roberta enviou em 03/09/2026 (cérebro e
   coração em mãos, sob o infinito). Ver site/marca/ e o estudo de 2026-09-03.
   ============================================================================ */

:root {
  --bg:        #fbf8f1;
  --bg-2:      #f4eee1;
  --surf:      #ffffff;
  --surf-2:    #fdfbf6;
  --linha:     rgba(84, 66, 26, .10);
  --linha-2:   rgba(84, 66, 26, .18);

  --fg:        #2a231a;
  --fg-body:   #5b5040;
  --fg-muted:  #948873;
  --numeral:   #8a6a29;   /* era #cabf9f = 1,73:1 sobre o papel — reprovava em
                             qualquer tamanho. Agora 4,74:1. Correção de 22/09/2026. */

  /* dourado da marca — amostrado do logotipo */
  --ouro:       #a8823a;
  --ouro-vivo:  #c5a669;
  --ouro-fundo: #6f591c;
  --ouro-glow:  rgba(168, 130, 58, .30);
  --ouro-pale:  #f0e5c8;
  --sobre-ouro: #fffdf6;
  --ouro-grad:  linear-gradient(135deg, #c5a669 0%, #a8823a 45%, #8a6a29 100%);

  --ok:      #2e6b4f;  --ok-suave: #9dbfa2;  --ok-glow: rgba(46, 107, 79, .22);
  --warn:    #b8822f;  --warn-suave:#e0a458;
  --stop:    #c2452c;

  /* compat com componentes svg */
  --brand: var(--ouro); --brand-strong: var(--ouro-fundo);
  --rule: var(--linha); --bg-soft: var(--bg-2); --bg-raised: var(--surf);
  --hairline-strong: var(--linha-2); --focus: var(--ouro);
  --border: 1px solid var(--linha);

  --font-display: "Fraunces", Georgia, serif;
  --font-text:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --t-xs: .72rem; --t-sm: .875rem; --t-base: 1rem; --t-md: 1.125rem;
  --t-lg: 1.4rem; --t-xl: 1.85rem; --t-2xl: 2.5rem; --t-3xl: 3.2rem;
  --lh-snug: 1.18; --lh-normal: 1.55;
  --tr-tight: -.024em; --tr-wide: .12em;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --alvo-min: 48px;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  --sombra-1: 0 2px 6px rgba(122, 76, 40, .06), 0 8px 22px -8px rgba(122, 76, 40, .12);
  --sombra-2: 0 4px 12px rgba(122, 76, 40, .08), 0 18px 44px -14px rgba(122, 76, 40, .22);
  --ease: cubic-bezier(.22,.61,.25,1);
  --mola: cubic-bezier(.34,1.5,.5,1);
  --dur-1: 140ms; --dur-2: 280ms; --dur-3: 560ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; color-scheme: only light; }
/* Blindagem: o app é claro em qualquer preferência do sistema. Reafirma com a
   MESMA especificidade do bloco escuro de tokens.css, caso ele vaze para cá. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) , :root:not([data-tema="claro"]) {
    --fg: #2a231a; --fg-body: #5b5040; --fg-muted: #948873; --numeral: #cabf9f;
    --bg: #fbf8f1; --bg-soft: #f4eee1; --bg-raised: #ffffff;
    --brand: #a8823a; --brand-strong: #6f591c;
    --rule: rgba(84,66,26,.10); --hairline-strong: rgba(84,66,26,.18);
    --ok: #2e6b4f; --warn: #b8822f; --stop: #c2452c; --focus: #a8823a;
  }
}
body {
  margin: 0; font-family: var(--font-text); font-size: var(--t-base);
  line-height: var(--lh-normal); color: var(--fg-body);
  background: var(--bg); -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none; min-height: 100dvh;
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }

/* atmosfera: luz de manhã + grão de papel */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(80vmax 60vmax at 88% -12%, rgba(255, 191, 138, .35), transparent 55%),
    radial-gradient(64vmax 54vmax at -10% 106%, rgba(157, 191, 162, .22), transparent 55%);
}
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

#app { min-height: 100dvh; position: relative; z-index: 1; }
@media (min-width: 720px) {
  #app { max-width: 440px; margin: 28px auto; min-height: calc(100dvh - 56px);
    background: var(--bg); border-radius: 44px; border: 1px solid rgba(72,51,34,.1);
    box-shadow: 0 0 0 10px rgba(43, 33, 27, .05), var(--sombra-2); overflow: clip; }
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 520; color: var(--fg);
  letter-spacing: var(--tr-tight); margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-xl); line-height: var(--lh-snug); font-variation-settings: "opsz" 42; }
h2 { font-size: var(--t-lg); line-height: var(--lh-snug); }
h3 { font-size: var(--t-md); }
p { margin: 0; } p + p { margin-top: var(--s-3); }
strong { color: var(--fg); font-weight: 600; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--ouro); }
:focus-visible { outline: 2.5px solid var(--ouro); outline-offset: 2px; border-radius: 6px; }

.rotulo { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-muted); margin: 0; }
.rotulo--marca { color: var(--ouro); }
.mini { font-size: var(--t-sm); color: var(--fg-muted); margin: 0; line-height: 1.5; }
.olho { font-size: var(--t-md); line-height: 1.65; color: var(--fg-body); }
.emoji-g { font-size: 46px; line-height: 1; display: block; margin-bottom: var(--s-3); }

.nota-demo { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.5;
  border: 1.5px dashed var(--linha-2); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); margin-top: var(--s-4); background: var(--surf); }

/* -------------------------------------------------------------- ILUSTRAÇÃO */
.banner-arte { border-radius: var(--r-lg); overflow: hidden; background: var(--bg);
  box-shadow: var(--sombra-1); }
.banner-arte img { display: block; width: 100%; height: auto; }
.flutuar { animation: flutuar 7s ease-in-out infinite; }
@keyframes flutuar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.onb__img { width: min(300px, 72vw); height: auto; border-radius: var(--r-xl); }

/* ------------------------------------------------------------------ CASCA */
.conteudo { padding: var(--s-5); padding-top: calc(var(--s-5) + env(safe-area-inset-top)); padding-bottom: var(--s-7); }
.conteudo.com-abas { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.tela { display: flex; flex-direction: column; gap: var(--s-4); }
.tela > * { animation: subir var(--dur-3) var(--ease) backwards; }
.tela > *:nth-child(1) { animation-delay: 0ms; } .tela > *:nth-child(2) { animation-delay: 60ms; }
.tela > *:nth-child(3) { animation-delay: 120ms; } .tela > *:nth-child(4) { animation-delay: 180ms; }
.tela > *:nth-child(5) { animation-delay: 240ms; } .tela > *:nth-child(6) { animation-delay: 300ms; }
.tela > *:nth-child(n+7) { animation-delay: 360ms; }
@keyframes subir { from { opacity: 0; transform: translateY(18px) scale(.99); } }
.tela__cabeca { margin-bottom: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.pilha { display: flex; flex-direction: column; gap: var(--s-4); }

.volta { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); padding-top: calc(var(--s-3) + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--linha); font-weight: 600; color: var(--fg); font-size: var(--t-sm); }
.volta__btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-pill);
  background: var(--surf); box-shadow: var(--sombra-1); font-size: 17px; color: var(--fg);
  transition: transform var(--dur-1) var(--mola); border: none; }
.volta__btn:active { transform: scale(.9); }

/* dock flutuante — branco quente, pílula dourada ativa */
.abas { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); z-index: 40;
  display: grid; grid-template-columns: repeat(5, 62px); gap: 2px;
  padding: 7px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surf) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(72,51,34,.08);
  box-shadow: 0 2px 4px rgba(122,76,40,.05), 0 20px 44px -12px rgba(122,76,40,.3); }
@media (min-width: 720px) { .abas { position: absolute; bottom: 18px; } }
@media (max-width: 359px) { .abas { grid-template-columns: repeat(5, 56px); } }
.aba { display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 8px; color: var(--fg-muted); font-size: 9.5px; font-weight: 600;
  letter-spacing: .03em; border-radius: var(--r-pill);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-1) var(--mola); }
.aba svg { width: 21px; height: 21px; }
.aba.ativa { color: var(--sobre-ouro);
  background: linear-gradient(165deg, var(--ouro-vivo), var(--ouro-fundo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -6px var(--ouro-glow); }
.aba:active { transform: scale(.92); }

/* ----------------------------------------------------------------- BOTÕES */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--alvo-min); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  font: 600 var(--t-base)/1 var(--font-text); cursor: pointer; text-align: center;
  border: none; background: var(--surf); color: var(--fg); box-shadow: var(--sombra-1);
  transition: transform var(--dur-1) var(--mola), box-shadow var(--dur-2) var(--ease); }
.botao:active { transform: scale(.95); }
.botao--cheio { background: linear-gradient(165deg, var(--ouro-vivo) -10%, var(--ouro) 45%, var(--ouro-fundo));
  color: var(--sobre-ouro); width: 100%; margin-top: var(--s-4);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), 0 12px 28px -8px var(--ouro-glow); }
.botao--linha { width: 100%; }
.botao--perigo { color: var(--stop); background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--stop) 30%, transparent); }
.botoes-linha { display: flex; gap: var(--s-3); margin-top: var(--s-3); }
.botoes-linha .botao { flex: 1; margin-top: 0; }

.campo { width: 100%; padding: var(--s-4); border-radius: var(--r-md); border: 1.5px solid var(--linha-2);
  background: var(--surf); color: var(--fg); font: 400 var(--t-base)/1.55 var(--font-text); resize: vertical; }
.campo:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgba(242,100,48,.14); }
.campo::placeholder { color: var(--numeral); }

.deslizante { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; }
.deslizante::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--bg-2);
  box-shadow: inset 0 1px 3px rgba(72,51,34,.12); }
.deslizante::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px;
  border-radius: 50%; background: linear-gradient(165deg, var(--ouro-vivo), var(--ouro-fundo)); border: 3px solid #fff;
  box-shadow: 0 3px 10px var(--ouro-glow); }

/* ----------------------------------------------------------------- CARTÕES */
.cartao { position: relative; border-radius: var(--r-lg); padding: var(--s-5);
  background: var(--surf); box-shadow: var(--sombra-1); border: none; }
.cartao--brand { background:
    radial-gradient(150% 140% at 90% -30%, rgba(255, 191, 138, .5), transparent 55%), var(--surf);
  box-shadow: 0 3px 8px rgba(194, 92, 34, .08), 0 16px 36px -12px rgba(194, 92, 34, .22); cursor: pointer; }
.cartao--brand .rotulo { color: var(--ouro); }
.cartao--feito { background:
    radial-gradient(150% 140% at 90% -30%, rgba(157, 191, 162, .4), transparent 55%), var(--surf); }
.cartao--feito .rotulo { color: var(--ok); }
.cartao--linha { display: block; }
a.cartao, .cartao[role="button"] { transition: transform var(--dur-2) var(--mola), box-shadow var(--dur-2) var(--ease); }
a.cartao:active, .cartao[role="button"]:active { transform: scale(.975); }
.cartao--centro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.cartao__titulo { margin: var(--s-1) 0; font-size: var(--t-lg); }
.cartao__acao { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-3);
  font-weight: 700; font-size: var(--t-sm); color: var(--ouro); }

/* tiles com ícone */
.hoje__grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.cartao--mini { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4);
  border-radius: var(--r-lg); min-height: 120px; justify-content: space-between; }
.cartao--mini strong { font-size: var(--t-sm); line-height: 1.25; }
.cartao--mini .mini { font-size: var(--t-xs); }
.tile__icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px;
  color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--cor, var(--ouro)) 86%, #fff), var(--cor, var(--ouro)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -4px color-mix(in srgb, var(--cor, var(--ouro)) 55%, transparent); }
.tile__icone svg { width: 21px; height: 21px; }

/* -------------------------------------------------------------------- HOJE */
.hoje__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.hoje__nome { font-size: var(--t-2xl); font-variation-settings: "opsz" 60; margin-top: 2px; }
.hoje__streak { display: inline-flex; align-items: baseline; gap: 6px;
  padding: 10px 15px; border-radius: var(--r-pill); background: var(--surf); box-shadow: var(--sombra-1);
  transition: transform var(--dur-1) var(--mola); }
.hoje__streak:active { transform: scale(.94); }
.hoje__streak strong { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ouro); line-height: 1; }
.hoje__streak span:last-child { font-size: var(--t-xs); color: var(--fg-muted); }
.hoje__fogo { font-size: 14px; align-self: center; }

.dia { display: grid; grid-template-columns: 108px 1fr; gap: var(--s-5); align-items: center; }
@media (max-width: 359px) { .dia { grid-template-columns: 92px 1fr; } }
.dia__rituais { display: flex; flex-direction: column; gap: 10px; }
.ritual { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--fg-muted); }
.ritual.feito { color: var(--fg-body); }
.ritual__ponto { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%;
  border: 2px solid var(--linha-2); font-size: 12px; color: transparent; flex-shrink: 0;
  transition: all var(--dur-2) var(--mola); }
.ritual.feito .ritual__ponto { border-color: transparent; color: #fff;
  background: linear-gradient(160deg, var(--ok-suave), var(--ok));
  box-shadow: 0 3px 8px -2px var(--ok-glow); }
.hoje__emocao { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.hoje__emocao .emoji-g { margin: 0; font-size: 34px; }

.hoje__frase { margin: var(--s-5) var(--s-2) 0; position: relative; padding-left: var(--s-5); }
.hoje__frase::before { content: "“"; position: absolute; left: -4px; top: -12px;
  font: 400 64px/1 var(--font-display); color: var(--ouro); opacity: .5; }
.hoje__frase blockquote { margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: var(--t-md); line-height: 1.5; color: var(--fg); font-variation-settings: "opsz" 24; }
.hoje__frase figcaption { margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }

.prox-aula { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; }
.prox-aula__n { font-family: var(--font-display); font-weight: 320; font-size: 64px; line-height: .9;
  font-variation-settings: "opsz" 120;
  background: linear-gradient(170deg, var(--ouro-vivo), var(--ouro-fundo));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.progresso { height: 7px; border-radius: 4px; background: var(--bg-2); overflow: hidden; margin-top: var(--s-3);
  box-shadow: inset 0 1px 3px rgba(72,51,34,.1); }
.progresso > div { height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--ouro-vivo), var(--ouro-fundo));
  transition: width var(--dur-3) var(--ease); }
.progresso--g { height: 8px; }
.progresso--quiz { margin: 0 0 var(--s-2); }
.progresso--tempo > div { background: linear-gradient(90deg, var(--ok-suave), var(--warn-suave), var(--stop)); transition: width 1s linear; }

/* -------------------------------------------------------------- ONBOARDING */
.tela--onb { min-height: calc(100dvh - var(--s-7) * 2); justify-content: center; }
@media (min-width: 720px) { .tela--onb { min-height: calc(100dvh - 56px - var(--s-7) * 2); } }
.onb { display: flex; flex-direction: column; gap: var(--s-4); text-align: center; align-items: center; padding: var(--s-5) 0; }
.onb > * { animation: subir var(--dur-3) var(--ease) backwards; }
.onb > *:nth-child(2) { animation-delay: 90ms; } .onb > *:nth-child(3) { animation-delay: 180ms; }
.onb > *:nth-child(4) { animation-delay: 270ms; } .onb > *:nth-child(5) { animation-delay: 360ms; }
.onb h2 { font-size: var(--t-xl); }
.onb__titulo { font-size: var(--t-3xl); font-variation-settings: "opsz" 120; margin-top: var(--s-2); }

.opcoes-grandes { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.opcao-grande { text-align: left; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  border: 2px solid transparent; background: var(--surf); box-shadow: var(--sombra-1);
  color: var(--fg-body); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  transition: transform var(--dur-1) var(--mola), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.opcao-grande:active { transform: scale(.97); }
.opcao-grande strong { color: var(--fg); }
.opcao-grande span { font-size: var(--t-sm); color: var(--fg-muted); }
.opcao-grande.ativa { border-color: var(--ouro); box-shadow: 0 10px 26px -8px var(--ouro-glow); }
.opcao-grande.certa { border-color: var(--ok); box-shadow: 0 10px 26px -8px var(--ok-glow); }
.opcao-grande.errada { border-color: var(--stop); opacity: .55; }

/* ----------------------------------------------------------------- JORNADA */
.aulas { position: relative; display: flex; flex-direction: column; padding-left: 4px; }
.aulas::before { content: ""; position: absolute; left: 22px; top: 26px; bottom: 26px; width: 3px;
  border-radius: 2px; background: linear-gradient(180deg, var(--ouro) 0, var(--linha-2) 70%); opacity: .45; }
.aula-linha { position: relative; display: grid; grid-template-columns: 38px 1fr 14px; align-items: center;
  gap: var(--s-4); padding: var(--s-4) var(--s-2); transition: transform var(--dur-1) var(--mola); }
.aula-linha:active { transform: scale(.985); }
.aula-linha__n { position: relative; z-index: 1; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  font: 500 13px var(--font-mono); color: var(--fg-muted);
  background: var(--surf); box-shadow: var(--sombra-1); }
.aula-linha strong { font-family: var(--font-display); font-weight: 520; font-size: var(--t-base);
  color: var(--fg); display: block; line-height: 1.3; }
.aula-linha.feita .aula-linha__n { color: #fff;
  background: linear-gradient(160deg, var(--ouro-vivo), var(--ouro-fundo));
  box-shadow: 0 5px 14px -4px var(--ouro-glow); }
.aula-linha.feita strong { color: var(--fg-muted); }
.aula-linha__seta { color: var(--numeral); }
.aula-linha--breve { opacity: .65; }
.aula__titulo { font-size: var(--t-xl); font-variation-settings: "opsz" 42; }
.ideias { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.ideias li { position: relative; padding-left: var(--s-5); }
.ideias li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px;
  border-radius: 50%; background: linear-gradient(160deg, var(--ouro-vivo), var(--ouro-fundo)); }

.pilha-acoes { display: flex; flex-direction: column; gap: var(--s-3); }
.acao-aula { position: relative; display: flex; flex-direction: column; gap: 3px; padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg); background: var(--surf); box-shadow: var(--sombra-1);
  transition: transform var(--dur-1) var(--mola); }
.acao-aula:active { transform: scale(.98); }
.acao-aula__tipo { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--tr-wide); color: var(--ouro); }
.acao-aula strong { font-family: var(--font-display); font-weight: 520; font-size: var(--t-md); }
.acao-aula__st { font-size: var(--t-sm); font-weight: 700; color: var(--ouro); margin-top: var(--s-1); }
.acao-aula.feito { box-shadow: inset 0 0 0 1.5px rgba(46,107,79,.25), var(--sombra-1); }
.acao-aula.feito .acao-aula__tipo, .acao-aula.feito .acao-aula__st { color: var(--ok); }

/* ------------------------------------------------------------------- QUIZ */
.quiz { display: flex; flex-direction: column; gap: var(--s-4); }
.quiz > * { animation: subir var(--dur-2) var(--ease) backwards; }
.quiz__passo { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }
.quiz__consigna { font-size: var(--t-sm); color: var(--fg-muted); }
.quiz__pergunta { font-size: var(--t-lg); min-height: 2.6em; font-variation-settings: "opsz" 30; }
.escala { display: flex; flex-direction: column; gap: var(--s-2); }
.escala__op { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); border: 2px solid transparent; background: var(--surf); box-shadow: var(--sombra-1);
  font: inherit; color: var(--fg-body); cursor: pointer; min-height: var(--alvo-min);
  transition: transform var(--dur-1) var(--mola), border-color var(--dur-1) var(--ease); }
.escala__op:active { transform: scale(.97); border-color: var(--ouro); }
.escala__num { font-family: var(--font-display); font-size: var(--t-md); color: var(--numeral); width: 1.2em; text-align: center; }
.escala__rot { font-size: var(--t-sm); }

/* --------------------------------------------------------------- RESULTADO */
.anel__num { font: 600 20px var(--font-display); fill: var(--fg); }
.anel__arco { transition: stroke-dashoffset .9s var(--ease); }
.medidor__num { font: 600 36px var(--font-display); fill: var(--fg); }
.medidor__rotulo { font: 500 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--fg-muted); }
.resultado__classe { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 540; font-style: italic; }
.resultado__classe.ok { color: var(--ok); } .resultado__classe.warn { color: var(--warn); } .resultado__classe.stop { color: var(--stop); }
.barras { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-3); width: 100%; }
.barra__topo { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-sm); margin-bottom: 6px; }
.barra__topo strong { font-family: var(--font-display); font-size: var(--t-md); }
.barra__trilho { height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(72,51,34,.1); }
.barra__valor { height: 100%; border-radius: 4px; transition: width .9s var(--ease); }
.barra__extra { font-size: var(--t-xs); color: var(--fg-muted); margin-top: 5px; }
.radar { width: min(290px, 80vw); margin-inline: auto; }
.radar__rotulo { font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; fill: var(--fg-muted); }
.faisca { width: 100%; height: 64px; margin-top: var(--s-2); }
.disc-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); width: 100%; }
.disc-cel { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-4);
  border-radius: var(--r-md); background: var(--bg-2); }
.disc-cel.alta { background: radial-gradient(130% 130% at 50% -20%, rgba(255,191,138,.55), var(--surf) 70%);
  box-shadow: var(--sombra-1); }
.disc-cel__letra { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 320; color: var(--ouro); }
.disc-cel__pct { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- CHECK-IN */
.emocoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.emocao { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: var(--s-3) 2px;
  border-radius: var(--r-md); border: 2px solid transparent; cursor: pointer;
  background: var(--surf); box-shadow: var(--sombra-1); font-size: 24px;
  transition: transform var(--dur-1) var(--mola), border-color var(--dur-1) var(--ease); }
.emocao:active { transform: scale(.88); }
.emocao span { text-transform: capitalize; font-family: var(--font-text); font-size: 10.5px; color: var(--fg-muted); }
.emocao.ativa { border-color: var(--ouro); box-shadow: 0 8px 20px -6px var(--ouro-glow);
  background: radial-gradient(120% 100% at 50% 0, rgba(255,191,138,.5), var(--surf)); }
.emocao.ativa span { color: var(--ouro); font-weight: 600; }

/* ------------------------------------------------------------------ DIÁRIO */
.entradas { display: flex; flex-direction: column; gap: var(--s-3); }
.ent { display: grid; grid-template-columns: 42px 1fr auto; gap: var(--s-3); padding: var(--s-4);
  border-radius: var(--r-md); background: var(--surf); box-shadow: var(--sombra-1); align-items: start; }
.ent__icone { display: grid; place-items: center; width: 38px; height: 38px; font-size: 20px;
  border-radius: 13px; background: var(--bg-2); }
.ent time { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--numeral); white-space: nowrap; }

/* ------------------------------------------------------------- POWERSCRIPT */
.ps-passo { display: block; }
.ps-passo__n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(160deg, var(--ouro-vivo), var(--ouro-fundo)); color: #fff;
  font: 600 12px var(--font-mono); margin-right: var(--s-2); box-shadow: 0 3px 8px -2px var(--ouro-glow); }
.ps-passo__t { font-weight: 600; color: var(--fg); }
.ps-passo textarea { margin-top: var(--s-2); }

/* -------------------------------------------------------------------- JOGO */
.jogo { display: flex; flex-direction: column; gap: var(--s-3); }
.jogo__topo { display: flex; justify-content: space-between; align-items: baseline; }
.jogo__pontos { font-family: var(--font-display); font-size: var(--t-lg); color: var(--fg); font-variant-numeric: tabular-nums; }
.jogo__timer b { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ouro); font-variant-numeric: tabular-nums; }
.jogo__frase { min-height: 150px; display: grid; place-items: center; text-align: center;
  padding: var(--s-5); border-radius: var(--r-lg); background: var(--surf); box-shadow: var(--sombra-2);
  border: 2px solid transparent;
  font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.35; color: var(--fg);
  font-variation-settings: "opsz" 30;
  transition: border-color var(--dur-1) var(--ease); }
.jogo__frase.certo { border-color: var(--ok); }
.jogo__frase.errado { border-color: var(--stop); animation: tremer .32s; }
@keyframes tremer { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.jogo__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.botao-jogo { display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center;
  min-height: 94px; border-radius: var(--r-lg); cursor: pointer;
  font: 800 var(--t-md)/1.2 var(--font-text); letter-spacing: .03em; border: none; color: #fff;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3), 0 14px 30px -10px rgba(72,51,34,.35);
  transition: transform var(--dur-1) var(--mola); }
.botao-jogo span { font-weight: 500; font-size: var(--t-xs); opacity: .85; }
.botao-jogo:active { transform: scale(.94); }
.botao-jogo--fato { background: linear-gradient(160deg, #58a37c, var(--ok)); }
.botao-jogo--int  { background: linear-gradient(160deg, var(--ouro-vivo), var(--ouro-fundo)); }
.jogo__dica { padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--surf); box-shadow: var(--sombra-1); font-size: var(--t-sm);
  animation: subir var(--dur-2) var(--ease); }
.neuro-legenda { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); justify-content: center; font-size: var(--t-xs); color: var(--fg-muted); }

/* ------------------------------------------------------------------- CAIXA */
.caixas { display: flex; flex-direction: column; gap: var(--s-4); }
.caixa-item { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-4); align-items: center; }
.caixa-visual { position: relative; height: 94px; border-radius: var(--r-md);
  background: var(--bg-2); overflow: hidden; display: grid; place-items: center;
  box-shadow: inset 0 2px 6px rgba(72,51,34,.12); }
.caixa-nivel { position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, var(--ouro-fundo), var(--ouro-vivo) 75%);
  transition: height var(--dur-2) var(--mola); }
.caixa-visual.inversa .caixa-nivel { background: linear-gradient(to top, #8f2f1c, var(--stop) 75%); }
.caixa-emoji { position: relative; z-index: 1; font-size: 24px; }
.caixa-info { display: flex; flex-direction: column; gap: 3px; }

/* ---------------------------------------------------------------- RESPIRAR */
.tela--respirar { align-items: center; text-align: center; }
.resp { position: relative; display: grid; place-items: center; width: 100%;
  padding: var(--s-6) 0; border-radius: var(--r-xl); overflow: hidden; }
.resp__cena { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.resp__circulo { position: relative; z-index: 1; width: 190px; height: 190px; border-radius: 50%;
  display: grid; place-items: center; margin: 34px 0;
  background: radial-gradient(circle at 34% 28%, #ffd9b4, var(--ouro) 52%, var(--ouro-fundo) 88%);
  color: #fff; font: 600 var(--t-md) var(--font-text); text-shadow: 0 1px 4px rgba(120,30,0,.35);
  box-shadow: 0 0 0 16px rgba(242,100,48,.12), 0 0 0 34px rgba(242,100,48,.05), 0 22px 50px -12px var(--ouro-glow);
  transform: scale(.7); transition: transform 4s cubic-bezier(.4,0,.6,1); }
.resp__circulo.cheio { transform: scale(1); }
.resp__circulo.vazio { transform: scale(.7); transition-duration: 6s; }
.resp__circulo.sem-anima { transform: none !important; transition: none; }
.resp__resta { position: relative; z-index: 1; margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--t-md); color: var(--fg); }

/* -------------------------------------------------------------------- MAPA */
.mapa-bloco h3 { margin-top: var(--s-1); }
.mapa-swot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-2); }

/* -------------------------------------------------------------------- VOCÊ */
.voce__cabeca { display: flex; gap: var(--s-4); align-items: center; }
.voce__avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px;
  background: linear-gradient(150deg, var(--ouro-vivo), var(--ouro-fundo)); color: #fff;
  font: 600 28px var(--font-display); flex-shrink: 0;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), 0 10px 24px -8px var(--ouro-glow); }

/* ---------------------------------------------------------- CONFETE/TOAST */
.confete { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confete i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 3px 8px 3px 8px; animation: cair linear forwards; }
@keyframes cair { to { transform: translateY(105vh) rotate(560deg); opacity: .15; } }
.toast { position: fixed; left: 50%; bottom: calc(102px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px);
  background: var(--fg); color: var(--bg); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; opacity: 0; transition: all var(--dur-2) var(--ease);
  z-index: 95; box-shadow: var(--sombra-2); max-width: 88vw; text-align: center; }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------- IMPRESSÃO */
@media print {
  body::before, body::after { display: none; }
  .abas, .volta, .botao, .nota-demo, .banner-arte { display: none !important; }
  #app { max-width: none; box-shadow: none; border: none; margin: 0; }
  .cartao { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
}

/* arte de fundo mascarada dentro de cartão */
.cartao--cena { overflow: hidden; }
.cartao--cena > *:not(.arte-fundo) { position: relative; z-index: 1; }
.arte-fundo { position: absolute; right: 0; top: 0; height: 100%; width: 78%;
  object-fit: cover; object-position: 100% 62%; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%); }

/* ============================================================================
   v2 — componentes do material real (Rastreamento, perfil em 30 facetas,
   exercícios do programa) e a marca oficial. Ver estudos/2026-09-03-*.md
   ============================================================================ */

/* ---- marca ---------------------------------------------------------------- */
.onb__marca { width: min(78vw, 300px); height: auto; margin: 0 auto var(--s-5); display: block; }
.quiz__marca { width: 86px; height: auto; display: block; margin: 0 auto var(--s-4); opacity: .95; }

/* ---- faixa do foco (a escolha do onboarding vira consequência) ------------ */
.foco {
  margin: var(--s-4) 0 var(--s-5); padding: var(--s-5);
  border-radius: var(--r-lg); background: var(--surf);
  border: 1px solid var(--linha); box-shadow: var(--sombra-1);
  border-left: 3px solid var(--ouro);
}
.foco__frase { font-family: var(--font-display); font-size: var(--t-md); line-height: 1.35;
  color: var(--fg); margin: var(--s-2) 0 var(--s-3); font-variation-settings: "opsz" 60; }
.foco__nota { font-size: var(--t-sm); color: var(--fg-body); margin: 0 0 var(--s-3); }
.foco__link { font-size: var(--t-sm); font-weight: 600; color: var(--ouro-fundo); text-decoration: none; }
.foco__link:hover { text-decoration: underline; }

/* ---- avisos e alertas ----------------------------------------------------- */
.aviso, .alerta {
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  font-size: var(--t-sm); line-height: 1.55; margin: var(--s-4) 0;
}
.aviso { background: var(--ouro-pale); color: #4c3d16; }
.aviso strong { display: block; margin-bottom: var(--s-2); color: var(--ouro-fundo); }
.aviso p, .alerta p { margin: 0 0 var(--s-2); }
.aviso p:last-child, .alerta p:last-child { margin-bottom: 0; }
.alerta { background: #fdecea; border: 1px solid #f0bdb4; color: #7d2418; }
.alerta strong { display: block; margin-bottom: var(--s-2); font-size: var(--t-base); }
.alerta a { color: #7d2418; font-weight: 600; }

/* ---- barra horizontal simples (relatórios) -------------------------------- */
.barrinha { height: 7px; border-radius: 99px; background: var(--bg-2); overflow: hidden; margin: 6px 0; }
.barrinha__preenche { height: 100%; border-radius: 99px; transition: width var(--dur-3) var(--ease); }

/* ---- capa de bloco dentro de um instrumento longo -------------------------- */
.capa-bloco { text-align: center; padding: var(--s-6) var(--s-2); }
.capa-bloco h2 { font-family: var(--font-display); font-size: var(--t-xl); margin: var(--s-2) 0 var(--s-4);
  font-variation-settings: "opsz" 100; }
.capa-bloco__txt { font-size: var(--t-sm); color: var(--fg-body); text-align: left;
  max-width: 46ch; margin: 0 auto var(--s-3); }

/* ---- item de instrumento: reflexão da autora + escalas -------------------- */
.quiz__reflexao {
  font-size: var(--t-sm); line-height: 1.5; color: var(--fg-muted);
  background: var(--surf-2); border: 1px solid var(--linha);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-5);
}
.quiz__reflexao span { margin-right: 6px; }

.opcoes-grandes--par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.escala--5 .escala__op { min-height: 52px; }
.escala--7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.escala--7 .escala__ancoras {
  grid-column: 1 / -1; display: flex; justify-content: space-between;
  font-size: var(--t-xs); color: var(--fg-muted); margin: 0 0 var(--s-2);
  text-transform: lowercase; letter-spacing: .02em;
}
.escala--7 .escala__ancoras span:nth-child(2) { text-align: center; }
.escala__op--num {
  display: grid; place-items: center; min-height: 56px; padding: 0;
  font-family: var(--font-mono); font-size: var(--t-md); font-weight: 500;
  border: 1px solid var(--linha-2); border-radius: var(--r-sm);
  background: var(--surf); color: var(--fg); cursor: pointer;
  transition: transform var(--dur-1) var(--mola), background var(--dur-1), border-color var(--dur-1);
}
.escala__op--num:hover { border-color: var(--ouro); background: var(--ouro-pale); }
.escala__op.marcada { background: var(--ouro); color: var(--sobre-ouro); border-color: var(--ouro); transform: scale(.96); }
.escala__op.marcada .escala__num, .escala__op.marcada .escala__rot { color: var(--sobre-ouro); }
.opcao-grande.marcada { background: var(--ouro); color: var(--sobre-ouro); border-color: var(--ouro); }
.opcao-grande.marcada strong { color: var(--sobre-ouro); }

/* ---- relatório ------------------------------------------------------------ */
.rel { max-width: 62ch; margin: 0 auto; }
.rel__titulo { font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1.08;
  letter-spacing: var(--tr-tight); margin: var(--s-2) 0 var(--s-5);
  font-variation-settings: "opsz" 144; }
.rel__bloco {
  background: var(--surf); border: 1px solid var(--linha); border-radius: var(--r-lg);
  padding: var(--s-5); margin-bottom: var(--s-4); box-shadow: var(--sombra-1);
}
.rel__bloco h2 { font-family: var(--font-display); font-size: var(--t-lg); margin: var(--s-2) 0 var(--s-3);
  line-height: 1.2; font-variation-settings: "opsz" 80; }
.rel__bloco h3 { font-size: var(--t-md); margin: var(--s-3) 0 var(--s-2); color: var(--fg); }
.rel__bloco p { font-size: var(--t-sm); line-height: 1.6; margin: 0 0 var(--s-2); }
.rel__bloco--nota { background: var(--surf-2); box-shadow: none; }
.rel__bloco--sintese { border-left: 3px solid var(--ouro); }
.rel__bloco--recado { background: var(--ouro-pale); border-color: transparent; box-shadow: none; }
.rel__bloco--atencao { border-left: 3px solid var(--stop); }

.rel__medida { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-2) 0; }
.rel__num { font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1;
  color: var(--ouro-fundo); font-variation-settings: "opsz" 144; }
.rel__medida span { font-size: var(--t-sm); color: var(--fg-muted); }
.rel__nota { font-size: var(--t-xs) !important; color: var(--fg-muted); margin-top: var(--s-3) !important; }

.rel__subs { margin: var(--s-4) 0 var(--s-2); display: grid; gap: var(--s-4); }
.rel__sub-nome { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--fg); }
.rel__sub-nome em { display: block; font-style: normal; font-weight: 400;
  font-size: var(--t-xs); color: var(--fg-muted); margin-top: 1px; }
.rel__sub-val { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-body); }
.rel__sub-val em { font-style: normal; color: var(--fg-muted); }

.rel__rodape { text-align: center; margin: var(--s-6) 0 var(--s-4); display: grid; gap: var(--s-3); }
.rel__rodape p { font-size: var(--t-sm); color: var(--fg-muted); margin-bottom: var(--s-2); }

/* domínios e facetas do Big Five */
.dom { padding: var(--s-4) 0; border-top: 1px solid var(--linha); }
.dom:first-of-type { border-top: 0; padding-top: var(--s-2); }
.dom__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.dom__topo strong { font-family: var(--font-display); font-size: var(--t-md);
  font-variation-settings: "opsz" 60; }
.dom__escore { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ouro-fundo); white-space: nowrap; }
.dom__escore em { font-style: normal; color: var(--fg-muted); font-size: var(--t-xs); }
.dom__def { font-size: var(--t-xs) !important; color: var(--fg-muted); margin: 2px 0 var(--s-2) !important; }
.dom__leitura { font-size: var(--t-sm) !important; color: var(--fg-body); }

.facetas { display: grid; gap: var(--s-3); margin-top: var(--s-3);
  padding-left: var(--s-4); border-left: 2px solid var(--bg-2); }
.faceta__nome { font-size: var(--t-sm); font-weight: 600; color: var(--fg); }
.faceta__val { float: right; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }
.faceta__val em { font-style: normal; }
.faceta__txt { font-size: var(--t-xs) !important; color: var(--fg-muted); margin: 4px 0 0 !important; line-height: 1.5; }
.faceta--alto .faceta__nome { color: var(--ouro-fundo); }
.faceta--baixo .faceta__nome { color: var(--fg-muted); }

.cartaozinho { padding: var(--s-3) var(--s-4); background: var(--surf-2);
  border-radius: var(--r-md); margin-bottom: var(--s-3); border-left: 3px solid var(--ouro); }
.cartaozinho--atencao { border-left-color: var(--warn); }
.cartaozinho strong { font-size: var(--t-sm); color: var(--fg); }
.cartaozinho p { font-size: var(--t-xs) !important; color: var(--fg-body); margin: 4px 0 0 !important; }

.plano { list-style: none; counter-reset: p; padding: 0; margin: var(--s-3) 0 0; }
.plano li { counter-increment: p; position: relative; padding-left: 40px; margin-bottom: var(--s-4); }
.plano li::before {
  content: counter(p); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ouro-grad); color: var(--sobre-ouro);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
}
.plano strong { font-size: var(--t-sm); color: var(--fg); }
.plano p { font-size: var(--t-xs) !important; color: var(--fg-body); margin: 4px 0 0 !important; }

/* ---- exercícios do programa ----------------------------------------------- */
.exemplos { display: grid; gap: var(--s-3); margin: var(--s-4) 0; }
.exemplo { background: var(--surf-2); border: 1px solid var(--linha);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.exemplo__l { font-size: var(--t-sm); margin: 0 0 var(--s-2); line-height: 1.5; }
.exemplo__l em { display: block; font-style: normal; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--fg-muted); margin-bottom: 2px; }
.exemplo__l--nao { color: var(--fg-muted); text-decoration-color: var(--linha-2); }
.exemplo__l--nao em { color: var(--stop); }
.exemplo__l--sim em { color: var(--ok); }

.escolha-ex { border: 0; padding: 0; margin: 0 0 var(--s-4); }
.escolha-ex legend { font-size: var(--t-sm); font-weight: 600; color: var(--fg); margin-bottom: var(--s-3); padding: 0; }
.escolha-ex__compromisso {
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--ouro-pale); border-radius: var(--r-md);
  font-size: var(--t-sm); color: #4c3d16;
}
.acao-aula--foco { border-color: var(--ouro); }
.acao-aula--foco .acao-aula__tipo { color: var(--ouro-fundo); }

/* ---- as duas vias da mudança ---------------------------------------------- */
.vias { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .vias { grid-template-columns: 1fr 1fr; } }
.via { background: var(--surf); border: 1px solid var(--linha); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--sombra-1); }
.via h3 { font-family: var(--font-display); font-size: var(--t-lg); margin: var(--s-1) 0 var(--s-2);
  font-variation-settings: "opsz" 80; }
.via__lema { font-size: var(--t-sm); color: var(--ouro-fundo); font-style: italic; margin: 0 0 var(--s-4); }
.via__passos { list-style: none; padding: 0; margin: 0; counter-reset: v; }
.via__passos li { counter-increment: v; padding-left: 30px; position: relative; margin-bottom: var(--s-3); }
.via__passos li::before { content: counter(v); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-2); color: var(--ouro-fundo); font-family: var(--font-mono); font-size: 11px; }
.via__passos strong { display: block; font-size: var(--t-sm); color: var(--fg); }
.via__passos span { display: block; font-size: var(--t-xs); color: var(--fg-body); margin-top: 2px; }
.via__passos em { display: block; font-style: normal; font-size: var(--t-xs);
  color: var(--fg-muted); margin-top: 3px; padding-left: var(--s-3); border-left: 2px solid var(--linha); }

/* faixas do SRQ no relatório */
.rel__bloco--atencao  { border-left: 3px solid var(--stop); }
.rel__bloco--moderada { border-left: 3px solid var(--warn); }
.rel__bloco--leve     { border-left: 3px solid var(--ok); }