/* ───────────────────────────────────────────────────────────── lp.css · comportamento que no protótipo era estado do React. O protótipo renderiza DUAS árvores diferentes (desktop / mobile), com o mesmo ponto de rutura de 1080px do sistema de design. ───────────────────────────────────────────────────────────── */ html{scroll-behavior:smooth} body{margin:0;background:var(--bg-page);color:var(--text-primary);overflow-x:hidden} .colmob{max-width:560px;margin:0 auto;position:relative;box-shadow:0 0 90px rgba(0,0,0,.6)} /* O atributo hidden só vale display:none na folha do browser, por isso qualquer display nosso (grid, flex…) ganha-lhe e o elemento fica à vista na mesma. Aconteceu: o cartão de "Pergunta recebida" aparecia por baixo do formulário antes de alguém submeter. */ [hidden]{display:none!important} /* Alternância das duas árvores. */ @media (max-width:1080px){ .v-desktop{display:none!important} } @media (min-width:1081px){ .v-mobile{display:none!important} } /* ── Popup do formulário ───────────────────────────────────── */ #popup{position:fixed;inset:0;z-index:80;display:none;background:rgba(8,8,10,.78);backdrop-filter:blur(6px)} #popup.aberto{display:grid} @media (min-width:1081px){ #popup{place-items:center;padding:24px} } @media (max-width:1080px){ #popup{place-items:end;padding:0} } body.popup-aberto{overflow:hidden} /* O #popup centra o formulário numa grelha fixa: se o form for mais alto do que o ecrã, o excesso sai para fora em cima e em baixo e não há como lá chegar. Daí o max-height sempre presente — com overflow-y:auto, se não couber, rola por dentro em vez de cortar. */ #leadForm{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%; background:var(--bg-surface);box-shadow:var(--shadow-lift);overflow-y:auto} @media (min-width:1081px){ #leadForm{max-width:500px;padding:20px 28px;border-radius:var(--radius-lg); max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)} } @media (max-width:1080px){ #leadForm{max-width:none;padding:18px 18px 22px;border-radius:26px 26px 0 0; max-height:90vh;max-height:90dvh} } /* ── Foto do hero ────────────────────────────────────────────── O object-position vinha inline do protótipo, calibrado para a foto antiga. Na foto nova (retrato mais fechado) a caixa do mobile é 560×380 e ao 8% original o queixo ficava cortado. No desktop a caixa é vertical e o valor original continua bom. */ .v-mobile img[src*="pedro-hero"]{object-position:center 24%!important} /* ── Foto da ampulheta (secção "quem te vai guiar") ──────────── A caixa do mobile era 4/3 e mostrava só metade da foto: cortava a ampulheta a meio e a mão não aparecia. A 1/1 vê-se o Pedro, a ampulheta inteira e a mão a segurá-la. O desktop já era 4/5 e mostrava tudo — fica como está. */ .v-mobile div:has(> img[src*="pedro-bio"]){aspect-ratio:1/1!important} /* ── Campos ────────────────────────────────────────────────── */ .campo{display:block;position:relative} .campo input,.campo select{width:100%;background:var(--bg-field);border:1px solid var(--border-subtle); border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans); font-size:var(--fs-body);font-weight:var(--w-semibold);outline:none; transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)} .campo input{padding:22px 16px 9px} .campo input:focus,.campo select:focus{border-color:var(--azul-linha);background:var(--bg-field-focus)} .campo input::placeholder{color:transparent} /* Rótulo flutuante — no protótipo era state; aqui é :has(). */ .rotulo{position:absolute;left:17px;pointer-events:none;z-index:2; transition:all var(--dur-fast) var(--ease-out);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:calc(100% - 34px); top:50%;transform:translateY(-50%); font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--w-medium); letter-spacing:0;text-transform:none;color:var(--text-muted)} .campo:has(input[placeholder]:focus) .rotulo, .campo:has(input[placeholder]:not(:placeholder-shown)) .rotulo, .campo:has(select:focus) .rotulo, .campo:has(select:valid) .rotulo{ top:7px;transform:none;font-family:var(--font-label);font-size:10px; font-weight:var(--w-semibold);letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--text-accent)} /* ── Telefone: indicativo + número ─────────────────────────── */ .campo-tel .par{display:grid;grid-template-columns:104px 1fr;gap:6px} .campo-tel .rotulo{left:116px;max-width:calc(100% - 132px)} #ccode{appearance:none;padding:16px 10px;font-family:var(--font-label);font-size:14px;cursor:pointer} /* ── Perguntas de qualificação ───────────────────────────────── Rótulo visível por cima, não flutuante: uma das perguntas tem 86 caracteres e num rótulo flutuante (nowrap + ellipsis) ficava cortada. */ .campo-pergunta > label{display:block;margin-bottom:6px;font-family:var(--font-sans); font-size:13.5px;font-weight:var(--w-semibold);line-height:1.35;color:var(--text-primary)} .campo-select{position:relative} .campo-select select{appearance:none;padding:15px 44px 15px 16px;cursor:pointer} .campo-select select:invalid{color:var(--text-muted);font-weight:var(--w-medium)} .campo-select .seta{display:inline-block;width:18px;height:18px;background:var(--text-muted); mask-image:url("/assets/icons/chevron-down.svg");mask-repeat:no-repeat;mask-position:center; mask-size:contain;position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none} /* O popup do