/* =====================================================================
   Rutik — landing page
   Hero: "la ruta viva" — isometric Bogotá diorama with an animated
   school bus that stops at each paradero and picks up students.
   ===================================================================== */

:root {
    --rtk-dur: 15s;
    --rtk-brand: #1565C0;
    --rtk-brand-2: #1E88E5;
    --rtk-ink: #0B1B2B;
    --rtk-muted: #4B5563;
    --rtk-line: #E2E8F0;
}

/* ── Hero shell ─────────────────────────────────────────────────────── */
.rtk-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 60px) clamp(20px, 4vw, 56px) clamp(34px, 5vw, 74px);
    background:
        radial-gradient(115% 85% at 86% -10%, #FFF3DC 0%, rgba(255, 243, 220, 0) 52%),
        radial-gradient(100% 80% at 8% 0%, #E7F0FB 0%, rgba(231, 240, 251, 0) 55%),
        linear-gradient(180deg, #EFF5FC 0%, #F7FAFD 58%, #F5F7FA 100%);
}

.rtk-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: clamp(26px, 3.6vw, 56px);
    align-items: center;
}
.rtk-hero-inner > * { min-width: 0; }

/* ── Hero copy ──────────────────────────────────────────────────────── */
.rtk-copy h1 {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(2.15rem, 4.7vw, 3.55rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
    text-wrap: balance;
    color: var(--rtk-ink);
    margin: 0 0 18px;
}
.rtk-copy h1 .hl { color: var(--rtk-brand); }

.rtk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #0D47A1;
    background: rgba(21, 101, 192, 0.09);
    border: 1px solid rgba(21, 101, 192, 0.14);
    padding: 7px 13px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.rtk-eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--rtk-brand-2);
    box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.18);
}

.rtk-copy .rtk-lead {
    font-size: clamp(1rem, 1.2vw, 1.14rem);
    line-height: 1.62;
    color: var(--rtk-muted);
    max-width: 46ch;
    margin: 0 0 26px;
}

.rtk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rtk-note {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 14px 0 0;
    font-size: 0.82rem; font-weight: 500; color: #6B7280;
}

/* trust strip */
.rtk-trust {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    margin-top: 26px; padding-top: 22px;
    border-top: 1px solid rgba(21, 101, 192, 0.14);
    list-style: none; padding-left: 0;
}
.rtk-trust li {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.85rem; font-weight: 500; color: #33475B;
}
.rtk-trust .ico-line { width: 1.05rem; height: 1.05rem; color: #16A34A; stroke-width: 2; flex: none; }

/* ── Scene canvas ───────────────────────────────────────────────────── */
.rtk-canvas {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    background: #8FB8DE;
    box-shadow:
        0 34px 70px -34px rgba(11, 27, 43, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}
.rtk-scene { display: block; width: 100%; max-width: 100%; height: auto; }

/* ── HUD over the scene ─────────────────────────────────────────────── */
.rtk-hud {
    position: absolute;
    top: clamp(12px, 2.4%, 22px);
    left: clamp(12px, 2.4%, 22px);
    display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 10px 14px 10px 12px;
    box-shadow: 0 14px 30px -14px rgba(11, 27, 43, 0.5);
}
.rtk-hud .rtk-ico {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    background: var(--rtk-brand); display: grid; place-items: center;
}
.rtk-hud .ico svg { width: 20px; height: 20px; fill: #fff; }
.rtk-hud .lbl {
    display: block;
    font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase;
    color: #5B6B76; font-weight: 700; line-height: 1.15;
}
.rtk-hud .hud-body { display: flex; flex-direction: column; gap: 3px; }
.rtk-hud .rtk-row { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.rtk-hud .num { font-size: 1.5rem; font-weight: 800; color: #0D47A1; font-variant-numeric: tabular-nums; line-height: 1; }
.rtk-hud .unit { font-size: 0.78rem; color: #5B6B76; font-weight: 600; }
.rtk-odo-window { display: block; font-size: 1.5rem; height: 1.5rem; overflow: hidden; width: 0.85em; text-align: center; }
.rtk-odo-strip { display: block; }
.rtk-odo-strip span { display: block; height: 1.5rem; line-height: 1.5rem; font-size: 1.5rem; font-weight: 800; color: #0D47A1; font-variant-numeric: tabular-nums; }

.rtk-live {
    position: absolute;
    top: clamp(14px, 2.6%, 24px);
    right: clamp(14px, 2.6%, 24px);
    display: flex; align-items: center; gap: 7px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    border-radius: 999px; padding: 7px 12px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    color: #166534; box-shadow: 0 10px 24px -14px rgba(11, 27, 43, 0.5);
}
.rtk-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }

/* ── Motion ─────────────────────────────────────────────────────────── */
.rtk-scene { animation: rtk-enter 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes rtk-enter { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

.rtk-hud { animation: rtk-enter 0.9s 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.rtk-live { animation: rtk-enter 0.9s 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.rtk-live .dot { animation: rtk-ping 1.6s ease-out infinite; }
@keyframes rtk-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } }

.rtk-clouds { animation: rtk-drift 90s linear infinite; }
@keyframes rtk-drift { from { translate: -40px 0; } to { translate: 40px 0; } }
.rtk-birds { animation: rtk-fly 36s linear infinite; }
@keyframes rtk-fly { from { translate: 60px 8px; } to { translate: -40px -12px; } }

.rtk-bus { animation: rtk-bus var(--rtk-dur) ease-in-out infinite, rtk-busop var(--rtk-dur) linear infinite; }
@keyframes rtk-bus {
    0% { translate: -544px 272px; }
    5% { translate: -530.4px 265.2px; }
    12% { translate: -476px 238px; }
    18% { translate: -476px 238px; }
    28% { translate: -323px 161.5px; }
    34% { translate: -323px 161.5px; }
    44% { translate: -170px 85px; }
    50% { translate: -170px 85px; }
    60% { translate: -17px 8.5px; }
    66% { translate: -17px 8.5px; }
    76% { translate: 51px -25.5px; }
    82% { translate: 51px -25.5px; }
    88% { translate: 119px -59.5px; }
    100% { translate: -544px 272px; }
}
@keyframes rtk-busop {
    0% { opacity: 0; } 5% { opacity: 1; } 86% { opacity: 1; }
    88% { opacity: 0; } 100% { opacity: 0; }
}

.rtk-bus-bob { animation: rtk-bob 0.85s ease-in-out infinite; }
@keyframes rtk-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 1.7px; } }

/* nodes, pulses and boarding students */
.rtk-node, .rtk-ring { transform-box: fill-box; transform-origin: center; }
.rtk-kid { transform-box: fill-box; transform-origin: 50% 100%; }
.rtk-ring { pointer-events: none; }

.rtk-node[data-stop="0"] { animation: rtk-node0 var(--rtk-dur) ease-in-out infinite; }
.rtk-node[data-stop="1"] { animation: rtk-node1 var(--rtk-dur) ease-in-out infinite; }
.rtk-node[data-stop="2"] { animation: rtk-node2 var(--rtk-dur) ease-in-out infinite; }
.rtk-node[data-stop="3"] { animation: rtk-node3 var(--rtk-dur) ease-in-out infinite; }
.rtk-node[data-stop="4"] { animation: rtk-node4 var(--rtk-dur) ease-in-out infinite; }

.rtk-ring[data-stop="0"] { animation: rtk-ring0 var(--rtk-dur) ease-out infinite; }
.rtk-ring[data-stop="1"] { animation: rtk-ring1 var(--rtk-dur) ease-out infinite; }
.rtk-ring[data-stop="2"] { animation: rtk-ring2 var(--rtk-dur) ease-out infinite; }
.rtk-ring[data-stop="3"] { animation: rtk-ring3 var(--rtk-dur) ease-out infinite; }
.rtk-ring[data-stop="4"] { animation: rtk-ring4 var(--rtk-dur) ease-out infinite; }

.rtk-kid[data-stop="0"] { animation: rtk-kid0 var(--rtk-dur) ease-in-out infinite; }
.rtk-kid[data-stop="1"] { animation: rtk-kid1 var(--rtk-dur) ease-in-out infinite; }
.rtk-kid[data-stop="2"] { animation: rtk-kid2 var(--rtk-dur) ease-in-out infinite; }
.rtk-kid[data-stop="3"] { animation: rtk-kid3 var(--rtk-dur) ease-in-out infinite; }
.rtk-kid[data-stop="4"] { animation: rtk-kid4 var(--rtk-dur) ease-in-out infinite; }

.rtk-odo-strip { animation: rtk-odo var(--rtk-dur) ease-in-out infinite; }
@keyframes rtk-odo {
    0% { translate: 0 0; }
    12% { translate: 0 0; }
    14% { translate: 0 -16.667%; }
    28% { translate: 0 -16.667%; }
    30% { translate: 0 -33.333%; }
    44% { translate: 0 -33.333%; }
    46% { translate: 0 -50%; }
    60% { translate: 0 -50%; }
    62% { translate: 0 -66.667%; }
    76% { translate: 0 -66.667%; }
    78% { translate: 0 -83.333%; }
    94% { translate: 0 -83.333%; }
    96% { opacity: 0; translate: 0 -83.333%; }
    100% { opacity: 0; translate: 0 0; }
}

@keyframes rtk-kid0 { 0% { opacity: 1; translate: 0 0; scale: 1; } 11% { opacity: 1; translate: 0 0; scale: 1; } 14% { opacity: 1; translate: 62px -31px; scale: .86; } 17% { opacity: 0; translate: 62px -31px; scale: .7; } 99% { opacity: 0; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rtk-kid1 { 0% { opacity: 1; translate: 0 0; scale: 1; } 27% { opacity: 1; translate: 0 0; scale: 1; } 30% { opacity: 1; translate: 62px -31px; scale: .86; } 33% { opacity: 0; translate: 62px -31px; scale: .7; } 99% { opacity: 0; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rtk-kid2 { 0% { opacity: 1; translate: 0 0; scale: 1; } 43% { opacity: 1; translate: 0 0; scale: 1; } 46% { opacity: 1; translate: 62px -31px; scale: .86; } 49% { opacity: 0; translate: 62px -31px; scale: .7; } 99% { opacity: 0; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rtk-kid3 { 0% { opacity: 1; translate: 0 0; scale: 1; } 59% { opacity: 1; translate: 0 0; scale: 1; } 62% { opacity: 1; translate: 62px -31px; scale: .86; } 65% { opacity: 0; translate: 62px -31px; scale: .7; } 99% { opacity: 0; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rtk-kid4 { 0% { opacity: 1; translate: 0 0; scale: 1; } 75% { opacity: 1; translate: 0 0; scale: 1; } 78% { opacity: 1; translate: 62px -31px; scale: .86; } 81% { opacity: 0; translate: 62px -31px; scale: .7; } 99% { opacity: 0; } 100% { opacity: 1; translate: 0 0; scale: 1; } }

@keyframes rtk-node0 { 0%, 11% { scale: 1; } 12% { scale: 1.75; } 16% { scale: 1; } 100% { scale: 1; } }
@keyframes rtk-node1 { 0%, 27% { scale: 1; } 28% { scale: 1.75; } 32% { scale: 1; } 100% { scale: 1; } }
@keyframes rtk-node2 { 0%, 43% { scale: 1; } 44% { scale: 1.75; } 48% { scale: 1; } 100% { scale: 1; } }
@keyframes rtk-node3 { 0%, 59% { scale: 1; } 60% { scale: 1.75; } 64% { scale: 1; } 100% { scale: 1; } }
@keyframes rtk-node4 { 0%, 75% { scale: 1; } 76% { scale: 1.75; } 80% { scale: 1; } 100% { scale: 1; } }

@keyframes rtk-ring0 { 0%, 11% { opacity: 0; scale: .5; } 12% { opacity: .85; scale: 1; } 18% { opacity: 0; scale: 2.8; } 100% { opacity: 0; } }
@keyframes rtk-ring1 { 0%, 27% { opacity: 0; scale: .5; } 28% { opacity: .85; scale: 1; } 34% { opacity: 0; scale: 2.8; } 100% { opacity: 0; } }
@keyframes rtk-ring2 { 0%, 43% { opacity: 0; scale: .5; } 44% { opacity: .85; scale: 1; } 50% { opacity: 0; scale: 2.8; } 100% { opacity: 0; } }
@keyframes rtk-ring3 { 0%, 59% { opacity: 0; scale: .5; } 60% { opacity: .85; scale: 1; } 66% { opacity: 0; scale: 2.8; } 100% { opacity: 0; } }
@keyframes rtk-ring4 { 0%, 75% { opacity: 0; scale: .5; } 76% { opacity: .85; scale: 1; } 82% { opacity: 0; scale: 2.8; } 100% { opacity: 0; } }

/* scroll-driven depth (progressive enhancement — no fallback, decorative) */
@supports ((animation-timeline: view()) and (animation-range: entry 25%)) {
    .rtk-far {
        animation: rtk-parallax linear both;
        animation-timeline: view();
        animation-range: entry 20% cover 60%;
    }
    @keyframes rtk-parallax { from { translate: 0 26px; } to { translate: 0 -18px; } }
}

/* ── Features ───────────────────────────────────────────────────────── */
.rtk-features { max-width: 1080px; margin: 0 auto; padding: clamp(40px, 6vw, 84px) clamp(20px, 4vw, 40px); }
.rtk-features-head { text-align: center; max-width: 620px; margin: 0 auto clamp(28px, 4vw, 48px); }
.rtk-features-head h2 {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-weight: 700; letter-spacing: -0.015em;
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    text-wrap: balance;
    color: var(--rtk-ink); margin: 0 0 12px;
}
.rtk-features-head p { color: var(--rtk-muted); font-size: 1.02rem; line-height: 1.6; margin: 0; }

.rtk-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 20px;
}
.rtk-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--rtk-line);
    border-radius: 16px;
    padding: 28px 24px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rtk-card:hover {
    transform: translateY(-4px);
    border-color: rgba(21, 101, 192, 0.3);
    box-shadow: 0 18px 38px -20px rgba(11, 27, 43, 0.35);
}
.rtk-card .ic {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; margin-bottom: 16px;
    color: #fff;
}
.rtk-card .ic .ico-line { width: 25px; height: 25px; stroke-width: 1.9; }
.rtk-card h3 { font-size: 1.04rem; font-weight: 700; color: var(--rtk-ink); margin: 0 0 8px; }
.rtk-card p { font-size: 0.9rem; line-height: 1.55; color: var(--rtk-muted); margin: 0; }

/* roadmap strip */
.rtk-soon {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    margin: 0;
    padding: 22px 26px;
    background: linear-gradient(180deg, #ffffff 0%, #FBFDFF 100%);
    border: 1.5px dashed rgba(21, 101, 192, 0.35);
    border-radius: 16px;
}
.rtk-soon .ic {
    width: 52px; height: 52px; border-radius: 14px; flex: none;
    display: grid; place-items: center;
    background: rgba(21, 101, 192, 0.1);
    color: var(--rtk-brand);
}
.rtk-soon .ic .ico-line { width: 26px; height: 26px; stroke-width: 1.7; }
.rtk-soon .txt { flex: 1 1 260px; min-width: 0; }
.rtk-soon h3 { font-size: 1.04rem; font-weight: 700; color: var(--rtk-ink); margin: 0 0 4px; }
.rtk-soon p { font-size: 0.9rem; line-height: 1.55; color: var(--rtk-muted); margin: 0; }
.rtk-soon .badge {
    flex: none;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #8A5A00; background: #FFF3D6; border: 1px solid #F2D28A;
    padding: 6px 13px; border-radius: 999px;
}

/* Roles */
.rtk-roles {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px) clamp(40px, 6vw, 84px);
}
.rtk-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 20px;
}
.rtk-role {
    background: #fff;
    border: 1px solid var(--rtk-line);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rtk-role:hover {
    transform: translateY(-4px);
    border-color: rgba(21, 101, 192, 0.3);
    box-shadow: 0 18px 38px -20px rgba(11, 27, 43, 0.35);
}
.rtk-role-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rtk-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--cbg, #E8F0FB);
    color: var(--c, #1565C0);
}
.rtk-avatar .ico-line { width: 23px; height: 23px; stroke-width: 1.7; }
.rtk-role h3 { font-size: 1.02rem; font-weight: 700; color: var(--rtk-ink); margin: 0; }
.rtk-scope {
    display: inline-block;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #33475B; background: #F1F5F9; border: 1px solid var(--rtk-line);
    padding: 4px 10px; border-radius: 999px; margin-bottom: 11px;
}
.rtk-role p { font-size: 0.9rem; line-height: 1.55; color: var(--rtk-muted); margin: 0; }
.rtk-roles-note {
    display: flex; align-items: center; gap: 8px;
    margin: 20px 0 0;
    font-size: 0.85rem; color: #4B5563;
}
.rtk-roles-note .ico-line { width: 1.15rem; height: 1.15rem; color: var(--rtk-brand); flex: none; }

/* Roadmap strip (page closer) */
.rtk-roadmap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px) clamp(40px, 6vw, 84px);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .rtk-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .rtk-copy { order: 1; }
    .rtk-canvas-wrap { order: 2; }
    .rtk-copy .rtk-lead { max-width: none; }
}
@media (max-width: 560px) {
    .rtk-hud { padding: 7px 10px 7px 8px; gap: 9px; border-radius: 13px; }
    .rtk-hud .rtk-ico { width: 26px; height: 26px; border-radius: 8px; }
    .rtk-hud .ico svg { width: 16px; height: 16px; }
    .rtk-hud .lbl { font-size: 0.55rem; letter-spacing: 0.08em; }
    .rtk-hud .num, .rtk-odo-strip span { font-size: 1.15rem; }
    .rtk-odo-window { height: 1.15rem; font-size: 1.15rem; }
    .rtk-odo-strip span { height: 1.15rem; line-height: 1.15rem; }
    .rtk-hud .unit { font-size: 0.66rem; }
    .rtk-live { padding: 5px 9px; font-size: 0.62rem; }
}

/* ── Reduced motion: a still, legible frame ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .rtk-scene, .rtk-hud, .rtk-live, .rtk-clouds, .rtk-birds,
    .rtk-bus, .rtk-bus-bob, .rtk-kid, .rtk-node, .rtk-ring,
    .rtk-odo-strip, .rtk-live .dot, .rtk-far { animation: none !important; }
    .rtk-bus { translate: -170px 85px; opacity: 1; }
    .rtk-ring { opacity: 0; }
    .rtk-odo-strip { translate: 0 -83.333%; }
    .rtk-far { translate: 0 0; }
    .rtk-card { transition: none !important; }
}