:root {
  --app-blue: #0f5f96;
  --app-blue-2: #1979b8;
  --app-ink: #123b5d;
  --app-muted: #657d91;
  --app-line: #d7e4ee;
  --app-surface: rgba(255, 255, 255, .96);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  padding-top: calc(var(--app-navbar-offset, 68px) + var(--safe-top));
  padding-bottom: calc(var(--app-footer-offset, 62px) + 8px + var(--safe-bottom));
}
button, a, input, select { -webkit-tap-highlight-color: transparent; }

/* ---------- NAVBAR ---------- */
.app-nav {
  position: fixed;
  z-index: 1200;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding: calc(8px + var(--safe-top)) clamp(14px, 3vw, 34px) 8px;
  border-bottom: 1px solid rgba(188, 211, 227, .9);
  background: rgba(250, 253, 255, .95);
  box-shadow: 0 8px 24px rgba(31, 72, 105, .08);
  backdrop-filter: blur(15px);
}
.app-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--app-ink);
  text-decoration: none;
}
.app-nav__brand img {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(20, 88, 136, .18);
}
.app-nav__brand span { display: grid; line-height: 1.1; min-width: 0; }
.app-nav__brand strong { font-size: .98rem; font-weight: 900; }
.app-nav__brand small {
  margin-top: 3px;
  color: var(--app-muted);
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}
.app-nav__links { display: flex; align-items: center; gap: 6px; }
.app-nav__link,
.mobile-nav__link {
  --nav-icon-color: #4d6b82;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 13px;
  color: #4d6b82;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 850;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.app-nav__link .material-symbols-rounded,
.mobile-nav__link .material-symbols-rounded {
  font-size: 20px;
  color: var(--nav-icon-color);
  animation: navIconFloat 4.2s ease-in-out infinite;
}
.app-nav__link:hover,
.mobile-nav__link:hover {
  color: var(--app-blue);
  background: #edf7fd;
  transform: translateY(-1px);
}
.app-nav__link:hover .material-symbols-rounded,
.mobile-nav__link:hover .material-symbols-rounded {
  animation: navIconPop .58s ease;
}
.app-nav__link.is-active,
.mobile-nav__link.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--app-blue), var(--app-blue-2));
  box-shadow: 0 7px 17px rgba(18, 100, 154, .2);
}
.app-nav__link.is-active .material-symbols-rounded,
.mobile-nav__link.is-active .material-symbols-rounded { color: #fff; }
.app-nav__link--guia,
.mobile-nav__link--guia { --nav-icon-color: #d38a0f; }
.app-nav__link--inicio,
.mobile-nav__link--inicio { --nav-icon-color: #1880c6; }
.app-nav__link--roteiro,
.mobile-nav__link--roteiro { --nav-icon-color: #7a5acc; }
.mobile-nav { display: none; }

@keyframes navIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes navIconPop {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-3px) rotate(-7deg) scale(1.08); }
  55% { transform: translateY(1px) rotate(5deg) scale(1.02); }
  78% { transform: translateY(-1px) rotate(-2deg) scale(1.05); }
}

/* ---------- FOOTER ---------- */
.app-footer {
  position: fixed;
  z-index: 1190;
  inset: auto 0 0 0;
  padding: 8px 14px calc(8px + var(--safe-bottom));
  border-top: 1px solid rgba(188, 211, 227, .9);
  background: rgba(250, 253, 255, .96);
  box-shadow: 0 -8px 24px rgba(31, 72, 105, .08);
  backdrop-filter: blur(15px);
}
.app-footer__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app-footer__text {
  color: #6f8293;
  font-size: .74rem;
  font-weight: 800;
}
.author-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid #d0dfeb;
  border-radius: 999px;
  color: #174e76;
  background: #fff;
  text-decoration: none;
  font-size: .74rem;
  font-weight: 850;
  box-shadow: 0 6px 16px rgba(26, 77, 114, .08);
  transition: transform .15s ease, background .15s ease;
}
.author-pill:hover { transform: translateY(-1px); background: #f8fbff; }
.author-pill__icon { font-size: .9rem; }

/* ---------- SHARED CONTENT ---------- */
.content-shell {
  width: min(1100px, calc(100% - 28px));
  margin: 0 auto;
  padding: 18px 0 44px;
}
body.simple-mode-body {
  min-height: 100vh;
  margin: 0;
  color: var(--app-ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(71, 143, 207, .09), transparent 34%),
    linear-gradient(180deg, #f8fbfe 0, #edf5fb 320px, #eef5fb 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--app-blue), var(--app-blue-2));
  text-decoration: none;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(19, 99, 153, .18);
}
.page-button.is-soft {
  color: #164d74;
  border: 1px solid #cfe1ec;
  background: #fff;
  box-shadow: none;
}
.reset-roadmap {
  cursor: pointer;
  color: #6d4f5b;
  background: #f8eaf0;
}

/* ---------- GUIA RÁPIDO ORIGINAL STYLE ---------- */
.tutorial-shell {
  width: min(1240px, calc(100% - 28px));
  margin: 14px auto;
}
.tutorial-paper {
  position: relative;
  overflow: hidden;
  border: 3px solid #1f3147;
  border-radius: 26px;
  padding: 30px 30px 24px 64px;
  background:
    repeating-linear-gradient(0deg, rgba(46, 91, 131, .11) 0 1px, transparent 1px 29px),
    linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,252,246,.98));
  box-shadow: 0 24px 70px rgba(26, 50, 80, .18);
}
.tutorial-paper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 44px;
  width: 2px;
  background: rgba(236, 72, 153, .35);
}
.tutorial-spiral {
  position: absolute;
  left: 14px;
  top: 24px;
  bottom: 24px;
  width: 22px;
  background: repeating-linear-gradient(0deg, #111827 0 5px, transparent 5px 32px);
  border-radius: 18px;
  opacity: .9;
}
.tutorial-header {
  text-align: center;
  margin-bottom: 22px;
}
.tutorial-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff7cc;
  border: 2px dashed #f59e0b;
  color: #92400e;
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .09em;
}
.tutorial-kicker .material-symbols-rounded,
.tutorial-primary .material-symbols-rounded,
.tutorial-secondary .material-symbols-rounded,
.tutorial-tips .material-symbols-rounded,
.roadmap-paper .material-symbols-rounded,
.roadmap-action .material-symbols-rounded,
.roadmap-switcher__btn .material-symbols-rounded,
.roadmap-final-strip__item > .material-symbols-rounded,
.roadmap-progress-card__label > .material-symbols-rounded,
.roadmap-section-heading .material-symbols-rounded {
  transform-origin: center;
}
.tutorial-header h1 {
  margin: 10px 0 4px;
  font-size: clamp(2.15rem, 4vw, 4.15rem);
  font-weight: 950;
  letter-spacing: -.04em;
  color: #0f2f55;
  text-shadow: 0 3px 0 rgba(15, 47, 85, .08);
}
.tutorial-header p {
  max-width: 810px;
  margin: 0 auto;
  color: #42576f;
  font-weight: 750;
}
.tutorial-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.tutorial-primary,
.tutorial-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  padding: 12px 18px;
  font-weight: 950;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tutorial-primary:hover,
.tutorial-secondary:hover { transform: translateY(-1px); }
.tutorial-primary {
  border-color: #0f8a52;
  background: linear-gradient(180deg, #23c06f, #0b8f55);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 138, 82, .22);
}
.tutorial-secondary {
  border-color: #bdd7f4;
  background: #fff;
  color: #13518a;
  box-shadow: 0 8px 18px rgba(19, 81, 138, .12);
}
.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tutorial-step {
  position: relative;
  min-height: 178px;
  padding: 24px 20px 18px;
  border: 2px solid var(--step-border);
  border-radius: 18px;
  background: var(--step-bg);
  box-shadow: 0 10px 22px rgba(31, 49, 71, .09);
}
.tutorial-step::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--step-color), transparent 68%);
}
.step-number {
  position: absolute;
  top: -16px;
  left: -14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--step-color);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 7px 14px rgba(0,0,0,.14);
  font-size: 1.25rem;
  font-weight: 950;
}
.tutorial-step h2 {
  margin: 0 0 8px;
  color: var(--step-color);
  font-size: 1.08rem;
  font-weight: 950;
}
.tutorial-step p {
  margin: 0;
  color: #2f4054;
  font-size: .96rem;
  line-height: 1.45;
  font-weight: 700;
}
.step-green { --step-color:#0f9f5f; --step-bg:#effaf3; --step-border:#b7e6c7; }
.step-blue { --step-color:#1d67ac; --step-bg:#f0f7ff; --step-border:#c9dcf2; }
.step-purple { --step-color:#7156c4; --step-bg:#f7f2ff; --step-border:#dacff2; }
.step-orange { --step-color:#d97706; --step-bg:#fff7ed; --step-border:#f6d3a2; }
.step-pink { --step-color:#c0266f; --step-bg:#fff1f6; --step-border:#f1c7d8; }
.step-teal { --step-color:#07858b; --step-bg:#effdff; --step-border:#bee8ea; }
.tutorial-tips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.tutorial-tips > div {
  border: 2px solid #b7d7ee;
  border-radius: 18px;
  padding: 16px 18px;
  background: rgba(255,255,255,.74);
}
.tutorial-tips h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: #13518a;
  font-size: 1rem;
  font-weight: 950;
}
.tutorial-tips p { margin: 0; color: #40556e; font-weight: 720; }
.tutorial-footer {
  margin-top: 20px;
  text-align: center;
  color: #0f2f55;
  font-weight: 900;
  letter-spacing: .01em;
}

/* ---------- ROTEIRO ORIGINAL STYLE ---------- */
:root {
  --roadmap-ink: #17385d;
  --roadmap-muted: #5f7488;
  --roadmap-paper: #fffef9;
  --roadmap-line: #cad7e4;
  --roadmap-required: #2f9a62;
  --roadmap-check: #d89522;
  --roadmap-result: #7557bd;
  --roadmap-attention: #d74b4b;
}
.roadmap-shell {
  width: min(1540px, calc(100% - 28px));
  margin: 12px auto;
}
.roadmap-paper {
  position: relative;
  border: 2px solid #cbd7e2;
  border-radius: 28px;
  padding: 28px 28px 26px 56px;
  background:
    repeating-linear-gradient(0deg, rgba(46, 91, 131, .11) 0 1px, transparent 1px 29px),
    linear-gradient(90deg, rgba(255,255,255,.97), rgba(252,250,244,.98));
  box-shadow: 0 24px 70px rgba(26, 50, 80, .12);
  overflow: hidden;
}
.roadmap-paper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 34px;
  width: 2px;
  background: rgba(236,72,153,.22);
}
.roadmap-spiral {
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: 20px;
  width: 22px;
  background: repeating-linear-gradient(0deg, #263341 0 5px, transparent 5px 32px);
  border-radius: 18px;
  opacity: .9;
}
.roadmap-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}
.roadmap-title-group {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.roadmap-title-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  color: #2c80ba;
  background: #eef7ff;
  border: 2px solid #b7d7ee;
  font-size: 34px;
  animation: navIconFloat 3.8s ease-in-out infinite;
}
.roadmap-kicker {
  color: #245580;
  font-size: .84rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.roadmap-header h1 {
  margin: 2px 0 6px;
  color: #1e4f82;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: .96;
  font-family: "Segoe Script", "Brush Script MT", "Caveat", cursive;
  font-weight: 700;
}
.roadmap-header p { margin: 0; color: #5f7488; font-size: 1rem; }
.roadmap-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 210px;
  padding: 14px 16px;
  border: 2px dashed #bed0df;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  color: #27425c;
  font-weight: 800;
}
.roadmap-legend strong { font-size: .95rem; }
.roadmap-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legend-dot--required { background: var(--roadmap-required); }
.legend-dot--check { background: var(--roadmap-check); }
.legend-dot--result { background: var(--roadmap-result); }
.legend-dot--attention { background: var(--roadmap-attention); }
.roadmap-progress-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 18px 0 12px;
  padding: 14px 16px;
  border: 2px dashed #bed0df;
  border-radius: 18px;
  background: #f9fcff;
}
.roadmap-progress-card__label { display: flex; align-items: center; gap: 10px; }
.roadmap-progress-card__label > span { color: #2c80ba; }
.roadmap-progress-card__label div { display: grid; }
.roadmap-progress-card__label small { color: #687d91; font-size: .76rem; }
.roadmap-progress { height: 10px; border-radius: 99px; overflow: hidden; background: #dfe8f0; }
.roadmap-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #2f9a62, #2f7fb7); transition: width .3s ease; }
.roadmap-progress-pill { min-width: 54px; text-align: center; padding: 6px 9px; border-radius: 999px; background: #e3f4ec; color: #1f7a4c; font-weight: 900; font-size: .82rem; }
.roadmap-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 20px 0 12px; }
.roadmap-section-heading > div { display: inline-flex; align-items: center; gap: 8px; font-size: 1.1rem; color: #174a7d; }
.roadmap-section-heading p { margin: 0; color: #667c90; font-size: .9rem; }
.roadmap-grid {
  --roadmap-columns: 4;
  display: grid;
  grid-template-columns: repeat(var(--roadmap-columns), minmax(0, 1fr));
  gap: 18px 14px;
}
.roadmap-step {
  position: relative; min-height: 285px; padding: 26px 16px 16px;
  display: flex; flex-direction: column; border: 2px solid #9faeba; border-radius: 18px;
  background: rgba(255,255,255,.83); box-shadow: 0 10px 22px rgba(34, 64, 91, .07);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.roadmap-step:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(34, 64, 91, .13); }
.roadmap-step::after {
  content: "arrow_forward"; font-family: "Material Symbols Rounded";
  position: absolute; right: -20px; top: 46%; z-index: 2; color: #4e6173; font-size: 25px;
}
.roadmap-step:nth-child(4n)::after, .roadmap-step:last-child::after { display: none; }
.roadmap-step.is-done { opacity: .78; border-color: #5eb381; background: #f3fcf7; }
.roadmap-step.is-done .roadmap-step__number { background: #2f9a62; color: #fff; }
.roadmap-step__number {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 3px solid var(--step-color, #2f9a62); color: var(--step-color, #2f9a62); font-weight: 900;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.roadmap-step__head { display: flex; align-items: center; gap: 8px; margin: 5px 0 8px; }
.roadmap-step__head > span { color: var(--step-color); font-size: 24px; }
.roadmap-step h2 { margin: 0; font-size: 1rem; line-height: 1.22; color: #263e55; }
.roadmap-step__tag { align-self: flex-start; margin-bottom: 9px; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--step-color) 14%, white); color: var(--step-color); font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.roadmap-step ul { margin: 0 0 12px; padding-left: 19px; color: #435a70; font-size: .82rem; line-height: 1.5; }
.roadmap-step li + li { margin-top: 4px; }
.roadmap-step__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed #c8d4de; }
.roadmap-step__complete { display: inline-flex; align-items: center; gap: 6px; color: #537087; font-size: .75rem; font-weight: 800; cursor: pointer; }
.roadmap-step__complete input { accent-color: #2f9a62; width: 17px; height: 17px; }
.roadmap-step__link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: #235f95; font-size: .75rem; font-weight: 900; }
.roadmap-step__link:hover { color: #143e65; }
.roadmap-step--required { --step-color: var(--roadmap-required); }
.roadmap-step--check { --step-color: var(--roadmap-check); }
.roadmap-step--result { --step-color: var(--roadmap-result); }
.roadmap-step--attention { --step-color: var(--roadmap-attention); }
.roadmap-insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.roadmap-insight {
  padding: 15px 16px; border: 2px solid #9faeba; border-radius: 18px; background: rgba(255,255,255,.82);
}
.roadmap-insight__title { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 9px; border-bottom: 2px solid currentColor; font-size: 1rem; }
.roadmap-insight ul { margin: 0; padding-left: 20px; color: #425b73; font-size: .82rem; line-height: 1.55; }
.roadmap-insight li + li { margin-top: 4px; }
.roadmap-insight--key { color: #2a678f; }
.roadmap-insight--mistake { color: #b84444; }
.roadmap-insight--tip { color: #7154b2; }
.roadmap-insight--checklist { color: #287c51; }
.roadmap-final-strip {
  display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 14px; align-items: stretch;
  margin-top: 18px; border: 2px solid #9faeba; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.82);
}
.roadmap-final-strip__item { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-right: 1px solid #ccd7e1; }
.roadmap-final-strip__item > span { color: #2b6c9e; }
.roadmap-final-strip__item div { display: grid; }
.roadmap-final-strip__item div span { color: #60758a; font-size: .82rem; }
.roadmap-final-strip__actions { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.roadmap-action { min-height: 40px; padding: 8px 12px; border-radius: 12px; border: 1px solid #bed0df; background: #f7fbff; color: #235f95; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 900; font-size: .78rem; }
.roadmap-action:hover { background: #e9f4fd; color: #143e65; }

/* Icon animation on original-style pages */
.tutorial-paper .material-symbols-rounded,
.roadmap-paper .material-symbols-rounded {
  transition: transform .2s ease, filter .2s ease, color .2s ease;
}
.tutorial-header:hover .tutorial-kicker .material-symbols-rounded,
.tutorial-primary:hover .material-symbols-rounded,
.tutorial-secondary:hover .material-symbols-rounded,
.tutorial-tips > div:hover .material-symbols-rounded,
.roadmap-step:hover .roadmap-step__head > .material-symbols-rounded,
.roadmap-insight:hover .roadmap-insight__title > .material-symbols-rounded,
.roadmap-action:hover > .material-symbols-rounded,
.roadmap-final-strip__item:hover > .material-symbols-rounded,
.roadmap-progress-card:hover .roadmap-progress-card__label > .material-symbols-rounded,
.roadmap-section-heading:hover .material-symbols-rounded {
  animation: navIconPop .58s ease;
  filter: drop-shadow(0 5px 7px rgba(24, 76, 124, .18));
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1120px) {
  .roadmap-header { grid-template-columns: 1fr; }
  .roadmap-legend { grid-template-columns: repeat(4, auto); min-width: 0; }
  .roadmap-legend strong { grid-column: 1 / -1; }
  .roadmap-grid { --roadmap-columns: 3; }
  .roadmap-step:nth-child(4n)::after { display: block; }
  .roadmap-step:nth-child(3n)::after { display: none; }
  .roadmap-insights { grid-template-columns: repeat(2, 1fr); }
  .roadmap-final-strip { grid-template-columns: 1fr 1fr; }
  .roadmap-final-strip__actions { grid-column: 1 / -1; justify-content: center; border-top: 1px solid #ccd7e1; }
}
@media (max-width: 980px) {
  .tutorial-paper { padding-left: 46px; }
  .tutorial-paper::before,
  .tutorial-spiral { display: none; }
  .tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  body { padding-bottom: calc(var(--app-footer-offset, 62px) + 72px + var(--safe-bottom)); }
  .app-nav { min-height: 58px; padding: calc(7px + var(--safe-top)) 13px 7px; }
  .app-nav__brand img { width: 38px; height: 38px; border-radius: 12px; }
  .app-nav__brand strong { font-size: .9rem; }
  .app-nav__brand small { font-size: .62rem; }
  .app-nav__links { display: none; }
  .mobile-nav {
    position: fixed;
    z-index: 1300;
    inset: auto 0 calc(var(--app-footer-offset, 62px) - 1px) 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: calc(64px + var(--safe-bottom));
    padding: 6px 8px calc(6px + var(--safe-bottom));
    border-top: 1px solid #d3e0e9;
    background: rgba(252,254,255,.96);
    box-shadow: 0 -8px 24px rgba(27, 66, 96, .11);
    backdrop-filter: blur(16px);
  }
  .mobile-nav__link {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-height: 52px;
    border-radius: 13px;
    color: #6a8193;
    text-decoration: none;
    font-size: .64rem;
    font-weight: 850;
    text-align: center;
    line-height: 1.15;
    padding: 4px 3px;
  }
  .mobile-nav__link .material-symbols-rounded { font-size: 23px; }
  .mobile-nav__link.is-active { color: var(--app-blue); background: #eaf5fb; }
  .content-shell { width: min(100% - 20px, 760px); padding-top: 10px; }
  .page-actions { display: grid; grid-template-columns: 1fr; }
  .roadmap-paper { padding: 24px 18px 26px 34px; border-radius: 20px; }
  .roadmap-paper::before { left: 27px; }
  .roadmap-spiral { left: 2px; }
  .roadmap-title-icon { width: 54px; height: 54px; font-size: 32px; }
  .roadmap-progress-card { grid-template-columns: 1fr auto; }
  .roadmap-progress { grid-column: 1 / -1; grid-row: 2; }
  .roadmap-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .roadmap-grid { --roadmap-columns: 2; }
  .roadmap-step:nth-child(3n)::after { display: block; }
  .roadmap-step:nth-child(2n)::after { display: none; }
  .app-footer__inner { flex-direction: column; justify-content: center; }
}
@media (max-width: 640px) {
  .tutorial-shell,
  .roadmap-shell { width: min(100% - 18px, 1240px); margin: 10px auto; }
  .tutorial-paper { padding: 22px 16px; border-radius: 18px; }
  .tutorial-grid,
  .tutorial-tips { grid-template-columns: 1fr; }
  .tutorial-step { min-height: auto; }
}
@media (max-width: 560px) {
  .roadmap-header h1 { font-size: 2.4rem; }
  .roadmap-title-group { gap: 10px; }
  .roadmap-legend { grid-template-columns: 1fr 1fr; }
  .roadmap-grid { --roadmap-columns: 1; gap: 26px; }
  .roadmap-step { min-height: auto; }
  .roadmap-step::after, .roadmap-step:nth-child(n)::after { display: block; content: "arrow_downward"; right: 50%; top: auto; bottom: -29px; transform: translateX(50%); }
  .roadmap-step:last-child::after { display: none; }
  .roadmap-insights { grid-template-columns: 1fr; }
  .roadmap-final-strip { grid-template-columns: 1fr; }
  .roadmap-final-strip__item { border-right: 0; border-bottom: 1px solid #ccd7e1; }
  .roadmap-final-strip__actions { grid-column: auto; flex-wrap: wrap; }
}
@media (max-width: 390px) {
  .app-nav__brand small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-nav__link .material-symbols-rounded,
  .mobile-nav__link .material-symbols-rounded,
  .roadmap-title-icon { animation: none; }
}

/* v2026.2 — navegação inferior única e página Sobre */
body {
  padding-bottom: calc(var(--app-bottom-nav-offset, 72px) + 18px + var(--safe-bottom));
}
.app-nav__links { display: none !important; }
.app-nav__settings {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid #d5e3ed;
  border-radius: 13px;
  color: #698095;
  background: rgba(255,255,255,.84);
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(25, 72, 106, .07);
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.app-nav__settings .material-symbols-rounded {
  color: #6f5ec2;
  font-size: 22px;
  animation: settingsDrift 5.4s ease-in-out infinite;
}
.app-nav__settings:hover,
.app-nav__settings.is-active {
  color: #fff;
  background: linear-gradient(135deg, #6754bb, #3182b9);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(74, 83, 173, .2);
  transform: translateY(-1px);
}
.app-nav__settings:hover .material-symbols-rounded,
.app-nav__settings.is-active .material-symbols-rounded {
  color: #fff;
  animation: settingsTurn .7s ease;
}
@keyframes settingsDrift {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(14deg); }
}
@keyframes settingsTurn {
  to { transform: rotate(180deg); }
}

.mobile-nav {
  position: fixed;
  z-index: 1300;
  left: 50%;
  right: auto;
  bottom: 8px;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(720px, calc(100% - 18px));
  min-height: calc(62px + var(--safe-bottom));
  padding: 6px 8px calc(6px + var(--safe-bottom));
  border: 1px solid #d3e0e9;
  border-radius: 20px;
  background: rgba(252,254,255,.97);
  box-shadow: 0 -5px 24px rgba(27, 66, 96, .12), 0 10px 30px rgba(27, 66, 96, .1);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}
.mobile-nav__link {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 49px;
  padding: 5px 7px;
  border-radius: 14px;
  color: #6a8193;
  text-decoration: none;
  font-size: .69rem;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
}
.mobile-nav__link .material-symbols-rounded { font-size: 23px; }
.mobile-nav__link.is-active {
  color: var(--app-blue);
  background: #eaf5fb;
  box-shadow: inset 0 0 0 1px rgba(141, 191, 221, .25);
}
.mobile-nav__link.is-active .material-symbols-rounded { color: var(--nav-icon-color); }
.app-footer { display: none !important; }

/* Sobre a aplicação */
.about-shell {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
  padding: 18px 0 38px;
}
.about-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid #cbddea;
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 12%, rgba(122, 90, 204, .15), transparent 30%),
    radial-gradient(circle at 8% 100%, rgba(24, 157, 95, .13), transparent 32%),
    linear-gradient(145deg, #ffffff, #f3f9fd);
  box-shadow: 0 20px 50px rgba(28, 73, 110, .11);
}
.about-hero__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid #b9d9ed;
  border-radius: 22px;
  color: #176da8;
  background: linear-gradient(145deg, #e9f7ff, #fff);
  box-shadow: 0 12px 24px rgba(32, 101, 151, .12);
}
.about-hero__icon .material-symbols-rounded {
  font-size: 38px;
  color: #176da8;
  animation: navIconFloat 4s ease-in-out infinite;
}
.about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6f58b9;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.about-hero h1 {
  margin: 4px 0 7px;
  color: #113f69;
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 950;
  letter-spacing: -.035em;
}
.about-hero p {
  max-width: 760px;
  margin: 0;
  color: #5f7890;
  line-height: 1.6;
}
.about-version {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 124px;
  padding: 14px 16px;
  border: 1px solid #d6d0f1;
  border-radius: 18px;
  color: #6651ae;
  background: #f7f4ff;
}
.about-version .material-symbols-rounded { font-size: 25px; color: #7a5acc; }
.about-version small { color: #8173aa; font-weight: 800; }
.about-version strong { font-size: 1rem; font-weight: 950; }
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.about-card {
  --about-tone: #176da8;
  --about-soft: #edf7fd;
  min-width: 0;
  padding: 20px;
  border: 1px solid #d4e2ed;
  border-radius: 21px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 25px rgba(31, 77, 117, .06);
}
.about-card--green { --about-tone:#198c55; --about-soft:#ecf9f2; }
.about-card--purple { --about-tone:#7055bd; --about-soft:#f5f1ff; }
.about-card--orange { --about-tone:#c8790b; --about-soft:#fff6e9; }
.about-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  color: var(--about-tone);
}
.about-card__title .material-symbols-rounded {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--about-tone);
  background: var(--about-soft);
  font-size: 23px;
  animation: navIconFloat 4.8s ease-in-out infinite;
}
.about-card h2 { margin: 0; font-size: 1.02rem; font-weight: 950; }
.about-card p { margin: 0; color: #5e7589; font-size: .9rem; line-height: 1.58; }
.about-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid #cedfea;
  border-radius: 21px;
  background: linear-gradient(145deg, #fff, #f3f9fd);
  box-shadow: 0 10px 25px rgba(31, 77, 117, .06);
}
.about-author__copy { display: grid; gap: 3px; }
.about-author__copy strong { color: #153f63; font-size: .95rem; }
.about-author__copy span { color: #6a8193; font-size: .8rem; }
.about-author .author-pill { margin: 0; }

/* reforço visual para os quatro cards finais do roteiro */
.roadmap-insights-wrap { margin-top: 22px; }
.roadmap-insights-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: #174a7d;
  font-size: 1.05rem;
  font-weight: 950;
}
.roadmap-insights-heading .material-symbols-rounded { color: #7557bd; }
.roadmap-insights { margin-top: 0 !important; }
.roadmap-insight { min-height: 210px; }

@media (max-width: 820px) {
  body { padding-bottom: calc(var(--app-bottom-nav-offset, 72px) + 14px + var(--safe-bottom)); }
  .mobile-nav {
    bottom: 0;
    width: 100%;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
  }
  .about-hero { grid-template-columns: auto minmax(0, 1fr); }
  .about-version { grid-column: 1 / -1; grid-template-columns: auto auto auto; justify-content: center; justify-items: start; width: 100%; min-width: 0; }
  .about-grid { grid-template-columns: 1fr; }
  .about-author { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .app-nav__settings { width: 38px; height: 38px; border-radius: 12px; }
  .mobile-nav__link { font-size: .64rem; padding-inline: 3px; }
  .about-shell { width: min(100% - 16px, 1120px); padding-top: 10px; }
  .about-hero { grid-template-columns: 1fr; padding: 18px; border-radius: 22px; }
  .about-hero__icon { width: 58px; height: 58px; border-radius: 18px; }
  .about-version { grid-column: auto; }
  .about-card { padding: 17px; border-radius: 18px; }
}

/* v2026.3.2 — quarta página na navegação e integração da Norma */
.app-nav__link--norma,
.mobile-nav__link--norma { --nav-icon-color: #d05d44; }

.mobile-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(820px, calc(100% - 18px));
}

.norma-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(208, 93, 68, .08), transparent 28%),
    radial-gradient(circle at 95% 5%, rgba(34, 126, 181, .08), transparent 30%),
    linear-gradient(180deg, #f8fbfe 0, #eef5fb 100%);
}
.norma-page .page-wrap {
  width: min(1540px, 100%);
  margin: 0 auto;
  padding-bottom: calc(var(--app-bottom-nav-offset, 72px) + 28px) !important;
}
.norma-app-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon meta action"
    "icon title action";
  align-items: center;
  gap: 2px 14px;
  margin: 0 8px 16px !important;
  padding: 15px 16px !important;
  border: 1px solid #d4e2ed;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 12%, rgba(208, 93, 68, .10), transparent 27%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,250,254,.96));
  box-shadow: 0 10px 28px rgba(31, 77, 117, .07);
}
.norma-app-header__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #efc6bd;
  border-radius: 16px;
  color: #bf4e38;
  background: #fff3ef;
  font-size: 27px;
  animation: navIconFloat 4s ease-in-out infinite;
}
.norma-app-header .norma-simple-meta {
  grid-area: meta;
  margin: 0 !important;
  font-size: .72rem !important;
}
.norma-app-header .norma-simple-title {
  grid-area: title;
  font-size: clamp(1.45rem, 2.1vw, 2.2rem) !important;
}
.norma-toggle-all {
  grid-area: action;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid #cdddea;
  border-radius: 13px;
  color: #18527c;
  background: rgba(255,255,255,.9);
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(31, 77, 117, .07);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.norma-toggle-all:hover {
  transform: translateY(-1px);
  border-color: #9fc7df;
  background: #eef8fd;
}
.norma-toggle-all .material-symbols-rounded {
  color: #247eb6;
  font-size: 20px;
}
.norma-toggle-all:hover .material-symbols-rounded { animation: navIconPop .58s ease; }
.norma-page .accordion-button .material-symbols-rounded,
.norma-page .norma-article h3::before { transition: transform .2s ease; }
.norma-page .accordion-item:hover .accordion-button::before { animation: navIconPop .58s ease; }

.about-author__copy:has(> strong:only-child) { align-self: center; }

@media (max-width: 820px) {
  .mobile-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .norma-page .page-wrap { padding-inline: 10px !important; }
  .norma-app-header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon meta"
      "icon title"
      "action action";
  }
  .norma-toggle-all { width: 100%; margin-top: 9px; }
}
@media (max-width: 520px) {
  .mobile-nav__link { font-size: .59rem; }
  .mobile-nav__link .material-symbols-rounded { font-size: 21px; }
  .norma-app-header { margin-inline: 0 !important; padding: 13px !important; border-radius: 17px; }
  .norma-app-header__icon { width: 44px; height: 44px; border-radius: 14px; font-size: 24px; }
  .norma-app-header .norma-simple-title { font-size: 1.32rem !important; }
  .norma-toggle-all { min-height: 40px; }
}

/* v2026.3.4 — ações compactas na appbar */
.app-nav__actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.app-nav__action {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #d5e3ed;
  border-radius: 13px;
  color: #698095;
  background: rgba(255,255,255,.88);
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(25, 72, 106, .07);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.app-nav__action .material-symbols-rounded { font-size: 22px; }
.app-nav__info .material-symbols-rounded {
  color: #1779ba;
  animation: navIconFloat 4.6s ease-in-out infinite;
}
.app-nav__info:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #1684c7, #0f5f96);
  box-shadow: 0 8px 18px rgba(20, 107, 162, .2);
  transform: translateY(-1px);
}
.app-nav__info:hover .material-symbols-rounded { color: #fff; animation: navIconPop .58s ease; }
.app-nav__settings { flex-basis: 40px; }

@media (max-width: 520px) {
  .app-nav__actions { gap: 5px; }
  .app-nav__action,
  .app-nav__settings { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
}

/* Roteiro sem atalhos redundantes dentro dos cards */
.roadmap-step__footer { justify-content: flex-start; }

/* v2026.3.5 — ações da appbar somente com ícones */
.app-nav__actions { gap: 4px; }
.app-nav__action,
.app-nav__settings {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-nav__action:hover,
.app-nav__action:focus-visible,
.app-nav__settings:hover,
.app-nav__settings:focus-visible,
.app-nav__settings.is-active {
  color: inherit !important;
  background: rgba(224, 238, 248, .72) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}
.app-nav__info .material-symbols-rounded { color: #1479b8 !important; }
.app-nav__legend .material-symbols-rounded { color: #168f72 !important; animation: navIconFloat 4.9s ease-in-out infinite; }
.app-nav__settings .material-symbols-rounded { color: #735ac4 !important; }
.app-nav__action:hover .material-symbols-rounded,
.app-nav__action:focus-visible .material-symbols-rounded,
.app-nav__settings:hover .material-symbols-rounded,
.app-nav__settings:focus-visible .material-symbols-rounded,
.app-nav__settings.is-active .material-symbols-rounded {
  color: inherit !important;
  animation: navIconPop .58s ease !important;
}
@media (max-width: 520px) {
  .app-nav__actions { gap: 1px; }
  .app-nav__action,
  .app-nav__settings { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
}

/* v2026.3.17 — página Norma alinhada ao Guia, Roteiro e Jornada/Férias */
.norma-page {
  background: linear-gradient(180deg, #eef7fd 0%, #e7f1f9 100%);
}
.norma-shell {
  width: min(1540px, calc(100% - 28px));
  margin: 12px auto;
  padding: 0 0 calc(var(--app-bottom-nav-offset, 72px) + 28px + env(safe-area-inset-bottom));
}
.norma-paper {
  position: relative;
  overflow: hidden;
  padding: 24px 24px 28px 54px;
  border: 2px solid #cad8e4;
  border-radius: 28px;
  background:
    repeating-linear-gradient(0deg, rgba(46, 91, 131, .07) 0 1px, transparent 1px 30px),
    linear-gradient(90deg, rgba(255,255,255,.985), rgba(254,252,247,.985));
  box-shadow: 0 24px 70px rgba(26, 50, 80, .12);
}
.norma-paper::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 33px;
  width: 2px;
  background: rgba(236,72,153,.22);
  pointer-events: none;
}
.norma-paper__spiral {
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: 20px;
  width: 22px;
  border-radius: 18px;
  background: repeating-linear-gradient(0deg, #263341 0 5px, transparent 5px 32px);
  opacity: .82;
  pointer-events: none;
}
.norma-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  padding: 4px 2px 18px;
  border-bottom: 2px solid rgba(31, 85, 128, .24);
}
.norma-page-header__main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.norma-page-header__icon {
  display: grid;
  place-items: center;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border: 2px solid #efc5b8;
  border-radius: 18px;
  color: #c95e42;
  background: linear-gradient(180deg, #fff8f4, #ffede6);
  box-shadow: 0 8px 20px rgba(201, 94, 66, .12);
  font-size: 32px;
  animation: navIconFloat 3.8s ease-in-out infinite;
}
.norma-page-kicker {
  margin-bottom: 2px;
  color: #985040;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.norma-page-header h1 {
  margin: 0 0 4px;
  color: #1e4f82;
  font-family: "Segoe Script", "Brush Script MT", "Caveat", cursive;
  font-size: clamp(1.9rem, 3.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.05;
}
.norma-page-header p {
  max-width: 820px;
  margin: 0;
  color: #5f7488;
  font-size: .92rem;
  line-height: 1.5;
}
.norma-page-meta {
  display: grid;
  gap: 8px;
  min-width: 230px;
  padding: 12px 14px;
  border: 2px dashed #d9c4bd;
  border-radius: 18px;
  background: rgba(255,255,255,.76);
}
.norma-page-meta span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #435f76;
  font-size: .76rem;
}
.norma-page-meta b { color: #9b5947; font-weight: 900; }
.norma-accordion {
  display: grid;
  gap: 12px;
}
.norma-accordion .accordion-item {
  overflow: hidden;
  border: 2px solid #cfdeea;
  border-radius: 18px !important;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(24, 60, 92, .07);
}
.norma-accordion .accordion-item:nth-child(4n + 1) { border-color: #b9d9ee; }
.norma-accordion .accordion-item:nth-child(4n + 2) { border-color: #bfe3d0; }
.norma-accordion .accordion-item:nth-child(4n + 3) { border-color: #dbcdf2; }
.norma-accordion .accordion-item:nth-child(4n + 4) { border-color: #f0d2b4; }
.norma-accordion .accordion-button {
  min-height: 62px;
  padding: 13px 16px;
  color: #173f61;
  background: linear-gradient(180deg, #fbfdff, #f2f8fc);
  font-size: .9rem;
  font-weight: 900 !important;
  box-shadow: none !important;
}
.norma-accordion .accordion-item:nth-child(4n + 2) .accordion-button { background: linear-gradient(180deg, #fbfffd, #edf9f3); }
.norma-accordion .accordion-item:nth-child(4n + 3) .accordion-button { background: linear-gradient(180deg, #fdfbff, #f5efff); }
.norma-accordion .accordion-item:nth-child(4n + 4) .accordion-button { background: linear-gradient(180deg, #fffdfa, #fff4e8); }
.norma-accordion .accordion-button:not(.collapsed) {
  color: #0f527d;
  border-bottom: 1px solid #dce7ef;
}
.norma-accordion .accordion-body {
  padding: 14px;
  background: rgba(255,255,255,.92);
}
.norma-accordion .norma-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.norma-article {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dbe6ee;
  border-radius: 16px;
  background: #fbfdff;
  box-shadow: 0 5px 14px rgba(28, 65, 96, .04);
}
.norma-article.emphasis {
  border-color: #b9d9ee;
  background: linear-gradient(180deg, #f9fdff, #eef8fd);
}
.norma-article h3 {
  margin: 0 0 8px;
  color: #164b76;
  font-size: .95rem;
  font-weight: 950;
}
.norma-article p,
.norma-article li,
.norma-article td,
.norma-article th {
  color: #435d72;
  font-size: .82rem;
  line-height: 1.55;
}
.norma-article ol,
.norma-article ul { padding-left: 1.25rem; }
.norma-article table {
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 12px;
  background: #fff;
}
.norma-context-pill {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #7b4b1a;
  background: #fff1dc;
  font-size: .68rem;
  font-weight: 900;
}
.app-nav__norma-toggle { color: #d1664c; }
.app-nav__norma-toggle:hover,
.app-nav__norma-toggle:focus-visible { color: #a84531; }
@media (max-width: 900px) {
  .norma-page-header { grid-template-columns: 1fr; }
  .norma-page-meta { grid-template-columns: repeat(2, minmax(0,1fr)); min-width: 0; }
  .norma-page-meta span { display: grid; gap: 2px; }
}
@media (max-width: 720px) {
  .norma-shell { width: 100%; margin: 0; }
  .norma-paper {
    padding: 14px 10px 18px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, #f8fbfe, #f2f7fb);
    box-shadow: none;
  }
  .norma-paper::before,
  .norma-paper__spiral { display: none; }
  .norma-page-header {
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 4px 14px;
  }
  .norma-page-header__icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 26px;
  }
  .norma-page-kicker { font-size: .62rem; }
  .norma-page-header h1 {
    font-family: inherit;
    font-size: 1.45rem;
    font-weight: 950;
  }
  .norma-page-header p { font-size: .78rem; }
  .norma-page-meta { padding: 10px; border-radius: 15px; }
  .norma-accordion { gap: 9px; }
  .norma-accordion .accordion-button { min-height: 56px; padding: 11px 12px; font-size: .8rem; }
  .norma-accordion .accordion-body { padding: 10px; }
  .norma-accordion .norma-grid { grid-template-columns: 1fr; gap: 9px; }
  .norma-article { padding: 11px; border-radius: 14px; }
  .norma-article p,
  .norma-article li,
  .norma-article td,
  .norma-article th { font-size: .76rem; }
}

/* ========================================================================== */
/* v2026.3.18 — apresentação inicial, reabertura pela appbar e Norma refinada */
/* ========================================================================== */

.app-nav__presentation-trigger {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: transparent;
  cursor: pointer;
}
.app-nav__presentation-trigger img {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(20, 88, 136, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.app-nav__presentation-trigger:hover img,
.app-nav__presentation-trigger:focus-visible img {
  transform: translateY(-1px) scale(1.025);
  box-shadow: 0 8px 20px rgba(20, 88, 136, .24);
}
.app-nav__presentation-trigger:focus-visible {
  outline: 3px solid rgba(36, 127, 184, .22);
  outline-offset: 3px;
}
.app-nav__brand-copy {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--app-ink);
  text-decoration: none;
}
.app-nav__brand-copy:hover strong { color: var(--app-blue); }

body.app-presentation-open { overflow: hidden; }
.app-presentation {
  position: fixed;
  z-index: 2147483200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vw, 24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.app-presentation[hidden] { display: none; }
.app-presentation.is-open {
  opacity: 1;
  visibility: visible;
}
.app-presentation__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(9, 31, 50, .54);
  backdrop-filter: blur(7px);
}
.app-presentation__dialog {
  position: relative;
  display: grid;
  width: min(900px, 100%);
  max-height: min(92vh, 860px);
  overflow: auto;
  border: 1px solid #cbdfea;
  border-radius: 26px;
  background:
    repeating-linear-gradient(0deg, rgba(46, 91, 131, .045) 0 1px, transparent 1px 31px),
    linear-gradient(180deg, #fffefa, #fbfdff);
  box-shadow: 0 34px 110px rgba(7, 28, 48, .38);
  transform: translateY(14px) scale(.985);
  transition: transform .2s ease;
}
.app-presentation.is-open .app-presentation__dialog {
  transform: translateY(0) scale(1);
}
.app-presentation__header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #dce8f0;
  background: rgba(250, 253, 255, .96);
  backdrop-filter: blur(12px);
}
.app-presentation__heading {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.app-presentation__heading-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #b9d9ee;
  border-radius: 14px;
  color: #1678b8;
  background: #e8f4fb;
  font-size: 24px;
}
.app-presentation__heading > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.app-presentation__heading small {
  color: #6a8195;
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.app-presentation__heading strong {
  color: #153f61;
  font-size: 1.06rem;
  font-weight: 950;
}
.app-presentation__close {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  color: #698095;
  background: #eef4f8;
  cursor: pointer;
}
.app-presentation__close:hover { color: #a73048; background: #fff0f3; }
.app-presentation__close[hidden] { display: none; }
.app-presentation__body {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.app-presentation__hero {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 17px 18px;
  border: 1px solid #cfe1ee;
  border-radius: 20px;
  background: linear-gradient(135deg, #f2f9fe, #eef8f4);
}
.app-presentation__hero-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid #a9d8c0;
  border-radius: 18px;
  color: #13875f;
  background: #e9f9f1;
  font-size: 32px;
  animation: navIconFloat 3.8s ease-in-out infinite;
}
.app-presentation__kicker {
  display: inline-flex;
  margin-bottom: 3px;
  color: #21785e;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.app-presentation__hero h2 {
  margin: 0 0 5px;
  color: #153f61;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.13;
  font-weight: 950;
}
.app-presentation__hero p {
  margin: 0;
  color: #5d768b;
  font-size: .9rem;
  line-height: 1.55;
}
.app-presentation__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.app-presentation__card {
  --presentation-tone: #217cb5;
  --presentation-soft: #ecf7fd;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--presentation-tone) 25%, #dbe6ef);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, var(--presentation-soft));
}
.app-presentation__card > .material-symbols-rounded {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--presentation-tone);
  background: var(--presentation-soft);
  font-size: 22px;
}
.app-presentation__card div { display: grid; gap: 4px; }
.app-presentation__card strong {
  color: #173f61;
  font-size: .88rem;
  font-weight: 950;
  line-height: 1.25;
}
.app-presentation__card p {
  margin: 0;
  color: #60798e;
  font-size: .76rem;
  line-height: 1.48;
}
.app-presentation__card.is-blue { --presentation-tone: #197db8; --presentation-soft: #eaf6fd; }
.app-presentation__card.is-orange { --presentation-tone: #c47809; --presentation-soft: #fff4df; }
.app-presentation__card.is-purple { --presentation-tone: #7556c6; --presentation-soft: #f1edff; }
.app-presentation__card.is-green { --presentation-tone: #16875e; --presentation-soft: #e9f8f1; }
.app-presentation__notice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 12px 14px;
  border: 1px dashed #c7d9e6;
  border-radius: 16px;
  color: #4f6d84;
  background: rgba(247, 251, 254, .92);
}
.app-presentation__notice .material-symbols-rounded { color: #217db7; font-size: 22px; }
.app-presentation__notice p { margin: 0; font-size: .78rem; line-height: 1.48; }
.app-presentation__footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #dce8f0;
  background: rgba(250, 253, 255, .97);
  backdrop-filter: blur(12px);
}
.app-presentation__ack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #0f8c61, #17ad76);
  box-shadow: 0 10px 22px rgba(18, 139, 95, .22);
  font-size: .86rem;
  font-weight: 950;
  cursor: pointer;
}
.app-presentation__ack:hover { transform: translateY(-1px); box-shadow: 0 13px 26px rgba(18, 139, 95, .28); }
.app-presentation__ack .material-symbols-rounded { font-size: 21px; }
.app-presentation[data-mode="required"] .app-presentation__backdrop { cursor: default; }

.about-card--blue { --about-tone:#197db8; --about-soft:#edf7fd; }
.about-card--presentation { grid-column: 1 / -1; }
.about-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  justify-self: start;
  min-height: 40px;
  margin-top: 2px;
  padding: 8px 13px;
  border: 1px solid #bcd9ea;
  border-radius: 12px;
  color: #156b9f;
  background: #f4faff;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}
.about-card__action:hover { color: #0f527d; background: #eaf6fd; transform: translateY(-1px); }
.about-card__action .material-symbols-rounded { font-size: 19px; }

/* Texto normativo com a mesma hierarquia visual dos demais conteúdos. */
.norma-article > p {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 3px solid #9ccbe4;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, #f2f9fd, #fbfdff);
}
.norma-article > p:last-child { margin-bottom: 0; }
.norma-article ol,
.norma-article ul {
  display: grid;
  gap: 8px;
  margin: 9px 0 0;
  padding-left: 1.45rem;
}
.norma-article li {
  padding: 8px 10px;
  border: 1px solid #e0eaf1;
  border-radius: 12px;
  background: #fff;
}
.norma-article li::marker {
  color: #1979b0;
  font-weight: 950;
}
.norma-article strong {
  color: #174b72;
  font-weight: 950;
}
.norma-article h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid #dce8f0;
}
.norma-article h3::before {
  content: "article";
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  color: #1979b0;
  background: #eaf6fd;
  font-family: "Material Symbols Rounded";
  font-size: 17px;
  font-weight: 400;
}
.norma-article.emphasis h3::before {
  content: "priority_high";
  color: #b66d08;
  background: #fff2dc;
}
.norma-article table thead th {
  color: #fff;
  background: #1d4c73;
}
.norma-article table tbody tr:nth-child(even) td { background: #f5f9fc; }
.norma-article table td,
.norma-article table th { padding: 8px 9px; vertical-align: top; }

@media (max-width: 720px) {
  .app-nav__presentation-trigger,
  .app-nav__presentation-trigger img {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .app-presentation { align-items: end; padding: 0; }
  .app-presentation__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
  }
  .app-presentation__header { padding: 12px 13px; }
  .app-presentation__body { gap: 10px; padding: 11px; }
  .app-presentation__hero {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    padding: 13px;
    border-radius: 17px;
  }
  .app-presentation__hero-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 26px;
  }
  .app-presentation__hero h2 { font-size: 1.16rem; }
  .app-presentation__hero p { font-size: .77rem; }
  .app-presentation__grid { grid-template-columns: 1fr; gap: 8px; }
  .app-presentation__card {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 0;
    padding: 11px;
    border-radius: 15px;
  }
  .app-presentation__card > .material-symbols-rounded {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 20px;
  }
  .app-presentation__card strong { font-size: .82rem; }
  .app-presentation__card p { font-size: .72rem; }
  .app-presentation__notice { padding: 10px 11px; }
  .app-presentation__notice p { font-size: .72rem; }
  .app-presentation__footer { padding: 10px 11px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .app-presentation__ack { width: 100%; min-height: 44px; }
  .about-card--presentation { grid-column: auto; }
  .about-card__action { width: 100%; }
  .norma-article > p { padding: 9px 10px; }
  .norma-article ol,
  .norma-article ul { gap: 7px; padding-left: 1.25rem; }
  .norma-article li { padding: 8px 9px; }
}


/* v2026.3.21 — acesso bloqueado até a ciência das condições de uso */
html.app-access-locked,
html.app-access-locked body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.app-access-locked .app-presentation {
  pointer-events: auto;
}

.app-presentation[data-mode="required"] .app-presentation__backdrop {
  cursor: not-allowed;
}

.app-presentation.is-attention .app-presentation__dialog {
  animation: presentationRequiredAttention .38s ease;
}

@keyframes presentationRequiredAttention {
  0%, 100% { transform: translateY(0) scale(1); }
  24% { transform: translateX(-5px) scale(1); }
  48% { transform: translateX(5px) scale(1); }
  72% { transform: translateX(-3px) scale(1); }
}

/* v2026.3.21 — redefinição da aplicação e confirmação visual */
.about-card--danger {
  --about-tone: #b64a58;
  --about-soft: #fff0f2;
}
.about-card--reset { grid-column: 1 / -1; }
.about-card__action--danger {
  border-color: #efc1c8;
  color: #a33b4b;
  background: #fff6f7;
}
.about-card__action--danger:hover {
  color: #822b39;
  background: #ffecef;
}
body.app-reset-open { overflow: hidden; }
.app-reset-modal {
  position: fixed;
  z-index: 2147483600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.app-reset-modal[hidden] { display: none; }
.app-reset-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.app-reset-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(11, 31, 50, .48);
  backdrop-filter: blur(5px);
  cursor: pointer;
}
.app-reset-modal__dialog {
  position: relative;
  width: min(100%, 610px);
  max-height: min(88vh, 720px);
  overflow: auto;
  border: 1px solid #d8dfe7;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(9, 31, 53, .34);
  transform: translateY(10px) scale(.985);
  transition: transform .2s ease;
}
.app-reset-modal.is-open .app-reset-modal__dialog { transform: translateY(0) scale(1); }
.app-reset-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid #e4e9ee;
  background: rgba(255, 252, 253, .97);
  backdrop-filter: blur(10px);
}
.app-reset-modal__header > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app-reset-modal__header > div > .material-symbols-rounded {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: #aa3d4e;
  background: #fff0f2;
  font-size: 24px;
}
.app-reset-modal__header > div > span { display: grid; gap: 1px; min-width: 0; }
.app-reset-modal__header small { color: #8a7180; font-size: .68rem; font-weight: 850; }
.app-reset-modal__header strong { color: #55303a; font-size: .98rem; font-weight: 950; }
.app-reset-modal__close {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  color: #708296;
  background: #eef4f8;
  cursor: pointer;
}
.app-reset-modal__close:hover { color: #a73048; background: #fff0f3; }
.app-reset-modal__body { display: grid; gap: 11px; padding: 14px; }
.app-reset-modal__hero {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #eadce0;
  border-radius: 17px;
  background: linear-gradient(145deg, #fff, #fff7f8);
}
.app-reset-modal__hero > .material-symbols-rounded {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #a83c4d;
  background: #ffecef;
  font-size: 25px;
}
.app-reset-modal__hero strong { display: block; margin-bottom: 4px; color: #5c3039; font-size: .95rem; font-weight: 950; }
.app-reset-modal__hero p,
.app-reset-modal__notice p { margin: 0; color: #6c707c; font-size: .82rem; line-height: 1.55; }
.app-reset-modal__notice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 12px 13px;
  border: 1px solid #efd9aa;
  border-radius: 15px;
  background: #fff9ec;
}
.app-reset-modal__notice .material-symbols-rounded { color: #b77910; font-size: 20px; }
.app-reset-modal__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 12px 14px;
  border-top: 1px solid #e4e9ee;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
}
.app-reset-modal__cancel,
.app-reset-modal__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 13px;
  font-size: .8rem;
  font-weight: 900;
  cursor: pointer;
}
.app-reset-modal__cancel {
  border: 1px solid #d9e3eb;
  color: #60778b;
  background: #f7fafc;
}
.app-reset-modal__confirm {
  border: 1px solid #aa3d4e;
  color: #fff;
  background: linear-gradient(135deg, #a83d4d, #c05261);
  box-shadow: 0 10px 22px rgba(168, 61, 77, .22);
}
.app-reset-modal__confirm:hover { transform: translateY(-1px); box-shadow: 0 13px 25px rgba(168, 61, 77, .28); }
.app-reset-modal__confirm.is-loading .material-symbols-rounded { animation: resetSpin .9s linear infinite; }
@keyframes resetSpin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .about-card--reset { grid-column: auto; }
  .app-reset-modal { align-items: end; padding: 0; }
  .app-reset-modal__dialog { width: 100%; max-height: 90vh; border-radius: 22px 22px 0 0; }
  .app-reset-modal__footer { display: grid; grid-template-columns: .8fr 1.2fr; }
  .app-reset-modal__cancel,
  .app-reset-modal__confirm { width: 100%; padding-inline: 9px; }
}

/* v2026.3.23 — Sobre mais clean, grade 3×2 e redefinição com nova ciência */
.about-hero {
  gap: 16px;
  padding: 22px 24px;
  border-color: #d7e4ed;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 28px rgba(31, 77, 117, .07);
}
.about-hero::before,
.about-hero::after { display: none !important; }
.about-hero__icon {
  width: 58px;
  height: 58px;
  border-color: #c8dfea;
  border-radius: 17px;
  background: #f1f8fc;
  box-shadow: none;
}
.about-hero__icon .material-symbols-rounded {
  font-size: 31px;
  animation: none;
}
.about-kicker {
  color: #53728b;
  font-size: .7rem;
  letter-spacing: .075em;
}
.about-kicker .material-symbols-rounded { color: #267db3; font-size: 18px; }
.about-hero h1 {
  margin: 3px 0 5px;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: -.03em;
}
.about-hero p {
  max-width: 720px;
  font-size: .88rem;
  line-height: 1.5;
}
.about-version {
  grid-template-columns: auto auto;
  justify-items: start;
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
  min-width: 0;
  padding: 9px 12px;
  border-color: #ddd9ef;
  border-radius: 14px;
  background: #faf8ff;
}
.about-version .material-symbols-rounded {
  grid-row: 1 / 3;
  font-size: 22px;
}
.about-version small { font-size: .67rem; }
.about-version strong { font-size: .9rem; }

.about-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.about-card,
.about-card--presentation,
.about-card--reset {
  grid-column: auto;
}
.about-card {
  display: flex;
  flex-direction: column;
  min-height: 188px;
}
.about-card p { flex: 1 1 auto; }
.about-card__action {
  align-self: flex-start;
  margin-top: 13px;
}

@media (max-width: 820px) {
  .about-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .about-version {
    grid-column: 1 / -1;
    width: auto;
    justify-self: start;
  }
  .about-grid { grid-template-columns: 1fr; }
  .about-card { min-height: 0; }
}

@media (max-width: 520px) {
  .about-hero {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
  }
  .about-hero__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .about-hero__icon .material-symbols-rounded { font-size: 27px; }
  .about-kicker { font-size: .64rem; }
  .about-hero h1 { font-size: 1.45rem; }
  .about-hero p { grid-column: 1 / -1; font-size: .8rem; }
  .about-version {
    grid-column: 1 / -1;
    padding: 8px 10px;
  }
}


/* v2026.3.23 — página Sobre mais didática e versão ao lado do autor */
.about-hero {
  grid-template-columns: 58px minmax(0,1fr) !important;
  align-items: center;
}
.about-hero > div { min-width: 0; }
.about-hero p { max-width: 900px; }
.about-grid { align-items: stretch; }
.about-card {
  min-height: 245px;
  gap: 12px;
}
.about-card__title { margin-bottom: 0; }
.about-card > p { flex: 0 0 auto; }
.about-feature-list,
.about-step-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-feature-list li {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  color: #49677f;
  font-size: .78rem;
  line-height: 1.4;
}
.about-feature-list .material-symbols-rounded {
  color: var(--about-tone);
  font-size: 18px;
}
.about-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}
.about-chip-list span {
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--about-tone) 20%, #dce8f0);
  border-radius: 999px;
  background: var(--about-soft);
  color: var(--about-tone);
  font-size: .69rem;
  font-weight: 900;
}
.about-step-list { margin-top: auto; }
.about-step-list li {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid #e2dcf2;
  border-radius: 12px;
  background: #fcfaff;
}
.about-step-list li > b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #eee8fb;
  color: #7055bd;
  font-size: .78rem;
}
.about-step-list li > span { display: grid; gap: 1px; }
.about-step-list strong { color: #173f61; font-size: .76rem; }
.about-step-list small { color: #667d90; font-size: .68rem; line-height: 1.32; }
.about-note,
.about-action-hint {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: start;
  gap: 8px;
  margin-top: auto;
  padding: 10px;
  border: 1px solid #efdcb9;
  border-radius: 13px;
  background: #fff9ef;
  color: #6f5a36;
  font-size: .72rem;
  line-height: 1.45;
}
.about-note .material-symbols-rounded,
.about-action-hint .material-symbols-rounded { color: #bd7505; font-size: 19px; }
.about-action-hint {
  border-color: #d5e5ef;
  background: #f5faff;
  color: #567288;
}
.about-action-hint .material-symbols-rounded { color: #247db5; }
.about-action-hint.is-danger {
  border-color: #f0d4d8;
  background: #fff6f7;
  color: #84545c;
}
.about-action-hint.is-danger .material-symbols-rounded { color: #b64a58; }
.about-card__action { margin-top: 0; }
.about-author {
  gap: 14px;
}
.about-author__pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.about-version-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #ddd5ef;
  border-radius: 999px;
  background: #faf8ff;
  color: #6f54b5;
  font-size: .74rem;
  font-weight: 950;
  white-space: nowrap;
}
.about-version-pill .material-symbols-rounded { font-size: 17px; }
@media (max-width: 820px) {
  .about-hero { grid-template-columns: 52px minmax(0,1fr) !important; }
  .about-card { min-height: 0; }
}
@media (max-width: 620px) {
  .about-author { align-items: stretch; }
  .about-author__pills { justify-content: flex-start; }
  .about-author__pills .author-pill { flex: 1 1 auto; justify-content: center; }
  .about-version-pill { flex: 0 0 auto; }
}
@media (max-width: 430px) {
  .about-hero { grid-template-columns: 46px minmax(0,1fr) !important; }
  .about-hero__icon { width: 46px; height: 46px; }
  .about-hero p { grid-column: 1 / -1; }
  .about-author__pills { display: grid; grid-template-columns: minmax(0,1fr) auto; width: 100%; }
  .about-author__pills .author-pill { min-width: 0; padding-inline: 9px; }
  .about-author__pills .author-pill > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .about-version-pill { padding-inline: 9px; }
}

/* v2026.3.41 — instalação PWA */
.app-nav__install { color:#11856f; }
.app-nav__install:hover { color:#08705e; background:#eaf8f3; }
.app-nav__install[hidden] { display:none !important; }
.app-nav__install:disabled { opacity:.55; cursor:wait; }