/* ============================================================
   LP — Cuidados na hora de escolher · ângulo consultivo / confiança
   Vieses: aversão à perda (sinais de alerta), autoridade (critérios), auto-qualificação
   ============================================================ */

/* ---------- Card de checklist no hero ---------- */
.check-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2rem); box-shadow: var(--shadow-card); }
.check-card .cc-title { display: flex; gap: 0.5rem; align-items: center; font-family: var(--font-head); font-weight: 600; font-size: 1rem; margin-bottom: 1.1rem; color: var(--ink); }
.check-card .cc-title svg { width: 20px; height: 20px; color: var(--accent-strong); }
.check-card ul { display: grid; gap: 0.8rem; }
.check-card li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.94rem; color: var(--ink); }
.check-card li .ck { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; flex: none; margin-top: 1px; }
.check-card li .ck svg { width: 13px; height: 13px; }

/* ---------- Critérios em cards numerados ---------- */
.criteria-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.criteria-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
.criteria-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: transparent; }
.criteria-num { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--paper-warm-2); -webkit-text-stroke: 1px var(--accent); }
.criteria-card h3 { font-size: 1.08rem; margin: 0.7rem 0 0.4rem; }
.criteria-card p { font-size: 0.92rem; color: var(--text-mute); }

/* ---------- Sinais de alerta (cards escuros, semântica de aviso) ---------- */
.redflags { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.redflag { background: var(--ink); color: rgba(255, 255, 255, 0.7); border-radius: var(--r-lg); padding: 1.7rem; }
.redflag .rfi { width: 44px; height: 44px; border-radius: 12px; background: rgba(224, 96, 90, 0.16); color: #ec7d77; display: grid; place-items: center; margin-bottom: 1rem; }
.redflag .rfi svg { width: 24px; height: 24px; }
.redflag h3 { color: #fff; font-size: 1.05rem; }
.redflag p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.35rem; }

/* ---------- Selo "passamos em todos os critérios" ---------- */
.qualify { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.qualify-card { background: var(--paper-warm); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.2rem); }
.qualify-card .qc-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.qualify-card .qc-mark { width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: #1a1206; display: grid; place-items: center; flex: none; }
.qualify-card .qc-mark svg { width: 28px; height: 28px; }
.qualify-card .qc-head b { font-family: var(--font-head); font-size: 1.1rem; color: var(--ink); }

@media (max-width: 980px) {
  .criteria-grid, .redflags { grid-template-columns: 1fr 1fr; }
  .qualify { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .criteria-grid, .redflags { grid-template-columns: 1fr; }
}