:root{
  --bg0:#070a12;
  --bg1:#0b0f1a;

  --blue:#3845ba;
  --blue2:#5c7cff;

  --text:#eaf0ff;
  --muted: rgba(234,240,255,.72);

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 26px;

  /* ✅ MÁS ESPACIO PARA FOOTER */
  --footer-h: 128px;

  --base: clamp(16px, 1.15vw, 22px);

  --focus: 0 0 0 4px rgba(92,124,255,.55), 0 0 0 8px rgba(56,69,186,.25);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--base);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 75% 15%, rgba(56,69,186,.35), transparent 60%),
    radial-gradient(900px 600px at 10% 20%, rgba(92,124,255,.18), transparent 55%),
    linear-gradient(160deg, var(--bg0), var(--bg1));
}

.bg-glow{
  position:fixed;
  inset:-40px;
  background:
    radial-gradient(900px 500px at 60% 35%, rgba(56,69,186,.28), transparent 60%),
    radial-gradient(700px 420px at 20% 70%, rgba(92,124,255,.14), transparent 60%);
  filter: blur(14px);
  opacity:.9;
  pointer-events:none;
}

/* ===== Logo (arriba izquierda) ===== */
.logo-bar{
  position: fixed;
  top: 1.05rem;
  left: 1.25rem;
  z-index: 50;
  pointer-events: none; /* no interfiere con foco/remote */
}
.logo{
  height: clamp(42px, 5vw, 64px);
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.55));
}

/* Smart TV: sin scroll */
@media (min-width: 900px){
  body{ overflow:hidden; }
}

/* Contenedor principal */
.wrap{
  min-height: 100vh;
  padding-bottom: var(--footer-h);
  display:grid;
  place-items:center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;

  /* espacio para que el logo no se encime */
  padding-top: 4.4rem;
}

@media (min-width: 900px){
  .wrap{ padding-top: 3.4rem; }
}

.card{
  width: min(980px, 100%);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  padding: clamp(18px, 2.4vw, 34px);
}

/* Badge */
.badge{
  width: fit-content;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  outline:none;
}
.badge .dot{
  width: 10px; height: 10px;
  border-radius:50%;
  background: rgba(92,124,255,.95);
  box-shadow: 0 0 18px rgba(92,124,255,.45);
}

.title{
  margin: 1rem 0 0 0;
  font-size: clamp(2.1rem, 3vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: .2px;
}
.accent{
  color: var(--blue2);
  text-shadow: 0 0 30px rgba(92,124,255,.22);
}

.subtitle{
  margin: .9rem 0 0 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 1.05em;
  max-width: 70ch;
}

/* En TV limitamos líneas */
@media (min-width: 900px){
  .subtitle{
    display:-webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow:hidden;
  }
}

.cta{
  margin-top: 1.2rem;
  display:flex;
  flex-direction: column;
  gap: .85rem;
  align-items: flex-start;
}

/* Botones */
.btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 1.05rem 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
  letter-spacing:.5px;
  color: var(--text);
  outline:none;
  background: rgba(255,255,255,.06);
  cursor:pointer;
}

.btn-primary{
  background: linear-gradient(135deg, rgba(56,69,186,.95), rgba(92,124,255,.85));
  border: 1px solid rgba(92,124,255,.45);
  box-shadow: 0 12px 36px rgba(56,69,186,.35);
}

/* Principal grande */
#installMain{
  min-width: min(520px, 100%);
  font-size: 1.08em;
}

/* Botón discreto */
.btn-quiet{
  padding: .75rem 1.05rem;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(234,240,255,.85);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
}
.btn-quiet .chev{
  margin-left: .6rem;
  opacity: .8;
}

.btn:active{ transform: translateY(1px); }

/* Menú alternativo */
.alt-wrap{
  width: min(520px, 100%);
  position: relative;
}

.alt-menu{
  margin-top: .6rem;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  padding: .45rem;
}

.alt-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  padding: .85rem .95rem;
  border-radius: 14px;
  text-decoration:none;
  color: var(--text);
  font-weight: 800;
  background: rgba(255,255,255,.04);
  border: 1px solid transparent;
  outline:none;
}
.alt-item:hover{
  border-color: rgba(92,124,255,.35);
  background: rgba(92,124,255,.10);
}

/* Destaca la opción actual */
.alt-item.is-current{
  border-color: rgba(92,124,255,.55);
  background: rgba(92,124,255,.14);
}

.hint{
  margin-top: .75rem;
  color: rgba(234,240,255,.60);
  font-weight: 600;
  outline:none;
}

/* Focus visible */
.focusable:focus,
.badge:focus,
.title:focus,
.subtitle:focus,
.hint:focus{
  box-shadow: var(--focus);
  border-color: rgba(92,124,255,.55) !important;
}

/* Footer */
.footer{
  position:fixed;
  left:0; right:0; bottom:0;
  height: var(--footer-h);
  display:flex;
  align-items:center;

  /* ✅ MÁS AIRE Y MÁS ESPACIO ABAJO */
  padding: 1rem 1.25rem 1.65rem;

  background: linear-gradient(0deg, rgba(7,10,18,.9), rgba(7,10,18,.25));
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}

.footer-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}

.footer-left{
  color: rgba(234,240,255,.72);
  font-weight: 800;

  /* ✅ separa el texto del borde / del botón */
  margin-top: .35rem;
}

.btn-footer{
  min-width: 320px;
  padding: .95rem 1.2rem;
  font-size: 1.02em;

  /* ✅ espacio inferior extra */
  margin-bottom: .35rem;
}

/* Móvil */
@media (max-width: 520px){
  #installMain, .alt-wrap{ width: 100%; }
  .footer-inner{ flex-direction: column; justify-content:center; gap:.7rem; }
  .btn-footer{ min-width: 100%; margin-bottom: .25rem; }

  .logo-bar{ top: .9rem; left: 1rem; }
  .wrap{ padding-top: 5.2rem; }

  /* ✅ aún más aire abajo en móvil para que no se vea pegado */
  .footer{ padding-bottom: 1.9rem; }
  .footer-left{ margin-top: .55rem; text-align:center; }
}