/* juguemosChrome.css — tarjetas de Juguemos para compartir dibujadas por Chrome real (2026-10-01).
   Ver el encabezado de juguemosChrome.js. Todo esto lo dibuja Chrome (sombras suaves, filtros, texto con degradé,
   backdrop-filter, mezcla del grano): NO pasa nunca por html2canvas — el respaldo usa las funciones originales, sin
   estas clases. Las reglas del realce llevan !important porque la tarjeta de siempre viene con estilos en línea. */

/* ---------- 1) realce de la tarjeta de «Compartir en Instagram» (#p3mShareCard.p3mhq) ---------- */
.p3mhq .p3mhq-grano, .jgq-card .p3mhq-grano{position:absolute; inset:0; pointer-events:none; background-size:240px 240px; opacity:.07; mix-blend-mode:overlay;}
.p3mhq .p3mhq-vineta, .jgq-card .p3mhq-vineta{position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 85% 70% at 50% 42%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%);}
.p3mhq-claro .p3mhq-grano{opacity:.05; mix-blend-mode:multiply;}
.p3mhq-claro .p3mhq-vineta{background:radial-gradient(ellipse 85% 70% at 50% 42%, rgba(0,0,0,0) 60%, rgba(0,0,0,.07) 100%);}
.p3mhq .p3mhq-avatar{position:relative; border-width:4px !important; box-shadow:0 0 0 12px color-mix(in srgb, var(--hq-acc) 18%, transparent), 0 0 0 13px color-mix(in srgb, var(--hq-accl) 35%, transparent), 0 44px 110px -26px var(--hq-acc) !important;}
.p3mhq .p3mhq-avatar::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(158deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 34%), linear-gradient(0deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);}
.p3mhq-claro .p3mhq-avatar{box-shadow:0 0 0 12px color-mix(in srgb, var(--hq-acc) 14%, transparent), 0 34px 80px -30px color-mix(in srgb, var(--hq-acc) 70%, black) !important;}
.p3mhq .p3mhq-nombre{text-shadow:0 6px 30px rgba(0,0,0,.45);}
.p3mhq-claro .p3mhq-nombre{text-shadow:none;}
.p3mhq .p3mhq-nivel{background:linear-gradient(180deg, #ffffff 8%, var(--hq-accl) 100%); -webkit-background-clip:text; background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent; text-shadow:none !important; padding:0 .08em 0 .02em; filter:drop-shadow(0 10px 34px color-mix(in srgb, var(--hq-acc) 70%, transparent));}
.p3mhq-claro .p3mhq-nivel{background-image:linear-gradient(180deg, #181712 20%, var(--hq-accd) 100%); /* background-image, no el atajo: background resetea el background-clip:text (salía un cuadrado negro) */ filter:drop-shadow(0 8px 22px color-mix(in srgb, var(--hq-acc) 35%, transparent));}
.p3mhq .p3mhq-barra{box-shadow:inset 0 3px 8px rgba(0,0,0,.45), 0 0 40px -8px var(--hq-acc) !important; border-width:1.5px !important;}
.p3mhq .p3mhq-relleno{background-image:linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 60%), linear-gradient(90deg, var(--hq-accd), var(--hq-acc), var(--hq-accl)) !important; box-shadow:0 0 22px var(--hq-acc);}
.p3mhq-claro .p3mhq-barra{box-shadow:inset 0 2px 5px rgba(0,0,0,.12), 0 0 30px -10px var(--hq-acc) !important;}
.p3mhq .p3mhq-pill{border-width:1.5px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 14px 28px -16px rgba(0,0,0,.8) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.p3mhq-claro .p3mhq-pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 12px 24px -16px rgba(0,0,0,.3) !important;}
.p3mhq .p3mhq-tit{display:flex !important; align-items:center; justify-content:center; gap:22px;}
.p3mhq .p3mhq-tit::before, .p3mhq .p3mhq-tit::after{content:''; flex:0 1 200px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(0,0,0,0), currentColor);}
.p3mhq .p3mhq-tit::after{background:linear-gradient(270deg, rgba(0,0,0,0), currentColor);}
.p3mhq .p3mhq-medalla{filter:drop-shadow(0 14px 16px rgba(0,0,0,.55)) drop-shadow(0 0 20px color-mix(in srgb, var(--hq-acc) 40%, transparent));}
.p3mhq .p3mhq-medalla-ic{filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));}
.p3mhq .p3mhq-stat{background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035)) !important; border:1.5px solid rgba(255,255,255,.15) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 24px 46px -28px rgba(0,0,0,.85) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.p3mhq-claro .p3mhq-stat{background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.62)) !important; border-color:rgba(0,0,0,.08) !important; box-shadow:inset 0 1px 0 #fff, 0 20px 40px -26px rgba(0,0,0,.3) !important;}
.p3mhq .p3mhq-stat-num{filter:drop-shadow(0 0 18px color-mix(in srgb, var(--hq-acc) 45%, transparent));}
.p3mhq-claro .p3mhq-stat-num{filter:none;}
.p3mhq .p3mhq-fila{box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px -20px rgba(0,0,0,.8) !important;}
.p3mhq-claro .p3mhq-fila{box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 12px 26px -20px rgba(0,0,0,.25) !important;}
/* tema claro: las dos manchas de color de atrás quedaban oscuras (p3mShareTemaClaro les cambia el color) */
.p3mhq-claro .p3mhq-blob{background:var(--hq-acc) !important; opacity:.12 !important;}
.p3mhq .p3mhq-pie{letter-spacing:.12em !important; opacity:.8 !important;}

/* ---------- 2) y 3) «Mi tarjeta» e insignia (1080×1350) ---------- */
.jgq-card{position:relative; width:1080px; height:1350px; overflow:hidden; background:#0a0a0c; color:#F5F4EF; font-family:Inter, Arial, sans-serif; box-sizing:border-box;}
.jgq-card *{box-sizing:border-box;}
.jgq-fondo, .jgq-grilla, .jgq-hex{position:absolute; inset:0;}
.jgq-grilla{background-image:linear-gradient(rgba(255,255,255,.035) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, rgba(0,0,0,0) 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 40%, #000 30%, rgba(0,0,0,0) 100%); mask-image:radial-gradient(ellipse 75% 65% at 50% 40%, #000 30%, rgba(0,0,0,0) 100%);}
.jgq-hex{background-size:72px 126px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 34%, #000 20%, rgba(0,0,0,0) 100%); mask-image:radial-gradient(ellipse 70% 60% at 50% 34%, #000 20%, rgba(0,0,0,0) 100%);}
.jgq-halo{position:absolute; left:50%; top:330px; width:1100px; height:1100px; margin:-550px 0 0 -550px; border-radius:50%; filter:blur(10px);}
.jgq-blob{position:absolute; width:560px; height:560px; border-radius:50%; opacity:.2; filter:blur(70px);}
.jgq-cuerpo{position:relative; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 70px 120px; text-align:center;}
.jgq-avatar{position:relative; width:500px; height:625px; border-radius:44px; overflow:hidden; background:#0a0a0c; border:4px solid var(--hq-acc); box-shadow:0 0 0 12px color-mix(in srgb, var(--hq-acc) 16%, transparent), 0 0 0 13px color-mix(in srgb, var(--hq-accl) 30%, transparent), 0 48px 120px -30px var(--hq-acc);}
.jgq-avatar img{display:block; width:500px; height:625px;}
.jgq-avatar::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(158deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 32%), linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 24%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.14);}
.jgq-nombre{font-family:Montserrat, Arial, sans-serif; font-weight:900; font-style:italic; font-size:84px; line-height:1; margin-top:44px; padding:0 .06em; text-shadow:0 8px 34px rgba(0,0,0,.5); max-width:100%; overflow-wrap:anywhere;}
.jgq-clase{margin-top:16px; font-weight:800; font-size:25px; letter-spacing:.08em; color:var(--hq-accl); max-width:900px; line-height:1.3;}
.jgq-nivel-fila{display:flex; align-items:baseline; gap:18px; margin-top:26px;}
.jgq-nivel-etq{font-weight:800; font-size:32px; letter-spacing:.16em; color:#8c8c85;}
.jgq-nivel{font-family:Montserrat, Arial, sans-serif; font-weight:900; font-style:italic; font-size:210px; line-height:.9; padding:0 .08em 0 .02em; background:linear-gradient(180deg, #fff 8%, var(--hq-accl) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 12px 36px color-mix(in srgb, var(--hq-acc) 70%, transparent));}
.jgq-pills{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:30px;}
.jgq-pill{font-weight:700; font-size:28px; padding:13px 28px; border-radius:999px; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.16); color:#F5F4EF; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 14px 28px -16px rgba(0,0,0,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.jgq-pill-fuego{background:rgba(255,85,0,.16); border-color:rgba(255,120,40,.5); color:#FFB27A;}
.jgq-pie{position:absolute; left:0; right:0; bottom:46px; text-align:center; font-weight:700; font-size:22px; letter-spacing:.2em; color:#FFE000; text-shadow:0 0 22px rgba(255,224,0,.35);}
/* insignia */
.jgq-medalla{position:relative; width:560px; height:627px; filter:drop-shadow(0 26px 30px rgba(0,0,0,.6)) drop-shadow(0 0 40px color-mix(in srgb, var(--hq-acc) 45%, transparent));}
.jgq-medalla img{display:block; width:560px; height:627px;}
.jgq-medalla-ic{position:absolute; left:0; right:0; top:152px; text-align:center; font-size:210px; line-height:1; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));}
.jgq-tier{margin-top:34px; display:flex; align-items:center; gap:22px; font-weight:800; font-size:28px; letter-spacing:.22em;}
.jgq-tier::before, .jgq-tier::after{content:''; width:150px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(0,0,0,0), currentColor);}
.jgq-tier::after{background:linear-gradient(270deg, rgba(0,0,0,0), currentColor);}
.jgq-ins-nombre{margin-top:18px; font-size:76px;}
.jgq-como{margin-top:18px; font-weight:500; font-size:30px; line-height:1.35; color:#a9a79f; max-width:860px;}