/* comece.css — "Comece por aqui" (mapa do hub), sobre os tokens do lab.css.
   Accent azul-marca (#2563eb): esta é a página "centro", distinta do roxo do
   Lab e do verde da Loja. Sem emoji, sem travessão conector. */

:root { --accent: #2563eb; }

.cq-wrap { max-width: 1000px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

.cq-hero { margin: clamp(1.6rem, 5vw, 3rem) 0 1.8rem; max-width: 720px; }
.cq-hero__kicker { font: 700 .72rem var(--font-mono); letter-spacing: .18em; color: var(--accent); margin: 0 0 .5rem; }
.cq-hero__title { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.04; margin: 0 0 .7rem; }
.cq-hero__lead { color: var(--text-muted); font-size: 1.08rem; line-height: 1.6; margin: 0; }

/* Serviços em destaque (o que paga) */
.cq-feature { display: flex; gap: 1.2rem; align-items: center; text-decoration: none; color: inherit;
  padding: clamp(1.2rem, 3vw, 1.8rem); margin-bottom: 1.1rem; border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    var(--bg-card);
  transition: transform .15s var(--ease-std), border-color .15s; }
.cq-feature:hover { transform: translateY(-3px); border-color: var(--accent); }
.cq-feature__icon { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 2rem; }
.cq-feature__tag { font: 700 .68rem var(--font-mono); letter-spacing: .16em; color: var(--accent); }
.cq-feature__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.25rem, 3vw, 1.6rem); margin: .2rem 0 .35rem; }
.cq-feature__txt { color: var(--text-muted); font-size: .98rem; line-height: 1.55; margin: 0 0 .6rem; }
.cq-feature__cta { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--accent); }

/* grid das outras áreas */
.cq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cq-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 1.2rem 1.25rem;
  border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-card); box-shadow: var(--shadow-soft);
  transition: transform .15s var(--ease-std), border-color .15s; }
.cq-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.cq-card__icon { font-size: 1.7rem; color: var(--accent); margin-bottom: .55rem; }
.cq-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin: 0 0 .35rem; }
.cq-card__txt { color: var(--text-muted); font-size: .9rem; line-height: 1.5; margin: 0 0 .8rem; flex: 1; }
.cq-card__go { font: 600 .82rem var(--font-body); color: var(--accent); display: inline-flex; align-items: center; gap: .25rem; }

.cq-outro { text-align: center; margin: 2.4rem 0 1rem; }
.cq-outro p { color: var(--text-muted); font-size: 1rem; margin: 0 0 .7rem; }
.cq-outro__cta { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: 1.05rem;
  color: var(--accent); text-decoration: none; }
.cq-outro__cta:hover { text-decoration: underline; }

/* a newsletter aqui respira um pouco mais */
.cq-wrap .bp-news { margin: 2rem 0; }

@media (max-width: 560px) {
  .cq-feature { flex-direction: column; align-items: flex-start; }
  .cq-grid { grid-template-columns: 1fr; }
}