:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
    --radius: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: #f8fafc;
    color: var(--text);
    line-height: 1.7;
    min-height: 100vh;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,.1), transparent);
    pointer-events: none;
    z-index: -1;
}
.wrap { max-width: 800px; margin: 0 auto; padding: 1.5rem 0 3rem; }

.guia-rails .wrap {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: 0 4px 24px -4px rgba(15,23,42,.08);
    margin-bottom: 1.25rem;
}
.back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    font-size: .9rem;
}
.back:hover { text-decoration: underline; }
h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin-bottom: .75rem;
}
.lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 1.5rem; }
h2 { font-size: 1.15rem; font-weight: 700; margin: 1.5rem 0 .6rem; }
h3 { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .4rem; color: var(--primary-dark); }
p, li { color: #334155; font-size: .95rem; margin-bottom: .75rem; }
ul, ol { padding-left: 1.25rem; margin-bottom: .75rem; }
a { color: var(--primary); }
.cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem 0;
    padding: .85rem 1.5rem;
    background: var(--gradient);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.cta:hover { transform: translateY(-1px); }
.related { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #f1f5f9; }
.related h2 { font-size: 1rem; margin-top: 0; }
.related ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
.related a { font-weight: 600; text-decoration: none; font-size: .9rem; }
.related a:hover { text-decoration: underline; }
footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    font-size: .85rem;
}
footer a { color: var(--primary); font-weight: 600; text-decoration: none; }
footer a:hover { text-decoration: underline; }
.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}
.guide-link {
    display: block;
    padding: 1rem 1.1rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .2s, transform .15s;
}
.guide-link:hover { border-color: #c7d2fe; transform: translateY(-2px); }
.guide-link strong { display: block; font-size: .92rem; margin-bottom: .2rem; }
.guide-link span { font-size: .82rem; color: var(--muted); }