{"id":6988,"date":"2025-11-29T14:59:03","date_gmt":"2025-11-29T14:59:03","guid":{"rendered":"https:\/\/peopleofcostarica.com\/?page_id=6988"},"modified":"2025-11-29T15:05:15","modified_gmt":"2025-11-29T15:05:15","slug":"horario-y-tarifas-de-trenes-incofer-costa-rica-2026","status":"publish","type":"page","link":"https:\/\/peopleofcostarica.com\/es\/horario-y-tarifas-de-trenes-incofer-costa-rica-2026\/","title":{"rendered":"Horario y Tarifas de Trenes Incofer Costa Rica 2026"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6988\" class=\"elementor elementor-6988\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8639ebe e-flex e-con-boxed e-con e-parent\" data-id=\"8639ebe\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1476260 elementor-widget elementor-widget-html\" data-id=\"1476260\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"ticotren-wrapper\" style=\"all: initial; font-family: 'Inter', sans-serif;\">\r\n\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n    \r\n    <script>\r\n        tailwind.config = {\r\n            \/\/ Esto hace que todas las clases de Tailwind usen !important autom\u00e1ticamente\r\n            \/\/ y solo apliquen dentro de nuestro wrapper para no romper tu sitio.\r\n            important: '#ticotren-wrapper', \r\n            theme: {\r\n                extend: {\r\n                    fontFamily: { sans: ['Inter', 'sans-serif'] }\r\n                }\r\n            },\r\n            \/\/ Desactivamos preflight global para no afectar el men\u00fa de tu WordPress\r\n            corePlugins: { preflight: false } \r\n        }\r\n    <\/script>\r\n\r\n    <style>\r\n        \/* Forzar fuente y resetear caja *\/\r\n        #ticotren-wrapper {\r\n            display: block;\r\n            width: 100%;\r\n            background-color: transparent;\r\n            color: #1e293b; \/* slate-800 *\/\r\n            line-height: 1.5;\r\n            box-sizing: border-box;\r\n        }\r\n        #ticotren-wrapper * {\r\n            box-sizing: border-box;\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n        \/* Resetear botones agresivos de WordPress\/Elementor *\/\r\n        #ticotren-wrapper button {\r\n            background: none;\r\n            border: none;\r\n            padding: 0;\r\n            margin: 0;\r\n            font: inherit;\r\n            cursor: pointer;\r\n            outline: inherit;\r\n            box-shadow: none;\r\n            text-transform: none; \/* Evitar may\u00fasculas forzadas *\/\r\n            letter-spacing: normal;\r\n        }\r\n        \/* Resetear inputs *\/\r\n        #ticotren-wrapper input {\r\n            margin: 0;\r\n        }\r\n        \/* Animaciones *\/\r\n        @keyframes ttFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n        .tt-fade-in { animation: ttFadeIn 0.4s ease-out; }\r\n        \r\n        \/* Scrollbar personalizada *\/\r\n        .tt-scroll::-webkit-scrollbar { width: 6px; }\r\n        .tt-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }\r\n        .tt-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\r\n        .tt-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\r\n        \r\n        \/* L\u00ednea de tiempo *\/\r\n        .tt-timeline-item { position: relative; padding-left: 24px; padding-bottom: 24px; border-left: 2px solid #e2e8f0; margin-left: 8px; }\r\n        .tt-timeline-item:last-child { border-left: none; padding-bottom: 0; }\r\n        .tt-timeline-dot { position: absolute; left: -7px; top: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 1px currentColor; }\r\n    <\/style>\r\n\r\n    <div class=\"max-w-6xl mx-auto px-4 py-4 pb-24\">\r\n        \r\n        <div id=\"route-tabs\" class=\"flex flex-wrap gap-3 mb-6 justify-center md:justify-start\">\r\n            <\/div>\r\n\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 tt-fade-in text-left\" id=\"schedule-container\">\r\n            \r\n            <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col h-[600px]\">\r\n                <div class=\"p-5 text-white transition-colors duration-300\" id=\"header-outbound-bg\">\r\n                    <div class=\"flex items-center gap-2 mb-1 opacity-90 text-xs font-semibold tracking-wider uppercase\">\r\n                        <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>\r\n                        IDA\r\n                    <\/div>\r\n                    <h2 class=\"text-xl font-bold m-0 p-0 leading-tight\" id=\"header-outbound\">San Jos\u00e9 \u2192 Destino<\/h2>\r\n                <\/div>\r\n                <div class=\"flex-1 overflow-y-auto tt-scroll p-2\" id=\"list-outbound\">\r\n                    <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col h-[600px]\">\r\n                <div class=\"p-5 text-white transition-colors duration-300\" id=\"header-inbound-bg\">\r\n                    <div class=\"flex items-center gap-2 mb-1 opacity-90 text-xs font-semibold tracking-wider uppercase\">\r\n                        <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>\r\n                        VUELTA\r\n                    <\/div>\r\n                    <h2 class=\"text-xl font-bold m-0 p-0 leading-tight\" id=\"header-inbound\">Destino \u2192 San Jos\u00e9<\/h2>\r\n                <\/div>\r\n                <div class=\"flex-1 overflow-y-auto tt-scroll p-2\" id=\"list-inbound\">\r\n                    <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"mt-8 bg-white rounded-2xl p-6 shadow-sm border border-slate-200 flex flex-col md:flex-row justify-between items-center gap-6\">\r\n            <div class=\"text-left\">\r\n                <h3 class=\"font-bold text-lg text-slate-800 mb-2 m-0\">Estado del Servicio<\/h3>\r\n                <div class=\"flex gap-2 items-center text-sm text-slate-500\">\r\n                    <span class=\"w-2 h-2 rounded-full bg-green-500 inline-block\"><\/span>\r\n                    <span id=\"general-route-desc\">Operando con horario regular<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"text-right\">\r\n                <p class=\"text-xs text-slate-400 font-medium uppercase mb-1 m-0\">Ayuda<\/p>\r\n                <p class=\"text-sm text-slate-600 m-0\">Haz clic en un horario para ver el precio.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div id=\"modal-overlay\" class=\"fixed inset-0 z-[9999] hidden flex items-center justify-center p-4 bg-black\/50 backdrop-blur-sm\">\r\n        <div class=\"bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden transform transition-all scale-100 relative max-h-[90vh] flex flex-col text-left\">\r\n            \r\n            <div class=\"p-6 text-white relative shrink-0 transition-colors duration-300\" id=\"modal-header-bg\">\r\n                <button onclick=\"closeModal()\" class=\"absolute top-4 right-4 text-white\/80 hover:text-white bg-black\/20 hover:bg-black\/30 rounded-full p-1 transition flex items-center justify-center w-8 h-8\">\r\n                    <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M18 6L6 18M6 6l12 12\"\/><\/svg>\r\n                <\/button>\r\n                <p class=\"text-sm font-medium opacity-90 mb-1 m-0\" id=\"modal-direction\">IDA<\/p>\r\n                <h3 class=\"text-2xl font-bold m-0 leading-tight\" id=\"modal-time\">00:00<\/h3>\r\n                <p class=\"text-sm opacity-90 flex items-center gap-1 mt-2 m-0\">\r\n                    <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\r\n                    Lunes a Viernes\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"p-6 overflow-y-auto\">\r\n                <div class=\"mb-6\">\r\n                    <h4 class=\"font-bold text-slate-800 mb-3 text-sm uppercase tracking-wide flex items-center gap-2 m-0\">\r\n                        <svg width=\"16\" height=\"16\" class=\"text-slate-500\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/><\/svg>\r\n                        Tarifas\r\n                    <\/h4>\r\n                    <div class=\"bg-slate-50 border border-slate-100 rounded-xl overflow-hidden\" id=\"modal-fares-list\">\r\n                        <\/div>\r\n                <\/div>\r\n\r\n                <h4 class=\"font-bold text-slate-800 mb-4 text-sm uppercase tracking-wide m-0\">Recorrido Estimado<\/h4>\r\n                <div class=\"pl-2 pt-2\" id=\"modal-stops\">\r\n                    <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"bg-slate-50 p-4 text-center border-t border-slate-100 shrink-0\">\r\n                <button onclick=\"closeModal()\" id=\"modal-close-btn\" class=\"font-semibold text-sm hover:bg-slate-100 px-4 py-2 rounded-lg transition-colors inline-block\">Cerrar<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const ROUTES = [\r\n            {\r\n                id: 'cartago',\r\n                name: 'San Jos\u00e9 - Cartago',\r\n                colorClass: 'blue',\r\n                bgHeader: 'bg-blue-600',\r\n                textAccent: 'text-blue-600',\r\n                bgLight: 'bg-blue-50',\r\n                hoverBg: 'hover:bg-blue-50',\r\n                headerOut: 'Estaci\u00f3n Atl\u00e1ntico \u2192 Cartago',\r\n                headerIn: 'Cartago \u2192 Estaci\u00f3n Atl\u00e1ntico',\r\n                stations: ['Estaci\u00f3n Atl\u00e1ntico', 'UCR', 'U. Latina', 'CFIA', 'UACA', 'Tres R\u00edos', 'Estaci\u00f3n Cartago', 'Los \u00c1ngeles', 'Oreamuno', 'Plaza Para\u00edso'],\r\n                fares: [ { dest: 'General', price: '\u20a1705' } ],\r\n                schedule: [\r\n                    { t: '06:01', arr: '06:47', dir: 'out', note: 'Hasta Bas\u00edlica' },\r\n                    { t: '06:35', arr: '07:31', dir: 'out', note: 'Hasta Bas\u00edlica' },\r\n                    { t: '07:20', arr: '08:08', dir: 'out', note: 'Hasta Est. Cartago' },\r\n                    { t: '08:05', arr: '08:56', dir: 'out', note: 'Hasta Est. Cartago' },\r\n                    { t: '15:01', arr: '15:45', dir: 'out', note: 'Hasta Est. Cartago' },\r\n                    { t: '15:35', arr: '16:25', dir: 'out', note: 'Hasta Oreamuno' },\r\n                    { t: '16:10', arr: '17:02', dir: 'out', note: 'Hasta Est. Cartago' },\r\n                    { t: '16:45', arr: '17:38', dir: 'out', note: 'Hasta Oreamuno' },\r\n                    { t: '17:01', arr: '18:01', dir: 'out', note: 'Hasta Para\u00edso' },\r\n                    { t: '17:35', arr: '18:30', dir: 'out', note: 'Hasta Para\u00edso' },\r\n                    { t: '18:05', arr: '18:55', dir: 'out', note: 'Hasta Oreamuno' },\r\n                    { t: '18:45', arr: '19:36', dir: 'out', note: 'Hasta Est. Cartago' },\r\n                    { t: '19:15', arr: '20:03', dir: 'out', note: 'Hasta Est. Cartago' },\r\n                    { t: '19:40', arr: '20:25', dir: 'out', note: 'Hasta Est. Cartago' },\r\n                    \/\/ Inbound\r\n                    { t: '05:25', arr: '06:19', dir: 'in', note: 'Sale de Bas\u00edlica' },\r\n                    { t: '06:01', arr: '06:47', dir: 'in', note: 'Sale de Est. Cartago' },\r\n                    { t: '06:05', arr: '07:10', dir: 'in', note: 'Sale de Para\u00edso' },\r\n                    { t: '06:55', arr: '07:47', dir: 'in', note: 'Sale de Bas\u00edlica' },\r\n                    { t: '07:35', arr: '08:27', dir: 'in', note: 'Sale de Bas\u00edlica' },\r\n                    { t: '08:11', arr: '08:57', dir: 'in', note: 'Sale de Est. Cartago' },\r\n                    { t: '09:01', arr: '09:47', dir: 'in', note: 'Sale de Est. Cartago' },\r\n                    { t: '15:50', arr: '16:38', dir: 'in', note: 'Sale de Est. Cartago' },\r\n                    { t: '16:36', arr: '17:23', dir: 'in', note: 'Sale de Oreamuno' },\r\n                    { t: '17:05', arr: '17:53', dir: 'in', note: 'Sale de Est. Cartago' },\r\n                    { t: '17:50', arr: '18:42', dir: 'in', note: 'Sale de Para\u00edso' },\r\n                    { t: '18:22', arr: '19:09', dir: 'in', note: 'Sale de Para\u00edso' },\r\n                    { t: '18:50', arr: '19:36', dir: 'in', note: 'Sale de Para\u00edso' },\r\n                    { t: '19:08', arr: '19:58', dir: 'in', note: 'Sale de Oreamuno' }\r\n                ]\r\n            },\r\n            {\r\n                id: 'heredia',\r\n                name: 'Heredia - Alajuela',\r\n                colorClass: 'amber',\r\n                bgHeader: 'bg-amber-500',\r\n                textAccent: 'text-amber-600',\r\n                bgLight: 'bg-amber-50',\r\n                hoverBg: 'hover:bg-amber-50',\r\n                headerOut: 'San Jos\u00e9 \u2192 Heredia\/Alajuela',\r\n                headerIn: 'Alajuela\/Heredia \u2192 San Jos\u00e9',\r\n                stations: ['Estaci\u00f3n Atl\u00e1ntico', 'Tib\u00e1s', 'Santo Domingo', 'Heredia', 'San Joaqu\u00edn', 'Alajuela'],\r\n                fares: [\r\n                    { dest: 'San Jos\u00e9 \u2194 Heredia', price: '\u20a1545' },\r\n                    { dest: 'San Jos\u00e9 \u2194 Alajuela', price: '\u20a1800' },\r\n                    { dest: 'Heredia \u2194 U.Latina', price: '\u20a1600' }\r\n                ],\r\n                schedule: [\r\n                    { t: '04:50', arr: '05:38', dir: 'out', note: 'Hasta Alajuela' },\r\n                    { t: '05:30', arr: '05:52', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '05:40', arr: '05:59', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '06:05', arr: '06:32', dir: 'out', note: 'Sale U.Latina' },\r\n                    { t: '06:25', arr: '06:48', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '06:39', arr: '07:34', dir: 'out', note: 'Hasta Alajuela' },\r\n                    { t: '06:55', arr: '07:17', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '07:25', arr: '07:47', dir: 'out', note: 'Sale U.Latina' },\r\n                    { t: '07:35', arr: '08:28', dir: 'out', note: 'Hasta Alajuela' },\r\n                    { t: '07:55', arr: '08:19', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '08:15', arr: '08:38', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '09:05', arr: '09:28', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '15:30', arr: '16:18', dir: 'out', note: 'Hasta Alajuela' },\r\n                    { t: '15:50', arr: '16:12', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '16:30', arr: '16:52', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '17:05', arr: '17:33', dir: 'out', note: 'Sale U.Latina' },\r\n                    { t: '17:20', arr: '17:47', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '17:35', arr: '18:28', dir: 'out', note: 'Hasta Alajuela' },\r\n                    { t: '18:01', arr: '18:27', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '18:20', arr: '18:47', dir: 'out', note: 'Sale U.Latina' },\r\n                    { t: '18:35', arr: '19:02', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '19:05', arr: '19:28', dir: 'out', note: 'Hasta Heredia' },\r\n                    { t: '19:30', arr: '19:57', dir: 'out', note: 'Hasta Heredia' },\r\n                    \/\/ Inbound\r\n                    { t: '05:45', arr: '06:33', dir: 'in', note: 'Desde Alajuela' },\r\n                    { t: '06:01', arr: '06:23', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '06:20', arr: '06:46', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '06:35', arr: '07:02', dir: 'in', note: 'Sigue a U.Latina' },\r\n                    { t: '06:55', arr: '07:22', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '07:20', arr: '07:42', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '07:40', arr: '08:33', dir: 'in', note: 'Desde Alajuela' },\r\n                    { t: '07:50', arr: '08:13', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '08:25', arr: '08:49', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '08:31', arr: '09:24', dir: 'in', note: 'Desde Alajuela' },\r\n                    { t: '08:40', arr: '09:02', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '09:31', arr: '09:53', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '16:15', arr: '16:40', dir: 'in', note: 'Sigue a U.Latina' },\r\n                    { t: '16:25', arr: '17:14', dir: 'in', note: 'Desde Alajuela' },\r\n                    { t: '17:05', arr: '17:28', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '17:35', arr: '17:57', dir: 'in', note: 'Sigue a U.Latina' },\r\n                    { t: '17:50', arr: '18:12', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '18:35', arr: '19:24', dir: 'in', note: 'Desde Alajuela' },\r\n                    { t: '18:50', arr: '19:12', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '19:15', arr: '19:39', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '19:31', arr: '19:53', dir: 'in', note: 'Desde Heredia' },\r\n                    { t: '20:01', arr: '20:23', dir: 'in', note: 'Desde Heredia' }\r\n                ]\r\n            },\r\n            {\r\n                id: 'belen',\r\n                name: 'San Jos\u00e9 - Bel\u00e9n',\r\n                colorClass: 'emerald',\r\n                bgHeader: 'bg-emerald-600',\r\n                textAccent: 'text-emerald-600',\r\n                bgLight: 'bg-emerald-50',\r\n                hoverBg: 'hover:bg-emerald-50',\r\n                headerOut: 'Estaci\u00f3n Pac\u00edfico \u2192 Bel\u00e9n',\r\n                headerIn: 'Bel\u00e9n \u2192 Estaci\u00f3n Pac\u00edfico',\r\n                stations: ['Estaci\u00f3n Pac\u00edfico', 'Sabana', 'Pavas', 'Demasa', 'Metr\u00f3poli', 'Pedregal', 'Bel\u00e9n'],\r\n                fares: [\r\n                    { dest: 'San Jos\u00e9 \u2194 Bel\u00e9n', price: '\u20a1475' },\r\n                    { dest: 'San Jos\u00e9 \u2194 CFIA\/Pavas', price: '\u20a1310' },\r\n                    { dest: 'CFIA \u2194 Metr\u00f3poli', price: '\u20a1635' }\r\n                ],\r\n                schedule: [\r\n                    { t: '05:15', arr: '05:59', dir: 'out', note: 'Desde Pac\u00edfico' },\r\n                    { t: '06:37', arr: '07:46', dir: 'out', note: 'Desde CFIA' },\r\n                    { t: '15:15', arr: '16:03', dir: 'out', note: 'Desde Pac\u00edfico' },\r\n                    { t: '15:25', arr: '15:57', dir: 'out', note: 'Hasta Metr\u00f3poli' },\r\n                    { t: '15:55', arr: '16:48', dir: 'out', note: 'Desde Pac\u00edfico' },\r\n                    { t: '16:15', arr: '16:48', dir: 'out', note: 'Hasta Metr\u00f3poli' },\r\n                    { t: '17:25', arr: '18:13', dir: 'out', note: 'Desde Pac\u00edfico' },\r\n                    { t: '17:50', arr: '18:22', dir: 'out', note: 'Hasta Metr\u00f3poli' },\r\n                    \/\/ Inbound\r\n                    { t: '06:05', arr: '06:50', dir: 'in', note: 'A Pac\u00edfico' },\r\n                    { t: '07:25', arr: '08:10', dir: 'in', note: 'A Pac\u00edfico' },\r\n                    { t: '07:55', arr: '08:39', dir: 'in', note: 'A Pac\u00edfico' },\r\n                    { t: '16:10', arr: '17:11', dir: 'in', note: 'Sigue a CFIA' },\r\n                    { t: '16:55', arr: '17:41', dir: 'in', note: 'A Pac\u00edfico' },\r\n                    { t: '18:30', arr: '19:14', dir: 'in', note: 'A Pac\u00edfico' }\r\n                ]\r\n            }\r\n        ];\r\n\r\n        let currentRouteId = ROUTES[0].id;\r\n\r\n        function init() {\r\n            renderTabs();\r\n            renderSchedule();\r\n        }\r\n\r\n        function renderTabs() {\r\n            const container = document.getElementById('route-tabs');\r\n            container.innerHTML = ROUTES.map(r => {\r\n                const isActive = currentRouteId === r.id;\r\n                let activeClasses = '';\r\n                if(r.colorClass === 'blue') activeClasses = 'bg-blue-600 text-white ring-2 ring-blue-600 ring-offset-2';\r\n                if(r.colorClass === 'amber') activeClasses = 'bg-amber-500 text-white ring-2 ring-amber-500 ring-offset-2';\r\n                if(r.colorClass === 'emerald') activeClasses = 'bg-emerald-600 text-white ring-2 ring-emerald-600 ring-offset-2';\r\n\r\n                return `\r\n                <button onclick=\"changeRoute('${r.id}')\" \r\n                    class=\"px-5 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm ${isActive ? activeClasses : 'bg-white text-slate-600 hover:bg-slate-50 border border-slate-200'}\">\r\n                    ${r.name}\r\n                <\/button>\r\n            `}).join('');\r\n        }\r\n\r\n        function changeRoute(id) {\r\n            currentRouteId = id;\r\n            renderTabs();\r\n            renderSchedule();\r\n        }\r\n\r\n        function renderSchedule() {\r\n            const route = ROUTES.find(r => r.id === currentRouteId);\r\n            \r\n            const headerOutBg = document.getElementById('header-outbound-bg');\r\n            const headerInBg = document.getElementById('header-inbound-bg');\r\n            const allBgClasses = ['bg-blue-600', 'bg-amber-500', 'bg-emerald-600'];\r\n            \r\n            headerOutBg.classList.remove(...allBgClasses);\r\n            headerInBg.classList.remove(...allBgClasses);\r\n            headerOutBg.classList.add(route.bgHeader);\r\n            headerInBg.classList.add(route.bgHeader);\r\n\r\n            document.getElementById('header-outbound').innerText = route.headerOut;\r\n            document.getElementById('header-inbound').innerText = route.headerIn;\r\n            document.getElementById('general-route-desc').innerText = `Ruta: ${route.stations[0]} \u2194 ${route.stations[route.stations.length -1]}`;\r\n\r\n            document.getElementById('list-outbound').innerHTML = generateListHTML(route.schedule.filter(s => s.dir === 'out'), route);\r\n            document.getElementById('list-inbound').innerHTML = generateListHTML(route.schedule.filter(s => s.dir === 'in'), route);\r\n        }\r\n\r\n        function generateListHTML(items, route) {\r\n            if (items.length === 0) return '<div class=\"p-6 text-center text-slate-400 text-sm\">No hay horarios disponibles.<\/div>';\r\n            \r\n            return items.map((item) => `\r\n                <div onclick=\"openTripDetails('${item.t}', '${item.arr}', '${item.note}', '${item.dir}')\" \r\n                     class=\"group flex items-center justify-between p-4 border-b border-slate-100 ${route.hoverBg} cursor-pointer transition-colors last:border-0\">\r\n                    <div class=\"flex items-center gap-4\">\r\n                        <div class=\"bg-slate-100 text-slate-600 p-2 rounded-lg group-hover:bg-white group-hover:${route.textAccent} transition shadow-sm\">\r\n                            <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>\r\n                        <\/div>\r\n                        <div>\r\n                            <p class=\"text-lg font-bold text-slate-800 m-0\">${item.t}<\/p>\r\n                            <p class=\"text-xs text-slate-500 font-medium m-0\">Salida<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"flex flex-col items-end\">\r\n                         <div class=\"bg-gray-100 text-gray-700 text-[10px] font-bold px-2 py-0.5 rounded-full mb-1 uppercase tracking-wide text-right truncate max-w-[120px]\">\r\n                            ${item.note}\r\n                         <\/div>\r\n                         <div class=\"flex items-center gap-1 text-slate-400 text-xs\">\r\n                            <span>Llegada ${item.arr}<\/span>\r\n                            <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n                         <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            `).join('');\r\n        }\r\n\r\n        function openTripDetails(time, arr, note, dir) {\r\n            const route = ROUTES.find(r => r.id === currentRouteId);\r\n            const modal = document.getElementById('modal-overlay');\r\n            const modalHeader = document.getElementById('modal-header-bg');\r\n            const modalCloseBtn = document.getElementById('modal-close-btn');\r\n            \r\n            const allBgClasses = ['bg-blue-600', 'bg-amber-500', 'bg-emerald-600'];\r\n            const allTextClasses = ['text-blue-600', 'text-amber-600', 'text-emerald-600'];\r\n            \r\n            modalHeader.classList.remove(...allBgClasses);\r\n            modalHeader.classList.add(route.bgHeader);\r\n            modalCloseBtn.classList.remove(...allTextClasses);\r\n            modalCloseBtn.classList.add(route.textAccent);\r\n\r\n            document.getElementById('modal-direction').innerText = dir === 'out' ? 'IDA' : 'VUELTA';\r\n            document.getElementById('modal-time').innerText = `${time} \u2192 ${arr}`;\r\n            \r\n            \/\/ Render Tarifas\r\n            const faresContainer = document.getElementById('modal-fares-list');\r\n            if (route.fares) {\r\n                faresContainer.innerHTML = route.fares.map((fare, idx) => `\r\n                    <div class=\"flex justify-between items-center p-3 ${idx !== route.fares.length - 1 ? 'border-b border-gray-100' : ''}\">\r\n                        <span class=\"text-sm text-gray-700 font-medium\">${fare.dest}<\/span>\r\n                        <span class=\"text-base font-bold ${route.textAccent}\">${fare.price}<\/span>\r\n                    <\/div>\r\n                `).join('');\r\n            }\r\n\r\n            \/\/ Render Timeline\r\n            const stopsContainer = document.getElementById('modal-stops');\r\n            let displayStations = dir === 'in' ? [...route.stations].reverse() : route.stations;\r\n            let colorHex = '#2563EB'; \r\n            if(route.colorClass === 'amber') colorHex = '#F59E0B';\r\n            if(route.colorClass === 'emerald') colorHex = '#059669';\r\n\r\n            stopsContainer.innerHTML = displayStations.map((station, i) => {\r\n                const isFirst = i === 0;\r\n                const isLast = i === displayStations.length - 1;\r\n                return `\r\n                <div class=\"tt-timeline-item\">\r\n                    <div class=\"tt-timeline-dot\" style=\"${isFirst || isLast ? `background-color: ${colorHex}; border-color: ${colorHex};` : 'background-color: white; border-color: #cbd5e1;'}\"><\/div>\r\n                    <p class=\"text-sm ${isFirst || isLast ? 'font-bold text-slate-900' : 'text-slate-500'} m-0\">${station}<\/p>\r\n                <\/div>\r\n                `;\r\n            }).join('');\r\n\r\n            modal.classList.remove('hidden');\r\n        }\r\n\r\n        function closeModal() {\r\n            document.getElementById('modal-overlay').classList.add('hidden');\r\n        }\r\n\r\n        document.getElementById('modal-overlay').addEventListener('click', function(e) {\r\n            if (e.target === this) closeModal();\r\n        });\r\n\r\n        init();\r\n    <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>IDA San Jos\u00e9 \u2192 Destino VUELTA Destino \u2192 San Jos\u00e9 Estado del Servicio Operando con horario regular Ayuda Haz clic en un horario para ver el precio. IDA 00:00 Lunes a Viernes Tarifas Recorrido Estimado Cerrar<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6988","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/peopleofcostarica.com\/es\/wp-json\/wp\/v2\/pages\/6988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/peopleofcostarica.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/peopleofcostarica.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/peopleofcostarica.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peopleofcostarica.com\/es\/wp-json\/wp\/v2\/comments?post=6988"}],"version-history":[{"count":7,"href":"https:\/\/peopleofcostarica.com\/es\/wp-json\/wp\/v2\/pages\/6988\/revisions"}],"predecessor-version":[{"id":6996,"href":"https:\/\/peopleofcostarica.com\/es\/wp-json\/wp\/v2\/pages\/6988\/revisions\/6996"}],"wp:attachment":[{"href":"https:\/\/peopleofcostarica.com\/es\/wp-json\/wp\/v2\/media?parent=6988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}