/* ---- 00-base.css ---- */
/*
  Camada "cool" do karinesackt.com.br (proposta de redesenho, novembro de 2026). Base comum.
  Entra por cima do tema só com a chave ligada (KS_COOL=1 ou tools/ks_cool_ligado); tudo escopado em html.ks-cool.
  Montada por tools/ks_cool.py juntando tools/ks_cool/css/*.css em /assets/cool/ks-cool.css.

  Sistema: referência principal wekreative (fundo quase preto, blocos grandes creme e coloridos de cantos muito
  arredondados, pílulas grandes, títulos grotescos com tracking negativo, rótulos de seção). Acentos pontuais:
  pastas com aba e frames com alças do Figma (nudge), cursor de seta (billie), cores chapadas do painel.
  Texto longo sempre em bloco claro (contraste AA). Sem modo escuro/claro alternável: o fundo escuro é o padrão.
*/

/* ---------- Tokens ---------- */
html.ks-cool {
  --c-noite: #221F20;
  --c-noite-2: #2E2A2B;
  --c-creme: #F6F2EC;
  --c-areia: #EAE3D8;
  --c-branco: #FFFDF9;
  --c-tinta: #221F20;
  --c-dim: #5E5852;
  --c-claro: #F6F2EC;
  --c-claro-dim: #BDB6AC;
  --c-verde: #ADDF82;
  --c-coral: #EE8A62;
  --c-azul: #8FB2F5;
  --c-sol: #FFD23F;
  --c-lilas: #C8B5F5;
  --c-agua: #8DE2C6;
  --c-linha: rgba(34,31,32,.12);
  --c-linha-clara: rgba(246,242,236,.16);
  --r-bloco: clamp(32px, 4.4vw, 64px);
  --r-card: clamp(24px, 2.6vw, 36px);
  --r-foto: clamp(18px, 2vw, 28px);
  --c-gap: 12px;
  /* Fonte dos títulos: troque aqui (ou pelo arquivo tools/ks_cool/fonte_titulo.txt, que põe data-ks-fonte no <html>) */
  --ks-fonte-titulo: 'Instrument Sans', 'DM Sans', system-ui, sans-serif;
  --ks-titulo-escala: 1;
  --f-display: var(--ks-fonte-titulo);
  --f-texto: 'DM Sans', system-ui, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-serif: 'ivypresto-display', Georgia, serif;
  --f-mao: 'Caveat', 'Comic Sans MS', cursive;
  --c-regua: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='24'><g stroke='%23111' stroke-opacity='.35'><path d='M0.5 0v10' /><path d='M10.5 0v3' /><path d='M20.5 0v3' /><path d='M30.5 0v3' /><path d='M40.5 0v3' /><path d='M50.5 0v6' /><path d='M60.5 0v3' /><path d='M70.5 0v3' /><path d='M80.5 0v3' /><path d='M90.5 0v3' /><path d='M100.5 0v10' /><path d='M110.5 0v3' /><path d='M120.5 0v3' /><path d='M130.5 0v3' /><path d='M140.5 0v3' /><path d='M150.5 0v6' /><path d='M160.5 0v3' /><path d='M170.5 0v3' /><path d='M180.5 0v3' /><path d='M190.5 0v3' /><path d='M200.5 0v10' /><path d='M210.5 0v3' /><path d='M220.5 0v3' /><path d='M230.5 0v3' /><path d='M240.5 0v3' /><path d='M250.5 0v6' /><path d='M260.5 0v3' /><path d='M270.5 0v3' /><path d='M280.5 0v3' /><path d='M290.5 0v3' /><path d='M300.5 0v10' /><path d='M310.5 0v3' /><path d='M320.5 0v3' /><path d='M330.5 0v3' /><path d='M340.5 0v3' /><path d='M350.5 0v6' /><path d='M360.5 0v3' /><path d='M370.5 0v3' /><path d='M380.5 0v3' /><path d='M390.5 0v3' /><path d='M400.5 0v10' /><path d='M410.5 0v3' /><path d='M420.5 0v3' /><path d='M430.5 0v3' /><path d='M440.5 0v3' /><path d='M450.5 0v6' /><path d='M460.5 0v3' /><path d='M470.5 0v3' /><path d='M480.5 0v3' /><path d='M490.5 0v3' /><path d='M500.5 0v10' /><path d='M510.5 0v3' /><path d='M520.5 0v3' /><path d='M530.5 0v3' /><path d='M540.5 0v3' /><path d='M550.5 0v6' /><path d='M560.5 0v3' /><path d='M570.5 0v3' /><path d='M580.5 0v3' /><path d='M590.5 0v3' /><path d='M600.5 0v10' /><path d='M610.5 0v3' /><path d='M620.5 0v3' /><path d='M630.5 0v3' /><path d='M640.5 0v3' /><path d='M650.5 0v6' /><path d='M660.5 0v3' /><path d='M670.5 0v3' /><path d='M680.5 0v3' /><path d='M690.5 0v3' /><path d='M700.5 0v10' /><path d='M710.5 0v3' /><path d='M720.5 0v3' /><path d='M730.5 0v3' /><path d='M740.5 0v3' /><path d='M750.5 0v6' /><path d='M760.5 0v3' /><path d='M770.5 0v3' /><path d='M780.5 0v3' /><path d='M790.5 0v3' /><path d='M800.5 0v10' /><path d='M810.5 0v3' /><path d='M820.5 0v3' /><path d='M830.5 0v3' /><path d='M840.5 0v3' /><path d='M850.5 0v6' /><path d='M860.5 0v3' /><path d='M870.5 0v3' /><path d='M880.5 0v3' /><path d='M890.5 0v3' /><path d='M900.5 0v10' /><path d='M910.5 0v3' /><path d='M920.5 0v3' /><path d='M930.5 0v3' /><path d='M940.5 0v3' /><path d='M950.5 0v6' /><path d='M960.5 0v3' /><path d='M970.5 0v3' /><path d='M980.5 0v3' /><path d='M990.5 0v3' /><path d='M1000.5 0v10' /><path d='M1010.5 0v3' /><path d='M1020.5 0v3' /><path d='M1030.5 0v3' /><path d='M1040.5 0v3' /><path d='M1050.5 0v6' /><path d='M1060.5 0v3' /><path d='M1070.5 0v3' /><path d='M1080.5 0v3' /><path d='M1090.5 0v3' /><path d='M1100.5 0v10' /><path d='M1110.5 0v3' /><path d='M1120.5 0v3' /><path d='M1130.5 0v3' /><path d='M1140.5 0v3' /><path d='M1150.5 0v6' /><path d='M1160.5 0v3' /><path d='M1170.5 0v3' /><path d='M1180.5 0v3' /><path d='M1190.5 0v3' /><path d='M1200.5 0v10' /><path d='M1210.5 0v3' /><path d='M1220.5 0v3' /><path d='M1230.5 0v3' /><path d='M1240.5 0v3' /><path d='M1250.5 0v6' /><path d='M1260.5 0v3' /><path d='M1270.5 0v3' /><path d='M1280.5 0v3' /><path d='M1290.5 0v3' /><path d='M1300.5 0v10' /><path d='M1310.5 0v3' /><path d='M1320.5 0v3' /><path d='M1330.5 0v3' /><path d='M1340.5 0v3' /><path d='M1350.5 0v6' /><path d='M1360.5 0v3' /><path d='M1370.5 0v3' /><path d='M1380.5 0v3' /><path d='M1390.5 0v3' /><path d='M1400.5 0v10' /><path d='M1410.5 0v3' /><path d='M1420.5 0v3' /><path d='M1430.5 0v3' /><path d='M1440.5 0v3' /><path d='M1450.5 0v6' /><path d='M1460.5 0v3' /><path d='M1470.5 0v3' /><path d='M1480.5 0v3' /><path d='M1490.5 0v3' /><path d='M1500.5 0v10' /><path d='M1510.5 0v3' /><path d='M1520.5 0v3' /><path d='M1530.5 0v3' /><path d='M1540.5 0v3' /><path d='M1550.5 0v6' /><path d='M1560.5 0v3' /><path d='M1570.5 0v3' /><path d='M1580.5 0v3' /><path d='M1590.5 0v3' /><path d='M1600.5 0v10' /><path d='M1610.5 0v3' /><path d='M1620.5 0v3' /><path d='M1630.5 0v3' /><path d='M1640.5 0v3' /><path d='M1650.5 0v6' /><path d='M1660.5 0v3' /><path d='M1670.5 0v3' /><path d='M1680.5 0v3' /><path d='M1690.5 0v3' /><path d='M1700.5 0v10' /><path d='M1710.5 0v3' /><path d='M1720.5 0v3' /><path d='M1730.5 0v3' /><path d='M1740.5 0v3' /><path d='M1750.5 0v6' /><path d='M1760.5 0v3' /><path d='M1770.5 0v3' /><path d='M1780.5 0v3' /><path d='M1790.5 0v3' /><path d='M1800.5 0v10' /><path d='M1810.5 0v3' /><path d='M1820.5 0v3' /><path d='M1830.5 0v3' /><path d='M1840.5 0v3' /><path d='M1850.5 0v6' /><path d='M1860.5 0v3' /><path d='M1870.5 0v3' /><path d='M1880.5 0v3' /><path d='M1890.5 0v3' /><path d='M1900.5 0v10' /><path d='M1910.5 0v3' /><path d='M1920.5 0v3' /><path d='M1930.5 0v3' /><path d='M1940.5 0v3' /><path d='M1950.5 0v6' /><path d='M1960.5 0v3' /><path d='M1970.5 0v3' /><path d='M1980.5 0v3' /><path d='M1990.5 0v3' /><path d='M2000.5 0v10' /></g><g fill='%23111' fill-opacity='.45' font-family='monospace' font-size='9'><text x='4' y='19'>0</text><text x='104' y='19'>100</text><text x='204' y='19'>200</text><text x='304' y='19'>300</text><text x='404' y='19'>400</text><text x='504' y='19'>500</text><text x='604' y='19'>600</text><text x='704' y='19'>700</text><text x='804' y='19'>800</text><text x='904' y='19'>900</text><text x='1004' y='19'>1000</text><text x='1104' y='19'>1100</text><text x='1204' y='19'>1200</text><text x='1304' y='19'>1300</text><text x='1404' y='19'>1400</text><text x='1504' y='19'>1500</text><text x='1604' y='19'>1600</text><text x='1704' y='19'>1700</text><text x='1804' y='19'>1800</text><text x='1904' y='19'>1900</text><text x='2004' y='19'>2000</text></g></svg>");
  /* tokens do tema: valem dentro dos blocos claros */
  --ks-bg: var(--c-noite);
  --ks-bg-topo: var(--c-noite);
  --ks-ink: var(--c-tinta);
  --ks-ink-dim: var(--c-dim);
  --ks-sobre-card: var(--c-branco);
  --ks-linha: var(--c-linha);
  --ks-tile: var(--c-areia);
  --ks-chip: rgba(34,31,32,.07);
  --ks-teal: var(--c-tinta);
  --ks-gelo: var(--c-coral);
  --ks-gelo-ink: var(--c-tinta);
  --ks-azul: var(--c-coral);
  --ks-card-sombra: none;
  --ks-sombra: none;
  --ks-r-lg: var(--r-card);
  --ks-r-md: 18px;
  --ks-ff: var(--f-texto);
  color-scheme: dark;
  background: var(--c-noite);
}
/* Opções de fonte de título (comparativo de 10/11/2026) */
@font-face { font-family: 'Bootzy TM'; font-weight: 400 900; font-style: normal; font-display: swap; src: url(/assets/fontes/bootzy-tm.woff2) format('woff2'), url(/assets/fontes/bootzy-tm.woff) format('woff'); }
@font-face { font-family: 'PP Neue Montreal'; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fontes/pp-neue-montreal-bold.woff2) format('woff2'); }
@font-face { font-family: 'TBJ Interval'; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fontes/tbj-interval-bold.woff2) format('woff2'); }
html.ks-cool[data-ks-fonte="bootzy"] { --ks-fonte-titulo: 'Bootzy TM', 'Instrument Sans', system-ui, sans-serif; --ks-titulo-escala: .84; }
/* Fontes sem largura condensada pedem menos tracking negativo nos títulos */
html.ks-cool[data-ks-fonte="bootzy"] .ks-site :is(h1, h1 em, h2, h3, .ks-faixa-grande) { letter-spacing: .03em !important; }
html.ks-cool[data-ks-fonte="helvetica"] .ks-site :is(h1, h1 em, h2, h3), html.ks-cool[data-ks-fonte="neue-montreal"] .ks-site :is(h1, h1 em, h2, h3) { letter-spacing: -0.025em !important; }
html.ks-cool[data-ks-fonte="tbj-interval"] .ks-site :is(h1, h1 em, h2, h3) { letter-spacing: -0.02em !important; }
html.ks-cool[data-ks-fonte="helvetica"] { --ks-fonte-titulo: 'Helvetica Neue', Helvetica, Arial, sans-serif; --ks-titulo-escala: .8; }
html.ks-cool[data-ks-fonte="neue-montreal"] { --ks-fonte-titulo: 'PP Neue Montreal', 'Helvetica Neue', Arial, sans-serif; --ks-titulo-escala: .82; }
html.ks-cool[data-ks-fonte="tbj-interval"] { --ks-fonte-titulo: 'TBJ Interval', 'Instrument Sans', sans-serif; --ks-titulo-escala: .86; }

/* Cor de cada categoria do blog */
html.ks-cool [data-ks-cat] { --cat: var(--c-areia); }
html.ks-cool [data-ks-cat="landing-pages"], html.ks-cool #cat-landing-pages, html.ks-cool body.category-landing-pages { --cat: var(--c-sol); }
html.ks-cool [data-ks-cat="sites"], html.ks-cool #cat-sites, html.ks-cool body.category-sites { --cat: var(--c-azul); }
html.ks-cool [data-ks-cat="seo-ia"], html.ks-cool #cat-seo-ia, html.ks-cool body.category-seo-ia { --cat: var(--c-coral); }
html.ks-cool [data-ks-cat="sistemas-ia"], html.ks-cool #cat-sistemas-ia, html.ks-cool body.category-sistemas-ia { --cat: var(--c-verde); }
html.ks-cool [data-ks-cat="cro"], html.ks-cool #cat-cro, html.ks-cool body.category-cro { --cat: var(--c-lilas); }
html.ks-cool [data-ks-cat="design"], html.ks-cool #cat-design, html.ks-cool body.category-design { --cat: var(--c-agua); }
html.ks-cool [data-ks-cat="codigos"], html.ks-cool #cat-codigos, html.ks-cool body.category-codigos { --cat: var(--c-areia); }

/* ---------- Página ---------- */
html.ks-cool body.ks-tela { background: var(--c-noite); }
html.ks-cool .ks-site { color: var(--c-claro); font-family: var(--f-texto); font-size: 17px; -webkit-font-smoothing: antialiased; }
html.ks-cool ::selection { background: var(--c-sol); color: var(--c-tinta); }
html.ks-cool .ks-site :focus-visible { outline: 3px solid var(--c-sol); outline-offset: 3px; border-radius: 10px; }
html.ks-cool .ks-pular { background: var(--c-sol); color: var(--c-tinta); }
html.ks-cool .ks-tema-botao { display: none !important; }
html.ks-cool .ks-js .ks-revelar, html.ks-cool .ks-revelar { opacity: 1 !important; transform: none !important; transition: none !important; }
html.ks-cool .ks-site :is(.ks-s-olho, .ks-rv-h, .ks-rv-cat, .ks-rv-menu, .ks-rodape-tit, .ks-np-lado-t, .ks-np-cta-olho, .ks-post-nav small, .ks-leia-corpo small, .ks-rv-ess small, .ks-h-aluno, .ks-h-cta, .ks-h-menu, .ks-h-menu a, .ks-folha-olho, .ks-modcard-rot, .ks-modcard-n) { text-transform: none; letter-spacing: 0; }

/* Bloco claro padrão: páginas do tema sem tratamento próprio ficam inteiras num bloco creme (texto legível) */
html.ks-cool main#ks-conteudo {
  margin: 4px var(--c-gap) 0; padding: 8px 0 56px; border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); overflow: clip; }
html.ks-cool main#ks-conteudo :is(h1, h2, h3, h4) { color: inherit; }

/* ---------- Tipografia ---------- */
html.ks-cool .ks-site :is(h1, h2, h3) { font-family: var(--f-display); font-stretch: 92%; text-transform: uppercase;}
html.ks-cool :is(.ks-portfolio-cabeca, .ks-curso-hero, .ks-sobre-hero, .ks-rv-cabeca, .ks-pb-cabeca, .ks-cabeca, .ks-calc-texto) h1 {
  font-family: var(--f-display); font-weight: 700; font-stretch: 88%; font-size: clamp(36px, 4.6vw, 58px); line-height: 1; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .ks-site :is(h1, h2) em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; font-stretch: normal; color: inherit; letter-spacing: -0.01em; }
html.ks-cool :is(.ks-modulo-h2, .ks-curso-fim h2, .ks-dep-t, .ks-pb-corpo h2, .ks-calc-texto h2, .ks-sobre-grade h2, .ks-proj-irmaos h2, .ks-trilhas-outras h2, .ks-s-titulo, .ks-leia h2) {
  font-family: var(--f-display); font-weight: 700; font-stretch: 90%; font-size: clamp(28px, 3vw, 40px); line-height: 1.04; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .ks-curso-fim h2 em { color: inherit; }
/* Rótulo de seção: texto pequeno, sem enfeite */
html.ks-cool .ks-site :is(.ks-s-olho, .ks-olho:not(:has(a))) {
  display: inline-block; margin-bottom: 18px; padding: 0; border: 0; background: none; color: inherit; font: 500 14px/1.3 var(--f-mono); letter-spacing: 0; }
html.ks-cool .ks-site :is(.ks-s-olho, .ks-olho:not(:has(a)))::before { content: none; opacity: .55; }
/* Régua do Figma (acento): topo das aberturas */
html.ks-cool .ks-cool-regua { display: block; height: 24px; border-bottom: 1px solid currentColor; opacity: .5; background: var(--c-regua) left top / 2000px 24px no-repeat; }

/* ---------- Botões: pílulas grandes ---------- */
html.ks-cool .ks-site .ks-btn {
  gap: 12px; padding: 15px 26px; border: 0; border-radius: 999px; font: 600 15.5px/1.1 var(--f-texto); letter-spacing: -0.01em; text-transform: none; box-shadow: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease; }
html.ks-cool .ks-site .ks-btn:hover { transform: none; }
html.ks-cool .ks-site .ks-btn:active { transform: scale(.97); }
html.ks-cool .ks-site .ks-btn-menta { background: var(--c-coral); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-btn-menta:hover { background: #F39D79; }
html.ks-cool .ks-site .ks-btn-menta::after { content: ""; width: 14px; height: 14px; flex: none; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .3s ease; }
html.ks-cool .ks-site .ks-btn-menta:hover::after { transform: rotate(90deg); }
html.ks-cool .ks-site .ks-btn-menta > span[aria-hidden] { display: none; }
html.ks-cool .ks-site .ks-btn-escuro { background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-site .ks-btn-escuro:hover { background: #3A3536; }
html.ks-cool .ks-site .ks-btn-linha { background: var(--c-azul); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-btn-linha:hover { background: #A5C2F8; }

/* ---------- Cabeçalho ---------- */
html.ks-cool .ks-h-topo, html.ks-cool .ks-h-topo.ks-h-rolou { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.ks-cool .ks-h-topo.ks-h-rolou { background: linear-gradient(180deg, rgba(34,31,32,.96) 0%, rgba(34,31,32,.85) 70%, rgba(34,31,32,0) 100%); }
html.ks-cool .ks-h-topo .ks-wrap { max-width: none; height: 84px; padding: 0 calc(var(--c-gap) + 16px); gap: 12px; }
html.ks-cool .ks-h-marca { color: var(--c-claro); font-family: var(--f-texto); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
html.ks-cool .ks-h-sep { background: var(--c-linha-clara); }
html.ks-cool .ks-h-logo { filter: invert(1); opacity: .9; }
html.ks-cool .ks-h-menu { gap: 4px; padding: 5px; border-radius: 999px; background: var(--c-creme); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.ks-cool .ks-h-menu > a, html.ks-cool .ks-h-drop summary { padding: 11px 18px; color: var(--c-tinta); font-size: 15px; font-weight: 500; }
html.ks-cool .ks-h-menu > a:hover, html.ks-cool .ks-h-drop summary:hover, html.ks-cool .ks-h-drop[open] summary { background: var(--c-areia); color: var(--c-tinta); }
html.ks-cool .ks-h-menu > a[aria-current="page"], html.ks-cool .ks-h-menu > a.ks-cool-atual { background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-h-painel { padding: 10px; border: 0; border-radius: 32px; background: var(--c-creme); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); backdrop-filter: none; }
html.ks-cool .ks-h-painel a { padding: 18px 18px; border-radius: 22px; background: var(--c-areia); color: var(--c-tinta); }
html.ks-cool .ks-h-painel a:nth-child(1):hover { background: var(--c-verde); }
html.ks-cool .ks-h-painel a:nth-child(2):hover { background: var(--c-azul); }
html.ks-cool .ks-h-painel a:nth-child(3):hover { background: var(--c-coral); }
html.ks-cool .ks-h-painel span { color: var(--c-dim); }
html.ks-cool .ks-h-aluno { padding: 14px 20px; border: 1.5px solid var(--c-linha-clara); background: transparent; color: var(--c-claro) !important; font-size: 14.5px; font-weight: 500; }
html.ks-cool .ks-h-aluno:hover { border-color: var(--c-claro); }
html.ks-cool .ks-h-topo .ks-h-cta { padding: 14px 22px; font-size: 14.5px; }
html.ks-cool .ks-h-mobile summary { width: 48px; height: 48px; background: var(--c-creme); box-shadow: none; }
html.ks-cool .ks-h-mobile summary span { background: var(--c-tinta); height: 2px; }
html.ks-cool .ks-h-mobile-painel { padding: 10px; border: 0; border-radius: 28px; background: var(--c-creme); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); top: calc(100% + 12px); }
html.ks-cool .ks-h-mobile-painel a { color: var(--c-tinta); font-weight: 500; border-radius: 16px; }
html.ks-cool .ks-h-mobile-painel a:hover { background: var(--c-areia); }
@media (max-width: 520px) {
  html.ks-cool .ks-h-topo .ks-wrap { height: 72px; padding: 0 18px; }
  html.ks-cool .ks-h-marca { font-size: 18px; }
}

/* ---------- Rodapé: bloco creme ---------- */
html.ks-cool .ks-rodape { margin: var(--c-gap); padding: 56px 0 28px; border: 0; border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-dim); }
html.ks-cool .ks-rodape .ks-h-marca { color: var(--c-tinta); }
html.ks-cool .ks-rodape .ks-h-logo { filter: none; }
html.ks-cool .ks-rodape .ks-h-sep { background: var(--c-linha); }
html.ks-cool .ks-rodape strong, html.ks-cool .ks-rodape-contato a { color: var(--c-tinta); }
html.ks-cool .ks-rodape-col a { color: var(--c-dim); }
html.ks-cool .ks-rodape a:hover { color: var(--c-tinta); text-decoration: underline; text-underline-offset: 3px; }
html.ks-cool .ks-rodape-tit { color: var(--c-tinta); font: 500 13.5px/1.2 var(--f-mono); }
html.ks-cool .ks-rodape-tit::before { content: none; opacity: .5; }
html.ks-cool .ks-rodape-base { border-top-color: var(--c-linha); }
html.ks-cool .ks-rodape .ks-rodape-cta:hover { text-decoration: none; }

/* ---------- Painel "O que você precisa?" ---------- */
html.ks-cool .ks-folha { background: var(--c-creme); color: var(--c-tinta); border: 0; }
html.ks-cool .ks-folha h2 { color: var(--c-tinta); font-family: var(--f-display); font-weight: 700; text-transform: uppercase;}
html.ks-cool .ks-folha-olho { color: var(--c-dim) !important; font-family: var(--f-mono); }
html.ks-cool .ks-folha-fechar { background: var(--c-areia); color: var(--c-tinta); }
html.ks-cool .ks-folha .ks-opcao { background: var(--c-areia); margin-bottom: 8px; border-radius: 24px; color: var(--c-tinta); }
html.ks-cool .ks-folha .ks-opcao small { color: var(--c-dim); }
html.ks-cool .ks-folha .ks-opcao:nth-child(4n+1):hover { background: var(--c-verde); }
html.ks-cool .ks-folha .ks-opcao:nth-child(4n+2):hover { background: var(--c-azul); }
html.ks-cool .ks-folha .ks-opcao:nth-child(4n+3):hover { background: var(--c-coral); }
html.ks-cool .ks-folha .ks-opcao:nth-child(4n+4):hover { background: var(--c-sol); }
html.ks-cool .ks-folha .ks-opcao:hover small { color: var(--c-tinta); }
html.ks-cool .ks-folha .ks-icone { background: var(--c-branco); color: var(--c-tinta); }

/* ---------- Chips de categoria ---------- */
html.ks-cool .ks-site :is(.ks-rv-cat, .ks-cat-post, .ks-leia-corpo small, .ks-post-corpo small, .ks-rv-ess small)[data-ks-cat] {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 5px 12px; border: 0; border-radius: 999px;
  background: var(--cat); color: var(--c-tinta); font: 500 13px/1.25 var(--f-mono); letter-spacing: 0; text-transform: none; }

/* ---------- Acentos reutilizáveis ---------- */
/* Frame do Figma: borda fina colorida, alças nas quinas e etiqueta mono (use .ks-cool-frame + data-frame="nome") */
html.ks-cool .ks-cool-frame { --fr: var(--c-coral); position: relative; border: 1.5px solid var(--fr); }
html.ks-cool .ks-cool-frame::after {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background:
    linear-gradient(var(--c-branco), var(--c-branco)) left 1.5px top 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--c-branco), var(--c-branco)) right 1.5px top 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--c-branco), var(--c-branco)) left 1.5px bottom 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--c-branco), var(--c-branco)) right 1.5px bottom 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--fr), var(--fr)) left top / 11px 11px no-repeat,
    linear-gradient(var(--fr), var(--fr)) right top / 11px 11px no-repeat,
    linear-gradient(var(--fr), var(--fr)) left bottom / 11px 11px no-repeat,
    linear-gradient(var(--fr), var(--fr)) right bottom / 11px 11px no-repeat; }
html.ks-cool .ks-cool-frame[data-frame]::before {
  content: attr(data-frame); position: absolute; left: -6px; bottom: calc(100% + 8px); padding: 3px 8px; background: var(--fr); color: var(--c-tinta); font: 500 12.5px/1.3 var(--f-mono); white-space: nowrap; }

/* Cursor dos cards (ks-cool.js): círculo grande com seta que segue o mouse */
html.ks-cool .ks-cool-cursor {
  position: fixed; left: 0; top: 0; z-index: 2147483000; width: 130px; height: 130px; margin: -65px 0 0 -65px; pointer-events: none;
  display: grid; place-items: center; border-radius: 50%; border: 8px solid var(--c-sol); color: var(--c-sol); background: rgba(34,31,32,.18);
  opacity: 0; scale: .6; transform: translate3d(-300px, -300px, 0); transition: opacity .22s ease, scale .28s cubic-bezier(.2,.8,.2,1), border-color .2s, color .2s, background-color .2s; will-change: transform; }
html.ks-cool .ks-cool-cursor svg { width: 42px; height: 42px; }
html.ks-cool .ks-cool-cursor.ks-cool-cursor-on { opacity: 1; scale: 1; }
html.ks-cool .ks-cool-cursor.ks-cool-cursor-claro { border-color: var(--c-tinta); color: var(--c-tinta); background: rgba(255,210,63,.22); }
html.ks-cool .ks-cool-cursor-alvo, html.ks-cool .ks-cool-cursor-alvo * { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html.ks-cool .ks-site *, html.ks-cool .ks-site *::before, html.ks-cool .ks-site *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Artes abstratas do tema (verde-petróleo) viram blocos de cor chapada ---------- */
html.ks-cool .ks-arte { --arte: var(--c-verde); background: var(--arte) !important; color: var(--c-tinta) !important; box-shadow: none !important; }
html.ks-cool .ks-arte::before, html.ks-cool .ks-arte::after, html.ks-cool .ks-arte .ks-bolha { display: none !important; }
html.ks-cool .ks-site :nth-child(4n+2) > .ks-arte, html.ks-cool .ks-site .ks-arte:nth-child(4n+2) { --arte: var(--c-azul); }
html.ks-cool .ks-site :nth-child(4n+3) > .ks-arte, html.ks-cool .ks-site .ks-arte:nth-child(4n+3) { --arte: var(--c-coral); }
html.ks-cool .ks-site :nth-child(4n+4) > .ks-arte, html.ks-cool .ks-site .ks-arte:nth-child(4n+4) { --arte: var(--c-sol); }
html.ks-cool .ks-arte :is(strong, em, span, h2, h3, p, small) { color: var(--c-tinta) !important; text-shadow: none !important; }
html.ks-cool .ks-arte em { background: rgba(34,31,32,.1) !important; border: 0 !important; font: 500 12.5px/1.2 var(--f-mono) !important; letter-spacing: 0 !important; text-transform: none !important; }
html.ks-cool .ks-arte strong { font-family: var(--f-display) !important; font-style: normal !important; font-weight: 700 !important; font-stretch: 90%; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .ks-arte-marca { filter: none !important; }
html.ks-cool .ks-fcard { border-radius: var(--r-card); background: var(--c-creme); color: var(--c-tinta); box-shadow: none; padding: 8px; }
html.ks-cool .ks-fcard:hover { transform: none; box-shadow: none; }
html.ks-cool .ks-fcard-arte { border-radius: calc(var(--r-card) - 8px); }
html.ks-cool .ks-fcard-corpo { color: var(--c-dim); }
html.ks-cool .ks-fcard-corpo small { color: var(--c-tinta); font-family: var(--f-mono); }

/* Chamada da Formação no fim das páginas */
html.ks-cool .ks-curso-fim { padding: clamp(36px, 5vw, 72px) 24px; border-radius: var(--r-bloco); background: var(--c-coral); color: var(--c-tinta); }
html.ks-cool .ks-curso-fim h2, html.ks-cool .ks-curso-fim p { color: var(--c-tinta) !important; }
html.ks-cool .ks-site .ks-curso-fim .ks-btn { background: var(--c-tinta); color: var(--c-claro); }

/* Formulários e campos dentro dos blocos claros: esquema claro (texto escuro em campo claro) */
html.ks-cool :is(main#ks-conteudo, .ks-folha, .ks-rodape, .ks-np-artigo, .ks-np-sumario) { color-scheme: light; }
/* Botão que já tem seta própria não ganha o "+" */
html.ks-cool .ks-site .ks-btn-menta:has(svg)::after { display: none; }
/* Régua clara para o fundo escuro */
html.ks-cool .ks-cool-regua-clara { filter: invert(1); }

/* ---- 10-blog.css ---- */
/* ================= BLOG: lista (/blog/), categorias e posts ================= */
/* Estas telas montam o próprio mosaico de blocos: sem o bloco creme padrão no <main> */
html.ks-cool main#ks-conteudo:is(.ks-revista, .ks-np, .ks-blog-wrap) { margin: 0; padding: 0; border-radius: 0; background: transparent; color: var(--c-claro); overflow: visible; }

/* ---------- Lista do blog ---------- */
html.ks-cool .ks-revista > .ks-wrap { max-width: none; padding: 0 var(--c-gap); }
html.ks-cool .ks-rv-cabeca { padding: 36px 16px 8px; border: 0; text-align: center; }
html.ks-cool .ks-rv-cabeca .ks-s-olho { color: var(--c-claro-dim); }
html.ks-cool .ks-rv-cabeca h1 { max-width: 16ch; margin: 0 auto; color: var(--c-claro); }
html.ks-cool .ks-rv-menu { justify-content: center; flex-wrap: wrap; gap: 8px; margin: 28px auto 0; padding: 0 0 6px; overflow: visible; font: 500 14.5px/1.2 var(--f-texto); }
html.ks-cool .ks-rv-menu a { padding: 11px 18px; border: 0; border-radius: 999px; background: var(--c-noite-2); color: var(--c-claro); transition: background-color .2s, color .2s; }
html.ks-cool .ks-rv-menu a:hover { background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-rv-menu a[href^="#cat-"] { color: var(--c-tinta); }
html.ks-cool .ks-rv-menu a[href="#cat-landing-pages"] { background: var(--c-sol); }
html.ks-cool .ks-rv-menu a[href="#cat-sites"] { background: var(--c-azul); }
html.ks-cool .ks-rv-menu a[href="#cat-seo-ia"] { background: var(--c-coral); }
html.ks-cool .ks-rv-menu a[href="#cat-sistemas-ia"] { background: var(--c-verde); }
html.ks-cool .ks-rv-menu a[href="#cat-cro"] { background: var(--c-lilas); }
html.ks-cool .ks-rv-menu a[href="#cat-design"] { background: var(--c-agua); }
html.ks-cool .ks-rv-menu a[href^="#cat-"]:hover { background: var(--c-creme); }
html.ks-cool .ks-rv-menu a[href*="formacao-lps"] { background: var(--c-creme); color: var(--c-tinta); }
@media (max-width: 700px) { html.ks-cool .ks-rv-menu { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-inline: -12px; padding-inline: 12px; scrollbar-width: none; } }

/* Destaques: mosaico de três blocos */
html.ks-cool .ks-rv-destaques { gap: var(--c-gap); padding: 28px 0 0; border: 0; align-items: stretch; }
html.ks-cool .ks-rv-grande { display: block; padding: 10px 10px 30px; border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-rv-grande > :not(.ks-rv-img) { margin-left: clamp(14px, 2vw, 28px); margin-right: clamp(14px, 2vw, 28px); }
html.ks-cool .ks-rv-grande .ks-rv-img { border-radius: calc(var(--r-bloco) - 10px); }
html.ks-cool .ks-rv-grande h2 { font-family: var(--f-display); font-weight: 700; font-stretch: 90%; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.02; letter-spacing: .03em; color: var(--c-tinta); text-transform: uppercase;}
html.ks-cool .ks-rv-grande p { color: var(--c-dim); }
html.ks-cool .ks-site :is(.ks-rv-grande, .ks-rv-mini, .ks-rv-card) time { font: 400 13px/1.3 var(--f-mono); color: var(--c-dim); }
html.ks-cool .ks-rv-img { background: var(--c-areia); }
html.ks-cool :is(.ks-rv-grande, .ks-rv-mini, .ks-rv-card):hover :is(h2, h3) { text-decoration: none; }
html.ks-cool .ks-rv-lado { gap: 0; padding: 14px clamp(14px, 1.6vw, 22px); border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); align-content: stretch; }
html.ks-cool .ks-rv-mini { padding: 14px 0; border-bottom: 1px solid var(--c-linha); }
html.ks-cool .ks-rv-mini .ks-rv-img { border-radius: 16px; }
html.ks-cool .ks-rv-mini h3 { margin-top: 8px; font-weight: 700; font-size: 17px; letter-spacing: -0.025em; color: var(--c-tinta); }
html.ks-cool .ks-rv-mini:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.ks-cool .ks-rv-ess { padding: clamp(22px, 2.4vw, 34px); border-radius: var(--r-bloco); background: var(--c-verde); color: var(--c-tinta); }
html.ks-cool .ks-rv-ess .ks-rv-h { color: var(--c-tinta); font: 500 14px/1.2 var(--f-mono); }
html.ks-cool .ks-rv-ess .ks-rv-h::before { content: none; opacity: .55; }
html.ks-cool .ks-rv-ess li + li { border-top: 1px solid rgba(34,31,32,.16); }
html.ks-cool .ks-rv-ess a { color: var(--c-tinta); font-weight: 600; }
html.ks-cool .ks-rv-ess a:hover { color: var(--c-tinta); text-decoration: underline; text-underline-offset: 3px; }
html.ks-cool .ks-rv-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-tinta); color: var(--c-verde); font: 500 14px/1 var(--f-mono); }
html.ks-cool .ks-rv-ess small[data-ks-cat] { margin-top: 8px; background: var(--c-creme); font-size: 12px; }

/* Seções de categoria: pastas coloridas com aba; no computador empilham ao rolar */
html.ks-cool .ks-revista .ks-rv-secao:not(.ks-rv-escura) {
  --aba-x: 0px; position: relative; margin: 76px 0 0; padding: clamp(22px, 2.6vw, 40px); border: 0;
  border-radius: 0 var(--r-bloco) var(--r-bloco) var(--r-bloco); background: var(--cat, var(--c-areia)); color: var(--c-tinta); }
html.ks-cool .ks-revista .ks-rv-secao:nth-of-type(5n+3) { --aba-x: 170px; }
html.ks-cool .ks-revista .ks-rv-secao:nth-of-type(5n+4) { --aba-x: 340px; }
html.ks-cool .ks-revista .ks-rv-secao:nth-of-type(5n+5) { --aba-x: 510px; }
html.ks-cool .ks-revista .ks-rv-secao:nth-of-type(5n+6) { --aba-x: 680px; }
html.ks-cool .ks-revista .ks-rv-secao:not(.ks-rv-escura):not(:nth-of-type(5n+2)) { border-top-left-radius: var(--r-bloco); }
html.ks-cool .ks-revista .ks-rv-secao:not(.ks-rv-escura) .ks-rv-h {
  position: absolute; left: var(--aba-x); bottom: 100%; z-index: 2; display: inline-flex; align-items: center; gap: 10px; height: 52px; margin-bottom: -1px; padding: 0 56px 0 24px;
  background: var(--cat, var(--c-areia)); color: var(--c-tinta); font: 500 15px/1 var(--f-mono); border-radius: 22px 0 0 0;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 100%, 0 100%); }
html.ks-cool .ks-revista .ks-rv-secao:not(.ks-rv-escura) .ks-rv-h::before {
  content: ""; width: 17px; height: 13px; border: 1.6px solid currentColor; border-radius: 2px 3px 3px 3px; background: linear-gradient(currentColor, currentColor) 0 0 / 7px 2.6px no-repeat; }
html.ks-cool .ks-rv-secao-cab { margin-bottom: 20px; justify-content: flex-end; }
html.ks-cool .ks-rv-secao-cab a { padding: 11px 18px; border-radius: 999px; background: var(--c-tinta); color: var(--c-claro) !important; font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background-color .2s; }
html.ks-cool .ks-rv-secao-cab a:hover { background: #3A3536; }
html.ks-cool .ks-rv-grade { gap: var(--c-gap); }
html.ks-cool .ks-rv-card { display: block; padding: 8px 8px 20px; border-radius: var(--r-card); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-rv-card .ks-rv-img { border-radius: calc(var(--r-card) - 8px); }
html.ks-cool .ks-rv-card h3 { margin: 16px 12px 8px; font-weight: 700; font-size: 18px; line-height: 1.15; letter-spacing: -0.03em; color: var(--c-tinta); }
html.ks-cool .ks-rv-card time { display: block; margin: 0 12px; }
html.ks-cool .ks-rv-escura { margin: 76px 0 0; padding: clamp(22px, 2.6vw, 40px); border-radius: var(--r-bloco); background: var(--c-noite-2); }
html.ks-cool .ks-rv-escura .ks-rv-h { color: var(--c-claro) !important; font: 500 15px/1.2 var(--f-mono); }
html.ks-cool .ks-rv-escura .ks-rv-h::before { content: none; opacity: .55; }
html.ks-cool .ks-rv-escura .ks-rv-secao-cab { justify-content: space-between; }
html.ks-cool .ks-rv-escura .ks-rv-secao-cab a { background: var(--c-creme); color: var(--c-tinta) !important; }
html.ks-cool .ks-rv-escura .ks-rv-card { background: var(--c-noite); color: var(--c-claro); }
html.ks-cool .ks-rv-escura .ks-rv-card h3 { color: var(--c-claro); }
html.ks-cool .ks-rv-escura time { color: var(--c-claro-dim) !important; }
html.ks-cool .ks-rv-todos { text-align: center; }
@media (min-width: 1000px) {
  html.ks-cool .ks-revista .ks-rv-secao:not(.ks-rv-escura) { position: sticky; top: 140px; box-shadow: 0 -24px 40px -28px rgba(0,0,0,.65); }
}
@media (max-width: 999px) {
  html.ks-cool .ks-revista .ks-rv-secao:nth-of-type(n) { --aba-x: 0px; }
  html.ks-cool .ks-revista .ks-rv-secao:not(.ks-rv-escura) { border-top-left-radius: 0 !important; margin-top: 64px; }
}

/* ---------- Categoria e arquivo ---------- */
html.ks-cool main.ks-blog-wrap { padding: 0 var(--c-gap) !important; max-width: none; }
html.ks-cool .ks-blog-wrap .ks-cabeca { max-width: none; margin: 8px 0 0; padding: clamp(36px, 5vw, 72px) 20px; border-radius: var(--r-bloco); background: var(--cat, var(--c-creme)); color: var(--c-tinta); text-align: center; }
html.ks-cool .ks-blog-wrap .ks-cabeca h1 { color: var(--c-tinta); }
html.ks-cool .ks-blog-wrap .ks-cabeca .ks-olho { color: var(--c-tinta); }
html.ks-cool .ks-blog-wrap .ks-cabeca .ks-sub { max-width: 60ch; margin: 16px auto 0; color: var(--c-tinta); opacity: .82; }
html.ks-cool .ks-categorias { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0; border: 0; }
html.ks-cool .ks-categorias a { padding: 11px 18px; border: 0; border-radius: 999px; background: var(--c-noite-2); color: var(--c-claro); font-size: 14.5px; font-weight: 500; }
html.ks-cool .ks-categorias a:hover { background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-categorias a.ks-ativa { background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-lista { gap: var(--c-gap); }
html.ks-cool .ks-lista .ks-post { padding: 8px 8px 22px; border: 0; border-radius: var(--r-card); background: var(--c-creme); color: var(--c-tinta); box-shadow: none; overflow: hidden; }
html.ks-cool .ks-lista .ks-post > img { border-radius: calc(var(--r-card) - 8px); }
html.ks-cool .ks-post-corpo { padding: 16px 12px 0; }
html.ks-cool .ks-post-titulo { color: var(--c-tinta); font-weight: 700; letter-spacing: -0.03em; }
html.ks-cool .ks-post-corpo p { color: var(--c-dim); }
html.ks-cool .ks-paginacao a, html.ks-cool .ks-paginacao span { border-radius: 999px; }

/* ================= POST ================= */
html.ks-cool .ks-progresso { height: 5px; }
html.ks-cool .ks-progresso span { background: linear-gradient(90deg, var(--c-verde), var(--c-sol) 50%, var(--c-coral)); }
html.ks-cool main.ks-np { max-width: 1320px !important; padding: 0 var(--c-gap) !important; }
html.ks-cool .ks-np-grade { gap: var(--c-gap); padding-top: 8px; }
@media (min-width: 1100px) { html.ks-cool .ks-np-grade { grid-template-columns: minmax(0, 1fr) 340px; } }
html.ks-cool .ks-np-artigo { padding: clamp(22px, 4.4vw, 64px) clamp(18px, 5vw, 80px) clamp(28px, 4vw, 56px); border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-np-artigo > * { max-width: 720px; margin-left: auto; margin-right: auto; }
html.ks-cool .ks-np-cabeca h1 { font-family: var(--f-display); font-weight: 700; font-stretch: 88%; font-size: clamp(34px, 4vw, 54px); line-height: 1; letter-spacing: .03em; color: var(--c-tinta); text-transform: uppercase;}
html.ks-cool .ks-np-cabeca .ks-sub { color: var(--c-dim); }
html.ks-cool .ks-np-autor { border-block: 1px solid var(--c-linha); }
html.ks-cool .ks-np-autor a { color: var(--c-tinta); }
html.ks-cool .ks-np-autor span, html.ks-cool .ks-np-datas { color: var(--c-dim); }
html.ks-cool .ks-cool-tempo { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: var(--c-verde); color: var(--c-tinta); font: 500 12.5px/1.3 var(--f-mono); white-space: nowrap; }
html.ks-cool .ks-cool-tempo::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(currentColor, currentColor) 50% 15% / 1.5px 40% no-repeat; }
html.ks-cool .ks-np .ks-capa-post { border-radius: var(--r-card); }

/* Lateral: sumário como menu fixo e chamada */
html.ks-cool .ks-np-fixo { top: 100px; gap: var(--c-gap); }
html.ks-cool .ks-np-sumario { padding: 24px; border-radius: var(--r-card); background: var(--c-creme); color: var(--c-tinta); box-shadow: none; max-height: calc(100vh - 360px); }
html.ks-cool .ks-np-lado-t { color: var(--c-tinta); font: 500 13.5px/1.2 var(--f-mono); }
html.ks-cool .ks-np-lado-t::before { content: none; opacity: .5; }
html.ks-cool .ks-np-sumario a { grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 8px; border-radius: 14px; color: var(--c-dim); }
html.ks-cool :is(.ks-np-sumario a, .ks-np-sumario-movel li)::before {
  content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--c-areia); color: var(--c-tinta); font: 500 12px/1 var(--f-mono); }
html.ks-cool .ks-np-sumario a:hover { background: var(--c-areia); color: var(--c-tinta); }
html.ks-cool .ks-np-sumario a.ks-ativo { background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-np-sumario a.ks-ativo::before { background: var(--c-sol); }
html.ks-cool .ks-np-card { padding: 26px; border-radius: var(--r-card); background: var(--c-coral); color: var(--c-tinta); }
html.ks-cool .ks-np-card .ks-np-lado-t { color: var(--c-tinta); }
html.ks-cool .ks-np-card-t { font-family: var(--f-texto); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
html.ks-cool .ks-np-card p { color: var(--c-tinta); opacity: .85; }
html.ks-cool .ks-site .ks-np-card .ks-btn { background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-np-card-sec { color: var(--c-tinta); text-decoration: underline; text-underline-offset: 3px; }
html.ks-cool .ks-np-sumario-movel { padding: 18px 20px; border: 0; border-radius: 24px; background: var(--c-areia); box-shadow: none; color: var(--c-tinta); }
html.ks-cool .ks-np-sumario-movel summary { display: flex; justify-content: space-between; align-items: center; font: 500 14px/1.2 var(--f-mono); list-style: none; }
html.ks-cool .ks-np-sumario-movel summary::-webkit-details-marker { display: none; }
html.ks-cool .ks-np-sumario-movel summary::after { content: "+"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-tinta); color: var(--c-claro); font: 500 20px/1 var(--f-texto); transition: transform .25s; }
html.ks-cool .ks-np-sumario-movel[open] summary::after { transform: rotate(45deg); }
html.ks-cool .ks-np-sumario-movel ol { list-style: none; padding: 0; margin-top: 14px; counter-reset: s; gap: 10px; }
html.ks-cool .ks-np-sumario-movel li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
html.ks-cool .ks-np-sumario-movel li::before { background: var(--c-creme); }
html.ks-cool .ks-np-sumario-movel li a { color: var(--c-tinta); text-decoration: none; }

/* Corpo do texto (sempre em fundo claro) */
html.ks-cool .ks-post-conteudo { counter-reset: kscap; color: var(--c-tinta); }
html.ks-cool .ks-site .ks-post-conteudo a:not(.ks-btn):not(.ks-cta-botao) { color: var(--c-tinta); text-decoration-color: var(--c-coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.ks-cool .ks-site .ks-post-conteudo a:not(.ks-btn):not(.ks-cta-botao):hover { text-decoration-color: var(--c-tinta); }
html.ks-cool .ks-site .ks-post-conteudo strong { font-weight: 700; }

/* Resumo em 1 minuto: o parágrafo de resposta direta vira um frame do Figma */
html.ks-cool .ks-site .ks-np .ks-post-conteudo > :is(p:first-child, p.ks-abre) {
  --fr: var(--c-coral); position: relative; margin: 46px 0 34px; padding: 26px 26px 24px; border: 1.5px solid var(--fr); background: var(--c-branco); font-size: 18.5px; line-height: 1.6; }
html.ks-cool .ks-site .ks-np .ks-post-conteudo > :is(p:first-child, p.ks-abre)::before {
  content: "Resumo em 1 minuto"; position: absolute; left: -6px; bottom: calc(100% + 8px); padding: 3px 8px; background: var(--fr); color: var(--c-tinta); font: 500 12.5px/1.3 var(--f-mono); }
html.ks-cool .ks-site .ks-np .ks-post-conteudo > :is(p:first-child, p.ks-abre)::after {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background:
    linear-gradient(var(--c-branco), var(--c-branco)) left 1.5px top 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--c-branco), var(--c-branco)) right 1.5px top 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--c-branco), var(--c-branco)) left 1.5px bottom 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--c-branco), var(--c-branco)) right 1.5px bottom 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--fr), var(--fr)) left top / 11px 11px no-repeat,
    linear-gradient(var(--fr), var(--fr)) right top / 11px 11px no-repeat,
    linear-gradient(var(--fr), var(--fr)) left bottom / 11px 11px no-repeat,
    linear-gradient(var(--fr), var(--fr)) right bottom / 11px 11px no-repeat; }

/* H2 com etiqueta de seção numerada (mesma numeração do sumário) */
html.ks-cool .ks-site .ks-np .ks-post-conteudo > h2 { counter-increment: kscap; margin: 68px 0 16px; font-family: var(--f-display); font-stretch: 90%; font-size: clamp(27px, 2.8vw, 36px); font-weight: 700; line-height: 1.04; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .ks-site .ks-np .ks-post-conteudo > h2::before {
  content: "Parte " counter(kscap, decimal-leading-zero); display: block; width: fit-content; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px;
  background: var(--c-tinta); color: var(--c-claro); font: 500 13px/1.3 var(--f-mono); letter-spacing: 0; }
html.ks-cool .ks-site .ks-np .ks-post-conteudo > h2:nth-of-type(4n+1)::before { background: var(--c-verde); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-np .ks-post-conteudo > h2:nth-of-type(4n+2)::before { background: var(--c-azul); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-np .ks-post-conteudo > h2:nth-of-type(4n+3)::before { background: var(--c-coral); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-np .ks-post-conteudo > h2:nth-of-type(4n+4)::before { background: var(--c-sol); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-np .ks-post-conteudo > h3 { font-family: var(--f-display); font-stretch: 92%; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;}

/* Listas com marcador colorido; listas numeradas viram passo a passo em cartões */
html.ks-cool .ks-site .ks-post-conteudo > ul { list-style: none; margin: 0 0 24px; padding: 0; }
html.ks-cool .ks-site .ks-post-conteudo > ul > li { position: relative; padding-left: 30px; margin-bottom: 12px; }
html.ks-cool .ks-site .ks-post-conteudo > ul > li::before { content: ""; position: absolute; left: 3px; top: .58em; width: 13px; height: 13px; border-radius: 50%; background: var(--c-verde); }
html.ks-cool .ks-site .ks-post-conteudo > ul > li:nth-child(4n+2)::before { background: var(--c-azul); }
html.ks-cool .ks-site .ks-post-conteudo > ul > li:nth-child(4n+3)::before { background: var(--c-coral); }
html.ks-cool .ks-site .ks-post-conteudo > ul > li:nth-child(4n+4)::before { background: var(--c-sol); }
html.ks-cool .ks-site .ks-post-conteudo > ol { list-style: none; margin: 10px 0 30px; padding: 0; counter-reset: passo; display: grid; gap: 8px; }
html.ks-cool .ks-site .ks-post-conteudo > ol > li {
  counter-increment: passo; position: relative; margin: 0; padding: 20px 22px 20px 74px; border-radius: 26px; background: var(--c-areia); font-size: 17.5px; line-height: 1.6; }
html.ks-cool .ks-site .ks-post-conteudo > ol > li::before {
  content: counter(passo); position: absolute; left: 18px; top: 17px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-verde); font: 700 18px/1 var(--f-texto); }
html.ks-cool .ks-site .ks-post-conteudo > ol > li:nth-child(4n+2)::before { background: var(--c-azul); }
html.ks-cool .ks-site .ks-post-conteudo > ol > li:nth-child(4n+3)::before { background: var(--c-coral); }
html.ks-cool .ks-site .ks-post-conteudo > ol > li:nth-child(4n+4)::before { background: var(--c-sol); }
html.ks-cool .ks-site .ks-post-conteudo > ol > li strong:first-child { display: block; margin-bottom: 2px; font-size: 18.5px; letter-spacing: -0.015em; }

/* Tabelas: cabeçalho escuro, linhas alternadas; no celular cada linha vira um cartão (ks-cool.js põe o rótulo) */
html.ks-cool .ks-site .ks-post-conteudo table:not(.ks-tabela):not(.ks-matriz) {
  display: table; width: 100%; margin: 14px 0 30px; border: 0; border-radius: 24px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--c-branco); font-size: 15.5px; }
html.ks-cool .ks-site .ks-post-conteudo table:not(.ks-tabela):not(.ks-matriz) th { padding: 15px 16px; background: var(--c-tinta); color: var(--c-claro); font-weight: 600; border: 0; }
html.ks-cool .ks-site .ks-post-conteudo table:not(.ks-tabela):not(.ks-matriz) th:last-child { background: var(--c-verde); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-post-conteudo table:not(.ks-tabela):not(.ks-matriz) td { padding: 14px 16px; border-bottom: 1px solid var(--c-linha); }
html.ks-cool .ks-site .ks-post-conteudo table:not(.ks-tabela):not(.ks-matriz) tbody tr:nth-child(even) td { background: #F3EEE6; }
html.ks-cool .ks-site .ks-post-conteudo table:not(.ks-tabela):not(.ks-matriz) tbody tr:last-child td { border-bottom: 0; }
html.ks-cool .ks-site .ks-post-conteudo table:not(.ks-tabela):not(.ks-matriz) td:first-child { font-weight: 600; }
@media (max-width: 680px) {
  html.ks-cool .ks-site .ks-post-conteudo table.ks-cool-cartoes { display: block; border-radius: 0; background: transparent; overflow: visible; }
  html.ks-cool .ks-site .ks-post-conteudo table.ks-cool-cartoes thead { display: none; }
  html.ks-cool .ks-site .ks-post-conteudo table.ks-cool-cartoes tbody { display: grid; gap: 10px; }
  html.ks-cool .ks-site .ks-post-conteudo table.ks-cool-cartoes tr { display: block; border-radius: 22px; background: var(--c-branco); overflow: hidden; }
  html.ks-cool .ks-site .ks-post-conteudo table.ks-cool-cartoes td { display: block; padding: 11px 18px; background: transparent !important; border-bottom: 1px solid var(--c-linha); font-size: 15.5px; }
  html.ks-cool .ks-site .ks-post-conteudo table.ks-cool-cartoes td:first-child { background: var(--c-tinta) !important; color: var(--c-claro); font-size: 16px; }
  html.ks-cool .ks-site .ks-post-conteudo table.ks-cool-cartoes td:last-child { border-bottom: 0; }
  html.ks-cool .ks-site .ks-post-conteudo table.ks-cool-cartoes td:not(:first-child)::before { content: attr(data-rotulo); display: block; margin-bottom: 3px; font: 500 12px/1.3 var(--f-mono); color: var(--c-dim); }
  html.ks-cool .ks-site .ks-post-conteudo table.ks-cool-cartoes td:last-child:not(:first-child) { background: #EEF8E4 !important; }
}

/* Citação, nota (post-it) e chamadas */
html.ks-cool .ks-site .ks-post-conteudo blockquote { position: relative; margin: 30px 0; padding: 24px 26px 24px 68px; border: 0; border-radius: 26px; background: var(--c-lilas); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-post-conteudo blockquote::before { content: "“"; position: absolute; left: 22px; top: 12px; font: 400 60px/1 var(--f-serif); }
html.ks-cool .ks-site .ks-post-conteudo .ks-nota { position: relative; border: 0; border-radius: 4px; background: var(--c-sol); box-shadow: 0 18px 24px -18px rgba(34,31,32,.45); }
html.ks-cool .ks-site .ks-post-conteudo .ks-nota::before { content: ""; position: absolute; left: 50%; top: -10px; width: 86px; height: 22px; margin-left: -43px; background: rgba(246,242,236,.75); transform: rotate(-2deg); }
@media (min-width: 900px) { html.ks-cool .ks-site .ks-post-conteudo .ks-nota { transform: rotate(-.8deg); } }
html.ks-cool .ks-site .ks-post-conteudo .ks-nota strong:first-child { font-family: var(--f-mao); font-size: 24px; font-weight: 600; line-height: 1.1; }
html.ks-cool .ks-np-cta { position: relative; margin: 36px 0; padding: 30px 30px 28px; border: 0; border-radius: 32px; background: var(--c-azul); box-shadow: none; color: var(--c-tinta); }
html.ks-cool .ks-np-cta .ks-np-cta-olho { color: var(--c-tinta) !important; font: 500 13px/1.3 var(--f-mono) !important; letter-spacing: 0; text-transform: none; }
html.ks-cool .ks-np-cta .ks-np-cta-olho::before { content: none; opacity: .55; }
html.ks-cool .ks-np-cta .ks-np-cta-t { font-family: var(--f-texto); font-weight: 700 !important; letter-spacing: -0.01em; font-size: 24px !important; line-height: 1.12 !important; }
html.ks-cool .ks-site .ks-np-cta .ks-btn { background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-site .ks-post-conteudo .ks-cta-post { border: 0; border-radius: 32px; background: var(--c-tinta); box-shadow: none; }
html.ks-cool .ks-site .ks-post-conteudo .ks-cta-post::after { display: none; }
html.ks-cool .ks-site .ks-post-conteudo .ks-cta-olho { color: var(--c-verde); font-family: var(--f-mono); }
html.ks-cool .ks-site .ks-post-conteudo .ks-cta-titulo { font-family: var(--f-display); font-weight: 700; color: var(--c-claro); text-transform: uppercase;}
html.ks-cool .ks-site .ks-post-conteudo .ks-cta-texto { color: var(--c-claro-dim); }
html.ks-cool .ks-site .ks-post-conteudo a.ks-cta-botao { background: var(--c-coral); color: var(--c-tinta); text-decoration: none; }
html.ks-cool .ks-site .ks-post-conteudo .ks-cta-post.ks-cta-aprender { background: var(--c-verde); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-post-conteudo .ks-cta-post.ks-cta-aprender :is(.ks-cta-olho, .ks-cta-texto, .ks-cta-titulo) { color: var(--c-tinta); }
html.ks-cool .ks-site .ks-post-conteudo .ks-cta-post.ks-cta-aprender a.ks-cta-botao { background: var(--c-tinta); color: var(--c-claro); }

/* FAQ em sanfona (ks-cool.js agrupa pergunta e resposta em <details>) */
html.ks-cool .ks-cool-faq { margin: 0 0 8px; border-radius: 24px; background: var(--c-areia); overflow: hidden; transition: background-color .2s; }
html.ks-cool .ks-cool-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; }
html.ks-cool .ks-cool-faq summary::-webkit-details-marker { display: none; }
html.ks-cool .ks-site .ks-np .ks-post-conteudo .ks-cool-faq summary h3 { margin: 0; font-family: var(--f-texto); font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; }
html.ks-cool .ks-cool-faq summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c-tinta) linear-gradient(var(--c-claro), var(--c-claro)) center / 14px 2px no-repeat; transition: background-color .2s; }
html.ks-cool .ks-cool-faq summary { position: relative; }
html.ks-cool .ks-cool-faq summary::before { content: ""; position: absolute; right: 39px; top: 50%; width: 2px; height: 14px; margin-top: -7px; background: var(--c-claro); z-index: 1; transition: transform .3s ease; }
html.ks-cool .ks-cool-faq[open] summary::before { transform: rotate(90deg); }
html.ks-cool .ks-cool-faq[open] { background: var(--c-verde); }
html.ks-cool .ks-cool-faq > :not(summary) { margin: 0 22px 20px !important; font-size: 17px !important; }

/* Chamada final do post (curso ou Fysi) */
html.ks-cool .ks-cool-fim { margin: 64px 0 8px; padding: clamp(26px, 3.4vw, 44px); border-radius: 36px; background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-site .ks-np .ks-post-conteudo .ks-cool-fim > h2 { margin-top: 0; color: var(--c-claro); }
html.ks-cool .ks-site .ks-np .ks-post-conteudo .ks-cool-fim > h2::before { background: var(--c-coral); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-np .ks-post-conteudo .ks-cool-fim p { color: var(--c-claro-dim); }
html.ks-cool .ks-site .ks-post-conteudo .ks-cool-fim a:not(.ks-btn) { color: var(--c-claro); text-decoration-color: var(--c-coral); }
html.ks-cool .ks-cool-fim-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Autora, navegação e relacionados */
html.ks-cool .ks-site .ks-autora { border: 0; border-radius: 28px; background: var(--c-areia); box-shadow: none; }
html.ks-cool .ks-site .ks-autora :is(p, .ks-autora-nome, a) { color: var(--c-tinta); }
html.ks-cool .ks-site .ks-autora .ks-autora-redes { color: var(--c-dim) !important; }
html.ks-cool .ks-post-nav a { border-radius: 26px; background: var(--c-areia); box-shadow: none; color: var(--c-tinta); transition: background-color .2s; }
html.ks-cool .ks-post-nav a:hover { transform: none; background: var(--c-verde); }
html.ks-cool .ks-post-nav small { color: var(--c-dim); font: 500 12.5px/1.3 var(--f-mono); }
html.ks-cool .ks-leia { width: auto; margin: var(--c-gap) 0 0; padding: clamp(28px, 4vw, 56px) clamp(14px, 2vw, 28px); border-radius: var(--r-bloco); background: var(--c-noite-2); }
html.ks-cool .ks-leia h2 { color: var(--c-claro); }
html.ks-cool .ks-leia h2 em { color: inherit; }
html.ks-cool .ks-leia-grade { gap: var(--c-gap); }
html.ks-cool .ks-leia-card { padding: 8px; border-radius: var(--r-card); background: var(--c-creme); color: var(--c-tinta); box-shadow: none; }
html.ks-cool .ks-leia-card:hover { transform: none; }
html.ks-cool .ks-leia-card img { border-radius: calc(var(--r-card) - 8px); }
html.ks-cool .ks-leia-corpo { padding: 16px 12px 14px; }
html.ks-cool .ks-leia-corpo strong { font-weight: 700; letter-spacing: -0.025em; }
html.ks-cool .ks-leia-corpo em { font: 400 13px/1.3 var(--f-mono); color: var(--c-dim); }
html.ks-cool .ks-np-depois { margin-top: var(--c-gap); padding: clamp(28px, 4vw, 48px) clamp(14px, 2vw, 28px); border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-lps-titulo { color: var(--c-tinta); font-family: var(--f-display); font-weight: 700; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .ks-lp-item img { border-radius: 22px; }
html.ks-cool .ks-lp-item span { color: var(--c-tinta); }

/* Barra fixa de chamada no post */
html.ks-cool .ks-barra { padding: 8px 8px 8px 22px; background: var(--c-creme); border: 0; color: var(--c-tinta); box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); backdrop-filter: none; }
html.ks-cool .ks-barra small { color: var(--c-dim); }
html.ks-cool .ks-barra .ks-barra-cta { background: var(--c-coral); color: var(--c-tinta); font-weight: 600; }

/* Proporção: seção com um card só vira card largo (imagem e texto lado a lado); dois cards dividem a linha */
html.ks-cool .ks-rv-grade:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
html.ks-cool .ks-rv-grade > .ks-rv-card:only-child { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: center; gap: 12px 28px; padding-bottom: 8px; }
html.ks-cool .ks-rv-grade > .ks-rv-card:only-child h3 { font-size: clamp(22px, 2.4vw, 32px); margin-top: 0; }
@media (max-width: 700px) { html.ks-cool .ks-rv-grade > .ks-rv-card:only-child { grid-template-columns: minmax(0, 1fr); } }
html.ks-cool .ks-rv-grade:has(> :nth-child(2):last-child) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Todos os artigos */
html.ks-cool .ks-revista .ks-rv-todos { margin: 76px 0 4px; color: var(--c-claro); font: 700 clamp(28px, 3vw, 40px)/1.05 var(--f-display); font-stretch: 90%; letter-spacing: .03em; text-align: center; text-transform: uppercase;}
html.ks-cool .ks-revista .ks-curso-fim { margin-top: 76px; }
html.ks-cool body.blog .ks-site > .ks-blog-wrap { padding: 0 var(--c-gap); }
html.ks-cool main.ks-np { margin: 0 auto !important; }
/* Portas "Quero aprender / Quero contratar" (eram fotos com texto em verde-petróleo): blocos de cor com o texto em código */
html.ks-cool:not([data-ks-pagina="/links/"]) .ks-portas-img { gap: var(--c-gap); }
html.ks-cool:not([data-ks-pagina="/links/"]) .ks-porta-foto {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: clamp(180px, 22vw, 300px); padding: clamp(22px, 3vw, 40px);
  border-radius: var(--r-bloco); background: var(--c-verde); color: var(--c-tinta); box-shadow: none; transition: background-color .2s; }
html.ks-cool:not([data-ks-pagina="/links/"]) .ks-porta-foto + .ks-porta-foto { background: var(--c-coral); }
html.ks-cool:not([data-ks-pagina="/links/"]) .ks-porta-foto:hover { transform: none; background: var(--c-sol); }
html.ks-cool:not([data-ks-pagina="/links/"]) .ks-porta-foto img { display: none; }
html.ks-cool:not([data-ks-pagina="/links/"]) .ks-porta-foto::before { content: "Quero aprender"; font: 700 clamp(30px, 3.6vw, 52px)/1 var(--f-display); font-stretch: 88%; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool:not([data-ks-pagina="/links/"]) .ks-porta-foto::after { content: "Landing pages, sistemas e SEO"; font: 500 14px/1.3 var(--f-mono); }
html.ks-cool:not([data-ks-pagina="/links/"]) .ks-porta-foto + .ks-porta-foto::before { content: "Quero contratar"; }
html.ks-cool:not([data-ks-pagina="/links/"]) .ks-porta-foto + .ks-porta-foto::after { content: "A Fysi estrutura o seu digital"; }
@media (max-width: 560px) { html.ks-cool:not([data-ks-pagina="/links/"]) .ks-portas-img { grid-template-columns: minmax(0, 1fr); } }
html.ks-cool main.ks-blog-wrap .ks-lps { margin-left: 0; margin-right: 0; max-width: 100%; border-radius: var(--r-bloco); overflow: hidden; }

/* ---- 20-home.css ---- */
/* ================= HOME (mosaico de blocos estilo wekreative) ================= */
html.ks-cool[data-ks-pagina="/"] main#ks-conteudo { margin: 0; padding: 0; border-radius: 0; background: transparent; color: var(--c-claro); overflow: visible; }
html.ks-cool[data-ks-pagina="/"] .ks-site section { padding: 0; }
html.ks-cool[data-ks-pagina="/"] main > section, html.ks-cool[data-ks-pagina="/"] main > div { margin: var(--c-gap); }
html.ks-cool[data-ks-pagina="/"] main .ks-wrap { max-width: none; padding: 0; }
html.ks-cool[data-ks-pagina="/"] .ks-h-topo { margin-bottom: 0 !important; }
html.ks-cool[data-ks-pagina="/"] .ks-s-topo { margin-bottom: 28px; padding: 0 clamp(8px, 2vw, 28px); align-items: flex-end; }
html.ks-cool[data-ks-pagina="/"] .ks-s-topo .ks-s-olho { color: inherit; opacity: .8; }
html.ks-cool[data-ks-pagina="/"] .ks-s-sub { color: inherit; opacity: .78; max-width: 34ch; text-align: right; }

/* ---------- Abertura: duas colunas iguais que cabem na tela (fiel ao wekreative) ---------- */
html.ks-cool .ks-cool-hero { margin-top: 4px !important; }
html.ks-cool .kch-grade { display: grid; gap: var(--c-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
  html.ks-cool .kch-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 2.05fr) minmax(0, 1fr); height: clamp(620px, calc(100svh - 100px), 860px); }
  html.ks-cool .kch-titulo { grid-column: 1; grid-row: 1; }
  html.ks-cool .kch-duo { grid-column: 1; grid-row: 2; }
  html.ks-cool .kch-direita { grid-column: 2; grid-row: 1 / 3; }
}
/* Bloco verde: só o título, centrado na vertical; a pílula de disponibilidade no canto */
html.ks-cool .kch-titulo { position: relative; display: flex; align-items: center; min-height: 0; padding: clamp(32px, 4vw, 64px) clamp(28px, 4.4vw, 72px); border-radius: var(--r-bloco); background: var(--c-verde); color: var(--c-tinta); overflow: hidden; }
html.ks-cool .ks-site .kch-titulo h1 {
  width: 100%; max-width: 15ch; margin: 0; font-family: var(--f-display); font-weight: 700; font-stretch: 75%; font-size: calc(var(--ks-titulo-escala) * clamp(42px, 4.5vw, 70px)); line-height: .9;
  letter-spacing: .03em; text-transform: uppercase; color: var(--c-tinta); }
html.ks-cool .ks-site .kch-titulo h1 em { display: block; font-family: var(--f-display); font-style: normal; font-weight: 700; font-stretch: 75%; letter-spacing: .03em; color: var(--c-claro); background: none; padding: 0; text-transform: uppercase;}
html.ks-cool .kch-rola { position: relative; overflow: hidden; height: var(--kch-h, auto); }
html.ks-cool .kch-rola .kch-trilho { display: block; transition: transform .7s cubic-bezier(.7,0,.2,1); }
html.ks-cool .kch-rola .kch-frase { display: block; min-height: var(--kch-h, auto); }
html.ks-cool .kch-disp { position: absolute; left: clamp(28px, 4.4vw, 72px); bottom: clamp(22px, 2.6vw, 36px); display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 13px 7px 10px; border-radius: 999px; background: rgba(34,31,32,.1); color: var(--c-tinta); font: 500 12.5px/1.2 var(--f-mono); }
html.ks-cool .kch-disp span { width: 8px; height: 8px; border-radius: 50%; background: var(--c-tinta); box-shadow: 0 0 0 0 rgba(34,31,32,.5); animation: kch-pulso 2.4s ease-out infinite; }
@keyframes kch-pulso { 70% { box-shadow: 0 0 0 8px rgba(34,31,32,0); } 100% { box-shadow: 0 0 0 0 rgba(34,31,32,0); } }

/* Coluna direita: uma moldura creme com o retrato alto e as duas pílulas embaixo */
html.ks-cool .kch-direita { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px; border-radius: var(--r-bloco); background: var(--c-creme); }
html.ks-cool .kch-retrato { position: relative; flex: 1 1 auto; min-height: 0; margin: 0; overflow: hidden; border-radius: calc(var(--r-bloco) - 12px); background: #151314; }
html.ks-cool .kch-retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
html.ks-cool .kch-retrato::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,19,20,0) 55%, rgba(21,19,20,.85) 100%); }
html.ks-cool .kch-retrato-txt { position: absolute; left: clamp(24px, 2.8vw, 40px); right: clamp(24px, 2.8vw, 40px); bottom: clamp(22px, 2.4vw, 34px); z-index: 1; max-width: 52ch; margin: 0; color: var(--c-claro); font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.45; }
html.ks-cool .kch-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
html.ks-cool .kch-cta { display: flex; align-items: center; justify-content: center; gap: 12px; height: clamp(72px, 10.5vh, 96px); padding: 0 20px; border-radius: 999px; color: var(--c-tinta); font: 600 clamp(16px, 1.25vw, 19px)/1.1 var(--f-texto); letter-spacing: -0.015em; transition: background-color .2s ease; }
html.ks-cool .kch-cta svg { width: 20px; height: 20px; transition: transform .3s ease; }
html.ks-cool .kch-cta:hover svg { transform: translate(3px, -3px); }
html.ks-cool .kch-cta-coral { background: var(--c-coral); }
html.ks-cool .kch-cta-coral:hover { background: #F39D79; }
html.ks-cool .kch-cta-azul { background: var(--c-azul); }
html.ks-cool .kch-cta-azul:hover { background: #A5C2F8; }
html.ks-cool .kch-mais { width: 17px; height: 17px; background: linear-gradient(currentColor, currentColor) center / 100% 2.2px no-repeat, linear-gradient(currentColor, currentColor) center / 2.2px 100% no-repeat; transition: transform .35s ease; }
html.ks-cool .kch-cta:hover .kch-mais { transform: rotate(90deg); }

/* Moldura de baixo à esquerda: duas telas de projeto lado a lado, que se revezam */
html.ks-cool .kch-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; padding: 12px; border-radius: var(--r-bloco); background: var(--c-creme); }
html.ks-cool .kch-foto { position: relative; display: block; min-height: 180px; overflow: hidden; border-radius: calc(var(--r-bloco) - 12px); background: var(--c-areia); }
html.ks-cool .kch-tela { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
html.ks-cool .kch-tela.kch-ativa { opacity: 1; }
html.ks-cool .kch-tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
html.ks-cool .kch-tela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,19,20,0) 45%, rgba(21,19,20,.82) 100%); }
html.ks-cool .kch-leg { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; color: var(--c-claro); font-size: 14.5px; line-height: 1.3; }

@media (max-width: 979px) {
  html.ks-cool .kch-titulo { min-height: 380px; padding-bottom: 76px; }
  html.ks-cool .kch-retrato { height: min(560px, 120vw); flex: none; }
}
@media (max-width: 560px) {
  html.ks-cool .ks-site .kch-titulo h1 { font-size: calc(var(--ks-titulo-escala) * clamp(38px, 11vw, 48px)); }
  html.ks-cool .kch-titulo { min-height: 340px; padding: 34px 24px 72px; }
  html.ks-cool .kch-disp { left: 24px; }
  html.ks-cool .kch-retrato { height: 520px; }
  html.ks-cool .kch-cta { height: 64px; padding: 0 10px; gap: 8px; font-size: 14.5px; white-space: nowrap; }
  html.ks-cool .kch-mais { width: 14px; height: 14px; }
  html.ks-cool .kch-foto { min-height: 210px; }
  html.ks-cool .kch-leg { left: 14px; right: 14px; bottom: 12px; font-size: 13px; }
}

/* ---------- Faixa de nichos: letreiro ---------- */
html.ks-cool[data-ks-pagina="/"] .ks-nichos { margin: 40px 0 !important; padding: 10px 0; border: 0; max-width: none; }
html.ks-cool[data-ks-pagina="/"] .ks-nichos-trilho { gap: 36px; font: 700 clamp(34px, 4.4vw, 64px)/1.1 var(--f-display); font-stretch: 85%; letter-spacing: .03em; color: var(--c-claro); text-transform: uppercase;}
html.ks-cool[data-ks-pagina="/"] .ks-nichos-trilho span { display: inline-flex; align-items: center; gap: 36px; }
html.ks-cool[data-ks-pagina="/"] .ks-nichos-trilho span::before { content: ""; width: .42em; height: .42em; margin: 0; border-radius: 50%; background: var(--c-verde); }
html.ks-cool[data-ks-pagina="/"] .ks-nichos-trilho span:nth-child(4n+2)::before { background: var(--c-coral); }
html.ks-cool[data-ks-pagina="/"] .ks-nichos-trilho span:nth-child(4n+3)::before { background: var(--c-azul); }
html.ks-cool[data-ks-pagina="/"] .ks-nichos-trilho span:nth-child(4n+4)::before { background: var(--c-sol); }

/* ---------- Serviços: quatro blocos de cor ---------- */
html.ks-cool[data-ks-pagina="/"] #servicos { padding: clamp(28px, 4vw, 56px) clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px); border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] .ks-escopo { gap: 10px; }
html.ks-cool .ks-site .ks-escopo-card { aspect-ratio: auto; min-height: 340px; padding: 28px; border-radius: calc(var(--r-bloco) - 14px); background: var(--c-verde); color: var(--c-tinta); transition: background-color .2s; }
html.ks-cool .ks-site .ks-escopo-card:nth-child(4n+2) { background: var(--c-azul); }
html.ks-cool .ks-site .ks-escopo-card:nth-child(4n+3) { background: var(--c-coral); }
html.ks-cool .ks-site .ks-escopo-card:nth-child(4n+4) { background: var(--c-sol); }
html.ks-cool .ks-site .ks-escopo-card::before, html.ks-cool .ks-site .ks-escopo-card::after, html.ks-cool .ks-site .ks-escopo-card .ks-escopo-logo { display: none; }
html.ks-cool .ks-site .ks-escopo-card h3 { color: var(--c-tinta); font-family: var(--f-display); font-weight: 700; font-stretch: 86%; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; letter-spacing: .03em; max-width: none; text-transform: uppercase;}
html.ks-cool .ks-site .ks-escopo-card p { color: var(--c-tinta); opacity: .85; max-width: 24ch; }
html.ks-cool .ks-site .ks-escopo-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: auto; }
html.ks-cool .ks-site .ks-escopo-tags span { padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(34,31,32,.1); color: var(--c-tinta); font: 500 13px/1.2 var(--f-mono); backdrop-filter: none; }
html.ks-cool .ks-site .ks-escopo-card .ks-escopo-ir { width: 54px; height: 54px; border: 0; background: var(--c-tinta); color: var(--c-claro); backdrop-filter: none; transition: transform .3s; }
html.ks-cool .ks-site a.ks-escopo-card:hover .ks-escopo-ir { background: var(--c-tinta); color: var(--c-claro); transform: rotate(45deg); }

/* ---------- Números: contador ---------- */
html.ks-cool[data-ks-pagina="/"] .ks-faixa-numeros { padding: 0 !important; }
html.ks-cool .ks-site .ks-faixa-caixa { gap: 24px 40px; padding: clamp(32px, 4.4vw, 64px); border-radius: var(--r-bloco); background: var(--c-coral); color: var(--c-tinta); box-shadow: none; align-items: end; }
html.ks-cool .ks-site .ks-faixa-olho { color: var(--c-tinta); font: 500 14px/1.3 var(--f-mono); letter-spacing: 0; text-transform: none; }
html.ks-cool .ks-site .ks-faixa-olho::before { content: none; opacity: .55; }
html.ks-cool .ks-site .ks-faixa-grande { display: block; color: var(--c-tinta); font: 700 clamp(84px, 12vw, 180px)/.9 var(--f-display); font-stretch: 80%; letter-spacing: .03em; font-variant-numeric: tabular-nums; text-transform: uppercase;}
html.ks-cool .ks-site .ks-faixa-txt { color: var(--c-tinta); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; max-width: 30ch; }
html.ks-cool .ks-site .ks-faixa-itens { gap: 10px; }
html.ks-cool .ks-site .ks-faixa-itens li { padding: 18px 20px; border: 0; border-radius: 26px; background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-faixa-itens strong { color: var(--c-tinta); font-family: var(--f-display); text-transform: uppercase;}
html.ks-cool .ks-site .ks-faixa-itens span { color: var(--c-dim); }

/* ---------- Projetos ---------- */
html.ks-cool[data-ks-pagina="/"] #projetos { padding: clamp(28px, 4vw, 56px) clamp(12px, 2vw, 28px) clamp(14px, 2vw, 28px) !important; border-radius: var(--r-bloco); background: var(--c-noite-2); color: var(--c-claro); }
html.ks-cool[data-ks-pagina="/"] #projetos .ks-s-titulo { color: var(--c-claro); }
html.ks-cool[data-ks-pagina="/"] #projetos .ks-cool-pastas { margin-top: 64px; max-width: none; }
html.ks-cool[data-ks-pagina="/"] .ks-lps { margin: var(--c-gap) !important; padding: 28px 0; border-radius: var(--r-bloco); background: var(--c-creme); }
html.ks-cool[data-ks-pagina="/"] .ks-lps img { border-radius: 22px; box-shadow: none; }
html.ks-cool .ks-cool-cursor.ks-cool-cursor-arraste::after { content: "Arraste"; font: 600 15px/1 var(--f-texto); }
html.ks-cool .ks-cool-cursor.ks-cool-cursor-arraste svg { display: none; }

/* ---------- Processo: caminho em etapas ---------- */
html.ks-cool[data-ks-pagina="/"] .ks-processo { padding: clamp(32px, 4.4vw, 64px) clamp(16px, 3vw, 48px) !important; border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); text-align: left; }
html.ks-cool[data-ks-pagina="/"] .ks-processo .ks-s-titulo { color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] .ks-processo .ks-s-sub { text-align: left; max-width: 52ch; }
html.ks-cool[data-ks-pagina="/"] .ks-passos { position: relative; gap: 10px; margin-bottom: 32px; }
html.ks-cool[data-ks-pagina="/"] .ks-passo { position: relative; padding: 26px 24px 28px; border: 0; border-radius: 32px; background: var(--c-areia); }
html.ks-cool[data-ks-pagina="/"] .ks-passo::before { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 56px; border-radius: 50%; background: var(--c-verde); color: var(--c-tinta); font: 500 15px/1 var(--f-mono); }
html.ks-cool[data-ks-pagina="/"] .ks-passo:nth-child(2)::before { background: var(--c-azul); }
html.ks-cool[data-ks-pagina="/"] .ks-passo:nth-child(3)::before { background: var(--c-coral); }
html.ks-cool[data-ks-pagina="/"] .ks-passo:nth-child(4)::before { background: var(--c-sol); }
html.ks-cool[data-ks-pagina="/"] .ks-passo:not(:last-child)::after { content: ""; position: absolute; left: 82px; right: 24px; top: 50px; border-top: 2px dashed rgba(34,31,32,.3); }
html.ks-cool[data-ks-pagina="/"] .ks-passo h3 { color: var(--c-tinta); font-family: var(--f-texto); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
html.ks-cool[data-ks-pagina="/"] .ks-passo p { color: var(--c-dim); }

/* ---------- Quem faz ---------- */
html.ks-cool[data-ks-pagina="/"] .ks-sobre { padding: 12px !important; border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] .ks-sobre .ks-wrap { gap: clamp(24px, 4vw, 64px); align-items: center; }
html.ks-cool[data-ks-pagina="/"] .ks-sobre-foto { max-width: 640px; border-radius: calc(var(--r-bloco) - 12px); box-shadow: none; }
html.ks-cool[data-ks-pagina="/"] .ks-sobre .ks-wrap > div:last-child { padding: 20px clamp(8px, 3vw, 48px) 28px 0; }
html.ks-cool[data-ks-pagina="/"] .ks-sobre .ks-s-titulo { color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] .ks-sobre p { color: var(--c-dim); }
html.ks-cool[data-ks-pagina="/"] .ks-numeros { gap: 10px; }
html.ks-cool[data-ks-pagina="/"] .ks-numeros > div { padding: 18px 22px; border-radius: 26px; background: var(--c-azul); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] .ks-numeros > div + div { background: var(--c-sol); }
html.ks-cool[data-ks-pagina="/"] .ks-numeros strong { font-family: var(--f-display); color: var(--c-tinta); text-transform: uppercase;}

/* ---------- Cursos, blog e FAQ ---------- */
html.ks-cool[data-ks-pagina="/"] #cursos, html.ks-cool[data-ks-pagina="/"] #blog { padding: clamp(28px, 4vw, 56px) clamp(12px, 2vw, 28px) clamp(12px, 2vw, 28px) !important; border-radius: var(--r-bloco); background: var(--c-noite-2); color: var(--c-claro); }
html.ks-cool[data-ks-pagina="/"] :is(#cursos, #blog) .ks-s-titulo { color: var(--c-claro); }
html.ks-cool[data-ks-pagina="/"] .ks-cursos { gap: 10px; }
html.ks-cool[data-ks-pagina="/"] .ks-curso { padding: 10px; border-radius: var(--r-card); background: var(--c-creme); box-shadow: none; }
html.ks-cool[data-ks-pagina="/"] .ks-curso:hover { transform: none; }
html.ks-cool[data-ks-pagina="/"] .ks-curso img { border-radius: calc(var(--r-card) - 10px); }
html.ks-cool[data-ks-pagina="/"] .ks-posts { gap: 10px; }
html.ks-cool[data-ks-pagina="/"] .ks-posts .ks-post { padding: 8px 8px 22px; border: 0; border-radius: var(--r-card); background: var(--c-creme); color: var(--c-tinta); box-shadow: none; }
html.ks-cool[data-ks-pagina="/"] .ks-posts .ks-post:hover { transform: none; }
html.ks-cool[data-ks-pagina="/"] .ks-posts .ks-post img { border-radius: calc(var(--r-card) - 8px); }
html.ks-cool[data-ks-pagina="/"] .ks-posts .ks-post-corpo { padding: 16px 12px 0; }
html.ks-cool[data-ks-pagina="/"] .ks-posts .ks-post-titulo { color: var(--c-tinta); font-family: var(--f-texto); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; }
html.ks-cool[data-ks-pagina="/"] main > section:has(.ks-faq) { padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 48px) !important; border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] main > section:has(.ks-faq) .ks-s-titulo { color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] .ks-faq { max-width: none; gap: 8px; }
html.ks-cool[data-ks-pagina="/"] .ks-faq details { padding: 0; border: 0; border-radius: 26px; background: var(--c-areia); transition: background-color .2s; }
html.ks-cool[data-ks-pagina="/"] .ks-faq details[open] { background: var(--c-verde); }
html.ks-cool[data-ks-pagina="/"] .ks-faq summary { align-items: center; padding: 22px 24px; color: var(--c-tinta); font-family: var(--f-texto); font-weight: 600; }
html.ks-cool[data-ks-pagina="/"] .ks-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c-tinta); color: var(--c-claro); font: 400 22px/1 var(--f-texto); transition: transform .3s ease; }
html.ks-cool[data-ks-pagina="/"] .ks-faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
html.ks-cool[data-ks-pagina="/"] .ks-faq details p { margin: 0; padding: 0 24px 22px; color: var(--c-tinta); }

/* ---------- Chamada final: letras-elemento ---------- */
html.ks-cool[data-ks-pagina="/"] .ks-cta-final { padding: 0 !important; }
html.ks-cool .ks-site .ks-cta-caixa { padding: clamp(40px, 6vw, 96px) clamp(18px, 4vw, 64px); border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-site .ks-cta-caixa::before, html.ks-cool .ks-site .ks-cta-caixa::after { display: none; }
html.ks-cool .ks-site .ks-cta-caixa p { color: var(--c-dim); }
html.ks-cool .ks-site .ks-cta-caixa .kcc-titulo { max-width: none; color: var(--c-tinta); font-family: var(--f-display); font-weight: 700; font-stretch: 84%; font-size: clamp(40px, 6.4vw, 92px); line-height: 1; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .kcc-quebra { display: block; }
html.ks-cool .kcc-o { position: relative; display: inline-grid; place-items: center; width: .74em; height: .74em; margin: 0 .02em; vertical-align: -0.05em; border-radius: 50%; overflow: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
html.ks-cool .kcc-o-foto { outline: 2px dashed var(--c-tinta); outline-offset: 3px; overflow: visible; }
html.ks-cool .kcc-o-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 20%; }
html.ks-cool .kcc-o-selo { border: 2px dashed rgba(34,31,32,.5); background: var(--c-branco); line-height: 1; font-stretch: 100%; letter-spacing: -0.02em; }
html.ks-cool .kcc-o-selo b { display: block; color: var(--c-coral); font: 700 .17em/1 var(--f-display); text-transform: uppercase;}
html.ks-cool .kcc-o-selo small { display: block; margin-top: .25em; font: 500 .1em/1 var(--f-mono); letter-spacing: 0; }
html.ks-cool .kcc-o-selo { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
html.ks-cool .ks-cta-caixa .ks-btn { padding: 22px 36px; font-size: 18px; }

@media (prefers-reduced-motion: reduce) { html.ks-cool .kch-disp span { animation: none; } html.ks-cool .kch-tela { transition: none; } }

/* ---------- Na prática: índice de nichos (linhas, como o índice do atlas) ---------- */
html.ks-cool[data-ks-pagina="/"] .ks-pratica { padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 48px) !important; border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] .ks-pratica .ks-s-titulo { color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] .ks-linhas { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] .ks-linha { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 8px 28px; align-items: center; padding: 26px 12px; border-bottom: 1.5px solid var(--c-tinta); transition: background-color .25s ease, padding .25s ease; }
html.ks-cool[data-ks-pagina="/"] .ks-linha:hover { background: var(--c-verde); padding-left: 24px; padding-right: 24px; }
html.ks-cool[data-ks-pagina="/"] .ks-linha:nth-child(4n+2):hover { background: var(--c-azul); }
html.ks-cool[data-ks-pagina="/"] .ks-linha:nth-child(4n+3):hover { background: var(--c-coral); }
html.ks-cool[data-ks-pagina="/"] .ks-linha:nth-child(4n+4):hover { background: var(--c-sol); }
html.ks-cool[data-ks-pagina="/"] .ks-linha-n { color: var(--c-tinta); font: 500 14px/1 var(--f-mono); opacity: 1; }
html.ks-cool[data-ks-pagina="/"] .ks-linha-t h3 { margin: 0; color: var(--c-tinta); font-family: var(--f-display); font-weight: 700; font-stretch: 88%; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool[data-ks-pagina="/"] .ks-linha-t p { margin: 6px 0 0; color: var(--c-dim); font: 400 13.5px/1.35 var(--f-mono); }
html.ks-cool[data-ks-pagina="/"] .ks-linha-d { margin: 0; color: var(--c-tinta); opacity: .85; font-size: 15.5px; line-height: 1.5; }
html.ks-cool[data-ks-pagina="/"] .ks-linha-btn { padding: 12px 18px; border: 0; border-radius: 999px; background: var(--c-tinta); color: var(--c-claro); font-size: 14px; white-space: nowrap; }
html.ks-cool[data-ks-pagina="/"] .ks-linha-btn strong { color: inherit; }
@media (max-width: 860px) {
  html.ks-cool[data-ks-pagina="/"] .ks-linha { grid-template-columns: 40px minmax(0, 1fr); }
  html.ks-cool[data-ks-pagina="/"] .ks-linha-d, html.ks-cool[data-ks-pagina="/"] .ks-linha-btn { grid-column: 2; justify-self: start; }
}
html.ks-cool .ks-site .ks-cool-hero { background: transparent; padding: 0; }
html.ks-cool .kcc-o-selo { display: inline-block; position: relative; vertical-align: -0.05em; }
html.ks-cool .kcc-o-selo b { position: absolute; left: 0; right: 0; top: 30%; text-align: center; }
html.ks-cool .kcc-o-selo small { position: absolute; left: 0; right: 0; top: 56%; margin: 0; text-align: center; }

/* ---- 30-sobre.css ---- */
/* ================= /sobre/: mosaico de blocos com acentos do Figma ================= */
html.ks-cool[data-ks-pagina="/sobre/"] main#ks-conteudo.ks-sobre { margin: 0; padding: 0 var(--c-gap); border-radius: 0; background: transparent; color: var(--c-claro); overflow: visible; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb { display: grid; gap: var(--c-gap); max-width: 1440px; margin: 0 auto; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-corpo { min-width: 0; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-regua { margin: 0 0 var(--c-gap); color: var(--c-claro-dim); }

/* Menu lateral fixo (computador) */
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-menu { display: none; }
@media (min-width: 1100px) {
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb { grid-template-columns: 92px minmax(0, 1fr); }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-menu {
    position: sticky; top: 100px; align-self: start; display: grid; gap: 4px; margin-top: 36px; padding: 8px; border-radius: 30px; background: var(--c-creme); }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-menu a {
    display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 22px; color: var(--c-tinta); font: 500 12px/1.1 var(--f-mono); transition: background-color .2s, color .2s; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-menu a:hover { background: var(--c-areia); }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-menu a[aria-current="true"] { background: var(--c-tinta); color: var(--c-claro); }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-ico svg { width: 22px; height: 22px; }
}

/* Abertura: bloco verde com o texto + foto em moldura creme */
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-hero { display: grid; gap: var(--c-gap); scroll-margin-top: 100px; }
@media (min-width: 900px) { html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr); } }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-hero-txt {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(28px, 4.6vw, 68px); border-radius: var(--r-bloco); background: var(--c-verde); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-hero-txt .ks-s-olho { margin: 0; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-hero h1 { max-width: 15ch; margin: 0; font-family: var(--f-display); font-weight: 700; font-stretch: 86%; font-size: clamp(38px, 4.6vw, 58px); line-height: .98; letter-spacing: .03em; color: var(--c-tinta); text-transform: uppercase;}
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-frase { max-width: 34ch; margin: 0; font: 500 clamp(19px, 1.8vw, 25px)/1.45 var(--f-texto); letter-spacing: -0.015em; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-chip-foto { display: inline-block; width: 1.65em; height: 1.65em; margin: 0 .1em; vertical-align: -.45em; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--c-creme); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-chip-foto img { width: 100%; height: 100%; object-fit: cover; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-forma { display: inline-block; width: .9em; height: .9em; margin: 0 .08em; vertical-align: -.08em; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-forma-a { border-radius: 50% 50% 50% 0; background: var(--c-coral); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-forma-b { border-radius: 4px; background: var(--c-azul); transform: rotate(45deg) scale(.82); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-acoes .ks-btn { padding: 18px 28px; font-size: 16px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-hero-foto { position: relative; margin: 0; padding: 10px; border-radius: var(--r-bloco); background: var(--c-creme); max-height: 720px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-hero-foto img { width: 100%; height: 100%; max-height: 700px; object-fit: cover; object-position: center 22%; border-radius: calc(var(--r-bloco) - 10px); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-hero-foto figcaption {
  position: absolute; left: 26px; bottom: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--c-creme); color: var(--c-tinta); font: 500 13px/1.2 var(--f-mono); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-ponto { width: 9px; height: 9px; border-radius: 50%; background: #5DBB3F; box-shadow: 0 0 0 4px rgba(93,187,63,.22); }
@media (max-width: 899px) {
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-hero-foto { max-height: none; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-hero-foto img { aspect-ratio: 4 / 5; max-height: 520px; height: auto; }
}

/* Números */
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-numeros { list-style: none; display: grid; gap: var(--c-gap); margin: var(--c-gap) 0 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-numeros li { display: grid; gap: 8px; align-content: space-between; min-height: 170px; padding: clamp(22px, 2.6vw, 36px); border-radius: var(--r-card); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-numeros strong { font: 700 clamp(44px, 5vw, 72px)/.95 var(--f-display); font-stretch: 86%; letter-spacing: .03em; font-variant-numeric: tabular-nums; text-transform: uppercase;}
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-numeros span { font-size: 16px; }
@media (max-width: 700px) {
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-numeros { grid-template-columns: minmax(0, 1fr); }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-numeros li { min-height: 0; grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
}

/* Cores reaproveitadas */
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-verde { background: var(--c-verde); }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-azul { background: var(--c-azul); }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-coral { background: var(--c-coral); }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-sol { background: var(--c-sol); }

/* Blocos creme com grade fina; dentro, frames do Figma */
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-bloco {
  position: relative; margin-top: var(--c-gap); padding: clamp(56px, 6vw, 96px) clamp(18px, 5vw, 88px) clamp(36px, 5vw, 80px); border-radius: var(--r-bloco); color: var(--c-tinta); scroll-margin-top: 90px;
  background-color: var(--c-creme); background-image: linear-gradient(rgba(34,31,32,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,31,32,.05) 1px, transparent 1px); background-size: 40px 40px; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-frame { padding: clamp(24px, 3.6vw, 52px); background: rgba(255,253,249,.72); }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-frame h2 { margin: 0 0 18px; font-family: var(--f-display); font-weight: 700; font-stretch: 88%; font-size: clamp(28px, 3vw, 38px); line-height: 1.04; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-frame p { max-width: 68ch; font-size: 17.5px; line-height: 1.65; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-frame a { color: var(--c-tinta); text-decoration: underline; text-decoration-color: var(--c-coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Bio: post-its e polaroid */
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-quadro { display: grid; gap: 28px; margin-top: 34px; align-items: center; }
@media (min-width: 900px) { html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-quadro { grid-template-columns: minmax(0, 1fr) 280px; } }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-postits { display: grid; gap: 18px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-postit {
  position: relative; max-width: 440px !important; margin: 0; padding: 26px 24px 22px; border-radius: 3px; background: #FBE27A; font-size: 16.5px !important; line-height: 1.55 !important;
  box-shadow: 0 16px 22px -16px rgba(34,31,32,.5); transform: rotate(-1.4deg); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-postit::before { content: ""; position: absolute; left: 50%; top: -9px; width: 78px; height: 20px; margin-left: -39px; background: rgba(246,242,236,.8); transform: rotate(-3deg); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-postit-b { justify-self: end; margin-right: 6%; transform: rotate(1.6deg); background: var(--c-sol); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-polaroid { justify-self: center; width: 250px; margin: 0; padding: 12px 12px 8px; background: #fff; box-shadow: 0 22px 36px -18px rgba(34,31,32,.55); transform: rotate(3deg); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-polaroid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-polaroid figcaption { padding: 8px 4px 2px; font: 600 26px/1 var(--f-mao); text-align: center; color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/sobre/"] [data-sb-arrasta] { touch-action: pan-y; }
html.ks-cool.ks-sb-pode-arrastar[data-ks-pagina="/sobre/"] [data-sb-arrasta] { cursor: grab; transition: translate .5s cubic-bezier(.3,1.6,.5,1); }
html.ks-cool.ks-sb-pode-arrastar[data-ks-pagina="/sobre/"] [data-sb-arrasta].ks-sb-arrastando { cursor: grabbing; transition: none; z-index: 3; }
@media (max-width: 899px) {
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-postit, html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-postit-b { justify-self: stretch; margin-right: 0; transform: rotate(-.6deg); }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-postit-b { transform: rotate(.6deg); }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-polaroid { width: 210px; transform: rotate(2deg); }
}

/* Cursores "multiplayer" (só computador) */
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor { position: absolute; z-index: 2; display: none; align-items: flex-start; gap: 2px; pointer-events: none; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-ponteiro { width: 18px; height: 20px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor b { margin-top: 14px; padding: 5px 11px; border-radius: 4px 14px 14px 14px; color: var(--c-tinta); font: 500 12.5px/1.2 var(--f-mono); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor-a { right: 6%; top: 62px; color: var(--c-coral); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor-a b { background: var(--c-coral); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor-b { right: -26px; bottom: 90px; color: var(--c-azul); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor-b b { background: var(--c-azul); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor-c { right: 0; top: 18px; color: var(--c-verde); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor-c b { background: var(--c-verde); }
@media (min-width: 1000px) {
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor { display: inline-flex; animation: ks-sb-vaga 7s ease-in-out infinite alternate; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor-b { animation-duration: 9s; animation-delay: -3s; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor-c { animation-duration: 8s; animation-delay: -5s; }
}
@keyframes ks-sb-vaga { 0% { translate: 0 0; } 35% { translate: -26px 14px; } 70% { translate: 12px 30px; } 100% { translate: -8px -6px; } }

/* Trabalho: pilares do método em abas */
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-topo { display: grid; gap: 12px 40px; align-items: end; margin-bottom: 28px; }
@media (min-width: 900px) { html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-topo p { text-align: right; } }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-topo h2 { margin: 0; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-topo p { margin: 0; color: var(--c-dim); font-size: 16px !important; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-aba {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border: 0; border-radius: 999px; background: var(--c-areia) !important; color: var(--c-tinta); font: 600 15px/1.2 var(--f-texto); cursor: pointer; transition: background-color .2s, transform .2s; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-aba:hover { transform: translateY(-2px); }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-branco); font: 500 12.5px/1 var(--f-mono); }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-aba[aria-selected="true"].ks-sb-verde { background: var(--c-verde) !important; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-aba[aria-selected="true"].ks-sb-azul { background: var(--c-azul) !important; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-aba[aria-selected="true"].ks-sb-coral { background: var(--c-coral) !important; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-aba[aria-selected="true"].ks-sb-sol { background: var(--c-sol) !important; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-aba[aria-selected="true"] .ks-sb-n { background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar { display: grid; gap: 20px 32px; align-items: center; }
@media (min-width: 900px) {
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar.ks-sb-direita .ks-sb-pilar-card { order: 2; }
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar.ks-sb-direita .ks-sb-nota { justify-self: end; flex-direction: row-reverse; }
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar.ks-sb-direita .ks-sb-risco { transform: scaleX(-1); }
}
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar:not([hidden]) { animation: ks-sb-entra .45s cubic-bezier(.2,.8,.2,1); }
@keyframes ks-sb-entra { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar-card { padding: clamp(26px, 3.4vw, 46px); border-radius: 36px; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar-n { margin: 0 0 14px; font: 500 13px/1.2 var(--f-mono) !important; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar-card h3 { margin: 0 0 14px; font: 700 clamp(26px, 2.6vw, 34px)/1.04 var(--f-display); font-stretch: 88%; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar-card h3 span { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -0.01em; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar-card p:last-child { margin: 0; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-nota { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 clamp(26px, 2.4vw, 32px)/1.1 var(--f-mao) !important; color: var(--c-tinta); }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-risco { flex: none; width: 96px; height: 34px; color: var(--c-tinta); }
@media (max-width: 899px) { html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-risco { width: 60px; transform: rotate(-20deg); } }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-mais { margin: 28px 0 0; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-mais a { font-weight: 600; }

/* História: linha das frentes */
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-linha { list-style: none; margin: 8px 0 0; padding: 0; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-linha > li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 30px 0; border-top: 1px solid var(--c-linha); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-linha > li:first-child { border-top: 0; padding-top: 10px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-logo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--c-areia); font: 500 15px/1 var(--f-mono); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-logo img { width: 46px; height: auto; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-linha h3 { margin: 4px 0 8px; font: 700 clamp(24px, 2.4vw, 30px)/1.05 var(--f-display); font-stretch: 88%; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-linha p { margin: 0 0 14px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-pilula {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 5px 12px; border: 1.5px solid var(--c-tinta); border-radius: 8px; background: var(--c-verde); font: 500 13px/1.2 var(--f-mono) !important; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-pilula span { font-size: 10px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-pilula-azul { background: var(--c-azul); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-pilula-sol { background: var(--c-sol); }

/* Vamos conversar: forma orgânica, comentário do Figma e banner listrado */
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-conversa { margin-top: var(--c-gap); padding: clamp(40px, 6vw, 96px) clamp(18px, 4vw, 64px) clamp(28px, 3vw, 48px); border-radius: var(--r-bloco); background: var(--c-noite-2); scroll-margin-top: 90px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-conversa-topo { display: grid; gap: 24px 48px; align-items: center; margin-bottom: clamp(48px, 6vw, 88px); }
@media (min-width: 900px) { html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-conversa-topo { grid-template-columns: 300px minmax(0, 1fr); } }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-blob { width: min(300px, 62vw); height: auto; justify-self: center; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-blob path { fill: var(--c-verde); stroke: var(--c-claro); stroke-width: 1.5; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) { html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-blob path { animation: ks-sb-gira 30s linear infinite; } }
@keyframes ks-sb-gira { to { rotate: 360deg; } }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-pixel { font-family: 'Pixelify Sans', var(--f-display); font-weight: 700; font-stretch: normal; letter-spacing: 0; text-transform: uppercase;}
html.ks-cool[data-ks-pagina="/sobre/"] h2.ks-sb-pixel { margin: 0 0 16px; color: var(--c-claro); font-size: clamp(40px, 4.6vw, 58px); line-height: 1; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-conversa-topo p { max-width: 52ch; margin: 0; color: var(--c-claro-dim); font-size: 17.5px; line-height: 1.6; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-banner {
  position: relative; display: grid; place-items: center; min-height: clamp(260px, 30vw, 400px); padding: 120px 16px 40px; border-radius: var(--r-bloco);
  background: repeating-linear-gradient(118deg, var(--c-coral) 0 clamp(60px, 8vw, 120px), var(--c-sol) clamp(60px, 8vw, 120px) clamp(120px, 16vw, 240px)); }
@media (min-width: 900px) { html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-banner { padding-top: 40px; } }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-banner-btn {
  display: inline-flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); padding: 10px; border: 3px solid var(--c-tinta); background: var(--c-azul); color: var(--c-tinta); text-decoration: none; transition: translate .2s ease, box-shadow .2s ease; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-banner-btn .ks-sb-pixel { font-size: clamp(28px, 4.4vw, 58px); line-height: 1; white-space: nowrap; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-chev { display: grid; place-items: center; width: clamp(40px, 4.6vw, 62px); aspect-ratio: 1; background: var(--c-tinta); color: var(--c-sol); font: 700 clamp(22px, 2.6vw, 34px)/1 var(--f-texto); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-banner-btn:hover { translate: -4px -4px; box-shadow: 8px 8px 0 var(--c-tinta); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-banner-btn:hover .ks-sb-chev:last-child { animation: ks-sb-empurra .6s ease-in-out infinite alternate; }
@keyframes ks-sb-empurra { to { translate: 4px 0; } }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-comentario {
  position: absolute; left: clamp(14px, 3vw, 48px); top: clamp(-40px, -3vw, -24px); width: min(340px, calc(100% - 28px)); padding: 14px 16px 16px; border-radius: 18px; background: #fff; color: var(--c-tinta); box-shadow: 0 24px 40px -20px rgba(0,0,0,.55); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-comentario-t { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--c-linha); color: var(--c-dim); font-size: 13.5px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-comentario-c { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-comentario-c img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-comentario-c strong { font-size: 14.5px; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-comentario-c p { margin: 3px 0 10px; font-size: 14.5px; line-height: 1.45; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-reacao { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1.5px solid var(--c-azul); border-radius: 8px; background: #EAF1FE; font: 500 12.5px/1 var(--f-mono); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-reacao svg { width: 12px; height: 12px; color: #3E6FD8; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-redes { margin-top: clamp(32px, 4vw, 56px); text-align: center; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-redes .ks-s-olho { color: var(--c-claro-dim); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-redes ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; padding: 0; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-redes ul a { display: inline-block; padding: 11px 18px; border-radius: 999px; background: var(--c-creme); color: var(--c-tinta); font-size: 15px; font-weight: 500; transition: background-color .2s; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-redes ul li:nth-child(4n+1) a:hover { background: var(--c-verde); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-redes ul li:nth-child(4n+2) a:hover { background: var(--c-azul); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-redes ul li:nth-child(4n+3) a:hover { background: var(--c-coral); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-redes ul li:nth-child(4n+4) a:hover { background: var(--c-sol); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-redes > p:last-child { margin: 0; color: var(--c-claro-dim); }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-redes > p:last-child a { color: var(--c-claro); text-decoration: underline; text-decoration-color: var(--c-coral); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-cursor, html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-blob path, html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-pilar { animation: none !important; }
}

/* Abas: sem JS todos os pilares aparecem; com JS, um por vez */
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar[hidden] { display: none; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-paineis { display: grid; gap: 28px; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]):not(.ks-sb-abas-on) .ks-sb-abas { display: none; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-regua { filter: invert(1); opacity: .35; border-bottom-color: #000; }
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-blob { overflow: visible; padding: 18px; }

@media (max-width: 899px) {
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-bloco { padding: 48px 12px 22px; }
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-frame { padding: 22px 16px; }
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-frame p { font-size: 16.5px; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-linha > li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-logo { width: 44px; height: 44px; border-radius: 14px; font-size: 12px; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-logo img { width: 34px; }
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar-card { padding: 24px 20px; border-radius: 28px; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-banner { display: flex; flex-direction: column; align-items: center; gap: 22px; min-height: 0; padding: 18px 14px 34px; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-comentario { position: relative; left: auto; top: auto; align-self: stretch; width: auto; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-banner-btn { max-width: 100%; gap: 10px; padding: 8px; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-banner-btn .ks-sb-pixel { font-size: clamp(20px, 6.4vw, 30px); }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-chev { width: 34px; font-size: 18px; }
  html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-conversa { padding: 40px 14px 28px; }
}

/* ---- 35-metodo-ilus.css ---- */
/* ================= Método: ilustração de cada pilar (home e /sobre/) =================
   Mini interfaces em HTML/CSS/SVG no lugar do espaço vazio ao lado do cartão; animam ao abrir a aba
   (o painel sai de display:none e as animações recomeçam). Sem movimento com prefers-reduced-motion. */
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-lado { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar.ks-sb-direita .ks-sb-lado .ks-sb-nota { align-self: flex-end; }
@media (min-width: 900px) { html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar { align-items: center; } }
@media (max-width: 899px) {
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-lado { display: contents; }
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-lado .ki { order: -1; max-width: 380px; }
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-lado .ks-sb-nota { order: 2; }
}

html.ks-cool .ki { position: relative; width: 100%; max-width: 500px; margin-inline: auto; color: var(--c-tinta); font: 500 12.5px/1.3 var(--f-texto); text-transform: none; letter-spacing: 0; }
html.ks-cool .ki * { box-sizing: border-box; }
html.ks-cool .ki-janela { overflow: hidden; border: 1px solid var(--c-linha); border-radius: 18px; background: var(--c-branco); box-shadow: 0 18px 40px -26px rgba(34,31,32,.5); }
html.ks-cool .ki-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--c-linha); background: var(--c-areia); }
html.ks-cool .ki-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(34,31,32,.18); }
html.ks-cool .ki-barra b { margin-left: 8px; font-size: 12.5px; font-weight: 600; }

/* 01 Estratégia e copy: briefing sendo preenchido e headline reescrita */
html.ks-cool .ki-campos { display: grid; gap: 12px; margin: 0; padding: 18px 18px 8px; list-style: none; }
html.ks-cool .ki-campos li { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; padding: 0; font-size: 12.5px; }
html.ks-cool .ki-campos li::before { content: none !important; }
html.ks-cool .ki-campos span { color: var(--c-dim); }
html.ks-cool .ki-campos em { display: block; width: var(--w); height: 10px; border-radius: 99px; background: var(--c-verde); transform-origin: left; animation: ki-escreve .7s cubic-bezier(.2,.8,.2,1) both; }
html.ks-cool .ki-campos li:nth-child(2) em { animation-delay: .2s; }
html.ks-cool .ki-campos li:nth-child(3) em { animation-delay: .4s; }
html.ks-cool .ki-campos li:nth-child(4) em { animation-delay: .6s; }
html.ks-cool .ki-head { display: grid; gap: 4px; margin: 12px 18px 18px; padding: 14px 16px; border-radius: 14px; background: var(--c-creme); }
html.ks-cool .ki-head small { color: var(--c-dim); font-size: 11.5px; }
html.ks-cool .ki-head s { width: fit-content; color: var(--c-dim); font-size: 15px; font-weight: 600; text-decoration: none; background: linear-gradient(var(--c-coral), var(--c-coral)) left 56% / 0% 2.5px no-repeat; animation: ki-risca .5s 1s ease forwards; }
html.ks-cool .ki-head strong { width: fit-content; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; clip-path: inset(0 100% 0 0); animation: ki-digita 1.3s 1.5s steps(30) forwards; }

/* 02 Design e comportamento: frame do Figma, wireframe e o caminho do olhar até o botão */
html.ks-cool .ki-frame-nome { margin: 0 0 6px 2px !important; color: var(--c-dim); font-size: 12px !important; }
html.ks-cool .ki-frame { --fr: var(--c-azul); position: relative; aspect-ratio: 3 / 2; border: 1.5px solid var(--fr); background: var(--c-branco); }
html.ks-cool .ki-frame::after { content: ""; position: absolute; inset: -6px; pointer-events: none;
  background: linear-gradient(var(--c-branco), var(--c-branco)) left 1.5px top 1.5px / 8px 8px no-repeat, linear-gradient(var(--c-branco), var(--c-branco)) right 1.5px top 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--c-branco), var(--c-branco)) left 1.5px bottom 1.5px / 8px 8px no-repeat, linear-gradient(var(--c-branco), var(--c-branco)) right 1.5px bottom 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--fr), var(--fr)) left top / 11px 11px no-repeat, linear-gradient(var(--fr), var(--fr)) right top / 11px 11px no-repeat,
    linear-gradient(var(--fr), var(--fr)) left bottom / 11px 11px no-repeat, linear-gradient(var(--fr), var(--fr)) right bottom / 11px 11px no-repeat; }
html.ks-cool .ki-wf { position: absolute; display: block; border-radius: 4px; background: var(--c-areia); }
html.ks-cool .ki-wf-nav { top: 6%; right: 6%; width: 34%; height: 4%; border-radius: 99px; }
html.ks-cool .ki-wf-t1 { left: 10%; top: 17%; width: 68%; height: 8%; background: rgba(34,31,32,.82); }
html.ks-cool .ki-wf-t2 { left: 10%; top: 30%; width: 52%; height: 8%; background: rgba(34,31,32,.82); }
html.ks-cool .ki-wf-txt { left: 10%; top: 43%; width: 58%; height: 3.5%; }
html.ks-cool .ki-wf-btn { position: absolute; left: 10%; top: 51%; display: grid; place-items: center; width: 24%; height: 11%; border-radius: 99px; background: var(--c-coral); font-size: 11px; font-weight: 700; animation: ki-chama .6s 2.4s ease both; }
html.ks-cool .ki-wf-c1, html.ks-cool .ki-wf-c2, html.ks-cool .ki-wf-c3 { top: 72%; width: 25%; height: 18%; border-radius: 8px; }
html.ks-cool .ki-wf-c1 { left: 10%; } html.ks-cool .ki-wf-c2 { left: 37.5%; } html.ks-cool .ki-wf-c3 { left: 65%; }
html.ks-cool .ki-olhar { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
html.ks-cool .ki-olhar path { fill: none; stroke: var(--c-azul); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; animation: ki-traco 2.3s .2s ease-in-out forwards; }
html.ks-cool .ki-ponto { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--c-tinta); color: var(--c-claro); font: 500 11px/1 var(--f-dado); transform: scale(0); animation: ki-pop .35s var(--d) cubic-bezier(.2,.8,.2,1.4) forwards; }
html.ks-cool .ki-ponto-fim { background: var(--c-azul); color: var(--c-tinta); box-shadow: 0 0 0 4px rgba(143,178,245,.35); }

/* 03 Implementação online: checklist de publicação com selos que acendem */
html.ks-cool .ki-check { display: grid; gap: 2px; margin: 0; padding: 8px 10px 12px; list-style: none; }
html.ks-cool .ki-check li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 22px; align-items: center; gap: 10px; margin: 0; padding: 7px 8px; border-radius: 10px; font-size: 13px; font-weight: 600; animation: ki-entra .35s var(--d) both; }
html.ks-cool .ki-check li::before { content: none !important; }
html.ks-cool .ki-check li:nth-child(odd) { background: #FAF7F2; }
html.ks-cool .ki-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ks-cool .ki-check em { color: var(--c-dim); font: 400 11.5px/1.2 var(--f-dado); font-style: normal; white-space: nowrap; }
html.ks-cool .ki-ico { position: relative; width: 24px; height: 24px; border-radius: 7px; background: var(--c-areia); }
html.ks-cool .ki-ico::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid var(--c-tinta); }
html.ks-cool .ki-ico-ga::after { inset: 6px 7px; border: 0; border-radius: 0; background: linear-gradient(var(--c-tinta), var(--c-tinta)) left bottom / 3px 45% no-repeat, linear-gradient(var(--c-tinta), var(--c-tinta)) center bottom / 3px 75% no-repeat, linear-gradient(var(--c-tinta), var(--c-tinta)) right bottom / 3px 100% no-repeat; }
html.ks-cool .ki-ico-tag::after { inset: 7px; border-radius: 2px; transform: rotate(45deg); }
html.ks-cool .ki-ico-busca::after { inset: 6px 8px 8px 6px; }
html.ks-cool .ki-ico-vel::after { inset: 7px 6px 4px; border-radius: 12px 12px 0 0; border-bottom: 0; }
html.ks-cool .ki-ico-msg::after { inset: 7px 6px 8px; border-radius: 6px 6px 6px 1px; }
html.ks-cool .ki-ico-pixel { background: var(--c-azul); } html.ks-cool .ki-ico-ga { background: var(--c-sol); } html.ks-cool .ki-ico-tag { background: var(--c-agua); }
html.ks-cool .ki-ico-busca { background: var(--c-lilas); } html.ks-cool .ki-ico-vel { background: var(--c-verde); } html.ks-cool .ki-ico-msg { background: var(--c-coral); }
html.ks-cool .ki-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-areia); color: transparent; animation: ki-acende .3s calc(var(--d) + .3s) forwards; }
html.ks-cool .ki-ok svg { width: 13px; height: 13px; }
html.ks-cool .ki-medidor { display: block; width: 64px; height: 8px; overflow: hidden; border-radius: 99px; background: var(--c-areia); }
html.ks-cool .ki-medidor i { display: block; width: 88%; height: 100%; background: var(--c-verde); transform-origin: left; animation: ki-escreve .8s var(--d) both; }

/* 04 Otimização e dados: mapa de calor, taxa de conversão e teste A/B */
html.ks-cool .ki-4 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; align-items: start; }
html.ks-cool .ki-mini { position: relative; height: 210px; overflow: hidden; }
html.ks-cool .ki-mini > i { position: absolute; left: 12%; display: block; height: 11px; width: var(--w); border-radius: 4px; background: rgba(34,31,32,.82); }
html.ks-cool .ki-mini > i:nth-child(1) { top: 14%; } html.ks-cool .ki-mini > i:nth-child(2) { top: 25%; }
html.ks-cool .ki-mini > i.ki-fino { top: 38%; height: 6px; background: var(--c-areia); }
html.ks-cool .ki-mini .ki-wf-btn { left: 12%; top: 50%; width: auto; height: auto; padding: 8px 14px; animation: none; }
html.ks-cool .ki-calor { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(226,72,44,.9) 0%, rgba(255,210,63,.75) 38%, rgba(173,223,130,.45) 60%, rgba(173,223,130,0) 72%); mix-blend-mode: multiply; animation: ki-calor 2.6s ease-in-out infinite alternate; }
html.ks-cool .ki-calor-a { left: 2%; top: 32%; width: 140px; height: 120px; }
html.ks-cool .ki-calor-b { left: 4%; top: 0; width: 170px; height: 90px; animation-delay: -1.2s; opacity: .8; }
html.ks-cool .ki-calor-c { right: 4%; top: 58%; width: 70px; height: 60px; animation-delay: -.6s; opacity: .55; }
html.ks-cool .ki-dados { display: grid; gap: 12px; }
html.ks-cool .ki-taxa, html.ks-cool .ki-ab { padding: 14px 16px; }
html.ks-cool .ki-dados small { display: block; margin-bottom: 10px; color: var(--c-dim); font-size: 12px; }
html.ks-cool .ki-barra-taxa, html.ks-cool .ki-barra-ab { display: block; overflow: hidden; border-radius: 99px; background: var(--c-areia); }
html.ks-cool .ki-barra-taxa { height: 12px; }
html.ks-cool .ki-barra-taxa i { display: block; width: 62%; height: 100%; background: var(--c-azul); transform-origin: left; animation: ki-escreve 1.2s .3s cubic-bezier(.2,.8,.2,1) both; }
html.ks-cool .ki-ab p { display: grid; grid-template-columns: 60px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin: 0 0 8px !important; font-size: 12.5px !important; font-weight: 600; line-height: 1.2 !important; }
html.ks-cool .ki-ab p:last-child { margin-bottom: 0 !important; }
html.ks-cool .ki-barra-ab { height: 10px; }
html.ks-cool .ki-barra-ab i { display: block; width: var(--w); height: 100%; background: rgba(34,31,32,.3); transform-origin: left; animation: ki-escreve 1s .6s cubic-bezier(.2,.8,.2,1) both; }
html.ks-cool .ki-vence .ki-barra-ab i { background: var(--c-sol); }
html.ks-cool .ki-vence b { padding: 3px 0; border-radius: 99px; background: var(--c-tinta); color: var(--c-claro); font-size: 11px; text-align: center; opacity: 0; animation: ki-aparece .3s 1.6s forwards; }
@media (max-width: 560px) {
  html.ks-cool .ki-4 { grid-template-columns: minmax(0, 1fr); }
  html.ks-cool .ki-mini { height: 150px; }
  html.ks-cool .ki-calor-a { width: 110px; height: 90px; } html.ks-cool .ki-calor-b { width: 140px; height: 70px; }
}

@keyframes ki-escreve { from { transform: scaleX(0); } }
@keyframes ki-risca { to { background-size: 100% 2.5px; } }
@keyframes ki-digita { to { clip-path: inset(0 0 0 0); } }
@keyframes ki-traco { to { stroke-dashoffset: 0; } }
@keyframes ki-pop { to { transform: scale(1); } }
@keyframes ki-chama { 50% { transform: scale(1.12); } }
@keyframes ki-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes ki-acende { to { background: var(--c-verde); color: var(--c-tinta); } }
@keyframes ki-aparece { to { opacity: 1; } }
@keyframes ki-calor { from { transform: scale(.86); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  html.ks-cool .ki *, html.ks-cool .ki *::before, html.ks-cool .ki *::after { animation: none !important; }
  html.ks-cool .ki-head s { background-size: 100% 2.5px; }
  html.ks-cool .ki-head strong { clip-path: none; }
  html.ks-cool .ki-olhar path { stroke-dashoffset: 0; }
  html.ks-cool .ki-ponto { transform: none; }
  html.ks-cool .ki-ok { background: var(--c-verde); color: var(--c-tinta); }
  html.ks-cool .ki-vence b { opacity: 1; }
}
/* A ilustração nunca alarga a coluna (o checklist tem textos sem quebra) */
html.ks-cool .ki, html.ks-cool .ki-janela, html.ks-cool .ks-sb-lado { min-width: 0; }
@media (max-width: 899px) { html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { html.ks-cool .ki-check li { gap: 8px; padding: 7px 6px; font-size: 12.5px; } html.ks-cool .ki-check em { font-size: 11px; } }
@media (max-width: 560px) {
  html.ks-cool:is([data-ks-pagina="/sobre/"], [data-ks-pagina="/"]) .ks-sb-pilar-card h3 { font-size: 22px !important; overflow-wrap: anywhere; }
  html.ks-cool .ki-nome { white-space: normal; line-height: 1.2; }
}

/* ---- 40-links.css ---- */
/* ================= /links/ (link da bio): grade bento + seções em blocos ================= */
html.ks-cool[data-ks-pagina="/links/"] body.ks-tela { background: var(--c-noite); }
html.ks-cool[data-ks-pagina="/links/"] main#ks-conteudo.ks-bio {
  max-width: 1440px; margin: 0 auto; padding: var(--c-gap) var(--c-gap) 24px; border-radius: 0; background: transparent; color: var(--c-claro); overflow: visible; }

/* ---------- Grade bento ---------- */
html.ks-cool .ks-site .ks-bio .ks-bento {
  display: grid; gap: var(--c-gap); margin: 0 0 var(--c-gap); padding: 0; border-radius: 0; background: transparent;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "oi oi"
    "foto num"
    "foto redes"
    "blk blk"
    "disp disp"
    "ctr apr"
    "proj proj"
    "blog blog"; }
html.ks-cool .ks-b-foto { grid-area: foto; }
html.ks-cool .ks-b-oi { grid-area: oi; }
html.ks-cool .ks-b-num { grid-area: num; }
html.ks-cool .ks-b-redes { grid-area: redes; }
html.ks-cool .ks-bento .ks-b-black { grid-area: blk; }
html.ks-cool .ks-b-proj { grid-area: proj; }
html.ks-cool .ks-b-disp { grid-area: disp; }
html.ks-cool .ks-b-contratar { grid-area: ctr; }
html.ks-cool .ks-b-aprender { grid-area: apr; }
html.ks-cool .ks-b-blog { grid-area: blog; }

html.ks-cool .ks-b {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; overflow: hidden;
  border-radius: var(--r-card); background: var(--c-creme); color: var(--c-tinta); text-decoration: none; }
html.ks-cool a.ks-b, html.ks-cool .ks-bento .ks-b-black {
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .2s ease; }
@media (hover: hover) {
  html.ks-cool a.ks-b:hover, html.ks-cool .ks-bento .ks-b-black:hover { transform: translateY(-4px); }
}
html.ks-cool a.ks-b:focus-visible { outline: 3px solid var(--c-sol); outline-offset: 3px; }
html.ks-cool .ks-b-rot { display: block; margin: 0 0 auto; font: 500 13px/1.3 var(--f-mono); color: inherit; opacity: .8; }
html.ks-cool .ks-b-rot::before { content: none; opacity: .55; }
html.ks-cool .ks-b strong { font-family: var(--f-display); font-stretch: 90%; font-weight: 700; letter-spacing: .03em; line-height: 1.02; text-transform: uppercase;}
html.ks-cool .ks-b-ir { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-tinta); color: var(--c-claro); transition: transform .3s ease; }
html.ks-cool .ks-b-ir svg { width: 18px; height: 18px; }
html.ks-cool a.ks-b:hover .ks-b-ir { transform: rotate(45deg); }
html.ks-cool a.ks-b-contratar:hover .ks-b-ir { transform: rotate(90deg); }

/* Foto */
html.ks-cool .ks-b-foto { padding: 8px; background: var(--c-creme); min-height: 250px; }
html.ks-cool .ks-b-foto img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); max-width: none; object-fit: cover; object-position: center 22%; border-radius: calc(var(--r-card) - 8px); }
html.ks-cool .ks-b-tag { position: absolute; left: 18px; bottom: 18px; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--c-creme); font: 500 12.5px/1.2 var(--f-mono); }
html.ks-cool .ks-b-foto .ks-perfil-btn { position: absolute; right: 18px; bottom: 18px; top: auto; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--c-coral); color: var(--c-tinta); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.ks-cool .ks-b-foto .ks-perfil-btn svg { width: 18px; height: 18px; }

/* Apresentação */
html.ks-cool .ks-b-oi { padding: 26px 22px 22px; background: var(--c-verde); }
html.ks-cool .ks-b-oi .ks-b-rot { margin-bottom: 16px; }
html.ks-cool .ks-site .ks-b-oi h1 { margin: 0; font-family: var(--f-display); font-stretch: 85%; font-weight: 700; font-size: clamp(44px, 12vw, 64px); line-height: .92; letter-spacing: .03em; color: var(--c-tinta); text-transform: uppercase;}
html.ks-cool .ks-b-oi .ks-posicionamento { max-width: 40ch; margin: 12px 0 16px; color: var(--c-tinta); font-size: 16.5px; line-height: 1.45; opacity: .86; }
html.ks-cool .ks-b-oi .ks-provas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
html.ks-cool .ks-b-oi .ks-prova { padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(34,31,32,.1); color: var(--c-tinta); font: 500 12.5px/1.2 var(--f-mono); }
html.ks-cool .ks-b-oi .ks-cta-linha { display: flex; gap: 8px; align-items: center; }
html.ks-cool .ks-b-oi .ks-cta-hero { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; background: var(--c-tinta); color: var(--c-claro); box-shadow: none; font: 600 15px/1.1 var(--f-texto); letter-spacing: -0.01em; text-transform: none; transition: background-color .2s; }
html.ks-cool .ks-b-oi .ks-cta-hero:hover { transform: none; box-shadow: none; background: #3A3536; }
html.ks-cool .ks-b-oi .ks-cta-seta { width: 50px; height: 50px; border: 0; background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-b-oi .ks-cta-seta:hover { background: var(--c-tinta); color: var(--c-claro); }

/* Contador */
html.ks-cool .ks-b-num { background: var(--c-azul); justify-content: space-between; min-height: 150px; }
html.ks-cool .ks-b-numero { font-variant-numeric: tabular-nums; margin: 14px 0 4px; font: 700 clamp(40px, 11vw, 56px)/1 var(--f-display); font-stretch: 85%; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .ks-b-digitos { display: inline-flex; align-items: flex-start; vertical-align: top; height: 1.04em; overflow: hidden; clip-path: inset(0); line-height: 1.04; }
html.ks-cool .ks-b-digitos > span { display: block; height: 1.04em; }
html.ks-cool .ks-b-col { display: block; height: 1.04em; overflow: hidden; clip-path: inset(0); }
html.ks-cool .ks-b-col > span { display: flex; flex-direction: column; transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
html.ks-cool .ks-b-col > span > span { display: block; height: 1.04em; text-align: center; }
html.ks-cool .ks-b-legenda-num { margin: 0; font-size: 14px; line-height: 1.3; }

/* Redes */
html.ks-cool .ks-b-redes { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-around; gap: 6px; padding: 14px; background: var(--c-creme); min-height: 92px; }
html.ks-cool .ks-b-rede { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-areia); color: var(--c-tinta); transition: background-color .2s, color .2s; }
html.ks-cool .ks-b-rede:hover { background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-b-rede svg { width: 22px; height: 22px; }

/* Black (destaque do momento) */
html.ks-cool .ks-bento .ks-b-black { margin: 0; padding: 22px; border: 0; border-radius: var(--r-card); background: var(--c-sol); color: var(--c-tinta); }
html.ks-cool .ks-bento .ks-b-black:hover, html.ks-cool .ks-bento .ks-b-black:focus-visible { border: 0; }
html.ks-cool .ks-bento .ks-black-card__selo { align-self: flex-start; padding: 6px 12px; background: var(--c-tinta); color: var(--c-sol); font: 500 12.5px/1.2 var(--f-mono); letter-spacing: 0; text-transform: none; }
html.ks-cool .ks-bento .ks-black-card__titulo { margin: auto 0 6px; padding-top: 18px; color: var(--c-tinta); font: 700 clamp(26px, 7vw, 34px)/1 var(--f-display); font-stretch: 88%; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .ks-bento .ks-black-card__texto { margin: 0 0 18px; color: var(--c-tinta); opacity: .82; font-size: 15.5px; }
html.ks-cool .ks-bento .ks-black-card__botao { margin-top: auto; padding: 15px 20px; background: var(--c-tinta); color: var(--c-sol); font: 600 15px/1.1 var(--f-texto); }

/* Projetos que trocam sozinhos */
html.ks-cool .ks-b-proj { padding: 8px; background: var(--c-creme); min-height: 340px; }
html.ks-cool .ks-b-proj > .ks-b-rot { position: absolute; left: 20px; top: 20px; z-index: 2; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--c-creme); opacity: 1; }
/* Trilho com rolagem lateral (11/11): arrasta com o dedo, com o trackpad e com o mouse; encaixa slide a slide */
html.ks-cool .ks-b-slides { position: relative; flex: 1; display: flex; min-height: 260px; border-radius: calc(var(--r-card) - 8px); overflow-x: auto; overflow-y: hidden; background: var(--c-areia);
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; cursor: grab; }
html.ks-cool .ks-b-slides::-webkit-scrollbar { display: none; }
html.ks-cool .ks-b-slides.ks-arrastando { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
html.ks-cool .ks-b-slides.ks-arrastando a { pointer-events: none; }
html.ks-cool .ks-b-slide { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
html.ks-cool .ks-b-slide img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; transition: transform 6s linear; -webkit-user-drag: none; user-select: none; }
html.ks-cool .ks-b-slide.ks-on img { transform: scale(1.04); }
html.ks-cool .ks-b-legenda { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-b-legenda span { font: 500 12.5px/1.2 var(--f-mono); color: var(--c-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ks-cool .ks-b-legenda strong { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ks-cool .ks-b-proj-base { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 8px 6px 12px; }
html.ks-cool .ks-b-pontos { display: flex; gap: 2px; }
html.ks-cool .ks-b-ponto { width: 16px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
html.ks-cool .ks-b-ponto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(34,31,32,.25); transition: width .3s ease, background-color .3s; }
html.ks-cool .ks-b-ponto.ks-on::before { width: 14px; border-radius: 99px; background: var(--c-tinta); }
html.ks-cool .ks-b-vertodos { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: var(--c-tinta); color: var(--c-claro); font-size: 14px; font-weight: 600; white-space: nowrap; }
html.ks-cool .ks-b-vertodos svg { width: 16px; height: 16px; }

/* Disponível (11/11): água no lugar do coral, para separar do amarelo de cima e do lilás de baixo; título Bootzy em
   maiúsculas com "projeto" na Ivy itálica; linha de apoio pequena; bolinha escura pulsando (a verde sumia no fundo água) */
html.ks-cool .ks-b-disp { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 20px 18px 18px 22px; background: var(--c-agua); color: var(--c-tinta); }
html.ks-cool .ks-b-disp .ks-b-rot { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; flex-basis: 100%; opacity: 1; }
html.ks-cool .ks-b-disp .ks-b-rot::before { display: none; }
html.ks-cool .ks-b-disp .ks-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--c-tinta); box-shadow: 0 0 0 4px rgba(34,31,32,.16); animation: ks-pulso 2.2s ease-in-out infinite; }
html.ks-cool .ks-site .ks-b-disp strong { flex-basis: 100%; min-width: 0; font-size: clamp(22px, 6.2vw, 28px); line-height: 1.04; letter-spacing: .02em; text-transform: uppercase; }
html.ks-cool .ks-site .ks-b-disp strong em { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-stretch: normal; text-transform: none; letter-spacing: -0.01em; font-size: 1.14em; }
html.ks-cool .ks-b-apoio { flex: 1 1 22ch; max-width: 46ch; font-size: 14.5px; line-height: 1.4; color: var(--c-tinta); opacity: .82; }
html.ks-cool .ks-b-pilula { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px; background: var(--c-tinta); color: var(--c-claro); font-size: 15px; font-weight: 600; white-space: nowrap; }
html.ks-cool .ks-b-pilula svg { width: 16px; height: 16px; transition: transform .3s; }
html.ks-cool a.ks-b-disp:hover .ks-b-pilula svg { transform: rotate(45deg); }
@keyframes ks-pulso { 50% { box-shadow: 0 0 0 8px rgba(34,31,32,0); } }

/* Portas e blog */
html.ks-cool .ks-b-porta, html.ks-cool .ks-b-blog { min-height: 170px; padding: 20px; aspect-ratio: auto; justify-content: flex-start; }
html.ks-cool .ks-b-porta .ks-b-rot, html.ks-cool .ks-b-blog .ks-b-rot { padding-right: 40px; }
html.ks-cool .ks-b-porta strong, html.ks-cool .ks-b-blog strong { margin-top: 26px; padding-right: 12px; font-size: clamp(21px, 5.6vw, 26px); }
html.ks-cool .ks-b-txt { margin-top: 6px; font-size: 14px; line-height: 1.35; opacity: .8; }
/* Portas (11/11): altura do conteúdo, título menor e botão redondo escuro com seta embaixo à direita, como nos Cursos */
html.ks-cool .ks-b-porta { min-height: 0; padding-bottom: 18px; }
html.ks-cool .ks-b-porta .ks-b-rot { padding-right: 0; }
html.ks-cool .ks-site .ks-b-porta strong { margin-top: 18px; padding-right: 0; font-size: clamp(19px, 5vw, 24px); line-height: 1.04; }
html.ks-cool .ks-b-porta .ks-b-txt { padding-right: 46px; }
html.ks-cool .ks-b-porta .ks-b-ir { top: auto; bottom: 14px; right: 14px; width: 38px; height: 38px; }
html.ks-cool a.ks-b-contratar:hover .ks-b-ir { transform: rotate(45deg); }
html.ks-cool .ks-b-contratar { background: var(--c-sol); }
html.ks-cool .ks-b-aprender { background: var(--c-lilas); }
html.ks-cool .ks-b-blog { background: var(--c-creme); min-height: 120px; }
html.ks-cool .ks-b-blog strong { max-width: 18ch; }

/* Celular estreito: cantos e números um pouco menores */
@media (max-width: 380px) {
  html.ks-cool .ks-b { padding: 18px; }
  html.ks-cool .ks-b-ir { width: 34px; height: 34px; right: 12px; top: 12px; }
}

/* ---------- Tablet e computador: bento numa tela ---------- */
@media (min-width: 760px) {
  html.ks-cool .ks-site .ks-bio .ks-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "oi oi foto foto"
      "num redes foto foto"
      "blk blk proj proj"
      "disp disp proj proj"
      "ctr apr blog blog"; }
}
/* Tablet (760 a 1099): nome e contador cabem nos blocos (antes passavam da borda) */
@media (min-width: 760px) and (max-width: 1099px) {
  html.ks-cool .ks-site .ks-b-oi h1 { font-size: clamp(40px, 6.2vw, 56px); }
  html.ks-cool .ks-b-numero { font-size: clamp(32px, 4.6vw, 44px); }
}
@media (min-width: 1100px) {
  html.ks-cool[data-ks-pagina="/links/"] main#ks-conteudo.ks-bio { padding-top: var(--c-gap); }
  html.ks-cool .ks-site .ks-bio .ks-bento {
    min-height: calc(100vh - 2 * var(--c-gap));
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "foto foto oi   oi   oi   num"
      "foto foto blk  blk  proj proj"
      "ctr  apr  disp disp blog redes"; }
  html.ks-cool .ks-b { padding: 24px; }
  html.ks-cool .ks-b-foto, html.ks-cool .ks-b-proj { padding: 8px; }
  html.ks-cool .ks-b-oi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: end; column-gap: 16px; padding-top: 52px; }
  html.ks-cool .ks-b-oi .ks-b-rot { position: absolute; left: 24px; top: 22px; margin: 0; }
  html.ks-cool .ks-b-oi :is(h1, .ks-posicionamento) { grid-column: 1 / -1; }
  html.ks-cool .ks-site .ks-b-oi h1 { font-size: clamp(46px, 4.2vw, 64px); }
  html.ks-cool .ks-b-oi .ks-posicionamento { margin: 8px 0 16px; font-size: 16px; }
  html.ks-cool .ks-b-oi .ks-provas { align-self: center; margin: 0; }
  html.ks-cool .ks-b-oi .ks-cta-linha { align-self: center; }
  html.ks-cool .ks-b-num { min-height: 0; }
  html.ks-cool .ks-b-numero { font-size: clamp(48px, 4.4vw, 64px); }
  html.ks-cool .ks-b-redes { min-height: 0; justify-content: center; gap: 2px; }
  html.ks-cool .ks-b-rede { width: 44px; height: 44px; }
  html.ks-cool .ks-b-proj { min-height: 0; }
  html.ks-cool .ks-b-slides { min-height: 0; }
  html.ks-cool .ks-site .ks-b-porta strong { margin-top: 22px; font-size: clamp(20px, 1.6vw, 24px); }
  html.ks-cool .ks-b-porta .ks-b-txt { margin-top: 8px; font-size: 14.5px; }
  html.ks-cool .ks-b-blog strong { margin-top: 18px; font-size: 20px; }
  html.ks-cool .ks-b-blog .ks-b-ir { width: 34px; height: 34px; right: 14px; top: 14px; }
  html.ks-cool .ks-site .ks-b-disp strong { font-size: 24px; }
  html.ks-cool .ks-bento .ks-black-card__titulo { font-size: clamp(28px, 2.4vw, 38px); }
}

/* ---------- Resto da página: blocos sobre o fundo escuro ---------- */
html.ks-cool .ks-bio > section:not(.ks-bento), html.ks-cool .ks-bio > .ks-bio-rodape {
  margin: 0 0 var(--c-gap); padding: clamp(24px, 4vw, 48px) clamp(18px, 3vw, 40px); border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-bio > section:not(.ks-portfolio):not(.ks-bento) { overflow: hidden; }
html.ks-cool .ks-site .ks-bio h2 { font-family: var(--f-display); font-stretch: 88%; font-weight: 700; font-size: clamp(32px, 4vw, 48px); letter-spacing: .03em; color: var(--c-tinta); text-transform: uppercase;}
html.ks-cool .ks-bio .ks-secao-sub { color: var(--c-dim); }
html.ks-cool .ks-bio .ks-secao-topo h2::before { content: none; font: 500 14px/1 var(--f-mono); letter-spacing: 0; vertical-align: middle; opacity: .55; }
/* landing pages passando */
html.ks-cool .ks-bio > section[aria-label]:not(.ks-bento) { padding-left: 0; padding-right: 0; background: var(--c-noite-2); color: var(--c-claro); }
html.ks-cool .ks-bio > section[aria-label]:not(.ks-bento) .ks-secao-sub { padding: 0 clamp(18px, 3vw, 40px); color: var(--c-claro-dim); font-family: var(--f-mono); font-size: 14px; }
html.ks-cool .ks-bio .ks-lps { margin: 0; padding: 8px 0 0; }
html.ks-cool .ks-bio .ks-lps img { border-radius: 22px; box-shadow: none; height: clamp(280px, 52vh, 440px); }
html.ks-cool .ks-bio .ks-lp-item span { background: var(--c-creme); color: var(--c-tinta); font-family: var(--f-mono); font-weight: 500; }
html.ks-cool .ks-site .ks-ir-portfolio { margin: 0 0 var(--c-gap); padding: 18px 18px 18px 26px; border-radius: 999px; background: var(--c-creme); color: var(--c-tinta); box-shadow: none; }
html.ks-cool .ks-site .ks-ir-portfolio span { font-family: var(--f-texto); font-stretch: 90%; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
html.ks-cool .ks-site .ks-ir-portfolio svg { background: var(--c-tinta); color: var(--c-claro); }
/* serviços: blocos de cor no lugar das fotos */
html.ks-cool .ks-bio .ks-lista-cards { gap: 8px; }
html.ks-cool .ks-bio .ks-card, html.ks-cool .ks-bio .ks-card.ks-card-fundo { border: 0; border-radius: 26px; background: var(--c-verde); color: var(--c-tinta); box-shadow: none; }
html.ks-cool .ks-bio .ks-card-fundo::before, html.ks-cool .ks-bio .ks-card-fundo::after { display: none; }
html.ks-cool .ks-bio .ks-lista-cards > .ks-card:nth-child(4n+2) { background: var(--c-azul); }
html.ks-cool .ks-bio .ks-lista-cards > .ks-card:nth-child(4n+3) { background: var(--c-coral); }
html.ks-cool .ks-bio .ks-lista-cards > .ks-card:nth-child(4n+4) { background: var(--c-sol); }
html.ks-cool .ks-bio .ks-card h3 { font-family: var(--f-display); font-stretch: 90%; font-weight: 700; color: var(--c-tinta); text-transform: uppercase;}
html.ks-cool .ks-bio .ks-card p { color: var(--c-tinta); opacity: .8; }
html.ks-cool .ks-bio .ks-card .ks-icone { background: rgba(34,31,32,.1); color: var(--c-tinta); }
html.ks-cool .ks-bio .ks-chip-ir, html.ks-cool .ks-bio .ks-card .ks-chip-ir { border: 0; border-radius: 50%; background: var(--c-tinta); color: var(--c-claro); backdrop-filter: none; -webkit-backdrop-filter: none; }
html.ks-cool .ks-bio .ks-ver-todos { color: var(--c-tinta); font-weight: 600; }
html.ks-cool .ks-bio .ks-icon-btn { border: 0; border-radius: 50%; background: var(--c-tinta); color: var(--c-claro); }
/* cursos e posts */
html.ks-cool .ks-bio .ks-curso .ks-capa, html.ks-cool .ks-bio .ks-bio-post .ks-img { border-radius: 26px; box-shadow: none; }
html.ks-cool .ks-bio .ks-curso h3, html.ks-cool .ks-bio .ks-bio-post h3 { font-family: var(--f-display); font-stretch: 90%; font-weight: 700; color: var(--c-tinta); text-transform: uppercase;}
html.ks-cool .ks-bio .ks-curso p, html.ks-cool .ks-bio .ks-bio-post .ks-data { color: var(--c-dim); }
html.ks-cool .ks-bio .ks-curso .ks-ir { border-radius: 50%; background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-bio .ks-selo { background: var(--c-sol); color: var(--c-tinta); font: 500 12.5px/1.2 var(--f-mono); }
html.ks-cool .ks-site .ks-capa-selo { background: var(--c-sol); font-family: var(--f-mono); font-weight: 500; }
html.ks-cool .ks-bio .ks-bio-post { padding: 8px 8px 16px; border: 0; border-radius: 30px; background: var(--c-areia); box-shadow: none; }
html.ks-cool .ks-bio .ks-bio-post .ks-img { border-radius: 22px; }
/* redes */
html.ks-cool .ks-bio .ks-redes { gap: 8px; }
html.ks-cool .ks-bio .ks-rede { border: 0; border-radius: 999px; padding: 14px 18px; background: var(--c-areia); color: var(--c-tinta); box-shadow: none; }
html.ks-cool .ks-bio .ks-rede svg { color: var(--c-tinta); }
html.ks-cool .ks-bio .ks-rede span { color: var(--c-dim); }
html.ks-cool .ks-bio .ks-rede:hover { background: var(--c-verde); transform: none; }
/* portfólio completo */
html.ks-cool .ks-site .ks-bio .ks-portfolio { width: auto; margin: 0 0 var(--c-gap); transform: none; padding: clamp(24px, 4vw, 48px) clamp(10px, 2vw, 24px); }
html.ks-cool .ks-site .ks-portfolio-titulo { color: var(--c-tinta); font-family: var(--f-display); font-stretch: 88%; font-weight: 700; text-transform: uppercase;}
html.ks-cool .ks-site .ks-bio .ks-pf { border-radius: 22px; background: var(--c-branco); }
html.ks-cool .ks-site .ks-bio .ks-pf-img { border-radius: 16px; margin: 6px 6px 0; }
html.ks-cool .ks-site .ks-portfolio-mais a { background: var(--c-tinta); color: var(--c-claro); }
/* contato */
html.ks-cool .ks-bio > .ks-bio-rodape { border-top: 0; color: var(--c-dim); }
html.ks-cool .ks-bio .ks-bio-rodape strong { font-family: var(--f-texto); font-stretch: 90%; font-size: 24px; letter-spacing: -0.01em; }
html.ks-cool .ks-bio .ks-bio-rodape a { color: var(--c-tinta); text-decoration: underline; text-decoration-color: var(--c-coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 1100px) {
  html.ks-cool .ks-bio .ks-lista-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.ks-cool .ks-bio .ks-curso { flex-basis: calc((100% - 28px) / 3); }
  html.ks-cool .ks-site .ks-bio-posts.ks-carrossel > a { flex-basis: calc((100% - 42px) / 4); }
  html.ks-cool .ks-bio .ks-redes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.ks-cool .ks-bio .ks-carrossel { margin: -8px 0 -22px; padding: 8px 0 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html.ks-cool .ks-b-disp .ks-ponto { animation: none; }
  html.ks-cool .ks-b-slide img, html.ks-cool .ks-b-slide.ks-on img { transform: none; transition: none; }
}

/* ---------- Portfólio completo no /links/ (11/11) ----------
   A seção aqui é clara (creme) e os filtros e a alternância grade/lista vinham com as cores do /portfolio/, que é escuro:
   os chips inativos ficavam com texto creme sobre creme (sumiam, sobrava só o ativo, fora do centro, e um vão onde
   estava a segunda linha). Aqui eles ganham contorno e texto escuros. No celular fica só a grade. */
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-pf-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 20px; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-pf-filtros button { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(34,31,32,.24); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-pf-filtros button:hover { background: rgba(34,31,32,.06); box-shadow: inset 0 0 0 1.5px rgba(34,31,32,.5); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-pf-filtros button[aria-selected="true"] { background: var(--c-tinta); box-shadow: none; color: var(--c-claro); }
html.ks-cool[data-ks-pagina="/links/"] .ks-cool-vista { margin: 0 auto 36px; background: var(--c-areia); }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-cool-vista button { color: var(--c-dim); }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-cool-vista button[aria-pressed="true"] { background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-portfolio-titulo { text-align: center; }
/* cards: menos bege embaixo do texto; seta na altura do nome */
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista { row-gap: 10px; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf { padding: 8px 8px 6px; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-info { padding: 12px 34px 0 10px; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-info::after { top: 16px; right: 10px; margin-top: 0; }
@media (min-width: 768px) {
  html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista { row-gap: 14px; }
  html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf { padding-bottom: 10px; }
  html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-info { padding: 14px 40px 0 12px; }
  html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-info::after { top: 18px; right: 12px; }
}
@media (max-width: 767px) {
  html.ks-cool[data-ks-pagina="/links/"] .ks-cool-vista { display: none !important; }
  html.ks-cool[data-ks-pagina="/links/"] .ks-pf-filtros { margin-bottom: 24px; }
}

/* Cursos: cartão da Black Friday Lab (11/11), capa montada com a marca da Black sobre o fundo escuro da página dela */
html.ks-cool .ks-site .ks-bio .ks-curso-black .ks-capa-black { position: relative; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 40%, #1d2a2b 0%, #121516 62%, #0c0e0f 100%); }
html.ks-cool .ks-site .ks-bio .ks-curso-black .ks-capa-black img { width: 76%; height: auto; object-fit: contain; }
html.ks-cool .ks-site .ks-bio .ks-curso-black .ks-capa-data { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: #DFEEAC; color: #121516; font: 600 13.5px/1.1 var(--f-texto); white-space: nowrap; }

/* Portfólio no /links/ mais justo (11/11): o cartão tem o mesmo fundo da seção, então o recuo interno virava vão.
   Sem recuo no cartão e na imagem; o espaço entre projetos fica só no gap. */
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista { column-gap: 12px; row-gap: 18px; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf { padding: 0; background: transparent; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-img { margin: 0; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-info { padding: 10px 28px 0 2px; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-info::after { top: 13px; right: 4px; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-info strong { font-size: 17px; line-height: 1.2; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-info :is(span, small, p) { font-size: 14px; line-height: 1.35; margin-top: 2px; }
html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-pf-filtros { margin-bottom: 18px; }
@media (min-width: 768px) {
  html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista { column-gap: 14px; row-gap: 22px; }
  html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf { padding: 0; }
  html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-info { padding: 12px 30px 0 2px; }
  html.ks-cool[data-ks-pagina="/links/"] .ks-site .ks-bio .ks-pf-lista .ks-pf-info::after { top: 15px; right: 4px; }
}

/* Cartão da Black no bento (11/11): logo da Black num quadro escuro, com a data em pílula amarela no canto */
html.ks-cool .ks-bento .ks-black-card__logo { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; padding: 10px 16px; border-radius: 18px; background: var(--c-tinta); }
html.ks-cool .ks-bento .ks-black-card__logo img { display: block; width: auto; height: clamp(92px, 11vw, 132px); max-width: 100%; }
html.ks-cool .ks-bento .ks-black-card__logo .ks-black-card__selo { position: absolute; top: 10px; right: 10px; background: var(--c-sol); color: var(--c-tinta); }
html.ks-cool .ks-bento .ks-black-card__titulo { padding-top: 14px; }

/* ---- 50-portfolio.css ---- */
/* ================= PORTFÓLIO: vitrine, pastas em destaque, índice, página do projeto e projeto aberto ================= */
html.ks-cool main#ks-conteudo:is(.ks-portfolio-pagina, .ks-projsolo) { margin: 0; padding: 0 0 24px; border-radius: 0; background: transparent; color: var(--c-claro); overflow: visible; }
html.ks-cool .ks-portfolio-pagina > .ks-wrap { max-width: none; padding: 0 var(--c-gap); }

/* Abertura sobre o fundo escuro */
html.ks-cool .ks-portfolio-cabeca { max-width: 780px; margin: 0 auto; padding: 44px 16px 8px; }
html.ks-cool .ks-portfolio-cabeca .ks-s-olho { color: var(--c-claro-dim); }
html.ks-cool .ks-portfolio-cabeca h1 { margin: 6px 0 16px; color: var(--c-claro); }
html.ks-cool .ks-portfolio-cabeca .ks-s-sub { max-width: 60ch; margin: 0 auto; color: var(--c-claro-dim); font-size: 17px; line-height: 1.6; }

/* ---------- Pastas com aba (projetos em destaque); no computador empilham ao rolar ---------- */
html.ks-cool .ks-cool-pastas { max-width: 1320px; margin: 48px auto 0; }
html.ks-cool .ks-cool-pastas-cab { display: grid; justify-items: center; gap: 6px; margin-bottom: 22px; text-align: center; }
html.ks-cool .ks-cool-pastas-cab .ks-s-olho, html.ks-cool .ks-cool-pastas-fim .ks-s-olho { margin: 0; color: var(--c-claro-dim); }
html.ks-cool .ks-cool-pastas-cab h2 { margin: 0; color: var(--c-claro); font-family: var(--f-display); font-weight: 700; font-stretch: 90%; font-size: clamp(28px, 3vw, 40px); line-height: 1.04; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .ks-cool-pasta {
  --aba-x: calc(var(--i) * 190px); position: relative; margin-top: 64px; padding: clamp(22px, 3.2vw, 48px);
  border-radius: var(--r-bloco); background: var(--pasta); color: var(--c-tinta); }
html.ks-cool .ks-cool-pasta:first-of-type { border-top-left-radius: 0; }
html.ks-cool .ks-cool-pasta-aba {
  position: absolute; left: var(--aba-x); bottom: 100%; display: inline-flex; align-items: center; gap: 10px; height: 52px; margin: 0 0 -1px; padding: 0 60px 0 24px;
  border-radius: 22px 0 0 0; background: var(--pasta); color: var(--c-tinta); font: 500 15px/1 var(--f-mono); clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 100%, 0 100%); }
html.ks-cool .ks-cool-pasta-ico { width: 17px; height: 13px; border: 1.6px solid currentColor; border-radius: 2px 3px 3px 3px; background: linear-gradient(currentColor, currentColor) 0 0 / 7px 2.6px no-repeat; }
html.ks-cool .ks-cool-pasta-corpo { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { html.ks-cool .ks-cool-pasta-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; } }
html.ks-cool .ks-cool-pasta-ano { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 5px 12px; border-radius: 999px; background: rgba(34,31,32,.1); font: 500 13px/1.2 var(--f-mono); }
html.ks-cool .ks-cool-pasta-ano span { width: 8px; height: 8px; border-radius: 50%; background: var(--c-tinta); }
html.ks-cool .ks-site .ks-cool-pasta h3 { margin: 0 0 14px; font-family: var(--f-display); font-weight: 700; font-stretch: 88%; font-size: clamp(34px, 4vw, 56px); line-height: .98; letter-spacing: .03em; color: var(--c-tinta); text-transform: uppercase;}
html.ks-cool .ks-cool-pasta-desc { max-width: 46ch; margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: rgba(34,31,32,.82); }
html.ks-cool .ks-cool-pasta-ir { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; border-bottom: 2px solid currentColor; color: var(--c-tinta); font: 500 15px/1.2 var(--f-mono); }
html.ks-cool .ks-cool-pasta-ir svg { width: 18px; height: 18px; transition: transform .25s ease; }
html.ks-cool .ks-cool-pasta-ir:hover svg { transform: translate(3px, -3px); }
html.ks-cool .ks-cool-pasta-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
html.ks-cool .ks-cool-pasta-tags li { padding: 7px 26px 7px 14px; border-radius: 12px 0 0 0; background: rgba(34,31,32,.1); font: 500 13px/1.2 var(--f-mono); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%); }
/* Foto em moldura creme com alças de seleção do Figma e etiqueta de arquivo */
html.ks-cool .ks-cool-pasta-foto { --fr: var(--c-tinta); position: relative; display: block; padding: 10px; border-radius: var(--r-card); background: var(--c-creme); outline: 1.5px solid var(--fr); outline-offset: 8px; }
html.ks-cool .ks-cool-pasta-foto img { width: 100%; height: auto; aspect-ratio: 808 / 632; object-fit: cover; border-radius: calc(var(--r-card) - 10px); }
html.ks-cool .ks-cool-pasta-foto::after, html.ks-cool .ks-proj-pagina[data-ks-arquivo]::after {
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  background:
    linear-gradient(var(--c-branco), var(--c-branco)) left 1.5px top 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--c-branco), var(--c-branco)) right 1.5px top 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--c-branco), var(--c-branco)) left 1.5px bottom 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--c-branco), var(--c-branco)) right 1.5px bottom 1.5px / 8px 8px no-repeat,
    linear-gradient(var(--fr), var(--fr)) left top / 11px 11px no-repeat,
    linear-gradient(var(--fr), var(--fr)) right top / 11px 11px no-repeat,
    linear-gradient(var(--fr), var(--fr)) left bottom / 11px 11px no-repeat,
    linear-gradient(var(--fr), var(--fr)) right bottom / 11px 11px no-repeat; }
html.ks-cool .ks-cool-arquivo {
  position: absolute; left: -14px; bottom: calc(100% + 14px); display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  background: var(--fr, var(--c-tinta)); color: var(--c-claro); font: 500 12.5px/1.3 var(--f-mono); }
html.ks-cool .ks-cool-arquivo::before { content: ""; width: 9px; height: 11px; border: 1.4px solid currentColor; border-radius: 1px; clip-path: polygon(0 0, 65% 0, 100% 30%, 100% 100%, 0 100%); }

@media (min-width: 1000px) {
  html.ks-cool .ks-cool-pasta { position: sticky; top: 150px; box-shadow: 0 -30px 50px -36px rgba(0,0,0,.7); }
  html.ks-cool .ks-cool-pasta:not(:first-of-type) { border-top-left-radius: var(--r-bloco); }
}
@media (max-width: 999px) {
  html.ks-cool .ks-cool-pasta { --aba-x: 0px; border-top-left-radius: 0 !important; margin-top: 60px; }
  html.ks-cool .ks-cool-pasta-foto { outline-offset: 6px; }
  html.ks-cool .ks-cool-pasta-foto::after { inset: -12px; }
}

/* ---------- Filtros e alternância grade / lista ---------- */
html.ks-cool [data-ks-portfolio] { max-width: 1320px; margin: 0 auto; }
html.ks-cool .ks-pf-filtros { gap: 8px; margin: 0 auto 28px; }
html.ks-cool .ks-site .ks-pf-filtros button { padding: 11px 18px; border: 0; border-radius: 999px; background: var(--c-noite-2); color: var(--c-claro); font: 500 14.5px/1.2 var(--f-texto); letter-spacing: 0; text-transform: none; cursor: pointer; transition: background-color .2s, color .2s; }
html.ks-cool .ks-site .ks-pf-filtros button:hover { background: #3A3536; color: var(--c-claro); }
html.ks-cool .ks-site .ks-pf-filtros button[aria-selected="true"] { background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-cool-vista { display: flex; justify-content: center; gap: 4px; width: fit-content; margin: 0 auto 56px; padding: 4px; border-radius: 999px; background: var(--c-noite-2); }
html.ks-cool .ks-site .ks-cool-vista button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--c-claro-dim); font: 500 13.5px/1.2 var(--f-mono); cursor: pointer; }
html.ks-cool .ks-site .ks-cool-vista button[aria-pressed="true"] { background: var(--c-verde); color: var(--c-tinta); }
html.ks-cool .ks-cool-vista svg { width: 15px; height: 15px; }

/* ---------- Cards de projeto (vitrine, irmãos e projetos novos) ---------- */
html.ks-cool .ks-pf-lista { gap: var(--c-gap); }
@media (min-width: 700px) { html.ks-cool .ks-pf-lista > .ks-pf { flex-basis: calc((100% - 2 * var(--c-gap)) / 3); } }
html.ks-cool .ks-site .ks-pf-lista .ks-pf { padding: 8px 8px 20px; border-radius: var(--r-card); background: var(--c-creme); color: var(--c-tinta); box-shadow: none; }
html.ks-cool .ks-site .ks-pf-lista .ks-pf:hover { transform: none; box-shadow: none; }
html.ks-cool .ks-site .ks-pf-lista .ks-pf-img { border-radius: calc(var(--r-card) - 8px); background: var(--c-areia); }
html.ks-cool .ks-site .ks-pf-lista .ks-pf-info { padding: 14px 12px 0; }
html.ks-cool .ks-site .ks-pf-lista .ks-pf-info strong { font-family: var(--f-texto); font-stretch: 92%; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
html.ks-cool .ks-site .ks-pf-lista .ks-pf-info span { margin-top: 4px; color: var(--c-dim); font-size: 14px; }
html.ks-cool .ks-cool-pf-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; font: 400 12.5px/1.3 var(--f-mono); font-style: normal; color: var(--c-dim); }
html.ks-cool .ks-site .ks-pf-lista .ks-cool-pf-meta span { margin: 0; font-size: inherit; }
html.ks-cool .ks-cool-pf-seta { display: none; }
html.ks-cool .ks-pf-selo { padding: 5px 11px; border-radius: 999px; background: var(--c-coral); color: var(--c-tinta); font: 500 12px/1.2 var(--f-mono); letter-spacing: 0; text-transform: none; box-shadow: none; }

/* Índice (vista em lista): linhas com ano, cliente, área e entrega; a capa aparece junto do mouse */
html.ks-cool .ks-cool-indice .ks-pf-lista { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0; padding: 8px clamp(16px, 3vw, 44px); border-radius: var(--r-bloco); background: var(--c-creme); }
html.ks-cool .ks-site .ks-cool-indice .ks-pf-lista .ks-pf {
  display: grid; grid-template-columns: 70px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 190px) 28px; align-items: center; gap: 18px; padding: 22px 6px; border-radius: 0;
  border-bottom: 1px solid var(--c-linha); background: transparent; grid-column: auto !important; flex: none !important; transition: background-color .2s, padding .25s ease; }
html.ks-cool .ks-site .ks-cool-indice .ks-pf-lista .ks-pf:last-child { border-bottom: 0; }
html.ks-cool .ks-site .ks-cool-indice .ks-pf-lista .ks-pf:hover, html.ks-cool .ks-site .ks-cool-indice .ks-pf-lista .ks-pf:focus-visible { padding-left: 16px; background: var(--c-areia); border-radius: 18px; }
html.ks-cool .ks-cool-indice .ks-pf-img { display: none; }
html.ks-cool .ks-cool-indice .ks-pf-info, html.ks-cool .ks-cool-indice .ks-cool-pf-meta { display: contents; }
html.ks-cool .ks-site .ks-cool-indice .ks-pf-lista .ks-pf-info strong { order: 2; font-size: clamp(19px, 1.8vw, 24px); }
html.ks-cool .ks-site .ks-cool-indice .ks-pf-lista .ks-pf-info > span { order: 3; margin: 0; font-size: 15px; }
html.ks-cool .ks-site .ks-cool-indice .ks-cool-pf-ano { order: 1; font: 400 14px/1 var(--f-mono); color: var(--c-dim); }
html.ks-cool .ks-site .ks-cool-indice .ks-cool-pf-tipo { order: 4; font: 400 13.5px/1.3 var(--f-mono); color: var(--c-dim); }
html.ks-cool .ks-cool-indice .ks-cool-pf-seta { order: 5; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-cool-indice .ks-cool-pf-seta svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
  html.ks-cool .ks-site .ks-cool-indice .ks-pf-lista .ks-pf { grid-template-columns: 46px minmax(0, 1fr) 28px; gap: 4px 12px; padding: 16px 2px; }
  html.ks-cool .ks-site .ks-cool-indice .ks-pf-lista .ks-pf-info > span { grid-column: 2; order: 3; font-size: 13.5px; }
  html.ks-cool .ks-site .ks-cool-indice .ks-cool-pf-ano { grid-row: 1; }
  html.ks-cool .ks-site .ks-cool-indice .ks-pf-lista .ks-pf-info strong { grid-row: 1; }
  html.ks-cool .ks-cool-indice .ks-cool-pf-seta { grid-row: 1; grid-column: 3; }
  html.ks-cool .ks-site .ks-cool-indice .ks-cool-pf-tipo { display: none; }
}
html.ks-cool .ks-cool-previa {
  position: fixed; left: 0; top: 0; z-index: 2147482000; width: 300px; padding: 7px; border-radius: 26px; background: var(--c-creme); pointer-events: none;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); opacity: 0; scale: .85; transition: opacity .2s ease, scale .25s cubic-bezier(.2,.8,.2,1); }
html.ks-cool .ks-cool-previa img { display: block; width: 100%; height: auto; aspect-ratio: 808 / 632; object-fit: cover; border-radius: 20px; }
html.ks-cool .ks-cool-previa.ks-cool-previa-on { opacity: 1; scale: 1; }
html.ks-cool.ks-cool-lista-ativa .ks-cool-cursor { display: none; }

/* ---------- Página do projeto ---------- */
html.ks-cool .ks-proj-trilha { max-width: none; padding: 18px calc(var(--c-gap) + 24px) 12px; color: var(--c-claro-dim); font: 400 13px/1.4 var(--f-mono); }
html.ks-cool .ks-proj-trilha a { color: var(--c-claro-dim); }
html.ks-cool .ks-proj-trilha a:hover { color: var(--c-claro); }
html.ks-cool .ks-proj-topo { max-width: none; margin: 0 var(--c-gap); padding: clamp(28px, 4.6vw, 72px); border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-proj-olho { gap: 0; color: var(--c-tinta); font: 500 14px/1.3 var(--f-mono); letter-spacing: 0; text-transform: none; }
html.ks-cool .ks-proj-olho::before { content: none; width: auto; height: auto; margin-right: 6px; background: none; opacity: .55; }
html.ks-cool .ks-site :is(.ks-proj-topo h1, .ks-proj-topo h2) {
  margin-top: 16px; font-family: var(--f-display); font-style: normal; font-weight: 700; font-stretch: 88%; font-size: clamp(38px, 4.8vw, 58px); line-height: 1; letter-spacing: .03em; color: var(--c-tinta); text-transform: uppercase;}
html.ks-cool .ks-proj-assunto { margin-bottom: 10px; color: var(--c-dim); font-family: var(--f-texto); font-weight: 500; letter-spacing: 0; }
html.ks-cool .ks-proj-sobre { border-color: var(--c-linha); }
html.ks-cool .ks-proj-sobre > p { color: var(--c-tinta); }
html.ks-cool .ks-proj-sobre dt { color: var(--c-dim); font: 400 13px/1.3 var(--f-mono); letter-spacing: 0; text-transform: none; }
html.ks-cool .ks-proj-sobre dd { color: var(--c-tinta); font-weight: 500; }
/* A página do projeto num quadro creme, com alças de seleção e etiqueta de arquivo */
html.ks-cool .ks-proj-pagina {
  --fr: var(--c-verde); position: relative; max-width: 1180px; margin: 64px auto 0; padding: 10px; overflow: visible; border-radius: var(--r-bloco); background: var(--c-creme); box-shadow: none;
  outline: 1.5px solid var(--fr); outline-offset: 8px; }
html.ks-cool .ks-proj-pagina > .ks-mask { overflow: hidden; }
html.ks-cool .ks-proj-pagina > .ks-mask:first-child { border-radius: calc(var(--r-bloco) - 10px) calc(var(--r-bloco) - 10px) 0 0; }
html.ks-cool .ks-proj-pagina > .ks-mask:last-child { border-radius: 0 0 calc(var(--r-bloco) - 10px) calc(var(--r-bloco) - 10px); }
html.ks-cool .ks-proj-pagina[data-ks-arquivo]::before {
  content: attr(data-ks-arquivo); position: absolute; left: -14px; bottom: calc(100% + 14px); padding: 3px 8px 3px 24px; background: var(--fr); color: var(--c-tinta); font: 500 12.5px/1.3 var(--f-mono);
  background-image: linear-gradient(var(--c-tinta), var(--c-tinta)); background-size: 9px 11px; background-position: 8px 50%; background-repeat: no-repeat; }
@media (max-width: 1220px) { html.ks-cool .ks-proj-pagina { margin-left: calc(var(--c-gap) + 14px); margin-right: calc(var(--c-gap) + 14px); } }
html.ks-cool .ks-proj-cta { max-width: 1180px; padding: 10px; border-radius: var(--r-bloco); background: var(--c-creme); box-shadow: none; }
html.ks-cool .ks-proj-cta img { border-radius: calc(var(--r-bloco) - 10px); }
html.ks-cool .ks-proj-cta:hover { transform: none; }
html.ks-cool .ks-proj-fim { max-width: 1180px; margin-top: 40px; padding: 0 var(--c-gap); gap: var(--c-gap); }
html.ks-cool .ks-site .ks-proj-fim .ks-btn { padding: 18px 30px; background: var(--c-coral); color: var(--c-tinta); font-size: 16px; }
html.ks-cool .ks-site .ks-proj-fim .ks-btn:hover { background: #F39D79; }
html.ks-cool .ks-proj-prox { padding: 12px 12px 12px 28px; border-radius: 999px; background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-proj-prox small { color: var(--c-dim); font: 400 12.5px/1.3 var(--f-mono); letter-spacing: 0; text-transform: none; }
html.ks-cool .ks-proj-prox strong { font-family: var(--f-texto); font-stretch: 90%; font-weight: 700; font-size: 22px; }
html.ks-cool .ks-proj-prox svg { width: 48px; height: 48px; padding: 13px; background: var(--c-verde); color: var(--c-tinta); transition: transform .25s ease; }
html.ks-cool .ks-proj-prox:hover svg { transform: rotate(45deg); }
html.ks-cool .ks-proj-irmaos { max-width: none; margin: 72px var(--c-gap) 0; padding: clamp(28px, 4vw, 56px) clamp(14px, 2vw, 28px); border-radius: var(--r-bloco); background: var(--c-noite-2); }
html.ks-cool .ks-proj-irmaos h2 { margin: 0 0 26px; color: var(--c-claro); text-align: center; }
html.ks-cool .ks-proj-todos { margin-top: 28px; text-align: center; }

/* Projeto aberto por cima da vitrine (dialog do ks-portfolio.js) */
html.ks-cool .ks-projtela { background: var(--c-noite); color: var(--c-claro); }
html.ks-cool .ks-projtela::backdrop { background: rgba(34,31,32,.75); }
html.ks-cool .ks-proj-barra { background: rgba(34,31,32,.9); border: 0; }
html.ks-cool .ks-proj-area { color: var(--c-verde); font: 500 13.5px/1.2 var(--f-mono); letter-spacing: 0; text-transform: none; }
html.ks-cool .ks-proj-fechar { border: 0; background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-projtela .ks-proj-topo { margin-top: 4px; }
html.ks-cool .ks-projtela .ks-proj-pagina { margin-top: 24px; outline: 0; }
html.ks-cool .ks-projtela .ks-proj-fim { padding-bottom: 40px; }
html.ks-cool .ks-proj-irmaos.ks-wrap { width: auto; }
@media (max-width: 899px) { html.ks-cool .ks-cool-pasta-corpo { gap: 56px; } html.ks-cool .ks-cool-pasta-tags { margin-top: 22px; } }

/* O projeto aberto fica fora do .ks-site (dialog no <body>): títulos e botões repetidos aqui */
html.ks-cool .ks-projtela { font-family: var(--f-texto); }
html.ks-cool .ks-projtela .ks-proj-topo h2 { margin-top: 16px; font-family: var(--f-display); font-style: normal; font-weight: 700; font-stretch: 88%; font-size: clamp(38px, 4.8vw, 58px); line-height: 1; letter-spacing: .03em; color: var(--c-tinta); text-transform: uppercase;}
html.ks-cool .ks-projtela .ks-btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border: 0; border-radius: 999px; box-shadow: none; font: 600 15.5px/1.1 var(--f-texto); text-decoration: none; transition: background-color .2s; }
html.ks-cool .ks-projtela .ks-btn-menta, html.ks-cool .ks-projtela .ks-proj-fim .ks-btn { background: var(--c-coral); color: var(--c-tinta); }
html.ks-cool .ks-projtela .ks-btn-menta:hover, html.ks-cool .ks-projtela .ks-proj-fim .ks-btn:hover { background: #F39D79; }
html.ks-cool .ks-projtela .ks-btn svg { width: 16px; height: 16px; }
html.ks-cool .ks-proj-orcar svg { display: none; }

/* 10/11: sem a etiqueta de ano e tipo nos cards da grade (home, portfólio, links); no índice em lista ela é coluna e fica */
html.ks-cool .ks-pf-lista .ks-cool-pf-meta { display: none; }
html.ks-cool .ks-cool-indice .ks-pf-lista .ks-cool-pf-meta, html.ks-cool .ks-pf-lista.ks-cool-indice .ks-cool-pf-meta { display: contents; }
/* Filtros: inativos neutros com contorno, ativo em verde */
html.ks-cool .ks-site .ks-pf-filtros button { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(246,242,236,.28); color: var(--c-claro); }
html.ks-cool .ks-site .ks-pf-filtros button:hover { background: rgba(246,242,236,.08); box-shadow: inset 0 0 0 1.5px rgba(246,242,236,.6); }
html.ks-cool .ks-site .ks-pf-filtros button[aria-selected="true"] { background: var(--c-verde); box-shadow: none; color: var(--c-tinta); }

/* Espaçamento (10/11): título da grade fora das pastas, com respiro antes dos filtros e da grade */
html.ks-cool .ks-site .ks-cool-grade-t { margin: 88px 0 28px; color: var(--c-claro); text-align: center; font-family: var(--f-display); font-weight: 700; font-stretch: 90%; font-size: clamp(28px, 3vw, 40px); line-height: 1.04; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .ks-site .ks-cool-grade-t em { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -0.015em; }
html.ks-cool .ks-cool-pastas { margin-bottom: 0; padding-bottom: 0; }
@media (max-width: 760px) {
  html.ks-cool .ks-site .ks-cool-grade-t { margin: 52px 0 22px; }
  html.ks-cool .ks-pf-filtros { margin-bottom: 24px; }
  html.ks-cool .ks-cool-vista { margin-bottom: 40px; }
}

/* ---- 60-paginas.css ---- */
/* ================= Páginas menores do tema: calculadoras, ferramentas, playbooks, aulas, módulos, 404 ================= */
/* Formulários dentro dos blocos claros: controles no esquema claro (texto escuro legível) */
html.ks-cool main#ks-conteudo, html.ks-cool .ks-folha, html.ks-cool .ks-rodape { color-scheme: light; }
html.ks-cool main#ks-conteudo :is(input, select, textarea) { color: var(--c-tinta); }

/* ---------- Calculadoras ---------- */
html.ks-cool .ks-calc { grid-template-columns: minmax(0, 1fr); gap: var(--c-gap); }
@media (min-width: 980px) { html.ks-cool .ks-calc { grid-template-columns: minmax(0, 1fr) 360px; } }
html.ks-cool .ks-calc fieldset { min-width: 0; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-card); background: var(--c-branco); box-shadow: none; }
html.ks-cool .ks-calc legend { font-family: var(--f-texto); font-stretch: 92%; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
html.ks-cool .ks-calc legend span { background: var(--c-verde); color: var(--c-tinta); font: 500 13px/1 var(--f-mono); }
html.ks-cool .ks-calc-opcoes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
html.ks-cool .ks-calc-opcoes span { border-radius: 18px; border-color: var(--c-linha); background: var(--c-creme); }
html.ks-cool .ks-calc-opcoes label:hover span { border-color: var(--c-tinta); }
html.ks-cool .ks-calc-opcoes input:checked + span { border-color: var(--c-tinta); background: var(--c-verde); box-shadow: none; }
html.ks-cool .ks-calc-opcoes input:checked + span small { color: var(--c-tinta); }
html.ks-cool .ks-calc-opcoes input:focus-visible + span { outline: 3px solid var(--c-tinta); }
html.ks-cool .ks-calc-campos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
html.ks-cool .ks-calc-campos input { border-radius: 16px; border-color: rgba(34,31,32,.18); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool .ks-calc-campos input:focus { outline: 3px solid var(--c-verde); outline-offset: 1px; border-color: var(--c-tinta); }
html.ks-cool .ks-calc-faixa input[type=range] { accent-color: var(--c-tinta); }
html.ks-cool .ks-calc-resultado { padding: clamp(24px, 2.6vw, 32px); border-radius: var(--r-card); background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-calc-rotulo { color: var(--c-verde); font: 500 13px/1.3 var(--f-mono); letter-spacing: 0; text-transform: none; }
html.ks-cool .ks-calc-total { font-family: var(--f-display); font-style: normal; font-weight: 700; font-stretch: 88%; font-size: clamp(40px, 4.4vw, 54px); letter-spacing: .03em; color: var(--c-claro); text-transform: uppercase;}
html.ks-cool .ks-calc-dl div { border-bottom-color: var(--c-linha-clara); }
html.ks-cool .ks-calc-dl dt { color: var(--c-claro-dim); }
html.ks-cool .ks-calc-nota { color: var(--c-claro-dim); }
html.ks-cool .ks-site .ks-calc-resultado .ks-btn { white-space: normal; text-align: center; line-height: 1.25; }
html.ks-cool .ks-calc-aprender { color: var(--c-claro); text-decoration: underline; text-underline-offset: 3px; }
html.ks-cool .ks-calc-sim-grade .ks-calc-rotulo { color: var(--c-dim); }
html.ks-cool .ks-calc-formula { border-radius: 18px; background: var(--c-verde); }
html.ks-cool .ks-calc-texto > p, html.ks-cool .ks-calc-texto :is(ul, ol), html.ks-cool .ks-calc-faq p { color: var(--c-tinta); }
html.ks-cool .ks-calc-texto > p a, html.ks-cool .ks-calc-texto li a, html.ks-cool .ks-ferr-lista a { text-decoration-color: var(--c-coral); text-decoration-thickness: 2px; }
html.ks-cool .ks-calc-faq { border-bottom-color: var(--c-linha); }
html.ks-cool .ks-calc-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
html.ks-cool .ks-calc-faq summary::-webkit-details-marker { display: none; }
html.ks-cool .ks-calc-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-tinta); color: var(--c-claro); font: 500 18px/1 var(--f-texto); transition: transform .25s; }
html.ks-cool .ks-calc-faq[open] summary::after { transform: rotate(45deg); }
html.ks-cool .ks-calc-autoria, html.ks-cool .ks-calc-dica, html.ks-cool .ks-calc-opc { color: var(--c-dim); }

/* ---------- Playbooks ---------- */
html.ks-cool .ks-pb-cabeca { border-radius: var(--r-card); box-shadow: none; background: var(--c-branco); }
html.ks-cool :is(.ks-pb-aprende, .ks-pb-item) { border-radius: 22px; background: var(--c-areia); box-shadow: none; }
html.ks-cool .ks-pb-indice { border-radius: var(--r-card); background: var(--c-branco); box-shadow: none; }
html.ks-cool .ks-pb-corpo > section { border-radius: var(--r-card); box-shadow: none; }

/* ---------- Aulas, trilhas e módulos ---------- */
html.ks-cool .ks-aula-play, html.ks-cool .ks-aula iframe { border-radius: 22px; }
html.ks-cool .ks-site .ks-aula h2 { font-family: var(--f-display); font-stretch: 92%; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool .ks-aula time { font: 400 12.5px/1.3 var(--f-mono); color: var(--c-dim); }
html.ks-cool :is(.ks-modcard, .ks-trilha-card) { border-radius: var(--r-card); background: var(--c-branco); box-shadow: none; }
html.ks-cool :is(.ks-modcard, .ks-trilha-card):hover { transform: none; box-shadow: none; }
html.ks-cool .ks-modcard-topicos li::before { color: var(--c-tinta); }

/* ---------- 404 ---------- */
html.ks-cool body.error404 main#ks-conteudo h1 { font-family: var(--f-display); font-weight: 700; font-stretch: 88%; letter-spacing: .03em; text-transform: uppercase;}

/* Tabelas do tema (com rolagem lateral própria no celular) */
html.ks-cool .ks-tabela-rolagem { border-radius: 22px; box-shadow: none; background: var(--c-branco); }
html.ks-cool .ks-tabela { background: var(--c-branco); }
html.ks-cool .ks-tabela th { background: var(--c-tinta); color: var(--c-claro); }
html.ks-cool .ks-tabela td { border-bottom-color: var(--c-linha); }
/* Botões longos quebram linha no celular em vez de vazar */
@media (max-width: 600px) { html.ks-cool main#ks-conteudo .ks-btn { white-space: normal; text-align: center; line-height: 1.25; } }
html.ks-cool main#ks-conteudo .ks-s-sub { color: var(--c-dim); }

/* ---- 90-limpeza.css ---- */
/* ================= Passada de limpeza (10/11/2026): menos enfeite de template =================
   Pedido da Karine: sem "///", sem rótulos que só repetem o título ou o nome, mono só em dado (datas e números),
   etiqueta .fig só nas pastas do portfólio, resumo do post sem etiqueta de frame, número de seção discreto. */

/* Mono só para dado: os rótulos passam a usar a DM Sans; datas, números e tempo de leitura continuam em mono */
html.ks-cool { --f-mono: var(--f-texto); --f-dado: 'DM Mono', ui-monospace, Menlo, monospace; }
html.ks-cool .ks-site :is(time, .ks-cool-tempo, .ks-leia-corpo em, .ks-linha-n, .ks-cool-pasta-ano, .ks-cool-pf-ano, .ks-rv-n, .ks-np-datas, .ks-sb-n) { font-family: var(--f-dado) !important; }
html.ks-cool .ks-site :is(.ks-s-olho, .ks-olho:not(:has(a))) { font-size: 15px; font-weight: 500; opacity: .75; }

/* Rótulos redundantes */
html.ks-cool[data-ks-pagina="/"] :is(#servicos, .ks-pratica, .ks-sobre, #cursos) .ks-s-olho,
html.ks-cool[data-ks-pagina="/"] #servicos .ks-s-sub,
html.ks-cool .ks-site .ks-faixa-olho,
html.ks-cool .ks-rv-cabeca .ks-s-olho,
html.ks-cool .ks-blog-wrap .ks-cabeca .ks-olho,
html.ks-cool .ks-np-sumario .ks-np-lado-t,
html.ks-cool[data-ks-pagina="/links/"] .ks-b-tag,
html.ks-cool[data-ks-pagina="/links/"] .ks-b-num .ks-b-rot { display: none !important; }
html.ks-cool[data-ks-pagina="/"] #servicos .ks-s-topo { margin-bottom: 22px; }
/* /links/: no bloco de disponibilidade fica só a bolinha e "Aceitando novos projetos" */
html.ks-cool[data-ks-pagina="/links/"] .ks-b-rot:has(.ks-ponto) { font-size: 0 !important; }
html.ks-cool[data-ks-pagina="/links/"] .ks-b-rot:has(.ks-ponto) .ks-ponto { font-size: 14px; }

/* Etiqueta de arquivo .fig: só nas pastas da vitrine do portfólio */
html.ks-cool:not([data-ks-pagina="/portfolio/"]) .ks-cool-arquivo,
html.ks-cool .ks-proj-pagina[data-ks-arquivo]::after { display: none !important; }

/* Resumo do post: só o bloco destacado, sem etiqueta nem alças de frame */
html.ks-cool .ks-site .ks-np .ks-post-conteudo > :is(p:first-child, p.ks-abre) { margin: 30px 0 32px; padding: 24px 26px; border: 0; border-left: 5px solid var(--c-coral); border-radius: 4px 22px 22px 4px; background: var(--c-branco); }
html.ks-cool .ks-site .ks-np .ks-post-conteudo > :is(p:first-child, p.ks-abre)::before,
html.ks-cool .ks-site .ks-np .ks-post-conteudo > :is(p:first-child, p.ks-abre)::after { content: none; display: none; }

/* Número de seção discreto no H2 (o mesmo do sumário), no lugar de "Parte 01" */
html.ks-cool .ks-site .ks-np .ks-post-conteudo > h2::before {
  content: counter(kscap); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px; padding: 0; border-radius: 50%;
  font: 500 13px/1 var(--f-dado); }

/* Frames do /sobre/ sem etiqueta de nome */
html.ks-cool .ks-cool-frame::before { content: none !important; }

/* Mistura de fontes: grotesca pesada + itálico Ivy em 1 a 3 palavras do título (desligável com .ks-sem-mistura) */
html.ks-cool .ks-site .kch-titulo h1 .kch-ivy { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-stretch: normal; text-transform: none; letter-spacing: -0.02em !important; font-size: 1.08em; line-height: .9; }
html.ks-cool.ks-sem-mistura .ks-site .kch-titulo h1 .kch-ivy { font: inherit; text-transform: inherit; letter-spacing: inherit !important; }
html.ks-cool .ks-site .ks-s-titulo em { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -0.015em; background: none; padding: 0; }

/* Ritmo entre blocos: nenhum bloco colado no próximo (20 px entre seções; 12 px só dentro de um mosaico) */
html.ks-cool[data-ks-pagina="/"] main > section, html.ks-cool[data-ks-pagina="/"] main > div { margin: 20px var(--c-gap); }
html.ks-cool[data-ks-pagina="/"] main > section.ks-cool-hero { margin-top: 4px; }
html.ks-cool .ks-leia, html.ks-cool .ks-np-depois { margin-top: 20px; }
html.ks-cool .ks-rodape { margin-top: 20px; }

/* Cabeçalho ao rolar (10/11): sem faixa escura de largura total; cada pílula flutua sozinha com sombra suave,
   encolhe um pouco, some ao descer e volta ao subir (ks-cool.js) */
html.ks-cool .ks-h-topo, html.ks-cool .ks-h-topo.ks-h-rolou { background: none !important; box-shadow: none !important; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
html.ks-cool .ks-h-topo .ks-wrap { transition: height .3s ease; }
html.ks-cool .ks-h-topo.ks-h-rolou .ks-wrap { height: 68px; }
html.ks-cool .ks-h-topo .ks-h-marca { padding: 10px 18px; margin-left: -18px; border-radius: 999px; transition: background-color .3s ease, box-shadow .3s ease; }
html.ks-cool .ks-h-topo.ks-h-rolou :is(.ks-h-marca, .ks-h-aluno) { background: rgba(34,31,32,.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px -10px rgba(0,0,0,.45); }
html.ks-cool .ks-h-topo.ks-h-rolou :is(.ks-h-menu, .ks-h-cta, .ks-h-mobile summary) { box-shadow: 0 8px 24px -10px rgba(0,0,0,.45); }
html.ks-cool .ks-h-topo.ks-cool-h-some { transform: translateY(-110%); }
@media (max-width: 520px) {
  html.ks-cool .ks-h-topo .ks-h-marca { padding: 9px 14px; margin-left: -14px; }
  html.ks-cool .ks-h-topo.ks-h-rolou .ks-wrap { height: 64px; }
}
@media (prefers-reduced-motion: reduce) { html.ks-cool .ks-h-topo.ks-cool-h-some { transform: none; } }

/* Bootzy TM nos títulos (escolha da Karine, 10/11). Ela é larga e pesada: tracking positivo, entrelinha um pouco maior,
   e só de 28 px para cima; títulos menores (cards, h3, chamadas pequenas) usam a DM Sans bold. */
html.ks-cool[data-ks-fonte="bootzy"] .ks-site :is(h1, h1 em, h2, .ks-faixa-grande, .kcc-titulo) { letter-spacing: .035em !important; }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site :is(h1, h2) { line-height: 1.06; }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site .kch-titulo h1 { max-width: none; font-size: clamp(36px, 4.15vw, 60px); line-height: 1.04; letter-spacing: .045em !important; }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site .kch-titulo h1 em, html.ks-cool[data-ks-fonte="bootzy"] .ks-site .kch-titulo h1 .kch-frase { letter-spacing: .045em !important; line-height: 1.04; }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site .kch-titulo h1 .kch-ivy { font-size: 1.16em; letter-spacing: -0.01em !important; }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site :is(h1, h2) em { letter-spacing: -0.01em !important; }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site .ks-np .ks-post-conteudo > h2 { font-size: clamp(28px, 2.6vw, 34px); }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site .kcc-titulo { font-size: clamp(36px, 5.4vw, 78px); line-height: 1.08; }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site .ks-faixa-grande { letter-spacing: .01em !important; }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site :is(h3, .ks-post-titulo, .ks-np-card-t, .ks-np-cta-t, .ks-leia-corpo strong, .ks-lps-titulo, .ks-passo h3, .ks-cool-faq h3, .ks-faixa-itens strong, .ks-numeros strong) {
  font-family: var(--f-texto) !important; font-weight: 700 !important; font-stretch: normal !important; letter-spacing: -0.02em !important; }
/* h3 grandes (acima de 28 px) continuam na Bootzy */
html.ks-cool[data-ks-fonte="bootzy"] .ks-site :is(.ks-escopo-card h3, .ks-cool-pasta h3) { font-family: var(--f-display) !important; letter-spacing: .03em !important; line-height: 1.05; text-transform: uppercase;}
html.ks-cool[data-ks-fonte="bootzy"] .ks-site .ks-cool-pasta h3 { font-size: clamp(30px, 3.4vw, 48px); }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site .ks-escopo-card h3 { font-size: clamp(28px, 2.4vw, 34px); }
@media (max-width: 560px) {
  html.ks-cool[data-ks-fonte="bootzy"] .ks-site .kch-titulo h1 { font-size: clamp(30px, 8.6vw, 38px); }
  html.ks-cool[data-ks-fonte="bootzy"] .ks-site .ks-escopo-card h3 { font-size: 28px; }
}

/* Blocos que ficaram vazios depois da troca das artes (10/11) */
/* Abertura da Formação (/formacao-lps/modulos/ e trilhas): o bloco vira uma faixa baixa só com o logo e as ferramentas */
html.ks-cool .ks-site .ks-arte-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; min-height: 0 !important; margin-top: 32px; padding: 22px clamp(18px, 3vw, 36px); border-radius: var(--r-card); }
html.ks-cool .ks-site .ks-arte-hero .ks-arte-marca { position: static; transform: none; height: 24px; }
html.ks-cool .ks-site .ks-arte-hero .ks-chips { position: static; inset: auto; padding: 0; justify-content: center; }
html.ks-cool .ks-site .ks-chips li { border: 0; background: var(--c-creme); color: var(--c-tinta) !important; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none !important; transform: none !important; font-size: 14px; }
/* Faixas e banners que eram só arte, sem conteúdo: saem */
html.ks-cool .ks-site :is(.ks-pb-banner, .ks-arte-faixa) { display: none !important; }
/* Letreiro de ferramentas da Formação no mesmo padrão do letreiro da home (sem asterisco) */
html.ks-cool .ks-site .ks-faixa-ferr { margin: 24px 0 0; padding: 18px 0; border: 0; }
html.ks-cool .ks-site .ks-faixa-ferr-trilho { gap: 30px; }
html.ks-cool .ks-site .ks-faixa-ferr span { display: inline-flex; align-items: center; gap: 30px; color: var(--c-tinta); font: 700 clamp(26px, 3vw, 40px)/1.1 var(--f-display); font-style: normal; font-stretch: 85%; letter-spacing: .03em; text-transform: uppercase;}
html.ks-cool[data-ks-fonte="bootzy"] .ks-site .ks-faixa-ferr span { letter-spacing: .03em; font-size: clamp(22px, 2.4vw, 32px); }
html.ks-cool .ks-site .ks-faixa-ferr span::after { content: none; }
html.ks-cool .ks-site .ks-faixa-ferr span::before { content: ""; width: .36em; height: .36em; border-radius: 50%; background: var(--c-verde); }
html.ks-cool .ks-site .ks-faixa-ferr span:nth-child(4n+2)::before { background: var(--c-coral); }
html.ks-cool .ks-site .ks-faixa-ferr span:nth-child(4n+3)::before { background: var(--c-azul); }
html.ks-cool .ks-site .ks-faixa-ferr span:nth-child(4n+4)::before { background: var(--c-sol); }

/* Bloco do Método na home (passo a passo), mesmo componente do /sobre/ */
html.ks-cool[data-ks-pagina="/"] .ks-cool-metodo { padding: clamp(40px, 4vw, 56px) clamp(12px, 2vw, 24px) clamp(14px, 2vw, 24px); border-radius: var(--r-bloco); background: var(--c-creme); color: var(--c-tinta); }
html.ks-cool[data-ks-pagina="/"] .ks-cool-metodo .ks-sb-frame { background: rgba(255,253,249,.72); }

/* Letreiro de nichos da home: mais espaço entre os caracteres (pedido de 10/11) */
html.ks-cool[data-ks-pagina="/"] .ks-nichos-trilho { letter-spacing: .02em; font-stretch: normal; }
html.ks-cool[data-ks-fonte="bootzy"][data-ks-pagina="/"] .ks-nichos-trilho { letter-spacing: .04em; }

/* Topo de seção: título alinhado à esquerda e subtítulo legível em qualquer fundo (pedido de 10/11) */
html.ks-cool .ks-site .ks-s-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
html.ks-cool .ks-site .ks-s-topo .ks-s-titulo { text-align: left; margin-inline: 0; text-wrap: balance; }
html.ks-cool .ks-site .ks-s-topo .ks-s-sub { color: inherit; opacity: .72; max-width: 36ch; margin: 0; text-align: left; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
html.ks-cool .ks-site section#cursos .ks-s-topo { color: var(--c-claro); }
@media (max-width: 767px) { html.ks-cool .ks-site .ks-s-topo { display: block; } html.ks-cool .ks-site .ks-s-topo .ks-s-sub { margin-top: 12px; } }

/* Fonte dela em tudo: a pixelada sai; títulos e chamadas que usavam Pixelify passam para a Bootzy TM (pedido de 10/11) */
html.ks-cool[data-ks-pagina="/sobre/"] .ks-sb-pixel { font-family: var(--f-display) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em !important; }

/* Mistura de fontes: a Bootzy TM sempre em MAIÚSCULAS, o itálico Ivy em minúsculas (pedido de 10/11) */
html.ks-cool[data-ks-fonte="bootzy"] .ks-site :is(h1, h2, .ks-faixa-grande, .kcc-titulo, .ks-escopo-card h3, .ks-cool-pasta h3) { text-transform: uppercase; }
html.ks-cool[data-ks-fonte="bootzy"] .ks-site :is(h1, h2, .ks-faixa-grande, .kcc-titulo, h3) :is(em, i, .kch-ivy) { text-transform: none; }

/* Itálico do subtítulo dos pilares do Método fica em minúsculas (a Bootzy do título continua em maiúsculas) */
html.ks-cool .ks-site .ks-sb-pilar-card h3 > span { text-transform: none !important; }

/* Título dos posts do blog (12/11): ocupa a largura do cabeçalho, sem a coluna estreita que deixava espaço sobrando à direita */
html.ks-cool .ks-site .ks-np-cabeca h1 { max-width: 22ch !important; text-wrap: balance; }

/* ---- 95-carrossel-celular.css ---- */
/* ---------- Celular: listas longas viram carrossel com rolagem lateral (pedido de 10/11, /formacao-lps/modulos/) ---------- */
@media (max-width: 767px) {
  html.ks-cool .ks-site :is(.ks-modcards, .ks-trilhas-grade) {
    display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap !important; gap: 12px !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin-inline: -16px !important; padding: 4px 16px 18px !important; list-style: none;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html.ks-cool .ks-site :is(.ks-modcards, .ks-trilhas-grade)::-webkit-scrollbar { display: none; }
  html.ks-cool .ks-site .ks-modcards > .ks-modcard { flex: 0 0 82%; max-width: 82%; scroll-snap-align: start; margin: 0 !important; opacity: 1 !important; transform: none !important; }
  html.ks-cool .ks-site .ks-trilhas-grade > .ks-trilha-card { flex: 0 0 78%; max-width: 78%; scroll-snap-align: start; margin: 0 !important; }
  /* capa do módulo mais baixa no carrossel, para o card caber na tela */
  html.ks-cool .ks-site .ks-modcards .ks-modcard-capa { display: block; aspect-ratio: 4 / 3 !important; height: auto !important; overflow: hidden; }
  html.ks-cool .ks-site .ks-modcards .ks-modcard-capa img { width: 100%; height: 100% !important; aspect-ratio: auto; object-fit: cover; object-position: center 30%; }
  html.ks-cool .ks-site .ks-modcards .ks-modcard-corpo { display: flex !important; flex-direction: column; gap: 8px; grid-template-columns: none !important; }
  html.ks-cool .ks-site .ks-modcards .ks-modcard-corpo > * { grid-column: auto !important; margin: 0; }
  /* dica de que dá para arrastar */
  html.ks-cool .ks-site :is(.ks-modcards, .ks-trilhas-grade) + .ks-dica-arraste,
  html.ks-cool .ks-site .ks-dica-arraste { display: block; margin: 2px 0 20px; color: inherit; opacity: .6; font: 500 13px/1.3 var(--f-texto); text-align: center; }
}
@media (min-width: 768px) { html.ks-cool .ks-site .ks-dica-arraste { display: none; } }

/* ---- 96-black-blog.css ---- */
/* Cartão da Black Friday Lab na lateral dos posts (12/11): escuro, com o logo da Black e o botão amarelo */
html.ks-cool .ks-site .ks-np-black { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r-card); background: var(--c-tinta); color: var(--c-claro); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
html.ks-cool .ks-site .ks-np-black[hidden], html.ks-cool .ks-site .ks-np-black [hidden], html.ks-cool .ks-site .ks-np-card[hidden] { display: none; }
html.ks-cool .ks-site .ks-np-black-logo { position: relative; display: flex; justify-content: center; padding: 4px 0; }
html.ks-cool .ks-site .ks-np-black-logo img { width: auto; height: 104px; max-width: 100%; }
html.ks-cool .ks-site .ks-np-black-data { position: absolute; top: 0; right: 0; padding: 5px 10px; border-radius: 999px; background: var(--c-sol); color: var(--c-tinta); font: 600 12px/1.2 var(--f-texto); }
html.ks-cool .ks-site .ks-np-black-t { margin: 0 0 6px; color: var(--c-claro); font: 700 21px/1.15 var(--f-texto); letter-spacing: -0.02em; }
html.ks-cool .ks-site .ks-np-black p { margin: 0 0 14px; color: var(--c-claro); opacity: .82; font-size: 15px; line-height: 1.45; }
html.ks-cool .ks-site .ks-np-black p.ks-np-black-t { opacity: 1; }
html.ks-cool .ks-site .ks-np-black-preco { opacity: 1 !important; }
html.ks-cool .ks-site .ks-np-black-preco s { opacity: .6; }
html.ks-cool .ks-site .ks-np-black-preco strong { color: var(--c-sol); font-size: 26px; font-weight: 700; }
html.ks-cool .ks-site .ks-np-black-preco small { display: block; margin-top: 2px; font-size: 13px; opacity: .75; }
html.ks-cool .ks-site .ks-np-black-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 18px; border-radius: 999px; background: var(--c-sol); color: var(--c-tinta); font: 600 15px/1.1 var(--f-texto); text-decoration: none; }
html.ks-cool .ks-site .ks-np-black-btn svg { width: 16px; height: 16px; }

html.ks-cool .ks-site :is(em, i, .kch-ivy, .ks-ivy) { text-transform: none; }