:root { color-scheme: light; }
html[data-mode="dark"] { color-scheme: dark; }
.su-site { margin: 0; min-width: 0; overflow-x: clip; color: var(--sc-text-main); background: var(--sc-bg-body); }
.su-site *, .su-site *::before, .su-site *::after { box-sizing: border-box; }
.su-skip { position: fixed; z-index: 9999; top: 12px; left: 12px; padding: 10px 14px; color: #fff; background: var(--sc-vatse-orange, #ef6c35); border-radius: 10px; transform: translateY(-160%); transition: transform .16s ease; }
.su-skip:focus-visible { transform: translateY(0); }
.su-header { position: sticky; z-index: 500; top: 0; width: min(calc(100% - 48px), 1600px); min-height: 76px; margin: 0 auto; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid color-mix(in srgb, var(--sc-border) 78%, transparent); background: color-mix(in srgb, var(--sc-bg-body) 88%, transparent); backdrop-filter: blur(18px); }
.su-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.su-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sc-text-main); text-decoration: none; white-space: nowrap; }
.su-brand img { display: block; width: 34px; height: 34px; object-fit: contain; }
.su-brand strong, .su-brand small { display: block; line-height: 1; }.su-brand strong { font-size: 15px; letter-spacing: -.04em; }.su-brand small { margin-top: 5px; color: var(--sc-text-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.su-nav { display: flex; align-items: center; gap: 21px; margin-right: auto; }.su-nav-toggle,.su-nav-vatse { display:none; }.su-nav a, .su-footer a { color: var(--sc-text-muted); text-decoration: none; font-size: 13px; font-weight: 750; }.su-nav a:hover, .su-nav a:focus-visible, .su-footer a:hover { color: var(--sc-primary); }
.su-header-actions { display: flex; align-items: center; gap: 8px; }.su-vatse-link { display:inline-flex; align-items:center; min-height:38px; padding:0 11px; border:1px solid var(--sc-border); border-radius:10px; color:var(--sc-text-main); background:var(--sc-bg-surface); font-size:12px; font-weight:800; text-decoration:none; transition:border-color .18s ease,color .18s ease,transform .18s ease; }.su-vatse-link:hover,.su-vatse-link:focus-visible { border-color:var(--sc-primary); color:var(--sc-primary); transform:translateY(-1px); }.su-search-trigger, .su-mode { border: 1px solid var(--sc-border); background: var(--sc-bg-surface); color: var(--sc-text-main); border-radius: 10px; cursor: pointer; font: inherit; }.su-search-trigger { min-height: 38px; padding: 0 10px; font-size: 12px; }.su-search-trigger kbd { margin-left: 8px; color: var(--sc-text-muted); font: 10px var(--sc-font-mono); }.su-mode { width: 38px; height: 38px; font-size: 18px; }.su-github { min-height: 38px; padding: 0 13px; }
.su-hero { width: min(calc(100% - 48px), 1600px); min-height: min(720px, calc(100vh - 76px)); margin: 0 auto; padding: clamp(58px, 10vw, 138px) 0 clamp(56px, 8vw, 112px); display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr); gap: clamp(36px, 6vw, 108px); align-items: center; }.su-kicker { display: inline-block; color: var(--sc-primary); font: 800 11px var(--sc-font-mono); letter-spacing: .12em; }.su-hero h1, .su-feature-grid h2, .su-community h2 { max-width: 740px; margin: 18px 0; font-size: clamp(48px, 6.7vw, 104px); line-height: .9; letter-spacing: -.075em; }.su-hero h1 em { color: var(--sc-primary); font-style: normal; }.su-hero p { max-width: 600px; color: var(--sc-text-muted); font-size: 17px; line-height: 1.65; }.su-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }.su-hero-actions .sc-btn { min-height: 47px; padding-inline: 19px; }.su-install { width: min(100%, 470px); display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 12px; border: 1px solid var(--sc-border); border-radius: 14px; background: color-mix(in srgb, var(--sc-bg-surface) 84%, transparent); }.su-install code { min-width: 0; overflow: auto; color: var(--sc-text-main); font: 12px var(--sc-font-mono); white-space: nowrap; }.su-install button { margin-left: auto; flex: 0 0 auto; border: 0; border-radius: 8px; padding: 7px 9px; color: #fff; background: var(--sc-primary); cursor: pointer; font: 700 11px var(--sc-font-main); }
.su-hero-demo { min-height: 505px; padding: 2px; border-radius: 30px; }.su-demo-card { min-height: 501px; padding: clamp(22px, 4vw, 40px); display: flex; flex-direction: column; border: 0; background: radial-gradient(circle at 90% 5%, color-mix(in srgb, var(--sc-primary) 20%, transparent), transparent 32%), #171418; color: #fff; }.su-demo-top, .su-live { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #ded8d4; font: 11px var(--sc-font-mono); letter-spacing: .1em; text-transform: uppercase; }.su-live { color: #ffb495; }.su-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-primary); box-shadow: 0 0 0 5px rgba(239,108,53,.16); }.su-demo-card h2 { max-width: 510px; margin: auto 0 26px; font-size: clamp(34px, 4.2vw, 64px); line-height: .92; letter-spacing: -.065em; }.su-demo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.su-demo-tile { min-height: 120px; padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; text-align: left; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }.su-demo-tile:hover, .su-demo-tile:focus-visible, .su-demo-tile.is-active { transform: translateY(-4px); border-color: var(--sc-primary); background: color-mix(in srgb, var(--sc-primary) 19%, #171418); }.su-demo-tile small, .su-demo-tile strong { display:block; }.su-demo-tile small { color: #ffb495; font: 10px var(--sc-font-mono); }.su-demo-tile strong { margin-top: 39px; font-size: 14px; }.su-demo-status { margin-top: 18px; color: #cfc7c1; font-size: 13px; }
.su-proof, .su-feature-grid, .su-community { width: min(calc(100% - 48px), 1600px); margin: 0 auto; }.su-proof { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top:1px solid var(--sc-border); border-bottom:1px solid var(--sc-border); }.su-proof article { min-height: 220px; padding: 33px; border-right:1px solid var(--sc-border); }.su-proof article:last-child { border:0; }.su-proof span { color:var(--sc-primary); font:800 12px var(--sc-font-mono); }.su-proof h2 { margin:32px 0 8px; font-size:21px; letter-spacing:-.04em; }.su-proof p, .su-feature p { margin:0; color:var(--sc-text-muted); line-height:1.6; }
.su-feature-grid { padding: clamp(72px, 11vw, 156px) 0; display:grid; grid-template-columns: 1.25fr repeat(2,minmax(0,1fr)); gap: 12px; align-items: stretch; }.su-feature-grid > div { grid-row: span 2; padding: 26px 22px 0 0; }.su-feature-grid h2, .su-community h2 { font-size:clamp(40px,4.5vw,71px); }.su-feature { position:relative; min-height: 210px; padding: 24px; border:1px solid var(--sc-border); border-radius:20px; color:var(--sc-text-main); background:var(--sc-bg-surface); text-decoration:none; overflow:hidden; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }.su-feature:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--sc-primary) 56%,var(--sc-border)); box-shadow:0 22px 48px rgba(32,25,23,.13); }.su-feature b, .su-feature span, .su-feature i { display:block; }.su-feature b { font-size:20px; letter-spacing:-.04em; }.su-feature span { max-width:26ch; margin-top:15px; color:var(--sc-text-muted); font-size:13px; line-height:1.55; }.su-feature i { position:absolute; right:22px; bottom:18px; color:var(--sc-primary); font-size:22px; font-style:normal; }
.su-community { display:flex; align-items:end; justify-content:space-between; gap:36px; padding:56px; border-radius:26px 26px 0 0; color:#fff; background:#1b171a; }.su-community h2 { margin-bottom:12px; }.su-community p { max-width:610px; color:#cbc3be; line-height:1.6; }.su-community-actions { display:flex; gap:10px; flex-wrap:wrap; }.su-footer { width:min(calc(100% - 48px),1600px); min-height:86px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--sc-text-muted); font-size:12px; }.su-footer nav { display:flex; gap:17px; flex-wrap:wrap; }
.su-command { width:min(680px,calc(100vw - 32px)); border:1px solid var(--sc-border); border-radius:18px; padding:0; background:var(--sc-bg-surface); color:var(--sc-text-main); box-shadow:0 28px 90px rgba(0,0,0,.32); }.su-command::backdrop { background:rgba(11,10,13,.55); backdrop-filter:blur(4px); }.su-command form { margin:0; }.su-command-head { display:flex; align-items:center; gap:8px; padding:12px; border-bottom:1px solid var(--sc-border); }.su-command input { width:100%; border:0; outline:0; background:transparent; color:inherit; font:16px var(--sc-font-main); }.su-command button { width:30px; height:30px; border:1px solid var(--sc-border); border-radius:8px; background:var(--sc-bg-input); color:inherit; cursor:pointer; }.su-command-results { max-height:min(55vh,480px); overflow:auto; padding:8px; }.su-command-item { width:100%; display:flex; flex-direction:column; gap:3px; padding:12px; border:0; border-radius:10px; background:transparent; color:inherit; text-align:left; cursor:pointer; }.su-command-item:hover,.su-command-item:focus-visible { background:color-mix(in srgb,var(--sc-primary) 13%,var(--sc-bg-input)); }.su-command-item small { color:var(--sc-text-muted); }
.su-catalog { width:min(calc(100% - 48px),1600px); min-height:calc(100vh - 162px); margin:0 auto; padding:clamp(62px,8vw,116px) 0; }.su-catalog h1 { max-width:840px; margin:16px 0 10px; font-size:clamp(46px,6vw,88px); line-height:.92; letter-spacing:-.075em; }.su-catalog > p { max-width:650px; margin:0; color:var(--sc-text-muted); font-size:16px; line-height:1.65; }.su-catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:52px; }.su-catalog-card { min-height:238px; padding:22px; display:flex; flex-direction:column; }.su-catalog-card > span { color:var(--sc-primary); font:800 10px var(--sc-font-mono); letter-spacing:.1em; text-transform:uppercase; }.su-catalog-card h2 { margin:19px 0 7px; font-size:21px; letter-spacing:-.05em; }.su-catalog-card p { margin:0; color:var(--sc-text-muted); font-size:13px; line-height:1.55; }.su-catalog-card code { display:block; overflow:hidden; margin-top:16px; color:var(--sc-primary); font:11px var(--sc-font-mono); text-overflow:ellipsis; white-space:nowrap; }.su-catalog-card footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:19px; }.su-catalog-card small { color:var(--sc-text-muted); }.su-catalog-card a { color:var(--sc-primary); font-size:12px; font-weight:800; text-decoration:none; }
.su-component-page { width:min(calc(100% - 48px),1320px); margin:0 auto; padding:clamp(54px,8vw,116px) 0; }.su-backlink { display:inline-block; margin-bottom:38px; color:var(--sc-text-muted); font-size:13px; text-decoration:none; }.su-backlink:hover { color:var(--sc-primary); }.su-component-page h1 { max-width:850px; margin:15px 0 12px; font-size:clamp(46px,6.3vw,88px); line-height:.92; letter-spacing:-.075em; }.su-component-summary { max-width:680px; margin:0; color:var(--sc-text-muted); font-size:17px; line-height:1.65; }.su-component-preview { margin-top:46px; border:1px solid var(--sc-border); border-radius:24px; overflow:hidden; background:var(--sc-bg-surface); }.su-preview-stage { min-height:360px; display:grid; place-items:center; padding:34px; background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--sc-primary) 16%,transparent),transparent 45%); }.su-preview-stage > * { max-width:min(100%,680px); }.su-component-fallback { min-width:min(100%,370px); padding:28px; }.su-component-fallback strong,.su-component-fallback p { display:block; }.su-component-fallback strong { margin-top:14px; font-size:26px; letter-spacing:-.05em; }.su-component-fallback p { margin:10px 0 0; color:var(--sc-text-muted); line-height:1.55; }.su-preview-meta { display:flex; justify-content:space-between; gap:18px; padding:15px 20px; border-top:1px solid var(--sc-border); color:var(--sc-text-muted); font-size:12px; }.su-component-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:54px; }.su-component-grid article { min-height:220px; padding:24px; border:1px solid var(--sc-border); border-radius:18px; background:var(--sc-bg-surface); }.su-component-grid h2 { margin:0 0 18px; font-size:20px; letter-spacing:-.045em; }.su-component-grid h3 { margin:22px 0 10px; font-size:14px; }.su-component-grid pre { margin:10px 0; padding:14px; overflow:auto; border-radius:10px; background:#181418; color:#f8eee8; font:12px/1.55 var(--sc-font-mono); white-space:pre-wrap; }.su-component-grid pre code { font:inherit; }.su-component-grid ul { margin:0; padding-left:18px; color:var(--sc-text-muted); font-size:13px; line-height:1.55; }.su-code-tags { display:flex; flex-wrap:wrap; gap:8px; }.su-code-tags code { padding:7px 8px; border-radius:8px; color:var(--sc-primary); background:color-mix(in srgb,var(--sc-primary) 9%,var(--sc-bg-input)); font:11px var(--sc-font-mono); }.su-component-grid dl { display:grid; grid-template-columns:120px 1fr; gap:13px; margin:0; font-size:13px; }.su-component-grid dt { color:var(--sc-text-muted); }.su-component-grid dd { margin:0; }.su-related { margin-top:54px; }.su-related h2 { font-size:25px; letter-spacing:-.05em; }.su-related > div { display:flex; flex-wrap:wrap; gap:10px; }.su-related a { display:inline-flex; align-items:center; gap:22px; min-width:190px; padding:13px 15px; border:1px solid var(--sc-border); border-radius:12px; color:var(--sc-text-main); background:var(--sc-bg-surface); font-size:13px; font-weight:750; text-decoration:none; }.su-related a:hover { border-color:var(--sc-primary); }.su-related a span { color:var(--sc-primary); }
.su-template-page { width:min(calc(100% - 48px),1440px); margin:0 auto; padding:clamp(54px,8vw,110px) 0; }.su-template-head { display:flex; align-items:end; justify-content:space-between; gap:24px; }.su-template-head h1 { margin:14px 0 8px; font-size:clamp(45px,6vw,80px); line-height:.92; letter-spacing:-.07em; }.su-template-head p { max-width:580px; margin:0; color:var(--sc-text-muted); line-height:1.6; }.su-template-head > div:last-child { display:flex; flex-wrap:wrap; gap:10px; }.su-template-frame { margin-top:45px; overflow:hidden; border:1px solid var(--sc-border); border-radius:24px; background:var(--sc-bg-surface); box-shadow:var(--sc-shadow-lg); }.su-template-commercial { position:relative; min-height:620px; padding:26px; overflow:hidden; color:#fff; background:radial-gradient(circle at 78% 30%,color-mix(in srgb,var(--sc-primary) 42%,transparent),transparent 18%),linear-gradient(135deg,#211b20,#0d0c0f); }.su-template-commercial::before { content:""; position:absolute; width:560px; height:560px; right:-180px; bottom:-310px; border:1px solid rgba(255,255,255,.16); border-radius:50%; box-shadow:0 0 0 76px rgba(255,255,255,.04),0 0 0 152px rgba(255,255,255,.025); }.su-template-commercial nav { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; }.su-template-commercial nav strong { font-size:17px; }.su-template-commercial nav span { color:#d4cbc6; font-size:13px; }.su-template-commercial > div { position:relative; z-index:1; max-width:650px; margin-top:130px; }.su-template-commercial h2 { margin:16px 0; font-size:clamp(44px,6vw,82px); line-height:.9; letter-spacing:-.075em; }.su-template-commercial p { max-width:520px; color:#d4cbc6; font-size:16px; line-height:1.6; }.su-template-commercial > div > div { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }.su-template-commercial aside { position:absolute; z-index:1; right:45px; bottom:42px; width:180px; padding:20px; border:1px solid rgba(255,255,255,.14); border-radius:17px; background:rgba(255,255,255,.07); backdrop-filter:blur(12px); }.su-template-commercial aside span,.su-template-commercial aside strong,.su-template-commercial aside p { display:block; }.su-template-commercial aside span { color:#ffb895; font:10px var(--sc-font-mono); }.su-template-commercial aside strong { margin-top:16px; font-size:52px; letter-spacing:-.08em; }.su-template-commercial aside p { margin:8px 0 0; font-size:12px; }.su-template-app { min-height:620px; display:grid; grid-template-columns:220px 1fr; color:var(--sc-text-main); background:var(--sc-bg-body); }.su-template-app aside { display:flex; flex-direction:column; gap:8px; padding:26px 15px; border-right:1px solid var(--sc-border); }.su-template-app aside strong { margin:0 10px 24px; }.su-template-app aside a { padding:10px; border-radius:9px; color:var(--sc-text-muted); font-size:13px; }.su-template-app aside a.is-active { color:var(--sc-text-main); background:color-mix(in srgb,var(--sc-primary) 13%,var(--sc-bg-input)); }.su-template-app > div { padding:45px; }.su-template-app h2 { margin:14px 0 30px; font-size:clamp(31px,4vw,54px); letter-spacing:-.065em; }.su-template-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }.su-template-kpis article { padding:17px; border:1px solid var(--sc-border); border-radius:14px; background:var(--sc-bg-surface); }.su-template-kpis small,.su-template-kpis strong,.su-template-kpis em { display:block; }.su-template-kpis small { color:var(--sc-text-muted); }.su-template-kpis strong { margin:19px 0 8px; font-size:25px; letter-spacing:-.06em; }.su-template-kpis em { color:var(--sc-success); font-size:11px; font-style:normal; }.su-template-app .sc-card { padding:20px; }.su-template-app .sc-card p { color:var(--sc-text-muted); line-height:1.55; }.su-template-auth { width:min(100%,450px); min-height:560px; margin:54px auto; padding:38px; border:1px solid var(--sc-border); border-radius:23px; background:var(--sc-bg-surface); box-shadow:var(--sc-shadow-lg); }.su-template-auth h2 { margin:16px 0 36px; font-size:42px; line-height:.95; letter-spacing:-.065em; }.su-template-auth label { display:block; margin:15px 0; color:var(--sc-text-muted); font-size:12px; }.su-template-auth .sc-input { width:100%; margin-top:7px; }.su-template-auth .sc-btn { width:100%; margin-top:10px; }.su-template-auth > a { display:block; margin-top:18px; color:var(--sc-primary); text-align:center; font-size:13px; }
@media (max-width: 1024px) { .su-header { gap:17px; }.su-nav { gap:12px; }.su-search-trigger { font-size:0; width:38px; }.su-search-trigger span { font-size:16px; }.su-search-trigger kbd { display:none; }.su-hero { grid-template-columns:1fr; min-height:0; }.su-hero-demo { max-width:700px; }.su-feature-grid { grid-template-columns:1fr 1fr; }.su-feature-grid > div { grid-column:span 2; grid-row:auto; padding:0; } }
@media (max-width: 720px) { .su-header { width:calc(100% - 28px); min-height:66px; }.su-nav { display:none; }.su-header-actions { margin-left:auto; }.su-github { display:none; }.su-hero,.su-proof,.su-feature-grid,.su-community,.su-footer { width:calc(100% - 28px); }.su-hero { padding-top:57px; gap:37px; }.su-hero h1 { font-size:clamp(43px,13vw,62px); }.su-hero p { font-size:15px; }.su-hero-demo,.su-demo-card { min-height:410px; }.su-demo-grid { grid-template-columns:1fr; }.su-demo-tile { min-height:55px; display:flex; align-items:center; gap:10px; }.su-demo-tile strong { margin:0; }.su-proof { grid-template-columns:1fr; }.su-proof article { min-height:0; padding:27px 0; border-right:0; border-bottom:1px solid var(--sc-border); }.su-proof article:last-child { border-bottom:0; }.su-proof h2 { margin:14px 0 7px; }.su-feature-grid { grid-template-columns:1fr; padding:78px 0; }.su-feature-grid > div { grid-column:auto; }.su-community { padding:32px 22px; align-items:flex-start; flex-direction:column; }.su-footer { min-height:114px; align-items:flex-start; flex-direction:column; padding:28px 0; }.su-install { width:100%; }.su-command { width:calc(100vw - 24px); } }
@media (max-width: 960px) { .su-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) { .su-catalog { width:calc(100% - 28px); padding-top:62px; }.su-catalog-grid { grid-template-columns:1fr; margin-top:36px; } }
@media (max-width:720px) { .su-component-page { width:calc(100% - 28px); padding-top:55px; }.su-component-preview { margin-top:32px; }.su-preview-stage { min-height:260px; padding:20px; }.su-preview-meta { align-items:flex-start; flex-direction:column; }.su-component-grid { grid-template-columns:1fr; margin-top:34px; }.su-component-grid article { min-height:0; }.su-component-page h1 { font-size:clamp(42px,13vw,62px); } }

/* Catálogo v2: controles explícitos, variantes isoladas e exploração visual. */
.su-preview-stage > * { max-width: none; }
.su-control { display:grid; gap:2px; color:var(--sc-text-muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.su-control select,.su-preview-controls select,.su-explore-filters select,.su-explore-filters input { min-height:36px; border:1px solid var(--sc-border); border-radius:9px; background:var(--sc-bg-input); color:var(--sc-text-main); font:600 12px var(--sc-font-main); }
.su-control select { min-width:92px; padding:0 26px 0 9px; }
.su-menu-toggle { display:none; min-height:38px; padding:0 12px; border:1px solid var(--sc-border); border-radius:9px; background:var(--sc-bg-surface); color:var(--sc-text-main); font:750 12px var(--sc-font-main); cursor:pointer; }
.su-mobile-nav { position:absolute; inset:76px 0 auto; z-index:510; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:14px; border:1px solid var(--sc-border); border-radius:14px; background:var(--sc-bg-surface); box-shadow:var(--sc-shadow-lg); }
.su-mobile-nav a { min-height:44px; display:flex; align-items:center; padding:0 12px; border-radius:8px; color:var(--sc-text-main); text-decoration:none; }
.su-mobile-nav a:hover { background:var(--sc-bg-input); color:var(--sc-primary); }
.su-mobile-settings { grid-column:1/-1; display:none; grid-template-columns:1fr 1fr; gap:8px; padding-top:10px; border-top:1px solid var(--sc-border); }
.su-mobile-settings label { display:grid; gap:5px; color:var(--sc-text-muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.su-mobile-settings select { width:100%; min-height:42px; padding:0 10px; border:1px solid var(--sc-border); border-radius:9px; background:var(--sc-bg-input); color:var(--sc-text-main); }
.su-variant-index { display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }
.su-variant-index a { padding:8px 10px; border:1px solid var(--sc-border); border-radius:999px; color:var(--sc-text-muted); background:var(--sc-bg-surface); font-size:12px; text-decoration:none; }
.su-variant-index a:hover { border-color:var(--sc-primary); color:var(--sc-text-main); }
.su-variant-list { display:grid; gap:28px; margin-top:54px; }
.su-variant { scroll-margin-top:96px; overflow:hidden; border:1px solid var(--sc-border); border-radius:22px; background:var(--sc-bg-surface); }
.su-variant > header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:26px 28px 20px; }
.su-variant > header h2 { margin:8px 0 6px; font-size:clamp(25px,3vw,38px); line-height:1; letter-spacing:-.055em; }
.su-variant > header p { max-width:760px; margin:0; color:var(--sc-text-muted); font-size:13px; line-height:1.6; }
.su-anchor { color:var(--sc-text-muted); font-size:20px; text-decoration:none; }
.su-preview-controls { display:flex; align-items:end; gap:9px; padding:12px 28px; border-top:1px solid var(--sc-border); border-bottom:1px solid var(--sc-border); background:var(--sc-bg-body); }
.su-preview-controls label { display:grid; gap:4px; color:var(--sc-text-muted); font-size:10px; font-weight:750; text-transform:uppercase; }
.su-preview-controls select { min-width:112px; padding:0 30px 0 10px; }
.su-preview-controls > a { margin-left:auto; padding:9px 0; color:var(--sc-primary); font-size:12px; font-weight:800; text-decoration:none; }
.su-size-toggle { display:flex; gap:3px; padding:3px; border:1px solid var(--sc-border); border-radius:10px; background:var(--sc-bg-surface); }
.su-size-toggle button { min-height:30px; padding:0 9px; border:0; border-radius:7px; background:transparent; color:var(--sc-text-muted); font:700 11px var(--sc-font-main); cursor:pointer; }
.su-size-toggle button[aria-pressed="true"] { background:var(--sc-primary); color:var(--sc-primary-contrast,#1b0c00); }
.su-preview-shell { width:100%; min-height:0; display:flex; justify-content:center; overflow:visible; padding:24px; background:color-mix(in srgb,var(--sc-bg-body) 78%,var(--sc-bg-surface)); }
.su-preview-shell iframe { width:100%; min-width:280px; height:220px; border:1px solid var(--sc-border); border-radius:14px; background:var(--sc-bg-body); transition:width .25s ease, height .2s ease; }
.su-preview-shell[data-width="tablet"] iframe { width:768px; }
.su-preview-shell[data-width="mobile"] iframe { width:390px; }
/* Altura inicial por tipo só até o preview.js medir o conteúdo (data-autoheight). */
.su-preview-shell.is-compact iframe { height:200px; }.su-preview-shell.is-wide iframe,.su-preview-shell.is-full_bleed iframe,.su-preview-shell.is-viewport iframe { height:300px; }
.su-variant-docs { display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:1px; border-top:1px solid var(--sc-border); background:var(--sc-border); }
.su-variant-docs details { min-width:0; padding:20px; background:var(--sc-bg-surface); }
.su-variant-docs summary { cursor:pointer; font-size:13px; font-weight:800; }
.su-variant-docs pre { max-height:310px; overflow:auto; padding:14px; border-radius:10px; background:#151218; color:#f7f1ed; font:11px/1.55 var(--sc-font-mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.su-variant-docs dl { display:grid; grid-template-columns:94px 1fr; gap:9px; font-size:12px; }.su-variant-docs dt { color:var(--sc-text-muted); }.su-variant-docs dd { margin:0; overflow-wrap:anywhere; }
.su-variant-docs ul,.su-variant-docs p { color:var(--sc-text-muted); font-size:12px; line-height:1.55; }
.su-explore { width:min(calc(100% - 48px),1600px); margin:0 auto; padding:clamp(62px,8vw,116px) 0; }
.su-explore h1 { max-width:1000px; margin:16px 0 10px; font-size:clamp(46px,7vw,96px); line-height:.9; letter-spacing:-.08em; }
.su-explore > p { max-width:700px; color:var(--sc-text-muted); line-height:1.6; }
.su-explore-filters { position:sticky; z-index:30; top:84px; display:grid; grid-template-columns:minmax(220px,1fr) 220px 200px auto; align-items:end; gap:10px; margin:40px 0 24px; padding:14px; border:1px solid var(--sc-border); border-radius:16px; background:color-mix(in srgb,var(--sc-bg-body) 92%,transparent); backdrop-filter:blur(18px); }
.su-explore-filters label { display:grid; gap:5px; color:var(--sc-text-muted); font-size:10px; font-weight:800; text-transform:uppercase; }.su-explore-filters input,.su-explore-filters select { width:100%; padding:0 11px; }.su-explore-filters output { padding:11px 8px; color:var(--sc-primary); font:800 11px var(--sc-font-mono); white-space:nowrap; }
.su-explore-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.su-explore-card { min-width:0; overflow:hidden; border:1px solid var(--sc-border); border-radius:16px; background:var(--sc-bg-surface); }
.su-explore-card > a { display:grid; gap:4px; padding:15px; color:var(--sc-text-main); text-decoration:none; }.su-explore-card > a span { color:var(--sc-primary); font:800 9px var(--sc-font-mono); letter-spacing:.08em; text-transform:uppercase; }.su-explore-card > a strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.su-explore-preview { height:235px; overflow:hidden; border-block:1px solid var(--sc-border); background:var(--sc-bg-body); }.su-explore-preview iframe { width:200%; height:470px; border:0; transform:scale(.5); transform-origin:top left; pointer-events:none; }
.su-explore-card footer { display:flex; justify-content:space-between; gap:10px; padding:12px 15px; color:var(--sc-text-muted); font-size:10px; }.su-explore-card footer code { color:var(--sc-primary); font:inherit; }
.su-explore-card[hidden] { display:none; }
.su-catalog-grid > * { min-width:0; }
.su-catalog-card footer { flex-wrap:wrap; }
.su-component-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-bottom:38px; }
.su-component-meta .su-backlink { margin-bottom:0; }
.su-catalog-action,.su-family-action { margin-top:22px; }
@media (max-width:1180px) { .su-nav { display:none; }.su-menu-toggle { display:inline-flex; align-items:center; }.su-mobile-nav:not([hidden]) { display:grid; }.su-explore-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.su-variant-docs { grid-template-columns:1fr 1fr; }.su-variant-docs details:first-child { grid-column:1/-1; } }
@media (max-width:820px) { .su-header-actions > .su-control { display:none; }.su-preview-controls { flex-wrap:wrap; }.su-preview-controls > a { width:100%; margin-left:0; }.su-size-toggle { margin-left:auto; }.su-explore-filters { top:70px; grid-template-columns:1fr 1fr; }.su-explore-filters label:first-child { grid-column:1/-1; }.su-explore-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) { .su-header-actions .su-search-trigger { display:none; }.su-mobile-nav { inset:66px 0 auto; grid-template-columns:1fr; }.su-variant > header { padding:20px; }.su-preview-controls { padding:12px 20px; }.su-size-toggle { width:100%; margin:0; }.su-size-toggle button { flex:1; }.su-preview-shell { min-height:320px; padding:10px; }.su-preview-shell iframe { height:390px; }.su-variant-docs { grid-template-columns:1fr; }.su-variant-docs details:first-child { grid-column:auto; }.su-explore { width:calc(100% - 28px); }.su-explore-filters { grid-template-columns:1fr; }.su-explore-filters label:first-child { grid-column:auto; }.su-explore-grid { grid-template-columns:1fr; }.su-explore-preview { height:250px; }.su-explore-preview iframe { height:500px; } }
@media (max-width:720px) { .su-template-page { width:calc(100% - 28px); padding-top:55px; }.su-template-head { align-items:flex-start; flex-direction:column; }.su-template-frame { margin-top:32px; }.su-template-commercial { min-height:570px; padding:20px; }.su-template-commercial nav span { display:none; }.su-template-commercial > div { margin-top:105px; }.su-template-commercial aside { right:20px; bottom:20px; width:150px; }.su-template-app { grid-template-columns:1fr; }.su-template-app aside { display:none; }.su-template-app > div { padding:28px 20px; }.su-template-kpis { grid-template-columns:1fr; }.su-template-auth { margin:0; padding:26px 20px; border:0; border-radius:0; box-shadow:none; } }
@media (max-width:720px) { .su-vatse-link { padding-inline:9px; font-size:11px; } }
@media (max-width:720px) { .su-header { position:relative; }.su-header-actions .su-vatse-link,.su-header-actions .su-search-trigger { display:none; }.su-nav-toggle { display:inline-flex; flex-direction:column; justify-content:center; gap:4px; width:38px; height:38px; border:1px solid var(--sc-border); border-radius:10px; padding:0 9px; color:var(--sc-text-main); background:var(--sc-bg-surface); cursor:pointer; }.su-nav-toggle > span:not(.su-visually-hidden) { display:block; width:100%; height:1.5px; background:currentColor; transition:transform .18s ease,opacity .18s ease; }.su-header.is-nav-open .su-nav-toggle > span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }.su-header.is-nav-open .su-nav-toggle > span:nth-child(2) { opacity:0; }.su-header.is-nav-open .su-nav-toggle > span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }.su-header .su-nav { display:none; position:absolute; z-index:30; top:calc(100% + 8px); right:0; left:0; grid-template-columns:1fr; gap:0; overflow:hidden; border:1px solid var(--sc-border); border-radius:16px; background:var(--sc-bg-surface); box-shadow:var(--sc-shadow-lg); }.su-header.is-nav-open .su-nav { display:grid; }.su-header .su-nav .su-mobile-settings { display:grid; padding:12px 15px; }.su-header .su-nav a { min-height:46px; display:flex; align-items:center; padding:0 15px; border-bottom:1px solid var(--sc-border); color:var(--sc-text-main); }.su-header .su-nav a:last-child { border-bottom:0; }.su-header .su-nav-vatse { display:flex; color:var(--sc-primary); }.su-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } }
@media (prefers-reduced-motion: reduce) { .su-site *, .su-site *::before, .su-site *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Shared product shell and interactive documentation previews */
.su-nav a.is-active { color: var(--sc-text-main); }
.su-nav a.is-active::after { content:""; display:block; width:100%; height:2px; margin-top:7px; border-radius:99px; background:var(--sc-primary); }
.su-context-link,.su-component-crumbs a { color:var(--sc-text-muted); text-decoration:none; }
.su-context-link { display:flex; width:max-content; max-width:100%; margin-bottom:32px; font-size:13px; font-weight:750; }
.su-context-link:hover,.su-component-crumbs a:hover { color:var(--sc-primary); }
.su-component-crumbs { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:38px; color:var(--sc-text-muted); font-size:12px; }
.su-component-crumbs span[aria-current="page"] { color:var(--sc-text-main); }
.su-docs-hero > h1 { max-width:980px; }
.su-footer-brand { display:inline-flex; align-items:center; gap:9px; color:var(--sc-text-main) !important; }
.su-footer-brand img { width:28px; height:28px; object-fit:contain; }
.su-footer-brand span,.su-footer-brand strong,.su-footer-brand small { display:block; }
.su-footer-brand small { margin-top:3px; color:var(--sc-text-muted); font-size:9px; letter-spacing:.09em; text-transform:uppercase; }
.su-preview-label { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 20px; border-bottom:1px solid var(--sc-border); color:var(--sc-text-muted); font:700 10px var(--sc-font-mono); letter-spacing:.1em; }
.su-preview-label small { font:500 11px var(--sc-font-main); letter-spacing:0; }
.su-preview-stage { position:relative; isolation:isolate; width:100%; overflow:clip; }
.su-preview-stage > * { width:min(100%,760px); }
.su-preview-stage button,.su-preview-stage a,.su-preview-stage input,.su-preview-stage select,.su-preview-stage summary { cursor:pointer; }
.su-hero-demo .su-demo-card { background:radial-gradient(circle at 90% 5%,color-mix(in srgb,var(--sc-primary) 24%,transparent),transparent 34%),#171418 !important; color:#fff !important; }
.su-hero-demo .su-demo-card h2 { color:#fff; }.su-hero-demo .su-demo-status { color:#cfc7c1; }
.su-row-demo { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.su-token-demo { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.su-token-demo > div { display:grid; gap:8px; padding:13px; border:1px solid var(--sc-border); border-radius:14px; background:var(--sc-bg-surface); }
.su-token-demo i { aspect-ratio:1.45; border-radius:10px; background:var(--token); box-shadow:inset 0 0 0 1px rgba(128,128,128,.2); }
.su-token-demo b { font-size:13px; }.su-token-demo code { color:var(--sc-text-muted); font-size:10px; }
.su-theme-demo,.su-card-demo,.su-stats-demo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.su-theme-demo article { min-height:220px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:24px; border:1px solid var(--sc-border); border-radius:18px; }
.su-theme-demo article:first-child { color:#171418; background:#fff; }.su-theme-demo article:last-child { color:#fff; background:#171418; }
.su-theme-demo span { font:800 10px var(--sc-font-mono); letter-spacing:.12em; }.su-theme-demo b { font-size:22px; }
.su-container-demo { padding:16px; border:1px dashed var(--sc-primary); border-radius:18px; background:color-mix(in srgb,var(--sc-primary) 7%,transparent); }
.su-container-demo > span { color:var(--sc-primary); font:800 10px var(--sc-font-mono); }.su-container-demo .sc-section { margin-top:14px; padding:24px; border-radius:14px; background:var(--sc-bg-surface); }
.su-container-demo h3,.su-container-demo p { margin:0; }.su-container-demo p { margin-top:7px; color:var(--sc-text-muted); }
.su-grid-demo,.su-bento-demo { width:100%; gap:10px; }.su-grid-demo article { min-height:90px; display:grid; place-items:center; font-weight:850; }.su-bento-demo article { min-height:120px; display:flex; flex-direction:column; justify-content:space-between; }.su-bento-demo span { color:var(--sc-text-muted); font-size:11px; }.su-bento-demo strong { font-size:20px; }
.su-type-demo { text-align:left; }.su-type-demo h2 { max-width:9ch; margin:14px 0; font-size:clamp(44px,7vw,78px); line-height:.9; letter-spacing:-.07em; }.su-type-demo h3 { margin:24px 0 8px; }.su-type-demo p { max-width:48ch; }
.su-card-demo article { min-height:240px; padding:25px; }.su-card-demo h3 { margin:34px 0 8px; font-size:24px; }.su-card-demo a { color:var(--sc-primary); font-weight:800; text-decoration:none; }.su-card-demo .sc-card-gradient { color:#fff; background:linear-gradient(145deg,#2b1b1d,#ef6c35); }
.su-form-demo { display:grid; gap:16px; }.su-form-demo .sc-label { display:grid; gap:7px; color:var(--sc-text-muted); font-size:12px; }.su-form-demo .sc-input { width:100%; }.su-form-demo output { float:right; color:var(--sc-primary); }
.su-select-demo { width:min(100%,430px); }.su-select-demo .sc-select-trigger { width:100%; }.su-choice-demo { display:grid; gap:16px; padding:25px; border:1px solid var(--sc-border); border-radius:18px; }.su-choice-demo legend { padding:0 8px; font-weight:800; }.su-choice-demo label { display:flex; align-items:center; gap:10px; }.su-switch-line { justify-content:space-between; }
.su-otp-demo { display:grid; gap:14px; text-align:center; }.su-otp-demo .sc-otp { justify-content:center; }.su-otp-demo small { color:var(--sc-text-muted); }
.su-nav-demo { width:100%; min-height:70px; padding:10px 14px; border:1px solid var(--sc-border); border-radius:16px; background:var(--sc-bg-surface); }.su-mini-brand { color:var(--sc-primary); font-weight:900; text-decoration:none; }.su-nav-demo .sc-nav-toggle { min-width:42px; min-height:42px; }
.su-menu-demo { display:grid; place-items:center; min-height:250px; }.su-menu-demo .sc-menu-popover { min-width:320px; }.su-menu-demo .sc-menu-item { display:grid; gap:4px; text-align:left; }.su-menu-demo .sc-menu-item small { color:var(--sc-text-muted); }
.su-sidebar-demo { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:330px; overflow:hidden; border:1px solid var(--sc-border); border-radius:18px; background:var(--sc-bg-body); }.su-sidebar-demo .sc-app-sidebar { position:relative; min-height:330px; }.su-sidebar-demo > section { padding:42px 30px; }.su-sidebar-demo h3 { margin:15px 0 8px; font-size:30px; }
.su-tabs-demo .sc-tabpanel { min-height:170px; padding:25px; border:1px solid var(--sc-border); border-top:0; border-radius:0 0 15px 15px; background:var(--sc-bg-surface); }.su-tabs-demo h3,.su-tabs-demo p { margin:0; }.su-tabs-demo p { margin-top:8px; color:var(--sc-text-muted); }
.su-toast-demo { display:grid; justify-items:center; gap:20px; }.su-toast-demo .sc-toast { position:relative; inset:auto; min-width:min(100%,390px); display:grid; gap:5px; padding:16px; border:1px solid var(--sc-border); border-radius:14px; background:var(--sc-bg-surface); box-shadow:var(--sc-shadow-lg); }.su-toast-demo .sc-toast span { color:var(--sc-text-muted); font-size:12px; }
.su-progress-demo { display:grid; gap:12px; }.su-progress-demo > div:first-child { display:flex; justify-content:space-between; }.su-progress-demo small { color:var(--sc-text-muted); }
.su-skeleton-demo { display:grid; gap:12px; }.su-skeleton-demo .sc-skeleton-card { min-height:130px; }
.su-modal-demo { display:grid; place-items:center; min-height:200px; }.su-gallery-demo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.su-gallery-demo img { width:100%; height:240px; display:block; object-fit:cover; border-radius:16px; box-shadow:var(--sc-shadow-md); }
.su-accordion-demo,.su-disclosure-demo { width:min(100%,700px); }.su-timeline-demo,.su-stepper-demo,.su-activity-demo { width:min(100%,650px); }.su-timeline-demo { margin:0; }.su-stepper-demo { display:grid; grid-template-columns:repeat(3,1fr); padding:0; margin:0; }.su-stepper-demo .sc-step { display:grid; justify-items:center; gap:8px; text-align:center; }.su-stepper-demo .sc-step > span { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--sc-border); border-radius:50%; }.su-stepper-demo .is-active > span,.su-stepper-demo .is-complete > span { border-color:var(--sc-primary); color:#fff; background:var(--sc-primary); }
.su-table-demo { width:100%; }.su-stats-demo .sc-kpi-card { min-height:180px; }.su-activity-demo { padding:24px; border:1px solid var(--sc-border); border-radius:18px; background:var(--sc-bg-surface); }.su-empty-symbol { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 14px; border-radius:18px; color:var(--sc-primary); background:color-mix(in srgb,var(--sc-primary) 12%,transparent); font-size:28px; }
.su-carousel-demo { width:100%; }.su-carousel-demo .sc-carousel-card { min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; border:1px solid var(--sc-border); border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--sc-primary) 13%,var(--sc-bg-surface)),var(--sc-bg-surface)); }.su-carousel-demo h3 { margin:12px 0 7px; font-size:30px; }.su-carousel-demo p { margin:0; color:var(--sc-text-muted); }
.su-coverflow-demo { width:100%; }.su-coverflow-demo .sc-coverflow-track { min-height:300px; }.su-coverflow-demo .sc-coverflow-slide { width:min(70vw,360px); }.su-coverflow-demo img { width:100%; height:260px; display:block; object-fit:cover; border-radius:18px; }
.su-wheel-demo { display:grid; grid-template-columns:270px 1fr; align-items:center; gap:34px; }.su-wheel-orbit { position:relative; width:260px; height:260px; border:1px solid var(--sc-border); border-radius:50%; }.su-wheel-orbit::before { content:""; position:absolute; inset:26%; border:1px dashed var(--sc-primary); border-radius:50%; }.su-wheel-orbit .sc-slidewheel-item { position:absolute; top:50%; left:50%; width:62px; height:62px; display:grid; place-items:center; border:1px solid var(--sc-border); border-radius:18px; background:var(--sc-bg-surface); transform:rotate(calc(var(--i) * 90deg)) translateX(120px) rotate(calc(var(--i) * -90deg)); transform-origin:0 0; box-shadow:var(--sc-shadow-md); }.su-wheel-demo h3 { margin:12px 0; font-size:32px; }.su-wheel-demo p { color:var(--sc-text-muted); }
.su-photo-demo { width:100%; }.su-photo-demo .sc-photo-rail-track { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.su-photo-demo figure { margin:0; overflow:hidden; border-radius:18px; }.su-photo-demo img { width:100%; height:280px; display:block; object-fit:cover; }
.su-background-demo { min-height:330px; display:flex; flex-direction:column; justify-content:flex-end; padding:30px; overflow:hidden; border:1px solid var(--sc-border); border-radius:22px; color:#fff; background-color:#171418; }.su-background-demo h3 { max-width:13ch; margin:13px 0 0; font-size:36px; line-height:1; }
.su-pointer-demo,.su-tilt-demo,.su-reveal-demo article { min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; }.su-pointer-demo h3,.su-tilt-demo h3,.su-reveal-demo h3 { margin:12px 0 7px; font-size:31px; }.su-pointer-demo p,.su-tilt-demo p,.su-reveal-demo p { margin:0; color:var(--sc-text-muted); }.su-ripple-demo { width:auto; }
.su-marketing-demo { min-height:390px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr); align-items:center; gap:35px; padding:42px; overflow:hidden; border-radius:24px; color:#fff; background:radial-gradient(circle at 85% 20%,rgba(239,108,53,.5),transparent 26%),#171418; }.su-marketing-demo h2 { margin:14px 0; font-size:clamp(43px,6vw,72px); line-height:.9; letter-spacing:-.07em; }.su-marketing-demo p { max-width:45ch; color:#cec5c0; }.su-marketing-orbit { width:220px; height:220px; display:grid; place-items:center; justify-self:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; box-shadow:0 0 0 38px rgba(255,255,255,.04),0 0 0 76px rgba(255,255,255,.025); }.su-marketing-orbit img { width:88px; height:88px; object-fit:contain; }
.su-pricing-demo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.su-pricing-demo .sc-price-card { min-height:340px; display:flex; flex-direction:column; padding:25px; border:1px solid var(--sc-border); border-radius:20px; background:var(--sc-bg-surface); }.su-pricing-demo .is-featured { border-color:var(--sc-primary); box-shadow:0 20px 55px color-mix(in srgb,var(--sc-primary) 18%,transparent); }.su-pricing-demo h3 { margin:22px 0; font-size:34px; }.su-pricing-demo h3 small { color:var(--sc-text-muted); font-size:12px; }.su-pricing-demo ul { display:grid; gap:9px; padding-left:18px; color:var(--sc-text-muted); }.su-pricing-demo .sc-btn { margin-top:auto; }
.su-testimonial-demo { display:grid; gap:25px; margin:0; padding:34px; border:1px solid var(--sc-border); border-radius:22px; background:var(--sc-bg-surface); }.su-testimonial-demo blockquote { margin:0; font-size:clamp(27px,4vw,43px); line-height:1.07; letter-spacing:-.05em; }.su-testimonial-demo figcaption { display:flex; align-items:center; gap:11px; }.su-testimonial-demo figcaption div,.su-testimonial-demo figcaption strong,.su-testimonial-demo figcaption small { display:block; }.su-testimonial-demo figcaption small { color:var(--sc-text-muted); }.su-testimonial-demo .sc-logo-cloud { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; padding-top:20px; border-top:1px solid var(--sc-border); color:var(--sc-text-muted); font-size:11px; letter-spacing:.12em; }
.su-chat-demo { min-height:430px; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; border:1px solid var(--sc-border); border-radius:22px; background:var(--sc-bg-surface); }.su-chat-demo > header { display:flex; align-items:center; gap:10px; padding:15px; border-bottom:1px solid var(--sc-border); }.su-chat-demo header div,.su-chat-demo header strong,.su-chat-demo header small { display:block; }.su-chat-demo header small { color:var(--sc-text-muted); }.su-chat-flow { display:flex; flex-direction:column; gap:10px; padding:20px; }.su-chat-demo .sc-chat-message { max-width:75%; display:grid; gap:5px; align-self:flex-start; padding:12px 14px; border-radius:6px 15px 15px 15px; background:var(--sc-bg-input); }.su-chat-demo .sc-chat-message.is-own { align-self:flex-end; border-radius:15px 6px 15px 15px; color:#fff; background:var(--sc-primary); }.su-chat-demo .sc-chat-message small { opacity:.72; font-size:9px; text-align:right; }.su-chat-demo .sc-chat-composer { display:grid; grid-template-columns:1fr auto; gap:9px; padding:13px; border-top:1px solid var(--sc-border); }
.su-kanban-demo { width:100%; }.su-inbox-demo { min-height:410px; display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); overflow:hidden; border:1px solid var(--sc-border); border-radius:20px; background:var(--sc-bg-surface); }.su-inbox-demo > aside { padding:12px; border-right:1px solid var(--sc-border); }.su-inbox-demo .sc-search-filter { display:block; margin-bottom:10px; }.su-inbox-demo .sc-inbox-item { width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:12px; border:0; border-radius:12px; color:var(--sc-text-main); background:transparent; text-align:left; }.su-inbox-demo .sc-inbox-item.is-active { background:color-mix(in srgb,var(--sc-primary) 11%,var(--sc-bg-input)); }.su-inbox-demo .sc-inbox-item span:nth-child(2),.su-inbox-demo .sc-inbox-item strong,.su-inbox-demo .sc-inbox-item small { display:block; min-width:0; }.su-inbox-demo .sc-inbox-item small { overflow:hidden; color:var(--sc-text-muted); text-overflow:ellipsis; white-space:nowrap; }.su-inbox-demo time { color:var(--sc-text-muted); font-size:9px; }.su-inbox-demo > div { padding:45px 30px; }.su-filter-demo { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 220px auto; gap:10px; }.su-filter-demo .sc-search-filter { position:relative; }.su-filter-demo .sc-search-filter span { position:absolute; z-index:2; top:50%; left:13px; transform:translateY(-50%); }.su-filter-demo .sc-search-filter input { padding-left:36px; }

@media (max-width: 900px) {
  .su-token-demo { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .su-wheel-demo,.su-marketing-demo { grid-template-columns:1fr; }
  .su-marketing-orbit { display:none; }
  .su-filter-demo { grid-template-columns:1fr 1fr; }.su-filter-demo .sc-search-filter { grid-column:1/-1; }
}
@media (max-width: 720px) {
  .su-nav a.is-active::after { display:none; }
  .su-preview-label { align-items:flex-start; flex-direction:column; }
  .su-token-demo,.su-theme-demo,.su-card-demo,.su-stats-demo,.su-pricing-demo { grid-template-columns:1fr; }
  .su-grid-demo,.su-bento-demo { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .su-bento-demo .sc-col-span-2 { grid-column:span 2; }
  .su-sidebar-demo { grid-template-columns:1fr; }.su-sidebar-demo .sc-app-sidebar { display:none; }
  .su-gallery-demo { grid-template-columns:1fr; }.su-gallery-demo img { height:210px; }
  .su-stepper-demo { grid-template-columns:1fr; gap:18px; }.su-stepper-demo .sc-step { grid-template-columns:auto 1fr; justify-items:start; text-align:left; }
  .su-wheel-demo { gap:18px; }.su-wheel-orbit { width:220px; height:220px; margin:auto; }.su-wheel-orbit .sc-slidewheel-item { transform:rotate(calc(var(--i) * 90deg)) translateX(100px) rotate(calc(var(--i) * -90deg)); }
  .su-photo-demo .sc-photo-rail-track { grid-template-columns:1fr; }.su-photo-demo figure:not(:first-child) { display:none; }
  .su-marketing-demo { min-height:430px; padding:27px 22px; }.su-marketing-demo h2 { font-size:46px; }
  .su-inbox-demo { grid-template-columns:1fr; }.su-inbox-demo > div { display:none; }.su-inbox-demo > aside { border-right:0; }
  .su-filter-demo { grid-template-columns:1fr; }.su-filter-demo .sc-search-filter { grid-column:auto; }
  .su-chat-demo .sc-chat-composer { grid-template-columns:1fr; }
  .su-footer nav { gap:12px; }
}

/* VATSE public identity · 2026-08-29
   The public shell owns a small semantic palette so mode remains reliable
   even when the component theme changes its own tokens. */
:root,
html[data-mode="light"],html[data-theme][data-mode="light"] {
  color-scheme:light;
  --su-page-bg:#f7f4f1;
  --su-page-surface:#ffffff;
  --su-page-input:#f1ece8;
  --su-page-ink:#1a1716;
  --su-page-muted:#6f6661;
  --su-page-border:rgba(41,31,27,.14);
  --su-page-grid:rgba(41,31,27,.045);
  --su-page-header:rgba(247,244,241,.88);
  --su-page-hover:#fff8f3;
  --su-page-shadow:rgba(60,39,29,.13);
}
html[data-mode="dark"],html[data-theme][data-mode="dark"] {
  color-scheme:dark;
  --sc-primary:#d9541d;
  --sc-accent:#ff6a1a;
  --sc-secondary:#f2f2f2;
  --sc-success:#5fd3a4;
  --sc-danger:#ff6b6b;
  --sc-warning:#ffb457;
  --sc-info:#72a7ff;
  --sc-bg-body:#090909;
  --sc-bg-surface:#111111;
  --sc-bg-input:#181818;
  --sc-text-main:#f2f2f2;
  --sc-text-muted:#a6a6a6;
  --sc-border:rgba(255,255,255,.12);
  --sc-ring:0 0 0 4px rgba(255,106,26,.3);
  --sc-shadow-sm:0 1px 2px rgba(0,0,0,.34);
  --sc-shadow-md:0 18px 44px rgba(0,0,0,.38);
  --sc-shadow-lg:0 32px 90px rgba(0,0,0,.62);
  --su-page-bg:#090909;
  --su-page-surface:#111111;
  --su-page-input:#181818;
  --su-page-ink:#f2f2f2;
  --su-page-muted:#a6a6a6;
  --su-page-border:rgba(255,255,255,.12);
  --su-page-grid:rgba(255,255,255,.022);
  --su-page-header:rgba(9,9,9,.82);
  --su-page-hover:#15110f;
  --su-page-shadow:rgba(0,0,0,.42);
}
@media (prefers-color-scheme:dark) {
  html[data-mode="system"] {
    color-scheme:dark;
    --sc-bg-body:#090909;
    --sc-bg-surface:#111111;
    --sc-bg-input:#181818;
    --sc-text-main:#f2f2f2;
    --sc-text-muted:#a6a6a6;
    --sc-border:rgba(255,255,255,.12);
    --su-page-bg:#090909;
    --su-page-surface:#111111;
    --su-page-input:#181818;
    --su-page-ink:#f2f2f2;
    --su-page-muted:#a6a6a6;
    --su-page-border:rgba(255,255,255,.12);
    --su-page-grid:rgba(255,255,255,.022);
    --su-page-header:rgba(9,9,9,.82);
    --su-page-hover:#15110f;
    --su-page-shadow:rgba(0,0,0,.42);
  }
}
.su-site {
  min-height:100vh;
  color:var(--su-page-ink);
  background:
    radial-gradient(circle at 78% 8%,rgba(217,84,29,.10),transparent 26rem),
    linear-gradient(var(--su-page-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--su-page-grid) 1px,transparent 1px),
    var(--su-page-bg);
  background-size:auto,72px 72px,72px 72px,auto;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.su-site::before { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent,var(--su-page-bg) 78%); }
.su-header { width:min(calc(100% - 64px),1440px); min-height:72px; border-color:var(--su-page-border); background:var(--su-page-header); }
.su-brand { gap:11px; color:var(--su-page-ink); }.su-brand img { width:36px; height:36px; }.su-brand strong { font-size:14px; letter-spacing:.01em; }.su-brand small { color:var(--su-page-muted); font-size:8px; letter-spacing:.16em; }
.su-nav { gap:clamp(13px,1.45vw,23px); }.su-nav a,.su-footer a { color:var(--su-page-muted); font-size:12px; font-weight:680; letter-spacing:.01em; }.su-nav a:hover,.su-nav a:focus-visible,.su-footer a:hover { color:var(--su-page-ink); }
.su-nav a.is-active { color:var(--su-page-ink); }.su-nav a.is-active::after { height:1px; margin-top:8px; background:#ff6a1a; box-shadow:0 0 12px rgba(255,106,26,.45); }
.su-search-trigger,.su-vatse-link { min-height:38px; border-color:var(--su-page-border); background:var(--su-page-surface); color:var(--su-page-ink); box-shadow:none; }
.su-header-actions svg { width:15px; height:15px; flex:0 0 auto; }
.su-search-trigger { display:inline-flex; align-items:center; gap:7px; }
.su-search-trigger:hover,.su-vatse-link:hover { border-color:rgba(255,106,26,.64); background:var(--su-page-hover); color:var(--su-page-ink); }
.su-vatse-link { gap:8px; border-radius:999px; padding-inline:14px; font:760 10px var(--sc-font-mono); letter-spacing:.08em; }
.su-kicker { color:#ff6a1a; }
.su-hero,.su-proof,.su-feature-grid,.su-community,.su-footer { width:min(calc(100% - 64px),1440px); }
.su-hero { position:relative; min-height:calc(100vh - 72px); grid-template-columns:minmax(0,.94fr) minmax(430px,1.06fr); padding-block:clamp(80px,10vw,138px); }
.su-hero::before { content:""; position:absolute; top:42px; left:-17px; width:36px; height:36px; border-top:1px solid rgba(255,106,26,.44); border-left:1px solid rgba(255,106,26,.44); }
.su-hero h1,.su-feature-grid h2,.su-community h2,.su-catalog h1,.su-component-page h1,.su-template-head h1 { color:var(--su-page-ink); font-weight:790; letter-spacing:-.068em; }
.su-hero p,.su-catalog>p,.su-component-summary { color:var(--su-page-muted); }
.su-install { border-color:var(--su-page-border); background:color-mix(in srgb,var(--su-page-surface) 88%,transparent); }.su-install code { color:var(--su-page-ink); }.su-install button { color:#fff; background:#c74714; }
.su-site .sc-btn-primary { --sc-btn-bg:#c94b16; --sc-btn-bg-hover:#e05a1d; --sc-btn-color:#fff; --sc-btn-color-hover:#fff; --sc-btn-border:1px solid #ed6a32; text-decoration:none; }
.su-site .sc-btn-outline { --sc-btn-bg:color-mix(in srgb,var(--su-page-surface) 86%,transparent); --sc-btn-bg-hover:rgba(255,106,26,.1); --sc-btn-color:var(--su-page-ink); --sc-btn-color-hover:var(--su-page-ink); --sc-btn-border:1px solid var(--su-page-border); }
.su-site .sc-btn-ghost { --sc-btn-color:var(--su-page-ink); --sc-btn-color-hover:#d9541d; }
.su-hero-demo { padding:1px; border:1px solid rgba(255,106,26,.42); border-radius:28px; background:linear-gradient(135deg,rgba(255,106,26,.52),rgba(255,255,255,.05) 35%,rgba(255,106,26,.08)); box-shadow:0 28px 100px rgba(0,0,0,.58),0 0 70px rgba(255,106,26,.08); }
.su-hero-demo .su-demo-card { min-height:510px; border-radius:27px; background:radial-gradient(circle at 92% 5%,rgba(255,106,26,.25),transparent 33%),#0c0c0c !important; }
.su-demo-tile { border-color:rgba(255,255,255,.11); background:#151515; }.su-demo-tile:hover,.su-demo-tile:focus-visible,.su-demo-tile.is-active { border-color:#ff6a1a; background:#22140e; }
.su-proof { border-color:var(--su-page-border); }.su-proof article { border-color:var(--su-page-border); }.su-proof h2 { color:var(--su-page-ink); }.su-proof p { color:var(--su-page-muted); }
.su-feature-grid { gap:1px; }.su-feature { min-height:230px; border-radius:0; border-color:var(--su-page-border); background:var(--su-page-surface); }.su-feature:hover { border-color:rgba(255,106,26,.72); background:var(--su-page-hover); box-shadow:inset 0 0 0 1px rgba(255,106,26,.12); }.su-feature b { color:var(--su-page-ink); }.su-feature span { color:var(--su-page-muted); }
.su-community { border:1px solid rgba(255,106,26,.22); border-bottom:0; color:#fff; background:radial-gradient(circle at 88% 20%,rgba(255,106,26,.16),transparent 34%),#171317; }
.su-community h2 { color:#fff; }.su-community p { color:#cbc3be; }
.su-footer { border-top:1px solid var(--su-page-border); }.su-footer-brand { color:var(--su-page-ink)!important; }
.su-command { border-color:var(--su-page-border); background:var(--su-page-surface); color:var(--su-page-ink); }.su-command input { color:var(--su-page-ink); }.su-command-item:hover { background:rgba(255,106,26,.1); }

.su-catalog { width:min(calc(100% - 64px),1440px); padding-top:clamp(70px,8vw,112px); }.su-context-link,.su-component-crumbs,.su-component-crumbs a { color:var(--su-page-muted); }.su-context-link:hover,.su-component-crumbs a:hover { color:#ff6a1a; }
.su-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:58px; }
.su-catalog-card { min-width:0; overflow:hidden; border:1px solid var(--su-page-border); border-radius:20px; background:var(--su-page-surface); transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.su-catalog-card:hover { transform:translateY(-4px); border-color:rgba(255,106,26,.48); box-shadow:0 24px 70px var(--su-page-shadow); }
.su-catalog-preview { position:relative; isolation:isolate; min-height:270px; display:grid; place-items:center; overflow:hidden; padding:22px; border-bottom:1px solid rgba(255,255,255,.09); background:radial-gradient(circle at 50% 0,rgba(255,106,26,.13),transparent 45%),#0a0a0a; pointer-events:none; }
.su-catalog-preview::before { content:"PREVIEW"; position:absolute; z-index:8; top:13px; left:15px; color:#6f6f6f; font:700 8px var(--sc-font-mono); letter-spacing:.16em; }
.su-catalog-preview>* { width:min(100%,620px); max-width:100%; }
.su-catalog-preview iframe { width:100%; height:270px; border:0; background:#fff; }
.su-catalog-preview .su-marketing-demo,.su-catalog-preview .su-chat-demo,.su-catalog-preview .su-inbox-demo { min-height:225px; }
.su-catalog-preview .su-token-demo { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.su-catalog-preview .su-token-demo>div { padding:9px; border-radius:10px; }
.su-catalog-preview .su-token-demo i { aspect-ratio:1.7; }
.su-catalog-preview .su-token-demo b { font-size:11px; }
.su-catalog-preview .su-token-demo code { font-size:8px; }
.su-catalog-preview .su-marketing-demo { padding:24px; grid-template-columns:1fr; }.su-catalog-preview .su-marketing-demo h2 { font-size:34px; }.su-catalog-preview .su-marketing-orbit { display:none; }
.su-catalog-preview .su-sidebar-demo { min-height:225px; grid-template-columns:150px 1fr; }.su-catalog-preview .su-sidebar-demo .sc-app-sidebar { min-height:225px; }.su-catalog-preview .su-sidebar-demo>section { padding:34px 20px; }
.su-catalog-preview .su-gallery-demo img,.su-catalog-preview .su-coverflow-demo img { height:190px; }
.su-catalog-preview .su-wheel-orbit { transform:scale(.72); }.su-catalog-preview .su-wheel-demo { gap:0; grid-template-columns:230px 1fr; }
.su-catalog-preview .su-pricing-demo .sc-price-card { min-height:225px; padding:18px; }.su-catalog-preview .su-pricing-demo ul { display:none; }.su-catalog-preview .su-pricing-demo h3 { margin:14px 0; font-size:25px; }
.su-catalog-preview .su-photo-demo img { height:210px; }
.su-catalog-preview .su-background-demo { width:calc(100% + 44px); max-width:none; min-height:270px; margin:-22px; border:0; border-radius:0; }
.su-catalog-copy { min-height:220px; display:flex; flex-direction:column; padding:24px; }.su-catalog-copy>span { color:#ff6a1a; font:750 9px var(--sc-font-mono); letter-spacing:.15em; text-transform:uppercase; }.su-catalog-copy h2 { margin:18px 0 8px; color:var(--su-page-ink); font-size:24px; letter-spacing:-.045em; }.su-catalog-copy p { margin:0; color:var(--su-page-muted); font-size:13px; line-height:1.6; }.su-catalog-copy footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:22px; }.su-catalog-copy small { color:var(--su-page-muted); }.su-catalog-copy a { color:var(--su-page-ink); font-size:12px; font-weight:760; text-decoration:none; }.su-catalog-copy a span { color:#ff6a1a; }
.su-template-thumb { display:flex; align-items:flex-end; justify-content:space-between; padding:28px; background:radial-gradient(circle at 80% 20%,rgba(255,106,26,.24),transparent 28%),linear-gradient(145deg,#171717,#080808); }.su-template-thumb>span { color:#ff6a1a; font:800 38px var(--sc-font-mono); }.su-template-thumb>div { width:62%; display:grid; gap:9px; }.su-template-thumb i { display:block; height:31px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(255,255,255,.055); }.su-template-thumb i:first-child { width:74%; border-color:rgba(255,106,26,.46); background:rgba(255,106,26,.12); }.su-template-thumb i:last-child { width:52%; }

.su-icon-tools { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:52px; padding:16px; border:1px solid var(--su-page-border); border-radius:16px; background:var(--su-page-surface); }.su-icon-tools label { position:relative; width:min(100%,520px); }.su-icon-search-glyph { position:absolute; z-index:2; top:50%; left:14px; width:18px; height:18px; display:block; color:#ff6a1a; transform:translateY(-50%); }.su-icon-search-glyph svg,.su-icon-glyph svg { display:block; width:100%!important; height:100%!important; }.su-icon-tools input { padding-left:44px; color:var(--su-page-ink); background:var(--su-page-input); }.su-icon-tools>span { color:var(--su-page-muted); font-size:12px; }.su-icon-tools strong { color:var(--su-page-ink); }
.su-icon-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; margin-top:18px; }.su-icon-card { min-width:0; min-height:134px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px; border:1px solid var(--su-page-border); border-radius:14px; color:var(--su-page-ink); background:var(--su-page-surface); cursor:pointer; text-align:left; transition:border-color .18s ease,background .18s ease,transform .18s ease; }.su-icon-card:hover,.su-icon-card:focus-visible { transform:translateY(-3px); border-color:rgba(255,106,26,.6); background:var(--su-page-hover); outline:none; }.su-icon-glyph { width:27px!important; height:27px!important; display:block; flex:0 0 auto; color:#ff6a1a; }.su-icon-card>span:not(.su-icon-glyph) { width:100%; overflow:hidden; font:650 10px var(--sc-font-mono); text-overflow:ellipsis; white-space:nowrap; }.su-icon-card small { color:var(--su-page-muted); font-size:9px; }.su-icon-card[data-copy-state="success"] { border-color:#258866; }.su-icon-card[data-copy-state="success"] .su-icon-glyph { color:#258866; }

.su-component-page { width:min(calc(100% - 64px),1280px); }.su-component-preview { border-color:var(--su-page-border); background:var(--su-page-surface); }.su-preview-label,.su-preview-meta { border-color:var(--su-page-border); color:var(--su-page-muted); }.su-preview-stage { min-height:420px; background:radial-gradient(circle at 50% 0,rgba(255,106,26,.14),transparent 42%),linear-gradient(var(--su-page-grid) 1px,transparent 1px),linear-gradient(90deg,var(--su-page-grid) 1px,transparent 1px),var(--su-page-bg); background-size:auto,38px 38px,38px 38px,auto; }.su-component-grid article { border-color:var(--su-page-border); background:var(--su-page-surface); }.su-component-grid pre { border:1px solid rgba(255,255,255,.1); background:#070707; color:#ececec; }.su-related a { border-color:var(--su-page-border); color:var(--su-page-ink); background:var(--su-page-surface); }
.su-preview-stage .sc-card,.su-preview-stage .sc-price-card,.su-preview-stage .sc-kpi-card,.su-preview-stage .sc-toast { color:#f2f2f2; background:#121212; }.su-preview-stage .sc-input,.su-preview-stage select { color:#f2f2f2; background:#171717; }.su-preview-stage .sc-input::placeholder { color:#737373; }

.su-background-demo { position:relative; min-height:360px; background:#0a0a0a; }.su-background-demo .su-kicker,.su-background-demo h3 { position:relative; z-index:4; }.su-background-demo h3 { color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.7); }
.su-preview-aurora .su-background-demo { background:radial-gradient(circle at 18% 24%,rgba(255,94,20,.52),transparent 31%),radial-gradient(circle at 78% 65%,rgba(128,36,8,.5),transparent 33%),#090909; }.su-preview-aurora .su-background-demo::after { content:""; position:absolute; inset:-35%; background:conic-gradient(from 30deg,transparent,rgba(255,105,26,.46),transparent 36%,rgba(156,47,10,.38),transparent 72%); filter:blur(42px); animation:su-aurora-drift 8s ease-in-out infinite alternate; }
.su-preview-animated-gradient .su-background-demo { background:linear-gradient(120deg,#090909,#351207,#b33d0c,#190b07,#090909); background-size:320% 320%; animation:su-gradient-shift 7s ease-in-out infinite; }
.su-preview-grid-background .su-background-demo { background:radial-gradient(circle at 76% 20%,rgba(255,106,26,.2),transparent 30%),linear-gradient(rgba(255,106,26,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,106,26,.18) 1px,transparent 1px),#090909; background-size:auto,34px 34px,34px 34px,auto; }.su-preview-grid-background .su-background-demo::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:#ff6a1a; box-shadow:0 0 0 8px rgba(255,106,26,.12),0 0 34px #ff6a1a; animation:su-grid-node 4s ease-in-out infinite; }
.su-preview-beams .su-background-demo { background:radial-gradient(circle at 50% 110%,rgba(255,106,26,.36),transparent 46%),#090909; }.su-preview-beams .su-background-demo::after { content:""; position:absolute; inset:-40% -10%; background:repeating-linear-gradient(102deg,transparent 0 9%,rgba(255,106,26,.14) 10%,transparent 12% 20%); filter:blur(3px); animation:su-beams-sweep 7s linear infinite; }
.su-preview-noise-hud .su-background-demo { background:radial-gradient(circle at 72% 30%,rgba(255,106,26,.2),transparent 28%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),#070707; }.su-preview-noise-hud .su-background-demo::after { content:"VATSE / SYSTEM / 01"; position:absolute; top:24px; right:25px; padding:8px 10px; border:1px solid rgba(255,106,26,.34); color:#ff8d55; font:700 9px var(--sc-font-mono); letter-spacing:.14em; animation:su-hud-pulse 2.2s steps(2,end) infinite; }
@keyframes su-aurora-drift { from{ transform:translate3d(-5%,-3%,0) rotate(-8deg) scale(.9); } to{ transform:translate3d(7%,5%,0) rotate(18deg) scale(1.12); } }
@keyframes su-gradient-shift { 0%,100%{background-position:0 50%} 50%{background-position:100% 50%} }
@keyframes su-grid-node { 0%,100%{left:18%;top:72%} 50%{left:78%;top:24%} }
@keyframes su-beams-sweep { from{transform:translateX(-18%) rotate(-4deg)} to{transform:translateX(18%) rotate(4deg)} }
@keyframes su-hud-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }

/* Movimento visível: o catálogo demonstra a interação antes do usuário clicar. */
.su-preview-button-effects .sc-btn:nth-child(1) { animation:su-demo-ripple 2.7s ease-in-out infinite; }
.su-preview-button-effects .sc-btn:nth-child(2) { animation:su-demo-slide 3.2s ease-in-out infinite; background-position:0 0; }
.su-preview-button-effects .sc-btn:nth-child(3) { animation:su-demo-spotlight 2.9s ease-in-out infinite; }
.su-preview-coverflow .sc-coverflow-slide { animation:su-demo-float 3.4s ease-in-out infinite; }
.su-preview-coverflow .sc-coverflow-slide:nth-child(2) { animation-delay:-1.1s; }
.su-preview-coverflow .sc-coverflow-slide:nth-child(3) { animation-delay:-2.2s; }
.su-preview-slidewheel .su-wheel-orbit { animation:su-demo-orbit 12s linear infinite; }
.su-preview-slidewheel .sc-slidewheel-item { animation:su-demo-counter-orbit 12s linear infinite; }
.su-preview-reveal .sc-card { animation:su-demo-reveal 3.2s ease-in-out infinite; }
.su-preview-tilt .sc-card-3d { animation:su-demo-tilt 4s ease-in-out infinite; }
.su-preview-ripple .sc-btn { animation:su-demo-ripple 2.7s ease-in-out infinite; }
@keyframes su-demo-ripple { 0%,100% { box-shadow:0 0 0 0 rgba(217,84,29,0); } 40% { box-shadow:0 0 0 10px rgba(217,84,29,.16); } }
@keyframes su-demo-slide { 0%,100% { background-position:0 0; } 50% { background-position:100% 0; } }
@keyframes su-demo-spotlight { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.24); box-shadow:0 0 28px rgba(217,84,29,.28); } }
@keyframes su-demo-float { 0%,100% { translate:0 0; } 50% { translate:0 -10px; } }
@keyframes su-demo-orbit { to { rotate:360deg; } }
@keyframes su-demo-counter-orbit { to { rotate:-360deg; } }
@keyframes su-demo-reveal { 0%,15% { opacity:.35; translate:0 18px; } 45%,80% { opacity:1; translate:0 0; } 100% { opacity:.35; translate:0 18px; } }
@keyframes su-demo-tilt { 0%,100% { transform:perspective(700px) rotateX(0) rotateY(-3deg); } 50% { transform:perspective(700px) rotateX(2deg) rotateY(5deg) translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .su-preview-button-effects .sc-btn,
  .su-preview-coverflow .sc-coverflow-slide,
  .su-preview-slidewheel .su-wheel-orbit,
  .su-preview-slidewheel .sc-slidewheel-item,
  .su-preview-reveal .sc-card,
  .su-preview-tilt .sc-card-3d,
  .su-preview-ripple .sc-btn { animation:none !important; }
}

@media (max-width:1180px) {
  .su-header { position:sticky; width:calc(100% - 36px); }
  .su-nav-toggle { display:inline-flex; flex-direction:column; justify-content:center; gap:4px; width:40px; height:40px; margin-left:auto; border:1px solid var(--su-page-border); border-radius:10px; padding:0 10px; color:var(--su-page-ink); background:var(--su-page-surface); cursor:pointer; }
  .su-nav-toggle>span:not(.su-visually-hidden) { display:block; width:100%; height:1.5px; background:currentColor; }
  .su-header .su-nav { display:none; position:absolute; z-index:30; top:calc(100% + 8px); right:0; left:0; overflow:hidden; border:1px solid var(--su-page-border); border-radius:16px; background:var(--su-page-surface); box-shadow:0 28px 70px var(--su-page-shadow); }
  .su-header.is-nav-open .su-nav { display:grid; }
  .su-header .su-nav a { min-height:49px; display:flex; align-items:center; padding:0 17px; border-bottom:1px solid var(--su-page-border); color:var(--su-page-ink); }
  .su-header .su-nav-vatse { display:flex; color:#ff7a36; }.su-nav a.is-active::after { display:none; }
  .su-hero { grid-template-columns:1fr; }.su-hero-demo { max-width:780px; }
  .su-icon-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .su-header-actions .su-search-trigger { display:none; }.su-vatse-link { padding-inline:11px; font-size:9px; }
  .su-hero,.su-proof,.su-feature-grid,.su-community,.su-footer,.su-catalog,.su-component-page,.su-template-page { width:calc(100% - 28px); }
  .su-hero { padding-top:54px; }.su-hero h1 { font-size:clamp(45px,13.4vw,66px); }.su-hero-demo .su-demo-card { min-height:430px; }
  .su-catalog-grid { grid-template-columns:1fr; }.su-catalog-preview { min-height:240px; }.su-catalog-preview .su-background-demo { min-height:240px; }
  .su-catalog-preview .su-token-demo { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .su-icon-tools { align-items:stretch; flex-direction:column; }.su-icon-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.su-icon-card { min-height:116px; padding:13px; }
  .su-component-preview { border-radius:17px; }.su-preview-stage { min-height:350px; padding:22px 16px; }.su-preview-meta { flex-direction:column; }
}
@media (max-width:430px) { .su-icon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.su-brand small { display:none; }.su-vatse-link { display:none; } }

/* Product documentation, real template previews and Explore discovery */
.su-template-frame iframe { display:block; width:100%; min-height:900px; border:0; background:#fff; }
.su-template-device-controls { display:flex; align-items:center; gap:8px; margin:30px 0 -28px; color:var(--sc-text-muted); font-size:12px; }
.su-template-device-controls span { margin-right:auto; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.su-template-device-controls a { padding:7px 10px; border:1px solid var(--sc-border); border-radius:999px; color:inherit; text-decoration:none; }
.su-template-thumb { padding:0; overflow:hidden; background:#090909; }
.su-template-thumb img { display:block; width:100%; height:300px; object-fit:cover; object-position:top; transition:transform .45s ease; }
.su-template-catalog-card:hover .su-template-thumb img { transform:scale(1.025); }
.su-template-source { max-height:70vh; overflow:auto; white-space:pre; }

.su-doc-shell { width:min(calc(100% - 48px),1500px); display:grid; grid-template-columns:260px minmax(0,1fr) 190px; gap:clamp(28px,4vw,68px); margin:0 auto; padding:42px 0 100px; }
.su-doc-sidebar,.su-doc-toc { position:sticky; top:100px; align-self:start; max-height:calc(100vh - 125px); overflow:auto; scrollbar-width:thin; }
.su-doc-sidebar { display:grid; gap:18px; padding:20px; border:1px solid var(--sc-border); border-radius:18px; background:color-mix(in srgb,var(--sc-bg-surface) 92%,transparent); }
.su-doc-home { color:var(--sc-text-main); font-size:17px; font-weight:850; text-decoration:none; }
.su-doc-back { width:max-content; color:var(--sc-text-muted); font-size:12px; text-decoration:none; }
.su-doc-back:hover,.su-doc-back:focus-visible { color:var(--sc-primary); }
.su-doc-sidebar label,.su-doc-sidebar section { display:grid; gap:6px; }
.su-doc-sidebar section h2 { margin:12px 0 4px; color:var(--sc-text-muted); font:750 10px var(--sc-font-mono); letter-spacing:.1em; text-transform:uppercase; }
.su-doc-sidebar section a { padding:7px 9px; border-radius:8px; color:var(--sc-text-muted); font-size:13px; text-decoration:none; }
.su-doc-sidebar section a:hover,.su-doc-sidebar section a.is-active { color:var(--sc-text-main); background:color-mix(in srgb,var(--sc-primary) 13%,transparent); }
.su-doc-article { min-width:0; }
.su-doc-article>h1 { max-width:13ch; margin:17px 0; font-size:clamp(42px,6vw,78px); line-height:.94; letter-spacing:-.065em; }
.su-doc-lead { max-width:720px; color:var(--sc-text-muted); font-size:clamp(17px,2vw,21px); line-height:1.65; }
.su-doc-content { display:grid; gap:18px; margin-top:42px; }
.su-doc-content section,.su-doc-start { padding:clamp(22px,4vw,42px); border:1px solid var(--sc-border); border-radius:22px; background:var(--sc-bg-surface); }
.su-doc-content h2,.su-doc-start h2 { margin:0 0 14px; font-size:clamp(24px,3vw,36px); letter-spacing:-.04em; }
.su-doc-content p,.su-doc-content li { color:var(--sc-text-muted); line-height:1.7; }
.su-doc-content pre,.su-doc-start pre { max-width:100%; overflow:auto; padding:16px; border:1px solid var(--sc-border); border-radius:12px; background:#080808; color:#f4f0ee; }
.su-doc-toc { display:grid; gap:10px; padding-top:15px; }
.su-doc-toc b { margin-bottom:5px; color:var(--sc-text-main); font-size:12px; }
.su-doc-toc a { color:var(--sc-text-muted); font-size:12px; text-decoration:none; }
.su-doc-toc a:hover { color:var(--sc-primary); }
.su-doc-start { margin-top:38px; background:linear-gradient(145deg,color-mix(in srgb,var(--sc-primary) 12%,var(--sc-bg-surface)),var(--sc-bg-surface)); }
.su-doc-start-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:25px 0; }
.su-doc-start-steps article { min-width:0; padding:17px; border:1px solid var(--sc-border); border-radius:14px; background:var(--sc-bg-body); }
.su-doc-start-steps b,.su-doc-start-steps span { display:block; }
.su-doc-start-steps b { color:var(--sc-primary); font:800 11px var(--sc-font-mono); }
.su-doc-start-steps span { margin:8px 0; font-weight:750; }
.su-doc-start>div:last-child { display:flex; flex-wrap:wrap; gap:10px; }
.su-doc-paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.su-doc-paths a { display:grid; gap:7px; padding:20px; border:1px solid var(--sc-border); border-radius:15px; color:var(--sc-text-main); text-decoration:none; }
.su-doc-paths a span { color:var(--sc-text-muted); font-size:13px; }
.su-doc-pagination { display:flex; justify-content:space-between; gap:15px; margin-top:45px; border-top:1px solid var(--sc-border); padding-top:22px; }
.su-doc-pagination a { color:var(--sc-primary); text-decoration:none; }

.su-family-guidance { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:32px 0; }
.su-family-guidance article { padding:17px; border-top:2px solid var(--sc-primary); background:color-mix(in srgb,var(--sc-bg-surface) 82%,transparent); }
.su-family-guidance span { color:var(--sc-primary); font:750 10px var(--sc-font-mono); letter-spacing:.1em; }
.su-family-guidance p { margin:10px 0 0; color:var(--sc-text-muted); font-size:13px; line-height:1.55; }
.su-variant-docs { grid-template-columns:repeat(2,minmax(0,1fr)); }

.su-explore-scopes { display:flex; gap:8px; margin:34px 0 16px; overflow-x:auto; padding-bottom:7px; scrollbar-width:thin; }
.su-explore-scopes button { flex:0 0 auto; min-height:38px; padding:0 14px; border:1px solid var(--sc-border); border-radius:999px; color:var(--sc-text-muted); background:var(--sc-bg-surface); cursor:pointer; }
.su-explore-scopes button[aria-pressed="true"] { border-color:var(--sc-primary); color:#fff; background:var(--sc-primary); }
.su-explore-filters { grid-template-columns:minmax(240px,2fr) repeat(3,minmax(150px,1fr)) auto; }

@media (max-width:1100px) {
  .su-doc-shell { grid-template-columns:220px minmax(0,1fr); }
  .su-doc-toc { display:none; }
  .su-family-guidance { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .su-explore-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .su-template-frame iframe { min-height:760px; }
  .su-template-device-controls { margin-bottom:-20px; overflow-x:auto; }
  .su-doc-shell { width:calc(100% - 28px); display:block; padding-top:28px; }
  .su-doc-sidebar { position:relative; top:auto; max-height:none; margin-bottom:30px; }
  .su-doc-sidebar section { display:none; }
  .su-doc-sidebar:focus-within section { display:grid; }
  .su-doc-start-steps,.su-doc-paths,.su-family-guidance,.su-variant-docs { grid-template-columns:1fr; }
  .su-explore-filters { grid-template-columns:1fr; }
}

.su-home-showcase,.su-home-motion,.su-home-backgrounds,.su-home-templates,.su-home-themes,.su-home-install { width:min(calc(100% - 48px),1440px); margin:0 auto; padding:clamp(72px,9vw,130px) 0; }
.su-home-section-head { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.7fr); gap:30px; align-items:end; margin-bottom:36px; }
.su-home-section-head .su-kicker { grid-column:1/-1; }
.su-home-section-head h2,.su-home-motion h2,.su-home-themes h2,.su-home-install h2 { max-width:11ch; margin:0; font-size:clamp(38px,5vw,72px); line-height:.96; letter-spacing:-.06em; }
.su-home-section-head p,.su-home-motion p,.su-home-themes p,.su-home-install p { margin:0; color:var(--sc-text-muted); line-height:1.7; }
.su-home-preview-grid { display:grid; grid-template-columns:1.25fr .9fr .9fr; gap:14px; align-items:start; }
.su-home-preview-grid>a { min-width:0; display:grid; grid-template-rows:auto auto auto; gap:10px; padding:18px; overflow:hidden; border:1px solid var(--sc-border); border-radius:20px; color:var(--sc-text-main); background:var(--sc-bg-surface); text-decoration:none; }
.su-home-preview-grid>a>span { color:var(--sc-primary); font:750 10px var(--sc-font-mono); letter-spacing:.1em; }
.su-home-preview-grid>a>strong { max-width:25ch; font-size:20px; line-height:1.15; }
.su-home-preview-grid iframe { width:100%; height:240px; min-height:0; border:0; border-radius:13px; background:#0b0b0b; pointer-events:none; }
.su-home-motion { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,7vw,110px); align-items:center; }
.su-home-motion>div:first-child { display:grid; gap:20px; }
.su-home-motion-stage { position:relative; min-height:500px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--sc-border); border-radius:32px; background:radial-gradient(circle at 50% 50%,rgba(239,108,53,.2),transparent 34%),#090909; }
.su-home-motion-stage>span { position:absolute; width:340px; height:340px; border:1px solid rgba(239,108,53,.35); border-radius:50%; animation:su-home-orbit 9s linear infinite; }
.su-home-motion-stage>span::after { content:""; position:absolute; top:12px; left:50%; width:15px; height:15px; border-radius:50%; background:var(--sc-primary); box-shadow:0 0 25px var(--sc-primary); }
.su-home-motion-stage article { position:relative; z-index:2; width:min(76%,420px); display:grid; gap:13px; padding:28px; border:1px solid rgba(255,255,255,.16); border-radius:22px; color:#fff; background:rgba(22,19,24,.82); backdrop-filter:blur(15px); animation:su-home-card 4s ease-in-out infinite; }
.su-home-motion-stage article small { color:#ff9a69; font:750 10px var(--sc-font-mono); }
.su-home-motion-stage article strong { font-size:clamp(26px,4vw,48px); line-height:.95; }
.su-home-motion-stage article i { color:#ff9a69; font-size:52px; font-style:normal; font-weight:800; }
.su-home-motion-stage>b { position:absolute; right:12%; bottom:15%; width:90px; height:4px; border-radius:4px; background:var(--sc-primary); animation:su-home-progress 3.2s ease-in-out infinite; transform-origin:left; }
.su-home-backgrounds>div:last-child { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.su-home-bg { position:relative; min-height:330px; display:flex; align-items:flex-end; overflow:hidden; padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:22px; color:#fff; background:#090909; text-decoration:none; }
.su-home-bg span { position:relative; z-index:3; font-size:20px; font-weight:800; }
.su-home-bg::before,.su-home-bg::after { content:""; position:absolute; inset:0; }
.su-home-bg.is-aurora::before { inset:-30%; background:conic-gradient(from 20deg,transparent,#ee682e,transparent 35%,#6321d5,transparent 70%); filter:blur(45px); animation:su-home-orbit 10s linear infinite; }
.su-home-bg.is-grid { background:radial-gradient(circle at 70% 20%,rgba(239,108,53,.25),transparent 25%),linear-gradient(rgba(239,108,53,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(239,108,53,.16) 1px,transparent 1px),#090909; background-size:auto,34px 34px,34px 34px,auto; }
.su-home-bg.is-grid::after { width:10px; height:10px; inset:auto; border-radius:50%; background:#ff7d45; box-shadow:0 0 30px #ff7d45; animation:su-grid-node 4s ease-in-out infinite; }
.su-home-bg.is-hud { background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),radial-gradient(circle at 50% 40%,rgba(239,108,53,.2),transparent 30%),#070707; }
.su-home-bg.is-hud::after { inset:20px; border:1px solid rgba(239,108,53,.28); clip-path:polygon(0 0,28% 0,28% 1px,72% 1px,72% 0,100% 0,100% 100%,70% 100%,70% calc(100% - 1px),30% calc(100% - 1px),30% 100%,0 100%); }
.su-home-template-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:25px; }
.su-home-template-grid a { position:relative; min-width:0; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--sc-border); border-radius:17px; background:#0b0b0b; }
.su-home-template-grid img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .4s ease; }
.su-home-template-grid a:hover img { transform:scale(1.035); }
.su-home-template-grid span { position:absolute; right:12px; bottom:12px; left:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.14); border-radius:10px; color:#fff; background:rgba(8,8,8,.78); backdrop-filter:blur(10px); font-weight:800; }
.su-home-themes,.su-home-install { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(35px,7vw,100px); align-items:start; }
.su-home-themes>div:first-child,.su-home-install>div:first-child { display:grid; gap:18px; }
.su-home-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.su-home-theme-grid article { min-height:250px; display:flex; flex-direction:column; justify-content:space-between; padding:20px; border:1px solid var(--sc-border); border-radius:18px; color:var(--sc-text-main); background:var(--sc-bg-surface); }
.su-home-theme-grid article>span { color:var(--sc-text-muted); font:700 10px var(--sc-font-mono); }
.su-home-theme-grid article>strong { font-size:25px; line-height:1; }
.su-home-install pre { margin:0; overflow:auto; padding:28px; border:1px solid var(--sc-border); border-radius:20px; color:#f4f0ee; background:#080808; line-height:1.8; }
@keyframes su-home-orbit { to { transform:rotate(360deg); } }
@keyframes su-home-card { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-10px) rotate(1deg); } }
@keyframes su-home-progress { 0%,100% { transform:scaleX(.3); opacity:.5; } 50% { transform:scaleX(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .su-home-motion-stage>span,.su-home-motion-stage article,.su-home-motion-stage>b,.su-home-bg::before,.su-home-bg::after { animation:none!important; } }
@media (max-width:980px) { .su-home-preview-grid { grid-template-columns:1fr 1fr; }.su-home-preview-grid>a:first-child { grid-column:1/-1; }.su-home-template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.su-home-themes,.su-home-install { grid-template-columns:1fr; }.su-home-theme-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .su-home-showcase,.su-home-motion,.su-home-backgrounds,.su-home-templates,.su-home-themes,.su-home-install { width:calc(100% - 28px); }.su-home-section-head,.su-home-motion { grid-template-columns:1fr; }.su-home-preview-grid,.su-home-backgrounds>div:last-child,.su-home-theme-grid { grid-template-columns:1fr; }.su-home-preview-grid>a:first-child { grid-column:auto; }.su-home-motion-stage { min-height:390px; }.su-home-template-grid { grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   FUNDAÇÃO (fase 1): select custom na casca, scroll suave (Lenis), header.
   Escopo .su-* apenas; os componentes/demos (.sc-* em iframes/.su-preview-stage)
   seguem o framework.
   ========================================================================== */

/* Lenis: desliga o scroll-behavior CSS quando o suave por JS está ativo. */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: clip; }

/* Controle de tema/modo no header: rótulo pequeno + select custom compacto. */
.su-site .su-control { display: inline-flex; align-items: center; gap: 8px; color: var(--sc-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.su-site .su-control > span { opacity: .8; }

/* Select custom (.sc-select-menu) com a cara do vatse.dev. Sem <select> nativo. */
.su-site .su-select { position: relative; min-width: 118px; }
.su-site .su-select .sc-select-trigger { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid var(--sc-border); border-radius: 9999px; background: var(--sc-bg-surface); color: var(--sc-text-main); font: 650 12px var(--sc-font-main); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.su-site .su-select .sc-select-trigger:hover { border-color: color-mix(in srgb, var(--sc-primary) 60%, var(--sc-border)); }
.su-site .su-select .sc-select-trigger:focus-visible { outline: none; box-shadow: var(--sc-ring); }
.su-site .su-select .sc-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-site .su-select .su-select-caret { width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform .2s ease; }
.su-site .su-select.is-open .su-select-caret { transform: rotate(-135deg) translateY(2px); }
.su-site .su-select .sc-select-popover { position: absolute; z-index: 640; top: calc(100% + 8px); right: 0; min-width: 190px; max-height: 340px; overflow: auto; padding: 6px; border: 1px solid var(--sc-border); border-radius: 16px; background: var(--sc-bg-surface); box-shadow: var(--sc-shadow-lg); }
.su-site .su-select .sc-select-search-input { width: 100%; margin-bottom: 6px; padding: 8px 10px; border: 1px solid var(--sc-border); border-radius: 10px; background: var(--sc-bg-input); color: var(--sc-text-main); font: 13px var(--sc-font-main); }
.su-site .su-select .sc-select-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 10px; color: var(--sc-text-main); font-size: 13px; cursor: pointer; }
.su-site .su-select .sc-select-option:hover, .su-site .su-select .sc-select-option[aria-selected="true"] { background: color-mix(in srgb, var(--sc-primary) 16%, transparent); color: var(--sc-primary); }
.su-site .su-select .sc-select-option-check { width: 13px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0; }
.su-site .su-select .sc-select-option[aria-selected="true"] .sc-select-option-check { opacity: 1; }
.su-site .su-select .sc-select-no-results { padding: 10px 11px; margin: 0; color: var(--sc-text-muted); font-size: 12px; }

/* Rótulo do controle no header fica em coluna (mini-rótulo em cima). */
@media (min-width: 721px) {
  .su-site .su-header-actions .su-control { flex-direction: column; align-items: flex-start; gap: 3px; }
}

/* Botão magnético volta suave ao soltar. */
.su-site [data-magnetic] { transition: transform .25s cubic-bezier(.2,0,0,1); will-change: transform; }

/* Reveal ao rolar: o framework alterna .in-view; fail-open em redução de movimento. */
@media (prefers-reduced-motion: reduce) {
  .su-site .sc-fade-up, .su-site [data-animate] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   POLISH premium (fases 2-4): hover de marca nos cards + selects nos formulários.
   Escopo .su-* (não toca os componentes .sc-* dos demos).
   ========================================================================== */
.su-site .su-feature,
.su-site .su-catalog-card,
.su-site .su-explore-card,
.su-site .su-related a,
.su-site .su-home-preview-grid > a,
.su-site .su-home-template-grid > a,
.su-site .su-doc-paths a {
  transition: transform .22s cubic-bezier(.2,0,0,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.su-site .su-feature:hover,
.su-site .su-catalog-card:hover,
.su-site .su-explore-card:hover,
.su-site .su-related a:hover,
.su-site .su-home-preview-grid > a:hover,
.su-site .su-home-template-grid > a:hover,
.su-site .su-doc-paths a:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--sc-primary) 55%, var(--sc-border));
  box-shadow: 0 24px 60px color-mix(in srgb, var(--sc-primary) 12%, rgba(0,0,0,.45));
}

/* Selects custom dentro de filtros do Explorar e dos controles de prévia. */
.su-site .su-explore-filters label,
.su-site .su-preview-controls label { display: grid; gap: 5px; align-content: start; }
.su-site .su-explore-filters label > span,
.su-site .su-preview-controls label > span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text-muted); }
.su-site .su-explore-filters .su-select,
.su-site .su-preview-controls .su-select { min-width: 0; width: 100%; }
.su-site .su-explore-filters .su-select .sc-select-trigger,
.su-site .su-preview-controls .su-select .sc-select-trigger { border-radius: 10px; }
.su-site .su-explore-search { min-height: 38px; border-radius: 10px; }

/* Mobile: Tema/Modo saem do header (overflow) e ficam no menu hamburguer
   (.su-mobile-settings), que já traz os mesmos selects custom. */
@media (max-width: 720px) {
  .su-site .su-header-actions .su-control { display: none; }
  .su-site .su-brand small { display: none; }
}

/* =======================================================================
   HERO PREMIUM v2 — dark + laranja + 3D + mesh animado (padrão de marca)
   ======================================================================= */
.su-hero-v2 { position:relative; isolation:isolate; overflow:visible; width:min(calc(100% - 64px),1320px); margin:0 auto; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:clamp(24px,5vw,72px); padding:clamp(60px,9vw,132px) 0 clamp(44px,6vw,88px); }
.su-hero-v2 { overflow:clip; }
.su-hero-mesh { position:absolute; z-index:-1; inset:0; pointer-events:none; filter:blur(66px); opacity:.72; }
.su-hero-mesh span { position:absolute; display:block; border-radius:50%; }
.su-hero-mesh span:nth-child(1){ width:46%; height:62%; left:36%; top:-8%; background:radial-gradient(circle,rgba(239,101,15,.55),transparent 70%); animation:su-mesh-a 15s ease-in-out infinite alternate; }
.su-hero-mesh span:nth-child(2){ width:42%; height:56%; left:54%; top:18%; background:radial-gradient(circle,rgba(198,63,2,.5),transparent 70%); animation:su-mesh-b 19s ease-in-out infinite alternate; }
.su-hero-mesh span:nth-child(3){ width:32%; height:42%; left:28%; top:28%; background:radial-gradient(circle,rgba(130,60,210,.22),transparent 70%); animation:su-mesh-c 22s ease-in-out infinite alternate; }
@keyframes su-mesh-a { to { transform:translate(-8%,10%) scale(1.15); } }
@keyframes su-mesh-b { to { transform:translate(10%,-8%) scale(1.1); } }
@keyframes su-mesh-c { to { transform:translate(6%,12%) scale(1.2); } }

.su-hero-tag { display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border:1px solid var(--sc-border); border-radius:999px; background:color-mix(in srgb,var(--sc-bg-surface) 70%,transparent); backdrop-filter:blur(10px); color:var(--sc-text-muted); font:700 10px/1 var(--sc-font-mono); letter-spacing:.14em; }
.su-hero-tag i { width:7px; height:7px; border-radius:50%; background:var(--sc-primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--sc-primary) 22%,transparent); }
.su-hero-title { margin:22px 0 0; font-size:clamp(44px,6.4vw,84px); line-height:.95; letter-spacing:-.045em; font-weight:800; }
.su-grad-text { background:linear-gradient(100deg,#ff8a3d,#ef650f 42%,#c63f02); -webkit-background-clip:text; background-clip:text; color:transparent; }
.su-hero-lead { max-width:30rem; margin:22px 0 0; color:var(--sc-text-muted); font-size:clamp(15px,1.5vw,18px); line-height:1.6; }
.su-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.su-btn-lg { padding:14px 22px; font-size:15px; border-radius:14px; }
.su-hero-v2 .su-install { margin-top:22px; }
.su-hero-stats { display:flex; gap:clamp(20px,4vw,44px); margin:34px 0 0; }
.su-hero-stats div { display:flex; flex-direction:column; gap:2px; }
.su-hero-stats dt { font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-.04em; color:var(--sc-text-main); font-variant-numeric:tabular-nums; }
.su-hero-stats dd { margin:0; color:var(--sc-text-muted); font:600 11px/1 var(--sc-font-mono); letter-spacing:.1em; text-transform:uppercase; }

.su-hero-visual { position:relative; display:grid; place-items:center; min-height:min(62vw,540px); perspective:1300px; }
.su-hero-glow { position:absolute; width:92%; aspect-ratio:1.1; border-radius:50%; background:radial-gradient(circle,rgba(239,101,15,.4),rgba(239,101,15,.1) 45%,transparent 70%); filter:blur(12px); animation:su-glow-pulse 6s ease-in-out infinite; }
.su-hero-stage { position:relative; width:min(100%,420px); transform-style:preserve-3d; transform:rotateY(-13deg) rotateX(5deg); animation:su-stage-float 9s ease-in-out infinite; }
.su-hero-card { border:1px solid rgba(255,255,255,.12); border-radius:20px; background:linear-gradient(158deg,rgba(30,26,28,.94),rgba(15,13,15,.9)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 36px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06); }
.su-hero-card-main { padding:22px; display:grid; gap:17px; }
.su-hc-head { display:flex; align-items:center; justify-content:space-between; }
.su-hc-brand { display:inline-flex; align-items:center; gap:8px; color:var(--sc-text-muted); font:700 10px/1 var(--sc-font-mono); letter-spacing:.14em; }
.su-hc-brand i { width:7px; height:7px; border-radius:50%; background:#36d399; box-shadow:0 0 0 4px rgba(54,211,153,.18); }
.su-hc-live { color:#ff9a69; font:700 9px/1 var(--sc-font-mono); letter-spacing:.12em; text-transform:uppercase; }
.su-hc-kpi { display:grid; gap:5px; }
.su-hc-kpi-label { color:var(--sc-text-muted); font-size:12px; }
.su-hc-kpi-val { font-size:clamp(28px,3.2vw,40px); font-weight:800; letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums; line-height:1; }
.su-hc-trend { justify-self:start; padding:3px 9px; border-radius:999px; background:rgba(54,211,153,.14); color:#36d399; font:700 11px/1 var(--sc-font-mono); }
.su-hc-chart { display:flex; align-items:flex-end; gap:7px; height:74px; }
.su-hc-chart i { flex:1; height:var(--h); border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#ff8a3d,#ef650f 60%,#c63f02); box-shadow:0 0 14px rgba(239,101,15,.32); animation:su-bar-rise .9s cubic-bezier(.2,.8,0,1) backwards; }
.su-hc-chart i:nth-child(1){animation-delay:.05s}.su-hc-chart i:nth-child(2){animation-delay:.1s}.su-hc-chart i:nth-child(3){animation-delay:.15s}.su-hc-chart i:nth-child(4){animation-delay:.2s}.su-hc-chart i:nth-child(5){animation-delay:.25s}.su-hc-chart i:nth-child(6){animation-delay:.3s}.su-hc-chart i:nth-child(7){animation-delay:.35s}
.su-hc-themes { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.su-hc-themes-label { color:var(--sc-text-muted); font:700 10px/1 var(--sc-font-mono); letter-spacing:.1em; text-transform:uppercase; margin-right:2px; }
.su-hc-themes button { padding:6px 12px; border:1px solid var(--sc-border); border-radius:999px; background:transparent; color:var(--sc-text-muted); font:650 12px var(--sc-font-main); cursor:pointer; transition:border-color .18s,background .18s,color .18s; }
.su-hc-themes button.is-active { border-color:transparent; background:var(--sc-primary); color:#fff; }
.su-hero-card-float { position:absolute; top:-22px; right:-6px; display:flex; align-items:center; gap:11px; padding:11px 14px; width:max-content; max-width:220px; transform:translateZ(55px); animation:su-float-bob 7s ease-in-out infinite; }
.su-hc-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:linear-gradient(140deg,#ff8a3d,#c63f02); color:#fff; font:800 12px var(--sc-font-main); }
.su-hc-float-body strong { display:block; font-size:13px; color:#fff; }
.su-hc-float-body small { color:var(--sc-text-muted); font-size:11px; }
@keyframes su-stage-float { 0%,100%{ transform:rotateY(-13deg) rotateX(5deg) translateY(0); } 50%{ transform:rotateY(-10deg) rotateX(4deg) translateY(-14px); } }
@keyframes su-float-bob { 0%,100%{ transform:translateZ(55px) translateY(0); } 50%{ transform:translateZ(55px) translateY(-9px); } }
@keyframes su-bar-rise { from{ height:0; opacity:0; } }
@keyframes su-glow-pulse { 0%,100%{ opacity:.78; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } }

@media (prefers-reduced-motion:no-preference){
  .su-hero-v2 .su-hero-tag,.su-hero-v2 .su-hero-title,.su-hero-v2 .su-hero-lead,.su-hero-v2 .su-hero-actions,.su-hero-v2 .su-install,.su-hero-v2 .su-hero-stats { opacity:0; transform:translateY(16px); animation:su-hero-in .7s cubic-bezier(.2,.7,0,1) forwards; }
  .su-hero-v2 .su-hero-title { animation-delay:.06s; }
  .su-hero-v2 .su-hero-lead { animation-delay:.14s; }
  .su-hero-v2 .su-hero-actions { animation-delay:.22s; }
  .su-hero-v2 .su-install { animation-delay:.3s; }
  .su-hero-v2 .su-hero-stats { animation-delay:.38s; }
  .su-hero-visual { opacity:0; animation:su-hero-in .9s cubic-bezier(.2,.7,0,1) .18s forwards; }
}
@keyframes su-hero-in { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .su-hero-mesh span,.su-hero-stage,.su-hero-card-float,.su-hero-glow,.su-hc-chart i { animation:none!important; } }

@media (max-width:860px){
  .su-hero-v2 { grid-template-columns:1fr; width:calc(100% - 28px); padding-top:48px; gap:10px; }
  .su-hero-visual { order:-1; min-height:min(84vw,380px); }
  .su-hero-stage { width:min(92%,360px); transform:none; animation:none; }
  .su-hero-card-float { right:-2px; top:-16px; }
  .su-hero-stats { gap:22px; }
}

/* =======================================================================
   HERO EDITORIAL — gradiente-mesh vibrante + grão (Build Brands/Fluency)
   ======================================================================= */
.su-hero-ed { position:relative; isolation:isolate; overflow:clip; min-height:min(90vh,800px); display:grid; align-items:center; padding:clamp(72px,11vh,150px) 0; }
.su-hero-ed::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(95deg, var(--sc-bg-body) 24%, color-mix(in srgb,var(--sc-bg-body) 42%,transparent) 55%, transparent 80%); }
.su-hero-aura { position:absolute; inset:0; z-index:-2; overflow:clip; }
.su-hero-aura span { position:absolute; display:block; border-radius:50%; filter:blur(92px); mix-blend-mode:screen; opacity:.95; }
.su-hero-aura span:nth-child(1){ width:54vw; height:54vw; right:-8vw; top:-12vw; background:radial-gradient(circle,#ff5e14,transparent 66%); animation:su-aura-a 17s ease-in-out infinite alternate; }
.su-hero-aura span:nth-child(2){ width:46vw; height:46vw; right:4vw; top:16vw; background:radial-gradient(circle,#ff2d7e,transparent 64%); animation:su-aura-b 21s ease-in-out infinite alternate; }
.su-hero-aura span:nth-child(3){ width:42vw; height:42vw; right:22vw; top:-6vw; background:radial-gradient(circle,#8b2ff0,transparent 64%); animation:su-aura-c 25s ease-in-out infinite alternate; }
.su-hero-aura span:nth-child(4){ width:30vw; height:30vw; right:-4vw; top:24vw; background:radial-gradient(circle,#ffb020,transparent 68%); animation:su-aura-a 19s ease-in-out infinite alternate-reverse; }
@keyframes su-aura-a { to { transform:translate(-6%,8%) scale(1.12); } }
@keyframes su-aura-b { to { transform:translate(8%,-6%) scale(1.15); } }
@keyframes su-aura-c { to { transform:translate(-8%,10%) scale(1.1); } }
.su-hero-grain { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.4; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:150px 150px; }
.su-hero-inner { width:min(calc(100% - 64px),1280px); margin:0 auto; }
.su-hero-ed .su-hero-title { margin:24px 0 0; max-width:15ch; font-size:clamp(52px,8.4vw,116px); line-height:.92; letter-spacing:-.05em; font-weight:800; }
.su-hero-ed .su-hero-lead { max-width:34rem; }
.su-hero-ed .su-hero-actions { margin-top:34px; }
@media (prefers-reduced-motion:no-preference){
  .su-hero-ed .su-hero-tag,.su-hero-ed .su-hero-title,.su-hero-ed .su-hero-lead,.su-hero-ed .su-hero-actions,.su-hero-ed .su-install { opacity:0; transform:translateY(18px); animation:su-hero-in .8s cubic-bezier(.2,.7,0,1) forwards; }
  .su-hero-ed .su-hero-title{ animation-delay:.07s; } .su-hero-ed .su-hero-lead{ animation-delay:.16s; } .su-hero-ed .su-hero-actions{ animation-delay:.26s; } .su-hero-ed .su-install{ animation-delay:.34s; }
}
@media (prefers-reduced-motion:reduce){ .su-hero-aura span{ animation:none!important; } }
@media (max-width:860px){ .su-hero-ed{ min-height:auto; padding:68px 0 52px; } .su-hero-inner{ width:calc(100% - 28px); } .su-hero-ed::before{ background:linear-gradient(180deg,var(--sc-bg-body) 8%,color-mix(in srgb,var(--sc-bg-body) 58%,transparent) 62%,transparent); } .su-hero-aura span{ filter:blur(58px); } }

/* =======================================================================
   FULL-BLEED — cabeçalho e herói edge-to-edge (fim do visual "boxed"),
   conteúdo centralizado dentro. Sem grão.
   ======================================================================= */
.su-hero-grain { display:none !important; }
.su-site .su-header { width:100%; margin:0; border-radius:0; padding-inline:max(24px, calc((100% - 1440px) / 2)); }
.su-hero.su-hero-ed { width:100%; max-width:100%; margin:0; }

/* =======================================================================
   HOME — todas as seções full-bleed, conteúdo centralizado em 1280.
   Fim das colunas "boxed" com preto nas laterais.
   ======================================================================= */
.su-proof, .su-feature-grid, .su-home-showcase, .su-home-motion, .su-home-backgrounds,
.su-home-templates, .su-home-themes, .su-home-install, .su-community {
  width:100%; max-width:none; margin-inline:0;
  padding-inline: max(24px, calc((100% - 1280px) / 2));
}

/* =======================================================================
   SISTEMA DE SEÇÃO PREMIUM (eyebrow + título + lead) + SEÇÃO DE TEMAS
   ======================================================================= */
.su-eyebrow { display:inline-block; color:var(--sc-primary); font:700 11px/1 var(--sc-font-mono); letter-spacing:.18em; text-transform:uppercase; }
.su-sec-title { margin:16px 0 0; font-size:clamp(34px,4.6vw,66px); line-height:.96; letter-spacing:-.04em; font-weight:800; }
.su-sec-lead { margin:18px 0 0; max-width:42ch; color:var(--sc-text-muted); font-size:clamp(15px,1.4vw,17px); line-height:1.65; }
.su-sec-lead code { padding:2px 7px; border-radius:7px; background:color-mix(in srgb,var(--sc-primary) 16%,transparent); color:var(--sc-primary); font:13px var(--sc-font-mono); }

.su-themes { position:relative; isolation:isolate; overflow:clip; width:100%; padding:clamp(80px,10vw,150px) max(24px,calc((100% - 1280px)/2)); }
.su-themes-aura { position:absolute; inset:0; z-index:-1; }
.su-themes-aura span { position:absolute; border-radius:50%; filter:blur(120px); opacity:.45; }
.su-themes-aura span:nth-child(1){ width:46vw; height:46vw; left:-14vw; top:-12vw; background:radial-gradient(circle,#8b2ff0,transparent 66%); }
.su-themes-aura span:nth-child(2){ width:40vw; height:40vw; right:-12vw; bottom:-16vw; background:radial-gradient(circle,#ff5e14,transparent 66%); }
.su-themes-inner { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(32px,5vw,72px); align-items:center; }
.su-theme-controls { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.su-seg { display:inline-flex; gap:4px; padding:5px; border:1px solid var(--sc-border); border-radius:14px; background:color-mix(in srgb,var(--sc-bg-surface) 60%,transparent); backdrop-filter:blur(10px); }
.su-seg button { padding:8px 15px; border:0; border-radius:10px; background:transparent; color:var(--sc-text-muted); font:650 13px var(--sc-font-main); cursor:pointer; transition:background .18s,color .18s; }
.su-seg button.is-active { background:var(--sc-primary); color:#fff; }
.su-theme-stage { position:relative; border:1px solid var(--sc-border); border-radius:26px; padding:clamp(18px,2.4vw,30px); color:var(--sc-text-main); background:var(--sc-bg-body); box-shadow:0 40px 100px rgba(0,0,0,.5); transition:background .4s ease,color .4s ease,border-color .4s ease; overflow:hidden; }
.su-theme-stage::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 82% -10%,color-mix(in srgb,var(--sc-primary) 18%,transparent),transparent 52%); }
.su-theme-ui { position:relative; display:grid; gap:16px; }
.su-theme-ui-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.su-theme-ui-ey { display:block; margin-bottom:4px; color:var(--sc-text-muted); font:700 10px/1 var(--sc-font-mono); letter-spacing:.14em; }
.su-theme-ui-head strong { font-size:clamp(20px,2.4vw,26px); letter-spacing:-.03em; color:var(--sc-text-main); }
.su-theme-kpis { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.su-theme-field .sc-input { width:100%; }
.su-theme-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
@media (max-width:900px){ .su-themes-inner { grid-template-columns:1fr; } .su-themes { padding-block:64px; } }

/* Escopo de modo em QUALQUER elemento (permite trocar tema/modo num bloco
   aninhado, como a demo de temas, sem depender só do html). */
[data-mode="light"] { color-scheme:light; --sc-bg-body:#f7f4f1; --sc-bg-surface:#ffffff; --sc-bg-input:#f1ede9; --sc-text-main:#171517; --sc-text-muted:#625d61; --sc-border:#e5ded9; }
[data-mode="dark"] { color-scheme:dark; --sc-bg-body:#0a0a0a; --sc-bg-surface:#141414; --sc-bg-input:#191919; --sc-text-main:#f2f2f2; --sc-text-muted:#a6a6a6; --sc-border:rgba(255,255,255,.12); }

/* =======================================================================
   HOME — seções premium (bento, showcase, motion, templates, CTA)
   ======================================================================= */
.su-sec-head { max-width:720px; margin:0 auto clamp(34px,4vw,58px); text-align:center; }
.su-sec-head .su-sec-lead { margin-inline:auto; }
.su-bento, .su-showcase, .su-templates2 { width:100%; padding:clamp(72px,9vw,130px) max(24px,calc((100% - 1280px)/2)); }

/* Bento */
.su-bento-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:14px; }
.su-bento-card { position:relative; display:flex; flex-direction:column; gap:8px; padding:24px; border:1px solid var(--sc-border); border-radius:20px; background:color-mix(in srgb,var(--sc-bg-surface) 70%,transparent); backdrop-filter:blur(10px); color:var(--sc-text-main); text-decoration:none; overflow:hidden; transition:border-color .2s,transform .2s; }
.su-bento-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--sc-primary) 50%,var(--sc-border)); }
.su-bento-card .su-eyebrow { color:var(--sc-text-muted); }
.su-bento-card strong { font-size:clamp(17px,1.5vw,21px); letter-spacing:-.03em; }
.su-bento-card p { margin:0; color:var(--sc-text-muted); font-size:13px; line-height:1.55; }
.su-bento-card i { position:absolute; right:20px; bottom:16px; color:var(--sc-primary); font-size:20px; font-style:normal; }
.su-bento-lg { grid-column:span 2; grid-row:span 2; justify-content:flex-start; background:radial-gradient(circle at 85% 0,color-mix(in srgb,var(--sc-primary) 16%,transparent),transparent 55%),color-mix(in srgb,var(--sc-bg-surface) 70%,transparent); }
.su-bento-lg .su-eyebrow { color:var(--sc-primary); }
.su-bento-lg strong { font-size:clamp(24px,2.4vw,38px); }
@media (max-width:900px){ .su-bento-grid { grid-template-columns:1fr 1fr; } .su-bento-lg { grid-column:span 2; grid-row:auto; } }
@media (max-width:560px){ .su-bento-grid { grid-template-columns:1fr; } .su-bento-lg { grid-column:auto; } }

/* Motion2 */
.su-motion2 { position:relative; isolation:isolate; overflow:clip; width:100%; padding:clamp(72px,9vw,130px) max(24px,calc((100% - 1280px)/2)); display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.su-motion2-aura { position:absolute; z-index:-1; width:52vw; height:52vw; right:-12vw; top:50%; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle,rgba(239,101,15,.28),transparent 66%); filter:blur(110px); }
.su-motion2-copy .su-btn-lg { margin-top:28px; }
.su-motion2-demo { border:1px solid var(--sc-border); border-radius:24px; padding:28px; background:color-mix(in srgb,var(--sc-bg-surface) 72%,transparent); backdrop-filter:blur(12px); box-shadow:0 36px 90px rgba(0,0,0,.45); }
.su-motion2-stat { display:grid; gap:5px; margin-bottom:22px; }
.su-motion2-stat span { color:var(--sc-text-muted); font-size:13px; }
.su-motion2-stat strong { font-size:clamp(38px,5vw,62px); font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1; color:var(--sc-text-main); }
.su-motion2-stat em { color:#36d399; font-style:normal; font-size:13px; font-weight:700; }
.su-motion2-bars { display:flex; align-items:flex-end; gap:10px; height:120px; }
.su-motion2-bars i { flex:1; height:var(--h); border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#ff8a3d,#ef650f 60%,#c63f02); box-shadow:0 0 16px rgba(239,101,15,.3); }
@media (max-width:860px){ .su-motion2 { grid-template-columns:1fr; } }

/* Templates2 */
.su-templates2 .su-btn-lg { display:inline-flex; }
.su-tpl-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; margin-bottom:28px; }
.su-tpl-card { display:flex; flex-direction:column; border:1px solid var(--sc-border); border-radius:20px; overflow:hidden; background:var(--sc-bg-surface); color:var(--sc-text-main); text-decoration:none; transition:transform .2s,border-color .2s; }
.su-tpl-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--sc-primary) 50%,var(--sc-border)); }
.su-tpl-shot { position:relative; aspect-ratio:16/10; overflow:hidden; background:#0b0b0b; }
.su-tpl-shot iframe { position:absolute; top:0; left:0; width:250%; height:250%; border:0; transform:scale(.4); transform-origin:top left; pointer-events:none; }
.su-tpl-card footer { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
.su-tpl-card footer strong { font-size:15px; }
.su-tpl-card footer span { color:var(--sc-text-muted); font-size:12px; }
@media (max-width:860px){ .su-tpl-grid { grid-template-columns:1fr 1fr; } .su-tpl-lg { grid-column:span 2; } }
@media (max-width:560px){ .su-tpl-grid { grid-template-columns:1fr; } .su-tpl-lg { grid-column:auto; } }

/* CTA */
.su-cta { position:relative; isolation:isolate; overflow:clip; width:100%; padding:clamp(96px,13vw,180px) max(24px,calc((100% - 820px)/2)); text-align:center; }
.su-cta-aura { position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 50% 118%,rgba(239,101,15,.42),rgba(139,47,240,.16) 42%,transparent 72%); }
.su-cta-title { margin:16px 0 0; font-size:clamp(40px,6.4vw,92px); line-height:.95; letter-spacing:-.05em; font-weight:800; }
.su-cta .su-sec-lead { margin:20px auto 0; }
.su-cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:34px; }

/* =======================================================================
   RODAPÉ premium em colunas
   ======================================================================= */
.su-footer2 { width:100%; margin-top:40px; border-top:1px solid var(--sc-border); padding:clamp(48px,6vw,80px) max(24px,calc((100% - 1280px)/2)) 0; background:color-mix(in srgb,var(--sc-bg-surface) 40%,var(--sc-bg-body)); }
.su-footer2-top { display:grid; grid-template-columns:1.4fr 2fr; gap:clamp(32px,5vw,80px); padding-bottom:clamp(36px,5vw,60px); }
.su-footer2-brand .su-footer-brand { display:inline-flex; align-items:center; gap:11px; color:var(--sc-text-main); text-decoration:none; }
.su-footer2-brand .su-footer-brand strong { display:block; font-size:15px; }
.su-footer2-brand .su-footer-brand small { color:var(--sc-text-muted); font-size:11px; }
.su-footer2-brand p { max-width:40ch; margin:18px 0; color:var(--sc-text-muted); font-size:14px; line-height:1.6; }
.su-footer2-install { display:inline-flex; padding:10px 14px; border:1px solid var(--sc-border); border-radius:12px; background:var(--sc-bg-input); }
.su-footer2-install code { color:var(--sc-text-main); font:12px var(--sc-font-mono); }
.su-footer2-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.su-footer2-cols h3 { margin:0 0 16px; color:var(--sc-text-main); font-size:13px; font-weight:750; }
.su-footer2-cols a { display:block; margin-bottom:11px; color:var(--sc-text-muted); font-size:14px; text-decoration:none; transition:color .18s; }
.su-footer2-cols a:hover { color:var(--sc-primary); }
.su-footer2-legal { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; border-top:1px solid var(--sc-border); color:var(--sc-text-muted); font-size:13px; }
@media (max-width:860px){ .su-footer2-top { grid-template-columns:1fr; gap:32px; } .su-footer2-legal { flex-direction:column; align-items:flex-start; gap:8px; } }
@media (max-width:560px){ .su-footer2-cols { grid-template-columns:1fr 1fr; } }

/* =======================================================================
   CATÁLOGO premium — full-bleed, compacto, busca + filtro por categoria
   ======================================================================= */
.su-catalog { width:100% !important; min-height:auto !important; margin:0 !important; padding:clamp(60px,7vw,104px) max(24px,calc((100% - 1280px)/2)) !important; }
.su-catalog-head { max-width:760px; }
.su-catalog-title { margin:14px 0 0; font-size:clamp(40px,5.4vw,78px); line-height:.92; letter-spacing:-.045em; font-weight:800; }
.su-catalog-head .su-sec-lead { margin-top:16px; }
.su-catalog-explore { display:inline-flex; align-items:center; gap:7px; margin-top:18px; color:var(--sc-primary); font-size:14px; font-weight:700; text-decoration:none; transition:gap .18s; }
.su-catalog-explore:hover { gap:12px; }
.su-catalog-tools { position:sticky; top:82px; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:36px 0 22px; padding:12px; border:1px solid var(--sc-border); border-radius:16px; background:color-mix(in srgb,var(--sc-bg-body) 82%,transparent); backdrop-filter:blur(14px); }
.su-catalog-search { display:flex; align-items:center; gap:8px; flex:1 1 220px; min-width:180px; padding:0 12px; border:1px solid var(--sc-border); border-radius:11px; background:var(--sc-bg-input); color:var(--sc-text-muted); }
.su-catalog-search .sc-input { border:0; background:transparent; width:100%; min-height:42px; }
.su-catalog-chips { display:flex; flex-wrap:wrap; gap:6px; }
.su-catalog-chips button { padding:7px 13px; border:1px solid var(--sc-border); border-radius:999px; background:transparent; color:var(--sc-text-muted); font:650 12px var(--sc-font-main); cursor:pointer; transition:border-color .18s,background .18s,color .18s; }
.su-catalog-chips button.is-active { border-color:transparent; background:var(--sc-primary); color:#fff; }
.su-catalog-count { color:var(--sc-text-muted); font:600 12px var(--sc-font-mono); white-space:nowrap; margin-left:auto; }
.su-catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; margin-top:0 !important; }
.su-catalog-card { min-height:0 !important; }
.su-catalog-card[hidden] { display:none !important; }
.su-catalog-preview { min-height:0 !important; height:168px !important; padding:0 !important; }
.su-catalog-preview iframe { width:100% !important; height:100% !important; border:0; }
.su-catalog-copy { min-height:0 !important; padding:16px 18px !important; gap:2px; }
.su-catalog-copy span { color:var(--sc-primary); font:700 10px var(--sc-font-mono); letter-spacing:.1em; text-transform:uppercase; }
.su-catalog-copy h2 { margin:6px 0 3px !important; font-size:18px !important; letter-spacing:-.03em; }
.su-catalog-copy p { margin:0; color:var(--sc-text-muted); font-size:13px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.su-catalog-copy footer { margin-top:12px !important; }
@media (max-width:960px){ .su-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .su-catalog-tools { top:74px; } }
@media (max-width:600px){ .su-catalog-grid { grid-template-columns:1fr !important; } .su-catalog-count { margin-left:0; } }

/* =======================================================================
   EXPLORAR premium — full-bleed, grade densa (4 col), cards menores
   ======================================================================= */
.su-explore { width:100% !important; margin:0 !important; padding:clamp(60px,7vw,104px) max(24px,calc((100% - 1320px)/2)) !important; }
.su-explore-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; }
.su-explore-preview { height:150px !important; }
.su-explore-preview iframe { width:250% !important; height:460px !important; transform:scale(.4) !important; transform-origin:top left; }
@media (max-width:1100px){ .su-explore-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media (max-width:820px){ .su-explore-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:540px){ .su-explore-grid { grid-template-columns:1fr !important; } }

/* =======================================================================
   CARDS LIMPOS — catálogo e explorar (sem miniatura feia, tipográficos)
   ======================================================================= */
.su-catalog-card2, .su-explore-card { display:flex; }
.su-cat-link, .su-ex-link { position:relative; display:flex; flex-direction:column; width:100%; border:1px solid var(--sc-border); border-radius:18px; background:color-mix(in srgb,var(--sc-bg-surface) 72%,transparent); color:var(--sc-text-main); text-decoration:none; overflow:hidden; transition:border-color .2s,transform .2s,background .2s; }
.su-cat-link { gap:10px; min-height:168px; padding:22px; }
.su-ex-link { gap:9px; min-height:144px; padding:18px; }
.su-cat-link::before, .su-ex-link::before { content:""; position:absolute; left:0; top:0; width:3px; height:0; background:var(--sc-primary); transition:height .25s ease; }
.su-cat-link:hover, .su-ex-link:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--sc-primary) 45%,var(--sc-border)); background:color-mix(in srgb,var(--sc-bg-surface) 92%,transparent); }
.su-cat-link:hover::before, .su-ex-link:hover::before { height:100%; }
.su-cat-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.su-cat-eyebrow { color:var(--sc-primary); font:700 10px var(--sc-font-mono); letter-spacing:.12em; text-transform:uppercase; }
.su-cat-count { color:var(--sc-text-muted); font:600 11px var(--sc-font-mono); white-space:nowrap; }
.su-cat-name { margin:4px 0 0; font-size:21px; letter-spacing:-.03em; font-weight:750; }
.su-cat-desc { margin:0; color:var(--sc-text-muted); font-size:13px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.su-cat-go, .su-ex-go { margin-top:auto; color:var(--sc-primary); font-size:13px; font-weight:700; }
.su-ex-cat { color:var(--sc-text-muted); font:700 10px var(--sc-font-mono); letter-spacing:.1em; text-transform:uppercase; }
.su-ex-name { font-size:16px; letter-spacing:-.02em; font-weight:700; line-height:1.25; }
.su-ex-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.su-ex-tags span { padding:3px 9px; border:1px solid var(--sc-border); border-radius:999px; color:var(--sc-text-muted); font:600 10px var(--sc-font-mono); }
.su-ex-go { font-size:12px; }
/* grades */
.su-catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; }
.su-explore-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; }
@media (max-width:960px){ .su-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:1100px){ .su-explore-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media (max-width:820px){ .su-explore-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:600px){ .su-catalog-grid, .su-explore-grid { grid-template-columns:1fr !important; } }

/* =======================================================================
   TEMPLATES: miniaturas reais (WebP capturadas), cards limpos.
   Home: grade 3 colunas iguais. Showcase: cards de altura igual.
   ======================================================================= */
.su-tpl-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; align-items:stretch; }
.su-tpl-shot { aspect-ratio:16/10 !important; }
.su-tpl-shot img, .su-tplc-shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s cubic-bezier(.2,.7,0,1); }
.su-tpl-card:hover .su-tpl-shot img, .su-tplc-link:hover .su-tplc-shot img { transform:scale(1.03); }
.su-tpl-card footer { margin-top:auto; }

.su-tplc { display:flex; }
.su-tplc-link { display:flex; flex-direction:column; width:100%; overflow:hidden; border:1px solid var(--sc-border); border-radius:18px; background:color-mix(in srgb,var(--sc-bg-surface) 72%,transparent); color:var(--sc-text-main); text-decoration:none; transition:border-color .2s,transform .2s; }
.su-tplc-link:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--sc-primary) 45%,var(--sc-border)); }
.su-tplc-shot { aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--sc-border); background:#0b0b0b; }
.su-tplc-body { display:flex; flex-direction:column; gap:8px; flex:1; padding:18px 20px 20px; }

.su-home-preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; align-items:stretch !important; }
.su-home-preview-grid > a { grid-template-rows:auto auto 1fr !important; }
.su-home-preview-grid iframe { height:260px !important; }
@media (max-width:860px){ .su-tpl-grid, .su-home-preview-grid { grid-template-columns:1fr !important; } }

/* Explorar: paginação "Mostrar mais" */
.su-explore-card.su-ex-paged { display:none !important; }
.su-explore-more { display:flex; justify-content:center; margin-top:28px; }
.su-explore-more[hidden] { display:none; }
.su-explore-more .sc-btn { min-height:46px; padding-inline:22px; }

/* =======================================================================
   MOBILE: hambúrguer na borda direita, filtros compactos e não fixos,
   Explorar em 2 colunas, chips em uma linha rolável, bento sem vazio.
   ======================================================================= */
@media (max-width:720px){
  .su-site .su-header .su-nav-toggle { order:10; margin-left:auto; }
  .su-site .su-header .su-header-actions { margin-left:0; }
  .su-explore-filters { position:static !important; grid-template-columns:1fr 1fr !important; gap:10px !important; padding:12px !important; }
  .su-explore-filters > label:first-child, .su-explore-filters > :last-child { grid-column:1 / -1; }
  .su-explore-grid { grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .su-ex-link { min-height:0; padding:14px; gap:6px; }
  .su-ex-tags { display:none; }
  .su-ex-name { font-size:14px; }
  .su-catalog-tools { position:static !important; }
  .su-catalog-chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; width:100%; }
  .su-catalog-chips::-webkit-scrollbar { display:none; }
  .su-catalog-chips button { flex:0 0 auto; }
  .su-bento-grid { grid-auto-rows:auto !important; }
  .su-bento-card { min-height:0; padding:20px; }
  .su-bento-card i { position:static; margin-top:12px; }
}

/* ===== /motion/: Vatse Motion dentro do Smart UI ===== */
.su-mo-hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: center; overflow: hidden; color: #f5f3ef; background: #0a0a0a; }
.su-mo-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, var(--su-page-bg)); pointer-events: none; }
.su-mo-hero-in { position: relative; z-index: 2; width: min(1200px, 100% - 48px); margin: 0 auto; padding: 120px 0 110px; }
.su-mo-hero h1 { font: 700 clamp(3rem, 8.4vw, 7.2rem)/.95 var(--sc-font-main, Geist, sans-serif); letter-spacing: -.055em; max-width: 12ch; margin: 18px 0 0; }
.su-mo-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ffb27a, #ef650f 40%, #e0479e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.su-mo-hero p { max-width: 56ch; margin: 22px 0 0; font-size: 1.15rem; line-height: 1.6; color: rgba(245,243,239,.9); text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.su-mo-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.su-mo-acoes .sc-btn-outline { color: #fff; border-color: rgba(255,255,255,.28); }
.su-mo-snippet { margin: 40px 0 0; max-width: 640px; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(10,10,10,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 13.5px/1.7 'Geist Mono', ui-monospace, monospace; color: #e7e2dc; white-space: pre-wrap; overflow-x: auto; }

.su-mo-numeros { width: min(1200px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 30px 0 10px; }
.su-mo-numeros div { border-top: 1px solid var(--su-page-border); padding-top: 18px; }
.su-mo-numeros strong { display: block; font: 700 clamp(2.4rem, 5vw, 3.6rem)/1 var(--sc-font-main, Geist, sans-serif); letter-spacing: -.05em; color: var(--su-page-ink); }
.su-mo-numeros span { color: var(--su-page-muted); font-size: 14.5px; }

.su-mo-sec { width: min(1200px, 100% - 48px); margin: 0 auto; padding: clamp(70px, 10vw, 130px) 0 0; }
.su-mo-sec > h2 { font: 700 clamp(2rem, 4.6vw, 3.6rem)/1.02 var(--sc-font-main, Geist, sans-serif); letter-spacing: -.045em; max-width: 18ch; margin: 14px 0 0; color: var(--su-page-ink); }
.su-mo-lead { max-width: 60ch; margin-top: 16px; color: var(--su-page-muted); font-size: 1.05rem; line-height: 1.6; }
.su-mo-lead code, .su-mo-passos p code { font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--su-page-input); }

.su-mo-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.su-mo-passos article { padding: 24px; border-radius: 18px; border: 1px solid var(--su-page-border); background: var(--su-page-surface); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.su-mo-passos b { font: 600 13px/1 'Geist Mono', monospace; color: var(--sc-primary, #ef650f); }
.su-mo-passos h3 { margin: 0; font-size: 1.2rem; letter-spacing: -.02em; color: var(--su-page-ink); }
.su-mo-passos pre { margin: 0; padding: 14px 16px; border-radius: 12px; background: #0e0e0e; color: #e7e2dc; font: 12.5px/1.65 'Geist Mono', monospace; white-space: pre-wrap; word-break: break-word; }
.su-mo-passos p { margin: 0; color: var(--su-page-muted); font-size: 14.5px; line-height: 1.55; }

.su-mo-filtros { display: grid; grid-template-columns: minmax(220px, 340px) 1fr auto; gap: 14px; align-items: center; margin-top: 34px; position: sticky; top: 72px; z-index: 5; padding: 12px 0; background: color-mix(in srgb, var(--su-page-bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.su-mo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.su-mo-chips button { font: 500 13.5px/1 var(--sc-font-main, Geist, sans-serif); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--su-page-border); background: transparent; color: var(--su-page-muted); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.su-mo-chips button b { font-weight: 600; margin-left: 4px; opacity: .6; }
.su-mo-chips button:hover { color: var(--su-page-ink); }
.su-mo-chips button[aria-pressed="true"] { background: var(--su-page-ink); color: var(--su-page-bg); border-color: var(--su-page-ink); }
.su-mo-filtros output { color: var(--su-page-muted); font-size: 14px; white-space: nowrap; }
.su-mo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 20px; }
.su-mo-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; border: 1px solid var(--su-page-border); background: var(--su-page-surface); text-decoration: none; color: inherit; transition: border-color .25s, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; min-width: 0; }
.su-mo-card[hidden] { display: none; }
.su-mo-card:hover { border-color: color-mix(in srgb, var(--sc-primary, #ef650f) 45%, var(--su-page-border)); transform: translateY(-2px); box-shadow: 0 16px 40px -24px var(--su-page-shadow); }
.su-mo-card-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--su-page-muted); }
.su-mo-card-top em { font-style: normal; color: var(--sc-primary, #ef650f); }
.su-mo-card strong code { font: 600 1.02rem/1.2 'Geist Mono', monospace; color: var(--su-page-ink); }
.su-mo-card-desc { color: var(--su-page-muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.su-mo-card-alias { margin-top: auto; font: 12px/1.4 'Geist Mono', monospace; color: color-mix(in srgb, var(--su-page-muted) 80%, transparent); overflow-wrap: anywhere; }
.su-mo-vazio { color: var(--su-page-muted); margin-top: 20px; }
.su-mo-mais { display: flex; justify-content: center; margin-top: 26px; }
.su-mo-mais [hidden] { display: none; }

.su-mo-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 36px; }
.su-mo-tpl { display: block; padding: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--su-page-border); background: var(--su-page-surface); text-decoration: none; color: inherit; }
.su-mo-tpl figure { margin: 0; aspect-ratio: 16/10; overflow: hidden; }
.su-mo-tpl img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.su-mo-tpl:hover img { transform: scale(1.035); }
.su-mo-tpl > span { display: grid; gap: 6px; padding: 16px 18px 20px; }
.su-mo-tpl strong { font-size: 1.15rem; letter-spacing: -.02em; color: var(--su-page-ink); }
.su-mo-tpl small { color: var(--su-page-muted); font-size: 14px; line-height: 1.5; }

.su-mo-ia { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; }
.su-mo-ia h2 { font: 700 clamp(2rem, 4.6vw, 3.6rem)/1.02 var(--sc-font-main, Geist, sans-serif); letter-spacing: -.045em; margin: 14px 0 0; color: var(--su-page-ink); }
.su-mo-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.su-mo-links a { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--su-page-border); background: var(--su-page-surface); text-decoration: none; color: var(--su-page-ink); transition: border-color .25s; }
.su-mo-links a:hover { border-color: var(--sc-primary, #ef650f); }
.su-mo-links code { font: 600 14px/1.3 'Geist Mono', monospace; }
.su-mo-links span { color: var(--su-page-muted); font-size: 14px; text-align: right; }
.su-mo-ponte { padding-bottom: clamp(80px, 10vw, 140px); }

@media (max-width: 900px) {
  .su-mo-numeros { grid-template-columns: 1fr 1fr; }
  .su-mo-passos, .su-mo-ia { grid-template-columns: 1fr; }
  .su-mo-filtros { grid-template-columns: 1fr; position: static; }
  .su-mo-links a { flex-direction: column; align-items: flex-start; }
  .su-mo-links span { text-align: left; }
}