/* =========================================================================
 * Motor visual Cidade Viva — home e subpáginas (produção)
 * Home imersiva sobre a cidade governamental isométrica desenhada num
 * <canvas> fixo ao fundo. Os painéis de conteúdo são CENTRAIS; a navegação
 * ganha um trilho lateral com rótulos e a própria cidade integra as seções
 * (zoom in/out + clique).
 *
 * Todo o escopo da home fica sob `.cv-dark` para não vazar estilos e não tocar
 * no CSS de produção (carregado antes). Prefixo de classes: `cv-*`. O apêndice
 * ao final (`.cv-page`) leva o mesmo tema, de forma estática, às subpáginas.
 *
 * Z-INDEX NORMATIVO:  cidade 0 · main 2 · header 50 · rail 60
 * BREAKPOINTS:        mobile <768 · tablet 768–1023 · desktop >=1024
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * Tema escuro global — o gradiente é também o fallback do canvas da cidade.
 * `overflow-x: hidden` + `box-sizing: border-box` blindam contra qualquer
 * overflow horizontal em telas estreitas.
 * ------------------------------------------------------------------------- */
.cv-dark {
    background: linear-gradient(180deg, #0A1830 0%, #0E2142 100%);
    background-attachment: fixed;
    color: rgba(240, 245, 252, 0.82);
    overflow-x: hidden;
}

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

.cv-dark img {
    max-width: 100%;
}

.cv-dark p {
    color: rgba(240, 245, 252, 0.82);
}

.cv-dark h1,
.cv-dark h2,
.cv-dark h3,
.cv-dark h4 {
    color: #F8FAFF;
}

/* =========================================================================
 * Camada da cidade — canvas fixo ao fundo (z-index 0), decorativa.
 * O wrapper `.cv-stage` garante que o CanvasLoop meça o VIEWPORT (e não a
 * altura total do documento).
 * ========================================================================= */
.cv-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.cv-stage canvas,
#cv-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================================================================
 * Header — transparente que escurece ao rolar (main.js aplica `.scrolled`).
 * Fica acima da cidade, do fio e dos painéis.
 * ========================================================================= */
.cv-dark .site-header {
    position: fixed;
    z-index: 50;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

/* Com o trilho lateral visível, o header recolhe para cima (os painéis ficam). */
body.cv-railed .site-header {
    transform: translateY(-100%);
}

.cv-dark .site-header.scrolled {
    background-color: rgba(10, 22, 44, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cv-dark #header-logo {
    filter: brightness(0) invert(1);
}

/* =========================================================================
 * Trilho lateral numerado — navegação vertical fixa (desktop >=1024).
 * Oculto no load (translateX(-100%)); o deslize de entrada e o indicador
 * ativo chegam no comportamento (T3). Em <1024 fica escondido.
 * ========================================================================= */
.cv-rail {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 208px;
    height: 100vh;
    padding: 24px 14px;
    background: rgba(8, 18, 36, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    /* Oculto no load — o comportamento revela ao passar do hero (histerese T3). */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cv-rail.is-visible {
    transform: translateX(0);
}

.cv-rail__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--spacing-lg);
    flex-shrink: 0;
}

.cv-rail__logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.cv-rail__nav {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: auto 0;
}

/* Item = número + rótulo (sumário do site), alinhados à esquerda. */
.cv-rail__item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(240, 245, 252, 0.62);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

.cv-rail__num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xs);
    color: rgba(166, 205, 67, 0.65);
    flex-shrink: 0;
}

.cv-rail__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-rail__item:hover,
.cv-rail__item.is-active {
    color: #F8FAFF;
    background: rgba(166, 205, 67, 0.12);
}

.cv-rail__item.is-active .cv-rail__num {
    color: #A6CD43;
}

/* Indicador deslizante — reposicionado via translateY pelo scrollspy (T3). */
.cv-rail__indicator {
    position: absolute;
    left: -1px;
    top: 0;
    width: 3px;
    height: 40px;
    border-radius: 0 3px 3px 0;
    background: #A6CD43;
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.3s ease;
}

@media (max-width: 1023px) {
    .cv-rail {
        display: none;
    }
}

/* =========================================================================
 * Fluxo de conteúdo — wrapper relativo que envolve o main.
 * (O fio condutor foi removido na iteração 2: a integração entre seções é
 * feita pela cidade — zoom in/out + distritos clicáveis.)
 * ========================================================================= */
.cv-flow {
    position: relative;
}

.cv-dark #cv-main {
    position: relative;
    z-index: 2;
}

.cv-dark .site-footer {
    position: relative;
    z-index: 2;
    background-color: rgba(8, 18, 36, 0.92);
}

/* =========================================================================
 * Seções — cada uma ocupa >=100vh; o painel é CENTRAL (diferente da 9).
 * ========================================================================= */
.cv-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px 80px;
}

/* Espaçadores "vista" — onde a cidade respira entre as seções (zoom out).
   Clicáveis: um clique perto de um distrito navega até a seção dele. */
.cv-vista {
    height: 50vh;
    cursor: pointer;
}

/* =========================================================================
 * Painel glass — superfície translúcida CENTRAL sobre a cidade.
 * Fallback opaco quando não há suporte a backdrop-filter (AA garantido).
 * ========================================================================= */
.cv-panel {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 48px;
    border-radius: 18px;
    background: rgba(10, 22, 44, 0.82);
    border: 1px solid rgba(166, 205, 67, 0.22);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Entrada com ZOOM IN (classe .is-zoomed via IO), casada com o zoom da
       câmera da cidade. Em reduced-motion o estado final é imediato. */
    opacity: 0;
    transform: scale(0.94) translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cv-panel.is-zoomed {
    opacity: 1;
    transform: none;
}

.cv-panel--wide {
    max-width: 960px;
}

@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .cv-panel {
        background: rgba(10, 22, 44, 0.94);
    }
}

/* =========================================================================
 * Tipografia dos painéis
 * ========================================================================= */
.cv-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A6CD43;
    margin-bottom: var(--spacing-md);
}

.cv-head {
    margin-bottom: var(--spacing-lg);
}

.cv-head .section-title {
    margin-bottom: var(--spacing-sm);
}

.cv-subtitle {
    font-size: var(--text-lg);
    color: rgba(240, 245, 252, 0.78);
}

/* =========================================================================
 * Hero — texto à ESQUERDA sobre um scrim radial; a cidade fica à DIREITA
 * (a câmera showcase enquadra o distrito 0 no lado direito da tela).
 * ========================================================================= */
.cv-hero {
    text-align: left;
    justify-content: center;
    overflow: hidden;
}

/* Scrim radial deslocado à esquerda, atrás do texto. */
.cv-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 55% 65% at 30% 46%,
            rgba(10, 24, 48, 0.82), transparent 72%);
    pointer-events: none;
}

/* Wrapper com largura máxima CENTRADO: em telas muito largas o conjunto
   texto+cidade permanece equilibrado no meio (o texto não cola na borda). */
.cv-hero__wrap {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.cv-hero__inner {
    position: relative;
    max-width: 620px;
    margin: 0;
    margin-left: clamp(8px, 4vw, 80px);
}

.cv-hero__title {
    font-size: clamp(2.2rem, 5.5vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
}

.cv-hero__sub {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #A6CD43;
    margin-bottom: var(--spacing-sm);
}

.cv-hero__desc {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-lg);
    color: rgba(240, 245, 252, 0.82);
}

.cv-hero__actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Dica de rolagem — chevron pulsante. O JS a esconde no 1º scroll (T3). */
.cv-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(240, 245, 252, 0.6);
    font-size: 1.5rem;
    animation: cv-chevron 1.6s ease-in-out infinite;
    transition: opacity 0.4s ease;
}

.cv-scroll-hint.is-hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes cv-chevron {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
    50% { transform: translate(-50%, 8px); opacity: 1; }
}

/* =========================================================================
 * Autoridade — números + mapa do Brasil (dot-matrix em canvas).
 * ========================================================================= */
.cv-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.cv-stat {
    padding: var(--spacing-md);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cv-stat__number {
    font-size: clamp(1.4rem, 2.4vw, var(--text-3xl));
    font-weight: 700;
    color: #A6CD43;
    line-height: 1.1;
}

.cv-stat__label {
    margin-top: 6px;
    font-size: var(--text-sm);
    color: rgba(240, 245, 252, 0.78);
}

.cv-brasil {
    margin-top: var(--spacing-xl);
}

.cv-brasil__caption {
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(240, 245, 252, 0.78);
    margin-bottom: var(--spacing-md);
}

.cv-brasil__canvas-wrap {
    height: 360px;
}

.cv-brasil__canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================================================================
 * Soluções — um card por solução.
 * ========================================================================= */
.cv-sol__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.cv-sol-card {
    padding: var(--spacing-md);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.cv-sol-card:hover {
    transform: translateY(-3px);
    border-color: rgba(166, 205, 67, 0.5);
}

.cv-sol-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(166, 205, 67, 0.14);
    color: #A6CD43;
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

.cv-sol-card__title {
    font-size: var(--text-base);
    margin-bottom: 6px;
}

.cv-sol-card__text {
    font-size: var(--text-sm);
    color: rgba(240, 245, 252, 0.72);
}

/* =========================================================================
 * Serviços (NOVA) — mockup vivo (montado em T4).
 * ========================================================================= */
/* Janela de browser: chrome + layout de abas/telas. */
.cv-mock {
    min-height: 320px;
    border-radius: 14px;
    background: rgba(9, 20, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.cv-mock__chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cv-mock__dots {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.cv-mock__dots i {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cv-mock__url {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-xs);
    color: rgba(240, 245, 252, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile-first: abas em chips horizontais (rolam DENTRO do mockup). */
.cv-mock__layout {
    display: flex;
    flex-direction: column;
}

.cv-mock__tabs {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cv-mock__tab {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(240, 245, 252, 0.7);
    font-family: inherit;
    font-size: var(--text-sm);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.cv-mock__tab i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cv-mock__tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #F8FAFF;
}

.cv-mock__tab[aria-selected="true"] {
    background: rgba(166, 205, 67, 0.14);
    color: #A6CD43;
}

.cv-mock__tab:focus-visible {
    outline: 2px solid rgba(166, 205, 67, 0.6);
    outline-offset: 2px;
}

.cv-mock__screens {
    position: relative;
    padding: 16px;
}

.cv-mock__screen {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.cv-mock__screen.is-active {
    opacity: 1;
    transform: none;
}

.cv-mock__screen[hidden] {
    display: none;
}

/* Desktop (>=768): abas em coluna à esquerda + tela à direita. */
@media (min-width: 768px) {
    .cv-mock__layout {
        flex-direction: row;
    }

    .cv-mock__tabs {
        flex-direction: column;
        width: 248px;
        flex-shrink: 0;
        overflow-x: visible;
        overflow: hidden;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Em coluna, rótulos longos QUEBRAM linha dentro da aba (nada de vazar
       sobre a tela ao lado — correção do overlap apontada pelo cliente). */
    .cv-mock__tabs .cv-mock__tab {
        white-space: normal;
        width: 100%;
        align-items: flex-start;
        line-height: 1.35;
    }

    .cv-mock__tabs .cv-mock__tab span {
        min-width: 0;
    }

    .cv-mock__tabs .cv-mock__tab i {
        margin-top: 2px;
    }

    .cv-mock__screens {
        flex: 1;
        min-width: 0;
        min-height: 480px;
    }
}

/* -------------------------------------------------------------------------
 * Conteúdo das telas do mockup
 * ------------------------------------------------------------------------- */
/* Descrição do serviço, no topo de cada tela. */
.cv-svc-info {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cv-svc-info h4 {
    font-size: var(--text-base);
    margin-bottom: 6px;
}

.cv-svc-info p {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: rgba(240, 245, 252, 0.72);
    max-width: 62ch;
}

.cv-mock .msb-terminal,
.cv-term {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: #cfe6a8;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 160px;
}

.cv-svc-canvas {
    position: relative;
    height: 200px;
}

.cv-svc-canvas--tall {
    height: 260px;
}

.cv-svc-canvas--mini {
    height: 80px;
}

.cv-svc-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.cv-svc-chips {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.cv-chip {
    padding: 4px 10px;
    border-radius: 9999px;
    background: rgba(166, 205, 67, 0.14);
    color: #A6CD43;
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Service Desk */
.cv-svc-desk {
    display: grid;
    gap: 16px;
}

@media (min-width: 768px) {
    .cv-svc-desk {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.cv-tickets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cv-ticket {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    font-size: var(--text-sm);
}

.cv-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: var(--text-xs);
    white-space: nowrap;
}

.cv-badge--ok {
    background: rgba(166, 205, 67, 0.18);
    color: #A6CD43;
}

.cv-badge--wip {
    background: rgba(255, 255, 255, 0.1);
    color: #F8FAFF;
}

/* Omnichannel — bolhas de chat */
.cv-chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
}

.cv-bubble {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    max-width: 82%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: var(--text-sm);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.cv-bubble.is-in {
    opacity: 1;
    transform: none;
}

.cv-bubble i {
    color: #A6CD43;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.cv-bubble--cidadao {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.06);
}

.cv-bubble--atendente {
    align-self: flex-end;
    background: rgba(166, 205, 67, 0.14);
    color: #eaf5cf;
}

/* Apps móveis — moldura de celular */
.cv-phone {
    position: relative;
    width: 210px;
    max-width: 100%;
    margin: 0 auto;
    padding: 22px 14px 16px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(9, 20, 40, 0.8);
}

.cv-phone__notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 62px;
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
}

.cv-apps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.cv-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    text-align: center;
    color: rgba(240, 245, 252, 0.75);
}

.cv-app i {
    font-size: 1.4rem;
    color: #A6CD43;
}

/* Transformação Digital — grade de ícones que acendem */
.cv-icongrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 12px;
}

.cv-iconcell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 84px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    opacity: 0.25;
    transition: opacity 0.3s ease;
}

.cv-iconcell.is-on {
    opacity: 1;
}

.cv-iconcell i {
    font-size: 1.6rem;
    color: #A6CD43;
}

.cv-iconcell span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(240, 245, 252, 0.72);
}

/* =========================================================================
 * Identidade — missão, visão e valores (DNA).
 * ========================================================================= */
.cv-identity__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.cv-identity__card {
    padding: var(--spacing-md);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cv-identity__label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #A6CD43;
    margin-bottom: var(--spacing-sm);
}

.cv-identity__quote {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #F8FAFF;
    margin-bottom: var(--spacing-sm);
}

.cv-identity__desc {
    font-size: var(--text-sm);
    color: rgba(240, 245, 252, 0.72);
}

.cv-dna__head {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.cv-dna__badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(166, 205, 67, 0.14);
    color: #A6CD43;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-sm);
}

.cv-dna__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
}

.cv-value {
    padding: var(--spacing-md);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cv-value__title {
    font-size: var(--text-base);
    margin-bottom: 4px;
}

.cv-value__phrase {
    font-size: var(--text-sm);
    font-style: italic;
    color: #A6CD43;
    margin-bottom: 6px;
}

.cv-value__desc {
    font-size: var(--text-xs);
    color: rgba(240, 245, 252, 0.72);
}

/* =========================================================================
 * Certificações
 * ========================================================================= */
.cv-certs__text {
    font-size: var(--text-base);
    color: rgba(240, 245, 252, 0.78);
    margin-bottom: var(--spacing-lg);
}

.cv-certs__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.cv-cert-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-width:0 permite às trilhas 1fr encolher abaixo da largura
       intrínseca do logotipo, evitando overflow horizontal. */
    min-width: 0;
    padding: var(--spacing-sm);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    aspect-ratio: 1 / 1;
}

.cv-cert-chip img {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
}

.cv-certs__cta {
    text-align: center;
}

/* =========================================================================
 * Clientes — grid estático (sem Swiper).
 * ========================================================================= */
.cv-clients__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.cv-client-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: var(--spacing-md);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    aspect-ratio: 16 / 9;
}

.cv-client-chip img {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
}

/* =========================================================================
 * Soluções — grid responsivo: 3 col >=992 / 2 col 640–991 / 1 col <640.
 * ========================================================================= */
@media (min-width: 640px) {
    .cv-sol__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .cv-sol__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================================================
 * Responsivo — mobile <768
 * ========================================================================= */
@media (max-width: 767px) {
    .cv-section {
        padding: 100px 16px 60px;
    }

    .cv-vista {
        height: 30vh;
    }

    .cv-panel {
        padding: 24px;
    }

    .cv-brasil__canvas-wrap {
        height: 260px;
    }

    .cv-identity__grid {
        grid-template-columns: 1fr;
    }
}

/* Stats e certificações/clientes: colapsam nas telas mais estreitas. */
@media (max-width: 639px) {
    .cv-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cv-certs__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cv-clients__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cv-client-chip {
        padding: var(--spacing-sm);
    }
}

/* =========================================================================
 * Transições leves (T3) — line-mask nos h2 + reveals de entrada.
 * ========================================================================= */
/* Line-mask: o span interno sobe de translateY(110%) até 0 dentro da máscara. */
.cv-line {
    display: block;
    overflow: hidden;
}

.cv-line__inner {
    display: block;
    transform: translateY(110%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cv-line.is-revealed .cv-line__inner {
    transform: translateY(0);
}

/* Reveal genérico (MSBProto.reveal): fade + leve subida. */
.cv-dark .msb-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.cv-dark .msb-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* =========================================================================
 * Movimento reduzido — estado final imediato, sem micro-transições.
 * Cobre tanto a media query do SO quanto o modo forçado via body.cv-reduced
 * (MSBProto.motion.force usado em testes/demos).
 * ========================================================================= */
.cv-reduced .cv-rail,
.cv-reduced .site-header,
.cv-reduced .cv-rail__indicator,
.cv-reduced .cv-line__inner,
.cv-reduced .cv-panel,
.cv-reduced .msb-reveal,
.cv-reduced .cv-mock__screen,
.cv-reduced .cv-bubble,
.cv-reduced .cv-iconcell {
    transition: none !important;
}

.cv-reduced .cv-line__inner {
    transform: translateY(0);
}

.cv-reduced .cv-panel {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .cv-sol-card {
        transition: none;
    }

    .cv-scroll-hint {
        display: none;
        animation: none;
    }

    .cv-line__inner {
        transform: translateY(0);
        transition: none;
    }

    .cv-dark .msb-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cv-panel {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cv-mock__screen,
    .cv-bubble,
    .cv-iconcell {
        transition: none;
    }
}

/* =========================================================================
 * APÊNDICE — Tema Cidade Viva para SUBPÁGINAS (`.cv-page`)
 *
 * Leva o clima da home imersiva às páginas internas (atas, certificações,
 * canal de denúncias) SEM canvas e SEM animação contínua: o fundo é um
 * gradiente fixo somado a uma malha isométrica ESTÁTICA (SVG inline). O único
 * movimento é o reveal de entrada (line-mask + fade), pontual e curto,
 * cancelado sob `prefers-reduced-motion`.
 * ========================================================================= */
.cv-page {
    /* Gradiente fixo + malha isométrica estática (losangos, opacidade ~0.05).
       O SVG é um único rombo em tile; sem canvas, sem JS, sem repaint. */
    background-color: #0A1830;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32' viewBox='0 0 56 32'%3E%3Cpath d='M28 0 56 16 28 32 0 16Z' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #0A1830 0%, #0E2142 100%);
    background-repeat: repeat, no-repeat;
    background-size: 56px 32px, cover;
    background-attachment: fixed, fixed;
    color: rgba(240, 245, 252, 0.82);
    overflow-x: hidden;
}

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

.cv-page h1,
.cv-page h2,
.cv-page h3,
.cv-page h4 {
    color: #F8FAFF;
}

.cv-page p {
    color: rgba(240, 245, 252, 0.82);
}

/* Links de CONTEÚDO em accent. Exceções (nav, botões, rodapé) são
   restauradas logo abaixo com regras de maior especificidade. */
.cv-page a {
    color: var(--color-accent);
}

/* -------------------------------------------------------------------------
 * CORREÇÃO DE CONTRASTE (T6) — o tema dark força textos claros em toda a
 * `.cv-page`. As seções de conteúdo herdadas do CSS de produção usam os
 * utilitários `.bg-white` / `.bg-light` (fundo claro): sem neutralizá-los, o
 * texto claro cai sobre fundo claro e fica ilegível. A neutralização é
 * restrita às SEÇÕES (grandes wrappers) de propósito — assim o "chip" claro
 * do selo (`div.cert-chip`, que precisa de miolo claro p/ os logos) e os
 * botões sociais do rodapé (`a.social-link`, também `.bg-white`) preservam o
 * próprio fundo claro. Deixa o gradiente escuro fixo aparecer atrás dos
 * painéis glass, conforme spec §5.1.
 * ------------------------------------------------------------------------- */
.cv-page section.bg-white,
.cv-page section.bg-light {
    background: transparent !important;
}

/* Header — restaura o branco dos links de navegação (como na home). O estado
   ativo continua em verde-limão via `.nav-link.active { … !important }` de
   components.css. Vence `.cv-page a` (accent) por especificidade (0,3,0). */
.cv-page .site-header .nav-link {
    color: #fff;
}

/* Botões primários (CTA "Contato" do header, "Acessar canal" da denúncia e o
   CTA de vagas em carreiras) — o texto volta ao azul-primário original sobre
   o fundo verde-limão, em vez de herdar accent-sobre-accent (invisível). O
   `.btn-pdf` (outline claro das atas) é tratado na sua própria seção abaixo. */
.cv-page a.btn-primary,
.cv-page .btn-primary {
    color: var(--color-primary);
}

/* Rodapé — links voltam ao branco suave da home; hover em verde-limão
   preservado. Vence `.cv-page a` por especificidade. */
.cv-page .site-footer a {
    color: rgba(255, 255, 255, 0.8);
}

.cv-page .site-footer a:hover {
    color: var(--color-accent);
}

/* Oculta heros de imagem antigos herdados do CSS de produção. */
.cv-page .hero-bg {
    display: none;
}

/* -------------------------------------------------------------------------
 * Painel glass reutilizável — mesmo raio dos painéis da home (18px).
 * ------------------------------------------------------------------------- */
.cv-glass {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cv-glass h1,
.cv-glass h2,
.cv-glass h3,
.cv-glass h4 {
    color: #F8FAFF;
}

.cv-glass p {
    color: rgba(240, 245, 252, 0.82);
}

@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .cv-glass {
        background: rgba(10, 22, 44, 0.9);
    }
}

/* -------------------------------------------------------------------------
 * Page-hero — line-mask no h1 + reveal do subtítulo.
 * `.cv-line` (mask) já é definido acima e vale para toda a página; aqui só
 * garantimos o `.cv-reveal` (fade + subida) usado pelos elementos de apoio.
 * ------------------------------------------------------------------------- */
.cv-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.cv-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------------------------
 * ATAS — cada ata vira um painel glass; total em destaque; PDF outline claro.
 * ------------------------------------------------------------------------- */
.cv-page .ata-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(240, 245, 252, 0.82);
}

.cv-page .ata-card .ata-total,
.cv-page .ata-total {
    color: var(--color-accent);
    font-weight: var(--font-bold);
}

.cv-page .ata-card .btn-pdf,
.cv-page .btn-pdf {
    color: #F8FAFF;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cv-page .ata-card .btn-pdf:hover,
.cv-page .btn-pdf:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------------------------------
 * CERTIFICAÇÕES — o selo vive num "chip" de miolo claro p/ legibilidade AA
 * dos logos coloridos sobre o fundo escuro.
 * ------------------------------------------------------------------------- */
.cv-page .cert-chip,
.cv-page .selo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.cv-page .cert-chip img,
.cv-page .selo-chip img {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------------
 * CANAL DE DENÚNCIAS — cartões de canal em glass.
 * ------------------------------------------------------------------------- */
.cv-page .channel-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(240, 245, 252, 0.82);
}

.cv-page .channel-card h2,
.cv-page .channel-card h3 {
    color: #F8FAFF;
}

/* -------------------------------------------------------------------------
 * Movimento reduzido — reveals no estado final imediato, sem transição.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cv-line__inner {
        transform: translateY(0);
        transition: none;
    }

    .cv-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}