/* ════════════════════════════════════════════════════════════════════
   Arkano — arkano-components.css | componentes funcionais no formato v2
   Camada reutilizável (auth, modal, créditos, footer, tooltip) escrita
   sobre os tokens de arkano-tokens.css. Carregada pela home standalone e,
   nos próximos grupos, pelo base.html. Mesma verdade visual em todo lugar.
   Azul-tempestade · Fraunces/Hanken/JetBrains · sem lib. | 2026-06-11
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   MARCADOR-PADRÃO — ponto luminoso pulsante (.ark-dot)
   Mesmo da seção "A carta não vem sozinha" (.proto-name .dot): bolinha ciano
   com glow + pulso. É o marcador CANÔNICO do Arkano — substitui estrelas/
   bullets avulsos. Usar sempre este como marcador. | 2026-06-11
   ════════════════════════════════════════════════════════════════════ */
.ark-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; vertical-align: middle;
  background: var(--ark-cyan); box-shadow: var(--ark-neon-soft);
  animation: ark-dotpulse 2.4s var(--ark-ease) infinite; }
@keyframes ark-dotpulse { 0%, 100% { box-shadow: 0 0 5px 0 rgba(37,99,235,.45); transform: scale(1); } 45% { box-shadow: 0 0 16px 4px rgba(96,165,250,.75); transform: scale(1.35); } }

/* variante on-bright: superfícies CLARAS (botões com gradiente azul). Contra-tom —
   navy escuro da paleta (#061024, cor do texto do botão) no lugar do ciano; halo neon
   não rende em fundo claro, então o pulso fica só na escala. | 2026-06-11 */
.ark-dot.on-bright { background: #061024; box-shadow: none; animation-name: ark-dotpulse-bright; }
@keyframes ark-dotpulse-bright { 0%, 100% { transform: scale(1); opacity: .92; } 45% { transform: scale(1.35); opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .ark-dot { animation: none; } }

/* ════════════════════════════════════════════════════════════════════
   MODAL DE BOAS-VINDAS (1ª visita) — bloco 1
   Estrutura no HTML: #arkano-welcome-overlay > .arkano-modal >
   (.ark-eye svg) (.ark-divider) (.ark-modal-title) (.ark-modal-body >
   .ark-modal-line[.accent]) (.ark-cta-btn) (.ark-cta-sub).
   O JS (index.html) controla quando exibe (visitante novo) e alterna
   display flex/none + opacity — o CSS abaixo NÃO mexe nisso. | 2026-06-11
   ════════════════════════════════════════════════════════════════════ */

/* overlay: cobre a tela com backdrop borrado escuro; centraliza o card quando
   o JS aplica display:flex. transition em opacity casa com o fade-out do JS
   (seta opacity=0 e remove em 400ms) — sem animação de opacity aqui para não
   colidir com o style inline do JS (animação venceria inline) | 2026-06-11 */
#arkano-welcome-overlay {
  position: fixed; inset: 0; z-index: 9000;
  align-items: center; justify-content: center; padding: 24px 20px;
  background: rgba(5, 7, 16, .85);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transition: opacity .4s var(--ark-ease);
}

/* card: superfície v2 + borda elevada + glow azul-tempestade; entra subindo
   com leve escala (sem perpetuar movimento — v2 usa micro-interação, não loop) | 2026-06-11 */
.arkano-modal {
  background: linear-gradient(180deg, var(--ark-surface), var(--ark-bg-2));
  border: 1px solid var(--ark-border-2);
  border-radius: var(--ark-radius-lg);
  padding: clamp(30px, 7vw, 40px) clamp(24px, 6vw, 32px);
  max-width: 372px; width: 100%; text-align: center;
  box-shadow: 0 40px 120px -30px #000, var(--ark-glow-soft);
  animation: ark-modal-in .55s var(--ark-ease) both;
}
@keyframes ark-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* olho-marca: pulsa devagar; cor e brilho vêm dos tokens v2 — o CSS vence os
   atributos stroke inline do SVG, harmonizando o ícone à paleta | 2026-06-11 */
.ark-eye { width: 60px; height: 60px; margin: 0 auto 20px; animation: ark-eye-pulse 3.6s var(--ark-ease) infinite; }
.ark-eye svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(96, 165, 250, .55)); }
.ark-eye svg path, .ark-eye svg circle { stroke: var(--ark-cyan-hi); }
@keyframes ark-eye-pulse { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

/* divisor: fio fino com gradiente azul que apaga nas pontas | 2026-06-11 */
.ark-divider { width: 40px; height: 1px; margin: 0 auto 20px;
  background: linear-gradient(90deg, transparent, var(--ark-cyan-hi), transparent); }

/* título: serifa display v2 em branco; sem pontuação final; balance evita
   linha com palavra sozinha em qualquer largura (par com   no HTML) | 2026-06-11 */
.ark-modal-title { font-family: var(--ark-font-display); font-weight: 500;
  font-size: clamp(1.25rem, 5vw, 1.5rem); color: #fff; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 16px;
  text-wrap: balance; }

/* corpo: texto humanista atenuado; .accent realça em azul-relâmpago; strong em branco.
   pretty puxa a última palavra pra evitar órfã (reforçado por   no HTML) | 2026-06-11 */
.ark-modal-body { margin-bottom: 26px; }
.ark-modal-line { font-family: var(--ark-font-body); font-size: .96rem; color: var(--ark-text-dim); line-height: 1.6; margin: 0 0 6px; text-wrap: pretty; }
.ark-modal-line.accent { color: var(--ark-cyan-hi); }
.ark-modal-line strong { color: #fff; font-weight: 600; }

/* CTA primário: só a PELE (gradiente ciano→azul + neon + layout full-width).
   A ANIMAÇÃO vem da classe .ark-btn no HTML — mesmo brilho-que-varre + lift dos
   CTAs do site (hero/planos), sem duplicar movimento aqui. balance evita órfã. | 2026-06-11 */
.ark-cta-btn {
  width: 100%; border: 0; border-radius: var(--ark-radius-sm); cursor: pointer;
  padding: 16px 22px; font-family: var(--ark-font-body); font-weight: 600; font-size: 1rem; color: #061024;
  background: linear-gradient(135deg, var(--ark-cyan-hi), var(--ark-blue)); box-shadow: var(--ark-neon-soft);
  margin-bottom: 12px; -webkit-tap-highlight-color: transparent; text-wrap: balance;
}
/* sem marcador no botão: o "pulsar" migra para o LABEL — respiro sutil (escala+opacidade)
   no mesmo ritmo do .ark-dot (2.4s), dá vida ao CTA sem o ponto | 2026-06-11 */
.ark-cta-pulse { display: inline-block; animation: ark-cta-pulse 2.4s var(--ark-ease) infinite; }
@keyframes ark-cta-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 45% { transform: scale(1.05); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ark-cta-pulse { animation: none; } }

/* reassurance abaixo do CTA — agora EVIDENTE: corpo humanista, maior e mais claro
   (sai do tom apagado mono); o valor "por nossa conta" realçado em ciano | 2026-06-11 */
.ark-cta-sub { font-family: var(--ark-font-body); font-size: clamp(.84rem, 3.4vw, .94rem); color: var(--ark-text-dim); line-height: 1.5; text-wrap: pretty; }
.ark-cta-sub strong { color: var(--ark-cyan-hi); font-weight: 600; }

/* acessibilidade: desliga movimento do modal/olho se o usuário pedir | 2026-06-11 */
@media (prefers-reduced-motion: reduce) {
  .arkano-modal { animation: none; }
  .ark-eye { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   LIGHTBOX / CARD-ALERT das cartas (§2) — clique amplia + explicação
   Mobile: coluna, imagem grande quase tela cheia. PC: linha (carta + texto). | 2026-06-11
   ════════════════════════════════════════════════════════════════════ */
#ark-card-lightbox { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(5, 7, 16, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#ark-card-lightbox.open { display: flex; }
.ark-cl-panel { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(14px, 3vw, 24px); width: 100%; max-width: 380px; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--ark-surface), var(--ark-bg-2)); border: 1px solid var(--ark-border-2);
  border-radius: var(--ark-radius-lg); padding: clamp(18px, 4vw, 26px);
  box-shadow: 0 40px 120px -30px #000, var(--ark-glow-soft); animation: ark-modal-in .45s var(--ark-ease) both; }
/* carta INTEIRA no tamanho natural (sem aspect-ratio/cover forçados que cortariam) | 2026-06-11 */
.ark-cl-img { width: auto; height: auto; max-width: 100%; max-height: 56vh;
  border-radius: 10px; border: 1px solid var(--ark-border-2); box-shadow: 0 16px 44px -16px #000; }
.ark-cl-pos { font-family: var(--ark-font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ark-cyan-hi); }
.ark-cl-title { font-family: var(--ark-font-display); font-weight: 500; color: #fff; font-size: clamp(1.3rem, 5vw, 1.7rem); margin: 6px 0 10px; }
.ark-cl-desc { font-family: var(--ark-font-body); color: var(--ark-text-dim); font-size: .98rem; line-height: 1.6; margin: 0; max-width: 44ch; text-wrap: pretty; }
.ark-cl-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--ark-border-2); background: rgba(255, 255, 255, .04); color: var(--ark-text);
  font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.ark-cl-close:hover { border-color: var(--ark-cyan); color: #fff; }
/* PC: card-alert lado a lado (carta à esquerda, explicação à direita) | 2026-06-11 */
@media (min-width: 640px) {
  .ark-cl-panel { flex-direction: row; align-items: center; text-align: left; max-width: 620px; gap: 26px; padding: 28px; }
  .ark-cl-img { max-height: 60vh; flex: none; }
  .ark-cl-meta { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ark-cl-panel { animation: none; } }

/* ════════════════════════════════════════════════════════════════════
   RODAPÉ (.ark-footer) — formato v2 (estava órfão, sem CSS)
   Linha discreta de links legais; reutilizável pela home e pelo base.html. | 2026-06-11
   ════════════════════════════════════════════════════════════════════ */
.ark-footer { display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px var(--ark-pad-x) 56px; border-top: 1px solid var(--ark-border);
  font-family: var(--ark-font-mono); font-size: .72rem; letter-spacing: .02em; color: var(--ark-text-mut); }
.ark-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; }
.ark-footer a { color: var(--ark-text-dim); text-decoration: none; transition: color .25s var(--ark-ease); }
.ark-footer a:hover { color: var(--ark-cyan-hi); }
.ark-footer-sep { color: var(--ark-text-mut); opacity: .55; }
/* copyright/posse: linha discreta abaixo dos links | 2026-06-11 */
.ark-footer-copy { margin: 0; font-size: .66rem; color: var(--ark-text-mut); opacity: .75; text-align: center; }

/* ════════════════════════════════════════════════════════════════════
   AUTH (verificação humana → OTP → perfil) — gate antes do /chat
   Só PELE v2 (padrão de input/botão do site); JS/ids/fluxo INTACTOS. | 2026-06-12
   Substitui o CSS antigo inline do #auth-box no index.html.
   ════════════════════════════════════════════════════════════════════ */
#auth-box, #credits-box { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200;
  width: min(440px, 92vw); max-height: 88vh; overflow-y: auto; text-align: center;
  background: linear-gradient(180deg, var(--ark-surface), var(--ark-bg-2));
  border: 1px solid var(--ark-border-2); border-radius: var(--ark-radius-lg); padding: clamp(24px, 5.5vw, 36px);
  box-shadow: 0 40px 120px -30px #000, var(--ark-glow-soft); font-family: var(--ark-font-body); color: var(--ark-text); }
#auth-box::before, #credits-box::before { content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgba(5, 7, 16, .85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* título do passo (serifa v2) + subtítulo | 2026-06-12 */
.auth-title { font-family: var(--ark-font-display); font-weight: 500; color: #fff; line-height: 1.25; letter-spacing: -.01em;
  font-size: clamp(1.15rem, 4.5vw, 1.45rem); margin: 0 0 8px; text-wrap: balance; }
.auth-sub { font-family: var(--ark-font-body); color: var(--ark-text-dim); font-size: .92rem; line-height: 1.55; margin: 0 0 18px; text-wrap: pretty; }
.auth-sub strong { color: var(--ark-cyan-hi); font-weight: 600; }
/* botão "continuar com Google" (GSI) centralizado | 2026-06-12 */
.g_id_signin { display: flex; justify-content: center; }

/* input no padrão da barra do hero | 2026-06-12 */
.auth-input { width: 100%; padding: 16px 18px; border-radius: 14px; margin: 8px 0;
  background: rgba(20, 28, 58, .55); border: 1px solid var(--ark-border-2); color: var(--ark-text);
  font-family: var(--ark-font-body); font-size: 16px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .3s var(--ark-ease), box-shadow .3s var(--ark-ease); }
.auth-input::placeholder { color: var(--ark-text-mut); }
.auth-input:focus { outline: none; border-color: var(--ark-cyan); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18), var(--ark-neon-soft); }

/* botão v2 = só pele (gradiente+neon); .ark-btn no HTML dá o brilho/lift do site | 2026-06-12 */
.auth-btn { width: 100%; border: 0; border-radius: 14px; cursor: pointer; padding: 15px 18px; margin-top: 8px;
  font-family: var(--ark-font-body); font-weight: 600; font-size: 1rem; color: #061024;
  background: linear-gradient(135deg, var(--ark-cyan-hi), var(--ark-blue)); box-shadow: var(--ark-neon-soft);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; -webkit-tap-highlight-color: transparent; }
.auth-btn-icon { flex: none; }

/* separador "ou" | 2026-06-12 */
.auth-separator { display: flex; align-items: center; gap: 12px; margin: 16px 0;
  font-family: var(--ark-font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ark-text-mut); }
.auth-separator::before, .auth-separator::after { content: ""; flex: 1; height: 1px; background: var(--ark-border); }

/* texto fino (privacidade/termos) — sai do cinza antigo | 2026-06-12 */
.auth-fine { font-family: var(--ark-font-body); font-size: .74rem; color: var(--ark-text-mut); line-height: 1.55; margin: 14px 0 0; }
.auth-fine a { color: var(--ark-text-dim); text-decoration: underline; }
.auth-fine a:hover { color: var(--ark-cyan-hi); }

/* mensagens de erro/ok — antes saíam SEM cor | 2026-06-12 */
.auth-msg { font-family: var(--ark-font-body); font-size: .85rem; line-height: 1.4; margin: 10px 0 0; min-height: 1.2em; }
.auth-msg.erro { color: var(--ark-danger); }
.auth-msg.ok { color: var(--ark-cyan-hi); }

/* link de ação (ex.: reenviar código) | 2026-06-12 */
.auth-link { color: var(--ark-cyan-hi); cursor: pointer; font-size: .85rem; margin-top: 12px; display: inline-block; }
.auth-link:hover { text-decoration: underline; }

/* passo C (perfil/coleta): aviso-mapa + checkbox anônimo no v2 (sai do indigo/slate) | 2026-06-12 */
.auth-note { text-align: left; background: rgba(37, 99, 235, .08); border: 1px solid rgba(37, 99, 235, .25); border-radius: var(--ark-radius-sm); padding: 16px 18px; margin-bottom: 14px; }
.auth-note-title { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-family: var(--ark-font-body); font-size: .85rem; font-weight: 600; color: var(--ark-cyan-hi); letter-spacing: .02em; }
.auth-note-text { margin: 0 0 10px; font-family: var(--ark-font-body); font-size: .84rem; line-height: 1.6; color: var(--ark-text-dim); }
.auth-note-text strong { color: #fff; font-weight: 600; }
.auth-note-list { display: flex; flex-direction: column; gap: 6px; }
.auth-note-list p { margin: 0; font-family: var(--ark-font-body); font-size: .78rem; line-height: 1.5; color: var(--ark-text-mut); display: flex; gap: 8px; align-items: flex-start; }
.auth-note-list p::before { content: "•"; color: var(--ark-cyan-hi); flex: none; }
.auth-anon-q { font-family: var(--ark-font-body); font-size: .78rem; color: var(--ark-text-mut); margin: 0 0 8px; text-align: left; }
.auth-anon-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-bottom: 14px; padding: 12px 14px;
  background: rgba(37, 99, 235, .06); border: 1px solid rgba(37, 99, 235, .30); border-radius: var(--ark-radius-sm); }
.auth-anon-label input[type=checkbox] { margin-top: 3px; accent-color: var(--ark-cyan); cursor: pointer; flex-shrink: 0; }
.auth-anon-label span { font-family: var(--ark-font-body); font-size: .8rem; line-height: 1.5; color: var(--ark-text-dim); }