/* =================================================================
   Conjuga Mais - folha de estilo unica
   CSS puro, sem dependencias e sem etapa de build.

   As cores da marca chegam do config.php como variaveis em :root,
   injetadas no <head> pelo inc/cabecalho.php. Todo o resto - escala
   de espaco, raios, sombras, tipografia e movimento - e definido
   aqui, na secao 02, e usado por todas as areas abaixo.

   01 a 08 ... Fundacao: fontes, tokens, base, botoes, secoes
   09 a 16 ... Cromo do site: cabecalho, menus, trilha, rodape
   17 a 24 ... Home e acervo: hero, cartoes, alfabeto, FAQ
   25 a 35 ... Pagina do verbo: topo, tabelas, lateral, artigo
   36 a 41 ... Listagens, institucional, formularios, impressao
   42 ....... Costuras entre areas
   ================================================================= */

/* -----------------------------------------------------------------
   01. Fontes - Inter subsetada para latim, servida do proprio dominio
   ----------------------------------------------------------------- */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fontes/inter-400.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fontes/inter-600.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fontes/inter-700.woff2") format("woff2");
}
@font-face {
    font-family: "Inter Display";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/assets/fontes/inter-display-900.woff2") format("woff2");
}

/* -----------------------------------------------------------------
   02. Sistema de design
   ----------------------------------------------------------------- */

:root {
    /* Escala de espaco. Passo de 4px: mantem tudo no mesmo pente. */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 20px;
    --e6: 24px;
    --e7: 32px;
    --e8: 40px;
    --e9: 48px;
    --e10: 64px;

    /* Raios. --raio vem do config.php e ancora a escala. */
    --raio-xs: 4px;
    --raio-sm: 6px;
    --raio-md: 10px;
    --raio-lg: 14px;
    --raio-pilula: 999px;

    /* Sombras curtas: profundidade sem borrao. */
    --sombra-1: 0 1px 2px rgba(13, 20, 24, 0.05);
    --sombra-2: 0 1px 2px rgba(13, 20, 24, 0.05), 0 4px 12px rgba(13, 20, 24, 0.06);
    --sombra-3: 0 2px 6px rgba(13, 20, 24, 0.06), 0 12px 32px rgba(13, 20, 24, 0.10);
    --sombra-foco: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent);

    /* Superficies derivadas da paleta do config. */
    --linha-suave: color-mix(in srgb, var(--linha) 62%, var(--fundo));
    --fundo-fumaca: color-mix(in srgb, var(--fundo-alt) 60%, var(--fundo));
    --marca-fina: color-mix(in srgb, var(--marca) 12%, transparent);

    /* Medidas de leitura e trilhos do layout. */
    --envoltorio: 1180px;
    --envoltorio-margem: var(--e5);
    --lateral-largura: 296px;
    --medida-texto: 70ch;

    /* Tipografia. */
    --fonte-texto: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --fonte-titulo: "Inter Display", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: "Cascadia Mono", "SFMono-Regular", ui-monospace, Consolas, monospace;
    --rotulo-espacamento: 0.11em;

    /* Movimento. Curto e discreto. */
    --transicao: 140ms cubic-bezier(0.2, 0.6, 0.3, 1);

    /* Controles nativos (caret, selecao de data, barra de rolagem). */
    color-scheme: light;
    accent-color: var(--link);
}

@media (prefers-reduced-motion: reduce) {
    :root { --transicao: 1ms linear; }
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}

/* -----------------------------------------------------------------
   03. Reinicio e base
   ----------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--e7);
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--fonte-texto);
    font-size: 17px;
    line-height: 1.62;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
}

img,
svg { max-width: 100%; height: auto; display: block; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

/* -----------------------------------------------------------------
   04. Tipografia
   ----------------------------------------------------------------- */

a {
    color: var(--link);
    text-decoration: none;
    text-underline-offset: 0.18em;
    text-decoration-thickness: from-font;
    transition: color var(--transicao);
}
a:hover,
a:focus { color: var(--link-hover); text-decoration: underline; }

h1, h2, h3, h4, h5 {
    color: var(--tinta);
    font-weight: 700;
    letter-spacing: -0.021em;
    line-height: 1.16;
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 {
    font-family: var(--fonte-titulo);
    font-weight: 900;
    font-size: clamp(2.05rem, 1.35rem + 2.6vw, 3rem);
    letter-spacing: -0.033em;
    line-height: 1.08;
}
h2 { font-size: clamp(1.42rem, 1.18rem + 0.95vw, 1.85rem); letter-spacing: -0.026em; }
h3 { font-size: 1.16rem; letter-spacing: -0.018em; }
h4 { font-size: 1rem; letter-spacing: -0.012em; }

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: 0.3em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

small { font-size: 0.82em; }

time,
.num-tabular { font-variant-numeric: tabular-nums; }

hr {
    border: 0;
    border-top: 1px solid var(--linha);
    margin: var(--e8) 0;
}

::selection { background: var(--marca); color: #FFFFFF; }

:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
    border-radius: var(--raio-xs);
}

/* -----------------------------------------------------------------
   05. Utilitarios e layout
   ----------------------------------------------------------------- */

.oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pular {
    position: absolute;
    left: -999px;
    background: var(--marca);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--raio-sm);
    z-index: 60;
}
.pular:focus { left: var(--e2); top: var(--e2); text-decoration: none; color: #FFFFFF; }

.envoltorio {
    width: 100%;
    max-width: var(--envoltorio);
    margin: 0 auto;
    padding: 0 var(--envoltorio-margem);
}

/* -----------------------------------------------------------------
   06. Rotulos
   ----------------------------------------------------------------- */

.rotulo {
    display: inline-flex;
    align-items: center;
    height: 24px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--marca);
    background: var(--destaque-bg);
    border: 1px solid color-mix(in srgb, var(--marca) 14%, transparent);
    border-radius: var(--raio-xs);
    padding: 0 var(--e2);
    white-space: nowrap;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
a.rotulo:hover {
    background: color-mix(in srgb, var(--marca) 10%, var(--fundo));
    border-color: color-mix(in srgb, var(--marca) 30%, transparent);
    color: var(--marca);
    text-decoration: none;
}
.rotulo-solido {
    background: var(--marca);
    border-color: var(--marca);
    color: #FFFFFF;
}
a.rotulo-solido:hover { background: var(--marca-escura); border-color: var(--marca-escura); color: #FFFFFF; }
.rotulo-limpo {
    background: transparent;
    border: 0;
    padding: 0;
    height: auto;
    color: var(--link);
}
a.rotulo-limpo:hover { background: transparent; color: var(--link-hover); text-decoration: underline; }

/* -----------------------------------------------------------------
   07. Botoes
   ----------------------------------------------------------------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: 38px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    background: var(--fundo);
    color: var(--marca);
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 var(--e4);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    box-shadow: var(--sombra-1);
    transition: background var(--transicao), border-color var(--transicao),
                color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.botao:hover {
    background: var(--destaque-bg);
    border-color: color-mix(in srgb, var(--marca) 34%, transparent);
    color: var(--marca);
    text-decoration: none;
    box-shadow: var(--sombra-2);
}
.botao:active { transform: translateY(1px); box-shadow: var(--sombra-1); }
.botao[hidden] { display: none; }

.botao-solido {
    background: var(--marca);
    border-color: var(--marca);
    color: #FFFFFF;
}
.botao-solido:hover {
    background: var(--marca-escura);
    border-color: var(--marca-escura);
    color: #FFFFFF;
}

.botao-grande {
    min-height: 46px;
    font-size: 0.84rem;
    padding: 0 var(--e6);
}

.linha-botoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
}

/* -----------------------------------------------------------------
   08. Secoes
   ----------------------------------------------------------------- */

.secao {
    padding: var(--e8) 0;
    border-bottom: 1px solid var(--linha);
}
.secao-clara {
    background: var(--fundo-alt);
    border-bottom-color: var(--linha);
}
.secao:last-of-type { border-bottom: 0; }

.secao-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e5);
    border-bottom: 1px solid var(--linha);
    padding-bottom: var(--e3);
    margin-bottom: var(--e6);
    position: relative;
}
.secao-cabecalho::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 3px;
    background: var(--marca);
    border-radius: var(--raio-pilula);
}
.secao-cabecalho h2 { margin: 0; }
.secao-cabecalho p {
    margin: var(--e1) 0 0;
    color: var(--tinta-suave);
    font-size: 0.94rem;
    line-height: 1.5;
}
.secao-cabecalho a {
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 2px;
}

@media (max-width: 620px) {
    .secao { padding: var(--e7) 0; }
    .secao-cabecalho {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--e2);
    }
}

/* =================================================================
   Conjuga Mais - cromo do site
   Cabecalho, busca do topo, navegacao principal, menu lateral
   (mobile), trilha, rodape e aviso de cookies.

   Depende dos tokens da fundacao (espacos --e1..--e10, raios,
   sombras, --transicao) e das cores que o config.php injeta.
   ================================================================= */

/* Altura unica dos controles do cromo: campo de busca, botao de
   menu e botao de fechar compartilham a mesma regua. */
.cabecalho,
.menu-lateral {
    --controle-altura: 40px;
}

/* -----------------------------------------------------------------
   09. Cabecalho - faixa da marca e linha do logo
   ----------------------------------------------------------------- */

.cabecalho {
    position: relative;
    z-index: 40;
    background: var(--fundo);
    border-bottom: 1px solid var(--linha);
}

/* Faixa superior: servico, nao titulo. Fica baixa e discreta. */
.faixa-marca {
    background: var(--marca);
    color: #FFFFFF;
}
.faixa-marca-interna {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    min-height: 30px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
}
.faixa-texto {
    color: #FFFFFF;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.faixa-direita {
    flex: 0 0 auto;
    color: color-mix(in srgb, #FFFFFF 76%, var(--marca));
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Linha do logo: logo a esquerda, busca ancorada a direita. */
.cabecalho-interno {
    display: flex;
    align-items: center;
    gap: var(--e5);
    padding-top: var(--e3);
    padding-bottom: var(--e3);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex: 0 0 auto;
    color: var(--tinta);
    text-decoration: none;
}
.logo:hover,
.logo:focus { color: var(--tinta); text-decoration: none; }
.logo img {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--raio-sm);
}
.logo-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.1;
}
.logo-texto strong {
    font-family: var(--fonte-titulo);
    font-weight: 900;
    font-size: 1.22rem;
    letter-spacing: -0.032em;
    color: var(--marca);
    transition: color var(--transicao);
}
.logo:hover .logo-texto strong { color: var(--link); }
.logo-texto small {
    margin-top: 2px;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* -----------------------------------------------------------------
   10. Busca do topo e botao do menu
   ----------------------------------------------------------------- */

/* Um so comportamento de largura: encosta na direita e encolhe ate
   o minimo. Nada de margin-left:auto brigando com flex-grow. */
.busca-topo {
    display: flex;
    align-items: stretch;
    flex: 0 1 400px;
    min-width: 0;
    margin-left: auto;
    height: var(--controle-altura);
    background: var(--fundo);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.busca-topo:focus-within {
    border-color: var(--link);
    box-shadow: var(--sombra-foco);
}
.busca-topo input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 var(--e3);
    font-size: 0.92rem;
    color: var(--tinta);
    border-radius: var(--raio-sm) 0 0 var(--raio-sm);
}
.busca-topo input::placeholder { color: var(--tinta-suave); opacity: 0.9; }
/* O anel de foco fica na moldura inteira, entao o campo nao repete. */
.busca-topo input:focus,
.busca-topo input:focus-visible { outline: none; }
.busca-topo button {
    flex: 0 0 auto;
    border: 0;
    border-left: 1px solid var(--linha);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    background: var(--fundo-alt);
    color: var(--marca);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0 var(--e4);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}
.busca-topo button:hover { background: var(--destaque-bg); }
.busca-topo button:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: -3px;
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}

.abrir-menu {
    display: none;
    align-items: center;
    height: var(--controle-altura);
    padding: 0 var(--e4);
    border: 1px solid var(--marca);
    border-radius: var(--raio-sm);
    background: var(--marca);
    color: #FFFFFF;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao);
}
.abrir-menu:hover {
    background: var(--marca-escura);
    border-color: var(--marca-escura);
}

/* -----------------------------------------------------------------
   11. Navegacao principal
   ----------------------------------------------------------------- */

.navegacao {
    background: var(--fundo);
    border-top: 1px solid var(--linha-suave);
}

/* Dez itens em uma linha so: corpo pequeno, tracking curto e gap
   fluido. Se faltar largura, a quebra acontece em linhas de mesma
   altura, com o sublinhado sempre no mesmo trilho. */
.menu-principal {
    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(var(--e3), 1.5vw, var(--e5));
    row-gap: var(--e1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-principal li { margin: 0; }
.menu-principal a {
    display: flex;
    align-items: center;
    height: 38px;
    color: var(--tinta-suave);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--transicao), border-color var(--transicao);
}
.menu-principal a:hover,
.menu-principal a:focus-visible {
    color: var(--link);
    text-decoration: none;
    border-bottom-color: color-mix(in srgb, var(--link) 45%, transparent);
}
.menu-principal a.ativo {
    color: var(--marca);
    border-bottom-color: var(--marca);
}

/* -----------------------------------------------------------------
   12. Menu lateral (mobile)
   ----------------------------------------------------------------- */

.fundo-menu {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: color-mix(in srgb, var(--tinta) 55%, transparent);
}

.menu-lateral {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 80;
    width: min(340px, 88vw);
    height: 100%;
    padding: var(--e5);
    background: var(--fundo);
    border-left: 1px solid var(--linha);
    box-shadow: var(--sombra-3);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.menu-lateral[hidden],
.fundo-menu[hidden] { display: none; }

.menu-lateral-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    min-height: var(--controle-altura);
    padding-bottom: var(--e3);
    margin-bottom: var(--e4);
    border-bottom: 1px solid var(--linha);
}
.menu-lateral-titulo {
    font-family: var(--fonte-titulo);
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--marca);
}
.fechar-menu {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--e3);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    background: var(--fundo-alt);
    color: var(--tinta);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.fechar-menu:hover {
    background: var(--destaque-bg);
    border-color: color-mix(in srgb, var(--marca) 30%, transparent);
    color: var(--marca);
}

.busca-lateral {
    display: flex;
    align-items: stretch;
    height: var(--controle-altura);
    margin-bottom: var(--e5);
    background: var(--fundo);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.busca-lateral:focus-within {
    border-color: var(--link);
    box-shadow: var(--sombra-foco);
}
.busca-lateral input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 var(--e3);
    font-size: 0.92rem;
    color: var(--tinta);
    border-radius: var(--raio-sm) 0 0 var(--raio-sm);
}
.busca-lateral input::placeholder { color: var(--tinta-suave); opacity: 0.9; }
.busca-lateral input:focus,
.busca-lateral input:focus-visible { outline: none; }
.busca-lateral button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    background: var(--marca);
    color: #FFFFFF;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0 var(--e4);
    cursor: pointer;
    transition: background var(--transicao);
}
.busca-lateral button:hover { background: var(--marca-escura); }
.busca-lateral button:focus-visible { outline: 2px solid var(--link); outline-offset: -3px; }

.menu-lateral-rotulo {
    margin: var(--e5) 0 var(--e2);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.menu-lateral-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--linha-suave);
}
.menu-lateral-lista li {
    margin: 0;
    border-bottom: 1px solid var(--linha-suave);
}
.menu-lateral-lista a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: var(--e1) var(--e2);
    margin: 0 calc(var(--e2) * -1);
    color: var(--tinta);
    font-size: 0.94rem;
    font-weight: 600;
    border-radius: var(--raio-xs);
    transition: background var(--transicao), color var(--transicao);
}
.menu-lateral-lista a:hover,
.menu-lateral-lista a:focus-visible {
    background: var(--destaque-bg);
    color: var(--link);
    text-decoration: none;
}

/* -----------------------------------------------------------------
   13. Trilha de navegacao
   ----------------------------------------------------------------- */

.trilha {
    background: var(--fundo-fumaca);
    border-bottom: 1px solid var(--linha);
}
.trilha ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: var(--e1);
    list-style: none;
    margin: 0;
    padding: var(--e3) 0;
    min-height: 44px;
    font-size: 0.79rem;
    line-height: 1.4;
    color: var(--tinta-suave);
}
.trilha li { margin: 0; }
.trilha li + li::before {
    content: "/";
    margin: 0 var(--e2);
    color: var(--linha-forte);
}
.trilha a {
    color: var(--tinta-suave);
    transition: color var(--transicao);
}
.trilha a:hover,
.trilha a:focus-visible { color: var(--link); }
/* Ultimo passo: e a pagina atual, entao ganha peso e tinta cheia. */
.trilha span {
    color: var(--tinta);
    font-weight: 600;
}

/* -----------------------------------------------------------------
   14. Rodape
   ----------------------------------------------------------------- */

.rodape {
    /* Regua unica: o topo de cada coluna e a linha sob ele coincidem. */
    --rodape-regua: 36px;
    --rodape-linha: color-mix(in srgb, #FFFFFF 22%, transparent);
    --rodape-tinta: color-mix(in srgb, #FFFFFF 86%, var(--marca));
    margin-top: var(--e7);
    background: var(--marca);
    color: #FFFFFF;
}
.rodape a {
    color: var(--rodape-tinta);
    transition: color var(--transicao);
}
.rodape a:hover,
.rodape a:focus-visible { color: #FFFFFF; text-decoration: underline; }

.rodape-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    column-gap: var(--e6);
    row-gap: var(--e7);
    align-items: start;
    padding-top: var(--e8);
    padding-bottom: var(--e7);
}
.rodape-coluna { min-width: 0; }

/* A marca abre a grade com o mesmo bloco de cabecalho das outras
   colunas, para que as cinco linhas fiquem na mesma altura. */
.rodape-marca .logo-rodape {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: var(--rodape-regua);
    padding-bottom: var(--e2);
    margin-bottom: var(--e3);
    border-bottom: 1px solid var(--rodape-linha);
}
.logo-rodape img {
    width: var(--rodape-regua);
    height: var(--rodape-regua);
    padding: 2px;
    background: #FFFFFF;
    border-radius: var(--raio-xs);
}
.rodape-marca .logo-texto strong {
    font-family: var(--fonte-titulo);
    font-weight: 900;
    font-size: 1.08rem;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}
.rodape-marca .logo:hover .logo-texto strong { color: #FFFFFF; }

.rodape-texto {
    margin: 0 0 var(--e2);
    font-size: 0.87rem;
    line-height: 1.55;
    color: var(--rodape-tinta);
}
.rodape-texto:last-child { margin-bottom: 0; }

.rodape-titulo {
    display: flex;
    align-items: center;
    min-height: var(--rodape-regua);
    padding-bottom: var(--e2);
    margin: 0 0 var(--e3);
    border-bottom: 1px solid var(--rodape-linha);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: #FFFFFF;
}

.rodape-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rodape-lista li { margin: 0; }
.rodape-lista a {
    display: block;
    padding: 3px 0;
    font-size: 0.87rem;
    line-height: 1.45;
}

.rodape-base {
    background: var(--marca-escura);
    border-top: 1px solid var(--rodape-linha);
}
.rodape-base-interna {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding-top: var(--e3);
    padding-bottom: var(--e3);
}
.rodape-base p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--rodape-tinta);
}
.botao-topo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 32px;
    padding: 0 var(--e3);
    border: 1px solid color-mix(in srgb, #FFFFFF 45%, transparent);
    border-radius: var(--raio-sm);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #FFFFFF;
    transition: background var(--transicao), border-color var(--transicao);
}
.botao-topo:hover {
    background: color-mix(in srgb, #FFFFFF 14%, transparent);
    border-color: #FFFFFF;
    color: #FFFFFF;
    text-decoration: none;
}

/* -----------------------------------------------------------------
   15. Aviso de cookies
   ----------------------------------------------------------------- */

.aviso-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--fundo);
    border-top: 2px solid var(--marca);
    box-shadow: 0 -6px 24px rgba(13, 20, 24, 0.12);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e4);
    padding-top: var(--e4);
    padding-bottom: var(--e4);
}
.aviso-cookies-texto {
    flex: 1 1 460px;
    min-width: 0;
}
.aviso-cookies-texto strong {
    display: block;
    margin-bottom: 2px;
    font-size: 0.92rem;
    letter-spacing: -0.012em;
    color: var(--tinta);
}
.aviso-cookies-texto p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--tinta-suave);
}
.aviso-cookies-acoes {
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex: 0 0 auto;
}

/* -----------------------------------------------------------------
   16. Responsivo do cromo
   ----------------------------------------------------------------- */

@media (max-width: 1024px) {
    .cabecalho-interno { gap: var(--e4); }
    .busca-topo { flex-basis: 320px; }
    .rodape-grade {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--e6);
        row-gap: var(--e6);
    }
}

@media (max-width: 860px) {
    /* Navegacao horizontal sai de cena; tudo vive no menu lateral. */
    .navegacao { display: none; }
    .abrir-menu { display: inline-flex; }

    .cabecalho-interno {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--e3);
        padding-top: var(--e3);
        padding-bottom: var(--e3);
    }
    .logo img { width: 36px; height: 36px; }
    .logo-texto strong { font-size: 1.12rem; }
    .logo-texto small { display: none; }

    .busca-topo {
        order: 3;
        flex: 1 1 100%;
        margin-left: 0;
    }

    .faixa-direita { display: none; }
    .faixa-marca-interna { justify-content: flex-start; }
}

@media (max-width: 620px) {
    .faixa-marca-interna { min-height: 28px; font-size: 0.64rem; }

    .trilha ol { min-height: 40px; font-size: 0.76rem; padding: var(--e2) 0; }

    .rodape-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--e5);
        row-gap: var(--e6);
        padding-top: var(--e7);
        padding-bottom: var(--e6);
    }
    .rodape-marca { grid-column: 1 / -1; }

    .rodape-base-interna {
        justify-content: flex-start;
        gap: var(--e2);
    }

    .aviso-cookies-interno { gap: var(--e3); }
    .aviso-cookies-acoes { width: 100%; }
    .aviso-cookies-acoes .botao { flex: 1 1 auto; }
}

/* =================================================================
   Conjuga Mais - pagina inicial e componentes de acervo

   Abertura (hero), painel de recentes, grade de cartoes de verbo,
   grade de categorias, seletor alfabetico, newsletter e FAQ.

   A grade de cartoes e o FAQ tambem aparecem em /palavras/,
   /categoria/, /busca/, /autor/ e na pagina do verbo: tudo aqui e
   escrito para funcionar em qualquer largura de container, com
   qualquer numero de itens e sem presumir fundo branco.
   ================================================================= */

/* -----------------------------------------------------------------
   17. Abertura da home
   ----------------------------------------------------------------- */

.abertura {
    padding: var(--e8) 0;
    border-bottom: 1px solid var(--linha);
    /* Tinta muito leve que separa o hero do cabecalho sem ganhar altura. */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--destaque-bg) 55%, var(--fundo)) 0%,
            var(--fundo) 76%);
}

.abertura-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 358px;
    gap: var(--e7);
    align-items: start;
}

.abertura h1 {
    margin: var(--e3) 0 0;
    max-width: 18ch;
}

.abertura-linha-fina {
    margin: var(--e3) 0 0;
    max-width: 56ch;
    color: var(--tinta-suave);
    font-size: 1.05rem;
    line-height: 1.55;
}

.abertura .linha-botoes { margin-top: var(--e5); }

/* Tres colunas de mesma largura: os rotulos se alinham em qualquer tela. */
.abertura-numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e4);
    margin-top: var(--e6);
    padding-top: var(--e5);
    border-top: 1px solid var(--linha);
}
.abertura-numero + .abertura-numero {
    padding-left: var(--e4);
    border-left: 1px solid var(--linha);
}
.abertura-numero strong {
    display: block;
    margin-bottom: var(--e1);
    font-family: var(--fonte-titulo);
    font-weight: 900;
    font-size: clamp(1.55rem, 1.2rem + 1vw, 1.95rem);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--marca);
    font-variant-numeric: tabular-nums;
}
.abertura-numero span {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* -----------------------------------------------------------------
   18. Painel de recentes
   ----------------------------------------------------------------- */

.painel {
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--marca);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-1);
    padding: var(--e5);
}
.painel h2 {
    margin: 0 0 var(--e3);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--linha);
    font-family: var(--fonte-texto);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* Tambem usado na lateral da pagina de autor: nao depende de .painel. */
.painel-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.painel-lista li {
    margin: 0;
    border-top: 1px solid var(--linha-suave);
}
.painel-lista li:first-child { border-top: 0; }
.painel-lista a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e3);
    /* Margem negativa: o realce do hover sangra ate a borda do painel. */
    margin: 0 calc(var(--e2) * -1);
    padding: var(--e2);
    border-radius: var(--raio-xs);
    color: var(--tinta);
    font-size: 0.97rem;
    font-weight: 600;
    transition: background var(--transicao), color var(--transicao);
}
.painel-lista a:hover,
.painel-lista a:focus-visible {
    background: var(--destaque-bg);
    color: var(--link);
    text-decoration: none;
}
.painel-lista a > span { min-width: 0; }
.painel-lista small {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tinta-suave);
}

/* Rodape do painel: substitui o estilo inline que havia em inicio.php. */
.painel-rodape {
    margin: var(--e3) 0 0;
    padding-top: var(--e3);
    border-top: 1px solid var(--linha);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
}

/* -----------------------------------------------------------------
   19. Grade de cartoes de verbo

   Efeito de tabela: os fios entre os cartoes sao a sombra de 1px de
   cada cartao, e nao o fundo da grade aparecendo pelo gap. Assim uma
   linha incompleta nao deixa blocos cinzas sobrando no fim da grade.
   auto-fit colapsa as trilhas vazias quando ha poucos itens.
   ----------------------------------------------------------------- */

.grade-palavras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 1px;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-1);
    overflow: hidden;
}

.cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    padding: var(--e5);
    background: var(--fundo);
    box-shadow: 0 0 0 1px var(--linha);
    transition: background var(--transicao), box-shadow var(--transicao);
}
.cartao:hover,
.cartao:focus-within {
    z-index: 1;
    background: var(--fundo-alt);
    box-shadow: 0 0 0 1px var(--linha-forte);
}

.cartao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    min-height: 20px;
}
.cartao-categoria {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--marca);
    transition: color var(--transicao);
}
.cartao-categoria:hover { color: var(--link-hover); }
.cartao-tipo {
    flex: 0 0 auto;
    padding: 1px var(--e1);
    border: 1px solid var(--linha);
    border-radius: var(--raio-xs);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tinta-suave);
}

.cartao h3 {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.022em;
}
.cartao h3 a {
    color: var(--tinta);
    transition: color var(--transicao);
}
.cartao h3 a:hover,
.cartao:hover h3 a { color: var(--link); text-decoration: none; }

.cartao p {
    margin: 0;
    color: var(--tinta-suave);
    font-size: 0.9rem;
    line-height: 1.5;
    /* Teto de tres linhas: nenhum resumo estica a linha inteira da grade. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* margin-top:auto encosta o rodape na base do cartao; a altura minima
   de duas linhas garante que o fio superior de todos os rodapes de uma
   fila fique no mesmo Y, mesmo quando um rotulo quebra e o outro nao. */
.cartao-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    min-height: 44px;
    margin-top: auto;
    padding-top: var(--e3);
    border-top: 1px solid var(--linha-suave);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.cartao-rodape span:last-child {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--link);
}
.cartao-rodape span:last-child::after {
    content: "\2192";
    display: inline-block;
    margin-left: var(--e1);
    transition: transform var(--transicao);
}
.cartao:hover .cartao-rodape span:last-child::after { transform: translateX(3px); }

/* -----------------------------------------------------------------
   20. Grade de categorias
   ----------------------------------------------------------------- */

.grade-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: var(--e4);
}

.categoria-cartao {
    display: flex;
    flex-direction: column;
    padding: var(--e4) var(--e5);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-left: 3px solid var(--marca);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-1);
    transition: box-shadow var(--transicao), border-color var(--transicao);
}
.categoria-cartao:hover,
.categoria-cartao:focus-within {
    border-color: var(--linha-forte);
    border-left-color: var(--marca);
    box-shadow: var(--sombra-2);
}
/* Duas linhas de altura reservada: "Verbos com dupla conjugacao" quebra
   e os outros nao, mas os resumos comecam todos no mesmo Y. */
.categoria-cartao h3 {
    display: flex;
    align-items: flex-start;
    min-height: 2.5em;
    margin: 0 0 var(--e2);
    font-size: 1.08rem;
    line-height: 1.25;
}
.categoria-cartao h3 a {
    color: var(--tinta);
    transition: color var(--transicao);
}
.categoria-cartao h3 a:hover { color: var(--link); text-decoration: none; }
.categoria-cartao p {
    margin: 0 0 var(--e4);
    color: var(--tinta-suave);
    font-size: 0.9rem;
    line-height: 1.5;
}
/* Categoria sem descricao cadastrada: sem o resumo nao sobra buraco
   entre o titulo e a contagem. */
.categoria-cartao p:empty { display: none; }

/* Encostado no rodape do cartao: a contagem fica na mesma linha em toda a fila. */
.contagem {
    display: block;
    margin-top: auto;
    padding-top: var(--e3);
    border-top: 1px solid var(--linha-suave);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--tinta-suave);
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   21. Seletor alfabetico

   Duas faixas fixas por bloco (letra e contagem). A faixa da contagem
   existe mesmo quando nao ha numero, entao todas as letras - ativa,
   com verbos e desativada - ficam na mesma linha.
   ----------------------------------------------------------------- */

.alfabeto {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.alfabeto li { margin: 0; }
.alfabeto a,
.alfabeto span {
    display: grid;
    grid-template-rows: 20px 10px;
    row-gap: 2px;
    align-items: center;
    justify-items: center;
    min-width: 46px;
    padding: 7px var(--e2) 6px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-sm);
    background: var(--fundo);
    color: var(--marca);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1;
    transition: background var(--transicao), border-color var(--transicao),
                color var(--transicao), box-shadow var(--transicao);
}
.alfabeto a:hover {
    background: var(--destaque-bg);
    border-color: color-mix(in srgb, var(--marca) 34%, transparent);
    box-shadow: var(--sombra-1);
    text-decoration: none;
}
.alfabeto a.ativo {
    background: var(--marca);
    border-color: var(--marca);
    color: #FFFFFF;
}
.alfabeto a.ativo:hover { background: var(--marca-escura); border-color: var(--marca-escura); }
.alfabeto span {
    background: var(--fundo-fumaca);
    border-style: dashed;
    color: var(--tinta-suave);
    cursor: default;
}
.alfabeto small {
    /* Herda a cor do bloco: legivel tambem no bloco ativo, que e escuro. */
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.03em;
    color: inherit;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
   22. Newsletter
   ----------------------------------------------------------------- */

.newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: var(--e5) var(--e7);
    align-items: center;
    padding: var(--e6);
    background: var(--destaque-bg);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--marca);
    border-radius: var(--raio-md);
}
.newsletter h2 {
    margin: 0 0 var(--e2);
    font-size: 1.3rem;
    letter-spacing: -0.024em;
}
.newsletter p {
    margin: 0;
    max-width: 54ch;
    color: var(--tinta-suave);
    font-size: 0.94rem;
    line-height: 1.5;
}

.newsletter-forma {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
}
.newsletter-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--e2);
}
.newsletter-campos input {
    flex: 1 1 190px;
    min-width: 0;
    /* Mesma altura do botao ao lado. */
    min-height: 42px;
    padding: 0 var(--e3);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    background: var(--fundo);
    color: var(--tinta);
    font-size: 0.95rem;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.newsletter-campos input::placeholder { color: var(--tinta-suave); opacity: 0.75; }
.newsletter-campos input:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: var(--sombra-foco);
}
.newsletter-campos .botao { min-height: 42px; }
.newsletter small {
    display: block;
    color: var(--tinta-suave);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* -----------------------------------------------------------------
   23. Perguntas frequentes

   Tambem usado dentro de .artigo (pagina do verbo) e nas paginas
   institucionais: sem fundo proprio, so fios.
   ----------------------------------------------------------------- */

.faq { border-top: 1px solid var(--linha); }
.faq-item { border-bottom: 1px solid var(--linha); }

/* O sinal e um item de flex, nao um absoluto: continua alinhado a
   primeira linha quando a pergunta ocupa duas ou tres linhas. */
.faq-item summary {
    display: flex;
    align-items: flex-start;
    gap: var(--e4);
    padding: var(--e3) 0;
    list-style: none;
    cursor: pointer;
    color: var(--tinta);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    transition: color var(--transicao);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--link); }
.faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-left: auto;
    border: 1px solid var(--linha);
    border-radius: var(--raio-xs);
    background: var(--fundo);
    color: var(--link);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.faq-item[open] summary::after {
    content: "\2212";
    background: var(--marca);
    border-color: var(--marca);
    color: #FFFFFF;
}
.faq-item summary:hover::after {
    border-color: color-mix(in srgb, var(--marca) 34%, transparent);
}

/* Dois seletores de classe para vencer .artigo p na pagina do verbo. */
.faq .faq-resposta {
    margin: 0;
    padding: 0 var(--e8) var(--e4) 0;
    max-width: var(--medida-texto);
    color: var(--tinta-suave);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* -----------------------------------------------------------------
   24. Responsivo
   ----------------------------------------------------------------- */

@media (max-width: 1024px) {
    .abertura { padding: var(--e7) 0 var(--e8); }
    .abertura-grade {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e6);
    }
    .abertura h1 { max-width: 24ch; }
    .abertura-linha-fina { max-width: 66ch; }
    .newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--e4) var(--e6); }
}

@media (max-width: 860px) {
    .grade-palavras { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
    .grade-categorias { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--e3); }
    .newsletter {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e4);
        padding: var(--e5);
    }
    .newsletter p { max-width: none; }
    .faq .faq-resposta { padding-right: var(--e6); }
}

@media (max-width: 620px) {
    .abertura { padding: var(--e6) 0 var(--e7); }
    .abertura h1 { max-width: none; }
    .abertura-numeros {
        gap: var(--e3);
        margin-top: var(--e5);
        padding-top: var(--e4);
    }
    .abertura-numero + .abertura-numero { padding-left: var(--e3); }
    .abertura-numero strong { font-size: 1.4rem; }
    .abertura-numero span { font-size: 0.62rem; letter-spacing: 0.07em; }

    .painel { padding: var(--e4); }

    .grade-palavras { grid-template-columns: minmax(0, 1fr); }
    .cartao { padding: var(--e4); }
    .cartao h3 { font-size: 1.15rem; }

    .grade-categorias { grid-template-columns: minmax(0, 1fr); }
    .categoria-cartao { padding: var(--e4); }

    .alfabeto a,
    .alfabeto span { min-width: 40px; padding: 6px var(--e1) 5px; font-size: 0.88rem; }

    .newsletter-campos .botao { flex: 1 1 100%; }

    .faq-item summary { font-size: 0.95rem; gap: var(--e3); }
    .faq .faq-resposta { padding-right: 0; font-size: 0.92rem; }
}

/* =================================================================
   Conjuga Mais - Pagina do verbo
   Topo do verbete, barras de acao, cartao WebP, grade com lateral,
   tipografia do artigo, tabelas de conjugacao, listas, etiquetas,
   caixa do autor e navegacao entre verbetes.

   Depende dos tokens definidos na fundacao (--e1..--e10, raios,
   sombras, medidas) e da paleta injetada pelo config.php.
   ================================================================= */

/* -----------------------------------------------------------------
   25. Topo do verbete
   ----------------------------------------------------------------- */

.verbo-topo {
    padding: var(--e7) 0 var(--e6);
    border-bottom: 1px solid var(--linha);
}

.verbo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    margin-bottom: var(--e3);
}
/* A classe gramatical pode ser uma frase inteira: aqui a etiqueta quebra. */
.verbo-meta .rotulo {
    height: auto;
    min-height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

.verbo-pronuncia {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-family: var(--fonte-mono);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--marca);
    background: var(--fundo-alt);
    border: 1px solid var(--linha);
    border-radius: var(--raio-xs);
    padding: 0 var(--e2);
}

.verbo-topo h1 { margin: 0 0 var(--e3); }

.verbo-resumo {
    font-size: 1.08rem;
    line-height: 1.55;
    color: var(--tinta-suave);
    max-width: var(--medida-texto);
    margin: 0 0 var(--e3);
}

.verbo-datas {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin: 0;
}
.verbo-datas a { color: var(--tinta-suave); }
.verbo-datas a:hover { color: var(--link); }

/* -----------------------------------------------------------------
   26. Barras de acao - compartilhar e ferramentas na mesma regua
   ----------------------------------------------------------------- */

.acoes-verbo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e5);
    padding-top: var(--e4);
    border-top: 1px solid var(--linha);
}
/* A segunda linha continua a primeira: sem borda e sem novo respiro. */
.acoes-verbo + .acoes-verbo {
    margin-top: var(--e2);
    padding-top: 0;
    border-top: 0;
}

.acoes-rotulo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 104px;
    min-height: 38px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* -----------------------------------------------------------------
   27. Cartao WebP do verbete, gerado no servidor pela GD
   ----------------------------------------------------------------- */

.verbo-cartao { padding: var(--e6) 0 0; }

.cartao-imagem {
    margin: 0 auto;
    border: 1px solid var(--linha);
    border-radius: var(--raio-md);
    overflow: hidden;
    background: var(--marca);
    box-shadow: var(--sombra-1);
    max-width: 700px;
}
.cartao-imagem img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1200 / 630;
}
.cartao-imagem figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2) var(--e4);
    padding: var(--e3) var(--e4);
    background: var(--fundo-alt);
    border-top: 1px solid var(--linha);
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--tinta-suave);
}
.cartao-imagem figcaption > span:nth-of-type(2) {
    flex: 1 1 240px;
    min-width: 0;
}
.cartao-legenda-titulo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 38px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--marca);
}
.cartao-imagem figcaption .botao {
    margin-left: auto;
    flex: 0 0 auto;
}

/* -----------------------------------------------------------------
   28. Grade de conteudo e lateral
   ----------------------------------------------------------------- */

.verbo-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lateral-largura);
    gap: var(--e7);
    /* Este elemento tambem e .envoltorio: mexer so na vertical
       para nao apagar a margem lateral do trilho. */
    padding-top: var(--e7);
    padding-bottom: var(--e8);
    align-items: start;
}

.lateral {
    position: sticky;
    top: var(--e6);
    /* A lateral e mais alta que a tela: rola sozinha em vez de travar. */
    max-height: calc(100vh - var(--e10));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.lateral-bloco {
    border: 1px solid var(--linha);
    border-radius: var(--raio-md);
    padding: var(--e4);
    margin-bottom: var(--e4);
    background: var(--fundo);
}
.lateral-bloco:last-child { margin-bottom: 0; }
.lateral-bloco h2 {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--tinta-suave);
    border-bottom: 1px solid var(--linha);
    padding-bottom: var(--e2);
    margin: 0 0 var(--e3);
}
.lateral-bloco p {
    font-size: 0.92rem;
    margin: 0 0 var(--e3);
}
/* Mais especifico que o p:last-child da fundacao, entao repete aqui. */
.lateral-bloco p:last-child { margin-bottom: 0; }
.lateral-bloco .etiquetas { margin-bottom: 0; }
.lateral-bloco .botao { width: 100%; }

/* -----------------------------------------------------------------
   29. Sumario e ficha - mesma coluna interna dos blocos laterais
   ----------------------------------------------------------------- */

.sumario {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: sumario;
}
.sumario li {
    margin: 0;
    border-bottom: 1px solid var(--linha-suave);
}
.sumario li:last-child { border-bottom: 0; }
.sumario a {
    display: grid;
    grid-template-columns: 2em 1fr;
    align-items: baseline;
    gap: var(--e2);
    padding: var(--e2) 0;
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--tinta);
    transition: color var(--transicao);
}
/* Numero em coluna propria: 01 e 10 comecam o texto no mesmo ponto. */
.sumario a::before {
    counter-increment: sumario;
    content: counter(sumario, decimal-leading-zero);
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--link);
}
.sumario a:hover,
.sumario a:focus-visible { color: var(--link); text-decoration: none; }

.ficha { margin: 0; }
.ficha div {
    display: grid;
    grid-template-columns: 6.4em minmax(0, 1fr);
    align-items: baseline;
    gap: var(--e3);
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--linha-suave);
    font-size: 0.88rem;
    line-height: 1.4;
}
.ficha div:last-child { border-bottom: 0; }
.ficha dt {
    color: var(--tinta-suave);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    font-weight: 700;
}
.ficha dd {
    margin: 0;
    min-width: 0;
    font-weight: 700;
    color: var(--tinta);
}

/* -----------------------------------------------------------------
   30. Artigo
   ----------------------------------------------------------------- */

.artigo h2 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    padding-bottom: var(--e2);
    border-bottom: 2px solid var(--marca);
}
.artigo h2:first-child { margin-top: 0; }
.artigo h3 { margin-top: 1.5em; margin-bottom: 0.45em; }
.artigo p { color: var(--tinta); }
.artigo ul,
.artigo ol { margin-bottom: 1.1em; }
.artigo ul li,
.artigo ol li { color: var(--tinta); }
.artigo > ul li::marker,
.artigo > ol li::marker { color: var(--linha-forte); }

.bloco-destaque {
    border: 1px solid var(--linha);
    border-left: 3px solid var(--link);
    background: var(--fundo-alt);
    border-radius: var(--raio-sm);
    padding: var(--e4) var(--e5);
    margin: var(--e5) 0;
}
.bloco-destaque h3 {
    margin-top: 0;
    margin-bottom: var(--e3);
    font-size: 1.02rem;
}
.bloco-destaque > *:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------
   31. Tabelas de conjugacao
   Blocos irmaos com titulo na mesma altura, colunas identicas e
   linhas de altura fixa: a grade inteira bate de tabela para tabela.
   ----------------------------------------------------------------- */

/* 320px de largura minima e o ponto em que "eles / elas / voces" e
   "quando abrirmos" cabem cada um em uma linha so. Abaixo disso as
   celulas quebram em duas linhas e as linhas param de bater entre
   tabelas vizinhas, que e justamente o que esta grade existe para
   evitar - por isso duas colunas largas, e nao tres estreitas. */
.tabelas-conjugacao {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--e4);
    align-items: start;
    margin: var(--e5) 0 var(--e6);
}

.tabela-tempo {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linha);
    border-radius: var(--raio-md);
    overflow: hidden;
    background: var(--fundo);
}

/* Altura minima de duas linhas: titulos curtos e longos comecam
   a tabela na mesma altura, sem depender do texto. */
.tabela-tempo caption,
.tabela-titulo {
    display: flex;
    align-items: center;
    min-height: 46px;
    background: var(--marca);
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    padding: var(--e2) var(--e3);
    text-align: left;
}

table.conjugacao {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.95rem;
}
/* height numa celula vale como altura minima: fixa a pauta em 40px
   para que a linha N de uma tabela fique no mesmo Y da linha N da
   tabela ao lado. So uma celula de duas linhas empurra a sua. */
table.conjugacao th,
table.conjugacao td {
    height: 40px;
    padding: var(--e1) var(--e3);
    line-height: 1.3;
    border-bottom: 1px solid var(--linha-suave);
    text-align: left;
    vertical-align: middle;
}
table.conjugacao tr:last-child th,
table.conjugacao tr:last-child td { border-bottom: 0; }

/* A coluna do pronome cresce ate um teto: nao espreme na tabela
   estreita nem sobra vazio na tabela larga. */
table.conjugacao th {
    width: min(46%, 160px);
    font-weight: 400;
    color: var(--tinta-suave);
    font-size: 0.82rem;
    background: var(--fundo-fumaca);
}
/* A forma verbal e o dado principal do bloco. */
table.conjugacao td {
    font-weight: 700;
    color: var(--tinta);
    letter-spacing: -0.005em;
}
table.conjugacao td .particula {
    font-weight: 400;
    font-size: 0.86em;
    color: var(--tinta-suave);
}

/* -----------------------------------------------------------------
   32. Listas, exemplos e etiquetas
   ----------------------------------------------------------------- */

.lista-marcada {
    list-style: none;
    margin: 0 0 1.1em;
    padding: 0;
    border-top: 1px solid var(--linha);
}
/* Marcador em coluna propria: continua alinhado quando o item
   ocupa duas ou mais linhas. */
.lista-marcada li {
    display: grid;
    grid-template-columns: var(--e5) minmax(0, 1fr);
    align-items: start;
    margin: 0;
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--linha);
    color: var(--tinta);
}
.lista-marcada li::before {
    content: "";
    width: 10px;
    height: 2px;
    margin-top: 0.78em;
    background: var(--link);
}
.lista-marcada:last-child { margin-bottom: 0; }

.exemplos {
    margin: 0 0 1.1em;
    padding: 0;
    list-style: none;
}
.exemplos li {
    margin: 0 0 var(--e2);
    padding: var(--e2) var(--e3);
    border-left: 3px solid var(--linha-forte);
    background: var(--fundo);
    color: var(--tinta);
    font-size: 1rem;
    line-height: 1.55;
    transition: border-color var(--transicao), background var(--transicao);
}
.exemplos li:last-child { margin-bottom: 0; }
.exemplos li:hover {
    border-left-color: var(--link);
    background: var(--fundo-alt);
}

.par-listas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--e4) var(--e7);
    align-items: start;
}
.par-listas h3 { margin-top: 0; }

.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    list-style: none;
    margin: 0 0 1.1em;
    padding: 0;
}
.etiquetas li { margin: 0; }
.etiquetas a,
.etiquetas span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-sm);
    background: var(--fundo-alt);
    padding: 0 var(--e3);
    font-size: 0.84rem;
    line-height: 1.3;
    color: var(--tinta);
    transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.etiquetas a:hover,
.etiquetas a:focus-visible {
    border-color: color-mix(in srgb, var(--link) 40%, transparent);
    background: var(--destaque-bg);
    color: var(--link);
    text-decoration: none;
}
.etiquetas span { color: var(--tinta-suave); }

/* -----------------------------------------------------------------
   33. Caixa do autor
   ----------------------------------------------------------------- */

.autor-box {
    border: 1px solid var(--linha);
    border-top: 3px solid var(--marca);
    border-radius: var(--raio-md);
    padding: var(--e6);
    margin: var(--e7) 0 0;
    background: var(--fundo-alt);
}
.autor-box .rotulo { margin-bottom: var(--e3); }
.autor-box h2 {
    font-size: 1.2rem;
    margin: 0 0 var(--e1);
    padding-bottom: 0;
    border-bottom: 0;
}
.autor-box .cargo {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--rotulo-espacamento);
    color: var(--tinta-suave);
    margin: 0 0 var(--e3);
}
.autor-box p { color: var(--tinta-suave); margin-bottom: var(--e3); }
.autor-box .verbo-datas { margin-bottom: var(--e4); }
.autor-box .botao { margin-top: var(--e1); }

/* -----------------------------------------------------------------
   34. Navegacao entre verbetes
   Cada lado e um cartao proprio: com so um vizinho a linha continua
   reta, sem borda solta nem coluna torta.
   ----------------------------------------------------------------- */

.navegacao-palavras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e3);
    margin: var(--e7) 0 0;
    padding-top: var(--e6);
    border-top: 1px solid var(--linha);
}
.navegacao-palavras > div { display: flex; }
.navegacao-palavras a {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--e3) var(--e4);
    border: 1px solid var(--linha);
    border-radius: var(--raio-md);
    background: var(--fundo);
    color: var(--tinta);
    transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.navegacao-palavras a:hover,
.navegacao-palavras a:focus-visible {
    border-color: color-mix(in srgb, var(--link) 34%, transparent);
    background: var(--fundo-alt);
    box-shadow: var(--sombra-1);
    text-decoration: none;
}
.navegacao-palavras a:hover strong { color: var(--link); }
.navegacao-palavras span {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin-bottom: var(--e1);
}
.navegacao-palavras strong {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    transition: color var(--transicao);
}
.nav-proxima { justify-content: flex-end; text-align: right; }

/* -----------------------------------------------------------------
   35. Responsivo
   ----------------------------------------------------------------- */

@media (max-width: 1024px) {
    .verbo-grade {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e6);
        padding-top: var(--e6);
        padding-bottom: var(--e7);
    }
    /* Sem coluna lateral, os blocos viram uma faixa de cartoes. */
    .lateral {
        position: static;
        max-height: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        gap: var(--e4);
        align-items: start;
    }
    .lateral-bloco { margin-bottom: 0; }
}

@media (max-width: 860px) {
    .verbo-topo { padding: var(--e6) 0 var(--e5); }
    .verbo-cartao { padding-top: var(--e5); }
    .acoes-verbo { margin-top: var(--e4); padding-top: var(--e3); }
    .tabelas-conjugacao { gap: var(--e3); }
    .navegacao-palavras {
        grid-template-columns: 1fr;
        gap: var(--e2);
        padding-top: var(--e5);
    }
    .nav-proxima { justify-content: flex-start; text-align: left; }
}

@media (max-width: 620px) {
    .verbo-resumo { font-size: 1.02rem; }
    /* O rotulo passa a titular a linha de botoes. */
    .acoes-rotulo {
        flex: 1 1 100%;
        min-height: 0;
        min-width: 0;
        margin-bottom: var(--e1);
    }
    .cartao-imagem figcaption {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--e2);
        padding: var(--e3);
    }
    .cartao-legenda-titulo { min-height: 0; }
    .cartao-imagem figcaption > span:nth-of-type(2) { flex: 0 1 auto; }
    .cartao-imagem figcaption .botao { margin-left: 0; width: 100%; }
    .autor-box { padding: var(--e5); }
    .par-listas { gap: var(--e4); }
    .ficha div { grid-template-columns: 5.8em minmax(0, 1fr); gap: var(--e2); }
}

/* =================================================================
   Conjuga Mais - listagens, busca, paginas institucionais e impressao

   Cobre os estados de listagem (.resumo-listagem, .sem-resultado,
   .aviso), a paginacao, o trilho das paginas institucionais
   (.pagina-topo, .pagina-conteudo, .pagina-grade, .texto-longo),
   o formulario de contato e a folha de impressao do site inteiro.
   ================================================================= */

/* -----------------------------------------------------------------
   36. Estados de listagem
   As duas linhas de estado (.resumo-listagem e .aviso) e o cartao de
   vazio (.sem-resultado) precisam ter o mesmo peso: informacao de
   servico, nunca alarme.
   ----------------------------------------------------------------- */

.resumo-listagem {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e1) var(--e2);
    margin: var(--e6) 0 var(--e5);
    padding: 0 0 var(--e3);
    border-bottom: 1px solid var(--linha-suave);
    color: var(--tinta-suave);
    font-size: 0.85rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
/* Em /categoria/ e /busca/ ela abre a secao: sem folga extra no topo. */
.resumo-listagem:first-child { margin-top: 0; }
.resumo-listagem strong {
    color: var(--tinta);
    font-weight: 700;
}

.aviso {
    display: block;
    border: 1px solid color-mix(in srgb, var(--link) 20%, var(--linha));
    border-left: 3px solid var(--link);
    border-radius: var(--raio-sm);
    background: var(--destaque-bg);
    padding: var(--e3) var(--e4);
    margin: 0 0 var(--e5);
    color: var(--tinta);
    font-size: 0.9rem;
    line-height: 1.55;
}
.aviso p { margin: 0; }
.aviso a {
    font-weight: 600;
    text-decoration: underline;
}

.sem-resultado {
    border: 1px solid var(--linha);
    border-radius: var(--raio-md);
    background: var(--fundo-fumaca);
    box-shadow: var(--sombra-1);
    padding: var(--e6) var(--e5);
    margin: 0 0 var(--e6);
    text-align: center;
    color: var(--tinta-suave);
    font-size: 0.95rem;
    line-height: 1.55;
}
/* Marcador curto no topo: diz "estado previsto", nao "layout quebrado". */
.sem-resultado::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin: 0 auto var(--e3);
    background: var(--marca);
    border-radius: var(--raio-pilula);
}
.sem-resultado strong { color: var(--tinta); }
.sem-resultado a {
    font-weight: 600;
    text-decoration: underline;
}

/* -----------------------------------------------------------------
   37. Paginacao
   Todos os itens - numeros, reticencias, Anterior e Proxima - vivem
   na mesma caixa de 38px de altura, igual a do .botao.
   ----------------------------------------------------------------- */

.paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e1);
    list-style: none;
    margin: var(--e7) 0 0;
    padding: var(--e5) 0 0;
    border-top: 1px solid var(--linha);
}
.paginacao li {
    display: flex;
    margin: 0;
}
.paginacao a,
.paginacao span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    height: 38px;
    min-width: 38px;
    padding: 0 var(--e3);
    border: 1px solid var(--linha);
    border-radius: var(--raio-sm);
    background: var(--fundo);
    color: var(--marca);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    transition: background var(--transicao), border-color var(--transicao),
                color var(--transicao), box-shadow var(--transicao);
}
.paginacao a:hover {
    background: var(--destaque-bg);
    border-color: color-mix(in srgb, var(--marca) 34%, transparent);
    color: var(--marca);
    box-shadow: var(--sombra-1);
    text-decoration: none;
}
.paginacao a:focus-visible { border-color: var(--link); }

.paginacao .atual {
    background: var(--marca);
    border-color: var(--marca);
    color: #FFFFFF;
    box-shadow: var(--sombra-1);
    cursor: default;
}

/* Sem borda, mas com a mesma altura: nao quebra a fileira. */
.paginacao .reticencias {
    min-width: var(--e5);
    padding: 0 var(--e1);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--tinta-suave);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* Setas decorativas: o texto do link continua intacto. */
.paginacao a[rel="prev"],
.paginacao a[rel="next"] {
    padding: 0 var(--e4);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.paginacao a[rel="prev"]::before {
    content: "\2190";
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.7;
}
.paginacao a[rel="next"]::after {
    content: "\2192";
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.7;
}

/* -----------------------------------------------------------------
   38. Paginas institucionais
   Topo de pagina em faixa levemente tingida, conteudo em duas colunas
   no mesmo trilho do resto do site.
   ----------------------------------------------------------------- */

.pagina-topo {
    padding: var(--e7) 0 var(--e6);
    background: var(--fundo-fumaca);
    border-bottom: 1px solid var(--linha);
}
.pagina-topo .rotulo { margin-bottom: var(--e3); }
.pagina-topo h1 { margin: 0 0 var(--e3); }
/* Linha de apoio e linha de datas: sem nomear classes de outra area. */
.pagina-topo p { margin: 0 0 var(--e2); }
.pagina-topo p:last-child { margin-bottom: 0; }

/* Este elemento tambem e .envoltorio: so a vertical, senao o atalho
   de padding zera a margem lateral do trilho e o texto sai do prumo. */
.pagina-conteudo {
    padding-top: var(--e7);
    padding-bottom: var(--e8);
}

.pagina-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lateral-largura);
    gap: var(--e7);
    align-items: start;
}
/* Topo das duas colunas na mesma linha. */
.pagina-grade > * > :first-child { margin-top: 0; }

.texto-longo { max-width: var(--medida-texto); }
/* O segundo seletor sobe a especificidade para vencer .artigo h2. */
.texto-longo h2,
.artigo.texto-longo h2 {
    margin-top: 1.55em;
    margin-bottom: 0.5em;
    padding-bottom: var(--e2);
    border-bottom: 1px solid var(--linha);
    scroll-margin-top: var(--e6);
}
.texto-longo h2:first-child,
.artigo.texto-longo h2:first-child { margin-top: 0; }
.texto-longo h3,
.artigo.texto-longo h3 {
    margin-top: 1.35em;
    margin-bottom: 0.4em;
}
.texto-longo p { margin-bottom: 0.95em; }
.texto-longo > ul,
.texto-longo > ol { margin-bottom: 1em; }
.texto-longo a { text-decoration: underline; }
.texto-longo a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------
   39. Formulario de contato
   Campos, botao e aviso no mesmo trilho; altura unica de 42px para
   tudo que e clicavel ou digitavel.
   ----------------------------------------------------------------- */

.formulario-contato {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e4);
    max-width: 560px;
    margin: 0 0 var(--e6);
    padding: var(--e5);
    background: var(--fundo-alt);
    border: 1px solid var(--linha);
    border-radius: var(--raio-md);
}
.formulario-contato > * { min-width: 0; }
.formulario-contato .botao {
    justify-self: end;
    min-width: 200px;
    min-height: 42px;
    margin-top: var(--e1);
}
.formulario-contato .aviso { margin: 0; }

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    min-width: 0;
}
.campo label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--rotulo-espacamento);
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.campo input,
.campo textarea {
    width: 100%;
    min-height: 42px;
    padding: 0 var(--e3);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    background: var(--fundo);
    color: var(--tinta);
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.5;
    box-shadow: var(--sombra-1);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea {
    min-height: 132px;
    padding: var(--e3);
    resize: vertical;
}
.campo input::placeholder,
.campo textarea::placeholder {
    color: color-mix(in srgb, var(--tinta-suave) 58%, var(--fundo));
}
.campo input:hover,
.campo textarea:hover { border-color: color-mix(in srgb, var(--link) 40%, var(--linha-forte)); }
.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: var(--sombra-foco);
}

/* -----------------------------------------------------------------
   40. Responsivo desta area
   ----------------------------------------------------------------- */

@media (max-width: 1024px) {
    .pagina-grade {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e6);
    }
    .pagina-conteudo { padding-top: var(--e6); padding-bottom: var(--e8); }
}

@media (max-width: 860px) {
    .pagina-topo { padding: var(--e6) 0 var(--e5); }
    .texto-longo { max-width: none; }
    .formulario-contato { max-width: none; }
}

@media (max-width: 620px) {
    .pagina-topo { padding: var(--e5) 0 var(--e5); }
    .pagina-conteudo { padding-top: var(--e5); padding-bottom: var(--e7); }

    .paginacao {
        justify-content: center;
        margin-top: var(--e6);
        padding-top: var(--e4);
    }
    .paginacao a,
    .paginacao span {
        height: 34px;
        min-width: 34px;
        padding: 0 var(--e2);
        font-size: 0.82rem;
    }
    .paginacao a[rel="prev"],
    .paginacao a[rel="next"] {
        padding: 0 var(--e3);
        font-size: 0.72rem;
    }
    .paginacao a[rel="prev"]::before,
    .paginacao a[rel="next"]::after { display: none; }

    .sem-resultado { padding: var(--e5) var(--e4); }
    .formulario-contato {
        padding: var(--e4);
        gap: var(--e3);
    }
    .formulario-contato .botao {
        justify-self: stretch;
        min-width: 0;
    }
}

/* -----------------------------------------------------------------
   41. Impressao (site inteiro)
   A peca impressa que importa e a pagina do verbo com as tabelas de
   conjugacao. Tudo vira preto sobre branco: nenhum bloco chapado de
   tinta, bordas visiveis, tabelas inteiras na mesma pagina.
   ----------------------------------------------------------------- */

@media print {

    @page { margin: 1.5cm; }

    /* Zera fundos e sombras: economiza tinta e resolve os blocos
       escuros (.tabela-titulo, .rodape, .rotulo-solido) de uma vez. */
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
    }

    html,
    body {
        background: #FFFFFF;
        margin: 0;
        padding: 0;
    }
    body {
        font-size: 10.5pt;
        line-height: 1.42;
    }

    /* O que nao serve no papel. */
    .pular,
    .cabecalho,
    .faixa-marca,
    .navegacao,
    .menu-principal,
    .abrir-menu,
    .menu-lateral,
    .fundo-menu,
    .busca-topo,
    .busca-lateral,
    .trilha,
    .acoes-verbo,
    .navegacao-palavras,
    .lateral,
    .paginacao,
    .alfabeto,
    .newsletter,
    .botao,
    .botao-topo,
    .rodape,
    .aviso-cookies,
    .cartao-imagem figcaption { display: none !important; }

    /* Layout linear, sem trilhos nem colunas laterais. */
    .envoltorio {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .verbo-grade,
    .pagina-grade,
    .abertura-grade { display: block; }

    .secao {
        padding: 0 0 10pt;
        border-bottom: 0;
    }
    .secao-cabecalho {
        display: block;
        border-bottom: 0.75pt solid #000000;
        padding-bottom: 4pt;
        margin-bottom: 8pt;
    }
    .secao-cabecalho::after { display: none; }

    .pagina-topo,
    .verbo-topo,
    .abertura {
        padding: 0 0 8pt;
        margin: 0 0 12pt;
        border-bottom: 1pt solid #000000;
    }
    .pagina-conteudo { padding: 0; }

    /* Tipografia do papel. Titulo nunca fica sozinho no rodape. */
    h1 { font-size: 19pt; line-height: 1.12; margin: 0 0 6pt; }
    h2 { font-size: 12.5pt; margin: 14pt 0 5pt; }
    h3 { font-size: 10.5pt; margin: 10pt 0 4pt; }
    h1, h2, h3, h4 {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
    }
    p, li { orphans: 3; widows: 3; }

    .artigo,
    .texto-longo {
        max-width: none;
        width: auto;
    }
    .texto-longo h2,
    .artigo.texto-longo h2,
    .artigo h2 {
        border-bottom: 0.75pt solid #000000;
        padding-bottom: 3pt;
    }

    /* Tabelas de conjugacao: o motivo de existir desta folha. */
    .tabelas-conjugacao {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8pt 12pt;
        margin: 6pt 0 12pt;
    }
    .tabela-tempo {
        border: 0.75pt solid #000000;
        border-radius: 0;
        overflow: visible;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .tabela-tempo caption,
    .tabela-titulo {
        display: block;
        padding: 3.5pt 6pt;
        border-bottom: 0.75pt solid #000000;
        font-size: 8pt;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: left;
    }
    table.conjugacao {
        width: 100%;
        border-collapse: collapse;
        font-size: 9.5pt;
    }
    table.conjugacao tr { break-inside: avoid; page-break-inside: avoid; }
    table.conjugacao th,
    table.conjugacao td {
        /* No papel a pauta de 40px da tela so gastaria folha. */
        height: auto;
        padding: 2.5pt 6pt;
        border-bottom: 0.5pt solid #767676;
        text-align: left;
        vertical-align: top;
    }
    table.conjugacao tr:last-child th,
    table.conjugacao tr:last-child td { border-bottom: 0; }
    table.conjugacao th {
        width: 42%;
        font-weight: 400;
        border-right: 0.5pt solid #767676;
    }
    table.conjugacao td { font-weight: 700; }
    table.conjugacao td .particula { font-weight: 400; }

    /* Blocos que nao podem ser cortados ao meio. */
    .cartao,
    .categoria-cartao,
    .bloco-destaque,
    .autor-box,
    .exemplos li,
    .faq-item,
    .cartao-imagem,
    .sem-resultado,
    .aviso,
    .lateral-bloco {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Caixas e etiquetas: contorno fino no lugar do preenchimento. */
    .rotulo,
    .rotulo-solido,
    .etiquetas span,
    .etiquetas a,
    .verbo-pronuncia {
        height: auto;
        padding: 0 3pt;
        border: 0.5pt solid #000000;
        border-radius: 0;
        font-size: 8pt;
    }
    .rotulo-limpo { border: 0; padding: 0; }
    .bloco-destaque,
    .aviso,
    .sem-resultado,
    .cartao,
    .categoria-cartao,
    .cartao-imagem,
    .lateral-bloco,
    .verbo-cartao {
        border: 0.5pt solid #000000;
        border-radius: 0;
    }
    .sem-resultado::before { display: none; }
    .aviso { border-left-width: 2pt; }

    .grade-palavras,
    .grade-categorias {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8pt;
    }
    .resumo-listagem {
        border-bottom: 0.5pt solid #000000;
        padding-bottom: 3pt;
        margin: 0 0 8pt;
        font-size: 9pt;
    }

    /* Perguntas frequentes abertas: details fechado nao vale no papel. */
    details.faq-item { display: block; }
    details.faq-item::details-content {
        content-visibility: visible !important;
        block-size: auto !important;
        overflow: visible !important;
    }
    details.faq-item > *:not(summary) { display: block !important; }
    .faq-item { border-bottom: 0.5pt solid #000000; padding: 4pt 0; }
    .faq-item summary {
        padding: 0;
        font-size: 10.5pt;
        font-weight: 700;
        list-style: none;
    }
    .faq-item summary::after { content: "" !important; display: none !important; }
    .faq-resposta {
        display: block !important;
        padding: 3pt 0 0;
        margin: 0;
    }

    /* Links: texto preto e, no corpo do artigo, a URL logo depois.
       Uma regra so, com lista de seletores, para que a pagina
       institucional (.artigo.texto-longo) nao imprima a URL duas vezes. */
    a {
        color: #000000;
        text-decoration: none;
    }
    .artigo a[href]:not([href^="#"]):not([href^="mailto:"])::after,
    .texto-longo a[href]:not([href^="#"]):not([href^="mailto:"])::after {
        content: " <" attr(href) ">";
        font-size: 8.5pt;
        font-weight: 400;
        word-break: break-all;
    }

    img { max-width: 100% !important; break-inside: avoid; }
    hr { margin: 8pt 0; border-top: 0.5pt solid #000000; }
}

/* =================================================================
   Conjuga Mais - costuras entre areas
   Regras que pertencem a duas areas ao mesmo tempo e por isso nao
   cabiam em nenhuma delas. Fica no fim da folha de proposito: e o
   ultimo a falar quando duas regras empatam em especificidade.
   ================================================================= */

/* -----------------------------------------------------------------
   42. Costuras entre areas
   ----------------------------------------------------------------- */

/* A busca da pagina /busca/ reaproveita a moldura da busca do topo,
   mas ali ela e o assunto da pagina: fica maior e ancorada a esquerda. */
.busca-pagina {
    width: 100%;
    max-width: 560px;
    height: 46px;
    margin: var(--e4) 0 0;
}
.busca-pagina input { font-size: 1rem; padding: 0 var(--e4); }
.busca-pagina button { padding: 0 var(--e5); }

@media (max-width: 620px) {
    .busca-pagina { height: 42px; }
    .busca-pagina input { font-size: 0.95rem; padding: 0 var(--e3); }
    .busca-pagina button { padding: 0 var(--e4); }
}