:root{
  --navy:#0B2239; --navy-2:#0F2C48; --navy-3:#16395B;
  --orange:#F05A22; --orange-dark:#D64C18;
  --sand:#F4F1EC; --sand-line:#DDD6C9;
  --steel:#5C6B7A; --mist:#A9BACD; --white:#FFFFFF;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;

  --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px; --s8:140px;
  --wrap:1200px; --pad:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--navy); color:var(--white);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
a{color:inherit}

.wrap{max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
section{padding-top:var(--s8); padding-bottom:var(--s8)}
.band-sand{background:var(--sand); color:var(--navy)}
.band-navy2{background:var(--navy-2)}
.bloco{margin-top:var(--s7)}

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--orange); margin:0 0 var(--s4);
}
h1,h2{font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:1.03; margin:0}
h1{font-size:clamp(40px,6.4vw,78px)}
h2{font-size:clamp(31px,4.4vw,54px)}
h3{
  font-family:var(--body); font-weight:600; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.3; margin:0;
}
.accent{color:var(--orange)}
.lede{font-size:clamp(18px,2vw,22px); line-height:1.55; color:var(--mist); max-width:60ch; margin:var(--s5) 0 0}
.lede-2{margin-top:var(--s4)}
.band-sand .lede{color:var(--steel)}
p{margin:0 0 var(--s3)}
.muted{color:var(--mist)}
.band-sand .muted{color:var(--steel)}
.rule{width:132px; height:3px; background:var(--orange); border:0; margin:var(--s5) 0 0}
.node{width:13px; height:13px; background:var(--orange); flex:0 0 auto; margin-top:7px}

/* ---------- cabeçalho ---------- */
header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
header.stuck{background:rgba(11,34,57,.94); backdrop-filter:blur(10px); border-bottom-color:var(--navy-3)}
.bar{display:flex; align-items:center; gap:var(--s5); height:80px}
.brand{flex:0 0 auto}
.brand svg{height:26px; width:auto}
nav{margin-left:auto; display:flex; align-items:center; gap:var(--s5)}
.navlinks{display:flex; align-items:center; gap:var(--s5)}
nav a{font-size:14px; font-weight:500; color:var(--mist); text-decoration:none; transition:color .2s ease}
nav a:hover{color:var(--white)}
nav .btn{color:var(--white)}

.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--body); font-size:15px; font-weight:600;
  padding:14px 24px; border-radius:2px; text-decoration:none;
  border:1.5px solid transparent;
  transition:transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{background:var(--orange); color:var(--white)}
.btn-primary:hover{background:var(--orange-dark); transform:translateY(-2px)}
.btn-ghost{border-color:var(--navy-3); color:var(--white); background:transparent}
.btn-ghost:hover{border-color:var(--orange); color:var(--orange)}
.band-sand .btn-ghost{border-color:var(--sand-line); color:var(--navy)}
.band-sand .btn-ghost:hover{border-color:var(--orange); color:var(--orange)}
.btn-sm{padding:11px 18px; font-size:14px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--orange); outline-offset:3px}

/* ---------- hero ---------- */
.hero{padding-top:170px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1fr auto; gap:var(--s6); align-items:end}
.hero-mark{width:clamp(120px,15vw,210px)}
.hero-mark .arrow{transform:translateY(26px); opacity:0; animation:rise 1s cubic-bezier(.2,.7,.3,1) .35s forwards}
.hero-mark .route{opacity:0; animation:fade .8s ease .1s forwards}
@keyframes rise{to{transform:translateY(0); opacity:1}}
@keyframes fade{to{opacity:1}}
.hero h1{max-width:15ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.hero-meta{
  margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--navy-3);
  display:flex; flex-wrap:wrap; gap:var(--s5);
  font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--mist);
}

/* ---------- grades ---------- */
.grid{display:grid; gap:var(--s5)}
.g2,.g4{grid-template-columns:repeat(2,1fr)}
.pain{display:flex; gap:var(--s3); align-items:flex-start}
.pain h3{color:var(--white); margin-bottom:10px}
.pain p{color:var(--mist); font-size:16px; margin:0}

/* ---------- rota ---------- */
.route-wrap{margin-top:var(--s7)}
.route-svg{width:100%; height:200px; overflow:visible}
.route-line{fill:none; stroke:var(--orange); stroke-width:9; stroke-linejoin:miter}
.route-node{fill:var(--white)}
.route-head{fill:var(--orange); opacity:0; transition:opacity .3s ease}
.route-head.on{opacity:1}
.stops{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); margin-top:var(--s5)}
.stop h3{color:var(--orange); margin-bottom:var(--s3)}
.stop .bar{height:1px; background:var(--navy-3); margin-bottom:var(--s3)}
.stop p{color:var(--mist); font-size:16px; margin:0}

/* ---------- modalidades ---------- */
.mod{background:var(--white); border:1px solid var(--sand-line); padding:var(--s5); border-radius:2px}
.mod h3{color:var(--orange); margin-bottom:var(--s3)}
.mod .claim{
  font-family:var(--display); font-weight:700; font-size:21px; line-height:1.25;
  letter-spacing:-.015em; color:var(--navy); margin:0 0 var(--s4);
}
.mod ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.mod li{display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--steel)}
.foot-note{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--sand-line); font-size:14px; color:var(--steel)}

/* ---------- escopo ---------- */
.scope{display:grid; grid-template-columns:repeat(2,1fr); gap:18px var(--s6)}
.scope div{display:flex; gap:14px; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid var(--navy-3); font-size:17px}

/* ---------- passos ---------- */
.steps{margin-top:var(--s6); border-top:1px solid var(--sand-line)}
.step{display:grid; grid-template-columns:56px 1fr 1.2fr; gap:var(--s4); align-items:baseline; padding:var(--s4) 0; border-bottom:1px solid var(--sand-line)}
.step .num{font-family:var(--display); font-weight:700; font-size:19px; color:var(--orange)}
.step h3{color:var(--navy)}
.step p{margin:0; color:var(--steel); font-size:16px}

/* ---------- formulário ---------- */
.isca{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form{margin-top:var(--s6)}
.campos{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4)}
.campo{display:flex; flex-direction:column; gap:8px}
.campo-largo{grid-column:1 / -1}
.campo span{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--steel)}
.campo em{font-style:normal; font-weight:400; text-transform:none; letter-spacing:0}
.campo input,.campo textarea{
  font-family:var(--body); font-size:17px; color:var(--navy);
  background:var(--white); border:1px solid var(--sand-line); border-radius:2px;
  padding:14px 16px; width:100%; transition:border-color .2s ease;
}
.campo textarea{resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#A9A196}
.campo input:focus,.campo textarea:focus{border-color:var(--orange)}
.form-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); margin-top:var(--s5)}
.form-nota{margin:0; font-size:16px}

.aviso{margin-top:var(--s6); padding:18px 22px; border-left:4px solid; font-size:16px; border-radius:2px}
.aviso-ok{border-color:var(--orange); background:#FFF; color:var(--navy)}
.aviso-erro{border-color:#B3261E; background:#FFF; color:#7A1B15}

/* ---------- rodapé ---------- */
footer{background:var(--navy); padding-top:var(--s7); padding-bottom:var(--s5)}
.f-top{display:flex; flex-wrap:wrap; gap:var(--s6); align-items:flex-end; justify-content:space-between}
.f-brand svg{height:74px; width:auto}
.f-contacts{display:flex; flex-wrap:wrap; gap:var(--s6)}
.f-contacts h3{color:var(--orange); font-size:12px; margin-bottom:10px}
.f-contacts a{font-family:var(--display); font-weight:700; font-size:19px; color:var(--white); text-decoration:none; transition:color .2s ease}
.f-contacts a:hover{color:var(--orange)}
.f-bottom{
  margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--navy-3);
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
  font-size:13px; color:var(--mist);
}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1; transform:none}

/* ---------- telas estreitas ---------- */
@media (max-width:900px){
  :root{--s7:64px; --s8:88px}
  .hero{padding-top:130px}
  .hero-grid{grid-template-columns:1fr; align-items:start}
  .hero-mark{order:-1; width:104px; margin-bottom:var(--s5)}
  .navlinks{display:none}
  .g2,.g4,.stops,.scope,.campos{grid-template-columns:1fr}
  .step{grid-template-columns:40px 1fr}
  .step p{grid-column:2}
  .route-wrap{display:none}
  .f-top{align-items:flex-start}
  .f-brand svg{height:54px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
  .hero-mark .arrow,.hero-mark .route{animation:none; opacity:1; transform:none}
  .route-line{stroke-dashoffset:0 !important}
  .route-head{opacity:1}
}