/*
 * content.css — CSS do CONTEÚDO dos tutoriais (antes embutido em <style> no
 * post_content de cada página; migrado para o plugin na v1.1 para que um
 * editor não possa apagá-lo por engano ao editar a página).
 *
 * As regras foram preservadas EXATAMENTE como estavam no bloco embutido
 * (superset da página de FAQ, que inclui o acordeão details.faq-item),
 * com uma única exceção: o bloco `.objetivos` foi removido porque o card
 * correspondente saiu do conteúdo e nenhuma página usa a classe.
 * Não refatorar seletores sem validar o render das 7 páginas.
 *
 * Carregado apenas nas páginas com o template tutorial-3col, DEPOIS do
 * site.css (dependência declarada no enqueue).
 */

  :root {
    --uenf-blue: #0a4a6b;
    --uenf-blue-dark: #063853;
    --uenf-blue-light: #14577a;
    --uenf-gold: #d4a017;
    --uenf-gold-text: #8a6a0d;
    --uenf-gold-light: #f5d572;
    --ink: #1f2937;
    --ink-muted: #475569;
    --ink-subtle: #64748b;
    --bg: #ffffff;
    --bg-alt: #f8fafc;
    --bg-sunken: #f1f5f9;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --warn-bg: #fffbeb;
    --warn-border: #d4a017;
    --warn-ink: #78350f;
    --info-bg: #eff6ff;
    --info-border: #3b82f6;
    --info-ink: #1e3a8a;
    --ok-bg: #ecfdf5;
    --ok-border: #10b981;
    --ok-ink: #065f46;
  }

  @page {
    size: A4;
    margin: 15mm;
    @bottom-left {
      content: "Programa de Treinamento WordPress — Básico · DIC/GINFO/WEB";
      font-family: 'Open Sans', sans-serif;
      font-size: 8pt;
      color: #64748b;
    }
    @bottom-right {
      content: counter(page);
      font-family: 'Open Sans', sans-serif;
      font-size: 9pt;
      font-weight: 700;
      color: #0a4a6b;
    }
  }
  @page cover { margin: 0; @bottom-left { content: ""; } @bottom-right { content: ""; } }
  @page nofooter { @bottom-left { content: ""; } @bottom-right { content: ""; } }

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0; background: #fff; color: var(--ink);
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 10.5pt; line-height: 1.55;
  }

  /* ───────────── Capa ───────────── */
  .cover {
    page: cover; page-break-after: always;
    height: 297mm; width: 210mm;
    padding: 28mm 22mm 24mm 22mm;
    background: linear-gradient(135deg, #0a4a6b 0%, #063853 100%);
    color: #fff;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
  }
  .cover::before {
    content: ''; position: absolute; top: -80mm; right: -60mm;
    width: 200mm; height: 200mm; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,160,23,0.18) 0%, rgba(212,160,23,0) 70%);
  }
  .cover::after {
    content: ''; position: absolute; bottom: -50mm; left: -40mm;
    width: 140mm; height: 140mm; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
  }
  .cover__brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 6mm; }
  .cover__brand-logo {
    height: 22mm; width: auto; display: block;
    image-rendering: -webkit-optimize-contrast;
  }
  .cover__brand-text strong { display: block; font-size: 12pt; font-weight: 700; letter-spacing: 0.3pt; color: #fff; line-height: 1.3; }
  .cover__center { position: relative; z-index: 2; }
  .cover__eyebrow {
    display: inline-block; font-size: 9pt; font-weight: 700; letter-spacing: 2pt;
    text-transform: uppercase; color: var(--uenf-gold-light);
    background: rgba(212,160,23,0.12); padding: 2mm 5mm; border-radius: 1mm; margin-bottom: 8mm;
  }
  .cover__title {
    font-size: 36pt; font-weight: 800; line-height: 1.05; letter-spacing: -0.5pt;
    margin: 0 0 5mm 0; color: #fff;
  }
  .cover__title em { font-style: normal; color: var(--uenf-gold-light); }
  .cover__subtitle { font-size: 12.5pt; line-height: 1.5; color: rgba(255,255,255,0.86); max-width: 165mm; margin: 0 0 6mm 0; }
  .cover__chip {
    display: inline-block; padding: 1.5mm 4mm; background: rgba(255,255,255,0.1);
    border: 0.5pt solid rgba(255,255,255,0.2); border-radius: 999pt;
    font-size: 9pt; color: rgba(255,255,255,0.85); margin-right: 2mm;
  }
  .cover__bottom {
    position: relative; z-index: 2;
    border-top: 0.5pt solid rgba(255,255,255,0.18); padding-top: 6mm;
    display: flex; justify-content: space-between; align-items: flex-end;
    font-size: 9pt; color: rgba(255,255,255,0.75);
  }
  .cover__bottom-meta strong { display: block; color: rgba(255,255,255,0.85); font-size: 9pt; font-weight: 400; margin-bottom: 1mm; }
  .cover__bottom-info { text-align: right; font-size: 9pt; color: rgba(255,255,255,0.85); }
  .cover__bottom-info span { display: block; margin-bottom: 1mm; }
  .cover__bottom-info span:last-child { margin-bottom: 0; }
  .cover__bottom-info strong { color: #fff; font-weight: 700; margin-right: 2mm; letter-spacing: 0.3pt; }

  /* ───────────── Tipografia geral ───────────── */
  h1, h2, h3, h4 { color: var(--uenf-blue); line-height: 1.25; margin-top: 0; }
  h1 { font-size: 26pt; font-weight: 800; margin: 0 0 4mm 0; }
  h2 { font-size: 16pt; font-weight: 700; margin: 8mm 0 3mm 0; padding-bottom: 1.5mm; border-bottom: 0.5pt solid var(--border); }
  h3 { font-size: 12.5pt; font-weight: 700; color: var(--uenf-blue-light); margin: 5mm 0 1.5mm 0; }
  h4 { font-size: 10.5pt; font-weight: 700; color: var(--ink); margin: 3mm 0 1mm 0; }
  h4.link-categoria {
    background: var(--info-bg);
    color: var(--uenf-blue);
    padding: 2mm 4mm;
    border-left: 2pt solid var(--uenf-blue);
    border-radius: 0 1.5mm 1.5mm 0;
    margin: 5mm 0 2mm 0;
    font-size: 9.5pt;
  }
  p { margin: 0 0 2.5mm 0; }
  ul, ol { margin: 0 0 3mm 0; padding-left: 5mm; }
  li { margin-bottom: 1mm; }
  strong { color: var(--ink); font-weight: 700; }
  em { font-style: italic; }
  code, kbd {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
    font-size: 9.5pt; background: var(--bg-sunken); padding: 0.5mm 1.5mm;
    border-radius: 1pt; color: var(--uenf-blue-dark);
  }
  kbd {
    border: 0.5pt solid var(--border-strong); box-shadow: 0 0.5pt 0 var(--border-strong);
    font-weight: 600;
  }
  a { color: var(--uenf-blue); text-decoration: underline; text-underline-offset: 1.5pt; }

  /* ───────────── Apresentação ───────────── */
  .pre-content { page: nofooter; padding-top: 0; }
  .apresentacao h1 { font-size: 28pt; color: var(--uenf-blue); margin-bottom: 2mm; }
  .apresentacao .lead {
    font-size: 12pt; line-height: 1.6; color: var(--ink-muted);
    margin: 0 0 6mm 0; padding-bottom: 4mm;
    border-bottom: 2pt solid var(--uenf-gold);
  }

  /* ───────────── Sumário ───────────── */
  .toc { page-break-before: always; page: nofooter; }
  .toc h1 { color: var(--uenf-blue); border-bottom: 2pt solid var(--uenf-gold); padding-bottom: 2mm; }
  .toc ol.toc-list { list-style: none; padding: 0; margin: 5mm 0 0 0; counter-reset: toc; }
  .toc-list > li {
    counter-increment: toc;
    padding: 3mm 0 2.5mm 0;
    border-bottom: 0.5pt dotted var(--border);
    page-break-inside: avoid;
  }
  .toc-mod-row {
    display: flex; align-items: baseline; gap: 4mm; font-size: 11.5pt;
  }
  .toc-list > li .toc-mod-row::before {
    content: counter(toc, decimal-leading-zero);
    flex: 0 0 11mm; color: var(--uenf-gold-text); font-weight: 800; font-size: 12pt;
  }
  .toc-title { flex: 1; color: var(--uenf-blue); font-weight: 700; }
  .toc-list > li ul {
    list-style: none; padding: 1.5mm 0 0 15mm; margin: 0;
  }
  .toc-list > li ul li {
    font-size: 10pt; color: var(--ink-muted); padding: 0.8mm 0;
  }
  .toc-list > li ul li::before {
    content: "·"; margin-right: 2.5mm; color: var(--uenf-gold); font-weight: 700;
  }
  /* Links do sumário: mantêm aparência herdada e não sublinham por padrão */
  .toc-list a { color: inherit; text-decoration: none; }
  .toc-list a:hover { text-decoration: underline; text-underline-offset: 2pt; }
  .toc-list .toc-title a { color: var(--uenf-blue); font-weight: 700; }

  /* ───────────── Página de abertura de módulo ───────────── */
  .modulo-abertura {
    page-break-before: always; page-break-after: always;
    height: 250mm; display: flex; flex-direction: column; justify-content: center;
    padding: 0;
  }
  .modulo-abertura__num {
    font-size: 80pt; font-weight: 800; color: var(--uenf-gold-light);
    line-height: 1; letter-spacing: -3pt;
  }
  .modulo-abertura__label {
    display: block; font-size: 10pt; font-weight: 700; letter-spacing: 3pt;
    text-transform: uppercase; color: var(--uenf-gold-text); margin-bottom: 3mm;
  }
  .modulo-abertura__titulo {
    font-size: 30pt; font-weight: 800; color: var(--uenf-blue);
    line-height: 1.1; margin: 4mm 0 6mm 0; max-width: none;
  }
  .modulo-abertura__lead {
    font-size: 13pt; line-height: 1.55; color: var(--ink-muted);
    max-width: none; margin: 0 0 8mm 0;
  }
  .modulo-abertura__resumo {
    border-top: 2pt solid var(--uenf-gold); padding-top: 4mm; max-width: 150mm;
  }
  .modulo-abertura__resumo h4 {
    font-size: 9pt; letter-spacing: 1.5pt; text-transform: uppercase;
    color: var(--uenf-gold-text); margin-bottom: 2mm;
  }
  .modulo-abertura__resumo ul { margin: 0; padding-left: 5mm; columns: 2; column-gap: 8mm; }
  .modulo-abertura__resumo li { font-size: 10pt; color: var(--ink); break-inside: avoid; margin-bottom: 1mm; }
  .modulo-abertura__objetivos {
    margin-top: 5mm; padding: 4mm 5mm 4mm 5mm;
    background: rgba(212, 160, 23, 0.08);
    border-left: 2pt solid var(--uenf-gold);
    border-radius: 0 1.5mm 1.5mm 0;
  }
  .modulo-abertura__objetivos h4 {
    margin: 0 0 2mm 0; color: var(--uenf-blue); font-size: 11pt;
    text-transform: uppercase; letter-spacing: 0.5pt;
  }
  .modulo-abertura__objetivos ol { margin: 0; padding-left: 5mm; }
  .modulo-abertura__objetivos li { font-size: 10pt; color: var(--ink); margin-bottom: 1.5mm; }

  /* ───────────── Conteúdo de módulo ───────────── */
  .modulo-conteudo { page-break-before: always; }
  .modulo-conteudo > h2:first-child { margin-top: 0; }

  /* ───────────── Callouts ───────────── */
  .callout {
    margin: 4mm 0; padding: 4mm 5mm; border-radius: 1mm;
    border-left: 3pt solid; page-break-inside: avoid;
  }
  .callout > strong:first-child {
    display: block; font-size: 9.5pt; letter-spacing: 1pt; text-transform: uppercase;
    margin-bottom: 1.5mm;
  }
  .callout p:last-child { margin-bottom: 0; }
  .callout--info { background: var(--info-bg); border-left-color: var(--info-border); color: var(--info-ink); }
  .callout--info > strong:first-child { color: var(--info-border); }
  .callout--warn { background: var(--warn-bg); border-left-color: var(--warn-border); color: var(--warn-ink); }
  .callout--warn > strong:first-child { color: var(--uenf-gold-text); }
  .callout--ok { background: var(--ok-bg); border-left-color: var(--ok-border); color: var(--ok-ink); }
  .callout--ok > strong:first-child { color: var(--ok-border); }

  /* ───────────── Passo a passo ───────────── */
  .passos { list-style: none; padding: 0; margin: 4mm 0; counter-reset: passo; }
  .passos > li {
    counter-increment: passo; display: flex; gap: 4mm;
    padding: 3mm 0; border-top: 0.5pt solid var(--border);
    page-break-inside: avoid;
  }
  .passos > li:first-child { border-top: none; padding-top: 0; }
  .passos > li::before {
    content: counter(passo); flex: 0 0 8mm; height: 8mm;
    background: var(--uenf-blue); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 10pt; margin-top: 0.5mm;
  }
  .passos > li > div { flex: 1; }
  .passos > li > div > strong:first-child {
    display: block; color: var(--uenf-blue); font-size: 10.5pt;
    margin-bottom: 1mm;
  }

  /* ───────────── Tabela ───────────── */
  table {
    width: 100%; border-collapse: collapse; margin: 4mm 0;
    font-size: 9.5pt; page-break-inside: avoid;
  }
  th, td {
    text-align: left; padding: 2.5mm 3mm; border-bottom: 0.5pt solid var(--border);
    vertical-align: top;
  }
  th {
    background: var(--uenf-blue); color: #fff; font-weight: 700;
    font-size: 9pt; letter-spacing: 0.5pt;
  }
  tr:nth-child(even) td { background: var(--bg-alt); }

  /* ───────────── Figuras com marcadores numerados (overlay) ───────────── */
  figure.has-markers { position: relative; }
  figure.has-markers .markers {
    position: absolute; inset: 0; pointer-events: none;
    /* o overlay cobre exatamente o container <img>: o positioning dos marcadores
       é em % relativo ao tamanho da imagem renderizada */
  }
  figure.has-markers .marker {
    position: absolute;
    width: 7mm; height: 7mm;
    background: var(--uenf-gold);
    color: #1a1a1a;
    border: 1pt solid #1a1a1a;
    border-radius: 50%;
    font-weight: 800;
    font-size: 11pt;
    line-height: 7mm;
    text-align: center;
    box-shadow: 0 0.5mm 1.2mm rgba(0,0,0,0.35);
  }
  figure.has-markers .legenda-marcadores {
    display: flex; gap: 4mm; flex-wrap: wrap;
    margin-top: 2mm; font-size: 9pt; color: var(--ink-muted);
  }
  figure.has-markers .legenda-marcadores span { display: inline-flex; align-items: center; gap: 1.5mm; }
  figure.has-markers .legenda-marcadores .marker-mini {
    width: 4.5mm; height: 4.5mm; line-height: 4.5mm;
    background: var(--uenf-gold); color: #1a1a1a; border: 0.5pt solid #1a1a1a;
    border-radius: 50%; font-weight: 800; font-size: 8pt; text-align: center;
  }

  /* ───────────── Comparativo (cards lado a lado) ───────────── */
  .compare {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4mm;
    margin: 4mm 0; page-break-inside: avoid;
  }
  .compare__card {
    border: 0.5pt solid var(--border); border-top: 2pt solid var(--uenf-blue);
    padding: 4mm 5mm; background: #fff;
  }
  .compare__card h4 { margin: 0 0 2mm 0; font-size: 11pt; color: var(--uenf-blue); }
  .compare__card ul { margin: 0; padding-left: 4mm; font-size: 9.5pt; color: var(--ink-muted); }
  .compare__card li { margin-bottom: 0.8mm; }

  /* ───────────── Checklist ───────────── */
  .checklist { list-style: none; padding: 0; margin: 3mm 0; }
  .checklist li {
    padding: 1.8mm 0 1.8mm 8mm; position: relative;
    border-bottom: 0.5pt dotted var(--border); font-size: 10pt;
  }
  .checklist li::before {
    content: ""; position: absolute; left: 0; top: 2.5mm;
    width: 4mm; height: 4mm; border: 1pt solid var(--uenf-blue);
    border-radius: 0.8mm; background: #fff;
  }

  /* ───────────── Apêndice ───────────── */
  .glossario dl { margin: 3mm 0; }
  .glossario dt {
    font-weight: 700; color: var(--uenf-blue); font-size: 10.5pt;
    margin-top: 3mm;
  }
  .glossario dd { margin: 0.5mm 0 0 0; color: var(--ink-muted); font-size: 10pt; }

  /* Compactar listas em páginas densas */
  .compact ul, .compact ol { margin-bottom: 2mm; }
  .compact p { margin-bottom: 2mm; }

  /* Ficha técnica do curso */
  .ficha-tecnica {
    margin: 6mm 0 0 0;
    padding: 5mm 6mm;
    background: var(--bg-alt);
    border-top: 2pt solid var(--uenf-blue);
    border-radius: 0 0 2mm 2mm;
    page-break-inside: avoid;
  }
  .ficha-tecnica h3 {
    margin: 0 0 3mm 0;
    font-size: 9.5pt;
    letter-spacing: 1.5pt;
    text-transform: uppercase;
    color: var(--uenf-gold-text);
  }
  .ficha-tecnica dl {
    display: grid;
    grid-template-columns: 35mm 1fr;
    gap: 1.8mm 6mm;
    margin: 0;
  }
  .ficha-tecnica dt {
    font-weight: 700;
    color: var(--uenf-blue);
    font-size: 10pt;
    margin: 0;
  }
  .ficha-tecnica dd {
    margin: 0;
    color: var(--ink);
    font-size: 10pt;
  }

  /* ───────────── Screenshots ───────────── */
  .screenshot {
    margin: 5mm 0;
    page-break-inside: avoid;
    break-before: avoid-page;  /* pede para ficar junto com o texto anterior */
    text-align: center;
  }
  /* Parágrafos/listas seguidos de figura: pede para não quebrar entre eles */
  p:has(+ figure.screenshot), ul:has(+ figure.screenshot), ol:has(+ figure.screenshot) {
    break-after: avoid-page;
  }
  /* Pares de figuras (duas <figure> consecutivas): mantém o par junto */
  figure.screenshot + figure.screenshot {
    break-before: avoid-page;
  }
  .screenshot img {
    max-width: 170mm;
    width: 100%;
    height: auto;
    border: 0.5pt solid var(--border);
    border-radius: 1mm;
    box-shadow: 0 1pt 3pt rgba(0, 0, 0, 0.08);
    display: block;
    margin: 0 auto;
  }
  .screenshot figcaption {
    text-align: center;
    font-size: 8.5pt;
    font-style: italic;
    color: var(--ink-subtle);
    margin-top: 2mm;
  }
  /* Variante compacta para capturas em sequência */
  .screenshot.compact img { max-width: 130mm; }
  /* Variante full para capturas amplas (admin completo) */
  .screenshot.full img { max-width: 180mm; }
  /* Variante pair: duas capturas lado a lado */
  .screenshot-pair {
    display: flex;
    gap: 4mm;
    margin: 5mm 0;
    page-break-inside: avoid;
  }
  .screenshot-pair .screenshot { flex: 1; margin: 0; }
  .screenshot-pair .screenshot img { max-width: 100%; }
  /* Bundle vertical: agrupa duas figuras consecutivas verticalmente para
     o motor de PDF tratar como um bloco e não quebrar entre elas. Reduzimos
     a altura útil das imagens dentro do bundle para garantir que as duas
     caibam na mesma página A4. (Imagens individuais podem sobrescrever
     via style inline para casos onde o tamanho cheio é necessário.) */
  .figure-bundle { page-break-inside: avoid; }
  .figure-bundle .screenshot { margin: 3mm 0; }
  .figure-bundle .screenshot.full img,
  .figure-bundle .screenshot img { max-width: 150mm; max-height: 95mm; object-fit: contain; }

  /* Botão "Topo" nunca aparece no PDF/impressão */
  @media print { .back-to-top { display: none !important; } }

  /* ══════════════════════════════════════════════════════════════════
     SCREEN — Layout otimizado para leitura no navegador.
     Tudo aqui só vale em @media screen; o PDF segue intacto.
     ══════════════════════════════════════════════════════════════════ */
  @media screen {
    :root {
      --paper-width: 920px;
      --screen-bg: #eef2f6;
      --shadow: 0 4px 18px rgba(15, 30, 50, 0.06);
    }
    html { scroll-behavior: smooth; scroll-padding-top: 24px; }
    body {
      background: var(--screen-bg);
      color: var(--ink);
      font-size: 16px;
      line-height: 1.65;
      margin: 0;
      padding: 32px 16px 96px;
    }

    /* "Folhas" centralizadas com sombra */
    body > section {
      max-width: var(--paper-width);
      margin: 0 auto 24px;
      background: #fff;
      padding: 48px 56px;
      border-radius: 12px;
      box-shadow: var(--shadow);
    }

    /* Capa: vira hero responsivo (sem altura A4) */
    .cover {
      height: auto !important;
      width: auto !important;
      padding: 64px 56px !important;
      border-radius: 12px;
      margin-bottom: 28px !important;
    }
    .cover__title { font-size: 2.6rem !important; }
    .cover__subtitle { font-size: 1.1rem !important; }

    /* Abertura de módulo: altura natural */
    .modulo-abertura {
      height: auto !important;
      padding: 56px 56px !important;
      background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    }
    .modulo-abertura__num { font-size: 5rem !important; line-height: 1 !important; }
    .modulo-abertura__titulo { font-size: 2rem !important; }

    /* Tipografia escalável (sobrepõe os pt usados no PDF) */
    h1 { font-size: 2.2rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.55rem !important; margin: 32px 0 14px !important; line-height: 1.3 !important; }
    h3 { font-size: 1.2rem !important; margin: 24px 0 10px !important; }
    h4 { font-size: 1.02rem !important; margin: 18px 0 8px !important; }
    /* O reset do tema (style.min.css) zera margin-top dos títulos com !important
       e vence h2/h3/h4 acima por carregar depois deste arquivo; a especificidade
       maior devolve o respiro acima dos títulos de seção. Valores maiores que os
       do PDF de propósito: na tela, a seção precisa de quebra visual clara
       (48px segue a intenção do site.css para .uenf-tutorial-content h2). */
    .uenf-tutorial-v1 h2 { margin-top: 64px !important; }
    .uenf-tutorial-v1 h3 { margin-top: 40px !important; }
    .uenf-tutorial-v1 h4 { margin-top: 28px !important; }
    p, li { font-size: 1rem !important; }
    code, kbd { font-size: 0.92em !important; }

    /* Imagens responsivas */
    .screenshot { margin: 24px 0 !important; }
    .screenshot img {
      max-width: 100% !important;
      width: auto !important;
      height: auto !important;
      border-radius: 8px !important;
    }
    .screenshot.compact img,
    .screenshot.full img { max-width: 100% !important; }
    .screenshot figcaption { font-size: 0.9rem !important; margin-top: 6px !important; }

    /* Tabelas confortáveis */
    table { font-size: 0.95rem !important; }
    th, td { padding: 10px 14px !important; }

    /* Sumário: links com hover dourado e destaque do alvo */
    .toc-list a:hover { color: var(--uenf-gold-text) !important; text-decoration: underline; }

    /* Highlight do anchor alvo quando vindo do sumário */
    :target {
      animation: anchor-pulse 1.8s ease;
      scroll-margin-top: 24px;
    }
    @keyframes anchor-pulse {
      0%   { background: rgba(212, 160, 23, 0.32); }
      60%  { background: rgba(212, 160, 23, 0.16); }
      100% { background: transparent; }
    }

    /* Callouts e ficha técnica: respiro maior */
    .callout { margin: 20px 0 !important; padding: 16px 20px !important; }
    .ficha-tecnica { padding: 20px 24px !important; }
    .ficha-tecnica dl { grid-template-columns: 140px 1fr !important; gap: 8px 24px !important; }

    /* Botão flutuante "Topo" */
    .back-to-top {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--uenf-blue);
      color: #fff !important;
      padding: 10px 18px;
      border-radius: 999px;
      text-decoration: none !important;
      font-size: 0.9rem;
      font-weight: 600;
      box-shadow: 0 6px 16px rgba(0,0,0,0.18);
      opacity: 0.92;
      transition: opacity 0.15s, transform 0.15s;
      z-index: 100;
    }
    .back-to-top:hover { opacity: 1; transform: translateY(-2px); }

    /* Footer de assinatura */
    .signature-final { background: transparent !important; box-shadow: none !important; padding: 24px !important; }
    .signature-final p { font-size: 0.9rem !important; }

    /* Telas pequenas */
    @media (max-width: 720px) {
      body { padding: 16px 8px 80px; }
      body > section { padding: 24px 20px; border-radius: 8px; }
      .cover { padding: 40px 24px !important; }
      .cover__title { font-size: 1.9rem !important; }
      .modulo-abertura { padding: 36px 24px !important; }
      .modulo-abertura__num { font-size: 3.5rem !important; }
      .modulo-abertura__titulo { font-size: 1.5rem !important; }
      .modulo-abertura__resumo ul { columns: 1 !important; }
      .compare { display: block !important; }
      .compare__card { margin-bottom: 12px; }
      h1 { font-size: 1.7rem !important; }
      h2 { font-size: 1.3rem !important; }
      table { font-size: 0.88rem !important; }
      th, td { padding: 8px 10px !important; }
      .ficha-tecnica dl { grid-template-columns: 1fr !important; gap: 4px !important; }
      .ficha-tecnica dt { margin-top: 8px; }
      .back-to-top { bottom: 12px; right: 12px; padding: 8px 14px; font-size: 0.85rem; }
    }
  }

  /* ── Acordeão do FAQ (details/summary nativo) ── */
  details.faq-item {
    border: 1px solid var(--border); border-radius: 6px;
    margin: 0 0 3mm 0; background: #fff; overflow: hidden;
  }
  details.faq-item summary {
    cursor: pointer; list-style: none; display: flex; align-items: baseline;
    gap: 10px; padding: 11px 16px; font-weight: 700; font-size: 11.5pt;
    color: var(--uenf-blue); user-select: none;
  }
  details.faq-item summary::-webkit-details-marker { display: none; }
  details.faq-item summary::before {
    content: "+"; font-weight: 800; font-size: 13pt; line-height: 1;
    color: var(--uenf-gold-text); min-width: 14px; text-align: center;
    transition: transform 0.15s ease;
  }
  details.faq-item[open] summary::before { content: "–"; }
  details.faq-item summary:hover { background: var(--uenf-blue-pale, #f0f5fa); }
  details.faq-item[open] summary { border-bottom: 1px solid var(--border); }
  details.faq-item .faq-body { padding: 10px 18px 14px 40px; }
  details.faq-item .faq-body > :last-child { margin-bottom: 0; }
