/* ============================================================================
   LUCREI — PONTE ENTRE O SITE ANTIGO E O DESIGN v5  (11/09/2026)

   O v5 (pacote "LUCREI site completo v5") trouxe um sistema visual inteiro em
   v5.css, escrito para uma página única com classes próprias (.topbar, .hero,
   .product-card, .app-page, .office-*). O site de verdade é multi-página, tem
   login, checkout e duas barras que o JAVASCRIPT monta sozinho:

     lucrei.js      → rodapé completo (.rodape) e o botão Entrar
     aplicativo.js  → troca a barra inteira por .barra-app quando tem sessão

   Este arquivo é a cola: carrega DEPOIS de lucrei.css e de v5.css e acerta o
   que só existe aqui (barra, rodapé, faixa de volta) na linguagem do v5.
   NÃO mexe no dashboard (/painel, index.html) — aquilo tem CSS próprio.
   ========================================================================== */

/* ---- HERANÇA: o lucrei.css pinta todo h1/h2/h3 de escuro e todo link de roxo.
   Nas seções escuras do v5 isso dava texto preto no fundo preto (o título do
   dashboard e o "Pare de decidir no escuro" sumiam). Nas telas novas quem manda
   é o bloco onde o título está. ---- */
/* O :where() vale ZERO na conta da especificidade: estas regras empatam com o
   `h1{...}` do lucrei.css (e ganham por vir depois), mas PERDEM para qualquer
   regra do pacote v5 com classe (.hero h1, .final-cta h2...). Sem o :where() a
   correção passava por cima do pacote e o título do hero caía para 32px. */
:where(body.v5) h1, :where(body.v5) h2, :where(body.v5) h3, :where(body.v5) h4 {
  color: inherit; font-family: var(--font-brand);
  font-size: revert; line-height: revert; letter-spacing: revert;
}
/* links herdam a cor do bloco — MENOS os que ja sao botoes, que tem cor propria */
body.v5 main a:not([class]) { color: inherit; }
body.v5 a.product-card, body.v5 a.course-card, body.v5 a.agent-card,
body.v5 .prompt-card a, body.v5 .app-page .sidebar a, body.v5 .back-site,
body.v5 .office-agent-item a { color: inherit; }
body.v5 p { margin: 0 0 1em; }

/* ---- o v5 manda em tudo que é ícone de traço, mas o rodapé usa ícone de
   preenchimento (Instagram, TikTok...). Sem isto eles somem. ---- */
.rodape .sociais svg,
.zap-fixo svg { fill: currentColor; stroke: none; }

/* ---- largura: o site antigo usava 1180, o v5 usa 1240 ---- */
.wrap { max-width: 1240px; padding: 0 24px; }

/* ---- BARRA DE VENDAS (quem ainda não entrou) ---- */
header.barra {
  position: sticky; top: 0; z-index: 30;
  background: rgba(245,246,249,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(11,13,20,.07);
  box-shadow: 0 8px 28px rgba(11,13,20,.035);
}
header.barra .wrap { display: flex; align-items: center; gap: 16px; min-height: 76px; }
header.barra .logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px; letter-spacing: -.03em; color: var(--ink); }
header.barra .logo img { border-radius: 9px; }
header.barra nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
header.barra nav a {
  color: #487E94; font-weight: 650; font-size: 14.5px;
  padding: 10px 13px; border-radius: 11px;
}
header.barra nav a:hover { background: rgba(11,13,20,.05); color: var(--ink); }
header.barra nav a.atual { color: var(--ink); background: rgba(87,232,203,.10); }
header.barra nav a.primary { color: #fff; }
header.barra nav a.primary:hover { color: #fff; background: #1A2A31; }
header.barra .menu-btn {
  display: none; margin-left: auto; border: 1px solid #D5DBE9; background: #fff;
  border-radius: 11px; padding: 9px 14px; font-weight: 700;
}

/* ---- BARRA DO APLICATIVO (quem já entrou) — montada por aplicativo.js ---- */
header.barra.barra-app { background: var(--ink); border-bottom-color: rgba(255,255,255,.09); backdrop-filter: none; box-shadow: none; }
header.barra.barra-app .wrap { min-height: 64px; }
header.barra.barra-app .logo { color: #fff; }
header.barra.barra-app nav { margin-left: 12px; }
header.barra.barra-app nav a { color: rgba(255,255,255,.72); }
header.barra.barra-app nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
header.barra.barra-app nav a.atual { background: rgba(87,232,203,.34); color: #fff; }
header.barra.barra-app .app-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- faixa "você está vendo o site de vendas" ---- */
.faixa-volta { background: var(--lime); color: var(--ink); font-weight: 700; }
.faixa-volta .wrap { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }

/* ---- RODAPÉ (montado por lucrei.js) na cara do v5 ---- */
footer[data-rodape] {
  background: var(--ink); color: rgba(255,255,255,.74);
  margin-top: 72px; padding: 64px 0 40px;
}
footer[data-rodape] .logo { color: #fff; font-weight: 900; font-size: 20px; display: inline-flex; align-items: center; gap: 10px; }
footer[data-rodape] h4 { color: rgba(255,255,255,.5); }
footer[data-rodape] a { color: rgba(255,255,255,.76); }
footer[data-rodape] a:hover { color: var(--lime); }
footer[data-rodape] .sociais a { background: rgba(255,255,255,.08); color: #fff; }
footer[data-rodape] .sociais a:hover { background: var(--lime); color: var(--ink); }
footer[data-rodape] .rodape-baixo { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
.rodape-app { background: var(--ink); color: rgba(255,255,255,.6); padding: 22px 0; margin-top: 60px; font-size: 14px; }
.rodape-app .wrap { display: flex; gap: 10px; flex-wrap: wrap; }
.rodape-app a { color: rgba(255,255,255,.78); }

/* ---- páginas v5 dentro do site multi-página ----
   No pacote original cada tela era uma .page escondida por rota. Aqui cada
   tela é um arquivo, então a página sempre aparece. ---- */
.page { display: block; }
.app-page { min-height: calc(100vh - 76px); }
body.v5 { background: var(--paper); }
body.v5 main { display: block; }

/* o v5 desenhava o app com a barra lateral colada no topo da janela; aqui a
   barra do site já ocupa o topo, então a lateral começa embaixo dela */
.app-page .sidebar, .app-page .office-panel { top: 76px; height: calc(100vh - 76px); }

/* ---- VITRINE DO PAINEL: no pacote v5 esta caixa vinha quebrada (as três
   faixas nasciam com position:absolute e a moldura fechava em 2px de altura).
   Aqui ela é uma pilha simples: faixa de cima, imagem, faixa de baixo. ---- */
.dashboard-shot.dashboard-tour { display: block; position: relative; }
.dashboard-shot-main > span.dashboard-tour-top,
.dashboard-shot-main > span.dashboard-tour-footer {
  position: static; left: auto; right: auto; bottom: auto;
  border: 0; border-radius: 0; backdrop-filter: none; background: #142025;
}
.dashboard-shot-main > span.dashboard-tour-top { border-bottom: 1px solid #28404A; }
.dashboard-shot-main > span.dashboard-tour-footer { border-top: 1px solid #28404A; }
.dashboard-shot-main > span.dashboard-tour-viewport {
  position: relative; display: block; height: 560px; overflow: hidden; padding: 0;
}
.dashboard-tour-viewport img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
@media (max-width: 720px) { .dashboard-tour-viewport { height: 400px; } }

/* ---- cartões de produto quando o produto não tem foto ---- */
/* Um produto ainda não tem arte de capa em pixel (o Controle de Devoluções).
   Em vez de um buraco escuro, a capa vira um ladrilho desenhado: degradê nas
   duas cores do produto + a malha de pixels por cima, para ficar na mesma
   família das outras sete. Quando a arte chegar, é só apontar o CAPA[slug].img. */
.product-cover.sem-foto {
  display: grid; place-items: center; position: relative;
  background: linear-gradient(135deg, var(--c1, #57E8CB), var(--c2, #90F1DE));
}
.product-cover.sem-foto:before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
    radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,.22), transparent 60%);
  background-size: 16px 16px, 16px 16px, 100% 100%;
}
.product-cover.sem-foto > * { position: relative; z-index: 1; }
.product-cover.sem-foto .cover-icon { position: static; width: 78px; height: 78px; }
.product-cover.sem-foto .cover-icon svg { width: 34px; height: 34px; stroke: #fff; }

/* ---- selo de grátis / preço no cartão ---- */
.product-meta b.gratis { color: #167F6A; }

/* ---- o botão do v5 como link ---- */
a.primary, a.ghost, a.light-button, a.text-link, a.cta-lime, a.plan-button { text-decoration: none; }

/* ---- avisos do site antigo dentro das telas novas ---- */
.aviso { border-radius: 14px; }
.aviso.esconde { display: none; }

/* ---- celular ---- */
@media (max-width: 900px) {
  header.barra .menu-btn { display: inline-flex; }
  header.barra nav {
    display: none; position: absolute; left: 12px; right: 12px; top: 70px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 10px; box-shadow: var(--shadow-soft);
  }
  header.barra nav.aberto { display: flex; }
  header.barra.barra-app nav { background: var(--ink-2); border-color: rgba(255,255,255,.12); }
  .app-page .sidebar, .app-page .office-panel { position: static; height: auto; }
}

/* ============ ESCRITÓRIO (página do v5 dentro do site) ============
   No pacote v5 o escritório ocupava a janela inteira. Aqui a barra do site
   continua no topo, então os painéis fixos começam abaixo dela. */
/* no pacote v5 o escritorio ocupa a janela inteira, sem barra e sem rodape */
body.v5-escritorio header.barra,
body.v5-escritorio .faixa-volta { display: none !important; }
body.v5-escritorio .office-panel { top: 0; bottom: 0; height: 100vh; }
body.v5-escritorio .office-chat-panel { top: 0; bottom: 0; }
body.v5-escritorio .office-stage { min-height: 100vh; }
body.v5-escritorio .office-panel .brand { margin-bottom: 22px; }
body.v5-escritorio footer, body.v5-escritorio .rodape-app { display: none; }
body.v5-escritorio .back-site { margin-top: 10px; text-align: center; }
@media (max-width: 1100px) {
  body.v5-escritorio .office-panel,
  body.v5-escritorio .office-chat-panel { position: relative; top: 0; }
  body.v5-escritorio .office-stage { min-height: 0; }

  /* 16/09/2026 — O PALCO DE 83 PIXELS.
     Medido com Playwright: entre ~980 e 1100px o palco do Escritório ficava
     com 174 a 247px de largura — o mapa, os cartões do topo e a caixa de
     entrada espremidos numa coluna de dedo.

     A causa: as duas linhas acima tiram os painéis do `position:fixed` e os
     jogam no fluxo, mas o `.office-stage` continuava com
     `margin-left:230px; margin-right:310px` (v5.css, @media max-width:1280px)
     — reservando 540px para painéis que já não estão flutuando. Ele pagava o
     espaço duas vezes: a margem fantasma E a largura real dos vizinhos.

     Agora, quando os painéis entram no fluxo, o palco para de reservar margem
     e simplesmente ocupa o que sobra. Nada mudou de lugar nem de cor: só
     deixou de descontar um espaço que não existe mais. */
  body.v5-escritorio .office-stage {
    margin-left: 0; margin-right: 0;
    width: auto; flex: 1 1 auto; min-width: 0;
  }
}
body.v5-escritorio .office-agent-list { flex: 1; min-height: 0; overflow-y: auto; }
body.v5-escritorio .back-site { color: rgba(255,255,255,.6); font-size: 13px; }

/* ============ BIBLIOTECA (página do v5) ============ */
body.v5-biblioteca { background: #102C36; }
body.v5-biblioteca .library-title h1,
body.v5-biblioteca .library-section-title h2,
body.v5-biblioteca .prompt-card h3 { color: #fff; }
body.v5-biblioteca .library-section-title .kicker { color: var(--blue-2); }
body.v5-biblioteca .library-content { min-height: calc(100vh - 76px); }
body.v5-biblioteca .library-flow b { color: #fff; }

/* a grade de produtos da landing respira como no pacote, sem o primeiro cartão
   dobrado (lá a home mostrava 4 de 7; aqui mostramos os 8 degraus) */
.products-preview .product-grid { padding-top: 20px; padding-bottom: 20px; }

/* 15/09 — landing: escada visual de produtos e equipe compacta da referência. */
body.v5 .products-preview { padding-top:96px; padding-bottom:82px; }
body.v5 .products-preview .products-heading { align-items:end; margin-bottom:18px; }
body.v5 .products-preview .products-heading h2 { max-width:900px; font-size:42px; letter-spacing:-.04em; }
body.v5 .products-preview .products-heading .text-link { align-self:end; margin-bottom:7px; font-weight:800; }
body.v5 .products-preview .product-grid.compact { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
body.v5 .products-preview .pixel-product { min-height:326px; }
body.v5 .products-preview .product-cover { height:142px; }
body.v5 .products-preview .product-body { padding:18px; }
body.v5 .products-preview .product-body h3 { font-size:17px; }
body.v5 .products-preview .product-body p { font-size:13px; line-height:1.55; }

body.v5 .landing-agents { grid-template-columns:minmax(260px,.72fr) minmax(560px,1.28fr); gap:72px; padding-top:82px; padding-bottom:96px; }
body.v5 .landing-agents .agents-intro h2 { max-width:12ch; font-size:48px; line-height:1.02; letter-spacing:-.04em; }
body.v5 .landing-agents .agents-intro p { max-width:47ch; }
body.v5 .landing-agents .agent-grid-compact { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
body.v5 .landing-agents .agent-grid-compact .agent-card { min-height:64px; padding:10px 12px; border-radius:12px; gap:10px; }
body.v5 .landing-agents .agent-grid-compact .agent-role-icon { position:static; order:-1; flex:0 0 auto; width:34px; height:34px; padding:7px; border-radius:10px; background:var(--agent); color:#fff; }
body.v5 .landing-agents .agent-grid-compact .agent-card > div { padding:0; }
body.v5 .landing-agents .agent-grid-compact b { font-size:13px; line-height:1.2; }
body.v5 .landing-agents .agent-grid-compact small { margin-top:2px; color:var(--muted); font-size:12px; line-height:1.25; }

@media(max-width:1000px){
  body.v5 .products-preview .product-grid.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.v5 .landing-agents { grid-template-columns:1fr; gap:36px; }
}
@media(max-width:720px){
  body.v5 .products-preview { padding-top:68px; padding-bottom:54px; }
  body.v5 .products-preview .products-heading { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
  body.v5 .products-preview .products-heading h2 { font-size:38px; }
  body.v5 .products-preview .products-heading .text-link { align-self:flex-start; margin:0; }
  body.v5 .products-preview .product-grid.compact { grid-template-columns:1fr; }
  body.v5 .products-preview .product-grid.compact .product-card:nth-child(4) { display:flex; }
  body.v5 .products-preview .product-grid.compact .product-card:nth-child(n+5) { display:none; }
  body.v5 .landing-agents { padding-top:60px; padding-bottom:70px; }
  body.v5 .landing-agents .agents-intro h2 { max-width:14ch; font-size:38px; }
  body.v5 .landing-agents .agent-grid-compact { grid-template-columns:1fr; }
}

/* a barra de busca da biblioteca: aqui são 5 áreas + "Todos", então a linha
   quebra em vez de espremer a busca */
body.v5-biblioteca .library-toolbar { flex-wrap: wrap; }
body.v5-biblioteca .library-toolbar .search-box { flex: 1 1 420px; min-width: 320px; }

/* ============ AJUSTES DE CONTRASTE FORA DAS FAIXAS ESCURAS ============
   A ".plan-assurance" do pacote nasceu para viver dentro da faixa escura
   (.comparison). Quando ela aparece numa seção clara — o "O que já está na
   fila", por exemplo — o texto ficava cinza-claro em cima de branco e
   praticamente sumia. Aqui ela vira um chip claro e legível. */
body.v5 section:not(.comparison) > .section-wrap > .plan-assurance span,
body.v5 section:not(.comparison) > .plan-assurance span {
  background: #fff;
  border-color: rgba(9,11,18,.12);
  color: var(--ink);
}
body.v5 section:not(.comparison) .plan-assurance svg { color: #2AA78E; }