/* topxapk-mx.com · family O (split) · prefix mxq- */
:root{
  --mxq-ink:#090F1E;--mxq-ink2:#111A2B;--mxq-ink3:#1B2740;
  --mxq-red:#FF2400;--mxq-red-d:#C21B00;--mxq-red-s:#FFE6E0;
  --mxq-paper:#EEF1F7;--mxq-card:#FFFFFF;--mxq-line:#DDE3EE;
  --mxq-text:#1C2742;--mxq-mut:#55617D;--mxq-soft:#8FA0C0;
  --mxq-r:18px;
  --mxq-font:"Kumbh Sans","Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--mxq-paper);color:var(--mxq-text);font:400 17px/1.65 var(--mxq-font);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--mxq-red-d)}
.shell{max-width:1240px;margin:0 auto;padding:0 24px}

/* ---------- header (build.py markup) ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(9,15,30,.97);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.top-in{display:flex;align-items:center;gap:22px;min-height:70px}
.top-in>a:first-child{display:flex;align-items:center;flex:none}
.top nav{display:flex;gap:2px;flex:1 1 auto;min-width:0}
.top nav a{color:#C9D2E6;text-decoration:none;font-weight:600;font-size:15.5px;padding:10px 13px;border-radius:10px;white-space:nowrap}
.top nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.btn.btn-main{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--mxq-red);color:#fff;text-decoration:none;font-weight:800;font-size:15.5px;flex:none;box-shadow:0 6px 18px rgba(255,36,0,.35)}
.btn.btn-main:hover{background:#E31F00}

/* ---------- split layout ---------- */
.mxq-split{display:grid;grid-template-columns:minmax(300px,370px) minmax(0,1fr);gap:56px;max-width:1240px;margin:0 auto;padding:40px 24px 0;align-items:start}
.mxq-rail{position:sticky;top:94px;max-height:calc(100vh - 112px);overflow:auto;scrollbar-width:thin;background:linear-gradient(170deg,var(--mxq-ink3) 0%,var(--mxq-ink2) 38%,var(--mxq-ink) 100%);color:#fff;border-radius:26px;box-shadow:0 24px 60px rgba(9,15,30,.28)}
.mxq-rail-fig{margin:0;position:relative;background:radial-gradient(circle at 70% 60%,rgba(255,36,0,.35),transparent 60%)}
.mxq-rail-fig img{width:100%;max-height:280px;object-fit:cover;object-position:center top}
.mxq-rail-fig::after{content:"";position:absolute;inset:auto 0 0 0;height:60px;background:linear-gradient(transparent,var(--mxq-ink2))}
.mxq-rail-b{padding:22px 24px 26px}
.mxq-rail-k{margin:0 0 8px;font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#FF6B4F}
.mxq-toc{list-style:none;margin:0 0 18px;padding:0}
.mxq-toc li{font-size:15.5px;margin:0}
.mxq-toc a{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;color:#DCE3F2;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}
.mxq-toc a:hover{color:#fff}
.mxq-toc b{font-size:13px;color:var(--mxq-red);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.mxq-fact{margin:0 0 20px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.mxq-fact div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:15px}
.mxq-fact div+div{border-top:1px dashed rgba(255,255,255,.12)}
.mxq-fact dt{color:var(--mxq-soft)}
.mxq-fact dd{margin:0;font-weight:600;text-align:right}
.mxq-rail .mxq-ad{color:var(--mxq-soft);text-align:center}

/* ---------- buttons ---------- */
.mxq-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:14px;background:var(--mxq-red);color:#fff;text-decoration:none;font-weight:800;font-size:17px;box-shadow:0 10px 24px rgba(255,36,0,.28);transition:transform .15s,background .15s}
.mxq-btn:hover{background:#E31F00;transform:translateY(-1px)}
.mxq-btn-w{width:100%}
.mxq-ad{display:block;font-size:13px;color:var(--mxq-mut);margin-top:8px;letter-spacing:.02em}

/* ---------- article ---------- */
.mxq-doc{min-width:0;max-width:800px;counter-reset:mxqsec}
.mxq-crumb{margin:0 0 14px;font-size:15px;color:var(--mxq-mut)}
.mxq-crumb a{color:inherit}
.mxq-crumb i{font-style:normal;margin:0 8px;color:var(--mxq-red)}
.mxq-eye{display:inline-block;margin:0;padding:6px 14px;border-radius:999px;background:var(--mxq-red-s);color:var(--mxq-red-d);font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.mxq-doc h1{margin:16px 0 10px;font-size:clamp(32px,4.2vw,50px);line-height:1.06;font-weight:800;letter-spacing:-.025em;color:var(--mxq-ink)}
.mxq-home .mxq-doc h1{font-size:clamp(34px,4.8vw,58px)}
.mxq-date{margin:0 0 18px;font-size:15px;color:var(--mxq-mut);display:flex;align-items:center;gap:8px}
.mxq-date::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mxq-red);box-shadow:0 0 0 4px var(--mxq-red-s)}
.mxq-lead{font-size:20px;line-height:1.55;color:#24314D;margin:0 0 6px}
.mxq-go{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:24px 0 8px}
.mxq-go .mxq-ad{margin:0}
.mxq-doc section{margin-top:46px}
.mxq-doc h2{counter-increment:mxqsec;position:relative;margin:0 0 16px;padding-top:20px;border-top:2px solid var(--mxq-line);font-size:28px;line-height:1.2;font-weight:800;letter-spacing:-.015em;color:var(--mxq-ink)}
.mxq-doc h2::before{content:counter(mxqsec,decimal-leading-zero);display:block;margin-bottom:6px;font-size:14px;letter-spacing:.14em;color:var(--mxq-red)}
.mxq-doc h2::after{content:"";position:absolute;left:0;top:-2px;width:72px;height:2px;background:var(--mxq-red)}
.mxq-doc p,.mxq-doc li{font-size:17px}
.mxq-doc p{margin:0 0 14px}
.mxq-doc a{text-underline-offset:3px}

/* tables */
.mxq-scroll{overflow-x:auto;margin:20px 0;border-radius:var(--mxq-r);-webkit-overflow-scrolling:touch}
.mxq-tab{width:100%;border-collapse:separate;border-spacing:0;background:var(--mxq-card);border-radius:var(--mxq-r);overflow:hidden;box-shadow:0 0 0 1px var(--mxq-line),0 12px 30px rgba(9,15,30,.06)}
.mxq-tab th{background:var(--mxq-ink2);color:#fff;text-align:left;padding:14px 18px;font-size:15px;font-weight:700}
.mxq-tab td{padding:14px 18px;border-top:1px solid #E8ECF3;font-size:16px;vertical-align:top}
.mxq-tab td:first-child{font-weight:700;color:var(--mxq-ink)}
.mxq-tab tbody tr:nth-child(even) td{background:#F8F9FC}

/* steps */
.mxq-steps{list-style:none;margin:20px 0;padding:0;counter-reset:mxqst}
.mxq-steps li{counter-increment:mxqst;position:relative;padding:0 0 22px 66px;min-height:46px}
.mxq-steps li::before{content:counter(mxqst);position:absolute;left:0;top:0;width:46px;height:46px;border-radius:14px;background:var(--mxq-ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;box-shadow:inset 0 -3px 0 var(--mxq-red)}
.mxq-steps li::after{content:"";position:absolute;left:22px;top:52px;bottom:4px;width:2px;background:repeating-linear-gradient(var(--mxq-line) 0 6px,transparent 6px 10px)}
.mxq-steps li:last-child::after{display:none}
.mxq-steps b{display:block;color:var(--mxq-ink);font-size:18px;margin-bottom:2px}

/* checklist */
.mxq-check{list-style:none;margin:18px 0;padding:0}
.mxq-check li{position:relative;padding:0 0 12px 36px}
.mxq-check li::before{content:"";position:absolute;left:0;top:5px;width:22px;height:22px;border-radius:7px;background:var(--mxq-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.mxq-check b{color:var(--mxq-ink)}

.mxq-tip{margin:20px 0;padding:18px 22px;background:#FFF4F1;border-left:4px solid var(--mxq-red);border-radius:0 16px 16px 0}
.mxq-tip p{margin:0}

/* glossary */
.mxq-gl{margin:18px 0;display:grid;gap:10px}
.mxq-gl div{background:var(--mxq-card);border:1px solid var(--mxq-line);border-radius:16px;padding:16px 20px}
.mxq-gl dt{font-weight:800;color:var(--mxq-ink);font-size:18px}
.mxq-gl dd{margin:4px 0 0;font-size:16.5px}

/* diagnostic */
.mxq-diag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.mxq-diag>div{background:var(--mxq-card);border-radius:18px;padding:18px 20px;border:1px solid var(--mxq-line);border-top:4px solid var(--mxq-red)}
.mxq-diag p{margin:0 0 8px;font-size:16px}
.mxq-diag .mxq-s{font-weight:800;color:var(--mxq-ink);font-size:17.5px;line-height:1.35}
.mxq-diag .mxq-c::before,.mxq-diag .mxq-f::before{display:block;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.mxq-diag .mxq-c::before{content:"Causa";color:var(--mxq-mut)}
.mxq-diag .mxq-f::before{content:"Solución";color:var(--mxq-red-d)}
.mxq-diag .mxq-f{margin:0}

/* map (home) */
.mxq-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.mxq-map a{display:block;background:var(--mxq-card);border:1px solid var(--mxq-line);border-radius:20px;padding:20px 22px;color:inherit;text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s}
.mxq-map a:hover{transform:translateY(-2px);border-color:var(--mxq-red);box-shadow:0 14px 30px rgba(9,15,30,.08)}
.mxq-map b{display:block;color:var(--mxq-red);font-size:14px;letter-spacing:.12em}
.mxq-map span{display:block;font-weight:800;font-size:19px;color:var(--mxq-ink);margin:4px 0}
.mxq-map small{display:block;font-size:15px;color:var(--mxq-mut);line-height:1.5}

/* band CTA */
.mxq-band{margin:46px 0 0;padding:28px 30px;border-radius:24px;color:#fff;background:radial-gradient(circle at 100% 0%,rgba(255,36,0,.45),transparent 55%),var(--mxq-ink);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center}
.mxq-doc .mxq-band p{margin:0;color:#DCE3F2;font-size:18px}
.mxq-band strong{color:#fff}
.mxq-band-go{text-align:center}
.mxq-band .mxq-ad{color:var(--mxq-soft)}

/* faq */
.mxq-faq details{background:var(--mxq-card);border:1px solid var(--mxq-line);border-radius:16px;margin-bottom:10px;overflow:hidden}
.mxq-faq summary{list-style:none;cursor:pointer;position:relative;padding:16px 56px 16px 20px;min-height:44px;font-weight:700;color:var(--mxq-ink);font-size:17px}
.mxq-faq summary::-webkit-details-marker{display:none}
.mxq-faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--mxq-red-s);color:var(--mxq-red-d);display:grid;place-items:center;font-size:20px;font-weight:800}
.mxq-faq details[open] summary::after{content:"−";background:var(--mxq-red);color:#fff}
.mxq-faq details p{padding:0 20px 18px;margin:0}

/* end CTA */
.mxq-end{margin-top:48px;padding:30px;border-radius:24px;background:linear-gradient(130deg,var(--mxq-red) 0%,#D11E00 60%,#9E1600 100%);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center}
.mxq-doc .mxq-end p{margin:0;font-size:20px;font-weight:700;line-height:1.4;color:#fff}
.mxq-end .mxq-btn{background:#fff;color:var(--mxq-red-d);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.mxq-end .mxq-btn:hover{background:#FFF1EC}
.mxq-end .mxq-ad{color:rgba(255,255,255,.88)}

/* next */
.mxq-next{margin-top:44px}
.mxq-doc .mxq-next-t{margin:0 0 12px;font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mxq-mut)}
.mxq-next-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mxq-next-g a{display:block;padding:18px;border-radius:16px;background:var(--mxq-ink);color:#fff;text-decoration:none;min-height:44px}
.mxq-next-g a:hover{background:var(--mxq-ink3)}
.mxq-next-g span{display:block;font-weight:800;font-size:17px}
.mxq-next-g small{display:block;font-size:14.5px;color:var(--mxq-soft);margin-top:4px;line-height:1.45}

/* ---------- footer (build.py markup) ---------- */
.foot{margin-top:72px;background:var(--mxq-ink);color:#AEB9D0;padding:42px 0 30px;border-top:4px solid var(--mxq-red)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:22px;margin-bottom:22px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 20px;max-width:760px}
.foot nav a{color:#DCE3F2;text-decoration:none;font-size:15.5px;line-height:2.4}
.foot nav a:hover{color:#fff;text-decoration:underline}
.foot p{margin:6px 0;font-size:15px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .mxq-split{gap:36px;grid-template-columns:minmax(270px,320px) minmax(0,1fr)}
  .top nav a{padding:10px 9px}
}
@media (max-width:980px){
  .top-in{flex-wrap:wrap;gap:10px 16px;min-height:0;padding:10px 0}
  .top nav{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;margin:0 -6px}
  .top nav::-webkit-scrollbar{display:none}
  .btn.btn-main{margin-left:auto}
  html{scroll-padding-top:130px}
  .mxq-split{display:block;padding:20px 16px 0}
  .mxq-rail{position:static;max-height:none;overflow:visible;border-radius:20px;margin-bottom:26px}
  .mxq-rail-fig{display:none}
  .mxq-home .mxq-rail-fig{display:block}
  .mxq-home .mxq-rail-fig img{max-height:210px}
  .mxq-rail-b{padding:16px 16px 14px}
  .mxq-toc{display:flex;gap:8px;overflow-x:auto;margin:0;padding-bottom:4px;scrollbar-width:none}
  .mxq-toc::-webkit-scrollbar{display:none}
  .mxq-toc li{flex:none}
  .mxq-toc a{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:0 16px;gap:8px}
  .mxq-fact,.mxq-rail-go{display:none}
  .mxq-doc{max-width:none}
}
@media (max-width:640px){
  body{font-size:17px}
  .shell{padding:0 16px}
  .mxq-doc h2{font-size:24px}
  .mxq-lead{font-size:18.5px}
  .mxq-diag,.mxq-map,.mxq-next-g{grid-template-columns:1fr}
  .mxq-band,.mxq-end{grid-template-columns:1fr;padding:24px 20px}
  .mxq-btn{width:100%}
  .mxq-go{display:block}
  .mxq-go .mxq-ad{margin-top:8px;text-align:center}
  .mxq-tab th,.mxq-tab td{padding:12px 12px;font-size:15px}
  .mxq-steps li{padding-left:58px}
  .mxq-steps li::before{width:42px;height:42px;font-size:17px}
  .mxq-steps li::after{left:20px;top:48px}
  .top-in>a:first-child img{width:80px;height:auto}
  .btn.btn-main{padding:0 18px}
}