/* Base² Engenharia — Brandbook */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-grafite);
  background: var(--c-offwhite);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
code { font-family: ui-monospace, monospace; font-size: 0.9em; background: rgba(30,36,38,.06); padding: 0.15em 0.4em; border-radius: 4px; }
ul { margin: 0; padding-left: 1.2rem; }
h1,h2,h3,h4,h5,p { margin: 0 0 var(--sp-4); }
h2,h3,h4 { font-family: var(--font-display); color: var(--c-petroleo); }
strong { font-weight: 600; }

:root {
  --c-petroleo: #071A1F;
  --c-grafite: #1E2426;
  --c-champagne: #B99A6A;
  --c-greige: #D8D0C4;
  --c-offwhite: #F4F1EA;
  --c-cinza-tecnico: #A7ADB2;
  --accent: #B99A6A;
  --font-display: "Montserrat", sans-serif;
  --font-body: "Inter", sans-serif;
  --hairline-dark: rgba(30, 36, 38, 0.12);
  --hairline-light: rgba(244, 241, 234, 0.14);
  --sidebar-w: 280px;
  --topbar-h: 56px;
  --grid-line: rgba(167, 173, 178, 0.22);
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --t-display: clamp(2.25rem, 4.5vw, 3.25rem);
  --t-h1: clamp(1.85rem, 3.5vw, 2.5rem);
  --t-h2: clamp(1.45rem, 2.8vw, 1.95rem);
  --t-h3: 1.2rem;
  --t-body-lg: 1.125rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-caption: 0.75rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 18px 50px rgba(7, 26, 31, 0.12);
  --logo-fg: var(--c-offwhite);
}

html[data-theme="light"] {
  --logo-fg: var(--c-petroleo);
}

/* Demonstração: modo claro (alterna fundos escuros → claros) */
html[data-theme="light"] body {
  background: var(--c-offwhite);
  color: var(--c-grafite);
}

html[data-theme="light"] .sidebar {
  background: var(--c-offwhite);
  color: var(--c-grafite);
  border-right-color: var(--hairline-dark);
}
html[data-theme="light"] .sidebar__brand svg { color: var(--c-petroleo); }
html[data-theme="light"] .sidebar__nav a {
  color: rgba(30, 36, 38, 0.72);
}
html[data-theme="light"] .sidebar__nav a:hover,
html[data-theme="light"] .sidebar__nav a.is-active {
  background: rgba(185, 154, 106, 0.15);
  color: var(--c-petroleo);
}
html[data-theme="light"] .sidebar__foot {
  color: var(--c-cinza-tecnico);
  border-top-color: var(--hairline-dark);
}

html[data-theme="light"] .topbar {
  background: var(--c-offwhite);
  border-bottom-color: var(--hairline-dark);
}
html[data-theme="light"] .topbar__logo svg,
html[data-theme="light"] .icon-btn { color: var(--c-petroleo); }
html[data-theme="light"] .icon-btn:hover { background: rgba(7, 26, 31, 0.06); }

html[data-theme="light"] .hero,
html[data-theme="light"] #encerramento.hero {
  background: var(--c-offwhite);
  color: var(--c-petroleo);
}
html[data-theme="light"] .hero__grid { --grid-line: rgba(30, 36, 38, 0.08); opacity: 0.5; }
html[data-theme="light"] .hero__watermark { color: rgba(7, 26, 31, 0.04); }
html[data-theme="light"] .hero__logo,
html[data-theme="light"] .signoff__logo { color: var(--c-petroleo) !important; }
html[data-theme="light"] .hero__tagline,
html[data-theme="light"] .signoff__tag { color: var(--c-champagne); }
html[data-theme="light"] .hero__meta,
html[data-theme="light"] .hero__scroll { color: var(--c-cinza-tecnico); }
html[data-theme="light"] .signoff__person h4 { color: var(--c-petroleo); }
html[data-theme="light"] .signoff__person p { color: var(--c-cinza-tecnico); }

html[data-theme="light"] .section--dark {
  background: var(--c-greige);
  color: var(--c-grafite);
}
html[data-theme="light"] .section--dark .section-title,
html[data-theme="light"] .section--dark h3,
html[data-theme="light"] .section--dark h4 { color: var(--c-petroleo); }
html[data-theme="light"] .section--dark .lead,
html[data-theme="light"] .section--dark p { color: var(--c-grafite); }
html[data-theme="light"] .section--dark .card {
  background: var(--c-offwhite);
  border-color: var(--hairline-dark);
}
html[data-theme="light"] .section--dark .swatch__body { background: var(--c-offwhite); }
html[data-theme="light"] .section--dark .combo {
  background: var(--c-offwhite);
  border-color: var(--hairline-dark);
}
html[data-theme="light"] .section--dark .combo h4 { color: var(--c-petroleo); }
html[data-theme="light"] .section--dark .combo p { color: var(--c-cinza-tecnico); }

html[data-theme="light"] .theme-toggle {
  background: var(--c-petroleo);
  color: var(--c-offwhite);
}

/* Modo claro: corrige textos/SVGs que ficam brancos (inline --c-offwhite) */
html[data-theme="light"] .hero,
html[data-theme="light"] #encerramento.hero,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar {
  --on-surface: var(--c-petroleo);
  --on-surface-muted: var(--c-cinza-tecnico);
}

html[data-theme="light"] .sidebar__brand svg,
html[data-theme="light"] .topbar__logo svg {
  color: var(--c-petroleo) !important;
}

html[data-theme="light"] .hero .eyebrow,
html[data-theme="light"] #encerramento .eyebrow {
  color: var(--c-champagne) !important;
}

html[data-theme="light"] .section--dark .muted {
  color: var(--c-cinza-tecnico);
}
html[data-theme="light"] .section--dark .swatch__name {
  color: var(--c-petroleo);
}
html[data-theme="light"] .section--dark .swatch__token,
html[data-theme="light"] .section--dark .swatch__role,
html[data-theme="light"] .section--dark .swatch__row code {
  color: var(--c-cinza-tecnico);
}
html[data-theme="light"] .section--dark .copy-hex {
  border-color: var(--hairline-dark);
  color: var(--c-champagne);
}
html[data-theme="light"] .section--dark .label-inst {
  color: var(--c-champagne) !important;
}
html[data-theme="light"] .section--dark .combo h4 {
  color: var(--c-petroleo) !important;
}

html[data-theme="light"] .section .section-title,
html[data-theme="light"] .section h2,
html[data-theme="light"] .section h3,
html[data-theme="light"] .section h4 {
  color: var(--c-petroleo);
}
html[data-theme="light"] .section .lead,
html[data-theme="light"] .section p {
  color: var(--c-grafite);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--c-cinza-tecnico); }
.ph { opacity: 0.45; font-size: 0.85em; }

/* Blueprint grid */
.blueprint {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Layout */
.layout { display: flex; min-height: 100vh; }

.topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 120;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  background: var(--c-petroleo);
  border-bottom: 1px solid var(--hairline-light);
}
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--c-offwhite);
  border-radius: 8px;
}
.icon-btn:hover { background: rgba(255,255,255,.08); }

.scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(7, 26, 31, 0.55);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  z-index: 130;
  display: flex;
  flex-direction: column;
  background: var(--c-petroleo);
  color: var(--c-offwhite);
  border-right: 1px solid var(--hairline-light);
  overflow: auto;
}
.sidebar__brand {
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border-bottom: 1px solid var(--hairline-light);
}
.sidebar__brand svg { width: 100%; max-height: 72px; }
.sidebar__nav {
  flex: 1;
  padding: var(--sp-4) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.65rem var(--sp-6);
  font-size: var(--t-small);
  color: rgba(244, 241, 234, 0.78);
  transition: background 0.2s, color 0.2s;
}
.sidebar__nav a:hover,
.sidebar__nav a.is-active {
  background: rgba(185, 154, 106, 0.12);
  color: var(--c-offwhite);
}
.sidebar__nav .num {
  font-family: var(--font-display);
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  color: var(--c-champagne);
  min-width: 1.5rem;
}
.sidebar__foot {
  padding: var(--sp-6);
  font-size: var(--t-caption);
  line-height: 1.5;
  border-top: 1px solid var(--hairline-light);
  color: rgba(244, 241, 234, 0.65);
}

.content {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
}

/* Typography utilities */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-champagne);
  margin-bottom: var(--sp-4);
}
.label-inst {
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}
.lead {
  font-size: var(--t-body-lg);
  line-height: 1.65;
  max-width: 62ch;
}
.section-title {
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--c-petroleo);
  color: var(--c-offwhite);
  overflow: hidden;
}
.hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  --grid-line: rgba(185, 154, 106, 0.12);
}
.hero__watermark {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(12rem, 28vw, 22rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(185, 154, 106, 0.06);
  pointer-events: none;
  user-select: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: var(--sp-24) var(--sp-8);
  text-align: center;
}
.hero__logo {
  width: min(520px, 88vw);
  margin: 0 auto var(--sp-6);
}
.hero__filete {
  width: 64px;
  height: 2px;
  background: var(--c-champagne);
  margin: var(--sp-6) auto;
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 300;
  letter-spacing: 0.04em;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-8);
  font-size: var(--t-small);
  color: rgba(244, 241, 234, 0.72);
}
.hero__scroll {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--t-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.45);
}

.signoff {
  text-align: center;
}
.signoff__logo {
  width: min(420px, 80vw);
  margin: 0 auto var(--sp-6);
}
.signoff__tag {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 300;
  color: var(--c-champagne);
}
.signoff__people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  text-align: left;
}
.signoff__person h4 {
  font-size: var(--t-h3);
  margin-bottom: var(--sp-2);
  color: var(--c-offwhite);
}
.signoff__person p { font-size: var(--t-small); color: rgba(244,241,234,.7); margin: 0; }

/* Sections */
.section {
  padding: var(--sp-16) 0;
  background: var(--c-offwhite);
}
.section--greige { background: var(--c-greige); }
.section--dark {
  background: var(--c-petroleo);
  color: var(--c-offwhite);
}
.section--dark .section-title,
.section--dark h3,
.section--dark h4 { color: var(--c-offwhite); }
.section--dark .lead,
.section--dark p { color: rgba(244, 241, 234, 0.88); }
.section--dark .muted { color: rgba(167, 173, 178, 0.95); }
.section--dark .eyebrow { color: var(--c-champagne); }
.section--dark .card {
  background: rgba(30, 36, 38, 0.45);
  border-color: var(--hairline-light);
}
.section--dark .swatch__body { background: rgba(30, 36, 38, 0.5); }

.section__inner {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 var(--sp-8);
}
.section__head { margin-bottom: var(--sp-12); max-width: 720px; }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--hairline-dark);
  border-radius: 12px;
  padding: var(--sp-6);
  box-shadow: var(--shadow-soft);
}
.card__k {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-champagne);
  margin-bottom: var(--sp-3);
}
.card h3 { font-size: var(--t-h3); margin-bottom: var(--sp-3); }

.note {
  padding: var(--sp-6);
  border-left: 3px solid var(--c-champagne);
  background: rgba(185, 154, 106, 0.08);
  border-radius: 0 10px 10px 0;
  font-size: var(--t-body-lg);
}

/* Do / Don't */
.dodont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.dodont__col {
  padding: var(--sp-6);
  border-radius: 12px;
  border: 1px solid var(--hairline-dark);
}
.dodont__col--yes { background: rgba(185, 154, 106, 0.08); }
.dodont__col--no { background: rgba(30, 36, 38, 0.04); }
.dodont__col h4 {
  font-size: var(--t-h3);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.dodont__col ul { font-size: var(--t-small); line-height: 1.7; }

/* Logo section */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
.logo-tile {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline-dark);
}
.logo-tile__stage {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: var(--sp-8);
}
.logo-tile--light .logo-tile__stage { background: var(--c-offwhite); }
.logo-tile--dark .logo-tile__stage { background: var(--c-petroleo); }
.logo-tile__cap {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: #fff;
  font-size: var(--t-small);
  border-top: 1px solid var(--hairline-dark);
}

.clearspace {
  position: relative;
  background: var(--c-offwhite);
  border: 1px dashed var(--c-cinza-tecnico);
  border-radius: 12px;
  padding: var(--sp-12);
  min-height: 220px;
  display: grid;
  place-items: center;
}
.clearspace__box { position: relative; z-index: 1; }
.clearspace__x {
  position: absolute;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  color: var(--c-champagne);
  font-weight: 600;
}
.clearspace__x--t { top: var(--sp-4); left: 50%; transform: translateX(-50%); }
.clearspace__x--b { bottom: var(--sp-4); left: 50%; transform: translateX(-50%); }
.clearspace__x--l { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.clearspace__x--r { right: var(--sp-4); top: 50%; transform: translateY(-50%); }

.minsize {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.minsize__item {
  text-align: center;
  padding: var(--sp-6);
  background: var(--c-offwhite);
  border-radius: 10px;
  border: 1px solid var(--hairline-dark);
}

.usage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}
.usage__item { text-align: center; }
.usage__stage {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--c-offwhite);
  border-radius: 10px;
  border: 1px solid var(--hairline-dark);
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
}
.usage__stage svg { width: 72%; }
.usage__flag {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.usage__flag--ok { background: #1a5c40; color: #fff; }
.usage__flag--no { background: #8b2e2e; color: #fff; }
.usage__cap { font-size: var(--t-caption); color: var(--c-cinza-tecnico); }

/* Swatches */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-6);
}
.swatch {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline-light);
}
.swatch__chip { height: 88px; }
.swatch__body { padding: var(--sp-4) var(--sp-6) var(--sp-6); }
.swatch__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  margin-bottom: var(--sp-2);
}
.swatch__role {
  display: block;
  font-size: var(--t-small);
  opacity: 0.75;
  margin-bottom: var(--sp-4);
}
.swatch__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--t-caption);
  font-family: ui-monospace, monospace;
}
.copy-hex {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--hairline-light);
  color: var(--c-champagne);
  transition: background 0.2s;
}
.copy-hex:hover { background: rgba(185,154,106,.15); }
.copy-hex.is-copied { background: rgba(185,154,106,.25); }

.ratio {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--sp-4);
  font-size: 0;
}
.ratio .r60 { flex: 6; background: var(--c-offwhite); border: 1px solid var(--hairline-dark); }
.ratio .r30 { flex: 3; background: var(--c-petroleo); }
.ratio .r10 { flex: 1; background: var(--c-champagne); }

.combos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
.combo {
  padding: var(--sp-6);
  border-radius: 12px;
  background: rgba(30, 36, 38, 0.35);
  border: 1px solid var(--hairline-light);
}
.combo__dots {
  display: flex;
  gap: 6px;
  margin-bottom: var(--sp-4);
}
.combo__dots i {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: block;
}
.combo h4 { font-size: var(--t-h3); margin-bottom: var(--sp-2); color: var(--c-offwhite); }
.combo p { font-size: var(--t-small); margin: 0; opacity: 0.8; }

/* Typography specimens */
.specimen {
  padding: var(--sp-8);
  border-radius: 12px;
  border: 1px solid var(--hairline-dark);
  background: #fff;
}
.specimen__name { margin-bottom: var(--sp-6); }
.specimen__name h3 { font-size: var(--t-h2); margin: 0; }
.specimen__big {
  font-size: clamp(4rem, 12vw, 6rem);
  line-height: 1;
  margin-bottom: var(--sp-6);
  color: var(--c-petroleo);
}
.weights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--c-petroleo);
}
.weights small {
  display: block;
  font-size: var(--t-caption);
  font-family: var(--font-body);
  color: var(--c-cinza-tecnico);
  margin-top: var(--sp-2);
  letter-spacing: 0.02em;
}
.w-body { font-family: var(--font-body); }

.scale-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--sp-6);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--hairline-dark);
}
.scale-row .tag {
  font-size: var(--t-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cinza-tecnico);
}
.scale-row .sample {
  font-family: var(--font-display);
  color: var(--c-petroleo);
}

.type-demo {
  padding: var(--sp-8);
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--hairline-dark);
}

.hier {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.hier th,
.hier td {
  text-align: left;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--hairline-dark);
}
.hier th {
  font-family: var(--font-display);
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cinza-tecnico);
}

/* Graphic elements */
.gfx-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
.gfx-tile {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline-dark);
  background: #fff;
}
.gfx-tile__stage {
  min-height: 160px;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  background: var(--c-offwhite);
}
.gfx-tile__stage.is-dark { background: var(--c-petroleo); }
.gfx-tile__cap {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--hairline-dark);
}
.gfx-tile__cap h4 { font-size: var(--t-h3); margin-bottom: var(--sp-2); }
.gfx-tile__cap p { font-size: var(--t-small); margin: 0; color: var(--c-cinza-tecnico); }

.icon-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
}
.icon-cell {
  text-align: center;
  padding: var(--sp-4);
  border-radius: 10px;
  border: 1px solid var(--hairline-dark);
  background: #fff;
}
.icon-cell svg {
  width: 32px;
  height: 32px;
  margin: 0 auto var(--sp-3);
  color: var(--c-petroleo);
}
.icon-cell span {
  font-size: var(--t-caption);
  color: var(--c-grafite);
}

/* Mockups */
.mockups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-8);
}
.mockup { margin: 0; }
.mockup__frame {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hairline-dark);
  box-shadow: var(--shadow-soft);
  background: #fff;
}
.mockup__cap {
  margin-top: var(--sp-3);
  font-size: var(--t-small);
  color: var(--c-cinza-tecnico);
  line-height: 1.5;
}
.ar-card { aspect-ratio: 1.75 / 1; }
.ar-a4 { aspect-ratio: 210 / 297; max-height: 320px; }
.ar-land { aspect-ratio: 4 / 3; }
.ar-portrait { aspect-ratio: 3 / 4; max-height: 340px; }
.ar-sq { aspect-ratio: 1; }
.ar-wide { aspect-ratio: 16 / 9; }
.ar-li { aspect-ratio: 4 / 1; }

.mk {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.mk-pad { padding: 12%; }
.mk-light { background: var(--c-offwhite); color: var(--c-grafite); }
.mk-dark { background: var(--c-petroleo); color: var(--c-offwhite); }
.mk-tiny { font-size: 7px; line-height: 1.45; font-family: var(--font-body); }
.mk-cap {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mk-champ { color: var(--c-champagne); }
.mk-rule {
  height: 1px;
  background: var(--c-champagne);
  width: 100%;
}
.mk-rule--tec { background: var(--c-cinza-tecnico); }
.mk-watermark {
  position: absolute;
  right: -5%;
  top: 10%;
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 700;
  color: rgba(185, 154, 106, 0.08);
  line-height: 1;
  pointer-events: none;
}
.mk-logo-sm { max-width: 42%; }
.helmet { width: 70%; max-width: 140px; }
.seal { width: 78%; max-width: 160px; }

/* Site preview */
.siteframe {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline-light);
  box-shadow: var(--shadow-soft);
}
.siteframe__bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: #2a3032;
}
.siteframe__bar i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8);
  background: var(--c-offwhite);
  border-bottom: 1px solid var(--hairline-dark);
  flex-wrap: wrap;
}
.preview-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  font-size: var(--t-small);
  color: var(--c-grafite);
  align-items: center;
}
.preview-cta {
  padding: 0.55rem 1rem;
  background: var(--c-petroleo);
  color: var(--c-offwhite);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  letter-spacing: 0.06em;
}
.preview-footer {
  background: var(--c-petroleo);
  color: var(--c-offwhite);
  padding: var(--sp-12) var(--sp-8);
}
.preview-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.preview-footer__logo { width: 180px; margin-bottom: var(--sp-4); }
.preview-footer h5 {
  font-size: var(--t-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-champagne);
  margin-bottom: var(--sp-4);
}
.preview-footer ul {
  list-style: none;
  padding: 0;
  font-size: var(--t-small);
  line-height: 1.8;
  opacity: 0.85;
}
.preview-footer__base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline-light);
  font-size: var(--t-small);
}

/* Theme toggle + toast */
.theme-toggle {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.65rem 1rem;
  background: var(--c-petroleo);
  color: var(--c-offwhite);
  border-radius: 999px;
  border: 1px solid var(--hairline-light);
  font-size: var(--t-caption);
  box-shadow: var(--shadow-soft);
}
.theme-toggle:hover { background: var(--c-grafite); }

.toast {
  position: fixed;
  bottom: calc(var(--sp-6) + 52px);
  right: var(--sp-6);
  z-index: 201;
  padding: 0.65rem 1rem;
  background: var(--c-grafite);
  color: var(--c-offwhite);
  border-radius: 8px;
  font-size: var(--t-small);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease);
}
.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal animations */
.reveal,
.in-view {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible,
.in-view.is-visible {
  opacity: 1;
  transform: none;
}
.reveal[data-d="2"] { transition-delay: 0.08s; }
.reveal[data-d="3"] { transition-delay: 0.16s; }
.reveal[data-d="4"] { transition-delay: 0.24s; }

/* Responsive */
@media (max-width: 1024px) {
  .topbar { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
  }
  .sidebar.is-open { transform: translateX(0); }
  .scrim { display: block; }
  .content { margin-left: 0; padding-top: var(--topbar-h); }
  .grid--2, .grid--3, .logo-grid, .dodont, .combos, .gfx-grid,
  .minsize, .usage, .preview-footer__grid {
    grid-template-columns: 1fr;
  }
  .icon-row { grid-template-columns: repeat(3, 1fr); }
  .usage { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .section__inner, .hero__inner { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .hero__meta { flex-direction: column; align-items: center; }
  .icon-row { grid-template-columns: repeat(2, 1fr); }
  .scale-row { grid-template-columns: 70px 1fr; }
}