/* Quitex · base: documento, A FAIXA (assinatura), rótulo, símbolos, mídia, botões,
   entrada, e o sistema de revelação do texto. As seções vivem em secoes.css. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;                     /* scroll-choreography §9, erro nº 8 */
  background-color: var(--tema-fundo);
  transition: background-color var(--tema-dur-fundo) ease;
}

body {
  margin: 0;
  color: var(--tema-tinta);
  font-family: var(--f-texto);
  font-size: var(--t-body);
  font-weight: var(--p-texto);
  line-height: var(--lh-texto);
  font-kerning: normal;
  transition: color var(--tema-dur-texto) ease;
}

img, picture, canvas, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd, dt, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* foco sobre qualquer fundo claro: anel preto + halo branco */
:focus-visible {
  outline: 2px solid var(--preto);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--branco);
}
/* seções pretas: o acento muda para o valor claro, e o foco inverte */
.hero, .situacao, .documentacao, .chamada, .rodape, .termo--resultado, .botao--solido { --acento-local: var(--acento); }
.botao--claro { --acento-local: var(--acento-tinta); }
.hero :focus-visible, .situacao :focus-visible, .documentacao :focus-visible,
.chamada :focus-visible, .rodape :focus-visible {
  outline-color: var(--branco);
  box-shadow: 0 0 0 6px var(--preto-absoluto);
}

/* ==================================================================================
   A FAIXA — assinatura única do site (tokens.css, "Assinatura")
   Cabeça sólida + traços interrompidos: a faixa central da estrada. Os traços herdam
   currentColor; a CABEÇA é o acento (fase 8) — a primeira dose de cor da página.
   ================================================================================== */
.faixa,
.rotulo--faixa::before,
.botao__faixa {
  --cab: var(--faixa-cabeca);
  display: block;
  height: var(--faixa-alt);
  background-image:
    linear-gradient(var(--acento-local), var(--acento-local)),   /* a cabeça: o acento */
    repeating-linear-gradient(to right,
      currentColor 0 var(--faixa-traco),
      transparent var(--faixa-traco) calc(var(--faixa-traco) + var(--faixa-vao)));
  background-size: var(--cab) 100%, calc(100% - var(--cab) - var(--faixa-vao)) 100%;
  background-position: 0 0, calc(var(--cab) + var(--faixa-vao)) 0;
  background-repeat: no-repeat;
}
.faixa { width: var(--faixa-larg); }
.faixa--fraca { opacity: 0.34; }

/* ------------------------------------------------------------------ RÓTULO (mono) */
.rotulo {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.rotulo--faixa { display: grid; justify-items: start; gap: var(--e-3); }
.rotulo--faixa::before { content: ""; width: var(--faixa-larg); }

/* ------------------------------------------------------------------ SÍMBOLOS
   Uma família desenhada para este site (sprite inline no HTML, zero requisição):
   retângulos e a faixa, traço 1,5, cantos retos. .cheio marca a parte sólida. */
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.glifo {
  width: 28px;
  height: 28px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.glifo .cheio, .simbolos .cheio { fill: var(--acento-local); stroke: none; }   /* a parte sólida: acento */

/* ------------------------------------------------------------------ MÍDIA
   Os renders existentes como imagem editorial. Nunca ampliados: todo arquivo usado em
   faixa de largura total tem 2400 px (media/editorial/), e o resto fica em caixas menores
   que o arquivo. A profundidade vem da luz e da máscara, não de escala. */
.midia { position: relative; overflow: clip; }
.midia picture, .hero__midia picture { width: 100%; height: 100%; }   /* sem isto a imagem para na metade */
.midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.midia__legenda {
  position: absolute;
  left: var(--e-5);
  bottom: var(--e-5);
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  background: rgb(255 255 255 / 0.9);
  color: var(--preto);
}
.midia__legenda .faixa { --faixa-larg: 40px; }

/* ------------------------------------------------------------------ LINK DE AÇÃO
   O terceiro nível do CTA: texto, não bloco. A faixa na frente, crescendo no hover. */
.link-acao {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alvo);
  color: inherit;
  font-weight: 650;
  font-size: 0.9375rem;
  letter-spacing: var(--tr-acao);
  text-transform: uppercase;
  text-decoration: none;
}
.link-acao .faixa {
  --faixa-cabeca: 12px; --faixa-traco: 6px; --faixa-vao: 5px;
  width: 30px;
  transition: width 260ms var(--curva-entra);
}
.link-acao:hover .faixa { width: 48px; }
.link-acao:hover { text-decoration: underline; text-decoration-color: var(--acento-local); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ==================================================================================
   BOTÕES — um componente, três vestimentas. A faixa entra no lugar da seta e cresce no
   hover. Hierarquia de CTA na página: botão grande (hero, avaliação) > link de ação
   (fim da atuação) > link simples (contato, fatos).
   ================================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--e-4);
  min-height: 58px;
  padding: 0 var(--e-6);
  border: 0;
  font-family: var(--f-texto);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: var(--tr-acao);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.botao__faixa {
  --faixa-cabeca: 12px;
  --faixa-traco: 6px;
  --faixa-vao: 5px;
  width: 30px;
  flex: none;
  transition: width 260ms var(--curva-entra);
}
.botao:hover .botao__faixa { width: 44px; }

.botao--solido { background: var(--preto); color: var(--branco); }     /* 19,79 */
.botao--solido:hover { background: var(--grafite); }                   /* 14,78 */
.botao--claro { background: var(--branco); color: var(--preto); }      /* 19,79 */
.botao--claro:hover { background: var(--nevoa); }                      /* 17,30 */
.botao--linha {
  background: none;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor;                          /* ≥ 3:1 (SC 1.4.11) */
}
.botao--linha { transition: background-color 200ms ease, box-shadow 200ms ease; }
.botao--linha:hover {
  background: color-mix(in oklab, currentColor 8%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--acento-local);             /* o contorno acende no acento */
}

/* ------------------------------------------------------------------ ENTRADA (preloader)
   Preto absoluto, a marca, a faixa enchendo. Espera o HERO — fontes e imagem — e sai
   sozinha, com teto de tempo. Enquanto está na tela, a página não rola. */
.entrada {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  place-content: center;
  justify-items: center;
  gap: var(--e-7);
  background: var(--preto-absoluto);
  transition: opacity 360ms ease, visibility 0s linear 360ms;
}
.movimento .entrada { display: grid; }
.entrada__marca { width: min(52vw, 220px); height: auto; }
.entrada__traco {
  position: relative;
  width: min(40vw, 160px);
  height: var(--faixa-alt);
  background: rgb(255 255 255 / 0.2);
  overflow: hidden;
}
.entrada__traco span {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--p, 0.04));
  transform-origin: left;
  background: var(--branco);
  transition: transform 200ms ease-out;
}
.pronta .entrada { opacity: 0; visibility: hidden; pointer-events: none; }
.travado, .travado body { overflow: hidden; }

/* ------------------------------------------------------------------ pular */
.pular {
  position: fixed;
  left: var(--margem);
  top: -120px;
  z-index: 40;
  min-height: var(--alvo);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--e-4);
  background: var(--branco);
  color: var(--preto);
  font-weight: var(--p-texto-forte);
  text-decoration: none;
}
.pular:focus { top: calc(var(--topo) + var(--e-3)); }

/* ==================================================================================
   REVELAÇÃO DO TEXTO (text-motion)
   Dois mecanismos, os dois SEM JavaScript por quadro e SEM tocar no rAF único da página:

   .entra   — entrada do HERO, disparada uma vez quando a entrada (preloader) sai
              (html.pronta). Ordem por --i: marca → identificação → título por linha →
              texto → ações → módulos. Conclui em ~1,1 s (text-motion §5).
   .revela  — o resto da página, AMARRADO AO SCROLL por animation-timeline: view(). É
              reversível por natureza (rolar para trás desfaz) e linear (text-motion §6).

   O estado escondido NUNCA vem do CSS estático: só existe dentro de html.movimento, de
   @media (prefers-reduced-motion: no-preference) e — no caso de .revela — de
   @supports (animation-timeline: view()). Sem suporte, sem JS ou com movimento reduzido,
   o texto está simplesmente lá (text-motion §2.3, motion-a11y-budget §3.1).
   Só opacity, transform e clip-path. Nada é dividido em caracteres.
   ================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .movimento:not(.pronta) .entra { opacity: 0; }
  /* sequência curta e perceptível (fase 9): cada camada entra ~75 ms depois da anterior e
     leva 600 ms — o hero inteiro assenta em ~1,1 s, como uma interface carregando, não um
     texto surgindo devagar */
  .movimento.pronta .entra {
    animation: qx-entra 600ms var(--curva-entra) both;
    animation-delay: calc(60ms + var(--i, 0) * 75ms);
  }
  /* o título entra POR LINHA, cada linha subindo de trás da própria borda */
  .movimento .linha { display: block; overflow: clip; padding-block: 0.06em 0.1em; margin-block: -0.06em -0.1em; }
  .movimento .linha > span { display: block; }
  .movimento.pronta .linha.entra { animation-name: qx-fade; }
  .movimento.pronta .linha.entra > span {
    animation: qx-linha 720ms var(--curva-entra) both;
    animation-delay: calc(60ms + var(--i, 0) * 75ms);
  }
  .movimento:not(.pronta) .linha > span { transform: translateY(105%); }
}
@keyframes qx-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes qx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qx-linha { from { transform: translateY(105%); } to { transform: none; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* conclui antes do terço inferior da tela: o que está à vista está legível */
    .movimento .revela {
      animation: qx-revela linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 3%) cover calc(13% + var(--i, 0) * 3%);
    }
    /* títulos: MÁSCARA — a linha sobe de trás da própria borda. Só em título: um botão
       parcialmente recortado parece quebrado, não em movimento. */
    .movimento h2.revela { animation-name: qx-mascara; }
    /* a faixa do rótulo se desenha junto com o bloco */
    .movimento .revela.rotulo--faixa::before,
    .movimento .revela .rotulo--faixa::before {
      animation: qx-faixa linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
    /* imagens: profundidade por luz e por um deslocamento pequeno — nunca por escala > 1
       sobre o arquivo (a caixa é sempre menor que a imagem) */
    .movimento .midia img {
      animation: qx-profundidade linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes qx-revela {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes qx-mascara {
  from { opacity: 0; transform: translateY(0.5em); clip-path: inset(0 0 72% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(-0.2em -0.2em -0.3em -0.2em); }
}
@keyframes qx-faixa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes qx-profundidade {
  from { transform: translateY(-4%) scale(1.08); filter: brightness(0.9); }
  to   { transform: translateY(4%) scale(1.08); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --tema-dur-fundo: 200ms; --tema-dur-texto: 150ms; }
  .botao__faixa, .link-acao .faixa, .entrada, .entrada__traco span { transition: none; }
  .botao:hover .botao__faixa { width: 30px; }
  .link-acao:hover .faixa { width: 30px; }
}

/* ------------------------------------------------------------------ cores forçadas */
@media (forced-colors: active) {
  .botao { border: 2px solid ButtonText; }
  .faixa, .rotulo--faixa::before, .botao__faixa { forced-color-adjust: none; color: CanvasText; --acento-local: CanvasText; }
  .glifo { stroke: CanvasText; }
  :focus-visible { outline-color: Highlight !important; box-shadow: none !important; }
  .entrada__marca { forced-color-adjust: none; }
}