/* Miolo das páginas de cases. O cabeçalho, o rodapé, a fonte e as variáveis de cor vêm das folhas da home. */
.cs-main{--cs-muted:#555a60;--cs-soft:#f4f4f5;padding-top:80px;background:var(--background);color:var(--foreground)}
[data-theme=dark] .cs-main{--cs-muted:#b4b8be;--cs-soft:rgba(255,255,255,.07)}

.cs-wrap{width:min(1080px,calc(100% - 2rem));margin:0 auto}
.cs-main a:focus-visible,.cs-main button:focus-visible{outline:2px solid var(--foreground);outline-offset:3px;border-radius:4px}

.cs-crumbs{padding-top:1.75rem;font-size:.875rem;color:var(--cs-muted)}
.cs-crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.cs-crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.cs-crumbs a{color:inherit;text-decoration:none}
.cs-crumbs a:hover{text-decoration:underline}

.cs-hero{padding:3rem 0 2.25rem;text-align:center}
.cs-hero--left{padding-top:1.5rem;text-align:left}
.cs-eyebrow{display:inline-block;margin-bottom:1rem;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cs-muted)}
.cs-title{margin:0;font-size:clamp(1.9rem,5vw,3.1rem);font-weight:700;line-height:1.18;letter-spacing:-.02em}
.cs-hl{display:inline-block;padding:.02em .28em;border-radius:.25em;background:var(--foreground);color:var(--background)}
.cs-lead{max-width:46rem;margin:1.25rem auto 0;font-size:1.0625rem;line-height:1.75;color:var(--cs-muted)}
.cs-hero--left .cs-lead{margin-left:0}

.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.5rem;padding-bottom:1rem}
.cs-card{display:flex;flex-direction:column;gap:1rem;padding:1.75rem;border:1px solid var(--glass-border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);transition:var(--transition)}
.cs-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.cs-card h2{margin:0;font-size:1.375rem;line-height:1.3}
.cs-card p{flex:1;margin:0;line-height:1.7;color:var(--cs-muted)}
.cs-logo{width:72px;height:72px;padding:6px;border:1px solid var(--glass-border);border-radius:16px;background:#fff;object-fit:contain}
.cs-logo--wide{width:auto;max-width:100%;height:72px;padding:6px 12px}
.cs-facts .cs-logo--wide{height:48px}
.cs-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.cs-tag{padding:.25rem .75rem;border:1px solid var(--border);border-radius:999px;font-size:.8125rem}

.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.6rem;border:1px solid var(--primary);border-radius:999px;background:var(--primary);color:var(--primary-foreground);font-weight:600;text-decoration:none;transition:var(--transition)}
.cs-btn:hover{background:var(--primary-hover)}
.cs-btn--ghost{background:transparent;color:var(--foreground)}
.cs-btn--ghost:hover{background:var(--surface-hover)}
.cs-link{align-self:flex-start;font-weight:600;color:var(--foreground);text-decoration:none;border-bottom:2px solid currentColor}
.cs-link:hover{opacity:.7}

.cs-section{padding:2.5rem 0}
.cs-section h2{margin:0 0 .75rem;font-size:1.5rem;line-height:1.3}
.cs-section p{max-width:46rem;margin:0;line-height:1.75;color:var(--cs-muted)}

.cs-article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;align-items:start;padding-bottom:1rem}
.cs-facts{position:sticky;top:104px;padding:1.5rem;border:1px solid var(--glass-border);border-radius:var(--radius-lg);background:var(--surface)}
.cs-facts .cs-logo{margin-bottom:1rem}
.cs-facts dl{margin:0}
.cs-facts dt{margin-top:1rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-muted)}
.cs-facts dt:first-of-type{margin-top:0}
.cs-facts dd{margin:.25rem 0 0;line-height:1.5}
.cs-facts a{color:var(--foreground)}

.cs-prose h2{margin:2.5rem 0 .75rem;font-size:1.5rem;line-height:1.3}
.cs-prose h2:first-child{margin-top:0}
.cs-prose h3{margin:1.75rem 0 .5rem;font-size:1.125rem;line-height:1.4}
.cs-prose p{margin:0 0 1rem;line-height:1.8;color:var(--cs-muted)}

.cs-cta{margin:3rem 0;padding:2.5rem 1.5rem;border-radius:var(--radius-lg);background:var(--foreground);color:var(--background);text-align:center}
.cs-cta h2{margin:0 0 .75rem;font-size:1.625rem;line-height:1.3}
.cs-cta p{max-width:34rem;margin:0 auto 1.5rem;line-height:1.7;opacity:.85}
.cs-cta .cs-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.cs-cta .cs-btn{background:var(--background);border-color:var(--background);color:var(--foreground)}
.cs-cta .cs-btn--ghost{background:transparent;color:var(--background)}
.cs-cta .cs-btn:hover{opacity:.88}
/* No escuro o bloco invertido viraria um retângulo branco gritando no meio da página, então vira um cinza translúcido */
[data-theme=dark] .cs-cta{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:var(--foreground)}
[data-theme=dark] .cs-cta p{opacity:.78}
[data-theme=dark] .cs-cta .cs-btn{border-color:var(--foreground);background:var(--foreground);color:var(--background)}
[data-theme=dark] .cs-cta .cs-btn--ghost{border-color:rgba(255,255,255,.35);background:transparent;color:var(--foreground)}
[data-theme=dark] .cs-cta .cs-btn--ghost:hover{background:rgba(255,255,255,.08);opacity:1}

.cs-more{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-bottom:3rem;padding:1.25rem 1.5rem;border:1px solid var(--glass-border);border-radius:var(--radius-lg);background:var(--cs-soft)}
.cs-more p{margin:0;color:var(--cs-muted)}
.cs-more .cs-actions{display:flex;flex-wrap:wrap;gap:.75rem}

.cs-theme .cs-moon{display:none}
[data-theme=dark] .cs-theme .cs-sun{display:none}
[data-theme=dark] .cs-theme .cs-moon{display:block}

@media (max-width:860px){
  .cs-article{grid-template-columns:1fr;gap:1.5rem}
  .cs-facts{position:static;order:-1}
}
@media (prefers-reduced-motion:reduce){
  .cs-card,.cs-btn{transition:none}
  .cs-card:hover{transform:none}
}