/* Transporte aquaviário programado de cargas — folha de estilo principal */
:root{
  --navy:#0e2f57;
  --navy-2:#164375;
  --blue:#2f7fc4;
  --sky:#eef4fa;
  --sky-2:#dfe9f4;
  --white:#ffffff;
  --gray:#5b6673;
  --border:#d5dfea;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--white);color:#16202b;
  font-family:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:var(--blue)}
.box{max-width:1120px;margin:0 auto;padding:0 26px}

/* topo */
.topo{border-bottom:1px solid var(--border);background:var(--white);position:sticky;top:0;z-index:30}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 0}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.marca .sig{
  width:38px;height:38px;border-radius:7px;background:var(--navy);color:#fff;
  display:grid;place-items:center
}
.marca .sig svg{width:20px;height:20px;display:block}
.menu{display:flex;flex-wrap:wrap;gap:24px}
.menu a{font-size:.88rem;font-weight:500;color:var(--gray);text-decoration:none}
.menu a:hover{color:var(--navy)}
.menu .destaque{color:var(--navy);font-weight:700}

/* hero */
.hero{background:linear-gradient(180deg,var(--sky) 0%,var(--white) 100%);border-bottom:1px solid var(--border);padding:74px 0}
.hero-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:52px;align-items:center}
.olho{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:18px
}
h1{
  font-family:'DM Serif Display',Georgia,serif;font-weight:400;
  font-size:clamp(2rem,4.2vw,3.15rem);line-height:1.14;letter-spacing:-.02em;color:var(--navy)
}
.chamada{font-size:1.08rem;color:var(--gray);max-width:56ch;margin-top:22px}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{
  display:inline-block;text-decoration:none;font-size:.9rem;font-weight:700;
  padding:13px 26px;border-radius:6px;transition:.18s
}
.btn-cheio{background:var(--navy);color:#fff}
.btn-cheio:hover{background:var(--navy-2)}
.btn-linha{border:1px solid var(--navy);color:var(--navy)}
.btn-linha:hover{background:var(--navy);color:#fff}

.quadro{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:26px 24px;box-shadow:0 12px 34px rgba(14,47,87,.07)}
.quadro h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.quadro dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--border);font-size:.9rem}
.quadro dl div:last-child{border-bottom:0}
.quadro dt{color:var(--gray)}
.quadro dd{font-weight:700;color:var(--navy);text-align:right}

/* seções */
section{padding:78px 0}
section.claro{background:var(--sky)}
h2{
  font-family:'DM Serif Display',Georgia,serif;font-weight:400;
  font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.2;color:var(--navy);letter-spacing:-.015em
}
.legenda{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:12px}
.texto{color:var(--gray);max-width:64ch;margin-top:14px}

/* cartões de serviço */
.servicos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:40px}
.serv{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:26px 24px}
section.claro .serv{background:var(--white)}
.serv .ico{
  width:40px;height:40px;border-radius:8px;background:var(--sky-2);color:var(--navy);
  display:grid;place-items:center;margin-bottom:16px
}
.serv .ico svg{width:20px;height:20px;stroke:var(--navy);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.serv h3{font-size:1.04rem;font-weight:700;color:var(--navy);margin-bottom:7px}
.serv p{font-size:.93rem;color:var(--gray)}

/* programação */
.prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:18px;margin-top:38px}
.prog-item{border-top:3px solid var(--navy);padding-top:18px}
.prog-item strong{display:block;font-family:'DM Serif Display',Georgia,serif;font-size:1.18rem;color:var(--navy);margin-bottom:6px}
.prog-item p{font-size:.92rem;color:var(--gray)}

/* linha do tempo */
.linha{margin-top:42px;position:relative;padding-left:34px}
.linha::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--border)}
.etapa{position:relative;padding-bottom:28px}
.etapa:last-child{padding-bottom:0}
.etapa::before{
  content:"";position:absolute;left:-32px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--white);border:2px solid var(--blue)
}
.etapa h3{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.etapa span{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:3px}
.etapa p{font-size:.93rem;color:var(--gray);max-width:60ch}

/* citação */
.nota{
  margin-top:46px;background:var(--navy);color:#e8f0f8;border-radius:12px;padding:30px 32px;
  font-family:'DM Serif Display',Georgia,serif;font-size:1.18rem;line-height:1.45;max-width:60ch
}
.nota em{display:block;font-family:'DM Sans',sans-serif;font-style:normal;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-top:14px}

/* tabela cadastro */
.cadastro{width:100%;border-collapse:collapse;margin-top:34px;background:var(--white);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.cadastro tr:nth-child(odd) td,.cadastro tr:nth-child(odd) th{background:#fbfcfe}
.cadastro th{
  text-align:left;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray);padding:14px 20px;width:260px;vertical-align:top;border-bottom:1px solid var(--border)
}
.cadastro td{padding:14px 20px;font-size:.95rem;border-bottom:1px solid var(--border);vertical-align:top}
.cadastro tr:last-child th,.cadastro tr:last-child td{border-bottom:0}

/* documento */
.folha{padding:66px 0 34px;max-width:800px}
.folha h2{font-size:1.9rem}
.folha h3{font-family:'DM Sans',sans-serif;font-size:1.06rem;font-weight:700;color:var(--navy);margin-top:34px;margin-bottom:8px}
.folha p{color:var(--gray)}
.folha p + p{margin-top:13px}
.folha ul{margin:12px 0 0 22px}
.folha li{color:var(--gray);margin-bottom:8px;font-size:.95rem}
.selo-doc{margin-top:40px;padding-top:16px;border-top:1px solid var(--border);font-size:.82rem;color:var(--gray)}

/* rodapé */
footer{background:var(--navy);color:#c8d8e8;padding:52px 0 58px;margin-top:0}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:30px;margin-bottom:32px}
footer h5{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
footer a{color:#c8d8e8;text-decoration:none;font-size:.9rem;display:block;margin-bottom:7px}
footer a:hover{color:#fff}
footer .base{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;font-size:.8rem;line-height:1.95;color:#96afc8}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  section{padding:56px 0}
  .cadastro th{width:auto;display:block;border-bottom:0;padding-bottom:0}
  .cadastro td{display:block;padding-top:4px}
}