/* La portada. Existe para una sola cosa: que quien llegue sepa a dónde ir.
   Nadie entra aquí a leer; entra a fichar o a mirar su panel. */
:root{
  --tinta:#131619; --sup:#1C2126; --sup2:#252B31; --borde:#2F363D;
  --texto:#ECEFF2; --apagado:#8B98A5; --acero:#7FA8CC;
}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:var(--tinta);color:var(--texto);
     font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     padding:32px 20px;gap:28px}

.marca{display:flex;align-items:center;gap:14px}
.marca img{width:56px;height:56px;border-radius:14px}
.marca h1{margin:0;font-size:26px;font-weight:650;letter-spacing:-.02em}
.marca p{margin:2px 0 0;color:var(--apagado);font-size:14px}

.puertas{display:grid;gap:14px;width:100%;max-width:520px}
.puerta{display:flex;align-items:center;gap:16px;padding:18px 20px;
        background:var(--sup);border:1px solid var(--borde);border-radius:14px;
        color:inherit;text-decoration:none;
        transition:transform 100ms ease-out,border-color 140ms ease-out}
.puerta:hover{border-color:var(--acero)}
.puerta:active{transform:scale(.99)}
.dibujo{width:26px;height:26px;flex:none;color:var(--acero);opacity:.85}
.puerta:hover .dibujo{opacity:1}
.puerta b{display:block;font-size:16px;color:var(--texto)}
.puerta .texto span{display:block;color:var(--apagado);font-size:13.5px;margin-top:3px}

.nota{max-width:520px;color:var(--apagado);font-size:13px;text-align:center;margin:0}
.nota code{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--acero)}

/* Si este aparato es una tableta de puerta, no se dibuja nada: ya está
   saliendo hacia el quiosco y un parpadeo del panel sería justo lo que se
   quiere evitar. */
html[data-tableta] body{visibility:hidden}

@media (pointer:coarse){ .puerta{min-height:76px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }