/* NOVIDADES & TECH (v14) — MAPA DE NOTICIAS.
   Escopo: tudo abaixo vive dentro de #novidades.nv14m e usa o prefixo .nv14m-.
   Nao toca em nenhum outro componente da home e nao compete com a variante
   flutuante (prefixo .nv14-), que fica em outro arquivo.

   Dois estados, nesta ordem:
   1. Base (sem JS)  — grade legivel dos artigos, links reais /hub/{slug}.
                       Sem rede, sem botao de analise, sem controle de pausa.
   2. .nv14m--js     — rede SVG, parallax de ponteiro, "Analisar impacto" e
                       "Pausar movimento".

   Paleta: navy oficial #2C3853 em tonalidade profunda no palco, vinho #7E0101
   como luz de borda e um aco frio so nas rotas. Sem neon roxo. */

#novidades.nv14m {
    --nv14m-navy: #2C3853;
    --nv14m-deep: #131A29;
    --nv14m-deep-2: #0F1520;
    --nv14m-carta: #0E1420;
    --nv14m-wine: #7E0101;
    --nv14m-wine-luz: #9B1B1B;
    --nv14m-energia: #FF3535;
    --nv14m-cream: #FBF9F5;
    --nv14m-cream-70: rgba(251, 249, 245, .72);
    --nv14m-cream-45: rgba(251, 249, 245, .46);
    --nv14m-linha: rgba(251, 249, 245, .16);
    --nv14m-aco: rgba(176, 200, 236, .54);
    --nv14m-aco-forte: rgba(214, 231, 255, .92);
    --nv14m-curva: cubic-bezier(.22, .78, .24, 1);

    /* Parallax: o JS escreve mx/my entre -1 e 1; amp cai para 0.34 quando um
       card esta em hover/foco, para o conjunto "estabilizar" no card escolhido. */
    --nv14m-mx: 0;
    --nv14m-my: 0;
    --nv14m-amp: 1;

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: clamp(64px, 7vw, 104px) 0;
    background: linear-gradient(180deg, #1A2234 0%, var(--nv14m-deep) 48%, var(--nv14m-deep-2) 100%);
    border-top: 1px solid rgba(126, 1, 1, .45);
    color: var(--nv14m-cream);
    /* O plano inclina em 3D e projeta cantos para fora da area util; o clip
       aqui garante que nada disso vire rolagem horizontal no documento. */
    overflow: hidden;
}

#novidades .nv14m-aura {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(64% 54% at 50% 26%, rgba(44, 56, 83, .88), transparent 70%),
        radial-gradient(40% 44% at 6% 8%, rgba(126, 1, 1, .18), transparent 74%);
}

#novidades .nv14m-inner {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(16px, 5vw, 64px);
    box-sizing: border-box;
}

/* ---------- cabecalho editorial ---------- */

#novidades .nv14m-painel {
    max-width: 660px;
    margin: 0 0 clamp(28px, 3.4vw, 44px);
}

#novidades .nv14m-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--nv14m-cream);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

#novidades .nv14m-kicker::before {
    content: '';
    width: 34px;
    height: 2px;
    background: var(--nv14m-wine-luz);
}

#novidades .nv14m-titulo {
    margin: 0 0 14px;
    font-size: clamp(30px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.02em;
    color: var(--nv14m-cream);
}

#novidades .nv14m-intro {
    margin: 0 0 24px;
    max-width: 52ch;
    font-size: clamp(15px, 1.35vw, 17px);
    line-height: 1.62;
    color: var(--nv14m-cream-70);
}

/* CTA unico da secao, fora dos cards. */
#novidades .nv14m-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 13px 24px;
    border: 1px solid rgba(155, 27, 27, .7);
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(126, 1, 1, .34), rgba(44, 56, 83, .3));
    color: var(--nv14m-cream);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .28s var(--nv14m-curva), border-color .28s ease, background .28s ease;
}

#novidades .nv14m-cta span { min-width: 0; }

#novidades .nv14m-cta svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    transition: transform .28s var(--nv14m-curva);
}

#novidades .nv14m-cta:hover,
#novidades .nv14m-cta:focus-visible {
    border-color: rgba(251, 249, 245, .6);
    background: linear-gradient(120deg, rgba(126, 1, 1, .52), rgba(44, 56, 83, .42));
    transform: translateY(-2px);
}

#novidades .nv14m-cta:hover svg,
#novidades .nv14m-cta:focus-visible svg { transform: translateX(4px); }

#novidades .nv14m-vazio {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--nv14m-cream-70);
}

#novidades .nv14m-vazio__link { color: var(--nv14m-cream); }

/* ---------- palco ---------- */

#novidades .nv14m-palco {
    position: relative;
    margin-top: clamp(8px, 1.6vw, 20px);
    padding: clamp(10px, 2vw, 26px) 0;
}

/* Malha discreta: marcacao grafica de mapa, nao mapa geografico. Some nas
   bordas para nao virar quadriculado duro. */
#novidades .nv14m-malha {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(to right, rgba(176, 200, 236, .075) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(176, 200, 236, .075) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 44%, #000 30%, transparent 78%);
            mask-image: radial-gradient(72% 62% at 50% 44%, #000 30%, transparent 78%);
}

/* Cantoneiras: quatro marcacoes de enquadramento, sem texto inventado. */
#novidades .nv14m-cantos {
    position: absolute;
    inset: clamp(-2px, .6vw, 8px);
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, var(--nv14m-linha) 0 26px, transparent 26px) 0 0 / 100% 1px no-repeat,
        linear-gradient(to bottom, var(--nv14m-linha) 0 26px, transparent 26px) 0 0 / 1px 100% no-repeat,
        linear-gradient(to left, var(--nv14m-linha) 0 26px, transparent 26px) 100% 0 / 100% 1px no-repeat,
        linear-gradient(to bottom, var(--nv14m-linha) 0 26px, transparent 26px) 100% 0 / 1px 100% no-repeat,
        linear-gradient(to right, var(--nv14m-linha) 0 26px, transparent 26px) 0 100% / 100% 1px no-repeat,
        linear-gradient(to top, var(--nv14m-linha) 0 26px, transparent 26px) 0 100% / 1px 100% no-repeat,
        linear-gradient(to left, var(--nv14m-linha) 0 26px, transparent 26px) 100% 100% / 100% 1px no-repeat,
        linear-gradient(to top, var(--nv14m-linha) 0 26px, transparent 26px) 100% 100% / 1px 100% no-repeat;
}

/* O plano e o unico elemento que recebe a inclinacao de ponteiro. A rede SVG
   mora dentro dele, entao rota e card inclinam juntos e nunca dessincronizam. */
#novidades .nv14m-plano {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(14px, 2.2vw, 38px);
    align-items: start;
}

#novidades.nv14m--js .nv14m-plano {
    transform-style: preserve-3d;
    transform:
        perspective(1600px)
        rotateX(calc(var(--nv14m-my) * var(--nv14m-amp) * -1.05deg))
        rotateY(calc(var(--nv14m-mx) * var(--nv14m-amp) * 1.7deg));
    transition: transform .55s var(--nv14m-curva);
    will-change: transform;
}

#novidades .nv14m-coluna {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 44px);
    min-width: 0;
}

/* Teto de largura por card: em tela larga o palco ganha respiro no lugar de
   cards gigantes, e as rotas passam a ser lidas como caminho, nao como sobra. */
#novidades .nv14m-coluna--esq .nv14m-card,
#novidades .nv14m-coluna--dir .nv14m-card { max-width: 314px; }
#novidades .nv14m-coluna--centro .nv14m-card { max-width: 324px; }
#novidades .nv14m-coluna--dir .nv14m-card { align-self: flex-end; }

/* Alturas distintas: cada coluna entra em um degrau diferente do palco. E o que
   quebra a leitura de "carrossel em tres colunas". */
#novidades .nv14m-coluna--esq    { padding-top: 0; }
#novidades .nv14m-coluna--centro { padding-top: clamp(4px, 1.2vw, 18px); align-items: center; }
#novidades .nv14m-coluna--dir    { padding-top: clamp(34px, 5.8vw, 112px); }

/* Jitter lateral: o segundo card de cada lado recua um pouco para fora do
   alinhamento perfeito, sem sair da coluna. */
#novidades .nv14m-coluna--esq .nv14m-card:nth-child(2) { margin-left: clamp(0px, 2.2vw, 30px); }
#novidades .nv14m-coluna--dir .nv14m-card:nth-child(2) { margin-right: clamp(0px, 2vw, 26px); }

/* ---------- no HUB ---------- */

#novidades .nv14m-hub {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(92px, 8.4vw, 118px);
    height: clamp(92px, 8.4vw, 118px);
    margin-bottom: clamp(26px, 4.2vw, 66px);
    flex: 0 0 auto;
}

#novidades .nv14m-hub__anel {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(176, 200, 236, .26);
}

#novidades .nv14m-hub__anel--1 { inset: 0; }

#novidades .nv14m-hub__anel--2 {
    inset: 6%;
    border-color: rgba(155, 27, 27, .5);
    border-style: dashed;
}

/* O nucleo e o disco escuro que hospeda a engrenagem. 78% do no (que mede
   92-118px) da um simbolo de 64-82px, que e o tamanho em que os dentes e os
   dois elos ainda se leem. Mexer aqui nao mexe na geometria da rede: o JS mede
   o raio pelo .nv14m-hub, nao pelo nucleo. */
#novidades .nv14m-hub__nucleo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78%;
    height: 78%;
    border-radius: 50%;
    border: 1px solid rgba(176, 200, 236, .22);
    background: radial-gradient(circle at 34% 28%, rgba(44, 56, 83, .95), rgba(14, 20, 32, .98));
    box-shadow: 0 0 22px rgba(126, 1, 1, .2), 0 14px 34px rgba(0, 0, 0, .5);
    color: var(--nv14m-cream);
}

/* Engrenagem oficial da marca. O PNG continua intacto no disco: a versao branca
   para contraste no navy e so filtro de renderizacao. */
#novidades .nv14m-hub__marca {
    display: block;
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 2px 7px rgba(0, 0, 0, .55));
}

/* Direcao final: a marca permanece reconhecivel e estavel.
   O movimento parte do halo e percorre as conexoes com as noticias. */

/* Halo de emissao: o anel vermelho luminoso que sai do nucleo quando o HUB
   despacha um pulso. Vermelho e a cor da energia, tanto na origem quanto na
   rota. Nasce em opacidade zero, entao no estado parado nao existe nada
   aceso aqui. */
#novidades .nv14m-hub__energia {
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 53, 53, .78);
    box-shadow: 0 0 18px rgba(255, 53, 53, .4);
    opacity: 0;
    pointer-events: none;
}

#novidades.nv14m--js.nv14m--anima .nv14m-hub.is-emitindo .nv14m-hub__energia {
    animation: nv14m-emitir 760ms var(--nv14m-curva) 1;
}

@keyframes nv14m-emitir {
    0%   { transform: scale(.94); opacity: 0; }
    22%  { opacity: .95; }
    100% { transform: scale(1.46); opacity: 0; }
}

/* Carga do nucleo no mesmo instante: um respiro de luz vermelha, nunca um
   estouro. */
#novidades.nv14m--js.nv14m--anima .nv14m-hub.is-emitindo .nv14m-hub__nucleo {
    animation: nv14m-carregar 760ms ease-out 1;
}

@keyframes nv14m-carregar {
    0%, 100% { box-shadow: 0 0 22px rgba(126, 1, 1, .2), 0 14px 34px rgba(0, 0, 0, .5); }
    30%      { box-shadow: 0 0 32px rgba(255, 53, 53, .55), 0 14px 34px rgba(0, 0, 0, .5); }
}

#novidades .nv14m-hub__rotulo {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--nv14m-cream-45);
}

/* Respiracao lenta do nucleo. Vive so com JS, pausa junto com a rede e morre
   em reduced-motion. */
#novidades.nv14m--js.nv14m--anima .nv14m-hub__anel--1 {
    animation: nv14m-pulsar 6.5s var(--nv14m-curva) infinite;
}

@keyframes nv14m-pulsar {
    0%, 100% { transform: scale(1);    opacity: .55; }
    50%      { transform: scale(1.06); opacity: .95; }
}

/* ---------- rede SVG ---------- */

#novidades .nv14m-rede {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

#novidades .nv14m-trilha {
    fill: none;
    stroke: var(--nv14m-aco);
    stroke-width: 1.4;
    stroke-linecap: round;
    transition:
        stroke-dashoffset 1s var(--nv14m-curva),
        stroke .32s ease,
        stroke-width .32s ease,
        opacity .32s ease;
}

#novidades .nv14m-trilha.is-ativa {
    stroke: var(--nv14m-aco-forte);
    stroke-width: 2.4;
}

/* As rotas nao escolhidas recuam, mas continuam legiveis: o realce e por
   contraste, nao por apagar o mapa. */
#novidades .nv14m-trilha.is-apagada { opacity: .26; }

/* Cauda luminosa: dois tracos sobre a propria rota, um longo e difuso e um
   curto e brilhante. Sao dashes deslizando na curva, entao a cauda acompanha a
   inclinacao da linha em vez de ser um risco reto colado no ponto.
   A base de intensidade e stroke-opacity; o JS mexe so no opacity do elemento
   para o fade de entrada e saida, e os dois se multiplicam. A energia que
   viaja sobre a rota e vermelha; as linhas estruturais de fundo permanecem
   no aco frio, sem mudanca. */
#novidades .nv14m-pulso-cauda {
    fill: none;
    stroke: var(--nv14m-energia);
    stroke-linecap: round;
    stroke-width: 3;
    stroke-opacity: .5;
}

#novidades .nv14m-pulso-cauda--brilho {
    stroke-width: 1.9;
    stroke-opacity: .95;
}

/* Cabeca do pulso: vermelho vivo, a mesma energia da origem no HUB. */
#novidades .nv14m-pulso-halo {
    fill: rgba(255, 53, 53, .32);
}

#novidades .nv14m-pulso-nucleo {
    fill: #FFD9CF;
}

/* ---------- card ---------- */

#novidades .nv14m-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 18px;
    border: 1px solid var(--nv14m-linha);
    background: linear-gradient(170deg, rgba(31, 41, 62, .96), rgba(14, 20, 32, .97));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
    overflow: hidden;
    transition:
        transform .42s var(--nv14m-curva),
        border-color .32s ease,
        box-shadow .42s var(--nv14m-curva);
}

#novidades.nv14m--js .nv14m-card {
    transform: translateZ(var(--nv14m-z, 0px));
}

/* Card escolhido: aproxima e estabiliza, sem crescer a ponto de encobrir os
   vizinhos (o palco inteiro reduz a amplitude do parallax junto). */
#novidades.nv14m--js .nv14m-card.is-alvo {
    z-index: 3;
    border-color: rgba(214, 231, 255, .5);
    box-shadow: 0 26px 62px rgba(0, 0, 0, .55), 0 0 0 1px rgba(155, 27, 27, .3);
    transform: translateZ(calc(var(--nv14m-z, 0px) + 34px));
}

/* Ponto de conexao: a rota chega exatamente no centro deste elemento.
   Sem transform aqui — o JS le offsetLeft/offsetTop, que ignoram transform. */
#novidades .nv14m-card__porta {
    position: absolute;
    z-index: 4;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(176, 200, 236, .55);
    background: rgba(14, 20, 32, .9);
    opacity: 0;
    transition: opacity .4s ease, box-shadow .4s ease, background .4s ease;
}

#novidades.nv14m--js .nv14m-card.is-ligado .nv14m-card__porta { opacity: 1; }

#novidades .nv14m-card[data-nv14m-lado="esq"]  .nv14m-card__porta { right: -6px; top: calc(50% - 6px); }
#novidades .nv14m-card[data-nv14m-lado="dir"]  .nv14m-card__porta { left: -6px;  top: calc(50% - 6px); }
#novidades .nv14m-card[data-nv14m-lado="topo"] .nv14m-card__porta { top: -6px;   left: calc(50% - 6px); }

#novidades .nv14m-card.is-alvo .nv14m-card__porta {
    background: var(--nv14m-cream);
    box-shadow: 0 0 0 5px rgba(155, 27, 27, .28), 0 0 16px rgba(251, 249, 245, .55);
}

/* Chegada do pulso: resposta discreta, na mesma familia de vermelho da
   energia que viajou ate aqui. E um "recebido", nao um flash. */
#novidades .nv14m-card__porta.is-chegada {
    background: var(--nv14m-cream);
    border-color: var(--nv14m-energia);
    box-shadow: 0 0 0 4px rgba(255, 53, 53, .22), 0 0 12px rgba(255, 53, 53, .48);
}

#novidades .nv14m-card__capa {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0B1018;
}

#novidades .nv14m-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--nv14m-curva);
}

#novidades.nv14m--js .nv14m-card.is-alvo .nv14m-card__img { transform: scale(1.045); }

#novidades .nv14m-card__veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 20, 32, .12) 0%, rgba(14, 20, 32, .16) 62%, rgba(14, 20, 32, .92) 100%);
}

#novidades .nv14m-card__corpo {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(14px, 1.5vw, 20px) clamp(14px, 1.5vw, 20px) clamp(15px, 1.6vw, 20px);
}

#novidades .nv14m-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
}

#novidades .nv14m-chip {
    display: inline-flex;
    padding: 5px 11px;
    border: 1px solid rgba(155, 27, 27, .55);
    border-radius: 999px;
    background: rgba(126, 1, 1, .2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nv14m-cream);
}

#novidades .nv14m-data {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nv14m-cream-45);
}

#novidades .nv14m-card__titulo {
    margin: 0;
    font-size: clamp(16px, 1.32vw, 19px);
    font-weight: 700;
    line-height: 1.26;
    letter-spacing: -.008em;
    /* Titulo integral: nada de line-clamp, nada de reticencia. */
    overflow-wrap: anywhere;
}

#novidades .nv14m-card__link {
    color: var(--nv14m-cream);
    text-decoration: none;
    transition: color .28s ease;
}

/* Link esticado: o card inteiro e clicavel, mas continua um unico tab stop. */
#novidades .nv14m-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

#novidades .nv14m-card__link:hover { color: #FFF; text-decoration: underline; text-underline-offset: 3px; }

#novidades .nv14m-card__link:focus-visible {
    outline: 2px solid var(--nv14m-cream);
    outline-offset: 3px;
    border-radius: 4px;
}

#novidades .nv14m-card__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 2px 0 0;
}

#novidades .nv14m-leia {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nv14m-cream-70);
    transition: color .28s ease, transform .28s var(--nv14m-curva);
}

#novidades .nv14m-leia svg { width: 15px; height: 15px; transition: transform .28s var(--nv14m-curva); }

#novidades .nv14m-card.is-alvo .nv14m-leia { color: var(--nv14m-cream); }
#novidades .nv14m-card.is-alvo .nv14m-leia svg { transform: translateX(4px); }

/* "Analisar impacto" so existe com JS: sem ele o botao nao faria nada. */
#novidades .nv14m-analise { display: none; }

#novidades.nv14m--js .nv14m-analise {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid rgba(176, 200, 236, .3);
    border-radius: 999px;
    background: rgba(44, 56, 83, .42);
    color: var(--nv14m-cream-70);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .26s ease, border-color .26s ease, background .26s ease;
}

#novidades .nv14m-analise svg { width: 14px; height: 14px; flex: 0 0 auto; }

#novidades .nv14m-analise:hover,
#novidades .nv14m-analise:focus-visible {
    color: var(--nv14m-cream);
    border-color: rgba(155, 27, 27, .8);
    background: rgba(126, 1, 1, .36);
}

#novidades .nv14m-analise:focus-visible {
    outline: 2px solid var(--nv14m-cream);
    outline-offset: 2px;
}

/* ---------- compactacao do mapa em desktop ----------
   Pedido da coordenacao: os cinco artigos precisam caber juntos no olho, nao so
   no documento. Aqui a capa fica panoramica (20:9 -> ~120-145px de altura em
   card de ~300px) e o corpo encolhe em padding e entrelinha, sem nenhuma altura
   fixa: titulo de tres linhas continua crescendo o card em vez de ser cortado.
   Nada disso vale abaixo de 900px, onde a capa volta a 16:9. */

@media (min-width: 900px) {
    #novidades .nv14m-card__capa { aspect-ratio: 20 / 9; }

    #novidades .nv14m-card__corpo {
        gap: 8px;
        padding: 13px 15px 14px;
    }

    #novidades .nv14m-card__meta { gap: 6px 10px; }

    #novidades .nv14m-chip {
        padding: 4px 9px;
        font-size: 9.5px;
        letter-spacing: .12em;
    }

    #novidades .nv14m-data { font-size: 10px; }

    #novidades .nv14m-card__titulo {
        font-size: clamp(15px, 1.12vw, 16.5px);
        line-height: 1.24;
    }

    #novidades .nv14m-card__acoes { gap: 8px 12px; margin-top: 0; }

    #novidades .nv14m-leia { font-size: 10px; letter-spacing: .12em; }
    #novidades .nv14m-leia svg { width: 13px; height: 13px; }

    #novidades.nv14m--js .nv14m-analise {
        padding: 6px 11px;
        font-size: 10px;
        letter-spacing: .08em;
    }

    #novidades .nv14m-analise svg { width: 13px; height: 13px; }
}

/* ---------- controles ---------- */

#novidades .nv14m-controles {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: clamp(24px, 3vw, 40px);
}

#novidades.nv14m--js .nv14m-controles { display: flex; }

#novidades .nv14m-pausa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    border: 1px solid var(--nv14m-linha);
    border-radius: 999px;
    background: rgba(14, 20, 32, .6);
    color: var(--nv14m-cream-70);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .26s ease, border-color .26s ease, background .26s ease;
}

#novidades .nv14m-pausa:hover,
#novidades .nv14m-pausa:focus-visible {
    color: var(--nv14m-cream);
    border-color: rgba(251, 249, 245, .46);
    background: rgba(44, 56, 83, .5);
}

#novidades .nv14m-pausa:focus-visible { outline: 2px solid var(--nv14m-cream); outline-offset: 2px; }

#novidades .nv14m-ico { width: 14px; height: 14px; flex: 0 0 auto; }

#novidades .nv14m-pausa[data-nv14m-estado="ativo"]   .nv14m-ico--play  { display: none; }
#novidades .nv14m-pausa[data-nv14m-estado="pausado"] .nv14m-ico--pausa { display: none; }

#novidades .nv14m-legenda {
    margin: 0;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nv14m-cream-45);
}

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

/* ---------- mobile: mapa vira linha do tempo vertical ----------
   As colunas somem como caixas (display: contents) e os cards viram irmaos
   diretos do plano, reordenados por recencia via --nv14m-ordem. A rede SVG nao
   e construida aqui: a conexao vira um elo curto entre um card e o seguinte.
   Sem miniatura espremida, sem rolagem horizontal, sem pan/zoom. */

@media (max-width: 899px) {
    #novidades .nv14m-plano {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(30px, 7vw, 46px);
        transform: none !important;
    }

    #novidades .nv14m-coluna { display: contents; }

    #novidades .nv14m-card,
    #novidades .nv14m-hub { order: var(--nv14m-ordem, 0); }

    #novidades .nv14m-hub {
        order: 0;
        align-self: center;
        margin-bottom: 0;
        width: 92px;
        height: 92px;
    }

    #novidades .nv14m-coluna--esq .nv14m-card:nth-child(2),
    #novidades .nv14m-coluna--dir .nv14m-card:nth-child(2) { margin-left: 0; margin-right: 0; }

    #novidades .nv14m-card { overflow: visible; }

    #novidades .nv14m-card > .nv14m-card__capa { border-radius: 17px 17px 0 0; overflow: hidden; }

    /* Elo simplificado: uma linha curta ligando o item anterior a este. */
    #novidades .nv14m-card::before {
        content: '';
        position: absolute;
        left: 50%;
        top: calc(-1 * clamp(30px, 7vw, 46px));
        width: 1px;
        height: clamp(30px, 7vw, 46px);
        background: linear-gradient(180deg, transparent, var(--nv14m-aco));
        pointer-events: none;
    }

    #novidades .nv14m-card[data-nv14m-lado] .nv14m-card__porta {
        top: -5px;
        left: calc(50% - 6px);
        right: auto;
    }

    #novidades.nv14m--js .nv14m-card .nv14m-card__porta { opacity: 1; }

    #novidades.nv14m--js .nv14m-card,
    #novidades.nv14m--js .nv14m-card.is-alvo { transform: none; }

    #novidades .nv14m-malha { background-size: 42px 42px; opacity: .34; }
    #novidades .nv14m-cantos { display: none; }
}

@media (max-width: 380px) {
    #novidades .nv14m-cta {
        width: 100%;
        justify-content: center;
        padding: 13px 16px;
        font-size: 12px;
        letter-spacing: .04em;
    }

    #novidades .nv14m-card__acoes { gap: 10px 12px; }
    #novidades .nv14m-pausa { width: 100%; justify-content: center; }
    #novidades .nv14m-legenda { width: 100%; }
}

/* ---------- reduced motion ----------
   Sem inclinacao, sem pulso, sem desenho progressivo: a rede aparece pronta.
   O JS tambem nao liga o loop de animacao nesse modo. */

@media (prefers-reduced-motion: reduce) {
    #novidades.nv14m--js .nv14m-plano { transform: none; transition: none; }

    #novidades .nv14m-card,
    #novidades .nv14m-card__img,
    #novidades .nv14m-cta,
    #novidades .nv14m-cta svg,
    #novidades .nv14m-leia svg,
    #novidades .nv14m-trilha,
    #novidades .nv14m-card__porta { transition-duration: .01ms; }

    #novidades.nv14m--js .nv14m-card.is-alvo { transform: translateZ(0); }

    #novidades.nv14m--js.nv14m--anima .nv14m-hub__anel--1,
    #novidades.nv14m--js .nv14m-hub__marca,
    #novidades.nv14m--js.nv14m--anima .nv14m-hub.is-emitindo .nv14m-hub__energia,
    #novidades.nv14m--js.nv14m--anima .nv14m-hub.is-emitindo .nv14m-hub__nucleo { animation: none; }

    /* Sem animacao o halo nao pode ficar parado aceso no meio do caminho. */
    #novidades .nv14m-hub__energia { opacity: 0; }
}