/* Tema do site: vermelho industrial #DC2626 como cor de destaque. Preto e branco seguem como base.
   Contraste (WCAG): branco sobre #DC2626 = 4,8:1; branco sobre #B91C1C = 6,5:1; vermelho #DC2626 em texto sobre branco = 4,8:1.
   Os botões principais ficam vermelhos e os secundários seguem brancos com borda cinza, então um se distingue do outro. */
html:root {
  --accent: #DC2626;
  --accent-d: #B91C1C;
  --on-accent: #FFFFFF;
  --focus: #DC2626;
  --hot: rgba(220, 38, 38, .08);
  --hot-strong: rgba(220, 38, 38, .28);
}

/* botões e selos principais */
.act.prim, .act.prop, .views .btn[aria-pressed="true"], .chip.star, .kchip.money, .pvtag {
  background: var(--accent); border-color: var(--accent-d); color: var(--on-accent);
}
.act.prim, .act.prop {
  background: linear-gradient(180deg, #E23636, var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -10px rgba(185, 28, 28, .8);
}
.act.prim:hover, .act.prop:hover { background: linear-gradient(180deg, var(--accent), var(--accent-d)); filter: none; }
.act.prim:focus-visible, .act.prop:focus-visible { outline: 3px solid rgba(220, 38, 38, .35); outline-offset: 2px; }

/* mover cartão no funil, painéis e campos em foco */
@media (any-hover: hover) {
  .kmove:hover { background: linear-gradient(90deg, var(--accent-d), var(--accent)); box-shadow: 0 8px 16px -10px rgba(185, 28, 28, .9); }
}
.kmove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dpanel { background: linear-gradient(90deg, var(--accent), var(--accent-d)) top left / 100% 3px no-repeat, var(--surface); }
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(220, 38, 38, .2);
}
.lcid.sug { border-color: var(--accent); }
.lcid.sug:hover, .lcid.sug:focus-visible { background: var(--accent-d); color: #fff; }

/* botão principal do site (.go: "Novo estabelecimento", "Buscar", etc.) */
.go, .go.sm {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent-d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -10px rgba(185, 28, 28, .8);
}
@media (any-hover: hover) { .go:hover:not(:disabled), .go.sm:hover:not(:disabled) { background: var(--accent-d); color: #fff; } }
.go:focus-visible { outline: 3px solid rgba(255, 255, 255, .85); outline-offset: 2px; }
.go:disabled { opacity: .5; }

/* ---- partes que eram pretas viram vermelho ----
   Fundos grandes usam #B91C1C/#991B1B (texto branco 6,5:1 a 8:1); o #DC2626 fica nos realces e botões. */
html:root {
  --brand: #B91C1C;
  --brand-2: #DC2626;
  --on-brand: #FFFFFF;
  --mint: #FECACA;
  --radar-bg-1: #B91C1C;
  --radar-bg-2: #7F1D1D;
  --radar-ring: #DC2626;
  --radar-line: rgba(255, 255, 255, .3);
  --radar-ink: #FEE2E2;
  --radar-blip: #FFFFFF;
}

/* menu lateral */
.side {
  background: linear-gradient(180deg, #B91C1C 0%, #991B1B 100%);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .1), 8px 0 30px rgba(127, 29, 29, .25);
}
.side-brand small { color: rgba(255, 255, 255, .85); }
.side-sec { color: rgba(255, 255, 255, .8); }
.side-nav a { color: rgba(255, 255, 255, .94); }
.side-nav { scrollbar-color: rgba(255, 255, 255, .35) transparent; }
.side-foot { border-top-color: rgba(255, 255, 255, .22); }
.side-foot small { color: rgba(255, 255, 255, .85); }
@media (hover: hover) and (pointer: fine) { .side-nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; } }
.side-nav a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.side-nav a.on, .side-nav a.on[aria-current="page"], .side-nav .sg-topo.on, .side-nav .sg-dentro a.on {
  background: #fff; color: #991B1B; font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(69, 10, 10, .75);
}
.side-nav a.on .ico, .side-nav .sg-topo.on .ico, .side-nav .sg-dentro a.on .ico { color: #B91C1C; opacity: 1; }
.side-nav a.on::before { background: #fff; }
.side-nav .sg-dentro a.on::after { background: linear-gradient(90deg, transparent 0%, #DC2626 50%, transparent 100%); background-size: 200% 100%; }
.side-nav a.on .tbadge { background: #B91C1C; color: #fff; }
.logo { background: #fff; color: #B91C1C; box-shadow: 0 6px 16px rgba(69, 10, 10, .35); }
.topbar { background: rgba(153, 27, 27, .96); }

/* seletor ligado, dicas de gráfico, botão de contato e indicadores do início */
.switch span::before { background: #A1A1AA; }
.switch input:checked + span::before { background: var(--accent); }
.switch input:focus-visible + span::before { box-shadow: 0 0 0 3px rgba(220, 38, 38, .35); }
.ctip { background: #7F1D1D; }
.dgoal .linkbtn { color: #fff; }
/* seis indicadores, seis tons: um vermelho da marca e o resto em tons sóbrios que combinam com ele */
.hkpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .hkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hkpis { grid-template-columns: 1fr; } }
.hkpis .hkpi:nth-child(1) { --k1: #B91C1C; --k2: #991B1B; }
.hkpis .hkpi:nth-child(2) { --k1: #9F3A52; --k2: #7E2A40; }
.hkpis .hkpi:nth-child(3) { --k1: #6E4A8E; --k2: #54366F; }
.hkpis .hkpi:nth-child(4) { --k1: #C2410C; --k2: #9A3412; }
.hkpis .hkpi:nth-child(5) { --k1: #475569; --k2: #334155; }
.hkpis .hkpi:nth-child(6) { --k1: #2F6F5E; --k2: #1F5446; }

/* movimento.js assume a entrada dos cartões: desliga a entrada antiga em CSS para não brigar com ela */
html.mov .view:not([hidden]) .hkpis > *, html.mov .view:not([hidden]) .dpanel, html.mov .view:not([hidden]) .kcol { animation: none; }
@media (hover: hover) and (pointer: fine) {
  .hkpis .hkpi:hover { transform: translateY(-4px); box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 18px 30px -14px var(--k2); }
  .side-nav a { transition: transform .25s cubic-bezier(.23, 1, .32, 1), background-color .2s ease, color .2s ease; }
  .side-nav a:not(.on):hover { transform: translateX(3px); }
}

/* menu lateral com mais contraste: fundo mais fundo, texto e ícones brancos cheios, grupo atual bem marcado */
/* mesmo contraste do menu do Gepa Farm: fundo quase preto com um brilho da cor da marca no topo, texto branco, item marcado em degradê vivo */
.side { background: radial-gradient(130% 42% at 0% 0%, rgba(185, 28, 28, .34), transparent 62%), linear-gradient(180deg, #1c0808 0%, #0f0404 55%, #060101 100%); box-shadow: 1px 0 0 rgba(255, 255, 255, .08), 16px 0 36px -10px rgba(0, 0, 0, .55); }
.side-brand { border-bottom: 1px solid rgba(255, 255, 255, .08); margin: 0 14px; padding-left: 4px; padding-right: 4px; }
.side-foot { margin: 0 12px 14px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .04); }
html .side-nav .sg-topo, html .side-nav .sg-tit { color: #fff; font-weight: 700; }
html .side-nav .sg-topo .ico, html .side-nav .sg-tit .ico { color: #fff; opacity: 1; }
html .side-nav .sg-dentro a { color: #fff; font-weight: 600; }
html .side-nav .sg-dentro a .ico { color: #fff; opacity: .95; }
html .side-nav .sg-dentro::before { background: rgba(255, 255, 255, .22); }
html .sg-seta { border-color: rgba(255, 255, 255, .6); }
html .sg.tem-atual > .sg-tit { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
html .sg.tem-atual > .sg-tit .ico { color: #fff; }
@media (hover: hover) and (pointer: fine) { html .side-nav .sg-topo:hover, html .side-nav .sg-tit:hover, html .side-nav .sg-dentro a:hover { background: rgba(255, 255, 255, .09); } }
.side-brand small, .side-foot small { color: rgba(255, 255, 255, .7); }
/* letras do menu menores */
.side-brand b { font-size: 1.25rem; }
.side-brand small { font-size: .7rem; }
html .side-nav .sg-topo, html .side-nav .sg-tit { font-size: .84rem; min-height: 40px; gap: 12px; }
html .side-nav .sg-topo .ico, html .side-nav .sg-tit .ico { width: 18px; height: 18px; }
html .side-nav .sg-dentro a { font-size: .79rem; min-height: 34px; gap: 10px; }
html .side-nav .sg-dentro a .ico { width: 15px; height: 15px; }
.side-foot b { font-size: .82rem; }
.side-foot small { font-size: .68rem; }

/* menu lateral: pílula branca única que desliza até o item marcado (movimento.js); o fundo do item marcado passa a ser dela */
html.mov .side-nav { position: relative; }
html.mov .side-nav a, html.mov .side-nav .sg-tit { position: relative; z-index: 1; }
html.mov .side-nav a.on, html.mov .side-nav a.on[aria-current="page"], html.mov .side-nav .sg-topo.on, html.mov .side-nav .sg-dentro a.on { background: transparent; box-shadow: none; color: #fff; font-weight: 700; text-shadow: 0 1px 5px rgba(60, 0, 0, .65); }
html.mov .side-nav a.on .ico, html.mov .side-nav .sg-topo.on .ico, html.mov .side-nav .sg-dentro a.on .ico { color: #fff; opacity: 1; }
html.mov .side-nav a.on .tbadge { background: #fff; color: #B91C1C; text-shadow: none; }
/* detalhes do item marcado: linha que corre embaixo (subitens) e marcador luminoso na lateral (itens do topo), em branco sobre o vermelho */
html.mov .side-nav .sg-dentro a.on::after { background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%); background-size: 200% 100%; left: 12px; right: 12px; bottom: 2px; height: 2px; opacity: 1; z-index: 2; }
html.mov .side-nav .sg-topo.on::before { display: block; background: #fff; box-shadow: 0 0 12px 2px rgba(255, 255, 255, .55); left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; z-index: 2; }
.side-foot #sideOut, .side-foot #sideOut svg { color: #fff; }
.side-foot #sideOut { opacity: .75; }
.side-foot #sideOut:hover { opacity: 1; }
.nav-pill { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 11px; overflow: hidden; background: linear-gradient(120deg, #FF4D4D 0%, #E11D2A 45%, #A31515 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7), 0 0 24px -2px rgba(255, 60, 60, .8), 0 10px 20px -10px rgba(0, 0, 0, .7); pointer-events: none; opacity: 0; transition: opacity .25s ease; will-change: transform; }
.nav-pill.on { opacity: 1; }
/* brilho que atravessa a pílula (só transform, leve) */
.nav-pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translateX(-100%); animation: pillBrilho 3.2s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes pillBrilho { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .nav-pill::after { animation: none; } }
/* submenu: abre com curva forte, linha da árvore cresce, seta com mola */
.sg-menu { transition: grid-template-rows .42s cubic-bezier(.23, 1, .32, 1); }
.sg-dentro { transition: visibility 0s linear .42s; }
.sg-dentro::before { transform-origin: top; }
.sg.aberto .sg-dentro::before { animation: sgLinha .6s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes sgLinha { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sg-seta { transition: transform .45s cubic-bezier(.34, 1.45, .64, 1), border-color .2s ease; }
.side-nav .sg-tit { transition: transform .25s cubic-bezier(.23, 1, .32, 1), background-color .18s ease, color .18s ease; }
.side-nav .ico { transition: transform .35s cubic-bezier(.34, 1.45, .64, 1); }
@media (hover: hover) and (pointer: fine) {
  .side-nav a:hover .ico, .side-nav .sg-tit:hover .ico { transform: scale(1.14) rotate(-6deg); }
  .side-nav .sg-tit:hover { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .sg.aberto .sg-dentro::before { animation: none; } .nav-pill { transition: none; } }

/* clientes: abas por telefone */
.ctabs { margin-bottom: 14px; }
.ctabs .lbtn.on { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.pcontact.nophone { color: var(--muted); display: grid; justify-items: start; gap: 2px; min-width: 0; }
.pcontact.nophone > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcontact.nophone .linkbtn { color: #B91C1C; font-weight: 600; }

/* mapa de leads: potencial em escala de vermelho (forte = alto), em vez de preto e cinza */
.lt.alta, .mun.alta, .lkey .alta::before { fill: #B91C1C; background: #B91C1C; }
.lt.media, .mun.media, .lkey .media::before { fill: #E27676; background: #E27676; }
.lt.baixa, .mun.baixa, .lkey .baixa::before { fill: #F6CFCF; background: #F6CFCF; }
.lt { stroke: rgba(255, 255, 255, .9); }
.lt:hover, .lt:focus-visible, .lt.on, .lmap .lt.sel { stroke: #450A0A; }
.mun { stroke: rgba(255, 255, 255, .7); }
.mun:hover, .mun:focus-visible { fill: #7F1D1D; stroke: #450A0A; }
.lbl.media { fill: #3B0A0A; }
.lbl.baixa { fill: #5B1414; }
.ldetail .lpot.alta { color: #B91C1C; }
.lcid.sug:hover, .lcid.sug:focus-visible { background: #991B1B; }
#v-radar .act.prop:hover { background: #991B1B; }

/* ficha da empresa: oito indicadores, cada um num tom, na mesma família do início */
.emp-kpi.c-azul { --k1: #B91C1C; --k2: #991B1B; }
.emp-kpi.c-rosa { --k1: #9F3A52; --k2: #7E2A40; }
.emp-kpi.c-roxo { --k1: #6E4A8E; --k2: #54366F; }
.emp-kpi.c-cinza { --k1: #475569; --k2: #334155; }
.emp-kpi.c-petroleo { --k1: #1F6F78; --k2: #17565E; }
.emp-kpi.c-verde { --k1: #4D6B2F; --k2: #3A5222; }
.emp-kpi.c-ambar { --k1: #C2410C; --k2: #9A3412; }
.emp-kpi.c-grafite { --k1: #52525B; --k2: #3F3F46; }

/* ficha do estabelecimento: os quatro indicadores escuros eram iguais */
#sheet .k-star { background: linear-gradient(120deg, #C2410C, #9A3412); }
#sheet .k-chat { background: linear-gradient(120deg, #475569, #334155); }
#sheet .k-price { background: linear-gradient(120deg, #2F6F5E, #1F5446); }
#sheet .k-pot { background: linear-gradient(120deg, #6E4A8E, #54366F); }
@media (hover: hover) and (pointer: fine) { .kcontact:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; } }

/* ---- contraste e profundidade ----
   Menu e cabeçalho são vermelhos, então se separam por tom (cabeçalho mais fundo à esquerda), por um fio claro e por sombra.
   O fundo da página fica um pouco mais cinza para os cartões brancos se destacarem; bordas de campo em cinza-grafite (7,6:1, acima dos 3:1 exigidos). */
html:root {
  --bg: #EFEFF1;
  --line: #D4D4D8;
  --line-strong: #52525B;
}
.side {
  box-shadow: 1px 0 0 rgba(255, 255, 255, .24), 16px 0 36px -10px rgba(69, 10, 10, .5);
}
/* cabeçalho com o mesmo contraste do menu: quase preto, brilho vermelho vivo no canto e fio vermelho embaixo */
.vhead, #v-radar .band {
  background: radial-gradient(60% 150% at 100% 0%, rgba(220, 38, 38, .5), transparent 70%), radial-gradient(45% 130% at 0% 0%, rgba(185, 28, 28, .3), transparent 70%), linear-gradient(115deg, #1c0808 0%, #0f0404 55%, #1a0606 100%);
  box-shadow: inset 0 -2px 0 #B91C1C, 0 16px 30px -22px rgba(0, 0, 0, .8);
}
.vhead h1, #v-radar .band h1 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.vhead .vsub, #v-radar .band .vsub, #v-radar .band p { color: rgba(255, 255, 255, .82); }
.topbar { background: rgba(15, 4, 4, .96); }
.dpanel, .kcard, .hkpi { box-shadow: 0 1px 2px rgba(24, 24, 27, .07), 0 14px 26px -20px rgba(69, 10, 10, .45); }
.dpanel h2 { color: #7F1D1D; }
.hkpis .hkpi { box-shadow: 0 12px 22px -14px rgba(127, 29, 29, .65); }
.ff input, .ff select, .ff textarea { background: #fff; }

/* ===== refinamento de cartões, campos e botões (todo o site) =====
   cantos mais redondos, respiro, títulos legíveis, campos com foco vermelho e grades alinhadas */
html .dpanel {
  padding: 22px 24px; border: 1px solid rgba(24, 24, 27, .07); border-radius: 20px; background: #fff;
  box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 22px 44px -30px rgba(24, 24, 27, .3);
}
html .dpanel > h2, html .dpanel .orow > h2, html .shout h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 650 1.02rem/1.2 Inter, system-ui, sans-serif; letter-spacing: -.01em; text-transform: none; color: #18181b;
}
html .dpanel > h2::before, html .dpanel .orow > h2::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 4px; background: linear-gradient(180deg, #EF4444, #B91C1C); }
html .dpanel .orow { margin-top: 14px; }
html .dpanel .orow:first-child { margin-top: 0; }
html .ohint { margin: 12px 0 0; font-size: .84rem; line-height: 1.55; color: #62626b; }
html .orow .ohint { margin: 0; }

html .setgrid { gap: 20px; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
html .fgrid, html .pgrid { gap: 16px; align-items: end; }
html .setgrid .pgrid { margin-top: 0; }
html .ff { gap: 7px; font-size: .8rem; }
html .ff > span { font-weight: 600; color: #3f3f46; letter-spacing: 0; }

body .ff input, body .ff select, body .ff textarea, body .ladd input, body .ladd select, .cbar input, .cbar select {
  min-height: 44px; padding: 0 14px; border: 1px solid #d4d4d8; border-radius: 12px; background: #fafafa; color: #18181b;
  font: 400 .92rem/1.4 Inter, system-ui, sans-serif;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body .ff textarea { padding: 12px 14px; }
body .ff input:hover, body .ff select:hover, body .ff textarea:hover, .cbar input:hover, .cbar select:hover { border-color: #a1a1aa; }
body .ff input:focus, body .ff select:focus, body .ff textarea:focus, .ladd input:focus, .cbar input:focus, .cbar select:focus {
  border-color: #DC2626; background: #fff; box-shadow: 0 0 0 4px rgba(220, 38, 38, .14); outline: none;
}
.ff input::placeholder, .ff textarea::placeholder, .ladd input::placeholder, .cbar input::placeholder { color: #71717a; }

html .act, html .btn, html .go { border-radius: 12px; }
html .act { min-height: 40px; padding-inline: 16px; }
html .act.prim, html .btn.prim {
  background: linear-gradient(135deg, #E11D2A 0%, #B91C1C 100%); border-color: transparent; color: #fff;
  box-shadow: 0 10px 20px -12px rgba(185, 28, 28, .9);
}
html .act.prim:hover:not([aria-disabled="true"]) { background: linear-gradient(135deg, #F0303C 0%, #C21F1F 100%); transform: translateY(-1px); }
html .act.danger { border-color: rgba(185, 28, 28, .35); background: #fff; }
html .act.danger:hover { background: #FEF2F2; }
html .obtns { gap: 10px; margin-top: 16px; }
html .dpanel .act, html .dpanel .btn { box-shadow: none; }
html .dpanel .act.prim { box-shadow: 0 10px 20px -12px rgba(185, 28, 28, .9); }

html .kcol, html .ptable, html .qcbox, html .howto, html .dgoal, html .psum, html .dnums { border-radius: 18px; }
html .hq { border-radius: 14px; }
html .cbar { gap: 10px; }

/* faixas de números (Projetos, resumos): cada número vira um cartão, sem o quadriculado de linhas finas e bloco cinza vazio */
html .dnums, html .psum { gap: 12px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
html .dnums > div, html .psum > div {
  padding: 14px 18px; border: 1px solid rgba(24, 24, 27, .07); border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 16px 32px -26px rgba(24, 24, 27, .3);
}
html .dnums dt, html .psum dt { font-size: .76rem; font-weight: 600; color: #62626b; }
html .dgoal { border-radius: 20px; padding: 20px 22px; box-shadow: 0 18px 36px -22px rgba(127, 29, 29, .8); }

/* todos os campos soltos dentro das telas (barras de tarefa, despesas, filtros…) no mesmo estilo dos formulários */
html .vbody input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html .vbody select, html .vbody textarea {
  min-height: 44px; padding: 0 14px; border: 1px solid #d4d4d8; border-radius: 12px; background-color: #fafafa; color: #18181b;
  font: 400 .92rem/1.4 Inter, system-ui, sans-serif;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
html .vbody textarea { padding: 12px 14px; }
html .vbody input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):hover,
html .vbody select:hover, html .vbody textarea:hover { border-color: #a1a1aa; }
html .vbody input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus,
html .vbody select:focus, html .vbody textarea:focus { border-color: #DC2626; background-color: #fff; box-shadow: 0 0 0 4px rgba(220, 38, 38, .14); outline: none; }
html .vbody input::placeholder, html .vbody textarea::placeholder { color: #71717a; }
html .vbody input[type="date"] { padding-right: 10px; }

/* Demos: grade de cartões (essas classes não tinham estilo nenhum) */
.demogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 16px; margin-top: 16px; }
.demo {
  display: grid; align-content: start; gap: 10px; min-width: 0; padding: 20px 22px; border: 1px solid rgba(24, 24, 27, .08); border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%); box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 18px 36px -28px rgba(24, 24, 27, .35);
  transition: transform .25s cubic-bezier(.23, 1, .32, 1), box-shadow .25s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .demo:hover { transform: translateY(-3px); border-color: rgba(185, 28, 28, .35); box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 24px 40px -24px rgba(185, 28, 28, .45); } }
.demohead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demoseg { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B91C1C; }
.demo .pill, .demo .selo { flex: none; padding: 3px 10px; border-radius: 99px; font-size: .72rem; font-weight: 600; }
.demo .pill { background: #DCFCE7; color: #166534; }
.demo .selo { background: #FEF3C7; color: #92400E; }
.demo h3 { margin: 0; font: 650 1.15rem/1.25 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #18181b; }
.demourl { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #B91C1C; font-size: .88rem; font-weight: 500; text-decoration: none; }
.demourl:hover { text-decoration: underline; text-underline-offset: 3px; }
.demo .ohint { margin: 0; }
.demo .obtns { margin-top: 6px; }
.demo.soon { border-style: dashed; background: transparent; box-shadow: none; }
.demo.soon h3 { color: #52525b; font-weight: 600; }
.demogrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); }
.demo .obtns { gap: 8px; }
.demo .obtns .act { padding-inline: 13px; font-size: .86rem; }

/* quadros do funil: respiro nas bordas e títulos de coluna no mesmo estilo dos cartões */
html .board { padding: 18px 20px 6px; }
html .vtip { padding-inline: 20px; }
html .khead { padding: 14px 14px 10px; }
html .khead h2 { font: 650 .95rem/1.2 Inter, system-ui, sans-serif; letter-spacing: -.005em; text-transform: none; }
html .kcol { background: rgba(255, 255, 255, .6); box-shadow: 0 1px 2px rgba(24, 24, 27, .04); }
html .kcount { font-weight: 600; }

/* Referências e Motion (refs.css) foram feitas para tema escuro: aqui definimos as cores que ele espera, no tema claro vermelho */
:root {
  --font-main: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --color-control: #d4d4d8; --color-divider: #a1a1aa; --color-glyph: #27272a; --color-steel: #62626b;
  --color-graphite: #f4f4f5; --color-carbon: #ffffff; --color-absolute-black: #f4f4f5;
  --color-accent: #b91c1c; --color-on-accent: #ffffff;
}
html .rgal strong, html .rmeta h3, html .rdh { color: #18181b; }
html .rgal a { border-radius: 16px; background: #fff; padding: 14px 16px; box-shadow: 0 1px 2px rgba(24, 24, 27, .04); transition: transform .25s cubic-bezier(.23, 1, .32, 1), border-color .18s ease, box-shadow .25s ease; }
@media (hover: hover) and (pointer: fine) { html .rgal a:hover { transform: translateY(-2px); border-color: rgba(185, 28, 28, .45); background: #fff; box-shadow: 0 16px 28px -20px rgba(185, 28, 28, .5); } }
html .rcard { border-radius: 20px; box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 18px 36px -28px rgba(24, 24, 27, .35); }
html .rchip:hover { border-color: #a1a1aa; background: #fafafa; }
html .rchip[aria-pressed="true"] { background: linear-gradient(135deg, #E11D2A, #B91C1C); border-color: transparent; color: #fff; }
html .rdprompt { background: #fafafa; border-radius: 14px; }