/* BLOQUE 1 - Base, tipografia y distribucion. */
:root{font-family:Inter,Arial,sans-serif;color:#242721;background:#f5f3ee;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}main{max-width:1120px;margin:auto;padding:32px 40px 24px}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #454e34;outline-offset:5px}button:disabled{cursor:default}header{display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:inherit;font-size:28px;font-weight:750;letter-spacing:-1px}.brand-mark{font-size:21px;color:#768551;margin-right:7px}.tag,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700}.tag{border:1px solid #d9d9cf;border-radius:30px;padding:10px 14px;letter-spacing:1px}.intro{padding:48px 0 30px}.eyebrow{color:#6b735e;margin:0 0 18px}h1{font-size:clamp(48px,6vw,72px);line-height:1.02;letter-spacing:-4px;margin:0;font-weight:650}.lead{font-size:17px;color:#65685e;line-height:1.5;margin:20px 0 0}
/* BLOQUE 2 - Conexion USB, busqueda de computadoras y codigo. */
.connection{background:#fffefb;border:1px solid #dddfd5;border-radius:18px;padding:22px 25px;margin:0 0 24px}.connection-top{display:flex;align-items:center;justify-content:space-between}h2{font-size:16px;margin:0 0 6px}.connection p{color:#6b6f63;font-size:14px;margin:0;line-height:1.5}.status-dot{height:10px;width:10px;background:#b2b5a9;border-radius:50%;flex-shrink:0}.status-dot.on{background:#438246;box-shadow:0 0 0 5px #e8efe3}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.primary,.secondary,.off{border-radius:9px;padding:12px 16px;font-size:13px;font-weight:650;min-height:44px;border:1px solid transparent}.primary{background:#353e2d;color:#fff}.primary:disabled{opacity:.6}.secondary{background:#f2f3eb;color:#454d3c;border-color:#dfe2d5}.text-button{border:0;background:none;color:#4f6339;padding:8px 0;font-size:13px;font-weight:650}.small{font-size:12px!important}.host-code{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:20px 0 10px;padding-top:15px;border-top:1px solid #e7e8df}.host-code>span{font-size:12px;color:#6b6f63}.host-code strong{font-size:24px;letter-spacing:3px}.host-code button{margin-left:auto}#computer-picker{border-top:1px solid #e7e8df;padding-top:18px;margin-top:18px}#computer-list{display:grid;gap:8px;margin-bottom:18px}.computer{display:flex;align-items:center;justify-content:space-between;background:#f5f6f0;border:1px solid #e1e5d9;padding:12px 14px;border-radius:9px;gap:20px;text-align:left}.computer span{font-size:13px;font-weight:600}.computer small{font-size:12px;color:#5f7749}#join-form label{font-size:12px;color:#686d60;display:block;margin-bottom:8px}.code-input{display:flex;gap:10px}.code-input input{min-width:0;width:180px;border:1px solid #d5dacb;background:#fff;border-radius:8px;padding:10px 12px;letter-spacing:3px}
/* BLOQUE 3 - Los tres botones de color y su indicador de encendido. */
.lights{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.light{border:1px solid var(--border);color:var(--ink);background:var(--bg);padding:24px;text-align:left;border-radius:18px;min-height:238px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}.blue{--bg:#e5ecf7;--ink:#254d89;--border:#cfdaed;--glow:#3d78da}.red{--bg:#f5e5df;--ink:#9c4635;--border:#eacdc3;--glow:#e26a51}.green{--bg:#e7ecdf;--ink:#47603d;--border:#d3ddc8;--glow:#70a251}.light:not(:disabled):hover{transform:translateY(-4px)}.light:disabled{opacity:.7}.lamp{width:66px;height:66px;background:#ffffff70;border:1px solid #ffffffb0;border-radius:50%;display:grid;place-items:center;margin-bottom:32px}.lamp>span{height:30px;width:30px;background:var(--glow);opacity:.5;border-radius:50%;box-shadow:inset 0 -4px 8px #0001}.light[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink);opacity:1}.light[aria-pressed=true] .lamp>span{opacity:1;box-shadow:0 0 24px var(--glow),inset 0 -4px 8px #0001}.color-name{font-size:27px;font-weight:650;letter-spacing:-1px}.color-caption{font-size:12px;margin-top:10px;display:flex;justify-content:space-between;gap:5px}.bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:22px 0}.bottom p{font-size:13px;color:#676c60;margin:0}.off{border-color:#d9ddcf;background:transparent;color:#535b49}.off:disabled{opacity:.5}.off span{font-size:18px;margin-right:6px}footer{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#85897e;padding:23px 0 0;border-top:1px solid #dddfd5}footer a{color:#666f5b;text-decoration:none}
/* BLOQUE 4 - Ajustes para celulares y pantallas pequeñas. */
[hidden]{display:none!important}@media(max-width:650px){main{padding:24px 20px}.intro{padding:36px 0 26px}h1{letter-spacing:-2px}.lead{font-size:15px}.connection{padding:20px}.lights{gap:10px}.light{min-height:200px;padding:16px 12px}.lamp{width:50px;height:50px;margin-bottom:30px}.lamp>span{width:25px;height:25px}.color-name{font-size:23px}.color-caption{font-size:11px;line-height:1.5}.color-caption>span{display:none}.host-code{gap:10px}.host-code>span{width:100%}.host-code button{margin-left:0}footer{line-height:1.5}footer a{max-width:180px;text-align:right}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}