/* Páginas de cada aula (pasta aulas). Usa os tokens e componentes de /styles.css. */

.nav { background: var(--ink); }
.nav.is-solid { box-shadow: 0 1px 0 rgba(243, 245, 251, .08); }
.nav__links { margin-inline: auto; }

/* TOPO */
.ahero { padding: calc(128px + env(safe-area-inset-top, 0px)) var(--margin) clamp(48px, 6vw, 88px); }
.ahero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; max-width: 1280px; margin-inline: auto; }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 14px; color: var(--on-dark-soft); }
.crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.crumbs a { text-decoration: none; display: inline-block; padding-block: 8px; }
.crumbs a:hover { color: var(--cyan); }
.ahero__eyebrow { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ahero__eyebrow span { padding: 6px 12px; border-radius: 999px; background: var(--veil); font-size: 14px; font-weight: 500; }
.ahero__eyebrow .is-key { background: var(--mint); color: var(--ink); font-weight: 600; }
.ahero h1 { margin-top: 18px; font-size: clamp(34px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.ahero__lead { margin-top: 20px; max-width: 58ch; font-size: var(--lead); line-height: 1.45; color: var(--on-dark-soft); }
.ahero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ahero__updated { margin-top: 18px; font-size: 14px; color: var(--on-dark-soft); }
.ahero__media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--ink-2); }
.ahero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ARTIGO */
.art { background: var(--paper); color: var(--on-light); padding: clamp(48px, 6vw, 96px) var(--margin); }
.art__grid { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: clamp(32px, 5vw, 80px); justify-content: center; }
.toc { position: sticky; top: 104px; align-self: start; font-size: 15px; }
.toc p { font-weight: 600; margin-bottom: 10px; }
.toc ol { display: grid; gap: 2px; border-left: 2px solid var(--mist); }
.toc a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--on-light-soft); text-decoration: none; }
.toc a:hover { color: var(--cobalt); border-left-color: var(--cobalt); }
.prose { min-width: 0; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 56px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.025em; scroll-margin-top: 96px; text-wrap: balance; }
.prose h3 { margin-top: 32px; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; }
.prose p, .prose li { color: var(--on-light); }
.prose ul, .prose ol:not(.steps) { display: grid; gap: 8px; padding-left: 1.2em; }
.prose ul { list-style: disc; }
.prose ol:not(.steps) { list-style: decimal; }
.prose li::marker { color: var(--cobalt); }
.prose a { color: var(--cobalt); text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose > h2:first-child { margin-top: 0; }

.tldr { padding: 26px 28px; border-radius: var(--r-lg); background: var(--white); border: 2px solid var(--mint); }
.tldr h2 { margin: 0 0 12px; font-size: 22px; }
.tldr ul { padding-left: 1.2em; }

.callout { padding: 20px 24px; border-radius: var(--r-md); background: var(--white); border-left: 6px solid var(--cobalt); }
.callout--warn { border-left-color: var(--amber); }
.callout p + p { margin-top: 10px; }

.tbl-wrap { overflow-x: auto; border-radius: var(--r-md); background: var(--white); }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.tbl caption { text-align: left; padding: 16px 20px 0; font-weight: 600; }
.tbl th, .tbl td { padding: 13px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mist); }
.tbl thead th { font-size: 14px; color: var(--on-light-soft); font-weight: 600; }
.tbl tr:last-child td { border-bottom: 0; }

.steps { display: grid; gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 18px 20px 18px 68px; border-radius: var(--r-md); background: var(--white); }
.steps li::before { content: counter(s); position: absolute; left: 18px; top: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-content: center; background: var(--ink); color: var(--on-dark); font-weight: 600; font-size: 15px; }

.prompt { padding: 20px 22px; border-radius: var(--r-md); background: var(--ink); color: var(--on-dark); font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt b { color: var(--cyan); font-weight: 600; }

.plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plan li { list-style: none; padding: 20px; border-radius: var(--r-md); background: var(--ink); color: var(--on-dark); }
.plan li strong { display: block; color: var(--cyan); margin-bottom: 6px; }
.prose .plan { padding: 0; }

.prose .faq__list { margin-top: 20px; padding: 0; list-style: none; }
.prose .faq__item[open] p { color: var(--on-dark); }
.faq__answer > * + * { margin-top: 10px; }
.faq__answer p, .faq__answer ul { padding: 0 26px; }
.faq__answer > :last-child { padding-bottom: 26px; }
.faq__answer ul { padding-left: 46px; }
.prose .faq__item[open] li { color: var(--on-dark); }

.sources { font-size: 15px; }
.sources li { color: var(--on-light-soft); }
.disclaimer { margin-top: 40px; font-size: 14px; color: var(--on-light-soft); }

/* OUTRAS AULAS + CTA FINAL */
.more { background: var(--ink); padding: clamp(56px, 7vw, 104px) var(--margin); }
.more__in { max-width: 1280px; margin-inline: auto; }
.more h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; }
.more__cta { margin-top: 18px; color: var(--on-dark-soft); max-width: 52ch; }
.more__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.more__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.more__list a { display: grid; gap: 6px; min-height: 100%; padding: 22px; border-radius: var(--r-lg); background: var(--ink-2); text-decoration: none; transition: background-color .2s ease, transform .25s var(--ease-out); }
.more__list a:hover { background: var(--ink-3); transform: translateY(-2px); }
.more__list small { color: var(--mint); font-size: 14px; font-weight: 600; }
.more__list strong { font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; }

@media (max-width: 1000px) {
  .art__grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; padding: 20px; border-radius: var(--r-md); background: var(--white); }
}
@media (max-width: 900px) {
  .ahero__grid { grid-template-columns: 1fr; }
  .ahero__media { aspect-ratio: 16 / 9; }
  .more__list { grid-template-columns: 1fr; }
  .plan { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ahero { padding-top: calc(148px + env(safe-area-inset-top, 0px)); }
  .ahero__actions .btn { width: 100%; justify-content: center; }
  .more__actions .btn { width: 100%; justify-content: center; }
  .tbl-wrap { overflow: visible; background: none; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tbl, .tbl tbody, .tbl tr, .tbl td, .tbl tbody th { display: block; width: 100%; }
  .tbl caption { display: block; padding: 0 0 10px; }
  .tbl tbody th { padding: 10px 16px 4px; border-bottom: 0; font-size: 17px; }
  .tbl tr { padding: 6px 0; margin-bottom: 10px; border-radius: var(--r-md); background: var(--white); }
  .tbl tr:last-child { margin-bottom: 0; }
  .tbl td { padding: 8px 16px; border-bottom: 0; }
  .tbl td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--on-light-soft); }
  .tldr, .callout { padding: 20px; }
  .tbl th, .tbl td { padding: 11px 14px; }
  .steps li { padding-left: 62px; }
}
@media (prefers-reduced-motion: reduce) { .more__list a { transition: none; } .more__list a:hover { transform: none; } }