/* ═══════════════════════════════════════════════════════════════════════
   Crucis — site de lançamento · Trama (v2, enxuta)
   Chão de papel, tinta de terra, quatro fios (terracota, creme, sálvia, marrom).
   Dia = papel · Modo noturno = café profundo (prefers-color-scheme: dark)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --papel: #F1EADF;
  --superficie: #FAF6EE;
  --superficie-alta: #E8DECD;
  --tinta: #2A1C13;
  --tinta-suave: #6B5A4D;
  --tinta-fraca: #766758;   /* 4,56:1 no papel e 5,06:1 na superfície (era #857566: 4,12:1 no cartão) — igual ao inkFaint do app */
  --fio: #E0D5C4;
  --terracota: #9C4D2F;
  --terracota-forte: #86401F;
  --terracota-sobre: #FBF6EE;
  --salvia: #6F8069;
  --salvia-tinta: #4B5D48;  /* 5,02:1 até na sálvia suave sobre o papel (era #5B6D57: 3,94:1) — igual ao sageInk do app */
  --salvia-suave: rgba(111, 128, 105, 0.16);
  --terra: #3D2B20;
  --terra-alta: #4B3729;
  --creme: #E3D5B7;
  --creme-fio: #D9C7A3;   /* o fio creme precisa de um tom a mais para não sumir no papel */
  --marrom: #5B3A22;
  --cafe: #171210;
  --perigo: #B23B2E;
  --bisel: #1F1613;
  --bisel-borda: rgba(42, 28, 19, 0.22);
  --vidro: rgba(250, 246, 238, 0.72);
  --vidro-borda: rgba(255, 255, 255, 0.65);
  --sombra: 0 30px 70px -30px rgba(42, 28, 19, 0.38), 0 8px 22px -12px rgba(42, 28, 19, 0.22);
  --sombra-leve: 0 12px 34px -20px rgba(42, 28, 19, 0.3);
  --marca-aura: rgba(42, 28, 19, 0.26);   /* aura translúcida em volta do disco da cruz (todos os lados) */
  --wordmark-filtro: none;
  --cruz-bullet: url("assets/marca/mark-brown.webp");

  --f-titulo: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-escritura: "Lora", Georgia, "Times New Roman", serif;

  --r12: 12px; --r18: 18px; --r28: 28px; --r36: 36px;
  --topo-altura: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #171210;
    --superficie: #211A16;
    --superficie-alta: #2B221D;
    --tinta: #F1EADF;
    --tinta-suave: #BFB0A0;
    --tinta-fraca: #908173;   /* 4,55:1 na superfície (era #8C7D70: 4,32:1) */
    --fio: #3B3028;
    --terracota: #D27C52;
    --terracota-forte: #E08E64;
    --terracota-sobre: #1B1310;
    --salvia: #9AAE92;
    --salvia-tinta: #B5C6AD;
    --salvia-suave: rgba(154, 174, 146, 0.18);
    --terra: #2A1F19;
    --terra-alta: #37291F;
    --creme-fio: #E3D5B7;
    --marrom: #8A6242;
    --perigo: #E06A57;
    --bisel: #0F0B09;
    --bisel-borda: rgba(255, 255, 255, 0.14);
    --vidro: rgba(23, 18, 16, 0.72);
    --vidro-borda: rgba(255, 255, 255, 0.1);
    --sombra: 0 30px 70px -30px rgba(0, 0, 0, 0.7), 0 8px 22px -12px rgba(0, 0, 0, 0.5);
    --sombra-leve: 0 12px 34px -20px rgba(0, 0, 0, 0.6);
    --marca-aura: rgba(255, 240, 220, 0.16);
    --wordmark-filtro: brightness(1.38) saturate(0.92);
    --cruz-bullet: url("assets/marca/mark-cream.webp");
    color-scheme: dark;
  }
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-altura) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 500 1.0625rem/1.6 var(--f-texto);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-titulo); font-weight: 600; color: var(--tinta); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--terracota); color: var(--terracota-sobre); }

.pular {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r12);
  background: var(--tinta); color: var(--papel); font-weight: 700;
}
.pular:focus { top: 12px; }

/* ── vocabulário tipográfico ───────────────────────────────────────────── */
.olho {
  font: 700 0.78rem/1.3 var(--f-texto);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--salvia-tinta);
}
.olho--terracota { color: var(--terracota); }
.titulo {
  font-size: clamp(1.9rem, 1.05rem + 2.3vw, 2.85rem);
  line-height: 1.1; letter-spacing: -0.02em;
  margin-top: 14px; max-width: 24ch;
}
.escritura { font-family: var(--f-escritura); font-style: italic; font-weight: 400; }
.escritura--nota {
  margin-top: 18px; padding-left: 16px;
  border-left: 2px solid var(--salvia);
  color: var(--tinta-suave); font-size: 1.05rem; line-height: 1.5;
  max-width: 44ch;
}
.escritura--nota span { display: block; margin-top: 4px; font: 700 0.75rem var(--f-texto); letter-spacing: 0.12em; text-transform: uppercase; color: var(--salvia-tinta); font-style: normal; }

/* ── botões ───────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 14px;
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  font: 700 1rem/1 var(--f-texto); letter-spacing: -0.005em;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.botao:active { transform: scale(.98); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .botao:hover { transform: translateY(-2px); }
}
.botao--primario { background: var(--terracota); color: var(--terracota-sobre); box-shadow: 0 10px 24px -14px rgba(156, 77, 47, 0.7); }
.botao--primario:hover { background: var(--terracota-forte); }
.botao--secundario { background: var(--superficie); color: var(--tinta); border-color: var(--fio); }
.botao--secundario:hover { border-color: var(--tinta); }
.botao--grande { min-height: 54px; padding: 0 28px; border-radius: var(--r18); font-size: 1.0625rem; }

/* ── topo (vidro, fixo, aparece depois da abertura) ───────────────────── */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--fio);
  box-shadow: 0 10px 30px -24px rgba(42, 28, 19, 0.45);
  opacity: 0; visibility: hidden; translate: 0 -10px;
  transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s linear 0.3s;
}
.topo.visivel { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s; }
html:not(.tem-js) .topo { position: sticky; opacity: 1; visibility: visible; translate: none; }
.topo__interno {
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px);
  height: var(--topo-altura);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.topo__marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.topo__marca img { height: 28px; width: auto; }
.topo__wordmark { height: 19px !important; filter: var(--wordmark-filtro); }
.topo__cta { min-height: 40px; padding: 0 16px; font-size: 0.925rem; border-radius: var(--r12); }

/* ── o beta (25/09): o Crucis começa em poucas igrejas ────────────────────
   Um selo discreto AO LADO da marca (a logo não se cobre nem se redesenha) e o
   "em breve" do que só abre com mais igrejas. Fio e tinta sálvia, sem fundo:
   informa sem gritar. Quando o beta acabar, é tirar as duas classes daqui e do HTML. */
.selo-beta {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border: 1px solid var(--fio); border-radius: 999px;
  font: 800 0.72rem/1 var(--f-texto); letter-spacing: 0.02em; text-transform: none;
  color: var(--salvia-tinta); white-space: nowrap; vertical-align: middle;
}
.rodape__nome .selo-beta { font-weight: 800; color: var(--salvia-tinta); margin: 0 2px; }
.em-breve {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border: 1px solid var(--fio); border-radius: 999px;
  letter-spacing: 0.08em; color: var(--tinta-suave);
}

/* ── abertura: só a logo, tecida em cena ──────────────────────────────── */
.abertura {
  --marca: clamp(150px, 24vmin, 230px);   /* largura da cruz */
  --furo: calc(var(--marca) * 0.30);       /* início escondido dentro da cruz original */
  position: relative; overflow: clip;
}
.abertura__cena {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center;
  padding: 28px 20px;
}
.abertura__trama {
  position: absolute; left: 0; right: 0; top: -25%; bottom: -25%;
  width: 100%; height: 150%;
  pointer-events: none;
  translate: 0 var(--dy, 0px);
  /* os fios entram por baixo da cruz: um furo suave no centro (o centro do SVG é o centro da cruz) */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent var(--furo), #000 calc(var(--furo) + 24px));
  mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent var(--furo), #000 calc(var(--furo) + 24px));
  opacity: 0.9;
  transition: opacity 1.4s ease 1.2s;
}
.abertura.tecida .abertura__trama { opacity: 0.68; }
.abertura__trama path { fill: none; stroke-width: 7; stroke-linecap: round; }
.abertura__trama .fio--terracota { stroke: var(--terracota); }
.abertura__trama .fio--creme { stroke: var(--creme-fio); }
.abertura__trama .fio--salvia { stroke: var(--salvia); }
.abertura__trama .fio--marrom { stroke: var(--marrom); }
.tem-js .abertura.pronta .abertura__trama path { transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(180ms + var(--k, 0) * 55ms); }

.abertura__lockup { position: relative; grid-row: 2; display: grid; justify-items: center; width: var(--marca); }
/* a logo fica sobre um disco branco do tamanho exato do desenho (as pontas dos braços tocam a borda):
   a trama passa por trás e nenhuma borda branca sobra além da cruz. O desenho ocupa 93,75% do PNG (raio 120 de 256). */
.abertura__marca { position: relative; z-index: 1; display: block; isolation: isolate; width: var(--marca); }
.abertura__marca::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: calc(var(--marca) * 0.9375); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: #FFFFFF;
  /* aura centrada: sai por igual para todos os lados, sem deslocamento, e cresce junto com a cruz */
  box-shadow: 0 0 calc(var(--marca) * 0.09) 0 var(--marca-aura);
}
.abertura__marca img { position: relative; display: block; width: 100%; height: auto; }
/* nomes: pendurados abaixo da cruz, sobre um halo de papel (o fio sul passa por trás, não por cima do texto) */
.abertura__nomes {
  position: absolute; z-index: 0; top: calc(100% + clamp(14px, 3vmin, 26px)); left: 50%; translate: -50% 0;
  width: max-content; display: grid; justify-items: center; gap: 18px;
  padding: 4px 8px;
}
.abertura__nomes::before {
  /* sobe até o disco branco: o fio sul some por trás do disco e do nome, sem pontas soltas entre os dois */
  content: ""; position: absolute; z-index: -1; inset: -84px -64px -34px;
  background: radial-gradient(ellipse farthest-side at center, var(--papel) 62%, transparent 100%);
}
.abertura__h1 { display: grid; justify-items: center; gap: 10px; }
.abertura__wordmark { height: clamp(34px, 5.2vmin, 52px); width: auto; filter: var(--wordmark-filtro); }
.abertura__tagline { height: clamp(8px, 1.25vmin, 12px); width: auto; }
.abertura__linha { text-align: center; color: var(--tinta-suave); }

.abertura__pe {
  grid-row: 3; align-self: end;
  display: grid; justify-items: center;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.abertura__dica {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--vidro); border: 1px solid var(--fio); color: var(--tinta-suave);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--sombra-leve);
  animation: flutua 2.6s ease-in-out infinite;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.abertura__dica:hover { color: var(--terracota); border-color: var(--terracota); }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* estados iniciais (só com JS): cada peça surge na sua vez */
/* a cruz já aparece inteira no primeiro quadro; os fios nascem de dentro dela */
.tem-js .abertura__marca img { opacity: 1; scale: 1; }
.tem-js .abertura__linha, .tem-js .abertura__dica { opacity: 0; translate: 0 10px; }
.tem-js .abertura__nomes { opacity: 0; translate: -50% 10px; }
.tem-js .abertura.pronta .abertura__marca img { opacity: 1; scale: 1; }
.tem-js .abertura.pronta .abertura__nomes { opacity: 1; translate: -50% 0; transition: opacity 0.8s ease 1.2s, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s; }
.tem-js .abertura.pronta .abertura__linha { opacity: 1; translate: 0 0; transition: opacity 0.7s ease 1.7s, translate 0.7s ease 1.7s; }
.tem-js .abertura.pronta .abertura__dica { opacity: 1; translate: 0 0; transition: opacity 0.7s ease 2.05s, translate 0.7s ease 2.05s; }

/* convite (/c/CODIGO): a abertura encolhe e o cartão vem logo abaixo */
.abertura.com-convite .abertura__cena { min-height: 0; grid-template-rows: auto auto; padding: calc(var(--topo-altura) + 28px) 20px 0; --marca: clamp(120px, 16vmin, 150px); }
.abertura.com-convite .abertura__lockup { grid-row: 1; margin-bottom: calc(clamp(34px, 5.2vmin, 52px) + clamp(8px, 1.25vmin, 12px) + 84px); }
.abertura.com-convite .abertura__pe { display: none; }

@media (max-height: 560px) {
  .abertura { --marca: clamp(110px, 20vmin, 150px); }
  .abertura__nomes { gap: 10px; }
  .abertura__dica { width: 38px; height: 38px; }
}

/* ── seções ───────────────────────────────────────────────────────────── */
.secao { position: relative; padding: clamp(72px, 9vw, 128px) 0; }
.secao__interno { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.secao__interno--estreito { max-width: 820px; }
.secao__cabeca { max-width: 780px; margin-bottom: clamp(40px, 6vw, 64px); }

/* ── convite ──────────────────────────────────────────────────────────── */
.secao--convite { padding-top: 0; }
.convite {
  background: var(--superficie); border: 1px solid var(--fio);
  border-radius: var(--r28); padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--sombra-leve);
}
.convite .codigo { margin-bottom: 18px; }
.convite__quem { margin: 10px 0 18px; color: var(--tinta-suave); font-size: 1.05rem; line-height: 1.5; }
.convite .sucesso__acoes { margin-top: 0; }
.passos { margin-top: 22px; display: grid; gap: 10px; counter-reset: passo; }
.passos li { position: relative; padding-left: 40px; color: var(--tinta-suave); line-height: 1.5; counter-increment: passo; }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--salvia-suave); color: var(--salvia-tinta); font: 700 0.85rem var(--f-texto);
}
.passos strong { color: var(--tinta); }
.convite__nota { margin: 22px 0 18px; padding-top: 18px; border-top: 1px solid var(--fio); color: var(--tinta-suave); font-size: 0.975rem; line-height: 1.55; }

/* ── celular (moldura em CSS, nada de PNG de iPhone) ──────────────────── */
.celular {
  margin: 0;
  padding: 9px;
  border-radius: 44px;
  background: var(--bisel);
  border: 1px solid var(--bisel-borda);
  box-shadow: var(--sombra), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.celular__tela {
  position: relative; overflow: hidden;
  aspect-ratio: 360 / 780;
  border-radius: 36px;
  background: var(--superficie);
}
.celular__tela img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.celular__tela picture { height: 100%; }

/* ── diferenciais (vitrine + trama lateral) ───────────────────────────── */
.secao--diferenciais { padding-top: clamp(40px, 6vw, 72px); }
.vitrine { position: relative; }
.vitrine__trama, .vitrine__fixo { display: none; }
.item {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  padding: clamp(36px, 6vw, 56px) 0; border-top: 1px solid var(--fio);
}
.item:first-child { border-top: 0; padding-top: 0; }
.item h2 { margin-top: 12px; font-size: clamp(1.85rem, 1.2rem + 2vw, 2.7rem); line-height: 1.08; letter-spacing: -0.024em; max-width: 16ch; }
.item__texto > p:not(.olho):not(.escritura):not(.item__chamada) { margin-top: 16px; color: var(--tinta-suave); font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.55; max-width: 40ch; }
.item__chamada { margin-top: 18px; font-weight: 700; }
.item__chamada a { color: var(--terracota); text-decoration-color: color-mix(in srgb, var(--terracota) 40%, transparent); }
.item__chamada a::after { content: " ↓"; }
.celular--item { width: min(72vw, 250px); justify-self: center; }
@media (max-width: 639px) {
  /* no celular, cada tela aparece cortada com esmaecimento: a página fica mais curta e o ritmo, mais leve */
  .celular--item { max-height: 400px; overflow: hidden; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: none;
    -webkit-mask-image: linear-gradient(#000 74%, transparent); mask-image: linear-gradient(#000 74%, transparent); }
  .celular--item .celular__tela { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  /* o fim do feed fica no rodapé da tela: mostra o fundo do celular e esmaece o topo */
  .celular--fundo { display: flex; flex-direction: column; justify-content: flex-end; border-radius: 0 0 44px 44px; border-bottom: 1px solid var(--bisel-borda); border-top: 0;
    -webkit-mask-image: linear-gradient(transparent, #000 26%); mask-image: linear-gradient(transparent, #000 26%); }
  .celular--fundo .celular__tela { flex: none; border-radius: 0 0 36px 36px; }
  /* a porta do app inteira: o botão "Tenho um convite" fica embaixo */
  .celular--inteiro { max-height: none; overflow: visible; border-radius: 44px; border-bottom: 1px solid var(--bisel-borda); box-shadow: var(--sombra); -webkit-mask-image: none; mask-image: none; }
  .celular--inteiro .celular__tela { border-radius: 36px; }
}
@media (min-width: 640px) {
  .item { grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; }
  .celular--item { width: 240px; justify-self: end; }
}

/* níveis do Galardão: da aurora ao dia perfeito */
.niveis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin-top: 18px; }
.niveis li { display: inline-flex; align-items: center; gap: 7px; font: 600 0.85rem var(--f-texto); color: var(--tinta-suave); white-space: nowrap; }
.niveis li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--nivel, var(--creme)); box-shadow: inset 0 0 0 1px rgba(42, 28, 19, 0.12); }
.niveis li:not(:last-child)::after { content: "→"; margin-left: 4px; color: var(--tinta-fraca); font-weight: 500; }
.niveis li:nth-child(1) { --nivel: #E3D5B7; }
.niveis li:nth-child(2) { --nivel: #DBB98F; }
.niveis li:nth-child(3) { --nivel: #CD9364; }
.niveis li:nth-child(4) { --nivel: #B86A44; }
.niveis li:nth-child(5) { --nivel: #9C4D2F; color: var(--tinta); }
@media (prefers-color-scheme: dark) { .niveis li:nth-child(5) { --nivel: #D27C52; } }

@media (min-width: 1000px) {
  .vitrine {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 320px;
    column-gap: clamp(32px, 5vw, 88px);
  }
  .vitrine__trama {
    display: block; position: relative;
    /* o traço já tecido esmaece nos últimos ~150 px antes do ponto atual (--p, em px, vem do scroll) */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--p, 0px) - 150px), transparent var(--p, 0px));
    mask-image: linear-gradient(to bottom, #000 calc(var(--p, 0px) - 150px), transparent var(--p, 0px));
  }
  .trama { position: absolute; inset: 0; width: 44px; height: 100%; overflow: visible; }
  .trama__fio { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0.92; }
  .trama__fio--terracota { stroke: var(--terracota); }
  .trama__fio--creme { stroke: var(--creme-fio); }
  .trama__fio--salvia { stroke: var(--salvia); }
  .trama__fio--marrom { stroke: var(--marrom); }

  .item { grid-template-columns: 1fr; min-height: 72vh; padding: 5vh 0; border-top: 0; }
  .item:first-child { min-height: 56vh; padding-top: 0; align-items: start; }
  .item:last-child { min-height: 56vh; padding-bottom: 0; }
  .item__texto { transition: opacity 0.45s ease; }
  .tem-js .item:not(.ativo) .item__texto { opacity: 0.3; }
  .tem-js .celular--item { display: none; }
  .vitrine__fixo { display: block; position: relative; }
  .celular--fixo {
    position: sticky; top: clamp(84px, calc(50vh - 340px), 132px);
    width: 320px;
  }
  .celular--fixo .celular__tela picture { position: absolute; inset: 0; z-index: 1; opacity: 0; transform: scale(0.985); transition: opacity 0s linear 0.6s, transform 0s linear 0.6s; }
  .celular--fixo .celular__tela picture.ativa { z-index: 2; opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .celular--fixo { width: 270px; top: 84px; }
}

/* ── pré-cadastro ─────────────────────────────────────────────────────── */
.secao--pre { background: linear-gradient(180deg, transparent 0%, var(--superficie-alta) 18%, var(--superficie-alta) 82%, transparent 100%); }
@media (prefers-color-scheme: dark) { .secao--pre { background: linear-gradient(180deg, transparent 0%, #1D1613 18%, #1D1613 82%, transparent 100%); } }
.pre { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.pre__texto { margin-top: 18px; font-size: 1.125rem; line-height: 1.55; color: var(--tinta-suave); max-width: 46ch; }
.pre__garantias { margin-top: 24px; display: grid; gap: 10px; }
.pre__garantias li { position: relative; padding-left: 28px; color: var(--tinta-suave); font-weight: 600; font-size: 0.975rem; }
.pre__garantias li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; background: var(--cruz-bullet) center / contain no-repeat; }
.pre__cartao {
  background: var(--superficie); border: 1px solid var(--fio);
  border-radius: var(--r28); padding: clamp(22px, 3vw, 40px);
  box-shadow: var(--sombra-leve);
}
@media (min-width: 900px) {
  .pre { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .pre__lado { position: sticky; top: calc(var(--topo-altura) + 32px); }
}

.contador {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px; color: var(--tinta-suave); font-weight: 600;
}
.contador__pulso {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--salvia);
  animation: pulso 2.6s ease-out infinite;
}
.contador__numero { font: 700 1.3rem/1 var(--f-titulo); color: var(--tinta); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--salvia) 55%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.formulario { display: grid; gap: 20px; }
.formulario__convite { padding: 12px 16px; border-radius: var(--r12); background: var(--salvia-suave); color: var(--salvia-tinta); font-weight: 600; font-size: 0.95rem; line-height: 1.45; }
.formulario__convite strong { color: var(--tinta); letter-spacing: 0.06em; }
.campo { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo label, .campo legend {
  display: block; margin-bottom: 8px; padding: 0;
  font: 700 0.78rem/1.3 var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave);
}
.campo__opcional { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--tinta-fraca); margin-left: 6px; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo select {
  width: 100%; min-height: 50px; padding: 0 16px;
  border-radius: 14px; border: 1px solid var(--fio);
  background: var(--papel); color: var(--tinta);
  font: 500 1rem var(--f-texto);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo input::placeholder { color: var(--tinta-fraca); opacity: 1; }
.campo input:hover, .campo select:hover { border-color: color-mix(in srgb, var(--tinta) 30%, var(--fio)); }
.campo input:focus-visible, .campo select:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; border-color: transparent; }
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5A4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.campo.invalido input, .campo.invalido select { border-color: var(--perigo); }
.campo__erro { display: none; margin-top: 7px; font-size: 0.875rem; font-weight: 600; color: var(--perigo); }
.campo__erro:not(:empty) { display: block; }
.campo--cidade { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 12px; }
.campo--cidade .campo__erro { grid-column: 1 / -1; margin-top: -4px; }
.campo--isca { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes label { position: relative; margin: 0; }
.opcoes input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opcoes span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--fio); background: var(--papel);
  font-weight: 600; font-size: 0.95rem; color: var(--tinta-suave); cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.opcoes input:hover + span { border-color: color-mix(in srgb, var(--tinta) 30%, var(--fio)); }
.opcoes input:checked + span { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.opcoes input:focus-visible + span { outline: 2px solid var(--terracota); outline-offset: 2px; }

.formulario__erro { padding: 12px 16px; border-radius: var(--r12); background: color-mix(in srgb, var(--perigo) 12%, transparent); color: var(--perigo); font-weight: 600; font-size: 0.95rem; }
.formulario__enviar { width: 100%; margin-top: 4px; }
.formulario__enviar .botao__enviando { display: none; }
.formulario__enviar[aria-busy="true"] { opacity: 0.85; pointer-events: none; }
.formulario__enviar[aria-busy="true"] .botao__rotulo { display: none; }
.formulario__enviar[aria-busy="true"] .botao__enviando { display: inline; }
.formulario__nota { font-size: 0.85rem; line-height: 1.5; color: var(--tinta-fraca); }

.sucesso { outline: none; }
.sucesso__titulo { margin-top: 10px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -0.02em; }
.codigo {
  margin: 22px 0; padding: 22px 20px; text-align: center;
  border: 1.5px dashed color-mix(in srgb, var(--terracota) 55%, transparent);
  border-radius: var(--r18); background: var(--papel);
  font: 700 clamp(1.7rem, 1rem + 3vw, 2.9rem)/1 var(--f-titulo);
  letter-spacing: 0.1em; color: var(--terracota); user-select: all;
  overflow-wrap: anywhere;
}
.sucesso__texto { color: var(--tinta-suave); line-height: 1.55; }
/* o e-mail do pré-cadastro é a chave de entrada no app: mesmo destaque que o código tinha */
.sucesso__email {
  margin: 22px 0; padding: 18px 20px; text-align: center;
  border: 1.5px dashed color-mix(in srgb, var(--terracota) 55%, transparent);
  border-radius: var(--r18); background: var(--papel);
  font: 700 clamp(1.05rem, 0.9rem + 1vw, 1.45rem)/1.3 var(--f-texto);
  color: var(--terracota); overflow-wrap: anywhere;
}
.sucesso__posicao { margin-top: 10px; font-weight: 700; color: var(--salvia-tinta); }
.sucesso__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.sucesso__aviso { min-height: 1.4em; margin-top: 10px; font-weight: 700; color: var(--salvia-tinta); font-size: 0.95rem; }
.sucesso .formulario__nota { margin-top: 14px; }

/* ── perguntas ────────────────────────────────────────────────────────── */
.faq__item { border: 1px solid var(--fio); background: var(--superficie); border-radius: 22px; padding: 0 22px; margin-bottom: 12px; }
.faq__item:last-child { margin-bottom: 0; }
.faq__item h3 { margin: 0; }
.faq__item button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 0; text-align: left;
  font: 600 1.15rem/1.35 var(--f-texto); color: var(--tinta);
}
.faq__item button:hover .faq__sinal { border-color: var(--tinta); }
.faq__item button:focus-visible { outline: 2px solid var(--terracota); outline-offset: 4px; border-radius: 8px; }
.faq__sinal { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--fio); transition: border-color 0.2s ease, transform 0.36s ease; }
.faq__sinal::before, .faq__sinal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--tinta); transform: translate(-50%, -50%); transition: transform 0.36s ease; }
.faq__sinal::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item button[aria-expanded="true"] .faq__sinal::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.36s ease; }
.faq__painel[hidden] { display: none; }
.faq__painel > div { overflow: hidden; }
.faq__painel.aberto { grid-template-rows: 1fr; }
.faq__painel p { padding: 0 44px 24px 0; color: var(--tinta-suave); line-height: 1.6; }

/* ── rodapé ───────────────────────────────────────────────────────────── */
.rodape { border-top: 1px solid var(--fio); padding: 48px 0 44px; }
.rodape__interno {
  max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px;
}
.rodape__marca { display: flex; align-items: center; gap: 14px; }
.rodape__nome { font: 700 1.05rem var(--f-texto); color: var(--tinta); }
.rodape__nome span { font-weight: 500; color: var(--tinta-suave); }
.rodape__empresa { margin-top: 2px; font-size: 0.9rem; color: var(--tinta-suave); }
.rodape__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.9rem; color: var(--tinta-suave); }
.rodape__links a { font-weight: 600; }
.fim-pagina {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 64px; padding: 0 20px;
  text-align: center; color: var(--tinta-suave); font-size: 1.1rem;
}
.fim-pagina img { opacity: 0.85; }

/* ── movimento ────────────────────────────────────────────────────────── */
.tem-js .revela { opacity: 0; transform: translateY(16px); transition: opacity 0.44s ease, transform 0.44s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 45ms); }
.tem-js .revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tem-js .revela { opacity: 1; transform: none; transition: none; }
  .tem-js .abertura__marca img, .tem-js .abertura__nomes, .tem-js .abertura__linha, .tem-js .abertura__dica { opacity: 1; scale: 1; translate: 0 0; transition: none; }
  .tem-js .abertura__nomes { translate: -50% 0; }
  .tem-js .abertura.pronta .abertura__trama path { transition: none; }
  .abertura__trama { transition: none; opacity: 0.68; }
  .abertura__fio-dica { animation: none; background-position: 0 50%; }
  .topo, .celular--fixo .celular__tela picture, .item__texto, .faq__painel, .faq__sinal, .faq__sinal::before, .faq__sinal::after { transition: none; }
  .contador__pulso { animation: none; }
}

/* ── páginas de texto (privacidade / termos) ──────────────────────────── */
.documento { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 40px) 80px; }
body:has(> .documento) .topo { position: sticky; opacity: 1; visibility: visible; translate: none; }
.documento h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -0.025em; line-height: 1.08; margin-top: 12px; }
.documento h2 { font-size: 1.35rem; letter-spacing: -0.01em; margin-top: 40px; }
.documento p, .documento li { margin-top: 12px; color: var(--tinta-suave); line-height: 1.65; }
.documento ul { padding-left: 20px; list-style: disc; }
.documento strong { color: var(--tinta); }
.documento .selo { display: inline-block; margin-top: 18px; padding: 6px 12px; border-radius: 999px; background: var(--salvia-suave); color: var(--salvia-tinta); font: 700 0.78rem var(--f-texto); letter-spacing: 0.08em; text-transform: uppercase; }
.documento .voltar { display: inline-flex; margin-top: 40px; font-weight: 700; }

/* ── ajuda e excluir conta (29/09): o mesmo molde, com caixas e passos ────
   Nada fica escondido atrás de um clique: quem chega pela loja (ou quem revisa
   o app para ela) lê tudo de uma vez. O índice leva a cada pergunta; os passos
   numerados são o `.passos` do cartão de convite. */
.documento h3 { font-size: 1.1rem; letter-spacing: -0.005em; margin-top: 28px; }
.documento h2 + h3 { margin-top: 18px; }
.documento .abre { font-size: 1.125rem; line-height: 1.6; }
.documento .caixa {
  margin-top: 28px; padding: clamp(20px, 4vw, 30px);
  background: var(--superficie); border: 1px solid var(--fio); border-radius: var(--r18);
}
.documento .caixa > :first-child { margin-top: 0; }
.documento .caixa h2 { margin-top: 6px; }
.documento .caixa--destaque { border-color: color-mix(in srgb, var(--terracota) 40%, var(--fio)); box-shadow: var(--sombra-leve); }
.documento .passos { margin-top: 18px; }
.documento .passos li { margin-top: 0; }
.documento .contato { display: inline-block; margin-top: 2px; font: 700 clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem)/1.35 var(--f-texto); color: var(--terracota); overflow-wrap: anywhere; }
.documento .nota { margin-top: 16px; padding: 12px 16px; border-radius: var(--r12); background: var(--salvia-suave); color: var(--salvia-tinta); font-weight: 600; }
.documento .nota strong { color: inherit; }
.documento .indice { margin-top: 32px; padding: 2px 0 2px 18px; border-left: 2px solid var(--salvia); }
.documento .indice ol { margin-top: 4px; }
.documento .indice li { margin-top: 0; break-inside: avoid; }
.documento .indice a { display: inline-block; padding: 9px 0; font-weight: 600; color: var(--tinta); text-decoration: none; line-height: 1.4; }
.documento .indice a:hover { text-decoration: underline; }
@media (min-width: 700px) { .documento .indice ol { columns: 2; column-gap: 32px; } }
.rodape__links a[aria-current="page"] { color: var(--tinta); text-decoration: none; }