/* =====================================================================
   CAMPANHA · CRD Pet+ · Primeiro dia
   ---------------------------------------------------------------------
   Carrega DEPOIS de style.css, pages.css e redesign.css: herda tokens
   (--ink, --paper, --gold, --muted, --line, --font-display) e componentes
   (header, footer, .btn-primary, .text-link, .faq, .brand-veil) e só
   escreve o que é desta página. Tudo que é próprio leva prefixo .lp-.

   Fundo escuro por padrão (é o --ink das duas marcas). A única seção clara
   é "O que ainda tem prazo", de propósito: contraste com a anterior.
   ===================================================================== */

.campanha main { background: var(--ink); color: var(--paper); overflow-x: clip; }
.lp-sec { position: relative; padding: 112px 6vw; }
.lp-inner { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; }

/* rótulo com régua, título, texto: o vocabulário de todas as seções */
.lp-indice {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.lp-indice::before { content: ''; flex: none; width: 34px; height: 1px; background: var(--gold); }
.lp-titulo {
  margin: 22px 0 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 4.2vw, 66px); line-height: 1.06; letter-spacing: -.045em; max-width: 16ch;
}
.lp-titulo em {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  letter-spacing: -.02em; color: var(--gold); font-size: 1.12em;
}
.lp-texto { margin: 22px 0 0; font-size: 15px; line-height: 1.85; color: var(--muted); max-width: 52ch; }
.lp-texto strong { color: var(--paper); font-weight: 600; }
.lp-cabeca { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: end; }
.lp-cabeca .lp-texto { margin-top: 0; padding-left: 26px; border-left: 1px solid rgba(215, 169, 79, .35); }

/* ------------------------------------------------------------ 01 · HERO
   --abre vai de 0 a 1 com o scroll (campanha.js). Com 0, o vídeo vive
   dentro de um círculo à direita, cercado por duas órbitas como as da
   home; com 1, o círculo já engoliu a tela e o véu de leitura entrou. */
.lp-hero {
  --abre: 0; --x0: 73%; --y0: 46%; --r0: 23%; --r1: 150%;
  position: relative; isolation: isolate; overflow: hidden; min-height: 100svh;
  padding: 170px 6vw 90px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; gap: 40px; background: var(--ink);
}
.lp-hero-media {
  position: absolute; inset: 0; z-index: -2; background: #0b1020;
  clip-path: circle(
    calc(var(--r0) + (var(--r1) - var(--r0)) * var(--abre))
    at calc(var(--x0) + (50% - var(--x0)) * var(--abre)) calc(var(--y0) + (50% - var(--y0)) * var(--abre))
  );
  will-change: clip-path;
}
.lp-hero-media video, .lp-hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%;
}
.lp-hero-media img { display: none; }
.sem-video .lp-hero-media video { display: none; }
.sem-video .lp-hero-media img { display: block; }
.lp-hero-veu {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--abre);
  background:
    linear-gradient(90deg, rgba(18, 25, 44, .97) 0%, rgba(18, 25, 44, .84) 38%, rgba(18, 25, 44, .3) 72%, rgba(18, 25, 44, .12) 100%),
    linear-gradient(180deg, rgba(18, 25, 44, .4) 0%, transparent 28%, transparent 60%, var(--ink) 100%);
}
.lp-orbita {
  position: absolute; left: var(--x0); top: var(--y0); z-index: -1; pointer-events: none;
  width: min(64vmin, 660px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(215, 169, 79, .55);
  transform: translate(-50%, -50%) rotate(-14deg);
  opacity: calc(1 - var(--abre) * 1.6);
}
.lp-orbita.dois {
  width: min(76vmin, 780px); border-color: rgba(244, 243, 240, .16);
  transform: translate(-50%, -50%) rotate(38deg) scaleY(.8);
}
.lp-orbita::after {
  content: ''; position: absolute; left: 14%; top: 9%; width: 6px; height: 6px;
  background: var(--gold); border-radius: 50%; box-shadow: 0 0 18px var(--gold);
}
.lp-hero-copy { position: relative; z-index: 1; max-width: 680px; }
/* 4,1vw e não 5vw: a 1366×768 o título de seis linhas empurrava o botão
   para baixo da dobra. Com 56px ele fecha em cinco e o CTA aparece. */
.lp-hero-copy .lp-titulo { max-width: 14ch; font-size: clamp(36px, 4.1vw, 66px); margin-top: 18px; }
.lp-hero-copy .lp-texto { max-width: 46ch; }
.lp-hero-acoes { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 34px; }
.lp-hero-meta {
  margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; gap: 26px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
}
.lp-hero-meta b { color: var(--paper); font-weight: 600; }
.lp-hero-lado { min-height: 1px; }
.lp-hero-legenda {
  position: absolute; right: 6vw; bottom: 34px; z-index: 1; margin: 0;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 21px; color: var(--muted);
  opacity: calc(1 - var(--abre) * 2.2);
}

/* ------------------------------------------------------ 02 · BENEFÍCIOS
   Quatro itens em ziguezague sobre uma grade de 12 colunas, cada um com
   régua, número em itálico e ícone que se desenha (pathLength="1"). */
.lp-itens {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: 58px; column-gap: 24px; margin-top: 76px;
}
.lp-item {
  position: relative; grid-column: 1 / -1;
  display: grid; grid-template-columns: 44px 48px minmax(0, 1fr); gap: 0 28px; align-items: start;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.lp-item::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 64px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s cubic-bezier(.65, 0, .2, 1) var(--atraso, 0ms);
}
.lp-item.desenhado::before { transform: none; }
.lp-num {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 34px; line-height: 1;
  color: var(--gold); padding-top: 6px;
}
.lp-icone { width: 48px; height: 48px; color: var(--gold); }
.lp-icone svg { display: block; width: 48px; height: 48px; overflow: visible; }
.lp-icone path, .lp-icone rect {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .85s cubic-bezier(.65, 0, .2, 1);
  transition-delay: var(--atraso, 0ms);
}
/* cada traço entra um pouco depois do anterior: o ícone "se escreve" */
.lp-icone :nth-child(2) { transition-delay: calc(var(--atraso, 0ms) + 90ms); }
.lp-icone :nth-child(3) { transition-delay: calc(var(--atraso, 0ms) + 180ms); }
.lp-icone :nth-child(4) { transition-delay: calc(var(--atraso, 0ms) + 260ms); }
.lp-icone :nth-child(5) { transition-delay: calc(var(--atraso, 0ms) + 330ms); }
.lp-icone :nth-child(6) { transition-delay: calc(var(--atraso, 0ms) + 390ms); }
.lp-icone :nth-child(7) { transition-delay: calc(var(--atraso, 0ms) + 440ms); }
.lp-icone :nth-child(8) { transition-delay: calc(var(--atraso, 0ms) + 480ms); }
.lp-item.desenhado .lp-icone path, .lp-item.desenhado .lp-icone rect { stroke-dashoffset: 0; }
.lp-item h3 { margin: 0 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.lp-item p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--muted); max-width: 46ch; }
.lp-item-meta {
  display: flex; gap: 30px; margin: 18px 0 0; padding-top: 14px;
  border-top: 1px dashed rgba(244, 243, 240, .14);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.lp-item-meta div { display: flex; flex-direction: column; gap: 5px; }
.lp-item-meta dt { opacity: .75; }
.lp-item-meta dd { margin: 0; color: var(--paper); font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; }
.lp-item-meta dd.agora { color: var(--gold); }
@media (min-width: 901px) {
  .lp-item:nth-child(1) { grid-column: 1 / span 7; }
  .lp-item:nth-child(2) { grid-column: 6 / span 7; }
  .lp-item:nth-child(3) { grid-column: 2 / span 7; }
  .lp-item:nth-child(4) { grid-column: 5 / span 8; }
}

/* ---------------------------------------------------------- 03 · PRAZOS
   A única seção clara. Contida: régua, lista e um número grande. */
.lp-prazos { background: var(--paper); color: var(--ink); }
.lp-prazos .lp-indice { color: #86631e; }
.lp-prazos .lp-indice::before { background: #86631e; }
.lp-prazos .lp-titulo em { color: #86631e; }
.lp-prazos .lp-texto { color: #626a78; }
.lp-prazos .lp-texto strong { color: var(--ink); }
.lp-prazos-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.lp-figura {
  margin-top: 46px; padding-top: 26px; border-top: 1px solid rgba(18, 25, 44, .16);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; align-items: end;
}
.lp-figura-num {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(84px, 9vw, 132px);
  line-height: .9; letter-spacing: -.06em; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 2ch;
  transition: color .4s;
}
.lp-figura-num.zerado { color: #86631e; }
.lp-figura-rot { font-size: 13px; line-height: 1.6; color: #626a78; padding-bottom: 10px; max-width: 26ch; }
.lp-figura-rot b { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #86631e; margin-bottom: 6px; }
.lp-prazos-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.lp-prazos-lista li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid rgba(18, 25, 44, .13); font-size: 15px;
}
.lp-prazos-lista li:first-child { border-top: 1px solid rgba(18, 25, 44, .13); }
.lp-prazos-lista small { display: block; font-size: 12.5px; color: #626a78; margin-top: 3px; }
.lp-prazos-lista b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-prazos-nota { margin: 22px 0 0; font-size: 13px; line-height: 1.7; color: #626a78; max-width: 60ch; }

/* ------------------------------------------------------ 04 · VIGÊNCIA
   Uma linha contínua que se traça quando entra, três marcos sobre ela. */
.lp-linha {
  list-style: none; margin: 72px 0 0; padding: 40px 0 0; position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
}
.lp-linha::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.lp-linha::after {
  content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.65, 0, .2, 1);
}
.lp-linha.tracada::after { transform: none; }
.lp-linha li { position: relative; }
.lp-linha li::before {
  content: ''; position: absolute; top: -44px; left: 0; width: 8px; height: 8px;
  background: var(--gold); border-radius: 50%; transform: scale(0); transition: transform .4s;
}
.lp-linha li:nth-child(1)::before { transition-delay: .25s; }
.lp-linha li:nth-child(2)::before { transition-delay: .75s; }
.lp-linha li:nth-child(3)::before { transition-delay: 1.25s; }
.lp-linha.tracada li::before { transform: none; }
.lp-passo-n {
  display: block; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 58px; line-height: 1; color: var(--gold); margin-bottom: 14px;
}
.lp-linha strong { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.lp-linha .txt { display: block; font-size: 14.5px; line-height: 1.8; color: var(--muted); max-width: 34ch; }
.lp-linha li.destaque strong { color: var(--gold); }
.lp-vigencia-nota { margin: 44px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--muted); max-width: 64ch; }
.lp-vigencia-nota strong { color: var(--paper); }

/* ------------------------------------------------------------ 05 · PROVA
   Livro-razão, não vitrine: linhas, foto pequena e o número à direita. */
.lp-prova-lista { list-style: none; margin: 60px 0 0; padding: 0; }
.lp-prova-item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding: 30px 0; border-top: 1px solid var(--line);
}
.lp-prova-item:last-child { border-bottom: 1px solid var(--line); }
.lp-prova-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(215, 169, 79, .4); }
.lp-prova-tipo { margin: 0 0 8px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.lp-prova-texto { margin: 0; font-size: 16px; line-height: 1.65; max-width: 58ch; }
.lp-prova-item.fala .lp-prova-texto { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 24px; line-height: 1.4; }
.lp-prova-quem { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.lp-prova-quem b { color: var(--paper); font-weight: 600; }
.lp-prova-num { font-family: var(--font-display); font-weight: 400; font-size: 52px; letter-spacing: -.05em; line-height: 1; text-align: right; }
.lp-prova-num small { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
.lp-prova-estrelas { color: var(--gold); letter-spacing: .12em; font-size: 18px; }
.lp-prova-nota { margin: 22px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------- 06 · PLANOS
   Sete linhas em duas famílias. Hierarquia por família e por preço, não
   por sete caixas iguais. */
.lp-familia { margin-top: 64px; }
.lp-familia + .lp-familia { margin-top: 80px; }
.lp-familia-cab { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 10px; }
.lp-familia-tag { margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 36px; line-height: 1.1; color: var(--gold); }
.lp-familia-desc { margin: 0; font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 56ch; }
.lp-planos-lista { list-style: none; margin: 0; padding: 0; }
.lp-plano {
  position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) auto auto;
  gap: 28px; align-items: center; padding: 24px 0 24px 22px; border-top: 1px solid var(--line);
  transition: background .25s;
}
.lp-plano:last-child { border-bottom: 1px solid var(--line); }
.lp-plano::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--gold);
  transform: translateY(-50%) scaleX(0); transform-origin: left; transition: transform .3s;
}
.lp-plano-nome { font-size: 22px; font-weight: 600; letter-spacing: -.025em; }
.lp-plano-tag { display: block; margin-top: 5px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.lp-plano-resumo { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 44ch; }
.lp-plano-preco { font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: -.04em; white-space: nowrap; text-align: right; }
.lp-plano-preco small { font-size: 12px; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.lp-plano-btn {
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper); background: transparent; border: 1px solid rgba(215, 169, 79, .55); border-radius: 100px;
  padding: 14px 20px; cursor: pointer; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.lp-plano-btn:hover, .lp-plano-btn:focus-visible { background: var(--gold); color: #12192c; border-color: var(--gold); }
.lp-planos-nota { margin: 28px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); max-width: 70ch; }
@media (hover: hover) and (pointer: fine) {
  .lp-plano:hover { background: rgba(244, 243, 240, .03); }
  .lp-plano:hover::before { transform: translateY(-50%) scaleX(1); }
}

/* ------------------------------------------------------ 07 · FORMULÁRIO
   Campos de linha única, sem caixa: rótulo pequeno, sublinhado que vira
   dourado no foco. Erro sob o campo e associado por aria-describedby. */
.lp-form { background: var(--surface); }
.lp-form-grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.lp-form-lado { position: sticky; top: 120px; }
.lp-form .lp-texto { color: #c3cadb; }
.lp-form-passos { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; font-size: 13.5px; color: #c3cadb; }
.lp-form-passos li { display: flex; gap: 12px; align-items: baseline; }
.lp-form-passos i { font-style: italic; font-family: 'Cormorant Garamond', serif; color: var(--gold); font-size: 19px; }
.lp-formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.campo label small { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--muted); margin-left: 8px; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 16px; color: var(--paper); background: transparent;
  border: 0; border-bottom: 1px solid rgba(244, 243, 240, .3); border-radius: 0;
  padding: 10px 0 12px; outline: none; transition: border-color .25s; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d7a94f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; padding-right: 26px;
}
.campo select option { color: #12192c; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-bottom-color: var(--gold); }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(244, 243, 240, .38); }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea { border-bottom-color: #e0836a; }
.campo-erro { margin: 0; font-size: 12.5px; color: #f0a48d; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-form-envio { grid-column: 1 / -1; display: grid; gap: 14px; margin-top: 6px; }
.lp-form-envio .btn-primary { justify-self: start; min-width: 260px; text-align: center; }
.btn-primary.carregando { opacity: .7; cursor: progress; }
.form-status { margin: 0; font-size: 13.5px; min-height: 1.4em; color: #c3cadb; }
.form-status.erro { color: #f0a48d; }
.form-status.ok { color: #bfe3c1; }
.lp-form-fallback { margin: 0; font-size: 13.5px; color: #c3cadb; }
.lp-form-fallback a { color: var(--gold); }
.lp-form-lgpd { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.7; color: #9aa4bb; max-width: 64ch; }
.lp-form-lgpd a { color: inherit; }

/* ------------------------------------------------------------- 08 · FAQ
   Reusa .faq/.faq-item/.faq-resposta de pages.css (já são para escuro). */
.lp-faq .faq { margin-top: 54px; max-width: 900px; }

/* ---------------------------------------------------------- 09 · REGRAS */
.lp-regras dl {
  margin: 54px 0 0; display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.lp-regras dt, .lp-regras dd { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.lp-regras dt { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 700; padding-top: 23px; }
.lp-regras dd { font-size: 15px; line-height: 1.7; color: var(--paper); }
.lp-regras dd small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.lp-regras .btn-secondary { display: inline-block; margin-top: 6px; }

/* ------------------------------------------------------ 10 · FECHAMENTO
   O frame do vídeo, parado e dessaturado, sob um véu pesado. */
.lp-final { position: relative; isolation: isolate; overflow: hidden; padding: 150px 6vw 130px; background: var(--ink); }
.lp-final-fundo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 68% 40%; filter: saturate(.7); }
.lp-final::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 25, 44, .97) 0%, rgba(18, 25, 44, .88) 45%, rgba(18, 25, 44, .5) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 40%);
}
.lp-final-inner { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; }
.lp-final .lp-titulo { font-size: clamp(40px, 5.6vw, 88px); max-width: 12ch; }
.lp-final-acoes { margin-top: 38px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------- CORTINA DOURADA (x3)
   Uma linha de 2px atravessa a seção e o conteúdo aparece atrás dela, no
   mesmo tempo e na mesma curva. Sentido por data-cortina: h, v ou d. */
[data-cortina] > .lp-inner, [data-cortina] > .lp-final-inner { clip-path: inset(0 100% 0 0); }
[data-cortina="v"] > .lp-inner, [data-cortina="v"] > .lp-final-inner { clip-path: inset(0 0 100% 0); }
[data-cortina="d"] > .lp-inner, [data-cortina="d"] > .lp-final-inner { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); }
[data-cortina]::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: var(--gold); box-shadow: 0 0 16px rgba(215, 169, 79, .8);
}
.cortina-passa > .lp-inner, .cortina-passa > .lp-final-inner { animation: revela-h 1.3s cubic-bezier(.76, 0, .24, 1) forwards; }
.cortina-passa::after { animation: varre-h 1.3s cubic-bezier(.76, 0, .24, 1) forwards; }
.cortina-passa[data-cortina="v"] > .lp-inner, .cortina-passa[data-cortina="v"] > .lp-final-inner { animation-name: revela-v; }
.cortina-passa[data-cortina="v"]::after { animation-name: varre-v; }
.cortina-passa[data-cortina="d"] > .lp-inner, .cortina-passa[data-cortina="d"] > .lp-final-inner { animation-name: revela-d; }
.cortina-passa[data-cortina="d"]::after { animation-name: varre-d; }
.cortina-fim > .lp-inner, .cortina-fim > .lp-final-inner { clip-path: none !important; animation: none !important; }
.cortina-fim::after { display: none; }
@keyframes revela-h { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes varre-h {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}
@keyframes revela-v { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes varre-v {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { opacity: 0; clip-path: inset(100% 0 0 0); }
}
@keyframes revela-d { from { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); } to { clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); } }
@keyframes varre-d {
  0% { opacity: 0; clip-path: polygon(0 0, 2px 0, -30% 100%, calc(-30% + 2px) 100%); }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { opacity: 0; clip-path: polygon(130% 0, calc(130% + 2px) 0, 100% 100%, calc(100% + 2px) 100%); }
}

/* -------------------------------------------------- BARRA FIXA (celular) */
.cta-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(18, 25, 44, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.cta-fixa p { margin: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.cta-fixa p b { display: block; color: var(--paper); font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.cta-fixa .btn-primary { padding: 14px 20px; font-size: 11px; white-space: nowrap; }

/* ------------------------------------------------------------ OBRIGADO */
.lp-obrigado { min-height: 100svh; display: grid; align-items: center; padding: 170px 6vw 110px; }
.lp-obrigado .lp-titulo { font-size: clamp(38px, 5vw, 78px); }
.lp-obrigado-acoes { margin-top: 38px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.lp-obrigado-passos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; max-width: 520px; }
.lp-obrigado-passos li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.lp-obrigado-passos i { font-style: italic; font-family: 'Cormorant Garamond', serif; color: var(--gold); font-size: 24px; }
.lp-obrigado-passos b { color: var(--paper); font-weight: 600; }

/* ------------------------------------------------------------ RESPONSIVO */
@media (max-width: 1100px) {
  .lp-plano { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; }
  .lp-plano-btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 900px) {
  .lp-sec { padding: 84px 6vw; }
  .lp-cabeca { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-cabeca .lp-texto { padding-left: 0; border-left: 0; }
  /* no celular o círculo ocupa o terço de cima e o texto fica abaixo dele,
     nunca por cima: a 390×844 o raio de 27% invadia o título */
  .lp-hero {
    --x0: 70%; --y0: 23%; --r0: 19%;
    grid-template-columns: minmax(0, 1fr); padding: 0 6vw 72px; align-items: end;
  }
  .lp-hero-copy { padding-top: min(44vh, 380px); }
  .lp-hero-copy .lp-titulo { font-size: clamp(30px, 8.6vw, 44px); max-width: 15ch; }
  .lp-hero-copy .lp-texto { font-size: 14px; margin-top: 16px; }
  .lp-hero-acoes { margin-top: 24px; gap: 18px; }
  .lp-hero-meta { display: none; }   /* repete o que a barra fixa e as regras já dizem */
  .lp-hero-lado, .lp-hero-legenda { display: none; }
  .lp-orbita { width: min(52vmin, 300px); }
  .lp-orbita.dois { width: min(64vmin, 360px); }
  .lp-prazos-grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-linha { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 0 0 0 30px; }
  .lp-linha::before, .lp-linha::after { left: 0; top: 0; bottom: 0; right: auto; width: 1px; height: 100%; }
  .lp-linha::after { transform: scaleY(0); transform-origin: top; }
  .lp-linha.tracada::after { transform: none; }
  .lp-linha li::before { top: 14px; left: -34px; }
  .lp-form-grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-form-lado { position: static; }
  .lp-familia-cab { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lp-plano { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; padding-left: 16px; }
  .lp-plano-resumo { grid-column: 1 / -1; }
  .lp-prova-item { grid-template-columns: 56px minmax(0, 1fr); gap: 16px 18px; }
  .lp-prova-num { grid-column: 2; text-align: left; font-size: 40px; }
  .lp-prova-foto { width: 56px; height: 56px; }
  .lp-regras dl { grid-template-columns: minmax(0, 1fr); }
  .lp-regras dt { border-bottom: 0; padding-bottom: 2px; }
  .lp-regras dd { padding-top: 6px; }
  .lp-obrigado { padding-top: 140px; }
}
@media (max-width: 760px) {
  .cta-fixa { display: flex; }
  .cta-fixa.mostra { transform: none; }
}
@media (max-width: 620px) {
  .lp-titulo { font-size: clamp(32px, 9vw, 44px); }
  .lp-hero-copy .lp-titulo { font-size: clamp(30px, 8.6vw, 40px); }
  .lp-item { grid-template-columns: 40px minmax(0, 1fr); gap: 0 16px; }
  .lp-num { grid-row: 1 / span 2; font-size: 28px; }
  .lp-icone { grid-column: 2; margin-bottom: 14px; }
  .lp-item-corpo { grid-column: 2; }
  .lp-item h3 { font-size: 19px; }
  .lp-item-meta { gap: 22px; }
  .lp-figura { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lp-figura-rot { padding-bottom: 0; }
  .lp-formulario { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lp-form-envio .btn-primary { justify-self: stretch; min-width: 0; }
  .lp-prova-item.fala .lp-prova-texto { font-size: 21px; }
  .lp-final { padding: 110px 6vw 100px; }
  .lp-final .lp-titulo { font-size: clamp(36px, 10vw, 48px); }
}

/* --------------------------------------------- MOVIMENTO REDUZIDO
   Hero estável na moldura, ícones inteiros, contador em 0, sem cortina. */
@media (prefers-reduced-motion: reduce) {
  .lp-hero { --abre: 0 !important; }
  .lp-hero-media { will-change: auto; }
  .lp-icone path, .lp-icone rect { transition: none; stroke-dashoffset: 0; }
  .lp-item::before { transition: none; transform: none; }
  .lp-linha::after, .lp-linha li::before { transition: none; transform: none; }
  [data-cortina] > .lp-inner, [data-cortina] > .lp-final-inner { clip-path: none !important; animation: none !important; }
  [data-cortina]::after { display: none; }
  .cta-fixa { transition: none; }
  .lp-plano, .lp-plano::before, .lp-plano-btn, .lp-figura-num { transition: none; }
}