/* Quitex · SEÇÕES (fase 9 — refinamento final da experiência)
   ------------------------------------------------------------------------------------
   Três camadas da mesma marca:
     3D ............ a jornada — o protagonista (congelada, só no palco)
     FOTOGRAFIA .... o contexto real. Uma imagem por função, nenhuma repetida:
                     hero → impacto (frente) · serviço/avaliação (veículo) ·
                     identificação (cliente) · credibilidade/negociação (assinatura) ·
                     segurança/transparência (documentos) · ação (piso)
     HTML/CSS/SVG .. a informação — módulos, equação, marcas numeradas, símbolos, a faixa

   Sem rótulos classificadores: o título é o assunto. O azul é a luz da marca — aparece
   como reflexo e ponto de luz nas fotografias, como cabeça da faixa, operadores, marcas e
   estados de interação. Nunca fundo, nunca grande área.

   Ritmo de luz:
     1 hero ........... preto     impacto
     2 jornada ........ cinza → branco (o processo, os quatro momentos)
     3 uma empresa só . branco    serviço · o que a Quitex conduz · os dois CTAs
     4 para quem ...... preto     identificação
     5 a proposta ..... branco    a equação · a negociação
     6 documentação ... preto     a prancha numerada · as garantias
     7 a empresa ...... branco    afirmação e fatos em módulos
     8 avaliação ...... preto     ação
     9 rodapé ......... preto, pequeno
   ------------------------------------------------------------------------------------ */

/* ---------------------------------------------------------------- TEXTURA
   Grão de filme muito baixo nas seções pretas: separa um preto fotográfico de um preto de
   tela vazia. SVG inline (feTurbulence), zero requisição. */
.grao { position: relative; isolation: isolate; }
.grao::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.045;
}

/* ---------------------------------------------------------------- miolo comum */
.operacao__cabeca, .operacao__corpo, .situacao__cabeca, .situacao__grade, .proposta__cabeca,
.equacao, .negociacao, .documentacao__cabeca, .prancha, .garantias,
.sobre__grade, .chamada__texto {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
}
.operacao__titulo, .situacao__titulo, .proposta__titulo, .documentacao__titulo, .sobre__titulo {
  font-family: var(--f-titulo);
  font-weight: var(--p-display);
  font-size: var(--t-secao);
  line-height: 1.02;
  letter-spacing: var(--tr-display);
}

/* ---------------------------------------------------------------- FOTOGRAFIA
   A fotografia vale por si: nenhuma marca, etiqueta ou linha sobre ela (fase 9.6). */
.foto { position: relative; overflow: clip; margin: 0; background: #111; }
.foto picture, .chamada__foto picture { width: 100%; height: 100%; }
.foto img, .chamada__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ==================================================================================
   1 · HERO — uma fotografia dominante, a luz da marca, quatro módulos
   ================================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--e-6);
  padding: calc(var(--topo) + var(--e-5)) var(--margem) var(--e-5);
  background: var(--preto-absoluto);
  color: var(--branco);
  overflow: clip;
  view-timeline: --hero block;          /* a saída do hero conduz a foto, a luz e o texto */
}
/* a foto sangra a tela inteira: o texto se alinha à MARGEM da página, não à coluna de
   1320 — numa tela de 1920 a coluna centralizada jogaria o título em cima do carro */
.hero > :not(.hero__midia):not(.hero__luz) { width: 100%; }

.hero__midia { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: clip; transform-origin: 70% 60%; }
.hero__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 56%;                 /* o carro o mais à direita possível */
  transform-origin: 70% 55%;
}
/* o escuro vem da própria fotografia: o véu só aprofunda onde o texto mora, e o pé vira
   preto absoluto para o palco nascer dele */
.hero__midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #000 0%, rgb(0 0 0 / 0.84) 22%, rgb(0 0 0 / 0.38) 44%, rgb(0 0 0 / 0) 64%),
    linear-gradient(to top, #000 0%, rgb(0 0 0 / 0.7) 18%, rgb(0 0 0 / 0) 40%),
    linear-gradient(to bottom, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0) 20%);
}
/* A LUZ DA MARCA: um reflexo verde no piso molhado, sob o carro, e um halo baixo nos faróis.
   Somado à foto (screen), nunca pintado por cima: é luz, não cor de fundo. Na Shift as doses
   são MENORES que as do azul da Quitex (0,22/0,16/0,05): o verde soma mais luminância na
   pintura prata, e o carro não pode parecer verde — é iluminação ambiente, não neon. */
.hero__luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 30% 9% at 76% 84%, rgb(var(--acento-luz) / 0.15), rgb(var(--acento-luz) / 0) 70%),
    radial-gradient(ellipse 14% 5% at 75% 57%, rgb(var(--acento-luz) / 0.08), rgb(var(--acento-luz) / 0) 70%),
    linear-gradient(to top, rgb(var(--acento-luz) / 0.035), rgb(var(--acento-luz) / 0) 30%);
}

.hero__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); }
.hero__marca { width: auto; height: clamp(32px, 3vw, 42px); }
.hero__contato { display: flex; align-items: center; gap: var(--e-5); }
.hero__cobertura { color: #A4A7AB; }                       /* 8,69 */
.hero__contato a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  color: var(--branco);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.4);
  transition: border-color 200ms ease;
}
.hero__contato a:hover { border-bottom-color: var(--acento); }

.hero__conteudo {
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
  padding-bottom: var(--e-3);
}
.hero__titulo {
  font-family: var(--f-titulo);
  font-weight: var(--p-display);
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: initial;
}
.hero__titulo .linha { display: block; }
/* a quebra da solução é FIXA (<br>), não calculada por largura: com a fonte provisória o
   título quebrava em outro ponto e mudava de altura quando a fonte final chegava (CLS). */
@media (max-width: 767px) { .hero__quebra { display: none; } }
.hero__titulo .linha:first-child { color: #B4B7BB; }       /* o problema em meio tom; a solução em branco */
/* a PALAVRA-CHAVE: o acento sublinha a solução */
.destaque {
  font-style: normal;
  background: linear-gradient(var(--acento), var(--acento)) 0 96% / 100% 0.06em no-repeat;
  padding-bottom: 0.05em;
}
.hero__texto { max-width: 44ch; font-size: var(--t-lide); color: #C9CBCE; }   /* 12,9 */
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); margin-top: var(--e-1); }
.hero__estatico { display: none; max-width: 52ch; color: #8E9196; }
[data-estatico="reduced-motion"] .hero__estatico { display: block; }

/* QUATRO MÓDULOS ao pé da foto: símbolo, nome, o dado. Uma linha fina os une; a cabeça da
   linha é o acento e ela se desenha na entrada. */
.hero__modulos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: var(--e-4);
}
.hero__modulos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--acento) 0 56px, rgb(255 255 255 / 0.18) 56px 100%);
  transform-origin: left;
}
.hero__modulos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--e-3);
  align-items: center;
  padding-right: var(--e-5);
}
/* (fase 9.6) uma frase por módulo, em texto normal — não um painel com rótulo e dado */
.hero__modulos li + li { padding-left: var(--e-5); border-left: 1px solid rgb(255 255 255 / 0.12); }
.hero__modulos .glifo { width: 22px; height: 22px; color: var(--branco); }
.hero__modulos li span { font-size: 0.875rem; font-weight: 500; line-height: 1.3; color: #D6D8DB; }   /* 14,7 */

/* ENTRADA do hero (depois da entrada preta): a cena ACENDE — a foto sai do escuro e assenta
   — enquanto o texto sobe camada por camada (base.css, .entra). Só filter e transform. */
@media (prefers-reduced-motion: no-preference) {
  .movimento:not(.pronta) .hero__midia { filter: brightness(0.2); transform: scale(1.05); }
  .movimento.pronta .hero__midia { animation: qx-acende 1300ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .movimento:not(.pronta) .destaque { background-size: 0% 0.06em; }
  .movimento.pronta .destaque { animation: qx-sublinha 620ms var(--curva-entra) 520ms both; }
  .movimento:not(.pronta) .hero__modulos::before { transform: scaleX(0); }
  .movimento.pronta .hero__modulos::before { animation: qx-cresce 900ms var(--curva-entra) 480ms both; }
}
@keyframes qx-acende { from { filter: brightness(0.2); transform: scale(1.05); } to { filter: brightness(1); transform: none; } }
@keyframes qx-sublinha { from { background-size: 0% 0.06em; } to { background-size: 100% 0.06em; } }

/* ==================================================================================
   3 · UMA EMPRESA SÓ — serviço, o que a Quitex conduz, os dois CTAs
   ================================================================================== */
/* o topo é mais curto que o das outras seções: esta seção sobe logo abaixo da conclusão da
   jornada, que está no pé do palco branco — nenhuma faixa branca vazia entre as duas */
.operacao {
  padding: var(--e-7) var(--margem) var(--e-10);
  background: var(--branco);
  color: var(--preto);
}
.operacao:focus { outline: none; }
/* V2 (captura de 21/09, 22:32): o lide ficava sozinho à direita, solto do título, como um
   bloco flutuante. Agora é a continuação do título, na mesma coluna — uma leitura só. */
.operacao__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  justify-items: start;
}
.operacao__titulo { max-width: 16ch; }
.operacao__lide { max-width: 50ch; font-size: var(--t-lide); color: #55585D; }   /* 7,14 */

.operacao__corpo {
  margin-top: var(--e-8);
  display: grid;
  gap: var(--e-6);
}
.operacao__nota {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: 1rem;
  font-weight: 500;
  color: var(--preto);
}
.operacao__nota::before { content: ""; width: 7px; height: 7px; background: var(--acento-local); flex: none; }

.palavras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--e-7);
}
.palavra {
  display: grid;
  align-content: start;
  gap: var(--e-2);
  padding: var(--e-4) 0 var(--e-6);
  border-top: 1px solid rgb(10 10 11 / 0.14);
}
.palavra dt {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--f-titulo);
  font-weight: var(--p-display);
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.palavra .glifo { width: 24px; height: 24px; }
.palavra dd { max-width: 36ch; padding-left: calc(24px + var(--e-3)); font-size: 0.9375rem; color: #55585D; }


/* ==================================================================================
   4 · PARA QUEM É — identificação: a pessoa, e quatro situações ditas como o cliente diria
   ================================================================================== */
.situacao {
  padding: var(--e-10) var(--margem);
  background: var(--preto-absoluto);
  color: var(--branco);
}
.situacao__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-5) var(--e-8);
  align-items: end;
}
.situacao__titulo { max-width: 20ch; }
.situacao__lide { max-width: 40ch; font-size: var(--t-lide); line-height: 1.55; color: #B4B7BB; }

.situacao__grade {
  margin-top: var(--e-8);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-8);
  align-items: stretch;
}
/* a ação no ponto de maior intenção (CRO): mesmos botões da chamada final, mesmo fundo
   preto — nenhum estilo novo, nenhuma linguagem nova. */
.situacao__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); margin-top: var(--e-7); }

.foto--problema { aspect-ratio: 16 / 10; }
.foto--problema img { object-position: 40% 50%; }

/* as situações ocupam a altura da foto: quatro faixas iguais, cada uma uma frase inteira */
.situacoes { display: grid; grid-template-rows: repeat(4, 1fr); }
.situacoes__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--e-4) 0 var(--e-4) calc(8px + var(--e-4));
  border-top: 1px solid rgb(255 255 255 / 0.16);
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.4375rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
}
.situacoes__item:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.situacoes__item::before {                                   /* o ponto de luz */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--acento);
  transform: translateY(-50%);
}

/* ==================================================================================
   5 · A PROPOSTA — a equação e a negociação
   ================================================================================== */
.proposta {
  padding: var(--e-10) var(--margem);
  background: var(--branco);
  color: var(--preto);
}
.proposta__titulo { max-width: 18ch; }

/* EXISTE UM VEÍCULO + EXISTE UMA DÍVIDA = A QUITEX ESTRUTURA A PROPOSTA. Cada termo é uma
   frase que se entende sozinha, com o seu símbolo; os operadores são retângulos no acento. */
.proposta__cabeca { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--e-5) var(--e-8); align-items: end; }
.proposta__lide { max-width: 38ch; font-size: var(--t-lide); color: #55585D; }
.equacao {
  margin-top: var(--e-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: stretch;
}
.termo {
  display: grid;
  align-content: start;
  gap: var(--e-3);
  padding: var(--e-5) 0 var(--e-6);
  border-top: 2px solid var(--preto);
}
.termo__glifo { width: 34px; height: 34px; margin-bottom: var(--e-2); }
.termo__nome {
  font-family: var(--f-titulo);
  font-weight: var(--p-display);
  font-size: clamp(1.375rem, 1rem + 0.9vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.termo__texto { max-width: 30ch; font-size: 1rem; color: #55585D; }
.termo--resultado {
  padding: var(--e-5) var(--e-6) var(--e-6);
  border-top: 0;
  background: var(--preto);
  color: var(--branco);
  box-shadow: inset 0 3px 0 var(--acento);
}
.termo--resultado .termo__texto { color: #C9CBCE; }

.operador { position: relative; margin: 0; align-self: center; height: 64px; }
.operador::before, .operador::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 3px;
  background: var(--acento-local);
}
.operador--mais::before { transform: translate(-50%, -50%); }
.operador--mais::after { width: 3px; height: 28px; transform: translate(-50%, -50%); }
.operador--igual::before { transform: translate(-50%, calc(-50% - 5px)); }
.operador--igual::after { transform: translate(-50%, calc(-50% + 5px)); }

/* depois da negociação: uma frase só, com setas no acento — não um fluxograma */
.depois {
  width: 100%;
  max-width: var(--largura);
  margin: var(--e-6) auto 0;
  padding-top: var(--e-4);
  border-top: 1px solid rgb(10 10 11 / 0.12);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--grafite);
}
.depois .glifo { display: inline-block; width: 20px; height: 20px; margin: 0 0.3em; vertical-align: -4px; color: var(--acento-local); }

.negociacao {
  margin-top: var(--e-10);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-8);
  align-items: end;
}
.foto--negociacao { aspect-ratio: 16 / 10; }
.negociacao__texto { display: grid; gap: var(--e-4); }
.negociacao__titulo {
  max-width: 18ch;
  font-family: var(--f-titulo);
  font-weight: var(--p-display);
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.negociacao__texto > p { max-width: 42ch; font-size: 1.0625rem; color: #55585D; }
/* três microdados: símbolo + uma linha */
.microdados { display: grid; margin-top: var(--e-2); }
.microdados li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-top: 1px solid rgb(10 10 11 / 0.12);
  font-size: 0.9375rem;
  font-weight: 560;
}
.microdados .glifo { width: 22px; height: 22px; }

/* ==================================================================================
   6 · DOCUMENTAÇÃO — a prancha numerada, a legenda, as garantias
   ================================================================================== */
.documentacao {
  padding: var(--e-10) var(--margem);
  background: var(--preto-absoluto);
  color: var(--branco);
}
.documentacao__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--e-5) var(--e-8);
  align-items: end;
}
.documentacao__titulo { max-width: 22ch; }
.documentacao__fonte { justify-self: end; }
.documentacao__fonte { font-size: 0.9375rem; color: #B4B7BB; }                 /* 10,4 */
.documentacao__fonte a {
  display: inline-flex;
  min-height: var(--alvo);
  align-items: center;
  color: var(--branco);
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 4px;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.documentacao__fonte a:hover { color: var(--branco); text-decoration-color: var(--acento); }

/* A PRANCHA: a foto grande, limpa, e a legenda ao lado — cada frase com o símbolo da coisa
   de que fala (papel, chave, caneta). Nada sobre a fotografia (fase 9.6). */
.prancha {
  margin-top: var(--e-8);
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--e-7);
  align-items: end;
}
.prancha__foto { position: relative; margin: 0; }
.foto--documentos { aspect-ratio: 1672 / 941; }

.legenda { display: grid; }
.legenda li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--e-4);
  row-gap: var(--e-1);
  padding: var(--e-4) 0;
  border-top: 1px solid rgb(255 255 255 / 0.16);
}
.legenda__n { grid-row: span 2; padding-top: 2px; }
.legenda__n .glifo { width: 24px; height: 24px; }
.legenda__nome { font-family: var(--f-titulo); font-weight: 600; font-size: 1.125rem; line-height: 1.25; }
.legenda li > p:last-child { font-size: 0.9375rem; color: #A4A7AB; }

.garantias {
  margin-top: var(--e-9);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-6);
}
.garantia {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid rgb(255 255 255 / 0.16);
}
.garantia .glifo { width: 24px; height: 24px; margin-top: 2px; }
.garantia h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 1.125rem; }
.garantia p { margin-top: var(--e-1); max-width: 44ch; font-size: 0.9375rem; color: #A4A7AB; }
.garantia a { color: var(--branco); text-decoration-color: var(--acento); text-underline-offset: 3px; }

/* ==================================================================================
   7 · A EMPRESA — afirmação, explicação, fatos em módulos
   ================================================================================== */
.sobre {
  padding: var(--e-10) var(--margem);
  background: var(--branco);
  color: var(--preto);
}
.sobre__grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-5) var(--e-8);
  align-items: end;
}
.sobre__titulo { max-width: 20ch; }
.sobre__lide { max-width: 44ch; font-size: var(--t-lide); line-height: 1.55; color: #55585D; }
/* a assinatura da empresa: o nome e uma frase com os dados oficiais — um colofão, não uma
   ficha com rótulos (fase 9.6) */
.sobre__assinatura {
  width: 100%;
  max-width: var(--largura);
  margin: var(--e-8) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--e-3) var(--e-8);
  align-items: baseline;
  padding-top: var(--e-5);
  border-top: 1px solid rgb(10 10 11 / 0.14);
}
.sobre__razao {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  letter-spacing: -0.012em;
}
.sobre__linha { max-width: 70ch; font-size: 1rem; line-height: 1.65; color: #55585D; }
.sobre__linha a { color: var(--preto); text-decoration-color: var(--acento-local); text-underline-offset: 3px; }

/* ==================================================================================
   8 · A AVALIAÇÃO — o próximo passo
   O piso de concreto e a seta pintada nele, que recebe a luz da marca.
   ================================================================================== */
.chamada {
  position: relative;
  isolation: isolate;
  min-height: 84svh;
  display: grid;
  align-items: center;
  padding: var(--e-10) var(--margem);
  background: var(--preto-absoluto);
  color: var(--branco);
  overflow: clip;
}
.chamada__foto { position: absolute; inset: 0 0 0 auto; z-index: -2; width: min(74vw, 1500px); margin: 0; overflow: clip; }
.chamada__foto img { object-position: 30% 50%; }
.chamada__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #000 0%, rgb(0 0 0 / 0.9) 22%, rgb(0 0 0 / 0.4) 48%, rgb(0 0 0 / 0.1) 72%),
    linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 26%),
    linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0) 24%);
}
.chamada__luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 22% 16% at 66% 42%, rgb(var(--acento-luz) / 0.15), rgb(var(--acento-luz) / 0) 70%);
}
.chamada__texto { display: grid; justify-items: start; gap: var(--e-5); }
.chamada__titulo {
  max-width: 12ch;
  font-family: var(--f-titulo);
  font-weight: var(--p-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.chamada__lide { max-width: 38ch; font-size: var(--t-lide); color: #C9CBCE; }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); margin-top: var(--e-2); }
.chamada__numero { display: grid; gap: var(--e-1); margin-top: var(--e-4); color: var(--branco); text-decoration: none; }
.chamada__canal { font-size: 0.9375rem; color: #A4A7AB; }                     /* 8,69 */
.chamada__digitos {
  font-family: var(--f-titulo);
  font-weight: var(--p-display);
  font-size: clamp(1.75rem, 1rem + 2.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(var(--acento), var(--acento)) left bottom / 0% 2px no-repeat;
  padding-bottom: 6px;
  transition: background-size 320ms var(--curva-entra);
}
.chamada__numero:hover .chamada__digitos { background-size: 100% 2px; }

/* ==================================================================================
   MOVIMENTO ESPECÍFICO — sempre dentro das guardas: .movimento + sem movimento reduzido +
   suporte a view(). Só transform, opacity, filter, clip-path e o tamanho de um fundo.
   ================================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* HERO → JORNADA: ao rolar, a foto aproxima e escurece, a luz apaga e o texto recua.
       O pé da foto já é preto: o palco (que nasce em penumbra, sob o véu da costura)
       continua dele. */
    .movimento .hero__midia img {
      animation: qx-hero-foto linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
    .movimento .hero__luz {
      animation: qx-apaga linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 50%;
    }
    /* o contêiner, não os filhos: os filhos já têm a entrada (.entra) */
    .movimento .hero__conteudo {
      animation: qx-hero-texto linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 60%;
    }

    .movimento .operador::before,
    .movimento .operador::after {
      animation-timeline: view();
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    /* os operadores se desenham quando os termos já estão à vista */
    .movimento .operador::before, .movimento .operador::after { animation-name: qx-fade; animation-range: entry 40% cover 30%; }

    /* fotografias: profundidade por um deslocamento pequeno dentro da moldura */
    .movimento .foto img, .movimento .chamada__foto img {
      animation: qx-profundidade linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes qx-hero-foto {
  from { transform: scale(1); filter: brightness(1); }
  to   { transform: scale(1.12); filter: brightness(0.3); }
}
@keyframes qx-hero-texto {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-5vh); }
}
@keyframes qx-apaga { from { opacity: 1; } to { opacity: 0; } }
@keyframes qx-cresce { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes qx-haste { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ==================================================================================
   RESPONSIVO — composição PRÓPRIA abaixo de 1024 e de 768, não uma versão espremida
   ================================================================================== */
@media (max-width: 1023px) {
  .operacao__cabeca, .operacao__corpo, .situacao__grade, .negociacao, .prancha, .sobre__grade,
  .situacao__cabeca, .documentacao__cabeca, .proposta__cabeca { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .documentacao__fonte { justify-self: start; }
  .palavras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .situacoes { grid-template-rows: none; }
  .garantias { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
  .sobre__assinatura { grid-template-columns: minmax(0, 1fr); }
  .hero__modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e-4); }
  .hero__modulos li:nth-child(3) { padding-left: 0; border-left: 0; }

  /* a equação em pé: os termos empilhados, os operadores entre eles */
  .equacao { grid-template-columns: minmax(0, 1fr); }
  .operador { height: 56px; }
  .termo { padding-bottom: var(--e-5); }
}

/* tablet em pé: a mesma composição do celular (foto no alto, texto embaixo) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .hero__midia { inset: 0 0 auto 0; height: 60%; }
  .hero__midia img { object-position: 74% 56%; }
  .hero__midia::after {
    background:
      linear-gradient(to top, #000 0%, rgb(0 0 0 / 0.8) 18%, rgb(0 0 0 / 0) 52%),
      linear-gradient(to bottom, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0) 22%);
  }
  .hero__luz {
    background:
      radial-gradient(ellipse 40% 6% at 62% 54%, rgb(var(--acento-luz) / 0.14), rgb(var(--acento-luz) / 0) 70%),
      radial-gradient(ellipse 18% 4% at 60% 34%, rgb(var(--acento-luz) / 0.07), rgb(var(--acento-luz) / 0) 70%);
  }
}

@media (max-width: 767px) {
  /* HERO: a fotografia em retrato no alto; o texto embaixo, sobre o preto */
  .hero { gap: var(--e-5); padding-bottom: var(--e-5); }
  /* a foto tem altura PROPORCIONAL À LARGURA (o recorte é 4:5): o carro fica sempre na
     mesma faixa (≈ 50–80vw do topo), e o texto nunca começa acima dele — em tela baixa o
     hero fica um pouco mais alto que a tela, em vez de o título cobrir o carro */
  .hero__midia { inset: 0 0 auto 0; height: 118vw; }
  .hero__midia img { object-position: 50% 26%; }
  .hero__conteudo { margin-top: 62vw; }
  .hero__midia::after {
    background:
      linear-gradient(to top, #000 0%, rgb(0 0 0 / 0.82) 20%, rgb(0 0 0 / 0) 58%),
      linear-gradient(to bottom, rgb(0 0 0 / 0.66) 0%, rgb(0 0 0 / 0) 24%);
  }
  .hero__luz {
    inset: 0 0 auto 0;
    height: 118vw;                         /* a luz acompanha a foto, não o hero */
    background:
      radial-gradient(ellipse 60% 5% at 50% 68%, rgb(var(--acento-luz) / 0.15), rgb(var(--acento-luz) / 0) 70%),
      radial-gradient(ellipse 30% 3% at 45% 52%, rgb(var(--acento-luz) / 0.07), rgb(var(--acento-luz) / 0) 70%);
  }
  .hero__conteudo { gap: var(--e-4); padding-bottom: 0; }
  .hero__cobertura { display: none; }
  .hero__marca { height: 30px; }
  .hero__titulo { font-size: clamp(2rem, 9vw, 2.75rem); }
  .hero__texto { font-size: var(--t-body); }

  .hero__modulos { column-gap: 0; }
  .hero__modulos li { padding-right: var(--e-3); }
  .hero__modulos li + li { padding-left: var(--e-3); }
  .hero__modulos .glifo { width: 22px; height: 22px; }
  .hero__modulos li span { font-size: 0.8125rem; }
  .hero__acoes, .chamada__acoes { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero__acoes .botao, .chamada__acoes .botao, .situacao__acoes .botao { width: 100%; padding: 0 var(--e-5); }

  .situacao, .proposta, .documentacao, .sobre { padding-top: var(--e-9); padding-bottom: var(--e-9); }
  .operacao { padding-top: var(--e-6); padding-bottom: var(--e-9); }
  .operacao__corpo { margin-top: var(--e-7); }
  .palavras { grid-template-columns: minmax(0, 1fr); }
  .palavra { padding-bottom: var(--e-5); }

  /* as fotografias sangram de borda a borda, no recorte próprio do celular */
  .foto--problema, .foto--negociacao {
    aspect-ratio: 4 / 5;
    margin-inline: calc(var(--margem) * -1);
  }
  .foto--documentos { aspect-ratio: 1 / 1; margin-inline: calc(var(--margem) * -1); }
  .situacao__grade { margin-top: var(--e-7); }
  .equacao { margin-top: var(--e-7); }
  .negociacao { margin-top: var(--e-9); gap: var(--e-6); }

  .garantias { margin-top: var(--e-8); }
  .sobre__assinatura { margin-top: var(--e-7); }

  /* AVALIAÇÃO: o piso em cima, em faixa; o texto embaixo */
  .chamada { min-height: auto; align-items: end; padding-top: 58vw; padding-bottom: var(--e-9); }
  .chamada__foto { inset: 0 0 auto 0; width: 100%; height: 64vw; }
  .chamada__foto img { object-position: 50% 50%; }
  .chamada__foto::after {
    background:
      linear-gradient(to top, #000 0%, rgb(0 0 0 / 0.5) 30%, rgb(0 0 0 / 0) 64%),
      linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0) 26%);
  }
  .chamada__luz { background: radial-gradient(ellipse 40% 12% at 50% 17vw, rgb(var(--acento-luz) / 0.15), rgb(var(--acento-luz) / 0) 70%); }
  .chamada__titulo { font-size: clamp(2.125rem, 9.4vw, 3rem); }
}

@media (max-width: 374px) {
  /* 320–374: o CTA em uma linha só */
  .botao { padding: 0 var(--e-4); gap: var(--e-3); letter-spacing: 0.03em; font-size: 0.875rem; }
  .botao__faixa { width: 22px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto; }
  .hero__modulos { display: none; }
}

@media (forced-colors: active) {
  .hero__midia::after, .chamada__foto::after, .grao::after,
  .hero__luz, .chamada__luz { display: none; }
  .termo, .termo--resultado { border: 1px solid CanvasText; }
  .operador::before, .operador::after, .situacoes__item::before,
  .operacao__nota::before, .situacoes__item::after {
    forced-color-adjust: none; background: CanvasText;
  }
  .destaque { text-decoration: underline; background: none; }
}