/* ============================================================
   R2 DISTRIBUIÇÃO — PAINEL DE EMBARQUE × CONTROLE
   ============================================================
   Mesma direção do R2 E-commerce B2B: terminal de operações, não
   site institucional genérico. Superfície clara para o conteúdo,
   navbar sempre grafite quase-preta (é instrumento fixado na página,
   não papel), um único acento âmbar e dados em mono tabular.

   Tokens espelham os de frontend/app/globals.css do e-commerce para
   os dois produtos lerem como o mesmo sistema.

   Regra de chrome: fio de cabelo, não sombra. Elevação vem de
   luminância de superfície, não de blur.
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================================
   FONTES, HOSPEDADAS AQUI
   ============================================================
   Antes elas vinham dos servidores do Google. O problema nao era
   velocidade: era que a requisicao da fonte sai ANTES do banner de
   cookies, e leva o IP do visitante para um terceiro sem que ele tenha
   consentido nada. Num site com pagina de politica LGPD isso e
   incoerente -- e o Analytics daqui ja faz certo, sobe com o
   consentimento negado e so libera depois do aceite.

   Servindo daqui, some tambem uma folha de estilo bloqueante e as duas
   conexoes extras (fonts.googleapis.com e fonts.gstatic.com).

   A Sans e fonte VARIAVEL: um arquivo so cobre 400 a 700, e por isso o
   font-weight abaixo e uma faixa, nao um numero. A Mono nao e, entao
   cada peso tem o seu arquivo.

   O unicode-range faz o navegador baixar latin-ext apenas se a pagina
   tiver algum caractere que so exista la. Em portugues, quase nunca.

   font-display: swap mostra o texto na fonte do sistema enquanto a
   nossa carrega. O contrario -- esperar a fonte - deixa a pagina em
   branco por ate tres segundos em conexao ruim.

   IBM Plex e licenciada em SIL OFL 1.1: pode ser hospedada e
   redistribuida, inclusive em site comercial. A licenca acompanha os
   arquivos em FONTES/LICENCA-IBM-Plex.txt, como ela exige.
   ============================================================ */

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../FONTES/plex-sans-latin.woff2?v=20260917b') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../FONTES/plex-sans-latin-ext.woff2?v=20260917b') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../FONTES/plex-mono-400-latin.woff2?v=20260917b') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../FONTES/plex-mono-400-latin-ext.woff2?v=20260917b') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../FONTES/plex-mono-600-latin.woff2?v=20260917b') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../FONTES/plex-mono-600-latin-ext.woff2?v=20260917b') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* --- Superfícies (grafite) ---------------------------------
       Escada de luminância: raised sobe, sunken afunda. */
    --color-surface-base: oklch(0.94 0.006 240);
    --color-surface-sunken: oklch(0.905 0.007 240);
    --color-surface-raised: oklch(0.985 0.003 240);
    --color-surface-overlay: oklch(0.996 0.002 240);

    /* --- Traços (fio de cabelo neutro-frio) -------------------- */
    --color-line-subtle: oklch(0.25 0.01 240 / 8%);
    --color-line: oklch(0.25 0.01 240 / 16%);
    --color-line-strong: oklch(0.25 0.01 240 / 30%);

    /* Limite de controle. A --color-line-strong desenha divisoes entre
       areas, onde 30% basta; num botao ela nao serve. A WCAG 1.4.11 pede
       3:1 entre o limite do controle e o que esta em volta, e a 30% a
       borda fica em 1.87:1 contra o fundo da pagina -- some. A 55% da
       3.61:1. Como a superficie do botao e quase igual a da pagina
       (1.03:1), e a borda que sustenta o contorno sozinha. */
    --color-line-controle: oklch(0.25 0.01 240 / 55%);

    /* --- Texto -------------------------------------------------
       Contraste sobre surface-base: ink ~14:1, ink-muted ~6.5:1,
       ink-faint ~4.4:1 (rótulos, não corpo). */
    --color-ink: oklch(0.20 0.01 240);
    --color-ink-muted: oklch(0.44 0.012 240);
    --color-ink-faint: oklch(0.56 0.012 240);

    /* --- Marca (navbar, barra de números, faixa, rodapé) -------
       Acompanham o tema: claros no claro, escuros no escuro. */
    --color-brand: oklch(0.975 0.004 240);
    --color-brand-strong: oklch(0.94 0.005 240);
    --color-brand-ink: oklch(0.20 0.01 240);
    --color-brand-muted: oklch(0.40 0.012 240);
    --color-brand-line: oklch(0.87 0.006 240);

    /* Sobreposições de estado sobre a marca. No claro precisam
       escurecer, no escuro clarear -- por isso viraram token, e não
       o branco fixo que bastava para uma barra sempre escura. */
    --color-brand-wash: oklch(0 0 0 / 5%);
    --color-brand-wash-strong: oklch(0 0 0 / 9%);
    --color-brand-edge: oklch(0 0 0 / 20%);

    /* O símbolo é SVG externo e o CSS não alcança o traço interno:
       o filtro é a única forma de recolorir. Aqui leva a preto;
       no tema escuro, a branco. */
    --filtro-logo-hover: brightness(0);

    /* --- Sinalização (âmbar de placar) -------------------------
       Ação primária, dígito em destaque, estado ao vivo. Texto
       escuro por cima, sempre. */
    --color-signal: oklch(0.78 0.16 75);
    --color-signal-strong: oklch(0.72 0.17 68);
    --color-signal-ink: oklch(0.16 0.02 70);
    --color-signal-edge: oklch(0.54 0.14 62);

    /* Link de corpo: o âmbar de sinalização é claro demais para texto
       sobre superfície clara (2,16:1). Este é o mesmo matiz rebaixado
       até passar em 4,5:1 — o acento continua reconhecível. */
    --color-link: oklch(0.48 0.13 58);

    /* --- Semânticos (longe do âmbar de propósito) -------------- */
    --color-ok: oklch(0.55 0.12 152);
    --color-warn: oklch(0.62 0.14 55);
    --color-bad: oklch(0.54 0.18 25);

    /* --- Divisões de negócio -----------------------------------
       Cores próprias de cada divisão, mantidas por serem identidade
       da R2. Solar fica perto do âmbar de acento: por isso só
       aparece dentro do cartão, nunca em botão ou estado. */
    --color-infranet: oklch(0.52 0.13 150);
    --color-energia: oklch(0.50 0.15 250);
    --color-solar: oklch(0.62 0.14 65);

    /* --- Movimento --------------------------------------------
       Uma curva de chegada, uma de saída. Nada elástico: o site é
       instrumento de trabalho. */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --transition: 250ms var(--ease-out-expo);
    --transition-fast: 150ms var(--ease-out-quart);

    /* Curva de percurso: parte parado e chega parado. As duas de cima
       comecam na velocidade maxima, o que e certo para quem so muda de
       cor ou desloca poucos pixels, mas vira solavanco quando o elemento
       viaja a largura de um cartao inteiro -- o caso do carrossel. */
    --ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slide: 560ms var(--ease-in-out-soft);

    /* --- Forma ------------------------------------------------- */
    --radius: 0.5rem;
    --radius-sm: calc(var(--radius) * 0.6);
    --radius-md: calc(var(--radius) * 0.8);
    --radius-lg: var(--radius);
    --radius-full: 9999px;

    /* --- Espaçamento (base 4px) -------------------------------- */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --spacing: 1rem;

    --max-width: 1200px;

    /* --- Sombras ------------------------------------------------
       Duas camadas em cada uma: a primeira, curta e fechada, é o
       contato com a superfície; a segunda, larga e diluída, é a luz
       ambiente. Sombra de camada única sempre parece adesivo.

       O tom não é preto: é o mesmo azul-grafite da tinta do texto,
       com opacidade baixa. Preto puro sobre superfície clara suja o
       branco e deixa a sombra cinza-morta.

       A âmbar existe para os controles de ação: repete o matiz do
       preenchimento, então o botão parece emitir a própria cor em vez
       de flutuar sobre uma poça cinza. */
    --sombra-1: 0 1px 2px oklch(0.20 0.01 240 / 7%),
                0 2px 8px oklch(0.20 0.01 240 / 8%);
    --sombra-2: 0 2px 4px oklch(0.20 0.01 240 / 8%),
                0 10px 28px oklch(0.20 0.01 240 / 12%);
    --sombra-ambar: 0 1px 2px oklch(0.45 0.13 62 / 30%),
                    0 5px 16px oklch(0.62 0.16 70 / 34%);
    --sombra-ambar-forte: 0 2px 4px oklch(0.45 0.13 62 / 34%),
                          0 8px 24px oklch(0.62 0.16 70 / 42%);

    /* Tipografia: IBM Plex Sans carrega tudo; a Mono, desenhada em conjunto
       com ela, cobre número e código. O par importa aqui — o site alinha
       dígitos em placar e data, e uma mono qualquer deixaria altura-x e peso
       fora de sintonia com o texto ao lado. */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    --font-heading: var(--font-sans);
    --font-body: var(--font-sans);

    color-scheme: light;
}

html {
    scroll-behavior: smooth;
}

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

body {
    font-family: var(--font-sans);
    color: var(--color-ink);
    background-color: var(--color-surface-base);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--color-signal);
    color: var(--color-signal-ink);
}

/* ============================================================
   TIPOGRAFIA
   Cada degrau carrega seu próprio tracking: corpo grande fecha,
   corpo pequeno abre.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-ink);
    margin-bottom: 1rem;
}

h1 {
    font-size: clamp(2.6rem, 5.6vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.006em;
    font-weight: 700;
}

h2 {
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.004em;
    font-weight: 700;
}

h3 {
    font-size: 1.3rem;
    line-height: 1.22;
    letter-spacing: 0.001em;
    font-weight: 700;
}

h4 { font-size: 1.05rem; line-height: 1.3; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.9375rem; font-weight: 600; }

p {
    margin-bottom: 1rem;
    color: var(--color-ink-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    letter-spacing: -0.006em;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover { color: var(--color-signal-strong); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-signal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Rótulo em caixa alta — a etiqueta do painel */
.section-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin-bottom: 0.75rem;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing);
}

.section { padding: var(--space-8) 0; }

.section-heading {
    max-width: 68ch;
    margin: 0 auto var(--space-4);
    text-align: center;
}

/* Luz caindo do topo — o ambiente de uma sala iluminada por cima */
.bg-light-fall {
    background-image: radial-gradient(
        80% 46% at 50% -8%,
        oklch(0.78 0.16 75 / 8%) 0%,
        transparent 70%
    );
}

/* Fio de luz na aresta superior: a superfície capta luz de cima */
.edge-lit {
    box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 70%);
}

/* ============================================================
   BOTÕES
   Retângulo de 6px, não pílula. Pílula só em etiqueta de estado.
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                color var(--transition-fast);
}

/* A borda não é decoração: sobre superfície clara o âmbar cheio fica a
   1,9:1 do fundo e o botão perde o contorno. A WCAG 1.4.11 pede 3:1
   entre o limite do controle e o que está em volta -- este tom escuro
   do mesmo matiz devolve isso sem apagar o acento. No tema escuro a
   borda vira o próprio âmbar, porque ali o preenchimento já se destaca. */
.btn-primary {
    background-color: var(--color-signal);
    color: var(--color-signal-ink);
    border-color: var(--color-signal-edge);
    box-shadow: var(--sombra-ambar);
}

.btn-primary:hover {
    background-color: var(--color-signal-strong);
    color: var(--color-signal-ink);
    box-shadow: var(--sombra-ambar-forte);
}

/* Deixou de ser transparente.

   Como contorno vazado ele sumia: sobre a superfície clara sobrava uma
   borda de 30% de opacidade e nada mais, e o par de botões do hero lia
   como um botão só. Agora tem corpo próprio, borda cheia e sombra --
   continua claramente o secundário ao lado do âmbar, mas existe. */
.btn-secondary {
    background-color: var(--color-surface-raised);
    color: var(--color-ink);
    border-color: var(--color-line-controle);
    box-shadow: var(--sombra-1);
}

.btn-secondary:hover {
    background-color: var(--color-surface-overlay);
    border-color: var(--color-ink-faint);
    color: var(--color-ink);
    box-shadow: var(--sombra-2);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-ink);
    border-color: var(--color-line-controle);
}

.btn-outline:hover {
    border-color: var(--color-signal);
    color: var(--color-signal-strong);
}

.btn-link {
    background: transparent;
    color: var(--color-signal-strong);
    padding: 0.5rem;
    border: none;
}

.btn-link:hover { text-decoration: underline; }

.btn-large { padding: 0.875rem 1.25rem; font-size: 1rem; }

/* Ação destrutiva. Contorno em vez de preenchimento: um botão vermelho
   sólido puxa o olho e convida ao clique, que é o oposto do que se quer
   de algo irreversível. O preenchimento só entra no hover, quando a
   intenção já está declarada. */
.btn-danger {
    background-color: transparent;
    color: var(--color-bad);
    border-color: var(--color-bad);
}

.btn-danger:hover {
    background-color: var(--color-bad);
    color: var(--color-surface-raised);
    border-color: var(--color-bad);
}

.btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-danger:disabled:hover {
    background-color: transparent;
    color: var(--color-bad);
}

/* Botões sobre a navbar/rodapé escuros invertem a lógica de contraste */
.navbar .btn-secondary,
.footer .btn-secondary,
.cookie-banner .btn-secondary {
    color: var(--color-brand-ink);
    border-color: var(--color-brand-line);
}

.navbar .btn-secondary:hover,
.footer .btn-secondary:hover,
.cookie-banner .btn-secondary:hover {
    background-color: var(--color-brand-wash-strong);
    border-color: var(--color-brand-edge);
    color: var(--color-brand-ink);
}

/* ============================================================
   ÍCONES
   ============================================================ */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.icon-stroke {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ============================================================
   HEADER — o instrumento fixado na página
   Grafite quase-preto em qualquer contexto: é hardware, não papel.
   ============================================================ */

.header {
    position: sticky;
    top: 0;
    z-index: 500;
}

.navbar {
    padding: 0.75rem 0;
    background: var(--color-brand);
    border-bottom: 1px solid var(--color-brand-line);
    transition: padding var(--transition-fast);
    box-shadow: var(--sombra-1);
}

.header.is-scrolled .navbar {
    padding: 0.5rem 0;
    background: var(--color-brand-strong);
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.logo-link { display: inline-flex; align-items: center; }

.logo-mark {
    display: block;
    /* 20% acima dos 36px anteriores. O scale(0.85) do estado rolado
       parte daqui, então a logo encolhida fica em ~36,7px -- perto do
       tamanho que a barra tinha em repouso antes desta mudança. */
    height: 43.2px;
    width: auto;
    transform-origin: left center;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

/* O símbolo é SVG externo: o CSS não alcança o traço interno, então
   brightness(0) zera a cor e invert(1) leva a branco. */
.logo-link:hover .logo-mark,
.logo-link:focus-visible .logo-mark {
    filter: var(--filtro-logo-hover);
}

.header.is-scrolled .logo-mark { transform: scale(0.85); }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-brand-ink);
    margin: 0 auto;
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition-fast);
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu-collapse { display: contents; }

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.125rem;
    align-items: center;
}

.nav-menu > li > a {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    color: var(--color-brand-muted);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-menu > li > a:hover {
    color: var(--color-brand-ink);
    background-color: var(--color-brand-wash);
}

.dropdown { position: relative; }

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-surface-overlay);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    min-width: 220px;
    list-style: none;
    margin-top: 0.5rem;
    z-index: 1000;
    padding: 0.25rem;
    animation: submenuIn var(--transition) both;
}

@keyframes submenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown:hover .submenu,
.submenu:hover { display: block; }

.submenu li { position: relative; }

.submenu a {
    display: block;
    padding: 0.625rem 0.75rem;
    color: var(--color-ink-muted);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    transition: var(--transition-fast);
}

.submenu a:hover {
    background-color: var(--color-surface-sunken);
    color: var(--color-ink);
}

/* Cores de divisão restritas ao submenu de Soluções e aos filhos diretos:
   sem esse escopo, o nth-child alcança também o submenu de Área do Cliente
   e o aninhado dos bancos, pintando Itaú de verde-Infranet. */
.submenu--divisoes > li:nth-child(1) a:hover {
    color: var(--color-infranet);
    border-left-color: var(--color-infranet);
}

.submenu--divisoes > li:nth-child(2) a:hover {
    color: var(--color-energia);
    border-left-color: var(--color-energia);
}

.submenu--divisoes > li:nth-child(3) a:hover {
    color: var(--color-solar);
    border-left-color: var(--color-solar);
}

/* ---- Bancos: cor oficial de cada instituição ---------------------
   Marca de terceiro, então a cor é a da instituição, não a do sistema. */
.submenu--bancos {
    --itau: #EC7000;         /* laranja Itaú — barra e fundo */
    --itau-texto: #B35200;   /* mesmo matiz, escurecido: o laranja real
                                dá 3,02:1 e reprova em texto de 14px */
    --bradesco: #CC092F;     /* vermelho Bradesco — passa em 5,7:1 */
}

.submenu--bancos > li:nth-child(1) a:hover {
    color: var(--itau-texto);
    border-left-color: var(--itau);
    background-color: color-mix(in srgb, var(--itau) 10%, transparent);
}

.submenu--bancos > li:nth-child(2) a:hover {
    color: var(--bradesco);
    border-left-color: var(--bradesco);
    background-color: color-mix(in srgb, var(--bradesco) 10%, transparent);
}

/* Submenu aninhado (2ª via de boleto) */
.submenu li.dropdown > a::after {
    content: '\25C0';
    font-size: 0.6rem;
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-ink-faint);
}

.submenu li.dropdown > a { padding-left: 1.5rem; }

.submenu .submenu {
    top: 0;
    left: auto;
    right: 100%;
    margin-top: 0;
    margin-right: 0.25rem;
    min-width: 180px;
}

.submenu li.dropdown:hover > .submenu,
.submenu .submenu:hover { display: block; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
    position: relative;
    padding: 5rem 0 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-surface-base);
    background-image: radial-gradient(
        80% 46% at 50% -8%,
        oklch(0.78 0.16 75 / 10%) 0%,
        transparent 70%
    );
    border-bottom: 1px solid var(--color-line);
}

/* A foto do hero entra inteira: opacidade 1, sem filtro.

   Antes ela vinha a 34% e clareada, para caber atras de texto escuro.
   Agora a foto e o fundo, e quem se adapta e o texto: as regras de
   .hero h1 e .hero p passaram a cor clara, nos dois temas. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* WebP, sem reserva em PNG.

       A reserva seria para navegador sem WebP -- mas esse navegador
       tambem nao entende oklch() nem color-mix(), que aparecem 94 e 10
       vezes nesta folha. Quem nao abre o WebP ja nao ve as cores do
       site: o PNG de 692 KB seria peso morto no pacote para ninguem.

       692 KB -> 70 KB, 90% a menos, no arquivo que o navegador busca
       primeiro e que define quando a primeira tela fica pronta. */
    background-image: url('../IMG/fundo-hero.webp?v=20260917b');
    background-size: cover;
    background-position: center;
}

/* Veu sobre a foto.

   Nao e enfeite: sem ele o texto branco reprova. A foto tem pontos de
   luz -- as luminarias do galpao -- que chegam a #a8a5a0. Branco sobre
   aquele pixel da 2.45:1, quando a WCAG AA pede 4.5:1 para texto
   corrido.

   Medindo o pior pixel da foto inteira contra branco:

       veu    contraste
       0.30    4.44:1   reprova por pouco
       0.45    6.23:1   escolhido
       0.60    8.89:1   passa, mas ja apaga a foto

   O tom do veu e grafite (#0B0D10), nao preto puro: preto chapado
   achata a profundidade da imagem e deixa o hero com cara de vidro
   fume. Ele pinta DEPOIS do ::before porque os dois tem z-index -1 e
   o ::after vem por ultimo na ordem de pintura. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: oklch(0.16 0.008 250 / 45%);
}

/* Texto do hero, claro nos dois temas, porque agora o fundo e a foto
   nos dois. Medido contra o pior pixel da foto ja com o veu:

       branco puro   6.23:1   -> o H1
       oklch(0.92)   4.91:1   -> o paragrafo, um degrau abaixo
       oklch(0.88)   4.34:1   -> reprova, nao usar */
/* O secundario dentro do hero e outro problema: ali o fundo e foto, e a
   superficie clara do botao normal brigaria com ela. Vira vidro -- um
   veu de branco com a borda clara por cima da imagem.

   Os 12% sao teto medido, de novo contra o pior pixel:

       branco 10%   texto 4.92:1
       branco 12%   texto 4.70:1   escolhido
       branco 16%   texto 4.29:1   reprova

   A borda a 55% de branco fica a 3.13:1 do que esta em volta, acima dos
   3:1 que a WCAG 1.4.11 pede para o limite de um controle.

   No hover ele inverte para claro solido com tinta escura: o estado
   ativo fica obvio e o contraste sobe em vez de cair. */
.hero .btn-secondary {
    background-color: oklch(1 0 0 / 12%);
    color: oklch(1 0 0);
    border-color: oklch(1 0 0 / 55%);
    box-shadow: 0 2px 10px oklch(0.10 0.01 250 / 35%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero .btn-secondary:hover {
    background-color: oklch(0.98 0.002 240 / 94%);
    color: oklch(0.20 0.01 240);
    border-color: transparent;
    box-shadow: var(--sombra-2);
}

.hero-content {
    position: relative;
    z-index: 1;
    /* 51.25rem = os mesmos 820px na raiz de 16px, mas em rem a caixa
       acompanha o corpo da fonte quando a raiz cresce na tela larga.
       Em px ela ficaria parada e a chamada quebraria em mais linhas. */
    max-width: 51.25rem;
    padding: 0 var(--spacing);
}

/* Etiqueta de estado: aqui sim a pílula */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: 1.5rem;
}

/* Ponto desenhado em CSS, e não o caractere ·: o glifo se apoia nas
   métricas da fonte e assenta um pouco acima do meio óptico. Um círculo
   dentro do flex fica centrado por construção, em qualquer fonte. */
.hero-badge-sep {
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background-color: var(--color-signal-strong);
    /* não encolhe quando a pílula aperta em tela estreita */
    flex-shrink: 0;
}

.hero h1 {
    margin-bottom: 1.25rem;
    color: oklch(1 0 0);
}

.hero h1 .accent { color: var(--color-signal-strong); }

.hero p {
    font-size: 1.125rem;
    line-height: 1.55;
    color: oklch(0.92 0.006 240);
    margin-bottom: 2rem;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ============================================================
   BARRA DE NÚMEROS — a régua do placar
   Mono tabular para os dígitos não dançarem durante a contagem.
   ============================================================ */

.stats-bar {
    background-color: var(--color-brand);
    border-bottom: 1px solid var(--color-brand-line);
    position: relative;
    z-index: 3;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: var(--space-4) var(--spacing);
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-value {
    display: flex;
    align-items: baseline;
    gap: 0.05rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.012em;
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 600;
    /* Brilho de dígito de placar: só o número protagonista */
    color: var(--color-signal);
    text-shadow: 0 0 18px oklch(0.78 0.16 75 / 45%);
}

.stat-label {
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-brand-muted);
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-3) var(--spacing);
    }
}

/* ============================================================
   SEÇÕES DE CONTEÚDO
   ============================================================ */

.what-we-do { background-color: var(--color-surface-sunken); }

.what-we-do-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
}

.what-we-do h2 { margin-bottom: 1.25rem; }

.what-we-do p { font-size: 1rem; line-height: 1.7; }

.what-we-do .division-infranet { color: var(--color-infranet); font-weight: 600; }
.what-we-do .division-energia { color: var(--color-energia); font-weight: 600; }
.what-we-do .division-solar { color: var(--color-solar); font-weight: 600; }

.value-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.value-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-ink);
    transition: border-color var(--transition-fast);
    box-shadow: var(--sombra-1);
}

.value-list li:hover { border-color: var(--color-line-strong); box-shadow: var(--sombra-2); }

.value-list .value-icon {
    width: 20px;
    height: 20px;
    color: var(--color-signal-strong);
    margin-top: 0.1rem;
}

@media (max-width: 900px) {
    .what-we-do-inner { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ============================================================
   SOLUÇÕES — cartões de fio de cabelo, sem sombra
   ============================================================ */

.solutions { background-color: var(--color-surface-base); }

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.solution-card {
    position: relative;
    background-color: var(--color-surface-raised);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    text-align: left;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color var(--transition), background-color var(--transition);
    box-shadow: var(--sombra-1);
}

/* Régua de cor da divisão na aresta superior */
.solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--card-accent, var(--color-signal));
}

.solution-card:hover {
    border-color: var(--color-line-strong);
    background-color: var(--color-surface-overlay);
    box-shadow: var(--sombra-2);
}

.solution-card--infranet { --card-accent: var(--color-infranet); }
.solution-card--energia { --card-accent: var(--color-energia); }
.solution-card--solar { --card-accent: var(--color-solar); }

.solution-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--card-accent, var(--color-signal)) 12%, transparent);
    color: var(--card-accent, var(--color-signal));
    margin-bottom: 1.25rem;
}

.solution-card-icon svg { width: 22px; height: 22px; }

/* Cada SVG traz proporção própria: largura fixada por divisão */
.solution-card-logo {
    display: block;
    height: 40px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 1rem;
}

.solution-card--infranet .solution-card-logo { width: 51px; }
.solution-card--energia  .solution-card-logo { width: 46px; }
.solution-card--solar    .solution-card-logo { width: 32px; }

.solution-card h3 { margin-bottom: 0.5rem; }

.solution-card p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
    flex-grow: 1;
}

.solution-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--card-accent, var(--color-signal-strong));
}

.solution-card-link svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast);
}

.solution-card-link:hover svg { transform: translateX(3px); }
.solution-card-link:hover { text-decoration: underline; }

/* ============================================================
   FAIXA DE CHAMADA
   ============================================================ */

.cta-banner {
    background-color: var(--color-brand);
    color: var(--color-brand-ink);
    text-align: center;
    border-top: 1px solid var(--color-brand-line);
    border-bottom: 1px solid var(--color-brand-line);
}

.cta-banner-content {
    max-width: 68ch;
    margin: 0 auto;
}

.cta-banner h2 { color: var(--color-brand-ink); margin-bottom: 0.75rem; }

.cta-banner p {
    color: var(--color-brand-muted);
    font-size: 1rem;
    margin-bottom: 1.75rem;
}

/* ============================================================
   CARROSSEL DE PARCEIROS
   As artes são coloridas para fundo branco: a pastilha permanece
   clara para preservar a cor de cada marca.
   ============================================================ */

.partners {
    background-color: var(--color-surface-sunken);
    text-align: center;
    padding-bottom: 3rem;
}

.partners h2 { margin-bottom: 0.5rem; }

.partners-carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    /* Um pouco mais largo que a coluna, para as setas ficarem fora do
       corpo do conteúdo. Amarrado ao token: se ficasse em 1300px fixos,
       na tela larga a faixa de parceiros seria a única coisa parada. */
    max-width: calc(var(--max-width) + 100px);
    margin: 0 auto;
}

.partners-carousel-viewport {
    overflow: hidden;
    flex: 1;
    user-select: none;
    /* O recorte vale para os quatro lados, e e o eixo horizontal que
       interessa. Sem folga, o salto de 4px do hover e a sombra que se
       espalha por 28px sairiam decepados na borda de cima. O padding
       afasta o corte e a margem negativa devolve o espaco no layout,
       entao nada em volta se mexe. */
    padding: 14px 0;
    margin: -14px 0;
}

.partners-carousel-track {
    display: flex;
    gap: 0.75rem;
    /* Sem transition aqui: o trilho anda quadro a quadro pelo JS. Uma
       transicao de CSS brigaria com isso -- cada escrita reiniciaria a
       interpolacao e o movimento sairia aos solavancos. */
    will-change: transform;
}

/* O PISCAR, E POR QUE ACONTECIA
   O cartao tinha `background: <cor>` no repouso e `background: <degrade>`
   no hover. Os dois sao a mesma propriedade abreviada, mas escrevem
   coisas diferentes: cor vai em background-color, degrade vai em
   background-image. Ao entrar o mouse, a abreviada do hover zerava o
   background-color para transparent; ao sair, o background-image sumia
   NA HORA (nao e animavel) enquanto o background-color voltava devagar,
   dentro da transicao. Naquele intervalo o cartao ficava sem nenhum
   fundo -- era o pisca-pisca.

   Agora o background-color nunca muda. A cor da marca entra num
   ::before proprio, que so anima opacidade: nao ha instante sem fundo,
   e opacidade e das poucas propriedades que a GPU resolve sozinha. */
.partner-slide {
    position: relative;
    overflow: hidden;
    flex: 0 0 180px;
    height: 110px;
    background-color: var(--color-surface-overlay);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transition: border-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* A camada da marca. Comeca em branco transparente, e nao em
   `transparent`: a palavra-chave equivale a preto com alfa zero, e a
   interpolacao passaria por cinzas sujos no meio do degrade. */
.partner-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    background-image: linear-gradient(135deg,
        rgb(255 255 255 / 0) 0%,
        color-mix(in srgb, var(--marca, oklch(0.55 0.02 240)) 12%, #FFFFFF) 55%,
        color-mix(in srgb,
            var(--marca-fim, var(--marca, oklch(0.55 0.02 240))) var(--fim-forca, 34%),
            #FFFFFF) 100%);
}

.partner-slide a {
    /* Acima da camada de cor, senao o degrade cobre o logo. */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.partner-slide a:focus-visible {
    outline: 2px solid var(--color-signal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.partner-slide img {
    max-width: 100%;
    max-height: 68px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

.partner-slide:hover img { opacity: 1; }

/* A arte da PPA vem sem margem interna: sem isto ela cresce demais */
.partner-slide img.partner-logo--tight { max-height: 44px; }

.carousel-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-line-strong);
    background-color: var(--color-surface-raised);
    color: var(--color-ink);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.carousel-btn:hover {
    background-color: var(--color-signal);
    border-color: var(--color-signal);
    box-shadow: var(--sombra-ambar);
    color: var(--color-signal-ink);
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 768px) {
    .partner-slide { flex: 0 0 140px; height: 90px; }
    .carousel-btn { width: 36px; height: 36px; font-size: 0.875rem; }
}

@media (max-width: 480px) {
    .partner-slide { flex: 0 0 120px; height: 80px; }
    .partners-carousel-wrapper { gap: 0.375rem; padding: 0 0.5rem; }
}

/* ============================================================
   RODAPÉ — mesma matéria da navbar
   ============================================================ */

.footer {
    background-color: var(--color-brand-strong);
    color: var(--color-brand-ink);
    padding: var(--space-6) 0 var(--space-2);
    border-top: 1px solid var(--color-brand-line);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-brand-line);
    padding-bottom: 2rem;
}

.footer-section h4 {
    color: var(--color-brand-ink);
    margin-bottom: 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

.footer-section ul { list-style: none; }
.footer-section li { margin-bottom: 0.5rem; }

.footer-section a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-brand-muted);
    font-size: 0.875rem;
}

.footer-section a svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-signal);
    opacity: 0.7;
}

.footer-section a:hover { color: var(--color-brand-ink); }
.footer-section a:hover svg { opacity: 1; }

.footer-social {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-brand-line);
}

.footer-social p { color: var(--color-brand-muted); }

.social-icons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background-color: var(--color-brand-wash);
    border: 1px solid var(--color-brand-line);
    color: var(--color-brand-muted);
    transition: var(--transition-fast);
}

.social-icons a:hover {
    background-color: var(--color-signal);
    border-color: var(--color-signal);
    box-shadow: var(--sombra-ambar);
    color: var(--color-signal-ink);
}

.footer-bottom {
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-brand-muted);
}

.footer-bottom p { color: inherit; margin-bottom: 0.5rem; font-size: 0.75rem; }

/* ============================================================
   BANNER DE COOKIES
   ============================================================ */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-brand-strong);
    color: var(--color-brand-ink);
    padding: 1.25rem;
    z-index: 999;
    max-height: 200px;
    overflow-y: auto;
    border-top: 1px solid var(--color-signal);
}

.cookie-content { max-width: var(--max-width); margin: 0 auto; }

.cookie-content h3 { color: var(--color-brand-ink); font-size: 1rem; margin-bottom: 0.5rem; }
.cookie-content p { color: var(--color-brand-muted); margin-bottom: 1rem; font-size: 0.875rem; }

.cookie-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.cookie-buttons .btn { font-size: 0.875rem; padding: 0.5rem 1rem; }

.cookie-banner.hidden { display: none; }

/* ============================================================
   REVELAÇÃO AO ROLAR
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms var(--ease-out-expo), transform 400ms var(--ease-out-expo);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   CABEÇALHO DE PÁGINA INTERNA
   ============================================================ */

.page-hero {
    background-color: var(--color-surface-sunken);
    border-bottom: 1px solid var(--color-line);
    padding: 3.5rem 0 2.5rem;
    background-image: radial-gradient(
        80% 46% at 50% -8%,
        oklch(0.78 0.16 75 / 8%) 0%,
        transparent 70%
    );
}

.page-hero-content { max-width: 68ch; }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin-bottom: 1rem;
}

.breadcrumb a { color: var(--color-ink-muted); }
.breadcrumb a:hover { color: var(--color-signal-strong); }
.breadcrumb .breadcrumb-sep { opacity: 0.5; }
.breadcrumb .breadcrumb-current { color: var(--color-ink); }

.page-hero h1 { margin-bottom: 0.75rem; }

.page-hero p {
    font-size: 1rem;
    color: var(--color-ink-muted);
    max-width: 60ch;
    margin-bottom: 0;
}

/* ============================================================
   TREINAMENTOS — cartazes com data
   ============================================================ */

.treinamento-grid {
    display: grid;
    /* min(300px, 100%) e nao 300px puro: em tela de 320px o container mede
       288px, e um minimo rigido de 300px faria o cartao estourar a coluna e
       ficar mais largo que o resto da pagina. Com o min(), a faixa encolhe
       junto quando nao ha espaco. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
    /* Cada cartaz vem na proporção original, então os cartões têm alturas
       diferentes. Sem isto o grid estica todos até o mais alto da linha,
       deixando um vão sob os menores. */
    align-items: start;
}

.treinamento-card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-fast);
    box-shadow: var(--sombra-1);
}

.treinamento-card:hover { border-color: var(--color-line-strong); box-shadow: var(--sombra-2); }

/* Sem proporção imposta: o cartaz aparece inteiro, na forma em que foi
   desenhado. O espaço continua reservado antes de a imagem chegar porque
   width e height vão no atributo, medidos do PNG na publicação -- é o par
   de atributos que dá ao navegador a proporção antecipada. Sem eles o
   título e a data saltariam quando o banner carregasse. */
.treinamento-banner {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--color-surface-sunken);
    border-bottom: 1px solid var(--color-line);
}

/* O cartaz leva à página do treinamento na outra plataforma */
.treinamento-link {
    display: block;
    /* imagem é inline por natureza e ganharia uma fresta sob a linha-base */
    line-height: 0;
}

.treinamento-link:focus-visible {
    outline: 2px solid var(--color-signal);
    /* para dentro: para fora o contorno some sob o overflow:hidden do cartão */
    outline-offset: -2px;
}

.treinamento-card:hover .treinamento-link .treinamento-banner {
    opacity: 0.92;
}

.treinamento-banner {
    transition: opacity var(--transition-fast);
}

.treinamento-corpo {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1;
}

.treinamento-card h3 {
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 0;
}

/* Unidade onde o treinamento acontece. Fica acima da data porque a data
   está ancorada no rodapé do cartão pelo margin-top:auto. */
.treinamento-unidade {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-ink-muted);
}

.treinamento-unidade svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    /* alinha o pino com a primeira linha quando o endereço quebra */
    margin-top: 0.1rem;
    color: var(--color-ink-faint);
}

/* Mono tabular: as datas se alinham coluna a coluna entre os cartões */
.treinamento-data {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink-muted);
}

.treinamento-data svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-signal-strong);
}

.treinamento-vazio {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-lg);
    color: var(--color-ink-muted);
}

/* Prévia e saída da página de cadastro de treinamento */
.previa { margin: 1.5rem 0; }

/* Altura própria: o banner perdeu a proporção fixa, então o espaço
   reservado não vem mais dela */
.treinamento-banner--vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 170px;
    padding: 1rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-ink-faint);
    border-bottom: 1px dashed var(--color-line-strong);
}

/* Confirmação de exclusão. Moldura e fundo próprios separam o momento
   de decidir do resto do formulário: o clique seguinte não volta atrás. */
.confirmacao {
    border: 1px solid var(--color-bad);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    padding: 1rem;
    margin-bottom: 1rem;
}

.confirmacao p { margin-bottom: 0.875rem; color: var(--color-ink); }

.confirmacao .form-actions { margin-top: 0; }

/* Mesma construção do aviso de erro, em verde */
.form-ok {
    border: 1px solid var(--color-ok);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: var(--color-ink);
    font-size: 0.9375rem;
}

/* Quem não distingue a cor ainda entende o aviso: o texto diz o que
   houve e o que fazer, sem depender do vermelho (WCAG 1.4.1). A cor
   só apressa o reconhecimento, então fio de cabelo basta -- mesma
   regra de chrome do resto do arquivo. */
.form-erro {
    border: 1px solid var(--color-bad);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: var(--color-ink);
    font-size: 0.9375rem;
}

/* Largura fixa para a prévia mostrar o cartaz no tamanho real da grade,
   e não esticado na largura do formulário */
.previa-card { max-width: 340px; }

.passos {
    margin: 0 0 1.25rem 1.25rem;
    color: var(--color-ink-muted);
    font-size: 0.9375rem;
}

.passos li { margin-bottom: 0.5rem; }

.passos code,
.bloco-html code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.passos code {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.35rem;
    color: var(--color-ink);
}

/* overflow-x próprio: o bloco gerado tem linhas longas e sem isto a
   página inteira ganharia rolagem horizontal */
.bloco-html {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1.25rem;
    white-space: pre;
    tab-size: 4;
}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */

.form-card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--sombra-1);
}

.form-card + .form-card { margin-top: 1.5rem; }

.form-card-title { margin-bottom: 0.375rem; }

.form-card-subtitle { color: var(--color-ink-muted); margin-bottom: 1.5rem; }

.form-section-title {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin: 1.5rem 0 0.75rem;
}

.form-section-title:first-child { margin-top: 0; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form-grid .form-field--full { grid-column: 1 / -1; }

.form-field { display: flex; flex-direction: column; gap: 0.375rem; }

.form-field label {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-ink-muted);
}

.form-field .required { color: var(--color-bad); }

.form-field input,
.form-field select,
.form-field textarea {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-base);
    color: var(--color-ink);
    width: 100%;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-ink-faint); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-signal);
    background: var(--color-surface-overlay);
}

.form-field textarea { resize: vertical; min-height: 110px; }

.form-field input[type="file"] { padding: 0.5rem; font-size: 0.8125rem; }

.form-field input[type="file"]::file-selector-button {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-line-strong);
    color: var(--color-ink);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    margin-right: 0.75rem;
    /* A mao personalizada entra aqui, e nao na secao CURSOR la embaixo,
       porque este seletor e mais especifico e venceria de qualquer jeito.
       Sob toque a segunda declaracao nao carrega e sobra o pointer. */
    cursor: pointer;
    cursor: image-set(url('../IMG/cursor/mao.png?v=20260917b') 1x,
                      url('../IMG/cursor/mao-2x.png?v=20260917b') 2x) 7 1, pointer;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
}

.form-hint { font-size: 0.8125rem; color: var(--color-ink-muted); margin-top: 1rem; }

.form-actions { margin-top: 1.5rem; }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EVENTOS / TREINAMENTOS
   ============================================================ */

.event-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }

.event-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    transition: border-color var(--transition-fast);
    box-shadow: var(--sombra-1);
}

.event-card:hover { border-color: var(--color-line-strong); box-shadow: var(--sombra-2); }

.event-card-info h3 { margin-bottom: 0.5rem; font-size: 1.05rem; }

.event-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
}

.event-meta span { display: inline-flex; align-items: center; gap: 0.375rem; }

.event-meta .icon-stroke {
    width: 15px;
    height: 15px;
    color: var(--color-signal-strong);
    flex-shrink: 0;
}

.event-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-signal-strong);
}

.event-card-link .icon-stroke {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast);
}

.event-card-link:hover .icon-stroke { transform: translateX(3px); }

/* ============================================================
   ETIQUETAS
   ============================================================ */

.tag-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-ink);
    transition: border-color var(--transition-fast);
}

.tag-chip:hover { border-color: var(--color-line-strong); }

.tag-chip .icon-stroke { width: 15px; height: 15px; color: var(--color-signal-strong); }

/* ============================================================
   CONTEÚDO LONGO (páginas legais)
   Medida de leitura controlada: 68ch é onde o olho não perde a linha.
   ============================================================ */

.prose { max-width: 68ch; }

.prose h2 { margin-top: 2.5rem; font-size: 1.3rem; line-height: 1.22; }
.prose h3 { margin-top: 1.75rem; font-size: 1rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.prose p, .prose li {
    color: var(--color-ink-muted);
    font-size: 0.9375rem;
    line-height: 1.75;
}

.prose ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--color-signal-strong); }
.prose strong { color: var(--color-ink); }

.legal-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: color-mix(in srgb, var(--color-warn) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warn) 35%, transparent);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}

.legal-notice .icon-stroke {
    width: 20px;
    height: 20px;
    color: var(--color-warn);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.legal-notice p { color: var(--color-ink); margin-bottom: 0; font-size: 0.875rem; }

/* ============================================================
   HOVER POR MARCA (carrossel de parceiros)
   Cada cartão assume a cor real da marca, extraída dos pixels do
   logo. O degradê parte da superfície clara e só ganha o tom no fim,
   para o logo seguir legível por cima.
   ============================================================ */

/* Evidencia: o cartao sobe, ganha sombra, acende a cor da marca e a
   borda assume o mesmo tom. Sao quatro sinais no mesmo gesto, e nenhum
   deles e cor sozinha -- quem nao distingue o tom da marca ainda ve o
   deslocamento e a sombra (WCAG 1.4.1). */
.partner-slide:hover,
.partner-slide:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--sombra-2);
    border-color: color-mix(in srgb, var(--marca, oklch(0.55 0.02 240)) 45%, transparent);
}

.partner-slide:hover::before,
.partner-slide:focus-within::before {
    opacity: 1;
}

/* Quem pediu menos movimento fica com a cor e a sombra, sem o salto. */
@media (prefers-reduced-motion: reduce) {
    .partner-slide:hover,
    .partner-slide:focus-within {
        transform: none;
    }
}

.partner--3m                       { --marca: #F00000; }
.partner--amphenol                 { --marca: #105090; --marca-fim: #14161A; --fim-forca: 60%; }
.partner--avant                    { --marca: #E00010; }
.partner--eletropoll               { --marca: #005090; }
.partner--frahm                    { --marca: #5B6675; --marca-fim: #14161A; --fim-forca: 60%; }
.partner--garen                    { --marca: #203050; }
.partner--intelbras                { --marca: #00A030; }
.partner--ip-metal                 { --marca: #E01020; }
.partner--kanaflex                 { --marca: #00A0E0; }
.partner--khomp                    { --marca: #307040; --marca-fim: #14161A; --fim-forca: 60%; }
.partner--legrand                  { --marca: #E01020; --marca-fim: #14161A; --fim-forca: 60%; }
.partner--lukma                    { --marca: #203070; }
.partner--megatron                 { --marca: #E03030; }
.partner--nice                     { --marca: #004090; }
.partner--ppa                      { --marca: #E05000; --marca-fim: #14161A; --fim-forca: 60%; }
.partner--prysmian-group           { --marca: #5B6675; --marca-fim: #14161A; --fim-forca: 60%; }
.partner--rossi                    { --marca: #304090; }
.partner--seventh                  { --marca: #204080; }
.partner--sil                      { --marca: #105090; }
.partner--steck                    { --marca: #F00010; }
.partner--unicoba                  { --marca: #004080; }
.partner--vicap                    { --marca: #1050A0; }
.partner--weg                      { --marca: #0050A0; }
.partner--western-digital          { --marca: #304090; --marca-fim: #14161A; --fim-forca: 60%; }

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* ---- Telas largas, ou zoom reduzido -------------------------------
   Acima de ~1250px o layout parava de crescer: a coluna travava em
   1200px e a tipografia batia no teto do clamp. Num monitor de 2560px
   isso deixava 680px de vazio de cada lado -- o conteúdo ocupava 47%
   da tela e parecia congelado. Diminuir o zoom produz exatamente o
   mesmo efeito, porque aumenta a largura em pixels de CSS.

   Duas alavancas trabalhando juntas:

   1. A coluna cresce em degraus, até 1560px.
   2. A raiz sobe de 16 para 17 e 18px, e isso arrasta TUDO que é medido
      em rem -- tamanho de texto, espaçamento, raio de canto, altura de
      botão. Sem isso a coluna esticaria com os mesmos elementos
      miúdos dentro, que é o oposto do que se quer.

   As linhas de texto continuam presas a 68ch e 60ch, então a medida de
   leitura acompanha o corpo da fonte em vez de virar linha corrida. */
@media (min-width: 1600px) {
    :root {
        font-size: 17px;
        --max-width: 1360px;
    }
}

@media (min-width: 2000px) {
    :root {
        font-size: 18px;
        --max-width: 1560px;
    }
}

@media (max-width: 768px) {
    .navbar-content { flex-wrap: wrap; }

    .nav-toggle { display: flex; }

    .nav-menu-collapse {
        flex-basis: 100%;
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition: grid-template-rows var(--transition), opacity var(--transition-fast);
    }

    .nav-menu-collapse.is-open {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--color-brand-line);
    }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: hidden;
        min-height: 0;
    }

    .nav-menu li { border-bottom: 1px solid var(--color-brand-line); }

    .nav-menu > li > a { border-radius: 0; padding: 0.75rem 0.25rem; }

    .submenu {
        position: static;
        display: none;
        border: none;
        border-radius: 0;
        background-color: var(--color-brand-wash);
        animation: none;
        padding: 0;
    }

    .submenu a { color: var(--color-brand-muted); border-radius: 0; }
    .submenu a:hover { background-color: var(--color-brand-wash); color: var(--color-brand-ink); }

    .dropdown:hover .submenu { display: none; }
    .dropdown.active .submenu { display: block; }

    .submenu .submenu { right: auto; left: 0; margin-right: 0; }

    .hero { padding: 3.5rem 0 2.5rem; }
    .page-hero { padding: 2.5rem 0 2rem; }

    .event-card { flex-direction: column; align-items: flex-start; }

    .solutions-grid { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: 1fr; }

    .section { padding: var(--space-6) 0; }

    .cookie-buttons { flex-direction: column; align-items: stretch; }
    .cookie-buttons .btn { width: 100%; }
}

@media (max-width: 480px) {
    .nav-menu { gap: 0.25rem; }
}

/* ============================================================
   BOTÃO DE TEMA
   Um alvo só, com dois ícones trocando por CSS. Fica na navbar, que
   é escura nos dois temas — por isso as cores são as da marca.
   ============================================================ */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--color-brand-line);
    border-radius: var(--radius-sm);
    color: var(--color-brand-muted);
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast),
                background-color var(--transition-fast);
}

.theme-toggle:hover {
    color: var(--color-signal);
    border-color: var(--color-signal);
    background-color: var(--color-brand-wash);
}

.theme-toggle svg { width: 18px; height: 18px; }

/* No claro mostra a lua (o destino); no escuro, o sol. */
.theme-toggle .icone-sol { display: none; }
.theme-toggle .icone-lua { display: block; }

:root[data-theme='dark'] .theme-toggle .icone-sol { display: block; }
:root[data-theme='dark'] .theme-toggle .icone-lua { display: none; }

/* Na largura de celular o botão fica antes do hambúrguer, não empurrando */
@media (max-width: 768px) {
    .theme-toggle { margin-left: auto; margin-right: 0.25rem; }
}

/* ============================================================
   ALVOS DE TOQUE
   ============================================================
   No dedo, um link de 22px de altura é difícil de acertar, e no
   rodapé eles ficam empilhados a poucos pixels uns dos outros --
   o erro cai no vizinho. A WCAG 2.5.8 pede 24px; as diretrizes da
   Apple e do Material pedem 44. O ganho vem de padding, então a
   área cresce sem que o texto mude de tamanho ou de posição.

   Só sob ponteiro grosseiro: no mouse, 22px já é preciso, e abrir
   o rodapé no desktop só afastaria o conteúdo à toa.
   ============================================================ */

@media (pointer: coarse) {
    /* 16px não é escolha estética: abaixo disso o Safari no iOS dá zoom
       na página ao focar o campo, e o usuário fica preso numa tela
       ampliada até pinçar de volta. É o limiar exato do comportamento. */
    .form-field input,
    .form-field select,
    .form-field textarea,
    /* precisa repetir a especificidade da regra de arquivo, senão ela
       vence e o nome do PNG escolhido fica em 13px */
    .form-field input[type="file"] {
        font-size: 16px;
    }

    .footer-section li { margin-bottom: 0.125rem; }

    .footer-section a,
    .solution-card-link {
        padding: 0.5rem 0;
        min-height: 44px;
    }

    /* O item ocupa a linha inteira: a área clicável acompanha a
       largura da coluna, em vez de parar no fim da palavra. */
    .footer-section a { width: 100%; }

    .breadcrumb a,
    .nav-menu > li > a,
    .submenu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .social-icons a {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================================
   TEMA ESCURO — a sala de operações
   Só os tokens-fonte são sobrescritos: o resto do arquivo lê via
   var() e cascateia sozinho. O atributo data-theme é fixado antes
   da pintura por JS/tema.js, então não há piscar.
   ============================================================ */

:root[data-theme='dark'] {
    color-scheme: dark;

    /* Sombra no escuro precisa ser mais funda e mais opaca. A do tema
       claro e um cinza-azulado a 7%: sobre grafite ela simplesmente nao
       aparece, porque sombra so existe como diferenca em relacao ao que
       esta embaixo. Aqui vai quase preto, com o dobro da opacidade.
       A ambar nao muda -- ela e luz, nao sombra, e luz funciona igual
       nos dois. */
    --sombra-1: 0 1px 2px oklch(0 0 0 / 34%),
                0 2px 8px oklch(0 0 0 / 30%);
    --sombra-2: 0 2px 4px oklch(0 0 0 / 38%),
                0 10px 28px oklch(0 0 0 / 42%);

    --color-surface-base: oklch(0.145 0.006 240);
    --color-surface-sunken: oklch(0.115 0.006 240);
    --color-surface-raised: oklch(0.19 0.007 240);
    --color-surface-overlay: oklch(0.235 0.008 240);

    --color-line-subtle: oklch(0.92 0.005 240 / 6%);
    --color-line: oklch(0.92 0.005 240 / 13%);
    --color-line-strong: oklch(0.92 0.005 240 / 24%);
    --color-line-controle: oklch(0.92 0.005 240 / 45%);

    --color-ink: oklch(0.90 0.006 240);
    --color-ink-muted: oklch(0.63 0.008 240);
    --color-ink-faint: oklch(0.49 0.008 240);

    --color-brand: oklch(0.09 0.006 240);
    --color-brand-strong: oklch(0.06 0.005 240);
    --color-brand-ink: oklch(0.93 0.012 85);
    --color-brand-line: oklch(0.20 0.007 240);

    /* Invertidas: sobre barra escura o estado se marca clareando */
    --color-brand-wash: oklch(1 0 0 / 6%);
    --color-brand-wash-strong: oklch(1 0 0 / 8%);
    --color-brand-edge: oklch(1 0 0 / 24%);

    --filtro-logo-hover: brightness(0) invert(1);

    --color-signal: oklch(0.80 0.165 75);
    --color-signal-strong: oklch(0.75 0.17 68);
    --color-signal-ink: oklch(0.15 0.02 70);
    /* Sobre fundo escuro o preenchimento âmbar já se separa sozinho:
       a borda acompanha a cor em vez de contornar. */
    --color-signal-edge: oklch(0.80 0.165 75);

    --color-ok: oklch(0.74 0.15 152);
    --color-warn: oklch(0.72 0.14 55);
    --color-bad: oklch(0.65 0.19 25);

    /* Divisões clareadas: os tons do claro afundam no fundo escuro */
    --color-infranet: oklch(0.72 0.15 150);
    --color-energia: oklch(0.70 0.14 250);
    --color-solar: oklch(0.78 0.14 68);

    /* Clareado em relação ao e-commerce (0.56): aqui esse token pinta
       rótulo de 12px sobre a barra escura, e 0.56 dava 4,42:1. */
    --color-brand-muted: oklch(0.64 0.02 78);

    /* No escuro o rebaixamento se inverte: o âmbar cheio é o que lê */
    --color-link: oklch(0.80 0.165 75);
}

/* A luz vem de cima: no escuro o fio da aresta é claro e discreto */
:root[data-theme='dark'] .edge-lit {
    box-shadow: inset 0 1px 0 0 oklch(0.92 0.02 90 / 6%);
}

/* O hero nao tem mais variante por tema: a foto entra inteira nos dois,
   com o mesmo veu e o mesmo texto claro. Antes o escuro reduzia a foto a
   uma textura de 10% em cinza; agora ela e o fundo, e o resultado ja e
   escuro por natureza. Um degrau a menos para manter em sincronia. */
:root[data-theme='dark'] .hero { border-bottom-color: transparent; }

/* ---- Pastilhas de parceiro seguem CLARAS no tema escuro ----------
   As artes são coloridas para fundo branco. Escurecer a pastilha
   apagaria as marcas de tinta escura — Prysmian e Frahm sumiriam. */
:root[data-theme='dark'] .partner-slide {
    /* background-color, nunca a abreviada: foi a abreviada trocando cor
       por degrade que causou o pisca-pisca no hover. Aqui nao ha troca,
       mas a armadilha fica armada para a proxima edicao. */
    background-color: oklch(0.97 0.002 240);
    border-color: oklch(0.92 0.005 240 / 20%);
}

/* Nao ha mais variante de hover por tema: a camada de cor comeca em
   branco transparente e compoe sobre a pastilha, que e clara nos dois
   temas. Um degrau a menos para manter em sincronia. */

/* ---- Bancos: o submenu escurece, então o texto precisa clarear ----
   O #B35200 do Itaú foi escolhido para fundo quase-branco; sobre o
   escuro ele afunda. Aqui vale o laranja da marca, que no escuro
   passa com folga. */
:root[data-theme='dark'] .submenu--bancos {
    --itau-texto: #FF9433;
    --bradesco: #FF6B85;
}

/* Aviso jurídico: o fundo âmbar translúcido some no escuro */
:root[data-theme='dark'] .legal-notice {
    background: color-mix(in srgb, var(--color-warn) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-warn) 40%, transparent);
}

/* ============================================================
   UTILITÁRIOS
   ============================================================
   Estas classes existem para tirar todo `style=` do HTML. Sem
   nenhum estilo inline, a CSP pode dispensar 'unsafe-inline' em
   style-src — que é a diretiva que, se algum dia entrar conteúdo
   de terceiro na página, separa um defeito de uma invasão.
   ============================================================ */

/* Faixa de tom alternado entre seções */
.section--alt { background-color: var(--color-surface-sunken); }

/* Escada de atraso da revelação ao rolar */
.reveal--60  { --reveal-delay: 60ms; }
.reveal--80  { --reveal-delay: 80ms; }
.reveal--100 { --reveal-delay: 100ms; }
.reveal--120 { --reveal-delay: 120ms; }
.reveal--160 { --reveal-delay: 160ms; }
.reveal--180 { --reveal-delay: 180ms; }
.reveal--200 { --reveal-delay: 200ms; }

/* Centralização e medidas de coluna */
.center-x { justify-content: center; }
.col-720 { max-width: 720px; margin-left: auto; margin-right: auto; }
.col-640 { max-width: 640px; margin-left: auto; margin-right: auto; }
.col-640-top { max-width: 640px; margin: 2rem auto 0; }
.mt-3 { margin-top: 3rem; }

.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-4 { margin-top: 4rem; }
.mb-4 { margin-bottom: 4rem; }

/* Atalho para o conteudo.

   Fica fora da tela ate receber foco, e nao escondido com display:none --
   o que esta em display:none nao entra na ordem do Tab, e um atalho que o
   teclado nao alcanca nao serve para nada.

   Ao receber foco ele desce para dentro da area visivel. E a primeira
   parada do Tab em qualquer pagina, antes do menu inteiro. */
.pular-conteudo {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 200;
    transform: translate(-50%, -120%);
    padding: 0.75rem 1.25rem;
    background-color: var(--color-signal);
    color: var(--color-signal-ink);
    border: 1px solid var(--color-signal-edge);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--sombra-2);
    transition: transform var(--transition-fast);
}

.pular-conteudo:focus {
    transform: translate(-50%, 0);
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

/* O main recebe foco pelo atalho, mas nao deve mostrar contorno por isso:
   quem chegou ali veio de um clique de teclado consciente, e o anel em
   volta do conteudo inteiro so polui. */
#conteudo:focus {
    outline: none;
}

/* Campo isca contra robo.

   Fora da tela, e nao display:none: robo de spam bom ja ignora o que esta
   com display:none ou hidden. Posicionado longe, ele continua existindo
   para quem le o HTML -- que e justamente quem se quer pegar.

   aria-hidden e tabindex=-1 no HTML tiram o campo do leitor de tela e do
   caminho do teclado, para nao atrapalhar quem preenche de verdade. */
.campo-isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================
   CURSOR
   ============================================================
   Duas formas, uma para cada estado, no vocabulario do site:

     seta   grafite com halo claro   -- repouso
     mao    ambar com contorno ink   -- o que se clica

   O ambar e a mesma cor do botao primario. Nao e enfeite: e a unica
   cor do site reservada a acao, entao o cursor passa a dizer o mesmo
   que o botao ja dizia. O halo claro em volta da seta existe porque
   ela precisa aparecer tambem sobre a foto escura do hero -- grafite
   sobre grafite sumiria.

   POR QUE A MAO CONTINUA MAO
   O dedo apontando e um sinal aprendido: substituir por um ponto ou
   por outra seta economiza desenho e cobra do visitante uma leitura
   nova. A forma foi mantida; so a cor mudou.

   O QUE NAO FOI TROCADO, DE PROPOSITO
   - campo de texto segue com I-beam: e ele que diz "da para digitar"
   - desabilitado segue com not-allowed
   - so vale sob ponteiro fino: em toque nao existe cursor

   CUSTO QUE VOCE DEVE SABER
   Cursor personalizado NAO acompanha o tamanho de cursor do sistema
   operacional. Quem aumenta o cursor no Windows por dificuldade de
   enxergar perde esse ajuste aqui dentro. Foi por isso que ficou tudo
   num bloco so: apagar esta secao inteira devolve o cursor do sistema,
   sem sobra em lugar nenhum.

   As imagens sao PNG de 16px com versao 2x (32px) para tela retina.
   Metade do tamanho anterior, a pedido: um cursor de 32px fica maior
   que a seta padrao do Windows e chamava atencao demais. O
   desenho original em SVG esta em _servidor/cursor-fontes/, fora do
   pacote de publicacao.
   ============================================================ */

@media (pointer: fine) {

    /* A primeira linha e a que todo navegador entende. A segunda, com
       image-set, so e lida por quem a suporta -- e quem nao suporta
       simplesmente descarta a declaracao e fica com a de cima. Escritas
       por extenso, e nao via var(), porque um var() invalido nao cai
       para a declaracao anterior: ele zera a propriedade. */
    html {
        cursor: url('../IMG/cursor/seta.png?v=20260917b') 2 1, auto;
        cursor: image-set(url('../IMG/cursor/seta.png?v=20260917b') 1x,
                          url('../IMG/cursor/seta-2x.png?v=20260917b') 2x) 2 1, auto;
    }

    /* O ponto quente e a ponta do dedo, nao o canto da imagem. */
    a[href],
    button,
    summary,
    select,
    label[for],
    [role='button'],
    .btn,
    .carousel-btn,
    .theme-toggle,
    .nav-toggle,
    input[type='submit'],
    input[type='button'],
    input[type='checkbox'],
    input[type='radio'],
    input[type='file'] {
        cursor: url('../IMG/cursor/mao.png?v=20260917b') 7 1, pointer;
        cursor: image-set(url('../IMG/cursor/mao.png?v=20260917b') 1x,
                          url('../IMG/cursor/mao-2x.png?v=20260917b') 2x) 7 1, pointer;
    }

    /* cursor e herdado: sem isto a seta do html desceria para dentro do
       campo e apagaria o I-beam que o navegador poe ali. */
    input[type='text'],
    input[type='email'],
    input[type='tel'],
    input[type='url'],
    input[type='search'],
    input[type='password'],
    input[type='number'],
    input[type='date'],
    textarea {
        cursor: text;
    }

    /* Desabilitado vence tudo: a mao prometeria um clique que nao vai
       acontecer. */
    :disabled,
    [aria-disabled='true'] {
        cursor: not-allowed;
    }
}