/* ============================================================
   Notalis — site público (apps/site)
   Fonte da verdade: docs/marca/BRIEF-NOTALIS.md
   ============================================================ */

/* ------------------------------------------------------------
   Tokens de marca — copiados de docs/marca/tokens.css
   (NÃO alterar valores sem OK do Rafael)
   ------------------------------------------------------------ */
:root{
  /* Neutros / tinta */
  --ink:      #0F172A;
  --ink-2:    #334155;
  --muted:    #64748B;
  --line:     #E6E8EF;
  --bg:       #F5F6FB;
  --card:     #FFFFFF;

  /* Marca — indigo acadêmico + ouro (nota) */
  --brand:    #4338CA;
  --brand-2:  #6366F1;
  --brand-ink:#312E81;
  --brand-soft:#EEF0FF;
  --gold:     #C99A2E;
  --gold-soft:#FBF3DF;

  /* Estados de correção (semânticos — NÃO trocar) */
  --ok:       #059669;
  --ok-soft:  #E7F6EF;
  --err:      #DC2626;
  --err-soft: #FCECEC;

  /* Forma */
  --radius-card: 16px;
  --radius-ctl:  12px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);

  /* Tipografia */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Inter', -apple-system, system-ui, sans-serif;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg{ max-width: 100%; display: block; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--ink);
}

p{ margin: 0 0 1em; }

a{ color: var(--brand); }

:focus-visible{
  outline: 3px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* Link "pular para o conteúdo" */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-ctl) 0;
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus{ left: 0; }

.container{
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------------------------------------
   Botões (brief §5: raio 12px)
   ------------------------------------------------------------ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius-ctl);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover{ background: var(--brand-ink); }
.btn-ghost{
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover{ border-color: var(--brand); color: var(--brand); }
.btn-lg{ padding: 16px 28px; font-size: 17px; }

/* Botões sobre fundo indigo (CTA final) */
.btn-invert{
  background: #fff;
  color: var(--brand);
}
.btn-invert:hover{ background: var(--brand-soft); color: var(--brand-ink); }

/* ------------------------------------------------------------
   Cards e pills (brief §5)
   ------------------------------------------------------------ */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand);
}
.pill.ok{ background: var(--ok-soft); color: var(--ok); }
.pill.gold{ background: var(--gold-soft); color: var(--gold); }
.pill.muted{ background: var(--bg); color: var(--muted); }

/* ------------------------------------------------------------
   Cabeçalho / navegação
   ------------------------------------------------------------ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245,246,251,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.brand-lockup{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-lockup img{ width: 34px; height: 34px; }
.wordmark{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--ink);
}
.wordmark .lis{ color: var(--brand); }

.nav-links{
  display: none;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a{
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
.nav-links a:hover{ color: var(--brand); }

.nav-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-actions .btn{ padding: 10px 16px; white-space: nowrap; }

/* Em telas muito estreitas o "Entrar" sai da nav
   (continua no hero e no CTA final) */
@media (max-width: 479px){
  .nav-actions .btn-ghost{ display: none; }
  .wordmark{ font-size: 21px; }
}
@media (min-width: 760px){
  .nav-links{ display: flex; }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero{
  padding: 48px 0 40px;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.hero h1{
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -.01em;
  margin-bottom: 16px;
}
.hero .sub{
  font-size: 18px;
  color: var(--ink-2);
  max-width: 34em;
  margin-bottom: 28px;
}
.hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.hero-note{
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-2); /* --muted sobre --bg fica 4,41:1 (< AA 4,5:1) */
}

@media (min-width: 900px){
  .hero{ padding: 72px 0 64px; }
  .hero-grid{ grid-template-columns: 1.05fr .95fr; gap: 56px; }
}

/* ------------------------------------------------------------
   Mock de correção (hero) — espelho da Tela 3 "Corrigindo"
   (docs/marca/telas-referencia.md). Único lugar com verde/
   vermelho: verde = acerto, vermelho = erro (brief §2/§7).
   ------------------------------------------------------------ */
.mock{
  padding: 18px;
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
}
.mock-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.mock-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.mock-title img{ width: 22px; height: 22px; }

/* Câmera: painel escuro (quase-preto azulado) com moldura
   tracejada de leitura e cantos verdes em L (espelho Tela 3) */
.mock-cam{
  position: relative;
  background: var(--ink);
  border-radius: var(--radius-ctl);
  padding: 20px;
  overflow: hidden;
}
.mock-frame{
  position: relative;
  margin: 0 auto;
  max-width: 300px;
  padding: 14px;
  border: 1.5px dashed rgba(255,255,255,.28);
  border-radius: 10px;
}
.mock-frame .corner{
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid var(--ok);
  border-radius: 3px;
}
.corner.tl{ top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.corner.tr{ top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.corner.bl{ bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.corner.br{ bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

/* Cartão-resposta em miniatura dentro da moldura */
.sheet{
  background: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}
.sheet-row{
  display: flex;
  align-items: center;
  gap: 8px;
}
.sheet-row .q{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  width: 14px;
}
.sheet-row i{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
}
.sheet-row i.fill{
  background: var(--ink);
  border-color: var(--ink);
}

/* Linha de leitura da câmera */
.mock-scan{
  position: absolute;
  left: 8%;
  right: 8%;
  top: 20%;
  height: 2px;
  background: var(--brand-2);
  border-radius: 2px;
  box-shadow: 0 0 12px var(--brand-2);
  animation: scan 2.6s ease-in-out infinite alternate;
}
@keyframes scan{
  from{ top: 16%; }
  to{ top: 82%; }
}
/* Status da leitura ("● Lendo cartão… mantenha na moldura") */
.mock-status{
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.78);
}
.mock-status .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .35; }
}

/* Progresso: anel 18/28 (verde) + média ao vivo (espelho Tela 3) */
.mock-progress{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ring{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(var(--ok) 231deg, var(--line) 0);
  display: grid;
  place-items: center;
}
.ring-txt{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
}
.prog-copy{
  flex: 1;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}
.prog-copy strong{ display: block; font-size: 13.5px; color: var(--ink); }
.prog-avg{ text-align: right; }
.avg-num{
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: var(--ok);
}
.avg-label{ font-size: 11px; color: var(--muted); }

/* Correções em tempo real (espelho Tela 3) */
.mock-live{ padding-top: 12px; }
.live-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.live-head strong{ font-size: 13.5px; }
.live-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
}
.live-row.recent{ background: var(--ok-soft); }
.live-row .ava{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}
.live-name{
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-dots{
  display: flex;
  gap: 4px;
  flex: none;
}
.live-dots i{
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.live-dots i.ok{ background: var(--ok); }
.live-dots i.err{ background: var(--err); }
.live-grade{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  min-width: 34px;
  text-align: right;
}
.live-grade.g-ok{ color: var(--ok); }
.live-grade.g-gold{ color: var(--gold); }
.live-grade.g-err{ color: var(--err); }

/* ------------------------------------------------------------
   Barra de confiança
   ------------------------------------------------------------ */
.trust{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card);
  padding: 18px 0;
}
.trust ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
}
.trust li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.trust li svg{ color: var(--brand); flex: none; }

/* ------------------------------------------------------------
   Seções
   ------------------------------------------------------------ */
.section{ padding: 64px 0; scroll-margin-top: 72px; }
.section-head{
  max-width: 620px;
  margin-bottom: 40px;
}
.section-head h2{ font-size: clamp(26px, 3.5vw, 36px); }
.section-head p{ color: var(--ink-2); margin: 0; }

/* 3 passos */
.steps{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.step{
  padding: 26px;
}
.step-num{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: var(--brand);
  display: block;
  margin-bottom: 12px;
}
.step h3{ font-size: 21px; margin-bottom: 6px; }
.step p{ color: var(--ink-2); margin: 0; font-size: 15px; }

@media (min-width: 760px){
  .steps{ grid-template-columns: repeat(3, 1fr); }
}

/* Grade de recursos */
.features{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.feature{
  padding: 26px;
}
.feature .icon{
  width: 44px;
  height: 44px;
  border-radius: var(--radius-ctl);
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feature h3{ font-size: 18px; margin-bottom: 6px; }
.feature p{ color: var(--ink-2); margin: 0; font-size: 15px; }

@media (min-width: 620px){
  .features{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px){
  .features{ grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------
   CTA final (indigo)
   ------------------------------------------------------------ */
.cta-final{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-ink) 100%);
  border-radius: var(--radius-card);
  padding: 56px 24px;
  text-align: center;
  color: #fff;
}
.cta-final h2{
  color: #fff;
  font-size: clamp(26px, 3.5vw, 38px);
}
.cta-final p{
  color: #DDE0FF;
  max-width: 34em;
  margin: 0 auto 28px;
}
.cta-final .hero-ctas{ justify-content: center; }
.cta-final .btn-ghost{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.45);
}
.cta-final .btn-ghost:hover{ border-color: #fff; color: #fff; }

/* ------------------------------------------------------------
   Rodapé
   ------------------------------------------------------------ */
.site-footer{
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 32px 0;
  margin-top: 64px;
}
.footer-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.footer-brand img{ width: 24px; height: 24px; }
.footer-brand .wordmark{ font-size: 18px; }
.footer-links{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.footer-links a{
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
}
.footer-links a:hover{ color: var(--brand); }
.footer-copy{
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* ------------------------------------------------------------
   Página de Perguntas frequentes (perguntas-frequentes.html)
   Mesmos tokens/componentes do site. Acordeão acessível com
   <details>/<summary> nativo — funciona sem JavaScript.
   ------------------------------------------------------------ */

/* Item de nav marcado como página atual */
.nav-links a[aria-current="page"]{ color: var(--brand); font-weight: 600; }

/* Cabeçalho da página */
.faq-hero{
  padding: 48px 0 8px;
}
.faq-eyebrow{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 10px;
}
.faq-hero h1{
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -.01em;
  margin-bottom: 14px;
  max-width: 18em;
}
.faq-lead{
  font-size: 18px;
  color: var(--ink-2);
  max-width: 40em;
  margin-bottom: 24px;
}

/* Índice de seções (âncoras) */
.faq-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.faq-jump a{
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  transition: border-color .15s ease, background-color .15s ease;
}
.faq-jump a:hover{ border-color: var(--brand); background: var(--brand-soft); }

/* Corpo da FAQ */
.faq-wrap{
  padding: 32px 20px 24px;
  max-width: 820px;
}
.faq-section{
  margin-bottom: 40px;
  scroll-margin-top: 84px;
}
.faq-section h2{
  font-size: clamp(22px, 3vw, 28px);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--brand-soft);
}

/* Acordeão — cada pergunta é um <details> */
.faq-item{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item + .faq-item{ margin-top: 0; }

.faq-item > summary{
  list-style: none;               /* remove marcador padrão (WebKit trata abaixo) */
  cursor: pointer;
  padding: 18px 52px 18px 20px;
  position: relative;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--ink);
}
.faq-item > summary::-webkit-details-marker{ display: none; }
.faq-item > summary:hover{ color: var(--brand); }

/* Seta indicadora (+ que gira para −), à direita */
.faq-item > summary::after{
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.faq-item[open] > summary::after{
  transform: translateY(-30%) rotate(-135deg);
}

/* Foco de teclado visível no summary inteiro */
.faq-item > summary:focus-visible{
  outline: 3px solid var(--brand-2);
  outline-offset: -3px;
  border-radius: var(--radius-card);
}

.faq-answer{
  padding: 0 20px 20px;
  color: var(--ink-2);
  font-size: 15.5px;
}
.faq-answer p{ margin: 0 0 12px; }
.faq-answer p:last-child{ margin-bottom: 0; }
.faq-answer ul,
.faq-answer ol{
  margin: 0 0 12px;
  padding-left: 22px;
}
.faq-answer li{ margin-bottom: 8px; }
.faq-answer li:last-child{ margin-bottom: 0; }
.faq-answer strong{ color: var(--ink); }

/* Voltar ao topo do site */
.faq-back{
  margin: 8px 0 0;
}
.faq-back a{
  font-weight: 600;
  text-decoration: none;
}
.faq-back a:hover{ text-decoration: underline; }

/* Aviso de material em preparação (rodapé da FAQ) */
.faq-beta-note{
  background: var(--gold-soft);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-ctl);
  padding: 14px 16px;
  font-size: 14px;
  margin: 0 0 24px;
}
.faq-beta-note strong{ color: var(--ink); }