/* ---------- Abertura ---------- */

.gradient-rule {
  height: 6px;
  width: 180px;
  border-radius: 3px;
  background: var(--gradient-brand);
  margin-bottom: var(--space-8);
}

.brand-hero {
  padding-top: var(--space-24);
  padding-bottom: var(--space-16);
  max-width: 62ch;
}

.brand-hero h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

.brand-hero p {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--color-text-secondary);
}

/* ---------- Regras ---------- */

.rule-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: var(--space-16);
}

.rule-copy h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.rule-copy p {
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  max-width: 44ch;
}

.rule-copy p + p { margin-top: var(--space-3); }

.rule-demo { min-width: 0; }

/* ---------- Logotipo: área segura ---------- */

.safe-area {
  --checker: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  padding: calc(var(--checker) * 3);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fundo e traço fixos (não seguem o tema): é uma referência gráfica de
     medida, como uma régua, não um exemplo de aplicação sobre fundo escuro. */
  background-color: #FFFFFF;
  background-image:
    conic-gradient(color-mix(in srgb, var(--color-blue) 22%, transparent) 90deg, transparent 90deg 180deg,
                    color-mix(in srgb, var(--color-blue) 22%, transparent) 180deg 270deg, transparent 270deg);
  background-size: var(--checker) var(--checker);
}

.safe-area .mark {
  width: 88px;
  color: var(--color-ink);
  --mark-interior: url(#cl-mark-gradient);
}

.safe-area-caption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-secondary);
}

/* ---------- Logotipo: lockups ---------- */

.lockup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.lockup-card {
  /* Fundo fixo (não segue --color-paper): esta é a demonstração "sobre
     papel", que precisa continuar clara mesmo com o sistema em modo escuro. */
  background: #FFFFFF;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}

.lockup-card--dark {
  background: var(--color-ink);
  border-color: transparent;
}

.lockup-stacked {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.lockup-stacked .mark { width: 34px; color: var(--color-ink); }
.lockup-card--dark .lockup-stacked .mark { color: #FFFFFF; }

.lockup-stacked .wordmark-lines {
  font-size: var(--text-h3);
  line-height: 1.15;
  font-weight: var(--weight-regular);
  color: var(--color-ink);
}
.lockup-card--dark .lockup-stacked .wordmark-lines { color: #FFFFFF; }
.lockup-stacked .wordmark-lines b { display: block; font-weight: var(--weight-semibold); }

.lockup-combined {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.lockup-combined .mark { width: 34px; color: var(--color-ink); }
.lockup-card--dark .lockup-combined .mark { color: #FFFFFF; }
.lockup-combined .wordmark {
  font-size: var(--text-h3);
  color: var(--color-ink);
}
.lockup-card--dark .lockup-combined .wordmark { color: #FFFFFF; }

.lockup-label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

/* ---------- Cores ---------- */

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.swatch {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.swatch-fill {
  aspect-ratio: 1;
}

.swatch-label {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-semibold);
  background: var(--color-surface);
}

.gradient-bar {
  margin-top: var(--space-6);
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--gradient-brand);
}

.gradient-labels {
  margin-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}

/* ---------- Tipografia ---------- */

.type-sample + .type-sample { margin-top: var(--space-6); }

.type-sample-text {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
}
.type-sample-text.weight-600 { font-weight: var(--weight-semibold); }
.type-sample-text.weight-400 { font-weight: var(--weight-regular); }

.type-sample-label {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-secondary);
}

.type-link { margin-top: var(--space-6); }

/* ---------- Onde encontrar os arquivos ---------- */

.files-panel {
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
  position: relative;
  overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-12);
  text-align: center;
}

.files-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-brand);
}

.files-panel h2 {
  color: var(--panel-text);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
}

.files-panel p {
  margin: var(--space-4) auto 0;
  color: var(--panel-text-secondary);
  max-width: 46ch;
}

.files-panel .button {
  margin-top: var(--space-8);
  background: var(--color-magenta-light);
  color: var(--color-ink);
}
.files-panel .button:hover { background: #DD8DE6; }
.files-panel a:focus-visible { outline-color: var(--color-blue); }

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
  .rule-section { grid-template-columns: 1fr; gap: var(--space-8); }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  :root { --text-display: 2.25rem; --leading-display: 2.625rem; --text-h1: 1.75rem; --leading-h1: 2.125rem; }
  .lockup-grid { grid-template-columns: 1fr; }
  .files-panel { padding: var(--space-12) var(--space-6); }
}