/* ============================================================
   HUB DE CONTEÚDOS — quarta página de arquitetura/roteamento do
   ecossistema (depois de "O que você precisa", "Soluções" e
   "Segmentos"). Diferente das outras três, não linka material já
   publicado — é a arquitetura do centro de conhecimento da Logos,
   construída ANTES de existir conteúdo real. Por isso duas seções
   fazem trabalho duplo:

   - .ch-formatos: preparada para crescer (artigos, e-books,
     checklists, vídeos, webinars, podcasts) sem redesenho. Cada
     card hoje é um formato com tag "Em breve"/"Futuro"; quando
     existir peça real, vira link de verdade sem mudar a grid.
   - .ch-bridge: evita a página nascer "morta" por falta de
     conteúdo — redireciona para as páginas reais já publicadas
     (Soluções, Segmentos, O que você precisa), cumprindo também a
     conexão natural pedida entre os hubs.

   Identidade: grafite/aço (#6E7483) — mesma cor estrutural das
   outras 3 páginas de hub, mesmo motivo de sempre: sinaliza
   arquitetura/roteamento do ecossistema, não uma vertical de
   produto ou solução.
   ============================================================ */
:root{
  --v-accent:#6E7483;
  --v-accent-soft:#E5E6E9;
  --v-accent-deep:#373940;
  --v-accent-rgb:110,116,131;
}

/* ---------- BREADCRUMB ---------- */
.ch-breadcrumb{font-size:13px; color:rgba(255,255,255,.55); margin-bottom:26px;}
.ch-breadcrumb a{color:rgba(255,255,255,.55); transition:color .2s ease;}
.ch-breadcrumb a:hover{color:#fff;}

/* ---------- 1. HERO ---------- */
.ch-hero{position:relative; background:var(--chumbo); color:#fff; padding:170px 0 110px 0; overflow:hidden;}
.ch-hero-arc{position:absolute; inset:0; width:100%; height:100%; opacity:.4; z-index:0;}
.ch-hero-inner{position:relative; z-index:1; max-width:760px;}
.ch-hero-kicker{font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--v-accent); text-transform:uppercase; margin-bottom:22px;}
.ch-hero h1{font-size:40px; font-weight:800; letter-spacing:-1px; line-height:1.24; margin-bottom:22px;}
.ch-hero-lead{font-size:17px; line-height:1.65; color:rgba(255,255,255,.78); max-width:600px; margin-bottom:40px;}
.ch-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;}
.ch-hero-cue svg{animation:chCueBounce 2.2s ease-in-out infinite;}
.ch-hero-cue:hover{color:#fff; gap:13px;}
@keyframes chCueBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* ---------- SECTION HEAD (compartilhado por 2 e 3) ---------- */
.ch-section-head{max-width:640px; margin:0 auto 48px auto; text-align:center;}
.ch-section-head h2{font-size:30px; font-weight:800; letter-spacing:-.6px; color:var(--chumbo); margin-bottom:12px;}
.ch-section-head p{font-size:15.5px; color:var(--ink); line-height:1.6;}

/* ---------- 2. FORMATOS ---------- */
.ch-formatos{background:var(--offwhite); padding:110px 0;}
.ch-format-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.ch-format-card{
  position:relative; display:flex; flex-direction:column; gap:10px; background:#fff; border-radius:20px; padding:30px 28px;
  border:1.5px dashed rgba(36,36,48,.16);
}
.ch-format-card.is-future{background:transparent; border-color:rgba(36,36,48,.12);}
.ch-format-icon{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px;
  background:var(--v-accent-soft); color:var(--v-accent-deep); margin-bottom:4px;
}
.ch-format-tag{
  position:absolute; top:28px; right:28px; font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:var(--v-accent-deep); background:var(--v-accent-soft); border-radius:999px; padding:5px 11px;
}
.ch-format-card.is-future .ch-format-tag{color:rgba(55,57,64,.55); background:rgba(36,36,48,.07);}
.ch-format-card h3{font-size:18px; font-weight:800; letter-spacing:-.3px; color:var(--chumbo);}
.ch-format-card p{font-size:14px; color:var(--ink); line-height:1.6;}

/* ---------- 3. PONTE DE NAVEGAÇÃO CONTEXTUAL ---------- */
.ch-bridge{background:#fff; padding:110px 0;}
.ch-bridge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1020px; margin:0 auto;}
.ch-bridge-col{display:flex; flex-direction:column; background:var(--offwhite); border-radius:20px; padding:30px 28px;}
.ch-bridge-kicker{font-size:12.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--v-accent-deep); margin-bottom:16px;}
.ch-bridge-col a{display:block; font-size:14.5px; font-weight:600; color:var(--chumbo); padding:9px 0; border-bottom:1px solid rgba(36,36,48,.08); transition:color .2s ease, padding-left .2s ease;}
.ch-bridge-col a:hover{color:var(--v-accent-deep); padding-left:4px;}
.ch-bridge-all{border-bottom:none !important; margin-top:6px; font-weight:700; color:var(--v-accent-deep) !important;}

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

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
  .ch-hero{padding:140px 0 90px 0;}
  .ch-hero h1{font-size:30px;}
  .ch-formatos,.ch-bridge{padding:80px 0;}
  .ch-format-grid{grid-template-columns:repeat(2,1fr);}
  .ch-bridge-grid{grid-template-columns:1fr; gap:16px;}
}
@media (max-width:640px){
  .ch-hero h1{font-size:26px;}
  .ch-format-grid{grid-template-columns:1fr;}
  .ch-format-tag{position:static; align-self:flex-start;}
}

/* ===== Estudos de caso e materiais (case completo; as provas curtas ficam distribuídas pelo site) ===== */
.ch-format-tag.is-live{color:#fff; background:var(--logos-blue);}
.ch-cases{padding:96px 0; background:#fff;}
.ch-case-grid{display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:20px; margin-top:40px; align-items:stretch;}
.ch-case{background:#F4F5F7; border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:12px;}
.ch-case-type{font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--logos-blue);}
.ch-case h3{font-size:19px; line-height:1.3; font-weight:700; letter-spacing:-.3px; color:var(--chumbo);}
.ch-case p{font-size:14px; line-height:1.6; color:var(--ink);}
.ch-case-metrics{list-style:none; display:flex; gap:18px; margin:6px 0 4px; padding:14px 0 0; border-top:1px solid rgba(36,36,48,.1);}
.ch-case-metrics li{display:flex; flex-direction:column; gap:2px;}
.ch-case-metrics b{font-size:22px; font-weight:800; letter-spacing:-.6px; color:var(--chumbo);}
.ch-case-metrics span{font-size:12px; color:rgba(36,36,48,.6); line-height:1.3;}
.ch-case-cta{margin-top:auto; align-self:flex-start; font-size:14px; font-weight:600; color:var(--chumbo); border-bottom:1px solid rgba(36,36,48,.25); padding-bottom:2px; text-decoration:none;}
.ch-case-cta:hover{border-bottom-color:var(--logos-blue);}
.ch-case-video{background:#040434; flex-direction:row; gap:20px; align-items:flex-start;}
.ch-case-video video{width:46%; aspect-ratio:9/16; object-fit:cover; border-radius:12px; background:#000; flex-shrink:0;}
.ch-case-video h3{color:#fff;}
.ch-case-video p{color:#B9C3D9;}
.ch-case-video .ch-case-type{color:#6CC4F5;}
.ch-case-video > div{display:flex; flex-direction:column; gap:12px;}
@media (max-width:1100px){ .ch-case-grid{grid-template-columns:1fr 1fr;} .ch-case-video{grid-column:1 / -1;} .ch-case-video video{width:240px;} }
@media (max-width:700px){ .ch-cases{padding:72px 0;} .ch-case-grid{grid-template-columns:1fr;} .ch-case-video{flex-direction:column;} .ch-case-video video{width:100%; max-width:320px;} }

/* cards de formato agora são links para destinos reais */
a.ch-format-card{text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease;}
a.ch-format-card:hover{transform:translateY(-3px);}