*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font:400 16px/1.6 Inter,system-ui,sans-serif}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.in{max-width:960px;margin:0 auto;padding:0 var(--space-3)}
header.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid color-mix(in srgb,var(--muted) 30%,transparent)}
header.top .in{display:flex;align-items:center;gap:var(--space-3);height:56px}
.marca{display:flex;align-items:center;gap:10px;font:900 15px Lato,sans-serif;letter-spacing:.08em;color:var(--ink);text-decoration:none}
.marca img{height:22px}
nav{display:flex;gap:var(--space-2);margin-left:auto;font-size:14px}
nav a{color:var(--muted);text-decoration:none;padding:6px 4px}
nav a:hover{color:var(--ink)}
.tema{font:600 12px Inter,sans-serif;background:transparent;color:var(--ink);border:1px solid var(--muted);border-radius:var(--radius-mid);padding:6px 10px;cursor:pointer}
.hero{padding:var(--space-8) 0 var(--space-4)}
.rot{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--accent)}
h1{font:900 clamp(32px,6vw,52px)/1.05 Lato,sans-serif;margin:var(--space-2) 0}
.hero p{color:var(--muted);max-width:60ch;margin:0}
.meta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3);font-size:13px;color:var(--muted)}
.cifras{display:flex;gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap}
.cifras b{display:block;font:900 28px/1 Lato,sans-serif}
.cifras span{font-size:13px;color:var(--muted)}
section{padding:var(--space-4) 0}
h2{font:900 24px/1.1 Lato,sans-serif;margin:0 0 var(--space-2)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--space-2)}
.chip{font:500 13px Inter,sans-serif;padding:7px 14px;border:1px solid var(--muted);border-radius:var(--radius-mid);background:transparent;color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.proy{background:var(--surface-alt);border:1px solid color-mix(in srgb,var(--muted) 30%,transparent);border-radius:var(--radius-mid);margin-bottom:8px}
.proy summary{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none}
.proy summary::-webkit-details-marker{display:none}
.proy summary::after{content:"";margin-left:8px;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s;flex:none}
.proy[open] summary::after{transform:rotate(-135deg)}
.proy summary:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.nom{font-weight:600;flex:1;min-width:0}
.est{font-size:12px;color:var(--muted);margin-left:auto}
.est::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--acero)}
.est.ok::before{background:var(--brand)}.est.act::before{background:var(--ink)}
.cnt{font-size:12px;color:var(--muted);margin-left:auto}
.cuerpo{padding:0 18px 16px}
.cuerpo p{margin:0 0 10px;color:var(--muted);font-size:15px}
.cuerpo ul,ul.lista{margin:0 0 10px;padding-left:18px;font-size:15px}
.cuerpo li,ul.lista li{margin:4px 0}
.per{font-size:12px!important;letter-spacing:.04em}
.ver{display:inline-block;font:600 14px Inter,sans-serif;text-decoration:none;border:1px solid var(--ink);border-radius:var(--radius-mid);padding:8px 14px;color:var(--ink)}
.ver:hover{background:var(--ink);color:var(--surface)}
dl{margin:0;display:grid;grid-template-columns:minmax(0,230px) 1fr;gap:10px 20px;font-size:14px}
dt{font-weight:600;font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--accent);overflow-wrap:anywhere}
dd{margin:0;color:var(--muted)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.nav-pie{display:flex;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-3) 0}
footer{padding:var(--space-6) 0;color:var(--muted);font-size:13px;border-top:1px solid color-mix(in srgb,var(--muted) 30%,transparent)}
[hidden]{display:none!important}
@media (max-width:640px){.in{padding:0 var(--space-2)}nav{display:none}dl{grid-template-columns:1fr;gap:2px}dd{margin-bottom:10px}.hero{padding-top:var(--space-6)}.dos{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Ruleta de estilos Standard Nexo: cristal, suave, técnico y sólido (data-estilo en <body>) */
.nota{color:var(--muted);font-size:14px;margin:0 0 var(--space-2)}
#estilo{margin-left:auto}
#estilo+.tema{margin-left:0}
nav+#estilo{margin-left:var(--space-2)}

/* Cristal: solo barra y tarjetas flotantes, con un halo de color detrás */
body[data-estilo="glass"]{background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--brand) 28%,transparent) 0,transparent 38%),radial-gradient(circle at 85% 70%,color-mix(in srgb,var(--acero) 30%,transparent) 0,transparent 42%),var(--surface);background-attachment:fixed}
body[data-estilo="glass"] header.top{background:color-mix(in srgb,var(--surface-alt) 55%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
body[data-estilo="glass"] .proy{background:color-mix(in srgb,var(--surface-alt) 62%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-color:color-mix(in srgb,var(--ink) 22%,transparent);box-shadow:0 8px 28px rgba(9,10,11,.14)}
body[data-estilo="glass"] .ver{background:color-mix(in srgb,var(--surface-alt) 62%,transparent);backdrop-filter:blur(12px)}

/* Suave: radios amplios, sin bordes duros, botones redondeados */
body[data-estilo="soft"] header.top{border-bottom-color:transparent;box-shadow:0 4px 20px color-mix(in srgb,var(--ink) 8%,transparent)}
body[data-estilo="soft"] .proy{border:0;border-radius:14px;box-shadow:0 6px 22px color-mix(in srgb,var(--ink) 9%,transparent)}
body[data-estilo="soft"] .proy summary{border-radius:14px}
body[data-estilo="soft"] .ver,body[data-estilo="soft"] .chip,body[data-estilo="soft"] .tema{border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,var(--surface-alt));color:var(--ink);padding-left:18px;padding-right:18px;box-shadow:0 2px 8px color-mix(in srgb,var(--ink) 10%,transparent)}
body[data-estilo="soft"] .ver:hover,body[data-estilo="soft"] .chip[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
body[data-estilo="soft"] h1,body[data-estilo="soft"] h2{letter-spacing:-.01em}

/* Técnico: ángulos rectos, rejilla fina y etiquetas en mayúsculas */
body[data-estilo="tech"]{background-image:linear-gradient(color-mix(in srgb,var(--muted) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--muted) 12%,transparent) 1px,transparent 1px);background-size:32px 32px;background-attachment:fixed}
body[data-estilo="tech"] .proy,body[data-estilo="tech"] .ver,body[data-estilo="tech"] .chip,body[data-estilo="tech"] .tema{border-radius:0}
body[data-estilo="tech"] .proy{border-color:var(--ink)}
body[data-estilo="tech"] .rot,body[data-estilo="tech"] .est,body[data-estilo="tech"] .per,body[data-estilo="tech"] .meta{font-family:ui-monospace,Consolas,monospace;text-transform:uppercase;letter-spacing:.14em}
body[data-estilo="tech"] h2{border-bottom:1px solid var(--ink);padding-bottom:8px}
body[data-estilo="tech"] header.top{border-bottom-color:var(--ink)}