/* Vimel Home — /prestadores (12/09/2026): a página de conversão do Grupo VIP de prestadores.
   Mesma identidade do site (BrandBook 2026 — ver site/style.css): Zalando Sans + STIX Two Text itálico;
   Emerald #71CC98 · deep #13322B · jet #0C2122 · ink #040F0F · Platinum #F1F6F6. As regras que não se
   negociam valem aqui também: texto sobre Emerald é SEMPRE Jet; itálico Emerald só sobre fundo escuro.
   Nenhum par de cor novo: todos os que esta página usa já estão em tools/contraste.mjs.
   O 3D é WebGL (cena.js). Sem WebGL, com "reduzir movimento" ou até a cena ficar pronta, cada palco
   mostra a mascote em imagem (.reserva) e o "Como funciona" vira uma lista — a página nunca depende dele. */
:root {
  --emerald: #71CC98; --seagrass: #56B093; --forest: #285C4D; --deep: #13322B; --jet: #0C2122; --ink: #040F0F;
  --platinum: #F1F6F6; --mint: #E1EDEA;
  --muted-on-dark: rgba(225, 237, 234, 0.74); --muted-on-light: rgba(12, 33, 34, 0.68);
  --font-sans: 'Zalando Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'STIX Two Text', Georgia, 'Times New Roman', serif;
  --wrap: 1240px; --pad: 40px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { font-family: var(--font-sans); background: var(--ink); color: var(--platinum); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 999px; }
img { max-width: 100%; display: block; height: auto; }
ol { list-style: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); position: relative; }
em.s { font-family: var(--font-serif); font-style: italic; font-weight: 700; }
.num { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.display { font-weight: 300; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }
.lead { font-weight: 300; line-height: 1.45; text-wrap: pretty; }

/* ---------- Botões (os mesmos do site) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; padding: 15px 30px; border-radius: 999px; line-height: 1.2; border: 0; cursor: pointer; transition: transform .25s var(--ease), background .2s, box-shadow .25s; text-align: center; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-lg { padding: 20px 36px; font-size: 17px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-primary { background: var(--emerald); color: var(--jet); box-shadow: 0 14px 34px -12px rgba(113, 204, 152, 0.6); }
.btn-primary:hover { background: var(--seagrass); }
.btn-dark { background: var(--jet); color: var(--platinum); box-shadow: 0 18px 40px -16px rgba(12, 33, 34, 0.7); }
.btn-dark:hover { background: var(--deep); }
.btn .wa { width: 1.35em; height: 1.35em; flex: 0 0 auto; fill: currentColor; }

/* ---------- Header (sobre o hero, não gruda: no celular quem gruda é a barra do botão) ---------- */
.lp-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.lp-header-in { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.brand img { height: 26px; width: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 2; background: var(--deep); color: var(--platinum); padding: 118px 0 150px; overflow-x: clip; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 1100px; height: 1100px; right: -260px; top: -180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(113, 204, 152, 0.26), rgba(113, 204, 152, 0.07) 55%, transparent 72%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 20px; align-items: start; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; position: relative; z-index: 2; }
.tag { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; border: 1px solid rgba(113, 204, 152, 0.42); background: rgba(113, 204, 152, 0.08); color: var(--emerald); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.25; }
.pulso { position: relative; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--emerald); }
.pulso::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--emerald); opacity: 0; animation: pulso 2s var(--ease) infinite; }
@keyframes pulso { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
.hero h1 { font-size: clamp(42px, 4.7vw, 68px); }
.hero h1 em.s { color: var(--emerald); }
.hero .lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--muted-on-dark); max-width: 560px; }

/* A oferta: vidro sobre o verde profundo com a borda que corre */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.oferta { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 26px 20px 20px; border-radius: 26px; background: rgba(241, 246, 246, 0.06); max-width: 560px; transform-style: preserve-3d; transition: transform .5s var(--ease); }
.oferta::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--ang), rgba(113, 204, 152, 0.18), var(--emerald) 12%, rgba(113, 204, 152, 0.18) 26%, rgba(113, 204, 152, 0.18) 60%, rgba(241, 246, 246, 0.7) 70%, rgba(113, 204, 152, 0.18) 80%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borda 5s linear infinite; pointer-events: none; }
@keyframes borda { to { --ang: 360deg; } }
.oferta-ico { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 16px; background: var(--emerald); color: var(--jet); display: grid; place-items: center; transform: translateZ(30px); box-shadow: 0 12px 24px -10px rgba(4, 15, 15, 0.6); }
.oferta-ico svg { width: 28px; height: 28px; }
.oferta-k { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emerald); margin-bottom: 4px; }
.oferta-v { font-size: clamp(17px, 1.45vw, 20px); font-weight: 300; line-height: 1.35; color: var(--platinum); }
.oferta-v b { font-weight: 600; }
.hero-cta { display: flex; }

.palco { position: relative; }
.palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s var(--ease); touch-action: pan-y; }
.palco.vivo canvas { opacity: 1; }
.palco .reserva { transition: opacity .5s var(--ease); }
.palco.vivo .reserva { opacity: 0; pointer-events: none; }
.palco-hero { height: min(700px, 78vh); min-height: 520px; margin-right: calc(var(--pad) * -1); margin-top: -30px; }
.palco-hero .reserva { position: absolute; left: 50%; top: 50%; width: 78%; max-width: 560px; transform: translate(-50%, -50%); filter: drop-shadow(0 46px 56px rgba(4, 15, 15, 0.45)); animation: flutua 7s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -18px; rotate: 2deg; } }

/* A fita dos ofícios */
.fita { position: absolute; z-index: 3; left: -5%; right: -5%; bottom: -38px; transform: rotate(-2.4deg); background: var(--emerald); color: var(--jet); overflow: hidden; box-shadow: 0 24px 50px -24px rgba(4, 15, 15, 0.6); }
.fita-trilho { display: flex; align-items: center; gap: 34px; width: max-content; padding: 20px 0; animation: fita 26s linear infinite; }
.fita span { font-size: clamp(20px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.fita i { width: 10px; height: 10px; border-radius: 3px; background: var(--jet); transform: rotate(45deg); flex: 0 0 10px; }
@keyframes fita { to { transform: translateX(-50%); } }

/* ---------- Como funciona ---------- */
.como { position: relative; z-index: 1; background: var(--platinum); color: var(--jet); padding-top: 180px; }
.como-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.como-head .num { color: var(--forest); }
.como h2 { font-size: clamp(42px, 5.8vw, 84px); }
.como h2 em.s { color: var(--forest); }
.como-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; padding-top: 70px; padding-bottom: 150px; }
.passos { display: flex; flex-direction: column; gap: 46px; counter-reset: p; }
.passo { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: baseline; border-top: 1px solid rgba(12, 33, 34, 0.16); padding-top: 26px; }
.passo-n { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 44px; line-height: 1; color: var(--forest); }
.passo p { font-size: clamp(22px, 2.1vw, 30px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; text-wrap: pretty; }
.palco-como { height: 640px; margin-right: calc(var(--pad) * -1 - max(0px, (100vw - var(--wrap)) / 2)); }
.palco-como .reserva { position: absolute; left: 50%; top: 50%; width: 70%; max-width: 480px; transform: translate(-50%, -50%); filter: drop-shadow(0 40px 50px rgba(12, 33, 34, 0.22)); }
.progresso { display: none; }

/* Com a cena viva: o trilho alto e a tela que gruda. O progresso (--p, 0→1) é escrito pelo cena.js. */
.com-3d .como-trilho { height: 360vh; }
.com-3d .como-tela { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.com-3d .como-grid { padding-top: 0; padding-bottom: 0; width: 100%; }
.com-3d .passos { display: grid; gap: 0; }
.com-3d .passo { grid-area: 1 / 1; opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease); pointer-events: none; }
.com-3d .passo.ativo { opacity: 1; transform: none; filter: none; }
.com-3d .palco-como { height: min(760px, 84svh); }
.com-3d .progresso { display: flex; gap: 8px; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; }
.progresso i { width: 44px; height: 4px; border-radius: 99px; background: rgba(12, 33, 34, 0.14); overflow: hidden; position: relative; }
.progresso i::after { content: ""; position: absolute; inset: 0; background: var(--forest); transform-origin: left; transform: scaleX(var(--f, 0)); }

/* ---------- O chamado final ---------- */
.final { position: relative; background: var(--emerald); color: var(--jet); display: flex; flex-direction: column; padding-top: 170px; overflow: hidden; }
.final-copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; position: relative; z-index: 2; }
.final .num { color: var(--jet); }
.final h2 { font-size: clamp(42px, 6vw, 88px); max-width: 1000px; }
.final h2 em.s { color: var(--jet); }
.final .lead { font-size: clamp(17px, 1.5vw, 21px); max-width: 680px; color: var(--jet); }
.final .btn { margin-top: 8px; }
.palco-final { order: 2; height: 560px; margin-top: -10px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }

/* ---------- Rodapé ---------- */
.lp-footer { background: var(--ink); color: var(--platinum); padding: 70px 0 60px; }
.lp-footer-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid rgba(225, 237, 234, 0.12); }
.lp-footer nav { display: flex; gap: 26px; font-size: 13px; font-weight: 500; color: rgba(225, 237, 234, 0.7); }
.lp-footer nav a:hover { color: var(--emerald); }
.lp-legal { margin-top: 24px; font-size: 13px; line-height: 1.6; color: rgba(225, 237, 234, 0.66); }
.lp-legal a { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- A barra do botão (celular) ---------- */
.barra-cta { display: none; }

/* ---------- Movimento ---------- */
.in { animation: in-up 1.1s var(--ease) both; }
.in-2 { animation-delay: .1s; } .in-3 { animation-delay: .2s; } .in-4 { animation-delay: .3s; } .in-5 { animation-delay: .4s; }
@keyframes in-up { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .rv { animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes rv-in { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .palco-hero { order: -1; height: 46svh; min-height: 330px; max-height: 470px; margin: -40px calc(var(--pad) * -1) -10px; }
  .hero { padding-top: 84px; }
  .como-grid { grid-template-columns: 1fr; }
  .palco-como { height: 460px; order: -1; margin-left: calc(var(--pad) * -1); }
  .com-3d .como-tela { align-items: stretch; }
  .com-3d .como-grid { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; padding-top: 16px; padding-bottom: 96px; }
  .com-3d .palco-como { height: auto; flex: 1 1 auto; min-height: 0; max-height: 560px; }
  .com-3d .passos { flex: 0 0 auto; min-height: 150px; }
}
@media (max-width: 900px) {
  .lp-header-cta { display: none; }
  .barra-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(4, 15, 15, 0.92) 55%, rgba(4, 15, 15, 0)); transform: translateY(110%); transition: transform .45s var(--ease); pointer-events: none; }
  .barra-cta.mostra { transform: none; pointer-events: auto; }
  .barra-cta .btn { width: 100%; padding: 17px 20px; font-size: 16px; }
}
@media (max-width: 720px) {
  :root { --pad: 22px; }
  body { font-size: 16px; }
  .lp-header-in { height: 66px; }
  .brand img { height: 22px; }
  .hero-copy { gap: 20px; }
  .tag { font-size: 10px; letter-spacing: 0.06em; padding: 8px 14px 8px 10px; gap: 8px; text-wrap: balance; max-width: 300px; }
  .hero h1 { font-size: clamp(38px, 10.6vw, 52px); }
  .oferta { padding: 16px 18px 16px 16px; gap: 14px; border-radius: 22px; }
  .oferta-ico { flex-basis: 46px; width: 46px; height: 46px; border-radius: 14px; }
  .oferta-k { font-size: 11px; letter-spacing: 0.12em; }
  .hero-cta, .hero-cta .btn { width: 100%; }
  .btn-lg { padding: 18px 20px; font-size: 16px; }
  .fita { left: -8%; right: -8%; bottom: -30px; }
  .hero { padding-bottom: 120px; }
  .fita-trilho { padding: 14px 0; gap: 22px; }
  .como { padding-top: 120px; }
  .passo { grid-template-columns: 52px 1fr; gap: 12px; padding-top: 18px; }
  .passo-n { font-size: 34px; }
  .passo p { font-size: 21px; }
  .com-3d .passo { border-top: 0; padding-top: 0; }
  .final { padding-top: 110px; }
  .final .btn { width: 100%; }
  .palco-final { height: 380px; margin-top: -10px; margin-bottom: 40px; }
  .lp-footer { padding: 50px 0 110px; }
  .lp-footer-top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .in, .rv, .pulso::after, .oferta::before, .fita-trilho, .palco-hero .reserva { animation: none !important; }
  .btn, .oferta, .barra-cta { transition: none; }
}

/* ---------- Cadastro (conselho de SEO/Ads, 14/09/2026) ----------
   Os quatro botões da página iam direto para o WhatsApp. Agora abrem este
   formulário, e o link do grupo só aparece depois do envio — é o que torna a
   mídia paga mensurável (o clique pago morre no salto para o WhatsApp).
   Sem par de cor NOVO de propósito: Platinum sobre Jet e Jet sobre Emerald já
   são os pares desta página, declarados em tools/contraste.mjs. */
.lp-cadastro { padding: clamp(56px, 9vw, 104px) 0; background: var(--ink); }
.lp-cad-box {
  max-width: 560px; margin: 0 auto; background: var(--jet);
  border: 1px solid rgba(225, 237, 234, 0.1); border-radius: 22px;
  padding: clamp(26px, 4.5vw, 44px);
}
.lp-cad-titulo { font-weight: 300; letter-spacing: -0.03em; line-height: 1.06; font-size: clamp(24px, 3.6vw, 34px); margin-bottom: 8px; text-wrap: balance; }
.lp-cad-sub { color: var(--muted-on-dark); font-weight: 300; margin-bottom: 24px; }
.lp-campo { display: block; margin-bottom: 16px; }
.lp-campo > span { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 7px; }
.lp-campo > span em { font-style: normal; font-weight: 400; color: var(--muted-on-dark); }
.lp-campo input {
  width: 100%; font: inherit; font-size: 16px; /* 16px: abaixo disso o iOS dá zoom ao focar */
  color: var(--platinum); background: rgba(225, 237, 234, 0.06);
  border: 1px solid rgba(225, 237, 234, 0.16); border-radius: 12px;
  padding: 13px 15px; transition: border-color .18s var(--ease), background .18s var(--ease);
}
.lp-campo input::placeholder { color: rgba(225, 237, 234, 0.42); }
.lp-campo input:focus { outline: none; border-color: var(--emerald); background: rgba(225, 237, 234, 0.09); }
.lp-campo input:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.lp-cad-enviar { width: 100%; margin-top: 8px; justify-content: center; }
.lp-cad-enviar[disabled] { opacity: .6; cursor: progress; }
.lp-cad-erro { margin-top: 12px; font-size: 14px; color: #FFB4A8; }
.lp-cad-nota { margin-top: 14px; font-size: 13px; color: var(--muted-on-dark); text-align: center; }
.lp-cad-ok { text-align: center; }
.lp-cad-ok .btn { margin-top: 6px; }
/* Honeypot: fora da tela e fora do fluxo de foco, mas preenchível por robô que
   varre o DOM. `display:none` seria pior — parte dos robôs ignora campo oculto
   assim, e alguns navegadores nem o enviam. */
.lp-mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }