/* ============================================================
   COGNITIO · Sistemas Cognitivos
   Folha de estilo AUTOSSUFICIENTE para site estático.
   Espelha os tokens do design system (tokens/*.css). Sem dependências,
   sem runtime — pronta para publicação estática (Hostinger etc.).
   ============================================================ */

/* ---------- Fontes (Tiempos, OTF locais) ---------- */
@font-face { font-family:"Tiempos Headline"; src:url("fonts/TiemposHeadline-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Tiempos Headline"; src:url("fonts/TiemposHeadline-LightItalic.otf") format("opentype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"Tiempos Headline"; src:url("fonts/TiemposHeadline-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Tiempos Headline"; src:url("fonts/TiemposHeadline-RegularItalic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Tiempos Headline"; src:url("fonts/TiemposHeadline-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Tiempos Headline"; src:url("fonts/TiemposHeadline-Semibold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Tiempos Text"; src:url("fonts/TiemposText-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Tiempos Text"; src:url("fonts/TiemposText-RegularItalic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Tiempos Text"; src:url("fonts/TiemposText-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Tiempos Text"; src:url("fonts/TiemposText-Semibold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --paper:#F3F3EC; --paper-raised:#FBFAF3; --paper-sunken:#EBEAE0; --paper-deep:#E4E3D8; --paper-ink:#1F2A22;
  --ink:#171A16; --ink-2:#3B3F39; --ink-3:#6F756B; --ink-4:#9DA197; --ink-on-dark:#EDEDE4; --ink-on-dark-2:#B4B8AC;
  --accent:#1E4A3A; --accent-strong:#16382B; --accent-hover:#244F40; --accent-soft:#E3EAE4; --accent-line:#C2D0C6; --accent-on:#F6F7F1;
  --line:#D9D8CC; --line-strong:#C5C4B6; --line-faint:#E6E5DA; --line-on-dark:#34403A;
  --positive:#2F6B4F; --positive-soft:#E2EBE4; --caution:#8A6A2B; --caution-soft:#EFE8D6;
  --critical:#8C2F2A; --critical-soft:#F0E0DD; --info:#2D4763; --info-soft:#E1E6EC;

  --font-display:"Tiempos Headline", Georgia, "Times New Roman", serif;
  --font-text:"Tiempos Text", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --radius-sm:2px; --radius-md:4px; --radius-lg:8px;
  --container:1120px; --measure:68ch;
  --ease:cubic-bezier(.4,0,.2,1);
  --focus-ring: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink-2); font-family:var(--font-text); font-size:18px; line-height:1.62; font-feature-settings:"kern","liga","onum","pnum"; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); color:var(--ink); font-weight:400; line-height:1.18; letter-spacing:-0.015em; text-wrap:balance; }
p{ margin:0 0 1rem; max-width:var(--measure); text-wrap:pretty; }
a{ color:var(--accent); text-decoration:none; text-underline-offset:.18em; }
a:hover{ text-decoration:underline; }
strong{ font-weight:600; } em{ font-style:italic; }
mark{ background:var(--accent-soft); color:var(--ink); padding:0 3px; }
::selection{ background:var(--accent-soft); color:var(--ink); }
img{ max-width:100%; display:block; }

/* ---------- Layout ---------- */
.cg-container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
.cg-container--narrow{ max-width:900px; }
.cg-section{ padding:72px 0; }
.cg-section--hairline{ border-bottom:1px solid var(--line); }
.cg-section--sunken{ background:var(--paper-sunken); border-bottom:1px solid var(--line); }
.cg-section--dark{ background:var(--paper-ink); color:var(--ink-on-dark); }
.cg-grid{ display:grid; gap:24px; }

/* ---------- Kicker / overline ---------- */
.cg-kicker{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-text); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.cg-kicker::before{ content:""; width:28px; height:1.5px; background:var(--accent); flex:none; }
.cg-kicker--paper{ color:var(--ink-on-dark-2); }

/* ---------- Wordmark ---------- */
.cg-wordmark{ display:inline-flex; flex-direction:column; gap:4px; }
.cg-wordmark__word{ font-family:var(--font-display); font-weight:400; line-height:1; letter-spacing:-0.01em; color:var(--ink); }
.cg-wordmark__rule{ width:96px; height:1.5px; background:var(--accent); margin:6px 0 2px; }
.cg-wordmark__desc{ font-family:var(--font-text); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.cg-wordmark--sm .cg-wordmark__word{ font-size:22px; } .cg-wordmark--sm .cg-wordmark__desc{ font-size:9px; }
.cg-wordmark--md .cg-wordmark__word{ font-size:34px; } .cg-wordmark--md .cg-wordmark__desc{ font-size:11px; } .cg-wordmark--md .cg-wordmark__rule{ width:132px; }
.cg-wordmark--paper .cg-wordmark__word{ color:var(--ink-on-dark); } .cg-wordmark--paper .cg-wordmark__desc{ color:var(--ink-on-dark-2); }

/* ---------- Botões ---------- */
.cg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap; font-family:var(--font-text); font-weight:500; letter-spacing:.01em; line-height:1.1; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; text-align:center; transition:background var(--ease) .12s, color var(--ease) .12s, border-color var(--ease) .12s; }
.cg-btn--sm{ padding:8px 16px; font-size:14px; } .cg-btn--md{ padding:12px 22px; font-size:16px; } .cg-btn--lg{ padding:15px 30px; font-size:18px; }
.cg-btn--primary{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.cg-btn--primary:hover{ background:var(--accent-hover); text-decoration:none; }
.cg-btn--primary:active{ background:var(--accent-strong); }
.cg-btn--secondary{ background:transparent; color:var(--ink); border-color:var(--ink); }
.cg-btn--secondary:hover{ background:var(--ink); color:var(--paper); text-decoration:none; }
.cg-btn--ghost{ background:transparent; color:var(--accent); }
.cg-btn--ghost:hover{ background:var(--accent-soft); text-decoration:none; }
.cg-btn--quiet{ background:var(--paper-raised); color:var(--ink); border-color:var(--line); }
.cg-btn--quiet:hover{ background:var(--paper-sunken); text-decoration:none; }
.cg-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.cg-btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Cartões ---------- */
.cg-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px 32px; }
.cg-card--raised{ border-color:var(--line-faint); box-shadow:0 1px 3px rgba(23,26,22,.06), 0 0 0 1px rgba(23,26,22,.04); }
.cg-card--sunken{ background:var(--paper-sunken); border-color:var(--line-faint); }
.cg-card--dark{ background:var(--paper-ink); border-color:var(--line-on-dark); color:var(--ink-on-dark); }
.cg-card--flush{ padding:0; overflow:hidden; }

/* ---------- Selos & rótulos ---------- */
.cg-badge{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-family:var(--font-text); font-size:13px; font-weight:500; line-height:1.2; padding:4px 10px; border-radius:var(--radius-sm); background:var(--paper-sunken); color:var(--ink-2); }
.cg-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.cg-badge--accent{ background:var(--accent-soft); color:var(--accent-strong); }
.cg-badge--positive{ background:var(--positive-soft); color:var(--positive); }
.cg-badge--caution{ background:var(--caution-soft); color:var(--caution); }
.cg-badge--critical{ background:var(--critical-soft); color:var(--critical); }
.cg-badge--info{ background:var(--info-soft); color:var(--info); }
.cg-tag{ display:inline-flex; align-items:center; white-space:nowrap; font-family:var(--font-text); font-size:12px; font-weight:500; letter-spacing:.02em; line-height:1.2; padding:3px 9px; border-radius:var(--radius-sm); background:transparent; color:var(--ink-2); border:1px solid var(--line-strong); }
.cg-tag--accent{ color:var(--accent-strong); border-color:var(--accent-line); }
.cg-tag--solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Divisória ---------- */
.cg-divider{ display:flex; align-items:center; gap:16px; }
.cg-divider::before,.cg-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.cg-divider__label{ font-family:var(--font-text); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- Timeline (mapa dos autos) ---------- */
.cg-timeline{ list-style:none; margin:0; padding:0 0 0 26px; position:relative; }
.cg-timeline::before{ content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1.5px; background:var(--line-strong); }
.cg-timeline__event{ position:relative; padding:10px 0; }
.cg-timeline__event::before{ content:""; position:absolute; left:-26px; top:16px; width:9px; height:9px; border-radius:50%; background:var(--ink-3); box-shadow:0 0 0 4px var(--paper); }
.cg-timeline__event--accent::before{ background:var(--accent); }
.cg-timeline__event--positive::before{ background:var(--positive); }
.cg-timeline__event--critical::before{ background:var(--critical); }
.cg-timeline__meta{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cg-timeline__date{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); letter-spacing:.02em; }
.cg-timeline__ref{ font-family:var(--font-text); font-style:italic; font-size:13px; color:var(--accent); }
.cg-timeline__title{ font-family:var(--font-display); font-size:18px; color:var(--ink); margin-top:2px; line-height:1.3; }
.cg-timeline__detail{ font-size:14px; color:var(--ink-2); margin-top:4px; max-width:60ch; }
/* raised card timeline sits on raised paper, adjust dot ring */
.cg-card .cg-timeline__event::before{ box-shadow:0 0 0 4px var(--paper-raised); }

/* ---------- Proveniência ---------- */
.cg-prov{ display:flex; gap:14px; padding:14px 18px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--info-soft); border-left:2px solid var(--info); }
.cg-prov__body{ flex:1; min-width:0; }
.cg-prov__label{ font-family:var(--font-text); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--info); margin-bottom:5px; }
.cg-prov__text{ font-family:var(--font-text); font-size:15px; color:var(--ink-2); line-height:1.5; }
.cg-prov__source{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); margin-top:7px; }
.cg-prov__action{ flex:none; align-self:center; }
.cg-prov--positive{ background:var(--positive-soft); border-left-color:var(--positive); } .cg-prov--positive .cg-prov__label{ color:var(--positive); }
.cg-prov--caution{ background:var(--caution-soft); border-left-color:var(--caution); } .cg-prov--caution .cg-prov__label{ color:var(--caution); }
.cg-prov--critical{ background:var(--critical-soft); border-left-color:var(--critical); } .cg-prov--critical .cg-prov__label{ color:var(--critical); }

/* ---------- Abas ---------- */
.cg-tabs{ display:flex; gap:28px; border-bottom:1px solid var(--line); }
.cg-tab{ appearance:none; background:none; border:none; cursor:pointer; padding:0 0 12px; font-family:var(--font-text); font-size:15px; font-weight:400; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s var(--ease); }
.cg-tab:hover{ color:var(--ink); }
.cg-tab[aria-selected="true"]{ color:var(--ink); font-weight:500; border-bottom-color:var(--accent); }
.cg-tabpanel[hidden]{ display:none; }

/* ---------- Formulário ---------- */
.cg-field{ display:flex; flex-direction:column; gap:7px; }
.cg-label{ font-family:var(--font-text); font-size:14px; font-weight:500; color:var(--ink); letter-spacing:.01em; }
.cg-label__req{ color:var(--accent); margin-left:3px; }
.cg-hint{ font-family:var(--font-text); font-size:13px; color:var(--ink-3); }
.cg-error{ font-family:var(--font-text); font-size:13px; color:var(--critical); }
.cg-input,.cg-textarea,.cg-select{ width:100%; font-family:var(--font-text); font-size:16px; color:var(--ink); background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:11px 14px; line-height:1.4; outline:none; transition:border-color .12s var(--ease), box-shadow .12s var(--ease); }
.cg-textarea{ resize:vertical; min-height:96px; }
.cg-input:focus,.cg-textarea:focus,.cg-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.cg-input--invalid{ border-color:var(--critical); }
.cg-select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236F756B' stroke-width='1.5' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; }
.cg-check{ display:inline-flex; align-items:flex-start; gap:10px; cursor:pointer; font-family:var(--font-text); font-size:15px; color:var(--ink-2); }
.cg-check input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent); flex:none; }

/* ---------- Cabeçalho ---------- */
.cg-header{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid var(--line); }
.cg-header__inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.cg-nav{ display:flex; align-items:center; gap:32px; }
.cg-nav a{ font-family:var(--font-text); font-size:15px; color:var(--ink-3); text-decoration:none; font-weight:400; }
.cg-nav a:hover{ color:var(--ink); }
.cg-nav a[aria-current="page"]{ color:var(--ink); font-weight:500; }

/* ---------- Rodapé ---------- */
.cg-footer{ background:var(--paper-ink); color:var(--ink-on-dark); }
.cg-footer__inner{ padding:72px 0 40px; }
.cg-footer__cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.cg-footer h4{ font-family:var(--font-text); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-on-dark-2); margin-bottom:16px; font-weight:500; }
.cg-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.cg-footer a{ color:var(--ink-on-dark); text-decoration:none; font-size:15px; }
.cg-footer a:hover{ text-decoration:underline; }
.cg-footer__bar{ display:flex; justify-content:space-between; align-items:center; margin-top:56px; padding-top:24px; border-top:1px solid var(--line-on-dark); }
.cg-footer__opus{ font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--ink-on-dark); }
.cg-footer__copy{ font-size:13px; color:var(--ink-on-dark-2); }

/* ---------- Passos do método ---------- */
.cg-step-n{ font-family:var(--font-display); font-size:22px; color:var(--accent); flex:none; min-width:28px; }
.cg-step-t{ font-size:16px; color:var(--ink); line-height:1.4; }

/* ---------- Utilitários ---------- */
.cg-hero-title{ font-size:60px; font-weight:300; line-height:1.05; letter-spacing:-0.015em; }
.cg-lead{ font-size:20px; line-height:1.55; color:var(--ink-2); }
.cg-accent-italic{ font-style:italic; color:var(--accent); }
.cg-mono{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); }
.cg-sig{ font-family:var(--font-display); font-style:italic; color:var(--accent); }

@media (max-width:900px){
  .cg-footer__cols{ grid-template-columns:1fr 1fr; }
  .cg-hero-title{ font-size:42px; }
  .cg-nav{ gap:18px; } .cg-nav a{ display:none; } .cg-nav .cg-btn{ display:inline-flex; }
}
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---------- Portal (adendo v2, tokens da casa) ---------- */
.cg-codebox{ font-family:var(--font-mono); font-size:13.5px; color:var(--ink); background:var(--paper-sunken); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; word-break:break-all; }
.cg-auth{ max-width:460px; margin:0 auto; }
.cg-svc{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.cg-svc__body{ max-width:70%; }
.cg-nav a.cg-btn--primary{ color:var(--accent-on); }
.cg-nav a.cg-btn--primary:hover{ color:var(--accent-on); }

/* ============================================================
   Portal v2.1 (03/09/2026) — conectores em destaque, tutorial
   ilustrado, páginas de serviço. Tokens da casa; sem dependências.
   ============================================================ */
.cg-section--tight{ padding:56px 0 40px; }
.cg-hero-title--md{ font-size:50px; margin-top:20px; }
.cg-h2{ font-size:38px; }
.cg-h3{ font-size:26px; line-height:1.2; }
.cg-h4{ font-size:20px; margin:0 0 6px; }
.cg-h2-dark{ font-size:42px; font-weight:300; color:var(--ink-on-dark); letter-spacing:-0.01em; }
.cg-p{ font-size:17px; line-height:1.6; color:var(--ink-2); max-width:66ch; }
.cg-p--justify{ text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.cg-p-sm{ font-size:15px; line-height:1.55; color:var(--ink-2); margin:0 0 8px; max-width:66ch; }
.cg-footnote{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-4); line-height:1.5; margin:28px 0 0; max-width:88ch; }
.cg-mono--ink{ color:var(--ink); font-size:13px; }
.cg-list{ margin:12px 0 0; padding-left:20px; }
.cg-list li{ font-size:15px; line-height:1.55; color:var(--ink-2); margin-bottom:10px; max-width:70ch; }
.cg-grid--2{ grid-template-columns:1fr 1fr; margin-top:12px; }
.cg-grid--side{ grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:baseline; }
.cg-btn--ondark{ background:transparent; color:var(--ink-on-dark); border-color:var(--ink-on-dark-2); }
.cg-btn--ondark:hover{ background:var(--ink-on-dark); color:var(--paper-ink); text-decoration:none; }
.cg-more{ display:inline-block; font-size:14px; font-weight:500; color:var(--accent); margin-top:4px; }
.cg-more::after{ content:" \2192"; }

/* três passos */
.cg-three{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.cg-three li{ display:flex; gap:16px; align-items:flex-start; font-size:17px; line-height:1.55; color:var(--ink-2); }
.cg-three li strong{ color:var(--ink); }
.cg-three__n{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--accent-on); font-family:var(--font-display); font-size:18px; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.cg-three--compact{ margin-top:16px; gap:14px; }
.cg-three--compact li{ font-size:15.5px; }
.cg-three--compact .cg-three__n{ width:28px; height:28px; font-size:15px; }

/* caixa de código com botão copiar */
.cg-codebox--copy{ display:flex; align-items:center; gap:12px; padding-right:8px; }
.cg-codebox--copy span{ flex:1; min-width:0; }
.cg-codebox--lg{ font-size:15px; padding:14px 8px 14px 16px; border-color:var(--accent-line); background:var(--accent-soft); margin-top:14px; }
.cg-copy{ flex:none; font-family:var(--font-text); font-size:13px; font-weight:500; padding:6px 12px; border-radius:var(--radius-sm); border:1px solid var(--ink); background:var(--paper-raised); color:var(--ink); cursor:pointer; }
.cg-copy:hover{ background:var(--ink); color:var(--paper); }
.cg-copy.is-done{ background:var(--positive); border-color:var(--positive); color:#fff; }

/* tutorial */
.cg-tut__tabs{ margin-top:8px; overflow-x:auto; }
.cg-tut__tabs .cg-tab{ white-space:nowrap; font-size:16px; }
.cg-tut__intro{ margin:22px 0 6px; font-size:16px; color:var(--ink-2); max-width:66ch; }
.cg-tut__steps{ list-style:none; margin:0; padding:0; counter-reset:tut; }
.cg-tut__steps > li{ counter-increment:tut; display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; padding:28px 0; border-top:1px solid var(--line); }
.cg-tut__steps > li:first-child{ border-top:none; }
.cg-tut__text{ position:relative; padding-left:48px; }
.cg-tut__text::before{ content:counter(tut); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--accent-on); font-family:var(--font-display); font-size:18px; display:flex; align-items:center; justify-content:center; }
.cg-tut__text h4{ font-size:21px; margin:4px 0 8px; }
.cg-tut__text p{ font-size:16px; line-height:1.55; color:var(--ink-2); margin:0 0 10px; }
.cg-tut__text .cg-codebox{ margin:6px 0 12px; font-size:12.5px; }
.cg-tut__fig{ margin:0; }
.cg-tut__fig img{ width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 8px 28px rgba(23,26,22,.10); background:#fff; }
.cg-tut__fig--narrow img{ max-width:360px; }
.cg-tut__help{ margin-top:36px; padding-top:28px; border-top:1px solid var(--line); }

/* mock de janela (quando a captura real não serve) */
.cg-mock{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 8px 28px rgba(23,26,22,.10); overflow:hidden; }
.cg-mock__bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line-faint); background:#FAFAF8; }
.cg-mock__bar span{ width:10px; height:10px; border-radius:50%; background:var(--line-strong); }
.cg-mock__bar em{ margin-left:8px; font-style:normal; font-size:13px; color:var(--ink-3); }
.cg-mock__body{ padding:22px 24px; font-family:ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif; }
.cg-mock__h{ font-size:19px; font-weight:700; color:#20242a; margin:0 0 14px; }
.cg-mock__label{ font-size:13px; color:#5a6070; margin:14px 0 6px; }
.cg-mock__input{ font-size:14.5px; color:#20242a; background:#fff; border:1px solid #d4d7de; border-radius:8px; padding:11px 13px; }
.cg-mock__input--on{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.cg-mock__input--url{ font-size:12.5px; word-break:break-all; }
.cg-mock__select{ display:flex; justify-content:space-between; }
.cg-mock__select::after{ content:"\25BE"; color:#9aa1af; }
.cg-mock__note{ font-size:12.5px; color:#8a6a2b; background:#FBF4E4; border-radius:8px; padding:10px 12px; margin-top:14px; }
.cg-mock__check{ display:flex; gap:8px; align-items:center; font-size:13.5px; color:#20242a; margin-top:10px; }
.cg-mock__check::before{ content:"\2611"; color:var(--accent); font-size:16px; }
.cg-mock__btnrow{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.cg-mock__btn{ font-size:14px; padding:9px 18px; border-radius:999px; border:1px solid #d4d7de; background:#fff; color:#20242a; }
.cg-mock__btn--dark{ background:#20242a; border-color:#20242a; color:#fff; }

/* painel */
.cg-conn{ padding:32px 36px; }
.cg-adv{ margin-top:22px; }
.cg-adv summary{ cursor:pointer; font-size:13px; color:var(--ink-3); }
.cg-adv .cg-codebox{ margin-top:6px; }
.cg-svcs{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.cg-svc-row{ display:flex; gap:18px; align-items:center; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 18px 14px 14px; }
.cg-svc-row.is-on{ border-color:var(--accent-line); }
.cg-svc-row__thumb{ flex:none; width:96px; height:72px; border-radius:var(--radius-sm); overflow:hidden; background:var(--paper-sunken); }
.cg-svc-row__thumb img{ width:100%; height:100%; object-fit:cover; }
.cg-svc-row__body{ flex:1; min-width:0; }
.cg-svc-row__body .cg-h4{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.cg-svc-row__body .cg-p-sm{ margin-bottom:2px; }
.cg-svc-row__action{ flex:none; }

/* conectores */
.cg-hero2{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:start; }
.cg-svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:28px; }
.cg-svc-card{ display:flex; flex-direction:column; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; color:inherit; text-decoration:none; transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.cg-svc-card:hover{ text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 30px rgba(23,26,22,.10); border-color:var(--accent-line); }
.cg-svc-card__media{ aspect-ratio:16/9; background:var(--paper-ink); overflow:hidden; }
.cg-svc-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cg-svc-card:hover .cg-svc-card__media img{ transform:scale(1.04); }
.cg-svc-card__body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; }
.cg-svc-card__top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cg-svc-card__kicker{ font-family:var(--font-text); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.cg-svc-card .cg-h3{ font-size:24px; }
.cg-svc-card .cg-p-sm{ margin-bottom:4px; }

/* página de serviço */
.cg-svc-hero{ position:relative; min-height:62vh; display:flex; align-items:flex-end; background:var(--paper-ink); color:var(--ink-on-dark); overflow:hidden; }
.cg-svc-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cg-svc-hero__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(15,20,15,.25) 0%, rgba(15,20,15,.55) 55%, rgba(15,20,15,.92) 100%); }
.cg-svc-hero__inner{ position:relative; z-index:2; padding:72px 32px 56px; }
.cg-svc-hero__title{ font-size:clamp(44px,7vw,84px); font-weight:300; line-height:1.02; letter-spacing:-0.02em; color:var(--ink-on-dark); margin-top:18px; text-shadow:0 2px 24px rgba(0,0,0,.45); }
.cg-svc-hero__title em{ font-style:italic; color:#9FC4AF; }
.cg-svc-hero__tag{ font-size:20px; line-height:1.5; color:var(--ink-on-dark); max-width:56ch; margin-top:16px; text-shadow:0 1px 16px rgba(0,0,0,.5); }
.cg-etim{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:start; }
.cg-etim__orig{ font-family:var(--font-display); font-size:clamp(34px,4vw,52px); font-weight:300; color:var(--ink); margin-top:16px; letter-spacing:-0.01em; }
.cg-etim__lang{ font-family:var(--font-text); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; }
.cg-etim__sense{ font-size:17px; line-height:1.55; color:var(--ink-2); margin-top:14px; }
.cg-etim__why .cg-h3{ margin-bottom:12px; }
.cg-prose{ margin-top:18px; }
.cg-nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px; }
.cg-num{ border-top:1.5px solid var(--accent); padding-top:10px; }
.cg-num__v{ font-family:var(--font-display); font-size:32px; font-weight:300; color:var(--ink); line-height:1.1; }
.cg-num__l{ font-size:13.5px; color:var(--ink-3); margin-top:4px; line-height:1.4; }
.cg-tools{ margin:22px 0 0; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.cg-tool{ display:grid; grid-template-columns:minmax(220px,0.9fr) 1.6fr; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); }
.cg-tool dt{ margin:0; }
.cg-tool dd{ margin:0; font-size:15px; line-height:1.5; color:var(--ink-2); }
.cg-examples{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.cg-example{ display:flex; gap:16px; align-items:flex-start; background:var(--paper-raised); border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:16px 18px; }
.cg-example p{ flex:1; margin:0; font-family:var(--font-display); font-style:italic; font-size:18px; line-height:1.45; color:var(--ink); max-width:none; }
.cg-limits{ margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.cg-limits li{ position:relative; padding:12px 16px 12px 40px; background:var(--caution-soft); border-left:2px solid var(--caution); font-size:15px; line-height:1.5; color:var(--ink-2); max-width:none; }
.cg-limits li::before{ content:"\2014"; position:absolute; left:16px; top:12px; color:var(--caution); }
.cg-prevnext{ display:flex; justify-content:space-between; gap:20px; margin-top:44px; padding-top:22px; border-top:1px solid var(--line-on-dark); font-size:15px; }
.cg-prevnext a{ color:var(--ink-on-dark-2); }
.cg-prevnext a:hover{ color:var(--ink-on-dark); }

/* cabeçalho no celular: links visíveis, nada some */
@media (max-width:900px){
  .cg-nav a{ display:inline; font-size:14px; }
  .cg-nav{ gap:14px; flex-wrap:wrap; justify-content:flex-end; }
  .cg-header__inner{ height:auto; min-height:64px; padding:10px 0; gap:12px; }
  .cg-container{ padding:0 20px; }
  .cg-section{ padding:52px 0; }
  .cg-hero-title--md{ font-size:38px; }
  .cg-h2{ font-size:30px; } .cg-h2-dark{ font-size:32px; }
  .cg-hero2, .cg-grid--2, .cg-grid--side, .cg-etim{ grid-template-columns:1fr; gap:28px; }
  .cg-svc-grid{ grid-template-columns:1fr; }
  .cg-tut__steps > li{ grid-template-columns:1fr; gap:16px; }
  .cg-tut__fig--narrow img{ max-width:100%; }
  .cg-nums{ grid-template-columns:1fr 1fr; }
  .cg-tool{ grid-template-columns:1fr; gap:6px; }
  .cg-svc-row{ flex-wrap:wrap; }
  .cg-svc-row__thumb{ width:72px; height:54px; }
  .cg-svc-row__action{ width:100%; display:flex; justify-content:flex-end; }
  .cg-conn{ padding:22px 20px; }
  .cg-svc-hero{ min-height:52vh; }
  .cg-svc-hero__inner{ padding:56px 20px 40px; }
  .cg-example{ flex-direction:column; }
  .cg-prevnext{ flex-direction:column; align-items:center; }
}
@media (max-width:1100px) and (min-width:901px){ .cg-svc-grid{ grid-template-columns:1fr 1fr; } }

/* kicker legível sobre o vídeo do herói de serviço */
.cg-svc-hero .cg-kicker{ color:#EDEDE4; text-shadow:0 1px 10px rgba(0,0,0,.6); }
.cg-svc-hero .cg-kicker::before{ background:#9FC4AF; }