/* =========================================================
   IA.BR — estilos das páginas
   ========================================================= */

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); background: var(--bg-soft-2); padding: 4px 9px; border-radius: 4px; }
.badge--prep { color: #7a4b00; background: #fff3dc; }
.lead { font-size: 16.5px; color: var(--text); margin-top: 14px; max-width: 62ch; }
.h-display { font-size: clamp(32px, 4vw, 54px); letter-spacing: -.035em; }

/* ---------- Hero escuro (imagem abstrata de ondas ou mapa) ---------- */
.hero--dark { background: var(--navy-900); color: #d3ddf0; }
.hero--dark h1, .hero--dark .crumbs a, .hero--dark .crumbs [aria-current] { color: #fff; }
.hero--dark .crumbs { color: #a9b9d8; }
.hero--dark .lead, .hero--dark p { color: #d3ddf0; }
.hero--dark .eyebrow { color: #7fdcf0; }
.hero--dark .text-blue { color: #7fc4ff; }
.hero--dark .hero-media::before { background: linear-gradient(90deg, #071a3d 0%, rgba(7,26,61,.8) 25%, rgba(7,26,61,.1) 65%); }
.hero--dark .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.hero--dark .btn-outline:hover { background: rgba(255,255,255,.08); }
.hero-media.img-waves2 { background-image: url("/assets/img/ondas-2.jpg"); }
.hero-media.img-map { background-image: url("/assets/img/brasil-mapa.jpg"); background-position: center 40%; }
.hero-media.img-globe { background-image: url("/assets/img/brasil-globo.jpg"); background-position: center; }
@media (max-width: 900px) {
  .hero--dark .hero-media::before { background: linear-gradient(180deg, rgba(7,26,61,0) 50%, #071a3d 100%); }
}

/* ---------- Home ---------- */
.home-hero { min-height: clamp(420px, 32vw, 500px); display: flex; flex-direction: column; justify-content: center; }
.home-hero__text { max-width: 560px; padding: 52px 0; }
.home-hero h1 { font-size: clamp(30px, 3.2vw, 46px); }
.home-hero p { margin-top: 18px; font-size: 16px; max-width: 52ch; }
@media (max-width: 900px) { .home-hero { min-height: 0; } .home-hero__text { padding: 36px 0 28px; } }

.status-strip { border-bottom: 1px solid var(--line); background: #fff; }
.status-strip p { padding: 16px 0; font-size: 14px; color: var(--ink); display: flex; gap: 12px; align-items: flex-start; }
.status-strip svg.i { color: var(--blue-600); margin-top: 2px; }

.area-card { display: flex; flex-direction: column; padding: 22px 20px 18px; transition: transform .25s, box-shadow .25s; }
.area-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.area-card h3 { font-size: 17px; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
.area-card h3 svg.i { color: var(--blue-600); }
.area-card p { font-size: 14px; margin-top: 10px; flex: 1; }
.area-card .badge { align-self: flex-start; margin-top: 14px; }
.area-card__go { margin-top: 12px; }

/* ---------- Hero de páginas internas ---------- */
.page-hero { min-height: 320px; padding-bottom: 40px; }
.page-hero--plain { min-height: 0; background: linear-gradient(180deg, #f3f8fe, #fff); }
.page-hero__text { max-width: 600px; margin-top: 18px; }
.page-hero__text.wide { max-width: 760px; }
.page-hero__text h1 { font-size: clamp(30px, 3.2vw, 44px); }
@media (max-width: 900px) {
  .page-hero { min-height: 0; padding-bottom: 0; }
  .page-hero .container { padding-bottom: 28px; }
}

/* ---------- Texto corrido ---------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: 23px; margin: 30px 0 10px; }
.prose h3 { font-size: 17.5px; margin: 22px 0 8px; }
.prose p, .prose ul, .prose ol { font-size: 15.5px; margin: 0 0 14px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--blue-700); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--blue-600); }
.prose strong { color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose blockquote { margin: 18px 0; padding: 16px 20px; border-left: 3px solid var(--blue-600); background: var(--bg-soft); color: var(--ink); border-radius: 0 var(--radius) var(--radius) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 18px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { color: var(--ink); background: var(--bg-soft); }
.table-wrap { overflow-x: auto; max-width: 100%; }

.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.page-aside { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 1000px) { .page-layout { grid-template-columns: minmax(0, 1fr); } .page-aside { position: static; } }

.callout { display: flex; gap: 14px; background: var(--bg-soft-2); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; }
.callout svg.i { color: var(--blue-600); margin-top: 2px; }
.callout strong { color: var(--blue-700); font-size: 14.5px; display: block; }
.callout p { font-size: 14px; margin: 4px 0 0; }
.callout--warn { background: #fff7e8; }
.callout--warn svg.i, .callout--warn strong { color: #7a4b00; }

.side-card { padding: 20px; }
.side-card h2 { font-size: 15.5px; letter-spacing: -.01em; display: flex; gap: 10px; align-items: center; }
.side-card h2 svg.i { color: var(--blue-600); }
.side-card p { font-size: 13.5px; margin-top: 8px; }
.side-card ul { margin-top: 8px; }
.side-card li a { display: block; padding: 7px 0; font-size: 13.5px; color: var(--ink); border-top: 1px solid var(--line); }
.side-card li:first-child a { border-top: 0; }
.side-card li a:hover { color: var(--blue-600); }
.side-card .btn { margin-top: 14px; }

/* ---------- Faixa, cartões explicativos, passos ---------- */
.band { background: var(--bg-soft); padding: 34px 0; border-top: 1px solid var(--line); }
.band--white { background: #fff; }
.band__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
.band__intro p { font-size: 14.5px; margin: 10px 0 14px; }
@media (max-width: 1000px) { .band__grid { grid-template-columns: 1fr; gap: 20px; } }

.why { padding: 20px; }
.why > svg.i { color: var(--blue-600); margin-bottom: 12px; width: 26px; height: 26px; }
.why h3 { font-size: 16px; letter-spacing: -.01em; }
.why p { font-size: 14px; margin-top: 6px; }
.why .tag { margin-bottom: 6px; }

.steps { counter-reset: s; display: grid; gap: 12px; margin-top: 8px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft-2); color: var(--blue-700); font-weight: 800; font-size: 13.5px; }
.steps strong { display: block; color: var(--ink); font-size: 14.5px; }
.steps span { font-size: 14px; display: block; margin-top: 2px; }

.checklist { display: grid; gap: 10px; }
.checklist li { display: flex; gap: 12px; font-size: 14.5px; }
.checklist svg.i { color: var(--blue-600); margin-top: 2px; }
.checklist strong { color: var(--ink); }

.pillar { display: flex; gap: 18px; padding: 20px 22px; align-items: flex-start; }
.pillar > svg.i { width: 34px; height: 34px; color: var(--blue-600); stroke-width: 1.5; }
.pillar h3 { font-size: 16px; }
.pillar p { font-size: 14px; margin-top: 6px; }

/* Lista de trilhas / temas */
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.topic-grid li { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; color: var(--ink); }
.topic-grid li small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; }
@media (max-width: 1000px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .topic-grid { grid-template-columns: 1fr; } }

.empty-state { padding: 26px; display: flex; gap: 16px; align-items: flex-start; }
.empty-state > svg.i { width: 30px; height: 30px; color: var(--blue-600); stroke-width: 1.5; }
.empty-state h2, .empty-state h3 { font-size: 18px; }
.empty-state p { font-size: 14.5px; margin-top: 6px; }

/* ---------- Contato ---------- */
.channels li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.channels li:first-child { border: 0; padding-top: 4px; }
.channels svg.i { color: var(--blue-600); margin-top: 3px; }
.channels small { display: block; color: var(--muted); font-size: 12.5px; }
.channels a { color: var(--blue-700); font-weight: 700; font-size: 14.5px; word-break: break-word; }
.channels a:hover { text-decoration: underline; }

/* ---------- 404 ---------- */
.notfound { padding: 70px 0; }
.notfound .h-display { margin-top: 6px; }

/* =========================================================
   Modelos de publicação (artigo e publicação com sumário)
   ========================================================= */
.article-top { background: linear-gradient(180deg, #fff, #f6f9fe); padding-bottom: 30px; }
.article-top h1 { font-size: clamp(28px, 2.8vw, 40px); margin-top: 14px; max-width: 26ch; }
.article-top .lead { max-width: 70ch; }
.byline { display: flex; gap: 10px 28px; margin-top: 22px; flex-wrap: wrap; font-size: 13.5px; }
.byline div { display: flex; gap: 10px; align-items: center; }
.byline svg.i { color: var(--blue-600); }
.byline strong { color: var(--ink); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; padding-top: 30px; padding-bottom: 50px; }
.research-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 34px; padding-top: 30px; padding-bottom: 60px; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 20px); border-right: 1px solid var(--line); padding-right: 16px; }
.toc h2 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc a { display: block; padding: 7px 12px; font-size: 13.5px; color: var(--ink); border-left: 3px solid transparent; }
.toc a:hover { color: var(--blue-600); border-left-color: var(--blue-600); }
.research-main section { scroll-margin-top: calc(var(--header-h) + 20px); }
.record { padding: 18px; }
.record h2 { font-size: 15px; display: flex; gap: 10px; align-items: center; }
.record h2 svg.i { color: var(--blue-600); }
.record dl { margin: 10px 0 0; font-size: 13.5px; }
.record dt { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-top: 10px; }
.record dd { margin: 2px 0 0; color: var(--ink); }
.cite-card p { font-size: 13px; color: var(--ink); margin-top: 10px; line-height: 1.55; word-break: break-word; }
@media (max-width: 1240px) { .research-layout { grid-template-columns: 200px minmax(0, 1fr); } .research-aside { grid-column: 2; } }
@media (max-width: 1000px) {
  .article-layout, .research-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; border-right: 0; padding-right: 0; }
  .research-aside { grid-column: auto; }
}

.mt { margin-top: 14px; }
main:focus { outline: none; box-shadow: none; }
.prose .steps, .prose .topic-grid, .prose .channels, .prose .checklist { list-style: none; padding-left: 0; }
.prose .steps li + li, .prose .topic-grid li + li, .prose .checklist li + li { margin-top: 0; }
.prose .channels p { font-size: 14px; margin: 4px 0 0; }
.prose .empty-state { margin-bottom: 8px; }
.prose .empty-state h2 { margin: 0; font-size: 18px; }
@media (max-width: 560px) { .prose table { font-size: 13px; } .prose th, .prose td { padding: 8px 6px; } }
