/* ============================================================
   bmcoder — Reset, elementos base e componentes atômicos
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--c-text);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-heading);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--c-brand); color: #fff; }

/* Foco visível e consistente — nunca removido */
:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: var(--r-flat);
}
:where(.on-ink) :focus-visible { outline-color: var(--c-cyan-bright); }

/* ---------- Marcadores tipográficos ---------- */

.kicker {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-brand);
}
.on-ink .kicker { color: var(--c-cyan-bright); }

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--c-text-soft);
  max-width: 54ch;
}
.on-ink .lead { color: var(--c-ink-text-soft); }

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-text-mute);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Palavra em destaque no fim do título: cor, não itálico —
   itálico em sans geométrica fica com cara de oblíquo sintético. */
.accent-word {
  font-style: normal;
  color: var(--c-brand);
}
.on-ink .accent-word { color: var(--c-cyan-bright); }

/* ---------- Estrutura ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide   { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--paper { background: var(--c-paper); }
.section--ink {
  background: var(--c-ink);
  color: var(--c-ink-text);
}
.section--ink :is(h1, h2, h3, h4) { color: #fff; }

.rule {
  border: 0;
  height: var(--rule);
  background: var(--c-line);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--r-input);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: var(--s-3); }

/* ---------- Botões ---------- */

.btn {
  --btn-bg: var(--c-brand);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  padding: 0.92em 1.6em;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: 0.005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-input);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft),
    color var(--t-fast) var(--ease-soft),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary { box-shadow: var(--shadow-raise); }
.btn--primary:hover {
  --btn-bg: var(--c-brand-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-heading);
  --btn-bd: var(--c-line-strong);
}
.btn--ghost:hover { --btn-bd: var(--c-brand); --btn-fg: var(--c-brand); }

.on-ink .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.28);
}
.on-ink .btn--ghost:hover {
  --btn-bd: var(--c-cyan-bright);
  --btn-fg: var(--c-cyan-bright);
  background: rgba(255, 255, 255, 0.04);
}

.btn--wa { --btn-bg: #128C4A; }
.btn--wa:hover { --btn-bg: #0d6f3a; }

/* Link com sublinhado que cresce — sem underline padrão */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--c-brand);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-base) var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { width: 0.9em; height: 0.9em; transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Tags ---------- */

.tag {
  display: inline-block;
  padding: 0.32em 0.7em;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.06em;
  color: var(--c-text-soft);
  background: var(--c-brand-wash);
  border-radius: var(--r-flat);
}
.on-ink .tag {
  color: var(--c-ink-text-soft);
  background: rgba(255, 255, 255, 0.07);
}

/* ---------- Campos de formulário ---------- */

.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.field :is(input, select, textarea) {
  width: 100%;
  padding: 0.85em 1em;
  font-size: var(--text-sm);
  color: var(--c-heading);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-input);
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
.field :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-wash);
}
.field textarea { resize: vertical; min-height: 8.5rem; line-height: var(--leading-normal); }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235B667A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 11px;
  padding-right: 2.6em;
}
.field--error :is(input, select, textarea) { border-color: var(--c-error); }
.field__error {
  font-size: var(--text-xs);
  color: var(--c-error);
  min-height: 1.1em;
}

/* ---------- Revelação ao rolar ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

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

/* Campo-armadilha do formulário: fora da tela, fora da ordem de tabulação
   e fora do leitor de tela. Humano nunca vê; robô que preenche tudo cai nele. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}