/* ============================================================
   Tarjeta de socia (js/tarjeta.js) — papel washi con toques rojos
   Todo se mide en "cqw" (ancho de la tarjeta): se ve igual en un celular, en la web y en grande.
   ============================================================ */
.pkt { --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 0%;
  --pkt-fuka: #34492E; --pkt-koke: #7F8B37; --pkt-shu: #B8432F; --pkt-tinta: #23271F; --pkt-gris: #6B7160;
  container-type: inline-size; position: relative; width: 100%; max-width: 520px; aspect-ratio: 1.586; border-radius: 22px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), box-shadow 0.35s;
  box-shadow: 0 34px 54px -26px rgba(0, 0, 0, 0.7), 0 10px 18px -12px rgba(0, 0, 0, 0.35);
  animation: pktSube 0.9s cubic-bezier(.16, 1, .3, 1) backwards; text-align: left; }
.pkt--mira { transition: transform 0.08s linear, box-shadow 0.35s; box-shadow: 0 44px 60px -26px rgba(0, 0, 0, 0.75), 0 12px 22px -12px rgba(0, 0, 0, 0.35); }
.pkt--grande { max-width: 640px; }
.pkt--mini { max-width: 360px; border-radius: 16px; }

.pkt__in { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; padding: 5.4cqw 6cqw 4.6cqw; color: var(--pkt-tinta);
  display: grid; grid-template-rows: auto 1fr auto; font-family: 'Zen Kaku Gothic New', system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 100%, transparent 2.6cqw, rgba(127, 139, 55, 0.11) 2.75cqw, transparent 2.95cqw, transparent 4.4cqw, rgba(127, 139, 55, 0.08) 4.55cqw, transparent 4.75cqw) 0 0 / 9.6cqw 4.8cqw,
    radial-gradient(120% 90% at 0% 0%, #FBFBF6 0%, #F1F2EC 48%, #E3E6D7 100%); }
/* grano de papel */
.pkt__in::before { content: ""; position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* marco rojo fino, con esquinas */
.pkt__marco { position: absolute; inset: 2.4cqw; border: 0.28cqw solid rgba(184, 67, 47, 0.55); border-radius: 2.6cqw; pointer-events: none; }
.pkt__marco::before, .pkt__marco::after { content: ""; position: absolute; width: 3.4cqw; height: 3.4cqw; border: 0.5cqw solid var(--pkt-shu); }
.pkt__marco::before { left: -0.9cqw; top: -0.9cqw; border-right: 0; border-bottom: 0; border-radius: 1.4cqw 0 0 0; }
.pkt__marco::after { right: -0.9cqw; bottom: -0.9cqw; border-left: 0; border-top: 0; border-radius: 0 0 1.4cqw 0; }
/* símbolo grande de agua */
.pkt__agua { position: absolute; right: -5cqw; bottom: -14cqw; width: 50cqw; height: auto; opacity: 0.08; transform: rotate(-10deg); pointer-events: none; }

.pkt__top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 3cqw; }
.pkt__marca { display: flex; align-items: center; gap: 2.2cqw; min-width: 0; }
.pkt__marca svg { width: 9.5cqw; height: 11.4cqw; flex: none; filter: drop-shadow(0 0.6cqw 0.8cqw rgba(35, 39, 31, 0.18)); }
.pkt__marca small { display: block; font-size: 1.75cqw; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--pkt-koke); }
.pkt__marca b { display: block; font-family: 'Shippori Mincho', Georgia, serif; font-weight: 700; font-size: 4.6cqw; line-height: 1.08; color: var(--pkt-fuka); margin-top: 0.6cqw; }
.pkt__hanko { flex: none; width: 15.5cqw; height: 15.5cqw; border-radius: 50%; display: grid; place-content: center; text-align: center; color: var(--pkt-shu);
  border: 0.7cqw solid var(--pkt-shu); box-shadow: 0 0 0 0.45cqw rgba(255, 255, 255, 0.6), inset 0 0 0 0.35cqw rgba(184, 67, 47, 0.25); background: rgba(255, 255, 255, 0.45);
  transform: rotate(-12deg); }
.pkt__hanko b { font-family: 'Shippori Mincho', Georgia, serif; font-weight: 800; font-size: 6.8cqw; line-height: 1; }
.pkt__hanko small { font-size: 1.55cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.4cqw; }

.pkt__medio { position: relative; align-self: end; min-width: 0; }
.pkt__rol { display: block; font-size: 1.8cqw; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: var(--pkt-shu); }
.pkt__nombre { font-family: 'Shippori Mincho', Georgia, serif; font-weight: 700; font-size: 6.4cqw; line-height: 1.06; color: var(--pkt-fuka); margin-top: 0.6cqw;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; max-width: 78%; }
.pkt__sellos { display: flex; align-items: center; gap: 1.3cqw; margin-top: 2.2cqw; }
.pkt__sellos i { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; border: 0.3cqw dashed rgba(52, 73, 46, 0.35); display: grid; place-items: center;
  font-style: normal; font-family: 'Shippori Mincho', Georgia, serif; font-weight: 800; font-size: 2.3cqw; color: transparent; }
.pkt__sellos i.si { border: 0.36cqw solid var(--pkt-shu); color: var(--pkt-shu); background: rgba(184, 67, 47, 0.08); transform: rotate(-10deg);
  animation: pktSello 0.5s cubic-bezier(.2, 1.6, .4, 1) backwards; animation-delay: calc(0.5s + var(--i, 0) * 0.09s); }
.pkt__sellos em { font-style: normal; font-weight: 700; font-size: 2.2cqw; color: var(--pkt-shu); }

.pkt__pie { position: relative; display: flex; align-items: flex-end; gap: 5cqw; margin-top: 2.6cqw; }
.pkt__pie small { display: block; font-size: 1.55cqw; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pkt-gris); }
.pkt__pie b { display: block; font-family: 'Shippori Mincho', Georgia, serif; font-weight: 700; font-size: 3.1cqw; color: var(--pkt-fuka); letter-spacing: 0.04em; }
.pkt__firma { margin-left: auto; width: 10.5cqw; height: 10.5cqw; border-radius: 50%; border: 0.45cqw solid var(--pkt-shu); color: var(--pkt-shu); display: grid; place-items: center;
  transform: rotate(9deg); opacity: 0.9; background: rgba(184, 67, 47, 0.05); }
.pkt__firma i { font-style: normal; font-family: 'Shippori Mincho', Georgia, serif; font-weight: 800; font-size: 2.5cqw; writing-mode: vertical-rl; letter-spacing: 0.04em; line-height: 1; }

/* mariposa que cruza volando y se posa un momento sobre el sello del nivel */
.pkt__vuela { position: absolute; left: 0; top: 0; width: 6.4cqw; height: 5.4cqw; z-index: 2; pointer-events: none; opacity: 0;
  animation: pktVuela 15s ease-in-out 1.2s infinite; filter: drop-shadow(0 1.2cqw 0.8cqw rgba(35, 39, 31, 0.22)); }
.pkt__vuela svg { width: 100%; height: 100%; display: block; animation: pktAleteo 0.28s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes pktVuela {
  0% { opacity: 0; transform: translate(-8cqw, 44cqw) rotate(18deg); }
  6% { opacity: 1; }
  22% { transform: translate(22cqw, 26cqw) rotate(8deg); }
  36% { transform: translate(50cqw, 32cqw) rotate(-6deg); }
  48%, 64% { transform: translate(73.5cqw, 2.5cqw) rotate(-14deg); }
  80% { transform: translate(90cqw, -1cqw) rotate(10deg); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translate(108cqw, -10cqw) rotate(20deg); }
}
@keyframes pktAleteo { from { transform: scaleX(1); } to { transform: scaleX(0.32); } }

/* brillo: una pasada cada tanto y un reflejo que sigue al mouse */
.pkt__brillo { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: soft-light;
  background: radial-gradient(60% 70% at var(--mx) var(--my), rgba(255, 255, 255, 0.9), transparent 60%); opacity: 0; transition: opacity 0.3s; }
.pkt--mira .pkt__brillo { opacity: 1; }
.pkt__in::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 36%; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: pktPasa 7s ease-in-out 2s infinite; }
@keyframes pktPasa { 0%, 70% { left: -60%; } 100% { left: 140%; } }
@keyframes pktSube { from { opacity: 0; transform: perspective(900px) translateY(18px) rotateX(10deg); } }
@keyframes pktSello { from { opacity: 0; transform: scale(1.8) rotate(-30deg); } }

@media (prefers-reduced-motion: reduce) {
  .pkt, .pkt__vuela, .pkt__vuela svg, .pkt__in::after, .pkt__sellos i.si { animation: none !important; }
  .pkt__vuela { opacity: 1; transform: translate(73.5cqw, 2.5cqw) rotate(-14deg); }
}