/* webapp-cta.css — la acción de la web con la webapp abierta (`web/templates/_webapp_cta.html`):
   «Empieza gratis» en el ordenador, la tienda del sistema en el teléfono. Qué variante se ve lo
   decide el CSS en línea de `cabeza()` (`_chrome.html`), no esta hoja.

   Fichero APARTE de ds2.css a propósito: solo se publica con el interruptor de la
   webapp encendido (`web/data/webapp.json`), y así ds2.css —cuyo hash va en el
   `?v=` de las ~1.100 páginas y de la landing— no cambia con el interruptor
   apagado. No hay hex: solo los tokens de ds2.css (`--block`, `--on-block`,
   `--ink`, `--muted`, `--mono`, `--step-*`).

   La acción vive siempre sobre una placa clara (`.cta-plate`, `.cta-news-plate`,
   `.cta-inline-acts`, el muro del examen), nunca sobre el bloque pintado: el
   `.btn-1` normal (relleno de bloque) es el que se lee. Los selectores llevan
   `.webapp-cta` delante para ganarle a `.cta p`, que pinta de tinta de bloque. */
.webapp-cta { display: grid; justify-items: center; gap: .45rem;
  flex: 1 1 100%; inline-size: 100%; text-align: center; }
.webapp-cta a.webapp-btn { padding: .85rem 1.9rem; font-size: var(--step-0); font-weight: 700;
  letter-spacing: -.01em; color: var(--on-block); text-decoration: none; }
.webapp-cta a.webapp-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
/* La letra pequeña, en la sans y separada del botón (pegada a él se leía como parte del botón). */
.webapp-cta .webapp-sub { margin: 0; max-inline-size: none; color: var(--muted);
  font-size: .88rem; line-height: 1.45; text-wrap: balance; }
/* Las tres salidas: la webapp (botón + letra pequeña) y, tras una raya, las dos tiendas. */
.webapp-cta .webapp-web, .webapp-cta .webapp-apps { display: grid; justify-items: center; gap: .6rem; }
.webapp-cta .webapp-insignias { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.webapp-cta .webapp-insignias img { display: block; block-size: 44px; inline-size: auto; }
.webapp-cta .webapp-insignias a { border-radius: 8px; }
.webapp-cta .webapp-insignias a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
/* Dos mitades iguales, la raya en el centro, y cada salida centrada en la suya: el botón con su
   letra pequeña a un lado y las tiendas con la suya al otro (Oriol 26-10: alineadas a la
   izquierda quedaban descolocadas en una placa ancha). */
@media (min-width: 700px) {
  .webapp-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    column-gap: clamp(1.75rem, 4vw, 3rem); }
  .webapp-cta .webapp-web { justify-items: center; text-align: center; }
  .webapp-cta .webapp-apps { justify-items: center; text-align: center;
    padding-inline-start: clamp(1.75rem, 4vw, 3rem); border-inline-start: 1px solid var(--cline); }
  .webapp-cta .webapp-insignias { justify-content: center; }
}
@media (max-width: 699px) {
  .webapp-cta .webapp-apps { padding-block-start: .9rem; border-block-start: 1px solid var(--cline); inline-size: 100%; }
  .webapp-cta a.webapp-btn { inline-size: 100%; }
}
/* En el muro del examen la fila es `flex` y centrada: la acción ocupa la primera línea. */
.q-wall-row .webapp-cta { margin-bottom: .2rem; }
/* En el hero de la portada (`.p-cta`) la acción va a la izquierda, bajo el argumento, y más grande;
   las tiendas las enseña la franja multiplataforma de debajo. */
.p-cta .webapp-cta { display: grid; grid-template-columns: auto; justify-content: start; justify-items: start; text-align: left; gap: .35rem; }
.p-cta .webapp-cta .webapp-web { justify-items: start; text-align: left; }
.p-cta .webapp-cta a.webapp-btn { inline-size: auto; padding: 1.05rem 2.4rem; font-size: var(--step-1);
  border-radius: 6px; box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--block) 80%, transparent); }
@media (max-width: 520px) {
  .p-cta .webapp-cta a.webapp-btn { inline-size: 100%; }
}
/* La placa del cierre (`.cta-plate`, 520 px) se ensancha cuando lleva las tres salidas, para que la
   webapp y las dos tiendas quepan en una fila. */
.cta-plate:has(.webapp-apps) { max-inline-size: 860px; padding: 1.6rem 1.8rem 1.4rem; }
/* En el hero las tiendas no van junto al botón: las enseña la franja multiplataforma de debajo. */
.p-cta .webapp-cta .webapp-apps { display: none; }

/* En el hero de /metodologia/ (`.mt-cta`) la acción va sola, a la izquierda: las tiendas las
   ofrece el cierre de la página. */
.mt-cta .webapp-cta { display: grid; grid-template-columns: auto; justify-content: start; justify-items: start; text-align: left; gap: .35rem; }
.mt-cta .webapp-cta .webapp-web { justify-items: start; text-align: left; }
.mt-cta .webapp-cta a.webapp-btn { inline-size: auto; padding: 1rem 2.2rem; font-size: var(--step-1); border-radius: 6px;
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--block) 80%, transparent); }
.mt-cta .webapp-cta .webapp-apps { display: none; }
@media (max-width: 520px) { .mt-cta .webapp-cta a.webapp-btn { inline-size: 100%; } }
/* En el teléfono, la letra pequeña del botón de la tienda («Tu cuenta vale también en el ordenador»)
   repetía la franja multiplataforma que va justo debajo: en el hero sobra (Oriol 26-10). */
.p-cta .webapp-cta .webapp-sub.acc-tel { display: none; }