/* ============================================================
   CONCURSIA — site público (concursia.eu)
   Carregado APENAS nas páginas públicas, por cima dos tokens e
   componentes de concursia-app.css (btn, chip, badge, fonts…).
   ============================================================ */

body.pub { background: #fff; height: auto; }

.pub .inner { max-width: 1120px; margin: 0 auto; padding-inline: 28px; }

/* mono eyebrow label (mesmo desenho do login-aside) */
.pub .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: 8px; }
.pub .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 9px; background: var(--amber); }
.pub .eyebrow.dark-on-light { color: var(--amber-deep); }

/* secondary button on dark surfaces */
.btn-ghost-dark { border-color: #3a3a3a; color: #ECEAE3; background: transparent; }
.btn-ghost-dark:hover { border-color: #fff; color: #fff; }

/* ---------- header ---------- */
.pub-head { background: var(--ink); color: #ECEAE3; border-bottom: 1px solid var(--line-dark); }
.pub-head .inner { display: flex; align-items: center; gap: 26px; padding-block: 16px; }
.pub-head .brand { display: flex; align-items: center; gap: 11px; }
.pub-head .brand .wm { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .02em; color: #fff; }
.pub-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.pub-nav a { font-size: 14px; font-weight: 500; color: var(--muted-dark); transition: color .14s; }
.pub-nav a:hover { color: #fff; }
.pub-nav .btn { color: var(--ink); }

/* ---------- hero ---------- */
.pub-hero { background: var(--ink); color: #ECEAE3; position: relative; overflow: hidden; }
.pub-hero .inner { padding-block: 88px 104px; position: relative; z-index: 2; }
.pub-hero h1 { font-size: clamp(34px, 5vw, 54px); color: #fff; max-width: 660px; line-height: 1.06; margin-top: 18px; }
.pub-hero .sub { color: var(--muted-dark); font-size: 17px; max-width: 540px; margin-top: 20px; line-height: 1.6; }
.pub-hero .ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.pub-hero .ctas .btn { padding: 13px 22px; font-size: 15px; }
.pub-radar { position: absolute; right: -150px; top: 50%; transform: translateY(-50%); width: 640px; height: 640px; z-index: 1; opacity: .85; pointer-events: none; }
.pub-radar .ring { fill: none; stroke: #2c2c2c; }
.pub-sweep { transform-origin: 280px 280px; animation: pubsweep 7s linear infinite; }
@keyframes pubsweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pub-sweep { animation: none; } }

/* ---------- generic public section ---------- */
.pub-sec { padding-block: 80px; }
.pub-sec h2 { font-size: clamp(26px, 3vw, 32px); margin-top: 14px; }
.pub-sec .sec-sub { color: var(--muted); font-size: 15.5px; margin-top: 12px; max-width: 560px; line-height: 1.6; }

/* ---------- como funciona ---------- */
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.how-step { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: #fff; position: relative; }
.how-step .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); position: absolute; top: 20px; right: 18px; }
.how-step .si { width: 42px; height: 42px; border-radius: 11px; background: var(--amber-soft); color: var(--amber-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.how-step h3 { font-family: var(--font-body); font-weight: 700; font-size: 16px; }
.how-step p { font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.55; }

/* ---------- números ---------- */
.pub-stats { background: var(--bg); border-block: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-block: 56px; }
.stat-pub { text-align: center; }
.stat-pub .v { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 46px); letter-spacing: -.02em; }
.stat-pub .v em { font-style: normal; color: var(--amber-deep); }
.stat-pub .k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* ---------- planos ---------- */
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; background: #fff; display: flex; flex-direction: column; }
.plan h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; }
.plan .tagline { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.plan .price { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin-top: 18px; letter-spacing: -.01em; }
.plan .price span { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 5px; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.plan ul li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink-70); line-height: 1.45; }
.plan ul li svg { color: var(--amber-deep); flex: none; margin-top: 2px; }
.plan .btn { margin-top: auto; }
.plan.feat { background: var(--ink); border-color: var(--ink); color: #fff; }
.plan.feat .tagline, .plan.feat .price span { color: var(--muted-dark); }
.plan.feat ul li { color: #d6d3c9; }
.plan.feat ul li svg { color: var(--amber); }
.plans-note { font-size: 13px; color: var(--muted); margin-top: 18px; }

/* ---------- footer ---------- */
.pub-foot { background: var(--ink); color: var(--muted-dark); }
.pub-foot .inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-block: 30px; font-family: var(--font-mono); font-size: 12.5px; }
.pub-foot .links { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.pub-foot a { color: #ECEAE3; transition: color .14s; }
.pub-foot a:hover { color: var(--amber); }

/* ---------- páginas legais ---------- */
.legal-head { background: var(--ink); color: #fff; }
.legal-head .inner { max-width: 880px; padding-block: 54px 44px; }
.legal-head h1 { font-size: clamp(28px, 3.4vw, 38px); margin-top: 14px; }
.legal-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-dark); margin-top: 14px; }
.legal-body { max-width: 880px; margin: 0 auto; padding: 48px 28px 96px; }
.legal-body > * { max-width: 72ch; }
.legal-body h2 { font-size: 20px; margin-top: 38px; margin-bottom: 14px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--ink-70); font-size: 14.5px; line-height: 1.7; margin-bottom: 12px; }
.legal-body ul { padding-left: 1.2em; margin: 0 0 16px; }
.legal-body a { color: var(--amber-deep); font-weight: 600; }
.legal-body table { width: 100%; border-collapse: collapse; margin-block: 18px; font-size: 13.5px; }
.legal-body th, .legal-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-body th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .how-grid, .plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .pub-nav .hide-sm { display: none; }
  .pub-hero .inner { padding-block: 60px 72px; }
  .pub-radar { display: none; }
  .pub-sec { padding-block: 56px; }
  .stats-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 44px; }
}
@media (max-width: 560px) {
  .how-grid, .plans-grid { grid-template-columns: 1fr; }
}