/* styles.css (Zapaterra) — NÃO ALTERAR SEM APROVAÇÃO */
:root{
  --bg:#061423;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.14);
  --accent:#33c3ff;
  --accent2:#62e3c4;
  --radius:16px;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --max:1380px;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--text);background:linear-gradient(180deg,#071a2b,var(--bg))}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}

header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(6,20,35,.62);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:260px}
.brand img{height:42px;width:auto}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
nav ul{list-style:none;display:flex;gap:18px;padding:0;margin:0;align-items:center}
nav a{color:var(--muted);font-size:13px}
nav a:hover{color:var(--text)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 14px;border-radius:999px;font-size:13px;line-height:1;cursor:pointer
}
.btn:hover{background:rgba(255,255,255,.10)}
.btn.primary{
  border-color:rgba(51,195,255,.35);
  background:linear-gradient(135deg,rgba(51,195,255,.22),rgba(98,227,196,.12));
}
.btn.primary:hover{filter:brightness(1.07)}
.menu{display:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:999px;padding:10px 12px;color:var(--text);font-size:13px}
@media (max-width:980px){nav ul{display:none}.menu{display:inline-flex}}

.drawer-backdrop{display:none;position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55)}
.drawer{
  position:absolute;right:0;top:0;height:100%;width:min(420px,92vw);
  background:rgba(6,20,35,.98);border-left:1px solid rgba(255,255,255,.10);padding:18px
}

/* Fundos responsivos */
.bg-hero{
  background-image:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.50)),
    url("../bg/bg-hero-desktop-dark.jpg");
  background-size:cover;background-position:center
}
.bg-section{
  background-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.62)),
    url("../bg/bg-section-desktop-dark.jpg");
  background-size:cover;background-position:center
}
.bg-blog{
  background-image:linear-gradient(180deg,rgba(0,0,0,.50),rgba(0,0,0,.58)),
    url("../bg/bg-blog-desktop-light.jpg");
  background-size:cover;background-position:center
}
@media (max-width:720px){
  .bg-hero{background-image:linear-gradient(180deg,rgba(0,0,0,.50),rgba(0,0,0,.60)),
    url("../bg/bg-hero-mobile-dark.jpg")}
  .bg-section{background-image:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.72)),
    url("../bg/bg-section-mobile-dark.jpg")}
  .bg-blog{background-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.65)),
    url("../bg/bg-blog-mobile-light.jpg")}
}

/* Tech panels */
.panel,.card,.step,.li,.case,.post,.box{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.pad{padding:32px}

.hero{padding:54px 0 30px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.hero-side{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.kicker{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:12px;letter-spacing:.6px;color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  padding:8px 10px;border-radius:999px;width:fit-content;margin-bottom:14px
}
.kicker span{width:8px;height:8px;border-radius:99px;background:var(--accent)}
h1{
margin:0 0 12px;
font-size:clamp(32px,3.4vw,48px);
line-height:1.1;
font-weight:600;
}
.lead{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 18px}
.provocation{margin:18px 0 0;padding:14px 16px;border-left:3px solid rgba(51,195,255,.6);
  background:rgba(0,0,0,.22);border-radius:12px;color:rgba(255,255,255,.88)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

section{padding:56px 0}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
h2{margin:0 0 14px;font-size:28px;line-height:1.15}
.section-title p{
  margin:0;
  color:rgba(255,255,255,.86);
  max-width:78ch;
  font-size:18px;
  line-height:1.55;
}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.cards{grid-template-columns:1fr}}
.card{padding:20px;box-shadow:none}
.card b{
display:block;
margin-bottom:8px;
font-size:16px;
font-weight:600;
}
.card p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media (max-width:980px){.steps{grid-template-columns:1fr}}
.step{padding:14px;box-shadow:none}
.step .n{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(51,195,255,.14);border:1px solid rgba(51,195,255,.25);font-family:var(--mono);font-size:12px;margin-bottom:10px}
.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

.list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:980px){.list{grid-template-columns:1fr}}
.li{padding:14px;box-shadow:none}
.li p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

.meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tag{font-size:11px;font-family:var(--mono);color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  padding:6px 8px;border-radius:999px}

.case-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
@media (max-width:980px){.case-grid{grid-template-columns:1fr}}
.case{padding:16px;box-shadow:none}
.case h3{margin:0 0 10px;font-size:16px}
.case p{margin:0 0 10px;color:var(--muted);line-height:1.6;font-size:14px}
.bullets{margin:0;padding-left:16px;color:rgba(255,255,255,.82)}
.bullets li{margin:6px 0}

.case-side{padding:16px;box-shadow:none;position:sticky;top:74px}
@media (max-width:980px){.case-side{position:relative;top:auto}}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.posts{grid-template-columns:1fr}}
.post{overflow:hidden;box-shadow:none}
.thumb{height:160px;background-size:cover;background-position:center}
.post .pad{padding:14px}
.post p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

.article-hero{padding:44px 0 22px}
.breadcrumb{font-size:12px;color:rgba(255,255,255,.70)}
.article-title{margin:10px 0 8px;font-size:clamp(26px,3vw,40px);line-height:1.12}
.article-sub{margin:0;color:rgba(255,255,255,.78);max-width:80ch;line-height:1.6}
.prose{color:rgba(255,255,255,.86);line-height:1.75;font-size:16px}
.prose h3{margin-top:22px;margin-bottom:10px;font-size:18px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:18px}
.prose li{margin:6px 0}

.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
@media (max-width:980px){.contact{grid-template-columns:1fr}}
.box{padding:16px;box-shadow:none}
.field{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:var(--text);
  padding:12px;border-radius:12px;width:100%;font-size:14px;outline:none
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:980px){.grid2{grid-template-columns:1fr}}
textarea.field{min-height:120px;resize:vertical}

footer{padding:26px 0 44px;color:rgba(255,255,255,.65);font-size:12px;border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18)}
.foot{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot a{color:rgba(255,255,255,.72)}
.foot a:hover{color:rgba(255,255,255,.92)}

.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}


/* Floating CTA (mobile) */
.fab-cta{
  position:fixed;
  left:16px;
  right:16px;
  bottom:14px;
  z-index:70;
  display:none;
}
.fab-cta .btn{
  width:100%;
  padding:14px 16px;
  font-size:14px;
  border-radius:999px;
}
@media (max-width:720px){
  .fab-cta{display:block}
  body{padding-bottom:74px} /* room for the button */
}