/* CEOBRANDS (registro de marca no INPI).
   Carrega DEPOIS de page-certificado-digital.css, que é a folha compartilhada das páginas de
   venda de serviço (componentes .cd-*). Aqui só entram: os tokens da marca CEOBRANDS e os
   três blocos que só existem nesta página (linha do tempo do INPI, classes e comparativo). */
:root{
  /* Rodape: fundo no tom da marca e logo da CEOCON chapada em branco. */
  --ft-bg:#101921;--ft-logo:brightness(0) invert(1);
  --cd-acc:#2F6FB3;--cd-acc-deep:#255A93;--cd-acc2:#8FBCE8;--cd-acc-rgb:47,111,179;
  /* Branco sobre #2F6FB3 dá 5,19:1 (passa em AA), então o botão usa o azul da marca. */
  --cd-btn:#2F6FB3;--cd-btn-deep:#245988;
  --cd-brand:#18385A;--cd-brand-dark:#0C1D2F;--cd-brand-deep:#050B12;
  --cd-ink:#1B2226;--cd-ink-2:#535A66;--cd-line:#E2E8F0;--cd-bg:#EEF3F9;--cd-bg-2:#F8FAFD;
  /* Acentos do chrome compartilhado (header, mega menu, rodapé) na identidade CEOBRANDS. */
  --acc:#2F6FB3;--acc-deep:#255A93;--acc-ink:#FFFFFF;--acc2:#8FBCE8;--acc2-rgb:143,188,232;
  --brand:#18385A;--brand-rgb:24,56,90;--brand-dark:#0C1D2F;--navink:#D6E3F1;
  --sol-a:#18385A;--sol-b:#0C1D2F;
}
.cd-subnav{background:rgba(248,250,253,.96)}
/* Os degradês do hero e das seções escuras têm o primeiro tom fixo na folha compartilhada
   (era o azul ardósia do CEOCERTIFICADO). Aqui ele passa a ser o azul do CEOBRANDS. */
.cd-hero{background:radial-gradient(110% 120% at 80% 0%,#1F4571 0%,var(--cd-brand) 46%,var(--cd-brand-deep) 100%)}
.cd-sec--dark{background:radial-gradient(120% 120% at 85% 0%,#1F4571 0%,var(--cd-brand) 45%,var(--cd-brand-deep) 100%)}

/* ---------- Linha do tempo do processo no INPI ---------- */
.cb-time{position:relative;display:flex;flex-direction:column;gap:0;max-width:860px;margin:0 auto}
.cb-time::before{content:"";position:absolute;left:23px;top:18px;bottom:26px;width:2px;background:linear-gradient(180deg,var(--cd-acc),rgba(var(--cd-acc-rgb),.18))}
.cb-t{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;padding:0 0 26px}
.cb-t:last-child{padding-bottom:0}
.cb-t-n{position:relative;z-index:1;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--cd-brand);color:var(--cd-acc2);font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;box-shadow:0 0 0 6px var(--cd-bg-2)}
.cb-t--now .cb-t-n{background:linear-gradient(135deg,var(--cd-btn),var(--cd-btn-deep));color:#fff}
.cb-t-body{background:#fff;border:1px solid var(--cd-line);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);padding:18px 22px}
.cb-t-body h3{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15.5px;margin:0 0 6px;color:var(--cd-brand);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cb-t-tag{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--cd-acc-deep);background:rgba(var(--cd-acc-rgb),.12);border-radius:20px;padding:4px 10px}
.cb-t-body p{margin:0;font-size:13.5px;line-height:1.7;color:var(--cd-ink-2)}
.cb-t-body p + p{margin-top:8px}

/* ---------- Classes de Nice ---------- */
.cb-classes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cb-cls{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--cd-line);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);padding:14px 16px;transition:transform .2s,border-color .2s}
.cb-cls:hover{transform:translateY(-2px);border-color:var(--cd-acc)}
.cb-cls b{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--cd-acc-rgb),.12);color:var(--cd-acc-deep);font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px}
.cb-cls span{display:block;font-size:13px;line-height:1.5;color:var(--cd-ink-2)}
.cb-cls span i{display:block;font-style:normal;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:var(--cd-brand);margin-bottom:1px}

/* ---------- Comparativo (com a CEOCON x por conta própria) ---------- */
.cb-cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cb-col{clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);padding:26px 24px}
.cb-col--a{background:#fff;border:1px solid var(--cd-line)}
.cb-col--b{background:radial-gradient(120% 140% at 15% 0%,#1F4571 0%,var(--cd-brand) 55%,var(--cd-brand-dark) 100%);color:#fff}
.cb-col h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;margin:0 0 16px}
.cb-col--a h3{color:#8A8D93}
.cb-col--b h3{color:var(--cd-acc2)}
.cb-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cb-col li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.6}
.cb-col--a li{color:#6A6E77}
.cb-col--b li{color:#E3EAF4}
.cb-col li svg{flex:none;margin-top:3px}
.cb-col--a li svg{color:#B6B9BF}
.cb-col--b li svg{color:var(--cd-acc2)}

/* ---------- Selo de símbolo ® ---------- */
.cb-r{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;background:#fff;border:1px solid var(--cd-line);border-left:3px solid var(--cd-acc);padding:22px 24px}
.cb-r-mark{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(40px,6vw,60px);line-height:1;color:var(--cd-acc);opacity:.9}
.cb-r p{margin:0;font-size:13.5px;line-height:1.7;color:var(--cd-ink-2)}
.cb-r b{color:var(--cd-brand)}

/* ---------- Responsivo ---------- */
@media(max-width:1080px){
  .cb-classes{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .cb-cmp{grid-template-columns:1fr}
  .cb-classes{grid-template-columns:1fr}
  .cb-time::before{left:19px}
  .cb-t{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .cb-t-n{width:40px;height:40px;font-size:14px}
  .cb-r{grid-template-columns:1fr;gap:10px}
}