@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfairdisplay-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-variable-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  --cor-fundo: #1A1410;
  --cor-destaque: #6B1B2E;
  --cor-acento: #C9A24B;
  --cor-texto: #F2E9DC;
  --cor-suporte: #2E2119;

  --cor-fundo-profundo: #120E0B;
  --cor-texto-suave: rgba(242, 233, 220, 0.74);
  --cor-texto-tenue: rgba(242, 233, 220, 0.55);
  --cor-borda: rgba(201, 162, 75, 0.24);
  --cor-borda-forte: rgba(201, 162, 75, 0.48);
  --cor-veu: rgba(18, 14, 11, 0.86);
  --cor-destaque-claro: #8C2540;

  --fonte-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --fonte-titulo: 'Cinzel', 'Playfair Display', Georgia, serif;
  --fonte-corpo: 'Lora', Georgia, 'Times New Roman', serif;

  --texto-xs: clamp(0.78rem, 0.73rem + 0.22vw, 0.86rem);
  --texto-sm: clamp(0.9rem, 0.84rem + 0.27vw, 1.02rem);
  --texto-base: clamp(1.08rem, 1.02rem + 0.32vw, 1.21rem);
  --texto-md: clamp(1.19rem, 1.08rem + 0.54vw, 1.4rem);
  --texto-lg: clamp(1.4rem, 1.21rem + 0.92vw, 1.89rem);
  --texto-xl: clamp(1.73rem, 1.38rem + 1.62vw, 2.59rem);
  --texto-2xl: clamp(2.16rem, 1.62rem + 2.59vw, 3.67rem);

  --espaco-xs: clamp(0.4rem, 0.3rem + 0.5vw, 0.65rem);
  --espaco-sm: clamp(0.7rem, 0.55rem + 0.7vw, 1rem);
  --espaco-md: clamp(1.1rem, 0.85rem + 1.2vw, 1.7rem);
  --espaco-lg: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
  --espaco-xl: clamp(2.8rem, 2rem + 3.6vw, 5rem);

  --largura-conteudo: 68rem;
  --largura-texto: 40rem;
  --raio: 14px;
  --raio-sm: 10px;

  --sombra-suave: 0 10px 34px rgba(0, 0, 0, 0.42);
  --sombra-forte: 0 18px 60px rgba(0, 0, 0, 0.6);
  --brilho-acento: 0 0 28px rgba(201, 162, 75, 0.3);

  --curva-entrada: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-movimento: cubic-bezier(0.25, 1, 0.5, 1);

  --z-conteudo: 1;
  --z-cabecalho: 10;
  --z-flutuante: 20;
  --z-veu: 40;
  --z-modal: 50;
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-anchor: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -10%, rgba(107, 27, 46, 0.36), transparent 58%),
    radial-gradient(circle at 12% 22%, rgba(201, 162, 75, 0.09), transparent 42%),
    radial-gradient(circle at 88% 68%, rgba(107, 27, 46, 0.18), transparent 46%),
    linear-gradient(180deg, var(--cor-fundo) 0%, var(--cor-fundo-profundo) 100%);
}

body::after {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 8%, rgba(242, 233, 220, 0.7), transparent 100%),
    radial-gradient(1px 1px at 32% 22%, rgba(201, 162, 75, 0.75), transparent 100%),
    radial-gradient(1.6px 1.6px at 68% 14%, rgba(242, 233, 220, 0.55), transparent 100%),
    radial-gradient(1px 1px at 84% 34%, rgba(242, 233, 220, 0.6), transparent 100%),
    radial-gradient(1.2px 1.2px at 22% 46%, rgba(201, 162, 75, 0.6), transparent 100%),
    radial-gradient(1px 1px at 54% 58%, rgba(242, 233, 220, 0.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 72%, rgba(201, 162, 75, 0.55), transparent 100%),
    radial-gradient(1px 1px at 8% 84%, rgba(242, 233, 220, 0.5), transparent 100%),
    radial-gradient(1.3px 1.3px at 44% 92%, rgba(242, 233, 220, 0.45), transparent 100%);
  background-size: 100% 50%;
  background-repeat: repeat-y;
  animation: deriva-estrelas 150s linear infinite;
}

main,
header,
footer {
  position: relative;
  z-index: var(--z-conteudo);
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--cor-acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--cor-destaque);
  color: var(--cor-texto);
}

.secao {
  padding-block: var(--espaco-xl);
  padding-inline: var(--espaco-md);
}

.secao--compacta {
  padding-block: var(--espaco-lg);
}

.envoltorio {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
}

.envoltorio--estreito {
  max-width: var(--largura-texto);
}

.centralizado {
  text-align: center;
}

.sobrelinha {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin-bottom: var(--espaco-sm);
}

.titulo-secao {
  font-size: var(--texto-xl);
  margin-bottom: var(--espaco-sm);
}

.subtitulo-secao {
  font-size: var(--texto-md);
  color: var(--cor-texto-suave);
  max-width: 34rem;
  margin-inline: auto;
}

.selo {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cor-acento);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 0.5em 1.3em;
  background: rgba(46, 33, 25, 0.5);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 56px;
  padding: 0.95em 1.9em;
  border-radius: 999px;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-base);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  color: var(--cor-texto);
  background: linear-gradient(145deg, var(--cor-destaque-claro), var(--cor-destaque));
  border: 1px solid var(--cor-borda-forte);
  box-shadow: 0 12px 30px rgba(107, 27, 46, 0.42), inset 0 1px 0 rgba(242, 233, 220, 0.16);
  transition: background-color 200ms ease, box-shadow 220ms var(--curva-entrada), transform 160ms var(--curva-entrada);
  cursor: pointer;
}

.botao:hover {
  box-shadow: 0 16px 40px rgba(107, 27, 46, 0.55), var(--brilho-acento), inset 0 1px 0 rgba(242, 233, 220, 0.22);
}

.botao:active {
  transform: translateY(1px);
}

.botao[disabled],
.botao[aria-disabled='true'] {
  opacity: 0.62;
  cursor: progress;
  box-shadow: none;
}

.botao--largo {
  width: 100%;
  max-width: 26rem;
}

.botao--fantasma {
  background: transparent;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  box-shadow: none;
  min-height: 48px;
  font-size: var(--texto-sm);
  letter-spacing: 0.04em;
}

.botao--fantasma:hover {
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
  box-shadow: none;
}

.nota-botao {
  margin-top: var(--espaco-sm);
  font-size: var(--texto-sm);
  color: var(--cor-texto-tenue);
}

/* Barra de progresso, usada na revelacao do signo na landing e no teatro
   da pagina de resultado. Fica aqui, e nao em cada folha, porque as duas
   telas carregam base.css e o desenho precisa ser o mesmo nas duas. */
.barra-progresso {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(242, 233, 220, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.barra-progresso__preenchimento {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cor-destaque-claro), var(--cor-acento));
  box-shadow: 0 0 12px rgba(201, 162, 75, 0.45);
  transition: width 320ms var(--curva-movimento);
}

/* O brilho que corre por dentro da barra existe so enquanto ela nao chegou
   ao fim. Parado em 100 por cento ele viraria enfeite piscando sem motivo. */
.barra-progresso__preenchimento::after {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(242, 233, 220, 0.5), transparent);
  animation: correr-brilho 1.6s ease-in-out infinite;
}

.barra-progresso[data-completa='true'] .barra-progresso__preenchimento::after {
  animation: none;
  opacity: 0;
}

/* Presenca da Belize. E um sinal de que tem alguem trabalhando naquilo
   agora, nao promessa de atendimento: por isso fala do que ela esta fazendo
   e nunca diz que ela esta disponivel para conversar. */
.presenca {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.presenca__ponto {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-acento);
  box-shadow: 0 0 8px rgba(201, 162, 75, 0.7);
}

.presenca__ponto::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--cor-acento);
  animation: pulso-presenca 2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .barra-progresso__preenchimento::after,
  .presenca__ponto::after {
    animation: none;
  }
}

.painel {
  background: linear-gradient(160deg, rgba(46, 33, 25, 0.82), rgba(18, 14, 11, 0.9));
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-suave);
}

.divisor {
  width: min(18rem, 60%);
  height: 1px;
  margin: var(--espaco-lg) auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--cor-borda-forte), transparent);
}

.fase-landing[data-recolhida='true'] {
  display: none;
}

.fase-funil {
  display: none;
}

.fase-funil[data-ativa='true'] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68dvh;
  padding: var(--espaco-lg) var(--espaco-md);
}

.cartao-funil {
  width: 100%;
  max-width: 38rem;
  padding: clamp(1.4rem, 1rem + 2vw, 2.6rem);

  /* Sem contorno de nenhum tipo, por decisao de projeto. Ja teve
     `border: 1px solid` e depois um filete em gradiente num ::before, e os
     dois foram removidos: qualquer linha fechando o cartao lia como moldura
     seca contra o fundo da pagina. O que separa o cartao agora e so o
     preenchimento translucido e a sombra larga, que nao tem aresta. */
  background:
    radial-gradient(circle at 50% 0%, rgba(107, 27, 46, 0.26), transparent 62%),
    linear-gradient(165deg, rgba(46, 33, 25, 0.62), rgba(18, 14, 11, 0.78));
  border-radius: var(--raio);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 90px rgba(107, 27, 46, 0.13);
}

.etapa-funil[data-liberada='true'] + .etapa-funil[data-liberada='true'] {
  margin-top: var(--espaco-lg);
  padding-top: var(--espaco-lg);
  border-top: 1px solid var(--cor-borda);
}

.oculto,
[hidden] {
  display: none !important;
}

.cabecalho {
  position: relative;
  z-index: var(--z-cabecalho);
  display: flex;
  justify-content: center;
  padding: clamp(0.55rem, 0.4rem + 0.6vw, 0.9rem) var(--espaco-md);
}

.cabecalho__marca {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--cor-acento);
  text-align: center;
}

.cabecalho__logo {
  width: clamp(150px, 34vw, 230px);
  height: auto;
  aspect-ratio: 366.85 / 95.45;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
}

.rodape {
  text-align: center;
  padding: var(--espaco-lg) var(--espaco-md) calc(var(--espaco-lg) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cor-borda);
  background: rgba(18, 14, 11, 0.6);
}

.rodape__marca {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-sm);
  letter-spacing: 0.16em;
  color: var(--cor-acento);
}

.rodape__aviso {
  font-size: var(--texto-xs);
  color: var(--cor-texto-tenue);
  max-width: 44rem;
  margin: var(--espaco-sm) auto 0;
  line-height: 1.6;
}

.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ceu de fundo. A camada e fixa e fica atras de tudo, mas acima do gradiente
   do body::before, senao as estrelas somem no degrade. Nada aqui recebe
   evento de ponteiro e nada aqui entra no fluxo. */
.ceu {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Um no de 1px carregando dezenas de estrelas em box-shadow. Pintado uma vez
   e nunca animado: e a versao barata do campo estelar. O elemento em si fica
   fora da tela para nao virar uma estrela extra no canto. */
.ceu__campo {
  position: absolute;
  left: 0;
  top: -1px;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
}

.ceu__cintila {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--cor-texto);
  opacity: 0.18;
  animation-name: cintilar;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ceu__cintila--dourada {
  background: var(--cor-acento);
}

/* Estrela cadente. Ela nasce escondida e so ganha movimento quando o JS
   escreve as variaveis e liga data-correndo, entao sem JS nao aparece nada. */
.cadente {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cor-texto);
  box-shadow: 0 0 8px 2px rgba(242, 233, 220, 0.6);
  opacity: 0;
  will-change: auto;
}

.cadente::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--rastro, 180px);
  height: 2px;
  transform: translateY(-50%);
  transform-origin: right center;
  background: linear-gradient(270deg,
    rgba(242, 233, 220, 0.95) 0%,
    rgba(242, 233, 220, 0.55) 28%,
    rgba(201, 162, 75, 0.22) 62%,
    rgba(242, 233, 220, 0) 100%);
}

/* S suave em vez do ease-out do resto do projeto. Com a curva de entrada a
   estrela arrancava e depois rastejava ate parar, que e o contrario de um
   meteoro: ele entra, atravessa em velocidade quase constante e some. Esta
   curva acelera de leve, segura o meio quase linear e desacelera no fim. */
.cadente[data-correndo='true'] {
  animation: riscar var(--duracao, 1300ms) cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ceu__cintila {
    animation: none;
    opacity: 0.18;
  }

  .cadente,
  .cadente[data-correndo='true'] {
    animation: none;
    opacity: 0;
  }
}