/* ==========================================================================
   Ímã Marketing — base e componentes
   Tudo aqui lê os tokens da superfície corrente (--surface, --t-1..3, --rule).
   Nenhum valor de cor literal fora dos tokens.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  background: var(--ink);
  color: #F4F1EC;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* --- Superfície e envelope ------------------------------------------------ */
.sec {
  position: relative;
  background: var(--surface);
  color: var(--t-2);
  padding: var(--pace-base) var(--gutter);
}
.sec--open  { padding-block: var(--pace-open); }
.sec--tight { padding-block: var(--pace-tight); }

/* O browser pula o layout do que ainda não está em cena. `contain-intrinsic-size`
   dá uma altura estimada para a barra de rolagem não pular.
   NUNCA aplicar em .hero — ele está acima da dobra e isto atrasaria o LCP.
   NUNCA aplicar onde há `position: sticky` interno: as seções 3 e 5 ficam de
   fora porque `content-visibility` cria um contexto que quebra o sticky. */
.sec--defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* O envelope carrega a própria goteira. Assim nenhuma seção precisa repetir
   padding horizontal no HTML — e nenhuma pode esquecer-se dele. O max-width
   soma a goteira para que a coluna de conteúdo continue com --shell de largura
   útil no desktop. */
.shell {
  position: relative;
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: calc(var(--shell-narrow) + var(--gutter) * 2); }
/* Para quem já recebe goteira do pai (o rodapé) e não deve duplicá-la */
.shell--flush { padding-inline: 0; }

/* Grid editorial de 12 colunas. As seções posicionam-se dentro dele. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 34px);
}

/* --- Tipografia ----------------------------------------------------------- */
.h1, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--t-1);
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
.h1 { font-size: clamp(42px, 7.4vw, 92px); line-height: 1.02; }
.h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.08; }

.h1 em, .h2 em { font-style: italic; }
.h1 .brand { color: var(--red); font-style: normal; }

.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  color: var(--t-2);
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}
.body { color: var(--t-2); margin: 0; text-wrap: pretty; }
.body--quiet { color: var(--t-3); }

/* Dado numérico — o único lugar onde a mono aparece */
.data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Fólio: o algarismo na margem, herdado do dossiê impresso */
.folio {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--t-3);
}

/* Régua fina — o separador do sistema */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--rule);
  transform-origin: left center;
}

/* --- Botão ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.005em;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: var(--radius-btn, 999px);
  padding: 19px 34px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  box-shadow: 0 14px 40px -10px rgba(var(--red-rgb), .65);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -10px rgba(var(--red-rgb), .8); }
.btn:active { transform: translateY(0); }
.btn--xl { font-size: 19px; padding: 22px 42px; }
.btn--block { width: 100%; }

/* No telemóvel o rótulo do CTA principal não cabe numa linha com o padding do
   desktop — quebrava em duas e o botão virava um bloco disforme. Aqui ele
   assume a largura da coluna de propósito, que é o padrão de toque esperado. */
@media (max-width: 560px) {
  .btn {
    font-size: 16px;
    padding: 17px 26px;
    max-width: 100%;
    text-wrap: balance;
  }
  .btn--xl {
    font-size: 17px;
    padding: 19px 26px;
    width: 100%;
    max-width: 420px;
  }
}

.cta-fine {
  font-family: var(--font-data);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--t-3);
}

/* --- Campo de formulário --------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-3);
}
.field input {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-input, 11px);
  padding: 14px 15px;
  color: var(--t-1);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  transition: border-color .2s var(--ease-out);
}
.field input:focus { border-color: var(--red); }
.field__error {
  font-size: 13px;
  color: var(--red);
  min-height: 0;
}
.field__error:empty { display: none; }

/* --- Estados de movimento --------------------------------------------------
   Sistema BIDIRECIONAL: elementos animam ao entrar e ao sair da viewport.
   [data-reveal] parte de opacity 1 sem JS. motion.js adiciona .is-armed
   e monitora continuamente — .is-in é adicionada/removida a cada passagem.
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 1; }

[data-reveal].is-armed {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: opacity, transform;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal].is-armed.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variante de máscara, usada nas linhas do H1 e nas fotos */
[data-reveal="mask"].is-armed {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: none;
  will-change: clip-path;
  transition: clip-path .9s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal="mask"].is-armed.is-in { clip-path: inset(0 0 0 0); }

/* Régua que se desenha */
[data-reveal="rule"].is-armed {
  opacity: 1;
  transform: scaleX(0);
  will-change: transform;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal="rule"].is-armed.is-in { transform: scaleX(1); }

/* Variante: slide da esquerda */
[data-reveal="left"].is-armed {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
  will-change: opacity, transform;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal="left"].is-armed.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variante: slide da direita */
[data-reveal="right"].is-armed {
  opacity: 0;
  transform: translate3d(40px, 0, 0);
  will-change: opacity, transform;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal="right"].is-armed.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variante: scale up suave */
[data-reveal="scale"].is-armed {
  opacity: 0;
  transform: scale(0.92);
  will-change: opacity, transform;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal="scale"].is-armed.is-in {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal].is-armed,
  [data-reveal="mask"].is-armed,
  [data-reveal="rule"].is-armed,
  [data-reveal="left"].is-armed,
  [data-reveal="right"].is-armed,
  [data-reveal="scale"].is-armed {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}