: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; }
}