/* LP Volta Redonda. Tokens e regras de Elementos/design.md. */

:root {
  --ht-red: #c13229;
  --ht-navy: #090f2e;
  --ht-black: #101010;
  --ht-red-hover: #a92b24;
  --ht-red-active: #8f241e;

  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-text: #101010;
  --color-text-muted: #5e626d;
  --color-text-on-navy: #c9cbd8;
  --color-border: #dedfe3;
  --color-border-strong: #b9bbc2;
  --color-error: #b42318;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 16, 16, 0.08);
  --shadow-md: 0 8px 24px rgba(9, 15, 46, 0.12);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --margem: 20px;
  --secao: 72px;
  --topo: 60px;
  --foco: rgba(193, 50, 41, 0.45);
}

@media (min-width: 768px) {
  :root { --margem: 32px; --secao: 96px; --topo: 68px; }
}
@media (min-width: 1200px) {
  :root { --margem: 48px; --secao: 120px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--topo);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  caret-color: var(--ht-red);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ht-red); color: #fff; }

img { display: block; max-width: 100%; height: auto; }

p, ul, ol, figure, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }

p { max-width: 68ch; text-wrap: pretty; }
p + p { margin-top: var(--space-4); }

a { color: inherit; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.pular {
  position: absolute;
  left: var(--margem);
  top: -100px;
  z-index: 30;
  padding: var(--space-3) var(--space-4);
  background: #fff;
  color: var(--color-text);
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.pular:focus { top: var(--space-2); }

.largura {
  width: 100%;
  max-width: calc(1200px + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* Títulos: dois pesos, alinhados à esquerda */

.titulo {
  font-size: clamp(30px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: var(--space-6);
  max-width: 22ch;
}
.titulo .leve { display: block; font-weight: 400; }
.titulo--display {
  font-size: clamp(34px, 5.6vw + 14px, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.titulo--h1 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.1; letter-spacing: -0.02em; max-width: 18ch; }
.titulo--largo { max-width: 26ch; }
.titulo--h3 { font-size: clamp(24px, 2.6vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: var(--space-4); }
.titulo--h4 { font-size: clamp(20px, 2vw, 22px); font-weight: 600; line-height: 1.25; letter-spacing: 0; margin-bottom: var(--space-2); }

.texto-lg { font-size: 18px; }

/* Seções */

.secao { padding-block: var(--secao); overflow-x: clip; }
.secao--colada { padding-top: 0; }
.secao--navy {
  background: var(--ht-navy);
  color: #fff;
  --foco: #fff;
}
.secao--navy p { color: var(--color-text-on-navy); }
.secao--navy + .secao { padding-top: var(--secao); }

.coluna-texto { max-width: 720px; }

/* Moldura: recorta a foto e dá espaço para ela se mover dentro */

.moldura { position: relative; overflow: hidden; }
.moldura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Campo-isca contra robôs: fora da tela e fora da navegação por teclado. */
.campo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Botão */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--ht-red);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.botao:hover { background: var(--ht-red-hover); }
.botao:active { background: var(--ht-red-active); transform: translateY(1px); }
.botao:focus-visible { border-radius: var(--radius-md); }
.botao--grande { min-height: 52px; padding: 0 24px; font-size: 16px; }
.botao--cheio { width: 100%; }
.botao__seta {
  width: auto;
  height: 12px;
  transition: transform var(--duration-base) var(--ease-standard);
}
.botao:hover .botao__seta { transform: translateX(4px); }

/* Topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ht-navy);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  --foco: #fff;
}
.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--topo);
}
.topo__logo { display: inline-flex; align-items: center; min-height: 44px; }
.topo__logo img { width: auto; height: 24px; }
.topo__botao { display: none; }
@media (min-width: 768px) {
  .topo__logo img { height: 28px; }
  .topo__botao { display: inline-flex; }
}

/* 1. Abertura */

.abertura { overflow-x: clip; }
.abertura__palco { position: relative; display: flex; flex-direction: column; }
/* A moldura recorta a foto: ela cresce e se desloca na animação e, sem o
   recorte, sobrava uma tira clara abaixo do degradê. */
.abertura__moldura { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.abertura__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
.abertura__palco .largura { position: relative; }
.abertura__texto { max-width: 720px; padding-block: var(--space-8) var(--space-12); }
.abertura .titulo--display { font-size: clamp(34px, 4.4vw + 14px, 58px); max-width: none; }
.abertura__publico { color: #fff; font-size: 16px; font-weight: 500; margin-bottom: var(--space-4); }
.abertura .texto-lg { max-width: 52ch; }

/* No celular a foto fica acima do texto e se dissolve no navy. */
.abertura__moldura::after {
  content: "";
  position: absolute;
  inset: 0 0 -1px 0;
  background: linear-gradient(to bottom, rgba(9, 15, 46, 0) 55%, var(--ht-navy) 97%);
  pointer-events: none;
}

.acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
}
.acao__nota { font-size: 14px; line-height: 1.5; max-width: 30ch; margin: 0; }

.abertura__numeros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-4);
  margin: 0;
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.abertura__numero dt {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.abertura__numero dd {
  margin: 6px 0 0;
  max-width: 30ch;
  color: var(--color-text-on-navy);
  font-size: 14px;
  line-height: 1.45;
}

.abertura__nota {
  max-width: none;
  padding-block: var(--space-4) var(--space-10);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .acao .botao { width: 100%; }
}

@media (min-width: 768px) {
  .abertura__palco { display: block; min-height: min(640px, 78vh); }
  .abertura__moldura {
    position: absolute;
    inset: 0 0 0 auto;
    width: 64%;
    aspect-ratio: auto;
  }
  .abertura__foto { object-position: center; }
  /* Navy sólido sob o texto, foto em cor original à direita. */
  .abertura__moldura::after { content: none; }
  .abertura__palco::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, var(--ht-navy) 0%, var(--ht-navy) 37%, rgba(9, 15, 46, 0.88) 48%, rgba(9, 15, 46, 0.35) 64%, rgba(9, 15, 46, 0) 80%);
  }
  .abertura__palco .largura { z-index: 1; }
  .abertura__texto { padding-block: clamp(56px, 8vw, 104px); }
  .abertura__numeros { grid-template-columns: repeat(3, 1fr); gap: var(--space-10) var(--space-8); padding-block: var(--space-8) var(--space-10); border-top: 0; }
}
/* Em tablet o título chega mais perto da foto: o navy avança para manter o contraste. */
@media (min-width: 768px) and (max-width: 1199px) {
  .abertura__palco::after {
    background: linear-gradient(90deg, var(--ht-navy) 0%, var(--ht-navy) 46%, rgba(9, 15, 46, 0.9) 60%, rgba(9, 15, 46, 0.55) 74%, rgba(9, 15, 46, 0) 94%);
  }
  .abertura .texto-lg { max-width: 44ch; }
}

/* 2. As dores: numeradas, no mesmo desenho dos passos */

.dores { display: grid; gap: var(--space-10); counter-reset: dor; margin-top: var(--space-10); }
.dor { position: relative; padding-top: calc(var(--space-4) + 2px); counter-increment: dor; }
.dor::before {
  content: counter(dor);
  display: block;
  margin-bottom: var(--space-4);
  color: var(--ht-navy);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}
.dor .titulo { max-width: 24ch; }
.dor p { max-width: 46ch; }
@media (min-width: 768px) {
  .dores { grid-template-columns: 1fr 1fr; gap: var(--space-12) var(--space-8); margin-top: var(--space-12); }
}
@media (min-width: 1024px) {
  .dores { gap: var(--space-16); margin-top: var(--space-16); }
  .dor::before { font-size: 64px; }
  .dor p { font-size: 18px; }
}

/* 3. A virada. Este é o estado parado (sem JavaScript ou com "reduzir movimento"):
   a foto do prato em tela cheia com o título inteiro. A cena presa à rolagem está no bloco Movimento. */

.cena { position: relative; }
.cena__palco {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: min(720px, 88vh);
  padding-block: var(--secao);
  overflow: hidden;
}
.cena__precos { display: none; }
.cena__foto { position: absolute; inset: 0; background: var(--ht-navy); }
/* No celular a foto em pé ocupa a parte de baixo do palco: o título fica no navy, acima do doce. */
.cena__foto img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 72%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* O navy cobre só a faixa do título e some antes do doce, que fica em cor original. */
.cena__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(9, 15, 46) 0%, rgb(9, 15, 46) 27%, rgba(9, 15, 46, 0.9) 33%, rgba(9, 15, 46, 0.62) 41%, rgba(9, 15, 46, 0.25) 49%, rgba(9, 15, 46, 0) 56%);
  pointer-events: none;
}
.cena__conteudo { position: relative; z-index: 3; }
/* O corpo também obedece à altura: em celular baixo o título encolhe e não desce sobre o doce. */
.cena .titulo { max-width: 15ch; margin-bottom: 0; font-size: clamp(25px, min(8.6vw, 4.6svh), 46px); line-height: 1.08; }
@media (min-width: 1024px) {
  .cena__palco { align-items: center; }
  .cena .titulo { max-width: 16ch; font-size: clamp(32px, 4.2vw, 60px); }
  /* No desktop a foto deitada desliza para a direita: o doce sai de trás do título. */
  .cena__foto img { height: 100%; object-position: 50% 50%; translate: 13% 0; }
  .cena__foto::after {
    background: linear-gradient(to right, rgb(9, 15, 46) 0%, rgb(9, 15, 46) 16%, rgba(9, 15, 46, 0.9) 26%, rgba(9, 15, 46, 0.6) 38%, rgba(9, 15, 46, 0.25) 48%, rgba(9, 15, 46, 0) 58%);
  }
}

.virada { display: grid; gap: 0; }
.virada__texto { font-size: 18px; }
.virada__fecho {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 2px solid var(--ht-navy);
  max-width: none;
  color: var(--ht-navy);
  font-size: clamp(24px, 2.9vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .virada { grid-template-columns: 7fr 5fr; gap: var(--space-16); align-items: end; }
  .virada__texto { font-size: 20px; }
  .virada__fecho { margin-top: 0; padding-top: var(--space-8); }
}

/* 4. A prova principal */

.prova__grade { display: grid; gap: var(--space-10); }
.prova__texto .botao { margin-top: var(--space-8); }
.prova__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
}
@media (max-width: 767px) {
  .prova__texto .botao { width: 100%; }
  .prova__foto { order: -1; }
}
@media (min-width: 1024px) {
  .prova { padding-block: 0; }
  .prova__grade { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: stretch; }
  .prova__texto { padding-block: var(--secao); }
  .prova__foto {
    width: calc(100% + max(var(--margem), (100vw - 1200px) / 2));
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
}

/* 5. Como fazemos */

.frentes { display: grid; gap: var(--space-16); margin-top: var(--space-16); }
.frente { display: grid; gap: var(--space-6); }
.frente__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
}
.frente__foto--esquerda img { object-position: left center; }

.numero {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  max-width: none;
}
.numero__valor {
  display: block;
  font-size: clamp(40px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.numero__legenda { display: block; max-width: 38ch; margin-top: var(--space-2); color: var(--color-text-muted); }

@media (min-width: 1024px) {
  .frentes { gap: var(--space-24); margin-top: var(--space-24); }
  .frente { grid-template-columns: 6fr 5fr; gap: var(--space-16); align-items: center; }
  .frente--invertida { grid-template-columns: 5fr 6fr; }
  .frente--invertida .frente__foto { order: 2; }
}

/* O delivery: bloco de texto, sem foto, depois das três frentes */

.delivery { margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
@media (min-width: 1024px) {
  .delivery {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-16);
    align-items: start;
    margin-top: var(--space-24);
    padding-top: var(--space-12);
  }
  .delivery .titulo { margin-bottom: 0; }
  .delivery p { font-size: 18px; }
}

/* 6. O que você contrata */

.contrata { display: grid; gap: var(--space-8); }
.servicos li {
  padding: var(--space-4) 0 var(--space-4) 30px;
  border-bottom: 1px solid var(--color-border);
  background: url("../img/marcador.png") no-repeat left 21px / auto 14px;
  font-weight: 500;
  line-height: 1.45;
}
.servicos li:first-child { border-top: 1px solid var(--color-border); }
.contrata__chamada { margin-bottom: var(--space-4); font-size: 18px; font-weight: 600; line-height: 1.4; }
.contrata__valor { margin-top: var(--space-6); color: var(--color-text-muted); }
.garantia {
  max-width: none;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--ht-navy);
  color: #fff;
  font-size: clamp(20px, 2.1vw, 24px);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}
.garantia__principal { display: block; }
.garantia__apoio {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-text-on-navy);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .contrata { grid-template-columns: 5fr 7fr; gap: var(--space-12) var(--space-16); }
  .garantia {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-16);
    align-items: center;
    padding: var(--space-12);
  }
  .garantia__apoio { margin-top: 0; padding-left: var(--space-8); border-left: 1px solid rgba(255, 255, 255, 0.2); }
  .contrata__texto .titulo { margin-bottom: var(--space-8); }
}

/* 7. Quem somos */

.quem { display: grid; gap: var(--space-8); }
.quem__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
}
@media (min-width: 1024px) {
  .quem { grid-template-columns: 7fr 5fr; gap: var(--space-16); align-items: center; }
  .quem__foto { aspect-ratio: 4 / 5; }
}

/* 8. Como começa */

.passos { display: grid; gap: var(--space-8); counter-reset: passo; margin-top: var(--space-10); }
.passo { position: relative; padding-top: calc(var(--space-4) + 2px); counter-increment: passo; }
/* A linha do topo é um elemento próprio para poder ser desenhada na entrada. */
.dor::after, .passo::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--ht-navy);
  transform-origin: left center;
}
.passo::before {
  content: counter(passo);
  display: block;
  margin-bottom: var(--space-3);
  color: var(--ht-navy);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}
.passo p { color: var(--color-text-muted); }
@media (min-width: 768px) {
  .passos { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

/* 9. Perguntas frequentes */

.perguntas { display: grid; gap: var(--space-4); }
.pergunta { border-bottom: 1px solid var(--color-border); }
.pergunta:first-child { border-top: 1px solid var(--color-border); }
.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 64px;
  padding-block: var(--space-4);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat;
  transition: transform var(--duration-base) var(--ease-standard);
}
.pergunta[open] summary::after {
  transform: rotate(90deg);
  background: linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat;
}
.pergunta summary:hover { color: var(--ht-navy); text-decoration: underline; text-underline-offset: 0.25em; }
.pergunta p { padding-bottom: var(--space-6); color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .perguntas { grid-template-columns: 4fr 8fr; gap: var(--space-16); }
}

/* 10. Fechamento */

.fechamento__grade { display: grid; gap: var(--space-10); }
.cartao-form {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text);
  --foco: rgba(193, 50, 41, 0.45);
}
.secao--navy .cartao-form p { color: var(--color-text-muted); }
.form { display: grid; gap: var(--space-4); }
.campo__rotulo { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; line-height: 1.2; }
.campo__entrada {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.campo__entrada::placeholder { color: var(--color-text-muted); }
.campo__entrada:hover { border-color: var(--color-text-muted); }
.campo__entrada:focus-visible {
  outline: none;
  border-color: var(--ht-red);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 3px rgba(193, 50, 41, 0.25);
}
.campo__entrada[aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
.secao--navy .cartao-form .campo__erro { margin-top: 6px; color: var(--color-error); font-size: 14px; font-weight: 500; line-height: 1.4; }
.campo__erro:empty { display: none; }
.form .botao { margin-top: var(--space-2); }
.form__nota { font-size: 14px; line-height: 1.5; }
.obrigado .botao { margin-top: var(--space-6); }
.obrigado .titulo:focus-visible { outline: none; }
[hidden] { display: none !important; }

@media (min-width: 768px) {
  .cartao-form { padding: var(--space-8); }
}
@media (min-width: 1024px) {
  .fechamento__grade { grid-template-columns: 6fr 5fr; gap: var(--space-16); align-items: start; }
}

/* Rodapé */

.rodape {
  padding-block: var(--space-8);
  background: var(--ht-black);
  color: #c4c5ca;
  font-size: 14px;
  --foco: #fff;
}
.rodape__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.rodape__logo { width: auto; height: 22px; }
.rodape a { display: inline-block; padding-block: 12px; color: #fff; }

/* Barra fixa do celular */

.barra-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 15;
  padding: var(--space-3) var(--margem) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -8px 24px rgba(9, 15, 46, 0.12);
}
@media (min-width: 768px) {
  .barra-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.titulo--solto { max-width: none; }

/* ---------------------------------------------------------------------------
   Movimento. Tudo aqui depende da classe .anima no <html>, que só existe com
   JavaScript ativo e sem "reduzir movimento". Sem ela, a página fica parada
   e inteira visível.
   --------------------------------------------------------------------------- */

:root { --ease-saida: cubic-bezier(0.16, 1, 0.3, 1); }

/* Rolagem suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

/* Topo: some ao descer, volta ao subir; a linha vermelha mostra o avanço */
.topo { transition: transform 420ms var(--ease-saida); }
.topo--oculto { transform: translateY(-101%); }
.topo:focus-within { transform: none; }
.topo__progresso {
  position: absolute;
  inset: auto 0 -2px 0;
  height: 2px;
  background: var(--ht-red);
  transform: scaleX(var(--progresso, 0));
  transform-origin: left center;
}
html:not(.anima) .topo__progresso { display: none; }

/* Títulos: cada palavra sobe de trás de uma máscara */
.pal {
  display: inline-block;
  overflow: hidden;
  overflow: clip;
  vertical-align: bottom;
  padding-block: 0.1em 0.16em;
  margin-block: -0.1em -0.16em;
}
.pal__in { display: inline-block; }
.anima .pal__in {
  transform: translateY(118%);
  transition: transform 900ms var(--ease-saida) calc(var(--base, 0ms) + var(--w, 0) * 38ms);
}
.anima .visivel .pal__in { transform: none; }

/* Blocos de texto e itens de lista: sobem e aparecem, em sequência curta */
/* A transição mora só no estado visível: assim o bloco some na hora ao ser
   preparado e não "apaga devagar" antes de entrar. */
.anima [data-anima="sobe"] { opacity: 0; transform: translateY(18px); }
.anima [data-anima="sobe"].visivel {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms ease-out calc(var(--base, 0ms) + var(--ordem, 0) * 70ms),
    transform 900ms var(--ease-saida) calc(var(--base, 0ms) + var(--ordem, 0) * 70ms);
}

.abertura { --base: 150ms; }
.abertura [data-anima="sobe"] { --base: 600ms; }
.abertura .abertura__numero[data-anima="sobe"] { --base: 950ms; }

/* Fotos: a moldura se abre de baixo para cima e a foto assenta por dentro */
/* O recorte fica na foto, não na moldura: uma moldura recortada a zero
   deixaria de contar como visível e a entrada nunca dispararia. */
.anima .moldura img {
  clip-path: inset(100% 0 0 0);
  scale: 1.32;
  translate: 0 var(--py, 0%);
  transition: clip-path 1200ms var(--ease-saida), scale 1700ms var(--ease-saida);
}
.anima .moldura.visivel img { clip-path: inset(0); scale: 1.12; }

/* Abertura: a foto se abre a partir da borda, já na primeira pintura */
@keyframes abre-foto-lado { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes abre-foto-cima { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.anima .abertura__moldura { animation: abre-foto-cima 1400ms var(--ease-saida) 80ms both; }
@media (min-width: 768px) {
  .anima .abertura__moldura { animation-name: abre-foto-lado; animation-duration: 1700ms; }
}

.abertura__palco { overflow: hidden; }
.anima .abertura__foto {
  scale: 1.2;
  translate: 0 var(--py, 0%);
  transition: scale 2200ms var(--ease-saida);
}
.anima .abertura.visivel .abertura__foto { scale: 1.04; }

/* Blocos numerados: a linha do topo se desenha da esquerda para a direita */
.anima :is(.dor, .passo)::after { transition: transform 1100ms var(--ease-saida) calc(var(--ordem, 0) * 70ms + 120ms); }
.anima [data-anima="sobe"]:is(.dor, .passo):not(.visivel)::after { transform: scaleX(0); }

/* Cena da virada: o palco fica preso enquanto a seção rola. animacoes.js escreve
   --abre (0 a 1) e liga as classes dos preços e do quadro final conforme o avanço. */
.anima .cena { height: 280vh; }
.anima .cena__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding-block: calc(var(--topo) + var(--space-6)) var(--space-8);
}
.anima .cena__precos {
  position: absolute;
  z-index: 1;
  left: var(--margem);
  bottom: var(--space-8);
  display: grid;
  gap: 0.04em;
  /* Limitado também pela altura: cabe em celular baixo sem encostar no título. */
  font-size: clamp(30px, min(13.5vw, 7.4svh), 96px);
}
.anima .cena__preco {
  position: relative;
  width: max-content;
  overflow: hidden;
  overflow: clip;
  /* Cada preço entra menor que o anterior: a margem encolhendo. */
  font-size: calc(1em - var(--k) * 0.085em);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  transition: color 500ms ease-out;
}
.cena__preco:nth-child(1) { --k: 0; }
.cena__preco:nth-child(2) { --k: 1; }
.cena__preco:nth-child(3) { --k: 2; }
.cena__preco:nth-child(4) { --k: 3; }
.cena__preco:nth-child(5) { --k: 4; }
.anima .cena__preco span { display: block; transform: translateY(112%); transition: transform 800ms var(--ease-saida); }
.anima .cena__preco small { margin-left: 0.3em; font-size: 0.26em; font-weight: 500; letter-spacing: 0; color: var(--color-text-on-navy); }
.anima .cena__preco::after {
  content: "";
  position: absolute;
  inset: 50% -0.06em auto -0.06em;
  height: 0.075em;
  background: var(--ht-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease-saida);
}
.anima .cena__preco--no-ar span { transform: none; }
.anima .cena__preco--cortado { color: rgba(255, 255, 255, 0.34); }
.anima .cena__preco--cortado::after { transform: scaleX(1); }

.anima .cena__foto {
  z-index: 2;
  --cx: 50%;
  --cy: 66%;
  clip-path: circle(calc(var(--abre, 0) * 150vmax) at var(--cx) var(--cy));
  will-change: clip-path;
}
/* Termina em escala 1: a foto parada fica na resolução original, sem ampliar. */
.anima .cena__foto img { scale: calc(1.24 - var(--abre, 0) * 0.24); }
/* A segunda metade do título só sobe quando a foto já tomou a tela. */
.anima .cena .forte { --base: -300ms; }
.anima .cena:not(.cena--final) .forte .pal__in { transform: translateY(118%); }

@media (min-width: 1024px) {
  .anima .cena { height: 300vh; }
  .anima .cena__palco { padding-top: calc(var(--topo) + var(--space-12)); }
  .anima .cena__precos {
    left: auto;
    right: max(var(--margem), calc((100vw - 1200px) / 2));
    bottom: auto;
    top: 50%;
    translate: 0 -46%;
    justify-items: end;
    font-size: clamp(56px, min(7.8vw, 13svh), 118px);
  }
  .anima .cena__preco::after { transform-origin: right center; }
  .anima .cena__foto { --cx: 65%; --cy: 60%; }
}

/* Perguntas: a resposta abre com altura animada onde o navegador permite */
@supports (interpolate-size: allow-keywords) {
  .anima .pergunta { interpolate-size: allow-keywords; }
  .anima .pergunta::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 420ms var(--ease-saida), content-visibility 420ms allow-discrete;
  }
  .anima .pergunta[open]::details-content { block-size: auto; }
}