/* =====================================================================
   Diagnóstico do Operacional — estilos da página
   =====================================================================
   Tudo escopado sob `.diag` (o wrapper da view).
   POR QUE O ESCOPO: o HTML de origem era standalone e trazia classes
   genéricas — .card, .container, .lead, .cta, .top, .brand, .progress.
   25 delas colidem com as do tema (web-base.css / web.css). Sem o
   prefixo, abrir o diagnóstico reescreveria a landing inteira.
   O que NÃO está aqui: tokens (--brand, --c200, --radius) e o reset
   base. O arquivo original os embutia, mas são cópia de app-tokens.css
   e web-base.css, que o _theme.php já carrega. Duplicar significaria
   manter a mesma cor em dois lugares.
   ===================================================================== */
.diag .ferr-hero{padding:56px 0 8px;text-align:center}
.diag .ferr-hero h1{font-size:clamp(26px,5.4vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--c900);line-height:1.12}
.diag .ferr-hero .lead{margin:14px auto 0}
.diag .card{background:#fff;border:1px solid var(--c200);border-radius:var(--radius);box-shadow:var(--sombra);padding:32px 36px;max-width:900px;margin:28px auto}
.diag .captura h3{font-size:16.5px;color:var(--c900);margin-bottom:6px}
.diag .captura p{font-size:14px;color:var(--c600);margin-bottom:14px}
.diag .captura form{display:grid;grid-template-columns:1fr;gap:10px}
.diag .captura input{font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--c300);border-radius:var(--radius-sm)}
.diag .captura button, .diag .btn-go{font:inherit;font-weight:700;font-size:15px;padding:13px 24px;border-radius:99px;border:none;cursor:pointer;background:var(--brand);color:#fff}
.diag .captura button:hover, .diag .btn-go:hover{background:var(--brand-dark)}
.diag .lgpd{font-size:12px;color:var(--c500);margin-top:8px}
.diag .etapas4{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px auto;max-width:1040px}
.diag .et4{background:#fff;border:1px solid var(--c200);border-radius:var(--radius-sm);padding:18px}
.diag .et4 b{display:block;font-size:14px;color:var(--c900);margin-bottom:4px}
.diag .et4 span{font-size:12.5px;color:var(--c600);line-height:1.45}
.diag .etapas-titulo{text-align:center;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c500);max-width:1040px;margin:0 auto 4px}
.diag .intro-cta{text-align:center;margin:34px auto 8px}
.diag #btn-start{font:inherit;font-weight:700;font-size:16px;padding:15px 40px;border-radius:99px;border:none;cursor:pointer;
  background:var(--brand);color:#fff;box-shadow:var(--sombra-md);transition:background .15s}
.diag #btn-start:hover{background:var(--brand-dark)}
/* quiz */
.diag .quiz-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--c500);font-weight:700;margin-bottom:10px}
.diag .quiz-top .pilar{color:var(--brand-dark);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.diag .progress{height:7px;border-radius:4px;background:var(--c100);overflow:hidden;margin-bottom:26px}
.diag .progress i{display:block;height:100%;background:var(--brand-grad);border-radius:4px;transition:width .25s}
.diag .pergunta{font-size:19px;font-weight:700;color:var(--c900);line-height:1.35;min-height:78px}
.diag .opcoes{display:grid;gap:10px;margin-top:22px}
.diag .opcao{text-align:left;font:inherit;font-size:15px;padding:15px 18px;border:1.5px solid var(--c300);border-radius:var(--radius-sm);background:#fff;cursor:pointer;color:var(--c700);transition:.12s}
.diag .opcao:hover{border-color:var(--brand);color:var(--c900)}
.diag .quiz-nav{margin-top:18px;font-size:13px}
.diag .quiz-nav a{color:var(--c500);cursor:pointer}
/* resultado */
.diag .res-head{text-align:center;margin-bottom:6px}
.diag .res-head .score{font-size:52px;font-weight:800;color:var(--c900);line-height:1}
.diag .res-head .score small{font-size:18px;color:var(--c500);font-weight:600}
.diag .res-head p{font-size:14.5px;color:var(--c600);margin-top:8px}
.diag .res-pilares{display:grid;gap:14px;margin:26px 0}
.diag .rp{display:grid;grid-template-columns:110px 1fr 44px;gap:12px;align-items:center}
.diag .rp .nome{font-size:13.5px;font-weight:700;color:var(--c700)}
.diag .rp .trilha{height:10px;border-radius:5px;background:var(--c100);overflow:hidden}
.diag .rp .trilha i{display:block;height:100%;border-radius:5px;transition:width .6s}
.diag .rp .nota{font-size:13.5px;font-weight:800;color:var(--c900);text-align:right;font-variant-numeric:tabular-nums}
.diag .veredicto{background:var(--c50);border-left:3px solid var(--brand);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 20px;margin-top:8px}
.diag .veredicto h3{font-size:16px;color:var(--c900);margin-bottom:6px}
.diag .veredicto p{font-size:14.5px;color:var(--c600)}
.diag .veredicto .ajuste{margin-top:12px;font-size:14px;color:var(--c700)}
.diag .veredicto .ajuste b{color:var(--c900)}
.diag .ponte{max-width:760px;margin:8px auto 56px;text-align:center}
.diag .ponte p{font-size:15px;color:var(--c600);margin-bottom:18px}
/* âncoras (perguntas de perfil, sem score) */
.diag .ancora-tag{color:var(--c500)!important}
/* padrão diagnóstico (perfil nomeado) */
.diag .perfil{background:var(--brand-light);border:1px solid var(--brand);border-radius:var(--radius-sm);padding:20px 22px;margin:26px 0 8px}
.diag .perfil .lab{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-dark)}
.diag .perfil h3{font-size:19px;color:var(--c900);margin:6px 0 8px;letter-spacing:-.01em}
.diag .perfil p{font-size:14.5px;color:var(--c700);line-height:1.55}
/* leitura por etapa */
.diag .leitura{display:grid;gap:12px;margin:22px 0}
.diag .leitura .item{border:1px solid var(--c200);border-radius:var(--radius-sm);padding:14px 16px;background:#fff}
.diag .leitura .item h4{font-size:13px;color:var(--c900);margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline}
.diag .leitura .item h4 .n{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.diag .leitura .item p{font-size:13.5px;color:var(--c600);line-height:1.5}
/* paywall do plano de ação */
/* prévia real da etapa fraca + gate integrado no card */
.diag .gate-card{margin-top:18px}
.diag .gate-card .lab{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.diag .gate-h{font-size:19px;color:var(--c900);margin-top:8px;letter-spacing:-.01em}
.diag .gate-h span{color:var(--brand-dark)}
/* etapas retidas: nome + nota real, análise bloqueada */
.diag .locked{display:grid;gap:8px;margin:14px 0 0}
.diag .lk{display:flex;align-items:center;gap:12px;border:1px solid var(--c200);border-radius:var(--radius-sm);
  padding:12px 15px;background:var(--c50)}
.diag .lk .ic{width:17px;height:17px;flex:none;color:var(--c500)}
.diag .lk .nm{font-size:13.5px;font-weight:700;color:var(--c700)}
.diag .lk .bar{height:6px;border-radius:99px;background:var(--c200);overflow:hidden;width:150px;margin-left:auto}
.diag .lk .bar i{display:block;height:100%;border-radius:99px}
.diag .lk .nt{font-size:12px;font-weight:800;color:var(--c600);font-variant-numeric:tabular-nums;width:38px;text-align:right}
.diag .gate-form{border-top:1px solid var(--c200);margin-top:22px;padding-top:22px}
.diag .gate-tit{font-size:15px;font-weight:800;color:var(--c900);margin-bottom:4px}
.diag .gate-sub{font-size:13.5px;color:var(--c600);margin-bottom:16px}
.diag .gate-fields{display:grid;gap:10px;margin-bottom:12px}
.diag .gate-form input{font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--c300);border-radius:var(--radius-sm);width:100%}
.diag .gate-form input:focus{outline:none;border-color:var(--brand)}
.diag .gate-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.diag .gate-form button{font:inherit;font-weight:700;font-size:15px;padding:13px 28px;border-radius:99px;border:none;cursor:pointer;
  background:var(--brand);color:#fff;transition:background .15s}
.diag .gate-form button:hover{background:var(--brand-dark)}
.diag .priv{font-size:12px;color:var(--c500)}
.diag .priv a{color:var(--c600);text-decoration:underline}
@media(min-width:600px){.diag .gate-fields{grid-template-columns:1fr 1fr}}
.diag .hide{display:none!important}
@media(min-width:720px){.diag .captura form{grid-template-columns:1fr auto}.diag .etapas4{grid-template-columns:repeat(5,1fr)}}
/* larguras por contexto do diagnóstico */
.diag #tela-intro, .diag #tela-quiz, .diag #tela-resultado{flex:1 0 auto;display:flex;flex-direction:column}
.diag #tela-intro{justify-content:center;padding:48px 0 64px}
.diag #tela-intro .ferr-hero{padding:0 0 8px}
.diag #tela-quiz{justify-content:center}
.diag #tela-quiz .card{max-width:720px}
.diag #tela-intro .ferr-hero .lead{max-width:760px}
.diag #tela-resultado .ferr-hero{max-width:900px;margin:0 auto}
/* Aviso de validação do gate (mensagem do JS antes de chamar o endpoint). */
.diag .gate-erro{font-size:13.5px;font-weight:600;color:var(--vermelho);margin-bottom:10px}

/* =====================================================================
   FUNDO E ELEVAÇÃO — alinhamento com o blog
   =====================================================================
   O diagnóstico era cartão branco sobre página branca: sem separação, e
   cansativo num teste de 28 perguntas. Mesma receita já usada em
   `.post_page` (blog) e `.auth` (login) do web.css — não são valores
   novos, são os tokens do tema.

   `body` sem escopo `.diag` é exceção deliberada: este arquivo só é
   carregado na view do diagnóstico (seção "styles"), então a regra não
   vaza para outras páginas. É o único jeito de o cinza cobrir a viewport
   inteira mesmo quando o conteúdo é curto — o quiz é uma tela só, e
   pintar apenas o wrapper deixaria uma faixa branca embaixo. */
body{background:var(--c50)}

/* Cartão com a mesma elevação do artigo do blog (era --sombra). */
.diag .card{box-shadow:var(--sombra-md)}

/* CENTRALIZAÇÃO VERTICAL DO QUIZ ---------------------------------------
   `.diag` vira coluna flex com a altura útil da viewport (62px = altura
   de `.top .container` em web-base.css). As telas já têm
   `flex:1 0 auto` + `justify-content:center`, então passam a centralizar
   de fato. `dvh` depois de `vh`: no celular a barra do navegador some e
   volta, e `vh` congela no maior valor, gerando rolagem fantasma. */
.diag{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 62px);
  min-height:calc(100dvh - 62px);
}

/* CABEÇALHO DO QUIZ ---------------------------------------------------- */
.diag .quiz-head{text-align:center;max-width:720px;margin:0 auto 22px}
.diag .quiz-head h2{font-size:clamp(20px,3.4vw,26px);font-weight:800;letter-spacing:-.02em;
  color:var(--c900);line-height:1.2;margin:0 0 8px}
.diag .quiz-head p{font-size:14.5px;color:var(--c600);line-height:1.5;margin:0}

@media(max-width:720px){
  .diag .quiz-head{margin-bottom:16px}
  .diag .card{padding:24px 20px}
}

/* PROFUNDIDADE — hierarquia de elevação -------------------------------
   Três camadas, para os cartões lerem como se estivessem à frente do
   fundo (antes: `.et4` sem sombra nenhuma, colado no cinza):
     fundo         → --c50
     cartões-etapa → --sombra-md   (0 8px 24px)
     cartão focal  → --sombra-lg   (0 16px 40px)
   A diferença entre as duas sombras é o que cria a hierarquia: o cartão
   da pergunta/resultado fica visivelmente à frente dos cinco pequenos.
   Sombras vêm de app-tokens.css — nenhum valor novo. */
.diag .card{box-shadow:var(--sombra-lg)}
.diag .et4{box-shadow:var(--sombra-md);transition:box-shadow .15s,transform .15s}
/* Mesmo hover de `.blog_article` no web.css — padrão já existente no tema. */
.diag .et4:hover{box-shadow:var(--sombra-lg);transform:translateY(-3px)}