/*! MyKlub · © 2026 Josep Argelés i Freixas · Tots els drets reservats.
 *  Programari propietari. Queda prohibida la còpia, la distribució, la modificació
 *  i l'ús, totals o parcials, sense autorització escrita del titular.
 *  Proprietary software. All rights reserved · myklub.app/LICENSE.txt · info@myklub.app
 */
/* La pantalla d'entrada de la PRIMERA VEGADA, a la Family i al Coach (en Pep, 8/10/2026: «que totes les
   primeres vegades siguin com el portal d'accés»). Quan encara no se sap de quin club és la persona, el disseny
   del portal —la K i el nom a dalt, la targeta en forma de núvol, els punts del fons i el peu— damunt del
   color de cada app. Quan se sap el club, l'app treu la classe `mk-primera` i surten l'escut i el nom.
   El marcatge (`.mkp-nav`, `.mkp-punts`, `.mkp-peu`, `.mkp-card`) és a cada app; aquí només hi ha l'aspecte. */
.mkp-nav, .mkp-peu, .mkp-punts { display: none; }

.mk-primera .mkp-punts {
  display: block; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.20) 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.12) 1.7px, transparent 2.3px),
    radial-gradient(circle, rgba(255,255,255,.16) .8px, transparent 1.3px);
  background-size: 137px 151px, 211px 173px, 89px 103px;
  background-position: 13px 29px, 71px 97px, 41px 7px;
}

.mk-primera .mkp-nav {
  display: flex; align-items: center; gap: 10px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 2;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 22px 16px;
}
.mkp-nav img { width: 36px; height: 36px; flex-shrink: 0; display: block; }
.mkp-nom { font-size: 17px; font-weight: 900; color: #fff; letter-spacing: -.5px; line-height: 1; }
.mkp-sub { font-size: 9px; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: .6px; text-transform: uppercase; margin-top: 3px; }

.mk-primera .mkp-peu {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  text-align: center; color: rgba(255,255,255,.7);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}

/* La targeta, en forma de núvol: dues bombolles blanques per damunt de la vora. */
.mk-primera .mkp-card {
  position: relative; z-index: 1;
  border-radius: 60px !important;
  padding: 48px 34px 40px !important;
  max-width: 400px;
}
.mk-primera .mkp-card::before,
.mk-primera .mkp-card::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.mk-primera .mkp-card::before { width: 120px; height: 90px; top: -40px; left: 50px; }
.mk-primera .mkp-card::after { width: 90px; height: 70px; top: -30px; right: 60px; }
.mk-primera .mkp-card > * { position: relative; z-index: 1; }