:root{ --ink:#16294F; --ink-soft:#4A5875; --paper:#F6F2E9; --paper-dim:#EDE6D6; --pin:#FB9B0E; --pin-dark:#A85E04; --pin-hover:#E08A05; --gold:#FBB03B; --line:rgba(22,41,79,0.12); --line-light:rgba(246,242,233,0.16); --sans:'Montserrat', sans-serif; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;} ul{list-style:none;} img,svg{display:block; max-width:100%;} .wrap{ max-width:1900px; width:100%; margin:0 auto; padding:0 24px; text-align:center; } @media(max-width:479px){ .wrap{padding:0 16px;} } .eyebrow{ font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; } .eyebrow::before{ content:""; width:7px; height:7px; background:var(--pin); border-radius:50%; display:inline-block; } h1,h2,h3{font-family:var(--sans); font-weight:800; letter-spacing:-0.02em;} /* ============ ANIMATION STATES ============ */ /* .anim-ready é colocado no e removido se o JS falhar */ .anim-ready .hero .eyebrow, .anim-ready .hero .sub, .anim-ready .hero .cta-row, .anim-ready .maps-demo, .anim-ready [data-reveal], .anim-ready [data-stagger] > *{opacity:0;} .anim-ready #heroTitle{visibility:hidden;} /* ============ HEADER ============ */ .site-header{ background:linear-gradient(120deg,#F2F2F2 0%,#FAFAFA 35%,#E4E4E4 60%,#F5F5F5 100%); padding:20px 0; border-bottom:1px solid rgba(22,41,79,0.08); } .site-header .wrap{ display:flex; align-items:center; justify-content:center; } .site-header img{ height:44px; width:auto; } /* ============ HERO ============ */ .hero{ background: radial-gradient(ellipse 900px 500px at 20% -10%, rgba(251,155,14,0.20), transparent 60%), var(--ink); color:var(--paper); padding:64px 0 120px; position:relative; overflow:hidden; isolation:isolate; } /* three.js */ .hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; opacity:0; transition:opacity 1.6s ease; } .hero-canvas.on{opacity:1;} /* escurece o centro para o texto continuar legível sobre a cena */ .hero-veil{ position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(ellipse 760px 70% at 50% 42%, rgba(22,41,79,0.94) 0%, rgba(22,41,79,0.7) 50%, rgba(22,41,79,0) 100%), linear-gradient(180deg, rgba(22,41,79,0.85) 0%, rgba(22,41,79,0) 30%); } @media(max-width:719px){ .hero-canvas.on{opacity:0.55;} .hero-veil{background:rgba(22,41,79,0.55);} } .hero-content{position:relative;} .hero .eyebrow{color:var(--gold);} .hero h1{ font-size:clamp(2.1rem, 5vw, 3.4rem); line-height:1.08; margin:20px auto 22px; max-width:20ch; text-wrap:pretty; } .hero h1 em{ font-style:italic; color:var(--pin); } .hero .sub{ font-size:1.15rem; font-weight:500; color:rgba(246,242,233,0.82); max-width:52ch; margin:0 auto 36px; text-wrap:pretty; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-weight:800; font-size:1rem; padding:18px 30px; border-radius:8px; background:var(--pin); color:var(--ink); text-decoration:none; border:none; cursor:pointer; position:relative; overflow:hidden; transition:translate .15s ease, background .15s ease, box-shadow .15s ease; box-shadow:0 10px 30px -8px rgba(251,155,14,0.55); } /* brilho que atravessa o botão */ .btn::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform:skewX(-20deg); animation:shine 4.5s ease-in-out 2.5s infinite; pointer-events:none; } @keyframes shine{ 0%{left:-60%;} 30%,100%{left:130%;} } .btn:hover{background:var(--pin-hover); translate:0 -2px; box-shadow:0 16px 36px -10px rgba(251,155,14,0.7);} .btn:focus-visible{outline:3px solid var(--gold); outline-offset:3px;} .btn-block{width:100%;} .cta-row{margin-top:8px;} .microcopy{ font-size:12.5px; font-weight:500; color:rgba(246,242,233,0.6); margin-top:14px; } /* ---- signature element: search card that resolves ---- */ .maps-demo{ margin:56px auto 0; background:rgba(29,52,97,0.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line-light); border-radius:16px; padding:22px 22px 26px; max-width:520px; text-align:left; box-shadow:0 30px 60px -30px rgba(0,0,0,0.6); } .maps-demo .searchbar{ display:flex; align-items:center; gap:10px; background:#0F2245; border-radius:10px; padding:12px 16px; font-size:14px; font-weight:500; color:rgba(246,242,233,0.75); border:1px solid var(--line-light); } .searchbar .dot{width:8px;height:8px;border-radius:50%;background:var(--pin); flex-shrink:0;} .typed::after{ content:""; display:inline-block; width:2px; height:14px; background:rgba(246,242,233,0.6); margin-left:2px; vertical-align:-2px; animation:blink 1s steps(1) infinite; } @keyframes blink{50%{opacity:0;}} .result-card{ display:flex; gap:14px; margin-top:18px; padding-top:18px; border-top:1px dashed var(--line-light); align-items:flex-start; } .pin-icon{ width:34px; height:34px; flex-shrink:0; filter:grayscale(1) opacity(0.35); transition:filter 1s ease .6s; } .result-card.found .pin-icon{filter:grayscale(0) opacity(1) drop-shadow(0 4px 10px rgba(251,155,14,0.5));} .result-text .biz-name{ font-weight:800; font-size:15px; color:rgba(246,242,233,0.35); transition:color .8s ease .6s; } .result-card.found .biz-name{color:var(--paper);} .stars{ font-size:13px; font-weight:600; color:rgba(246,242,233,0.3); margin-top:4px; transition:color .8s ease .9s; } .result-card.found .stars{color:var(--gold);} .biz-sub{ font-size:12.5px; font-weight:500; color:rgba(246,242,233,0.28); margin-top:3px; transition:color .8s ease .9s; } .result-card.found .biz-sub{color:rgba(246,242,233,0.55);} .status-label{ margin-top:16px; font-size:11.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(251,155,14,0.9); } .status-label.ok{color:#7FD99A;} /* ============ ALERT BLOCK ============ */ .alert{ background:var(--paper-dim); border-left:4px solid var(--pin); padding:30px 32px; border-radius:4px; margin:-52px auto 0; max-width:760px; position:relative; z-index:2; text-align:left; box-shadow:0 24px 50px -30px rgba(22,41,79,0.45); } .alert p{font-size:1.08rem; font-weight:500; margin-bottom:12px; text-wrap:pretty;} .alert p:last-child{margin-bottom:0;} .alert strong{color:var(--pin-dark); font-weight:800;} /* ============ SECTION GENERIC ============ */ section{padding:80px 0;} section.tight{padding:56px 0;} .section-head{max-width:640px; margin:0 auto 44px;} .section-head .eyebrow{color:var(--pin-dark); margin-bottom:14px;} .section-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.15; text-wrap:pretty;} /* ============ 3 STEPS ============ */ .steps{ display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; } .step{ background:var(--paper); padding:32px 30px; text-align:left; position:relative; transition:background .25s ease; } .step::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--pin); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.8,.2,1); } .step:hover{background:#FFFDF8;} .step:hover::before{transform:scaleX(1);} .step-num{ font-size:1.8rem; font-weight:800; color:var(--pin-dark); line-height:1; display:block; margin-bottom:14px; } .step h3{font-size:1.15rem; margin-bottom:8px; line-height:1.25;} .step p{color:var(--ink-soft); font-size:0.98rem; font-weight:500;} @media(min-width:720px){ .steps{grid-template-columns:1fr 1fr 1fr;} } /* ============ FOR YOU / NOT FOR YOU ============ */ .split{display:grid; gap:20px;} @media(min-width:720px){.split{grid-template-columns:1fr 1fr;}} .card{ border-radius:14px; padding:32px 28px; } .card-yes{background:#EFF2E9; border:1px solid rgba(74,102,53,0.18);} .card-no{background:#F5EBDD; border:1px solid rgba(168,94,4,0.18);} .card h3{font-size:1.05rem; margin-bottom:16px; font-weight:800; text-align:left;} .card-yes h3{color:#3F5A2C;} .card-no h3{color:var(--pin-dark);} .card li{ display:flex; gap:10px; padding:9px 0; font-size:0.97rem; font-weight:500; border-top:1px solid rgba(0,0,0,0.06); text-align:left; } .card li:first-of-type{border-top:none;} .mark{font-weight:800; flex-shrink:0;} .card-yes .mark{color:#3F5A2C;} .card-no .mark{color:var(--pin-dark);} /* ============ WHAT'S INSIDE (chapters) ============ */ .inside{background:var(--ink); color:var(--paper);} .inside .section-head .eyebrow{color:var(--gold);} .inside .section-head p{color:rgba(246,242,233,0.7); margin-top:12px; font-weight:500; text-wrap:pretty;} .chapter-list{ display:grid; gap:0; border-top:1px solid var(--line-light); text-align:left; } .chapter{ display:grid; grid-template-columns:74px 1fr; gap:18px; padding:18px 4px; border-bottom:1px solid var(--line-light); align-items:baseline; transition:background .2s ease, padding-left .25s ease; } .chapter:hover{background:rgba(246,242,233,0.04); padding-left:14px;} .chapter .cnum{font-size:13px; font-weight:700; color:var(--pin);} .chapter .ctitle{font-size:1rem; font-weight:600; color:var(--paper);} .bonus-strip{ margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; } .bonus-chip{ font-size:12.5px; font-weight:600; border:1px solid var(--line-light); padding:8px 14px; border-radius:100px; color:rgba(246,242,233,0.85); } .bonus-chip::before{content:"+ "; color:var(--gold);} /* ============ DELIVERABLES ============ */ .deliverables{display:grid; gap:0; max-width:760px; margin:0 auto;} .deliv-item{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); text-align:left; } .deliv-item:last-child{border-bottom:none;} .deliv-icon{ width:26px; height:26px; flex-shrink:0; border-radius:50%; background:var(--pin); color:var(--ink); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:2px; } .deliv-item p{font-size:1.02rem; font-weight:500;} .format-note{ margin-top:28px; font-size:13px; font-weight:600; color:var(--ink-soft); } /* ============ EXAMPLE PROFILES ============ */ .examples-section{background:var(--paper-dim);} .example-cards{display:grid; gap:20px;} @media(min-width:720px){.example-cards{grid-template-columns:repeat(3,1fr);}} .gcard{ background:#FFFFFF; border-radius:14px; border:1px solid rgba(22,41,79,0.1); padding:22px 20px; text-align:left; box-shadow:0 14px 30px -18px rgba(22,41,79,0.25); transition:translate .25s ease, box-shadow .25s ease; } /* usa translate (não transform) para não brigar com as animações do anime.js */ .gcard:hover{translate:0 -4px; box-shadow:0 22px 40px -20px rgba(22,41,79,0.35);} .gcard-top{display:flex; gap:14px; align-items:flex-start;} .gcard-icon{ width:44px; height:44px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; } .gcard-name{font-weight:800; font-size:1rem; color:var(--ink);} .gcard-cat{font-size:0.82rem; font-weight:500; color:var(--ink-soft); margin-top:2px;} .gcard-stars{ font-size:0.85rem; font-weight:600; color:#C98A00; margin-top:10px; } .gcard-stars span{color:var(--ink-soft); margin-left:4px;} .gcard-status{ margin-top:10px; font-size:0.82rem; color:#1E8E3E; font-weight:700; } .gcard-status::before{content:"● ";} .gcard-tag{ display:inline-block; margin-top:14px; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; background:var(--paper-dim); color:var(--ink-soft); padding:5px 10px; border-radius:100px; } .examples-note{ margin-top:32px; font-size:12.5px; font-weight:500; color:var(--ink-soft); } /* ============ PRICING ============ */ .pricing{background:linear-gradient(180deg, var(--paper-dim), var(--paper));} .price-card{ max-width:520px; margin:0 auto; background:var(--ink); color:var(--paper); border-radius:20px; padding:44px 40px 40px; text-align:center; position:relative; box-shadow:0 30px 60px -20px rgba(22,41,79,0.35); } @media(max-width:479px){.price-card{padding:44px 22px 30px;}} .price-tag{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--pin); color:var(--ink); font-size:11.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:7px 16px; border-radius:100px; white-space:nowrap; } .price-old{ display:inline-block; position:relative; font-size:1.1rem; font-weight:600; color:rgba(246,242,233,0.5); margin-top:20px; } .price-old .strike{ position:absolute; left:-3px; right:-3px; top:52%; height:2px; background:var(--pin); transform-origin:left center; } .price-new{ font-size:4rem; font-weight:800; letter-spacing:-0.03em; color:var(--paper); line-height:1; margin:6px 0 4px; font-variant-numeric:tabular-nums; } .price-new b{font-weight:800;} .price-new span{font-size:1.5rem; vertical-align:top; font-weight:600;} .price-new .cents{font-size:2.2rem;} .price-note{font-size:0.9rem; font-weight:500; color:rgba(246,242,233,0.65); margin-bottom:28px;} .guarantee{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line-light); display:flex; gap:14px; text-align:left; align-items:flex-start; } .guarantee .g-icon{ font-size:1.6rem; color:var(--gold); flex-shrink:0; line-height:1.1; } .guarantee p{font-size:0.92rem; font-weight:500; color:rgba(246,242,233,0.78);} .guarantee strong{color:var(--paper); font-weight:800;} /* ============ WHY IT WORKS ============ */ .why-grid{display:grid; gap:16px; text-align:left;} @media(min-width:640px){.why-grid{grid-template-columns:1fr 1fr;}} .why-item{ background:var(--paper-dim); border-radius:12px; padding:24px 26px; font-size:0.98rem; font-weight:500; } .why-item .stat{ font-size:2.1rem; font-weight:800; letter-spacing:-0.02em; color:var(--pin-dark); display:block; margin-bottom:6px; font-variant-numeric:tabular-nums; } /* ============ REALITY ============ */ .reality{ background:var(--ink); color:var(--paper); text-align:center; padding:90px 0; } .reality h2{ font-size:clamp(1.8rem,4.4vw,2.6rem); max-width:20ch; margin:0 auto 18px; line-height:1.15; text-wrap:pretty; } .reality h2 em{font-style:italic; color:var(--pin);} .reality p{ color:rgba(246,242,233,0.72); font-size:1.1rem; font-weight:500; max-width:44ch; margin:0 auto 40px; text-wrap:pretty; } /* ============ FOOTER ============ */ footer{ padding:40px 0 46px; text-align:center; font-size:12px; font-weight:500; color:rgba(246,242,233,0.55); background:var(--ink); } .footer-brand{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:20px; } .footer-brand img{height:44px; width:auto; border-radius:10px;} .footer-brand .wordmark{ font-size:1.2rem; font-weight:900; letter-spacing:-0.01em; color:var(--paper); } .footer-brand .wordmark span{color:var(--pin);} .footer-wa-btn{ display:inline-flex; align-items:center; gap:9px; background:#25D366; color:#fff; font-weight:700; font-size:0.9rem; padding:12px 22px; border-radius:100px; text-decoration:none; margin-bottom:18px; transition:translate .15s ease, background .15s ease; } .footer-wa-btn:hover{background:#1EBD5A; translate:0 -1px;} .footer-wa-btn:focus-visible{outline:3px solid var(--gold); outline-offset:3px;} .footer-wa-btn svg{flex-shrink:0;} footer .footer-note{margin-top:4px;} @media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation:none !important; transition:none !important;} .hero-canvas{opacity:1;} }