/*
 * El camino de descarga (orden W2, 2026-11-12): la base de todo `<dialog>` de la web, el diálogo
 * `#download-dialog` (el mismo en la portada y en planes) y las insignias OFICIALES de las tiendas
 * (el diálogo y la fila `.hero-stores` de la portada). Lo cargan las dos páginas después de su CSS.
 * Ningún color se escribe aquí: se leen los tokens de `wp-theme.css` (`tests/jest/web/siteTheme.test.ts`).
 */

/* ── Diálogo: la base ── */
body.modal-open {
    overflow: hidden;
}
dialog {
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    padding: 32px;
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-hero);
    background: var(--wp-card);
    color: var(--wp-ink);
    box-shadow: var(--wp-float-sh);
}
dialog::backdrop {
    background: var(--wp-scrim);
}
.dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--wp-line);
    border-radius: 22px;
    background: var(--wp-card);
    color: var(--wp-ink);
}
.dialog-close svg {
    width: 20px;
    height: 20px;
}

/* ── Diálogo de descarga ── */
.download-dialog {
    width: 460px;
}
.download-dialog > img {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 14px;
}
.download-dialog h2 {
    margin: 16px 0 0;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}
.download-dialog h2 em {
    display: inline;
    font-family: var(--wp-serif);
    font-size: 1.08em;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--wp-acc);
}
.download-dialog > p {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--wp-ink2);
}
/* El QR necesita fondo claro en los dos modos: `--wp-qr` vale lo mismo en claro y en oscuro. */
.download-qr {
    display: grid;
    place-items: center;
    width: 188px;
    height: 188px;
    margin-top: 18px;
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-tile);
    background: var(--wp-qr);
}
.download-qr img {
    display: block;
    width: 168px;
    height: 168px;
    max-width: none;
}
.download-dialog .store-badges {
    margin-top: 18px;
}
.download-dialog .dialog-note {
    margin-top: 16px;
    font-size: 13px;
}
.inline-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-weight: 700;
    color: var(--wp-accink);
}
.inline-link svg {
    width: 20px;
    height: 20px;
}

/* ── Insignias de las tiendas: las oficiales, sin recolorear ni recortar ──
   Cada `<a>` lleva su insignia en los tres idiomas (`data-wp-v`); `site-footer.css` deja ver sólo
   la del `<html lang>`. Apple: 44 px de alto (el SVG no trae margen). Google: el PNG (646×250) trae
   su margen de respeto DENTRO, y no el mismo en cada idioma (medido con sharp, alfa > 16): en inglés
   el dibujo ocupa 564×168 con 41 px a cada lado; en español y portugués, 646×192 con 29 px arriba y
   abajo. Se escala para que el DIBUJO mida 44 px y el margen se devuelve con un margen negativo:
   las dos insignias se ven del mismo alto y alineadas, y la zona táctil del enlace es de 44 px. */
.store-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.store-badge {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.store-badge img {
    display: block;
    width: auto;
    max-width: none;
    height: 44px;
}
.badge-google img[data-wp-v='en'] {
    height: calc(44px * 250 / 168);
    margin: calc(-44px * 41 / 168);
}
.badge-google img[data-wp-v='es'],
.badge-google img[data-wp-v='pt'] {
    height: calc(44px * 250 / 192);
    margin: calc(-44px * 29 / 192) 0;
}

@media (max-width: 720px) {
    .download-dialog {
        padding: 28px 22px;
    }
    /* En el teléfono el QR no sirve (se le apunta CON el teléfono): quedan las insignias. */
    .download-qr {
        display: none;
    }
}