/* ============================================================
   LP-B · REWORK DE DESIGN do modal de triagem (#triageModal).
   Só visual — não muda perguntas, markup nem JS. Override do lp-b-clean.css.
   Linkado por ÚLTIMO (vence pela ordem). Testar na lp-b-PREVIEW.html.
   ============================================================ */
:root, .lp-b { --tg-gold: #97927D; --tg-gold2: #b6ad91; --tg-soft: #D9D4C3; --tg-navy: #09212C; }

.triage-modal { padding: 24px; }
.triage-backdrop { background: rgba(3, 12, 16, 0.82); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }

.triage-dialog {
  width: min(100%, 608px); padding: 32px 34px 28px; border-radius: 22px;
  border: 1px solid rgba(151,146,125,0.32);
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(151,146,125,0.18), transparent 52%),
    linear-gradient(180deg, #12313d, #09212c 72%);
  box-shadow: 0 44px 110px rgba(0,0,0,0.58);
}
/* fio dourado no topo */
.triage-dialog::before {
  content: ""; position: absolute; left: 34px; right: 34px; top: 0; height: 2px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, rgba(151,146,125,0.7), transparent);
}

.triage-close { top: 16px; right: 16px; width: 36px; height: 36px; transition: border-color .2s, background .2s, transform .2s; }
.triage-close:hover, .triage-close:focus-visible { background: rgba(151,146,125,0.16); transform: rotate(90deg); }

.triage-progress { height: 4px; margin: 8px 46px 22px 0; background: rgba(255,255,255,0.08); }
.triage-progress span { background: linear-gradient(90deg, var(--tg-gold2), var(--tg-soft)); box-shadow: 0 0 12px rgba(151,146,125,0.55); transition: width .4s cubic-bezier(.2,.8,.2,1); }

.triage-step-copy { gap: 9px; margin-bottom: 22px; }
.triage-kicker { color: var(--tg-soft); font-size: 0.64rem; letter-spacing: 0.16em; }
.triage-step-copy h2 { font-size: clamp(1.42rem, 2.3vw, 1.82rem); letter-spacing: -0.01em; }

/* pergunta + transição suave */
.triage-question.is-active { gap: 11px; animation: triageFade .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes triageFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.triage-question legend { font-size: clamp(1.12rem, 1.9vw, 1.36rem); line-height: 1.22; margin-bottom: 15px; max-width: 94%; }

/* opções como cartões selecionáveis com indicador dourado */
.triage-option {
  position: relative; align-items: center; gap: 0; padding: 15px 18px 15px 48px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.028);
  transition: border-color .22s ease, background .22s ease, transform .2s ease, box-shadow .22s ease;
}
.triage-option:hover { transform: translateY(-2px); border-color: rgba(151,146,125,0.5); background: rgba(151,146,125,0.08); box-shadow: 0 12px 26px rgba(0,0,0,0.22); }
.triage-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.triage-option::before {
  content: ""; position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(217,212,195,0.45); background: transparent;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.triage-option span { color: rgba(255,255,255,0.92); font-size: 0.92rem; line-height: 1.4; font-weight: 600; }
.triage-option:has(input:checked) {
  border-color: var(--tg-gold);
  background: linear-gradient(180deg, rgba(151,146,125,0.18), rgba(151,146,125,0.06));
  box-shadow: inset 0 0 0 1px rgba(151,146,125,0.4), 0 10px 24px rgba(0,0,0,0.2);
}
.triage-option:has(input:checked)::before {
  border-color: var(--tg-gold);
  background: radial-gradient(circle, var(--tg-gold) 0 42%, transparent 46%);
  box-shadow: 0 0 10px rgba(151,146,125,0.6);
}
.triage-option:focus-within { outline: none; border-color: rgba(151,146,125,0.6); }

/* botões */
.triage-controls { margin-top: 6px; }
.triage-primary, .triage-secondary { min-height: 46px; border-radius: 11px; font-size: 0.9rem; }
.triage-primary { box-shadow: 0 14px 30px rgba(0,0,0,0.3); }
.triage-primary:hover:not(:disabled) { transform: translateY(-1px); }
.triage-secondary { transition: border-color .2s, background .2s, transform .2s; }
.triage-secondary:hover { transform: translateY(-1px); }

/* resultado: selo + pulso dourado no CTA */
.triage-result { gap: 14px; }
.triage-result .triage-kicker { color: var(--tg-gold); }
.triage-result h2 { font-size: clamp(1.5rem, 2.5vw, 1.95rem); }
.triage-result-cta { position: relative; animation: triagePulse 2.6s ease-out infinite; }
@keyframes triagePulse {
  0%,100% { box-shadow: 0 14px 30px rgba(0,0,0,0.3), 0 0 0 0 rgba(151,146,125,0.5); }
  55% { box-shadow: 0 14px 30px rgba(0,0,0,0.3), 0 0 0 13px rgba(151,146,125,0); }
}

@media (prefers-reduced-motion: reduce) {
  .triage-question.is-active { animation: none; }
  .triage-result-cta { animation: none; }
  .triage-close:hover { transform: none; }
}
@media (max-width: 560px) {
  .triage-dialog { padding: 24px 20px; }
  .triage-option { padding: 14px 14px 14px 44px; }
}

/* ===== REWORK v3 — resultado COMPACTO e elegante (era grande demais) ===== */
.triage-dialog { padding: 32px 34px 28px; }
.triage-result { text-align: center; gap: 10px; padding-top: 2px; }
.triage-result::before {
  content: "✓"; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 4px;
  border-radius: 50%; background: linear-gradient(180deg, var(--tg-gold2), var(--tg-gold)); color: var(--tg-navy);
  font-size: 1.05rem; font-weight: 900; box-shadow: 0 8px 20px rgba(151,146,125,0.4);
}
.triage-result .triage-kicker { display: block; margin-bottom: 2px; }
.triage-result h2 { font-size: clamp(1.18rem, 1.9vw, 1.42rem); line-height: 1.22; margin: 0 auto; max-width: 26ch; }
.triage-result p { font-size: 0.9rem; line-height: 1.5; margin: 4px auto 0; max-width: 42ch; }
.triage-result-actions { justify-content: center; margin-top: 4px; }
.triage-result .triage-safe { font-size: 0.76rem; max-width: 40ch; margin: 8px auto 0; text-align: center; }
.triage-result-cta { padding: 12px 22px; font-size: 0.9rem; }

/* ===== TIPOGRAFIA ANIMADA — "O próximo nível da proteção" =====
   A motion (não o gif): brilho dourado que percorre os destaques do título.
   Vivo e contínuo; acelera no hover. Escopado no h2 do Método (.hib-copy). */
.hib-copy h2 em {
  font-style: normal;
  background-image: linear-gradient(100deg,
    var(--tg-gold) 0%, #c4bca1 26%, #f3ecd6 46%, #c4bca1 66%, var(--tg-gold) 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: hibShimmer 5.4s linear infinite;
  will-change: background-position;
}
@keyframes hibShimmer { from { background-position: 210% 0; } to { background-position: -30% 0; } }
.hib-copy:hover h2 em { animation-duration: 2.3s; }
@media (prefers-reduced-motion: reduce) {
  .hib-copy h2 em { animation: none; -webkit-text-fill-color: var(--tg-gold); color: var(--tg-gold); }
}

/* card único do diagnóstico (só "Meu caso já exige análise") */
.hib-triage-actions--single { grid-template-columns: 1fr !important; max-width: 480px; }

/* ===== Card do diagnóstico — minimalista + botão centralizado ===== */
#metodo .hib-apply { padding: 16px 22px 18px; gap: 6px; }
#metodo .hib-triage-actions--single { justify-items: center; margin-top: 8px; }
#metodo .hib-triage-actions--single .hib-path {
  position: relative; min-height: 0; width: auto; max-width: 460px;
  justify-items: center; text-align: center; gap: 5px; padding: 14px 26px;
}
#metodo .hib-triage-actions--single .hib-micro { position: static; justify-self: center; margin: 0 auto 1px; }
#metodo .hib-triage-actions--single .hib-path strong { font-size: 0.94rem; }
#metodo .hib-triage-actions--single .hib-path span:not(.hib-micro) { font-size: 0.74rem; max-width: 44ch; }