.voyage-hero {
  min-height: clamp(26rem, 49vw, 44rem);
  align-items: center;
}
.voyage-hero::after {
  background: linear-gradient(90deg, #08131df5, #08131dba 35%, transparent 77%),
    linear-gradient(0deg, #08131d 0%, transparent 45%);
}
.voyage-hero .wrap { padding-block: 3.25rem; }
.voyage-hero .button { margin: 1.3rem 0 0; color: #ffdc96; }
.voyage-hero .page-lede { max-width: 39ch; }
.exploration { scroll-margin-top: 1rem; }
.explorer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 1.6rem 0 1rem;
  padding: 3px;
  border: 1px solid #9c7947;
  background: #08131d;
}
.explorer-menu a {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: .72rem .85rem;
  min-height: 46px;
  border: 1px solid #53666b;
  background: linear-gradient(140deg, #203644, #111e2a 80%);
  text-align: center;
  font-weight: 700;
  text-decoration: none;
}
.explorer-menu a:hover { color: #ffdb95; border-color: #dab172; }
.explorer-menu a[aria-selected="true"] {
  color: #19100a;
  background: linear-gradient(155deg, #f1cc81, #bb873c);
  border-color: #ffdd99;
}
.explorer-panel { margin-bottom: 1rem; }
.story-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  align-items: stretch;
  background: #122430;
  border: 1px solid #9c7947;
}
.story-art { min-width: 0; align-self: center; }
.story-art img { width: 100%; height: auto; }
.story-copy { padding: clamp(1rem, 3vw, 2.3rem); align-self: center; }
.story-copy h3, .workshop-detail h4 { margin: .45rem 0 .75rem; font: 400 clamp(1.9rem, 3.5vw, 3rem)/1 var(--fonte-titulo); }
.story-copy p + p, .workshop-detail p + p { margin-top: .8rem; }
.story-copy a, .workshop-detail a { color: #ffdc96; }
.story-panel .orders-demo { width: auto; margin: 0; }
.workshop-category { border: 1px solid #9c7947; background: #10212d; padding: clamp(.75rem, 2vw, 1.4rem); }
.workshop-category > h3 { font: 400 2.1rem/1 var(--fonte-titulo); }
.workshop-category .explorer-menu { margin-top: .85rem; }
.workshop-category > [data-explorer] {
  display: grid;
  grid-template-columns: minmax(8rem, .65fr) minmax(0, 3fr);
  gap: .9rem;
  margin-top: .9rem;
}
.workshop-category > [data-explorer] > .explorer-menu {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  align-content: start;
  align-self: start;
  margin: 0;
}
.workshop-category > [data-explorer] > .explorer-panel { grid-column: 2; margin: 0; }
.workshop-detail { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1rem; }
.workshop-detail .story-copy { padding: .4rem .75rem .8rem; }
.yard-plan { margin: 0; padding: clamp(.7rem, 2vw, 1.4rem); align-self: center; background: repeating-linear-gradient(0deg, #51687150 0 1px, transparent 1px 27px), repeating-linear-gradient(90deg, #51687150 0 1px, transparent 1px 27px), #132c39; border: 1px solid #6d7777; }
.yard-plan svg { display: block; width: 100%; }
.yard-plan figcaption { color: #ffe3a9; margin-top: .65rem; }
.yard-icon { width: min(9rem, 100%); aspect-ratio: 1; object-fit: contain; }
.storyboard { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; gap: 1rem; }
.storyboard li { border: 1px solid #9c7947; background: #122430; }
.storyboard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.storyboard li > div { padding: 1rem; }
.storyboard h3 { font: 400 1.85rem/1.1 var(--fonte-titulo); margin: .4rem 0 .65rem; }
.fleet-stage .story-art:not(.ship-seascape) { background: radial-gradient(ellipse, #36505b, #132632 68%, #0b1620); }
.story-art figcaption { padding: .45rem .65rem; font-size: .9rem; background: #0b1620; color: #e7dfca; }
.fleet-stage .story-copy { align-self: center; }
.fleet-stage .story-copy h3 { font-size: clamp(2.75rem, 6vw, 5.5rem); }
.voyage-links { margin-top: 2rem; }
.voyage-links ul { margin-top: .7rem; }
@media (max-width: 720px) {
  .story-panel, .workshop-detail, .storyboard { grid-template-columns: minmax(0, 1fr); }
  .workshop-category > [data-explorer] { display: block; }
  .workshop-category > [data-explorer] > .explorer-menu { display: flex; margin-bottom: .8rem; }
  .voyage-hero { align-items: end; }
  .voyage-hero::after { background: linear-gradient(0deg, #08131d 8%, #08131ddf 44%, transparent 85%); }
}
@media (prefers-reduced-motion: no-preference) {
  .explorer-panel[role="tabpanel"]:not([hidden]) { animation: mostrar-painel .36s ease-out both; }
  @keyframes mostrar-painel { from { transform: translateY(5px); } to { transform: translateY(0); } }
}