/* ============================================================================ Vitrina — sistema visual (ilustrado/autoral). Fonte única do visual das landings. Aprovado em 2026-08-23, substituindo o sistema editorial-hairline (eyebrow em caixa alta + grade de cards) que lia como "site de IA". Princípios: - papel quente, não branco frio; - tipografia com voz: Fraunces (serifa macia) no display, Inter no corpo, palavra-chave em itálico colorido — nunca eyebrow em caixa alta; - o gráfico carrega a personalidade: ilustração SVG desenhada à mão e formas orgânicas, no lugar de cards idênticos em grade; - zero emoji, zero pílula genérica, zero tiquinho decorativo. Carregue Fraunces + Inter no da página. ========================================================================= */ :root{ --paper:#FBF6EC; --paper2:#F5EDDD; --paper3:#EFE6D4; --ink:#22332C; --ink2:#4E6459; --green:#0E7C63; --green-d:#0A5648; --green-l:#159C7C; --coral:#EF6D4E; --sun:#F3B02C; --pink:#F3A9A0; --mint:#8ECFBF; --sky:#9AC7D8; --line:#20332C; --hair:rgba(32,51,44,.14); --max:1180px; --radius:16px; --serif:"Work Sans",ui-sans-serif,system-ui,sans-serif; --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; /* the brand is warm-light; opt out of the browser's auto-dark, which turns the ivory paper muddy brown on phones set to dark mode */ color-scheme:light; } /* ---- vidro sobre papel ------------------------------------------------- O material de TODA superfície que se destaca do papel. O recorte de papel (2px de tinta + sombra dura deslocada) saiu do sistema: o fundador leu a borda preta como rústico duas vezes, e o vidro é a linguagem que o widget já fala. Fio de 1px translúcido, desfoque e sombra macia em tudo. Duas coisas fazem vidro parecer vidro, e faltar uma anula a outra: translucidez com desfoque, e ALGO ATRÁS para desfocar. Por isso o campo de manchas logo abaixo — sobre um fundo chapado, `backdrop-filter` não tem o que filtrar e o painel vira um retângulo claro, que foi como a landing ficou quando o vidro entrou só na vitrine. */ :root{ --vidro:rgba(251,246,236,.62); --vidro-forte:rgba(251,246,236,.86); --vidro-fio:rgba(14,124,99,.20); --vidro-desfoque:blur(16px) saturate(1.35); --vidro-sombra:0 10px 30px rgba(32,51,44,.09); --vidro-sombra-rasa:0 4px 12px rgba(32,51,44,.10); } @supports not (backdrop-filter:blur(1px)){ :root{--vidro:var(--paper);--vidro-forte:var(--paper)} } *{box-sizing:border-box} /* clip no html TAMBÉM: o viewport rola pelo overflow do html, e `clip` só no body deixava um scroll lateral pequeno (blobs do herói, barra fixa) */ html{scroll-behavior:smooth;overflow-x:clip} body{margin:0;background:var(--paper);color:var(--ink); font:17px/1.62 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} /* O campo que o vidro filtra: manchas largas e fracas nas cores da marca, fixas atrás de tudo. Em dose baixa de propósito — a página continua sendo papel quente, e o que muda é que agora ela tem profundidade para o vidro revelar. `fixed` para o desfoque mudar conforme a pessoa rola. */ body::before{content:"";position:fixed;inset:-10% -10% 0;z-index:-1; pointer-events:none; background: radial-gradient(46vw 42vw at 12% 8%,rgba(142,207,191,.34),transparent 62%), radial-gradient(40vw 38vw at 88% 22%,rgba(243,176,44,.26),transparent 60%), radial-gradient(52vw 44vw at 72% 78%,rgba(239,109,78,.20),transparent 64%), radial-gradient(38vw 36vw at 8% 88%,rgba(154,199,216,.24),transparent 60%)} .wrap{max-width:var(--max);margin:0 auto;padding-inline:26px} /* ---- tipografia -------------------------------------------------------- */ /* Palavra longa em display de 40px estoura 320px sozinha ("shoppable", "personalizada"). Quebrar é feio; vazar é invisível — e com `clip` no body, o que vaza não volta. */ h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.03; letter-spacing:-.012em;margin:0 0 .5em;color:var(--ink);text-wrap:balance; overflow-wrap:break-word} h1{font-size:clamp(40px,7vw,74px);line-height:.98} h2{font-size:clamp(28px,4.4vw,46px)} h3{font-size:22px;margin-bottom:.35em} h4{font-size:18px} /* palavra-chave com risco à mão — a ênfase mora no traço, não num rótulo. (o itálico saiu junto com a serifa: em sans, itálico inclinado lia torto) */ h1 em,h2 em,h3 em{font-style:normal;font-weight:700;color:var(--green); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9C28 4 62 3 117 6' fill='none' stroke='%23F3B02C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 96%/100% .34em; padding-bottom:.1em} em.coral{color:var(--coral)!important}em.sun{color:var(--sun)!important} p{margin:0 0 1em} .lead{font-size:clamp(17px,2.1vw,21px);color:var(--ink2);max-width:44ch} .tiny{font-size:14px;color:var(--ink2)} a{color:var(--green)} strong{font-weight:600} /* grifo à mão, no lugar de pílulas/selos */ .mark{background:linear-gradient(transparent 60%,rgba(243,176,44,.55) 60%)} .mark-green{background:linear-gradient(transparent 60%,rgba(142,207,191,.6) 60%)} /* ---- cabeçalho --------------------------------------------------------- */ header.topo{position:sticky;top:0;z-index:40;background:var(--vidro); backdrop-filter:var(--vidro-desfoque); -webkit-backdrop-filter:var(--vidro-desfoque); border-bottom:1px solid var(--vidro-fio)} header.topo .wrap{display:flex;align-items:center;gap:18px;height:70px} .logo{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.02em; display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none} .logo svg{flex:0 0 auto} nav.menu{margin-left:auto;display:flex;gap:24px;align-items:center} /* `:not(.btn)`: `nav.menu a` tem especificidade maior que `.btn` e pintava o texto do botão de tinta escura — verde sobre verde, ilegível no topo da página que recebe o anúncio. */ nav.menu a:not(.btn){color:var(--ink);text-decoration:none;font-size:15px;font-weight:500} nav.menu a.btn{text-decoration:none} nav.menu a:not(.btn):hover{color:var(--green)} @media(max-width:640px){nav.menu a:not(.btn):not(.entrar){display:none} nav.menu{gap:12px}.entrar{font-size:14px}.btn.sm{padding:9px 13px}} @media(max-width:400px){.entrar{display:none}} /* ---- botões (sombra macia na cor do próprio botão) --------------------- */ /* `nowrap` mantém o rótulo numa linha só, e a 320px isso CORTAVA o botão. Medido em 26/08 na home: "Montar minha primeira vitrine" media 276px dentro de um pai de 268, terminando em x=328 numa tela de 320 — e como o body tem `overflow-x:clip`, o pedaço que sobra não é rolável, é inalcançável. O CTA principal da página, com a ponta cortada, no celular mais estreito que esse público usa. `max-width` segura o botão dentro do pai e o `nowrap` só vale onde cabe. */ .btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none; min-height:40px; border:0;border-radius:14px;padding:14px 24px;font-weight:600;font-size:16px; font-family:var(--sans);cursor:pointer;position:relative;white-space:nowrap; max-width:100%;box-sizing:border-box;text-align:center; box-shadow:0 6px 16px rgba(14,124,99,.32);transition:transform .12s,box-shadow .12s} @media(max-width:420px){ /* rótulo longo passa a quebrar em vez de vazar */ .btn{white-space:normal;padding:13px 18px;line-height:1.25} } .btn:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(14,124,99,.38);color:#fff} .btn:active{transform:translateY(1px);box-shadow:0 3px 8px rgba(14,124,99,.3)} /* 40px e o piso de alvo de toque deste projeto (CLAUDE.md). O `sm` saia com 38 medidos a 320px -- perto o bastante para passar despercebido na leitura e longe o bastante para o polegar errar no topo da tela. */ .btn.sm{padding:10px 18px;font-size:14px;border-radius:11px; display:inline-flex;align-items:center;justify-content:center; box-shadow:0 4px 12px rgba(14,124,99,.3)} /* A saída secundária do herói é AÇÃO, não texto corrido: quem não quer a prévia sai por aqui, e a 320px o link tinha 17px de altura. Vira alvo de dedo sem virar botão -- dois botões concorrendo foi o que esta página deixou de ter de propósito. */ .cta-alt a{display:inline-flex;align-items:center;min-height:44px; padding:0 4px;text-underline-offset:3px} /* secundário em vidro: mesmo material do resto, sem a moldura de tinta */ .btn.ghost{background:var(--vidro);color:var(--green-d); backdrop-filter:var(--vidro-desfoque);-webkit-backdrop-filter:var(--vidro-desfoque); box-shadow:var(--vidro-sombra-rasa); border:1px solid var(--vidro-fio);padding:13px 23px} .btn.ghost:hover{background:var(--vidro-forte);transform:none;color:var(--green-d); box-shadow:var(--vidro-sombra)} .entrar{font-weight:600;color:var(--ink);text-decoration:none} .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px} /* ---- ritmo de seção ---------------------------------------------------- */ section{padding:clamp(56px,8vw,94px) 0} .band-paper2{background:color-mix(in srgb,var(--paper2) 72%,transparent)} @supports not (color:color-mix(in srgb,red 1%,#fff)){ .band-paper2{background:var(--paper2)} } .band-dark{background:var(--green-d);color:#EFF6F2} .band-dark h2,.band-dark h3,.band-dark strong{color:#fff} .band-dark .lead,.band-dark .tiny{color:#B9D3C9} .band-dark em{color:var(--sun)} /* duas colunas texto + ilustração */ .duo{display:grid;gap:40px;align-items:center} @media(min-width:860px){.duo{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)} .duo.flip .art{order:-1}} .art svg,.hero-art svg{width:100%;height:auto;display:block;overflow:visible} /* section illustrations shouldn't balloon on wide/one-column layouts */ .art svg{max-width:440px;margin-inline:auto} /* garantia com cadeado desenhado, no lugar de "🔓 + pílula" */ .reassure{display:flex;align-items:center;gap:10px;margin-top:22px; font-size:15px;font-weight:500;color:var(--ink)} .reassure svg{flex:0 0 auto} /* ---- herói ------------------------------------------------------------- */ .hero{position:relative;padding-top:clamp(28px,5vw,54px);padding-bottom:clamp(48px,7vw,88px)} /* `minmax(0,…)` em TODA trilha: `1fr` (e a coluna implícita) tem mínimo `auto`, que se recusa a encolher abaixo do conteúdo. Medido na página do WooCommerce a 320px: o container media 268px e a trilha 303px — o herói inteiro, título, lead e CTA, terminando 9px fora da tela. Como o body tem `overflow-x:clip`, isso não rola: some. */ .hero-grid{display:grid;gap:34px;align-items:center; grid-template-columns:minmax(0,1fr)} @media(min-width:900px){ .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:22px}} /* blobs orgânicos de fundo — presença de aquarela, não de adesivo */ .blob{position:absolute;z-index:-1;opacity:.5;pointer-events:none; filter:saturate(.92)} /* ---- passos ilustrados (sequência, sem card) --------------------------- */ .passos{display:grid;gap:34px;margin-top:44px} @media(min-width:800px){.passos{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}} .passo .ilu{width:92px;height:92px;margin-bottom:14px} .passo .n{font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px; color:var(--coral);display:block;margin-bottom:2px} .passo p{margin:0;color:var(--ink2);font-size:16px} /* ---- lista de itens (formatos, sinais) — fio, não card ----------------- */ /* a glass card, like the plans, the FAQ and the "depois" block (13/09) */ .lista{list-style:none;padding:4px 22px;margin:24px 0 0;max-width:64ch; border-radius:var(--radius);background:var(--vidro); backdrop-filter:var(--vidro-desfoque);-webkit-backdrop-filter:var(--vidro-desfoque); border:1px solid var(--vidro-fio);box-shadow:var(--vidro-sombra-rasa)} /* inside a card it already has a frame: no double glass */ .card .lista{background:none;border:0;box-shadow:none;padding:0; backdrop-filter:none;-webkit-backdrop-filter:none} .lista li{padding:16px 0;border-top:1px solid var(--hair);display:grid;gap:3px} .lista li:first-child{border-top:0} @media(min-width:700px){.lista li{grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:baseline}} .lista dt,.lista .t{font-family:var(--serif);font-weight:600;font-size:18px} .lista dd,.lista .d{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.55} /* ---- contraste (dois "antes" + uma saída) ------------------------------ */ .contraste{display:grid;gap:14px;margin-top:24px} .antes{padding:16px 18px;border:1px dashed var(--hair);border-radius:14px;color:var(--ink2)} .antes h3{margin:2px 0 4px;font-size:16px;font-weight:600;color:var(--ink2)} /* a saída é o vidro mais denso da seção; o mint segue como brilho macio */ .depois{padding:20px 22px;border-radius:14px;background:var(--vidro-forte); backdrop-filter:var(--vidro-desfoque);-webkit-backdrop-filter:var(--vidro-desfoque); border:1px solid var(--vidro-fio);box-shadow:0 12px 28px rgba(142,207,191,.45)} .depois h3{margin:2px 0 6px;font-size:20px} @media(min-width:820px){.contraste{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} .depois{grid-column:1/-1}} /* ---- preços (planos como recortes de papel, não cards de SaaS) --------- */ .planos{display:grid;gap:22px;margin-top:34px} @media(min-width:820px){.planos{grid-template-columns:repeat(3,minmax(0,1fr))}} .plano{background:var(--vidro);backdrop-filter:var(--vidro-desfoque); -webkit-backdrop-filter:var(--vidro-desfoque); border:1px solid var(--vidro-fio);border-radius:20px; box-shadow:var(--vidro-sombra);padding:26px 24px} /* o recomendado é o vidro mais denso da fileira, com o coral como brilho — destaque por luz, não por moldura de tinta */ .plano.destaque{background:var(--vidro-forte); border:1px solid rgba(239,109,78,.38); box-shadow:0 14px 34px rgba(239,109,78,.30)} .plano .preco{font-family:var(--serif);font-size:38px;font-weight:600;margin:6px 0} .plano .preco small{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--ink2)} .plano ul{list-style:none;padding:0;margin:14px 0 20px} .plano li{padding-left:26px;position:relative;margin-bottom:8px;font-size:15px} .plano li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:8px; border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green); transform:rotate(-45deg)} /* ---- FAQ --------------------------------------------------------------- */ details.faq{background:var(--vidro);backdrop-filter:var(--vidro-desfoque); -webkit-backdrop-filter:var(--vidro-desfoque); border:1px solid var(--vidro-fio);border-radius:14px; padding:16px 18px;margin-bottom:8px} details.faq summary{cursor:pointer;font-family:var(--serif);font-weight:600;font-size:18px; list-style:none;display:flex;justify-content:space-between;gap:16px} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:"+";color:var(--coral);font-weight:600; font-family:var(--sans)} details.faq[open] summary::after{content:"–"} details.faq p{margin:12px 0 0;color:var(--ink2)} /* ---- rodapé ------------------------------------------------------------ */ footer.pe{padding:48px 0;color:var(--ink2);font-size:14px;border-top:1px solid var(--hair)} footer.pe a{color:var(--green)} /* ---- barra fixa de CTA no celular ------------------------------------- */ .barra-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none; gap:12px;align-items:center;justify-content:space-between; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(251,246,236,.92);backdrop-filter:blur(12px);border-top:1px solid var(--hair)} .barra-cta span{font-size:12.5px;line-height:1.3;color:var(--ink2);flex:1;min-width:0} .barra-cta .btn{padding:12px 12px;font-size:14px;white-space:nowrap;flex:0 0 auto} /* 16px nao e escolha estetica: abaixo disso o Safari do iPhone da zoom na pagina inteira ao focar, e numa tela de 320px isso tira o campo de vista no meio do cadastro. */ .barra-cta input{flex:1;min-width:0;min-height:40px;font:400 16px/1.2 var(--sans); padding:11px 13px;border:1px solid var(--hair);border-radius:10px; background:#fff;color:var(--ink)} .barra-cta input::placeholder{color:var(--ink2);opacity:.75} .barra-cta input:focus{outline:none;border-color:var(--ink)} /* num aparelho estreito o texto de apoio some para o campo caber inteiro */ @media(max-width:420px){.barra-cta span{display:none}} /* A BARRA SO EXISTE DEPOIS QUE O CAMPO DO HEROI SAI DE VISTA. Medido a 320px em 01/09: os dois campos "@seuperfil" apareciam juntos na primeira dobra, 70px um do outro, e o unico botao visivel era o de baixo -- o do heroi fica abaixo da dobra. Dois pedidos identicos lado a lado nao sao duas chances, sao uma duvida. `prova.js` acende a barra com `.aparece`. */ @media(max-width:860px){ .barra-cta{display:flex;transform:translateY(110%); transition:transform .22s ease;pointer-events:none} .barra-cta.aparece{transform:none;pointer-events:auto} body{padding-bottom:76px}} @media(max-width:860px) and (prefers-reduced-motion:reduce){ .barra-cta{transition:none}} /* ---- prova antes do cadastro (seção #experimente, prova.js) ------------ O visitante cola o endereço do site e vê a própria página desenhada, sem conta. Mora aqui (e o script em /prova.js) porque a seção existe em mais de uma página; duas cópias divergiriam na primeira mudança. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .prova-forma{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .prova-forma input{flex:1 1 240px;min-width:0;padding:14px 16px;border:1px solid var(--vidro-fio); border-radius:14px;background:var(--vidro); backdrop-filter:var(--vidro-desfoque);-webkit-backdrop-filter:var(--vidro-desfoque); font:inherit;font-size:16px;color:var(--ink)} .prova-forma input:focus{outline:2px solid var(--green);outline-offset:1px} .prova-forma .btn{flex:0 0 auto} /* O realce do campo quando a barra fixa é tocada. Sem ele, tocar com o campo já visível não muda nada na tela, e o visitante conclui que travou — foi o que aconteceu com seis dos oito cliques de 27/08. Curto e sem movimento: é um aviso, não uma animação. */ .prova-forma input.prova-alvo{ border-color:var(--verde,#0E7C63); box-shadow:0 0 0 4px color-mix(in srgb,var(--verde,#0E7C63) 18%,transparent); transition:box-shadow .18s ease,border-color .18s ease} @media (prefers-reduced-motion:reduce){ .prova-forma input.prova-alvo{transition:none}} #prova-aviso{margin-top:10px;min-height:1.2em} .prova-saida{display:grid;gap:26px;margin-top:26px;align-items:center} /* `hidden` tem que vencer o display acima: sem isto a moldura aparece VAZIA antes de qualquer envio — visto em produção em 24/08 */ .prova-saida[hidden]{display:none} @media(min-width:760px){.prova-saida{grid-template-columns:280px minmax(0,1fr)}} /* a moldura grossa fica: é o aro de um CELULAR, não decoração de card. Só a sombra deixou de ser dura deslocada. */ .prova-fone{width:min(280px,86vw);margin:0 auto;border:10px solid var(--line); border-radius:30px;background:var(--paper);padding:16px 14px 14px; box-shadow:0 16px 34px rgba(32,51,44,.18)} .prova-topo{text-align:center;margin-bottom:14px} .prova-avatar{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 8px; border-radius:99px;background:var(--green);color:#fff;font:600 22px/1 var(--serif)} .prova-topo b{display:block;font-family:var(--serif);font-size:18px} .prova-bolhas{display:flex;gap:9px;overflow:hidden;margin-bottom:14px;min-height:62px} .prova-bolhas i{flex:0 0 auto;width:58px;height:58px;border-radius:99px; border:3px solid var(--sun);background:var(--paper2) center/cover no-repeat;display:block} .prova-zap{background:#25D366;color:#04250f;text-align:center;font-weight:600; font-size:13px;padding:11px;border-radius:12px} .prova-lado .btn{margin-top:6px} /* a prévia DENTRO do celular do hero: quando o resultado chega, a demo sai e a página da própria pessoa entra na moldura grande — é ela que vende */ .fone-previa{position:absolute;inset:0;z-index:3;background:var(--paper); display:flex;flex-direction:column;align-items:center;padding:30px 12px 12px; overflow:hidden;text-align:center} .fp-topo{display:flex;flex-direction:column;align-items:center;min-height:0} .fp-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:99px; background:var(--green);color:#fff;font:600 19px/1 var(--serif); box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--coral)} .fp-nome{font:600 16px/1.2 var(--serif);color:var(--ink);margin-top:6px;max-width:92%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fp-endereco{font-size:10.5px;color:var(--ink2);margin-top:1px;max-width:94%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fp-chips{display:flex;gap:6px;margin-top:8px} .fp-chips button{border:1px solid var(--vidro-fio);background:var(--vidro-forte);border-radius:99px; font-size:10.5px;font-weight:700;padding:4px 10px;cursor:pointer;color:var(--ink); box-shadow:var(--vidro-sombra-rasa)} .fp-chips button.on{background:var(--green);color:#fff;border-color:var(--green-d)} .fp-lista{margin-top:10px;width:100%;flex:0 0 auto} .fp-lista.stories{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;overflow:hidden} .fp-lista.stories i{width:46px;height:46px;border-radius:99px;border:3px solid var(--sun); background:var(--paper2) center/cover no-repeat;display:block;flex:0 0 auto;cursor:pointer} .fp-lista.stories i:nth-child(2){border-color:var(--coral)} .fp-lista.stories i:nth-child(3){border-color:var(--green)} .fp-lista.stories i.on{box-shadow:0 0 0 3px var(--green)} .fp-lista.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .fp-lista.grade b{aspect-ratio:9/13;border-radius:8px;display:block;cursor:pointer; background:var(--paper2) center/cover no-repeat;border:2px solid transparent} .fp-lista.grade b.on{border-color:var(--green)} .fp-lista.carrossel{display:flex;gap:7px;overflow:hidden} .fp-lista.carrossel b{width:76px;height:128px;border-radius:9px;display:block;flex:0 0 auto; cursor:pointer;background:var(--paper2) center/cover no-repeat;border:2px solid transparent} .fp-lista.carrossel b.on{border-color:var(--green)} .fp-palco{flex:1 1 auto;width:100%;min-height:0;margin-top:10px;border-radius:14px; overflow:hidden;background:#111;border:1px solid var(--hair); box-shadow:var(--vidro-sombra-rasa)} .fp-palco video{width:100%;height:100%;object-fit:cover;display:block} .fp-zap{margin-top:10px;width:100%;background:#25D366;color:#04250f;font-weight:700; font-size:12.5px;padding:11px;border-radius:12px;flex:0 0 auto} .fp-selo{position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:2; background:var(--sun);border:1px solid rgba(32,51,44,.25);border-radius:99px; box-shadow:0 3px 8px rgba(32,51,44,.18); font-size:10px;font-weight:700;padding:2px 9px;white-space:nowrap} /* enquanto a busca roda, a moldura mostra a página NASCENDO: esqueleto que pulsa + barra honesta (para em 92% — barra cheia parada é pior que barra andando devagar) */ .fp-busca{position:absolute;inset:0;z-index:3;background:var(--paper); display:flex;flex-direction:column;align-items:center;justify-content:center; padding:24px 18px;text-align:center} /* A MESMA ESPERA, COLADA NO FORMULÁRIO. Abaixo de 900px o herói empilha e o telefone cai fora da tela — medido em 09/09 num 375x812: campo em y=424, telefone em y=854. Aqui ela deixa de ser sobreposição do telefone e vira um bloco logo abaixo do botão, onde o dedo acabou de tocar. */ .fp-busca-junto{position:static;inset:auto;margin:14px 0 0; border:1px solid var(--linha,rgba(32,51,44,.14));border-radius:14px; padding:18px 16px;background:var(--paper2,#F5EDDD)} .fp-busca-junto .fb-palco{width:56%;max-width:150px} .fp-busca-junto .fb-bolhas i{width:34px;height:34px} .fp-busca .fb-bolhas{display:flex;gap:10px;margin-bottom:18px} .fp-busca .fb-bolhas i{width:44px;height:44px;border-radius:99px; background:var(--paper3);border:3px solid var(--paper2);display:block; animation:fbpulsa 1s infinite alternate} .fp-busca .fb-bolhas i:nth-child(2){animation-delay:.2s} .fp-busca .fb-bolhas i:nth-child(3){animation-delay:.4s} .fp-busca .fb-palco{width:82%;aspect-ratio:9/12;border-radius:14px; background:var(--paper3);animation:fbpulsa 1.2s infinite alternate;margin-bottom:18px} @keyframes fbpulsa{to{opacity:.45}} .fp-busca .fb-trilho{width:82%;height:8px;border-radius:99px;background:var(--paper3); overflow:hidden} .fp-busca .fb-barra{height:100%;width:4%;border-radius:99px;background:var(--green); transition:width .9s ease} .fp-busca .fb-txt{font-size:13px;color:var(--ink2);margin-top:10px;min-height:2.6em} @media(prefers-reduced-motion:reduce){.fp-busca .fb-bolhas i,.fp-busca .fb-palco{animation:none}} /* pós-prévia: o convite que fecha o laço */ .prova-gostou{margin:12px auto 0;max-width:300px;text-align:center; font-size:13.5px;color:var(--ink2)} .btn.pulsa{animation:ctapulsa 2.2s ease-out infinite} @keyframes ctapulsa{0%{box-shadow:0 6px 16px rgba(14,124,99,.32),0 0 0 0 rgba(14,124,99,.35)} 70%{box-shadow:0 6px 16px rgba(14,124,99,.32),0 0 0 12px rgba(14,124,99,0)} 100%{box-shadow:0 6px 16px rgba(14,124,99,.32),0 0 0 0 rgba(14,124,99,0)}} @media(prefers-reduced-motion:reduce){.btn.pulsa{animation:none}} /* a troca de modo da prévia: site ⇄ @ do Instagram */ .prova-troca{display:inline-flex;align-items:center;min-height:44px;margin-top:8px; background:none;border:0;padding:0;color:var(--green-d);font-weight:600; font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer} /* saída do caso fraco: quem não tem site legível começa pelas fotos */ .prova-fotos{display:inline-flex;align-items:center;min-height:44px;margin-top:12px; color:var(--green-d);font-weight:600;font-size:14.5px;text-decoration:underline; text-underline-offset:3px} .prova-fotos[hidden]{display:none} .m-0{margin:0} /* ---- demonstrativos dos formatos (mini-telas desenhadas) --------------- */ .fmt-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:22px} .fmt{background:var(--vidro);backdrop-filter:var(--vidro-desfoque); -webkit-backdrop-filter:var(--vidro-desfoque); border:1px solid var(--vidro-fio);border-radius:16px; padding:14px 16px 16px;box-shadow:var(--vidro-sombra)} .fmt h3{margin:12px 0 4px;font-size:16px} .fmt .tiny{margin:0} .fmt-tela{position:relative;display:block;height:120px;border-radius:10px; background:#fff;border:2px solid var(--hair);overflow:hidden;padding:10px} .ft-bar{display:block;width:42%;height:8px;border-radius:99px;background:#E2DCCE;margin-bottom:9px} .ft-bloco{display:block;width:88%;height:12px;border-radius:6px;background:#EFEAE0;margin-top:8px} .ft-bloco.curto{width:60%} .ft-storiesrow{display:flex;gap:7px} .ft-storiesrow i{width:26px;height:26px;border-radius:99px;border:3px solid var(--green); background:var(--mint);display:block} .ft-storiesrow i:nth-child(2){border-color:var(--coral);background:var(--pink)} .ft-storiesrow i:nth-child(3){border-color:var(--sun)} .ft-cards{display:flex;gap:7px;align-items:flex-start} .ft-cards i{width:34px;height:60px;border-radius:7px;background:#EFEAE0;display:block} .ft-cards i.on{background:var(--green)} .ft-slider{display:flex;gap:7px} .ft-slider i{width:70%;height:64px;border-radius:9px;background:var(--green);display:block} .ft-slider i+i{width:26%;background:#EFEAE0} .ft-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .ft-feed i{aspect-ratio:9/14;border-radius:6px;background:#EFEAE0;display:block} .ft-feed i.on{background:var(--green)} .ft-bolha{position:absolute;right:10px;bottom:10px;width:30px;height:30px; border-radius:99px;background:var(--green);border:3px solid #fff; box-shadow:0 2px 8px rgba(32,51,44,.25)} .ft-hero{display:grid;place-items:center;height:74px;border-radius:9px;background:var(--green)} .ft-hero b{width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent; border-bottom:9px solid transparent;display:block;margin-left:3px} /* ---- revelação ao rolar ------------------------------------------------ */ .revela{opacity:0;transform:translateY(16px); transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.25,1)} .revela.dentro{opacity:1;transform:none} @media(prefers-reduced-motion:no-preference){ .float{animation:flo 5.5s ease-in-out infinite} @keyframes flo{50%{transform:translateY(-9px)}}} @media(prefers-reduced-motion:reduce){.revela{opacity:1;transform:none}.float{animation:none}} /* A prova do herói. Estreita de propósito: ela existe para ser reconhecida como "uma loja no celular" num relance, não para ser lida. Largura maior faria o campo de colar o @ sair da primeira dobra, que era o defeito que esta seção veio consertar. */ .prova-loja{margin:14px 0 6px;max-width:236px} .prova-loja img{width:100%;height:auto;display:block;border-radius:14px; border:1px solid var(--vidro-fio);box-shadow:var(--vidro-sombra)} .prova-loja figcaption{margin-top:8px;font-size:13px;line-height:1.4; color:var(--ink2)} /* No desktop a loja ja aparece viva na coluna da direita; a imagem parada aqui virava a mesma loja duas vezes na mesma tela (fundador, 11/09). */ @media (min-width:900px){.prova-loja{display:none}}