/* DigitaJus — camada de aplicação.
   Depende de brand.css (tokens). Regras de forma desta camada:
   - régua hairline de 1px em vez de moldura grossa;
   - raio 9–16px em superfícies; pill reservado a botão e chip;
   - sombra só onde há elevação real (nav fixa, painel do hero, modal). */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; border-radius: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--ivory); padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------- layout */

.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section { border-top: var(--border-hairline); }
.section-pad { padding: var(--space-20) 0; }
.section-pad-sm { padding: var(--space-16) 0; }

.stack > * + * { margin-top: var(--space-4); }
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* duas colunas assimétricas: texto + painel. Colapsa no mobile. */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-16);
  align-items: center;
}
.split-top { align-items: start; }

/* rótulo + valor, lado a lado; empilha em tela estreita */
.deflist { display: grid; gap: var(--space-4); margin: 0; }
.deflist > div {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-hairline);
}
.deflist > div:last-child { padding-bottom: 0; border-bottom: 0; }
.deflist dt, .deflist dd { margin: 0; }

/* ---------------------------------------------------------- tipografia */

.kicker {
  font: var(--label-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--gray-400);
  display: block;
}
.kicker-accent { color: var(--azure); }

h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--navy); margin: 0; font-weight: var(--fw-medium); }
h1 { font-size: var(--size-h1); font-weight: var(--fw-regular); line-height: var(--leading-heading); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--size-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--size-h3); line-height: 1.25; }
h4 { font-size: 18px; line-height: 1.3; }
.em { font-style: italic; font-weight: var(--fw-medium); }

p { margin: 0; }
.lead { font: var(--text-lead); color: var(--gray-600); max-width: 60ch; }
.body-muted { color: var(--gray-600); }
.small { font: var(--text-small); color: var(--gray-600); }
.caption { font: var(--text-caption); color: var(--gray-400); }

/* marca: o morfema "Jus" é sempre serifado */
.wordmark { letter-spacing: var(--tracking-sans); color: var(--navy); }
.wordmark .pre { font-family: var(--font-sans); font-weight: var(--fw-semibold); }
.wordmark .jus { font-family: var(--font-serif); font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------- botões */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 15px;
  letter-spacing: var(--tracking-tight);
  padding: 13px 24px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.btn-primary { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-500); }
.btn-accent { background: var(--azure); color: #fff; border-color: var(--azure); }
.btn-accent:hover { background: #264C93; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--color-border-strong); }
.btn-ghost:hover { background: rgba(10, 24, 46, .04); }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------- chips e superfícies */

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  padding: 7px 13px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); color: var(--gray-600);
  background: rgba(10, 24, 46, .04);
}
.tag-accent { color: var(--azure); background: rgba(46, 90, 172, .08); border-color: rgba(46, 90, 172, .22); }
.tag-on-dark { color: #C9D2E4; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

.card {
  background: var(--ivory-card);
  border: var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex; flex-direction: column;
}
.card-quiet { background: transparent; border: 0; padding: 0; }
.card-link { transition: border-color var(--duration-fast) var(--ease-standard); }
.card-link:hover { border-color: var(--color-border-strong); }
.card-foot { margin-top: auto; padding-top: var(--space-4); }

.glyph {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--ivory-card);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 19px; color: var(--navy);
}
.glyph-accent { color: var(--azure); }

.rule { border: 0; border-top: var(--border-hairline); margin: var(--space-8) 0; }

/* ---------------------------------------------------------- mídia e retratos */

/* moldura navy: acomoda prints de tela cuja UI ainda usa a identidade anterior */
.shot {
  margin: 0;
  background: var(--navy);
  border-radius: var(--radius-md);
  padding: 10px;
  overflow: hidden;
}
.shot img, .shot video {
  width: 100%;
  border-radius: var(--radius-xs);
  display: block;
  background: var(--navy-700);
}
.shot figcaption { font: var(--text-caption); color: #7E8BA3; padding: 10px 4px 2px; }
.shot-tall img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

.portrait {
  width: 100%; max-width: 260px;
  border-radius: var(--radius-md);
  border: var(--border-card);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
}
.portrait-round {
  width: 96px; height: 96px; flex: none;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 1px solid var(--hairline);
}

/* ---------------------------------------------------------- navegação */

.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(241, 236, 225, .82);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-hairline);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: var(--space-6); }
.brand-monogram {
  width: 30px;
  height: 30px;
  background: var(--azure);
  color: var(--white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 2px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.08em;
}
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.navlink { font-size: 14px; color: var(--gray-600); }
.navlink:hover, .navlink[aria-current="page"] { color: var(--navy); }
.nav-toggle { display: none; background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--navy); }

/* ---------------------------------------------------------- superfície navy */

.panel-dark {
  background: var(--navy);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.panel-dark h1, .panel-dark h2, .panel-dark h3 { color: var(--ivory); }
.band-dark { background: var(--navy); color: var(--color-text-on-dark); }
.band-dark h2 { color: var(--ivory); }
.band-dark .kicker { color: var(--azure-300); }
.band-dark .lead { color: #A7B3C7; }

/* ---------------------------------------------------------- formulário */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gray-600); }
.field .req { color: var(--azure); }
.input, .select, .textarea {
  font-family: var(--font-sans); font-size: 15px; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 13px; width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.input:hover, .select:hover, .textarea:hover { border-color: rgba(10, 24, 46, .28); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px rgba(46, 90, 172, .12); }
.input[aria-invalid="true"] { border-color: #A6473F; }
.textarea { min-height: 84px; resize: vertical; }
.field-error { font: var(--text-caption); color: #A6473F; min-height: 1em; }

.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--azure); width: 16px; height: 16px; flex: none; }

.form-note { font: var(--text-caption); color: var(--gray-400); line-height: 1.6; }

/* ---------------------------------------------------------- modal do gate */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 24, 46, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--ivory-card);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  width: min(620px, 100%);
  max-height: calc(100vh - 2 * var(--space-5));
  overflow-y: auto;
  padding: var(--space-8);
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.modal-close { background: none; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 20px; color: var(--gray-600); line-height: 1; padding: 4px; }
.modal-close:hover { color: var(--navy); }

/* ---------------------------------------------------------- rodapé */

.footer { border-top: var(--border-hairline); }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; padding: var(--space-12) 0; }
.footer-links { display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: 14px; color: var(--gray-600); }
.footer-links a:hover { color: var(--navy); }

/* ---------------------------------------------------------- utilitários */

.flow-lg > * + * { margin-top: var(--space-8); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.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; }

/* ---------------------------------------------------------- responsivo */

@media (max-width: 960px) {
  :root { --container-pad: 24px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-pad { padding: var(--space-16) 0; }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .deflist > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .checks { grid-template-columns: minmax(0, 1fr); }
  .nav-links { display: none; }
  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4);
    position: absolute; left: 0; right: 0; top: 70px;
    background: var(--ivory); border-bottom: var(--border-hairline);
    padding: var(--space-5) var(--container-pad);
  }
  .nav-toggle { display: block; }
  .nav { position: relative; }
  .modal { padding: var(--space-6); }
}