/* ─── AGENTE CONCIERGE ───────────────────────────────────────
   Página de produto e cases do Concierge, no estilo do site.
   Classes com prefixo cg- para não colidir com o resto de styles.css. */

.cg-light {
  --fg:var(--navy); --mute:rgba(17,32,87,.62); --rule:rgba(17,32,87,.12); --surface:#fff; --accent:var(--orange);
  --ch-main:#FA5023; --ch-blue:#112057; --ch-mute:#B7BDD0; --ch-soft:#E4E0D5;
  color:var(--fg);
}
.cg-dark {
  --fg:#fff; --mute:rgba(255,255,255,.62); --rule:rgba(255,255,255,.14); --surface:rgba(255,255,255,.06); --accent:var(--orange);
  --ch-main:#FA5023; --ch-blue:#20CAF5; --ch-mute:#5A6687; --ch-soft:#2A3766;
  color:var(--fg);
}
.cg [id] { scroll-margin-top:var(--nav-h); }
.cg-wrap { max-width:1280px; margin:0 auto; padding:0 48px; }
@media(max-width:640px){ .cg-wrap { padding:0 24px; } }
.cg-band { padding:100px 0; border-top:1px solid var(--border); }
@media(max-width:768px){ .cg-band { padding:64px 0; } }
.cg-band .section-label { margin-bottom:28px; }

/* Ilha navy, como o testimonial-block / cta-block do site */
.cg-island {
  background:var(--navy); border-radius:var(--radius); color:#fff;
  padding:clamp(36px,5vw,72px); position:relative; overflow:hidden;
}
.cg-island::before {
  content:''; position:absolute; top:-30%; right:-5%; width:500px; height:500px;
  background:radial-gradient(ellipse, rgba(250,80,35,.12) 0%, transparent 65%); pointer-events:none;
}
.cg-island > * { position:relative; }
.cg-island .section-label { color:var(--dk-muted); }

/* Tipografia */
.cg-h-xl { font-size:clamp(28px,4vw,52px); font-weight:900; letter-spacing:-.04em; line-height:1.08; color:var(--fg); max-width:20ch; }
.cg-h-md { font-size:clamp(19px,2vw,24px); font-weight:800; letter-spacing:-.02em; color:var(--fg); }
.cg-lead { font-size:clamp(16px,1.5vw,19px); color:var(--mute); line-height:1.7; max-width:62ch; margin-top:16px; }
.cg-stmt { font-size:clamp(26px,4vw,48px); font-weight:900; letter-spacing:-.04em; line-height:1.1; max-width:24ch; }
.cg-src { color:var(--mute); font-size:13px; margin-top:14px; }
.cg-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* Abertura (dentro de .page-hero) */
.cg-hero-grid { display:grid; grid-template-columns:1.2fr .9fr; gap:clamp(28px,5vw,72px); align-items:center; }
.page-hero .cg-hero-grid h1 { font-size:clamp(40px,5.6vw,76px); }
.cg-hero-stack { position:relative; min-height:380px; }
.cg-hero-stack figure { margin:0; position:absolute; background:#fff; border-radius:16px; padding:6px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
.cg-hero-stack figure img { border-radius:12px; width:100%; }
.cg-hero-stack .a { width:88%; top:0; left:0; transform:rotate(-2.2deg); }
.cg-hero-stack .b { width:84%; bottom:0; right:0; transform:rotate(1.8deg); }
.cg-hero-stack figcaption { position:absolute; left:0; bottom:-30px; color:var(--dk-muted); font-size:13px; white-space:nowrap; }
@media (prefers-reduced-motion:no-preference){
  .cg-hero-stack .a { animation:cg-rise .9s cubic-bezier(.22,1,.36,1) .2s both; }
  .cg-hero-stack .b { animation:cg-rise .9s cubic-bezier(.22,1,.36,1) .5s both; }
}
@keyframes cg-rise { from { opacity:0; translate:0 26px; } to { opacity:1; translate:0 0; } }

/* Logos dos cases */
.cg-logo-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; }
.cg-logo-strip a { background:#fff; border:1px solid var(--border); border-radius:16px; height:88px; display:grid; place-items:center; padding:14px 16px; transition:border-color .25s, transform .25s, box-shadow .25s; }
.cg-logo-strip a:hover { border-color:var(--orange); transform:translateY(-3px); box-shadow:0 8px 32px rgba(17,32,87,.1); }
.cg-logo-strip img { max-height:50px; max-width:100%; width:auto; object-fit:contain; }

/* O problema */
.cg-cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:44px; }
.cg-col-rule { border-top:2px solid var(--rule); padding-top:18px; }
.cg-col-rule h3 { font-size:22px; font-weight:800; letter-spacing:-.02em; }
.cg-col-rule p { color:var(--mute); margin-top:10px; font-size:15px; line-height:1.7; }
.cg-col-rule strong { color:var(--fg); }
.cg-closer { margin-top:44px; font-size:clamp(19px,2.2vw,26px); font-weight:300; line-height:1.5; max-width:40ch; }
.cg-closer::before { content:'" '; color:var(--orange); font-weight:700; }
.cg-closer::after  { content:' "'; color:var(--orange); font-weight:700; }

/* Camadas */
.cg-layers { margin-top:44px; display:grid; gap:12px; }
.cg-layer { display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px 28px; box-shadow:0 2px 16px rgba(17,32,87,.05); }
.cg-layer:nth-child(2){ margin-inline:18px; }
.cg-layer:nth-child(3){ margin-inline:36px; }
.cg-layer:nth-child(4){ margin-inline:54px; }
.cg-layer .tag { font-weight:800; font-size:18px; color:var(--navy); }
.cg-layer p { color:var(--muted); font-size:15px; }
.cg-layer img { max-height:40px; width:auto; }

/* Canais */
.cg-plats { display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin-top:30px; }
.cg-plats li { border:1px solid rgba(250,80,35,.3); background:rgba(250,80,35,.07); color:var(--orange); border-radius:100px; padding:8px 18px; font-size:13px; font-weight:700; letter-spacing:.04em; }
.cg-chan { margin-top:40px; border-top:1px solid var(--rule); }
.cg-chan-row { display:grid; grid-template-columns:minmax(200px,.8fr) 1.4fr; gap:28px; padding:26px 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.cg-chan-row h3 { font-size:clamp(22px,2.6vw,32px); font-weight:900; letter-spacing:-.03em; }
.cg-chan-row .sm { color:var(--mute); font-size:14px; margin-top:6px; }
.cg-chan-row p { color:var(--mute); max-width:60ch; line-height:1.7; }
.cg-chan-row a { color:var(--orange); font-weight:700; }

/* Prints e blocos */
.cg-sub-block { margin-top:64px; }
.cg-pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:26px; }
.cg-shot { margin:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:10px; color:var(--navy); box-shadow:0 2px 16px rgba(17,32,87,.05); }
.cg-shot img { border-radius:12px; width:100%; }
.cg-shot.dark { background:#0a0f26; border-color:transparent; }
.cg-shot-cap { font-size:14px; font-weight:700; padding:12px 6px 4px; }
.cg-split { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,4vw,56px); align-items:center; margin-top:28px; }
.cg-split.voz { grid-template-columns:minmax(0,.7fr) 1.3fr; align-items:start; }
.cg-split.demo { grid-template-columns:1.15fr .85fr; margin-top:0; }
.cg-split.demo .cg-vid { justify-self:center; }
.cg-phone-tile { text-align:center; }
.cg-shot img.phone-shot { max-height:540px; width:auto; max-width:100%; margin-inline:auto; }
.cg-bullets { margin-top:18px; list-style:none; display:grid; gap:12px; }
.cg-bullets li { padding-left:22px; position:relative; max-width:58ch; color:var(--mute); line-height:1.7; }
.cg-bullets li::before { content:''; position:absolute; left:0; top:.55em; width:3px; height:14px; border-radius:2px; background:var(--orange); }
.cg-bullets strong { color:var(--fg); font-weight:700; }

/* Vídeos */
.cg-vids { display:flex; flex-wrap:wrap; gap:26px 32px; margin-top:26px; }
.cg-vid { margin:0; width:min(100%,320px); }
.cg-vid video { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:#000; border-radius:var(--radius); box-shadow:0 20px 50px -20px rgba(17,32,87,.45); }
.cg-vid figcaption { margin-top:12px; font-size:14px; font-weight:700; color:var(--fg); }

/* Índice de cases */
.cg-idx { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:40px; }
.cg-idx a { display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:0 2px 16px rgba(17,32,87,.05); transition:border-color .25s, transform .25s, box-shadow .25s; }
.cg-idx a:hover { border-color:var(--orange); transform:translateY(-3px); box-shadow:0 8px 32px rgba(17,32,87,.1); }
.cg-idx .lt { height:64px; display:grid; place-items:center; padding:6px; border-right:1px solid var(--border); }
.cg-idx .lt img { max-height:42px; width:auto; object-fit:contain; }
.cg-idx em { display:block; font-style:normal; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-bottom:4px; }
.cg-idx a.reveal.visible:hover { transform:translateY(-3px); }
.cg-idx b { display:block; font-size:17px; font-weight:800; color:var(--navy); }
.cg-idx span { display:block; color:var(--muted); font-size:14px; line-height:1.4; margin-top:3px; }

/* Página de case */
.cg-back { display:inline-block; margin-bottom:28px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dk-muted); transition:color .2s; }
.cg-back:hover { color:#fff; }
.page-hero.case-hero .cg-case-top h1 { max-width:none; }
.cg-case-body { padding:64px 0 24px; }
@media(max-width:768px){ .cg-case-body { padding:48px 0 8px; } }
.cg-case-top { display:grid; grid-template-columns:150px 1fr; gap:clamp(20px,4vw,48px); align-items:center; }
.cg-logo-tile { background:#fff; border-radius:16px; height:110px; display:grid; place-items:center; padding:14px 18px; }
.cg-logo-tile img { max-height:70px; width:auto; object-fit:contain; }
.cg-case-meta { display:flex; flex-wrap:wrap; gap:12px 40px; margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); }
.cg-case-meta div { min-width:140px; }
.cg-case-meta dt { color:var(--dk-muted); font-size:13px; }
.cg-case-meta dd { margin-top:2px; font-weight:700; color:#fff; font-size:15px; }
.cg-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.cg-ext { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--fg); border:1px solid var(--rule); padding:9px 16px; border-radius:100px; transition:border-color .2s, color .2s; }
.cg-ext:hover { border-color:var(--orange); color:var(--orange); }
.cg-ext svg { width:13px; height:13px; }
.cg-case-body { padding:56px 0 24px; }
.cg-blk + .cg-blk { margin-top:56px; }
.cg-blk-title { display:flex; align-items:baseline; gap:6px 16px; flex-wrap:wrap; padding-bottom:4px; }
.cg-blk-title p { color:var(--mute); max-width:60ch; }

/* Números */
.cg-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px 30px; margin-top:28px; }
.cg-stat { border-top:2px solid var(--rule); padding-top:16px; }
.cg-stat.key { border-top-color:var(--orange); }
.cg-stat b { display:block; font-size:clamp(34px,4vw,52px); font-weight:900; letter-spacing:-.04em; line-height:1; color:var(--fg); }
.cg-stat.key b { color:var(--orange); }
.cg-stat span { display:block; margin-top:10px; font-weight:700; font-size:15px; line-height:1.35; color:var(--fg); }
.cg-stat small { display:block; margin-top:4px; color:var(--mute); font-size:13px; line-height:1.45; }
.cg-dl { display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin-top:26px; }
.cg-dl div { border-top:1px solid var(--rule); padding:16px 0; }
.cg-dl dt { font-weight:700; color:var(--fg); }
.cg-dl dd { margin-top:4px; color:var(--mute); font-size:15px; line-height:1.6; }
.cg-callout { margin-top:30px; border-left:4px solid var(--orange); padding:6px 0 6px 28px; max-width:70ch; }
.cg-callout b { display:block; font-size:clamp(18px,2vw,23px); font-weight:800; letter-spacing:-.02em; color:var(--fg); margin-bottom:6px; }
.cg-callout p { color:var(--mute); line-height:1.7; }

/* Gráficos */
.cg-charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; margin-top:8px; }
.cg-chart-wrap { margin-top:28px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px 16px; }
.cg-charts .cg-chart-wrap { margin-top:20px; }
.cg-chart-wrap h4 { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.cg-legend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--mute); margin-bottom:6px; }
.cg-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px; vertical-align:-1px; }
svg.cg-ch { width:100%; height:auto; display:block; overflow:visible; }
svg.cg-ch text { fill:var(--fg); font-family:'Roboto',sans-serif; }
svg.cg-ch .mu { fill:var(--mute); }
svg.cg-ch .axis { stroke:var(--rule); }
.cg-split-bar { display:flex; height:44px; border-radius:100px; overflow:hidden; margin-top:10px; font-weight:700; font-size:13px; }
.cg-split-bar span { display:flex; align-items:center; padding:0 16px; white-space:nowrap; }

/* Tabelas */
.cg-tbl-scroll { overflow-x:auto; max-width:100%; margin-top:24px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); }
.cg-cmp { width:100%; border-collapse:collapse; font-size:15px; }
.cg-cmp th, .cg-cmp td { padding:14px 18px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top; }
.cg-cmp tr:last-child td { border-bottom:none; }
.cg-cmp th { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:rgba(17,32,87,.03); }
.cg-cmp td { color:var(--fg); }
.cg-cmp td.n { font-variant-numeric:tabular-nums; }
.cg-cmp td.before { color:var(--mute); }
.cg-cmp td.after { font-weight:700; }
.cg-cmp td.d { font-weight:800; color:var(--orange); white-space:nowrap; }

/* Exemplos de interações */
.cg-ex-grid { columns:2 340px; column-gap:20px; margin-top:26px; }
.cg-ex-grid figure { margin:0 0 20px; break-inside:avoid; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:10px; box-shadow:0 2px 16px rgba(17,32,87,.05); }
.cg-ex-grid img { border-radius:12px; width:100%; }
.cg-ex-grid figcaption { font-size:14px; line-height:1.45; padding:10px 6px 4px; color:var(--muted); }
.cg-ex-grid figcaption b { color:var(--navy); }

/* Outras marcas */
.cg-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:30px; }
.cg-chip { font:700 12px/1 'Roboto',sans-serif; letter-spacing:.04em; color:var(--navy); background:#fff; border:1px solid var(--border); padding:10px 16px; border-radius:100px; cursor:pointer; transition:border-color .2s; }
.cg-chip:hover { border-color:var(--orange); }
.cg-chip[aria-pressed="true"] { background:var(--navy); color:#fff; border-color:var(--navy); }
.cg-search { font:500 14px/1 'Roboto',sans-serif; padding:11px 18px; border-radius:100px; border:1px solid var(--border); background:#fff; color:var(--navy); min-width:220px; }
.cg-search:focus { outline:2px solid var(--orange); outline-offset:1px; }
.cg-seg { margin-top:44px; }
.cg-seg h3 { font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding-bottom:12px; border-bottom:1px solid var(--rule); }
.cg-brands { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-top:18px; }
.cg-brand { background:#fff; border:1px solid var(--border); border-radius:16px; height:96px; display:grid; place-items:center; padding:16px 20px; transition:border-color .25s, transform .25s, box-shadow .25s; }
.cg-brand.mono img { filter:brightness(0); }  /* logos só disponíveis em branco */
.cg-brand:has(span) { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; }
.cg-brand:has(span) img { max-height:38px; }
.cg-brand span { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#000; }
.cg-brand:hover { border-color:var(--orange); transform:translateY(-3px); box-shadow:0 8px 32px rgba(17,32,87,.1); }
.cg-brand img { max-height:48px; max-width:100%; width:auto; object-fit:contain; }
@media(max-width:480px){ .cg-brands { grid-template-columns:repeat(2,1fr); } .cg-brand { height:84px; } }
.cg-filtered-out { display:none !important; }
.cg-empty { color:var(--mute); margin-top:30px; }
.cg-mail { color:#fff; font-weight:700; border-bottom:1px solid rgba(255,255,255,.35); }
.cg-mail:hover { border-color:var(--orange); }

/* Responsivo */
@media (max-width:900px){
  .cg-hero-grid, .cg-split, .cg-split.voz, .cg-split.demo, .cg-pair, .cg-cols-3, .cg-dl { grid-template-columns:1fr; }
  .cg-split.demo .cg-vid { justify-self:start; }
  .cg-hero-stack { min-height:340px; margin:20px 0 30px; }
  .cg-logo-strip { grid-template-columns:repeat(4,1fr); }
  .cg-case-top { grid-template-columns:1fr; }
  .cg-logo-tile { width:150px; }
  .cg-layer { grid-template-columns:1fr; gap:8px; }
  .cg-layer:nth-child(n){ margin-inline:0; }
  .cg-chan-row { grid-template-columns:1fr; gap:8px; }
  .cg-charts { grid-template-columns:1fr; }
}
@media (max-width:480px){
  .cg-logo-strip { grid-template-columns:repeat(3,1fr); }
  .cg-idx { grid-template-columns:1fr; }
  .cg-ex-grid { columns:1; }
}