/* Essencial: claro e moderno. Topo em pílula flutuante de vidro, título em degradê, brilhos suaves nas cores da marca. */
.ss-t-essencial .ss-top { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: 12px; }
.ss-t-essencial .ss-top-in {
    width: calc(100% - 24px); max-width: 1140px; min-height: 60px; padding: 0 10px 0 12px; border-radius: 999px;
    background: color-mix(in srgb, #fff 76%, transparent); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid var(--ss-line); box-shadow: 0 12px 34px -20px rgba(15, 23, 42, .4);
}
.ss-t-essencial .ss-mono { border-radius: 50%; }
.ss-t-essencial .ss-hero-split { margin-top: -72px; padding-top: calc(clamp(44px, 8vw, 104px) + 72px); }
.ss-t-essencial .ss-hero h1 {
    background: linear-gradient(110deg, var(--ss-ink) 30%, color-mix(in srgb, var(--ss-primary) 85%, var(--ss-ink)) 70%, var(--ss-primary));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ss-t-essencial .ss-hero-split::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(var(--ss-line) 1px, transparent 1px), linear-gradient(90deg, var(--ss-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 80% 30%, #000, transparent 70%); mask-image: radial-gradient(ellipse 60% 70% at 80% 30%, #000, transparent 70%);
}
.ss-t-essencial .ss-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ss-t-essencial .ss-info-card { transition: transform .25s, box-shadow .25s; }
.ss-t-essencial .ss-info-card:hover { transform: translateY(-3px); box-shadow: var(--ss-shadow); }