/* =========================================================================
   INVENTÁRIO DE METAPROGRAMAS — Instituto Lucas Naves
   Identidade: fundo profundo azul-petróleo, rede neural ciano, molduras douradas
   ========================================================================= */

:root{
  --bg-0:#01070d;
  --bg-1:#04121c;
  --bg-2:#062231;
  --ink:#eaf6ff;
  --ink-dim:#9db6c8;
  --ink-faint:#5f7b8d;

  --cyan:#31e0ff;
  --cyan-2:#0fb9e6;
  --cyan-deep:#0a6a86;
  --teal:#1f8f9d;

  --gold:#d9b365;
  --gold-2:#f3dfa8;
  --gold-deep:#8a6a2f;

  --glass:rgba(9,32,45,.62);
  --glass-2:rgba(12,44,60,.5);
  --line:rgba(49,224,255,.18);
  --line-strong:rgba(49,224,255,.4);

  --shadow: 0 24px 60px -20px rgba(0,0,0,.85);
  --glow: 0 0 24px rgba(49,224,255,.35);

  /* Geometria da moldura dourada. A moldura E a área de rolagem do conteúdo
     leem estas mesmas variáveis — é isso que garante que o conteúdo nunca
     possa cruzar as linhas douradas (ver ".stage" mais abaixo). */
  --fr-x:14px;                              /* recuo lateral e inferior */
  --fr-top:calc(var(--sh-h) + 14px);        /* abaixo do header */
  --fr-r:20px;                              /* raio dos cantos */
  --fr-h:calc(100vh - var(--fr-top) - var(--fr-x));   /* altura útil interna */

  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --ff: 'Montserrat','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
  --maxw: 1180px;

  /* header — valores extraídos de lucasnaves.com.br */
  --ff-nav: 'Sora','Montserrat',system-ui,sans-serif;
  --sh-bg:#f3f3f3;
  --sh-ink:#07152e;
  --sh-accent:#ff8500;
  --sh-divider:#363636;
  --sh-h:111px;          /* altura da barra do header */

  /* paleta das roscas — na tela, neon sobre fundo escuro.
     O bloco @media print troca estas oito variáveis por cores de papel. */
  --c0:#31e0ff; --c1:#d9b365; --c2:#5ef2c4; --c3:#ff9fb2;
  --c4:#a58cff; --c5:#ffcf6b; --c6:#6fb6ff; --c7:#ff8f66;
}

/* No celular a barra de endereço faz 100vh ser MAIOR que a área visível — o
   que criaria uma rolagem fantasma dentro da moldura. 100dvh acompanha a
   altura real. A linha acima fica como reserva para navegadores antigos. */
@supports (height:100dvh){
  :root{ --fr-h:calc(100dvh - var(--fr-top) - var(--fr-x)); }
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

/* A página em si não rola: quem rola é a área DENTRO da moldura (.stage).
   Assim o header fica sempre visível no topo e o conteúdo é recortado
   pelo retângulo arredondado da moldura. */
html,body{ height:100%; }

body{
  font-family:var(--ff);
  color:var(--ink);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- Fundo animado ---------- */
#bg-canvas{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  display:block;
}
.bg-wash{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(20,120,150,.28), transparent 62%),
    radial-gradient(900px 600px at 85% 15%, rgba(31,143,157,.18), transparent 60%),
    radial-gradient(1000px 800px at 10% 90%, rgba(6,60,80,.35), transparent 65%),
    linear-gradient(180deg, #01070d 0%, #04121c 45%, #01070d 100%);
}
.bg-vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,.75);
}

/* ---------- Moldura dourada global ---------- */
/* A moldura fica ACIMA do conteúdo (z-index 6 > 5): as linhas douradas são
   sempre a camada mais alta da cena, nunca podem ser cobertas. */
.frame{
  position:fixed; left:var(--fr-x); right:var(--fr-x); bottom:var(--fr-x); top:var(--fr-top);
  z-index:6; pointer-events:none;
  border-radius:var(--fr-r);
  border:1px solid rgba(217,179,101,.34);
  box-shadow: inset 0 0 0 1px rgba(217,179,101,.09), 0 0 40px rgba(217,179,101,.06);
}
.frame::before{
  content:''; position:absolute; inset:6px; border-radius:calc(var(--fr-r) - 5px);
  border:1px solid rgba(217,179,101,.14);
}

/* ---------- Layout ----------

   .stage ocupa EXATAMENTE o retângulo interno da moldura e é ela quem rola.
   Antes o documento inteiro rolava e a moldura era só um enfeite fixo por
   trás: ao rolar, as perguntas e a barra de progresso passavam por cima das
   linhas douradas. Agora o conteúdo é recortado pelo border-radius do
   contêiner — é fisicamente impossível cruzar a moldura, nos quatro lados. */
.stage{
  position:fixed; left:var(--fr-x); right:var(--fr-x); bottom:var(--fr-x); top:var(--fr-top);
  z-index:5;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  border-radius:var(--fr-r);
  scroll-behavior:smooth;
  /* barra de rolagem discreta, em ouro, dentro da moldura */
  scrollbar-width:thin; scrollbar-color:rgba(217,179,101,.32) transparent;
}
/* recebe foco só via script (tabindex="-1"), para que as teclas de rolagem
   funcionem — um contorno em volta da moldura inteira não faria sentido */
.stage:focus{ outline:none; }

.stage::-webkit-scrollbar{ width:10px; }
.stage::-webkit-scrollbar-track{ background:transparent; }
.stage::-webkit-scrollbar-thumb{
  background:rgba(217,179,101,.26); border-radius:99px;
  border:3px solid transparent; background-clip:content-box;
}
.stage::-webkit-scrollbar-thumb:hover{ background:rgba(217,179,101,.45); background-clip:content-box; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.screen{ display:none; }
.screen.active{ display:block; animation:screenIn .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes screenIn{ from{opacity:0; transform:translateY(18px) scale(.99);} to{opacity:1; transform:none;} }

/* =========================================================================
   HEADER — réplica do cabeçalho de lucasnaves.com.br
   Valores lidos do site: barra #F3F3F3, conteúdo com 1140px, logo a 180px,
   menu em Sora 300/16px, links #07152E com ativo/hover #FF8500.
   ========================================================================= */
.site-header{
  position:relative; z-index:40;
  background:var(--sh-bg);
  width:100%;
}
.sh-inner{
  max-width:1140px; margin:0 auto; padding:10px 15px;
  min-height:111px; display:flex; align-items:center; gap:24px;
}
.sh-logo{ display:block; flex:0 0 auto; line-height:0; }
.sh-logo img{ width:180px; height:auto; display:block; }

.sh-nav{ margin-left:auto; }
.sh-menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end;
}
.sh-menu > li{ position:relative; display:flex; align-items:center; }
/* separador vertical entre os itens, igual ao do site (2px, #363636, 16px de altura) */
.sh-menu > li:not(:last-child)::after{
  content:''; border-left:2px solid var(--sh-divider); height:16px; align-self:center;
}

.sh-menu a,
.sh-sub-toggle{
  font-family:var(--ff-nav); font-size:16px; font-weight:300; line-height:1.2;
  color:var(--sh-ink); text-decoration:none; white-space:nowrap;
  padding:13px 20px; background:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:color .2s;
}
.sh-menu a:hover, .sh-menu a:focus-visible,
.sh-sub-toggle:hover, .sh-sub-toggle:focus-visible,
.sh-has-sub:hover > .sh-sub-toggle{ color:var(--sh-accent); }

.sh-chev{ flex:0 0 auto; transition:transform .22s; }
.sh-has-sub:hover .sh-chev,
.sh-sub-toggle[aria-expanded="true"] .sh-chev{ transform:rotate(180deg); }

/* ---- submenu de "Cursos" ---- */
.sh-sub{
  position:absolute; top:100%; left:0; z-index:60;
  min-width:156px; margin:0; padding:0; list-style:none;
  background:var(--sh-bg);
  box-shadow:0 10px 26px -12px rgba(7,21,46,.35);
  display:none;
}
.sh-has-sub:hover > .sh-sub,
.sh-has-sub:focus-within > .sh-sub,
.sh-sub.open{ display:block; }
.sh-sub li{ display:block; }
.sh-sub li::after{ content:none; }
.sh-sub a{
  display:block; width:100%; padding:13px 20px;
  font-size:15.6px; color:#000;
}
.sh-sub a:hover, .sh-sub a:focus-visible{ color:var(--sh-accent); }

.sh-toggle{
  display:none; margin-left:auto; width:46px; height:46px;
  background:#e9e9e9; border:none; border-radius:4px; cursor:pointer;
  padding:13px 11px; flex-direction:column; justify-content:space-between;
}
.sh-toggle span{ display:block; height:2px; background:var(--sh-ink); border-radius:2px; }

@media (max-width:1180px){
  .sh-menu a, .sh-sub-toggle{ padding:13px 13px; font-size:14.5px; }
}
@media (max-width:900px){
  :root{ --sh-h:78px; }
  .sh-inner{ min-height:78px; padding:10px 18px; flex-wrap:wrap; }
  .sh-logo img{ width:150px; }
  .sh-toggle{ display:flex; }

  .sh-nav{
    display:none; order:3; width:100%; margin:6px 0 0;
    border-top:1px solid rgba(7,21,46,.12);
  }
  .sh-nav.open{ display:block; }
  .sh-menu{ flex-direction:column; align-items:stretch; }
  .sh-menu > li{ display:block; border-bottom:1px solid rgba(7,21,46,.08); }
  .sh-menu > li:not(:last-child)::after{ content:none; }   /* sem divisores verticais */
  .sh-menu a, .sh-sub-toggle{ width:100%; padding:14px 2px; font-size:16px; }
  .sh-sub-toggle{ justify-content:space-between; }

  /* no celular o submenu abre em acordeão, empurrando o conteúdo */
  .sh-sub{
    position:static; min-width:0; box-shadow:none;
    background:rgba(7,21,46,.04); padding:2px 0 6px;
  }
  .sh-has-sub:hover > .sh-sub, .sh-has-sub:focus-within > .sh-sub{ display:none; }
  .sh-sub.open{ display:block; }
  .sh-sub a{ padding:12px 2px 12px 18px; font-size:15px; }
}

/* =========================================================================
   TELA 1 — ABERTURA
   ========================================================================= */
.intro{ min-height:var(--fr-h); display:flex; flex-direction:column; justify-content:center; padding-top:60px; padding-bottom:40px; }
.intro-inner{ text-align:center; }

.eyebrow{
  font-size:11px; letter-spacing:.55em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin:34px 0 0;
  display:inline-flex; align-items:center; gap:16px;
}
.eyebrow::before,.eyebrow::after{
  content:''; width:54px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.eyebrow::after{ background:linear-gradient(90deg,var(--gold),transparent); }

.title-xl{
  margin:14px 0 6px;
  /* "METAPROGRAMAS" é uma palavra só e não quebra: o mínimo precisa ser
     pequeno o bastante para caber em telas de 320px sem ser cortada */
  font-size:clamp(26px, 8.6vw, 104px);
  line-height:.95;
  font-weight:800;
  letter-spacing:.02em;
  color:transparent;
  background:linear-gradient(180deg,#ffffff 0%,#bdeeff 42%,#3fc8ee 72%,#0d7ea0 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 26px rgba(49,224,255,.42));
  text-transform:uppercase;
}
.title-sub{
  font-size:clamp(13px,2.1vw,20px);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:500; margin:0 0 6px;
}
.lede{
  max-width:640px; margin:26px auto 0;
  color:var(--ink-dim); font-size:16px; line-height:1.7;
}
.lede strong{ color:var(--ink); font-weight:600; }

.quote-card{
  max-width:640px; margin:30px auto 0; padding:20px 26px;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-md);
  backdrop-filter:blur(10px);
  font-size:14.5px; line-height:1.65; color:var(--ink-dim); font-style:italic;
  position:relative;
}
.quote-card::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg,var(--cyan),transparent);
}
.quote-card cite{ display:block; margin-top:10px; font-style:normal; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }

.start-form{ margin:34px auto 0; max-width:440px; }
.field{ position:relative; }
.field input{
  width:100%; padding:17px 20px; border-radius:var(--r-md);
  background:rgba(4,20,30,.75); color:var(--ink);
  border:1px solid var(--line); outline:none;
  font-family:var(--ff); font-size:15.5px; letter-spacing:.02em;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder{ color:var(--ink-faint); }
.field input:focus{ border-color:var(--line-strong); box-shadow:var(--glow); background:rgba(6,30,42,.9); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:16px 34px; border-radius:var(--r-md); cursor:pointer;
  font-family:var(--ff); font-size:13px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  border:none; position:relative; overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.975); }
.btn-primary{
  color:#02121a;
  background:linear-gradient(135deg,var(--gold-2) 0%,var(--gold) 45%,#b98f3f 100%);
  box-shadow:0 12px 34px -12px rgba(217,179,101,.75), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:hover{ filter:brightness(1.08); box-shadow:0 16px 44px -12px rgba(217,179,101,.9), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-primary::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); animation:sheen 4.5s ease-in-out infinite;
}
@keyframes sheen{ 0%,72%{left:-120%;} 88%,100%{left:130%;} }

.btn-ghost{
  background:rgba(255,255,255,.03); color:var(--ink-dim);
  border:1px solid var(--line);
}
.btn-ghost:hover{ color:var(--ink); border-color:var(--line-strong); background:rgba(49,224,255,.07); }
.btn-full{ width:100%; margin-top:14px; }

.meta-row{
  display:flex; gap:28px; justify-content:center; flex-wrap:wrap;
  margin-top:30px; color:var(--ink-faint); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase;
}
.meta-row span{ display:flex; align-items:center; gap:7px; }
.dot{ width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }

.howto{
  max-width:560px; margin:28px auto 0; padding:22px 26px; text-align:left;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-md);
  backdrop-filter:blur(10px);
}
.howto h3{
  margin:0 0 12px; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.howto p{ margin:0 0 14px; font-size:14.5px; line-height:1.65; color:var(--ink-dim); }
.howto p b{ color:var(--ink); }
.howto ul{ margin:0; padding:0; list-style:none; }
.howto li{
  font-size:13.5px; line-height:1.6; color:var(--ink-dim);
  padding-left:18px; position:relative; margin-bottom:8px;
}
.howto li:last-child{ margin-bottom:0; }
.howto li::before{ content:'▸'; position:absolute; left:0; top:0; color:var(--cyan); font-size:11px; }
.howto li b{ color:var(--ink); }

.resume-note{
  margin-top:18px; font-size:13px; color:var(--ink-dim);
  display:none; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
}
.resume-note.show{ display:flex; }
.link-btn{
  background:none; border:none; color:var(--cyan); cursor:pointer;
  font-family:var(--ff); font-size:13px; text-decoration:underline; text-underline-offset:3px; padding:0;
}
.link-btn:hover{ color:var(--gold); }

/* =========================================================================
   TELA 2 — QUIZ
   ========================================================================= */
.quiz{ min-height:var(--fr-h); display:flex; flex-direction:column;
  padding-top:24px; padding-bottom:40px; padding-left:30px; padding-right:30px; }

/* Barra de progresso — um painel "HUD" que flutua DENTRO da moldura dourada,
   com cantos arredondados e vidro fosco. Como quem rola agora é a .stage, o
   "top:12px" gruda a barra 12px abaixo da linha dourada de cima: ela nunca
   sai do quadro. A opacidade é alta de propósito — com vidro mais claro as
   afirmações passavam por trás e brigavam com o texto da barra. */
.quiz-top{
  position:sticky; top:12px; z-index:20;
  padding:13px 20px 15px;
  border-radius:16px;
  background:rgba(4,16,25,.93);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  backdrop-filter:blur(20px) saturate(1.25);
  border:1px solid rgba(217,179,101,.24);
  box-shadow:0 20px 46px -26px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.05);
}
.quiz-top-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.quiz-brand{ display:flex; align-items:center; gap:10px; }
/* a marca é verde-petróleo: sobre o fundo escuro precisa do disco branco,
   que é como ela é aplicada na papelaria do instituto */
.quiz-brand img{
  width:30px; height:30px; display:block;
  background:#fff; border-radius:50%; padding:1px;
}
.quiz-brand span{ font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); }
.quiz-count{ font-size:12px; letter-spacing:.2em; color:var(--ink-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.quiz-count b{ color:var(--cyan); font-size:16px; }

.progress{
  height:5px; border-radius:99px; margin-top:12px;
  background:rgba(49,224,255,.1); overflow:hidden; position:relative;
}
.progress-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--cyan-deep),var(--cyan) 55%,var(--gold-2));
  box-shadow:0 0 16px rgba(49,224,255,.7);
  transition:width .5s cubic-bezier(.3,.9,.3,1);
}
.progress-fill::after{
  content:''; position:absolute; right:0; top:0; bottom:0; width:40px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5));
}

.q-area{ flex:1; display:flex; align-items:flex-start; padding:20px 0; }
.q-card{ width:100%; max-width:800px; margin:0 auto; }
.q-card.anim-in{ animation:qIn .45s cubic-bezier(.2,.85,.25,1) both; }
.q-card.anim-out{ animation:qOut .22s ease-in both; }
@keyframes qIn{ from{opacity:0; transform:translateX(34px);} to{opacity:1; transform:none;} }
@keyframes qOut{ to{opacity:0; transform:translateX(-26px);} }
.q-card.back.anim-in{ animation:qInBack .45s cubic-bezier(.2,.85,.25,1) both; }
@keyframes qInBack{ from{opacity:0; transform:translateX(-34px);} to{opacity:1; transform:none;} }

.q-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 11px; border-radius:99px;
  background:rgba(49,224,255,.08); border:1px solid var(--line);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
  margin-bottom:20px;
}
.q-chip i{ font-style:normal; font-size:14px; }

.q-text{
  font-size:clamp(21px,3.6vw,33px); line-height:1.32; font-weight:600;
  margin:0 0 30px; letter-spacing:-.005em;
  background:linear-gradient(180deg,#fff,#c6e9f8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Escala Likert 1–5 ---------- */
.likert{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.lk{
  /* linha 1 com altura fixa: os círculos crescem, mas os rótulos ficam alinhados */
  display:grid; grid-template-rows:56px auto; justify-items:center; align-items:center;
  gap:9px; padding:16px 8px; cursor:pointer;
  border-radius:var(--r-md); background:var(--glass); border:1px solid var(--line);
  color:var(--ink-dim); font-family:var(--ff);
  backdrop-filter:blur(8px);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s, box-shadow .2s, color .2s;
  animation:optIn .4s cubic-bezier(.2,.85,.25,1) both;
  -webkit-tap-highlight-color:transparent;
}
.lk:nth-child(1){ animation-delay:.04s; } .lk:nth-child(2){ animation-delay:.09s; }
.lk:nth-child(3){ animation-delay:.14s; } .lk:nth-child(4){ animation-delay:.19s; }
.lk:nth-child(5){ animation-delay:.24s; }

.lk-dot{
  display:grid; place-items:center; border-radius:50%;
  border:1.5px solid var(--line-strong); background:rgba(49,224,255,.07);
  transition:all .2s cubic-bezier(.2,.8,.2,1);
}
.lk-num{ font-size:15px; font-weight:700; color:var(--cyan); transition:color .2s; }
/* tamanho crescente: a régua é lida antes mesmo do texto */
.lk-1 .lk-dot{ width:30px; height:30px; } .lk-2 .lk-dot{ width:36px; height:36px; }
.lk-3 .lk-dot{ width:42px; height:42px; } .lk-4 .lk-dot{ width:48px; height:48px; }
.lk-5 .lk-dot{ width:54px; height:54px; }
/* discordância em dourado, concordância em ciano */
.lk-1 .lk-dot, .lk-2 .lk-dot{ border-color:rgba(217,179,101,.45); background:rgba(217,179,101,.07); }
.lk-1 .lk-num, .lk-2 .lk-num{ color:var(--gold); }

.lk-txt{ font-size:11px; line-height:1.35; text-align:center; letter-spacing:.02em; }
.lk-txt-full{ display:none; font-size:14px; text-align:left; }

.lk:hover{ border-color:var(--line-strong); background:rgba(15,52,70,.72); transform:translateY(-3px); color:var(--ink); }
.lk:hover .lk-dot{ transform:scale(1.08); }
.lk.selected{
  border-color:var(--gold); color:var(--ink);
  background:linear-gradient(180deg,rgba(217,179,101,.2),rgba(15,52,70,.6));
  box-shadow:0 14px 34px -18px rgba(217,179,101,.8);
}
.lk.selected .lk-dot{ background:var(--gold); border-color:var(--gold); transform:scale(1.06); }
.lk.selected .lk-num{ color:#0a1520; }

.likert-legend{
  display:flex; justify-content:space-between; margin-top:14px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);
}

.opts{ display:flex; flex-direction:column; gap:12px; }
.opt{
  display:flex; align-items:center; gap:16px; text-align:left; width:100%;
  padding:18px 20px; border-radius:var(--r-md); cursor:pointer;
  background:var(--glass); border:1px solid var(--line);
  color:var(--ink); font-family:var(--ff); font-size:15.5px; line-height:1.45;
  backdrop-filter:blur(8px);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s, box-shadow .2s;
  animation:optIn .4s cubic-bezier(.2,.85,.25,1) both;
  -webkit-tap-highlight-color:transparent;
}
.opt:nth-child(1){ animation-delay:.05s; } .opt:nth-child(2){ animation-delay:.11s; }
.opt:nth-child(3){ animation-delay:.17s; } .opt:nth-child(4){ animation-delay:.23s; }
@keyframes optIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.opt:hover{
  border-color:var(--line-strong); background:rgba(15,52,70,.72);
  transform:translateX(6px); box-shadow:-4px 0 0 0 var(--cyan), 0 14px 30px -18px rgba(49,224,255,.6);
}
.opt.selected{
  border-color:var(--gold); background:linear-gradient(90deg,rgba(217,179,101,.18),rgba(15,52,70,.6));
  box-shadow:-4px 0 0 0 var(--gold), 0 16px 34px -18px rgba(217,179,101,.6);
  transform:translateX(6px);
}
.opt-key{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  background:rgba(49,224,255,.1); border:1px solid var(--line);
  font-size:12px; font-weight:700; color:var(--cyan);
  transition:all .2s;
}
.opt:hover .opt-key{ background:rgba(49,224,255,.2); }
.opt.selected .opt-key{ background:var(--gold); border-color:var(--gold); color:#0a1520; }

.q-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:26px; gap:14px; }
.nav-hint{ font-size:11px; color:var(--ink-faint); letter-spacing:.12em; }
.nav-hint kbd{
  background:rgba(49,224,255,.1); border:1px solid var(--line); border-radius:5px;
  padding:2px 7px; font-family:var(--ff); font-size:10px; color:var(--cyan); margin:0 2px;
}
.btn-back{
  background:none; border:none; color:var(--ink-faint); cursor:pointer;
  font-family:var(--ff); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  padding:10px 0; display:flex; align-items:center; gap:8px;
  transition:color .2s, opacity .2s;
}
.btn-back:hover{ color:var(--cyan); }
.btn-back[disabled]{ opacity:.25; cursor:default; }

/* =========================================================================
   BLOCO DE AFIRMAÇÕES — várias perguntas por página
   ========================================================================= */
.block{ width:100%; max-width:760px; margin:0 auto; }
.block.anim-in{ animation:qIn .45s cubic-bezier(.2,.85,.25,1) both; }
.block.back.anim-in{ animation:qInBack .45s cubic-bezier(.2,.85,.25,1) both; }

.block-head{ margin-bottom:16px; }
.block-kicker{ font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--cyan); }
.block-hint{ margin:9px 0 0; font-size:15px; line-height:1.5; color:var(--ink-dim); max-width:58ch; }

.scale-legend{
  display:flex; justify-content:space-between; gap:12px;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  padding:0 2px 11px; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.scale-legend b{ color:var(--ink-dim); margin:0 4px; }

.q-list{ display:flex; flex-direction:column; gap:12px; }

.q-item{
  padding:15px 18px 17px; border-radius:var(--r-md);
  background:var(--glass); border:1px solid var(--line);
  backdrop-filter:blur(8px);
  transition:border-color .25s, background .25s, box-shadow .25s;
  animation:optIn .4s cubic-bezier(.2,.85,.25,1) both;
}
.q-item:nth-child(1){ animation-delay:.03s; } .q-item:nth-child(2){ animation-delay:.08s; }
.q-item:nth-child(3){ animation-delay:.13s; } .q-item:nth-child(4){ animation-delay:.18s; }
.q-item:nth-child(5){ animation-delay:.23s; }

.q-item.active{
  border-color:var(--line-strong);
  box-shadow:0 0 0 1px var(--line-strong), 0 18px 42px -26px rgba(49,224,255,.75);
}
.q-item.answered{ background:rgba(9,32,45,.42); border-color:rgba(217,179,101,.28); }
.q-item.answered .q-item-n{ background:var(--gold); border-color:var(--gold); color:#0a1520; }

.q-item-text{
  margin:0 0 14px; font-size:16.5px; line-height:1.5; color:var(--ink); font-weight:500;
  display:flex; gap:12px; align-items:flex-start;
}
.q-item-n{
  flex:0 0 auto; margin-top:1px; width:24px; height:24px; border-radius:7px;
  display:grid; place-items:center; font-size:11.5px; font-weight:700;
  background:rgba(49,224,255,.1); border:1px solid var(--line); color:var(--cyan);
  transition:all .2s;
}

.scale{ display:flex; align-items:center; gap:9px; }
.scale-end{
  flex:0 0 auto; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); width:62px;
}
.scale-end.lo{ text-align:right; }
.scale-end.hi{ text-align:left; }

.dot{
  flex:1 1 0; min-width:0; height:46px; cursor:pointer;
  display:grid; place-items:center; border-radius:12px;
  background:rgba(49,224,255,.06); border:1.5px solid var(--line);
  color:var(--cyan); font-family:var(--ff); font-size:15px; font-weight:700;
  transition:transform .14s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s, box-shadow .2s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
/* discordância em dourado, concordância em ciano — mesma leitura da versão antiga */
.dot.d1, .dot.d2{ color:var(--gold); border-color:rgba(217,179,101,.4); background:rgba(217,179,101,.06); }
.dot:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.dot.on{ color:#0a1520; background:var(--cyan); border-color:var(--cyan); box-shadow:0 12px 26px -14px rgba(49,224,255,.9); }
.dot.d1.on, .dot.d2.on{ background:var(--gold); border-color:var(--gold); box-shadow:0 12px 26px -14px rgba(217,179,101,.9); }

/* =========================================================================
   DIFERENCIAL SEMÂNTICO — a pessoa se posiciona entre duas frases opostas
   ========================================================================= */
.diff-stem{
  margin:0 0 13px; font-size:15.5px; line-height:1.45;
  color:var(--ink); font-weight:500;
}
.diff-row{ display:flex; align-items:center; gap:14px; }
.diff-pole{
  flex:1 1 0; min-width:0; font-size:13.5px; line-height:1.35; color:var(--ink-dim);
}
.diff-pole.lo{ text-align:right; }
.diff-pole.hi{ text-align:left; }

.diff-scale{ flex:0 0 auto; display:flex; align-items:center; gap:7px; position:relative; }
/* o centro não é "nenhum dos dois": é "depende do contexto" — resposta
   legítima em metaprogramas, e por isso vem rotulada */
.diff-scale::after{
  content:'depende'; position:absolute; left:50%; bottom:-13px;
  transform:translateX(-50%);
  font-size:8px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; pointer-events:none;
}
.diff-scale .dot{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  font-size:0;                       /* a régua não precisa de número */
  background:rgba(49,224,255,.06); border:1.5px solid var(--line);
}
/* as pontas são maiores: a régua se lê como um gradiente entre dois extremos */
.diff-scale .dot:nth-child(1), .diff-scale .dot:nth-child(7){ width:34px; height:34px; }
.diff-scale .dot:nth-child(2), .diff-scale .dot:nth-child(6){ width:31px; height:31px; }
.diff-scale .dot.mid{ width:24px; height:24px; border-style:dashed; }
.diff-scale .dot:hover{ transform:scale(1.12); border-color:var(--line-strong); }
.diff-scale .dot.on{
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(217,179,101,.18), 0 10px 22px -12px rgba(217,179,101,.9);
  transform:scale(1.06);
}
.q-item.diff.answered .diff-pole{ color:var(--ink-faint); }
.q-item.diff{ padding-bottom:26px; }   /* espaço para o rótulo "depende" */

/* =========================================================================
   ORDENAÇÃO FORÇADA — toque para ordenar + o quanto o 1º se destaca
   ========================================================================= */
.rank-prompt{
  margin:0 0 6px; font-size:18px; line-height:1.35; font-weight:600; color:var(--ink);
}
.rank-help{
  margin:0 0 15px; font-size:13px; line-height:1.5; color:var(--ink-faint);
}
.rank-help b{ color:var(--ink-dim); }

.rk-list{ display:flex; flex-direction:column; gap:9px; }
.rk{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  padding:14px 16px; border-radius:var(--r-md); cursor:pointer;
  background:rgba(49,224,255,.04); border:1.5px solid var(--line);
  color:var(--ink); font-family:var(--ff); font-size:15px; line-height:1.4;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.rk:hover{ border-color:var(--line-strong); background:rgba(15,52,70,.7); transform:translateX(4px); }
.rk-badge{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:12.5px; font-weight:700;
  background:rgba(49,224,255,.07); border:1.5px dashed var(--line); color:var(--cyan);
  transition:all .2s;
}
.rk.on{
  border-color:var(--gold);
  background:linear-gradient(90deg,rgba(217,179,101,.16),rgba(15,52,70,.55));
}
.rk.on .rk-badge{
  background:var(--gold); border-style:solid; border-color:var(--gold); color:#0a1520;
}

.rank-int{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .3s, max-height .35s cubic-bezier(.2,.8,.2,1);
}
.rank-int.show{ opacity:1; max-height:220px; }
.rank-int-q{ margin:0 0 11px; font-size:14.5px; color:var(--ink-dim); }
.rank-int-q b{ color:var(--cyan); }
.ri-row{ display:flex; gap:8px; flex-wrap:wrap; }
.ri{
  flex:1 1 auto; padding:11px 14px; border-radius:99px; cursor:pointer;
  background:rgba(49,224,255,.05); border:1.5px solid var(--line);
  color:var(--ink-dim); font-family:var(--ff); font-size:13px; font-weight:600;
  white-space:nowrap; transition:all .18s;
  -webkit-tap-highlight-color:transparent;
}
.ri:hover{ border-color:var(--line-strong); color:var(--ink); }
.ri.on{ background:var(--cyan); border-color:var(--cyan); color:#0a1520; }

.q-foot{ margin-top:22px; }
.block-status{
  text-align:center; font-size:12px; letter-spacing:.04em; color:var(--ink-faint);
  margin:0 0 12px; min-height:16px; transition:color .2s;
}
.block.ready .block-status{ color:var(--cyan); }
.q-nav{ margin-top:0; }

.btn-next{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px; border-radius:99px; cursor:pointer;
  font-family:var(--ff); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:#0a1520; border:none;
  background:linear-gradient(90deg,var(--cyan),var(--gold-2));
  box-shadow:0 16px 36px -18px rgba(49,224,255,.85);
  transition:transform .18s, box-shadow .18s, opacity .2s, filter .2s;
}
.btn-next:hover{ transform:translateY(-2px); }
.btn-next[disabled]{ opacity:.3; cursor:default; filter:saturate(.35); box-shadow:none; transform:none; }
.block.ready .btn-next{ animation:nextPulse 1.7s ease-in-out infinite; }
@keyframes nextPulse{
  0%,100%{ box-shadow:0 16px 36px -18px rgba(49,224,255,.85); }
  50%    { box-shadow:0 16px 46px -12px rgba(49,224,255,1); }
}

/* Calculando */
.calc{ min-height:var(--fr-h); display:flex; align-items:center; justify-content:center; text-align:center; }
.calc-ring{ width:150px; height:150px; margin:0 auto 30px; }
.calc h2{ font-size:clamp(20px,3vw,28px); letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin:0 0 12px; }
.calc p{ color:var(--ink-dim); font-size:14.5px; min-height:24px; transition:opacity .3s; letter-spacing:.04em; }

/* =========================================================================
   TELA 3 — DASHBOARD
   ========================================================================= */
.dash{ padding-top:34px; padding-bottom:90px; }

.dash-head{
  text-align:center; padding:24px 0 40px;
  border-bottom:1px solid rgba(217,179,101,.18); margin-bottom:44px;
}
.dash-head .eyebrow{ margin-top:22px; }
.dash-name{
  font-size:clamp(30px,6vw,58px); font-weight:800; margin:14px 0 8px;
  letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,#bdeeff 55%,#3fc8ee);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(49,224,255,.3));
}
.dash-date{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); }

.section{ margin-bottom:56px; }
.section-title{
  display:flex; align-items:center; gap:16px; margin:0 0 22px;
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.section-title::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(217,179,101,.4),transparent); }
.section-lede{ color:var(--ink-dim); font-size:14.5px; line-height:1.7; margin:-8px 0 24px; max-width:760px; }

/* Assinatura mental */
.signature{
  background:linear-gradient(135deg,rgba(9,42,58,.8),rgba(4,20,30,.7));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px; backdrop-filter:blur(12px); position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.signature::before{
  content:''; position:absolute; top:-60%; right:-10%; width:420px; height:420px;
  background:radial-gradient(circle,rgba(49,224,255,.16),transparent 68%);
  pointer-events:none;
}
.sig-text{ font-size:17px; line-height:1.8; color:var(--ink); margin:0; position:relative; }
.sig-text b{ color:var(--cyan); font-weight:700; }

.chips{ display:flex; flex-wrap:wrap; gap:11px; margin-top:24px; position:relative; }
.chip{
  display:inline-flex; align-items:center; gap:11px;
  padding:9px 16px; border-radius:14px;
  background:rgba(49,224,255,.09); border:1px solid var(--line-strong);
  color:var(--ink);
  animation:chipIn .5s cubic-bezier(.2,.85,.25,1) both;
}
.chip i{ font-style:normal; font-size:15px; flex:0 0 auto; }
.chip-b{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.chip-h{ font-size:12.5px; font-weight:600; letter-spacing:.03em; }
.chip b{ color:var(--gold); font-variant-numeric:tabular-nums; font-size:11.5px; margin-left:5px; }
/* descritor curto do traço */
.chip-s{ font-size:10.5px; font-weight:500; letter-spacing:.01em; color:var(--ink-dim); line-height:1.3; }
.chip-none{ border-radius:99px; border-style:dashed; color:var(--ink-dim); font-size:12.5px; font-weight:500; line-height:1.5; padding:10px 17px; }
@keyframes chipIn{ from{opacity:0; transform:scale(.85);} to{opacity:1; transform:none;} }

/* Aviso de qualidade da resposta */
.quality-note{
  margin:0 0 32px; padding:18px 22px; border-radius:var(--r-md);
  background:rgba(217,179,101,.09); border:1px solid rgba(217,179,101,.34);
  color:var(--ink-dim); font-size:14px; line-height:1.65;
}
.quality-note b{
  display:block; color:var(--gold); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; margin-bottom:7px; font-weight:600;
}

/* Barras bipolares */
.bars{ display:grid; gap:16px; }
.bar-card{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 22px; backdrop-filter:blur(8px);
  transition:border-color .25s, transform .25s;
}
.bar-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.bar-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:13px; flex-wrap:wrap; }
.bar-name{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.bar-verdict{ font-size:13.5px; font-weight:700; color:var(--gold); letter-spacing:.02em; }
.bar-verdict small{ color:var(--ink-faint); font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:9.5px; margin-left:8px; }
/* frase que explica o que o eixo mede */
.bar-explain{ margin:-4px 0 13px; font-size:11.5px; line-height:1.5; color:var(--ink-dim); }

.bar-labels{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-dim); margin-bottom:8px; gap:12px; }
.bar-labels span{ display:flex; align-items:center; gap:7px; }
.bar-labels b{ font-variant-numeric:tabular-nums; font-size:12px; }
.bar-labels .win{ color:var(--ink); font-weight:600; }
.bar-labels .win b{ color:var(--cyan); }

.bar-track{
  height:12px; border-radius:99px; background:rgba(255,255,255,.05);
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.05);
}
.bar-left,.bar-right{ position:absolute; top:0; bottom:0; width:0; transition:width 1.1s cubic-bezier(.2,.9,.25,1); }
.bar-left{ left:0; background:linear-gradient(90deg,var(--cyan-deep),var(--cyan)); box-shadow:0 0 14px rgba(49,224,255,.45); }
.bar-right{ right:0; background:linear-gradient(270deg,var(--gold-deep),var(--gold)); box-shadow:0 0 14px rgba(217,179,101,.4); }
.bar-mid{ position:absolute; left:50%; top:-4px; bottom:-4px; width:1px; background:rgba(255,255,255,.25); }

/* Roscas (multi) */
.donuts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.donut-card{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px; text-align:center; backdrop-filter:blur(8px);
  transition:border-color .25s, transform .25s;
}
.donut-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.donut-name{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px; }
/* frase que explica o que a distribuição mede */
.donut-explain{ margin:0 auto 14px; font-size:11px; line-height:1.45; color:var(--ink-dim); text-align:center; max-width:34ch; }
.donut-svg{ width:150px; height:150px; margin:0 auto 12px; display:block; }
.donut-track{ stroke:rgba(255,255,255,.05); }
.donut-pct{ fill:var(--ink); font-family:var(--ff); }
.donut-cap{ fill:var(--ink-faint); font-family:var(--ff); }
.seg{ opacity:.92; }
.seg-0{ stroke:var(--c0); } .seg-1{ stroke:var(--c1); } .seg-2{ stroke:var(--c2); } .seg-3{ stroke:var(--c3); }
.seg-4{ stroke:var(--c4); } .seg-5{ stroke:var(--c5); } .seg-6{ stroke:var(--c6); } .seg-7{ stroke:var(--c7); }
.sw-0{ background:var(--c0); } .sw-1{ background:var(--c1); } .sw-2{ background:var(--c2); } .sw-3{ background:var(--c3); }
.sw-4{ background:var(--c4); } .sw-5{ background:var(--c5); } .sw-6{ background:var(--c6); } .sw-7{ background:var(--c7); }
.donut-win{ font-size:17px; font-weight:700; color:var(--gold); margin-bottom:3px; }
.donut-sub{ font-size:11.5px; color:var(--ink-faint); margin-bottom:14px; }
.donut-legend{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.leg{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-dim); }
.leg i{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.leg b{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; }
.leg-off{ opacity:.45; }
.leg-off i{ filter:grayscale(.7); }
.leg-note{
  margin-top:5px; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* Cards de perfil */
.profile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.pcard{
  background:linear-gradient(160deg,rgba(11,46,63,.78),rgba(4,18,28,.72));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; backdrop-filter:blur(10px); position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.pcard:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 24px 50px -28px rgba(49,224,255,.55); }
.pcard::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--cyan),transparent);
}
.pcard-top{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.pcard-icon{ font-size:22px; }
.pcard-scale{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.pcard h4{
  margin:2px 0 4px; font-size:21px; font-weight:700; letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,#a8dcf0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pcard .psub{ font-size:11.5px; color:var(--gold); letter-spacing:.1em; margin-bottom:14px; text-transform:lowercase; }
.pcard p{ font-size:14.5px; line-height:1.72; color:var(--ink-dim); margin:0 0 16px; }
.plist{ margin:0 0 14px; padding:0; list-style:none; }
.plist li{
  font-size:13.5px; line-height:1.55; color:var(--ink-dim);
  padding-left:20px; position:relative; margin-bottom:7px;
}
.plist li::before{ content:''; position:absolute; left:4px; top:8px; width:5px; height:5px; border-radius:50%; }
.plist.forcas li::before{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.plist.atencao li::before{ background:var(--gold); box-shadow:0 0 8px var(--gold); }
.plabel{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px; }
.pcomm{
  margin-top:auto; padding:13px 15px; border-radius:var(--r-sm);
  background:rgba(49,224,255,.06); border:1px solid var(--line);
  font-size:13px; line-height:1.6; color:var(--ink-dim);
}
.pcomm strong{ color:var(--cyan); display:block; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:6px; }

/* Manual de instruções */
.manual{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.mcard{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px; backdrop-filter:blur(8px);
}
.mcard h5{
  margin:0 0 14px; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:10px;
}
.mcard h5 i{ font-style:normal; font-size:16px; }
/* frase que explica para que serve este manual */
.mcard-lede{ margin:-4px 0 15px; font-size:12.5px; line-height:1.55; color:var(--ink-dim); }
.mcard ul{ margin:0; padding:0; list-style:none; }
.mcard li{
  font-size:14px; line-height:1.65; color:var(--ink-dim);
  padding-left:18px; position:relative; margin-bottom:11px;
}
.mcard li::before{ content:'▸'; position:absolute; left:0; color:var(--cyan); font-size:11px; top:1px; }
.mcard li b{ color:var(--ink); font-weight:600; }

/* Tabela inventário */
.table-wrap{ overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--line); }
table.inv{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; background:rgba(4,20,30,.5); }
table.inv th{
  text-align:left; padding:14px 16px; font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); font-weight:600;
  background:rgba(217,179,101,.07); border-bottom:1px solid rgba(217,179,101,.2);
}
table.inv td{ padding:11px 16px; border-bottom:1px solid rgba(49,224,255,.08); color:var(--ink-dim); vertical-align:top; }
table.inv tr:last-child td{ border-bottom:none; }
table.inv tr:hover td{ background:rgba(49,224,255,.04); }
td.cat{ color:var(--ink-faint); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; width:34%; }
td.res{ color:var(--ink); font-weight:600; }
td.pct{ text-align:right; font-variant-numeric:tabular-nums; color:var(--cyan); font-weight:600; width:80px; white-space:nowrap; }

/* Ações */
.actions{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  padding:44px 0 10px; border-top:1px solid rgba(217,179,101,.18); margin-top:20px;
}
.hint{ text-align:center; color:var(--ink-faint); font-size:12px; margin-top:18px; line-height:1.7; }

/* Compartilhar */
.share-block .actions{ padding:22px 0 6px; border-top:none; margin-top:0; }
.share-lead{
  text-align:center; color:var(--ink-dim); font-size:14px;
  line-height:1.65; max-width:52ch; margin:0 auto;
}
/* O aviso é discreto de propósito: informa sem assustar quem só quer enviar
   o resultado para o próprio terapeuta. */
.share-warn{
  text-align:center; color:var(--ink-faint); font-size:12px;
  line-height:1.7; max-width:50ch; margin:14px auto 0;
}
/* Formulário de envio: fechado até o aluno pedir. */
.send-form{ display:none; max-width:30em; margin:20px auto 0; }
.send-form.open{ display:block; }
.send-row{ display:block; margin-bottom:12px; }
.send-row span{
  display:block; color:var(--ink-faint); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:6px;
}
.send-row input{
  width:100%; padding:12px 14px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  color:var(--ink); font:inherit; font-size:15px;
}
.send-row input:focus{ outline:none; border-color:var(--cyan); background:rgba(49,224,255,.06); }
.send-note{ color:var(--ink-faint); font-size:12px; line-height:1.6; margin-top:12px; text-align:center; }

/* Quem abriu o resultado de outra pessoa precisa saber disso de cara. */
.shared-note{
  margin:0 0 32px; padding:16px 22px; border-radius:var(--r-md);
  background:rgba(49,224,255,.07); border:1px solid rgba(49,224,255,.28);
  color:var(--ink-dim); font-size:13.5px; line-height:1.65; text-align:center;
}

.footer{
  text-align:center; padding:44px 0 20px; color:var(--ink-faint); font-size:11.5px; line-height:1.9;
}
.footer b{ color:var(--ink-dim); font-weight:600; }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,20px); z-index:200;
  background:rgba(9,42,58,.96); border:1px solid var(--line-strong); border-radius:99px;
  padding:13px 26px; font-size:13.5px; color:var(--ink); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:all .35s cubic-bezier(.2,.85,.25,1);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.9);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* Responsivo */
@media (max-width:640px){
  .wrap{ padding:0 16px; }
  /* moldura mais justa no celular — a .stage acompanha pelas mesmas variáveis */
  :root{ --fr-x:8px; --fr-top:calc(var(--sh-h) + 8px); --fr-r:14px; }
  .opt{ padding:15px 16px; font-size:14.5px; gap:12px; }
  .opt:hover{ transform:none; box-shadow:none; }
  .signature{ padding:24px 20px; }
  .pcard{ padding:22px 20px; }
  .nav-hint{ display:none; }
  .quiz-brand span{ display:none; }
  .q-area{ align-items:flex-start; padding:10px 0 0; }
  /* no celular: os rótulos "Discordo/Concordo" saem das linhas (ficam só na
     legenda do topo e na cor), e a régua de 5 continua compacta e tocável */
  .block-hint{ font-size:13.5px; }
  .q-item{ padding:14px 15px 15px; }
  .q-item-text{ font-size:15.5px; margin-bottom:12px; }
  .scale{ gap:7px; }
  .scale-end{ display:none; }
  .dot{ height:48px; font-size:16px; border-radius:11px; }
  .dot:hover{ transform:none; }

  /* No celular o diferencial empilha: frase de cima, régua no meio, frase de
     baixo. Fica mais legível que apertar as duas pontas nas laterais. */
  .diff-row{ flex-direction:column; align-items:stretch; gap:9px; }
  .diff-pole{ font-size:14px; }
  .diff-pole.lo, .diff-pole.hi{ text-align:left; display:flex; gap:8px; }
  .diff-pole.lo::before{ content:'◀'; color:var(--gold); font-size:9px; line-height:1.7; }
  .diff-pole.hi::before{ content:'▶'; color:var(--cyan); font-size:9px; line-height:1.7; }
  /* empilhado, a régua precisa de folga embaixo para o rótulo "depende"
     não encostar na frase do polo seguinte */
  .diff-scale{ justify-content:space-between; gap:5px; padding:2px 0; margin-bottom:15px; }
  .diff-scale::after{ bottom:-15px; }
  .diff-scale .dot{ width:36px; height:36px; }
  .diff-scale .dot:nth-child(1), .diff-scale .dot:nth-child(7){ width:40px; height:40px; }
  .diff-scale .dot:nth-child(2), .diff-scale .dot:nth-child(6){ width:37px; height:37px; }
  .diff-scale .dot.mid{ width:30px; height:30px; }
  .diff-scale .dot:hover{ transform:none; }

  .rank-prompt{ font-size:16.5px; }
  .rk{ padding:13px 14px; gap:12px; font-size:14.5px; }
  .rk:hover{ transform:none; }
  .rk-badge{ width:30px; height:30px; font-size:11.5px; }
  .ri{ flex:1 1 44%; text-align:center; font-size:12.5px; padding:11px 8px; }
  .btn-next{ padding:13px 20px; }
  .meta-row{ gap:16px; font-size:10.5px; }
  .actions .btn{ width:100%; }
  .donuts,.profile-grid,.manual{ grid-template-columns:1fr; }
}

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

/* =========================================================================
   IMPRESSÃO / PDF — TEMA CLARO

   A tela é escura porque é uma experiência imersiva. O papel é o contrário:
   fundo branco economiza tinta, não deixa faixas quando a impressora não
   alcança a borda, e continua legível mesmo se o aluno esquecer de marcar
   "gráficos de plano de fundo" — porque o texto já nasce escuro sobre claro.

   As margens são de verdade (@page), respeitando a área não imprimível.
   ========================================================================= */

@page{
  size:A4;
  margin:16mm 14mm 15mm;
}

@media print{

  /* ---- paleta de papel ---- */
  :root{
    --p-ink:#16242e;        /* texto principal */
    --p-dim:#4d6472;        /* texto secundário */
    --p-faint:#7d919c;      /* rótulos */
    --p-teal:#1b6157;       /* verde-petróleo da marca */
    --p-teal-2:#2f8a7a;
    --p-gold:#9a7526;       /* dourado escurecido p/ contraste no branco */
    --p-line:#d7e0e4;
    --p-soft:#f4f7f8;       /* fundo dos cards */
    --p-soft-2:#eaf1f2;

    /* roscas: oito tons distinguíveis e legíveis sobre branco */
    --c0:#1b6157; --c1:#9a7526; --c2:#2f6f9e; --c3:#9c4f6b;
    --c4:#5f5495; --c5:#b4632c; --c6:#3f7d46; --c7:#6f5a42;
  }

  html,body{
    background:#fff !important;
    color:var(--p-ink) !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  /* Sem animação no papel. Os elementos com entrada animada usam
     "animation-fill-mode: both" e, com atraso, seriam capturados ainda
     invisíveis — os chips saíam desbotados no PDF. */
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
  }

  /* ---- fora do papel ---- */
  #bg-canvas, .bg-wash, .bg-vignette, .frame, .toast,
  /* O relatório impresso é sobre a pessoa; os controles de envio não fazem
     parte dele. */
  .actions, .hint, .nav-hint, .site-header,
  .share-block, .shared-note{ display:none !important; }

  /* Na tela a .stage é um contêiner fixo que rola e recorta o conteúdo na
     moldura. No papel isso imprimiria só a parte visível — então ela volta a
     ser um bloco normal, que o motor de impressão pagina inteiro. */
  html, body{ height:auto !important; overflow:visible !important; }
  .stage{
    position:static !important; overflow:visible !important;
    border-radius:0 !important; height:auto !important;
  }
  .intro, .quiz, .calc{ min-height:0 !important; }
  .quiz-top{ position:static !important; }

  .wrap{ max-width:100%; padding:0; }
  .dash{ padding:0; background:transparent !important; }
  #screen-dash{ background:transparent !important; }

  /* =====================================================================
     QUEBRA DE PÁGINA — nenhum card cortado ao meio

     O Chrome IGNORA "break-inside: avoid" quando o card é filho de um
     CSS grid. Como todas as grades de cards (barras, roscas, manual,
     perfis) são grid, um card podia ficar partido no fim de uma página.
     Na impressão trocamos a grade por inline-block, layout que o motor
     de impressão fragmenta corretamente: o card que não cabe desce
     inteiro para a página seguinte. As larguras têm ~1px de folga para
     nunca "vazar" uma coluna para a linha de baixo.
     ===================================================================== */
  .bars, .donuts, .manual, .profile-grid{ display:block !important; }

  .bar-card, .donut-card, .mcard, .pcard{
    break-inside:avoid; page-break-inside:avoid;
  }

  /* barras — uma coluna */
  .bar-card{ display:block; margin:0 0 6px; }

  /* manual e cards de perfil — duas colunas */
  .mcard, .pcard{
    display:inline-block; vertical-align:top;
    width:calc((100% - 9px) / 2); margin:0 0 8px;
  }
  .mcard:not(:nth-child(2n)), .pcard:not(:nth-child(2n)){ margin-right:8px; }

  /* roscas — três colunas */
  .donut-card{
    display:inline-block; vertical-align:top;
    width:calc((100% - 17px) / 3); margin:0 0 8px;
  }
  .donut-card:not(:nth-child(3n)){ margin-right:8px; }

  /* =====================================================================
     CABEÇALHO DO RELATÓRIO
     ===================================================================== */
  .dash-head{
    padding:0 0 12px; margin:0 0 16px;
    border-bottom:2px solid var(--p-teal);
    text-align:center;
  }
  .dash-logo{
    display:block !important; width:132px; height:auto;
    margin:0 auto 10px; background:none; padding:0;
  }
  .dash-name{
    font-size:26px; margin:6px 0 4px; filter:none !important;
    background:none !important;
    -webkit-background-clip:border-box !important; background-clip:border-box !important;
    -webkit-text-fill-color:var(--p-teal) !important; color:var(--p-teal) !important;
  }
  .dash-date{ color:var(--p-faint); font-size:9px; letter-spacing:.22em; }

  .eyebrow{
    color:var(--p-gold); font-size:9px; letter-spacing:.34em; margin:0;
  }
  .eyebrow::before,.eyebrow::after{
    width:34px; background:var(--p-gold); opacity:.5;
  }

  /* =====================================================================
     SEÇÕES
     ===================================================================== */
  .section{ margin-bottom:16px; }
  .section-title{
    color:var(--p-teal); font-size:10px; letter-spacing:.26em;
    margin:0 0 10px; break-after:avoid; page-break-after:avoid;
  }
  .section-title::after{ background:var(--p-line); height:1px; }
  .section-lede{ color:var(--p-dim); font-size:10.5px; line-height:1.5; margin:0 0 10px; }

  /* aviso de qualidade da resposta */
  .quality-note{
    background:#fdf6e6 !important; border:1px solid #e0c98a;
    color:var(--p-ink); font-size:10.5px; line-height:1.5;
    padding:10px 14px; margin:0 0 16px; border-radius:4px;
    page-break-inside:avoid;
  }
  .quality-note b{ color:var(--p-gold); font-size:8.5px; }

  /* =====================================================================
     ASSINATURA MENTAL
     ===================================================================== */
  .signature{
    background:var(--p-soft) !important; border:1px solid var(--p-line);
    border-left:3px solid var(--p-teal);
    border-radius:4px; padding:14px 16px; box-shadow:none;
    page-break-inside:avoid;
  }
  .signature::before{ display:none; }
  .sig-text{ color:var(--p-ink); font-size:11.5px; line-height:1.6; }
  .sig-text b{ color:var(--p-teal); }

  .chips{ margin-top:12px; gap:6px; }
  .chip{
    background:#fff !important; border:1px solid var(--p-line);
    color:var(--p-ink); padding:5px 9px; border-radius:8px; gap:7px;
  }
  .chip i{ font-size:10px; }
  .chip-h{ font-size:9px; }
  .chip b{ color:var(--p-gold); font-size:9px; }
  .chip-s{ color:var(--p-dim); font-size:7.5px; }
  .chip-none{ border-radius:20px; border-style:dashed; color:var(--p-dim); font-size:9px; }

  /* =====================================================================
     BARRAS BIPOLARES
     ===================================================================== */
  .bars{ gap:6px; }
  .bar-card{
    background:#fff !important; border:1px solid var(--p-line);
    border-radius:4px; padding:8px 12px; page-break-inside:avoid;
  }
  .bar-head{ margin-bottom:4px; }
  .bar-name{ color:var(--p-faint); font-size:7.5px; letter-spacing:.18em; }
  .bar-verdict{ color:var(--p-teal); font-size:10px; }
  .bar-verdict small{ color:var(--p-faint); font-size:7.5px; }
  .bar-explain{ color:var(--p-dim); font-size:8.5px; line-height:1.45; margin:0 0 6px; }

  .bar-labels{ color:var(--p-dim); font-size:9px; margin-bottom:4px; }
  .bar-labels .win{ color:var(--p-ink); }
  .bar-labels .win b{ color:var(--p-teal); }

  .bar-track{
    height:7px; background:var(--p-soft-2) !important;
    border:1px solid var(--p-line); border-radius:20px;
  }
  .bar-left{
    background:linear-gradient(90deg,var(--p-teal),var(--p-teal-2)) !important;
    box-shadow:none;
  }
  .bar-right{
    background:linear-gradient(270deg,var(--p-gold),#c2a05a) !important;
    box-shadow:none;
  }
  .bar-mid{ background:rgba(0,0,0,.18); top:0; bottom:0; }

  /* =====================================================================
     ROSCAS
     ===================================================================== */
  .donuts{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .donut-card{
    background:#fff !important; border:1px solid var(--p-line);
    border-radius:4px; padding:10px 8px; page-break-inside:avoid;
  }
  .donut-name{ color:var(--p-faint); font-size:7.5px; letter-spacing:.16em; margin-bottom:4px; }
  .donut-explain{ color:var(--p-dim); font-size:8px; line-height:1.4; margin:0 auto 7px; text-align:center; max-width:30ch; }
  .donut-svg{ width:96px; height:96px; margin-bottom:6px; }
  .donut-track{ stroke:var(--p-soft-2); }
  .donut-pct{ fill:var(--p-ink); }
  .donut-cap{ fill:var(--p-faint); }
  .seg{ opacity:1; }
  .donut-win{ color:var(--p-teal); font-size:11px; }
  .donut-sub{ color:var(--p-faint); font-size:8px; margin-bottom:6px; }
  .leg{ color:var(--p-dim); font-size:8px; gap:5px; }
  .leg-off{ opacity:.55; }
  .leg-note{ color:var(--p-faint); font-size:7px; margin-top:3px; }
  .leg i{ width:7px; height:7px; border-radius:2px; }
  .leg b{ color:var(--p-ink); }

  /* =====================================================================
     MANUAL DE INSTRUÇÕES
     ===================================================================== */
  .manual{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .mcard{
    background:var(--p-soft) !important; border:1px solid var(--p-line);
    border-radius:4px; padding:12px 14px; page-break-inside:avoid;
  }
  .mcard h5{ color:var(--p-teal); font-size:9px; letter-spacing:.2em; margin-bottom:6px; }
  .mcard-lede{ color:var(--p-dim); font-size:9px; line-height:1.45; margin:0 0 9px; }
  .mcard li{ color:var(--p-dim); font-size:9.5px; line-height:1.5; margin-bottom:6px; padding-left:12px; }
  .mcard li::before{ color:var(--p-teal); font-size:9px; }
  .mcard li b{ color:var(--p-ink); }

  /* =====================================================================
     CARDS DE PERFIL
     ===================================================================== */
  .profile-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .pcard{
    background:#fff !important; border:1px solid var(--p-line);
    border-radius:4px; padding:12px 14px; box-shadow:none;
    page-break-inside:avoid;
  }
  .pcard::before{ background:var(--p-teal); width:2px; }
  .pcard-icon{ font-size:13px; }
  .pcard-scale{ color:var(--p-faint); font-size:7.5px; letter-spacing:.18em; }
  .pcard h4{
    font-size:13px; margin:2px 0 3px;
    background:none !important;
    -webkit-background-clip:border-box !important; background-clip:border-box !important;
    -webkit-text-fill-color:var(--p-teal) !important; color:var(--p-teal) !important;
  }
  .pcard .psub{ color:var(--p-gold); font-size:8.5px; margin-bottom:8px; }
  .pcard p{ color:var(--p-dim); font-size:9.5px; line-height:1.5; margin-bottom:8px; }
  .plabel{ color:var(--p-faint); font-size:7.5px; letter-spacing:.2em; margin-bottom:4px; }
  .plist li{ color:var(--p-dim); font-size:9px; line-height:1.45; margin-bottom:3px; padding-left:11px; }
  .plist li::before{ width:3px; height:3px; top:6px; left:2px; box-shadow:none !important; }
  .plist.forcas li::before{ background:var(--p-teal); }
  .plist.atencao li::before{ background:var(--p-gold); }
  .pcomm{
    background:var(--p-soft) !important; border:1px solid var(--p-line);
    color:var(--p-dim); font-size:9px; line-height:1.45; padding:8px 10px; border-radius:3px;
  }
  .pcomm strong{ color:var(--p-teal); font-size:7.5px; letter-spacing:.18em; }

  /* =====================================================================
     TABELA DO INVENTÁRIO
     ===================================================================== */
  .table-wrap{ border:1px solid var(--p-line); border-radius:4px; overflow:visible; }
  table.inv{ font-size:9px; min-width:0; background:#fff !important; }
  table.inv thead{ display:table-header-group; }   /* repete o cabeçalho se quebrar */
  table.inv th{
    background:var(--p-soft-2) !important; color:var(--p-teal);
    font-size:7.5px; letter-spacing:.18em; padding:6px 8px;
    border-bottom:1px solid var(--p-line);
  }
  table.inv td{ color:var(--p-dim); padding:5px 8px; border-bottom:1px solid var(--p-line); }
  table.inv tbody tr:nth-child(even) td{ background:#fafcfc !important; }
  table.inv tr{ page-break-inside:avoid; }
  td.cat{ color:var(--p-faint); font-size:8px; }
  td.res{ color:var(--p-ink); }
  td.pct{ color:var(--p-teal); }

  /* =====================================================================
     RODAPÉ
     ===================================================================== */
  .footer{
    color:var(--p-faint); font-size:8px; line-height:1.7;
    padding:14px 0 0; margin-top:14px;
    border-top:1px solid var(--p-line);
    page-break-inside:avoid;
  }
  .footer b{ color:var(--p-dim); }

  .page-break{ page-break-before:always; break-before:page; }
  .print-only{ display:block !important; }

  /* órfãs e viúvas: evita uma linha solta no pé ou no topo da página */
  p, li{ orphans:3; widows:3; }
}

.print-only{ display:none; }