.como-page { --como-navy: #082335; --como-gold: #e5c27d; }
.como-page header { background: #082335; }
.como-page .hero.como-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 64px; padding-block: 48px 64px; }
.como-hero h1 span { color: #e5c27d; }
.como-hero .lead { max-width: 570px; }
.como-hero .eyebrow { color: #e5c27d; }
.como-hero .como-hero-note { color: #d0dce3; margin-top: 22px; max-width: 560px; }
.como-hero-prices { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.como-hero-prices a { display: flex; gap: 12px; align-items: baseline; padding: 10px 18px; border: 1px solid #9f8d66; color: #fff8e9; }
.como-hero-prices strong { font-size: 1.6rem; color: #e5c27d; font-weight: 500; }
.como-poster { width: 100%; max-width: 420px; justify-self: end; }
.como-poster img { width: 100%; height: auto; border: 1px solid #c8af79; }
.como-poster figcaption { color: #e5c27d; margin-top: 12px; font-size: .875rem; }
.como-poster a, .como-map-figure > a { cursor: zoom-in; }
.como-jumpnav { display: flex; flex-wrap: wrap; gap: 12px 32px; padding: 20px var(--gutter); border-bottom: 1px solid var(--line); color: #78613a; }
.como-packages { background: #f7f3e9; }
.como-packages > .section-copy { max-width: 780px; }
.como-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 32px; }
.como-package-card { background: #fffdf7; border: 1px solid #c5ad7c; padding: 32px; }
.como-package-card h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 12px; }
.como-package-price { color: #082335; font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: 1.25; }
.como-package-price span { font-size: 1.125rem; margin-left: 10px; }
.como-package-card .como-recommend { color: #78613a; margin: 20px 0 12px; font-weight: 500; }
.como-package-card .button { margin-top: 24px; }
.como-package-note { margin-top: 22px; max-width: 900px; color: var(--muted); }
.como-route-map { background: #082335; color: #f8f5ed; }
.como-route-map .eyebrow { color: #e5c27d; }
.como-route-map > .section-copy { max-width: 900px; color: #d6e0e6; }
.como-stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 34px 0; counter-reset: como-stop; }
.como-stops li { border-top: 1px solid #7e8c92; padding-top: 22px; counter-increment: como-stop; }
.como-stops li::before { content: "0" counter(como-stop); color: #e5c27d; font-size: 1rem; letter-spacing: .08em; }
.como-stops h3 { font-size: 1.25rem; margin: 10px 0; }
.como-stops p { color: #d6e0e6; }
.como-map-figure { max-width: 980px; margin-inline: auto; }
.como-map-figure img { width: 100%; height: auto; border: 1px solid #c8af79; }
.como-map-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 16px; color: #d6e0e6; }
.como-map-figure figcaption a { color: #e5c27d; text-decoration: underline; text-underline-offset: 4px; }
.como-fees { background: #f0e9da; }
.como-fee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 30px; }
.como-fee-grid > div { border-top: 1px solid #b9ab92; padding-block: 22px; }
.como-fee-grid dt { font-size: 1.125rem; font-weight: 500; margin-bottom: 8px; }
.como-fee-grid dd { color: var(--muted); }
.como-home { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 56px; background: #082335; color: #fff8e9; }
.como-home .eyebrow { color: #e5c27d; }
.como-home .section-copy { color: #d6e0e6; max-width: 650px; }
.como-home-prices { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.como-home-prices span { border: 1px solid #8e866f; padding: 9px 17px; }
.como-home-prices strong { color: #e5c27d; font-size: 1.35rem; margin-left: 8px; }
.como-home .actions { margin-top: 28px; }
.como-home .button.primary { background: #e5c27d; border-color: #e5c27d; color: #082335; }
.como-home .button.secondary { border-color: #b8bbad; color: #fff8e9; }
.como-home-image { max-width: 360px; justify-self: end; display: block; }
.como-home-image img { width: 100%; height: auto; border: 1px solid #bba36e; }
.como-home-image span { display: block; margin-top: 12px; color: #e5c27d; font-size: .875rem; }
@media (min-width: 841px) and (max-width: 1200px) {
  .nav { flex-wrap: wrap; }
  .navlinks { flex-wrap: wrap; gap: 12px 22px; }
}
@media (max-width: 840px) {
  .como-page .hero.como-hero, .como-home { grid-template-columns: 1fr; gap: 32px; }
  .como-poster { max-width: 520px; justify-self: center; }
  .como-home-image { max-width: 430px; justify-self: center; }
  .como-stops { grid-template-columns: 1fr; gap: 22px; }
  .como-package-grid { gap: 18px; }
  .como-package-card { padding: 24px; }
}
@media (max-width: 600px) {
  .como-package-grid, .como-fee-grid { grid-template-columns: 1fr; }
  .como-page .hero.como-hero { padding-block: 32px 44px; }
  .como-page .hero h1 { font-size: clamp(1.8rem, 6.8vw, 2.5rem); line-height: 1.5; }
  .como-home h2 { font-size: 1.7rem; }
  .como-jumpnav { gap: 12px 22px; font-size: .9375rem; }
  .como-hero-prices { gap: 10px; }
  .como-hero-prices a { padding: 8px 12px; }
  .como-home .actions { flex-direction: column; align-items: stretch; }
  .como-home .actions .button { white-space: normal; justify-content: center; text-align: center; }
  .como-map-figure figcaption { font-size: .875rem; }
}