/* =========================================================
   QUANTASPORT · AJUSTES PARA MÓVIL
   ---------------------------------------------------------
   Todo lo específico de teléfono y tableta vive aquí, separado
   del diseño principal: puntero táctil, tamaños de toque,
   coste de pintado y el aviso de que la aplicación es de
   escritorio y no existe para iOS ni Android.
   ========================================================= */

/* ---------------------------------------------------------
   Puntero táctil
   ---------------------------------------------------------
   En una pantalla táctil el :hover se queda «pegado» tras el toque:
   el elemento levantado no vuelve a su sitio hasta que se toca otra
   cosa. Se anulan los desplazamientos y se sustituyen por una
   respuesta al pulsar, que es la que el dedo espera.
   --------------------------------------------------------- */

@media (hover:none){
  .nav-cta:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .dl:hover,
  .tutorial-btn:hover{
    transform:none;
    filter:none;
  }
  .nav-links a:hover{color:var(--fg-mute);background:transparent;}
  .nav-links a.is-current:hover{color:var(--brand-ink);background:var(--brand-tint);}
  .lang-opt:hover:not(.is-active){color:var(--fg-mute);background:transparent;}

  .btn:active,
  .nav-cta:active,
  .dl:active,
  .tutorial-btn:active,
  .modal-close:active{transform:scale(.97);}
}

/* ---------------------------------------------------------
   Zonas de toque
   ---------------------------------------------------------
   Objetivo de 44 px de alto en todo lo que se pulsa con el dedo.
   --------------------------------------------------------- */

html.is-touch .nav-links a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 14px;
}
html.is-touch .lang-opt{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;
}
html.is-touch .tutorial-btn{min-height:44px;padding:0 18px 0 14px;}
html.is-touch .modal-close{width:44px;height:44px;}

/* ---------------------------------------------------------
   Coste de pintado
   ---------------------------------------------------------
   Los desenfoques grandes son lo más caro de una página así en un
   teléfono: se reducen el radio de la nebulosa y el del cierre, y se
   apagan dos blobs que a ese tamaño ya no se distinguen.
   --------------------------------------------------------- */

@media (max-width:700px){
  .bg-nebula{filter:blur(42px) saturate(120%);opacity:.8;}
  .nebula-blob-4,
  .nebula-blob-5{display:none;}
  .closing-signal{filter:blur(2.5px) saturate(115%);}
  .modal-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
}

/* ---------------------------------------------------------
   Aviso: la aplicación es de escritorio
   ---------------------------------------------------------
   Solo aparece en teléfono o tableta (clase .is-mobile-device, que
   pone js/device.js antes del primer pintado). Los dos botones se
   quedan a la vista —para que se vea en qué sistemas SÍ está— pero
   desactivados y con la etiqueta «solo escritorio».
   --------------------------------------------------------- */

.mobile-notice{display:none;}
.dl-flag{display:none;}

/* Descarga que todavía no existe: se ve, dice por qué, y no hace nada. Mismo
   tratamiento que los botones en móvil, salvo que aquí el rótulo SÍ se muestra
   en escritorio: es lo único que explica por qué el botón está apagado. */
.dl.is-soon{
  /* .5 apagaba tanto el botón que el rótulo quedaba en 2,2:1 —ilegible—, y ese
     rótulo es lo único que explica por qué el botón no hace nada. Con .62 y el
     rótulo en ámbar sube a 5,4:1 sin dejar de leerse como inactivo. */
  opacity:.62;
  filter:grayscale(.35);
  box-shadow:none;
  cursor:default;
}
.dl.is-soon:hover{
  transform:none;
  background:#0f1520;
  border-color:rgba(255,255,255,.16);
  box-shadow:none;
}
.dl.is-soon .dl-flag{
  display:inline-block;margin-top:5px;
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  /* Ámbar, el mismo tono con el que la página avisa de lo pendiente. */
  color:#fcd34d;
}

html.is-mobile-device .mobile-notice{
  display:flex;align-items:flex-start;gap:14px;
  max-width:560px;margin:36px auto 0;
  padding:18px 20px;
  text-align:left;
  border-radius:var(--radius);
  border:1px solid rgba(251,191,36,.34);
  background:linear-gradient(180deg,rgba(69,52,16,.42),rgba(24,20,10,.5));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

.mn-ic{
  display:grid;place-items:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:12px;
  color:#fcd34d;
  background:rgba(251,191,36,.14);
  border:1px solid rgba(251,191,36,.32);
}

.mn-body h3{
  margin:0 0 6px;
  font-size:1rem;font-weight:800;letter-spacing:-.01em;color:#fff;
}
.mn-body p{margin:0;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.72);}

/* Botones desactivados: se ven, pero no descargan nada */
html.is-mobile-device .downloads{margin-top:22px;}

html.is-mobile-device .dl{
  opacity:.5;
  filter:grayscale(.4);
  box-shadow:none;
  cursor:default;
}
html.is-mobile-device .dl:active{transform:none;}
html.is-mobile-device .dl-flag{
  display:inline-block;margin-top:5px;
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* ---------------------------------------------------------
   Teléfono: retoques finales de composición
   --------------------------------------------------------- */

@media (max-width:560px){
  .closing{padding-left:18px;padding-right:18px;}
  .closing-logo{width:70px;}

  .mobile-notice{padding:16px;gap:12px;}
  .mn-ic{width:34px;height:34px;}
  .mn-body h3{font-size:.94rem;}
  .mn-body p{font-size:.84rem;}

  .lead{font-size:.95rem;}
  .scene figcaption{font-size:.8rem;}
  .feature{padding-top:28px;padding-bottom:28px;}

  /* La cabecera puede quedarse con muy poco alto útil en horizontal */
  .nav-links{gap:0;}
}

/* Móvil en horizontal: la portada no necesita alto completo */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:40px;padding-bottom:48px;}
  .hero-logo{width:100px;}
}

/* Al tocar un botón desactivado, el aviso parpadea en vez de abrir nada */
html.is-mobile-device .mobile-notice.is-flash{
  animation:mn-flash 1s ease;
}
@keyframes mn-flash{
  0%,100%{border-color:rgba(251,191,36,.34);box-shadow:none;}
  25%{border-color:rgba(251,191,36,.9);box-shadow:0 0 0 4px rgba(251,191,36,.14);}
  60%{border-color:rgba(251,191,36,.6);box-shadow:0 0 0 2px rgba(251,191,36,.08);}
}