/* 20-oct (Omar aprobó E1 de lab/paginas/descarga-app/): «La app» es UNA tarjeta más del bloque de juegos
   del inicio. Mismo molde que Pokémon / Yu-Gi-Oh! / One Piece / Dragon Ball (rótulo «Próximamente» idéntico),
   un celular con la pantalla REAL de la app (bisel fino) y el botón propio «Conoce la app» (sin logos de tiendas).
   Reglas de Alejandro: simple, una sola línea de apoyo, misma altura que las de juego, sin tarjeta huérfana.
   Grilla: PC 3 columnas (Magic 2×2 + 5 tarjetas iguales); ≤980 la app ocupa la fila entera y los 4 juegos van de a dos. */

/* ── botón propio (solo apariencia: toda la tarjeta es el enlace) ── */
.tile.app .dl{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:7px 16px 7px 12px;background:#000;color:#fff;border:1.5px solid #a7b1c6;border-radius:10px;position:relative;z-index:4;white-space:nowrap;transition:border-color .15s,transform .15s;align-self:flex-start}
.tile.app:hover .dl{border-color:#fff;transform:translateY(-1px)}
.tile.app .dl svg{width:24px;height:24px;flex:none}
.tile.app .dl>span{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.tile.app .dl small{font:600 9.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#c5cee0}
.tile.app .dl b{font:700 16px/1.1 var(--font-display);letter-spacing:-.2px;margin-top:4px;color:#fff}

/* ── celular con la pantalla real, bisel de 3 px ── */
.tile.app .ph{display:block;position:absolute;z-index:3;right:20px;top:16px;width:clamp(100px,32%,150px);padding:3px;background:#02050a;border-radius:18px;box-shadow:0 0 0 1px #3b4864,0 16px 36px rgba(0,0,0,.5);line-height:0;transition:transform .3s ease}
.tile.app .ph img{display:block;width:100%;height:auto;border-radius:15px}
.tile.app:hover .ph{transform:translateY(-6px)}

/* ── la tarjeta ── */
.tile.app{justify-content:center;gap:12px;padding:16px 20px;text-decoration:none;color:inherit}
.tile.app .idline{opacity:1}
.tile.app:focus-visible{outline:3px solid var(--accent-hover);outline-offset:3px}

/* ── grilla sin huérfana ── */
@media (min-width:981px){
  .hub{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(142px,auto)}
  .tile.mtg{grid-column:1/3;grid-row:1/3}
  .tile.soon{grid-column:auto}
}
@media (max-width:980px){
  .tile.soon.app{grid-column:span 12}   /* 5 tarjetas no caben de a dos: la app va sola en su fila, los juegos de a dos */
}
@media (max-width:640px){
  .tile.soon.app{padding:12px 14px;min-height:108px}   /* = alto de las tarjetas de juego en el celular */
  .tile.app .ph{width:100px;right:14px;top:12px;border-radius:15px}
  .tile.app .ph img{border-radius:12px}
  .tile.app .dl{min-height:46px}
}
@media (max-width:360px){   /* 320: el celular se achica para no pisar el botón */
  .tile.app .ph{width:76px;right:10px}
  .tile.app .ph img{border-radius:10px}
}