/* EXPPO XV · acceso holográfico vertical (acceso.js), FULL ART: el arte (arte-1074, chica anime + gato EXPPO) cubre la
   tarjeta 2:3 de orilla a orilla, también detrás del talón, oscurecido con degradados para que se lea. Sin bordes alrededor
   de la tarjeta ni del talón (sólo un brillo holográfico sutil en el canto); el único recuadro blanco es el del QR, con un
   filo fino del color del tipo. El color del tipo (--ta) va en textos y halos; --tb es el segundo tono del holograma.
   Muescas a los lados sobre la perforación (58 % del alto). Todo se mide en --u = 1 % del ancho del acceso (1cqw; acceso.js
   lo pone en px si el navegador no tiene container queries), así se ve igual en cualquier ancho. */
.xa{--u:1cqw;--ta:#E8ECF2;--tb:#9AA4B2;--ta6:rgba(232,236,242,.6);--ta55:rgba(232,236,242,.55);--ta45:rgba(232,236,242,.45);--ta25:rgba(232,236,242,.25);--ta15:rgba(232,236,242,.15);--tb45:rgba(154,164,178,.45);
  --xa-negro:#07050a;--xa-gris:#ada5b4;--xa-claro:#f4f0f6;--xa-perf:58%;--xa-muesca:calc(var(--u)*4.4);
  container-type:inline-size;position:relative;display:grid;justify-items:center;gap:14px;width:100%;min-width:0;box-sizing:border-box}
.xa *,.xa *::before,.xa *::after{box-sizing:border-box}
.xa :where(p,ul,li){margin:0}

.xa-flota{width:100%;animation:xa-flotar 6.5s ease-in-out infinite}
.xa-escena{--px:50;--py:50;--k:0;position:relative;width:100%;aspect-ratio:2/3;perspective:1200px;perspective-origin:50% 45%;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  border-radius:calc(var(--u)*5);outline:none}
.xa-escena:active{cursor:grabbing}
.xa-escena:focus-visible{outline:3px solid var(--gold,#D4A857);outline-offset:6px}
.xa-carta{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.xa-cara{position:absolute;inset:0;border-radius:calc(var(--u)*5);-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:visible}
.xa-reverso{transform:rotateY(180deg)}
.xa-escena[data-lado="frente"] .xa-reverso,.xa-escena[data-lado="reverso"] .xa-frente{visibility:hidden}

/* Halo del color del tipo detrás de la tarjeta (al voltear quedaría encima del reverso: se apaga) y sombra en el piso. */
.xa-halo{position:absolute;inset:5% 4%;border-radius:calc(var(--u)*10);background:var(--ta);filter:blur(calc(var(--u)*7));opacity:.26;transform:translateZ(calc(var(--u)*-6));pointer-events:none}
.xa-escena[data-lado="reverso"] .xa-halo{opacity:0}
.xa-sombra{position:absolute;left:14%;right:14%;bottom:calc(var(--u)*-7);height:calc(var(--u)*6);border-radius:50%;background:radial-gradient(closest-side,var(--ta45),transparent);filter:blur(calc(var(--u)*2));opacity:.75;pointer-events:none;animation:xa-sombra 6.5s ease-in-out infinite}

/* Fondo con las muescas (máscara) y capas: arte, velo negro, tinte del tipo, holograma, chispas y reflejo. */
.xa-fondo{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate;background:var(--xa-negro);
  -webkit-mask:radial-gradient(circle var(--xa-muesca) at 0 var(--xa-perf),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--xa-muesca) at 100% var(--xa-perf),#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--xa-muesca) at 0 var(--xa-perf),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--xa-muesca) at 100% var(--xa-perf),#0000 97%,#000) right/51% 100% no-repeat}
.xa-fondo>i{position:absolute;inset:0;pointer-events:none}
/* Arte a sangre: 176 % del ancho (la tarjeta 2:3 es más angosta que el arte), corrido para que la cara de la chica quede
   centrada entre la sede y la perforación y el gato asome detrás del QR; cubre de orilla a orilla (arriba, bajo el velo oscuro de "Acceso
   oficial") hasta abajo. En el reverso, el mismo arte SIN espejo (la diadema "EXPPO" del gato se lee bien) y más oscuro:
   la cara del reverso ya va girada 180° (rotateY) y al voltear la tarjeta se ve al derecho, así que no lleva scaleX(-1). */
.xa-arte{position:absolute;left:calc(var(--u)*-37);top:0;width:calc(var(--u)*176);max-width:none;height:auto;aspect-ratio:1074/932;display:block;pointer-events:none;-webkit-user-drag:none}
.xa-reverso .xa-arte{filter:saturate(.85)}
/* Velo: oscuro arriba (logo, fecha y sede legibles), la cara libre y, desde la perforación, el talón oscurecido (el arte
   se sigue viendo detrás de los datos y del QR). */
.xa-velo{background:
  linear-gradient(to bottom,rgba(7,5,10,.94) 0,rgba(7,5,10,.8) calc(var(--u)*10),rgba(7,5,10,.62) calc(var(--u)*30),rgba(7,5,10,.5) calc(var(--u)*50),rgba(7,5,10,.12) calc(var(--u)*60),rgba(7,5,10,0) calc(var(--u)*66),
    rgba(7,5,10,0) calc(var(--u)*80),rgba(7,5,10,.42) calc(var(--u)*86),rgba(7,5,10,.76) calc(var(--u)*93),rgba(7,5,10,.84) calc(var(--u)*110),rgba(7,5,10,.88) 100%),
  linear-gradient(to right,rgba(7,5,10,.35) 0,rgba(7,5,10,0) 45%)}
.xa-velo-rev{background:linear-gradient(to bottom,rgba(7,5,10,.84),rgba(7,5,10,.8) 45%,rgba(7,5,10,.88)),radial-gradient(90% 40% at 50% 34%,var(--ta15),transparent 70%)}
.xa-tinte{background:radial-gradient(90% 26% at 50% 0,var(--tb45),transparent 70%),radial-gradient(70% 30% at 50% 100%,var(--ta15),transparent 70%);mix-blend-mode:screen;opacity:.32}
.xa-fondo>.xa-foil{inset:-25%;background:linear-gradient(115deg,transparent 16%,rgba(255,0,200,.75) 28%,rgba(255,230,0,.75) 37%,rgba(0,255,160,.75) 46%,rgba(0,184,255,.75) 55%,rgba(162,75,255,.75) 64%,transparent 76%);
  background-size:230% 230%;background-position:calc(var(--px)*1%) calc(var(--py)*1%);mix-blend-mode:color-dodge;opacity:calc(var(--k)*.18)}
.xa-chispa{mix-blend-mode:screen;opacity:.3;background-image:
  radial-gradient(circle at 12% 20%,#fff 0 calc(var(--u)*.35),transparent calc(var(--u)*.8)),radial-gradient(circle at 86% 14%,var(--ta) 0 calc(var(--u)*.35),transparent calc(var(--u)*.8)),
  radial-gradient(circle at 72% 40%,#fff 0 calc(var(--u)*.28),transparent calc(var(--u)*.65)),radial-gradient(circle at 20% 50%,var(--tb) 0 calc(var(--u)*.35),transparent calc(var(--u)*.8)),
  radial-gradient(circle at 90% 47%,#fff 0 calc(var(--u)*.3),transparent calc(var(--u)*.7)),radial-gradient(circle at 7% 33%,#fff 0 calc(var(--u)*.26),transparent calc(var(--u)*.6)),
  radial-gradient(circle at 60% 52%,var(--ta) 0 calc(var(--u)*.3),transparent calc(var(--u)*.7));animation:xa-titilar 2.8s ease-in-out infinite alternate}
.xa-brillo{background:radial-gradient(farthest-corner circle at calc(var(--px)*1%) calc(var(--py)*1%),rgba(255,255,255,.34) 0,var(--ta15) 22%,transparent 52%);mix-blend-mode:screen;opacity:calc(.06 + var(--k)*.26)}
/* Canto: sin borde; sólo un brillo holográfico sutil (anillo de 1.5 px en arcoíris que gira con la inclinación), recortado
   con las mismas muescas. */
.xa-borde{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  -webkit-mask:radial-gradient(circle var(--xa-muesca) at 0 var(--xa-perf),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--xa-muesca) at 100% var(--xa-perf),#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--xa-muesca) at 0 var(--xa-perf),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--xa-muesca) at 100% var(--xa-perf),#0000 97%,#000) right/51% 100% no-repeat}
.xa-borde::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from calc(var(--px)*3.6deg),#ff4fd8,#ffd36b,#7dffb8,#22e6ff,#a974ff,#ff4fd8);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  mix-blend-mode:screen;opacity:calc(.16 + var(--k)*.3)}

/* Brillo en reposo: sin tinte (foil en 0), sólo un destello al inclinar (--k).
   Safari/WebKit (iPhone, iPad, Mac; acceso.js pone .xa-wk, y @supports cubre iOS aunque falte la clase) no mezcla
   mix-blend-mode en las capas de la tarjeta 3D (backface-visibility, preserve-3d): el arcoíris del foil y el tinte se
   pintaban normales encima del arte, un velo verde y azul que se comía el rojo y el rosa. Ahí no hay foil ni tinte y el
   destello es blanco, sin mezcla, sólo al inclinar; el canto y las chispas quedan apenas visibles. */
.xa-wk .xa-fondo>.xa-foil,.xa-wk .xa-tinte{display:none}
.xa-wk .xa-fondo>i,.xa-wk .xa-borde::before{mix-blend-mode:normal}
.xa-wk .xa-brillo{background:radial-gradient(farthest-corner circle at calc(var(--px)*1%) calc(var(--py)*1%),rgba(255,255,255,.2) 0,rgba(255,255,255,.06) 24%,transparent 50%);opacity:calc(var(--k)*.8)}
.xa-wk .xa-chispa{opacity:.22}.xa-wk .xa-borde::before{opacity:calc(.1 + var(--k)*.2)}
@supports (-webkit-touch-callout:none){
  .xa .xa-fondo>.xa-foil,.xa .xa-tinte{display:none}
  .xa .xa-fondo>i,.xa .xa-borde::before{mix-blend-mode:normal}
  .xa .xa-brillo{background:radial-gradient(farthest-corner circle at calc(var(--px)*1%) calc(var(--py)*1%),rgba(255,255,255,.2) 0,rgba(255,255,255,.06) 24%,transparent 50%);opacity:calc(var(--k)*.8)}
  .xa .xa-chispa{opacity:.22}.xa .xa-borde::before{opacity:calc(.1 + var(--k)*.2)}
}
/* Foil del canto: la textura holográfica tileable (deco/celebracion/foil-holo-512x512.webp, sin costuras) en un filo de ~1 % del
   ancho, por dentro del anillo de arriba; se corre con la inclinación (--px/--py, quieta con movimiento reducido). Sutil. */
.xa-borde::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:max(2px,calc(var(--u)*.95));
  background:url(assets/deco/celebracion/foil-holo-512x512.webp) calc(var(--px)*.8%) calc(var(--py)*.8%)/calc(var(--u)*30) repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:calc(.3 + var(--k)*.22)}

/* ---- Tarjeta negra lisa (Prensa y Expositor; acceso.js pone .xa-negro) ---- */
/* Sin el arte: fondo #0A0A0A con olas seigaiha muy tenues (cinco capas de arcos concéntricos en una celda de 16×8 u: las
   escamas de abajo tapan a las de arriba) y un grano fino (SVG feTurbulence en el velo), degradado a negro puro hacia el talón;
   letras plata (#E8ECF2, --ta) y el logo monocromo plata (logo-exppo-xv-plata.webp, lo pone acceso.js). El halo y el tinte
   bajan para que quede discreta; el filo plata lo da --ta. */
.xa-negro{--xa-negro:#0A0A0A;--xa-claro:#E8ECF2;--xa-gris:#AEB6C2;--xa-ola:#141516}
.xa-negro .xa-arte{display:none}
.xa-negro .xa-fondo{background:
  radial-gradient(circle at 100% 150%,var(--xa-ola) 24%,#0A0A0A 24%,#0A0A0A 28%,var(--xa-ola) 28%,var(--xa-ola) 36%,#0A0A0A 36%,#0A0A0A 40%,var(--xa-ola) 40%,var(--xa-ola) 53%,#0A0A0A 53%,#0A0A0A 57%,var(--xa-ola) 57%,var(--xa-ola) 75%,#0A0A0A 75%,#0A0A0A 80%,transparent 80%,transparent),
  radial-gradient(circle at 0 150%,var(--xa-ola) 24%,#0A0A0A 24%,#0A0A0A 28%,var(--xa-ola) 28%,var(--xa-ola) 36%,#0A0A0A 36%,#0A0A0A 40%,var(--xa-ola) 40%,var(--xa-ola) 53%,#0A0A0A 53%,#0A0A0A 57%,var(--xa-ola) 57%,var(--xa-ola) 75%,#0A0A0A 75%,#0A0A0A 80%,transparent 80%,transparent),
  radial-gradient(circle at 50% 100%,#0A0A0A 10%,var(--xa-ola) 10%,var(--xa-ola) 23%,#0A0A0A 23%,#0A0A0A 30%,var(--xa-ola) 30%,var(--xa-ola) 43%,#0A0A0A 43%,#0A0A0A 50%,var(--xa-ola) 50%,var(--xa-ola) 63%,#0A0A0A 63%,#0A0A0A 71%,transparent 71%,transparent),
  radial-gradient(circle at 100% 50%,#0A0A0A 5%,var(--xa-ola) 5%,var(--xa-ola) 15%,#0A0A0A 15%,#0A0A0A 20%,var(--xa-ola) 20%,var(--xa-ola) 29%,#0A0A0A 29%,#0A0A0A 34%,var(--xa-ola) 34%,var(--xa-ola) 44%,#0A0A0A 44%,#0A0A0A 49%,transparent 49%,transparent),
  radial-gradient(circle at 0 50%,#0A0A0A 5%,var(--xa-ola) 5%,var(--xa-ola) 15%,#0A0A0A 15%,#0A0A0A 20%,var(--xa-ola) 20%,var(--xa-ola) 29%,#0A0A0A 29%,#0A0A0A 34%,var(--xa-ola) 34%,var(--xa-ola) 44%,#0A0A0A 44%,#0A0A0A 49%,transparent 49%,transparent),
  #0A0A0A;
  background-size:calc(var(--u)*16) calc(var(--u)*8)}
.xa-negro .xa-velo{background:
  linear-gradient(to bottom,rgba(3,3,4,0) 0,rgba(3,3,4,0) 52%,rgba(3,3,4,.45) 62%,rgba(3,3,4,.72) 78%,rgba(3,3,4,.82) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .91 0 0 0 0 .93 0 0 0 0 .95 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px repeat}
.xa-negro .xa-velo-rev{background:linear-gradient(to bottom,rgba(3,3,4,.35),rgba(3,3,4,.3) 45%,rgba(3,3,4,.5)),radial-gradient(90% 40% at 50% 34%,var(--ta15),transparent 70%)}
.xa-negro .xa-halo{opacity:.12}.xa-negro .xa-tinte{opacity:.14}.xa-negro .xa-chispa{opacity:.18}
.xa-negro .xa-oficial,.xa-negro .xa-fecha,.xa-negro .xa-folio,.xa-negro .xa-rev-folio{color:#E8ECF2}
.xa-negro .xa-sede{border:1px solid rgba(232,236,242,.38)}

/* ---- Prensa: paleta lima con el arte (acceso.js pone .xa-lima y .xa-pastilla; --ta #A8FF3E, --tb #2FB344) ---- */
/* Mismo arte, logo holográfico y estructura que los demás; cambia el color: textos, filo y halo en lima, y la parte baja
   (desde la perforación) en verde bosque #031A10 en lugar del negro violáceo. El halo del logo baja de .45 a .22 para que no
   lave sus colores. Rótulos y subtítulo con un toque verde para que no desentonen sobre la base. */
.xa-lima{--xa-negro:#031A10;--xa-tinta:#04140B;--xa-gris:#a9bcb0;--xa-claro:#eef7f0}
.xa-lima .xa-velo{background:
  linear-gradient(to bottom,rgba(7,5,10,.94) 0,rgba(7,5,10,.8) calc(var(--u)*10),rgba(7,5,10,.62) calc(var(--u)*30),rgba(7,5,10,.5) calc(var(--u)*50),rgba(7,5,10,.12) calc(var(--u)*60),rgba(7,5,10,0) calc(var(--u)*66),
    rgba(3,26,16,0) calc(var(--u)*80),rgba(3,26,16,.55) calc(var(--u)*86),rgba(3,26,16,.86) calc(var(--u)*93),rgba(3,26,16,.92) calc(var(--u)*110),rgba(3,26,16,.94) 100%),
  linear-gradient(to right,rgba(7,5,10,.35) 0,rgba(7,5,10,0) 45%)}
.xa-lima .xa-velo-rev{background:linear-gradient(to bottom,rgba(7,5,10,.84),rgba(3,26,16,.8) 45%,rgba(3,26,16,.9)),radial-gradient(90% 40% at 50% 34%,var(--ta15),transparent 70%)}
.xa-lima .xa-logo{filter:drop-shadow(0 0 calc(var(--u)*2.4) rgba(168,255,62,.22)) drop-shadow(0 calc(var(--u)*.5) calc(var(--u)*1.1) rgba(0,0,0,.85))}

/* Pastilla sólida del tipo (acceso.js: TIPOS[...].pastilla = 'solida'; hoy sólo Prensa): el nombre del tipo sobre un relleno
   del color del tipo (--ta) con letras --xa-tinta (#04140B), en el frente y en el reverso. El color de las letras lleva
   !important y más especificidad porque print.css (Mi acceso impreso) pinta .xa-tipo con --ta, que sobre la pastilla del
   mismo color no se vería. */
.xa-pastilla .xa-tipo{display:block;width:max-content;max-width:100%;margin-top:calc(var(--u)*.4);padding:calc(var(--u)*1.5) calc(var(--u)*3.6);border-radius:999px;background:var(--ta);color:var(--xa-tinta,#04140B);
  font-size:calc(var(--u)*5.2*var(--fit));letter-spacing:.06em;text-indent:.06em;text-shadow:none;box-shadow:0 0 calc(var(--u)*3) var(--ta25)}
.xa.xa-pastilla .xa-talon .xa-tipo{color:var(--xa-tinta,#04140B)!important}
/* «Acreditación de prensa» es un solo segmento largo: sin las fuentes web (primera carga sin red) se cortaría por la derecha;
   así puede partirse entre palabras. Con Barlow cargada cabe en un renglón y no cambia nada. */
.xa-pastilla .xa-seg{white-space:normal}
.xa-pastilla .xa-rev-tipo{width:max-content;padding:calc(var(--u)*1.7) calc(var(--u)*4.4);border-radius:999px;background:var(--ta);color:var(--xa-tinta,#04140B);
  font-size:calc(var(--u)*5.4*var(--fit));letter-spacing:.06em;text-indent:.06em;text-shadow:none;box-shadow:0 0 calc(var(--u)*3) var(--ta25)}

/* ---- Frente: mitad de arriba (sobre el arte) ---- */
/* Arriba: "Acceso oficial", logo, fecha y sede (la cara del arte queda libre debajo, hasta la perforación). */
.xa-sup{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;padding:calc(var(--u)*4.6) calc(var(--u)*6) 0;text-align:center;pointer-events:none}
.xa-oficial{font:700 calc(var(--u)*2.4)/1 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.35em;text-indent:.35em;text-transform:uppercase;color:#fff;text-shadow:0 0 calc(var(--u)*1.6) rgba(0,0,0,.9)}
.xa-logo{display:block;width:62%;height:auto;margin-top:calc(var(--u)*1.8);-webkit-user-drag:none;
  filter:drop-shadow(0 0 calc(var(--u)*2.4) var(--ta45)) drop-shadow(0 calc(var(--u)*.5) calc(var(--u)*1.1) rgba(0,0,0,.85))}
.xa-fecha{--fit:1;margin-top:calc(var(--u)*1.2);max-width:100%;font:900 calc(var(--u)*7*var(--fit))/1 Archivo,"Archivo Fallback",system-ui,sans-serif;letter-spacing:.005em;text-transform:uppercase;white-space:nowrap;color:#fff;
  text-shadow:0 0 calc(var(--u)*2.6) var(--ta55),0 calc(var(--u)*.45) calc(var(--u)*1.2) rgba(0,0,0,.95)}
.xa-sede{max-width:100%;margin-top:calc(var(--u)*1.4);padding:calc(var(--u)*1.25) calc(var(--u)*3.2);border-radius:999px;background:rgba(0,0,0,.7);
  font:600 calc(var(--u)*2.45)/1.1 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;color:var(--xa-claro)}
.xa-perf{position:absolute;left:calc(var(--u)*6.4);right:calc(var(--u)*6.4);top:var(--xa-perf);height:max(1px,calc(var(--u)*.38));transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 calc(var(--u)*1.7),transparent calc(var(--u)*1.7) calc(var(--u)*2.9))}

/* ---- Frente: talón sobre el arte oscurecido (sin panel ni borde) — datos a la izquierda y el QR a la derecha ---- */
.xa-talon{position:absolute;left:calc(var(--u)*7);right:calc(var(--u)*6);top:calc(var(--xa-perf) + var(--u)*4.4);bottom:calc(var(--u)*5.4);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:calc(var(--u)*3.4);align-items:stretch;
  text-shadow:0 0 calc(var(--u)*1.2) rgba(7,5,10,.95),0 calc(var(--u)*.2) calc(var(--u)*.5) rgba(7,5,10,.9)}
.xa-datos{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--u)*1.1);overflow:hidden;text-align:left}
.xa-k{font:700 calc(var(--u)*2.45)/1.15 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--xa-gris)}
.xa-tipo{--fit:1;margin-top:calc(var(--u)*-.4);font:900 calc(var(--u)*6.3*var(--fit))/.96 Archivo,"Archivo Fallback",system-ui,sans-serif;letter-spacing:.005em;text-transform:uppercase;color:var(--ta);
  text-shadow:0 0 calc(var(--u)*2.6) var(--ta45),0 calc(var(--u)*.3) calc(var(--u)*.8) rgba(7,5,10,.9)}
.xa-tl{display:block;white-space:nowrap}
.xa-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.xa-sub{--fit-sub:1;font:700 calc(var(--u)*2.7*var(--fit-sub))/1.28 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--xa-claro)}
.xa-seg{white-space:nowrap}
.xa-folio-caja{display:grid;gap:calc(var(--u)*.7)}
.xa-folio{font:700 calc(var(--u)*3.3)/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;letter-spacing:.02em;white-space:nowrap;color:#fff}
.xa-pie{font:700 calc(var(--u)*2.3)/1.25 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ta)}
.xa-qrcol{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.3)}
/* QR de polaridad normal: el único recuadro blanco (módulos oscuros), con un filo fino y un halo del color del tipo.
   --qr: lado en unidades de --u. */
.xa-qr{--qr:46;position:relative;flex:none;width:calc(var(--u)*var(--qr));aspect-ratio:1;border-radius:calc(var(--u)*1.8);background:#fff;text-shadow:none;
  box-shadow:0 0 0 max(1px,calc(var(--u)*.4)) var(--ta),0 0 calc(var(--u)*5) var(--ta45)}
.xa-qr>svg{display:block;width:100%;height:100%;border-radius:inherit}
.xa-qr>svg rect{fill:#fff}.xa-qr>svg path{fill:#0b0b0f}
.xa-qr.is-vacio{display:grid;place-items:center;padding:calc(var(--u)*3)}
.xa-sinqr{font:700 calc(var(--u)*2.6)/1.3 Barlow,"Barlow Fallback",system-ui,sans-serif;color:#0b0b0f;text-align:center}
.xa-escanea{font:700 calc(var(--u)*2.25)/1 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;color:var(--xa-gris)}
/* Vista de muestra: sello sobre el QR (el QR apunta a la boletera y no da entrada). */
.xa-sello{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);padding:calc(var(--u)*1.1) calc(var(--u)*3);border-radius:calc(var(--u)*1.2);
  background:var(--xa-negro);border:max(1px,calc(var(--u)*.4)) solid var(--ta);color:#fff;font:900 calc(var(--u)*3.3)/1 Archivo,"Archivo Fallback",system-ui,sans-serif;letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 0 calc(var(--u)*3) var(--ta45)}

/* ---- Reverso: QR grande, folio y condiciones cortas ---- */
.xa-reverso .xa-fondo>.xa-foil{opacity:calc(var(--k)*.12)}.xa-reverso .xa-tinte{display:none}
.xa-rev{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(var(--u)*6) calc(var(--u)*7) calc(var(--u)*5.5);text-align:center;text-shadow:0 calc(var(--u)*.2) calc(var(--u)*.8) rgba(7,5,10,.9)}
.xa-rev-tipo{--fit:1;max-width:100%;margin-top:calc(var(--u)*2.6);font:900 calc(var(--u)*6.4*var(--fit))/1 Archivo,"Archivo Fallback",system-ui,sans-serif;text-transform:uppercase;white-space:nowrap;color:var(--ta);text-shadow:0 0 calc(var(--u)*2.6) var(--ta45)}
.xa-qr-grande{--qr:66;margin-top:calc(var(--u)*5);border-radius:calc(var(--u)*2.6);box-shadow:0 0 0 max(1px,calc(var(--u)*.5)) var(--ta),0 0 calc(var(--u)*8) var(--ta45)}
.xa-qr-grande .xa-sello{font-size:calc(var(--u)*5)}
.xa-esq{position:absolute;width:calc(var(--u)*6);height:calc(var(--u)*6);border:calc(var(--u)*.8) solid var(--ta);pointer-events:none}
.xa-esq-1{top:calc(var(--u)*-2.4);left:calc(var(--u)*-2.4);border-right:0;border-bottom:0;border-top-left-radius:calc(var(--u)*2.4)}
.xa-esq-2{top:calc(var(--u)*-2.4);right:calc(var(--u)*-2.4);border-left:0;border-bottom:0;border-top-right-radius:calc(var(--u)*2.4)}
.xa-esq-3{bottom:calc(var(--u)*-2.4);left:calc(var(--u)*-2.4);border-right:0;border-top:0;border-bottom-left-radius:calc(var(--u)*2.4)}
.xa-esq-4{bottom:calc(var(--u)*-2.4);right:calc(var(--u)*-2.4);border-left:0;border-top:0;border-bottom-right-radius:calc(var(--u)*2.4)}
.xa-rev-folio{margin-top:calc(var(--u)*5.4);font:700 calc(var(--u)*5)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;letter-spacing:.05em;white-space:nowrap;color:#fff;text-shadow:0 0 calc(var(--u)*2.4) var(--ta45)}
.xa-rev-dia{margin-top:calc(var(--u)*2.2);font:800 calc(var(--u)*3)/1.2 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ta)}
.xa-rev-titular{margin-top:calc(var(--u)*1.8);font:700 calc(var(--u)*2.9)/1.2 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--xa-claro)}
.xa-rev-mg{margin-top:calc(var(--u)*2.4);font:700 calc(var(--u)*2.9)/1.35 Barlow,"Barlow Fallback",system-ui,sans-serif;color:var(--ta);text-wrap:balance}
.xa-cond{margin-top:auto;padding:0;list-style:none;display:grid;gap:calc(var(--u)*1.2);width:100%;font:500 calc(var(--u)*3)/1.35 Barlow,"Barlow Fallback",system-ui,sans-serif;color:#ddd7e2;text-align:left}
.xa-cond li{position:relative;padding-left:calc(var(--u)*3.4);text-wrap:pretty}
.xa-cond li::before{content:"";position:absolute;left:0;top:.5em;width:calc(var(--u)*1.4);height:calc(var(--u)*1.4);border-radius:50%;background:var(--ta)}
.xa-hint{margin-top:calc(var(--u)*3);font:700 calc(var(--u)*2.2)/1 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;color:var(--xa-gris)}
.xa [hidden]{display:none!important}

/* Botón «Voltear» (también para quien no descubre el gesto). */
.xa-voltear{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--ta55);background:rgba(7,5,10,.55);
  color:#f7f4ec;font:800 14px/1 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xa-voltear svg{width:18px;height:18px;fill:none;stroke:var(--ta);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.xa-voltear:hover{background:var(--ta15)}
.xa-voltear:focus-visible{outline:3px solid var(--gold,#D4A857);outline-offset:3px}
.xa-voltear[aria-pressed="true"] svg{transform:scaleX(-1)}
/* Pista en iPhone/iPad mientras el giroscopio no tiene permiso (acceso.js la quita al concederse o negarse). */
.xa-pista{margin:-4px 0 0;max-width:36ch;font:600 13px/1.4 Barlow,"Barlow Fallback",system-ui,sans-serif;letter-spacing:.02em;color:var(--xa-gris);text-align:center;text-wrap:balance}

/* Tarjeta con brillo e inclinación suave (XVAcceso.inclinar escribe --rx/--ry/--px/--py/--k): la vista previa del skin de
   Wallet en Mi acceso. Mismo lenguaje que el acceso: canto holográfico fino, reflejo que sigue la inclinación, un barrido de
   luz lento y sombra en el piso. Plana en reposo. Sin mix-blend-mode (se ve igual en Safari/WebKit): luces blancas con
   opacidad baja que no cambian los colores de la miniatura. .is-cambio: entra al elegir otro skin. */
.xa-ficha{--rx:0deg;--ry:0deg;--px:50;--py:50;--k:0;position:relative;margin:0;perspective:900px;isolation:isolate;-webkit-tap-highlight-color:transparent}
.xa-ficha-carta{position:relative;border-radius:16px;overflow:hidden;background:#07050a;transform:rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 34px -16px rgba(0,0,0,.85);isolation:isolate}
.xa-ficha-carta>img{display:block;width:100%;height:auto;aspect-ratio:300/439;object-fit:cover;-webkit-user-drag:none}
.xa-ficha-carta>i{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.xa-ficha-brillo{background:radial-gradient(farthest-corner circle at calc(var(--px)*1%) calc(var(--py)*1%),rgba(255,255,255,.26) 0,rgba(255,255,255,.07) 26%,transparent 56%);opacity:calc(.3 + var(--k)*.7)}
.xa-ficha-barrido{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.04) 54%,transparent 62%) 0 0/260% 100% no-repeat;background-position:120% 0;animation:xa-barrido 6s ease-in-out 1.2s infinite}
.xa-ficha-canto{padding:1.5px;background:conic-gradient(from calc(var(--px)*3.6deg),#ff4fd8,#ffd36b,#7dffb8,#22e6ff,#a974ff,#ff4fd8);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:calc(.35 + var(--k)*.4)}
.xa-ficha-sombra{position:absolute;left:12%;right:12%;bottom:-10px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(4px);pointer-events:none;z-index:-1}
.xa-ficha.is-cambio .xa-ficha-carta>img{animation:xa-ficha-entra .45s ease-out}
.xa-ficha.is-cambio .xa-ficha-barrido{animation:xa-barrido .9s ease-out}
@keyframes xa-barrido{0%{background-position:120% 0}55%,100%{background-position:-20% 0}}
@keyframes xa-ficha-entra{from{opacity:.25;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.xa-ficha-carta{transform:none}.xa-ficha-barrido,.xa-ficha.is-cambio .xa-ficha-barrido,.xa-ficha.is-cambio .xa-ficha-carta>img{animation:none}}

/* Celebración del desbloqueo (listo.js, celebrar): capa fija encima de la página y debajo del aviso (.wallet-toast, z 45). Las
   animaciones (Web Animations, 1.2 s, sólo transform/opacity) las pone listo.js; con movimiento reducido no se crea. */
.xv-celebra{position:fixed;inset:0;z-index:44;pointer-events:none;overflow:hidden;contain:strict}
.xv-cel-lineas{position:absolute;left:var(--cx);top:var(--cy);width:min(90vmin,540px);height:auto;aspect-ratio:1;max-width:none;opacity:0;transform:translate(-50%,-50%) scale(.55);will-change:transform,opacity}
.xv-conf{position:absolute;left:var(--cx);top:var(--cy);background:url(assets/deco/celebracion/confeti-sprite.webp) no-repeat;opacity:0;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.xv-celebra{display:none}}
@keyframes xa-flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u)*-1.4))}}
@keyframes xa-sombra{0%,100%{transform:scaleX(1);opacity:.75}50%{transform:scaleX(.84);opacity:.5}}
@keyframes xa-titilar{0%{opacity:.15}50%{opacity:.55}100%{opacity:.3}}
/* Movimiento reducido: sin vaivén ni brillo animado (el giro lo hace instantáneo acceso.js). */
@media (prefers-reduced-motion:reduce){.xa-flota,.xa-sombra,.xa-chispa{animation:none}.xa-carta{will-change:auto}}

/* Impresión: sólo el frente, plano y en blanco y negro (QR oscuro sobre blanco, legible en cualquier impresora). */
@media print{
  .xa{max-width:8.6cm;margin:0 auto;gap:0}
  .xa-flota,.xa-sombra,.xa-chispa{animation:none!important}
  .xa-escena{perspective:none;cursor:auto}
  .xa-carta{transform:none!important;will-change:auto}
  .xa-reverso,.xa-halo,.xa-sombra,.xa-voltear,.xa-pista,.xa-arte,.xa-velo,.xa-tinte,.xa-foil,.xa-chispa,.xa-brillo,.xa-borde,.xa-escanea,.xv-celebra{display:none!important}
  .xa-escena .xa-frente{visibility:visible!important;transform:none}
  .xa-fondo{-webkit-mask:none;mask:none;background:#fff!important;border:1px solid #000}
  .xa-sup{padding-top:calc(var(--u)*5)}
  .xa-logo{filter:brightness(0)!important}
  .xa-oficial,.xa-fecha,.xa-sede,.xa-k,.xa-tipo,.xa-sub,.xa-folio,.xa-pie{color:#000!important;text-shadow:none!important}
  .xa-sede{background:#fff!important;border:1px solid #000}
  .xa-perf{background:none!important;border-top:1px dashed #000;height:0}
  .xa-talon{text-shadow:none!important}
  .xa-qr{box-shadow:none!important;outline:1px solid #000;outline-offset:0}
  .xa-qr>svg rect{fill:#fff!important}.xa-qr>svg path{fill:#000!important}
}