.atlas-heading {
  background: linear-gradient(90deg, #0b1620f5, #0b1620cc 55%, #0b162042);
  border-bottom: 1px solid #54605e;
}
.atlas-heading a, .atlas-links a { color: #f5d59c; }
.atlas-heading.guide-cover {
  min-height: clamp(24rem, 45vw, 37rem);
  display: grid;
  align-items: center;
  text-align: center;
  background: linear-gradient(0deg, #0b1620 1%, #0b162033 68%, #0b162047), url("../img/shipreign-arquipelago.webp") center / cover;
}
.guide-cover h1, .guide-cover .page-lede { margin-inline: auto; }
.guide-cover h1 { color: #fff2d7; font-size: clamp(3.5rem, 9vw, 8rem); }
.guide-cover .eyebrow, .guide-cover h1, .guide-cover .page-lede { text-shadow: 0 2px 10px #07121c, 0 1px 5px #07121c; }
.guide-cover .page-lede { color: #fff2d7; }
.guide-featured { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.guide-featured a { padding: .48rem .95rem; border: 1px solid #ad8750; background: #10212df2; text-decoration: none; }
.guide-featured a:hover { color: #fff3d6; text-decoration: underline; }
.atlas-grid {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.atlas-card { background: #132530; border: 1px solid #66706b; }
.atlas-card a { display: grid; height: 100%; grid-template-rows: auto 1fr; color: #fff4dc; text-decoration: none; }
.atlas-card a:hover { background: #223845; }
.atlas-card a:hover h3 { text-decoration: underline; text-underline-offset: .2em; }
.atlas-card img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.atlas-card a > div { position: relative; padding: .85rem 2rem .9rem 1rem; border-top: 1px solid #66706b; background: linear-gradient(150deg, #233943, #101f2a 75%); }
.atlas-card h3, .atlas-card p { margin: 0 0 .35rem; }
.fleet-atlas h3 { font: 400 1.7rem/1.1 var(--fonte-titulo); }
.atlas-arrow { position: absolute; right: .8rem; bottom: .8rem; color: #f5d59c; }
.fleet-atlas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.fleet-atlas img { object-fit: contain; background: radial-gradient(ellipse, #344851, #0a141d 76%); }
.atlas-chapter { display: grid; gap: 1.6rem; }
.atlas-art, .ship-heading figure { margin: 0; }
.atlas-art img, .ship-heading figure img { display: block; width: 100%; height: auto; }
.atlas-art img { border: 1px solid #66706b; }
.atlas-art figcaption, .ship-heading figcaption { color: #dbd5c7; padding-top: .4rem; font-size: .88rem; }
.atlas-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.atlas-steps li { display: flex; gap: 1rem; border-top: 1px solid #66706b; padding: 1rem 0 0; }
.atlas-steps h2 { margin: 0; }
.atlas-steps p { margin: .35rem 0 0; max-width: 65ch; }
.atlas-steps li > div { min-width: 0; }
.orders-demo { grid-column: 1 / -1; width: min(100%, 60rem); margin: .9rem auto 0; }
.orders-demo-scene { position: relative; }
.orders-ring { position: absolute; width: 36%; left: 56%; bottom: 3%; filter: drop-shadow(0 6px 12px #090d12e8); }
.orders-ring text { fill: #fff0c6; font: 400 12px var(--fonte-titulo); text-anchor: middle; }
.orders-demo figcaption { padding: .85rem 1rem; background: #132530; border-bottom: 1px solid #ad8750; }
.orders-demo figcaption strong { display: block; color: #f5d59c; }
.progress-hero { position: relative; display: grid; align-items: end; isolation: isolate; min-height: clamp(23rem, 49vw, 43rem); overflow: hidden; border-bottom: 1px solid #ad8750; }
.progress-hero img, .progress-hero::after { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; }
.progress-hero::after { content: ""; z-index: -1; background: linear-gradient(0deg, #08141e 0%, #08141eab 38%, transparent 82%), linear-gradient(90deg, #08141eac, transparent 70%); }
.progress-hero .wrap { padding-block: 3rem; }
.progress-hero a { color: #f5d59c; display: inline-block; margin-bottom: 1.25rem; }
.progress-hero h1 { font: 400 clamp(4rem, 10vw, 8.5rem)/.95 var(--fonte-titulo); margin: .4rem 0 .75rem; }
.progress-hero .page-lede { color: #fff4dc; }
.progress-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); padding: 0; gap: 1rem; margin: 1.5rem 0 3rem; }
.progress-grid li { background: linear-gradient(150deg, #203945, #101f2a 85%); border: 1px solid #697475; border-top: 2px solid #ad8750; padding: 1.1rem; }
.progress-grid h3 { font: 400 1.75rem/1.1 var(--fonte-titulo); margin: .35rem 0 .65rem; }
.progress-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
@media (prefers-reduced-motion: no-preference) {
  .atlas-card { transition: transform .28s ease, box-shadow .28s ease; }
  .atlas-card:hover, .atlas-card:focus-within { transform: translateY(-4px); box-shadow: 0 .6rem 1.5rem #0007; }
  .atlas-arrow { transition: transform .28s ease; }
  .atlas-card a:hover .atlas-arrow, .atlas-card a:focus-visible .atlas-arrow { transform: translate(.2rem, -.2rem); }
  .progress-hero img { animation: vista-do-conves 1.6s ease-out both; }
  @keyframes vista-do-conves { from { transform: scale(1.055); } to { transform: scale(1); } }
  @supports (animation-timeline: view()) {
    .orders-ring { animation: revelar-anel linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    @keyframes revelar-anel { from { transform: scale(.86); } to { transform: scale(1); } }
  }
}
.atlas-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; margin-top: 1.25rem; border-top: 1px solid #66706b; padding-top: 1rem; }
.ship-heading { padding-block: clamp(1.5rem, 5vw, 4rem); }
.ship-layout { display: grid; gap: 1rem; align-items: center; }
.ship-layout h1 { margin-block: .25rem; font: 400 clamp(3rem, 7vw, 6rem)/.98 var(--fonte-titulo); }
.ship-seascape {
  background: linear-gradient(180deg, #09233b22, #0a263026 62%, #0b162079),
    url("../img/frota-mar-de-aprendizes.webp") center / cover;
}
.ship-seascape img { filter: drop-shadow(0 .6rem .55rem #07172677); }
.ship-heading .ship-seascape figcaption { background: #0b1620; padding: .45rem .65rem; }
.ship-tag { color: #f5d59c; font-size: 1.25rem; }
.battery-plan {
  max-width: 54rem;
  padding: clamp(.75rem, 3vw, 2rem);
  margin-block: 1.25rem;
  background: repeating-linear-gradient(90deg, transparent 0 39px, #596a6d55 39px 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, #596a6d55 39px 40px), #142c37;
  border: 1px solid #66706b;
}
.battery-plan svg { display: block; width: 100%; }
.battery-plan div { display: flex; justify-content: space-between; color: #f5d59c; font-size: .85rem; }
@media (min-width: 53rem) {
  .ship-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .atlas-chapter { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .atlas-chapter .atlas-links { grid-column: 1 / -1; }
}