:root{
  --accent:#2dff03; /* green CTA */
  --accent-2:#0cd64fcb;
  --site-yellow:#ffe601; /* base yellow tone */
  --site-yellow-2:#ffe600;
  --bg:#fff9ed; /* soft yellow background */
  --muted:#fcfcfc;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:#0f172a; background:var(--bg)}

/* Smooth defaults */
img,svg{max-width:100%;height:auto;display:block}

  :root{
    --accent:#10b981; /* soft teal CTA */
    --accent-2:#059669;
    --site-yellow:#ffd66b; /* warm accent */
    --site-yellow-2:#ffb84d;
    --bg:#f6faf8; /* very soft background */
    --muted:#64748b;
    --card:#ffffff;
    --glass: rgba(255,255,255,0.65);
  }
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:#0f172a}
  body{font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:#0f172a; background:var(--bg); -webkit-font-smoothing:antialiased}
/* Top bar with marquee */
  .hero{display:flex; gap:2rem; align-items:center; justify-content:space-between; padding:56px 28px; background:linear-gradient(180deg, rgba(2,6,23,0.14), rgba(2,6,23,0.06)), url('imagem/trabalhando-com-blueprint_1098-14292.webp') no-repeat center/cover; color:#fff; position:relative; overflow:hidden}
.marquee-wrap{overflow:hidden; border-top:4px solid rgba(255,255,255,0.04)}
  .cta{display:inline-block; padding:12px 20px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border-radius:12px; text-decoration:none; box-shadow:0 12px 36px rgba(6,95,70,0.12); transition:transform .22s ease, box-shadow .22s ease}
.marquee span{font-weight:600}
  .card{background:var(--card); border-radius:14px; box-shadow:0 10px 30px rgba(15,23,42,0.06); overflow:hidden}

  .card:hover{transform:translateY(-6px); box-shadow:0 26px 60px rgba(2,6,23,0.08)}
.brand h1{margin:0;font-size:1.1rem}
  .contact{padding:28px 20px; background:transparent}

  .availability{padding:28px 20px; background:transparent}
.hero{display:flex; gap:2rem; align-items:center; justify-content:space-between; padding:56px 28px; background:linear-gradient(180deg, rgba(3,10,12,0.18), rgba(3,10,12,0.18)), url('imagem/trabalhando-com-blueprint_1098-14292.webp') no-repeat center/cover; color:#fff; position:relative; overflow:hidden}
  .whatsapp-fab{position:fixed; right:18px; bottom:18px; z-index:1200; display:flex; align-items:center; gap:10px; padding:6px; border-radius:999px; background:transparent; animation:whatsapp-bounce 3s infinite; transform-origin:center}
.hero h2{margin:0 0 12px 0; font-size:2rem}
  .whatsapp-fab a{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border-radius:16px; text-decoration:none; box-shadow:0 18px 46px rgba(6,95,70,0.14); transition:transform .18s ease, box-shadow .18s ease}
.cta{display:inline-block; padding:14px 22px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border-radius:10px; text-decoration:none; box-shadow:0 10px 30px rgba(16,185,129,0.18); transition:transform .22s ease, box-shadow .22s ease}
  .whatsapp-fab a:hover{transform:translateY(-6px); box-shadow:0 28px 60px rgba(6,95,70,0.18)}
.topbar{background:linear-gradient(90deg,#ff8800 0%, #038518c5 100%); color:#fff; box-shadow:0 6px 20px rgba(2,6,23,0.08)}
  .whatsapp-fab svg{display:block}
  .whatsapp-label{background:rgba(255,255,255,0.98); color:#064e3b; padding:8px 12px; border-radius:999px; font-weight:700; box-shadow:0 8px 30px rgba(2,6,23,0.06); font-size:0.95rem}
  .whatsapp-ring{position:absolute; right:10px; bottom:10px; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle at center, rgba(16,185,129,0.12), transparent 35%); pointer-events:none}
.marquee{display:flex; gap:3rem; white-space:nowrap; padding:0.6rem 1rem; animation:scroll 22s linear infinite}
  .cert-visual{width:320px; height:320px; border-radius:18px; background:linear-gradient(135deg,#34D399,#059669); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 30px 60px rgba(2,6,23,0.08)}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
  .cert-visual .badge{background:rgba(255,255,255,0.95); color:#064e3b; font-weight:800; padding:10px 18px; border-radius:999px; margin-bottom:18px}
.brand{display:flex; align-items:center; gap:14px; padding:16px 24px}
  .cert-visual .cert-sub{color:rgba(255, 255, 255, 0.96); font-weight:700; margin-top:6px}
  .cert-shield{display:flex; flex-direction:column; align-items:center; gap:8px}
  .cert-badge{font-weight:800; color:#063b2e}
.brand p{margin:0;font-size:0.85rem; color:rgba(255,255,255,0.9)}
  .ideal-card{display:flex; gap:14px; align-items:center; background:linear-gradient(180deg, #ffffff, #fbfdfc); padding:18px; border-radius:12px; box-shadow:0 12px 30px rgba(15,23,42,0.04); text-align:left}
.brand-logo{width:86px;height:auto;border-radius:9px;box-shadow:0 6px 18px rgba(2,6,23,0.12)}
  .cert-box{border:1px solid rgba(2,6,23,0.04); padding:16px; border-radius:12px; background:linear-gradient(180deg,#ffffff,#fbfbfb)}

  /* Hero small extras */
  .hero-benefits{list-style:none; padding:0; margin:10px 0 12px; color:rgba(255,255,255,0.95); display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px}
  .hero-benefits li{background:rgba(255,255,255,0.06); padding:8px 10px; border-radius:8px; font-weight:600}
  .hero-ctas{display:flex; gap:12px; align-items:center; margin-top:10px}
  .trust-row{display:flex; gap:8px; margin-top:12px}
  .trust-pill{background:rgba(255,255,255,0.12); color:#fff; padding:6px 10px; border-radius:999px; font-weight:700}
.products{padding:36px 20px}
.products h3{margin:0 0 18px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.card{background:var(--card); border-radius:10px; box-shadow:0 6px 18px rgba(15,23,42,0.06); overflow:hidden}
.card-media{padding:14px; display:flex; align-items:center; justify-content:center}
.card-body{padding:12px 14px}
.card-body h4{margin:0 0 6px}
.card-body p{margin:0 0 12px; color:var(--muted)}
.price{font-weight:700; margin-bottom:8px}
.btn{display:inline-block; padding:8px 12px; background:#111827; color:#fff; border-radius:8px; text-decoration:none}
.products{padding:48px 20px}
.products h3{margin:0 0 18px; font-size:1.6rem}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.card{background:var(--card); border-radius:14px; box-shadow:0 12px 30px rgba(2,6,23,0.06); overflow:hidden; transform:translateY(0); transition:transform .4s cubic-bezier(.2,.9,.2,1), box-shadow .3s ease}
.card:hover{transform:translateY(-8px); box-shadow:0 24px 48px rgba(2,6,23,0.08)}
.card-media{padding:18px; display:flex; align-items:center; justify-content:center}
.card-body{padding:16px 18px}
.card-body h4{margin:0 0 8px}
.card-body p{margin:0 0 12px; color:var(--muted)}
.price{font-weight:800; margin-bottom:8px; color:#0f172a}
.btn{display:inline-block; padding:10px 14px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border-radius:10px; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(6,185,129,0.12)}

.contact{padding:28px 20px; background:#f8fafc}
.contact-cards{display:flex; gap:12px; flex-wrap:wrap}
.contact-card{display:block; padding:12px 14px; background:#fff; border-radius:8px; box-shadow:0 6px 18px rgba(15,23,42,0.04); text-decoration:none; color:#0f172a}
.contact-card strong{display:block}
.contact-card.whatsapp{border-left:4px solid #25D366}

.site-footer{padding:18px 20px; text-align:center; font-size:0.9rem; color:var(--muted)}

/* Reviews */
.reviews{padding:28px 20px}
.reviews-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.review{background:#fff; padding:14px; border-radius:8px; box-shadow:0 6px 18px rgba(15,23,42,0.04)}
.review footer{margin-top:8px; color:var(--muted); font-size:0.9rem}
.reviews{padding:36px 20px; background:linear-gradient(180deg,#ffffff,#fbfdfc)}
.reviews-list{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1200px; margin:0 auto}
.review{background:#fff; padding:24px; border-radius:12px; box-shadow:0 18px 40px rgba(2,6,23,0.06); transition:transform .28s ease, box-shadow .28s ease}
.review:hover{transform:translateY(-8px); box-shadow:0 30px 70px rgba(2,6,23,0.08)}
.review .stars{color:#2563eb; font-weight:700; margin-bottom:10px}
.review .quote{font-size:42px; color:#dbeafe; margin-top:-6px; margin-bottom:8px}
.review p{color:#475569; line-height:1.6}
.review hr{border:none; border-top:1px solid #eef2f7; margin:12px 0}
.author{margin-top:8px; color:#0f172a}
.author .role{color:var(--muted); font-size:0.9rem; margin-top:4px}


/* CEP availability */
.availability{padding:28px 20px; background:#ff0000}
.cep-form{display:flex; gap:8px; max-width:560px}
.cep-form input{flex:1; padding:10px 12px; border-radius:8px; border:1px solid #e6e6e6}
.cep-result{margin-top:12px; color:var(--muted)}
.availability{padding:36px 20px; background:linear-gradient(180deg,#ffffff,#a3a8a3)}
.cep-form{display:flex; gap:8px; max-width:560px}
.cep-form input{flex:1; padding:12px 14px; border-radius:10px; border:1px solid #e9eef0; box-shadow:0 6px 18px rgba(2,6,23,0.02)}
.cep-result{margin-top:12px; color:var(--muted)}

/* Floating WhatsApp button */
.whatsapp-fab{position:fixed; right:18px; bottom:18px; z-index:1200; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:transparent; animation:whatsapp-bounce 2.6s infinite; transform-origin:center}
.whatsapp-fab a{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; border-radius:50%; text-decoration:none; box-shadow:0 12px 34px rgba(18,140,126,0.18); transition:transform .18s ease, box-shadow .18s ease}
.whatsapp-fab a:hover{transform:translateY(-6px); box-shadow:0 20px 48px rgba(18,140,126,0.22)}
.whatsapp-fab svg{display:block}

@keyframes whatsapp-bounce{
  0%,100%{transform:translateY(0)}
  45%{transform:translateY(-8px)}
}

/* in-view animations */
.is-visible{opacity:1; transform:none}
[data-animate]{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1)}

@media (max-width:800px){
  .hero{flex-direction:column; text-align:center}
  .marquee{animation-duration:14s}
}

/* Mobile-specific adjustments */
@media (max-width:680px){
  /* Header */
  .brand{gap:10px; padding:10px 14px}
  .brand-logo{width:44px}
  .brand-text h1{font-size:1rem}
  .brand-text p{font-size:0.85rem}

  /* Marquee smaller */
  .marquee{font-size:0.92rem}

  /* Hero */
  .hero{padding:36px 16px;background-position:center top}
  .hero-content{max-width:100%}
  .hero h2{font-size:1.6rem; line-height:1.06}
  .hero p{font-size:0.95rem}
  .cta{padding:12px 18px;font-size:1rem}
  .hero-top-logo{top:10px}

  /* Grids collapse to single column */
  .grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .reviews-list{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .lic-grid{grid-template-columns:1fr}
  .ideal-grid{grid-template-columns:1fr}

  /* Cards and images */
  .card-media img{height:200px}
  .card-body{padding:12px}
  .card{border-radius:10px}

  /* Processo adjustments */
  .step-card{padding:18px}
  .step-num{width:48px;height:48px;font-size:1rem}
  .step-icon{font-size:26px}

  /* Reviews spacing */
  .review{padding:18px}
  .review .quote{font-size:36px}

  /* Gallery images touch target */
  .gallery-grid img{height:180px}

  /* CTA now */
  .cta-now{padding:36px 12px}
  .cta-now h2{font-size:1.6rem}

  /* WhatsApp FAB smaller */
  .whatsapp-fab{right:12px; bottom:12px; width:52px; height:52px}
  .whatsapp-fab a{width:46px; height:46px}

  /* Footer spacing */
  .site-footer{padding:16px}
}

/* Extra small phones */
@media (max-width:420px){
  .hero h2{font-size:1.3rem}
  .brand-text h1{font-size:0.95rem}
  .cta{padding:10px 14px}
  .marquee{font-size:0.88rem}
}

/* "Esse serviço é ideal para você" */
.ideal{padding:48px 20px; text-align:center}
.ideal h3{font-size:1.8rem; margin:0 0 18px; font-weight:700}
.ideal-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:980px; margin:0 auto 16px}
.ideal-card{display:flex; gap:14px; align-items:center; background:#f3eded; padding:18px; border-radius:12px; box-shadow:0 12px 30px rgba(137, 144, 163, 0.952); text-align:left}
.ideal-card .icon{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%;}
.ideal-text{font-weight:600}
.ideal-note{color:var(--muted); margin-top:6px}
.ideal-cta-wrap{margin-top:22px}
.ideal-cta-wrap .cta{padding:14px 28px; font-size:1.05rem}

@media (max-width:880px){
  .ideal-grid{grid-template-columns:1fr; padding:0 12px}
  .ideal-card{padding:14px}
}

/* Certificação */
.certificacao{padding:44px 20px; background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.9));}
.cert-wrap{display:grid; grid-template-columns:360px 1fr; gap:28px; align-items:center; max-width:1100px; margin:0 auto}
.cert-card{display:flex; align-items:center; justify-content:center}
.cert-visual{width:320px; height:320px; border-radius:18px; background:linear-gradient(135deg,#0ea5ff,#4f46e5); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 30px 60px rgba(2,6,23,0.08)}
.cert-visual .badge{background:rgba(253, 252, 252, 0.95); color:#0f172a; font-weight:800; padding:10px 18px; border-radius:999px; margin-bottom:18px}
.cert-visual .cert-sub{color:rgba(255, 255, 255, 0.9); font-weight:700; margin-top:6px}
.cert-content h3{margin:0 0 8px; font-size:1.6rem}
.cert-content p{color:var(--muted); margin:0 0 14px}
.cert-list{list-style:none; padding:0; margin:0 0 18px}
.cert-list li{padding:8px 0; color:#0f172a}
.cert-box{border:2px solid rgba(2,6,23,0.06); padding:16px; border-radius:10px; background:linear-gradient(180deg,#9f9fa7,#ffffff)}
.cert-box strong{display:block; margin-bottom:8px}
.cert-box .btn{margin-top:12px; background:linear-gradient(90deg,var(--accent),var(--accent-2));}

@media (max-width:980px){
  .cert-wrap{grid-template-columns:1fr;}
  .cert-card{order:2}
  .cert-content{order:1}
  .cert-visual{width:220px; height:220px}
}

/* Processo section */
.processo{padding:44px 20px; background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.98));}
.processo h3{font-size:1.8rem; text-align:center; margin:0 0 22px}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1100px; margin:0 auto}
.step-card{background:#fff; padding:28px; border-radius:12px; box-shadow:0 12px 36px rgba(2,6,23,0.04); text-align:left}
.step-num{width:44px;height:44px;border-radius:999px;background:#05293a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:12px}
.step-icon{font-size:28px;color:var(--site-yellow-2); margin-bottom:12px}
.step-card h4{margin:0 0 8px}
.step-card p{color:var(--muted); margin:0}
.process-cta{margin-top:20px; text-align:center}
.process-cta .cta{padding:14px 32px}

@media (max-width:1100px){
  .process-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .process-grid{grid-template-columns:1fr}
}

/* product image sizing */
.card-media img{width:100%;height:160px;object-fit:cover;border-radius:8px}

/* make steps more visual */
.step-num{width:56px;height:56px;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),#063b3b);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px}
.step-icon{font-size:34px;color:var(--site-yellow-2); margin-bottom:12px}

/* Licenciado (orgãos) */
.licenciado{padding:48px 20px; background:linear-gradient(180deg, rgba(3,10,12,0.06), rgba(3,10,12,0.02)); color:#05293a}
.licenciado h3{font-size:1.8rem; text-align:center; margin:0 0 8px}
.lic-desc{max-width:900px;margin:8px auto 26px;text-align:center;color:rgba(5,41,58,0.8)}
.lic-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1100px; margin:0 auto}
.lic-card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); padding:28px; border-radius:12px; text-align:center; box-shadow:0 20px 50px rgba(2,6,23,0.06)}
.lic-img img{max-width:120px; opacity:0.95}
.lic-title{margin-top:16px;font-weight:700;color:#083142}

@media (max-width:980px){
  .lic-grid{grid-template-columns:1fr;}
}

/* hero top logo placeholder - allows user to place their logo centered at top of hero */
.hero-top-logo{position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:50; width:220px; height:auto; display:flex; align-items:center; justify-content:center}
.hero-top-logo img{max-height:56px}

/* Gallery */
.galeria{padding:36px 20px; background:linear-gradient(180deg,#fff,#fff)}
.galeria h3{text-align:center;margin-bottom:6px}
.gal-sub{text-align:center;color:var(--muted);margin-bottom:18px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:1200px;margin:0 auto}
.gallery-grid img{width:100%;height:180px;object-fit:cover;border-radius:10px;box-shadow:0 12px 30px rgba(2,6,23,0.06)}
.gal-empty{text-align:center;color:var(--muted);margin-top:12px}

/* Large CTA section (orange) */
.cta-now{background:#e86b00; color:#fff; padding:56px 18px; text-align:center}
.cta-now .cta-inner{max-width:900px;margin:0 auto}
.cta-now h2{font-size:2.4rem;margin:0 0 10px;font-weight:800}
.cta-now p{margin:0 0 20px;color:rgba(255,255,255,0.95)}
.cta-now .cta{padding:14px 32px;font-size:1.05rem; border-radius:10px; box-shadow:0 18px 40px rgba(16,185,129,0.18)}

@media (max-width:800px){
  .cta-now h2{font-size:1.6rem}
  .cta-now .cta{padding:12px 20px}
}