/* =================================================================
   Rankings da Ciência — sistema visual editorial
   Mobile-first. Azul-marinho, branco e amarelo.
   ================================================================= */

:root {
    /* Superfícies */
    --marinho-900: #061428;
    --marinho-800: #0a1e3a;
    --marinho-700: #10294c;
    --marinho-600: #163663;
    --marinho-500: #1d4e89;
    --marinho-400: #2f6bb0;

    /* Neutros */
    --branco: #ffffff;
    --papel: #f7f9fc;
    --papel-2: #eef2f8;
    --linha: #dde4ee;
    --linha-forte: #c4d0e0;

    /* Texto */
    --tinta: #101d2f;
    --tinta-media: #3d4c60;
    --tinta-suave: #64748b;
    --tinta-clara: #94a3b8;

    /* Destaque */
    --ouro: #f2b705;
    --ouro-claro: #ffd968;
    --ouro-suave: #fff3cd;
    --ouro-escuro: #b8890a;

    /* Semânticos */
    --alerta: #9a3412;
    --alerta-fundo: #fff7ed;

    /* Tipografia */
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

    /* Métricas */
    --largura: 1200px;
    --largura-texto: 720px;
    --raio: 4px;
    --raio-g: 10px;
    --gap: 1.5rem;

    /* Elevação */
    --sombra-1: 0 1px 2px rgba(6, 20, 40, .06), 0 2px 8px rgba(6, 20, 40, .05);
    --sombra-2: 0 2px 4px rgba(6, 20, 40, .06), 0 12px 28px rgba(6, 20, 40, .09);
    --sombra-3: 0 24px 60px rgba(6, 20, 40, .18);
}

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

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

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

a {
    color: var(--marinho-500);
    text-decoration-color: rgba(29, 78, 137, .35);
    text-underline-offset: .18em;
    transition: color .18s ease, text-decoration-color .18s ease;
}

a:hover { color: var(--marinho-700); text-decoration-color: var(--ouro); }

:focus-visible {
    outline: 3px solid var(--ouro);
    outline-offset: 2px;
    border-radius: 2px;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--marinho-800);
    line-height: 1.18;
    letter-spacing: -.012em;
    margin: 0 0 .6em;
    font-weight: 700;
}

h1 { font-size: clamp(2rem, 6vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.15rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
h4 { font-size: 1.075rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li { margin-bottom: .5em; }

strong { font-weight: 650; color: var(--marinho-800); }

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

::selection { background: var(--ouro-suave); color: var(--marinho-900); }

/* ---------------------------------------------------------------
   Estrutura
   --------------------------------------------------------------- */

.envolucro {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 700px) { .envolucro { padding-inline: 2rem; } }

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ouro);
    color: var(--marinho-900);
    padding: .85rem 1.4rem;
    font-weight: 700;
    border-radius: 0 0 var(--raio) 0;
}

.pular-para-conteudo:focus { left: 0; }

main { display: block; }

.secao { padding-block: clamp(2.75rem, 7vw, 4.75rem); }
.secao--papel { background: var(--papel-2); }
.secao--branca { background: var(--branco); }

.secao--marinho {
    background: var(--marinho-800);
    color: rgba(255, 255, 255, .82);
    position: relative;
    overflow: hidden;
}

.secao--marinho h2, .secao--marinho h3 { color: var(--branco); }
.secao--marinho a { color: var(--ouro-claro); }

/* ---------------------------------------------------------------
   Cabeçalho de seção
   --------------------------------------------------------------- */

.cabecalho-secao { margin-bottom: 2.25rem; max-width: 62ch; }

.cabecalho-secao--centro {
    margin-inline: auto;
    text-align: center;
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--marinho-500);
    margin-bottom: .85rem;
}

.etiqueta::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    background: var(--ouro);
    flex: none;
}

.secao--marinho .etiqueta { color: var(--ouro); }
.secao--marinho .etiqueta::before { background: rgba(242, 183, 5, .55); }

.cabecalho-secao p {
    color: var(--tinta-media);
    font-size: 1.0625rem;
    margin-bottom: 0;
}

.secao--marinho .cabecalho-secao p { color: rgba(255, 255, 255, .74); }

/* ---------------------------------------------------------------
   Topo do site
   --------------------------------------------------------------- */

.topo {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--marinho-900);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.topo::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--ouro) 0%, rgba(242, 183, 5, 0) 45%);
}

.topo__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: var(--branco);
    flex: none;
    min-width: 0;
}

.marca__logo {
    display: block;
    height: 2.6rem;
    width: auto;
    max-width: min(16.5rem, 62vw);
    object-fit: contain;
    object-position: left center;
}

.marca__sigilo {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--marinho-500), var(--marinho-700));
    border: 1px solid rgba(242, 183, 5, .45);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.marca__sigilo span {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ouro);
    line-height: 1;
}

.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }

.marca__nome {
    font-family: var(--serif);
    font-size: 1.14rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.marca__sub {
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    font-weight: 600;
}

.abre-menu {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--branco);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    padding: .5rem .8rem;
    border-radius: var(--raio);
    cursor: pointer;
}

.abre-menu:hover { background: rgba(255, 255, 255, .13); }

.abre-menu__barras {
    width: 1rem;
    height: .7rem;
    position: relative;
    display: inline-block;
}

.abre-menu__barras::before,
.abre-menu__barras::after,
.abre-menu__barras span {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ouro);
    transition: transform .2s ease, opacity .2s ease;
}

.abre-menu__barras::before { top: 0; }
.abre-menu__barras span { top: 50%; margin-top: -1px; }
.abre-menu__barras::after { bottom: 0; }

.abre-menu[aria-expanded="true"] .abre-menu__barras::before { transform: translateY(5px) rotate(45deg); }
.abre-menu[aria-expanded="true"] .abre-menu__barras span { opacity: 0; }
.abre-menu[aria-expanded="true"] .abre-menu__barras::after { transform: translateY(-5px) rotate(-45deg); }

.navegacao {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--marinho-900);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: .5rem 1.25rem 1.5rem;
    box-shadow: var(--sombra-3);
}

.navegacao.esta-aberta { display: block; }

.navegacao__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.navegacao__lista a {
    display: block;
    padding: .7rem .25rem;
    color: rgba(255, 255, 255, .86);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.navegacao__lista a:hover,
.navegacao__lista a[aria-current="page"] { color: var(--ouro); }

.navegacao__busca { margin-top: 1.25rem; }

@media (min-width: 1000px) {
    .abre-menu { display: none; }

    .navegacao {
        display: block;
        position: static;
        background: none;
        border: 0;
        padding: 0;
        box-shadow: none;
        flex: 1;
    }

    .navegacao__lista {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: .25rem;
    }

    .navegacao__lista a {
        border: 0;
        padding: .45rem .7rem;
        border-radius: var(--raio);
        font-size: .875rem;
        position: relative;
    }

    .navegacao__lista a[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: .7rem;
        right: .7rem;
        bottom: .1rem;
        height: 2px;
        background: var(--ouro);
    }

    .navegacao__busca { display: none; }
}

/* ---------------------------------------------------------------
   Campo de busca
   --------------------------------------------------------------- */

.busca { display: flex; width: 100%; }

.busca__campo {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: .95rem;
    padding: .7rem .9rem;
    border: 1px solid var(--linha-forte);
    border-right: 0;
    border-radius: var(--raio) 0 0 var(--raio);
    background: var(--branco);
    color: var(--tinta);
}

.busca__campo::placeholder { color: var(--tinta-clara); }

.busca__botao {
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    padding: .7rem 1.15rem;
    border: 0;
    border-radius: 0 var(--raio) var(--raio) 0;
    background: var(--ouro);
    color: var(--marinho-900);
    cursor: pointer;
    white-space: nowrap;
}

.busca__botao:hover { background: var(--ouro-claro); }

/* ---------------------------------------------------------------
   Botões
   --------------------------------------------------------------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--sans);
    font-size: .925rem;
    font-weight: 650;
    line-height: 1.2;
    padding: .8rem 1.4rem;
    border-radius: var(--raio);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}

.botao:active { transform: translateY(1px); }

.botao--principal {
    background: var(--ouro);
    color: var(--marinho-900);
    box-shadow: 0 6px 18px rgba(242, 183, 5, .3);
}

.botao--principal:hover {
    background: var(--ouro-claro);
    color: var(--marinho-900);
    box-shadow: 0 10px 26px rgba(242, 183, 5, .42);
    transform: translateY(-1px);
}

.botao--contorno {
    background: transparent;
    border-color: rgba(255, 255, 255, .3);
    color: var(--branco);
}

.botao--contorno:hover {
    border-color: var(--ouro);
    color: var(--ouro);
    background: rgba(242, 183, 5, .07);
}

.botao--marinho {
    background: var(--marinho-700);
    color: var(--branco);
}

.botao--marinho:hover { background: var(--marinho-500); color: var(--branco); }

.botao--discreto {
    background: var(--branco);
    border-color: var(--linha-forte);
    color: var(--marinho-700);
}

.botao--discreto:hover { border-color: var(--marinho-500); color: var(--marinho-800); }

.botao--pequeno { padding: .55rem 1rem; font-size: .85rem; }

/* ---------------------------------------------------------------
   Composição de abertura
   --------------------------------------------------------------- */

.abertura {
    position: relative;
    background: var(--marinho-900);
    color: rgba(255, 255, 255, .8);
    overflow: hidden;
    isolation: isolate;
}

.abertura__atmosfera {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(115% 85% at 78% 8%, rgba(47, 107, 176, .5) 0%, rgba(47, 107, 176, 0) 55%),
        radial-gradient(75% 60% at 12% 96%, rgba(242, 183, 5, .16) 0%, rgba(242, 183, 5, 0) 60%),
        linear-gradient(168deg, var(--marinho-900) 0%, var(--marinho-800) 45%, #071a33 100%);
}

.abertura__malha {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(120% 100% at 60% 0%, #000 15%, transparent 80%);
    -webkit-mask-image: radial-gradient(120% 100% at 60% 0%, #000 15%, transparent 80%);
}

.abertura__interno {
    position: relative;
    padding-block: clamp(3rem, 9vw, 6.5rem);
}

@media (min-width: 980px) {
    .abertura__interno {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .78fr);
        gap: 4rem;
        align-items: center;
    }
}

.abertura__selo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ouro);
    border: 1px solid rgba(242, 183, 5, .35);
    background: rgba(242, 183, 5, .07);
    padding: .4rem .8rem;
    border-radius: 100px;
    margin-bottom: 1.5rem;
}

.abertura__selo::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--ouro);
    box-shadow: 0 0 0 3px rgba(242, 183, 5, .22);
}

.abertura h1 {
    color: var(--branco);
    font-size: clamp(2.1rem, 6.2vw, 3.85rem);
    line-height: 1.08;
    margin-bottom: 1.1rem;
    text-wrap: balance;
}

.abertura h1 em {
    font-style: normal;
    color: var(--ouro);
    position: relative;
}

.abertura__texto {
    font-size: clamp(1.02rem, 2.2vw, 1.19rem);
    color: rgba(255, 255, 255, .76);
    max-width: 54ch;
    margin-bottom: 2rem;
}

.abertura__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 2.5rem;
}

.abertura__indicadores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--raio-g);
    overflow: hidden;
}

@media (min-width: 560px) { .abertura__indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.indicador {
    background: rgba(6, 20, 40, .55);
    padding: 1rem .9rem;
    backdrop-filter: blur(6px);
}

.indicador__numero {
    display: block;
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ouro);
    line-height: 1;
    margin-bottom: .3rem;
}

.indicador__rotulo {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    font-weight: 600;
}

/* Painel de destaque flutuante da abertura */

.abertura__painel {
    display: none;
    position: relative;
}

@media (min-width: 980px) { .abertura__painel { display: block; } }

.painel-destaque {
    position: relative;
    background: linear-gradient(155deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--raio-g);
    padding: 1.6rem 1.6rem 1.75rem;
    box-shadow: var(--sombra-3);
    backdrop-filter: blur(10px);
    transform: rotate(-.75deg);
}

.painel-destaque::before {
    content: "";
    position: absolute;
    inset-inline: 1.6rem;
    top: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--ouro), rgba(242, 183, 5, 0));
}

.painel-destaque__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ouro);
    margin-bottom: 1rem;
}

.painel-destaque__titulo {
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--branco);
    line-height: 1.25;
    margin: 0 0 1.15rem;
}

.painel-destaque__lista {
    list-style: none;
    margin: 0 0 1.35rem;
    padding: 0;
    counter-reset: destaque;
}

.painel-destaque__lista li {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    padding: .55rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .13);
    font-size: .93rem;
    color: rgba(255, 255, 255, .82);
    margin: 0;
    counter-increment: destaque;
}

.painel-destaque__lista li:last-child { border-bottom: 0; }

.painel-destaque__lista li::before {
    content: counter(destaque, decimal-leading-zero);
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 700;
    color: var(--ouro);
    flex: none;
    min-width: 1.4rem;
}

.painel-destaque__ano {
    margin-left: auto;
    font-family: var(--mono);
    font-size: .75rem;
    color: rgba(255, 255, 255, .45);
    flex: none;
}

.painel-destaque__rodape {
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.abertura__orbita {
    position: absolute;
    top: -3.5rem;
    right: -4.5rem;
    width: 13rem;
    height: 13rem;
    border: 1px solid rgba(242, 183, 5, .22);
    border-radius: 50%;
    z-index: -1;
}

.abertura__orbita::after {
    content: "";
    position: absolute;
    top: 12%;
    left: 8%;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--ouro);
    box-shadow: 0 0 14px 3px rgba(242, 183, 5, .55);
}

/* Abertura reduzida das páginas internas */

.abertura--interna .abertura__interno {
    display: block;
    padding-block: clamp(2.25rem, 6vw, 3.75rem);
}

.abertura--interna h1 { font-size: clamp(1.85rem, 5vw, 2.9rem); }

.abertura--interna .abertura__texto { margin-bottom: 0; font-size: 1.05rem; }

/* ---------------------------------------------------------------
   Trilha de navegação
   --------------------------------------------------------------- */

.trilha {
    position: relative;
    z-index: 1;
    font-size: .8rem;
    padding-top: 1.1rem;
}

.trilha ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.trilha li { margin: 0; display: flex; align-items: center; gap: .45rem; }

.trilha li + li::before {
    content: "›";
    color: rgba(255, 255, 255, .35);
}

.trilha a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.trilha a:hover { color: var(--ouro); }
.trilha [aria-current="page"] { color: rgba(255, 255, 255, .95); font-weight: 600; }

.trilha--clara a { color: var(--tinta-suave); }
.trilha--clara li + li::before { color: var(--tinta-clara); }
.trilha--clara [aria-current="page"] { color: var(--marinho-800); }

/* ---------------------------------------------------------------
   Cartões de ranking
   --------------------------------------------------------------- */

.grade-rankings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) { .grade-rankings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grade-rankings { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.grade-rankings--duas { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grade-rankings--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    overflow: hidden;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease, border-color .22s ease;
}

.cartao:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-2);
    border-color: var(--linha-forte);
}

.cartao__figura {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--marinho-800);
    overflow: hidden;
}

.cartao__figura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.cartao:hover .cartao__figura img { transform: scale(1.045); }

.cartao__figura::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 20, 40, 0) 45%, rgba(6, 20, 40, .55) 100%);
}

.cartao__area {
    position: absolute;
    left: .85rem;
    top: .85rem;
    z-index: 2;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--branco);
    background: rgba(6, 20, 40, .78);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: .28rem .6rem;
    border-radius: 100px;
    backdrop-filter: blur(4px);
}

.cartao__contagem {
    position: absolute;
    right: .85rem;
    bottom: .8rem;
    z-index: 2;
    font-family: var(--serif);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ouro);
    line-height: 1;
    text-shadow: 0 2px 10px rgba(6, 20, 40, .6);
}

.cartao__contagem small {
    display: block;
    font-family: var(--sans);
    font-size: .55rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
    text-shadow: none;
}

.cartao__corpo {
    padding: 1.25rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cartao__titulo {
    font-size: 1.16rem;
    line-height: 1.3;
    margin: 0 0 .6rem;
}

.cartao__titulo a {
    color: var(--marinho-800);
    text-decoration: none;
}

.cartao__titulo a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.cartao:hover .cartao__titulo a { color: var(--marinho-500); }

.cartao__resumo {
    font-size: .92rem;
    color: var(--tinta-media);
    margin: 0 0 1.1rem;
    flex: 1;
}

.cartao__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    font-size: .74rem;
    color: var(--tinta-suave);
    padding-top: .85rem;
    border-top: 1px solid var(--linha);
}

.cartao__meta span { display: inline-flex; align-items: center; gap: .35rem; }

.cartao__meta .ponto {
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: var(--ouro);
    flex: none;
}

/* Cartão em destaque, ocupa largura dupla */

@media (min-width: 1000px) {
    .cartao--largo { grid-column: span 2; }

    .cartao--largo .cartao__figura { aspect-ratio: 21 / 9; }

    .cartao--largo .cartao__titulo { font-size: 1.55rem; }

    .cartao--largo .cartao__resumo { font-size: 1rem; }
}

/* Lista compacta */

.lista-compacta { list-style: none; margin: 0; padding: 0; }

.lista-compacta li {
    margin: 0;
    border-bottom: 1px solid var(--linha);
}

.lista-compacta li:last-child { border-bottom: 0; }

.lista-compacta a {
    display: flex;
    align-items: baseline;
    gap: .85rem;
    padding: .85rem 0;
    text-decoration: none;
    color: var(--marinho-800);
    font-weight: 600;
    font-size: .95rem;
}

.lista-compacta a:hover { color: var(--marinho-500); }

.lista-compacta__indice {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--ouro-escuro);
    font-weight: 700;
    flex: none;
    min-width: 1.6rem;
}

.lista-compacta__extra {
    margin-left: auto;
    font-size: .75rem;
    font-weight: 500;
    color: var(--tinta-clara);
    flex: none;
}

/* ---------------------------------------------------------------
   Painel de filtros
   --------------------------------------------------------------- */

.filtros {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 1.35rem;
    box-shadow: var(--sombra-1);
}

.filtros__busca { margin-bottom: 1.25rem; }

.filtros__grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 620px) { .filtros__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .filtros__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.campo { display: flex; flex-direction: column; gap: .4rem; }

.campo__rotulo {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.campo select,
.campo input[type="text"],
.campo input[type="email"],
.campo textarea {
    font: inherit;
    font-size: .92rem;
    padding: .62rem .75rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--branco);
    color: var(--tinta);
    width: 100%;
}

.campo select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231d4e89' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2.1rem;
}

.filtros__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--linha);
}

.filtros__aviso {
    margin-left: auto;
    font-size: .78rem;
    color: var(--tinta-suave);
}

/* Barra de resultados */

.barra-resultados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--marinho-800);
}

.contador {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--marinho-800);
    margin: 0;
}

.contador strong {
    font-size: 1.5rem;
    color: var(--marinho-500);
}

.marcas-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.marcas-filtro li { margin: 0; }

.marca-filtro {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    font-weight: 600;
    background: var(--papel-2);
    border: 1px solid var(--linha-forte);
    color: var(--marinho-700);
    padding: .28rem .6rem;
    border-radius: 100px;
    text-decoration: none;
}

.marca-filtro:hover { border-color: var(--ouro); background: var(--ouro-suave); }
.marca-filtro span[aria-hidden] { font-weight: 700; color: var(--tinta-suave); }

/* Estado vazio */

.vazio {
    text-align: center;
    background: var(--branco);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio-g);
    padding: 3rem 1.5rem;
}

.vazio h2 { font-size: 1.4rem; }
.vazio p { color: var(--tinta-media); max-width: 46ch; margin-inline: auto; }

/* Paginação */

.paginacao {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin-top: 3rem;
    list-style: none;
    padding: 0;
}

.paginacao li { margin: 0; }

.paginacao a,
.paginacao span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 .6rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--branco);
    color: var(--marinho-700);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
}

.paginacao a:hover { border-color: var(--marinho-500); background: var(--papel-2); }

.paginacao [aria-current="page"] {
    background: var(--marinho-800);
    border-color: var(--marinho-800);
    color: var(--branco);
}

.paginacao .reticencias { border: 0; background: none; color: var(--tinta-clara); }

/* ---------------------------------------------------------------
   Página de ranking
   --------------------------------------------------------------- */

.ranking-topo { position: relative; }

.ranking-topo__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .62);
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.ranking-topo__meta strong { color: rgba(255, 255, 255, .9); font-weight: 600; }

.ranking-topo__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.ranking-topo__etiquetas li { margin: 0; }

.etiqueta-vinculo {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: .3rem .7rem;
    border-radius: 100px;
    text-decoration: none;
}

.etiqueta-vinculo:hover {
    background: rgba(242, 183, 5, .14);
    border-color: rgba(242, 183, 5, .45);
    color: var(--ouro-claro);
}

/* Estrutura de duas colunas */

.leiaute-ranking { padding-block: clamp(2rem, 5vw, 3.25rem); }

@media (min-width: 1060px) {
    .leiaute-ranking__grade {
        display: grid;
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        gap: 3.25rem;
        align-items: start;
    }
}

.coluna-lateral { margin-bottom: 2.5rem; }

@media (min-width: 1060px) {
    .coluna-lateral {
        position: sticky;
        top: 5rem;
        max-height: calc(100vh - 6.5rem);
        overflow-y: auto;
        margin-bottom: 0;
        scrollbar-width: thin;
    }
}

.indice {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-1);
    overflow: hidden;
}

.indice__titulo {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--branco);
    background: var(--marinho-800);
    margin: 0;
    padding: .8rem 1.1rem;
}

.indice__lista {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    max-height: 24rem;
    overflow-y: auto;
}

.indice__lista li { margin: 0; }

.indice__lista a {
    display: flex;
    gap: .7rem;
    align-items: baseline;
    padding: .48rem 1.1rem;
    font-size: .85rem;
    color: var(--tinta-media);
    text-decoration: none;
    border-left: 3px solid transparent;
    line-height: 1.35;
}

.indice__lista a:hover {
    background: var(--papel);
    color: var(--marinho-700);
    border-left-color: var(--linha-forte);
}

.indice__lista a.esta-ativo {
    background: var(--ouro-suave);
    border-left-color: var(--ouro);
    color: var(--marinho-800);
    font-weight: 600;
}

.indice__num {
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 700;
    color: var(--ouro-escuro);
    flex: none;
    min-width: 1.35rem;
}

.indice__secoes {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    border-top: 1px solid var(--linha);
    background: var(--papel);
}

.indice__secoes a {
    display: block;
    padding: .4rem 1.1rem;
    font-size: .82rem;
    color: var(--tinta-media);
    text-decoration: none;
}

.indice__secoes a:hover { color: var(--marinho-500); }

/* Compartilhamento */

.compartilhar {
    margin-top: 1.5rem;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 1.1rem;
}

.compartilhar__titulo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin: 0 0 .8rem;
}

.compartilhar__acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

.compartilhar__acoes a,
.compartilhar__acoes button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    padding: .45rem .8rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--papel);
    color: var(--marinho-700);
    text-decoration: none;
    cursor: pointer;
}

.compartilhar__acoes a:hover,
.compartilhar__acoes button:hover {
    border-color: var(--marinho-500);
    background: var(--branco);
}

/* Corpo editorial */

.corpo-editorial { max-width: var(--largura-texto); }

@media (min-width: 1060px) { .corpo-editorial { max-width: none; } }

.bloco-editorial {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: clamp(1.4rem, 4vw, 2.25rem);
    margin-bottom: 1.75rem;
    box-shadow: var(--sombra-1);
}

.bloco-editorial > h2 {
    font-size: clamp(1.35rem, 3.2vw, 1.75rem);
    margin-bottom: .9rem;
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--papel-2);
    position: relative;
}

.bloco-editorial > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 3rem;
    height: 2px;
    background: var(--ouro);
}

.bloco-editorial p { color: var(--tinta-media); }

.bloco-editorial--abertura {
    border-left: 4px solid var(--ouro);
}

.bloco-editorial--abertura p:first-of-type {
    font-size: 1.14rem;
    color: var(--tinta);
    line-height: 1.65;
}

/* Ficha metodológica */

.ficha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

@media (min-width: 560px) { .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ficha__item { background: var(--branco); padding: 1.05rem 1.15rem; }

.ficha__rotulo {
    display: block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-clara);
    margin-bottom: .35rem;
}

.ficha__valor {
    font-size: .95rem;
    font-weight: 600;
    color: var(--marinho-800);
    line-height: 1.4;
}

/* Aviso metodológico */

.aviso {
    display: flex;
    gap: 1rem;
    background: var(--alerta-fundo);
    border: 1px solid #fed7aa;
    border-left: 4px solid #ea9a3e;
    border-radius: var(--raio);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.75rem;
}

.aviso__icone {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #ea9a3e;
    color: var(--branco);
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1rem;
}

.aviso__conteudo { font-size: .92rem; color: #7c2d12; }

.aviso__conteudo strong { color: #7c2d12; display: block; margin-bottom: .25rem; font-size: .95rem; }

.aviso--neutro {
    background: var(--papel-2);
    border-color: var(--linha-forte);
    border-left-color: var(--marinho-500);
}

.aviso--neutro .aviso__icone { background: var(--marinho-500); }
.aviso--neutro .aviso__conteudo { color: var(--tinta-media); }
.aviso--neutro .aviso__conteudo strong { color: var(--marinho-800); }

/* Critérios */

.criterios {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 700px) { .criterios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.criterio {
    position: relative;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.1rem 1.15rem 1.1rem 1.15rem;
    margin: 0;
}

.criterio__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
}

.criterio__nome {
    font-family: var(--sans);
    font-size: .98rem;
    font-weight: 700;
    color: var(--marinho-800);
    margin: 0;
}

.criterio__peso {
    flex: none;
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 700;
    color: var(--ouro-escuro);
    background: var(--ouro-suave);
    border: 1px solid rgba(242, 183, 5, .4);
    padding: .15rem .5rem;
    border-radius: 100px;
    white-space: nowrap;
}

.criterio p { font-size: .89rem; margin: 0; color: var(--tinta-media); }

/* ---------------------------------------------------------------
   Posições do ranking
   --------------------------------------------------------------- */

.posicoes { margin-bottom: 1.75rem; }

.posicao {
    position: relative;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    margin-bottom: 1.5rem;
    box-shadow: var(--sombra-1);
    scroll-margin-top: 5.5rem;
    overflow: hidden;
}

.posicao:target { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(242, 183, 5, .22), var(--sombra-1); }

.posicao__cabecalho {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem clamp(1.15rem, 3.5vw, 2rem) 1.15rem;
    background: linear-gradient(180deg, var(--papel) 0%, var(--branco) 100%);
    border-bottom: 1px solid var(--linha);
}

.posicao__medalha {
    flex: none;
    width: 3.1rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, var(--marinho-700), var(--marinho-900));
    color: var(--branco);
    border-radius: 3px 3px 14px 14px;
    box-shadow: 0 6px 16px rgba(6, 20, 40, .22);
    position: relative;
}

.posicao__medalha span {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.posicao__medalha::after {
    content: "";
    position: absolute;
    inset-inline: .45rem;
    top: .35rem;
    height: 1px;
    background: rgba(242, 183, 5, .5);
}

.posicao--topo .posicao__medalha {
    background: linear-gradient(160deg, var(--ouro), #d99a04);
    color: var(--marinho-900);
    box-shadow: 0 8px 22px rgba(242, 183, 5, .4);
}

.posicao--topo .posicao__medalha::after { background: rgba(6, 20, 40, .3); }

.posicao--topo { border-color: rgba(242, 183, 5, .5); }

.posicao__intro { min-width: 0; flex: 1; }

.posicao__titulo {
    font-size: clamp(1.25rem, 3.2vw, 1.6rem);
    margin: 0 0 .4rem;
    line-height: 1.22;
}

.posicao__resumo {
    font-size: .97rem;
    color: var(--tinta-media);
    margin: 0;
}

.posicao__dados {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--linha);
    border-bottom: 1px solid var(--linha);
}

.posicao__dado {
    flex: 1 1 8rem;
    background: var(--papel);
    padding: .7rem clamp(1.15rem, 3.5vw, 1.35rem);
}

.posicao__dado dt {
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-clara);
    margin-bottom: .2rem;
}

.posicao__dado dd {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--marinho-800);
    line-height: 1.35;
}

.posicao__corpo { padding: 1.4rem clamp(1.15rem, 3.5vw, 2rem) 1.6rem; }

.posicao__corpo > p { color: var(--tinta-media); }

.posicao__nota {
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px dashed var(--linha-forte);
}

.posicao__nota + .posicao__nota { margin-top: 1rem; padding-top: 1rem; }

.posicao__nota h3 {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--marinho-500);
    margin: 0 0 .45rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.posicao__nota h3::before {
    content: "";
    width: .45rem;
    height: .45rem;
    background: var(--ouro);
    transform: rotate(45deg);
    flex: none;
}

.posicao__nota p { font-size: .93rem; color: var(--tinta-media); margin: 0; }

.posicao__navegacao {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1px;
    background: var(--linha);
    border-top: 1px solid var(--linha);
}

.posicao__navegacao a,
.posicao__navegacao span {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem clamp(1.15rem, 3.5vw, 1.35rem);
    background: var(--papel);
    font-size: .82rem;
    text-decoration: none;
    color: var(--marinho-700);
    min-width: 0;
}

.posicao__navegacao a:hover { background: var(--ouro-suave); }

.posicao__navegacao span { color: var(--tinta-clara); }

.posicao__navegacao .direcao {
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tinta-clara);
}

.posicao__navegacao .alvo {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.posicao__navegacao .proximo { text-align: right; }

/* ---------------------------------------------------------------
   Cientistas, fontes e listas de apoio
   --------------------------------------------------------------- */

.cientistas {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 620px) { .cientistas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cientistas li {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin: 0;
    padding: .6rem .85rem;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    font-size: .9rem;
}

.cientistas__posicoes {
    margin-left: auto;
    flex: none;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--ouro-escuro);
    font-weight: 700;
}

.fontes { list-style: none; margin: 0; padding: 0; counter-reset: fonte; }

.fontes li {
    counter-increment: fonte;
    display: flex;
    gap: .9rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--linha);
    margin: 0;
    font-size: .92rem;
}

.fontes li:last-child { border-bottom: 0; }

.fontes li::before {
    content: counter(fonte);
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    background: var(--marinho-800);
    color: var(--branco);
    border-radius: 50%;
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 700;
}

.fontes__nome { display: block; font-weight: 600; color: var(--marinho-800); }

.fontes__instituicao { display: block; font-size: .82rem; color: var(--tinta-suave); }

.fontes__link { font-size: .8rem; word-break: break-word; }

/* Lista com marcadores em losango */

.lista-marcada { list-style: none; margin: 0 0 1.15em; padding: 0; }

.lista-marcada li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--tinta-media);
    font-size: .96rem;
}

.lista-marcada li::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: .62em;
    width: .45rem;
    height: .45rem;
    background: var(--ouro);
    transform: rotate(45deg);
}

/* ---------------------------------------------------------------
   Página institucional
   --------------------------------------------------------------- */

.pagina-texto { padding-block: clamp(2.25rem, 6vw, 3.75rem); }

@media (min-width: 1000px) {
    .pagina-texto__grade {
        display: grid;
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        gap: 3.5rem;
        align-items: start;
    }
}

.prosa { max-width: var(--largura-texto); }

.prosa h2 {
    font-size: clamp(1.4rem, 3.4vw, 1.85rem);
    margin-top: 2.5rem;
    scroll-margin-top: 5.5rem;
}

.prosa h2:first-child { margin-top: 0; }

.prosa h3 {
    font-family: var(--sans);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--marinho-700);
    margin-top: 1.75rem;
}

.prosa p, .prosa li { color: var(--tinta-media); }

.prosa a { font-weight: 500; }

.secao-texto {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: clamp(1.4rem, 4vw, 2.25rem);
    margin-bottom: 1.5rem;
    box-shadow: var(--sombra-1);
}

.secao-texto > h2 { margin-top: 0; }

.destaque-numerado {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    counter-reset: etapa;
}

@media (min-width: 760px) { .destaque-numerado { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.destaque-numerado li {
    counter-increment: etapa;
    position: relative;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.1rem 1.15rem 1.1rem 3.25rem;
    margin: 0;
    font-size: .93rem;
    color: var(--tinta-media);
}

.destaque-numerado li::before {
    content: counter(etapa, decimal-leading-zero);
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-family: var(--mono);
    font-size: .82rem;
    font-weight: 700;
    color: var(--ouro-escuro);
}

.destaque-numerado strong { display: block; color: var(--marinho-800); margin-bottom: .2rem; }

/* Índice lateral de páginas institucionais */

.sumario {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 1.15rem;
    margin-bottom: 2rem;
    box-shadow: var(--sombra-1);
}

@media (min-width: 1000px) {
    .sumario { position: sticky; top: 5rem; margin-bottom: 0; }
}

.sumario h2 {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin: 0 0 .75rem;
}

.sumario ol { list-style: none; margin: 0; padding: 0; counter-reset: sum; }

.sumario li { counter-increment: sum; margin: 0; }

.sumario a {
    display: flex;
    gap: .6rem;
    padding: .4rem 0;
    font-size: .86rem;
    color: var(--tinta-media);
    text-decoration: none;
    line-height: 1.35;
}

.sumario a::before {
    content: counter(sum, decimal-leading-zero);
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--ouro-escuro);
    font-weight: 700;
    flex: none;
}

.sumario a:hover { color: var(--marinho-500); }

/* Ficha de atualização */

.ficha-linha {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    font-size: .82rem;
    color: var(--tinta-suave);
    padding: .9rem 1.1rem;
    background: var(--papel-2);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    margin-bottom: 1.75rem;
}

.ficha-linha strong { color: var(--marinho-800); font-weight: 600; }

/* ---------------------------------------------------------------
   Blocos temáticos
   --------------------------------------------------------------- */

.grade-areas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 620px) { .grade-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grade-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cartao-area {
    position: relative;
    display: block;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 1.3rem 1.35rem 1.35rem;
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cartao-area::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--cor-area, var(--marinho-500));
}

.cartao-area::after {
    content: "";
    position: absolute;
    right: -3rem;
    top: -3rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: var(--cor-area, var(--marinho-500));
    opacity: .06;
    transition: transform .35s ease;
}

.cartao-area:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-2);
    border-color: var(--linha-forte);
}

.cartao-area:hover::after { transform: scale(1.35); }

.cartao-area__nome {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--marinho-800);
    margin: 0 0 .4rem;
}

.cartao-area__resumo {
    font-size: .89rem;
    color: var(--tinta-media);
    margin: 0 0 1rem;
}

.cartao-area__total {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cor-area, var(--marinho-500));
}

/* Faixa de séculos */

.faixa-seculos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--raio-g);
    overflow: hidden;
}

@media (min-width: 620px) { .faixa-seculos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .faixa-seculos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.faixa-seculos a {
    display: block;
    background: rgba(6, 20, 40, .5);
    padding: 1.2rem 1.1rem;
    text-decoration: none;
    transition: background-color .2s ease;
}

.faixa-seculos a:hover { background: rgba(29, 78, 137, .5); }

.faixa-seculos__nome {
    display: block;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ouro);
    line-height: 1;
    margin-bottom: .35rem;
}

.faixa-seculos__intervalo {
    display: block;
    font-family: var(--mono);
    font-size: .7rem;
    color: rgba(255, 255, 255, .45);
    margin-bottom: .5rem;
}

.faixa-seculos__total {
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
}

/* Chamada final */

.chamada {
    position: relative;
    background: linear-gradient(140deg, var(--marinho-800), var(--marinho-600));
    border-radius: var(--raio-g);
    padding: clamp(1.75rem, 5vw, 3rem);
    color: rgba(255, 255, 255, .8);
    overflow: hidden;
    text-align: center;
}

.chamada::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 120% at 85% 10%, rgba(242, 183, 5, .18), transparent 60%);
}

.chamada > * { position: relative; }

.chamada h2 { color: var(--branco); margin-bottom: .6rem; }

.chamada p { max-width: 52ch; margin-inline: auto; margin-bottom: 1.6rem; }

/* Nuvem de vínculos */

.nuvem { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }

.nuvem li { margin: 0; }

.nuvem a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    font-weight: 600;
    padding: .45rem .85rem;
    background: var(--branco);
    border: 1px solid var(--linha-forte);
    border-radius: 100px;
    color: var(--marinho-700);
    text-decoration: none;
}

.nuvem a:hover { border-color: var(--ouro); background: var(--ouro-suave); color: var(--marinho-800); }

.nuvem__total { font-family: var(--mono); font-size: .72rem; color: var(--tinta-clara); }

/* ---------------------------------------------------------------
   Formulário de contato
   --------------------------------------------------------------- */

.formulario { display: grid; gap: 1.1rem; }

.formulario__linha { display: grid; gap: 1.1rem; }

@media (min-width: 640px) { .formulario__linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.formulario textarea { min-height: 9rem; resize: vertical; }

.campo__ajuda { font-size: .78rem; color: var(--tinta-suave); }

.mensagem {
    padding: 1rem 1.15rem;
    border-radius: var(--raio);
    font-size: .93rem;
    margin-bottom: 1.5rem;
    border: 1px solid;
}

.mensagem--ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.mensagem--erro { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.oculto-visual {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------
   Rodapé
   --------------------------------------------------------------- */

.rodape {
    background: var(--marinho-900);
    color: rgba(255, 255, 255, .62);
    padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    font-size: .9rem;
    position: relative;
}

.rodape::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ouro) 0%, var(--marinho-500) 40%, transparent 75%);
}

.rodape__grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

@media (min-width: 640px) { .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rodape__grade { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; } }

.rodape__sobre p { font-size: .88rem; margin-top: 1rem; max-width: 40ch; }

.rodape h2 {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ouro);
    margin: 0 0 1rem;
}

.rodape ul { list-style: none; margin: 0; padding: 0; }

.rodape li { margin-bottom: .55rem; }

.rodape a { color: rgba(255, 255, 255, .68); text-decoration: none; font-size: .875rem; }
.rodape a:hover { color: var(--ouro); }

.rodape__base {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.5rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .45);
}

@media (min-width: 760px) {
    .rodape__base { flex-direction: row; align-items: center; justify-content: space-between; }
}

.rodape__base p { margin: 0; }

.rodape__aviso {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--raio);
    padding: .9rem 1.1rem;
    font-size: .8rem;
    line-height: 1.6;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, .5);
}

/* ---------------------------------------------------------------
   Página de erro
   --------------------------------------------------------------- */

.erro {
    text-align: center;
    padding-block: clamp(3rem, 10vw, 6rem);
}

.erro__codigo {
    font-family: var(--serif);
    font-size: clamp(5rem, 20vw, 10rem);
    font-weight: 700;
    line-height: .85;
    color: var(--marinho-800);
    margin: 0;
    letter-spacing: -.04em;
}

.erro__codigo span { color: var(--ouro); }

.erro p { max-width: 48ch; margin-inline: auto; color: var(--tinta-media); }

.erro__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
    margin-top: 2rem;
}

/* ---------------------------------------------------------------
   Impressão
   --------------------------------------------------------------- */

@media print {
    .topo, .rodape, .coluna-lateral, .compartilhar, .posicao__navegacao, .chamada { display: none !important; }
    body { background: #fff; font-size: 11pt; }
    .bloco-editorial, .posicao { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    a { text-decoration: none; color: #000; }
}