/* ═══════════════════════════════════════════════════════════════════
   CLÍNICA PELE · LISTA VIP 12 ANOS — a pele inteira
   Tokens no :root. Sem dependências. Fontes servidas daqui mesmo.
   ═══════════════════════════════════════════════════════════════════ */

/* ── fontes ─────────────────────────────────────────────────────────
   Gilda Display é a parente gratuita mais próxima do título do banner;
   Montserrat é a mesma voz do "VOCÊ ESTÁ ENTRE" e do texto corrido.
   O "12" usa Fraunces itálico recortado só nos algarismos (2 KB): o "2"
   dele tem a cauda ondulada que lembra a fita dourada do banner. */
@font-face {
  font-family: 'Gilda Display';
  src: url(fonts/gilda-display.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url(fonts/montserrat.woff2) format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces Num';
  src: url(fonts/fraunces-italico-numeros.woff2) format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
  unicode-range: U+0030-0039;
}
/* Reserva com a largura da Montserrat (medida: 8,4% mais larga que Arial
   no texto corrido). Enquanto a fonte desce, o texto já ocupa o mesmo
   espaço — o lead não ganha nem perde linha na troca e o cartão não anda. */
@font-face {
  font-family: 'Montserrat Reserva';
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 108%;
  ascent-override: 89.6%;
  descent-override: 23.2%;
  line-gap-override: 0%;
}

:root {
  /* cor — o creme é EXATAMENTE o fundo graduado do vídeo (246,233,219):
     é o que deixa a modelo "impressa" na página, sem caixa em volta. */
  --creme:      #F6E9DB;
  --marfim:     #FCF8F3;
  --cacau:      #3E2619;   /* títulos            11,8:1 no creme */
  --cacau-2:    #5E4030;   /* texto corrido       7,8:1 */
  --suave:      #73533F;   /* apoio               5,8:1 */
  --bronze:     #87602F;   /* ouro que se lê      4,7:1 — o dourado do banner (#C9A27A) não passa de 2:1 */
  --ouro:       #B98A55;   /* filetes e brilho — nunca texto pequeno sobre claro */
  --ouro-claro: #E3C38F;
  --noite:      #2B1A12;   /* manifesto e rodapé */
  --linha:      rgba(135, 96, 47, .26);
  --campo:      #A88763;   /* contorno de campo   3,1:1 no cartão */
  --erro:       #9A3324;   /*                     6,9:1 no cartão */
  --foil: linear-gradient(100deg,
          #8A6232 0%, #C99A5E 16%, #F6E3B9 28%, #D6AE72 40%,
          #A97A45 54%, #EBD3A0 68%, #BE925C 82%, #8A6232 100%);

  /* tipo */
  --serif: 'Gilda Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', 'Montserrat Reserva', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --num:   'Fraunces Num', 'Gilda Display', Georgia, serif;

  /* movimento — uma família só: chega rápido e assenta devagar */
  --sai:   cubic-bezier(.22, 1, .36, 1);
  --gira:  cubic-bezier(.65, 0, .35, 1);

  /* forma — dois raios na página inteira: cartão e pílula */
  --raio:    22px;
  --pilula:  999px;
  --sombra:  0 44px 80px -44px rgba(62, 38, 25, .42), 0 14px 30px -18px rgba(62, 38, 25, .18);

  --margem: clamp(20px, 5vw, 80px);
  --topo-h: clamp(64px, 9svh, 88px);
}

/* ── base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  background: var(--creme);
  color: var(--cacau-2);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* grão de papel: a seda do banner tem textura; um creme chapado parece
   tela, não material. Uma camada fixa só, desenhada uma vez. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .07;
  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 .24 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
[hidden] { display: none !important; }
.sem-quebra { white-space: nowrap; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: rgba(227, 195, 143, .55); color: var(--cacau); }

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 4px; }
.manifesto :focus-visible, .rodape :focus-visible { outline-color: var(--ouro-claro); }   /* 9,9:1 no escuro */

.pular {
  position: absolute; left: 16px; top: 16px; z-index: 100;
  padding: 12px 18px; border-radius: var(--pilula);
  background: var(--cacau); color: var(--marfim);
  font: 500 .875rem var(--sans); text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform .3s var(--sai);
}
.pular:focus { transform: none; }

/* ── peças de texto reaproveitadas ─────────────────────────────────── */
.sobretitulo {
  display: block;
  font: 500 clamp(.72rem, .66rem + .2vw, .8125rem)/1.4 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--cacau-2);
}
.sobretitulo--claro { color: #CDB59B; }

.titulo-2 {
  font: 400 clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem)/1.06 var(--serif);
  letter-spacing: -.01em;
  color: var(--cacau);
  text-wrap: balance;
}
.titulo-2--claro { color: #F3E6D6; }

.fio-curto {
  display: block;
  width: 64px; height: 1px;
  background: currentColor;
  color: var(--cacau-2);
  opacity: .45;
}
.fio-curto--centro { margin-inline: auto; }

/* ── botão: a pílula marrom do banner ──────────────────────────────── */
.botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--pilula);
  /* o tom mais claro ainda dá 5,3:1 com o texto creme */
  background: linear-gradient(100deg, #5A3928 0%, #7B5843 52%, #62402E 100%);
  color: #F8EEE4;
  font: 500 .8125rem/1.2 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 20px 34px -20px rgba(62, 38, 25, .7), inset 0 1px 0 rgba(255, 240, 220, .16);
  transition: transform .45s var(--sai), box-shadow .45s var(--sai);
  -webkit-tap-highlight-color: transparent;
}
/* o brilho atravessa uma vez por toque/hover e sempre termina a passada:
   o app.js põe .brilha e tira no fim da animação */
.botao::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 234, 200, .3) 50%, transparent 75%);
  transform: translateX(-110%);
}
.botao__seta { flex: none; transition: transform .45s var(--sai); }
@media (hover: hover) {
  .botao:hover { transform: translateY(-1px); box-shadow: 0 26px 40px -22px rgba(62, 38, 25, .75), inset 0 1px 0 rgba(255, 240, 220, .2); }
  .botao:hover .botao__seta { transform: translateX(4px); }
}
.botao:active { transform: scale(.985); transition-duration: .12s; }
.botao:focus-visible { outline-offset: 4px; border-radius: var(--pilula); }

.botao--ouro {
  background: var(--foil);
  background-size: 160% 100%;
  color: var(--noite);   /* 5,4:1 no tom mais escuro do ouro */
  font-weight: 600;
  box-shadow: 0 20px 34px -22px rgba(138, 98, 50, .8), inset 0 1px 0 rgba(255, 250, 235, .55);
}
.botao--largo { width: auto; padding: 0 34px; }
/* cartão estreito (tablet deitado, notebook pequeno): a pílula perde um
   pouco de espaçamento antes de deixar o texto quebrar em duas linhas */
@media (min-width: 60em) and (max-width: 75em) {
  .convite .botao { letter-spacing: .15em; padding: 0 18px; gap: 10px; }
}
@media (max-width: 30em) {
  .botao { font-size: .75rem; letter-spacing: .13em; padding: 0 16px; gap: 10px; }
  .botao--largo { width: 100%; }
}

.botao.is-ocupado { pointer-events: none; }
.botao.is-ocupado .botao__seta { opacity: 0; }
.botao.is-ocupado::after {
  content: '';
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(248, 238, 228, .35);
  border-top-color: #F8EEE4;
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(1turn); } }

/* ── topo ──────────────────────────────────────────────────────────── */
.topo {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  height: var(--topo-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--margem);
}
.marca {
  display: block;
  color: var(--cacau);
  line-height: 0;
  padding: 6px 0;
}
/* "CLÍNICA" é ~8% da altura da logo: abaixo de ~44 px ela vira risco */
.marca__logo { display: block; height: clamp(44px, 6svh, 54px); width: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.topo__selo {
  display: none;
  align-items: center; gap: 10px;
  font: 500 .66rem/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cacau-2);
}
.topo__ponto {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--foil);
  box-shadow: 0 0 0 3px rgba(185, 138, 85, .16);
}
@media (min-width: 30em) { .topo__selo { display: inline-flex; } }

/* ═══ HERO ═════════════════════════════════════════════════════════
   Celular: a mídia em cima e o texto embaixo, como uma revista.
   Desktop: a composição do banner — modelo à esquerda, selo na
   costura, texto e convite à direita. */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--creme);
  overflow: clip;
  /* sem folga no topo: no vídeo original o alto da cabeça já encosta na
     borda do quadro, então a foto encosta na borda da tela — o corte vira
     enquadramento de capa, não costura dissolvida em cima do cabelo */
  padding-top: 0;
}

/* palco = mídia + selo. O selo se ancora na borda da mídia em qualquer
   tela e fica fora da máscara que dissolve o vídeo no creme. */
.hero__palco {
  position: relative;
  height: min(118vw, 62svh, 680px);
}
.hero__midia {
  position: absolute; inset: 0;
  z-index: 0;
  /* fundo do vídeo = fundo da página; a máscara só apaga a costura que
     a compressão deixa nas bordas e dissolve o corpo no creme */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
}
.hero__foto,
.hero__filme {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* o quadro é mais largo que o palco: 60% guarda folga na frente do rosto
     (para onde ela olha) e deixa o coque encostar na borda */
  object-position: 60% 0%;
}
.hero__filme {
  opacity: 0;
  transition: opacity 1.6s var(--sai);
}
/* o pôster é o primeiro quadro do vídeo: a troca é uma dissolução
   sobre a mesma imagem, nunca um salto */
.hero__filme.is-vivo { opacity: 1; }

/* a luz da seda: faixas diagonais que atravessam modelo e texto,
   como no banner. Respira devagar; com movimento reduzido fica parada. */
.hero__luz {
  position: absolute; inset: -25% -15%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(42% 36% at 78% 14%, rgba(255, 252, 246, .7), transparent 72%),
    linear-gradient(116deg, transparent 18%, rgba(255, 250, 243, .12) 27%, transparent 35%),
    linear-gradient(116deg, transparent 47%, rgba(255, 250, 243, .38) 54%, transparent 61%),
    linear-gradient(116deg, transparent 66%, rgba(214, 180, 140, .12) 72%, transparent 79%);
}

.selo {
  position: absolute; z-index: 2;
  right: calc(var(--margem) - 4px);
  bottom: 2px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "num anos" "marca marca";
  align-items: center;
  justify-items: center;
  pointer-events: none;
  --selo: clamp(5.4rem, 23vw, 8rem);
}
.selo__num {
  grid-area: num;
  font: italic 300 var(--selo)/.82 var(--num);
  font-synthesis: none;
  letter-spacing: -.03em;
  /* O itálico passa da caixa: a perna do "2" invade ~.09em à direita, e o
     dourado (background-clip: text) só é pintado DENTRO da caixa — a ponta
     do "2" ficava sem tinta, cortada. A folga pinta a tinta inteira; a
     margem negativa devolve o espaço, e o layout não se mexe. */
  padding: .06em .24em .02em .08em;
  margin: 0 -.18em 0 -.08em;
  background: var(--foil);
  background-size: 240% 100%;
  background-position: 70% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 14px rgba(138, 98, 50, .2));
}
.selo__anos {
  grid-area: anos;
  align-self: center;
  margin: .55em 0 0 .1em;
  font: 400 clamp(.7rem, .6rem + .4vw, .95rem)/1 var(--serif);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--cacau);
}
.selo__marca {
  grid-area: marca;
  margin-top: .7rem;
  padding-left: .42em;   /* devolve o espaçamento da última letra: centra de verdade */
  font: 400 clamp(.66rem, .58rem + .35vw, .9rem)/1 var(--serif);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--cacau);
  text-align: center;
}
.selo__marca::after {
  content: '';
  display: block;
  width: 40px; height: 1px;
  margin: .9rem auto 0;
  background: var(--cacau);
  opacity: .45;
}
/* No celular a foto encosta no topo e o alto da cabeça fica embaixo da
   logo: ela vai para o centro, em creme, sobre o cabelo escuro, como o nome
   de uma revista sobre a capa. Conferido no loop inteiro (204 quadros, de
   360 a 768 px): o retângulo da logo cai sempre sobre o cabelo. No canto,
   escura, ela pegava a testa na abertura (o próprio pôster). */
@media (max-width: 59.99em) {
  .topo .marca {
    position: absolute; left: 50%; transform: translateX(-50%);
    color: var(--creme);
    filter: drop-shadow(0 1px 10px rgba(43, 26, 18, .45));   /* segura o creme sobre o brilho dos fios */
  }
  .topo__selo { margin-left: auto; }
}
/* um halo de luz creme atrás do selo: o 12 dourado em cima do colar
   dourado sumia. Faz o papel da luz que, no banner, bate na fita. */
.selo::before {
  content: '';
  position: absolute; z-index: -1;
  inset: -30% -24% -26% -30%;
  background: radial-gradient(closest-side, rgba(246, 233, 219, .86), rgba(246, 233, 219, .5) 58%, rgba(246, 233, 219, 0));
  pointer-events: none;
}

.hero__texto {
  position: relative; z-index: 3;
  padding: 14px var(--margem) clamp(56px, 9vw, 88px);
}

.titulo { font-weight: 400; }
.titulo__grande {
  display: block;
  margin-top: .3em;
  font: 400 clamp(3.05rem, min(5.7vw, 9.2svh), 6rem)/.98 var(--serif);
  letter-spacing: -.012em;
  color: var(--cacau);
}
/* cada linha é uma janela: o texto sobe de dentro dela na chegada.
   A folga de baixo guarda a perna do "p" que a janela cortaria. */
.linha {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.linha > span {
  display: inline-block;
  white-space: nowrap;   /* cada linha do banner é uma linha só, em qualquer tela */
  /* o brilho metálico do título do banner, sem perder contraste:
     o tom mais claro ainda dá 4,4:1 no creme */
  background: linear-gradient(98deg, #3A2216 0%, #5C3A22 34%, #8A6232 50%, #4A2D1C 68%, #3A2216 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero__texto > .fio-curto { margin: clamp(18px, 3.4svh, 30px) 0; }

.lead {
  max-width: 33em;
  font-size: clamp(1rem, .96rem + .14vw, 1.0625rem);
  line-height: 1.62;
  color: var(--cacau-2);
  text-wrap: pretty;
}
.lead strong { font-weight: 600; color: var(--bronze); }

/* ═══ O CONVITE (cartão de duas faces) ═════════════════════════════ */
.cartao {
  margin-top: clamp(22px, 3.6svh, 34px);
  perspective: 1800px;
  border-radius: var(--raio);
}
.cartao:focus { outline: none; }
.cartao:focus-visible { outline: 2px solid var(--bronze); outline-offset: 6px; }
.cartao__giro {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 1.15s var(--gira);
}
.cartao.virado .cartao__giro { transform: rotateY(180deg); }

.cartao__face {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: var(--marfim);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 24px);
}
.cartao__verso { transform: rotateY(180deg); }

/* campos: rótulo pequeno em caixa-alta acima de uma linha fina — o
   formato de um convite impresso, com a altura de toque de um app */
.campos { display: grid; gap: 12px 22px; }
.campo { position: relative; min-width: 0; }
.campo__rotulo {
  display: block;
  font: 600 .66rem/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--suave);
  transition: color .35s var(--sai);
}
.campo:focus-within .campo__rotulo { color: var(--bronze); }
.campo__caixa {
  position: relative;
  border-bottom: 1px solid var(--campo);
  transition: border-color .35s var(--sai);
}
/* o filete de ouro nasce do centro quando o campo ganha foco */
.campo__caixa::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--bronze);   /* 5:1 no cartão: o foco não some nos trechos claros */
  transform: scaleX(0);
  transition: transform .55s var(--sai);
}
.campo:focus-within .campo__caixa::after { transform: scaleX(1); }
.campo__caixa input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 9px 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1rem;            /* 16px: o iOS não dá zoom no foco */
  color: var(--cacau);
  -webkit-appearance: none;
          appearance: none;
  caret-color: var(--bronze);
}
.campo__caixa input:focus { outline: none; }
.campo__caixa input::placeholder { color: var(--suave); opacity: .62; }
/* o preenchimento automático do navegador pinta de azul/amarelo;
   aqui ele vira um creme mais quente, do mesmo cartão */
.campo__caixa input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #F8EEDF inset;
  -webkit-text-fill-color: var(--cacau);
}

.campo__erro {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--erro);
}
.campo__erro:not(:empty) { padding-top: 7px; }
.campo.tem-erro .campo__caixa { border-bottom-color: var(--erro); }
.campo.tem-erro .campo__caixa::after { background: var(--erro); }
.campo.tem-erro .campo__rotulo { color: var(--erro); }

.campo__dica {
  padding-top: 7px;
  font-size: .8rem;
  color: var(--suave);
}
.campo__sugestao {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--bronze);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* aceite (LGPD) — a caixa nativa continua lá, só invisível: teclado,
   leitor de tela e validação seguem funcionando sem nenhuma ajuda */
.campo--aceite { margin-top: 18px; }
.aceite {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--cacau-2);
}
.aceite input {
  position: absolute; left: -4px; top: -3px; z-index: 1;   /* o clique cai no input de verdade */
  width: 28px; height: 28px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.aceite__caixa {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 1px solid var(--campo);
  border-radius: 6px;
  background: #fff;
  color: var(--marfim);
  transition: background-color .3s var(--sai), border-color .3s var(--sai);
}
.aceite__caixa svg { opacity: 0; transform: scale(.6); transition: opacity .25s var(--sai), transform .35s var(--sai); }
.aceite input:checked + .aceite__caixa { background: #6A4632; border-color: #6A4632; }
.aceite input:checked + .aceite__caixa svg { opacity: 1; transform: none; }
.aceite input:focus-visible + .aceite__caixa { outline: 2px solid var(--bronze); outline-offset: 3px; }
.campo--aceite.tem-erro .aceite__caixa { border-color: var(--erro); }
.aceite__link {
  display: inline-block;
  font-size: .76rem;
  white-space: nowrap;
  color: var(--bronze);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.armadilha {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.convite { display: flex; flex-direction: column; justify-content: center; }
.convite .botao { margin-top: 18px; }
.form__status { font-size: .84rem; line-height: 1.45; text-align: center; }
.form__status:not(:empty) { padding-top: 12px; }
.form__status.ruim { color: var(--erro); }
.convite__nota {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px;
  font-size: .72rem;
  color: var(--suave);
  text-align: center;
}
.convite__nota svg { flex: none; }

/* o verso: o passe VIP */
.passe {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, #FFFDF8 0%, rgba(255, 253, 248, 0) 70%),
    var(--marfim);
}
/* moldura interna de ouro, como a borda de um convite */
.passe::before {
  content: '';
  position: absolute; inset: 9px;
  border: 1px solid rgba(185, 138, 85, .5);
  border-radius: calc(var(--raio) - 9px);
  pointer-events: none;
}
.passe__topo {
  font: 600 .64rem/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--suave);
}
.passe__num {
  font: italic 300 clamp(4.2rem, 7vw, 5.6rem)/.8 var(--num);
  font-synthesis: none;
  /* mesma folga do selo: sem ela a ponta do "2" fica sem dourado */
  padding: .04em .22em .02em .08em;
  margin: 4px -.22em -4px -.08em;
  background: var(--foil);
  background-size: 240% 100%;
  background-position: 70% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.passe__titulo {
  font: 400 clamp(1.75rem, 1.2rem + 1.4vw, 2.35rem)/1.12 var(--serif);
  color: var(--cacau);
  text-wrap: balance;
}
.passe__titulo:focus { outline: none; }
.passe__texto {
  max-width: 28em;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--cacau-2);
}
.passe__texto b { font-weight: 600; color: var(--cacau); overflow-wrap: anywhere; }
.passe__texto [data-fone] { white-space: nowrap; }
.passe__acoes { display: grid; gap: 10px; width: 100%; max-width: 360px; margin-top: 6px; }
.passe__corrigir {
  justify-self: center;
  padding: 6px 4px;
  border: 0;
  background: none;
  font-size: .78rem;
  color: var(--suave);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ═══ DESKTOP: a composição do banner ══════════════════════════════ */
@media (min-width: 60em) {
  /* o passe divide a célula com o convite: compacto, ele cabe na mesma
     altura e o giro não estica o cartão */
  .passe { gap: 9px; padding-top: 22px; padding-bottom: 20px; }
  .passe__num { font-size: clamp(3.1rem, 4.4vw, 4.3rem); }
  .passe__titulo { font-size: clamp(1.5rem, 1rem + 1vw, 2rem); }
  .passe__texto { font-size: .86rem; line-height: 1.55; }
  .passe .botao { min-height: 50px; }
  .passe__acoes { gap: 4px; margin-top: 4px; }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    /* topo, não centro: com o centro, cada erro do formulário fazia o
       título subir metade da altura que o cartão ganhava */
    align-items: start;
    min-height: max(100svh, 700px);
    padding-top: 0;
  }
  /* a composição do banner: a modelo ocupa a esquerda inteira, o selo
     fica na costura e o texto começa depois dele */
  .hero__palco {
    position: absolute;
    /* puxado 4% para fora da tela: o rosto anda para a esquerda e abre
       a costura onde o selo mora, sem encostar no queixo */
    top: 0; left: -4%;
    width: 47%;
    /* A altura vem da primeira dobra, nunca do conteúdo. Presa ao fundo
       do hero, ela crescia a cada erro e no giro do cartão: o cover
       reenquadrava a modelo (+14%) e o selo despencava junto. */
    height: max(100svh, 700px);
  }
  .hero__midia {
    -webkit-mask-image:
      linear-gradient(to right, #000 90%, transparent 100%),
      linear-gradient(to bottom, #000 0, #000 74%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to right, #000 90%, transparent 100%),
      linear-gradient(to bottom, #000 0, #000 74%, transparent 100%);
            mask-composite: intersect;
  }
  /* posição validada contra o loop inteiro (não só o pôster): no quadro
     em que o rosto mais desce, o 12 continua fora da boca e do queixo */
  .selo {
    right: auto;
    left: 80%;
    bottom: clamp(24px, 5svh, 72px);
    --selo: clamp(7.5rem, min(11.6vw, 19svh), 13rem);
  }
  .hero__texto {
    grid-column: 2;
    width: 100%;
    max-width: 680px;
    /* centralização aproximada pela dobra, calculada uma vez: em tela alta o
       bloco desce até o meio; em tela baixa encosta no topo, com ar para a
       logo (em 1280×720 o botão ainda fecha 17 px acima da dobra) */
    padding: max(calc(var(--topo-h) + 14px), calc((100svh - 860px) / 2)) var(--margem) clamp(32px, 5svh, 56px) clamp(8px, 1.6vw, 28px);
  }
  .titulo__grande { margin-top: .26em; }
}
/* notebook baixo (1366×768 e afins): WhatsApp e e-mail lado a lado para
   o botão não descer da dobra */
@media (min-width: 60em) and (max-height: 56em) {
  .campos { grid-template-columns: 1fr 1fr; }
  .campo--nome { grid-column: 1 / -1; }
  .campo--aceite { margin-top: 16px; }
}
@media (min-width: 60em) {
  .topo { padding-left: calc(54% + clamp(8px, 1.6vw, 28px)); }
}
@media (min-width: 100em) {
  .hero__texto { padding-left: 2vw; }
  .topo { padding-left: calc(54% + 2vw); }
}

/* ═══ O QUE A LISTA RESERVA ════════════════════════════════════════ */
.vantagens {
  position: relative;
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  padding: clamp(84px, 12vw, 160px) var(--margem);
  border-top: 1px solid var(--linha);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 251, 245, .7), transparent 70%),
    var(--creme);
}
.vantagens__cabeca .titulo-2 { margin-top: 18px; max-width: 11em; }
.vantagens__lista {
  list-style: none;
  padding: 0;
  display: grid;
  counter-reset: none;
}
.vantagem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "n t" "n p";
  column-gap: 22px;
  padding: 26px 0 28px;
  border-top: 1px solid var(--linha);
}
.vantagem:last-child { border-bottom: 1px solid var(--linha); }
.vantagem__n {
  grid-area: n;
  /* mesma altura nas três colunas: a régua dos números é uma só */
  display: block;
  height: .95em;
  font: italic 300 3.2rem/.9 var(--num);
  font-synthesis: none;
  padding-right: .2em;     /* folga de pintura do itálico (ver .selo__num) */
  margin-right: -.2em;
  background: var(--foil);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  min-width: 1.6ch;
}
.vantagem__titulo {
  grid-area: t;
  align-self: end;
  font: 400 clamp(1.4rem, 1.2rem + .6vw, 1.75rem)/1.15 var(--serif);
  color: var(--cacau);
}
.vantagem p {
  grid-area: p;
  margin-top: 8px;
  max-width: 30em;
  font-size: .98rem;
  line-height: 1.62;
  color: var(--cacau-2);
}

@media (min-width: 48em) {
  .vantagens__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vantagem {
    grid-template-columns: 1fr;
    grid-template-areas: "n" "t" "p";
    /* sem isto o li esticado à altura do mais alto distribuía a sobra entre
       as linhas internas e cada título caía num lugar diferente */
    align-content: start;
    row-gap: 18px;
    padding: 6px clamp(18px, 2.4vw, 36px) 0;
    border-top: 0;
    border-left: 1px solid var(--linha);
  }
  .vantagem:last-child { border-bottom: 0; }
  .vantagem__titulo { align-self: start; }
  .vantagem__n { font-size: clamp(3.4rem, 2.6rem + 1.6vw, 4.6rem); margin-bottom: 4px; }
  .vantagem p { margin-top: 0; }
}
@media (min-width: 64em) {
  .vantagens { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .vantagens__cabeca { position: sticky; top: 48px; }
}

/* ═══ MANIFESTO ════════════════════════════════════════════════════ */
.manifesto {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
  padding: clamp(96px, 13vw, 176px) var(--margem) clamp(96px, 12vw, 160px);
  background:
    radial-gradient(70% 60% at 22% 40%, rgba(185, 138, 85, .16), transparent 70%),
    var(--noite);
  color: #E9DACB;
}
.manifesto__doze {
  position: absolute; z-index: -1;
  right: -.38em; bottom: -.2em;
  padding: .06em .32em 0 .1em;   /* folga de pintura do itálico (ver .selo__num) */
  font: italic 300 clamp(18rem, 52vw, 46rem)/.8 var(--num);
  font-synthesis: none;
  letter-spacing: -.04em;
  background: var(--foil);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: .14;
  pointer-events: none;
  user-select: none;
}

.retrato {
  position: relative;
  width: min(78vw, 420px);
  justify-self: center;
}
/* arco perfeito sobre 4:5 — raio horizontal 50%, vertical 40% */
.retrato__arco {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 50% 50% var(--raio) var(--raio) / 40% 40% var(--raio) var(--raio);
  background: var(--creme);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .65);
}
.retrato__arco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* a moldura de ouro, deslocada como uma segunda linha de desenho */
.retrato::before {
  content: '';
  position: absolute; inset: -14px -14px 22px 22px;
  border: 1px solid rgba(227, 195, 143, .45);
  border-radius: 50% 50% var(--raio) var(--raio) / 40% 40% var(--raio) var(--raio);
  pointer-events: none;
}

.manifesto__texto { display: grid; gap: 22px; justify-items: start; max-width: 36rem; }
.manifesto__texto .titulo-2 { font-size: clamp(2.3rem, 1.5rem + 3vw, 4.2rem); line-height: 1.04; }
.manifesto__frase {
  max-width: 26em;
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  line-height: 1.6;
  color: #CDB59B;   /* 8,5:1 no fundo escuro */
}
.manifesto__texto .botao { margin-top: 12px; }

@media (min-width: 60em) {
  .manifesto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .retrato { width: min(100%, 440px); justify-self: end; }
}

/* ═══ RODAPÉ ═══════════════════════════════════════════════════════ */
.rodape {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  padding: 56px var(--margem) calc(40px + env(safe-area-inset-bottom));
  background: var(--noite);
  border-top: 1px solid rgba(227, 195, 143, .16);
  color: #BFA68C;
  font-size: .8rem;
}
.rodape__marca {
  display: grid;
  justify-items: center;
  gap: 16px;
  color: #F3E6D6;
}
.rodape__logo { display: block; height: 64px; width: auto; }
.rodape__anos {
  display: block;
  padding-left: .34em;   /* devolve o espaçamento da última letra: centra de verdade */
  font: 600 .62rem/1 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ouro-claro);
}
.rodape__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.rodape__links a {
  padding: 6px 0;
  color: #E9DACB;
  text-decoration: underline;
  text-decoration-color: rgba(227, 195, 143, .5);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.rodape__copy { color: #A88E75; }   /* 5,6:1 no fundo */

/* ═══ CTA FIXO (só celular) ════════════════════════════════════════ */
.cta-fixo {
  position: fixed; z-index: 40;
  left: 16px; right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: var(--pilula);
  background: linear-gradient(100deg, #5A3928 0%, #7B5843 52%, #62402E 100%);
  color: #F8EEE4;
  font: 500 .78rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 18px 40px -14px rgba(43, 26, 18, .6);
  /* escondido também para o teclado enquanto está fora da tela */
  visibility: hidden;
  transform: translateY(calc(100% + 30px));
  transition: transform .6s var(--sai), visibility 0s linear .6s;
}
.cta-fixo.is-visivel {
  visibility: visible;
  transform: none;
  transition: transform .6s var(--sai), visibility 0s;
}
@media (min-width: 60em) { .cta-fixo { display: none; } }

/* ═══ AVISO DE PRIVACIDADE ═════════════════════════════════════════ */
.aviso {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100svh - 48px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--marfim);
  color: var(--cacau-2);
  box-shadow: var(--sombra);
  font-size: .92rem;
  line-height: 1.62;
}
.aviso::backdrop { background: rgba(43, 26, 18, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* sem JavaScript o link #privacidade abre o mesmo bloco pelo :target */
.aviso:target {
  display: block;
  position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 80;
}
.aviso__titulo { font: 400 1.7rem/1.15 var(--serif); color: var(--cacau); margin-bottom: 14px; }
.aviso ul { margin: 14px 0; padding-left: 1.1em; display: grid; gap: 8px; }
.aviso li::marker { color: var(--ouro); }
.aviso b { color: var(--cacau); }
.aviso__lei { font-size: .8rem; color: var(--suave); }
.aviso__acoes { margin-top: 20px; }
.aviso__fechar {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--campo);
  border-radius: var(--pilula);
  background: transparent;
  font: 500 .74rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cacau);
  cursor: pointer;
  transition: background-color .35s var(--sai);
}
.aviso__fechar:hover { background: rgba(185, 138, 85, .1); }
/* o botão fecha o diálogo; sem JS não há diálogo modal, só o :target —
   aí quem fecha é um link de volta ao cadastro */
.aviso__semjs { display: none; }
html:not(.js) .aviso__semjs { display: inline-flex; margin-top: 20px; }
html:not(.js) .aviso__acoes { display: none; }

/* ═══ MOVIMENTO ════════════════════════════════════════════════════
   A chegada do hero é só CSS: não depende de JavaScript para o texto
   aparecer. As revelações de rolagem dependem — e por isso só escondem
   alguma coisa depois que o app.js marca o <html> com .js-anima. */
@media (prefers-reduced-motion: no-preference) {
  .hero__foto { animation: midia-chega 1.9s var(--sai) both; }
  @keyframes midia-chega { from { opacity: 0; transform: scale(1.05); } }

  .hero__luz { animation: luz-respira 26s ease-in-out infinite alternate; }
  @keyframes luz-respira { to { transform: translate3d(5%, -3%, 0); } }

  .hero .sobretitulo { animation: sobe .9s var(--sai) .15s both; }
  .linha > span { animation: linha-sobe 1.25s var(--sai) both; }
  .linha:nth-child(1) > span { animation-delay: .25s; }
  .linha:nth-child(2) > span { animation-delay: .37s; }
  @keyframes linha-sobe { from { transform: translateY(calc(100% + .2em)); } }   /* passa da folga de .14em: nada do "b" aparece antes da hora */
  .hero__texto > .fio-curto { animation: fio-cresce 1.1s var(--sai) .6s both; transform-origin: left; }
  @keyframes fio-cresce { from { transform: scaleX(0); } }
  .lead { animation: sobe 1s var(--sai) .62s both; }
  .cartao { animation: sobe 1.1s var(--sai) .74s both; }
  @keyframes sobe { from { opacity: 0; transform: translateY(18px); } }

  /* o 12 chega e a luz corre pela fita uma vez; depois volta de tempos
     em tempos, como reflexo de joia — nunca em loop contínuo */
  .selo { animation: selo-chega 1.6s var(--sai) .45s both; }
  @keyframes selo-chega { from { opacity: 0; transform: translateY(26px); } }
  /* o ciclo começa e termina no repouso (70%): a luz recua, atravessa a
     fita e volta — nenhum quadro salta, nem na primeira volta */
  .selo__num { animation: reflexo 9s ease-in-out 1.4s infinite; }
  @keyframes reflexo {
    0%, 52%, 100% { background-position: 70% 0; }
    8%  { background-position: 100% 0; }
    28% { background-position: 0% 0; }
  }

  .cartao.virado .passe__num { animation: reflexo 9s ease-in-out .9s infinite; }

  .botao.brilha::before { animation: brilho 1.1s var(--sai); }
  @keyframes brilho { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

  /* o véu entra junto com o cartão e os dois saem juntos, mais depressa.
     A saída do véu tem keyframes de nome próprio: com o mesmo nome da
     entrada, o navegador só ATUALIZA a animação (já terminada) em vez de
     começar outra, e o véu sumia seco enquanto o cartão ainda saía. */
  .aviso[open] { animation: aviso-abre .5s var(--sai); }
  .aviso[open]::backdrop { animation: veu .5s var(--sai); }
  .aviso.fechando { animation: aviso-fecha .24s cubic-bezier(.4, 0, 1, 1) forwards; }
  .aviso.fechando::backdrop { animation: veu-sai .24s cubic-bezier(.4, 0, 1, 1) forwards; }
  @keyframes aviso-abre { from { opacity: 0; transform: translateY(14px) scale(.98); } }
  @keyframes aviso-fecha { to { opacity: 0; transform: translateY(8px) scale(.985); } }
  @keyframes veu { from { opacity: 0; } }
  @keyframes veu-sai { to { opacity: 0; } }

  .js-anima [data-revela] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s var(--sai), transform 1.3s var(--sai);
    transition-delay: calc(var(--d, 0) * 110ms);
  }
  .js-anima [data-revela].visivel { opacity: 1; transform: none; }

  .js-anima .retrato[data-revela] { transform: translateY(40px) scale(.97); }
  .js-anima .retrato[data-revela].visivel { transform: none; }

  /* o 12 de fundo do manifesto anda contra a rolagem — sem JS, só onde
     o navegador já entende timeline de rolagem */
  @supports (animation-timeline: view()) {
    .manifesto__doze {
      animation: doze-flutua linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes doze-flutua { from { transform: translateY(14%); } to { transform: translateY(-10%); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cartao__giro { transition: none; }
  .hero__filme { transition: none; }
  .cta-fixo, .cta-fixo.is-visivel { transition: none; }   /* aparece, não sobe */
  .botao::before { display: none; }                        /* sem varredura de brilho */
}

/* alto contraste do sistema: o texto em gradiente vira texto de verdade */
@media (forced-colors: active) {
  .linha > span, .selo__num, .passe__num, .vantagem__n, .manifesto__doze {
    background: none; color: CanvasText; forced-color-adjust: none;
  }
  .botao, .cta-fixo { border: 1px solid ButtonText; }
}