:root{
  --red:#C1264A; --wine:#8E1838; --ink:#1D2027; --slate:#5B6B80;
  --fog:#F2F4F7; --paper:#FFFFFF; --line:#DCE1E8; --ok:#2F7D5B;
  --text:var(--ink); --muted:#525C6B; --bg:var(--paper); --alt:var(--fog);
  --node:#5B6B80; --zone:#8E1838;
  --f:"Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --text:#E9ECF1; --muted:#A9B2C0; --bg:#15171C; --alt:#1C1F26; --line:#2E333D;
    --red:#E04A6C; --wine:#E04A6C; --node:#8C9AAE; --ok:#4FB487; --zone:#E04A6C;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; font-family:var(--f); font-size:1.0625rem; line-height:1.55; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
h1,h2,h3{font-stretch:78%; line-height:1.08; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2.3rem, 4.6vw, 3.9rem); font-weight:800}
h2{font-size:clamp(1.7rem, 3vw, 2.45rem); font-weight:780}
h3{font-size:1.2rem; font-weight:720; font-stretch:88%}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:4px}
.wrap{width:min(1180px, 100% - 2.5rem); margin-inline:auto}

/* Top bar */
.topbar{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; gap:2rem; height:64px}
.brand img{height:30px; width:auto}
.topnav{display:flex; gap:1.6rem; margin-left:auto; font-size:.95rem}
.topnav a{text-decoration:none; color:var(--muted)}
.topnav a:hover{color:var(--text)}
@media (max-width:860px){.topnav{display:none} .topbar-in .btn-small{margin-left:auto}}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.7rem 1.4rem; background:var(--red); color:#fff; border-radius:999px; font-weight:650; text-decoration:none; font-size:1rem; transition:background .15s}
.btn:hover{background:var(--wine)}
@media (prefers-color-scheme:dark){.btn:hover{background:#C1264A}}
.btn-small{min-height:40px; padding:.45rem 1.05rem; font-size:.92rem}
.btn-light{background:#fff; color:#8E1838}
.btn-light:hover{background:#F6E3E8}
.link{font-weight:600; text-decoration-thickness:1.5px; text-underline-offset:4px}

/* Hero */
.hero{padding:clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem)}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.kicker{color:var(--red); font-weight:650; margin-bottom:1.1rem}
.lede{font-size:1.18rem; color:var(--muted); max-width:36em; margin:1.4rem 0 2rem}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem}
.facts{display:flex; gap:2.5rem; margin:2.6rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line); flex-wrap:wrap}
.facts div{max-width:15rem}
.facts dt{font-size:1.65rem; font-weight:800; font-stretch:78%; color:var(--red)}
.facts dd{margin:.2rem 0 0; color:var(--muted); font-size:.95rem; line-height:1.4}

/* Simulator */
.sim{margin:0; background:var(--alt); border:1px solid var(--line); border-radius:20px; padding:1rem 1rem .9rem}
.sim-head{display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.4rem}
.seg{display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px}
.seg button{font:inherit; font-size:.88rem; font-weight:600; border:0; background:none; color:var(--muted); padding:.45rem .9rem; border-radius:999px; cursor:pointer; min-height:36px}
.seg button[aria-checked="true"]{background:var(--ink); color:#fff}
@media (prefers-color-scheme:dark){.seg button[aria-checked="true"]{background:#E9ECF1; color:#15171C}}
.reset{font:inherit; font-size:.88rem; background:none; border:0; color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:.4rem}
#sim-svg{width:100%; height:auto; display:block}
.sim figcaption{font-size:.95rem; color:var(--muted); min-height:3em; padding:0 .3rem}
#sim-status strong{color:var(--text)}
.sim .edge{stroke:var(--node); stroke-opacity:.28; stroke-width:1.2}
.sim .edge.hot{stroke:var(--red); stroke-opacity:.95; stroke-width:2}
.sim .edge.blocked{stroke:var(--red); stroke-opacity:.6; stroke-dasharray:4 4; stroke-width:1.5}
.sim .edge.allowed{stroke:var(--ok); stroke-opacity:.8; stroke-width:1.6}
.sim .zone{fill:none; stroke:var(--zone); stroke-width:1.5; stroke-dasharray:6 5; rx:12}
.sim .zone.soft{stroke:var(--node); stroke-dasharray:none; stroke-opacity:.5}
.sim .zlabel{font-size:13px; font-weight:700; fill:var(--zone); font-family:var(--f)}
.sim .zlabel.soft{fill:var(--muted)}
.sim .node{cursor:pointer}
.sim .node circle.c{fill:var(--node); transition:fill .2s}
.sim .node.crit circle.c{fill:var(--ink)}
@media (prefers-color-scheme:dark){.sim .node.crit circle.c{fill:#E9ECF1}}
.sim .node circle.halo{fill:var(--red); opacity:0}
.sim .node.inf circle.c{fill:var(--red)}
.sim .node.inf circle.halo{opacity:.22}
.sim .node.src circle.halo{opacity:.35}
.sim .node:focus-visible circle.c{stroke:var(--red); stroke-width:3}
.sim .node:focus{outline:none}
.sim .x{stroke:var(--red); stroke-width:2.2; stroke-linecap:round}

/* Sections */
.section{padding:clamp(3.5rem, 7vw, 6rem) 0}
.section-alt{background:var(--alt)}
.band{padding:clamp(3rem, 6vw, 4.5rem) 0}
.band-dark{background:#1D2027; color:#E9ECF1}
.band-dark .prose{color:#C3CAD5}
.two-col{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem, 5vw, 5rem); align-items:center}
.two-col-top{align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.prose p{max-width:38em}
.sec-head{max-width:46rem; margin-bottom:2.6rem}
.sec-head p{color:var(--muted); font-size:1.1rem; margin-top:.8rem}
.muted{color:var(--muted)}
h2 + .muted{margin-top:.8rem}
.sub{margin:3.5rem 0 1rem}

/* Requirements */
.reqs{display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:3px solid var(--red)}
.req{padding:1.6rem 1.6rem 1.6rem 0; border-right:1px solid var(--line)}
.req + .req{padding-left:1.6rem}
.req:last-child{border-right:0}
.ref{font-weight:700; color:var(--red); font-size:.95rem; margin-bottom:.5rem}
.req h3{font-size:1.45rem; margin-bottom:.8rem}
.plain{color:var(--muted)}
.answer{border-left:3px solid var(--ink); padding-left:.9rem; margin:0}
@media (prefers-color-scheme:dark){.answer{border-color:#E9ECF1}}
@media (max-width:900px){
  .reqs{grid-template-columns:1fr}
  .req, .req + .req{padding:1.5rem 0; border-right:0; border-bottom:1px solid var(--line)}
}

/* Tables */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl{width:100%; border-collapse:collapse; font-size:.97rem; min-width:640px}
.tbl th,.tbl td{text-align:left; vertical-align:top; padding:.85rem 1rem .85rem 0; border-bottom:1px solid var(--line)}
.tbl thead th{font-size:.85rem; font-weight:650; color:var(--muted); border-bottom:2px solid var(--text)}
.tbl tbody th{font-weight:680; width:22%}
.mx tbody tr[hidden]{display:none}

.mx-controls{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
.tabs, .filters{display:flex; flex-wrap:wrap; gap:.4rem}
.tabs button, .filters button{font:inherit; font-size:.92rem; font-weight:600; border:1px solid var(--line); background:var(--bg); color:var(--muted); padding:.5rem .95rem; border-radius:999px; cursor:pointer; min-height:40px}
.tabs button[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.filters button[aria-pressed="true"]{border-color:var(--red); color:var(--red)}
@media (prefers-color-scheme:dark){.tabs button[aria-selected="true"]{background:#E9ECF1; color:#15171C; border-color:#E9ECF1}}
.tag{display:inline-block; font-size:.8rem; font-weight:700; padding:.15rem .6rem; border-radius:999px; white-space:nowrap}
.tag.direto{background:var(--red); color:#fff}
.tag.parcial{background:color-mix(in srgb, var(--red) 14%, transparent); color:var(--wine)}
@media (prefers-color-scheme:dark){.tag.parcial{color:#F4A3B6}}
.tag.complementar{background:transparent; color:var(--muted); border:1px solid var(--line)}
.legend{font-size:.92rem; color:var(--muted); margin-top:1.4rem; max-width:62rem; line-height:1.8}
.legend .tag{margin-right:.25rem}

.layers{display:grid; grid-template-columns:repeat(4, 1fr); gap:.6rem; margin-top:3rem}
.layer{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem}
.layer h3{font-size:1rem; margin-bottom:.35rem}
.layer p{margin:0; color:var(--muted); font-size:.95rem}
.layer.core{grid-column:1 / -1; background:var(--ink); color:#fff; border-color:var(--ink)}
.layer.core p{color:#C3CAD5}
@media (prefers-color-scheme:dark){.layer.core{background:#2A1A20; border-color:var(--red)}}
@media (max-width:760px){.layers{grid-template-columns:1fr 1fr}}

/* Steps */
.steps{list-style:none; padding:0; margin:0 0 3.5rem; display:grid; grid-template-columns:repeat(4, 1fr); counter-reset:s}
.steps li{position:relative; padding:0 1.4rem 0 0}
.steps li::before{content:""; position:absolute; left:2.6rem; right:.6rem; top:1.15rem; height:2px; background:var(--line)}
.steps li:last-child::before{display:none}
.steps .n{display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%; background:var(--red); color:#fff; font-weight:800; margin-bottom:1rem; position:relative}
.steps li:nth-child(2) .n{background:var(--wine)}
.steps li:nth-child(3) .n{background:var(--ink)}
.steps li:nth-child(4) .n{background:var(--slate)}
@media (prefers-color-scheme:dark){.steps li:nth-child(3) .n{background:#3A404C}}
.steps h3{font-size:1.35rem; margin-bottom:.4rem}
.steps p{color:var(--muted); margin:0}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr; row-gap:2rem} .steps li::before{display:none}}

.caps{display:grid; grid-template-columns:repeat(3, 1fr); gap:2.4rem 2.6rem}
.cap h3{margin-bottom:.5rem}
.cap p{color:var(--muted); margin:0}
@media (max-width:900px){.caps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.caps{grid-template-columns:1fr}}

/* Audit & stats */
.ticks{list-style:none; padding:0; margin:1.6rem 0 0}
.ticks li{padding:.9rem 0 .9rem 1.9rem; border-bottom:1px solid var(--line); position:relative; color:var(--muted)}
.ticks li strong{color:var(--text)}
.ticks li::before{content:""; position:absolute; left:.1rem; top:1.25rem; width:.75rem; height:.4rem; border-left:2.5px solid var(--red); border-bottom:2.5px solid var(--red); transform:rotate(-45deg)}
.big{font-size:1.15rem; margin-bottom:2rem; color:var(--muted)}
.big span{display:block; font-size:clamp(3.4rem, 7vw, 5.4rem); font-weight:800; font-stretch:72%; color:var(--red); line-height:1; margin-bottom:.4rem}
.bars{display:grid; gap:1rem}
.bar{display:grid; grid-template-columns:minmax(9rem, 1fr) 1.3fr 5.5rem; gap:.8rem; align-items:center; font-size:.93rem}
.bar .lbl{color:var(--muted); line-height:1.3}
.track{height:12px; background:var(--alt); border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.fill{display:block; height:100%; width:var(--v); background:var(--slate); border-radius:999px}
.fill.accent{background:var(--red)}
.val{font-weight:700}
.src{font-size:.85rem; color:var(--muted); margin-top:1.4rem}
@media (max-width:520px){.bar{grid-template-columns:1fr auto} .bar .track{grid-column:1 / -1; grid-row:2}}

/* Cases */
.cases{display:grid; grid-template-columns:repeat(3, 1fr); gap:2.6rem}
.case{border-top:3px solid var(--ink); padding-top:1.1rem}
.case:first-child{border-color:var(--red)}
@media (prefers-color-scheme:dark){.case{border-color:#3A404C}}
.case h3{margin-bottom:.5rem}
.case p{color:var(--muted); margin:0}
@media (max-width:800px){.cases{grid-template-columns:1fr; gap:1.8rem}}

/* Questions & FAQ */
.qs{list-style:none; padding:0; margin:1.8rem 0 0; counter-reset:q}
.qs li{counter-increment:q; display:grid; grid-template-columns:2rem 1fr; padding:.8rem 0; border-bottom:1px solid var(--line)}
.qs li::before{content:counter(q); font-weight:800; color:var(--red); font-stretch:78%; font-size:1.15rem}
.faq{margin-top:1.8rem; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:1.05rem 2.2rem 1.05rem 0; font-weight:650; list-style:none; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:.4rem; top:1.35rem; width:.6rem; height:.6rem; border-right:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg); top:1.6rem}
.faq details p{color:var(--muted); padding-bottom:1rem; margin:0}

/* CTA */
.cta-band{background:#8E1838; color:#fff}
.cta-band h2{margin-bottom:2.2rem}
.phases{list-style:none; padding:0; margin:0 0 3rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; counter-reset:p}
.phases li{counter-increment:p; border-top:1px solid rgba(255,255,255,.35); padding-top:1rem}
.phases li::before{content:"Fase " counter(p); display:block; font-size:.88rem; font-weight:600; color:#F4B9C7; margin-bottom:.35rem}
.phases h3{font-size:1.4rem; margin-bottom:.4rem}
.phases p{color:#F3D9DF; margin:0}
@media (max-width:760px){.phases{grid-template-columns:1fr}}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem; background:rgba(0,0,0,.18); border-radius:16px; padding:1.4rem 1.6rem}
.cta-row p{margin:0; font-size:1.1rem; max-width:34em}

/* Footer */
.foot{padding:2.6rem 0 3rem; border-top:1px solid var(--line)}
.foot-in{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.6rem; align-items:start}
.foot-in img{height:24px; width:auto; grid-row:span 2}
.foot p{margin:0}
.fine{font-size:.84rem; color:var(--muted); max-width:62rem; line-height:1.55}
@media (max-width:560px){.foot-in{grid-template-columns:1fr} .foot-in img{grid-row:auto}}