/* Teléfono del contacto y hoja «Llévate mi tarjeta» (Wallet) */

.tel {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; margin: 4px 0 -6px;
  font: 500 14px/1 var(--mono); letter-spacing: .03em; color: #64ffc3; text-decoration: none;
}
.tel svg { width: 15px; height: 15px; flex: none; }
.tel:hover span { text-decoration: underline; text-underline-offset: 4px; }
.tel:focus-visible { outline: 2px solid var(--ph); outline-offset: 3px; border-radius: 4px; }

.wallet {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(2, 6, 12, .62);
  opacity: 0; transition: opacity .3s;
}
.wallet[hidden] { display: none; }
.wallet.on { opacity: 1; }
.wsheet {
  position: relative; width: 100%; max-width: 440px; max-height: 100svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 18px max(20px, env(safe-area-inset-bottom, 0px));
  border: 1px solid #374c60; border-bottom: 0; border-radius: 20px 20px 0 0;
  background: linear-gradient(145deg, #121f2d, #060e18);
  box-shadow: inset 0 1px rgba(218, 236, 255, .08), 0 -20px 60px rgba(0, 0, 0, .55);
  transform: translateY(40px); transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.wallet.on .wsheet { transform: none; }
.wsheet h3 { margin: 6px 0 16px; font: 600 22px/1.15 var(--sans); letter-spacing: -.01em; }
.wx {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: #adc0d0; cursor: pointer;
}
.wx svg { width: 20px; height: 20px; }
.wx:hover { background: rgba(255, 255, 255, .06); }
.wx:focus-visible, .walt a:focus-visible, .wacts a:focus-visible { outline: 2px solid var(--ph); outline-offset: 2px; }

/* la tarjeta, tal y como sale en Wallet */
.pass {
  position: relative; overflow: hidden; margin-bottom: 16px; padding: 13px 0 16px;
  border-radius: 14px; background: #060a10; color: #fff;
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  font-family: -apple-system, system-ui, var(--sans);
}
.pass small {
  display: block; margin-bottom: 2px;
  font-size: 9.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.pass-h { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; font-size: 14px; font-weight: 600; }
.pass-l { display: flex; align-items: center; gap: 9px; }
.pass-l img { width: 26px; height: 26px; }
.pass-r { text-align: right; font-weight: 600; font-size: 15px; }
.pass-strip {
  display: flex; align-items: flex-end; margin: 11px 0 13px; aspect-ratio: 1125 / 432;
  background: url(assets/wallet-strip.png) center / cover no-repeat;
}
.pass-strip div { padding: 0 15px 9px; }
.pass-strip b { display: block; font-size: 23px; font-weight: 300; line-height: 1.1; text-shadow: 0 1px 10px #060a10; }
.pass-f { padding: 0 82px 0 15px; font-size: 14px; line-height: 1.3; }
.pass-qr {
  position: absolute; right: 15px; bottom: 15px; width: 50px; height: 50px;
  padding: 3px; border-radius: 4px; background: #fff;
}

.wacts { display: grid; gap: 10px; }
.wacts:empty { display: none; }
.wacts .btn { border-radius: 9px; font-size: 14.5px; text-align: center; }
.wacts .btn.pri { background: #64ffc3; color: #052116; }
.walt { margin-top: 12px; font: 400 12px/1.5 var(--mono); color: #93a6b8; text-align: center; text-wrap: balance; }
.walt a { color: #d9ffe6; text-underline-offset: 3px; }

@media (min-width: 920px) {
  .wallet { align-items: center; }
  .wsheet { border-bottom: 1px solid #374c60; border-radius: 18px; padding: 24px; max-height: calc(100svh - 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .wallet, .wsheet { transition: none; }
}