/* template-site-local — layout SaaS (nav / hero c/ mockup / faixa de números / grid de features / blocos alternados / depoimentos / antes-depois / FAQ / mapa / CTA). Tema claro pastel. Paleta por cliente injetada como CSS vars inline no . */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --accent:#f0b53f; --accent-ink:#3a2c10; --accent-2:#8fc3dd; --bg:#fdf9f0; --surface:#ffffff; --surface-2:#f7f1e4; --text:#2a2723; --muted:#8a8272; --line:rgba(42,39,35,.10); --radius:18px; --maxw:1180px; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --shadow:0 24px 60px -28px rgba(58,44,16,.28); --shadow-sm:0 8px 24px -14px rgba(58,44,16,.22); } html{-webkit-text-size-adjust:100%} body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.62;font-size:17px;overflow-x:hidden} img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1} section{padding:120px 0;position:relative} h1,h2,h3{line-height:1.08;letter-spacing:-.03em;font-weight:800} h2{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:16px} .lead{color:var(--muted);font-size:1.08rem;max-width:60ch} .center{text-align:center}.center .lead{margin-inline:auto} /* selo de seção (01 / 02 ...) estilo SaaS */ .kicker{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin-bottom:20px} .kicker::before{content:attr(data-n);color:var(--accent-ink);background:var(--accent);border-radius:7px;padding:3px 8px;font-size:.72rem;letter-spacing:.04em} /* orbs de fundo */ .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;pointer-events:none} .orb--a{width:520px;height:520px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%)} .orb--b{width:460px;height:460px;background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 60%,transparent),transparent 70%)} .btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;padding:15px 26px;border-radius:12px; background:var(--accent);color:var(--accent-ink);border:0;cursor:pointer; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,filter .3s; box-shadow:0 12px 30px -10px color-mix(in srgb,var(--accent) 70%,transparent);will-change:transform} .btn:hover{transform:translateY(-2px);filter:brightness(1.04)} .btn--ghost{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .btn svg{width:20px;height:20px} /* header */ .site-head{position:fixed;inset:0 0 auto 0;z-index:50;padding:18px 0;transition:background .3s,box-shadow .3s,padding .3s} .site-head.scrolled{background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line);padding:12px 0} .site-head .wrap{display:flex;align-items:center;justify-content:space-between} .brand{font-weight:800;font-size:1.1rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px} .brand img{width:30px;height:30px} .nav{display:flex;gap:26px;align-items:center} .nav a{font-size:.94rem;font-weight:600;color:var(--muted);transition:color .25s} .nav a:hover{color:var(--text)} .nav .btn{padding:10px 18px;font-size:.9rem} @media(max-width:880px){.nav a:not(.btn){display:none}} /* hero */ .hero{padding:180px 0 100px;position:relative;isolation:isolate;overflow:hidden} .hero .orb--a{top:-160px;right:-120px} .hero .orb--b{bottom:-200px;left:-160px} .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center} .hero h1{font-size:clamp(2.4rem,5.6vw,4rem);max-width:16ch} .hero h1 .ln{display:block;overflow:hidden} .hero h1 .ln>span{display:block;will-change:transform} .hero .lead{margin:24px 0 32px;font-size:clamp(1rem,2.2vw,1.2rem)} .hero__cta{display:flex;gap:14px;flex-wrap:wrap} .hero__note{margin-top:20px;font-size:.86rem;color:var(--muted);display:flex;align-items:center;gap:8px} .hero__note::before{content:"";width:7px;height:7px;border-radius:50%;background:#3aa06a;box-shadow:0 0 10px #3aa06a} .frame{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface);border:1px solid var(--line);will-change:transform} .frame__bar{display:flex;gap:6px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)} .frame__bar i{width:10px;height:10px;border-radius:50%;background:var(--line)} .frame img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} @media(max-width:920px){.hero__grid{grid-template-columns:1fr;gap:44px}} /* hero com imagem de fundo */ .hero--bg{min-height:min(88vh,760px);display:flex;align-items:center;padding:170px 0 90px} .hero--bg .hero__bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero--bg .hero__scrim{position:absolute;inset:0;z-index:0; background:linear-gradient(90deg,rgba(15,12,8,.86) 0%,rgba(15,12,8,.62) 46%,rgba(15,12,8,.28) 100%)} .hero--bg .hero__grid{grid-template-columns:minmax(0,720px);gap:0} .hero--bg .kicker{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)} .hero--bg .kicker::before{background:var(--accent);color:var(--accent-ink)} .hero--bg h1{color:#fff} .hero--bg .lead{color:rgba(255,255,255,.9)} .hero--bg .hero__note{color:rgba(255,255,255,.8)} .hero--bg .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);backdrop-filter:blur(4px)} @media(max-width:600px){.hero--bg .hero__scrim{background:linear-gradient(180deg,rgba(15,12,8,.55),rgba(15,12,8,.82))}} /* header sobre hero de imagem: texto branco até rolar */ body.has-hero-bg .site-head:not(.scrolled) .brand{color:#fff} body.has-hero-bg .site-head:not(.scrolled) .nav a:not(.btn){color:rgba(255,255,255,.9)} body.has-hero-bg .site-head:not(.scrolled) .nav a:not(.btn):hover{color:#fff} .site-head .btn,.site-head .btn:hover{color:#111!important;font-weight:800} .site-head .btn svg{fill:#111} body.has-hero-bg .site-head:not(.scrolled) .brand img{background:rgba(255,255,255,.9);padding:2px} /* faixa números */ .stats{border-block:1px solid var(--line);background:var(--surface-2)} .stats .row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;padding:18px 0} .stats .n{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:800;color:var(--text);letter-spacing:-.03em} .stats .n em{color:var(--accent);font-style:normal} .stats .l{font-size:.9rem;color:var(--muted);margin-top:2px} @media(max-width:700px){.stats .row{grid-template-columns:1fr 1fr;gap:28px}} /* feature grid */ .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px} .feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;will-change:transform} .feat:hover{box-shadow:var(--shadow)} .feat .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:var(--accent-ink); background:var(--accent);margin-bottom:16px} .feat h3{font-size:1.1rem;margin-bottom:8px} .feat p{color:var(--muted);font-size:.96rem} @media(max-width:980px){.grid4{grid-template-columns:1fr 1fr}} @media(max-width:560px){.grid4{grid-template-columns:1fr}} /* blocos alternados */ .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:80px} .split:first-of-type{margin-top:52px} .split:nth-of-type(even) .split__media{order:-1} .split__media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);will-change:transform} .split__media img{width:100%;aspect-ratio:5/4;object-fit:cover} .split h3{font-size:clamp(1.35rem,2.6vw,1.75rem);margin-bottom:10px} .split p{color:var(--muted)} .split .step-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--accent);color:var(--accent-ink);font-weight:800;margin-bottom:16px} @media(max-width:860px){.split{grid-template-columns:1fr;gap:24px}.split:nth-of-type(even) .split__media,.split .split__media{order:-1}} /* depoimentos */ .quotes .g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px} .quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)} .quote .stars{color:var(--accent);letter-spacing:3px;margin-bottom:12px;font-size:.95rem} .quote p{font-size:1rem} .quote .who{margin-top:18px;font-weight:700} .quote .where{display:block;margin-top:3px;font-size:.85rem;font-weight:600;color:var(--muted)} @media(max-width:900px){.quotes .g{grid-template-columns:1fr}} /* depoimentos em vídeo */ .vdepos__g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px} .vdepo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)} .vdepo__player{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;display:block} .vdepo__cap{padding:18px 20px} .vdepo__cap b{display:block;font-weight:700} .vdepo__cap span{font-size:.85rem;color:var(--muted)} .vdepo__cap em{display:block;margin-top:8px;font-style:normal;color:var(--muted);font-size:.92rem} .vdepos__g.one{grid-template-columns:minmax(0,360px);justify-content:center} @media(max-width:900px){.vdepos__g{grid-template-columns:1fr 1fr}} @media(max-width:560px){.vdepos__g{grid-template-columns:1fr}} /* galeria de fotos */ .galeria__g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px} .gimg{overflow:hidden;border-radius:14px;border:1px solid var(--line);aspect-ratio:4/5} .gimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .gimg:hover img{transform:scale(1.05)} @media(max-width:760px){.galeria__g{grid-template-columns:1fr 1fr}} /* antes / depois */ .vs{background:var(--surface-2);border-block:1px solid var(--line)} .vs .g{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px} .vs .col{border-radius:var(--radius);padding:32px;border:1px solid var(--line);background:var(--surface)} .vs .good{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),var(--surface)); border-color:color-mix(in srgb,var(--accent) 45%,var(--line))} .vs h3{font-size:1.15rem;margin-bottom:16px} .vs li{list-style:none;padding:10px 0 10px 30px;position:relative;color:var(--muted);border-bottom:1px dashed var(--line)} .vs .bad li::before{content:"✕";position:absolute;left:0;color:#e06b6b;font-weight:700} .vs .good li{color:var(--text)} .vs .good li::before{content:"✓";position:absolute;left:0;color:#3aa06a;font-weight:700} @media(max-width:760px){.vs .g{grid-template-columns:1fr}} /* faq */ .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{cursor:pointer;list-style:none;padding:22px 0;font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;gap:16px;align-items:center} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";font-size:1.4rem;color:var(--accent);transition:transform .3s} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item p{padding:0 0 22px;color:var(--muted)} /* localização */ .local .g{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;margin-top:48px} #map{min-height:400px;border-radius:var(--radius);border:1px solid var(--line);z-index:1} .info .it{padding:16px 0;border-bottom:1px solid var(--line)} .info .it b{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:4px} .hours div{display:flex;justify-content:space-between;padding:7px 0;font-size:.95rem;color:var(--muted)} @media(max-width:860px){.local .g{grid-template-columns:1fr}} /* cta final */ .cta{text-align:center;overflow:hidden} .cta .orb--a{top:-120px;left:50%;transform:translateX(-50%)} .cta__box{position:relative;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:26px;padding:68px 32px;box-shadow:var(--shadow)} .cta h2{max-width:22ch;margin:0 auto 14px} .cta .lead{margin:0 auto 30px} /* footer */ .foot{padding:56px 0 44px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;background:var(--surface-2)} .foot .top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:20px;border-bottom:1px solid var(--line)} .foot .brand2{color:var(--text);font-weight:800;font-size:1.05rem} .foot a:hover{color:var(--text)} /* whatsapp flutuante */ .wa{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;background:#25d366;color:#fff;font-weight:700; padding:14px 20px;border-radius:999px;box-shadow:0 16px 40px -12px rgba(37,211,102,.5);transition:transform .25s} .wa:hover{transform:scale(1.05)} .wa svg{width:24px;height:24px;fill:#fff} @media(max-width:520px){.wa span{display:none}.wa{padding:16px}} /* motion */ .reveal{opacity:0;transform:translateY(32px)} .is-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} @media(prefers-reduced-motion:reduce){.reveal,.hero h1 .ln>span{opacity:1!important;transform:none!important}}