/* ============================================================================
   Vuelame — ruta.css
   ============================================================================
   Estilos EXCLUSIVOS de las páginas de ruta /vuelos-X-Y/.
   Prefijos:
     .ruta-*           → estilos de las 8 secciones (hero, resumen, faq, gauge,
                         histórico, chart SVG, clima, opciones, similares)
     .vpi-*            → indicador "¿buen momento para comprar?"
     .ruta-apex-chart  → estilos para ApexCharts (bar chart histórico)
   No se carga en la home.
   ========================================================================== */

/* ===== Layout principal ===== */
.ruta-main { padding: 30px 0 80px; }
/* H2 centrados — todas las secciones del template de ruta tienen el título
   centrado por consistencia con el diseño del shortcode WP. */
.ruta-main h2 {
  font-family: var(--font-title);
  font-size: 28px;
  margin: 0 0 20px;
  color: var(--text);
  text-align: center;
}
.page-ruta section { margin-bottom: 50px; }

/* ════════════════════════════════════════════════════════════════════════
   SECCIÓN 1 — HERO (adaptación del shortcode WP "vuelame-hero")
   2 columnas con imagen + círculo central. Debajo: H1 + bajada + banderas.
   ════════════════════════════════════════════════════════════════════════ */
.ruta-hero-banner { margin-bottom: 36px; }

.vuelame-hero {
  display: flex;
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  font-family: var(--font-text);
}
.vuelame-col {
  flex: 1;
  position: relative;
  background-size: cover;
  background-position: center;
}
.vuelame-col::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.vuelame-city {
  position: absolute;
  bottom: 22px;
  left: 22px;
  color: #ffffff;
  z-index: 2;
}
.vuelame-city h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 28px;
  line-height: 1.1;
  color: #ffffff;
  text-align: left;     /* override del h2 centrado global */
}
.vuelame-city span {
  font-size: 14px;
  letter-spacing: 1px;
  opacity: 0.85;
  color: #ffffff;
}
.vuelame-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}
.vuelame-circle svg,
.vuelame-circle img { width: 50px; height: 50px; }

@media (max-width: 1024px) {
  .vuelame-hero { height: 260px; }
  .vuelame-city h2 { font-size: 24px; }
  .vuelame-circle { width: 80px; height: 80px; }
  .vuelame-circle svg,
  .vuelame-circle img { width: 45px; height: 45px; }
}
@media (max-width: 768px) {
  .vuelame-hero { height: 220px; }
  .vuelame-city h2 { font-size: 20px; }
  .vuelame-city span { font-size: 12px; }
  .vuelame-circle { width: 65px; height: 65px; }
  .vuelame-circle svg,
  .vuelame-circle img { width: 40px; height: 40px; }
}

/* H1 + bajada + banderas debajo del split — centrado */
.ruta-hero-text {
  margin-top: 20px;
  text-align: center;
}
.ruta-hero-badges {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  background: var(--bg-alt);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.ruta-iata-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-title);
  font-size: 16px; color: var(--text);
}
.ruta-iata-badge strong { font-size: 15px; letter-spacing: 0.5px; }
.ruta-flag { width: 22px; height: 14px; border-radius: 2px; display: block; object-fit: cover; }
.ruta-arrow { color: var(--color-primary); font-weight: 700; font-size: 18px; }
.ruta-h1 { font-size: 38px; line-height: 1.15; margin: 0 0 14px; color: var(--text); }
.ruta-bajada { color: var(--text-muted); font-size: 17px; margin: 0 auto; line-height: 1.5; max-width: 720px; }

@media (max-width: 768px) {
  .ruta-h1 { font-size: 28px; }
  .ruta-bajada { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════════
   INTRO + RESUMEN en una fila (2/3 + 1/3 en desktop, stack en mobile).
   El intro (texto descriptivo, centrado) ocupa 2/3 a la izquierda; el
   resumen de la oferta (card .contenedor-resumen-oferta) ocupa 1/3 a la
   derecha. En mobile se apilan y el resumen pasa a 100% ancho.
   ════════════════════════════════════════════════════════════════════════ */
.ruta-intro-resumen-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 50px;
}
/* Las secciones internas pierden el margin-bottom del default
   ".page-ruta section { margin-bottom: 50px }" porque el wrap ya lo da. */
.ruta-intro-resumen-wrap > .ruta-intro-texto,
.ruta-intro-resumen-wrap > .ruta-resumen { margin-bottom: 0; }

/* Card del resumen ocupa todo el ancho de la columna en este layout */
.ruta-intro-resumen-wrap .contenedor-resumen-oferta {
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .ruta-intro-resumen-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ruta-intro-resumen-wrap .contenedor-resumen-oferta {
    max-width: 440px;
    margin: 0 auto;
  }
}

/* Texto del intro (intro.php).
   En DESKTOP (≥901) el texto baja para alinearse con el inicio de la card
   .contenedor-resumen-oferta (que tiene padding-top + header). En MOBILE
   queda pegado al H1 normalmente sin padding extra. */
.ruta-intro-texto {
  text-align: center;
  color: var(--text);
  padding-top: 0;                /* explícito — sin padding por default */
}
@media (min-width: 901px) {
  .ruta-intro-resumen-wrap > .ruta-intro-texto {
    padding-top: 38px;
  }
}
.ruta-intro-texto p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--text);
}
.ruta-intro-texto p:last-child { margin-bottom: 0; }
.ruta-intro-dinamica strong { color: var(--color-primary); font-size: 17px; }
@media (max-width: 768px) {
  .ruta-intro-texto p { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SECCIÓN 2 — RESUMEN DE OFERTA (adaptación del shortcode WP)
   Card con ícono + título + 5 ítems (origen, destino, tipo, aerolínea, precio).
   ════════════════════════════════════════════════════════════════════════ */
.contenedor-resumen-oferta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
  text-align: left;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: var(--shadow);
  max-width: 440px;
  margin: 0 auto;
}
.contenedor-resumen-oferta:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.encabezado-resumen {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.icono-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}
.icono-titulo svg { width: 28px; height: 28px; }
.titulo-resumen {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
  text-align: left;          /* override del h2/h3 centrado global */
}
.detalles-resumen {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.detalle-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 0 4px;
  min-height: 28px;
}
.icono-detalle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-primary);
}
.icono-detalle svg { width: 24px; height: 24px; }
.texto-detalle {
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--text);
  line-height: 1.4;
}
.precio-item .texto-precio {
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 700;
  color: var(--color-primary);
}
/* Botón integrado: precio + "Ver oferta" en una sola pieza clickeable.
   Reemplaza al ítem "precio" y al CTA suelto que estaban antes por separado. */
.resumen-precio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 18px;
  background: var(--color-primary);
  color: #fff !important;
  border-radius: var(--border-radius);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 14px rgba(255, 94, 58, 0.25);
}
.resumen-precio-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 94, 58, 0.35);
}
.resumen-precio-monto { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; }
.resumen-precio-divider { opacity: 0.6; font-weight: 400; }
.resumen-precio-cta { font-size: 15px; font-weight: 600; }

/* Placeholder cuando no hay cache aún */
.resumen-card.resumen-empty {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--color-grey);
  border-radius: var(--border-radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  color: var(--text-muted);
  max-width: 440px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .contenedor-resumen-oferta { max-width: 100%; padding: 18px 16px; }
  .titulo-resumen { font-size: 17px; }
  .texto-detalle { font-size: 15px; }
  .precio-item .texto-precio { font-size: 18px; }
}

/* ===== Sección 4: FAQ + info boxes ===== */
.ruta-faq-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 30px;
}
.ruta-info-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px;
}
.ruta-info-eyebrow { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.ruta-info-titulo { font-family: var(--font-title); font-size: 22px; color: var(--text); }
.ruta-info-detalle { color: var(--text-muted); font-size: 14px; }
.ruta-info-nota { color: var(--text); font-size: 13px; margin-top: 8px; line-height: 1.45; }

/* Info-box "Equipaje incluido típico" — íconos SVG + 2 filas (mano + bodega) */
.ruta-equipaje-box .ruta-equipaje-filas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 4px;
}
.ruta-equipaje-fila {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ruta-equipaje-icono {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: rgba(255, 94, 58, 0.08);
  border-radius: 8px;
}
.ruta-equipaje-icono svg { width: 22px; height: 22px; }
.ruta-equipaje-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ruta-equipaje-texto strong {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ruta-equipaje-texto span {
  font-size: 13px;
  color: var(--text-muted);
}
body.dark-mode .ruta-equipaje-icono { background: rgba(255, 94, 58, 0.14); }

.ruta-faq-list { display: flex; flex-direction: column; gap: 10px; }

/* Títulos de las 2 cards (equipaje + preguntas frecuentes) — afuera y centrados */
.ruta-faq-card-titulo {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin: 0 0 12px;
}

/* Quitar el eyebrow viejo dentro de la card de equipaje — ya no se usa */
.ruta-equipaje-box .ruta-info-eyebrow { display: none; }
.ruta-faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.ruta-faq-item summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  list-style: none;
  position: relative;
  color: var(--text);
}
.ruta-faq-item summary::-webkit-details-marker { display: none; }
.ruta-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--color-primary);
  transition: transform 0.2s;
}
.ruta-faq-item[open] summary::after { content: '−'; }
.ruta-faq-answer { padding: 0 18px 16px; color: var(--text-muted); line-height: 1.55; }

@media (max-width: 768px) { .ruta-faq-grid { grid-template-columns: 1fr; } }

/* ═════════════════════════════════════════════════════════════════════════
   BLOQUE ANÁLISIS — combina histórico (chart + cards) + gauge en grid 2 cols.
   Desktop: chart 50% izq | gauge arriba + cards abajo 50% der.
   Mobile (≤768): se apila — chart, gauge, cards.
   ═════════════════════════════════════════════════════════════════════════ */
.ruta-analisis-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 50px;
  align-items: stretch;
}
/* Cada partial trae su propio <section>; les quitamos el margin-bottom
   porque el wrapper ya da el espacio. */
.ruta-analisis-wrap > .ruta-historico,
.ruta-analisis-wrap .ruta-gauge { margin-bottom: 0; }

/* Columna derecha: gauge arriba, cards abajo, mismo gap */
.ruta-analisis-derecha {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;        /* evita overflow horizontal del gauge */
}

/* Cards en columna (1 arriba, 1 abajo) cuando están dentro del bloque
   análisis. Si se renderizan sueltas (legacy), siguen en grid 2 cols
   por la regla original más abajo. */
.ruta-analisis-derecha .ruta-historico-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .ruta-analisis-wrap {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ruta-analisis-derecha { gap: 18px; }
}

/* ===== Sección 5: Gauge ===== */
.ruta-gauge-card,
.ruta-gauge-placeholder {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.ruta-gauge-placeholder { color: var(--text-muted); text-align: center; }
.ruta-gauge-placeholder p { margin: 0 0 8px; }
.ruta-gauge-bar {
  position: relative;
  height: 36px;
  background: var(--bg-alt);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 14px;
}
.ruta-gauge-fill { height: 100%; transition: width 0.6s ease; border-radius: 18px; }
.ruta-gauge-pct {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--text); font-size: 14px;
}
.ruta-gauge-msg { font-size: 16px; color: var(--text); margin: 0 0 8px; font-weight: 600; }
.ruta-gauge-detalle { color: var(--text-muted); font-size: 13px; }

/* ===== Sección 6: Histórico ===== */
/* Contenedor de las cards (mín. histórico + actual). Default: stack vertical.
   Cuando está dentro de .ruta-analisis-derecha, los estilos del bloque
   análisis ya lo manejan; cuando se usa standalone (fallback Aviasales),
   este default basta. */
.ruta-historico-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.ruta-historico-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.ruta-historico-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow);
}
.ruta-historico-bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 16px;
  height: 220px;
  align-items: end;
}
.ruta-bar {
  display: flex; flex-direction: column; align-items: center;
  height: 100%; position: relative;
}
.ruta-bar-fill {
  width: 100%;
  background: var(--color-primary);
  border-radius: 4px 4px 0 0;
  transition: background 0.2s;
  min-height: 4px;
  margin-top: auto;
}
.ruta-bar.is-min .ruta-bar-fill { background: #2ecc71; }
.ruta-bar:hover .ruta-bar-fill { background: var(--color-primary); opacity: 0.85; }
.ruta-bar-label { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.ruta-bar-precio { font-size: 10px; color: var(--text); position: absolute; top: -16px; }

@media (max-width: 768px) {
  .ruta-historico-grid { grid-template-columns: 1fr; }
  .ruta-historico-bars { gap: 4px; padding: 12px 8px; }
  .ruta-bar-precio { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   CHART HISTÓRICO ESTILO GOOGLE FLIGHTS — SVG inline
   ═════════════════════════════════════════════════════════════════════════ */
.ruta-chart-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.ruta-chart {
  width: 100%;
  height: auto;
  max-height: 320px;
  display: block;
  font-family: var(--font-text);
}
.ruta-chart-grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.ruta-chart-band {
  fill: rgba(46, 204, 113, 0.10);
  stroke: rgba(46, 204, 113, 0.30);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.ruta-chart-band-label {
  font-size: 10px;
  fill: rgba(46, 204, 113, 0.85);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ruta-chart-area { fill: url(#ruta-chart-grad); }
.ruta-chart-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ruta-chart-min-dot {
  fill: #2ecc71;
  stroke: var(--bg-card);
  stroke-width: 2.5;
}
.ruta-chart-cur-dot {
  fill: var(--color-primary);
  stroke: var(--bg-card);
  stroke-width: 2.5;
}
.ruta-chart-tag rect { stroke-width: 0; }
.ruta-chart-tag text {
  font-size: 11px;
  font-weight: 700;
  fill: white;
}
.ruta-chart-tag-min rect { fill: #2ecc71; }
.ruta-chart-tag-cur rect { fill: var(--color-primary); }
.ruta-chart-axis {
  font-size: 11px;
  fill: var(--text-muted);
  font-weight: 500;
}

/* Leyenda */
.ruta-chart-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.ruta-chart-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ruta-chart-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ruta-chart-legend .dot-min { background: #2ecc71; }
.ruta-chart-legend .dot-cur { background: var(--color-primary); }
.ruta-chart-legend .dot-band {
  background: rgba(46, 204, 113, 0.20);
  border: 1px dashed rgba(46, 204, 113, 0.55);
  border-radius: 3px;
}

/* Dark mode */
body.dark-mode .ruta-chart-grid { stroke: rgba(255,255,255,0.08); }
body.dark-mode .ruta-chart-band { fill: rgba(46, 204, 113, 0.14); }

/* ═════════════════════════════════════════════════════════════════════════
   APEXCHARTS — Histórico horizontal bar
   ═════════════════════════════════════════════════════════════════════════ */
.ruta-apex-chart {
  width: 100%;
  min-height: 280px;
  user-select: none;
}
.ruta-apex-chart text {
  font-family: 'Manrope', sans-serif !important;
}
.ruta-apex-chart .apexcharts-bar-area { transition: none !important; }
.ruta-apex-chart .apexcharts-yaxis-label,
.ruta-apex-chart .apexcharts-yaxis-label text { font-weight: 600 !important; font-size: 13px !important; }
.ruta-apex-chart .apexcharts-data-labels text {
  font-weight: 700 !important;
  fill: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18) !important;
}

/* Dark mode */
body.dark-mode .ruta-apex-chart .apexcharts-xaxis-label text,
body.dark-mode .ruta-apex-chart .apexcharts-yaxis-label text { fill: #d1d5db !important; }
body.dark-mode .ruta-apex-chart .apexcharts-data-labels text { fill: #ffffff !important; }

/* Mobile: barras más compactas */
@media (max-width: 600px) {
  .ruta-apex-chart .apexcharts-yaxis-label,
  .ruta-apex-chart .apexcharts-yaxis-label text { font-size: 12px !important; }
  .ruta-apex-chart .apexcharts-xaxis-label text { font-size: 11px !important; }
  .ruta-apex-chart .apexcharts-data-labels text { font-size: 11px !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   INDICADOR "¿BUEN MOMENTO PARA COMPRAR?" (vpi-*)
   Adaptado del shortcode WP grafico_indicador.
   ═════════════════════════════════════════════════════════════════════════ */
.vuelame-price-indicator {
  position: relative;
  max-width: 600px;
  /* margin-top alto: el .vpi-tooltip flota a top:-38px y choca con el h2 */
  margin: 44px auto 24px;
  font-family: 'Manrope', sans-serif;
}

/* Barra principal verde-amarillo-rojo */
.vpi-bar {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
}
.vpi-green  { width: 30%; background: #2ecc71; }
.vpi-yellow { width: 40%; background: #f1c40f; }
.vpi-red    { width: 30%; background: #e74c3c; }

/* Marker (círculo blanco con borde azul) */
.vpi-marker {
  position: absolute;
  top: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 6px solid #1e6cff;
  transform: translateX(-50%);
  z-index: 3;
  transition: left 0.4s ease;
}

/* Tooltip flotante con el precio */
.vpi-tooltip {
  position: absolute;
  top: -38px;
  left: 50%;
  padding: 5px 10px;
  background: #2b2b2b;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  transform: translateX(-50%);
  z-index: 4;
  transition: left 0.4s ease;
}
.vpi-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #2b2b2b;
}

/* Rango típico (debajo de la barra, alineado con la zona amarilla) */
.vpi-market-range {
  position: relative;
  margin-top: 8px;
  margin-left: 30%;            /* alinea con el inicio del amarillo */
  width: 40%;                  /* mismo ancho que el amarillo */
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}

/* Comprar / Esperar */
.vpi-action { margin-top: 18px; }
.vpi-action-bar {
  height: 10px;
  background: var(--bg-alt);
  border-radius: 6px;
  overflow: hidden;
}
.vpi-action-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  transition: width 0.5s ease;
}
.vpi-action-labels {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.vpi-action-labels span:first-child { color: #2ecc71; }
.vpi-action-labels span:last-child  { color: var(--text-muted); }

/* Dark mode: ajustes */
body.dark-mode .vpi-tooltip { background: #1a1a1a; }
body.dark-mode .vpi-tooltip::after { border-top-color: #1a1a1a; }

/* Mobile */
@media (max-width: 600px) {
  /* margin-top más alto en mobile — el tooltip flota a top:-34px y arriba
     hay un H2 grande "¿Es buen momento para comprar?" que se tapaba. */
  .vuelame-price-indicator { margin: 56px auto 18px; }
  .vpi-tooltip { font-size: 12px; padding: 4px 8px; top: -34px; }
  .vpi-market-range { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SECCIÓN 7 — CLIMA (2 cards lado a lado: temperatura + lluvia)
   Cada card tiene: título centrado + texto descriptivo + ApexCharts area.
   Desktop: 2 cols. Mobile: stack vertical.
   ════════════════════════════════════════════════════════════════════════ */
.ruta-clima-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.ruta-clima-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 24px 20px;
  box-shadow: var(--shadow);
}
.ruta-clima-titulo {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin: 0 0 14px;
  line-height: 1.3;
}
.ruta-clima-texto {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.ruta-clima-texto strong { color: var(--text); font-weight: 700; }
.ruta-clima-chart {
  width: 100%;
  min-height: 280px;
}
/* ApexCharts dentro del card — selectores específicos para no chocar con
   los del histórico. */
.ruta-clima-chart text { font-family: 'Manrope', sans-serif !important; }
body.dark-mode .ruta-clima-chart .apexcharts-xaxis-label text,
body.dark-mode .ruta-clima-chart .apexcharts-yaxis-label text { fill: #d1d5db !important; }

@media (max-width: 900px) {
  .ruta-clima-grid { grid-template-columns: 1fr; gap: 24px; }
  .ruta-clima-titulo { font-size: 18px; }
  .ruta-clima-texto { font-size: 13px; }
}
@media (max-width: 600px) {
  .ruta-clima-card { padding: 18px 14px; }
  .ruta-clima-chart { min-height: 240px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SECCIÓN 8 — OTRAS OPCIONES (3 cards: Directos / Con Escala / Similares)
   Header con gradient naranja, body con filas: logo + nombre + meta + precio.
   ════════════════════════════════════════════════════════════════════════ */
.ruta-otras-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.otras-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.otras-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px;
  background: linear-gradient(90deg, #ff7841 0%, #ff5e3a 100%);
  color: #ffffff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}
.otras-header-icon { display: inline-flex; align-items: center; justify-content: center; }
.otras-header-icon svg { width: 22px; height: 22px; }
.otras-header-text { flex: 1; }

.otras-body {
  padding: 8px 18px 18px;
  display: flex;
  flex-direction: column;
}
.otras-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.otras-fila:last-child { border-bottom: none; }
.otras-fila-link:hover { background: rgba(255, 94, 58, 0.04); opacity: 1; }
.otras-fila-info {
  flex: 1;
  min-width: 0;     /* permite ellipsis en mobile */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.otras-fila-aero {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.otras-fila-aero strong {
  font-family: var(--font-text);
  font-weight: 700;
  color: var(--text);
}
.otras-aero-logo {
  width: 22px; height: 22px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  display: block;
  flex-shrink: 0;
}
.otras-aero-codigo {
  font-weight: 700; font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.otras-fila-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.otras-precio {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Versión link: pill clickeable que va a Kiwi */
.otras-precio-link {
  display: inline-block;
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 94, 58, 0.35);
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.otras-precio-link:hover {
  background: var(--color-primary);
  color: #fff !important;
  opacity: 1;
  transform: translateY(-1px);
}
.otras-precio-empty { color: var(--text-muted); font-weight: 500; }

/* Texto-ruta como link interno (col 3) — sin underline, mismo color */
a.otras-ruta-texto { text-decoration: none; color: var(--text); }
a.otras-ruta-texto:hover { color: var(--color-primary); opacity: 1; }

/* Subtítulo por región (col 3) — uppercase + tracking suave + gris */
.otras-region-titulo {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 14px 0 0;
  padding: 0 0 4px;
}
.otras-body > .otras-region-titulo:first-child { margin-top: 0; }

/* Fila de ruta similar — texto + flecha + precio en una línea */
.otras-fila-ruta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.otras-ruta-texto {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}
.otras-ruta-arrow {
  display: inline-block;
  margin: 0 6px;
  color: var(--text-muted);
  font-weight: 400;
}

@media (max-width: 1024px) {
  .ruta-otras-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .otras-header { padding: 14px 14px; font-size: 14px; }
  .otras-header-icon svg { width: 20px; height: 20px; }
  .otras-body { padding: 6px 14px 14px; }
  .otras-fila { gap: 10px; padding: 10px 0; }
  .otras-fila-aero { font-size: 13px; }
  .otras-fila-meta { font-size: 12px; }
  .otras-precio { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════════
   EQUIPAJE — 3 cards (valija / carry-on / objeto personal)
   Adaptación del shortcode WP [equipaje]. Cards horizontales, responsivas
   (3 en línea siempre, incluso en mobile chico).
   ════════════════════════════════════════════════════════════════════════ */
.contenedor-equipaje {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 0;
}
.item-equipaje {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 14px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: var(--shadow);
}
.item-equipaje:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.icono-equipaje {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icono-equipaje svg {
  width: 44px;
  height: 44px;
  stroke: currentColor;
  fill: none;
}
/* Ícono naranja cuando está incluido, gris cuando no */
.icono-equipaje.estado-si { color: var(--color-primary); }
.icono-equipaje.estado-no { color: #d3d3d3; }
body.dark-mode .icono-equipaje.estado-no { color: #4b5563; }

.titulo-equipaje {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.3;
  text-align: center;        /* override por las dudas */
}
.estado-equipaje {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.estado-equipaje.estado-si {
  background-color: rgba(255, 94, 58, 0.12);
  color: var(--color-primary);
}
.estado-equipaje.estado-no {
  background-color: rgba(131, 137, 152, 0.16);
  color: var(--text-muted);
}

/* Mobile: 3 en línea siempre, comprimidas */
@media (max-width: 768px) {
  .contenedor-equipaje {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 0;
  }
  .item-equipaje {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 16px 8px;
  }
  .icono-equipaje { width: 50px; height: 50px; margin-bottom: 10px; }
  .icono-equipaje svg { width: 36px; height: 36px; }
  .titulo-equipaje {
    font-size: 13px;
    height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .estado-equipaje {
    font-size: 10px;
    padding: 4px 10px;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .contenedor-equipaje { gap: 6px; }
  .item-equipaje { padding: 12px 5px; }
  .icono-equipaje { width: 42px; height: 42px; }
  .icono-equipaje svg { width: 30px; height: 30px; }
  .titulo-equipaje { font-size: 12px; }
  .estado-equipaje { font-size: 9px; padding: 3px 7px; }
}