/**
 * Atlas One — Componentes
 * ------------------------------------------------
 * Biblioteca de componentes reutilizáveis (Especificação de Redesign,
 * Seção 2), além do Shell. Começa com IA Thinking — o componente mais
 * importante do sistema: generaliza o único padrão que a auditoria
 * encontrou já funcionando de verdade (o checklist nomeado do módulo
 * Validar) pra toda chamada de IA da plataforma (Art. 4).
 *
 * Depende de tokens.css já carregado antes.
 */

.atlas-ia-thinking{
  display:flex; flex-direction:column; gap:2px;
  background:var(--atlas-surface); border:1px solid var(--atlas-border);
  border-radius:var(--atlas-radius-lg); padding:8px;
}
.ia-step{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--atlas-radius-md);
  opacity:0.4; transition:opacity var(--atlas-duration-padrao) var(--atlas-ease-instrumento);
}
.ia-step.is-active{ opacity:1; background:var(--atlas-surface-2); }
.ia-step.is-done{ opacity:0.75; }
.ia-step-dot{
  width:18px; height:18px; border-radius:50%; flex-shrink:0; position:relative;
  border:2px solid var(--atlas-border);
}
.ia-step.is-active .ia-step-dot{
  /* Atlas Brand System (Art. 14): "Atlas pensando/gerando" passou a ser
     linguagem de marca (Gold), não mais roxo genérico de "IA". */
  border-color:var(--atlas-gold); border-top-color:transparent;
  animation:atlas-spin 0.8s linear infinite;
}
.ia-step.is-done .ia-step-dot{
  border-color:var(--atlas-olive); background:var(--atlas-olive);
}
.ia-step.is-done .ia-step-dot::after{
  content:""; position:absolute; left:5px; top:2px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.ia-step-label{ font-size:13.5px; color:var(--atlas-text); }
.ia-step.is-done .ia-step-label{ color:var(--atlas-text-soft); }

@keyframes atlas-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .ia-step.is-active .ia-step-dot{ animation:none; border-top-color:var(--atlas-gold); }
}

/* Sparkline (AtlasComponents.sparkline) — só posicionamento, a linha em
   si é desenhada pela função JS a partir de dado real. */
.atlas-sparkline{ display:block; overflow:visible; }

/* ============================================================
   FASE 8 — Elevação Premium (craft visual sobre o Design System)
   ------------------------------------------------
   Achado real (print do usuário, tela "Gere seu Kit de Publicação"):
   cards/painéis de conteúdo em várias telas usavam só background+borda
   1px, sem NENHUM box-shadow -- enquanto .atlas-hero (acima) e
   .result-card/.overlay-card (mission-workspace.html) já usavam
   var(--atlas-elevation-*) há tempos. Nenhum token novo -- só uso mais
   consistente do que já existe. `.atlas-card` é a receita genérica pra
   qualquer painel/card de conteúdo NOVO daqui pra frente (telas que já
   têm sua própria classe local -- .kit-card, .publicar-bloco, .secao --
   replicam esta mesma receita diretamente no próprio arquivo, pra não
   criar uma cadeia de herança cross-arquivo).
   ============================================================ */
/* FASE 9 (referência visual do usuário): a sombra saiu. Na referência
   NENHUM card tem box-shadow -- o volume vem do gradiente diagonal de
   superfície + hairline tingido + raio grande. Sombra sobre preto quase
   sempre lê como borrão cinza, não como elevação; o gradiente lê. */
.atlas-card{
  background:var(--atlas-superficie-card);
  border:var(--atlas-hairline); border-radius:var(--atlas-radius-card);
  transition:background var(--atlas-duration-padrao) var(--atlas-ease-instrumento),
    border-color var(--atlas-duration-padrao) var(--atlas-ease-instrumento),
    transform var(--atlas-duration-padrao) var(--atlas-ease-instrumento);
}
/* Só em cards genuinamente interativos (clicáveis/hover com propósito) --
   nunca em painéis estáticos de leitura, senão o "levantar" vira ruído. */
.atlas-card--interactive:hover{
  background:var(--atlas-superficie-card-hover); border:var(--atlas-hairline-forte); transform:translateY(-2px);
}

/* Eyebrow em pílula -- abre toda seção na referência: ponto + rótulo
   curto em maiúscula, marca a 8% de fundo e 30% de borda.
   NOME: `.atlas-eyebrow`, nunca `.atlas-pill` -- `.atlas-pill` JÁ EXISTE
   mais abaixo neste mesmo arquivo como pílula de STATUS (com as variantes
   -gold/-olive/-route/-ocre/-neutro, usadas em ativos.html,
   meus-negocios.html e quartel-general.html). Reaproveitar aquele nome
   vazaria fundo dourado, caixa alta e o ponto do ::before pra TODA pílula
   de status do produto. Dois componentes diferentes, dois nomes. */
.atlas-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:var(--atlas-radius-full);
  background:color-mix(in srgb,var(--atlas-gold) 8%,transparent);
  border:0.8px solid color-mix(in srgb,var(--atlas-gold) 30%,transparent);
  color:var(--atlas-gold-deep); font-size:12px; font-weight:500; letter-spacing:0.03em; text-transform:uppercase;
}
.atlas-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--atlas-gold); flex-shrink:0; }

/* Headline grande + palavra-chave em gradiente. O gradiente no TEXTO
   (background-clip) é a assinatura da referência -- é o que faz a frase
   parecer desenhada, não digitada. */
.atlas-headline{
  font-family:var(--atlas-font-display); font-weight:700; letter-spacing:-0.02em;
  line-height:1.1; color:var(--atlas-text); text-wrap:balance;
}
.atlas-accent{
  background:var(--atlas-gradiente-marca); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Chip/filtro -- fundo translúcido escuro + hairline, pílula. */
.atlas-chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  border-radius:var(--atlas-radius-full); background:color-mix(in srgb,var(--atlas-tinta-200) 60%,transparent);
  border:var(--atlas-hairline); color:var(--atlas-text-soft); font-size:14px; cursor:pointer;
  transition:border-color var(--atlas-duration-micro) var(--atlas-ease-instrumento),color var(--atlas-duration-micro) var(--atlas-ease-instrumento);
}
.atlas-chip:hover{ border:var(--atlas-hairline-forte); color:var(--atlas-text); }
.atlas-chip.is-ativo{ background:color-mix(in srgb,var(--atlas-gold) 10%,transparent); border:var(--atlas-hairline-forte); color:var(--atlas-gold-deep); }

/* Ritmo vertical de seção da referência: 96px acima e abaixo (já existe
   como --atlas-space-9), 128px só no topo da primeira dobra. */
.atlas-secao{ padding:var(--atlas-space-9) 0; }
.atlas-secao-topo{ padding:128px 0 var(--atlas-space-8); }

/* Barra de progresso -- preenchimento no gradiente de marca, com o
   mesmo glow descendente da ação primária. */
.atlas-progress-track{ border-radius:var(--atlas-radius-full); overflow:hidden; background:var(--atlas-tinta-200); }
.atlas-progress-fill{
  height:100%; border-radius:var(--atlas-radius-full);
  /* Progresso é MEDIDA, não ação: ciano. */
  background:var(--atlas-route);
  box-shadow:0 0 12px color-mix(in srgb,var(--atlas-route) 35%,transparent);
  transition:width var(--atlas-duration-padrao) var(--atlas-ease-instrumento);
}

/* ============================================================
   REDESIGN — Quartel-General (golden master visual, Fase 1)
   Componentes novos, pensados pra propagar depois pro resto do
   produto. Nenhum valor solto -- tudo var(--atlas-*).
   ============================================================ */

/* ---------- Grid / container ---------- */
.atlas-container{ max-width:var(--atlas-container); margin:0 auto; padding:0 var(--atlas-gutter); position:relative; }
.atlas-row{ display:grid; grid-template-columns:1fr; gap:var(--atlas-space-5); }
@media(min-width:1024px){
  .atlas-row-hero{ grid-template-columns:minmax(0,1fr) 300px; }
  .atlas-row-missoes{ grid-template-columns:minmax(0,1fr) 320px; }
}

/* ---------- Textura ambiental ---------- */
.atlas-ambient-wrap{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.atlas-ambient-compass{
  position:absolute; top:-180px; right:-220px; width:680px; height:680px;
  color:var(--atlas-gold); opacity:0.05;
}
@media(max-width:768px){ .atlas-ambient-compass{ width:420px; height:420px; top:-100px; right:-140px; } }

/* ---------- Hero de negócio ---------- */
.atlas-hero{
  /* Gradiente decorativo -- era tingido de azul (--atlas-route-soft),
     sem nenhum significado de "info" aqui, só textura. Migrado pra
     dourado sutil (Art Brand System: sem significado semântico
     específico -> linguagem de marca). */
  position:relative; background:linear-gradient(145deg,var(--atlas-surface) 45%,color-mix(in srgb,var(--atlas-gold-soft) 45%,var(--atlas-surface)) 145%);
  border:1px solid var(--atlas-border); border-radius:var(--atlas-radius-lg);
  padding:26px 28px; overflow:hidden; box-shadow:var(--atlas-elevation-1);
}
.atlas-hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.atlas-hero-eyebrow{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--atlas-text-faint); margin-bottom:6px; }
.atlas-hero-nome{ font-family:var(--atlas-font-display); font-size:21px; color:var(--atlas-text); line-height:1.2; }
.atlas-hero-sub{ font-size:13px; color:var(--atlas-text-soft); margin-top:4px; }

/* Rota mini (timeline horizontal) -- mesma linguagem visual da
   Sidebar (dot + linha), numa escala maior, pra ser o elemento de
   progresso forte que o hero pede. */
.atlas-route-mini{ display:flex; align-items:flex-start; margin-top:22px; }
.atlas-route-mini-step{ flex:1; display:flex; flex-direction:column; align-items:center; position:relative; min-width:0; }
.atlas-route-mini-line{
  position:absolute; top:6px; left:-50%; width:100%; height:2px; background:var(--atlas-border); z-index:0;
}
.atlas-route-mini-step:first-child .atlas-route-mini-line{ display:none; }
.atlas-route-mini-step.is-done .atlas-route-mini-line{ background:color-mix(in srgb,var(--atlas-olive) 58%,var(--atlas-border)); }
.atlas-route-mini-dot{
  width:13px; height:13px; border-radius:50%; background:var(--atlas-surface-2); border:2px solid var(--atlas-border);
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.atlas-route-mini-step.is-done .atlas-route-mini-dot{ background:var(--atlas-route); border-color:var(--atlas-route); transition:background var(--atlas-duration-momento),border-color var(--atlas-duration-momento),transform var(--atlas-duration-momento); }
.atlas-route-mini-step.is-current .atlas-route-mini-dot{ border-color:var(--atlas-gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--atlas-gold) 16%,transparent),0 0 12px color-mix(in srgb,var(--atlas-gold) 14%,transparent); }
.atlas-route-mini-dot svg{ width:8px; height:8px; color:var(--atlas-bg); }
.atlas-route-mini-label{
  font-size:11px; color:var(--atlas-text-faint); margin-top:8px; text-align:center; line-height:1.3;
  max-width:64px;
}
.atlas-route-mini-step.is-done .atlas-route-mini-label{ color:var(--atlas-olive); }
.atlas-route-mini-step.is-current .atlas-route-mini-label{ color:var(--atlas-gold-deep); font-weight:650; }
/* "Locked" não tem relação nenhuma com IA -- usava roxo só porque
   era a cor decorativa disponível. Neutro/tracejado comunica bloqueado
   sem inventar um 3º significado de cor na mesma timeline. */
.atlas-route-mini-step.is-locked .atlas-route-mini-dot{ border-style:dashed; border-color:var(--atlas-border-strong); background:var(--atlas-surface-2); }
.atlas-route-mini-step.is-locked .atlas-route-mini-dot svg{ color:var(--atlas-text-faint); width:9px; height:9px; }
.atlas-route-mini-step.is-locked .atlas-route-mini-label{ color:var(--atlas-text-faint); }

/* ---------- Status pill ---------- */
.atlas-pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:650;
  padding:3px 10px; border-radius:var(--atlas-radius-full); white-space:nowrap; line-height:1.5;
}
.atlas-pill svg{ width:11px; height:11px; }
.atlas-pill-gold{ background:var(--atlas-gold-soft); color:var(--atlas-gold-deep); }
.atlas-pill-olive{ background:var(--atlas-olive-soft); color:var(--atlas-olive); }
.atlas-pill-route{ background:var(--atlas-route-soft); color:var(--atlas-route); }
.atlas-pill-ocre{ background:var(--atlas-ocre-soft); color:var(--atlas-ocre); }
.atlas-pill-neutro{ background:var(--atlas-surface-2); color:var(--atlas-text-faint); }

/* ---------- Negócios (lista compacta, seletor de contexto) ---------- */
.atlas-negocios{
  background:var(--atlas-surface); border:1px solid var(--atlas-border); border-radius:var(--atlas-radius-lg);
  padding:16px; display:flex; flex-direction:column; gap:2px;
}
.atlas-negocios-titulo{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--atlas-text-faint); margin-bottom:8px; padding:0 4px; }
.atlas-negocio-row{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:var(--atlas-radius-md);
  text-decoration:none; color:inherit; transition:background var(--atlas-duration-micro) var(--atlas-ease-instrumento);
}
.atlas-negocio-row:hover{ background:var(--atlas-surface-2); }
.atlas-negocio-row.is-atual{ background:var(--atlas-surface-2); box-shadow:inset 2px 0 0 0 var(--atlas-gold); }
.atlas-negocio-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--atlas-text-faint); }
.atlas-negocio-row.is-lancado .atlas-negocio-dot{ background:var(--atlas-olive); }
.atlas-negocio-nome{ font-size:13px; color:var(--atlas-text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atlas-negocio-estagio{ font-size:11px; color:var(--atlas-text-faint); flex-shrink:0; }
.atlas-negocios-novo{
  display:flex; align-items:center; gap:8px; padding:9px 8px; margin-top:4px; border-radius:var(--atlas-radius-md);
  border:1px dashed var(--atlas-border); color:var(--atlas-text-soft); font-size:12.5px; cursor:pointer;
  background:none; width:100%; text-align:left; font-family:var(--atlas-font-body);
  transition:border-color var(--atlas-duration-micro), color var(--atlas-duration-micro);
}
.atlas-negocios-novo:hover{ border-color:var(--atlas-gold); color:var(--atlas-gold-deep); }
.atlas-negocios-novo svg{ width:14px; height:14px; flex-shrink:0; }

/* ---------- Copiloto (protagonista) ----------
   Atlas Brand System (Art. 14): este é O painel que representa "o Atlas
   está falando com você" -- era roxo genérico de "IA", agora usa a
   linguagem de marca (Gold), a mesma de .ia-step. */
.atlas-copilot{
  position:relative; background:linear-gradient(145deg,var(--atlas-surface) 55%,color-mix(in srgb,var(--atlas-gold-soft) 50%,var(--atlas-surface)) 145%); border:1px solid var(--atlas-gold-border);
  border-radius:var(--atlas-radius-lg); padding:26px 28px; overflow:hidden;
}
.atlas-copilot::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--atlas-gold) 0%, transparent 55%);
}
.atlas-copilot-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.atlas-copilot-eyebrow{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--atlas-gold-deep); }
.atlas-copilot-eyebrow svg{ width:14px; height:14px; }
.atlas-copilot-live{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--atlas-text-faint); font-family:var(--atlas-font-mono); }
.atlas-copilot-live-dot{ width:6px; height:6px; border-radius:50%; background:var(--atlas-olive); animation:atlas-pulse 2.4s ease-in-out infinite; flex-shrink:0; }
@keyframes atlas-pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(127,189,114,0.35); } 50%{ opacity:0.7; box-shadow:0 0 0 4px rgba(127,189,114,0); } }
.atlas-copilot h2{ font-family:var(--atlas-font-display); font-size:21px; line-height:1.3; margin-bottom:8px; max-width:640px; }
.atlas-copilot-motivo{ font-size:14px; color:var(--atlas-text-soft); line-height:1.6; max-width:600px; margin-bottom:18px; }
.atlas-copilot-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.atlas-copilot-porque{ background:none; border:none; font-family:var(--atlas-font-body); font-size:13px; color:var(--atlas-text-faint); cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px; }
.atlas-copilot-porque:hover{ color:var(--atlas-text-soft); }
@media(prefers-reduced-motion:reduce){ .atlas-copilot-live-dot{ animation:none; } }

/* ---------- Motion contínuo como sistema ----------
   Primitivo único de entrada, pra não seguir reinventando fade-up
   local em cada tela (achado real: cada página que já tinha essa
   animação -- quartel-general.html, a cerimônia de conclusão -- definia
   o próprio @keyframes com valores ligeiramente diferentes). Uso:
   class="atlas-entrada" + style="animation-delay:Nms" por item, sempre
   condicionado a só animar na PRIMEIRA renderização de uma tela/lista --
   nunca em re-renders disparados por interação do próprio usuário
   (editar um campo, salvar, etc.), senão a entrada replica a cada ação
   e vira ruído em vez de intenção. */
.atlas-entrada{ opacity:0; animation:atlas-fade-up 420ms var(--atlas-ease-instrumento) both; }
@keyframes atlas-fade-up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce){ .atlas-entrada{ animation:none; opacity:1; } }

/* ---------- Próximas missões (cards horizontais) ---------- */
.atlas-missoes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.atlas-missao-card{
  display:flex; flex-direction:column; gap:10px; background:var(--atlas-surface); border:1px solid var(--atlas-border);
  border-radius:var(--atlas-radius-lg); padding:16px; text-decoration:none; color:inherit;
  transition:border-color var(--atlas-duration-micro) var(--atlas-ease-instrumento), transform var(--atlas-duration-micro) var(--atlas-ease-instrumento);
}
.atlas-missao-card:hover{ border-color:var(--atlas-gold); transform:translateY(-1px); }
.atlas-missao-num{ display:flex; align-items:center; gap:8px; font-family:var(--atlas-font-mono); font-size:11px; color:var(--atlas-text-faint); }
.atlas-missao-num svg{ width:15px; height:15px; color:var(--atlas-gold-muted); }
.atlas-missao-titulo{ font-size:14.5px; font-weight:650; color:var(--atlas-text); line-height:1.3; }
.atlas-missao-desc{ font-size:12.5px; color:var(--atlas-text-soft); line-height:1.5; flex:1; }
.atlas-missao-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.atlas-missao-tempo{ font-size:11px; color:var(--atlas-text-faint); font-family:var(--atlas-font-mono); }
.atlas-missao-cta{ font-size:12.5px; color:var(--atlas-gold-deep); font-weight:600; }

/* ---------- Atividade (feed compacto) ---------- */
.atlas-feed{ display:flex; flex-direction:column; }
.atlas-feed-item{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--atlas-border-soft); }
.atlas-feed-item:last-child{ border-bottom:none; }
.atlas-feed-icon{ width:26px; height:26px; border-radius:50%; background:var(--atlas-surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--atlas-text-faint); }
.atlas-feed-icon svg{ width:13px; height:13px; }
.atlas-feed-texto{ font-size:13px; color:var(--atlas-text-soft); line-height:1.5; flex:1; }
.atlas-feed-texto strong{ color:var(--atlas-text); font-weight:600; }
.atlas-feed-quando{ font-size:11px; color:var(--atlas-text-faint); flex-shrink:0; white-space:nowrap; margin-top:2px; }

/* ---------- Painel (surface genérica pra listas -- Atividade, etc.) ---------- */
.atlas-painel{ background:var(--atlas-surface); border:1px solid var(--atlas-border); border-radius:var(--atlas-radius-lg); padding:18px 20px; }
.atlas-painel-info{ background:linear-gradient(145deg,var(--atlas-surface) 68%,color-mix(in srgb,var(--atlas-route-soft) 45%,var(--atlas-surface))); border-color:color-mix(in srgb,var(--atlas-route) 20%,var(--atlas-border)); }
.atlas-painel-titulo{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--atlas-text-faint); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }

/* ---------- Dados semânticos do hero ---------- */
.atlas-stat{display:grid;grid-template-columns:24px 1fr;column-gap:8px;align-items:center;min-width:112px;}
.atlas-stat-icon{grid-row:1 / span 2;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--atlas-surface-2);color:var(--atlas-text-faint);}
.atlas-stat-icon svg{width:13px;height:13px;}
.atlas-stat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--atlas-text-faint);}
.atlas-stat-value{font-family:var(--atlas-font-mono);font-size:18px;font-weight:700;color:var(--atlas-text);font-variant-numeric:tabular-nums;}
.atlas-stat.is-info .atlas-stat-icon,.atlas-stat.is-info .atlas-stat-value{color:var(--atlas-route);}
.atlas-stat.is-info .atlas-stat-icon{background:var(--atlas-route-soft);}
.atlas-stat.is-success .atlas-stat-icon,.atlas-stat.is-success .atlas-stat-value{color:var(--atlas-olive);}
.atlas-stat.is-success .atlas-stat-icon{background:var(--atlas-olive-soft);}

@media(hover:hover){
  .atlas-hero:hover,.atlas-painel:hover,.atlas-negocios:hover{border-color:color-mix(in srgb,var(--atlas-gold) 20%,var(--atlas-border));}
  .atlas-copilot:hover{border-color:color-mix(in srgb,var(--atlas-gold) 45%,var(--atlas-border));box-shadow:0 0 28px var(--atlas-gold-glow);}
}

/* ---------- Modal de escolha de gancho (Página de Vendas, 4 aberturas) ---------- */
.atlas-gancho-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:atlas-fadein var(--atlas-duration-padrao) var(--atlas-ease-instrumento);}
.atlas-gancho-modal{background:var(--atlas-surface);border:1px solid var(--atlas-border);border-radius:var(--atlas-radius-lg);padding:28px;max-width:720px;width:100%;max-height:90vh;overflow-y:auto;}
.atlas-gancho-titulo{font-size:var(--atlas-text-h3);color:var(--atlas-text);margin-bottom:6px;}
.atlas-gancho-subtitulo{font-size:var(--atlas-text-body-sm);color:var(--atlas-text-soft);margin-bottom:20px;line-height:1.6;}
.atlas-gancho-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
@media (max-width:600px){.atlas-gancho-grid{grid-template-columns:1fr;}}
.atlas-gancho-card{text-align:left;background:var(--atlas-surface-2);border:1.5px solid var(--atlas-border);border-radius:var(--atlas-radius-md);padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:6px;font-family:inherit;
  transition:border-color var(--atlas-duration-micro) var(--atlas-ease-instrumento),background var(--atlas-duration-micro) var(--atlas-ease-instrumento),transform var(--atlas-duration-micro) var(--atlas-ease-instrumento);}
.atlas-gancho-card:hover{border-color:var(--atlas-gold);background:var(--atlas-gold-soft);transform:translateY(-2px);}
@keyframes atlas-fadein{ from{ opacity:0; } to{ opacity:1; } }
@media(prefers-reduced-motion:reduce){ .atlas-gancho-overlay{ animation:none; } .atlas-gancho-card:hover{ transform:none; } }
.atlas-gancho-rotulo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;color:var(--atlas-gold-deep);}
.atlas-gancho-headline{font-size:16px;font-weight:700;color:var(--atlas-text);line-height:1.3;}
.atlas-gancho-sub{font-size:13px;color:var(--atlas-text-soft);line-height:1.5;}

/* ---------- Editor Conversacional (texto/HTML simples) ---------- */
.ia-conversa-bar{display:flex;gap:10px;align-items:center;padding:14px 18px;background:linear-gradient(135deg,var(--atlas-gold-soft),transparent);border:1px solid var(--atlas-border);border-radius:var(--atlas-radius-lg);margin-top:20px;}
.ia-conversa-icone{flex-shrink:0;color:var(--atlas-gold-deep);display:flex;}
.ia-conversa-bar input{flex:1;border:1.5px solid var(--atlas-border);border-radius:var(--atlas-radius-md);padding:10px 14px;font-family:inherit;font-size:14px;color:var(--atlas-text);background:var(--atlas-surface);}
.ia-conversa-bar input:focus{outline:none;border-color:var(--atlas-gold);}
.ia-conversa-erro{font-size:12.5px;color:var(--atlas-danger);margin-top:8px;}

/* ---------- Estado vazio/erro rico (icone + hierarquia real) ---------- */
.atlas-estado{text-align:center;padding:52px 32px;max-width:420px;margin:0 auto;}
.atlas-estado-icon{width:56px;height:56px;margin:0 auto 22px;border-radius:50%;
  background:var(--atlas-surface-2);border:1px solid var(--atlas-border);
  display:flex;align-items:center;justify-content:center;color:var(--atlas-text-faint);}
.atlas-estado-icon svg{width:24px;height:24px;}
.atlas-estado-icon.is-aviso{background:color-mix(in srgb,var(--atlas-ocre) 16%,var(--atlas-surface-2));
  border-color:color-mix(in srgb,var(--atlas-ocre) 32%,var(--atlas-border));color:var(--atlas-ocre);}
.atlas-estado h3{font-family:var(--atlas-font-display);font-size:19px;font-weight:700;color:var(--atlas-text);
  margin-bottom:10px;line-height:1.3;}
.atlas-estado p{color:var(--atlas-text-soft);font-size:14.5px;line-height:1.6;margin-bottom:24px;}
.atlas-estado-cta{font-size:14.5px;}