:root {
  color-scheme: light;
  --background: #fcfcf8;
  --surface: #fff;
  --green: #176b50;
  --deep: #164c3b;
  --ink: #124533;
  --body: #25362c;
  --muted: #51665c;
  --line: #d8e2d9;
  --gold: #d7a93c;
  --alert: #8c3029;
  --alert-line: #be4f46;
  --alert-bg: #fff2ee;
  --urgent-ink: #653c81;
  --urgent-line: #875ba8;
  --urgent-border: #d8c5e9;
  --urgent-bg: #f4effa;
  --radius: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--body);
  font: 1rem/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, p, ul, ol { margin-block-start: 0; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.03em; }
h3 { font-size: 1.22rem; margin-block: 1.65rem .55rem; }
h4 { font-size: 1.06rem; margin-block-end: .45rem; }
p { margin-block-end: .9rem; }
a { color: var(--green); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .15em; }
:focus-visible { outline: .18rem solid #9b480d; outline-offset: .22rem; }
[id] { scroll-margin-block-start: 1rem; }
svg { flex: none; }
.wrap { width: min(100% - 1.5rem, 72rem); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 5;
  inset: .5rem auto auto .5rem;
  padding: .65rem 1rem;
  background: var(--surface);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.site-header {
  position: relative;
  background: var(--background) url("../assets/faixas.svg") no-repeat right top / clamp(9rem, 35vw, 25rem) auto;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 3.75rem; }
.brand, .site-menu summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-weight: 750;
}
.brand { text-decoration: none; line-height: 1.1; }
.brand img { flex: none; width: clamp(2.15rem, 8vw, 3rem); height: auto; }
.brand-text { display: grid; gap: .18rem; }
.brand strong { color: var(--ink); font-size: clamp(1rem, 4.3vw, 1.55rem); letter-spacing: -.045em; }
.brand strong span { color: #a82d27; }
.brand small { color: var(--deep); font-size: clamp(.65rem, 2.3vw, .8rem); font-weight: 600; }
.site-menu { margin-block: .35rem; }
.site-menu summary { padding: .25rem .4rem; border-radius: .65rem; white-space: nowrap; background: var(--background); }
.site-menu summary svg { width: 1.35rem; height: 1.35rem; }
.site-menu[open] summary { background: #e8f2eb; }
.site-menu nav {
  position: absolute;
  z-index: 2;
  inset: 3.6rem max(.75rem, (100% - 72rem) / 2) auto auto;
  width: min(22rem, 100% - 1.5rem);
  max-height: 75vh;
  overflow-y: auto;
  padding: .45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 .8rem 2rem #18392e22;
}
.site-menu ul, .quick ul { list-style: none; margin: 0; padding: 0; }
.site-menu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .45rem .65rem;
  border-radius: .5rem;
  text-decoration: none;
}
.site-menu a:hover, .site-menu a:focus-visible { background: #e8f2eb; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: center;
  gap: .4rem;
  margin-block: .65rem 1rem;
}
.hero-art {
  display: block;
  width: 100%;
  height: auto;
  /* Dissolve a borda inferior da ilustração no fundo da página. */
  -webkit-mask-image: linear-gradient(to bottom, #000 83%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 83%, transparent 100%);
}
.hero h1 {
  margin-block-end: .55rem;
  font-size: clamp(1.4rem, 6.1vw, 4.25rem);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: 1.1;
}
.hero h1 span {
  padding-inline: .13em;
  margin-inline-start: -.13em;
  border-radius: .34em;
  background: #f9dfa0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero p { max-width: 44ch; margin: 0; line-height: 1.4; }
.hero-copy::after {
  content: "";
  display: block;
  width: 2.8rem;
  height: .18rem;
  margin-block-start: .65rem;
  border-radius: 1rem;
  background: var(--gold);
  transform: rotate(-4deg);
}

.quick { margin-block-end: .8rem; }
.quick h2, .related h2 { margin-block-end: .55rem; font-size: clamp(1.24rem, 3.2vw, 1.65rem); }
.quick h2::after {
  content: "";
  display: block;
  width: 2.8rem;
  height: .15rem;
  margin-block-start: .22rem;
  border-radius: 1rem;
  background: var(--alert-line);
}
.quick ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.quick li { display: flex; }
.shortcut {
  --card-accent: var(--green);
  --card-bg: #e8f2e8;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .4rem;
  min-height: 3.4rem;
  padding: .52rem .42rem;
  border-inline-start: .24rem solid var(--card-accent);
  border-radius: .75rem;
  background: var(--card-bg);
  color: var(--ink);
  line-height: 1.18;
  text-decoration: none;
}
.shortcut:hover { box-shadow: inset 0 0 0 1px var(--card-accent); }
.shortcut--testagem { --card-accent: #805905; --card-bg: #f9f1dd; border-inline-start-color: var(--gold); }
.shortcut--urgencia { --card-accent: #a82d27; --card-bg: #faeae6; }
.shortcut-icon { display: grid; place-items: center; color: var(--card-accent); }
.shortcut-icon svg { width: clamp(1.35rem, 5.2vw, 2.8rem); height: auto; }
.shortcut-copy { display: grid; gap: .23rem; }
.shortcut strong { font-size: clamp(.94rem, 2.2vw, 1.17rem); font-weight: 800; }
.shortcut small, .about-link small { color: var(--body); font-size: .82rem; line-height: 1.22; }
.shortcut-arrow {
  display: none;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  color: white;
  background: var(--card-accent);
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 750;
}

.urgent {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding: .8rem;
  border: 1px solid var(--urgent-border);
  border-inline-start: .28rem solid var(--urgent-line);
  border-radius: .75rem;
  background: var(--urgent-bg);
  color: #43334c;
}
.urgent > svg { color: var(--urgent-ink); width: 1.25rem; height: 1.25rem; }
.urgent h2 { color: var(--urgent-ink); margin: 0; font-size: 1.05rem; letter-spacing: 0; }
.urgent p { margin: 0; }
.urgent a, .top-link { display: inline-flex; gap: .35rem; align-items: center; min-height: 2.75rem; font-weight: 700; }
.urgent a { color: var(--urgent-ink); margin-block-end: .2rem; }
.urgent a svg, .top-link svg { width: 1.1rem; height: 1.1rem; }

.related { margin-block: 1rem; }
.related ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.related li { display: flex; }
.related li + li { border-inline-start: 1px solid var(--line); }
.related a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .2rem;
  min-height: 2.75rem;
  border-radius: .5rem;
  color: var(--ink);
  font-size: clamp(.76rem, 2.7vw, 1rem);
  font-weight: 730;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.related a:hover { text-decoration: underline; }
.related-icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.15rem;
  border-radius: .65rem;
  color: var(--green);
  background: #e8f2e8;
}
.related-icon svg { width: 1.5rem; height: 1.5rem; }
.related li:nth-child(2) .related-icon { color: #805905; background: #f9f1dd; }
.related li:nth-child(3) .related-icon { color: #a82d27; background: #faeae6; }

.about-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem;
  border-radius: .75rem;
  background: #e8f2e8;
  color: var(--ink);
  line-height: 1.25;
  text-decoration: none;
}
.about-link:hover strong { text-decoration: underline; }
.about-link small { display: block; margin-block-start: .2rem; }
.about-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: .13rem solid currentColor;
  border-radius: 50%;
  font-weight: 800;
}
.about-arrow { margin-inline-start: auto; font-size: 1.6rem; line-height: 1; }

.topics { display: grid; gap: 1rem; margin-block: 1.65rem 2.25rem; }
.topic { min-width: 0; padding: clamp(.8rem, 3vw, 2.1rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.topic-header { display: flex; gap: .65rem; align-items: center; margin-block-end: .85rem; }
.topic-header h2 { margin: 0; }
.topic-index {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  background: #e5f0e8;
  color: var(--deep);
  font-size: .85rem;
  font-weight: 750;
}
.topic-content { max-width: 76ch; }
.topic-content > :first-child { margin-block-start: 0; }
.topic-content > :last-child { margin-block-end: 0; }
.topic--urgencia { border-color: #e5b9b2; }
.topic--urgencia .topic-index { background: var(--alert-bg); color: var(--alert); }
.safety-note { padding: .75rem; border-inline-start: .22rem solid var(--alert-line); border-radius: .45rem; background: var(--alert-bg); }
.method { padding: .85rem; margin-block-end: .6rem; border: 1px solid var(--line); border-radius: .75rem; background: #fbfcf9; }
.with-icon {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.educational-icon {
  color: var(--green);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.method-illustration {
  float: inline-end;
  width: clamp(4.2rem, 20vw, 6rem);
  margin: .15rem 0 .4rem .65rem;
  text-align: center;
}
.method-illustration img {
  display: block;
  width: 100%;
  height: auto;
}
.method-illustration figcaption {
  margin-block-start: .2rem;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.2;
}
.method > p:last-child { margin-block-end: 0; }
.method > details { clear: both; border-block-start: 1px solid var(--line); }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.method summary, .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  min-height: 2.75rem;
  padding-block: .45rem;
  color: var(--deep);
  font-weight: 700;
  line-height: 1.4;
}
.method summary::after, .faq summary::after {
  content: "";
  width: .55rem;
  height: .55rem;
  flex: none;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  margin-inline-end: .15rem;
}
details[open] > summary::after { transform: rotate(225deg); }
.disclosure { padding-block: .35rem; }
.disclosure > :last-child { margin: 0; }
.faq { padding-inline: .8rem; border: 1px solid var(--line); border-radius: .7rem; margin-block-end: .5rem; }
.faq[open] { background: #f4f9f4; }
.faq .disclosure { padding-block-end: .85rem; }
.citacao {
  font-size: .75em;
  line-height: 0;
  white-space: nowrap;
}
.citacao a {
  padding-inline: .16em;
  font-weight: 700;
  text-underline-offset: .12em;
}
.references li:target {
  background: #e8f2e8;
  outline: 2px solid var(--green);
  outline-offset: .2rem;
}
#citacao-atual { scroll-margin-block-start: 30vh; }
.citation-return { display: none; }
.references li:target .citation-return {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 2.75rem;
  margin-block-start: .25rem;
  font-weight: 700;
}
.references { padding-inline-start: 1.65rem; }
.references li { padding: .65rem 0 .65rem .25rem; border-block-start: 1px solid var(--line); }

.site-footer {
  background: #e7efe6 url("../assets/caminhos.svg") no-repeat center bottom / max(100%, 46rem) auto;
  padding: 1rem 0 clamp(7.5rem, 17vw, 14rem);
}
.site-footer h2 { margin-block: .6rem; font-size: 1.35rem; }
.site-footer p { max-width: 76ch; }
.site-footer p:last-child { margin-bottom: 0; color: var(--muted); }

@media (max-width: 30rem) {
  .related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .related li:nth-child(3) { border-inline-start: 0; }
  .related a { min-height: 3.4rem; padding: .35rem .55rem; }
}

@media (max-width: 47.99rem) {
  /* No celular, evitar coluna de texto estreita e imagem isolada no meio. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: .35rem;
    margin-block: .55rem .9rem;
  }
  .hero-art {
    width: min(77%, 18rem);
    justify-self: center;
    margin-block: .05rem 0;
  }
}

@media (min-width: 48rem) {
  .wrap { width: min(100% - 3rem, 65rem); }
  .site-menu nav { inset-inline-end: max(1.5rem, (100% - 65rem) / 2); }
  .hero { margin-block: 1rem 1.25rem; gap: 1.4rem; }
  .hero p { font-size: 1.08rem; }
  .hero-art { max-width: 30rem; justify-self: end; }
  .quick ul { gap: .65rem; }
  .shortcut { grid-template-columns: auto minmax(0, 1fr) auto; padding: .7rem .8rem; gap: .65rem; }
  .shortcut-arrow { display: grid; }
  .urgent { padding: .85rem 1.1rem; gap: .8rem; }
  .urgent h2 { font-size: 1.15rem; }
  .topics { gap: 1.2rem; margin-block: 2rem 3rem; }
  /* Alinhar títulos e textos em uma coluna central mais ampla no tablet/desktop. */
  .topic-header, .topic-content { max-width: 94ch; margin-inline: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .shortcut, .site-menu a { transition: box-shadow .15s, background-color .15s; }
}