/* =========================================================
   1. ESTRUCTURA GENERAL — MÓVIL
   El portal ocupa como mínimo toda la altura visible.
   ========================================================= */

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  min-height: 100svh;

  overflow-x: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   2. PORTAL — MÓVIL
   Reducimos los márgenes del diseño de escritorio para
   aprovechar mejor el ancho disponible.
   ========================================================= */

.portal {
  width: 100%;
  min-height: 100svh;

  padding: 18px 16px;
}

/* =========================================================
   3. POMPAS CUÁNTICAS — MÓVIL
   Reducimos su tamaño para disponer de un campo de
   flotación más amplio en pantallas estrechas.
   ========================================================= */

.portal__app {
  width: clamp(140px, 42vw, 165px);
}

/* =========================================================
   4. CAMPO DE APLICACIONES — MÓVIL
   Reservamos una zona de flotación amplia para que las
   pompas puedan moverse sin invadir cabecera ni pie.
   ========================================================= */

.portal__apps {
  min-height: 430px;
}

/* =========================================================
   5. MÓVIL EN HORIZONTAL
   Reducimos la altura del campo de flotación para evitar
   que las pompas desaparezcan por debajo de la pantalla.
   ========================================================= */

@media (max-height: 500px) and (orientation: landscape) {
  .portal__apps {
    min-height: 190px;
    transform: translateY(-12px);
  }

  .portal__app {
    width: clamp(110px, 18vw, 140px);
  }

  .portal {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .portal__hint {
    transform: translateY(-8px);
  }
}