/* Pagina de artigo (A1 ou A3). Autocontido.
   Movido de <style> inline para arquivo, sem alterar uma regra.
   O objetivo e poder tirar 'unsafe-inline' de style-src na CSP: com ele,
   qualquer estilo injetado numa pagina e aplicado pelo navegador. */

body { font-family: var(--font-body); color: #1f2937; }
        h1, h2, h3 { font-family: var(--font-display); }
        a:focus-visible, button:focus-visible {
            outline: 3px solid var(--color-cerulean); outline-offset: 2px; border-radius: 4px;
        }
        @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

        /* Nav (igual à home) */
        .nav-link { position:relative; padding-bottom:2px; }
        .nav-link::after {
            content:''; position:absolute; bottom:-1px; left:0;
            width:0; height:2px; background: var(--color-cerulean);
            transition:width .25s ease; border-radius:1px;
        }
        .nav-link:hover::after { width:100%; }
        #mobile-menu { display:none; }
        #mobile-menu.open { display:block; }

        /* Conteúdo do artigo */
        .prose-links a { color: var(--color-cerulean); text-decoration: underline; }
        .article p { line-height: 1.7; }
        .ill { flex-shrink:0; width:130px; height:130px; }
        .callout { border-left: 4px solid var(--color-gold); background: #fffaf0; border-radius: 0 8px 8px 0; padding: 16px 20px; }
        .callout.secure { border-left-color: var(--color-cerulean); background: #f2f7ff; }

        /* Tabela */
        .cmp { width:100%; border-collapse: collapse; }
        .cmp th, .cmp td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #d7dee8; color: #1f2937; }
        /* A linha "Validade juridica" ocupa as duas colunas e o texto e centrado.
           Isso era `style="text-align:center"` na celula, e atributo de estilo
           ganha de qualquer seletor. Como classe, `.centrado` (0,1,0) PERDE para
           `.cmp td` (0,1,1) da linha acima e o texto voltava para a esquerda.
           A regra fica aqui, colada na que a vencia, para o par ser legivel. */
        .cmp td.centrado { text-align: center; }
        .cmp thead th { background: var(--color-navy); color: #fff; font-family: var(--font-display); font-weight: 600; }
        .cmp tbody th { background: #eaf0f8; color: var(--color-navy); font-weight: 700; }
        .cmp tbody tr:nth-child(even) td { background: #f7f9fc; }