/* Sunny Systems — página do design system (sunnysystems.com.br/ds)
 * Consome tokens/tokens.css. Nenhum valor de cor novo é definido aqui:
 * tudo sai de var(--sunny-*) ou de color-mix sobre esses tokens.
 */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--sunny-color-bg-base);
  color: var(--sunny-color-text-primary);
  font-family: var(--sunny-type-body-family);
  font-size: var(--sunny-type-body-size);
  line-height: var(--sunny-type-body-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Superfícies derivadas dos tokens, para vidro e para o tema claro */
:root {
  color-scheme: dark;
  --ds-shell-bg: color-mix(in srgb, var(--sunny-color-bg-base) 92%, transparent);
  --ds-rail: 288px;
  --ds-measure: 880px;
}

[data-theme="light"] { color-scheme: light; }

/* ---------- Foco, um só lugar ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--sunny-focus-outline);
  outline-offset: var(--sunny-focus-offset);
  border-radius: var(--sunny-radius-sm);
}

a { color: var(--sunny-color-text-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: var(--sunny-space-4); top: -100px; z-index: 30;
  background: var(--sunny-color-accent-default);
  color: var(--sunny-color-text-on-accent);
  font-weight: var(--sunny-font-weight-semibold);
  font-size: var(--sunny-font-size-14);
  padding: var(--sunny-space-3) var(--sunny-space-6);
  border-radius: var(--sunny-radius-md);
  transition: top var(--sunny-motion-duration-base) var(--sunny-motion-easing-default);
}
.skip:focus { top: var(--sunny-space-4); text-decoration: none; }

/* ===================== SHELL ===================== */
.shell { display: grid; grid-template-columns: var(--ds-rail) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sunny-color-bg-base);
  border-right: 1px solid var(--sunny-color-border-subtle);
  padding: var(--sunny-space-8) 0 var(--sunny-space-12);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sunny-color-border-strong) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--sunny-color-border-strong); border-radius: var(--sunny-radius-full); }

/* Marca do guia. Não é o logo oficial: é o título do site, ver seção Logo. */
.brand { display: flex; align-items: center; gap: var(--sunny-space-3); padding: 0 var(--sunny-space-6) var(--sunny-space-8); }
.brand .mark { color: var(--sunny-color-accent-default); width: 34px; flex-shrink: 0; filter: drop-shadow(0 0 10px var(--sunny-color-alpha-amber-15)); }
.brand .mark svg { display: block; width: 100%; height: auto; }
.brand b {
  display: block;
  font-family: var(--sunny-font-family-display);
  font-size: var(--sunny-font-size-20);
  font-weight: var(--sunny-font-weight-bold);
  letter-spacing: var(--sunny-font-letter-spacing-snug);
  line-height: 1.1;
  color: var(--sunny-color-text-primary);
}
.brand span {
  display: block;
  font-size: var(--sunny-font-size-12);
  color: var(--sunny-color-text-secondary);
  margin-top: 2px;
}

.nav-group { padding: 0 var(--sunny-space-4) var(--sunny-space-6); }
.nav-group .label {
  display: flex; align-items: center; gap: var(--sunny-space-2);
  font-family: var(--sunny-type-overline-family);
  font-size: var(--sunny-type-overline-size);
  font-weight: var(--sunny-type-overline-weight);
  letter-spacing: var(--sunny-type-overline-letter-spacing);
  text-transform: var(--sunny-type-overline-transform);
  color: var(--sunny-color-text-secondary);
  padding: 0 var(--sunny-space-3) var(--sunny-space-3);
}
/* Faixas do símbolo do sol, usadas como divisor de grupo */
.nav-group .label::after {
  content: ""; flex: 1; height: 5px;
  background:
    linear-gradient(var(--sunny-color-border-default) 0 0) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--sunny-color-border-subtle) 0 0) 0 4px / 60% 1px no-repeat;
}

.nav-group a {
  display: block;
  padding: 7px var(--sunny-space-3);
  border-radius: var(--sunny-radius-md);
  font-size: var(--sunny-type-label-size);
  font-weight: var(--sunny-font-weight-regular);
  color: var(--sunny-color-text-secondary);
  line-height: 1.45;
  transition: color var(--sunny-motion-duration-base) var(--sunny-motion-easing-default),
              background var(--sunny-motion-duration-base) var(--sunny-motion-easing-default);
}
.nav-group a:hover { color: var(--sunny-color-text-primary); background: var(--sunny-color-alpha-white-4); text-decoration: none; }
.nav-group a.active {
  color: var(--sunny-color-text-accent);
  background: var(--sunny-color-accent-soft);
  font-weight: var(--sunny-font-weight-medium);
}

.rail-foot { padding: var(--sunny-space-4) var(--sunny-space-6) 0; margin-top: var(--sunny-space-4); border-top: 1px solid var(--sunny-color-border-subtle); }
.ver {
  display: inline-flex; align-items: center; gap: var(--sunny-space-2);
  font-family: var(--sunny-font-family-mono);
  font-size: var(--sunny-font-size-11);
  color: var(--sunny-color-text-secondary);
}
.ver .dot { width: 6px; height: 6px; border-radius: var(--sunny-radius-full); background: var(--sunny-color-severity-ok); box-shadow: var(--sunny-shadow-glow-sm); }

/* ===================== CONTEÚDO ===================== */
.content { padding: 0 var(--sunny-space-12) var(--sunny-space-16); min-width: 0; }
.inner { max-width: var(--ds-measure); margin: 0 auto; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sunny-space-3);
  padding: var(--sunny-space-6) 0;
  position: sticky; top: 0; z-index: 6;
  background: var(--ds-shell-bg);
  backdrop-filter: blur(var(--sunny-header-blur));
  -webkit-backdrop-filter: blur(var(--sunny-header-blur));
}
.topbar .crumb {
  font-family: var(--sunny-font-family-mono);
  font-size: var(--sunny-font-size-11);
  letter-spacing: var(--sunny-font-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--sunny-color-text-secondary);
}
.topbar .acts { display: flex; gap: var(--sunny-space-2); }

.ghost-btn {
  display: inline-flex; align-items: center; gap: var(--sunny-space-2);
  background: transparent;
  border: 1px solid var(--sunny-color-border-strong);
  color: var(--sunny-color-text-primary);
  border-radius: var(--sunny-radius-full);
  padding: 7px var(--sunny-space-4);
  font-family: inherit;
  font-size: var(--sunny-font-size-13);
  font-weight: var(--sunny-font-weight-medium);
  cursor: pointer;
  transition: border-color var(--sunny-motion-duration-base) var(--sunny-motion-easing-default),
              color var(--sunny-motion-duration-base) var(--sunny-motion-easing-default);
}
.ghost-btn:hover { border-color: var(--sunny-color-border-accent); color: var(--sunny-color-text-accent); }
.menu-btn { display: none; }

/* ---------- Painéis ---------- */
main section[id] { display: none; padding-bottom: var(--sunny-space-12); }
main section[id].active { display: block; animation: panel-in var(--sunny-motion-duration-slow) var(--sunny-motion-easing-default); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Tipografia da página ---------- */
.eyebrow {
  display: flex; align-items: center; gap: var(--sunny-space-3);
  font-family: var(--sunny-type-overline-family);
  font-size: var(--sunny-type-overline-size);
  font-weight: var(--sunny-type-overline-weight);
  letter-spacing: var(--sunny-type-overline-letter-spacing);
  text-transform: var(--sunny-type-overline-transform);
  color: var(--sunny-color-text-accent);
  margin: 0 0 var(--sunny-space-3);
}
/* Régua de três faixas: o símbolo do sol reduzido a um sinal de seção */
.eyebrow::before {
  content: ""; width: 20px; height: 9px; flex-shrink: 0;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 20px 3px no-repeat,
    linear-gradient(currentColor 0 0) 0 4px / 14px 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 7px / 8px 2px no-repeat;
  opacity: 0.85;
}

h1 {
  font-family: var(--sunny-type-heading-1-family);
  font-size: var(--sunny-type-heading-1-size);
  font-weight: var(--sunny-type-heading-1-weight);
  line-height: var(--sunny-type-heading-1-line-height);
  letter-spacing: var(--sunny-type-heading-1-letter-spacing);
  margin: 0 0 var(--sunny-space-4);
  text-wrap: balance;
}
h2 {
  font-family: var(--sunny-type-heading-4-family);
  font-size: var(--sunny-font-size-32);
  font-weight: var(--sunny-font-weight-bold);
  line-height: var(--sunny-type-heading-4-line-height);
  letter-spacing: var(--sunny-font-letter-spacing-snug);
  margin: var(--sunny-space-12) 0 var(--sunny-space-4);
  text-wrap: balance;
}
h3 {
  font-family: var(--sunny-type-heading-5-family);
  font-size: var(--sunny-type-heading-5-size);
  font-weight: var(--sunny-type-heading-5-weight);
  line-height: var(--sunny-type-heading-5-line-height);
  margin: var(--sunny-space-8) 0 var(--sunny-space-3);
}
h4 {
  font-family: var(--sunny-font-family-body);
  font-size: var(--sunny-font-size-14);
  font-weight: var(--sunny-font-weight-semibold);
  letter-spacing: var(--sunny-font-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--sunny-color-text-secondary);
  margin: var(--sunny-space-8) 0 var(--sunny-space-3);
}
.lede {
  font-size: var(--sunny-type-body-lg-size);
  line-height: var(--sunny-type-body-lg-line-height);
  color: var(--sunny-color-text-secondary);
  max-width: 62ch;
  margin: 0 0 var(--sunny-space-6);
}
p { max-width: 68ch; margin: 0 0 var(--sunny-space-4); }
.small { font-size: var(--sunny-type-caption-size); color: var(--sunny-color-text-secondary); }
strong, b { color: var(--sunny-color-text-primary); font-weight: var(--sunny-font-weight-semibold); }

ul, ol { max-width: 68ch; padding-left: var(--sunny-space-6); margin: 0 0 var(--sunny-space-4); }
li { margin-bottom: var(--sunny-space-2); color: var(--sunny-color-text-secondary); }
li strong, li b { color: var(--sunny-color-text-primary); }

hr { border: 0; border-top: 1px solid var(--sunny-color-border-subtle); margin: var(--sunny-space-12) 0; }

/* Glow do hero. Um por viewport, na abertura do guia. */
.hero { position: relative; padding-top: var(--sunny-space-6); }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: -140px; left: 50%; transform: translateX(-50%);
  width: 620px; height: 420px; max-width: 120%;
  background: radial-gradient(ellipse at center, var(--sunny-color-alpha-amber-7), transparent 68%);
  pointer-events: none;
}
.hero h1 {
  font-family: var(--sunny-type-display-family);
  font-size: var(--sunny-type-display-size);
  line-height: var(--sunny-type-display-line-height);
  letter-spacing: var(--sunny-type-display-letter-spacing);
}

/* ---------- Mono e tokens ---------- */
code, .mono { font-family: var(--sunny-font-family-mono); }
code.tok {
  font-family: var(--sunny-font-family-mono);
  font-size: 0.86em;
  background: var(--sunny-color-alpha-white-4);
  border: 1px solid var(--sunny-color-border-subtle);
  border-radius: var(--sunny-radius-sm);
  padding: 1px 6px;
  color: var(--sunny-color-text-accent-soft);
  white-space: nowrap;
}
button.tok { cursor: copy; }
button.tok:hover { border-color: var(--sunny-color-border-accent); }
button.tok.copied { color: var(--sunny-color-severity-ok); border-color: var(--sunny-color-severity-ok); }

pre.code {
  background: var(--sunny-color-bg-terminal);
  border: 1px solid var(--sunny-color-border-subtle);
  border-radius: var(--sunny-radius-lg);
  padding: var(--sunny-space-4) var(--sunny-space-6);
  overflow-x: auto;
  font-family: var(--sunny-type-code-family);
  font-size: var(--sunny-type-code-size);
  line-height: var(--sunny-type-code-line-height);
  color: var(--sunny-color-text-primary);
  margin: 0 0 var(--sunny-space-6);
}
pre.code .c { color: var(--sunny-color-text-secondary); }
pre.code .a { color: var(--sunny-color-text-accent); }

/* ---------- Grades e cards ---------- */
.grid { display: grid; gap: var(--sunny-space-4); margin-bottom: var(--sunny-space-6); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.card {
  background: var(--sunny-card-bg);
  border: var(--sunny-card-border);
  border-radius: var(--sunny-card-radius);
  padding: var(--sunny-space-6);
}
.card .k {
  display: block;
  font-family: var(--sunny-font-family-display);
  font-size: var(--sunny-font-size-17);
  font-weight: var(--sunny-font-weight-semibold);
  color: var(--sunny-color-text-primary);
  margin-bottom: var(--sunny-space-2);
}
.card p, .card span { font-size: var(--sunny-font-size-14); color: var(--sunny-color-text-secondary); margin: 0; }

.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sunny-space-3); margin-bottom: var(--sunny-space-6); }
.quick a {
  display: block;
  background: var(--sunny-card-bg);
  border: var(--sunny-card-border);
  border-radius: var(--sunny-card-radius);
  padding: var(--sunny-space-4) var(--sunny-space-6);
  transition: border-color var(--sunny-motion-duration-slow) var(--sunny-motion-easing-default),
              transform var(--sunny-motion-duration-slow) var(--sunny-motion-easing-default);
}
.quick a:hover { border: var(--sunny-card-border-hover); transform: translateY(-2px); text-decoration: none; }
.quick a b { display: block; font-family: var(--sunny-font-family-display); font-size: var(--sunny-font-size-17); margin-bottom: 2px; }
.quick a span { display: block; font-size: var(--sunny-font-size-13); color: var(--sunny-color-text-secondary); }

/* ---------- Callouts ---------- */
.callout {
  display: flex; gap: var(--sunny-space-3);
  background: var(--sunny-color-accent-soft);
  border-left: 2px solid var(--sunny-color-border-accent);
  border-radius: 0 var(--sunny-radius-lg) var(--sunny-radius-lg) 0;
  padding: var(--sunny-space-4) var(--sunny-space-6);
  margin: 0 0 var(--sunny-space-6);
  max-width: 74ch;
}
.callout p { margin: 0; font-size: var(--sunny-font-size-14); color: var(--sunny-color-text-secondary); }
.callout .ico { flex-shrink: 0; color: var(--sunny-color-text-accent); font-family: var(--sunny-font-family-mono); font-weight: var(--sunny-font-weight-bold); font-size: var(--sunny-font-size-14); line-height: 1.6; }
.callout.warn { background: var(--sunny-color-status-warning-bg); border-left-color: var(--sunny-color-status-warning-border); }
.callout.warn .ico { color: var(--sunny-color-status-warning-icon); }
.callout.stop { background: var(--sunny-color-status-error-bg); border-left-color: var(--sunny-color-status-error-border); }
.callout.stop .ico { color: var(--sunny-color-status-error-icon); }

/* ---------- Selos ---------- */
.st {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sunny-font-family-mono);
  font-size: var(--sunny-font-size-10);
  font-weight: var(--sunny-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--sunny-radius-full);
  white-space: nowrap;
  border: 1px solid transparent;
}
.st::before { content: ""; width: 5px; height: 5px; border-radius: var(--sunny-radius-full); background: currentColor; }
.st-medido { color: var(--sunny-color-severity-ok); background: var(--sunny-color-status-success-bg); border-color: var(--sunny-color-status-success-bg); }
.st-derivado { color: var(--sunny-color-text-accent-soft); background: var(--sunny-color-accent-soft); }
.st-proposta { color: var(--sunny-color-status-info-text); background: var(--sunny-color-status-info-bg); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--sunny-font-size-11);
  font-weight: var(--sunny-font-weight-semibold);
  letter-spacing: 0.03em;
  padding: 3px 11px;
  border-radius: var(--sunny-radius-full);
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--sunny-radius-full); background: currentColor; }
.pill-stable { color: var(--sunny-color-severity-ok); background: var(--sunny-color-status-success-bg); }
.pill-beta { color: var(--sunny-color-status-warning-text); background: var(--sunny-color-status-warning-bg); }
.pill-proposta { color: var(--sunny-color-status-info-text); background: var(--sunny-color-status-info-bg); }
.pill-nocode { color: var(--sunny-color-text-secondary); background: var(--sunny-color-alpha-white-4); }
.pill-nocode::before { display: none; }

.title-row { display: flex; align-items: center; gap: var(--sunny-space-3); flex-wrap: wrap; margin-bottom: var(--sunny-space-4); }
.title-row h1 { margin: 0; }

/* ---------- Tabelas ---------- */
.table-wrap {
  overflow-x: auto;
  border: var(--sunny-card-border);
  border-radius: var(--sunny-card-radius);
  margin: 0 0 var(--sunny-space-6);
  background: var(--sunny-card-bg);
}
table { border-collapse: collapse; width: 100%; font-size: var(--sunny-font-size-14); min-width: 480px; }
th, td { text-align: left; padding: var(--sunny-space-3) var(--sunny-space-4); border-bottom: 1px solid var(--sunny-color-border-subtle); vertical-align: top; }
th {
  font-family: var(--sunny-font-family-body);
  font-size: var(--sunny-font-size-11);
  font-weight: var(--sunny-font-weight-semibold);
  letter-spacing: var(--sunny-font-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--sunny-color-text-secondary);
  background: var(--sunny-color-bg-elevated);
  white-space: nowrap;
}
td { color: var(--sunny-color-text-secondary); }
tbody tr:last-child td { border-bottom: none; }
td.mono, th.mono { font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-13); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td .hex { font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-13); color: var(--sunny-color-text-primary); }
.swatch-dot { display: inline-block; width: 14px; height: 14px; border-radius: var(--sunny-radius-sm); border: 1px solid var(--sunny-color-border-default); vertical-align: -2px; margin-right: var(--sunny-space-2); }

/* ---------- Amostras de cor ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--sunny-space-3); margin-bottom: var(--sunny-space-6); }
.sw {
  border-radius: var(--sunny-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sunny-color-border-subtle);
  background: var(--sunny-card-bg);
}
.sw .chip { height: 64px; display: block; }
.sw .meta { padding: var(--sunny-space-2) var(--sunny-space-3) var(--sunny-space-3); }
.sw .meta b { display: block; font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-12); color: var(--sunny-color-text-primary); }
.sw .meta .hex { display: block; font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-11); color: var(--sunny-color-text-secondary); margin: 2px 0 6px; }

/* ---------- Escalas ---------- */
.scale-row {
  display: grid; grid-template-columns: 150px 1fr;
  gap: var(--sunny-space-6); align-items: baseline;
  padding: var(--sunny-space-3) 0;
  border-bottom: 1px solid var(--sunny-color-border-subtle);
}
.scale-row:last-child { border-bottom: none; }
.scale-row .m { font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-12); color: var(--sunny-color-text-secondary); }
.scale-row .m b { display: block; color: var(--sunny-color-text-accent); font-size: var(--sunny-font-size-13); font-weight: var(--sunny-font-weight-medium); }
.scale-row .s { color: var(--sunny-color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.bar-row { display: grid; grid-template-columns: 120px 64px 1fr; gap: var(--sunny-space-4); align-items: center; padding: 7px 0; }
.bar-row .n { font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-12); color: var(--sunny-color-text-accent); }
.bar-row .v { font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-12); color: var(--sunny-color-text-secondary); font-variant-numeric: tabular-nums; }
.bar-row .b { height: 14px; background: var(--sunny-color-accent-default); border-radius: var(--sunny-radius-sm); opacity: 0.85; }

.demo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sunny-space-4); margin-bottom: var(--sunny-space-6); }
.demo-tile { text-align: center; }
.demo-tile .box {
  height: 84px;
  background: var(--sunny-color-bg-elevated);
  border: 1px solid var(--sunny-color-border-default);
  margin-bottom: var(--sunny-space-2);
}
.demo-tile .lbl { font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-11); color: var(--sunny-color-text-accent); display: block; }
.demo-tile .val { font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-11); color: var(--sunny-color-text-secondary); }

/* ---------- Checklist ---------- */
.check { list-style: none; padding: 0; margin: 0 0 var(--sunny-space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px var(--sunny-space-6); max-width: none; }
.check li { font-size: var(--sunny-font-size-14); color: var(--sunny-color-text-secondary); padding: 6px 0 6px 26px; position: relative; margin: 0; }
.check li::before { content: "✓"; position: absolute; left: 2px; top: 6px; color: var(--sunny-color-severity-ok); font-weight: var(--sunny-font-weight-bold); }

.dont li::before { content: "×"; color: var(--sunny-color-severity-critical); font-size: 1.15em; top: 4px; }

/* Duas colunas faça/evite */
.do-dont { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--sunny-space-4); margin-bottom: var(--sunny-space-6); }
.do-dont .col { background: var(--sunny-card-bg); border: var(--sunny-card-border); border-radius: var(--sunny-card-radius); padding: var(--sunny-space-4) var(--sunny-space-6) var(--sunny-space-6); }
.do-dont h4 { margin-top: var(--sunny-space-4); }
.do-dont .check { grid-template-columns: 1fr; margin-bottom: 0; }

/* ---------- Chips de referência ---------- */
.refrow { display: flex; flex-wrap: wrap; gap: var(--sunny-space-2); margin: var(--sunny-space-6) 0; }
.ref {
  display: inline-flex; align-items: center; gap: var(--sunny-space-2);
  background: transparent;
  border: 1px solid var(--sunny-color-border-strong);
  border-radius: var(--sunny-radius-full);
  padding: 6px var(--sunny-space-4);
  font-size: var(--sunny-font-size-13);
  font-weight: var(--sunny-font-weight-medium);
  color: var(--sunny-color-text-primary);
  transition: border-color var(--sunny-motion-duration-base) var(--sunny-motion-easing-default),
              color var(--sunny-motion-duration-base) var(--sunny-motion-easing-default);
}
.ref::before { content: "→"; color: var(--sunny-color-text-accent); }
.ref:hover { border-color: var(--sunny-color-border-accent); color: var(--sunny-color-text-accent); text-decoration: none; }

/* ---------- FAQ ---------- */
details {
  background: var(--sunny-card-bg);
  border: var(--sunny-card-border);
  border-radius: var(--sunny-card-radius);
  padding: 0 var(--sunny-space-6);
  margin-bottom: var(--sunny-space-2);
}
summary {
  cursor: pointer; list-style: none;
  padding: var(--sunny-space-4) 0;
  font-weight: var(--sunny-font-weight-medium);
  font-size: var(--sunny-font-size-15);
  color: var(--sunny-color-text-primary);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sunny-space-4);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--sunny-font-family-mono); color: var(--sunny-color-text-accent); font-size: var(--sunny-font-size-18); flex-shrink: 0; }
details[open] summary::after { content: "−"; }
details .ans { padding: 0 0 var(--sunny-space-4); font-size: var(--sunny-font-size-14); color: var(--sunny-color-text-secondary); max-width: 68ch; }
details .ans p:last-child { margin-bottom: 0; }

/* ===================== PLAYGROUND ===================== */
.pg {
  border: var(--sunny-card-border);
  border-radius: var(--sunny-card-radius);
  overflow: hidden;
  margin: 0 0 var(--sunny-space-8);
  background: var(--sunny-card-bg);
}
.pg-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sunny-space-3);
  padding: var(--sunny-space-3) var(--sunny-space-6);
  background: var(--sunny-color-bg-elevated);
  border-bottom: 1px solid var(--sunny-color-border-subtle);
}
.pg-head h3 { margin: 0; font-size: var(--sunny-font-size-15); font-family: var(--sunny-font-family-body); font-weight: var(--sunny-font-weight-semibold); }
.pg-body { display: grid; grid-template-columns: 236px 1fr; }
.pg-controls {
  padding: var(--sunny-space-6);
  border-right: 1px solid var(--sunny-color-border-subtle);
  display: flex; flex-direction: column; gap: var(--sunny-space-6);
}
.pg-field-label {
  font-family: var(--sunny-font-family-mono);
  font-size: var(--sunny-font-size-10);
  font-weight: var(--sunny-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sunny-color-text-secondary);
  margin-bottom: var(--sunny-space-2);
}
.pg-opt { display: flex; align-items: center; gap: var(--sunny-space-2); font-size: var(--sunny-font-size-14); padding: 5px 0; cursor: pointer; color: var(--sunny-color-text-primary); }
.pg-opt input { accent-color: var(--sunny-color-accent-default); width: 15px; height: 15px; cursor: pointer; }
.pg-right { display: flex; flex-direction: column; min-width: 0; }
.pg-right .pg-preview { flex: 1; }
.pg-preview {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--sunny-space-4);
  padding: var(--sunny-space-12) var(--sunny-space-6);
  min-height: 190px;
  background: var(--sunny-color-bg-base);
  border-bottom: 1px solid var(--sunny-color-border-subtle);
}
.pg-code { background: var(--sunny-color-bg-terminal); padding: var(--sunny-space-3) var(--sunny-space-6) var(--sunny-space-4); }
.pg-code-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sunny-font-family-mono);
  font-size: var(--sunny-font-size-10);
  letter-spacing: var(--sunny-font-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--sunny-color-text-secondary);
  margin-bottom: var(--sunny-space-2);
}
.pg-copy { cursor: pointer; background: none; border: none; color: var(--sunny-color-text-secondary); font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-11); padding: 2px 6px; }
.pg-copy:hover { color: var(--sunny-color-text-accent); }
.pg-code pre { margin: 0; font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-13); line-height: 1.65; color: var(--sunny-color-text-primary); white-space: pre-wrap; }

/* Vitrine estática de estados */
.states { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--sunny-color-border-subtle); border: var(--sunny-card-border); border-radius: var(--sunny-card-radius); overflow: hidden; margin-bottom: var(--sunny-space-6); }
.state { background: var(--sunny-card-bg); padding: var(--sunny-space-6); display: flex; flex-direction: column; align-items: center; gap: var(--sunny-space-4); }
.state .cap { font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-11); color: var(--sunny-color-text-secondary); text-align: center; }

/* Anatomia com cotas */
.anatomy {
  display: flex; justify-content: center;
  padding: 72px var(--sunny-space-16);
  border: var(--sunny-card-border);
  border-radius: var(--sunny-card-radius);
  background: var(--sunny-card-bg);
  margin-bottom: var(--sunny-space-3);
  overflow-x: auto;
}
.anatomy-inner { position: relative; display: inline-flex; }
.hl { position: absolute; top: 0; bottom: 0; background: var(--sunny-color-alpha-amber-15); border-left: 1px dashed var(--sunny-color-accent-default); border-right: 1px dashed var(--sunny-color-accent-default); }
.dim {
  position: absolute;
  font-family: var(--sunny-font-family-mono);
  font-size: var(--sunny-font-size-11);
  font-weight: var(--sunny-font-weight-medium);
  color: var(--sunny-color-text-accent);
  white-space: nowrap;
}
.dim-b { bottom: -28px; }
.dim-r { right: -70px; top: 50%; transform: translateY(-50%); }
.anatomy-cap { text-align: center; font-size: var(--sunny-font-size-13); color: var(--sunny-color-text-secondary); margin: 0 0 var(--sunny-space-8); max-width: none; }
.anatomy-cap b { color: var(--sunny-color-text-primary); }

/* ===================== COMPONENTES DA MARCA (demo real) ===================== */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sunny-button-gap);
  font-family: var(--sunny-font-family-body);
  font-size: var(--sunny-button-font-size);
  font-weight: var(--sunny-button-font-weight);
  line-height: 1.2;
  padding: var(--sunny-button-padding-y) var(--sunny-button-padding-x);
  border-radius: var(--sunny-button-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--sunny-motion-duration-base) var(--sunny-motion-easing-default),
              color var(--sunny-motion-duration-base) var(--sunny-motion-easing-default),
              transform var(--sunny-motion-duration-fast) var(--sunny-motion-easing-default);
}
.btn-primary { background: var(--sunny-button-primary-bg); color: var(--sunny-button-primary-fg); }
.btn-primary:hover:not(:disabled) { background: var(--sunny-button-primary-bg-hover); transform: translateY(-1px); text-decoration: none; }
.btn-primary:active:not(:disabled) { background: var(--sunny-button-primary-bg-active); transform: none; }
.btn-secondary { background: var(--sunny-button-secondary-bg); color: var(--sunny-button-secondary-fg); border: var(--sunny-button-secondary-border); }
.btn-secondary:hover:not(:disabled) { background: var(--sunny-button-secondary-bg-hover); color: var(--sunny-button-secondary-fg-hover); transform: translateY(-1px); text-decoration: none; }
.btn-secondary:active:not(:disabled) { background: var(--sunny-button-primary-bg-active); border-color: var(--sunny-button-primary-bg-active); transform: none; }
.btn-primary.sm, .btn-secondary.sm {
  padding: var(--sunny-button-padding-y-sm) var(--sunny-button-padding-x-sm);
  font-size: var(--sunny-button-font-size-sm);
}
.btn-primary:disabled, .btn-secondary:disabled,
.btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary.full, .btn-secondary.full { width: 100%; }
.btn-primary svg, .btn-secondary svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Estados forçados para a vitrine */
.is-hover.btn-primary { background: var(--sunny-button-primary-bg-hover); transform: translateY(-1px); }
.is-active.btn-primary { background: var(--sunny-button-primary-bg-active); }
.is-focus { outline: var(--sunny-focus-outline); outline-offset: var(--sunny-focus-offset); }
.is-hover.btn-secondary { background: var(--sunny-button-secondary-bg-hover); color: var(--sunny-button-secondary-fg-hover); transform: translateY(-1px); }

.badge {
  display: inline-flex; align-items: center; gap: var(--sunny-space-1);
  background: var(--sunny-badge-bg);
  color: var(--sunny-badge-fg);
  font-family: var(--sunny-type-overline-family);
  font-size: var(--sunny-badge-font-size);
  font-weight: var(--sunny-type-overline-weight);
  line-height: 1;
  letter-spacing: var(--sunny-badge-letter-spacing);
  text-transform: uppercase;
  padding: var(--sunny-badge-padding-y) var(--sunny-badge-padding-x);
  border-radius: var(--sunny-badge-radius);
}
.badge-success { background: var(--sunny-color-status-success-bg); color: var(--sunny-color-status-success-text); }
.badge-error { background: var(--sunny-color-status-error-bg); color: var(--sunny-color-status-error-text); }
.badge-warning { background: var(--sunny-color-status-warning-bg); color: var(--sunny-color-status-warning-text); }
.badge-info { background: var(--sunny-color-status-info-bg); color: var(--sunny-color-status-info-text); }

.demo-card {
  background: var(--sunny-card-bg);
  border: var(--sunny-card-border);
  border-radius: var(--sunny-card-radius);
  padding: var(--sunny-card-padding);
  max-width: 340px;
  text-align: left;
  transition: border-color var(--sunny-motion-duration-slow) var(--sunny-motion-easing-default),
              transform var(--sunny-motion-duration-slow) var(--sunny-motion-easing-default);
}
.demo-card .glyph { color: var(--sunny-color-accent-default); width: 40px; height: 40px; margin-bottom: var(--sunny-space-4); }
.demo-card h5 {
  font-family: var(--sunny-type-heading-5-family);
  font-size: var(--sunny-type-heading-5-size);
  font-weight: var(--sunny-type-heading-5-weight);
  line-height: var(--sunny-type-heading-5-line-height);
  margin: 0 0 var(--sunny-space-3);
  color: var(--sunny-color-text-primary);
}
.demo-card p { font-size: var(--sunny-font-size-15); color: var(--sunny-color-text-secondary); margin: 0 0 var(--sunny-space-6); }
.demo-card.is-interactive:hover { border: var(--sunny-card-border-hover); transform: translateY(-2px); }
.demo-card.is-glass { background: var(--sunny-color-alpha-white-4); backdrop-filter: blur(var(--sunny-card-blur)); -webkit-backdrop-filter: blur(var(--sunny-card-blur)); }
.demo-card.is-glass p { color: var(--sunny-color-text-primary); }
.glass-stage {
  background:
    radial-gradient(ellipse at 30% 40%, var(--sunny-color-alpha-amber-30), transparent 60%),
    radial-gradient(ellipse at 75% 70%, var(--sunny-color-alpha-amber-15), transparent 55%),
    var(--sunny-color-bg-base);
}

.lead-field { display: flex; flex-direction: column; gap: var(--sunny-input-gap); max-width: 340px; width: 100%; text-align: left; }
.lead-field label {
  font-family: var(--sunny-input-label-family);
  font-size: var(--sunny-input-label-size);
  font-weight: var(--sunny-input-label-weight);
  letter-spacing: var(--sunny-input-label-letter-spacing);
  text-transform: var(--sunny-input-label-transform);
  color: var(--sunny-input-label-fg);
}
.lead-field input {
  background: var(--sunny-input-bg);
  border: var(--sunny-input-border);
  border-radius: var(--sunny-input-radius);
  padding: var(--sunny-input-padding);
  color: var(--sunny-input-fg);
  font-family: var(--sunny-font-family-body);
  font-size: var(--sunny-input-font-size);
  width: 100%;
}
.lead-field input::placeholder { color: var(--sunny-input-placeholder); opacity: 0.65; }
.lead-field input:hover { background: var(--sunny-input-bg-hover); }
.lead-field input:focus { outline: none; border: var(--sunny-input-border-focus); background: var(--sunny-input-bg-focus); }
.lead-field.invalid input, .lead-field input[aria-invalid="true"] { border: var(--sunny-input-border-invalid); background: var(--sunny-input-bg-invalid); }
.lead-field .lead-error { font-size: var(--sunny-input-error-size); color: var(--sunny-input-error-fg); margin: 0; }
.lead-field.is-hover input { background: var(--sunny-input-bg-hover); }
.lead-field.is-focus input { border: var(--sunny-input-border-focus); background: var(--sunny-input-bg-focus); }
.lead-field.is-disabled input { opacity: 0.5; cursor: not-allowed; }

.nav-demo { display: flex; gap: var(--sunny-nav-gap); align-items: center; flex-wrap: wrap; }
.nav-demo a {
  position: relative;
  color: var(--sunny-nav-link-fg);
  font-size: var(--sunny-nav-link-font-size);
  font-weight: var(--sunny-nav-link-font-weight);
  padding-bottom: 6px;
  text-decoration: none;
}
.nav-demo a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--sunny-color-accent-default);
  transition: width var(--sunny-motion-duration-base) var(--sunny-motion-easing-default);
}
.nav-demo a:hover, .nav-demo a[aria-current="page"], .nav-demo a.is-hover { color: var(--sunny-nav-link-fg-hover); }
.nav-demo a:hover::after, .nav-demo a[aria-current="page"]::after, .nav-demo a.is-hover::after { width: 100%; }
.nav-demo a[aria-current="page"] { color: var(--sunny-color-text-primary); }
.lang-toggle {
  display: inline-flex; align-items: center; gap: var(--sunny-space-2);
  border: 1px solid var(--sunny-color-border-strong);
  border-radius: var(--sunny-radius-full);
  background: transparent;
  color: var(--sunny-color-text-primary);
  font-family: inherit;
  font-size: var(--sunny-font-size-12);
  font-weight: var(--sunny-font-weight-medium);
  padding: 5px var(--sunny-space-3);
  cursor: pointer;
  transition: border-color var(--sunny-motion-duration-base) var(--sunny-motion-easing-default),
              color var(--sunny-motion-duration-base) var(--sunny-motion-easing-default);
}
.lang-toggle:hover { border-color: var(--sunny-color-border-accent); color: var(--sunny-color-text-accent); }

/* Terminal de exemplo */
.terminal {
  background: var(--sunny-terminal-bg);
  border: 1px solid var(--sunny-color-border-subtle);
  border-radius: var(--sunny-radius-lg);
  overflow: hidden;
  margin-bottom: var(--sunny-space-6);
}
.terminal .bar { display: flex; gap: 7px; padding: var(--sunny-space-3) var(--sunny-space-4); background: var(--sunny-terminal-bar); border-bottom: 1px solid var(--sunny-color-border-subtle); }
.terminal .bar i { width: var(--sunny-terminal-dot-size); height: var(--sunny-terminal-dot-size); border-radius: var(--sunny-radius-full); flex-shrink: 0; }
.terminal .bar i:nth-child(1) { background: var(--sunny-terminal-dot-close); }
.terminal .bar i:nth-child(2) { background: var(--sunny-terminal-dot-min); }
.terminal .bar i:nth-child(3) { background: var(--sunny-terminal-dot-max); }
.terminal.warm { background: var(--sunny-terminal-bg-warm); }
.terminal.warm .bar { background: var(--sunny-terminal-bar-warm); }
.terminal pre { margin: 0; padding: var(--sunny-space-4); font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-13); line-height: 1.7; color: var(--sunny-color-text-primary); overflow-x: auto; }
.terminal .p { color: var(--sunny-color-text-accent); }
.terminal .c { color: var(--sunny-color-text-secondary); }
.terminal .ok { color: var(--sunny-color-severity-ok); }

/* Esquema do símbolo do logo */
.logo-stage {
  display: flex; align-items: center; justify-content: center; gap: var(--sunny-space-12);
  flex-wrap: wrap;
  padding: var(--sunny-space-16) var(--sunny-space-8);
  background: var(--sunny-card-bg);
  border: var(--sunny-card-border);
  border-radius: var(--sunny-card-radius);
  margin-bottom: var(--sunny-space-3);
}
.logo-stage .sym { color: var(--sunny-color-accent-default); width: 120px; }
.logo-stage .sym svg { display: block; width: 100%; height: auto; }
.logo-stage .clear { position: relative; padding: 28px; border: 1px dashed var(--sunny-color-border-strong); border-radius: var(--sunny-radius-md); }

/* Timeline da história */
.timeline { border-left: 2px solid var(--sunny-color-border-subtle); padding-left: var(--sunny-space-6); margin: 0 0 var(--sunny-space-6); max-width: 72ch; }
.tl-item { position: relative; padding-bottom: var(--sunny-space-8); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--sunny-space-6) - 7px); top: 7px;
  width: 12px; height: 12px; border-radius: var(--sunny-radius-full);
  background: var(--sunny-color-bg-base); border: 2px solid var(--sunny-color-border-strong);
}
.tl-item.now::before { background: var(--sunny-color-accent-default); border-color: var(--sunny-color-accent-default); box-shadow: var(--sunny-shadow-glow-sm); }
.tl-item .yr { font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-12); color: var(--sunny-color-text-accent); letter-spacing: var(--sunny-font-letter-spacing-wide); }
.tl-item h3 { margin: var(--sunny-space-1) 0 var(--sunny-space-2); }
.tl-item p { font-size: var(--sunny-font-size-15); color: var(--sunny-color-text-secondary); margin-bottom: var(--sunny-space-3); }
.tl-swatches { display: flex; gap: 6px; }
.tl-swatches i { width: 26px; height: 14px; border-radius: var(--sunny-radius-sm); border: 1px solid var(--sunny-color-border-subtle); }

footer {
  border-top: 1px solid var(--sunny-color-border-subtle);
  margin-top: var(--sunny-space-12);
  padding-top: var(--sunny-space-6);
  color: var(--sunny-color-text-secondary);
  font-size: var(--sunny-font-size-13);
}

.backdrop { display: none; position: fixed; inset: 0; background: var(--sunny-color-bg-header); z-index: 8; }

/* ===================== Galerias de logo, ícones, assets e loops ===================== */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sunny-space-4);
  margin: 0 0 var(--sunny-space-6);
}
.logo-card {
  margin: 0;
  border: 1px solid var(--sunny-color-border-subtle);
  border-radius: var(--sunny-radius-xl);
  overflow: hidden;
  background: var(--sunny-color-bg-card);
}
.logo-card figcaption {
  padding: var(--sunny-space-3) var(--sunny-space-4);
  font-family: var(--sunny-font-family-mono);
  font-size: var(--sunny-font-size-11);
  color: var(--sunny-color-text-secondary);
  letter-spacing: var(--sunny-font-letter-spacing-wide);
  text-transform: uppercase;
  border-top: 1px solid var(--sunny-color-border-subtle);
}
.logo-card .stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 140px; padding: var(--sunny-space-8) var(--sunny-space-6);
}
.logo-card img { max-width: 86%; max-height: 72px; height: auto; display: block; }
.logo-card.is-vert img { max-height: 96px; max-width: 48%; }
.logo-card.is-icon img { max-height: 56px; max-width: 40%; }
.logo-card.is-name img { max-height: 36px; }
.logo-card.on-dark .stage { background: var(--sunny-color-neutral-900); }
.logo-card.on-light .stage { background: var(--sunny-color-neutral-0); }
.logo-card.on-amber .stage { background: var(--sunny-color-amber-500); }
.logo-card.on-photo .stage {
  background:
    linear-gradient(var(--sunny-color-alpha-ink-92), var(--sunny-color-alpha-ink-92)),
    url("assets/digital/post-4x5.jpg") center / cover no-repeat;
}
.logo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sunny-space-4);
  margin: 0 0 var(--sunny-space-6);
}
.logo-pair .col { margin: 0; }
.logo-pair h4 { margin: 0 0 var(--sunny-space-3); font-size: var(--sunny-font-size-13); letter-spacing: var(--sunny-font-letter-spacing-wide); text-transform: uppercase; }
.logo-pair .ok h4 { color: var(--sunny-color-status-success-text); }
.logo-pair .no h4 { color: var(--sunny-color-status-error-text); }

.loop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sunny-space-4);
  margin: 0 0 var(--sunny-space-6);
}
.loop-card {
  border: 1px solid var(--sunny-color-border-subtle);
  border-radius: var(--sunny-radius-xl);
  overflow: hidden;
  background: var(--sunny-color-bg-card);
}
.loop-card header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sunny-space-2);
  padding: var(--sunny-space-3) var(--sunny-space-4);
  border-bottom: 1px solid var(--sunny-color-border-subtle);
}
.loop-card header b {
  font-family: var(--sunny-font-family-display);
  font-size: var(--sunny-font-size-14);
  font-weight: var(--sunny-font-weight-semibold);
}
.loop-card header span {
  display: block;
  font-size: var(--sunny-font-size-12);
  color: var(--sunny-color-text-secondary);
  font-weight: var(--sunny-font-weight-regular);
  margin-top: 2px;
}
.loop-stage {
  position: relative;
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sunny-color-neutral-900);
}
.loop-pause {
  position: absolute; top: var(--sunny-space-3); right: var(--sunny-space-3); z-index: 2;
  background: var(--sunny-color-neutral-900);
  color: var(--sunny-color-neutral-0);
}
.loop-stage[data-paused],
.loop-stage[data-paused] * { animation-play-state: paused !important; }
.hdr-demo .nav-demo {
  display: flex; gap: var(--sunny-space-6); flex: 1;
  font-size: var(--sunny-font-size-13);
}
.hdr-demo .nav-demo span { color: var(--sunny-color-text-secondary); }
.hdr-demo .nav-demo [aria-current] { color: var(--sunny-color-text-primary); }

.loop-sun { flex-direction: column; gap: var(--sunny-space-4); padding: var(--sunny-space-8); }
.loop-sun-mark {
  width: 88px; height: auto;
  clip-path: inset(100% 0 0 0);
  animation: sun-rise 8s var(--sunny-motion-easing-default) infinite;
}
.loop-sun-word {
  width: 168px; height: auto;
  opacity: 0;
  animation: word-in 8s var(--sunny-motion-easing-default) infinite;
}
@keyframes sun-rise {
  0% { clip-path: inset(100% 0 0 0); }
  28% { clip-path: inset(0); }
  82% { clip-path: inset(0); }
  100% { clip-path: inset(100% 0 0 0); }
}
@keyframes word-in {
  0%, 24% { opacity: 0; transform: translateY(8px); }
  40%, 82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}

.loop-space {
  position: relative;
  width: 280px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--sunny-color-border-strong);
  border-radius: var(--sunny-radius-md);
  animation: space-box 9s var(--sunny-motion-easing-default) infinite;
  overflow: hidden;
}
.loop-space img { position: absolute; opacity: 0; }
.loop-space .hor { width: 220px; animation: vis-hor 9s infinite; }
.loop-space .vert { width: 72px; animation: vis-vert 9s infinite; }
.loop-space .icon { width: 36px; animation: vis-icon 9s infinite; }
@keyframes space-box {
  0%, 28% { width: 280px; height: 120px; }
  33%, 61% { width: 140px; height: 160px; }
  66%, 94% { width: 72px; height: 72px; }
  100% { width: 280px; height: 120px; }
}
@keyframes vis-hor { 0%, 28% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes vis-vert { 0%, 32% { opacity: 0; } 33%, 61% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes vis-icon { 0%, 65% { opacity: 0; } 66%, 94% { opacity: 1; } 100% { opacity: 0; } }

.loop-bg { position: relative; width: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.loop-bg .bg {
  position: absolute; inset: 0;
  animation: bg-cycle 10s var(--sunny-motion-easing-default) infinite;
}
.loop-bg img {
  position: relative; z-index: 1; width: 200px; height: auto;
  animation: lockup-cycle 10s var(--sunny-motion-easing-default) infinite;
}
@keyframes bg-cycle {
  0%, 22% { background: var(--sunny-color-neutral-900); }
  25%, 47% { background: var(--sunny-color-amber-500); }
  50%, 72% { background: var(--sunny-color-neutral-0); }
  75%, 97% { background: var(--sunny-color-bg-base) url("assets/digital/post-4x5.jpg") center / cover no-repeat; }
  100% { background: var(--sunny-color-neutral-900); }
}
.loop-bg .lock-white, .loop-bg .lock-pos, .loop-bg .lock-color { position: absolute; width: 200px; opacity: 0; }
.loop-bg .lock-white { animation: show-white 10s infinite; }
.loop-bg .lock-pos { animation: show-pos 10s infinite; }
.loop-bg .lock-color { animation: show-color 10s infinite; }
@keyframes show-white { 0%, 22% { opacity: 1; } 25%, 72% { opacity: 0; } 75%, 97% { opacity: 1; } 100% { opacity: 1; } }
@keyframes show-pos { 0%, 24% { opacity: 0; } 25%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes show-color { 0%, 49% { opacity: 0; } 50%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } }

.loop-app { width: 100%; min-height: 200px; position: relative; }
.loop-app .frame { position: absolute; inset: 24px; opacity: 0; }
.loop-app .frame.header { animation: app-header 12s infinite; }
.loop-app .frame.slide { animation: app-slide 12s infinite; }
.loop-app .frame.post { animation: app-post 12s infinite; }
@keyframes app-header { 0%, 28% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes app-slide { 0%, 32% { opacity: 0; } 33%, 61% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes app-post { 0%, 65% { opacity: 0; } 66%, 94% { opacity: 1; } 100% { opacity: 0; } }
.hdr-demo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sunny-space-4);
  height: 56px; padding: 0 var(--sunny-space-4);
  background: var(--sunny-color-alpha-ink-92);
  border: 1px solid var(--sunny-color-border-subtle);
  border-radius: var(--sunny-radius-md);
  backdrop-filter: blur(var(--sunny-header-blur));
}
.hdr-demo img { height: 28px; width: auto; }
.slide-demo {
  aspect-ratio: 16 / 9; max-height: 160px; margin: 0 auto;
  background: var(--sunny-color-neutral-900);
  border: 1px solid var(--sunny-color-border-subtle);
  border-radius: var(--sunny-radius-md);
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: var(--sunny-space-4);
}
.slide-demo img { height: 22px; width: auto; }
.post-demo {
  aspect-ratio: 4 / 5; max-height: 168px; margin: 0 auto;
  background:
    linear-gradient(var(--sunny-color-alpha-ink-92), var(--sunny-color-alpha-ink-92)),
    url("assets/digital/post-4x5.jpg") center / cover no-repeat;
  border-radius: var(--sunny-radius-md);
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--sunny-space-4);
}
.post-demo img { height: 18px; width: auto; }

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--sunny-space-3);
  margin: 0 0 var(--sunny-space-8);
}
.icon-cell {
  display: flex; flex-direction: column; align-items: center; gap: var(--sunny-space-2);
  padding: var(--sunny-space-4) var(--sunny-space-2);
  border: 1px solid var(--sunny-color-border-subtle);
  border-radius: var(--sunny-radius-lg);
  background: var(--sunny-color-bg-card);
  color: var(--sunny-color-text-primary);
}
.icon-cell svg { width: var(--icon-size, 24px); height: var(--icon-size, 24px); display: block; }
.icon-cell .nm {
  font-family: var(--sunny-font-family-mono);
  font-size: var(--sunny-font-size-11);
  color: var(--sunny-color-text-secondary);
  text-align: center;
}
.icon-cell.is-ok { color: var(--sunny-color-status-success-icon); }
.icon-cell.is-warn { color: var(--sunny-color-status-warning-icon); }
.icon-cell.is-err { color: var(--sunny-color-status-error-icon); }
.icon-cell.is-info { color: var(--sunny-color-status-info-icon); }
.icon-cell.is-accent { color: var(--sunny-color-accent-default); }
.icon-sizes { display: flex; align-items: flex-end; gap: var(--sunny-space-8); padding: var(--sunny-space-6); border: 1px solid var(--sunny-color-border-subtle); border-radius: var(--sunny-radius-xl); background: var(--sunny-color-bg-card); margin: 0 0 var(--sunny-space-6); }
.icon-sizes figure { margin: 0; text-align: center; color: var(--sunny-color-text-primary); }
.icon-sizes figcaption { font-family: var(--sunny-font-family-mono); font-size: var(--sunny-font-size-11); color: var(--sunny-color-text-secondary); margin-top: var(--sunny-space-2); }

.stat-row { display: flex; justify-content: center; gap: var(--sunny-space-16); flex-wrap: wrap; padding: var(--sunny-space-12) var(--sunny-space-8); background: var(--sunny-color-amber-500); border-radius: var(--sunny-card-radius); margin: 0 0 var(--sunny-space-6); }
.stat-row .stat-item { text-align: center; min-width: 140px; }
.stat-item .num {
  font-family: var(--sunny-font-family-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: var(--sunny-font-weight-bold);
  color: var(--sunny-color-text-on-accent);
  line-height: 1;
}
.stat-item .lbl { font-size: var(--sunny-font-size-14); font-weight: var(--sunny-font-weight-medium); color: var(--sunny-color-text-on-accent); margin-top: var(--sunny-space-2); }

.asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sunny-space-4); margin: 0 0 var(--sunny-space-6); }
.asset-card { border: 1px solid var(--sunny-color-border-subtle); border-radius: var(--sunny-radius-xl); overflow: hidden; background: var(--sunny-color-bg-card); margin: 0; }
.asset-card .preview { min-height: 160px; display: flex; align-items: center; justify-content: center; background: var(--sunny-color-neutral-900); }
.asset-card .preview.og { aspect-ratio: 1200 / 630; min-height: 0; background: var(--sunny-color-neutral-900); }
.asset-card .preview.og img { width: 56%; height: auto; }
.asset-card .preview.yt { aspect-ratio: 16 / 9; min-height: 0; }
.asset-card .preview.yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-card .preview.avatar {
  width: 96px; height: 96px; min-height: 0; margin: var(--sunny-space-8) auto;
  border-radius: 22%; overflow: hidden; background: var(--sunny-color-neutral-900);
}
.asset-card .preview.avatar img { width: 72%; height: auto; }
.asset-card .preview.favicon {
  width: 64px; height: 64px; min-height: 0; margin: var(--sunny-space-8) auto;
  border-radius: var(--sunny-radius-lg); background: var(--sunny-color-neutral-900);
}
.asset-card .preview.favicon img { width: 70%; height: auto; }
.asset-card figcaption { padding: var(--sunny-space-3) var(--sunny-space-4); font-size: var(--sunny-font-size-13); color: var(--sunny-color-text-secondary); border-top: 1px solid var(--sunny-color-border-subtle); }
.asset-card figcaption b { display: block; color: var(--sunny-color-text-primary); font-weight: var(--sunny-font-weight-medium); margin-bottom: 2px; }


/* ===================== RESPONSIVO ===================== */
@media (max-width: 1024px) {
  .content { padding-left: var(--sunny-space-8); padding-right: var(--sunny-space-8); }
  .pg-body { grid-template-columns: 1fr; }
  .pg-controls { border-right: none; border-bottom: 1px solid var(--sunny-color-border-subtle); }
}

@media (prefers-reduced-motion: reduce) {
  .loop-sun-mark { clip-path: none; animation: none; }
  .loop-sun-word { opacity: 1; transform: none; animation: none; }
  .loop-space, .loop-space img, .loop-bg .bg, .loop-bg img, .loop-app .frame { animation: none; }
  .loop-space { width: 280px; height: 120px; }
  .loop-space .hor { opacity: 1; }
  .loop-space .vert, .loop-space .icon { opacity: 0; }
  .loop-bg .bg { background: var(--sunny-color-neutral-900); }
  .loop-bg .lock-white { opacity: 1; }
  .loop-bg .lock-pos, .loop-bg .lock-color { opacity: 0; }
  .loop-app .frame.header { opacity: 1; }
  .loop-app .frame.slide, .loop-app .frame.post { opacity: 0; }
}

@media (max-width: 1024px) {
  .logo-grid, .loop-grid, .logo-pair, .asset-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 9; width: 288px; max-width: 86vw;
    transform: translateX(-100%);
    transition: transform var(--sunny-motion-duration-slow) var(--sunny-motion-easing-default);
    box-shadow: var(--sunny-shadow-elevation-lg);
  }
  :root[data-nav="open"] .sidebar { transform: translateX(0); }
  :root[data-nav="open"] .backdrop { display: block; }
  .menu-btn { display: inline-flex; }
  .content { padding-left: var(--sunny-space-4); padding-right: var(--sunny-space-4); }
  .scale-row { grid-template-columns: 1fr; gap: var(--sunny-space-1); }
  .bar-row { grid-template-columns: 92px 56px 1fr; gap: var(--sunny-space-2); }
  .anatomy { padding: 64px var(--sunny-space-12); }
  .logo-stage { gap: var(--sunny-space-8); padding: var(--sunny-space-12) var(--sunny-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  main section[id].active { animation: none; }
  .quick a:hover, .btn-primary:hover, .btn-secondary:hover, .demo-card.is-interactive:hover { transform: none; }
  .loop-sun-mark { clip-path: none !important; animation: none !important; }
  .loop-sun-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  .loop-space, .loop-space img, .loop-bg .bg, .loop-bg img, .loop-app .frame { animation: none !important; }
  .loop-space { width: 280px !important; height: 120px !important; }
  .loop-space .hor { opacity: 1 !important; }
  .loop-space .vert, .loop-space .icon { opacity: 0 !important; }
  .loop-bg .lock-white { opacity: 1 !important; }
  .loop-bg .lock-pos, .loop-bg .lock-color { opacity: 0 !important; }
  .loop-app .frame.header { opacity: 1 !important; }
  .loop-app .frame.slide, .loop-app .frame.post { opacity: 0 !important; }
}