@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    background-color: #f8f5f1; /* creme quente */
}
.dark body {
    background-color: #18181b; /* zinc-900 — mais quente que slate-900 */
}
.step-card { transition: all 0.3s ease; }
.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
/* .workflow-arrow { color: #94a3b8; } */
/* UNUSED — era usada nos cards de fluxo com setas (fa-arrow-right/left/down).
   Substituída pela timeline zigue-zague. Mantida aqui para referência. */
.highlight-box { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); }
.dark .highlight-box { background: linear-gradient(135deg, #2d1b69 0%, #4c1d95 100%); }
.prose-custom p { margin-bottom: 1rem; color: #475569; }
.dark .prose-custom p { color: #cbd5e1; }
.prompt-example {
    background-color: #f1f5f9;
    border-left: 4px solid #8b5cf6;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 0.9rem;
    color: #334155;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.dark .prompt-example { background-color: #1e293b; color: #cbd5e1; }
.copy-btn {
    flex-shrink: 0;
    background: rgba(139,92,246,0.15);
    border: 1px solid rgba(139,92,246,0.3);
    color: #6d28d9;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
    cursor: pointer;
    font-style: normal;
    transition: all 0.2s;
    white-space: nowrap;
}
.copy-btn:hover { background: rgba(139,92,246,0.3); }
.dark .copy-btn { background: rgba(139,92,246,0.2); color: #ddd6fe; border-color: rgba(196,181,253,0.4); }
.copy-btn.copied { background: #16a34a; color: white; border-color: #16a34a; }

/* Hero title: keep designer-defined line breaks on desktop */
.hero-title-desktop {
    white-space: nowrap;
}

/* TOC */
.toc-link.active {
    background-color: #f5f3ff;
    color: #6d28d9;
    font-weight: 600;
}
.dark .toc-link.active { background-color: #4c1d95; color: #ddd6fe; }

/* Language switcher */
.lang-switcher {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 9999px;
    padding: 0.25rem;
    box-shadow: 0 10px 20px -14px rgba(15, 23, 42, 0.55), 0 2px 6px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
}
.lang-btn {
    min-width: 2.2rem;
    height: 2rem;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: #475569;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.lang-btn:hover {
    background: #eef2ff;
    color: #5b21b6;
}
.lang-btn.active {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #ffffff;
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 8px rgba(91, 33, 182, 0.35);
}
.dark .lang-switcher {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(100, 116, 139, 0.7);
    box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.dark .lang-btn {
    color: #cbd5e1;
}
.dark .lang-btn:hover {
    background: rgba(109, 40, 217, 0.32);
    color: #e9d5ff;
}
.dark .lang-btn.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    border-color: rgba(196, 181, 253, 0.45);
    color: #ffffff;
}

/* Back to top */
#backToTop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
#backToTop.visible { opacity: 1; pointer-events: auto; }

/* Timeline (Mapa da Jornada) */
.timeline { position: relative; }
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #ddd6fe 0%, #8b5cf6 50%, #16a34a 100%);
    border-radius: 9999px;
}
.dark .timeline::before {
    background: linear-gradient(to bottom, #6d28d9 0%, #8b5cf6 50%, #16a34a 100%);
}
.timeline-item { position: relative; }
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 1.5rem;
    transform: translate(-50%, 0);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15), 0 0 0 6px rgba(238,242,255,1);
    z-index: 2;
}
.dark .timeline-dot { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3), 0 0 0 6px rgb(30 41 59); }

/* Mobile timeline: linha à esquerda */
@media (max-width: 767px) {
    .timeline::before { left: 1.75rem; }
    /* center = -2.25rem from li = 1.75rem from ol (matches ::before line), sits fully in ol's pl-16 padding */
    .timeline-dot { left: -2.25rem; top: 0.5rem; width: 3rem; height: 3rem; font-size: 1.1rem; }
}