/* ============================================================
   EDU MORAES — shared design system
   Type: Oswald (display) · Archivo (body) · Space Mono (tags)
   ============================================================ */

:root{
  /* base — preto fosco / graphite / chumbo */
  --ink:        #010602;
  --ink-2:      #010602;
  --surface:    #161618;
  --surface-2:  #1C1C1F;
  --surface-3:  #232327;
  --line:       rgba(236,231,222,.10);
  --line-2:     rgba(236,231,222,.18);

  /* accent — carmim profundo / sangue */
  --carmim:     #B5121B;
  --carmim-hi:  #DA1A26;
  --blood:      #6E0C11;

  /* paper / text */
  --paper:      #ECE7DE;
  --paper-2:    #C7C2B9;
  --muted:      #8E8B85;
  --muted-2:    #66635E;

  --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body:    'Archivo', system-ui, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 4px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ---- global film grain ---- */
body::before{
  content:"";
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- typography ---- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;margin:0;line-height:.98;letter-spacing:-.01em}
.display{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  line-height:.92;letter-spacing:-.015em;
}
.tag{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}
.tag--red{color:var(--carmim-hi)}
.serif-no{font-family:var(--f-body)}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding:clamp(64px,9vw,128px) 0;position:relative}
.section--tight{padding:clamp(48px,6vw,80px) 0}

/* concrete / asphalt textured surfaces */
.tex-concrete{
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.035), transparent 60%),
    radial-gradient(100% 90% at 90% 100%, rgba(0,0,0,.5), transparent 60%),
    var(--surface);
}
.tex-asphalt{
  background:
    radial-gradient(140% 100% at 50% -20%, rgba(181,18,27,.10), transparent 55%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}

/* ---- section header pattern ---- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:clamp(32px,5vw,56px);flex-wrap:wrap}
.shead__l{display:flex;flex-direction:column;gap:14px;max-width:760px}
.shead__idx{font-family:var(--f-mono);font-size:13px;color:var(--carmim-hi);letter-spacing:.2em}
.shead h2{
  font-size:clamp(34px,5.2vw,64px);text-transform:uppercase;font-weight:700;letter-spacing:-.02em;
}
.shead p{margin:0;color:var(--paper-2);max-width:48ch}
.kicker{display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:26px;height:2px;background:var(--carmim)}

/* ---- buttons ---- */
.btn{
  --bg:var(--carmim);
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:15px;padding:15px 26px;border:none;border-radius:var(--r);
  background:var(--bg);color:#fff;position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
  box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 10px 30px -12px rgba(181,18,27,.7);
}
.btn:hover{background:var(--carmim-hi);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,0,0,.3),0 16px 40px -14px rgba(218,26,38,.9)}
.btn:active{transform:translateY(0)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn--ghost{
  --bg:transparent;background:transparent;color:var(--paper);
  border:1px solid var(--line-2);box-shadow:none;
}
.btn--ghost:hover{background:rgba(236,231,222,.05);border-color:var(--paper);box-shadow:none;transform:translateY(-2px)}
.btn--lg{padding:18px 34px;font-size:17px}
.btn--sm{padding:11px 18px;font-size:13px}

/* ---- nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .35s, border-color .35s, padding .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,11,12,.82);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);padding:12px var(--pad);
}
.nav__brand{display:flex;align-items:center;gap:13px}
.nav__brand img{height:34px;width:auto;object-fit:contain;transition:height .35s}
.nav.scrolled .nav__brand img{height:29px}
.nav__name{display:flex;flex-direction:column;line-height:1}
.nav__name b{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:17px}
.nav__name span{display:none}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{
  font-family:var(--f-display);text-transform:uppercase;font-size:14px;letter-spacing:.05em;font-weight:500;
  color:var(--paper-2);position:relative;padding:4px 0;
}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--carmim);transition:width .25s}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex;align-items:center;gap:14px}
.nav__burger{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r);width:44px;height:44px;color:var(--paper);align-items:center;justify-content:center}
.nav__burger svg{width:20px;height:20px}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:8500;background:rgba(8,8,9,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;padding:88px var(--pad) 40px;gap:6px;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), visibility .4s;
}
.drawer.open{transform:translateY(0);visibility:visible}
.drawer a{font-family:var(--f-display);text-transform:uppercase;font-size:30px;font-weight:600;padding:14px 0;border-bottom:1px solid var(--line);letter-spacing:.01em}
.drawer a:hover{color:var(--carmim-hi);padding-left:10px;transition:padding .2s,color .2s}
.drawer__close{position:absolute;top:22px;right:var(--pad);width:46px;height:46px;border:1px solid var(--line-2);background:none;color:var(--paper);border-radius:var(--r);font-size:24px}

/* ---- pills / chips ---- */
.chip{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper-2);
  border:1px solid var(--line-2);border-radius:100px;padding:7px 14px;
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--carmim);box-shadow:0 0 8px var(--carmim)}

/* ---- image slot styling ---- */
image-slot{background:var(--surface-2);}

/* ---- footer ---- */
.footer{background:var(--ink-2);border-top:1px solid var(--line);padding:72px 0 36px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer h4{font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;font-weight:400;margin-bottom:18px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer ul a{color:var(--paper-2);font-size:15px}
.footer ul a:hover{color:var(--carmim-hi)}
.footer__brand img{height:46px;width:auto;object-fit:contain;margin-bottom:20px}
.footer__brand p{color:var(--muted);font-size:14px;max-width:30ch}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.footer__bottom span{font-family:var(--f-mono);font-size:12px;color:var(--muted-2);letter-spacing:.1em}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* utility */
.red{color:var(--carmim-hi)}
.mono{font-family:var(--f-mono)}
.center{text-align:center}
.divider{height:1px;background:var(--line);border:0;margin:0}

@media (max-width:900px){
  .nav__links{display:none}
  .nav__cta .btn{display:none}
  .nav__burger{display:inline-flex}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .footer__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}