/* Páginas internas (Phase 5, modelo "interna"). Mesmo sistema visual da home: tokens de base.css,
   .sec/.wrap/.sobre/.h2/.btn-* de site.css. Nada fixo/grudado nas seções (restrição do projeto: só o header).
   Carregado só por páginas com meta "css": ["interna"]. */

/* Topo escuro: o header da home é absolute com texto branco sobre o hero; aqui ele fica sobre o grafite. */
.int-topo { background: var(--grafite); color: var(--branco); padding-top: clamp(112px, 14vw, 168px); padding-bottom: clamp(48px, 7vw, 88px); }
.int-topo .sobre { color: var(--texto-escuro); }
.trilha { margin: 0 0 28px; }
.trilha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; color: var(--texto-escuro); }
.trilha li { display: flex; align-items: center; gap: 10px; }
.trilha li + li::before { content: "/"; color: var(--texto-5); }
.trilha a { color: var(--texto-escuro); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.trilha a:hover { color: var(--branco); text-decoration-color: var(--amarelo); }
.trilha [aria-current] { color: var(--branco); font-weight: 500; }

.int-h1 { font-weight: 400; font-size: clamp(36px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -.035em; margin: 0; max-width: 16ch; text-wrap: balance; }
.int-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--texto-escuro); margin: 24px 0 0; max-width: 60ch; }
.int-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.trat-ilustracao { padding: clamp(32px, 5vw, 64px) 0 0; }
.trat-ilustracao figure { width: min(100%, 600px); margin: 0 auto; }
.trat-ilustracao picture, .trat-ilustracao img { display: block; width: 100%; height: auto; }
.trat-ilustracao img { aspect-ratio: 4 / 3; object-fit: cover; }
.trat-ilustracao figcaption { margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--texto-4); }

.int-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.int-indice { font-size: 14px; }
.int-indice p { font-weight: 500; color: var(--texto-4); margin: 0 0 12px; }
.int-indice ol { border-left: 3px solid var(--amarelo); padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.int-indice a { color: var(--texto-3); }
.int-indice a:hover { color: var(--grafite); }

.int-bloco { border-top: 2px solid var(--grafite); padding-top: 22px; }
.int-bloco + .int-bloco { margin-top: 56px; }
.int-bloco h2 { font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 16px; scroll-margin-top: 104px; }
.int-bloco p { font-size: 17px; line-height: 1.65; color: var(--texto-2); margin: 0 0 14px; max-width: 68ch; }
.sec .int-bloco ul { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.int-bloco li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.55; color: var(--texto-2); }
.int-bloco li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 3px; background: var(--amarelo); }
/* URLs literais das fontes continuam legíveis sem alargar a página no celular. */
#fontes ~ ul { overflow-wrap: anywhere; }

.revisado { margin-top: 56px; background: var(--off); border-left: 3px solid var(--amarelo); padding: 20px 22px; font-size: 15px; line-height: 1.55; color: var(--texto-3); }
.revisado strong { color: var(--grafite); font-weight: 500; }

tr[id^="preparo-"] { scroll-margin-top: 96px; }
@media (max-width: 959px) { tr[id^="preparo-"] { scroll-margin-top: 16px; } .int-bloco h2 { scroll-margin-top: 16px; } }
.irmas { border-top: 1px solid var(--borda); }
.irmas-lista { display: grid; gap: 0; margin-top: 8px; }
.irmas-lista a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; border-bottom: 1px solid var(--borda); font-size: 17px; color: var(--grafite); }
.irmas-lista a:hover { color: var(--texto-4); }
.irmas-lista a span[aria-hidden] { transition: transform .3s var(--ease); }
.irmas-lista a:hover span[aria-hidden] { transform: translateX(4px); }

.int-cta { background: var(--grafite); color: var(--branco); }
.int-cta .wrap { display: grid; gap: 28px; align-items: end; }
.int-cta .h2 { color: var(--branco); max-width: 18ch; }
.int-cta p.apoio { color: var(--texto-escuro); font-size: 17px; line-height: 1.55; margin: 16px 0 0; max-width: 52ch; }

/* Modelo hub (05-01 tarefa 4): tabela de preparo. No celular rola na horizontal dentro da própria caixa. */
.tabela-rolagem { margin-top: 36px; overflow-x: auto; border-top: 2px solid var(--grafite); }
.tabela-rolagem:focus-visible { outline: 2px solid var(--grafite); outline-offset: 4px; }
.preparo-tabela { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.preparo-tabela caption { caption-side: bottom; text-align: left; padding-top: 14px; font-size: 14px; color: var(--texto-4); }
.preparo-tabela th, .preparo-tabela td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--borda); }
.preparo-tabela thead th { font-size: 13px; font-weight: 500; color: var(--texto-4); }
.preparo-tabela tbody th { font-weight: 500; }
.preparo-tabela tbody th a { color: var(--grafite); text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.preparo-tabela td { color: var(--texto-2); }
.nota-tabela { margin: 20px 0 0; font-size: 15px; color: var(--texto-3); max-width: 60ch; }
.quem-realiza { margin-top: 40px; }

/* Modelo exame (05-01 tarefa 5): preparo validado e dúvidas próprias (mesmo .faq-item da home). */
.int-bloco p.validado { margin-top: 18px; background: var(--off); border-left: 3px solid var(--amarelo); padding: 14px 18px; font-size: 15px; color: var(--texto-3); }
.validado strong { color: var(--grafite); font-weight: 500; }
.int-bloco a:not([class]) { color: var(--grafite); text-decoration: underline; text-underline-offset: 3px; }
.faq-lista { border-top: 1px solid var(--borda); }
.int-bloco .faq-resp p { margin: 0 0 18px; }

.exemplo-aviso { display: inline-block; background: var(--amarelo); color: var(--grafite); font-size: 13px; font-weight: 500; padding: 6px 10px; margin: 0 0 24px; border-radius: 2px; }

@media (min-width: 900px) {
  .int-corpo { grid-template-columns: 220px minmax(0, 1fr); gap: 72px; }
  .irmas-lista { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .int-cta .wrap { grid-template-columns: 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  .irmas-lista a span[aria-hidden] { transition: none; }
}