/* =============================================================
   TapUp · La tarjeta de metal, dibujada (24 sep 2026)

   Una sola pieza de CSS para los tres lugares donde se enseña: la
   portada (el personalizador), el dashboard (sección Tarjeta) y el
   perfil público (/t/<id>). Negra o gris, con el grabado en el tono
   que deja el láser: plata sobre la negra, grafito sobre la gris.

   Medida real: 85.6 × 54 mm (ISO 7810, la de una tarjeta bancaria).

   El brillo sigue al dedo con --mx/--my, que pone js/metal.js. Sin JS
   la tarjeta se ve igual, sólo que quieta.
   ============================================================= */

.metal {
  --mx: 30%;
  --my: 20%;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 85.6 / 54;
  perspective: 1200px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
}

.metal__giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .8s cubic-bezier(.2, .9, .25, 1.15);
}
.metal.is-volteada .metal__giro { transform: rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); }
.metal.is-siguiendo .metal__giro { transition: transform .12s linear; }

.metal__cara {
  position: absolute;
  inset: 0;
  border-radius: 4.6% / 7.3%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 7% 7.5%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--metal-fondo);
  color: var(--metal-grabado);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 -1px 0 rgba(0, 0, 0, .35) inset,
    0 24px 48px -18px rgba(15, 12, 40, .55),
    0 6px 14px -6px rgba(15, 12, 40, .35);
}
.metal__reverso { transform: rotateY(180deg); }

/* 28 sep 2026: «al girarla se transparenta el frente en el reverso».
   `backface-visibility` no basta en todos los navegadores (Safari se lo
   salta con los hijos que tienen su propia capa: el brillo con
   mix-blend-mode, el texto que se «graba» con animación). Así que
   además cada cara se oculta a la mitad del giro: la que se va
   desaparece cuando queda de canto, y la que llega aparece en ese
   mismo instante. Nunca se ven las dos. */
.metal__cara * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.metal__frente { visibility: visible; transition: visibility 0s linear .22s; }
.metal__reverso { visibility: hidden; transition: visibility 0s linear .22s; }
.metal.is-volteada .metal__frente { visibility: hidden; }
.metal.is-volteada .metal__reverso { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .metal__frente, .metal__reverso { transition: none; }
}

/* El cepillado del metal y el brillo que sigue al dedo. */
.metal__cara::before,
.metal__cara::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.metal__cara::before {
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .025) 0 1px, rgba(0, 0, 0, .03) 1px 2px, transparent 2px 3px);
  mix-blend-mode: overlay;
}
.metal__cara::after {
  background: radial-gradient(circle at var(--mx) var(--my),
    rgba(255, 255, 255, var(--metal-brillo)) 0%, transparent 55%);
  mix-blend-mode: soft-light;
  transition: background .2s;
}

.metal--negra {
  --metal-fondo:
    linear-gradient(135deg, #2b2b30 0%, #121215 38%, #1d1d22 62%, #0b0b0d 100%);
  --metal-grabado: #d9dce2;
  --metal-grabado-suave: #9ea3ad;
  --metal-brillo: .38;
}
.metal--gris {
  --metal-fondo:
    linear-gradient(135deg, #b9bcc3 0%, #8a8e96 36%, #a6a9b0 60%, #6f737b 100%);
  --metal-grabado: #26282d;
  --metal-grabado-suave: #3e4148;
  --metal-brillo: .55;
}

/* El grabado: un poco hundido, como queda con láser. */
.metal__grabado {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 -1px 0 rgba(0, 0, 0, .35);
}
.metal--gris .metal__grabado { text-shadow: 0 1px 0 rgba(255, 255, 255, .35), 0 -1px 0 rgba(0, 0, 0, .15); }

.metal__arriba {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
/* 28 sep 2026: la empresa es la letra más grande de la tarjeta; el
   nombre (opcional) va abajo y más chico. */
.metal__empresa {
  font-size: clamp(1.05rem, 7cqi, 1.75rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
  color: var(--metal-grabado);
  max-width: 82%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metal__nfc { width: 9%; min-width: 18px; color: var(--metal-grabado-suave); }
.metal__nfc svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.metal__abajo { margin-top: auto; }
.metal__nombre {
  display: block;
  font-size: clamp(.74rem, 4cqi, 1.05rem);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metal__puesto {
  display: block;
  margin-top: .3em;
  font-size: clamp(.62rem, 3.3cqi, .88rem);
  color: var(--metal-grabado-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metal { container-type: inline-size; }

/* El reverso (28 sep 2026): el diseño de la ficha rev 6, dibujado en
   milímetros por js/metal.js. Sin padding: el SVG ocupa la cara entera
   y trae sus propias posiciones. En la negra el QR va «positivo» (el
   láser quita la pintura del cuadro y los módulos quedan negros); en
   la gris los módulos se marcan oscuros directo sobre el acero. */
.metal__reverso { padding: 0; }
.metal__arte { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.metal__arte-grabado { fill: var(--metal-grabado); }
.metal__qr-fondo { fill: var(--metal-grabado); }
.metal__qr-modulos { fill: #17171B; }
.metal--gris .metal__qr-fondo { fill: none; }
.metal--gris .metal__qr-modulos { fill: var(--metal-grabado); }
.metal__codigo {
  fill: var(--metal-grabado);
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 3.57px;
  letter-spacing: .02em;
}

/* Recién escrito: el grabado «se enciende» como un pase de láser. */
.metal__grabado.is-grabando { animation: metal-laser .6s ease-out; }
@keyframes metal-laser {
  0% { filter: brightness(2.2) drop-shadow(0 0 6px rgba(255, 220, 160, .9)); }
  100% { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .metal__giro, .metal__cara::after { transition: none; }
  .metal__grabado.is-grabando { animation: none; }
}