/* ============================================================================
   Corra com Estratégia · página de vendas dos planos de prova da Mons 2026
   DNA das calculadoras D+ (docs/design/redesign-2026-11-04 do projeto dmais):
   preto com brilho âmbar e laranja, Inter fina, vidro com raio de 2rem.

   Cores com função fixa:
     âmbar  #fbbf24  ação, número principal, foco
     brasa  #f97316  subida
     céu    #7dd3fc  descida
     rosa   #fb7185  sobrelinha de seção
     sinal  #f43f5e  o "+" do logotipo e o traço da sobrelinha
   Mono (IBM Plex Mono) só para dado de percurso: eixo, cortes, rótulos.
   Só transform, opacity e clip-path animam.
   ========================================================================= */

:root {
  --fundo: #000000;
  --placa: #0b0b0d;
  --tinta: #ffffff;
  --tinta-2: #cbd5e1;
  --tinta-3: #94a3b8;
  --ambar: #fbbf24;
  --brasa: #f97316;
  --ceu: #7dd3fc;
  --rosa: #fb7185;
  --sinal: #f43f5e;
  --vidro: 255 255 255;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --mola: cubic-bezier(0.16, 1, 0.3, 1);

  /* escala de espaço (4 px de base) */
  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.5rem;
  --e6: 2rem; --e7: 3rem; --e8: 4rem; --e9: 6rem; --e10: 8rem;

  --largura: 72rem;
  --raio: 2rem;
  --raio-placa: 1.25rem;
}

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

html {
  background: var(--fundo);
  color: var(--tinta);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  background: var(--fundo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--ambar); color: #000; }
.num { font-variant-numeric: tabular-nums; }
.cor-brasa { color: var(--brasa); }

.pular {
  position: absolute;
  left: var(--e4);
  top: -4rem;
  z-index: 60;
  padding: var(--e3) var(--e4);
  border-radius: 999px;
  background: var(--ambar);
  color: #000;
  font-weight: 500;
  text-decoration: none;
}
.pular:focus { top: var(--e4); }

.moldura {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--e5);
}
.moldura-estreita { max-width: 52rem; }

/* ------------------------------------------------------------------ fundo */

.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.fundo::before,
.fundo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.fundo::before {
  left: -20%;
  top: -18%;
  width: 70%;
  height: 55%;
  background: rgba(225, 29, 72, 0.1);
  filter: blur(120px);
  animation: deriva 26s ease-in-out infinite alternate;
}
.fundo::after {
  right: -20%;
  top: 12%;
  width: 65%;
  height: 50%;
  background: rgba(217, 119, 6, 0.12);
  filter: blur(140px);
  animation: deriva 32s ease-in-out infinite alternate-reverse;
}
@keyframes deriva { to { transform: translate3d(8%, 6%, 0) scale(1.1); } }

/* -------------------------------------------------------------- tipografia */

.brilho {
  color: var(--ambar);
  text-shadow: 0 0 2.5rem rgba(251, 191, 36, 0.25);
  animation: brilho 6s ease-in-out infinite;
}
@keyframes brilho { 50% { text-shadow: 0 0 3.5rem rgba(251, 146, 60, 0.5); } }

.rotulo {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.sobrelinha {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rosa);
}
.sobrelinha::before {
  content: "";
  flex: 0 0 auto;
  width: 2.25rem;
  height: 1px;
  background: var(--sinal);
}

.lead { font-size: 1.0625rem; color: var(--tinta-2); max-width: 40rem; }
.miudo { font-size: 0.8125rem; color: var(--tinta-3); }

/* -------------------------------------------------------------- superfícies */

.cartao {
  position: relative;
  min-width: 0;
  border-radius: var(--raio);
  border: 1px solid rgb(var(--vidro) / 0.1);
  background: rgb(var(--vidro) / 0.035);
  box-shadow: inset 0 1px 0 rgb(var(--vidro) / 0.06);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.borda-viva {
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--placa), var(--placa)) padding-box,
    linear-gradient(145deg, rgba(251, 191, 36, 0.55) 0%, rgb(var(--vidro) / 0.08) 42%, rgba(244, 63, 94, 0.3) 100%) border-box;
}
.borda-viva::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: #f59e0b;
  filter: blur(90px);
  opacity: 0.16;
  pointer-events: none;
  animation: pulsa-brasa 5s ease-in-out infinite;
}
.borda-viva > * { position: relative; }
@keyframes pulsa-brasa { 50% { opacity: 0.26; transform: scale(1.15); } }

/* --------------------------------------------------------------- botões */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0 var(--e6);
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: #000;
  text-decoration: none;
  text-align: center;
  background: linear-gradient(90deg, #f97316, #fbbf24, #fdba74);
  border: 1px solid rgba(253, 186, 116, 0.45);
  box-shadow: 0 0 2.5rem rgba(251, 146, 60, 0.35);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.5s var(--mola), box-shadow 0.5s var(--mola);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.45), transparent 35%);
  pointer-events: none;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-120%);
  animation: reflexo 4.5s var(--mola) 1.5s infinite;
  pointer-events: none;
}
@keyframes reflexo {
  0% { transform: translateX(-120%); }
  30%, 100% { transform: translateX(120%); }
}
@media (hover: hover) {
  .btn:hover { transform: scale(1.025); box-shadow: 0 0 3.5rem rgba(251, 146, 60, 0.55); }
}
.btn:active { transform: scale(0.96); transition-duration: 0.08s; }

.btn-sec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--e4);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--tinta);
  background: rgb(var(--vidro) / 0.05);
  border: 1px solid rgb(var(--vidro) / 0.18);
  transition: transform 0.3s var(--mola), border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
@media (hover: hover) {
  .btn-sec:hover {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(245, 158, 11, 0.1);
    box-shadow: 0 0 2rem rgba(251, 191, 36, 0.22);
  }
}

/* ------------------------------------------------------------ cabeçalho */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgb(var(--vidro) / 0.06);
}
.cabecalho-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 4rem;
}
.marca {
  display: inline-flex;
  align-items: baseline;
  min-height: 2.75rem;
  align-content: center;
  padding-top: 0.55rem;
  text-decoration: none;
  white-space: nowrap;
}
.marca-logo { width: 2rem; height: 2rem; border-radius: 0.6rem; background: #fdf6e7; padding: 0.15rem; margin-right: 0.6rem; display: inline-block; vertical-align: middle; }
.marca-d { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.04em; }
.marca-mais { font-size: 1rem; font-weight: 600; color: var(--sinal); transform: translateY(-0.45rem); display: inline-block; margin-right: 0.6rem; }
.marca-nome { font-size: 0.9375rem; font-weight: 400; color: #e2e8f0; letter-spacing: -0.01em; }

/* ---------------------------------------------------------- primeira dobra */

.dobra { padding: var(--e7) 0 var(--e8); }
.dobra-grade { display: grid; gap: var(--e6); }
.dobra-texto { display: grid; gap: var(--e5); }
.titulo {
  font-size: clamp(2.25rem, 9.6vw, 4.75rem);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.titulo .brilho { font-weight: 300; }
.titulo-pergunta {
  display: block;
  margin-top: var(--e4);
  font-size: 0.52em;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--tinta-2);
}
.dobra-acao { display: grid; gap: var(--e4); justify-items: start; }
.subtitulo { font-size: 1.0625rem; color: var(--tinta-2); max-width: 34rem; }
.dobra-acao .btn { width: 100%; }

/* --------------------------------------------------------- perfil da 55K */

.perfil {
  margin-top: var(--e7);
  padding: var(--e5) var(--e4) var(--e4);
  overflow: hidden;
}
.perfil-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e4);
  padding: 0 var(--e2);
}
.perfil-legenda { display: inline-flex; gap: var(--e4); }
.leg {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--tinta-2);
}
.leg::before { content: ""; width: 1rem; height: 2px; border-radius: 2px; }
.leg-sobe::before { background: var(--brasa); }
.leg-desce::before { background: var(--ceu); }

.perfil-palco {
  position: relative;
  margin-top: var(--e7);
  height: 12.5rem;
}
.perfil-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.js .perfil-svg { clip-path: inset(0 100% 0 0); }
.js [data-perfil][data-visto] .perfil-svg {
  clip-path: inset(0 0 0 0);
  transition: clip-path 2.4s cubic-bezier(0.45, 0, 0.2, 1) 0.5s;
}
/* A frente do desenho: uma linha de luz que corre junto com o traço. */
.perfil-cursor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-100%);
  opacity: 0;
}
.perfil-cursor::after {
  content: "";
  position: absolute;
  right: 0;
  top: -8%;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(251, 191, 36, 0.9), transparent);
  box-shadow: 0 0 1.25rem 0.25rem rgba(251, 191, 36, 0.35);
}
.js [data-perfil][data-visto] .perfil-cursor { animation: cursor 2.4s cubic-bezier(0.45, 0, 0.2, 1) 0.5s both; }
@keyframes cursor {
  0% { transform: translateX(-100%); opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* Marcas dos cortes: linha do topo até o ponto, rótulo em cima. */
.corte, .cume {
  position: absolute;
  left: var(--x);
  top: 0;
  bottom: 0;
  width: 0;
}
.corte-linha {
  position: absolute;
  left: 0;
  top: -1.9rem;
  bottom: calc(100% - var(--y));
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(251, 191, 36, 0.8) 0 4px, transparent 4px 8px);
  transform-origin: top;
}
.corte-ponto {
  position: absolute;
  left: 0;
  top: var(--y);
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem 0 0 -0.375rem;
  border-radius: 50%;
  background: var(--fundo);
  border: 2px solid var(--ambar);
  box-shadow: 0 0 0.9rem rgba(251, 191, 36, 0.8);
}
.corte-rotulo {
  position: absolute;
  left: 0;
  top: -3.1rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.25;
  color: var(--tinta-2);
}
.corte-rotulo b { font-weight: 500; color: var(--ambar); }
.cume span {
  position: absolute;
  left: 0;
  top: calc(var(--y) - 1.4rem);
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--tinta-3);
  white-space: nowrap;
}
.js .corte, .js .cume { opacity: 0; transform: translateY(0.5rem); }
.js [data-perfil][data-visto] .corte,
.js [data-perfil][data-visto] .cume {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--mola), transform 0.5s var(--mola);
  transition-delay: var(--d, 2400ms);
}
.js .corte-linha { transform: scaleY(0); }
.js [data-perfil][data-visto] .corte-linha {
  transform: scaleY(1);
  transition: transform 0.6s var(--mola);
  transition-delay: var(--d, 0ms);
}

.perfil-eixo {
  position: relative;
  height: 1.75rem;
  margin-top: var(--e3);
  padding-top: var(--e2);
  border-top: 1px solid rgb(var(--vidro) / 0.1);
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--tinta-3);
}
.perfil-eixo span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.perfil-eixo span:first-child { transform: none; }
.perfil-eixo span:last-child { left: auto; right: 0; transform: none; }
/* No celular o eixo mostra só de 20 em 20 km. */
.perfil-eixo .so-largo { display: none; }

.perfil-dados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4) var(--e4);
  margin-top: var(--e5);
  padding: var(--e4) var(--e2) var(--e2);
  border-top: 1px solid rgb(var(--vidro) / 0.08);
}
.perfil-dados dt { font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-3); }
.perfil-dados dd { font-size: 1.75rem; font-weight: 200; letter-spacing: -0.03em; line-height: 1.1; }

/* ---------------------------------------------------------------- seções */

.secao { padding: var(--e9) 0 0; }
.secao > .moldura > h2.sobrelinha { margin-bottom: var(--e6); }
.titulo-secao {
  font-size: clamp(2rem, 8vw, 3.75rem);
  font-weight: 200;
  letter-spacing: -0.04em;
  margin-bottom: var(--e4);
}

/* O que tem no plano: uma lista só, com divisórias, sem cartão por item. */
.itens { padding: var(--e2) var(--e5); }
.itens li {
  display: grid;
  gap: var(--e1);
  align-content: start;
  padding: var(--e5) 0 var(--e5) var(--e5);
  border-bottom: 1px solid rgb(var(--vidro) / 0.08);
  position: relative;
}
.itens li:last-child { border-bottom: 0; }
.itens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--e5) + 0.55rem);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0.75rem rgba(251, 191, 36, 0.7);
}
.itens h3 { font-size: 1.25rem; font-weight: 400; letter-spacing: -0.02em; }
.itens p { color: var(--tinta-2); }
.metodo { margin-top: var(--e5); font-size: 0.9375rem; color: var(--tinta-3); }

/* Prévia: páginas reais do PDF. Trilho com rolagem própria no celular. */
.previa { margin-top: var(--e8); }
.previa-trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  align-items: start;
  gap: var(--e4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(var(--e5) * -1);
  padding: var(--e5) var(--e5) var(--e6);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.previa-trilho::-webkit-scrollbar { display: none; }
.pagina {
  scroll-snap-align: center;
  position: relative;
  border-radius: var(--raio-placa);
  overflow: hidden;
  border: 1px solid rgb(var(--vidro) / 0.14);
  background: var(--placa);
  box-shadow: 0 30px 60px -30px rgba(251, 146, 60, 0.35), 0 0 0 6px rgb(var(--vidro) / 0.03);
  max-height: 22rem;
}
.pagina::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--placa));
  pointer-events: none;
}
.pagina img { width: 100%; }
.previa-legenda {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--tinta-2);
}
.ponto-vivo {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #f59e0b;
  flex: 0 0 auto;
}
.ponto-vivo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ambar);
  animation: ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* ------------------------------------------------------------ distâncias */

.distancias {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e6);
}
.dist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nome preco"
    "dado dado"
    "frase frase";
  align-items: center;
  gap: var(--e2) var(--e4);
  padding: var(--e5);
  text-decoration: none;
  transition: transform 0.6s var(--mola), border-color 0.6s var(--mola), background-color 0.6s var(--mola), box-shadow 0.6s var(--mola);
}
.dist-nome { grid-area: nome; font-size: 2rem; font-weight: 200; letter-spacing: -0.04em; line-height: 1; }
.dist-dado { grid-area: dado; color: var(--tinta-2); font-size: 0.9375rem; }
.dist-dado b { font-weight: 500; color: var(--tinta); }
.dist-frase { grid-area: frase; font-size: 0.9375rem; color: var(--tinta-3); }
.dist-preco {
  grid-area: preco;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 2.75rem;
  padding: 0 var(--e4);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ambar);
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(245, 158, 11, 0.06);
  transition: background-color 0.4s var(--mola), color 0.4s var(--mola), box-shadow 0.4s var(--mola);
}
.dist-preco.btn {
  min-height: 2.75rem;
  padding: 0 var(--e4);
  font-size: 0.875rem;
  color: #000;
  background: linear-gradient(90deg, #f97316, #fbbf24, #fdba74);
  border-color: rgba(253, 186, 116, 0.45);
}
.seta {
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.4s var(--mola);
}
@media (hover: hover) {
  .dist:hover {
    transform: translateY(-6px);
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 30px 60px -30px rgba(251, 191, 36, 0.3);
  }
  .dist:hover .dist-preco:not(.btn) { background: var(--ambar); color: #000; box-shadow: 0 0 2rem rgba(251, 191, 36, 0.4); }
  .dist:hover .seta { transform: translateX(3px); }
}
.dist:active { transform: scale(0.985); }
.dist-destaque .dist-nome { color: var(--ambar); text-shadow: 0 0 2rem rgba(251, 191, 36, 0.3); }
.dist-destaque .dist-frase { color: var(--tinta-2); }

/* Apoio da 55K: 2025 contra 2026 em barras. */
.apoio {
  display: grid;
  gap: var(--e5);
  margin-top: var(--e6);
  padding: var(--e5) 0 0;
  border-top: 1px solid rgb(var(--vidro) / 0.08);
}
.apoio p { color: var(--tinta-2); font-size: 0.9375rem; max-width: 44rem; }
.apoio-barras { display: grid; gap: var(--e3); }
.barra-linha {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: var(--e3);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--tinta-3);
}
.barra-valor { text-align: right; color: var(--tinta-2); }
.barra-trilho { height: 0.5rem; border-radius: 999px; background: rgb(var(--vidro) / 0.06); overflow: hidden; }
.barra {
  display: block;
  height: 100%;
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(var(--v));
}
.barra-velha { background: rgb(var(--vidro) / 0.3); }
.barra-nova { background: linear-gradient(90deg, #f97316, #fbbf24); box-shadow: 0 0 1rem rgba(249, 115, 22, 0.5); }
.js .apoio:not([data-visto]) .barra { transform: scaleX(0); }
.apoio .barra { transition: transform 1.2s var(--mola) 0.2s; }
.apoio .barra-nova { transition-delay: 0.45s; }

/* -------------------------------------------------------------- para quem */

.quem { display: grid; }
.quem li {
  padding: var(--e5) 0;
  border-bottom: 1px solid rgb(var(--vidro) / 0.08);
  font-size: clamp(1.25rem, 4.6vw, 1.75rem);
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.quem li:first-child { padding-top: 0; }
.nao-e {
  margin-top: var(--e6);
  padding-left: var(--e4);
  border-left: 2px solid var(--rosa);
  color: var(--tinta-2);
}

/* ------------------------------------------------------------------ faq */

.faq { border-top: 1px solid rgb(var(--vidro) / 0.08); }
.faq details { border-bottom: 1px solid rgb(var(--vidro) / 0.08); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 3.5rem;
  padding: var(--e4) 0;
  font-size: 1.0625rem;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq p { padding: 0 var(--e7) var(--e5) 0; color: var(--tinta-2); }
.mais-faq {
  position: relative;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgb(var(--vidro) / 0.16);
  transition: transform 0.4s var(--mola), border-color 0.3s;
}
.mais-faq::before, .mais-faq::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 1px;
  margin-left: -0.375rem;
  background: var(--ambar);
}
.mais-faq::after { transform: rotate(90deg); }
.faq details[open] .mais-faq { transform: rotate(45deg); border-color: rgba(251, 191, 36, 0.5); }
.faq details[open] > p { animation: surgir 500ms var(--mola) both; }

/* -------------------------------------------------------------- garantia */

.garantia {
  display: grid;
  gap: var(--e5);
  align-items: center;
  padding: var(--e6) var(--e5);
}
.garantia p { color: var(--tinta-2); margin-top: var(--e2); }
.garantia-titulo { font-size: 1.5rem; font-weight: 300; }
.garantia-selo {
  position: relative;
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
}
.garantia-anel { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.garantia-anel circle {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}
.js .garantia:not([data-visto]) .garantia-anel circle { stroke-dashoffset: 1; }
.garantia .garantia-anel circle { transition: stroke-dashoffset 1.4s var(--mola) 0.2s; }
.garantia-num { font-size: 3rem; font-weight: 200; line-height: 1; color: var(--ambar); margin-top: -0.6rem; }
.garantia-dias {
  position: absolute;
  bottom: 1.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* ------------------------------------------------------------- CTA final */

.final { padding-bottom: var(--e9); text-align: left; }
.final .moldura { display: grid; gap: var(--e5); justify-items: start; }
.titulo-final { font-size: clamp(2.25rem, 9vw, 4.25rem); font-weight: 200; letter-spacing: -0.045em; line-height: 1.04; }
.titulo-final .brilho { display: block; }
.final .btn { width: 100%; }

/* --------------------------------------------------------------- rodapé */

.rodape { border-top: 1px solid rgb(var(--vidro) / 0.08); padding: var(--e6) 0 calc(var(--e10) + env(safe-area-inset-bottom)); }
.rodape-linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--e3);
  font-size: 0.875rem;
  color: var(--tinta-3);
}
.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--tinta-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.rodape a:hover { color: var(--ambar); border-color: currentColor; }

/* ------------------------------------------------------- pílula do celular */

.pilula-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: var(--e3) var(--e5) calc(var(--e3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 55%, transparent);
  transition: transform 0.45s var(--mola), opacity 0.3s;
}
.pilula-fixa .btn { width: 100%; }
.pilula-fixa[data-mostrar="false"] { transform: translateY(120%); opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ movimento */

.surgir { animation: surgir 950ms var(--mola) both; animation-delay: var(--d, 0ms); }
@keyframes surgir {
  from { opacity: 0; filter: blur(0.5rem); transform: translateY(1.5rem); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
/* Revelar ao rolar. Só esconde quando há JavaScript para mostrar depois. */
.js [data-revelar]:not([data-visto]) { opacity: 0; transform: translateY(1.75rem); }
[data-revelar] {
  transition: opacity 0.9s var(--mola), transform 0.9s var(--mola);
  transition-delay: var(--d, 0ms);
}

/* ------------------------------------------------------------ desktop */

@media (min-width: 48rem) {
  .moldura { padding: 0 var(--e6); }
  .dobra { padding: var(--e8) 0 var(--e8); }
  .dobra-grade { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: var(--e7); }
  .dobra-acao .btn { width: auto; }
  .perfil { padding: var(--e6) var(--e6) var(--e5); }
  .perfil-palco { height: 16rem; margin-top: var(--e7); }
  .perfil-eixo .so-largo { display: inline; }
  .perfil-dados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .perfil-dados dd { font-size: 2.25rem; }

  .itens { padding: var(--e3) var(--e6); }
  .itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e7); }
  .itens li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid rgb(var(--vidro) / 0.08); }
  .itens li:nth-child(4) { border-bottom: 0; }

  .previa-trilho {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    margin: 0;
    padding: var(--e6) 0 var(--e6);
    gap: var(--e5);
  }
  .pagina { max-height: 30rem; transform: rotate(var(--g)); transition: transform 0.7s var(--mola); }
  .pagina:nth-child(2) { transform: rotate(var(--g)) translateY(2rem); }

  .distancias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
  .dist {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "nome" "dado" "frase" "preco";
    align-items: start;
    gap: var(--e3);
    padding: var(--e6);
  }
  .dist-nome { font-size: 2.75rem; margin-bottom: var(--e2); }
  .dist-preco { justify-self: start; margin-top: var(--e4); }

  .apoio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: var(--e7); }

  .garantia { grid-template-columns: auto minmax(0, 1fr); padding: var(--e6) var(--e7); gap: var(--e6); }
  .final .btn { width: auto; }
  .pilula-fixa { display: none; }
  .rodape { padding-bottom: var(--e6); }
}

@media (min-width: 48rem) and (hover: hover) {
  .previa-trilho:hover .pagina { transform: rotate(0deg); }
  .previa-trilho:hover .pagina:nth-child(2) { transform: translateY(2rem); }
}

@media (min-width: 64rem) {
  .titulo { font-size: 5.25rem; }
  .perfil-palco { height: 18rem; }
}

/* ------------------------------------------------- movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto; }
  .btn::after, .perfil-cursor { display: none; }
  .js [data-revelar]:not([data-visto]) { opacity: 1; transform: none; }
  .js .perfil-svg { clip-path: none; }
  .js .corte, .js .cume { opacity: 1; transform: none; }
  .js .corte-linha { transform: none; }
  .js .apoio:not([data-visto]) .barra { transform: scaleX(var(--v)); }
  .js .garantia:not([data-visto]) .garantia-anel circle { stroke-dashoffset: 0; }
}

/* Cartão da distância que veio no link do e-mail: rola sem ficar sob o cabeçalho. */
#minha-distancia { scroll-margin-top: 6rem; }