/* ============================================================================ CASTOR BEZERRA — PÁGINAS INSTITUCIONAIS (2026-08-17) Carregado no só em template == 'page' (layout.tpl). Só classes .cbp-* (nunca redefine classes ttd- ou dt- do tema). Motor: static/js/cb-pages.js; estrutura: static/js/cb-pages-data.js. Sem JS: nada aqui se aplica (a página fica como sempre foi), exceto o esconder-até-montar, protegido por .cbp-js + timeout. Direção: "crachá dourado". Os mascotes usam um crachá redondo dourado; aqui ele vira o sistema de ícones (moeda azul com aro dourado) e o marcador dos passos (moeda dourada numerada ligada por uma trilha tracejada — a "rota", mesma metáfora do rastreio). Azul domina, branco respira, dourado pontua. Títulos: Baloo 2 800 (arredondada extra-bold), corpo Inter. ========================================================================== */ :root{ --cbp-royal:#1E5FD8; --cbp-deep:#0F3D9C; --cbp-navy:#0B2C6F; --cbp-gold:#F2C14E; --cbp-gold-d:#D4AF37; --cbp-gold-l:#FBE9B7; --cbp-snow:#F3F5F9; --cbp-paper:#FBFCFE; --cbp-ink:#1B2434; --cbp-muted:#4A566B; --cbp-line:#DFE5EF; --cbp-tint:#E8EFFC; --cbp-white:#fff; --cbp-display:"Baloo 2","Sora",ui-rounded,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --cbp-ui:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --cbp-r-lg:24px; --cbp-r:18px; --cbp-r-sm:12px; --cbp-shadow:0 10px 30px -18px rgba(11,44,111,.35); --cbp-ease:cubic-bezier(.22,1,.36,1); } /* esconde até montar (só quando o handle é conhecido: html.cbp-js) */ html.cbp-js:not(.cbp-ready) .page-header, html.cbp-js:not(.cbp-ready) .user-content{ visibility:hidden; } .cbp-vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .cbp-vh-block{ display:none !important; } .cbp-user-content{ padding:0 !important; margin:0 !important; } .cbp{ font-family:var(--cbp-ui); color:var(--cbp-ink); font-size:16px; line-height:1.6; overflow-x:clip; } .cbp *, .cbp *::before, .cbp *::after{ box-sizing:border-box; } .cbp a{ color:var(--cbp-royal); text-decoration:none; } .cbp a:hover{ text-decoration:underline; text-underline-offset:3px; } .cbp p{ margin:0 0 14px; line-height:1.65; } .cbp p:last-child{ margin-bottom:0; } .cbp strong{ font-weight:700; color:inherit; } .cbp-i{ width:1.25em; height:1.25em; flex:0 0 auto; } .cbp-container{ max-width:1200px; margin:0 auto; padding:0 20px; } /* ===== HERO ============================================================== */ .cbp-hero{ position:relative; background:var(--cbp-deep); color:#fff; overflow:hidden; isolation:isolate; } .cbp-hero__media{ position:absolute; inset:0; z-index:0; } .cbp .cbp-hero__img{ display:block; width:100%; height:100%; max-width:none; margin:0; border:0; border-radius:0; object-fit:cover; object-position:right center; } .cbp-hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--cbp-deep) 0%, rgba(15,61,156,.96) 30%, rgba(15,61,156,.72) 46%, rgba(15,61,156,0) 64%); } .cbp-hero--noimg .cbp-hero__media{ background: radial-gradient(60% 90% at 90% 50%, rgba(30,95,216,.9), transparent 70%), repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px), repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px), var(--cbp-deep); } .cbp-hero--noimg .cbp-hero__media::after{ content:none; } .cbp-hero__body{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:26px 20px 34px; } .cbp-crumbs{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; margin:0 0 18px; color:rgba(255,255,255,.72); } .cbp-crumbs .crumb{ color:rgba(255,255,255,.72); } .cbp-crumbs .crumb.active{ color:#fff; } .cbp-crumbs .divider{ opacity:.5; } .cbp-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 10px; font:700 12px/1 var(--cbp-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--cbp-gold); } .cbp-eyebrow::before{ content:""; width:22px; height:3px; border-radius:3px; background:var(--cbp-gold); } .cbp .cbp-title{ font:800 clamp(34px,5vw,54px)/1.02 var(--cbp-display); letter-spacing:-.01em; color:#fff; margin:0 0 14px; padding:0; border:0; text-align:left; text-wrap:balance; } .cbp .cbp-title::after{ content:none; } .cbp .cbp-lead{ font-size:17px; line-height:1.55; color:rgba(255,255,255,.9); max-width:52ch; margin:0 0 22px; } .cbp .cbp-lead a{ color:var(--cbp-gold); text-decoration:underline; text-underline-offset:3px; } .cbp-ctas{ display:flex; flex-wrap:wrap; gap:12px; } /* botões */ .cbp .cbp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 20px; border-radius:999px; font:700 15px/1.2 var(--cbp-ui); text-decoration:none !important; cursor:pointer; border:2px solid transparent; transition:background .18s var(--cbp-ease), color .18s, border-color .18s, transform .18s var(--cbp-ease); touch-action:manipulation; } .cbp .cbp-btn:hover{ transform:translateY(-1px); } .cbp .cbp-btn:active{ transform:translateY(0); } .cbp .cbp-btn--primary{ background:var(--cbp-royal); color:#fff; border-color:var(--cbp-royal); } .cbp .cbp-btn--primary:hover{ background:var(--cbp-deep); border-color:var(--cbp-deep); color:#fff; } .cbp .cbp-btn--ghost{ background:#fff; color:var(--cbp-royal); border-color:var(--cbp-royal); } .cbp .cbp-btn--ghost:hover{ background:var(--cbp-tint); color:var(--cbp-deep); } .cbp .cbp-btn--block{ width:100%; } .cbp-hero .cbp-btn--primary{ background:var(--cbp-gold); border-color:var(--cbp-gold); color:var(--cbp-navy); } .cbp-hero .cbp-btn--primary:hover{ background:#f6cf6a; border-color:#f6cf6a; color:var(--cbp-navy); } .cbp-hero .cbp-btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55); } .cbp-hero .cbp-btn--ghost:hover{ background:rgba(255,255,255,.16); color:#fff; border-color:#fff; } .cbp .cbp-btn:focus-visible, .cbp .cbp-link:focus-visible, .cbp a:focus-visible, .cbp button:focus-visible{ outline:3px solid var(--cbp-gold); outline-offset:3px; border-radius:6px; } .cbp .cbp-btn:focus-visible{ border-radius:999px; } .cbp-wrap a:focus-visible, .cbp-wrap button:focus-visible, .cbp-related a:focus-visible{ outline-color:var(--cbp-royal); } /* fatos (ticket branco que "morde" a base do hero) */ .cbp-facts{ position:relative; z-index:2; list-style:none; margin:0 auto; padding:0 20px; max-width:1200px; display:grid; grid-template-columns:1fr; gap:10px; } .cbp-fact{ display:flex; align-items:center; gap:14px; background:#fff; color:var(--cbp-ink); border-radius:var(--cbp-r); padding:14px 16px; box-shadow:var(--cbp-shadow); border:1px solid var(--cbp-line); } .cbp-fact__ic{ width:44px; height:44px; flex:0 0 44px; border-radius:50%; display:grid; place-items:center; background:var(--cbp-royal); color:#fff; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--cbp-gold); } .cbp-fact__ic .cbp-i{ width:22px; height:22px; } .cbp-fact__tx{ display:flex; flex-direction:column; min-width:0; } .cbp-fact__tx strong{ font:800 16px/1.2 var(--cbp-display); color:var(--cbp-navy); } .cbp-fact__tx small{ font-size:13px; color:var(--cbp-muted); line-height:1.35; overflow-wrap:anywhere; } /* ===== WRAP (main + aside) ============================================== */ .cbp-wrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding:28px 0 12px; } .cbp-main{ min-width:0; } .cbp-cards{ display:grid; grid-template-columns:1fr; gap:16px; } /* card = seção oficial (h3 movido + corpo movido) */ .cbp-card{ background:#fff; border:1px solid var(--cbp-line); border-radius:var(--cbp-r-lg); padding:22px 20px; box-shadow:0 1px 0 rgba(11,44,111,.03); } .cbp-card + .cbp-card, .cbp-cards + .cbp-card{ margin-top:16px; } .cbp-card--intro{ background:var(--cbp-paper); } .cbp-card--intro .cbp-card__body > p{ font-size:16.5px; } .cbp-card__head{ display:flex; align-items:center; gap:14px; margin:0 0 14px; } .cbp-card__ic{ width:46px; height:46px; flex:0 0 46px; border-radius:50%; display:grid; place-items:center; background:var(--cbp-tint); color:var(--cbp-royal); box-shadow:inset 0 0 0 2px var(--cbp-gold-l); } .cbp-card__ic .cbp-i{ width:24px; height:24px; } .cbp .cbp-card__t{ font:800 21px/1.15 var(--cbp-display); color:var(--cbp-navy); margin:0; padding:0; border:0; letter-spacing:-.005em; } .cbp .cbp-card__t::after{ content:none; } .cbp-card__body{ color:var(--cbp-ink); } .cbp-card__body > :last-child{ margin-bottom:0; } /* nota-card: ícone à esquerda + parágrafo oficial (Sobre nós) */ .cbp-card--note{ display:flex; gap:16px; align-items:flex-start; } .cbp-card--note .cbp-card__ic{ margin-top:2px; } .cbp-card--note .cbp-card__body{ min-width:0; } .cbp-card--note .cbp-card__body p{ font-size:16.5px; } .cbp-cards--notes + .cbp-card{ margin-top:16px; } /* listas oficiais estilizadas */ .cbp ul.cbp-checks{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; } .cbp ul.cbp-checks li{ position:relative; padding-left:34px; margin:0; line-height:1.55; } .cbp ul.cbp-checks li::before{ content:""; position:absolute; left:0; top:.2em; width:22px; height:22px; border-radius:50%; background:var(--cbp-tint) url("data:image/svg+xml;utf8,") center/14px no-repeat; box-shadow:inset 0 0 0 1.5px var(--cbp-royal); } .cbp ol.cbp-ol{ margin:0 0 14px; padding-left:22px; } .cbp ol.cbp-ol li{ margin:0 0 8px; } /* passos = moedas douradas numeradas na trilha tracejada */ .cbp ol.cbp-steps{ list-style:none; counter-reset:cbp; margin:4px 0 6px; padding:0; position:relative; } .cbp ol.cbp-steps::before{ content:""; position:absolute; left:19px; top:14px; bottom:14px; border-left:2px dashed var(--cbp-gold); } .cbp ol.cbp-steps li{ counter-increment:cbp; position:relative; padding:2px 0 22px 58px; margin:0; line-height:1.55; } .cbp ol.cbp-steps li:last-child{ padding-bottom:2px; } .cbp ol.cbp-steps li::before{ content:counter(cbp); position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; background:var(--cbp-gold); color:var(--cbp-navy); font:800 18px/40px var(--cbp-display); text-align:center; box-shadow:0 0 0 3px #fff, 0 0 0 4.5px var(--cbp-gold-l); } .cbp ol.cbp-steps li > strong:first-child{ display:block; font:800 17px/1.25 var(--cbp-display); color:var(--cbp-navy); margin:6px 0 4px; } /* ===== FAQ (acordeão) =================================================== */ .cbp-acc__tools{ display:flex; justify-content:flex-end; margin:0 0 10px; } .cbp .cbp-acc__all{ background:none; border:0; padding:8px 4px; min-height:44px; color:var(--cbp-royal); font:700 14px/1 var(--cbp-ui); cursor:pointer; border-bottom:2px solid transparent; } .cbp .cbp-acc__all:hover{ border-bottom-color:var(--cbp-gold); } .cbp-acc{ display:grid; gap:10px; } .cbp-acc__item{ background:#fff; border:1px solid var(--cbp-line); border-radius:var(--cbp-r); overflow:hidden; transition:border-color .18s, box-shadow .18s; } .cbp-acc__item.is-open{ border-color:var(--cbp-royal); box-shadow:var(--cbp-shadow); } .cbp .cbp-acc__h{ margin:0; padding:0; border:0; font:inherit; } .cbp .cbp-acc__h::after{ content:none; } .cbp .cbp-acc__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; background:none; border:0; cursor:pointer; padding:18px 18px 18px 20px; min-height:56px; font:800 17px/1.3 var(--cbp-display); color:var(--cbp-navy); } .cbp .cbp-acc__btn:hover{ color:var(--cbp-royal); } .cbp-acc__chev{ width:32px; height:32px; flex:0 0 32px; border-radius:50%; display:grid; place-items:center; background:var(--cbp-tint); color:var(--cbp-royal); transition:transform .22s var(--cbp-ease), background .18s; } .cbp-acc__item.is-open .cbp-acc__chev{ transform:rotate(180deg); background:var(--cbp-gold); color:var(--cbp-navy); } .cbp-acc__inner{ padding:0 20px 20px 20px; color:var(--cbp-ink); } .cbp-acc__inner > :last-child{ margin-bottom:0; } /* ===== LEGAL (privacidade / termos) ====================================== */ .cbp-arts{ background:#fff; border:1px solid var(--cbp-line); border-radius:var(--cbp-r-lg); padding:8px 20px 6px; } .cbp-art{ padding:22px 0 20px; border-top:1px solid var(--cbp-line); scroll-margin-top:100px; } .cbp-art:first-child{ border-top:0; } .cbp .cbp-art__t{ font:800 20px/1.2 var(--cbp-display); color:var(--cbp-navy); margin:0 0 12px; padding:0 0 0 16px; border:0; position:relative; letter-spacing:-.005em; } .cbp .cbp-art__t::before{ content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:4px; border-radius:4px; background:var(--cbp-gold); } .cbp .cbp-art__t::after{ content:none; } .cbp-art__body{ max-width:72ch; } .cbp-art__body ul.cbp-checks{ gap:8px; } .cbp-wrap--legal .cbp-card--intro{ margin-bottom:16px; } /* ===== ASIDE ============================================================= */ .cbp-aside{ display:grid; gap:16px; align-content:start; } .cbp-box{ background:#fff; border:1px solid var(--cbp-line); border-radius:var(--cbp-r-lg); padding:20px; } .cbp .cbp-box__t{ font:800 18px/1.2 var(--cbp-display); color:var(--cbp-navy); margin:0 0 8px; padding:0; border:0; } .cbp .cbp-box__t::after{ content:none; } .cbp .cbp-box__p{ font-size:14.5px; color:var(--cbp-muted); margin:0 0 14px; } .cbp-help .cbp-btn + .cbp-btn{ margin-top:10px; } .cbp-help .cbp-btn--ghost span{ overflow-wrap:anywhere; font-size:14px; } .cbp-track{ background:linear-gradient(180deg,#fff, var(--cbp-paper)); } .cbp-track__ic, .cbp-seal__ic{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin:0 0 12px; background:var(--cbp-gold); color:var(--cbp-navy); box-shadow:0 0 0 3px #fff, 0 0 0 4.5px var(--cbp-gold-l); } .cbp-track__ic .cbp-i, .cbp-seal__ic .cbp-i{ width:22px; height:22px; } .cbp .cbp-link{ display:inline-flex; align-items:center; gap:8px; font:700 15px/1 var(--cbp-ui); color:var(--cbp-royal); min-height:44px; } .cbp .cbp-link:hover{ color:var(--cbp-deep); } .cbp .cbp-link:hover .cbp-i{ transform:translateX(3px); } .cbp .cbp-link .cbp-i{ transition:transform .18s var(--cbp-ease); } .cbp-seal{ background:var(--cbp-navy); color:#fff; border-color:var(--cbp-navy); } .cbp-seal .cbp-box__t{ color:#fff; } .cbp-seal__dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:13.5px; } .cbp-seal__dl dt{ color:var(--cbp-gold); font-weight:700; } .cbp-seal__dl dd{ margin:0; color:rgba(255,255,255,.9); overflow-wrap:anywhere; } .cbp-toc__list{ margin:0; padding:0; list-style:none; display:grid; gap:2px; } .cbp-toc__list li{ margin:0; } .cbp-toc__list a{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:14.5px; color:var(--cbp-ink); } .cbp-toc__list a::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cbp-gold); flex:0 0 8px; box-shadow:0 0 0 2px var(--cbp-gold-l); } .cbp-toc__list a:hover{ text-decoration:none; color:var(--cbp-royal); } .cbp-toc__list a:hover::before{ background:var(--cbp-royal); box-shadow:0 0 0 2px var(--cbp-tint); } /* ===== RELACIONADAS ====================================================== */ .cbp-related{ padding:8px 0 44px; } .cbp .cbp-related__t{ font:800 22px/1.2 var(--cbp-display); color:var(--cbp-navy); margin:0 0 14px; padding:0; border:0; } .cbp .cbp-related__t::after{ content:none; } .cbp-related__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:12px; } .cbp-related__list a{ display:flex; align-items:center; gap:12px; min-height:60px; padding:14px 16px; border-radius:var(--cbp-r); background:#fff; border:1px solid var(--cbp-line); color:var(--cbp-navy); font:800 16px/1.2 var(--cbp-display); transition:border-color .18s, transform .18s var(--cbp-ease), box-shadow .18s; } .cbp-related__list a:hover{ text-decoration:none; border-color:var(--cbp-royal); transform:translateY(-2px); box-shadow:var(--cbp-shadow); } .cbp-related__list a .cbp-i:first-child{ width:38px; height:38px; padding:8px; border-radius:50%; background:var(--cbp-tint); color:var(--cbp-royal); } .cbp-related__list a span{ flex:1; } .cbp-related__list a .cbp-i:last-child{ color:var(--cbp-gold-d); } /* ===== RESPONSIVO ======================================================== */ @media (max-width:819.98px){ .cbp-hero__media{ position:relative; inset:auto; width:100%; margin:0; height:auto; aspect-ratio:16/10; } .cbp .cbp-hero__img{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:auto; min-height:100%; object-position:72% center; } .cbp-hero__media::after{ background:linear-gradient(180deg, rgba(15,61,156,0) 55%, var(--cbp-deep) 100%); } .cbp .cbp-hero--mascote .cbp-hero__img{ object-position:64% center; } .cbp-hero__body{ padding-top:14px; padding-bottom:26px; } .cbp .cbp-title{ font-size:clamp(30px,8.4vw,40px); } .cbp .cbp-btn{ flex:1 1 auto; } .cbp-facts{ padding-top:14px; padding-bottom:0; margin-top:-16px; } .cbp-fact{ box-shadow:0 6px 18px -12px rgba(11,44,111,.35); } } @media (min-width:560px) and (max-width:819.98px){ .cbp-facts{ grid-template-columns:repeat(3,1fr); } .cbp-fact{ flex-direction:column; align-items:flex-start; gap:10px; } } @media (min-width:820px){ .cbp-hero{ min-height:clamp(400px, 34vw, 500px); display:flex; flex-direction:column; justify-content:flex-end; } .cbp-hero__body{ width:100%; padding:30px 20px 84px; } .cbp-hero__body > *{ max-width:min(52ch, 48%); } .cbp-hero__body > .cbp-crumbs{ max-width:none; } .cbp-facts{ grid-template-columns:repeat(3,1fr); gap:14px; margin-top:-52px; } .cbp-fact{ padding:16px 18px; } .cbp-wrap{ padding-top:36px; } .cbp-card{ padding:26px 26px 24px; } .cbp-arts{ padding:8px 28px 6px; } .cbp-related__list{ grid-template-columns:repeat(3,1fr); } } @media (min-width:1024px){ .cbp-wrap{ grid-template-columns:minmax(0,1fr) 320px; gap:32px; } .cbp-aside{ position:sticky; top:96px; } .cbp-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .cbp-cards .cbp-card{ margin:0; } .cbp-wrap--faq .cbp-cards, .cbp-wrap--legal .cbp-cards{ grid-template-columns:1fr; } /* cards com listas longas ocupam a linha toda */ .cbp-cards .cbp-card:has(ol.cbp-steps), .cbp-cards .cbp-card:only-child, .cbp-cards .cbp-card:nth-child(odd):last-child{ grid-column:1 / -1; } .cbp-cards .cbp-card:has(ol.cbp-steps) .cbp-card__body{ max-width:70ch; } } @media (min-width:1200px){ .cbp-hero__body{ padding-left:calc((100% - 1160px) / 2); padding-right:calc((100% - 1160px) / 2); } .cbp-facts{ padding-left:20px; padding-right:20px; } } @media (prefers-reduced-motion:reduce){ .cbp *{ transition:none !important; animation:none !important; } } @media print{ .cbp-hero__media, .cbp-aside, .cbp-related, .cbp-ctas{ display:none !important; } .cbp-hero{ background:#fff; color:#000; } .cbp .cbp-title, .cbp .cbp-lead{ color:#000; } .cbp-acc__panel[hidden]{ display:block !important; } }