/* ============================================================
   TRANSPORTE — Estilo editorial
   ============================================================ */

/* ----------------------------------------------------------
   TABS DE CIDADE (usados por transport.js)
   ---------------------------------------------------------- */
.transport-tabs {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.transport-tabs::-webkit-scrollbar { display: none; }

.transport-tab {
  padding: 5px var(--s3);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
  background: var(--bg);
  color: var(--text3);
  -webkit-tap-highlight-color: transparent;
}
.transport-tab:hover { border-color: var(--c-primary); color: var(--c-primary); }
.transport-tab.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--bg);
}

/* Transport body / sections */
.transport-body { padding-bottom: var(--s4); }

.transport-section {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--border);
}
.transport-section:last-child { border-bottom: none; }

.transport-section-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  padding: 0 var(--s5) var(--s2);
}

.transport-section-sub {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0 var(--s5) var(--s3);
}

/* Route card */
.transport-route-card {
  margin: var(--s2) var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.transport-route-header {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
}

.transport-route-arrow {
  color: rgba(253,250,243,0.5);
  font-style: normal;
}

.transport-route-total {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #d4ab4f;
  font-style: normal;
}

.transport-step {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.transport-step:last-child { border-bottom: none; }

.transport-step-icon { font-size: 1rem; flex-shrink: 0; }

.transport-step-content { flex: 1; }

.transport-step-label {
  color: var(--text);
  line-height: 1.4;
}

.transport-step-detail {
  font-size: 0.78rem;
  color: var(--text3);
  margin-top: 2px;
}

.transport-step-time,
.transport-step-price {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--c-gold);
  flex-shrink: 0;
}

.transport-route-notes {
  padding: var(--s3) var(--s4);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--text3);
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

/* Generic info card */
.transport-info-card {
  margin: var(--s2) var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
}

.transport-info-title {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: var(--s2);
}

.transport-info-detail {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.5;
}

.transport-info-price {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--c-gold);
  margin-top: var(--s2);
}

.transport-info-notes {
  font-size: 0.78rem;
  color: var(--text3);
  font-style: italic;
  margin-top: var(--s2);
}

/* Tip */
.transport-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin: var(--s2) var(--s5);
  padding: var(--s3) var(--s4);
  background: rgba(168,132,44,0.05);
  border-left: 2px solid var(--c-gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.85rem;
  color: var(--text2);
}

.transport-tip-icon { flex-shrink: 0; }

/* Metro card */
.metro-card {
  margin: var(--s2) var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
}

.metro-title {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: var(--s3);
}

.metro-line {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}

.metro-line-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--r-xl);
  color: #fff;
  flex-shrink: 0;
}

.metro-line-desc {
  font-size: 0.82rem;
  color: var(--text2);
  flex: 1;
}

.metro-stations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s1);
  width: 100%;
}

.metro-station {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 2px 6px;
  background: var(--bg2);
  border-radius: var(--r-xl);
}

.metro-ticket-info {
  font-size: 0.78rem;
  color: var(--text3);
  font-style: italic;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

.transport-city-group {
  margin-bottom: var(--s5);
}

.transport-city-title {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s3);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.transport-city-name-serif {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text);
}

.transport-city-mono {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text3);
}

.transport-city-flag { font-size: 1rem; }

.transport-mode-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: var(--s3) var(--s5);
  background: var(--surface);
}

.transport-mode-header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

.transport-mode-icon { font-size: 1.1rem; }

.transport-mode-name {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text);
  flex: 1;
}

.transport-mode-cost {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--c-gold);
  border: 1px solid rgba(168,132,44,0.3);
  padding: 2px 7px;
  border-radius: var(--r-xl);
}

.transport-detail-row {
  display: flex;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  gap: var(--s3);
  font-size: 0.85rem;
  align-items: flex-start;
}
.transport-detail-row:last-child { border-bottom: none; }

.transport-detail-icon { color: var(--text3); flex-shrink: 0; margin-top: 1px; }
.transport-detail-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  min-width: 80px;
  flex-shrink: 0;
  padding-top: 2px;
}
.transport-detail-value { color: var(--text); line-height: 1.4; }

/* ----------------------------------------------------------
   INTERCITY ROUTE
   ---------------------------------------------------------- */
.intercity-route {
  margin: var(--s3) var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.intercity-route-header {
  padding: var(--s4) var(--s5);
  background: var(--text);
  color: var(--bg);
}

.intercity-route-legs {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  margin-bottom: 4px;
}

.intercity-route-arrow {
  font-size: 0.8rem;
  opacity: 0.6;
  font-style: normal;
}

.intercity-route-meta {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253,250,243,0.6);
}

/* ----------------------------------------------------------
   METRO MAP
   ---------------------------------------------------------- */
.metro-diagram {
  padding: var(--s4) var(--s5);
  overflow-x: auto;
  scrollbar-width: none;
}
.metro-diagram::-webkit-scrollbar { display: none; }

.metro-line {
  display: flex;
  align-items: center;
  margin-bottom: var(--s3);
  min-width: max-content;
}

.metro-line-label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-right: var(--s3);
  flex-shrink: 0;
}

.metro-line-a { background: #e06b35; }
.metro-line-b { background: #4a90d9; }
.metro-line-c { background: #5bad6f; }
.metro-rer-a  { background: #d33b6c; }

.metro-stations {
  display: flex;
  align-items: center;
  gap: 0;
}

.metro-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.metro-station-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: var(--surface);
  z-index: 1;
  transition: transform var(--t-fast);
}

.metro-station.highlight .metro-station-dot {
  background: currentColor;
  transform: scale(1.4);
}

.metro-station-connector {
  width: 28px;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
}

.metro-station-name {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 3px;
  text-align: center;
  max-width: 46px;
  line-height: 1.2;
}

.metro-station.highlight .metro-station-name {
  color: var(--text);
}