/* Design Tokens */
:root{
  --bg:#f0f4f8; --bg-soft:#e8f0f8; --card:#fff; --ink:#233042;
  --brand:#0a3d62; --brand-2:#0d63ff; --muted:#6b7a90;
  --shadow:0 10px 30px rgba(0,0,0,.08); --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg-soft),var(--bg));}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1200px,92vw);margin-inline:auto}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{position:fixed;left:16px;top:16px;background:#fff;color:#000;padding:.5rem .75rem;border-radius:8px;box-shadow:var(--shadow);z-index:10000}

/* Barra de progresso */
.progress{position:fixed;inset:0 0 auto 0;height:4px;background:transparent;z-index:1200}
.progress__bar{width:0;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}

/* Topbar */
.topbar{position:fixed;inset:0 0 auto 0;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.06);z-index:1100}
.topbar__wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 2rem}
.brand img{height:40px}
.menu-toggle{display:none;font-size:2rem;background:none;border:none;cursor:pointer}
.menu{display:flex;align-items:center;gap:1rem}
.menu a{font-weight:600;padding:.5rem .75rem;border-radius:12px;transition:transform .2s ease,background .2s ease,color .2s ease}
.menu a:hover{transform:translateY(-1px);background:#f1f6ff;color:var(--brand-2)}
.btn{display:inline-block;padding:.9rem 1.2rem;border-radius:14px;font-weight:700;user-select:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.btn--small{padding:.55rem .9rem;border-radius:12px}
.btn--primary{background:radial-gradient(100% 100% at 0% 0%,var(--brand) 0%,var(--brand-2) 100%);color:#fff;box-shadow:0 10px 24px rgba(13,99,255,.25)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--ghost{border:2px solid var(--brand);color:var(--brand);background:#fff}
.btn--ghost:hover{background:var(--brand);color:#fff}

/* Hero */
.hero{padding-top:72px;text-align:center}
.hero__media{position:relative}
.hero__img{width:min(1200px,92vw);height:auto;border-radius:26px;box-shadow:var(--shadow);margin:24px auto}
.hero__overlay{margin-top:-6px}
.hero__overlay h1{font-size:clamp(1.6rem,3.2vw,3rem);color:#0a2540}
.hero__overlay .accent{color:var(--brand-2)}
.hero__cta{display:flex;gap:12px;justify-content:center;margin-top:10px}
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(1200px,92vw);margin:18px auto 0}
.stat{background:var(--card);border:1px solid #e6edf6;border-radius:16px;padding:14px;display:grid;place-items:center;gap:4px;box-shadow:var(--shadow)}
.stat img{width:36px;height:36px}
.stat div{display:flex;align-items:baseline;gap:6px;font-weight:800}
.counter{font-size:1.8rem;color:var(--brand-2)}

/* Sections */
.section{padding:48px 0}
.section__header{margin-bottom:18px}
.section__header.center{text-align:center}
.section__header h2{font-size:clamp(1.4rem,2.4vw,2.2rem);color:var(--brand)}

/* About */
.about__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.about__card{background:var(--card);border:1px solid #e6edf6;border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.about__card h3{margin:0 0 6px 0}
.about__card ul{margin:0;padding-left:18px}
.about__text{max-width:900px;margin:14px auto 0;background:var(--card);border:1px solid #e6edf6;border-radius:16px;padding:18px;box-shadow:var(--shadow);text-align:justify}

/* Áreas */
.areas__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.area{background:var(--card);border:1px solid #e6edf6;border-radius:16px;padding:18px;box-shadow:var(--shadow);text-align:center}
.area img{width:44px;height:44px;margin:auto}

/* Projetos */
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px}
.chip{border:1px solid #cfe0ff;background:#fff;border-radius:999px;padding:.4rem .9rem;cursor:pointer}
.chip.is-active{background:linear-gradient(90deg,#e9f0ff,#f3f7ff);border-color:#bcd1ff}
.chip--link{border-style:dashed}
.grid-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card.project{background:var(--card);border:1px solid #e6edf6;border-radius:16px;padding:10px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;transform-style:preserve-3d}
.card.project img{width:100%;height:420px;object-fit:cover;border-radius:12px}
.card.project figcaption{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}
.card.project h3{font-size:1rem;margin:0}
.card.project small{color:var(--muted)}
.card.project:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.14)}

/* Lightbox */
.lightbox{border:none;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.4);padding:0;max-width:min(92vw,1100px)}
.lightbox::backdrop{background:rgba(0,0,0,.6)}
.lightbox img{max-width:100%;height:auto;border-radius:18px}
.lightbox__close{position:absolute;right:10px;top:8px;border:none;background:rgba(255,255,255,.85);border-radius:999px;padding:.35rem .6rem;cursor:pointer}

/* Depoimentos */
.testimonials{display:grid;grid-auto-flow:column;grid-auto-columns:min(280px,80%);gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.testimonial{scroll-snap-align:center;background:var(--card);border:1px solid #e6edf6;border-radius:16px;padding:16px;box-shadow:var(--shadow)}

/* Contacto */
.contact__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.contact__card{background:var(--card);border:1px solid #e6edf6;border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.contact__actions{display:flex;gap:10px;margin-top:10px}
.contact__map{min-height:280px}
.map__placeholder{display:grid;place-items:center;width:100%;height:100%;min-height:280px;border:2px dashed #cfe0ff;border-radius:16px;background:#fff;color:#2a3b55;gap:8px;cursor:pointer}
.map__placeholder img{width:36px;height:36px}

/* Footer */
.footer{background:radial-gradient(120% 120% at 0% 0%,#0a3d62 0%,#062a44 100%);color:#fff;padding:26px 0;margin-top:24px;text-align:center}

/* Top button */
.top-btn{position:fixed;right:20px;bottom:20px;border:none;background:#fff;color:#000;border-radius:999px;padding:.6rem .9rem;box-shadow:0 10px 24px rgba(0,0,0,.20);cursor:pointer}
.top-btn:hover{background:var(--brand-2);color:#fff}

/* Social (horizontal) */
.section--contact .social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:14px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:6px;
}

.section--contact .social a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e6edf6;
  background:#fff;
  border-radius:12px;
  padding:6px;
  box-shadow:var(--shadow);
  transition:transform .2s ease;
}

.section--contact .social a:hover{
  transform:translateY(-2px);
}

.section--contact .social img{
  width:36px;
  height:36px;
  display:block;
}


/* Reveals */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(18px)}
.reveal.active{animation:fadeUp .7s cubic-bezier(.2,.8,.2,1) forwards}

/* Responsivo */
@media (max-width: 1024px){
  .grid-projects{grid-template-columns:repeat(2,1fr)}
  .about__grid{grid-template-columns:1fr 1fr}
  .areas__grid{grid-template-columns:1fr 1fr}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .menu-toggle{display:block}
  .menu{position:absolute;top:64px;right:16px;display:none;flex-direction:column;align-items:flex-start;background:#fff;border:1px solid #e6edf6;border-radius:14px;padding:.6rem;box-shadow:0 12px 28px rgba(0,0,0,.18)}
  .menu a{width:100%}
  .menu.active{display:flex}
  .grid-projects{grid-template-columns:1fr}
  .about__grid,.areas__grid,.contact__grid{grid-template-columns:1fr}
}

/* Acessibilidade e redução de movimento */
.card.project:focus{outline:3px solid #8ec5ff;outline-offset:4px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.active{animation:none;opacity:1;transform:none}
  .card.project,.btn,.area,.stat{transition:none !important}
}