/* ==========================
   XUPER TV — style2.css
   Reemplaza el archivo actual
   ========================== */

/* ---------- Fuentes y variables ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --bg-900: #06070a;
  --panel: #0f1116;
  --accent: #00aaff;
  --accent-2: #0077cc;
  --muted: #9aa4b2;
  --card: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.04);
  --radius: 14px;
  --transition: 280ms cubic-bezier(.2,.9,.2,1);
  --max-width: 1100px;
}

/* ---------- Reset / Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(180deg, #020406 0%, var(--bg-900) 100%);
  color:#eef2f7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:hidden;
}

/* ---------- Header ---------- */
.header{
  width:100%;
  position:sticky;
  top:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
  background: linear-gradient(180deg, rgba(3,6,10,0.65), rgba(3,6,10,0.45));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.03);
}

/* logo area */
.logo-box{display:flex;align-items:center;gap:12px}
.logo{
  max-width:100px;           /* <= pedido: max 100px */
  height:auto;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(0,170,255,0.07));
  -webkit-user-drag: none;
}

/* site title (if present) */
.titulo{font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:0.2px}
.titulo span{color:var(--accent)}

/* nav */
.nav{display:flex;gap:18px;align-items:center}
.nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
  transition: color var(--transition), transform var(--transition);
  padding:6px 8px;
  border-radius:8px;
}
.nav a:hover{ color:var(--accent); transform: translateY(-2px) }

/* ---------- INICIO / HERO ---------- */
/* We keep the <img class="hero-img"> in the HTML but we position it absolute to behave like a background */
.inicio{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:36px 16px 80px;
  overflow:hidden;
  min-height:70vh;
}

/* hero image - fill the hero area and sit behind text */
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
  filter: saturate(0.95) contrast(0.9) brightness(0.65);
  transform-origin:center;
  transition: transform 12s linear;
  will-change: transform;
}

/* subtle slow zoom for cinematic effect (very gentle) */
.inicio:hover .hero-img { transform: scale(1.02); }

/* gradient overlay that starts transparent and becomes solid from 50% downward */
.inicio::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(11,11,15,0) 50%, rgba(11,11,15,0.95) 100%);
}

/* hero content sits above image/overlay */
.inicio h2, .inicio p{
  position:relative;
  z-index:2;
  max-width:var(--max-width);
  margin:8px auto;
  text-align:center;
}

/* headline */
.inicio h2{
  font-size:clamp(1.6rem, 3.4vw, 2.4rem);
  color: #ffffff;
  margin-top:6px;
  letter-spacing: -0.02em;
  text-shadow: 0 8px 24px rgba(2,6,10,0.6);
}

/* paragraph */
.inicio p{
  color: #d7e6f2;
  font-size:clamp(1rem, 2.2vw, 1.05rem);
  max-width:820px;
  margin-top:12px;
  line-height:1.55;
  text-shadow: 0 6px 18px rgba(2,6,10,0.55);
}

/* small hero ad slot under text */
.inicio .ad-space{ position:relative; z-index:2; margin-top:22px }

/* ---------- DESCARGAS ---------- */
.descargar{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  padding:44px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

/* title */
.descargar h2{ color:var(--accent); font-size:1.4rem; margin-bottom:2px }

/* button group */
.boton-grupo{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; z-index:2 }
.btn{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
  border: none;
  padding:12px 22px;
  border-radius:28px;
  font-weight:700;
  box-shadow: 0 10px 30px rgba(0,170,255,0.12);
  cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  font-size:1rem;
}
.btn:active{ transform:translateY(1px) }
.btn:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,170,255,0.18) }

/* download details: by default hidden via .oculto (your JS controls it) */
/* Keep .info visible when .oculto is removed; initially HTML uses class="info oculto" */
.info{ max-width:520px; width:100%; margin:14px auto; text-align:left; background:var(--card); padding:18px; border-radius:12px; box-shadow:0 12px 30px rgba(2,6,10,0.5) }
.oculto{ display:none !important; }   /* JS removes .oculto to show the block */

/* styling for lists inside info */
.info ul{ list-style:none; padding-left:0; margin:0; color:#dfeffb }
.info li{ padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.03); font-size:0.97rem }

/* prominent download link */
.descarga-final{
  display:inline-block;
  margin-top:12px;
  background: #00c2ff;
  color:#04121b;
  font-weight:800;
  padding:10px 18px;
  border-radius:10px;
  text-decoration:none;
  transition: transform var(--transition), background var(--transition);
}
.descarga-final:hover{ transform: translateY(-3px); background:#00a0d6 }

/* downloader code box */
.downloader{
  margin-top:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:18px;
  border-radius:12px;
  max-width:640px;
  width:100%;
  text-align:center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.codigo{
  display:inline-block;
  background: linear-gradient(90deg,#0099ff,#00ddff);
  color:#00121a;
  padding:10px 18px;
  border-radius:10px;
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:1px;
  margin:12px 0;
}

/* ---------- CARACTERÍSTICAS ---------- */
.caracteristicas{
  padding:48px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(2,6,12,0.02));
}
.caracteristicas h2{ color:var(--accent); margin-bottom:18px }
.lista{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  max-width:var(--max-width);
  margin: 14px auto 0;
}
.lista li{
  background:var(--glass);
  padding:16px;
  border-radius:12px;
  color:#e6f5ff;
  font-weight:600;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 24px rgba(2,6,10,0.45);
  transition: transform var(--transition), background var(--transition);
}
.lista li:hover{ transform:translateY(-6px); background: rgba(0,170,255,0.08) }

/* ---------- DISPOSITIVOS ---------- */
.dispositivos{
  padding:44px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(2,6,12,0.03));
}
.dispositivos h2{ color:var(--accent); margin-bottom:12px }
.dispositivos .lista{ max-width:700px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px }
.dispositivos li{ background:var(--card); padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.02); }

/* not compatible list styling */
.no-lista li{ color:#ff7676; font-weight:700; background:rgba(0,0,0,0.02); padding:8px; border-radius:8px }

/* ---------- AD SPACE STYLE (clear placements) ---------- */
.ad-space{
  max-width:900px;
  margin:28px auto;
  padding:18px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border: 1px dashed rgba(255,255,255,0.04);
  color:var(--muted);
  font-weight:600;
}

/* ---------- FOOTER ---------- */
.footer{
  margin-top:36px;
  padding:24px 18px;
  text-align:center;
  color:#9fb2c7;
  background: linear-gradient(180deg, rgba(2,6,10,0.02), rgba(0,0,0,0.05));
  border-top:1px solid rgba(255,255,255,0.02);
}

/* ---------- ANIMATIONS ---------- */
.fade-in{ opacity:0; animation: fadeIn 0.8s ease-in-out forwards; animation-delay: 0.15s }
@keyframes fadeIn { from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform:none } }

/* ---------- RESPONSIVE & TV SUPPORT ---------- */
/* Mobile adjustments */
@media (max-width:900px){
  .header{ padding:10px 16px }
  .nav{ display:none } /* keep header clean on small screens */
  .titulo{ font-size:1rem }
  .inicio{ min-height:58vh; padding:26px 12px 60px }
  .hero-img{ object-position: center top; }
  .boton-grupo{ gap:10px }
  .btn{ padding:12px 16px; font-size:0.98rem }
  .info{ padding:14px; font-size:0.95rem }
}

/* Big screens / TV */
@media (min-width:1600px){
  .inicio h2{ font-size:3.2rem }
  .inicio p{ font-size:1.2rem }
  .hero-img{ transform: scale(1.03) }
  .btn{ padding:16px 28px; font-size:1.05rem }
}
/* ========== Accesibilidad: Skip link ========= */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #ffffff;
  color: #00121a;
  border-radius: 6px;
  text-decoration: none;
  z-index: 2000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

/* ========== Focus visible para todos los elementos interactivos ========= */
:focus { outline: none; }
a:focus, button:focus, .btn:focus, .descarga-final:focus {
  outline: 3px solid rgba(0,170,255,0.18);
  box-shadow: 0 6px 24px rgba(0,170,255,0.12);
  border-radius: 8px;
}

/* Mejor contraste en links del nav */
.nav a { color: #d6e9f5; }
.nav a:focus, .nav a:hover { color: var(--accent); }

/* asegúrate de que anuncios marcados no rompan lectura para lectores de pantalla */
.ad-space { role: presentation; }

/* Small improvements for list contrast */
.lista li, .no-lista li { color: #e6f3ff; }

/* Aumentar tamaño tappable en botones para TV / móvil remoto */
.btn, .descarga-final, .download-buttons button {
  min-height: 48px;
  padding-left: 18px;
  padding-right: 18px;
}

/* Ensure visible focus for keyboard nav on TV */
@media (min-width:1200px){
  .btn:focus { transform: translateY(-2px); }
}