/* *********************************************************** */
/* Desarrollado por Herlin R. Espinosa G. (herlin25@gmail.com) */
/* *********************************************************** */

/* Página pública de la aplicación móvil (/mobile-app).

   Se carga DESPUÉS de welcome.css, features.css y appdownload.css, y solo
   agrega lo propio de esta pantalla: las insignias de tienda del hero, la
   rejilla de las tres tarjetas de descarga y el enlace a la política de
   privacidad. Todo lo demás —topbar, hero, tarjetas de capacidades, chips,
   footer— sale de aquellos, incluidas las variables --wel-*.

   ⚠️ Los retoques a .app-card y compañía van SIEMPRE acotados a .mba-downloads:
      esas clases son de /appdownload, que sigue viéndose como estaba. */

/* ===================== Insignias de tienda del hero ===================== */
/* .store-button viene de appdownload.css con `width:100%; max-width:280px`,
   pensado para una columna: en la fila del hero hay que acotarlo o las dos
   insignias se comen el ancho. */
.mba-hero-stores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem 1rem;
    margin-top: 1.6rem;
}

.mba-hero-stores .store-button {
    width: auto;
    max-width: none;
    margin: 0;
}

.mba-hero-stores .store-button-img {
    width: auto;
    max-width: none;
    height: 46px;
}

/* ===================== Descarga ===================== */
.mba-download-title {
    margin-bottom: .4rem;
}

.mba-download-subtitle {
    margin: 0 auto 1.5rem;
    max-width: 620px;
    text-align: center;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--wel-muted);
}

/* Tope de 3 columnas con la misma técnica del resto de rejillas del proyecto:
   el mínimo de cada pista no baja de 1/3 del contenedor (menos los 2 huecos),
   así que no cabe una cuarta; por debajo mandan los 280px y quedan 2 y 1.
   El -1px absorbe el redondeo a subpíxel.
   🔴 No se usan las columnas de Bootstrap (`col-lg-5`) de /appdownload: ahí son
   dos tarjetas y media y la tercera cae suelta; aquí las tres van en línea. */
.mba-downloads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 3rem) / 3 - 1px)), 1fr));
    gap: 1.5rem;
}

/* La tarjeta de /appdownload flota sobre el gris de la aplicación; aquí convive
   con las tarjetas claras de la página pública, así que toma su borde, su
   sombra y sus colores de texto. */
.mba-downloads .app-card {
    padding: 2rem 1.5rem;
    border: 1px solid var(--wel-border);
    border-radius: 16px;
    box-shadow: var(--wel-shadow);
}

.mba-downloads .app-card:hover {
    box-shadow: var(--wel-shadow-hover);
    border-color: #cfe0f5;
}

.mba-downloads .app-title {
    font-size: 1.3rem;
    color: var(--wel-navy);
}

/* min-height = 2 líneas (line-height 1.6 → 3.2em): la descripción de iOS ocupa
   una y las otras dos, así que sin esto el QR y el botón de esa tarjeta suben
   24px respecto a los de sus vecinas. */
.mba-downloads .app-description {
    min-height: 3.2em;
    margin-bottom: 1.5rem;
    color: var(--wel-muted);
}

/* El QR no necesita 250px en una tarjeta de ~350px. */
.mba-downloads .qr-image {
    max-width: 190px;
}

/* El icono de la aplicación web ocupa lo mismo que el QR de las otras dos
   tarjetas: si no, su recuadro es ~70px más bajo y el botón "Instalar" queda a
   otra altura que las insignias de las tiendas, en la misma fila. */
.mba-downloads .pwa-icon {
    width: 190px;
    height: 190px;
}

/* ===================== Política de privacidad ===================== */
/* Va dentro del bloque "Antes de instalarla": es lo último que alguien quiere
   comprobar antes de dar permisos de cámara y ubicación. */
.mba-privacy {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    color: var(--wel-blue);
    font-weight: 600;
    font-size: .93rem;
    text-decoration: none;
}

.mba-privacy:hover,
.mba-privacy:focus {
    color: var(--wel-navy);
    text-decoration: underline;
}

/* ===================== Responsive ===================== */
@media (max-width: 575.98px) {
    .mba-hero-stores .store-button-img {
        height: 40px;
    }

    .mba-downloads {
        gap: 1.15rem;
    }

    .mba-downloads .app-card {
        padding: 1.6rem 1.2rem;
    }

    /* Objetivo táctil mínimo de 44px, el mismo criterio del resto de la app. */
    .mba-privacy {
        min-height: 44px;
    }
}