/* Componentes de tour reutilizables (fichas, página de permisos y artículos del blog):
   ruta con perfil de altura, comparativa del Camino Inca y tarjeta de reserva. */
.st-route, .st-compare, .st-tour-cta, .st-route-wrap {
    --st-navy: #001e4e;
    --st-red: #a4270b;
    --st-white: #fff;
    --st-text: #111827;
    --st-text-muted: #6b7280;
    --st-border: #e5e7eb;
    --st-border-light: #f3f4f6;
    --st-radius: 16px;
    --st-radius-sm: 12px;
    --st-font-h: 'Archivo', sans-serif;
    --st-font-b: 'Inter', system-ui, -apple-system, sans-serif;
}
/* ── Ruta y perfil de altura (SVG generado en includes/tour-route.php) ── */
.st-route__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.st-route__stats li { padding: 0.875rem 1rem; border: 1px solid var(--st-border); border-radius: var(--st-radius-sm); background: var(--st-white); }
.st-route__stats strong { display: block; color: var(--st-navy); font: 800 1.375rem/1.2 var(--st-font-h); }
.st-route__stats span { color: var(--st-text-muted); font-size: 0.8125rem; line-height: 1.4; }
.st-route__chart { margin: 0 0 1rem; padding: 0.75rem 0.5rem 0.5rem; border: 1px solid var(--st-border); border-radius: var(--st-radius); background: var(--st-white); }
.st-route__svg { display: block; width: 100%; height: auto; overflow: visible; }
.st-route__grid { stroke: #eef2f7; stroke-width: 1; }
.st-route__axis { fill: #94a3b8; font: 600 11px var(--st-font-b); }
.st-route__line { fill: none; stroke: var(--st-red); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.st-route__dot { fill: #fff; stroke: var(--st-navy); stroke-width: 3; }
.st-route__dot.is-top { fill: var(--st-red); stroke: #fff; }
.st-route__label { font-family: var(--st-font-h); }
.st-route__name { fill: var(--st-navy); font-size: 12.5px; font-weight: 700; }
.st-route__alt { fill: var(--st-text-muted); font-size: 11px; font-weight: 600; }
.st-route__num { fill: var(--st-red); font-family: var(--st-font-h); font-size: 13px; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.st-route__chart figcaption { margin-top: 0.25rem; color: #94a3b8; font-size: 0.75rem; text-align: center; }
.st-route__stops { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.st-route__stops li {
    flex: 1 1 150px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    border-left: 3px solid var(--st-red);
    border-radius: 0 10px 10px 0;
    background: #fdf8f6;
    font-size: 0.8125rem;
}
.st-route__num-badge { position: absolute; top: 0.5rem; right: 0.5rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--st-red); color: #fff; font-size: 0.6875rem; font-weight: 800; line-height: 1; }
.st-route__km { color: var(--st-red); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.st-route__stops strong { color: var(--st-navy); font-size: 0.9375rem; }
.st-route__meta, .st-route__note { color: var(--st-text-muted); }
@media (max-width: 639px) {
    .st-route__stats { grid-template-columns: 1fr; }
    .st-route__name { font-size: 15px; }
    .st-route__alt, .st-route__axis { font-size: 13px; }
}

/* ── Comparativa del Camino Inca ── */
.st-compare { overflow-x: auto; border: 1px solid var(--st-border); border-radius: var(--st-radius); background: var(--st-white); }
.st-compare table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9rem; }
.st-compare th, .st-compare td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--st-border-light); text-align: left; vertical-align: top; }
.st-compare thead th { background: #f8fafc; color: var(--st-navy); font: 700 0.95rem/1.3 var(--st-font-h); }
.st-compare thead th a { color: var(--st-navy); text-decoration: underline; text-underline-offset: 3px; }
.st-compare tbody th { width: 22%; color: var(--st-text-muted); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.st-compare .is-current { background: #fdf8f6; }
.st-compare thead th.is-current { background: #fbe9e3; color: var(--st-red); }
.st-compare__here { display: block; margin-bottom: 0.125rem; color: var(--st-red); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.st-compare tr:last-child th, .st-compare tr:last-child td { border-bottom: 0; font-weight: 700; color: var(--st-text); }


/* Tarjeta de reserva dentro de un artículo */
.st-tour-cta { display: flex; align-items: stretch; gap: 0; margin: 2rem 0; overflow: hidden; border: 1px solid var(--st-border); border-radius: var(--st-radius); background: var(--st-white); text-decoration: none !important; color: inherit !important; font-weight: 400 !important; }
.st-tour-cta__img { flex: 0 0 38%; min-height: 170px; background: #f1f5f9; }
.st-tour-cta__img img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 0 !important; object-fit: cover; box-shadow: none !important; }
.st-tour-cta__body { display: flex; flex-direction: column; justify-content: center; gap: 0.375rem; padding: 1.25rem 1.5rem; }
.st-tour-cta__kicker { color: var(--st-red); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.st-tour-cta__title { color: var(--st-navy); font: 800 1.25rem/1.3 var(--st-font-h); }
.st-tour-cta__meta { color: var(--st-text-muted); font-size: 0.9rem; }
.st-tour-cta__meta b { color: var(--st-text); font-size: 1.125rem; }
.st-tour-cta__btn { align-self: flex-start; margin-top: 0.5rem; padding: 0.625rem 1.125rem; border-radius: 999px; background: var(--st-red); color: #fff; font-weight: 700; font-size: 0.9rem; }
.st-tour-cta:hover .st-tour-cta__btn { background: var(--st-navy); }
@media (max-width: 639px) { .st-tour-cta { flex-direction: column; } .st-tour-cta__img { flex-basis: 180px; } }

/* Dentro del texto de un artículo, las listas y tablas de los componentes no heredan el estilo del blog */
.blog-content .st-route__stats, .blog-content .st-route__stops { list-style: none; padding-left: 0; margin-left: 0; }
.blog-content .st-route__stats li::before, .blog-content .st-route__stops li::before { content: none; }
.blog-content .st-compare table { display: table; margin: 0; }
.blog-content .st-route__stats li, .blog-content .st-route__stops li { padding-left: 1rem; margin-bottom: 0; line-height: 1.4; }
.blog-content .st-route__stats span, .blog-content .st-route__stops span { display: block; font-size: 0.8125rem; line-height: 1.4; }
.blog-content .st-route__stops strong { font-size: 0.9375rem; }
.blog-content .st-route__chart figcaption { font-size: 0.75rem; }

/* ── Mapa esquemático del viaje (SVG, no a escala) ── */
.st-map { margin: 1.25rem 0 0; }
.st-map__scroll { overflow-x: auto; border: 1px solid var(--st-border, #e5e7eb); border-radius: 14px; background: #f8fbfd; }
.st-map svg { display: block; width: 100%; min-width: 540px; height: auto; font-family: inherit; }
.st-map__mountain { fill: #e8efe6; }
.st-map__river { fill: none; stroke: #bfdbfe; stroke-width: 12; stroke-linecap: round; }
.st-map__river-label { fill: #3b82f6; font-size: 12px; font-style: italic; }
.st-map__rail { fill: none; stroke: #334155; stroke-width: 2.5; stroke-dasharray: 9 6; }
.st-map__trail { fill: none; stroke: #b91c1c; stroke-width: 4.5; stroke-linecap: round; }
.st-map__bus { fill: none; stroke: #6b7280; stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.st-map__dot { fill: #fff; stroke: #b91c1c; stroke-width: 3; }
.st-map__dot--town { stroke: #334155; }
.st-map__name, .st-map__alt, .st-map__note { paint-order: stroke; stroke: #f8fbfd; stroke-width: 4px; stroke-linejoin: round; }
.st-map__name { fill: #0f2a44; font-size: 14px; font-weight: 700; }
.st-map__alt { fill: #64748b; font-size: 12px; }
.st-map__note { fill: #0f2a44; font-size: 13px; font-weight: 700; }
.st-map__note--sub { font-weight: 400; fill: #475569; }
.st-map figcaption { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.5rem; color: #64748b; font-size: 0.8125rem; }
.st-map__legend { display: inline-flex; align-items: center; gap: 0.375rem; }
.st-map__key { display: inline-block; width: 22px; height: 0; border-top: 3px solid #b91c1c; }
.st-map__key--rail { border-top: 3px dashed #334155; }
.st-map__key--bus { border-top: 3px dotted #6b7280; }
.st-map__scale { margin-left: auto; font-style: italic; }