/* ============================================================
   Motor Web Editorial — base de layout e estados de movimento
   Cada site define as cores de cada tema em [data-tema="..."]
   usando o contrato abaixo (--t-*). O motor só lê o contrato.
   ============================================================ */

/* --- Contrato de tema (valores neutros; o site sobrescreve) --- */
:root {
  --t-fundo: #ffffff;
  --t-texto: #1a1a1a;
  --t-suave: #5a5a5a;
  --t-acento: #1a1a1a;
  --t-linha: rgba(0, 0, 0, 0.12);
  --t-botao-fundo: #1a1a1a;
  --t-botao-texto: #ffffff;

  --mw-gutter: clamp(16px, 4vw, 56px);
  --mw-largura: 1320px;
  --mw-secao: clamp(88px, 12vw, 176px);
  --mw-cabecalho-altura: 68px;
}

/* --- Reset mínimo --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* --- Tema por seção --- */
[data-tema] {
  background: var(--t-fundo);
  color: var(--t-texto);
}
.mw-secao {
  position: relative;
  padding-block: var(--mw-secao);
}
.mw-conteudo {
  width: min(100% - 2 * var(--mw-gutter), var(--mw-largura));
  margin-inline: auto;
}

/* --- Cabeçalho que troca de tema conforme a seção embaixo dele --- */
.mw-cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--mw-cabecalho-altura);
  display: flex;
  align-items: center;
  background: transparent;
  color: var(--t-texto);
  transition: color 0.4s ease;
}
.mw-cabecalho::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--t-fundo);
  opacity: 0.86;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.4s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mw-cabecalho::before { opacity: 1; }
}

/* --- Barra de progresso de leitura --- */
.mw-progresso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
  background: var(--t-acento);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* --- Link de pular para o conteúdo --- */
.mw-pular {
  position: absolute;
  left: var(--mw-gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--t-botao-fundo);
  color: var(--t-botao-texto);
}
.mw-pular:focus { top: 12px; }

/* --- Estados iniciais de movimento ---
   Só valem com html.mw-movimento, que o script inline do <head>
   liga quando o visitante NÃO pediu menos movimento. Sem JS ou
   com redução de movimento, todo o conteúdo fica visível. */
.mw-movimento [data-revelar="subir"],
.mw-movimento [data-revelar="grupo"] > * {
  opacity: 0;
  transform: translateY(32px);
}
.mw-movimento [data-revelar="mascara"] {
  clip-path: inset(100% 0% 0% 0%);
}
.mw-movimento [data-revelar="linhas"] {
  visibility: hidden;
}
.mw-linha-mask { overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }

[data-revelar="mascara"] { overflow: hidden; }
[data-revelar="mascara"] img,
[data-revelar="mascara"] video { width: 100%; height: 100%; object-fit: cover; }

/* --- Letreiro corrido (CSS puro) --- */
.mw-letreiro { overflow: hidden; white-space: nowrap; }
.mw-letreiro__faixa {
  display: inline-flex;
  gap: 0.6em;
  animation: mw-letreiro var(--mw-letreiro-duracao, 40s) linear infinite;
}
@keyframes mw-letreiro { to { transform: translateX(-50%); } }

/* --- Pilha fixa: no mobile vira lista comum --- */
[data-fixar="pilha"] [data-carta] { position: relative; }
@media (min-width: 900px) {
  .mw-movimento [data-fixar="pilha"] .mw-pilha {
    position: relative;
    height: min(72vh, 620px);
    overflow: clip; /* cartas que ainda vão entrar ficam escondidas abaixo */
  }
  .mw-movimento [data-fixar="pilha"] [data-carta] {
    position: absolute;
    inset: 0;
  }
}

/* --- Trilho horizontal fixo: no mobile vira coluna --- */
@media (min-width: 900px) {
  .mw-movimento [data-fixar="horizontal"] { overflow: hidden; }
  .mw-movimento [data-fixar="horizontal"] [data-trilho] {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
  }
}

/* --- Foco visível --- */
:focus-visible { outline: 3px solid var(--foco, #0b63d6); outline-offset: 3px; }

/* --- Redução de movimento: desliga o que sobra em CSS --- */
@media (prefers-reduced-motion: reduce) {
  .mw-letreiro__faixa { animation: none; }
  .mw-cabecalho, .mw-cabecalho::before { transition: none; }
}