/* ===================================================================== PRIMAX EPOXY SOLUTIONS — Stylesheet Premium corporate aesthetic · navy + gold · Clash Display / General Sans Carregado de forma assíncrona; o critical CSS está inline no . ===================================================================== */ /* ---------- Fonts (self-hosted woff2) ---------- */ @font-face{font-family:'Clash Display';src:url('../assets/fonts/clashdisplay-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Clash Display';src:url('../assets/fonts/clashdisplay-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'General Sans';src:url('../assets/fonts/generalsans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'General Sans';src:url('../assets/fonts/generalsans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'General Sans';src:url('../assets/fonts/generalsans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'General Sans';src:url('../assets/fonts/generalsans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} /* ---------- Design tokens ---------- */ :root{ --navy:#033C75; --navy-700:#022c57; --navy-800:#022342; --navy-900:#021a33; --blue-600:#1257a8; --blue-500:#1d6fd0; --blue-400:#3b8ae6; --blue-200:#bcd4f2; --blue-50:#eef5fd; --gold:#F6A623; --gold-600:#e08a0a; --gold-100:#fdeccb; --ink:#0e1722; --slate:#566375; --slate-300:#9aa7b7; --line:#e5ebf3; --bg:#ffffff; --bg-soft:#f5f8fc; --bg-softer:#eaf1f9; --white:#ffffff; --shadow-sm:0 1px 2px rgba(3,32,72,.06),0 2px 8px rgba(3,32,72,.05); --shadow:0 10px 30px -12px rgba(3,32,72,.18),0 4px 12px -6px rgba(3,32,72,.10); --shadow-lg:0 30px 60px -20px rgba(3,32,72,.30),0 12px 24px -12px rgba(3,32,72,.18); --radius:18px; --radius-lg:26px; --radius-sm:12px; --container:1200px; --gradient-navy:linear-gradient(135deg,var(--navy) 0%,var(--navy-900) 100%); --gradient-blue:linear-gradient(135deg,var(--blue-500),var(--blue-600)); --gradient-gold:linear-gradient(135deg,#ffc15e,var(--gold) 55%,var(--gold-600)); --font-display:'Clash Display','General Sans',system-ui,sans-serif; --font-body:'General Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Reset & base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg); font-size:17px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img,picture,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0;color:var(--ink)} p{margin:0} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:3px solid var(--blue-400);outline-offset:2px;border-radius:6px} /* ---------- Layout helpers ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px} .section{padding:clamp(64px,8vw,120px) 0;position:relative} .section--soft{background:var(--bg-soft)} .section--navy{background:var(--gradient-navy);color:#dce8f7} .section--navy h2,.section--navy h3{color:#fff} .section__head{max-width:760px;margin:0 auto clamp(40px,5vw,64px);text-align:center} .section__head--left{margin-inline:0;text-align:left} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600; font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500);margin-bottom:18px} .eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px} .section--navy .eyebrow{color:var(--gold)} .h2{font-size:clamp(30px,4.2vw,48px)} .h3{font-size:clamp(22px,2.6vw,28px)} .lead{font-size:clamp(17px,1.4vw,20px);color:var(--slate);margin-top:18px;line-height:1.7} .section--navy .lead{color:var(--blue-200)} .text-gold{color:var(--gold)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body); font-weight:600;font-size:16px;line-height:1;padding:16px 26px;border-radius:999px;border:1.5px solid transparent; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;white-space:nowrap} .btn svg{width:18px;height:18px;flex:none} .btn--primary{background:var(--gradient-gold);color:#3a2400;box-shadow:0 10px 24px -8px rgba(246,166,35,.6)} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(246,166,35,.7)} .btn--navy{background:var(--navy);color:#fff;box-shadow:var(--shadow)} .btn--navy:hover{transform:translateY(-2px);background:var(--navy-700)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{border-color:var(--navy);background:var(--bg-soft)} .btn--light{background:#fff;color:var(--navy);box-shadow:var(--shadow)} .btn--light:hover{transform:translateY(-2px)} .btn--ghost-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.35)} .btn--ghost-light:hover{background:rgba(255,255,255,.14)} .btn--lg{padding:18px 34px;font-size:17px} .btn--block{width:100%} /* ---------- Header / Nav ---------- */ .header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s,background .3s} .header.is-scrolled{box-shadow:var(--shadow-sm);border-bottom-color:var(--line);background:rgba(255,255,255,.94)} .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px} .nav__brand{display:flex;align-items:center;gap:12px} .nav__brand img{width:42px;height:42px} .nav__name{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1;color:var(--navy)} .nav__name small{display:block;font-family:var(--font-body);font-weight:600;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--gold-600);margin-top:3px} .nav__links{display:flex;align-items:center;gap:30px} .nav__links a{font-weight:500;font-size:15.5px;color:var(--slate);transition:color .2s;position:relative} .nav__links a:hover{color:var(--navy)} .nav__actions{display:flex;align-items:center;gap:14px} .nav__phone{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--navy)} .nav__phone svg{width:18px;height:18px;color:var(--gold-600)} .nav__toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#fff; flex-direction:column;align-items:center;justify-content:center;gap:5px} .nav__toggle span{width:20px;height:2px;background:var(--navy);border-radius:2px;transition:.3s} .nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.is-open .nav__toggle span:nth-child(2){opacity:0} .nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Hero ---------- */ .hero{position:relative;color:#eaf2fd;overflow:hidden;background:var(--navy-900);isolation:isolate} .hero__scene{position:absolute;inset:0;z-index:-2;background:var(--navy-900)} .hero__scene picture,.hero__img{position:absolute;inset:0;width:100%;height:100%} .hero__img{object-fit:cover;object-position:62% center} .hero__overlay{position:absolute;inset:0;z-index:-1;background: linear-gradient(100deg,rgba(2,18,38,.94) 0%,rgba(2,18,38,.8) 32%,rgba(2,18,38,.5) 60%,rgba(2,16,34,.42) 100%), linear-gradient(180deg,rgba(2,18,38,.35),transparent 36%,rgba(2,16,34,.55))} .hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center; padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(56px,7vw,96px)} .hero__eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:13px;letter-spacing:.13em; text-transform:uppercase;color:#bcd4f2;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16); padding:8px 16px;border-radius:999px;margin-bottom:24px} .hero__eyebrow b{color:var(--gold);font-weight:700} .hero h1{font-size:clamp(34px,5.2vw,60px);color:#fff;letter-spacing:-.025em} .hero h1 .accent{background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;color:transparent} .hero__sub{font-size:clamp(17px,1.5vw,20px);color:#c4d8f2;margin-top:22px;max-width:540px;line-height:1.65} .hero__badges{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:30px} .hero__badges li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:#d6e6fa} .hero__badges svg{width:18px;height:18px;color:var(--gold);flex:none} .hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .hero__trust{display:flex;align-items:center;gap:14px;margin-top:30px;color:#9fbbe0;font-size:14px} .hero__stars{display:flex;gap:2px}.hero__stars svg{width:16px;height:16px;color:var(--gold)} /* ---------- Lead form ---------- */ .lead-form{background:#fff;border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-lg);color:var(--ink); border:1px solid rgba(255,255,255,.6)} .lead-form__head{margin-bottom:18px} .lead-form__head h2{font-size:23px;color:var(--ink)} .lead-form__head p{font-size:14.5px;color:var(--slate);margin-top:6px} .lead-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .field{display:flex;flex-direction:column;gap:6px} .field--full{grid-column:1/-1} .field label{font-size:12.5px;font-weight:600;color:var(--slate);letter-spacing:.01em} .field input,.field select,.field textarea{font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--line); border-radius:12px;background:var(--bg-soft);color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s;width:100%} .field textarea{resize:vertical;min-height:84px} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-400); background:#fff;box-shadow:0 0 0 4px rgba(59,138,230,.14)} .field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .lead-form__note{font-size:12px;color:var(--slate-300);text-align:center;margin-top:12px} .form-status{font-size:14.5px;font-weight:500;padding:12px 14px;border-radius:12px;margin-top:14px;display:none} .form-status.is-error{display:block;background:#fff1f1;color:#b42318;border:1px solid #ffd5d2} .form-status.is-success{display:block;background:#ecfdf3;color:#067647;border:1px solid #abefc6} .btn[aria-busy="true"]{opacity:.75;pointer-events:none} /* ---------- Benefits grid ---------- */ .benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .benefit{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px; transition:transform .3s var(--ease),box-shadow .3s,border-color .3s} .benefit:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} .benefit__ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px; background:var(--blue-50);color:var(--blue-500)} .benefit__ic svg{width:26px;height:26px} .benefit h3{font-size:17.5px;letter-spacing:-.01em} .benefit p{font-size:14px;color:var(--slate);margin-top:6px} /* ---------- Services ---------- */ .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .service-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:30px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s} .service-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none; background:linear-gradient(135deg,rgba(246,166,35,.0),rgba(246,166,35,.0));opacity:0;transition:opacity .35s; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .service-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .service-card__ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center; background:var(--gradient-navy);color:#fff} .service-card__ic svg{width:28px;height:28px} .service-card__no{font-family:var(--font-display);font-weight:700;font-size:40px;color:var(--bg-softer);line-height:1} .service-card h3{font-size:20px} .service-card>p{font-size:14.5px;color:var(--slate);margin-top:10px} .service-card__benefits{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--navy); background:var(--blue-50);padding:6px 12px;border-radius:999px} .tag svg{width:13px;height:13px;color:var(--gold-600)} .service-card--wide{grid-column:span 1} /* ---------- Applications ---------- */ .apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .app-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:300px;display:flex; flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:var(--shadow);isolation:isolate; transition:transform .35s var(--ease),box-shadow .35s} .app-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .app-card__bg{position:absolute;inset:0;z-index:-2;background:var(--gradient-navy)} .app-card__bg::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:screen; background:radial-gradient(circle at 30% 20%,rgba(59,138,230,.7),transparent 55%), radial-gradient(circle at 80% 70%,rgba(246,166,35,.35),transparent 50%)} .app-card__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .app-card__bg:has(.app-card__photo)::after{content:none} .app-card__scrim{position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(2,20,40,0) 30%,rgba(2,20,40,.6) 62%,rgba(2,18,38,.92) 100%)} .app-card__ic{position:absolute;top:22px;left:22px;width:48px;height:48px;border-radius:13px;display:grid;place-items:center; background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25)} .app-card__ic svg{width:24px;height:24px;color:#fff} .app-card__body{padding:24px} .app-card h3{font-size:21px;color:#fff} .app-card p{font-size:14px;color:#cfe0f5;margin-top:8px} .app-card__solve{font-size:12.5px;color:var(--gold);font-weight:600;margin-top:12px;display:flex;align-items:center;gap:7px} .app-card__solve svg{width:15px;height:15px} .app-card__link{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:#fff} .app-card__link svg{width:16px;height:16px;transition:transform .25s} .app-card:hover .app-card__link svg{transform:translateX(4px)} /* ---------- Before / After ---------- */ .ba-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center} .ba{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg); aspect-ratio:16/10;user-select:none;touch-action:pan-y;cursor:ew-resize} .ba__layer{position:absolute;inset:0;background-size:cover;background-position:center} .ba__layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .ba__before{clip-path:inset(0 50% 0 0)} .ba__tag{position:absolute;top:16px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:6px 12px;border-radius:999px;color:#fff;backdrop-filter:blur(4px)} .ba__tag--before{left:16px;background:rgba(20,24,30,.6)} .ba__tag--after{right:16px;background:rgba(246,166,35,.9);color:#3a2400} .ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);z-index:3; box-shadow:0 0 0 1px rgba(3,32,72,.15)} .ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%; background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;color:var(--navy)} .ba__grip svg{width:22px;height:22px} .ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4} .ba-copy h3{font-size:clamp(24px,3vw,32px)} .ba-copy p{color:var(--slate);margin-top:14px} .ba-cats{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px} .ba-cats span{font-size:13px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line); padding:8px 14px;border-radius:999px} /* ---------- Process ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step;position:relative} .step{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius); padding:30px 26px;backdrop-filter:blur(4px);transition:transform .3s,background .3s} .step:hover{transform:translateY(-4px);background:rgba(255,255,255,.08)} .step__no{font-family:var(--font-display);font-weight:700;font-size:15px;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;background:var(--gradient-gold);color:#3a2400;margin-bottom:18px} .step__ic{position:absolute;top:30px;right:26px;color:rgba(255,255,255,.4)} .step__ic svg{width:26px;height:26px} .step h3{font-size:18.5px;color:#fff} .step p{font-size:14px;color:#bcd0ea;margin-top:8px} /* ---------- Surface prep ---------- */ .prep{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .prep__visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow-lg); background:var(--navy-900)} .prep__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .prep__tag{position:absolute;left:18px;bottom:18px;z-index:2;font-size:12.5px;font-weight:700;letter-spacing:.02em; color:#fff;background:rgba(2,18,38,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18); padding:9px 15px;border-radius:999px} .prep ul{margin-top:24px;display:flex;flex-direction:column;gap:14px} .prep ul li{display:flex;gap:12px;align-items:flex-start;color:var(--slate)} .prep ul svg{width:22px;height:22px;color:var(--gold-600);flex:none;margin-top:2px} .prep ul b{color:var(--ink)} /* ---------- Reviews ---------- */ .reviews-top{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-bottom:46px} .reviews-rating{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line); border-radius:16px;padding:16px 22px;box-shadow:var(--shadow-sm)} .reviews-rating b{font-family:var(--font-display);font-size:34px;line-height:1} .stars{display:flex;gap:3px}.stars svg{width:18px;height:18px;color:var(--gold)} .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm); display:flex;flex-direction:column;gap:14px;transition:transform .3s,box-shadow .3s} .review-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .review-card p{font-size:15px;color:#3a4656;line-height:1.6} .review-card__by{display:flex;align-items:center;gap:12px;margin-top:auto} .avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff; font-family:var(--font-display);background:var(--gradient-blue);flex:none} .review-card__by b{font-size:14.5px;display:block} .review-card__by small{color:var(--slate);font-size:12.5px} /* ---------- Service areas ---------- */ .areas{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center} .areas__list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px} .areas__list li{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--ink); background:var(--bg-soft);border:1px solid var(--line);padding:12px 16px;border-radius:12px} .areas__list svg{width:17px;height:17px;color:var(--gold-600);flex:none} .map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);min-height:420px;background:var(--bg-softer); position:relative} .map iframe{width:100%;height:100%;min-height:420px;border:0;display:block} .map__ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--slate);font-size:14px} /* ---------- FAQ ---------- */ .faq{max-width:820px;margin:0 auto} .faq__item{border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:14px;overflow:hidden; transition:box-shadow .3s,border-color .3s} .faq__item.is-open{box-shadow:var(--shadow);border-color:transparent} .faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left; background:none;border:0;padding:22px 24px;font-family:var(--font-display);font-weight:600;font-size:17.5px;color:var(--ink)} .faq__icon{width:30px;height:30px;border-radius:50%;background:var(--blue-50);color:var(--navy);flex:none; display:grid;place-items:center;transition:transform .3s,background .3s,color .3s} .faq__icon svg{width:16px;height:16px} .faq__item.is-open .faq__icon{background:var(--gold);color:#3a2400;transform:rotate(45deg)} .faq__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)} .faq__a p{padding:0 24px 24px;color:var(--slate);font-size:15.5px} /* ---------- Final CTA ---------- */ .cta-final{position:relative;overflow:hidden} .cta-final__card{position:relative;border-radius:var(--radius-lg);background:var(--gradient-navy);color:#fff; padding:clamp(40px,6vw,72px);text-align:center;overflow:hidden;box-shadow:var(--shadow-lg)} .cta-final__card::before{content:"";position:absolute;top:-40%;right:-10%;width:50%;height:160%; background:radial-gradient(circle,rgba(246,166,35,.3),transparent 60%)} .cta-final__card::after{content:"";position:absolute;bottom:-40%;left:-10%;width:50%;height:160%; background:radial-gradient(circle,rgba(59,138,230,.4),transparent 60%)} .cta-final h2{font-size:clamp(28px,4vw,46px);color:#fff;position:relative} .cta-final p{color:#c4d8f2;max-width:640px;margin:18px auto 0;position:relative} .cta-final__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px;position:relative} /* ---------- Footer ---------- */ .footer{background:var(--navy-900);color:#a9c1de;padding:70px 0 28px} .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.1)} .footer__brand{display:flex;align-items:center;gap:12px;margin-bottom:18px} .footer__brand img{width:46px;height:46px} .footer__brand b{font-family:var(--font-display);font-size:19px;color:#fff;line-height:1.1} .footer__brand small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:3px} .footer p{font-size:14.5px;line-height:1.65;color:#9bb4d3} .footer h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-family:var(--font-body);font-weight:600} .footer ul li{margin-bottom:10px} .footer ul a,.footer__contact a{font-size:14.5px;color:#a9c1de;transition:color .2s} .footer ul a:hover,.footer__contact a:hover{color:#fff} .footer__contact li{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;font-size:14.5px} .footer__contact svg{width:18px;height:18px;color:var(--gold);flex:none;margin-top:2px} .footer__social{display:flex;gap:12px;margin-top:20px} .footer__social a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);transition:.25s} .footer__social a:hover{background:var(--gold);color:#3a2400;transform:translateY(-2px)} .footer__social svg{width:18px;height:18px} .footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-top:24px;font-size:13px;color:#7e98ba} .footer__credit b{color:#fff;font-weight:600} .footer__heart{display:inline-block;animation:heartbeat 1.8s var(--ease) infinite} @keyframes heartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.28)}24%{transform:scale(1)}36%{transform:scale(1.16)}48%{transform:scale(1)}} @media (prefers-reduced-motion:reduce){.footer__heart{animation:none}} /* ---------- Sticky mobile CTA ---------- */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;padding:10px 14px; background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line); box-shadow:0 -8px 24px -12px rgba(3,32,72,.3)} .sticky-cta .btn{flex:1;padding:14px} /* ---------- Reveal on scroll (apenas com JS — sem JS o conteúdo aparece normal) ---------- --i = índice de stagger (definido via JS por container). Variantes direcionais via .reveal--left / --right / --scale. */ .js .reveal{opacity:0;transform:translateY(34px) scale(.984);filter:blur(3px); transition:opacity .75s var(--ease),transform .85s var(--ease),filter .6s ease; transition-delay:calc(var(--i,0)*90ms);will-change:opacity,transform} .js .reveal--left{transform:translateX(-46px)} .js .reveal--right{transform:translateX(46px)} .js .reveal--scale{transform:scale(.9)} .js .reveal--up-lg{transform:translateY(60px)} .js .reveal.is-in{opacity:1;transform:none;filter:none;will-change:auto} /* mantém compatibilidade com data-delay (fallback caso o JS não defina --i) */ .js .reveal[data-delay="1"]{--i:1} .js .reveal[data-delay="2"]{--i:2} .js .reveal[data-delay="3"]{--i:3} /* ---------- Hero: animação de entrada no load (acima da dobra, sem observer) ---------- */ @keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes heroFormIn{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}} .js .hero__content>*{animation:heroIn .8s var(--ease) both} .js .hero__content>*:nth-child(1){animation-delay:.05s} .js .hero__content>*:nth-child(2){animation-delay:.14s} .js .hero__content>*:nth-child(3){animation-delay:.23s} .js .hero__content>*:nth-child(4){animation-delay:.32s} .js .hero__content>*:nth-child(5){animation-delay:.41s} .js .hero__content>*:nth-child(6){animation-delay:.5s} .js .lead-form{animation:heroFormIn .9s var(--ease) .3s both} .js .header{animation:heroIn .6s var(--ease) both} @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none;filter:none;transition:none} .js .hero__content>*,.js .lead-form,.js .header{animation:none} } /* ---------- Exit-intent modal ---------- */ .modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px} .modal.is-open{display:flex} .modal__backdrop{position:absolute;inset:0;background:rgba(2,18,38,.62);backdrop-filter:blur(6px); animation:modalFade .3s ease both} .modal__card{position:relative;width:100%;max-width:760px;background:#fff;border-radius:var(--radius-lg); overflow:hidden;box-shadow:var(--shadow-lg);animation:modalPop .4s var(--ease) both} @keyframes modalFade{from{opacity:0}to{opacity:1}} @keyframes modalPop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}} .modal__close{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%; border:0;background:rgba(255,255,255,.85);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow-sm)} .modal__close svg{width:20px;height:20px} .modal__close:hover{background:#fff;transform:rotate(90deg);transition:transform .3s} .modal__grid{display:grid;grid-template-columns:.82fr 1.18fr} .modal__aside{position:relative;background:var(--gradient-navy);color:#dce8f7;padding:34px 28px; display:flex;flex-direction:column;gap:20px;overflow:hidden} .modal__aside::before{content:"";position:absolute;top:-30%;right:-30%;width:80%;height:80%; background:radial-gradient(circle,rgba(246,166,35,.32),transparent 65%)} .modal__aside::after{content:"";position:absolute;bottom:-30%;left:-20%;width:70%;height:70%; background:radial-gradient(circle,rgba(59,138,230,.4),transparent 65%)} .modal__badge{position:relative;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.04em; background:var(--gradient-gold);color:#3a2400;padding:7px 13px;border-radius:999px} .modal__shield{position:relative} .modal__shield img{width:64px;height:64px} .modal__perks{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:auto} .modal__perks li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:#eaf2fd} .modal__perks svg{width:18px;height:18px;color:var(--gold);flex:none} .modal__body{padding:34px 32px} .modal__eyebrow{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--gold-600); text-transform:uppercase;margin-bottom:10px} .modal__title{font-size:clamp(22px,3vw,28px);line-height:1.12} .modal__desc{font-size:15px;color:var(--slate);margin-top:12px;line-height:1.6} .modal__form{margin-top:20px;display:flex;flex-direction:column;gap:12px} .modal__form .field label{font-size:12.5px} .modal__call{text-align:center;font-size:14px;font-weight:600;color:var(--navy);margin-top:2px} .modal__call:hover{color:var(--gold-600)} .modal__dismiss{background:none;border:0;color:var(--slate-300);font-size:12.5px;text-decoration:underline; padding:2px;align-self:center} .modal__dismiss:hover{color:var(--slate)} @media (prefers-reduced-motion:reduce){.modal__backdrop,.modal__card{animation:none}} @media (max-width:680px){ .modal{padding:12px;align-items:flex-end} .modal__grid{grid-template-columns:1fr} .modal__aside{display:none} .modal__card{max-width:480px;max-height:92vh;overflow-y:auto} .modal__body{padding:30px 22px 24px} } /* ---------- Responsive ---------- */ @media (max-width:1024px){ .hero__inner{grid-template-columns:1fr;gap:40px} .lead-form{max-width:520px} .benefits{grid-template-columns:repeat(2,1fr)} .services-grid,.apps-grid,.reviews-grid,.steps{grid-template-columns:repeat(2,1fr)} .ba-wrap,.prep,.areas{grid-template-columns:1fr;gap:34px} .footer__grid{grid-template-columns:1fr 1fr} .nav__links{display:none} } @media (max-width:680px){ body{font-size:16px} .nav__actions .nav__phone,.nav__actions .btn{display:none} .nav__toggle{display:flex} .nav.is-open .nav__links{display:flex;position:absolute;left:0;right:0;top:74px;flex-direction:column; align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 24px 20px;box-shadow:var(--shadow)} .nav.is-open .nav__links a{padding:14px 0;border-bottom:1px solid var(--line)} .nav.is-open .nav__links .btn{margin-top:12px;border-bottom:0} .benefits,.services-grid,.apps-grid,.reviews-grid,.steps{grid-template-columns:1fr} .lead-form__grid{grid-template-columns:1fr} .lead-form{padding:24px} .footer__grid{grid-template-columns:1fr;gap:30px} .sticky-cta{display:flex} body{padding-bottom:72px} .section{padding:56px 0} .hero__actions .btn{flex:1} }