/* ==========================================================================
   PERCS — Percebe.Empresas
   Site institucional e área do cliente. Mobile first.
   Marca: Azul #3372B2 | Dourado #DEB15C | Branco #FFFFFF
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap');

@font-face {
    font-family: 'Gilroy';
    src: local('Gilroy Bold'), local('Gilroy-Bold'),
         url('/fonts/gilroy/Gilroy-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: local('Gilroy ExtraBold'), local('Gilroy-ExtraBold'),
         url('/fonts/gilroy/Gilroy-ExtraBold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Marca */
    --pc-azul: #3372B2;
    --pc-azul-escuro: #2A5D93;
    --pc-azul-profundo: #113254;
    --pc-azul-noite: #0B2236;
    --pc-azul-claro: #E8F0F9;
    --pc-azul-vidro: rgba(51, 114, 178, 0.08);

    /* Fundo das superfícies azuis (cabeçalho, hero, topo, CTA, rodapé) */
    --pc-azul-fundo: #3372B2;
    --pc-azul-fundo-2: #2A5D93;

    --pc-dourado: #DEB15C;
    --pc-dourado-escuro: #C4954A;
    --pc-dourado-claro: #F3E3C2;
    --pc-dourado-vidro: rgba(222, 177, 92, 0.14);

    --pc-branco: #FFFFFF;

    /* Neutros com leve viés azul */
    --pc-nevoa: #F6F8FB;
    --pc-nevoa-2: #EDF1F7;
    --pc-borda: #DDE4EE;
    --pc-borda-forte: #C6D2E2;
    --pc-texto: #14283C;
    --pc-texto-medio: #46586C;
    --pc-texto-suave: #6E7F92;

    /* Semânticos */
    --pc-ok: #1F9D63;
    --pc-ok-fundo: #E6F5EE;
    --pc-alerta: #D08A16;
    --pc-alerta-fundo: #FCF3E1;
    --pc-erro: #C7423C;
    --pc-erro-fundo: #FBEBEA;
    --pc-info-fundo: #E8F0F9;

    /* Tipografia */
    --pc-fonte-marca: 'Gilroy', 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    --pc-fonte: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --pc-t-display: clamp(2rem, 1.35rem + 3.1vw, 3.75rem);
    --pc-t-h1: clamp(1.75rem, 1.3rem + 2.1vw, 2.85rem);
    --pc-t-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    --pc-t-h3: clamp(1.15rem, 1.03rem + 0.55vw, 1.4rem);
    --pc-t-corpo: clamp(0.975rem, 0.94rem + 0.16vw, 1.0625rem);
    --pc-t-pequeno: 0.875rem;
    --pc-t-micro: 0.75rem;

    /* Espaço */
    --pc-secao: clamp(3.5rem, 2.4rem + 5vw, 6.5rem);
    --pc-gutter: clamp(1.15rem, 0.7rem + 2vw, 2rem);
    --pc-max: 1200px;
    --pc-max-texto: 68ch;

    /* Forma */
    --pc-r-sm: 8px;
    --pc-r: 14px;
    --pc-r-lg: 22px;
    --pc-r-pill: 999px;

    --pc-sombra-sm: 0 1px 2px rgba(17, 50, 84, 0.06), 0 2px 6px rgba(17, 50, 84, 0.05);
    --pc-sombra: 0 4px 12px rgba(17, 50, 84, 0.07), 0 12px 32px rgba(17, 50, 84, 0.07);
    --pc-sombra-lg: 0 18px 50px rgba(17, 50, 84, 0.16);

    /* Cabeçalho cresce com a viewport; a logo é derivada desta altura para que
       o painel do menu (fixed, ancorado no token) nunca desalinhe. */
    --pc-header-h: 64px;
}
@media (min-width: 600px)  { :root { --pc-header-h: 76px; } }
@media (min-width: 1024px) { :root { --pc-header-h: 88px; } }

/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--pc-header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body.pc-body {
    margin: 0;
    font-family: var(--pc-fonte);
    font-size: var(--pc-t-corpo);
    line-height: 1.65;
    color: var(--pc-texto);
    background: var(--pc-branco);
    -webkit-font-smoothing: antialiased;
}
body.pc-menu-aberto { overflow: hidden; }

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

h1, h2, h3, h4 {
    font-family: var(--pc-fonte-marca);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--pc-azul-profundo);
    margin: 0 0 0.6rem;
}
h1 { font-size: var(--pc-t-h1); }
h2 { font-size: var(--pc-t-h2); }
h3 { font-size: var(--pc-t-h3); }
p { margin: 0 0 1rem; }

a { color: var(--pc-azul); text-decoration: none; }
a:hover { color: var(--pc-azul-escuro); }

:focus-visible { outline: 2px solid var(--pc-azul); outline-offset: 2px; }

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

.pc-pular {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--pc-branco); color: var(--pc-azul);
    padding: 0.75rem 1.25rem; border-radius: 0 0 var(--pc-r-sm) 0;
    font-weight: 600;
}
.pc-pular:focus { left: 0; }

.pc-container {
    width: 100%;
    max-width: var(--pc-max);
    margin-inline: auto;
    padding-inline: var(--pc-gutter);
}
.pc-container--estreito { max-width: 780px; }

/* Ocultos visualmente, presentes para leitores de tela */
.pc-oculto,
.pc-visualmente-oculto {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Utilitários */
.pc-mt-0 { margin-top: 0; }
.pc-mt-1 { margin-top: 0.5rem; }
.pc-mt-2 { margin-top: 1.5rem; }
.pc-mt-3 { margin-top: 2.5rem; }
.pc-mb-2 { margin-bottom: 1.5rem; }
.pc-texto-suave { color: var(--pc-texto-suave); }
.pc-texto-medio { color: var(--pc-texto-medio); }
.pc-pequeno { font-size: var(--pc-t-pequeno); }
.pc-dourado { color: var(--pc-dourado); }

/* Ícones */
.pc-icone {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    flex: none;
}
.pc-icone--sm { width: 18px; height: 18px; }
.pc-icone--lg { width: 28px; height: 28px; }

/* preenchimento sólido: o traço claro sobre fundo cheio contrasta como nos
   cartões do carrossel do topo — o véu translúcido apagava o ícone */
.pc-icone-caixa {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border-radius: var(--pc-r);
    margin-bottom: 1rem;
    background: var(--pc-azul);
    color: var(--pc-branco);
    box-shadow: 0 6px 14px rgba(51, 114, 178, 0.28);
    transition: background .25s ease, color .25s ease;
}
.pc-icone-caixa--dourado {
    background: var(--pc-dourado);
    color: #33270C;
    box-shadow: 0 6px 14px rgba(222, 177, 92, 0.38);
}

/* Seções */
.pc-secao { padding-block: var(--pc-secao); }
.pc-secao--compacta { padding-block: calc(var(--pc-secao) * 0.62); }
.pc-secao--nevoa { background: var(--pc-nevoa); }
.pc-secao--escura {
    background: var(--pc-azul-fundo);
    background-image:
        radial-gradient(1000px 460px at 12% -10%, rgba(255, 255, 255, 0.16), transparent 62%),
        radial-gradient(760px 380px at 92% 8%, rgba(222, 177, 92, 0.26), transparent 60%);
    color: rgba(255, 255, 255, 0.92);
}
.pc-secao--escura h2,
.pc-secao--escura h3,
.pc-secao--escura h4 { color: var(--pc-branco); }

.pc-cabecalho { max-width: var(--pc-max-texto); margin-bottom: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }
.pc-cabecalho--centro { margin-inline: auto; text-align: center; }
.pc-cabecalho p { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); color: var(--pc-texto-medio); }

.pc-etiqueta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: var(--pc-t-micro); font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--pc-azul);
    background: var(--pc-azul-vidro);
    padding: 0.35rem 0.75rem;
    border-radius: var(--pc-r-pill);
    margin-bottom: 0.9rem;
}
.pc-etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-dourado); }

/* Grades */
.pc-grade { display: grid; gap: 1.5rem; }
@media (min-width: 640px) {
    .pc-grade--2, .pc-grade--3, .pc-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .pc-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pc-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Cartões */
.pc-cartao {
    display: flex; flex-direction: column;
    padding: 1.75rem;
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r-lg);
    box-shadow: var(--pc-sombra-sm);
}
.pc-cartao p { color: var(--pc-texto-medio); font-size: 0.9375rem; }
.pc-cartao--nevoa { background: var(--pc-nevoa); }
.pc-cartao__rodape { margin-top: auto; padding-top: 1.25rem; }
.pc-secao--escura .pc-cartao {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
}
.pc-secao--escura .pc-cartao p { color: rgba(255, 255, 255, 0.82); }

.pc-cartao--link, .pc-cartao--acao {
    color: var(--pc-texto);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pc-cartao--link:hover, .pc-cartao--acao:hover {
    transform: translateY(-4px);
    border-color: var(--pc-azul);
    box-shadow: var(--pc-sombra);
    color: var(--pc-texto);
}
.pc-cartao--acao:hover .pc-icone-caixa { background: var(--pc-azul-escuro); color: var(--pc-branco); }
.pc-cartao--acao h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }

/* Botões */
.pc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    min-height: 46px;
    /* padrão do sistema: todo botão carrega a borda azul da marca; as variantes
       sobre fundo escuro/dourado sobrescrevem com a cor própria */
    border: 1px solid var(--pc-azul);
    border-radius: var(--pc-r-pill);
    font-weight: 600; font-size: 0.9375rem;
    cursor: pointer;
    text-align: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease,
                transform .2s ease, box-shadow .2s ease;
}
.pc-btn:hover { transform: translateY(-1px); }
.pc-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.pc-btn--bloco { width: 100%; }

.pc-btn--primario { background: var(--pc-azul); color: var(--pc-branco); box-shadow: 0 8px 20px rgba(51, 114, 178, 0.28); }
.pc-btn--primario:hover { background: var(--pc-azul-escuro); color: #fff; box-shadow: 0 12px 26px rgba(51, 114, 178, 0.34); }

.pc-btn--dourado { background: var(--pc-dourado); color: #33270C; }
.pc-btn--dourado:hover { background: var(--pc-dourado); color: #33270C; box-shadow: 0 12px 26px rgba(222, 177, 92, 0.45); }

.pc-btn--secundario { background: var(--pc-branco); color: var(--pc-azul); border-color: var(--pc-azul); }
.pc-btn--secundario:hover { border-color: var(--pc-azul); background: var(--pc-azul-claro); }

.pc-btn--contorno-claro { background: transparent; color: var(--pc-branco); border-color: rgba(255, 255, 255, 0.4); }
.pc-btn--contorno-claro:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

.pc-btn--contorno-dourado { background: transparent; color: var(--pc-dourado); border-color: var(--pc-dourado); }
.pc-btn--contorno-dourado:hover { background: var(--pc-dourado); color: #33270C; border-color: var(--pc-dourado); }

.pc-btn--texto { background: transparent; color: var(--pc-azul); }
.pc-btn--texto:hover { color: var(--pc-azul-escuro); background: var(--pc-azul-claro); }

.pc-acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pc-acoes--centro { justify-content: center; }

.pc-link-seta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-weight: 600; font-size: 0.9375rem;
    color: var(--pc-azul);
}
.pc-link-seta .pc-icone { transition: transform .18s ease; }
.pc-link-seta:hover .pc-icone { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   3. Cabeçalho e navegação
   -------------------------------------------------------------------------- */
.pc-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--pc-azul-fundo);
    background-image: linear-gradient(180deg, var(--pc-azul-fundo) 0%, var(--pc-azul-fundo-2) 100%);
    border-bottom: 1px solid rgba(222, 177, 92, 0.45);
    box-shadow: 0 6px 22px rgba(17, 50, 84, 0.18);
}
.pc-header__interno {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    min-height: var(--pc-header-h);
}

/* Marca — a logo é branca + dourada; cabeçalho e rodapé são azuis, então ela
   é aplicada direto sobre o fundo, sem placa nem halo. */
.pc-marca {
    display: inline-flex; align-items: center;
    min-width: 0;
    background: none;
    transition: transform .25s ease;
}
.pc-marca:hover { transform: translateY(-1px); }
.pc-marca__logo {
    display: block;
    height: calc(var(--pc-header-h) - 18px);
    width: auto;
    max-width: 46vw;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(17, 50, 84, 0.28));
    transition: filter .25s ease;
}
.pc-marca:hover .pc-marca__logo { filter: drop-shadow(0 8px 22px rgba(222, 177, 92, 0.42)); }

/* Variante horizontal (só no cabeçalho): mais baixa e larga que a vertical.
   O padding-block dá respiro para a logo não encostar nos limites do header. */
.pc-marca--horizontal { padding-block: 8px; }
.pc-marca--horizontal .pc-marca__logo {
    height: calc(var(--pc-header-h) - 26px);
    max-width: min(68vw, 390px);
}
@media (max-width: 480px) {
    .pc-marca--horizontal .pc-marca__logo { height: 34px; max-width: 62vw; }
}

.pc-marca--clara .pc-marca__logo {
    height: clamp(120px, 10vw, 156px);
    filter: drop-shadow(0 6px 18px rgba(222, 177, 92, 0.22));
}
.pc-marca--clara:hover .pc-marca__logo { filter: drop-shadow(0 8px 24px rgba(222, 177, 92, 0.42)); }
@media (max-width: 480px) { .pc-marca--clara .pc-marca__logo { height: 104px; } }

/* Sobre o azul do cabeçalho, o botão principal usa o dourado da marca */
.pc-header .pc-btn--primario { background: var(--pc-dourado); color: #33270C; box-shadow: 0 8px 20px rgba(17, 50, 84, 0.22); }
.pc-header .pc-btn--primario:hover { background: var(--pc-dourado-claro); color: #33270C; }

.pc-hamburguer {
    display: inline-grid; place-items: center;
    flex: none;
    width: 44px; height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--pc-r-sm);
    background: rgba(255, 255, 255, 0.12);
    color: var(--pc-branco);
    cursor: pointer;
}
.pc-hamburguer__barras {
    display: block; width: 20px; height: 2px; position: relative;
    background: currentColor; border-radius: 2px; transition: background .2s ease;
}
.pc-hamburguer__barras::before,
.pc-hamburguer__barras::after {
    content: ''; position: absolute; left: 0; width: 20px; height: 2px;
    background: currentColor; border-radius: 2px; transition: transform .22s ease, top .22s ease;
}
.pc-hamburguer__barras::before { top: -6px; }
.pc-hamburguer__barras::after { top: 6px; }
.pc-hamburguer[aria-expanded="true"] .pc-hamburguer__barras { background: transparent; }
.pc-hamburguer[aria-expanded="true"] .pc-hamburguer__barras::before { top: 0; transform: rotate(45deg); }
.pc-hamburguer[aria-expanded="true"] .pc-hamburguer__barras::after { top: 0; transform: rotate(-45deg); }

/* Navegação — mobile: painel deslizante */
.pc-nav {
    position: fixed;
    inset: var(--pc-header-h) 0 0 0;
    z-index: 99;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--pc-azul-fundo);
    background-image: linear-gradient(180deg, var(--pc-azul-fundo) 0%, var(--pc-azul-fundo-2) 100%);
    padding: 1.25rem var(--pc-gutter) 2.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s ease;
    visibility: hidden;
}
.pc-nav[data-aberto="true"] { transform: translateX(0); visibility: visible; }

.pc-nav__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pc-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.pc-nav__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.95rem 0.25rem;
    font-weight: 600; font-size: 1.0625rem;
    color: var(--pc-branco);
    width: 100%;
    background: none; border: 0; cursor: pointer;
    font-family: var(--pc-fonte);
    text-align: left;
}
.pc-nav__link[aria-current="page"] { color: var(--pc-dourado); }
.pc-nav__link .pc-icone { transition: transform .2s ease; color: rgba(255, 255, 255, 0.7); }
.pc-nav__link[aria-expanded="true"] .pc-icone { transform: rotate(180deg); }

.pc-submenu { list-style: none; margin: 0; padding: 0 0 0.9rem; display: none; }
.pc-submenu[data-aberto="true"] { display: block; }
.pc-submenu a {
    display: block;
    padding: 0.6rem 0.25rem 0.6rem 0.9rem;
    border-left: 2px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9375rem;
}
.pc-submenu a:hover { color: var(--pc-dourado); border-left-color: var(--pc-dourado); }
.pc-submenu strong { display: block; color: var(--pc-branco); font-weight: 600; }
.pc-submenu span { font-size: var(--pc-t-pequeno); color: rgba(255, 255, 255, 0.7); }

.pc-nav__acoes { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }

/* Navegação — desktop */
@media (min-width: 1024px) {
    .pc-hamburguer { display: none; }
    .pc-nav {
        position: static; inset: auto;
        display: flex; align-items: center; gap: 1.5rem;
        transform: none; visibility: visible;
        padding: 0; overflow: visible;
        background: none; background-image: none;
        flex: 1; justify-content: flex-end;
        /* respiro entre a logo e o primeiro item do menu */
        margin-left: clamp(1.5rem, 3vw, 3rem);
    }
    .pc-nav__lista { flex-direction: row; align-items: center; gap: 0.25rem; }
    .pc-nav__item { border: 0; position: relative; }
    .pc-nav__link {
        padding: 0.5rem 0.7rem;
        font-size: 0.9375rem;
        border-radius: var(--pc-r-sm);
        gap: 0.3rem;
        white-space: nowrap;
        color: var(--pc-branco);
    }
    .pc-nav__link:hover { color: var(--pc-branco); background: rgba(255, 255, 255, 0.16); }
    .pc-nav__link[aria-current="page"] { color: var(--pc-dourado); background: rgba(255, 255, 255, 0.14); }

    /* o dropdown volta a ser um painel claro */
    .pc-submenu {
        position: absolute; top: calc(100% + 10px); left: 0;
        min-width: 310px;
        background: var(--pc-branco);
        border: 1px solid var(--pc-borda);
        border-radius: var(--pc-r);
        box-shadow: var(--pc-sombra-lg);
        padding: 0.5rem;
        display: block;
        opacity: 0; visibility: hidden; transform: translateY(-6px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }
    .pc-submenu[data-aberto="true"],
    .pc-nav__item:hover .pc-submenu,
    .pc-nav__item:focus-within .pc-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
    .pc-submenu a {
        border-left: 0; border-radius: var(--pc-r-sm);
        padding: 0.65rem 0.8rem;
        color: var(--pc-texto-medio);
    }
    .pc-submenu a:hover { background: var(--pc-nevoa); color: var(--pc-azul); }
    .pc-submenu strong { color: var(--pc-texto); }
    .pc-submenu span { color: var(--pc-texto-suave); }

    .pc-nav__acoes { flex-direction: row; margin-top: 0; margin-left: 0.75rem; }
    .pc-nav__acoes .pc-btn {
        padding: 0.6rem 1rem;
        min-height: 44px;
        font-size: 0.875rem;
        white-space: nowrap;
    }
}

/* Sub-navegação de módulo */
.pc-subnav { background: var(--pc-branco); border-bottom: 1px solid var(--pc-borda); box-shadow: var(--pc-sombra-sm); }
.pc-subnav .pc-container { display: flex; gap: 0.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pc-subnav a {
    padding: 1rem 0.9rem;
    white-space: nowrap;
    font-size: 0.9375rem; font-weight: 600;
    color: var(--pc-texto-medio);
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.pc-subnav a:hover { color: var(--pc-azul); }
.pc-subnav a[aria-current="page"] { color: var(--pc-azul); border-bottom-color: var(--pc-azul); }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.pc-hero {
    position: relative;
    background: var(--pc-azul-fundo);
    background-image:
        radial-gradient(1100px 560px at 8% -12%, rgba(255, 255, 255, 0.18), transparent 60%),
        radial-gradient(760px 420px at 96% 4%, rgba(222, 177, 92, 0.30), transparent 62%),
        linear-gradient(180deg, var(--pc-azul-fundo) 0%, var(--pc-azul-fundo-2) 100%);
    color: rgba(255, 255, 255, 0.94);
    overflow: hidden;
    padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(3.5rem, 2.4rem + 5vw, 6.5rem);
}
.pc-hero::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
    pointer-events: none;
}
.pc-hero__interno { position: relative; z-index: 1; }
/* o cartão de soluções acompanha a altura da coluna de texto, alinhando o topo
   com a etiqueta "Ecossistema de soluções empresariais" */
.pc-hero__grade { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem); align-items: stretch; }
@media (min-width: 1024px) { .pc-hero__grade { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } }

/* a coluna de texto distribui a folga entre os blocos para terminar na mesma
   linha de base do cartão de soluções, em vez de sobrar espaço no fim */
.pc-hero__coluna {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(1rem, 0.6rem + 1.2vw, 1.6rem);
    /* serve de referência para o título se dimensionar pela largura da coluna */
    container-type: inline-size;
}
.pc-hero__coluna > .pc-etiqueta { align-self: flex-start; }
/* a coluna é esticada pela grade inteira, que inclui as setas e os pontos
   abaixo do cartão; este recuo faz o texto terminar na base da imagem */
@media (min-width: 1024px) {
    .pc-hero__coluna { padding-bottom: var(--pc-carrossel-controles-h); }
}
/* o gap comanda o ritmo aqui, então zera as margens próprias dos blocos
   (especificidade dupla para vencer .pc-hero__titulo e afins, definidos abaixo) */
.pc-hero .pc-hero__coluna > * { margin: 0; }

.pc-hero .pc-etiqueta { color: var(--pc-dourado-claro); background: var(--pc-dourado-vidro); }
.pc-hero__titulo {
    /* um degrau abaixo do --pc-t-display para o título caber em menos linhas */
    font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
    color: var(--pc-branco);
    margin-bottom: 1.15rem;
}
/* cada trecho do título ocupa a própria linha: branco / dourado / branco */
.pc-hero__titulo > span, .pc-hero__titulo > em { display: block; }
/* na versão de duas colunas a linha dourada é a mais longa (~15,4em); medir a
   fonte pela largura da coluna garante que ela caiba numa linha só */
@media (min-width: 1024px) {
    .pc-hero__titulo { font-size: min(2.6rem, 6.1cqi); }
    /* a etiqueta acompanha a mesma referência para fechar na largura da
       primeira linha do título; medidas em em para escalarem juntas */
    .pc-hero__coluna > .pc-etiqueta {
        font-size: min(0.8rem, 1.85cqi);
        letter-spacing: 0.08em;
        gap: 0.35em;
        padding: 0.5em 0.9em;
    }
    .pc-hero__coluna > .pc-etiqueta::before { width: 0.5em; height: 0.5em; }
}
.pc-hero__titulo strong, .pc-hero__titulo em { color: var(--pc-dourado); font-style: normal; }
.pc-hero__texto {
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 56ch;
    margin-bottom: 1.75rem;
}
.pc-hero__slogan {
    position: relative;
    max-width: 52ch;
    margin: -0.9rem 0 1.75rem;
    padding-left: 0.95rem;
    border-left: 3px solid var(--pc-dourado);
    font-family: var(--pc-fonte-marca);
    font-size: clamp(0.975rem, 0.92rem + 0.3vw, 1.125rem);
    font-weight: 600;
    line-height: 1.45;
    color: var(--pc-dourado-claro);
}
.pc-hero__nota {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: var(--pc-t-pequeno);
    color: rgba(255, 255, 255, 0.78);
}
.pc-hero .pc-acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* no hero cada botão ajusta ao próprio texto e nunca quebra em duas linhas */
.pc-hero .pc-acoes .pc-btn {
    width: auto;
    white-space: nowrap;
    padding: 0.7rem 1.15rem;
    font-size: 0.9rem;
}
@media (max-width: 400px) {
    .pc-hero .pc-acoes .pc-btn { width: 100%; }
}

/* Carrossel de soluções do hero */
.pc-carrossel { position: relative; display: flex; flex-direction: column; }
.pc-carrossel__palco { position: relative; display: grid; flex: 1; min-height: 0; }

/* cada solução carrega o próprio par de cores; azul é o padrão */
.pc-carrossel__cartao {
    --pc-c-forte: #2A5D93;
    --pc-c-profundo: #0B2236;
    --pc-c-brilho: rgba(140, 195, 255, 0.34);
}
.pc-carrossel__cartao[data-cor="dourado"] {
    --pc-c-forte: #B98A34;
    --pc-c-profundo: #3A2A0D;
    --pc-c-brilho: rgba(222, 177, 92, 0.38);
}
.pc-carrossel__cartao[data-cor="branco"] {
    --pc-c-forte: #EDF1F7;
    --pc-c-profundo: #FFFFFF;
    --pc-c-brilho: rgba(51, 114, 178, 0.16);
}

.pc-carrossel__cartao {
    grid-area: 1 / 1;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* empilhado: foto atrás do conteúdo */
    min-height: 400px;
    border-radius: var(--pc-r-lg);
    background: var(--pc-c-profundo);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: var(--pc-sombra-lg);
    opacity: 0; visibility: hidden;
    transform: translateX(24px) scale(0.98);
    /* cartões opacos: o que sai some antes de o próximo entrar, senão as duas
       fotos aparecem sobrepostas durante a transição */
    transition: opacity .26s ease, transform .26s ease, visibility .26s;
}
@media (min-width: 560px) {
    .pc-carrossel__cartao {
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
        min-height: 0;
    }
}
.pc-carrossel__cartao.esta-ativo {
    opacity: 1; visibility: visible; transform: none;
    z-index: 2;
    transition: opacity .34s ease .2s, transform .34s ease .2s, visibility 0s;
}

/* a foto ocupa o cartão inteiro; o véu colorido por cima faz um degradê único
   que abre na imagem e fecha opaco onde o texto começa */
.pc-carrossel__foto {
    grid-column: 1 / -1; grid-row: 1 / -1;
    position: absolute; inset: 0;
    margin: 0;
    overflow: hidden;
    z-index: 0;
}
.pc-carrossel__foto img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
/* a foto do terceiro cartão é um skyline: enquadrada no centro, o recorte só
   mostra céu — ancorar embaixo traz os prédios para dentro do cartão */
.pc-carrossel__cartao[data-slug="solucoes-sob-demanda"] .pc-carrossel__foto img {
    object-position: center bottom;
}
.pc-carrossel__foto::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(180deg,
        rgba(42, 93, 147, 0.26) 0%,
        rgba(42, 93, 147, 0.54) 26%,
        rgba(30, 72, 118, 0.84) 46%,
        rgba(11, 34, 54, 0.92) 100%);
}
.pc-carrossel__cartao[data-cor="dourado"] .pc-carrossel__foto::after {
    background-image: linear-gradient(180deg,
        rgba(185, 138, 52, 0.28) 0%,
        rgba(185, 138, 52, 0.58) 26%,
        rgba(150, 108, 36, 0.86) 46%,
        rgba(90, 64, 20, 0.93) 100%);
}
.pc-carrossel__cartao[data-cor="branco"] .pc-carrossel__foto::after {
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.66) 26%,
        rgba(246, 248, 251, 0.92) 46%,
        rgba(255, 255, 255, 0.97) 100%);
}
@media (min-width: 560px) {
    .pc-carrossel__foto::after {
        background-image: linear-gradient(100deg,
            rgba(42, 93, 147, 0.26) 0%,
            rgba(42, 93, 147, 0.54) 26%,
            rgba(30, 72, 118, 0.84) 46%,
            rgba(11, 34, 54, 0.92) 100%);
    }
    .pc-carrossel__cartao[data-cor="dourado"] .pc-carrossel__foto::after {
        background-image: linear-gradient(100deg,
            rgba(185, 138, 52, 0.28) 0%,
            rgba(185, 138, 52, 0.58) 26%,
            rgba(150, 108, 36, 0.86) 46%,
            rgba(90, 64, 20, 0.93) 100%);
    }
    .pc-carrossel__cartao[data-cor="branco"] .pc-carrossel__foto::after {
        background-image: linear-gradient(100deg,
            rgba(255, 255, 255, 0.32) 0%,
            rgba(255, 255, 255, 0.66) 26%,
            rgba(246, 248, 251, 0.92) 46%,
            rgba(255, 255, 255, 0.97) 100%);
    }
}

/* o conteúdo fica sobre a foto com desfoque de vidro, mantendo a leitura */
.pc-carrossel__conteudo {
    position: relative; z-index: 1;
    grid-column: 1 / -1;
    align-self: end;
    display: flex; flex-direction: column;
    padding: 1.5rem;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
@media (min-width: 560px) {
    .pc-carrossel__conteudo { grid-column: 2; align-self: stretch; }
}
.pc-carrossel__brilho {
    position: absolute; top: -40%; right: -30%;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, var(--pc-c-brilho) 0%, transparent 68%);
    pointer-events: none;
    z-index: 1;
}
.pc-carrossel__topo {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.1rem;
}
.pc-carrossel__topo .pc-icone-caixa { background: rgba(255, 255, 255, 0.16); color: var(--pc-branco); margin-bottom: 0; }
/* só no cartão do hero: no carrossel de produtos o ladrilho é azul em todos */
.pc-hero .pc-carrossel__cartao[data-cor="dourado"] .pc-icone-caixa { background: rgba(222, 177, 92, 0.24); color: var(--pc-dourado-claro); }
.pc-carrossel__site { font-size: var(--pc-t-micro); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); }
.pc-carrossel__nome { color: var(--pc-branco); font-size: 1.5rem; margin: 0 0 0.3rem; }
.pc-carrossel__tagline { color: rgba(255, 255, 255, 0.86); font-size: 0.9375rem; margin: 0 0 0.9rem; }
/* a descrição preenche a altura extra do cartão sem estourar o layout */
.pc-carrossel__resumo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 1.15rem;
}
.pc-carrossel__modulos {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    list-style: none; margin: 0 0 1.4rem; padding: 0;
}
.pc-carrossel__modulos li {
    font-size: var(--pc-t-micro);
    padding: 0.3rem 0.65rem;
    border-radius: var(--pc-r-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
}
.pc-carrossel__modulos .e-contador {
    background: var(--pc-dourado-vidro);
    border-color: rgba(222, 177, 92, 0.5);
    color: var(--pc-dourado-claro);
    font-weight: 700;
}
.pc-carrossel__link {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-weight: 600; font-size: 0.9375rem;
    color: var(--pc-dourado);
}
.pc-carrossel__link .pc-icone { transition: transform .18s ease; }
.pc-carrossel__link:hover { color: var(--pc-dourado-claro); }
.pc-carrossel__link:hover .pc-icone { transform: translateX(4px); }

/* altura da faixa de controles; a coluna de texto do hero usa esta medida para
   alinhar sua base com a do cartão em vez da base do carrossel inteiro */
:root { --pc-carrossel-controles-h: calc(38px + 1.1rem); }
/* Terceiro padrão: cartão branco com tipografia azul.
   A dupla classe (.pc-hero .pc-carrossel__cartao[...]) é necessária para vencer
   o bloco de harmonização do hero, que pinta ícones e textos de branco. */
.pc-hero .pc-carrossel__cartao[data-cor="branco"] {
    border-color: rgba(17, 50, 84, 0.12);
}
.pc-hero .pc-carrossel__cartao[data-cor="branco"] .pc-carrossel__nome { color: var(--pc-azul-profundo); }
.pc-hero .pc-carrossel__cartao[data-cor="branco"] .pc-carrossel__tagline { color: var(--pc-azul); }
.pc-hero .pc-carrossel__cartao[data-cor="branco"] .pc-carrossel__resumo { color: var(--pc-texto-medio); }
.pc-hero .pc-carrossel__cartao[data-cor="branco"] .pc-carrossel__site { color: var(--pc-texto-suave); }
.pc-hero .pc-carrossel__cartao[data-cor="branco"] .pc-icone-caixa {
    background: var(--pc-azul);
    border-color: transparent;
    color: var(--pc-branco);
}
.pc-hero .pc-carrossel__cartao[data-cor="branco"] .pc-carrossel__modulos li {
    background: var(--pc-azul-vidro);
    border-color: rgba(51, 114, 178, 0.24);
    color: var(--pc-azul);
}
.pc-hero .pc-carrossel__cartao[data-cor="branco"] .pc-carrossel__modulos .e-contador {
    background: rgba(222, 177, 92, 0.20);
    border-color: rgba(222, 177, 92, 0.55);
    color: #8A6220;
}
/* o link "Conhecer..." continua dourado, mas num tom que se lê sobre branco */
.pc-hero .pc-carrossel__cartao[data-cor="branco"] .pc-carrossel__link { color: #9A6F22; }
.pc-hero .pc-carrossel__cartao[data-cor="branco"] .pc-carrossel__link:hover { color: #7A5716; }

.pc-carrossel__controles {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    margin-top: 1.1rem;
}
.pc-carrossel__seta {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--pc-branco);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.pc-carrossel__seta:hover { background: rgba(222, 177, 92, 0.28); border-color: var(--pc-dourado); transform: translateY(-1px); }
[data-carrossel-anterior] .pc-icone { transform: rotate(90deg); }
[data-carrossel-proximo] .pc-icone { transform: rotate(-90deg); }

.pc-carrossel__pontos { display: flex; align-items: center; gap: 0.5rem; }
.pc-carrossel__ponto {
    width: 9px; height: 9px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}
.pc-carrossel__ponto.esta-ativo { width: 26px; border-radius: var(--pc-r-pill); background: var(--pc-dourado); }

/* --------------------------------------------------------------------------
   Carrossel de plataformas e serviços (seção clara)
   -------------------------------------------------------------------------- */
.pc-carrossel--produtos .pc-carrossel__cartao {
    grid-template-rows: 220px auto;
    background-image: none;
    background: var(--pc-branco);
    border-color: var(--pc-borda);
    box-shadow: var(--pc-sombra);
}
@media (min-width: 760px) {
    .pc-carrossel--produtos .pc-carrossel__cartao {
        grid-template-rows: none;
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    }
}
.pc-produto__foto {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--pc-nevoa-2);
}
.pc-produto__foto img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
/* véu na cor da solução para a foto conversar com o cartão */
.pc-produto__foto::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(160deg, rgba(51, 114, 178, 0.34) 0%, rgba(11, 34, 54, 0.20) 100%);
}
.pc-produto[data-cor="dourado"] .pc-produto__foto::after {
    background-image: linear-gradient(160deg, rgba(222, 177, 92, 0.36) 0%, rgba(58, 42, 13, 0.22) 100%);
}
.pc-produto__conteudo {
    display: flex; flex-direction: column;
    padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.pc-produto__conteudo h3 { margin: 0 0 0.25rem; }
/* só a descrição; site e tagline mantêm suas próprias cores de destaque */
.pc-produto__conteudo p:not([class]) { color: var(--pc-texto-medio); font-size: 0.9375rem; }
.pc-produto__conteudo .pc-chips { margin-top: 1rem; }

/* setas e pontos precisam de contraste sobre fundo claro */
.pc-carrossel--produtos .pc-carrossel__seta {
    background: var(--pc-branco);
    border-color: var(--pc-borda-forte);
    color: var(--pc-azul);
}
.pc-carrossel--produtos .pc-carrossel__seta:hover {
    background: var(--pc-azul-claro);
    border-color: var(--pc-azul);
}
.pc-carrossel--produtos .pc-carrossel__ponto { background: var(--pc-borda-forte); }
.pc-carrossel--produtos .pc-carrossel__ponto.esta-ativo { background: var(--pc-azul); }

/* Painel ilustrativo (páginas de solução) */
.pc-painel {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--pc-r-lg);
    padding: 1.15rem;
    box-shadow: var(--pc-sombra-lg);
    backdrop-filter: blur(6px);
}
.pc-painel__topo {
    display: flex; align-items: center; gap: 0.5rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 1rem;
}
.pc-painel__ponto { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.34); }
.pc-painel__ponto:first-child { background: var(--pc-dourado); }
.pc-painel__titulo {
    margin-left: auto;
    font-size: var(--pc-t-micro); letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}
.pc-painel__linhas { display: grid; gap: 0.6rem; }
.pc-painel__linha {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--pc-r-sm);
    font-size: var(--pc-t-pequeno);
}
.pc-painel__linha strong { color: var(--pc-branco); font-weight: 600; }
.pc-painel__linha span { color: rgba(255, 255, 255, 0.78); }
.pc-painel__valor { margin-left: auto; font-family: var(--pc-fonte-marca); font-weight: 700; color: var(--pc-dourado); }
.pc-painel__bloco { display: block; }
.pc-painel__bloco strong { display: block; }

/* Indicadores */
.pc-indicadores {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}
.pc-indicador {
    padding: 1.15rem;
    border-radius: var(--pc-r);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center;
}
.pc-indicador strong {
    display: block;
    font-family: var(--pc-fonte-marca); font-weight: 800; font-size: 1.75rem;
    color: var(--pc-dourado);
}
.pc-indicador span { font-size: var(--pc-t-pequeno); color: rgba(255, 255, 255, 0.82); }
.pc-indicadores--clara .pc-indicador { background: var(--pc-branco); border-color: var(--pc-borda); }
.pc-indicadores--clara .pc-indicador strong { color: var(--pc-azul); }
.pc-indicadores--clara .pc-indicador span { color: var(--pc-texto-suave); }

/* --------------------------------------------------------------------------
   5. Topo de páginas internas
   -------------------------------------------------------------------------- */
.pc-topo {
    background: var(--pc-azul-fundo);
    background-image:
        radial-gradient(900px 420px at 10% -30%, rgba(255, 255, 255, 0.16), transparent 62%),
        radial-gradient(600px 320px at 95% 0%, rgba(222, 177, 92, 0.28), transparent 60%);
    color: rgba(255, 255, 255, 0.92);
    padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}
.pc-topo h1 { color: var(--pc-branco); max-width: 20ch; }
.pc-topo p { color: rgba(255, 255, 255, 0.9); max-width: var(--pc-max-texto); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); }

.pc-migalhas {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    font-size: var(--pc-t-pequeno);
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 1.1rem;
    list-style: none; padding: 0;
}
.pc-migalhas a { color: rgba(255, 255, 255, 0.9); }
.pc-migalhas a:hover { color: var(--pc-dourado); }
.pc-migalhas li:not(:last-child)::after { content: '/'; margin-left: 0.4rem; color: rgba(255, 255, 255, 0.4); }

/* --------------------------------------------------------------------------
   6. Soluções, setores, passos, casos
   -------------------------------------------------------------------------- */
.pc-cartao-solucao__site { font-size: var(--pc-t-micro); letter-spacing: 0.06em; color: var(--pc-texto-suave); margin: 0 0 0.25rem; }
.pc-cartao-solucao__tagline { font-weight: 600; color: var(--pc-azul); margin-bottom: 0.75rem; }
.pc-cartao-solucao[data-cor="dourado"] .pc-cartao-solucao__tagline,
.pc-produto[data-cor="dourado"] .pc-cartao-solucao__tagline { color: var(--pc-dourado-escuro); }

.pc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.pc-chip {
    font-size: var(--pc-t-micro);
    padding: 0.3rem 0.65rem;
    border-radius: var(--pc-r-pill);
    background: var(--pc-nevoa-2);
    border: 1px solid var(--pc-borda);
    color: var(--pc-texto-medio);
}
.pc-chip a { color: inherit; }
.pc-chip--azul { color: var(--pc-azul); background: var(--pc-azul-vidro); border-color: rgba(51, 114, 178, 0.28); font-weight: 600; }
.pc-chip--dourado { color: var(--pc-dourado-escuro); background: var(--pc-dourado-vidro); border-color: rgba(222, 177, 92, 0.35); }

.pc-passos { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .pc-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pc-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pc-passo { position: relative; padding-top: 0.5rem; }
.pc-passo__num {
    display: inline-grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    margin-bottom: 0.9rem;
    background: var(--pc-azul); color: var(--pc-branco);
    font-family: var(--pc-fonte-marca); font-weight: 800;
}

.pc-caso { display: grid; gap: 1.25rem; }
.pc-caso__rotulo {
    font-size: var(--pc-t-micro); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--pc-texto-suave);
    margin: 0;
}
.pc-caso__bloco { padding: 1.15rem; border-radius: var(--pc-r); background: var(--pc-nevoa); border-left: 3px solid var(--pc-borda-forte); }
.pc-caso__bloco--solucao { border-left-color: var(--pc-azul); background: var(--pc-azul-claro); }
.pc-caso__bloco--resultado { border-left-color: var(--pc-dourado); background: var(--pc-dourado-vidro); }

/* Lista com check */
.pc-lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.pc-lista-check li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; color: var(--pc-texto-medio); }
.pc-lista-check li::before {
    content: '';
    flex: none; width: 18px; height: 18px; margin-top: 3px;
    border-radius: 50%;
    background: var(--pc-azul-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233372B2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.pc-lista-numerada { padding-left: 1.25rem; display: grid; gap: 0.45rem; color: var(--pc-texto-medio); }
.pc-lista-numerada li::marker { color: var(--pc-azul); font-weight: 700; }

/* Depoimentos */
.pc-depoimento { position: relative; }
.pc-depoimento__aspas {
    font-family: var(--pc-fonte-marca); font-size: 3rem; line-height: 1;
    color: var(--pc-dourado);
    margin-bottom: 0.5rem;
}
.pc-depoimento blockquote { margin: 0 0 1.25rem; font-size: 1rem; color: var(--pc-texto); }
.pc-secao--escura .pc-depoimento blockquote { color: rgba(255, 255, 255, 0.9); }
.pc-depoimento__autor { margin-top: auto; display: flex; align-items: center; gap: 0.75rem; }
.pc-depoimento__autor .pc-depoimento__inicial {
    display: grid; place-items: center;
    flex: none;
    width: 42px; height: 42px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--pc-azul); color: var(--pc-branco);
    font-family: var(--pc-fonte-marca); font-weight: 700;
    font-size: 1.05rem; line-height: 1;
    text-transform: uppercase;
}
.pc-secao--escura .pc-depoimento__autor .pc-depoimento__inicial {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: var(--pc-branco);
}
.pc-depoimento__autor strong { display: block; font-size: 0.9375rem; }
.pc-depoimento__autor span:not(.pc-depoimento__inicial) { font-size: var(--pc-t-pequeno); color: var(--pc-texto-suave); }
.pc-secao--escura .pc-depoimento__autor strong { color: #fff; }
.pc-secao--escura .pc-depoimento__autor span:not(.pc-depoimento__inicial) { color: rgba(255, 255, 255, 0.6); }

/* Inicial redonda (autor de artigo/resultado) */
.pc-inicial {
    display: grid; place-items: center;
    flex: none;
    width: 34px; height: 34px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--pc-azul); color: var(--pc-branco);
    font-family: var(--pc-fonte-marca); font-weight: 700;
    font-size: 0.875rem; line-height: 1;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. Planos
   -------------------------------------------------------------------------- */
.pc-planos { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .pc-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .pc-planos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pc-plano {
    position: relative;
    /* espaço reservado para a fita, alinhando os títulos entre cartões com e sem destaque */
    padding-top: 2.9rem;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.pc-plano__marcador { position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--pc-plano-cor, var(--pc-azul)); }
.pc-plano::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 120px;
    background: linear-gradient(180deg, var(--pc-plano-brilho, transparent) 0%, transparent 100%);
    pointer-events: none;
}
.pc-plano:hover { transform: translateY(-6px); border-color: var(--pc-plano-cor, var(--pc-azul)); box-shadow: var(--pc-sombra-lg); }

.pc-plano--verde   { --pc-plano-cor: #2ECC71; --pc-plano-brilho: rgba(46, 204, 113, 0.10); }
.pc-plano--amarelo { --pc-plano-cor: var(--pc-dourado); --pc-plano-brilho: rgba(222, 177, 92, 0.16); }
.pc-plano--azul    { --pc-plano-cor: var(--pc-azul); --pc-plano-brilho: rgba(51, 114, 178, 0.12); }
.pc-plano--roxo    { --pc-plano-cor: #9B59B6; --pc-plano-brilho: rgba(155, 89, 182, 0.12); }

.pc-plano--destaque { border-color: var(--pc-plano-cor, var(--pc-azul)); box-shadow: 0 0 0 3px var(--pc-dourado-vidro), var(--pc-sombra); }
.pc-plano__fita {
    position: absolute; top: 0.9rem; right: 0.9rem;
    background: var(--pc-dourado); color: #40300E;
    font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1;
    padding: 0.28rem 0.6rem; border-radius: var(--pc-r-pill);
    white-space: nowrap;
    z-index: 1;
}
.pc-plano__nome { font-size: 1.35rem; margin-bottom: 0.35rem; color: var(--pc-azul-profundo); }
.pc-plano__resumo {
    font-size: 0.9375rem; color: var(--pc-texto-medio);
    min-height: 4.6em;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--pc-borda);
}
.pc-plano__meta { display: grid; gap: 0.5rem; margin-bottom: 1.15rem; }
.pc-plano__meta div { display: flex; justify-content: space-between; gap: 0.75rem; font-size: var(--pc-t-pequeno); }
.pc-plano__meta dt { color: var(--pc-texto-suave); }
.pc-plano__meta dd { margin: 0; text-align: right; font-weight: 600; color: var(--pc-texto); }

/* --------------------------------------------------------------------------
   8. Acordeão, avisos, selos, tabelas
   -------------------------------------------------------------------------- */
.pc-acordeao { display: grid; gap: 0.75rem; }
.pc-acordeao details {
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r);
    overflow: hidden;
}
.pc-acordeao summary {
    cursor: pointer; list-style: none;
    padding: 1.1rem 1.25rem;
    font-weight: 600;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.pc-acordeao summary::-webkit-details-marker { display: none; }
.pc-acordeao summary::after {
    content: '+';
    font-family: var(--pc-fonte-marca); font-size: 1.35rem; line-height: 1;
    color: var(--pc-azul);
    transition: transform .2s ease;
}
.pc-acordeao details[open] summary::after { transform: rotate(45deg); }
.pc-acordeao__corpo { padding: 0 1.25rem 1.25rem; color: var(--pc-texto-medio); font-size: 0.9375rem; }

.pc-aviso {
    padding: 1.15rem 1.35rem;
    border-radius: var(--pc-r);
    border: 1px solid var(--pc-borda);
    background: var(--pc-nevoa);
    font-size: 0.9375rem;
    color: var(--pc-texto-medio);
}
.pc-aviso strong { display: block; color: var(--pc-texto); margin-bottom: 0.25rem; }
.pc-aviso--info { background: var(--pc-info-fundo); border-color: rgba(51, 114, 178, 0.22); color: var(--pc-azul-profundo); }
.pc-aviso--erro { background: var(--pc-erro-fundo); border-color: rgba(199, 66, 60, 0.3); color: var(--pc-erro); }

.pc-selo {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--pc-r-pill);
    font-size: var(--pc-t-micro); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--pc-nevoa-2); color: var(--pc-texto-medio);
    white-space: nowrap;
}
.pc-selo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pc-selo--ok { background: var(--pc-ok-fundo); color: var(--pc-ok); }
.pc-selo--alerta { background: var(--pc-alerta-fundo); color: var(--pc-alerta); }
.pc-selo--erro { background: var(--pc-erro-fundo); color: var(--pc-erro); }
.pc-selo--info { background: var(--pc-info-fundo); color: var(--pc-azul); }
.pc-selo--neutro::before { background: var(--pc-texto-suave); }

.pc-pulso { position: relative; }
.pc-pulso::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 currentColor;
    animation: pc-pulsar 2.4s ease-out infinite;
}
@keyframes pc-pulsar {
    to { box-shadow: 0 0 0 10px transparent; }
}

.pc-tabela-rolagem {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--pc-borda); border-radius: var(--pc-r);
    background: var(--pc-branco);
}
.pc-tabela { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.9375rem; }
.pc-tabela th, .pc-tabela td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--pc-borda); }
.pc-tabela th {
    font-size: var(--pc-t-micro); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--pc-texto-suave);
    background: var(--pc-nevoa);
    white-space: nowrap;
}
.pc-tabela tbody tr:last-child td { border-bottom: 0; }
.pc-tabela tbody tr:hover { background: var(--pc-nevoa); }
.pc-tabela__acoes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pc-tabela__acao { font-size: var(--pc-t-pequeno); }

/* --------------------------------------------------------------------------
   9. Formulários
   -------------------------------------------------------------------------- */
.pc-form { display: grid; gap: 1.15rem; }
.pc-form__linha { display: grid; gap: 1.15rem; }
@media (min-width: 640px) {
    .pc-form__linha--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-form__linha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pc-campo { display: flex; flex-direction: column; gap: 0.4rem; }
.pc-campo label { font-size: var(--pc-t-pequeno); font-weight: 600; color: var(--pc-texto); }
.pc-campo label .pc-req, .pc-req { color: var(--pc-erro); }
.pc-campo__dica { font-size: var(--pc-t-micro); color: var(--pc-texto-suave); }
.pc-campo input,
.pc-campo select,
.pc-campo textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda-forte);
    border-radius: var(--pc-r-sm);
    color: var(--pc-texto);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pc-campo textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.pc-campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7F92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px; padding-right: 2.5rem; }
.pc-campo input:focus,
.pc-campo select:focus,
.pc-campo textarea:focus { outline: none; border-color: var(--pc-azul); box-shadow: 0 0 0 4px var(--pc-azul-vidro); }
.pc-campo--erro input,
.pc-campo--erro select,
.pc-campo--erro textarea { border-color: var(--pc-erro); }
.pc-campo__erro, .pc-erro { font-size: var(--pc-t-pequeno); color: var(--pc-erro); font-weight: 500; }

.pc-form-caixa {
    padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r-lg);
    box-shadow: var(--pc-sombra);
}
.pc-form-caixa__titulo { font-size: 1.25rem; margin: 0 0 0.5rem; color: var(--pc-azul-profundo); }
.pc-form__acoes {
    display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between;
    margin-top: 1.75rem; padding-top: 1.25rem;
    border-top: 1px solid var(--pc-borda);
}

/* Busca */
.pc-busca {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r-pill);
    box-shadow: var(--pc-sombra-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pc-busca:focus-within { border-color: var(--pc-azul); box-shadow: 0 0 0 4px var(--pc-azul-vidro); }
.pc-busca > .pc-icone { color: var(--pc-texto-suave); }
.pc-busca input {
    flex: 1; min-width: 0;
    border: 0; background: none; outline: none;
    font-family: var(--pc-fonte); font-size: var(--pc-t-corpo); color: var(--pc-texto);
}
.pc-busca .pc-btn { flex: none; }
@media (max-width: 560px) {
    .pc-busca { flex-wrap: wrap; border-radius: var(--pc-r); }
    .pc-busca .pc-btn { width: 100%; }
}

/* Opções em cartão (radio) */
.pc-opcoes { display: grid; gap: 0.75rem; border: 0; margin: 0; padding: 0; }
.pc-opcoes--linha { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pc-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.pc-opcao label {
    display: flex; flex-direction: column; gap: 0.25rem;
    height: 100%;
    padding: 1rem 1.15rem;
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pc-opcao label strong { font-size: 0.9375rem; color: var(--pc-texto); }
.pc-opcao label span { font-size: var(--pc-t-pequeno); color: var(--pc-texto-suave); }
/* aqui o ícone cheio é o estado selecionado, então o não marcado fica suave */
.pc-opcao label .pc-icone-caixa {
    margin-bottom: 0.6rem;
    background: var(--pc-azul-vidro);
    color: var(--pc-azul);
    box-shadow: none;
}
.pc-opcao label:hover { border-color: var(--pc-borda-forte); background: var(--pc-nevoa); }
.pc-opcao input:checked + label { border-color: var(--pc-azul); background: var(--pc-azul-vidro); box-shadow: 0 0 0 3px var(--pc-azul-vidro); }
.pc-opcao input:checked + label .pc-icone-caixa { background: var(--pc-azul); color: var(--pc-branco); }
.pc-opcao input:focus-visible + label { outline: 2px solid var(--pc-azul); outline-offset: 2px; }

/* Checklist */
.pc-checklist { display: grid; gap: 0.6rem; }
.pc-checkbox {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.75rem 1rem;
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r-sm);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.pc-checkbox:hover { border-color: var(--pc-borda-forte); background: var(--pc-nevoa); }
.pc-checkbox input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pc-azul); }
.pc-checkbox:has(input:checked) { border-color: var(--pc-azul); background: var(--pc-azul-vidro); }

/* Nota por estrelas — inputs em ordem decrescente (5→1) para o seletor de irmãos */
.pc-nota { padding-block: 1rem; border-bottom: 1px solid var(--pc-borda); }
.pc-nota:last-of-type { border-bottom: 0; }
.pc-nota__rotulo { font-size: 1rem; margin: 0 0 0.5rem; }
.pc-estrelas { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.25rem; }
.pc-estrelas input { position: absolute; opacity: 0; width: 0; height: 0; }
.pc-estrelas label { cursor: pointer; color: var(--pc-borda-forte); transition: color .18s ease, transform .18s ease; }
.pc-estrelas label .pc-icone { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.pc-estrelas label:hover { transform: scale(1.12); }
.pc-estrelas input:checked ~ label,
.pc-estrelas label:hover,
.pc-estrelas label:hover ~ label { color: var(--pc-dourado); }
.pc-estrelas input:focus-visible + label { outline: 2px solid var(--pc-azul); outline-offset: 3px; border-radius: 4px; }

/* Trilha de etapas */
.pc-passos-linha {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    list-style: none; margin: 0 0 2rem; padding: 0;
}
.pc-passos-linha li {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-family: var(--pc-fonte-marca); font-weight: 700; font-size: 0.9375rem;
    background: var(--pc-nevoa-2);
    border: 1px solid var(--pc-borda);
    color: var(--pc-texto-suave);
    position: relative;
}
.pc-passos-linha li + li::before { content: ""; position: absolute; right: 100%; width: 0.5rem; height: 2px; background: var(--pc-borda); }
.pc-passos-linha li.esta-feito { background: var(--pc-azul-claro); border-color: var(--pc-azul); color: var(--pc-azul); }
.pc-passos-linha li.esta-ativo { background: var(--pc-azul); border-color: var(--pc-azul); color: var(--pc-branco); box-shadow: 0 0 0 4px var(--pc-azul-vidro); }

/* Confirmação e protocolo */
.pc-confirmacao { max-width: 640px; margin-inline: auto; text-align: center; }
.pc-confirmacao__icone {
    display: grid; place-items: center;
    width: 76px; height: 76px; margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: var(--pc-ok-fundo); color: var(--pc-ok);
}
.pc-protocolo {
    display: inline-block;
    font-family: var(--pc-fonte-marca); font-weight: 700;
    font-size: 1.15rem; letter-spacing: 0.05em;
    background: var(--pc-nevoa); border: 1px dashed var(--pc-borda-forte);
    border-radius: var(--pc-r-sm);
    padding: 0.6rem 1.15rem;
}

/* --------------------------------------------------------------------------
   10. Área do cliente
   -------------------------------------------------------------------------- */
.pc-conta-topo {
    display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r-lg);
    box-shadow: var(--pc-sombra-sm);
    margin-bottom: 2rem;
}
.pc-conta-topo dl { display: grid; gap: 0.35rem; margin: 1rem 0 0; font-size: var(--pc-t-pequeno); }
.pc-conta-topo dl div { display: flex; gap: 0.5rem; }
.pc-conta-topo dt { color: var(--pc-texto-suave); }
.pc-conta-topo dd { margin: 0; font-weight: 600; }

/* Áreas da central do cliente (hub de módulos) */
.pc-areas { display: grid; gap: 1.25rem; margin-bottom: 1rem; }
@media (min-width: 620px)  { .pc-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pc-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pc-area {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.5rem;
    border-radius: var(--pc-r-lg);
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    box-shadow: var(--pc-sombra-sm);
    color: var(--pc-texto);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.pc-area::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--pc-azul) 0%, var(--pc-dourado) 100%);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease;
}
.pc-area:hover { transform: translateY(-6px); border-color: var(--pc-azul); box-shadow: var(--pc-sombra-lg); color: var(--pc-texto); }
.pc-area:hover::before { transform: scaleX(1); }
.pc-area__icone {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border-radius: var(--pc-r);
    margin-bottom: 1rem;
    background: var(--pc-azul-vidro); color: var(--pc-azul);
    transition: background .28s ease, color .28s ease;
}
.pc-area:hover .pc-area__icone { background: var(--pc-azul); color: var(--pc-branco); }
.pc-area h3 { font-size: 1.15rem; margin: 0 0 0.4rem; color: var(--pc-azul-profundo); }
.pc-area p { font-size: 0.9375rem; color: var(--pc-texto-medio); margin: 0 0 1.25rem; }
.pc-area__rodape {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--pc-borda);
    color: var(--pc-azul);
    font-weight: 600; font-size: var(--pc-t-pequeno);
}
.pc-area__rodape .pc-icone { transition: transform .2s ease; }
.pc-area:hover .pc-area__rodape .pc-icone { transform: translateX(4px); }
.pc-area__dica { color: var(--pc-texto-suave); font-weight: 500; }
.pc-area--destaque { border-color: rgba(222, 177, 92, 0.6); box-shadow: 0 0 0 3px var(--pc-dourado-vidro), var(--pc-sombra-sm); }
.pc-area--destaque .pc-area__icone { background: var(--pc-dourado-vidro); color: var(--pc-dourado-escuro); }
.pc-area--destaque:hover { border-color: var(--pc-dourado); }
.pc-area--destaque:hover .pc-area__icone { background: var(--pc-dourado); color: #40300E; }
.pc-area--destaque .pc-area__rodape { color: var(--pc-dourado-escuro); }

/* Abas */
.pc-abas {
    display: flex; gap: 0.25rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--pc-borda);
    margin-bottom: 1.75rem;
}
.pc-aba {
    padding: 0.9rem 1rem;
    background: none; border: 0; cursor: pointer;
    white-space: nowrap;
    font-weight: 600; font-size: 0.9375rem;
    color: var(--pc-texto-medio);
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.pc-aba:hover { color: var(--pc-azul); }
.pc-aba[aria-selected="true"] { color: var(--pc-azul); border-bottom-color: var(--pc-azul); }
.pc-painel-aba[hidden] { display: none; }

/* Métricas */
.pc-metricas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pc-metrica {
    padding: 1.25rem;
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r);
    box-shadow: var(--pc-sombra-sm);
}
.pc-metrica strong {
    display: block;
    font-family: var(--pc-fonte-marca); font-weight: 800;
    font-size: 1.6rem; letter-spacing: -0.02em;
    color: var(--pc-azul-profundo);
}
.pc-metrica span { font-size: var(--pc-t-pequeno); color: var(--pc-texto-suave); }
.pc-metrica--ok strong { color: var(--pc-ok); }
.pc-metrica--alerta strong { color: var(--pc-alerta); }
.pc-metrica--destaque { background: var(--pc-azul-vidro); border-color: rgba(51, 114, 178, 0.28); }

/* Saldo e progresso */
.pc-cartao--saldo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.pc-saldo strong {
    font-family: var(--pc-fonte-marca); font-weight: 800;
    font-size: 2.25rem; letter-spacing: -0.02em;
    color: var(--pc-azul); line-height: 1;
}
.pc-saldo span { display: block; font-size: var(--pc-t-pequeno); color: var(--pc-texto-suave); margin-top: 0.35rem; }
.pc-progresso__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; font-size: 0.9375rem; }
.pc-progresso { height: 10px; border-radius: 99px; background: var(--pc-nevoa-2); overflow: hidden; }
.pc-progresso i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pc-azul) 0%, var(--pc-dourado) 100%); }

.pc-recompensa { display: flex; flex-direction: column; }
.pc-recompensa .pc-cartao__rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pc-recompensa__custo { font-family: var(--pc-fonte-marca); font-weight: 700; color: var(--pc-dourado-escuro); }

.pc-copiar { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pc-copiar input {
    flex: 1; min-width: 220px;
    padding: 0.8rem 1rem;
    font-family: var(--pc-fonte); font-size: 0.9375rem;
    color: var(--pc-texto-medio);
    background: var(--pc-nevoa);
    border: 1px dashed var(--pc-borda-forte);
    border-radius: var(--pc-r-sm);
}

/* Lista de links */
.pc-lista-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pc-lista-links a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.9rem 1.15rem;
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r);
    color: var(--pc-texto);
    font-weight: 500;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.pc-lista-links a:hover { border-color: var(--pc-azul); background: var(--pc-nevoa); transform: translateX(3px); color: var(--pc-azul); }
.pc-lista-links .pc-icone { color: var(--pc-azul); }

/* Resultados de busca e artigos */
.pc-resultados { display: grid; gap: 1rem; }
.pc-resultado {
    display: block;
    padding: 1.25rem;
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r);
    color: var(--pc-texto);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pc-resultado:hover { border-color: var(--pc-azul); box-shadow: var(--pc-sombra); transform: translateY(-2px); color: var(--pc-texto); }
.pc-resultado h3 { font-size: 1.05rem; margin: 0.6rem 0 0.35rem; color: var(--pc-azul-profundo); }
.pc-resultado p { margin: 0; font-size: 0.9375rem; color: var(--pc-texto-medio); }
.pc-resultado__autor, .pc-artigo-meta, .pc-artigo__meta, .pc-artigo-cartao__meta {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: var(--pc-t-pequeno); color: var(--pc-texto-suave);
}
/* a linha de meta do artigo (categoria + tempo de leitura) sai em itálico */
.pc-artigo-cartao__meta,
.pc-artigo__meta,
.pc-tempo-leitura { font-style: italic; }
.pc-artigo-meta { margin-bottom: 1.25rem; }
.pc-artigo-meta strong { display: block; color: var(--pc-texto); font-size: 0.9375rem; }
.pc-avaliacao { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--pc-borda); }
.pc-avaliacao h3 { font-size: 1rem; margin: 0 0 0.75rem; }

.pc-artigo { max-width: var(--pc-max-texto); }
.pc-artigo h2 { margin-top: 2rem; }
.pc-artigo-cartao { display: flex; flex-direction: column; }

/* Filtros */
.pc-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.pc-filtro {
    padding: 0.5rem 1rem;
    border-radius: var(--pc-r-pill);
    border: 1px solid var(--pc-borda);
    background: var(--pc-branco);
    color: var(--pc-texto-medio);
    font-size: var(--pc-t-pequeno); font-weight: 600;
    cursor: pointer;
}
.pc-filtro[aria-pressed="true"], .pc-filtro.esta-ativo { background: var(--pc-azul); color: var(--pc-branco); border-color: var(--pc-azul); }

/* Status e timeline */
.pc-status-geral {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--pc-r);
    background: var(--pc-ok-fundo);
    border: 1px solid rgba(31, 157, 99, 0.3);
    margin-bottom: 2rem;
}
.pc-status-lista { display: grid; gap: 0.75rem; }
.pc-status-item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding: 1.15rem 1.35rem;
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda);
    border-radius: var(--pc-r);
}
.pc-status-item__metricas { margin-left: auto; display: flex; gap: 1.5rem; font-size: var(--pc-t-pequeno); color: var(--pc-texto-suave); }

.pc-timeline { display: grid; gap: 1.25rem; padding-left: 1.25rem; border-left: 2px solid var(--pc-borda); }

/* Legal */
.pc-legal { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .pc-legal { grid-template-columns: 260px minmax(0, 1fr); } }
.pc-legal__indice { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9375rem; }
@media (min-width: 1000px) { .pc-legal__indice { position: sticky; top: calc(var(--pc-header-h) + 24px); } }
.pc-legal__corpo { max-width: var(--pc-max-texto); }
.pc-legal__corpo h2 { margin-top: 2.25rem; }

/* Contato */
.pc-contato { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .pc-contato { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
/* mesma métrica da .pc-lista-check (gap, recuo do ícone e corpo do texto) para
   as duas colunas do bloco de contato terminarem alinhadas linha a linha */
.pc-contato-info { display: grid; gap: 0.55rem; }
.pc-contato-info__item { display: flex; gap: 0.6rem; align-items: flex-start; }
.pc-contato-info__item > .pc-icone { flex: none; margin-top: 3px; color: var(--pc-azul); }
.pc-contato-info__item span, .pc-contato-info__item a { font-size: 0.9375rem; color: var(--pc-texto-medio); }
/* rótulo e valor ficavam colados ("Comercialcomercial@...") */
.pc-contato-info__item strong { margin-right: 0.4rem; color: var(--pc-texto); }

/* --------------------------------------------------------------------------
   11. Chamada final e rodapé
   -------------------------------------------------------------------------- */
.pc-cta {
    background: var(--pc-azul-fundo);
    background-image: linear-gradient(135deg, var(--pc-azul-fundo) 0%, var(--pc-azul-fundo-2) 100%);
    color: #fff;
    border-radius: var(--pc-r-lg);
    padding: clamp(2rem, 1.5rem + 2.6vw, 3.5rem);
    position: relative; overflow: hidden;
    /* logo de um lado, texto justificado do outro */
    display: grid;
    gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    align-items: center;
    text-align: left;
}
@media (min-width: 820px) { .pc-cta { grid-template-columns: minmax(300px, 1.15fr) minmax(0, 1.6fr); } }
.pc-cta::before {
    content: ''; position: absolute; top: -60%; right: -20%;
    width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, rgba(222, 177, 92, 0.28) 0%, transparent 66%);
    pointer-events: none;
}
/* Só a logo, sem placa nem moldura */
.pc-cta__logo {
    position: relative;
    display: block;
    justify-self: center;
    width: 100%;
    max-width: 420px;
    height: auto;
    filter: drop-shadow(0 10px 26px rgba(17, 50, 84, 0.32));
}
.pc-cta__texto { position: relative; }
.pc-cta h2 { color: #fff; max-width: 26ch; margin: 0 0 0.9rem; }
.pc-cta p {
    color: rgba(255, 255, 255, 0.92);
    max-width: 62ch;
    margin: 0 0 1.75rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.pc-cta .pc-acoes { position: relative; }

.pc-footer {
    background: var(--pc-azul-fundo);
    background-image: linear-gradient(180deg, var(--pc-azul-fundo) 0%, var(--pc-azul-fundo-2) 100%);
    color: rgba(255, 255, 255, 0.84);
    padding-block: clamp(3.25rem, 2.4rem + 3.2vw, 5.25rem) 2.25rem;
    font-size: 1rem;
}
.pc-footer__grade { display: grid; gap: 2.25rem; }
@media (min-width: 700px) { .pc-footer__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pc-footer__grade { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.pc-footer h3 {
    font-family: var(--pc-fonte);
    font-size: var(--pc-t-pequeno);
    font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--pc-dourado);
    margin-bottom: 1rem;
}
.pc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.pc-footer a { color: rgba(255, 255, 255, 0.88); }
.pc-footer a:hover { color: var(--pc-dourado); }
.pc-footer__sobre p { color: rgba(255, 255, 255, 0.82); max-width: 42ch; margin-top: 1rem; }
.pc-footer__promessa {
    border-left: 2px solid var(--pc-dourado);
    padding-left: 1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 1.25rem;
}
/* Redes sociais da PERCS */
.pc-footer__redes-titulo { margin-top: 1.9rem; }
.pc-footer .pc-redes {
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    list-style: none; margin: 0; padding: 0;
}
/* Cada rede aparece com o próprio logo (marca oficial preenchida) na sua cor;
   sobre o azul do rodapé o disco branco é o que garante o contraste. */
.pc-rede {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: box-shadow .2s ease, transform .2s ease;
}
.pc-rede .pc-icone { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.pc-rede[data-rede="instagram"] { color: #E4405F; }
.pc-rede[data-rede="linkedin"]  { color: #0A66C2; }
.pc-rede[data-rede="facebook"]  { color: #0866FF; }
.pc-rede[data-rede="youtube"]   { color: #FF0000; }
.pc-rede[data-rede="whatsapp"]  { color: #25D366; }
.pc-rede:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.pc-footer__base {
    margin-top: 2.75rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex; flex-direction: column; gap: 0.75rem;
    font-size: var(--pc-t-pequeno);
    color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 800px) { .pc-footer__base { flex-direction: row; align-items: center; justify-content: space-between; } }
.pc-footer__base nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }

/* --------------------------------------------------------------------------
   12. Revelar ao rolar, movimento reduzido e impressão
   -------------------------------------------------------------------------- */
.pc-revelar { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.pc-revelar.pc-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .pc-revelar { opacity: 1; transform: none; }
    .pc-btn:hover, .pc-marca:hover, .pc-area:hover, .pc-plano:hover,
    .pc-cartao--acao:hover, .pc-cartao--link:hover, .pc-resultado:hover,
    .pc-lista-links a:hover, .pc-estrelas label:hover, .pc-carrossel__seta:hover { transform: none; }
}

@media print {
    .pc-header, .pc-footer, .pc-cta, .pc-nav, .pc-subnav, .pc-pular { display: none !important; }
    body.pc-body { color: #000; background: #fff; }
    .pc-topo { background: none; color: #000; }
    .pc-topo h1, .pc-topo p { color: #000; }
}

/* Caixas do código de verificação */
.pc-codigo { display: flex; gap: 0.5rem; justify-content: center; margin: 1.5rem 0; }
.pc-codigo input {
    width: 48px; height: 56px;
    text-align: center;
    font-family: var(--pc-fonte-marca); font-size: 1.4rem; font-weight: 700;
    color: var(--pc-texto);
    background: var(--pc-branco);
    border: 1px solid var(--pc-borda-forte);
    border-radius: var(--pc-r-sm);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pc-codigo input:focus { border-color: var(--pc-azul); box-shadow: 0 0 0 4px var(--pc-azul-vidro); }
@media (max-width: 420px) { .pc-codigo input { width: 42px; height: 50px; font-size: 1.15rem; } }

/* --------------------------------------------------------------------------
   13. Contraste sobre as superfícies azuis
   Etiqueta, texto de apoio, caixa de ícone, botão de texto e link-seta são
   pensados para fundo claro. Sobre o azul da marca eles precisam inverter,
   senão ficam azul-sobre-azul (ilegível).
   -------------------------------------------------------------------------- */
.pc-secao--escura .pc-etiqueta,
.pc-hero .pc-etiqueta,
.pc-topo .pc-etiqueta,
.pc-cta .pc-etiqueta {
    color: var(--pc-dourado-claro);
    background: rgba(222, 177, 92, 0.18);
    border: 1px solid rgba(222, 177, 92, 0.4);
}
.pc-secao--escura .pc-etiqueta::before,
.pc-hero .pc-etiqueta::before,
.pc-topo .pc-etiqueta::before,
.pc-cta .pc-etiqueta::before { background: var(--pc-dourado); }

.pc-secao--escura .pc-cabecalho p,
.pc-hero .pc-cabecalho p,
.pc-topo .pc-cabecalho p { color: rgba(255, 255, 255, 0.9); }

.pc-secao--escura .pc-icone-caixa,
.pc-hero .pc-icone-caixa,
.pc-topo .pc-icone-caixa,
.pc-cta .pc-icone-caixa {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--pc-branco);
    box-shadow: none;
}
.pc-secao--escura .pc-icone-caixa--dourado,
.pc-hero .pc-icone-caixa--dourado,
.pc-topo .pc-icone-caixa--dourado,
.pc-cta .pc-icone-caixa--dourado {
    background: rgba(222, 177, 92, 0.24);
    border-color: rgba(222, 177, 92, 0.45);
    color: var(--pc-dourado-claro);
    box-shadow: none;
}

.pc-secao--escura .pc-btn--texto,
.pc-hero .pc-btn--texto,
.pc-topo .pc-btn--texto,
.pc-cta .pc-btn--texto { color: var(--pc-dourado); }
.pc-secao--escura .pc-btn--texto:hover,
.pc-hero .pc-btn--texto:hover,
.pc-topo .pc-btn--texto:hover,
.pc-cta .pc-btn--texto:hover { color: var(--pc-dourado-claro); }

.pc-secao--escura .pc-link-seta,
.pc-hero .pc-link-seta,
.pc-topo .pc-link-seta,
.pc-cta .pc-link-seta { color: var(--pc-dourado); }
.pc-secao--escura .pc-link-seta:hover,
.pc-hero .pc-link-seta:hover { color: var(--pc-dourado-claro); }

/* Links soltos e chips herdados dentro do azul */
.pc-secao--escura a:not(.pc-btn):not(.pc-link-seta) { color: var(--pc-dourado); }
.pc-secao--escura a:not(.pc-btn):not(.pc-link-seta):hover { color: var(--pc-dourado-claro); }
.pc-secao--escura .pc-chip {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}
.pc-secao--escura .pc-lista-check li { color: rgba(255, 255, 255, 0.88); }
.pc-secao--escura .pc-lista-check li::before {
    background-color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   14. Demonstrações em vídeo
   -------------------------------------------------------------------------- */
.pc-demo__capa {
    position: relative;
    display: grid; place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 1.1rem;
    padding: 0;
    border: 0;
    border-radius: var(--pc-r);
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(135deg, var(--pc-azul-profundo) 0%, var(--pc-azul) 100%);
    color: var(--pc-branco);
}
.pc-demo__marca {
    position: absolute; left: 50%; top: 50%;
    width: 140px; height: 140px;
    transform: translate(-50%, -50%);
    opacity: 0.14;
    fill: none; stroke: currentColor; stroke-width: 1;
}
.pc-demo__play {
    position: relative;
    display: grid; place-items: center;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    color: var(--pc-branco);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.pc-demo__play .pc-icone { width: 30px; height: 30px; }
.pc-demo__capa:hover .pc-demo__play { transform: scale(1.08); background: var(--pc-dourado); border-color: var(--pc-dourado); color: #33270C; }
.pc-demo__capa:focus-visible { outline: 2px solid var(--pc-dourado); outline-offset: 3px; }
.pc-demo__duracao {
    position: absolute; right: 0.6rem; bottom: 0.6rem;
    font-size: var(--pc-t-micro); font-weight: 600;
    background: rgba(11, 34, 54, 0.7);
    padding: 0.2rem 0.55rem;
    border-radius: var(--pc-r-pill);
}

/* Visor (modal) */
.pc-visor {
    width: min(960px, 94vw);
    padding: 0;
    border: 0;
    border-radius: var(--pc-r-lg);
    background: transparent;
    overflow: visible;
}
.pc-visor::backdrop { background: rgba(11, 34, 54, 0.78); backdrop-filter: blur(6px); }
.pc-visor__caixa {
    background: var(--pc-azul-noite);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--pc-r-lg);
    box-shadow: var(--pc-sombra-lg);
    overflow: hidden;
}
.pc-visor__topo {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.35rem;
}
.pc-visor__produto {
    font-size: var(--pc-t-micro); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--pc-dourado);
}
.pc-visor__titulo { color: var(--pc-branco); font-size: 1.25rem; margin: 0.25rem 0 0; }
.pc-visor__fechar {
    display: grid; place-items: center;
    flex: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--pc-branco);
    cursor: pointer;
    transition: background .2s ease;
}
.pc-visor__fechar:hover { background: rgba(222, 177, 92, 0.3); }
/* o ícone de alerta serve de X girado 45°, evitando novo símbolo no sprite */
.pc-visor__fechar .pc-icone { width: 18px; height: 18px; transform: rotate(45deg); }

/* Player */
.pc-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    display: grid;
}
.pc-player__video { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pc-player__vazio {
    grid-area: 1 / 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.4rem;
    padding: 2rem;
    text-align: center;
    background: linear-gradient(135deg, var(--pc-azul-profundo) 0%, var(--pc-azul) 100%);
    color: rgba(255, 255, 255, 0.86);
}
.pc-player__vazio .pc-icone { width: 44px; height: 44px; color: var(--pc-dourado); margin-bottom: 0.5rem; }
.pc-player__vazio strong { color: var(--pc-branco); font-family: var(--pc-fonte-marca); font-size: 1.1rem; }
.pc-player__vazio span { font-size: 0.9375rem; max-width: 46ch; }

.pc-player__controles {
    grid-area: 1 / 1;
    align-self: end;
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
    color: var(--pc-branco);
}
.pc-player__btn {
    display: grid; place-items: center;
    flex: none;
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: var(--pc-branco);
    cursor: pointer;
    transition: background .2s ease;
}
.pc-player__btn:hover { background: var(--pc-dourado); color: #33270C; }
.pc-player__tempo { font-size: var(--pc-t-micro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-player__linha {
    flex: 1;
    appearance: none;
    height: 5px; border-radius: 99px;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
}
.pc-player__linha::-webkit-slider-thumb {
    appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--pc-dourado);
    border: 0;
}
.pc-player__linha::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--pc-dourado); border: 0;
}

/* ============================================================
   Corpo de texto justificado em todo o site (antes só na home)
   Só parágrafos e depoimentos. Títulos continuam como estão, e
   ficam de fora as exceções abaixo: textos curtos/auxiliares
   (etiquetas, taglines, datas, avisos, rodapé) e os blocos que
   já têm alinhamento próprio — justificar duas linhas soltas ou
   um bloco centralizado fica pior do que deixar em bandeira.
   A hifenização evita os "rios" que o justificado abre em coluna
   estreita de cartão.
   ============================================================ */
.pc-body p,
.pc-body blockquote {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.pc-body .pc-etiqueta,
.pc-body .pc-hero__slogan,
.pc-body .pc-hero__nota,
.pc-body .pc-carrossel__tagline,
.pc-body .pc-cartao-solucao__tagline,
.pc-body .pc-cartao-solucao__site,
.pc-body .pc-pequeno,
.pc-body .pc-aviso,
.pc-body .pc-cabecalho--centro p,
.pc-body .pc-confirmacao p,
.pc-body .pc-indicador p,
.pc-body .pc-player__vazio p,
.pc-body .pc-footer p {
    text-align: inherit;
    hyphens: manual;
}

/* Títulos de cartão que não cabiam na largura útil ("Franquias e multiunidades",
   "O prestador que controla orçamento e ordem de serviço", ...). Só esses
   encolhem, e apenas 15% — o bastante para fechar a linha sem destoar dos
   títulos vizinhos, que ficam no corpo normal.
   O item é identificado pelo ícone (único dentro de cada lista) ou pelo slug. */
.pc-grade--setores .pc-cartao[data-item="ic-users"] h3,
.pc-grade--setores .pc-cartao[data-item="ic-headset"] h3,
.pc-grade--beneficios .pc-cartao[data-item="ic-lock"] h3,
.pc-grade--beneficios .pc-cartao[data-item="ic-plug"] h3,
.pc-grade--casos .pc-cartao[data-caso="ordem-de-servico"] h3,
.pc-grade--casos .pc-cartao[data-caso="varias-unidades"] h3 {
    font-size: calc(var(--pc-t-h3) * 0.85);
}
/* com o corpo menor, o balance distribui as palavras entre as linhas restantes */
.pc-grade--titulo-1linha h3,
.pc-grade--titulo-2linhas h3 { text-wrap: balance; }



/* ============================================================
   "Fale com a gente" x "Área de acesso do cliente"
   As duas listas precisam casar linha a linha ("Telefone…" na altura de
   "Copiar Pix…"). Os cartões já têm a mesma altura e o mesmo rodapé, então
   ancorar as listas embaixo (margin-bottom:auto no parágrafo, que tem altura
   diferente nos dois) faz as quatro linhas coincidirem. O resto é manter a
   mesma altura de linha e uma linha só por item nos dois lados — o corpo é
   medido contra o cartão (cqi) para nada quebrar nem estourar.
   ============================================================ */
@media (min-width: 640px) {
    .pc-grade--central-dupla .pc-cartao { container-type: inline-size; }

    /* geometria identica nas duas listas: mesmo recuo do topo, mesma faixa por
       linha e mesmo respiro entre elas — e o que faz a enesima linha de um
       cartao cair na mesma altura da enesima do outro */
    .pc-grade--central-dupla .pc-contato-info,
    .pc-grade--central-dupla .pc-lista-check {
        display: grid;
        margin-top: 1.5rem;
        gap: 0.55rem;
        grid-auto-rows: 2.4rem;
        align-content: start;
    }
    .pc-grade--central-dupla .pc-contato-info__item,
    .pc-grade--central-dupla .pc-lista-check li {
        height: 2.4rem;
        align-items: center;
        line-height: 1.3;
        white-space: nowrap;
        font-size: min(0.9375rem, 3.1cqi);
    }
    .pc-grade--central-dupla .pc-lista-check li::before { margin-top: 0; }
    .pc-grade--central-dupla .pc-contato-info__item > .pc-icone { margin-top: 0; }
}

/* Acima de 1024px os dois cartoes sao largos o bastante para o titulo caber em
   uma linha e o texto de apoio em tres. Fixar essas duas alturas faz as listas
   comecarem exatamente na mesma altura — o que, somado a altura de linha igual,
   fecha o alinhamento linha a linha. Abaixo disso o texto flui livre. */
@media (min-width: 1024px) {
    .pc-grade--central-dupla .pc-cartao > h3 { height: 2rem; margin-bottom: 0.6rem; }
    .pc-grade--central-dupla .pc-cartao > p { height: 4.75rem; margin-bottom: 0; overflow: hidden; }
}

/* Tela de entrada da Central do Cliente: o formulário é curto e o rodapé
   entrava no primeiro quadro. A seção passa a ocupar a altura livre abaixo do
   cabeçalho, com o cartão centrado — o rodapé só aparece ao rolar. */
.pc-secao--entrada {
    display: grid;
    align-content: center;
    min-height: calc(100vh - var(--pc-header-h));
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    /* mesmo azul do hero (padrão do site): radiais sobre o degradê vertical,
       para o cartão branco descolar do fundo */
    background: var(--pc-azul-fundo);
    background-image:
        radial-gradient(1100px 560px at 8% -12%, rgba(255, 255, 255, 0.18), transparent 60%),
        radial-gradient(760px 420px at 96% 4%, rgba(222, 177, 92, 0.30), transparent 62%),
        linear-gradient(180deg, var(--pc-azul-fundo) 0%, var(--pc-azul-fundo-2) 100%);
}
@supports (min-height: 100svh) {
    .pc-secao--entrada { min-height: calc(100svh - var(--pc-header-h)); }
}
.pc-secao--entrada .pc-form-caixa { padding: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); }
/* O aviso aqui é sempre uma linha só: com o padding cheio ele ficava um bloco
   alto demais, e sem margem o label "E-mail" colava embaixo dele. */
.pc-secao--entrada .pc-aviso {
    padding: 0.8rem 1.1rem;
    margin-bottom: 1.75rem;
}
.pc-secao--entrada .pc-form { gap: 1.5rem; }
.pc-secao--entrada .pc-form .pc-acoes { margin-top: 0.75rem; }