/* ============================================================
   O QUE VOCÊ PRECISA — camada de roteamento (ex-"Pilares de
   Resultado"), reconcebida como Contextos de Entrada: representa a
   forma como o cliente chega até nós (por situação vivida), não o
   catálogo da Logos. Por isso não é um hub "profundo" — cada card é
   uma porta de entrada rápida para Soluções/Segmentos já existentes,
   não uma página de conteúdo própria.

   Identidade: grafite/aço (#6E7483) — cor real da paleta oficial
   (1º stop do gradiente da marca, ver svgdefs). Neutra o bastante pra
   não competir com nenhuma vertical de solução; comunica sinalização/
   roteamento, não uma nova categoria de produto.
   ============================================================ */
:root{
  --v-accent:#6E7483;
  --v-accent-soft:#E5E6E9;
  --v-accent-deep:#373940;
  --v-accent-rgb:110,116,131;
}

.oq-kicker{font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--v-accent-deep); text-transform:uppercase;}

/* ---------- 1. HERO ---------- */
.oq-hero{position:relative; background:var(--chumbo); color:#fff; padding:170px 0 110px 0; overflow:hidden;}
.oq-hero-arc{position:absolute; inset:0; width:100%; height:100%; opacity:.4; z-index:0;}
.oq-hero-inner{position:relative; z-index:1; max-width:760px;}
.oq-hero-kicker{font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--v-accent); text-transform:uppercase; margin-bottom:22px;}
.oq-hero h1{font-size:40px; font-weight:800; letter-spacing:-1px; line-height:1.24; margin-bottom:22px;}
.oq-hero-lead{font-size:17px; line-height:1.65; color:rgba(255,255,255,.78); max-width:560px; margin-bottom:40px;}
.oq-hero-cue{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.65); transition:color .2s ease, gap .2s ease;}
.oq-hero-cue svg{animation:oqCueBounce 2.2s ease-in-out infinite;}
.oq-hero-cue:hover{color:#fff; gap:13px;}
@keyframes oqCueBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* ---------- 2. GRID DE CONTEXTOS ---------- */
.oq-grid-section{background:var(--offwhite); padding:110px 0;}
.oq-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.oq-card{
  display:flex; flex-direction:column; gap:14px; background:#fff; border-radius:22px; padding:32px 30px;
  border:1px solid rgba(36,36,48,.08); border-top:3px solid var(--v-accent);
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease;
}
.oq-card:hover{transform:translateY(-4px); box-shadow:0 26px 48px -28px rgba(36,36,48,.26);}
.oq-card-q{font-size:18px; font-weight:800; letter-spacing:-.3px; line-height:1.4; color:var(--chumbo); font-style:italic;}
.oq-card-d{font-size:14px; color:var(--ink); line-height:1.65; flex:1;}
.oq-card-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:2px;}
.oq-card-links a{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--v-accent-deep);
  background:var(--v-accent-soft); border-radius:999px; padding:8px 14px; transition:gap .2s ease, background .2s ease;
}
.oq-card-links a:hover{gap:9px; background:rgba(var(--v-accent-rgb),.22);}

/* ---------- 3. CTA FINAL ---------- */
.oq-ctafinal{background:var(--chumbo); padding:100px 0; text-align:center;}
.oq-ctafinal .wrap{max-width:620px;}
.oq-ctafinal h2{color:#fff; font-weight:800; font-size:32px; letter-spacing:-.8px; margin-bottom:16px;}
.oq-ctafinal p{color:rgba(255,255,255,.75); font-size:16px; line-height:1.65; margin-bottom:32px;}
.oq-ctafinal-actions{justify-content:center;}

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
  .oq-hero{padding:140px 0 90px 0;}
  .oq-hero h1{font-size:30px;}
  .oq-grid-section{padding:80px 0;}
  .oq-cards{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .oq-hero h1{font-size:26px;}
  .oq-card{padding:26px 24px;}
}