/* Página para elegir el rubro: misma paleta que la landing de Modo Piloto. */
:root{
  --fondo:#06080b; --panel:#0b0f14; --panel2:#10151c; --linea:#1c2430; --linea2:#2a3544;
  --txt:#e9eef4; --suave:#8b97a8; --tenue:#5b6676; --sis:#c5ff3e; --apr:#63d4ff; --hum:#ffb45e;
  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,rgba(197,255,62,.07),transparent 60%),var(--fondo);color:var(--txt);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;padding:28px 20px 60px;max-width:1180px;margin:0 auto}
h1,h2,h3,p{margin:0}
a{color:inherit}
.cabeza{display:flex;align-items:center;gap:14px}
.marca{font:700 13px/1 var(--mono);letter-spacing:.2em;color:var(--sis)}
.marca small{font-size:9.5px;color:var(--suave);letter-spacing:.18em}
h1{font-size:clamp(28px,5vw,40px);letter-spacing:-.02em;margin-top:6px}
.intro{color:var(--suave);max-width:680px;margin:16px 0 14px}
.intro b{color:var(--txt)}
.leyenda{display:flex;flex-wrap:wrap;gap:8px 18px;font:12.5px/1 var(--mono);color:var(--suave);margin-bottom:26px}
.leyenda i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0}
.leyenda .sis{background:var(--sis)} .leyenda .apr{background:var(--apr)} .leyenda .hum{background:var(--hum)}
.grupo{margin-bottom:30px}
.grupo h2{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.grupo h2::after{content:"";flex:1;height:1px;background:var(--linea)}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rubro{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--linea);border-radius:16px;padding:16px;transition:border-color .15s}
.rubro:hover{border-color:var(--linea2)}
.rubro .arriba{display:flex;align-items:center;gap:12px}
.rubro .av{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;flex:none}
.rubro h3{font-size:17px;line-height:1.2}
.rubro .tipo{font:12px/1.3 var(--mono);color:var(--suave)}
.rubro ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:13.5px;color:var(--suave)}
.rubro li{display:flex;gap:8px}
.rubro li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sis);margin-top:8px}
.rubro .acc{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:9px 12px;font-weight:650;font-size:14px;text-decoration:none;border:1px solid var(--linea2)}
.btn:hover{border-color:var(--suave)}
.btn.pri{background:var(--sis);color:#0a1200;border-color:transparent}
.cargando{color:var(--tenue)}
footer{margin-top:20px;color:var(--tenue);font-size:13px}
@media (max-width:420px){body{padding:20px 16px 48px}}