/* AZZA Produções — site.css
   Home construída sobre os tokens do design system ("a chama acesa").
   Imports primeiro (fontes + tokens), depois @font-face, depois regras. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Mulish:wght@400;500;600;700;800&family=Kalam:wght@400;700&display=swap');
@import url('design/tokens/colors.css');
@import url('design/tokens/typography.css');
@import url('design/tokens/spacing.css');

@font-face{
  font-family:'Daytripper';
  src:url('../fonts/Daytripper-Plain.ttf') format('truetype');
  font-weight:400 700; font-style:normal; font-display:swap;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); color:var(--text-body);
  background:var(--surface-card); font-size:var(--fs-body); line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--container-max); margin:0 auto; padding:0 var(--sp-6);}
.eyebrow{
  font-size:var(--fs-xs); font-weight:800; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--azza-orange-500); margin:0;
}
h1,h2,h3{font-family:var(--font-display); color:var(--text-strong); margin:0;}
.sec-h{font-weight:800; font-size:var(--fs-h2); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); margin-top:var(--sp-3);}

/* ---- Botões ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-body);
  padding:14px 26px; border-radius:var(--radius-sm); border:0; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-standard), filter var(--dur-fast), box-shadow var(--dur-base);
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--azza-grad-flame); color:#fff; box-shadow:var(--shadow-brand);}
.btn-primary:hover{filter:brightness(1.05);}
.btn-ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.btn-light{background:#fff; color:var(--azza-orange-600); box-shadow:0 8px 22px rgba(0,0,0,.16);}
.btn-sm{padding:9px 18px; font-size:var(--fs-sm);}

/* ---- Tags ---- */
.tags{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-5);}
.tag{font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; padding:6px 14px; border-radius:var(--radius-pill);}
.tag-flame{background:var(--azza-orange-500); color:#fff;}
.tag-blue{background:rgba(255,255,255,.14); color:#fff;}
.tag-teal{background:var(--azza-teal-500); color:#fff;}
.tag-outline{color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);}

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--azza-line);
}
.site-header .wrap{height:74px; display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:var(--sp-3);}
.brand img{height:38px; width:auto;}
.brand .wm{font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--text-strong); letter-spacing:-.01em;}
.brand .wm b{color:var(--azza-orange-500); font-weight:800;}
.nav{display:flex; gap:var(--sp-6); font-weight:700; font-size:15px;}
.nav a{transition:color var(--dur-fast);}
.nav a:hover{color:var(--azza-orange-500);}

/* ---- Hero ---- */
.hero{position:relative; background:var(--azza-grad-night); overflow:hidden;}
.hero .glow{position:absolute; right:-140px; top:-100px; width:640px; height:640px;
  background:radial-gradient(circle, rgba(255,150,20,.42) 0%, rgba(255,150,20,0) 62%); pointer-events:none;}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-8);
  align-items:center; padding:var(--sp-9) var(--sp-6);}
.hero h1{font-weight:800; font-size:var(--fs-display); line-height:1.0; letter-spacing:-.03em; color:#fff; margin:0 0 var(--sp-5);}
.hero h1 .flame{color:var(--azza-flame-bot);}
.hero .lead{font-size:var(--fs-h4); line-height:1.55; color:rgba(255,255,255,.85); max-width:520px; margin:0 0 var(--sp-6);}
.hero .cta-row{display:flex; gap:var(--sp-3); flex-wrap:wrap;}
.hero .mark{display:flex; justify-content:center;}
.hero .mark img{width:82%; filter:drop-shadow(0 24px 48px rgba(241,81,56,.42));}

/* ---- Seções ---- */
.section{padding:var(--sp-9) 0;}
.section.tint{background:var(--surface-tint);}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); margin-top:var(--sp-7);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-top:var(--sp-7);}
.card{background:var(--surface-card); border:1px solid var(--azza-line); border-radius:var(--radius-md);
  padding:var(--sp-6); transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base);}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.card .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px;
  background:var(--surface-tint); color:var(--azza-orange-500); margin-bottom:var(--sp-4);}
.card h3{font-weight:700; font-size:var(--fs-h4); margin:0 0 var(--sp-2);}
.card p{margin:0; font-size:var(--fs-sm); line-height:1.55; color:var(--text-muted);}

/* Portfólio */
.port{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:stretch; margin-top:var(--sp-7);}
.proj{position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--azza-grad-night);
  color:#fff; padding:var(--sp-8) var(--sp-7); min-height:280px; display:flex; flex-direction:column; justify-content:flex-end;}
.proj .glow{position:absolute; left:-120px; bottom:-160px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(255,150,20,.4) 0%, rgba(255,150,20,0) 65%);}
.proj .k{position:relative;}
.proj h3{color:#fff; font-size:var(--fs-h1); font-weight:800; letter-spacing:-.02em; margin:var(--sp-3) 0 var(--sp-2);}
.proj p{position:relative; color:rgba(255,255,255,.82); max-width:420px; margin:0;}
.port-note{background:var(--surface-tint); border:1px dashed var(--azza-orange-100); border-radius:var(--radius-lg);
  padding:var(--sp-7); display:flex; flex-direction:column; justify-content:center; gap:var(--sp-3);}
.port-note h3{font-size:var(--fs-h3); font-weight:700;}
.port-note p{margin:0; color:var(--text-muted);}

/* Missão */
.mission{text-align:center; max-width:860px; margin:0 auto; padding:var(--sp-9) var(--sp-6);}
.mission .q{font-family:var(--font-script); font-size:2.4rem; line-height:1.25; color:var(--text-strong); margin:var(--sp-4) 0 0;}
.mission .who{margin-top:var(--sp-5); font-size:var(--fs-sm); color:var(--text-muted); text-transform:uppercase; letter-spacing:var(--ls-eyebrow); font-weight:700;}

/* CTA */
.cta{background:var(--azza-grad-flame); color:#fff;}
.cta .wrap{padding:var(--sp-8) var(--sp-6); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap;}
.cta h2{color:#fff; font-size:var(--fs-h2); letter-spacing:-.02em;}
.cta p{margin:var(--sp-2) 0 0; font-size:var(--fs-h4); opacity:.92;}

/* Footer */
.site-footer{background:var(--azza-blue-700); color:rgba(255,255,255,.75);}
.site-footer .top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:var(--sp-6); padding:var(--sp-8) var(--sp-6) var(--sp-7);}
.site-footer .brand-f img{height:40px; margin-bottom:var(--sp-4);}
.site-footer .brand-f p{font-size:var(--fs-sm); line-height:1.6; max-width:280px; margin:0;}
.site-footer h4{color:#fff; font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; margin:0 0 var(--sp-4); font-family:var(--font-body); font-weight:800;}
.site-footer a{display:block; font-size:var(--fs-sm); padding:5px 0; color:rgba(255,255,255,.75); transition:color var(--dur-fast);}
.site-footer a:hover{color:#fff;}
.site-footer .bottom{border-top:1px solid rgba(255,255,255,.14);}
.site-footer .bottom .wrap{display:flex; justify-content:space-between; padding:16px var(--sp-6); font-size:13px; flex-wrap:wrap; gap:8px;}

/* ---- Responsivo ---- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:var(--sp-6);}
  .hero .mark{display:none;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:1fr;}
  .port{grid-template-columns:1fr;}
  .site-footer .top{grid-template-columns:1fr 1fr;}
  .nav{display:none;}
  .hero h1{font-size:3rem;}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr;}
  .site-footer .top{grid-template-columns:1fr;}
  .cta .wrap{flex-direction:column; align-items:flex-start;}
}