/* Instalar OWI+ — una sola tarjeta de vidrio sobre luces suaves, logo que se rellena. Claro / oscuro automático. */
:root{--bg:#eef2f8;--ink:#101a33;--muted:#5b6b82;--blue:#1F63E0;--orange:#FF7A1A;--card:rgba(255,255,255,.78);--cardb:rgba(255,255,255,.92);--line:#d3dbe7;--field:#f4f7fb;--markt:rgba(23,35,58,.18);--markf:#1F63E0;--shadow:0 24px 60px rgba(23,35,58,.14);--o1:rgba(255,122,26,.40);--o2:rgba(75,139,255,.45);--o3:rgba(120,200,255,.35);--glow:rgba(31,99,224,.28);--note:#fff4e5;--notei:#7a4a00;--link:#1F63E0}
@media(prefers-color-scheme:dark){:root{--bg:#080d1c;--ink:#f1f5fb;--muted:#a9b6c9;--card:rgba(20,30,56,.7);--cardb:rgba(255,255,255,.14);--line:rgba(255,255,255,.16);--field:rgba(255,255,255,.07);--markt:rgba(255,255,255,.22);--markf:#fff;--shadow:0 24px 60px rgba(0,0,0,.55);--o1:rgba(255,122,26,.34);--o2:rgba(60,110,255,.5);--o3:rgba(40,160,220,.3);--glow:rgba(75,139,255,.35);--note:#3a2a10;--notei:#ffd9a0;--link:#9fc4ff}}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple Color Emoji","Noto Color Emoji",sans-serif;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}a{color:var(--link)}
.aur{position:fixed;inset:0;overflow:hidden;pointer-events:none}.aur b{position:absolute;border-radius:50%;filter:blur(70px);animation:float 14s ease-in-out infinite alternate}
.o1{width:55vmax;height:55vmax;left:-14vmax;top:-14vmax;background:var(--o1)}.o2{width:60vmax;height:60vmax;right:-20vmax;top:12vh;background:var(--o2);animation-delay:-5s}.o3{width:50vmax;height:50vmax;left:18vw;bottom:-26vmax;background:var(--o3);animation-delay:-9s}
@keyframes float{to{transform:translate(8%,10%) scale(1.15)}}
.wrap{position:relative;max-width:620px;margin:0 auto;text-align:center;min-height:100dvh;padding:calc(40px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left))}
.brand{display:block;text-decoration:none}.mark{display:block;width:min(300px,72%);height:auto;margin:0 auto 14px;filter:drop-shadow(0 8px 26px var(--glow))}
.mark .t,.mark .tp,.mark .f,.mark .fp{fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}.mark .t{stroke:var(--markt)}.mark .tp{stroke:rgba(255,122,26,.35)}.mark .f{stroke:var(--markf)}.mark .fp{stroke:var(--orange)}
h1{margin:6px 0;font-size:clamp(30px,6vw,44px);line-height:1.1;letter-spacing:-.02em}.em{display:inline-block;animation:bob 2.4s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-4px) rotate(-6deg)}}
.lead{margin:0 auto 14px;color:var(--muted);max-width:40ch}
.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 20px}.pills span{padding:6px 14px;border-radius:99px;background:var(--card);border:1px solid var(--cardb);font-size:13px;font-weight:700}
.status{margin:10px 0 0;color:var(--muted)}#detected{margin:0 0 14px}
.crumb{margin:0 0 12px}.crumb button{font:inherit;font-weight:700;color:var(--muted);background:var(--card);border:1px solid var(--cardb);border-radius:99px;padding:8px 16px;cursor:pointer}.crumb button:hover{color:var(--ink)}
.card{text-align:left;background:var(--card);border:1px solid var(--cardb);border-radius:26px;padding:20px;margin:0 0 14px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
h2{margin:0 0 14px;font-size:19px}h3{font-size:17px;margin:18px 0 8px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--orange);margin:0 0 6px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tiles button,.chipsel button{font:inherit;font-weight:800;color:var(--ink);background:var(--field);border:2px solid var(--line);border-radius:18px;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.tiles button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 6px}.tiles b{font-size:34px;line-height:1}
.chipsel{display:flex;gap:10px;flex-wrap:wrap}.chipsel button{padding:13px 18px;border-radius:99px}
.tiles button:hover,.chipsel button:hover{transform:translateY(-2px)}
.tiles button[aria-pressed=true],.chipsel button[aria-pressed=true]{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,122,26,.2)}
.primary,.ghost{display:block;width:100%;min-height:56px;border:0;border-radius:18px;font:inherit;font-weight:800;font-size:19px;cursor:pointer;text-decoration:none;text-align:center;padding:16px}
.primary{background:linear-gradient(135deg,#FF9A3D,#FF6A00);color:#1b1206;box-shadow:0 12px 28px rgba(255,122,26,.4);margin:0 0 14px}.primary:hover{filter:brightness(1.05)}
.ghost{margin-top:10px;background:transparent;border:1.5px solid var(--line);color:var(--ink);font-size:15px;min-height:46px;padding:12px;border-radius:14px}
#install{margin-top:12px}#description{color:var(--muted);margin:0 0 16px}
#help{margin-top:6px}#steps{list-style:none;counter-reset:s;margin:0 0 6px;padding:0;display:grid;gap:10px}
#steps li{counter-increment:s;display:flex;gap:12px;align-items:center}
#steps li:before{content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:grid;place-items:center}
.note{background:var(--note);color:var(--notei);border-radius:12px;padding:12px 14px;margin:0 0 14px}
select{display:block;width:100%;font:inherit;padding:14px;margin:10px 0;border:1px solid var(--line);border-radius:12px;background:var(--field);color:var(--ink)}
.skip{display:block;text-align:center;font-weight:800;padding:14px;text-decoration:none}.diag{margin:6px 0 0;text-align:center;color:var(--muted);font-size:12.5px}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button:disabled{opacity:.65;cursor:wait}
/* once the system is chosen only the steps stay in view; «cambiar» brings the choices back */
body[data-step="3"] #device-card,body[data-step="3"] #platform-card{display:none}
@media(max-width:380px){.tiles{grid-template-columns:1fr}.tiles button{flex-direction:row;justify-content:center}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}