/* ===========================================================
   8TRANSFER — TOURS / EXCURSIONES / SERVICIO POR HORA
   Capa visual sobre css/styles.css
=========================================================== */

.tours-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(212,175,55,.08), transparent 34rem),
    var(--color-background);
  color: var(--color-text);
}

.tours-topbar {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(5,18,27,.94);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tours-topbar-inner {
  width: min(1060px,100%);
  min-height: var(--header-height);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.tours-topbar .brand-text { margin-right: auto; }

.tours-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-home-button {
  min-height: 36px !important;
  padding: 7px 13px !important;
}

.page-shell {
  width: min(1060px,100%);
  margin: 0 auto;
  padding: 34px 20px 60px;
}

.tours-hero { padding: 18px 4px 10px; }

.tours-hero h1 {
  margin: 5px 0 10px;
  color: var(--color-white);
  font-size: clamp(2rem,7vw,2.8rem);
  line-height: 1.12;
}

.tours-hero .hero-copy {
  max-width: 820px;
  color: var(--color-text-muted);
}

.service-definitions {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-top: 24px;
}

.service-definitions article,
.tours-page .card {
  background: linear-gradient(145deg,rgba(23,57,77,.94),rgba(10,32,45,.96));
  border: 1px solid rgba(212,175,55,.30);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--shadow-medium);
}

.service-definitions article { padding: 18px; }

.service-definitions h2 {
  margin: 0 0 5px;
  color: var(--color-gold-light);
  font-size: 1.05rem;
}

.service-definitions p,
.tours-page .helper {
  color: var(--color-text-muted);
}

.tours-page .card {
  padding: 24px;
  margin-top: 18px;
}

.tours-page .section-heading {
  max-width: none;
  margin: 0 0 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
}

.tours-page .section-heading h2 {
  margin: 0 0 4px;
  color: var(--color-white);
  font-size: 1.4rem;
}

.tours-page .section-heading p {
  margin: 0;
  color: var(--color-text-muted);
}

.tours-page .step {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #071923;
  font-weight: 900;
  background: linear-gradient(135deg,var(--color-gold-light),var(--color-gold));
  box-shadow: var(--shadow-gold);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.choice-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: rgba(5,18,27,.38);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  cursor: pointer;
}

.choice-card:hover,
.choice-card:focus-within,
.choice-card:has(input:checked) {
  border-color: var(--color-gold);
  background: rgba(212,175,55,.10);
}

.choice-card input {
  width: auto;
  margin-top: 3px;
  accent-color: var(--color-gold);
}

.choice-card strong,
.choice-card small { display: block; }

.choice-card strong { color: var(--color-white); }
.choice-card small { margin-top: 3px; color: var(--color-text-muted); }

.field-grid {
  display: grid;
  gap: 16px;
}

.field-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.field.full, .full { grid-column: 1/-1; }

.tours-page .field > span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-text);
  font-size: .83rem;
  font-weight: 800;
}

.tours-page input,
.tours-page textarea,
.tours-page select {
  width: 100%;
  padding: 12px 13px;
  color: var(--color-white);
  font: inherit;
  background: rgba(5,18,27,.72);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--border-radius-small);
}

.tours-page input:focus,
.tours-page textarea:focus {
  outline: 3px solid rgba(212,175,55,.13);
  border-color: var(--color-gold);
}

.tours-page textarea {
  min-height: 104px;
  resize: vertical;
}

.return-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
}

.subsection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.stops-list { display: grid; gap: 10px; }

.stop-row {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
}

.stop-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #071923;
  background: var(--color-gold);
  border-radius: 10px;
  font-weight: 900;
}

.tours-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.tours-page .btn.primary {
  color: #071923;
  background: linear-gradient(135deg,var(--color-gold-light),var(--color-gold));
  box-shadow: var(--shadow-gold);
}

.tours-page .btn.secondary {
  color: var(--color-gold-light);
  background: rgba(212,175,55,.11);
  border-color: rgba(212,175,55,.42);
}

.tours-page .btn.ghost {
  color: var(--color-text);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

.action-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.tour-map {
  width: 100%;
  min-height: 360px;
  background: #dbeaf0;
  border: 1px solid rgba(212,175,55,.32);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}

.map-status,
.status-message {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: .84rem;
}

.route-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.route-summary > div,
.price-box,
.payment-choice {
  background: rgba(5,18,27,.38);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
}

.route-summary > div { padding: 14px; }

.route-summary span,
.route-summary strong { display: block; }

.route-summary span {
  margin-bottom: 5px;
  color: var(--color-text-muted);
  font-size: .76rem;
}

.price-box { overflow: hidden; margin-top: 16px; }

.price-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.price-line:last-child { border-bottom: 0; }

.price-line.accent {
  color: var(--color-gold-light);
  background: rgba(212,175,55,.10);
}

.payment-choice {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 16px;
}

.payment-choice legend {
  padding: 0 6px;
  color: var(--color-gold-light);
  font-weight: 800;
}

.payment-choice label {
  display: flex;
  gap: 8px;
  align-items: center;
}

.payment-choice input,
.terms-row input {
  width: auto;
  accent-color: var(--color-gold);
}

.included-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.tag {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .76rem;
  color: var(--color-text);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}

.tag.ok {
  color: #9af0bd;
  background: rgba(20,122,69,.20);
  border-color: rgba(83,203,132,.28);
}

.tag.warning {
  color: #ffe0a3;
  background: rgba(212,175,55,.10);
  border-color: rgba(212,175,55,.28);
}

.terms-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  color: var(--color-text-muted);
}

.hidden { display: none !important; }

@media (max-width: 760px) {
  .tours-topbar-inner,
  .page-shell { padding-left: 14px; padding-right: 14px; }

  .tours-topbar-actions { gap: 7px; }
  .top-home-button { padding-inline: 10px !important; }

  .service-definitions,
  .choice-grid,
  .field-grid.two,
  .route-summary {
    grid-template-columns: 1fr;
  }

  .tours-page .card { padding: 20px 16px; }

  .return-row { grid-template-columns: 1fr; }

  .subsection-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .stop-row { grid-template-columns: 42px minmax(0,1fr); }
  .stop-row .btn { grid-column: 2; justify-self: start; }

  .tour-map { min-height: 300px; }

  .price-line {
    flex-direction: column;
    gap: 4px;
  }

  .action-row .btn { width: 100%; }
}