/* =============================================================================
   100% WP — CSS próprio do site
   -----------------------------------------------------------------------------
   styles-DjQ12re0.css é um build Tailwind já compilado: só contém as classes
   que existiam no site original, então utilitários novos não podem ser
   inventados no HTML. Este arquivo carrega depois dele e traz os componentes
   que precisam de estilo próprio — menu, cartões de plano, tabela comparativa
   — escritos com os mesmos tokens de cor do build.
   ========================================================================== */

/* --------------------------------------------------------------- base ----- */

/* O build Tailwind expõe a fonte de título só como classe .font-display.
   Os componentes deste arquivo precisam dela como token. */
:root {
    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--foreground);
    color: var(--background);
    font-weight: 600;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
    left: 0;
}

/* O glifo oficial do WhatsApp é preenchido, não traçado. */
.icon-whatsapp {
    fill: currentColor;
    flex-shrink: 0;
}

/* Foco visível e consistente para navegação por teclado. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ================================ MENU ==================================== */

/* --- dropdown de serviços (desktop) --- */

.nav-dropdown__chevron {
    transition: transform .18s ease;
}
.nav-dropdown[data-open] .nav-dropdown__chevron {
    transform: rotate(180deg);
}

.nav-dropdown__panel {
    position: absolute;
    top: calc(100% + .75rem);
    left: 50%;
    transform: translateX(-50%);
    width: min(46rem, calc(100vw - 3rem));
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + .35rem);
    box-shadow: var(--shadow-deep, 0 24px 60px -12px rgb(0 0 0 / .22));
    z-index: 60;
}
.nav-dropdown__panel[hidden] {
    display: none;
}

.nav-dropdown__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.nav-dropdown__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .5rem;
}

.nav-dropdown__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    margin-left: -.5rem;
    border-radius: .5rem;
    font-size: .875rem;
    color: var(--muted-foreground);
    transition: background .15s ease, color .15s ease;
}
.nav-dropdown__item:hover {
    background: var(--accent);
    color: var(--foreground);
}

.nav-dropdown__all {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--brand);
}
.nav-dropdown__all:hover {
    text-decoration: underline;
}

/* --- menu mobile --- */

.menu-mobile {
    border-top: 1px solid var(--border);
    background: var(--background);
    padding: .75rem 1.5rem 1.5rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}
.menu-mobile[hidden] {
    display: none;
}

.menu-mobile__link {
    display: block;
    padding: .7rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
}
.menu-mobile__link.is-active {
    color: var(--brand);
}

.menu-mobile__sub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .15rem .75rem;
    padding: .6rem 0 .8rem;
    border-bottom: 1px solid var(--border);
}
@media (max-width: 420px) {
    .menu-mobile__sub { grid-template-columns: 1fr; }
}

.menu-mobile__sublink {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem 0;
    font-size: .8125rem;
    color: var(--muted-foreground);
}
.menu-mobile__sublink:hover {
    color: var(--foreground);
}

/* O botão do menu mobile era sempre verde, porque só existia o do WhatsApp.
   Agora são três portas com pesos diferentes, e a cor precisa dizer qual é
   qual: a marca para criar conta, contorno para entrar, verde só para o
   WhatsApp. Verde num botão de cadastro faria a pessoa achar que vai abrir
   uma conversa. */
.menu-mobile__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .8rem 1.25rem;
    border-radius: 999px;
    background: var(--gradient-brand, var(--brand));
    color: var(--brand-foreground, #fff);
    font-weight: 600;
}

/* Do segundo em diante, o respiro é menor: eles são do mesmo grupo. */
.menu-mobile__cta + .menu-mobile__cta { margin-top: .5rem; }

.menu-mobile__cta--whats {
    background: #25D366;
    color: #fff;
    border: 0;
}

/* A segunda e a terceira porta do menu mobile: mesmo tamanho de alvo, menos
   peso visual. Sem isso, três botões cheios competiriam entre si e nenhum
   pareceria o principal. */
.menu-mobile__cta--fantasma {
    background: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
}
.menu-mobile__cta--fantasma:hover {
    border-color: var(--brand);
}

/* ============================ CARTÕES DE PLANO ============================= */

/* Grade com alinhamento vertical: todos os cartões da linha compartilham a
   altura, então preço, lista e botão ficam na mesma linha de leitura. */
/* TRÊS COLUNAS, OU UMA. NUNCA DUAS.
   A grade era de quatro, do catálogo antigo de planos. Com três cartões ela
   deixava uma coluna vazia no desktop e um cartão sozinho na segunda fila do
   tablet: buraco no meio da fileira, que o olho lê como página quebrada.
   Por isso não há passo intermediário. Duas colunas com três cartões sempre
   deixa um órfão, qualquer que seja a largura. */
.plans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
    /* Empilhado, o cartão não precisa ocupar a largura de um monitor. */
    max-width: 26rem;
    margin-inline: auto;
}
@media (min-width: 1024px) {
    .plans-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
        max-width: none;
    }
}

/* Em três colunas o cartão tem cerca de 340px. O respiro de 1.75rem de cada
   lado comia demais dessa largura e quebrava as linhas da lista de recursos. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .plan-card { padding: 1.75rem 1.375rem; }
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
    border-radius: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft, 0 12px 32px -12px rgb(0 0 0 / .16));
}

/* Cada variante existe para o visitante separar os planos de relance:
   neutro (entrada) → marca (recomendado) → escuro (topo) → contorno (agências). */
.plan-card--featured {
    border: 2px solid var(--brand);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 10%, transparent);
}
.plan-card--dark {
    background: var(--foreground);
    border-color: var(--foreground);
    color: var(--background);
}
.plan-card--brand {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--card), var(--card)) padding-box,
        var(--gradient-brand, linear-gradient(135deg, var(--brand), var(--brand-dark))) border-box;
}

.plan-card--dark .plan-card__tagline,
.plan-card--dark .plan-card__period,
.plan-card--dark .plan-highlight__label {
    color: color-mix(in oklab, var(--background) 70%, transparent);
}
.plan-card--dark .plan-card__name,
.plan-card--dark .plan-card__price,
.plan-card--dark .plan-card__feature,
.plan-card--dark .plan-highlight__value {
    color: var(--background);
}
.plan-card--dark .plan-card__icon,
.plan-card--dark .plan-card__check {
    background: color-mix(in oklab, var(--background) 14%, transparent);
    color: var(--background);
}
.plan-card--dark .plan-card__check {
    background: none;
}
.plan-card--dark .plan-highlights,
.plan-card--dark .plan-card__inherits {
    border-color: color-mix(in oklab, var(--background) 22%, transparent);
}

.plan-card__badge {
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: .3rem .85rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-foreground);
    background: var(--gradient-brand, var(--brand));
}
.plan-card--dark .plan-card__badge {
    background: var(--background);
    color: var(--foreground);
}
.plan-card--brand .plan-card__badge,
.plan-card--plain .plan-card__badge {
    background: var(--foreground);
    color: var(--background);
}

.plan-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: .85rem;
    background: color-mix(in oklab, var(--brand) 12%, transparent);
    color: var(--brand);
}

.plan-card__name {
    margin-top: 1.25rem;
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--foreground);
}

.plan-card__tagline {
    margin-top: .5rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* "Melhor para": a frase que responde em uma linha se o plano é do visitante. */
.plan-card__bestfor {
    display: inline-block;
    margin-top: .85rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    background: color-mix(in oklab, var(--brand) 10%, transparent);
    color: var(--brand);
}
.plan-card--dark .plan-card__bestfor {
    background: color-mix(in oklab, var(--background) 16%, transparent);
    color: var(--background);
}

.plan-card__price-row {
    margin-top: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: .25rem;
}
.plan-card__price {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: -.02em;
    color: var(--foreground);
}
.plan-card__period {
    font-size: .875rem;
    font-weight: 500;
    color: var(--muted-foreground);
}

/* Os três números que mais mudam entre planos, acima da lista. */
.plan-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-top: 1.25rem;
    padding: .85rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.plan-highlight__label {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.plan-highlight__value {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--foreground);
}

.plan-card__inherits {
    margin-top: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px dashed var(--border);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--brand);
}
.plan-card--dark .plan-card__inherits {
    color: var(--background);
}

.plan-card__features {
    margin-top: 1.25rem;
    /* Gap mínimo até o botão. Fica aqui, e não como margin-top no .plan-card__cta,
       porque lá o margin-top é `auto` — é ele que empurra o botão para a base e
       mantém os quatro CTAs na mesma linha mesmo com listas de tamanhos diferentes. */
    margin-bottom: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
.plan-card__feature {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--foreground);
}
.plan-card__check {
    flex-shrink: 0;
    margin-top: .15rem;
    color: var(--brand);
}
.plan-card--dark .plan-card__check {
    color: var(--background);
}

.plan-card__note {
    margin-top: -.75rem;
    margin-bottom: 1.75rem;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.plan-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: auto;
    padding: .8rem 1.25rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.plan-card__cta--solid {
    background: var(--foreground);
    color: var(--background);
}
.plan-card__cta--solid:hover {
    background: var(--brand);
    color: var(--brand-foreground);
}
.plan-card__cta--outline {
    background: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
}
.plan-card__cta--outline:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.plan-card--dark .plan-card__cta--solid {
    background: var(--background);
    color: var(--foreground);
}
.plan-card--dark .plan-card__cta--solid:hover {
    background: var(--brand);
    color: var(--brand-foreground);
}
.plan-card--featured .plan-card__cta--solid {
    background: var(--gradient-brand, var(--brand));
    color: var(--brand-foreground);
}

/* =========================== TABELA COMPARATIVA =========================== */

.compare-wrap {
    margin-top: 2.5rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--card);
    -webkit-overflow-scrolling: touch;
}

.compare-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: .875rem;
}

.compare-table th,
.compare-table td {
    padding: .9rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.compare-table thead th {
    position: sticky;
    top: 0;
    background: var(--card);
    font-family: var(--font-display, inherit);
    font-weight: 700;
    color: var(--foreground);
    z-index: 1;
}
.compare-table thead th span {
    display: block;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 500;
    color: var(--muted-foreground);
}

/* A coluna do plano recomendado é tingida para amarrar com o cartão. */
.compare-table .is-featured {
    background: color-mix(in oklab, var(--brand) 7%, transparent);
}

.compare-table tbody th {
    font-weight: 600;
    color: var(--foreground);
}

.compare-table td {
    color: var(--muted-foreground);
    text-align: center;
}

.compare-yes {
    color: var(--success);
}
.compare-no {
    color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
}
.compare-value {
    font-weight: 600;
    color: var(--foreground);
}

.compare-hint {
    margin-top: .75rem;
    font-size: .75rem;
    color: var(--muted-foreground);
}

/* ============================== UTILITÁRIOS =============================== */

/* Ausentes no build Tailwind, usados nas páginas convertidas. */
.u-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

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

/* ===================== A TELA DO PAINEL, REPRODUZIDA ===================== */
/*
   Ver includes/painel-demo.php para o porquê de ser HTML e não um print.

   As cores abaixo são as do painel de verdade, copiadas dos tokens dele. Elas
   NÃO usam as variáveis do site: os dois têm paletas próprias, e reaproveitar
   a daqui faria a reprodução parecer outra coisa.
*/

.painel {
    --p-bg:      oklch(96.2% .010 235);
    --p-lado:    oklch(98%   .008 235);
    --p-surface: #ffffff;
    --p-brand:   oklch(52% .13 238);
    /* Duas variantes um passo mais escuras, para quando a cor vira TEXTO sobre
       branco. No painel elas aparecem sobre fundo tingido, onde o tom original
       basta; aqui, no branco, ficavam logo abaixo dos 4,5:1 que texto pede. */
    --p-brand-txt: oklch(47% .13 238);
    --p-ok-txt:    oklch(50% .14 152);
    --p-texto:   oklch(24% .028 250);
    --p-fraco:   oklch(52% .020 245);
    --p-borda:   oklch(90% .015 235);
    --p-ok:      oklch(56% .14 152);
    --p-warn:    oklch(52% .13 68);
    --p-alerta:  oklch(53% .18 25);

    border-radius: 14px;
    overflow: hidden;
    background: var(--p-surface);
    border: 1px solid var(--p-borda);
    box-shadow: 0 24px 60px -24px rgb(0 0 0 / .28);
    font-size: 13px;
    line-height: 1.4;
    color: var(--p-texto);
    /* Fonte do sistema, e não a do site: é assim que o painel se apresenta. */
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.painel__barra {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 14px;
    background: oklch(94.8% .014 235);
    border-bottom: 1px solid var(--p-borda);
}
.painel__bolinhas { display: flex; gap: 6px; }
.painel__bolinhas i { width: 9px; height: 9px; border-radius: 50%; background: var(--p-borda); }
.painel__url {
    flex: 1; text-align: center; font-size: 11.5px; color: var(--p-fraco);
    background: var(--p-surface); border-radius: 6px; padding: 3px 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.painel__corpo { display: grid; grid-template-columns: 190px 1fr; background: var(--p-bg); }

/* -------------------------------------------------------- menu lateral -- */

.painel__lado {
    background: var(--p-lado);
    border-right: 1px solid var(--p-borda);
    padding: 14px 10px;
}

.painel__marca { display: flex; align-items: center; gap: 9px; padding: 0 6px 16px; }
.painel__logo {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--p-brand); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: -.02em;
}
.painel__marca strong { display: block; font-size: 12.5px; font-weight: 700; }
.painel__marca span { display: block; font-size: 11px; color: var(--p-fraco); }

.painel__item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 8px;
    font-size: 12.5px; color: var(--p-fraco);
}
.painel__item.is-on {
    background: color-mix(in oklab, var(--p-brand) 12%, transparent);
    color: var(--p-brand-txt); font-weight: 600;
}
.painel__icone { width: 15px; height: 15px; flex-shrink: 0; }

/* O rotulo do grupo no menu: PRINCIPAL, PREMIUM, CONFIGURACOES. Sao os tres
   grupos do painel, e sao eles que dizem que o produto tem mais coisa do que
   cabe nesta reproducao. */
.painel__grupo {
    font-size: 9px; font-weight: 700; letter-spacing: .08em;
    color: var(--p-fraco); padding: 12px 8px 5px;
}
.painel__lado .painel__grupo:first-of-type { padding-top: 0; }

/* O ponto de estado carrega o mesmo significado do painel: verde para o que
   deu certo. E a primeira coisa que o olho encontra em cada linha. */
.painel__ponto {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--p-ok);
}
.painel__conta {
    margin-left: auto; min-width: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--p-warn); color: #fff;
    font-size: 10.5px; font-weight: 700; text-align: center;
}

/* ------------------------------------------------------------- a tela --- */

.painel__tela { padding: 16px 18px 20px; min-width: 0; }

.painel__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.painel__topo strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.painel__topo > div span { display: block; font-size: 11.5px; color: var(--p-fraco); margin-top: 2px; }
.painel__botao {
    flex-shrink: 0;
    background: var(--p-brand); color: #fff; font-size: 11.5px; font-weight: 600;
    padding: 7px 13px; border-radius: 8px; white-space: nowrap;
}

/* ------------------------------------------------- os quatro numeros ---- */
/*
   Sao os quatro que o painel mostra primeiro, na mesma ordem: quantos sites,
   quantas atualizacoes esperando, quantos alertas, quantas reestruturacoes.
   Auto-fit em vez de quatro colunas fixas: em telas medias eles viram dois por
   linha sozinhos, sem media query.
*/
.painel__cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.painel__cartao {
    background: var(--p-surface); border: 1px solid var(--p-borda);
    border-radius: 10px; padding: 12px 13px;
}
.painel__cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.painel__rotulo {
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
    color: var(--p-fraco); text-transform: uppercase;
}
.painel__valor { font-size: 26px; font-weight: 700; line-height: 1.1; margin-top: 3px; letter-spacing: -.02em; }
.painel__pe { font-size: 10.5px; color: var(--p-fraco); margin-top: 9px; }

.painel__bolha {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
}
/* Os fundos sao tingidos de leve e o icone leva a cor cheia, que e como o
   painel faz. A variante de TEXTO (--p-*-txt) nao entra aqui: icone nao e
   texto, e o contraste que ele precisa e menor. */
.painel__bolha--brand  { background: oklch(94% .035 238); color: var(--p-brand); }
.painel__bolha--warn   { background: oklch(95% .045 68);  color: var(--p-warn); }
.painel__bolha--alerta { background: oklch(95% .035 25);  color: var(--p-alerta); }

/* ------------------------------------------------------------- blocos --- */

.painel__bloco {
    background: var(--p-surface); border: 1px solid var(--p-borda);
    border-radius: 10px; padding: 13px 14px; margin-bottom: 12px;
}
.painel__bloco:last-child { margin-bottom: 0; }
.painel__bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.painel__bloco-topo strong { font-size: 13.5px; font-weight: 700; }
.painel__link { font-size: 11.5px; font-weight: 600; color: var(--p-brand-txt); }

/* --------------------------------------------------- cartoes de site ---- */

.painel__sites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
.painel__site {
    border: 1px solid var(--p-borda); border-radius: 9px; padding: 11px 12px;
    min-width: 0;
}
.painel__site-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.painel__site b { font-size: 12.5px; font-weight: 600; }
.painel__site em {
    display: block; font-style: normal; font-size: 11px; color: var(--p-fraco);
    margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.painel__site-pe {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-top: 9px; font-size: 10.5px; color: var(--p-fraco);
}
.painel__selo {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: 10px; font-weight: 600; color: var(--p-ok-txt);
    background: oklch(95% .04 152); border-radius: 20px; padding: 3px 8px;
}
.painel__selo .painel__icone { width: 11px; height: 11px; }

/* ------------------------------------------------- atividade recente ---- */
/*
   A hora fica na ponta direita, como no painel: e ela que responde "quando
   isso foi feito?", e e a coluna que a agencia mostra ao cliente.
*/
.painel__linha {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0; font-size: 11.5px;
}
.painel__linha + .painel__linha { border-top: 1px solid oklch(94.5% .009 235); }
.painel__linha > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.painel__linha > span,
.painel__linha em {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.painel__linha em { font-style: normal; color: var(--p-fraco); font-size: 10.5px; flex-shrink: 0; }

.painel__conta--warn {
    background: oklch(95% .045 68); color: var(--p-warn); margin-left: auto;
}

/* ----------------------------------------------------------- estreito --- */
/*
   No celular somem o menu lateral e o botao de acao, e tudo empilha numa
   coluna so. Os quatro numeros viram dois por linha: quatro cartoes lado a
   lado num telefone dariam setenta pixels cada, e o rotulo quebraria em tres
   linhas para caber.
*/
@media (max-width: 767px) {
    .painel { font-size: 12px; }
    .painel__corpo { grid-template-columns: 1fr; }
    .painel__lado { display: none; }
    .painel__tela { padding: 12px; }
    .painel__botao { display: none; }
    /* `minmax(0, 1fr)` e nao `1fr`: `1fr` é `minmax(auto, 1fr)`, e o texto longo
       de um cartão ("3 site(s) com atualizações pendentes") empurrava a coluna
       dele para 166px contra 126px da outra. Dois cartões de tamanhos
       diferentes lado a lado leem como defeito. */
    .painel__cartoes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    /* "REESTRUTURAÇÕES" tem quinze letras e não quebra: com o espaçamento do
       desktop ela precisava de 105px num cartão que oferece 85px, e transbordava
       por cima do cartão vizinho. Menos corpo e menos espaçamento resolvem sem
       hifenizar a palavra no meio, que é o que sobraria. */
    .painel__rotulo { font-size: 8.5px; letter-spacing: .02em; }
    /* Os últimos três pixels saem do ícone, e não do texto: o rótulo já está no
       menor corpo que ainda se lê num telefone. */
    .painel__cartao-topo { gap: 6px; }
    .painel__bolha { width: 22px; height: 22px; border-radius: 7px; }
    .painel__bolha .painel__icone { width: 13px; height: 13px; }
    .painel__valor { font-size: 22px; }
    .painel__sites { grid-template-columns: 1fr; }
    /* A hora sai: "9 horas atras" ao lado de "Removido: contact-form-7"
       espremeria as duas ate nenhuma das duas se ler. */
    .painel__linha em { display: none; }
}