/* CFDI Pronto — shared styles for content/SEO pages.
   Mirrors the homepage design tokens (index.html keeps its own inline copy;
   these article pages link this file to stay consistent + lean). */
:root { --brand:#4F46E5; --brand-dark:#3730A3; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f8fafc; --ok:#16a34a; --warn:#b45309; --warnbg:#fffbeb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); line-height:1.65; background:#fff; }
a { color:var(--brand); }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
.btn { display:inline-block; background:var(--brand); color:#fff; text-decoration:none; font-weight:700; padding:14px 26px; border-radius:12px; transition:background .15s; }
.btn:hover { background:var(--brand-dark); }
.btn-lg { font-size:18px; padding:16px 32px; }

header { border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); z-index:10; }
header .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.logo span { display:inline-flex; width:32px; height:32px; border-radius:9px; background:var(--brand); color:#fff; align-items:center; justify-content:center; font-weight:800; }
.nav { display:flex; align-items:center; gap:20px; }
.nav a.link { color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; }
.nav a.link:hover { color:var(--brand); }
@media (max-width:640px){ .nav a.link { display:none; } }

/* Article layout */
.article { padding:34px 20px 60px; max-width:760px; }
.breadcrumb { color:var(--muted); font-size:14px; margin:0 0 18px; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--brand); }
.article h1 { font-size:clamp(26px,4.4vw,38px); line-height:1.18; letter-spacing:-.02em; margin:0 0 12px; }
.article .lead { font-size:19px; color:#334155; font-weight:600; margin:0 0 26px; }
.article h2 { font-size:clamp(21px,3vw,27px); letter-spacing:-.01em; margin:38px 0 12px; }
.article h3 { font-size:18px; margin:26px 0 8px; }
.article p, .article li { font-size:17px; color:#1e293b; }
.article ul, .article ol { padding-left:22px; }
.article li { margin:6px 0; }
.article code { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:15px; }

.callout { background:var(--bg); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:12px; padding:16px 18px; margin:22px 0; }
.callout.warn { background:var(--warnbg); border-left-color:var(--warn); }
.callout p { margin:0; }
.callout strong { color:var(--ink); }

table { width:100%; border-collapse:collapse; margin:22px 0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
th,td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:15px; }
th { background:var(--bg); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
td.yes { color:var(--ok); font-weight:700; }

/* Install CTA card */
.cta-box { background:linear-gradient(180deg,#eef2ff 0%,#fff 100%); border:1px solid #c7d2fe; border-radius:16px; padding:26px; text-align:center; margin:34px 0; }
.cta-box h2 { margin:0 0 8px; }
.cta-box p { margin:0 0 16px; color:#334155; }

/* Related links */
.related { margin:34px 0 0; }
.related h2 { font-size:18px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 12px; }
.related-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.card { display:block; border:1px solid var(--line); border-radius:12px; padding:16px 18px; text-decoration:none; color:var(--ink); background:#fff; transition:border-color .15s, box-shadow .15s; }
.card:hover { border-color:var(--brand); box-shadow:0 6px 18px rgba(79,70,229,.08); }
.card b { display:block; font-size:16px; margin-bottom:3px; }
.card span { color:var(--muted); font-size:14px; }
@media (max-width:640px){ .related-grid { grid-template-columns:1fr; } }

/* Hub index list */
.hub { padding:40px 20px 60px; max-width:900px; }
.hub h1 { font-size:clamp(28px,4.4vw,40px); letter-spacing:-.02em; margin:0 0 10px; }
.hub .lead { font-size:19px; color:var(--muted); margin:0 0 30px; }
.hub h2 { font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:30px 0 12px; }

footer { border-top:1px solid var(--line); padding:32px 0; color:var(--muted); font-size:14px; text-align:center; }
footer a { color:var(--muted); margin:0 10px; }