/* ASIMOV · CONTENIDO — base del sistema de trabajo. Marca Asimov: noche + platino + cobre. */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{
  --noche:#0E1116;--grafito:#1A1D23;--placa:#14181F;--linea:#2A2F38;
  --platino:#A7ADB5;--hueso:#ECE9E3;--papel:#F4F2EE;--cobre:#E8743B;--cobre-osc:#B8501F;
  --verde:#4FB286;--rojo:#D9534F;
  --display:"Michroma","Eurostile","Arial Black",sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --bisel:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--noche);color:var(--hueso);font-family:var(--body);font-size:16px;line-height:1.55;
  background-image:linear-gradient(var(--grafito) 1px,transparent 1px),linear-gradient(90deg,var(--grafito) 1px,transparent 1px);background-size:32px 32px}
a{color:var(--cobre);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;scroll-margin-top:5rem}
h1{font-family:var(--display);font-size:clamp(1.4rem,3.4vw,2.2rem);letter-spacing:.04em;font-weight:400}
h2{font-family:var(--display);font-size:clamp(1rem,2.2vw,1.35rem);letter-spacing:.05em;font-weight:400;margin-top:2.5rem}
h3{font-size:1.05rem;font-weight:600}
p{margin:.4em 0 .9em;max-width:70ch}
small,.micro{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--platino)}
.micro b{color:var(--cobre);font-weight:400;padding:0 .35em}
code,kbd{font-family:var(--mono);font-size:.85em;background:var(--grafito);padding:.1em .4em}
/* cabecera */
header.top{position:sticky;top:0;z-index:5;background:rgba(14,17,22,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--linea)}
header.top .in{max-width:1100px;margin:0 auto;padding:.7rem 16px;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
header.top .logo{font-family:var(--display);letter-spacing:.12em;font-size:.95rem;color:var(--hueso);display:flex;align-items:center;gap:.6rem}
header.top .logo img{height:22px}
header.top .logo span{color:var(--platino);font-size:.7rem}
nav.menu{margin-left:auto;display:flex;gap:.2rem;flex-wrap:wrap}
nav.menu a{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--platino);padding:.4rem .6rem;border:1px solid transparent}
nav.menu a:hover,nav.menu a.activo{color:var(--hueso);border-color:var(--linea);text-decoration:none;background:var(--grafito)}
nav.menu a.activo{border-color:var(--cobre)}
main{max-width:1100px;margin:0 auto;padding:2rem 16px 5rem}
.intro{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1.5rem}
.intro p{color:var(--platino);font-size:1.05rem}
/* placas */
.placa{background:var(--placa);border:1px solid var(--linea);padding:1.2rem 1.3rem;clip-path:var(--bisel);position:relative}
.placa.cobre{border-color:var(--cobre)}
.rejilla{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rejilla.ancha{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.tarjeta{background:var(--placa);border:1px solid var(--linea);padding:1rem 1.1rem;clip-path:var(--bisel);display:flex;flex-direction:column;gap:.4rem}
.tarjeta h3{margin:0}
.tarjeta .pie{margin-top:auto;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;padding-top:.6rem}
.chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--linea);color:var(--platino);padding:.15em .55em}
.chip.cobre{border-color:var(--cobre);color:var(--cobre)}
.chip.verde{border-color:var(--verde);color:var(--verde)}
.boton{display:inline-block;background:var(--cobre);color:var(--noche);font-weight:600;padding:.55rem 1rem;clip-path:var(--bisel);border:0;cursor:pointer;font-family:var(--body);font-size:.95rem}
.boton:hover{background:#f08a55;text-decoration:none}
.boton.sec{background:transparent;color:var(--hueso);border:1px solid var(--linea);clip-path:none}
/* tablas */
table{width:100%;border-collapse:collapse;font-size:.92rem;margin:.6rem 0 1.4rem}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--linea);vertical-align:top}
th{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--platino);font-weight:400}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:hover td{background:rgba(255,255,255,.02)}
.tabla-scroll{overflow-x:auto}
/* cifras */
.cifras{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:1rem 0}
.cifra{background:var(--placa);border:1px solid var(--linea);padding:.9rem 1rem;clip-path:var(--bisel)}
.cifra b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--cobre);letter-spacing:.02em}
.cifra span{color:var(--platino);font-size:.85rem}
/* colores del manual */
.paleta{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.color{border:1px solid var(--linea);clip-path:var(--bisel)}
.color i{display:block;height:70px}
.color div{padding:.5rem .7rem;background:var(--placa);font-size:.82rem}
.color div b{display:block}
.color div code{background:transparent;padding:0;color:var(--platino)}
/* bien / mal */
.si-no{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.si,.no{padding:1rem 1.1rem;border:1px solid var(--linea);clip-path:var(--bisel);background:var(--placa)}
.si{border-color:var(--verde)}.no{border-color:var(--rojo)}
.si .micro{color:var(--verde)}.no .micro{color:var(--rojo)}
/* listas */
ul.limpia{list-style:none;padding:0;margin:.4rem 0 1rem}
ul.limpia li{padding:.35rem 0 .35rem 1.1rem;position:relative;border-bottom:1px solid var(--linea)}
ul.limpia li::before{content:"/";color:var(--cobre);position:absolute;left:0;font-family:var(--mono)}
ol.pasos{counter-reset:p;list-style:none;padding:0}
ol.pasos li{counter-increment:p;padding:.6rem 0 .6rem 2.6rem;position:relative;border-bottom:1px solid var(--linea)}
ol.pasos li::before{content:"0" counter(p);position:absolute;left:0;top:.7rem;font-family:var(--mono);color:var(--cobre);font-size:.8rem}
/* formularios */
label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--platino);margin:.6rem 0 .25rem}
input,select,textarea{width:100%;background:var(--grafito);border:1px solid var(--linea);color:var(--hueso);padding:.5rem .6rem;font-family:var(--body);font-size:.95rem}
input:focus,select:focus,textarea:focus{outline:1px solid var(--cobre);border-color:var(--cobre)}
.fila{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.aviso{font-size:.88rem;color:var(--platino);border-left:2px solid var(--cobre);padding:.4rem .8rem;margin:1rem 0}
.ok{color:var(--verde)}.mal{color:var(--rojo)}
/* subtítulo de ejemplo */
.sub-demo{background:#000;aspect-ratio:9/16;max-width:220px;display:flex;align-items:flex-end;justify-content:center;padding:1.2rem .6rem;border:1px solid var(--linea)}
.sub-demo span{background:rgba(14,17,22,.75);color:#fff;font-weight:700;font-size:.95rem;padding:.2em .5em;text-align:center;line-height:1.3}
.sub-demo span em{color:var(--cobre);font-style:normal}
footer{border-top:1px solid var(--linea);padding:1.2rem 16px;color:var(--platino);font-size:.8rem;text-align:center}
footer .micro{display:block;margin-top:.3rem}
/* accesos grandes de la portada */
.accesos{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.acceso{background:var(--placa);border:1px solid var(--linea);padding:1.3rem;clip-path:var(--bisel);color:var(--hueso);display:block}
.acceso:hover{border-color:var(--cobre);text-decoration:none}
.acceso h3{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:.4rem 0}
.acceso p{color:var(--platino);margin:0}
.acceso.principal{background:var(--cobre);border-color:var(--cobre);color:var(--noche)}
.acceso.principal p,.acceso.principal .micro{color:var(--noche)}
/* detalles plegables */
details{border:1px solid var(--linea);background:var(--placa);margin:.5rem 0;padding:0 1rem}
summary{cursor:pointer;padding:.7rem 0;font-weight:600}
details[open] summary{border-bottom:1px solid var(--linea);margin-bottom:.6rem}
@media (max-width:640px){header.top .in{padding:.6rem 16px}nav.menu{margin-left:0;width:100%}main{padding-top:1.2rem}}
@media print{body{background:#fff;color:#111}header.top,footer{display:none}.placa,.tarjeta,.cifra{clip-path:none;background:#fff;border-color:#ccc}}