/* Concepto: una sola carta flotando en el cielo nocturno; todo lo demás se aparta. Diseño oscuro deliberado. */
:root{
  --noche:#050817; --noche2:#0c1430; --tinta:#eef3ff; --niebla:#98a6c7; --linea:#26345e;
  --fuego:#ff7f4f; --tierra:#93d26c; --aire:#f2d46e; --agua:#62c8ff;
  --acento:#9fd8ff;
  --display:"Cinzel",Georgia,"Times New Roman",serif;
  --texto:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
body[data-tribu="agua"]{--acento:#62c8ff}
body[data-tribu="tierra"]{--acento:#93d26c}
body[data-tribu="aire"]{--acento:#d9c6ff}
body[data-tribu="fuego"]{--acento:#ff8a55}
*{box-sizing:border-box}
html,body{background:var(--noche);color:var(--tinta);font-family:var(--texto)}
html,body{height:100%}
body{margin:0;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
#cielo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.envoltura{position:relative;z-index:1;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 40px;max-width:520px;margin:0 auto}
.marca{font-family:var(--display);font-weight:800;letter-spacing:.22em;font-size:.72rem;text-transform:uppercase;color:var(--niebla);text-align:center;margin:0}
h1{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,6vw,2rem);text-align:center;margin:6px 0 2px;text-wrap:balance}
.bajada{text-align:center;color:var(--niebla);font-size:.92rem;margin:0 auto;max-width:34ch;line-height:1.5}
a{color:inherit}
button{font:inherit;color:var(--tinta);cursor:pointer}
button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* ---------- carta 3D ---------- */
.escena{container-type:inline-size;transform-style:preserve-3d;position:relative;width:min(92%,400px);margin:14px auto 0;aspect-ratio:765/1024;max-width:100%;perspective:1100px;touch-action:none;user-select:none;-webkit-user-select:none}
.carta{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;z-index:2}
.cara,.canto{position:absolute;inset:0;border-radius:4.5%/3.4%}
.cara{overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--noche2)}
.frente{transform:translateZ(6px)}
.dorso{transform:rotateY(180deg) translateZ(6px)}
.canto{background:linear-gradient(135deg,#c8b27a,#6d5a35 40%,#e9d8a6 60%,#5b4a2b);}
.cara img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.holo,.brillo{position:absolute;inset:0;pointer-events:none}
.holo{background:linear-gradient(115deg,transparent 28%,rgba(98,200,255,.55) 42%,rgba(214,180,255,.6) 50%,rgba(255,150,210,.5) 58%,transparent 72%);
  background-size:260% 260%;background-position:var(--hx,50%) var(--hy,50%);mix-blend-mode:color-dodge;opacity:.38}
.brillo{background:radial-gradient(circle at var(--bx,50%) var(--by,30%),rgba(255,255,255,.5),transparent 42%);mix-blend-mode:overlay;opacity:.8}
.sombra{pointer-events:none;position:absolute;left:12%;right:12%;bottom:-7%;height:6%;border-radius:50%;background:radial-gradient(rgba(0,0,0,.65),transparent 70%);filter:blur(6px);z-index:-1}
.aura{pointer-events:none;position:absolute;inset:-8%;border-radius:20px;background:radial-gradient(closest-side,color-mix(in srgb,var(--acento) 35%,transparent),transparent);filter:blur(18px);z-index:-1;opacity:.75;animation:respira 5s ease-in-out infinite}
@keyframes respira{50%{opacity:.4;scale:.96}}

/* dorso */
.dorso{background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--acento) 22%,var(--noche2)),var(--noche) 75%);
  padding:6.5% 6.5% 5.5%;display:flex;flex-direction:column;gap:2.2%;border:1px solid color-mix(in srgb,var(--acento) 45%,transparent)}
.dorso .titulo{font-family:var(--display);font-weight:800;text-align:center;font-size:5.4cqw;letter-spacing:.06em;margin:0}
.dorso .ejemplo{font-size:2.3cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--niebla);text-align:center;margin:-2% 0 0}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tres div{border:1px solid var(--linea);border-radius:10px;padding:1.6cqw 1cqw;text-align:center;background:rgba(255,255,255,.03)}
.tres small{display:block;font-size:2.1cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--niebla)}
.tres strong{display:block;font-size:3.6cqw;margin-top:2px}
.rotulo{font-size:2.3cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--niebla);margin:0}
.barras{display:flex;flex-direction:column;gap:1.1cqw}
.fila{display:grid;grid-template-columns:4.6em 1fr 2.8em;align-items:center;gap:2cqw;font-size:3.1cqw}
.pista{height:1.7cqw;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.pista i{display:block;height:100%;border-radius:4px}
.fila span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--niebla)}
.dones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.3cqw}
.dones li{font-size:2.9cqw;line-height:1.3;color:var(--niebla)}
.dones b{color:var(--tinta);font-weight:800;display:block}
.lectura{font-size:2.8cqw;color:var(--niebla);font-style:italic;margin:auto 0 0;text-align:center;line-height:1.4}

/* ---------- controles ---------- */
.pista-gesto{text-align:center;font-size:.8rem;color:var(--niebla);margin:26px 0 0}
.botonera{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.boton{background:rgba(255,255,255,.05);border:1px solid var(--linea);border-radius:12px;padding:10px 6px;font-size:.8rem;font-weight:700}
.boton[aria-pressed="true"]{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 16%,transparent)}
.principal{display:block;width:100%;margin-top:14px;padding:14px;border-radius:14px;border:0;font-weight:800;font-size:.95rem;color:#071021;background:var(--acento)}
.navegar{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:.85rem}
.navegar a{text-decoration:none;color:var(--niebla);padding:8px 2px}
.navegar a:hover{color:var(--tinta)}

/* ---------- opinión ---------- */
.opinion{margin-top:18px;border:1px solid var(--linea);border-radius:16px;padding:16px;background:rgba(9,14,34,.82);display:flex;flex-direction:column;gap:12px}
.opinion h2{font-family:var(--display);font-size:1.05rem;margin:0}
.estrellas{display:flex;gap:6px}
.estrellas button{background:none;border:0;font-size:1.9rem;line-height:1;padding:2px;color:#3a4670}
.estrellas button.on{color:var(--aire)}
.opciones{display:flex;gap:6px;flex-wrap:wrap}
.opciones button{background:rgba(255,255,255,.05);border:1px solid var(--linea);border-radius:999px;padding:7px 12px;font-size:.8rem}
.opciones button[aria-pressed="true"]{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 18%,transparent)}
.opinion label{font-size:.75rem;color:var(--niebla);display:flex;flex-direction:column;gap:6px}
.opinion textarea,.opinion input{font:inherit;color:var(--tinta);background:rgba(255,255,255,.04);border:1px solid var(--linea);border-radius:10px;padding:10px;font-size:.9rem;resize:vertical}
.gracias{font-size:.9rem;color:var(--acento);margin:0}

/* ---------- galería ---------- */
.grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.ficha{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.mini{position:relative;aspect-ratio:765/1024;max-width:100%;border-radius:10px;overflow:hidden;box-shadow:0 14px 30px -12px #000,0 0 0 1px var(--linea);transform:translateY(0);transition:transform .3s;animation:flota 6s ease-in-out infinite}
.mini img{width:100%;height:100%;object-fit:cover;display:block}
.ficha:nth-child(2n) .mini{animation-delay:-3s}
.ficha:hover .mini{transform:translateY(-4px)}
@keyframes flota{50%{transform:translateY(-6px)}}
.ficha strong{font-size:.85rem}
.ficha span{font-size:.72rem;color:var(--niebla)}
.favorita{margin-top:26px}
.favorita h2{font-family:var(--display);font-size:1.1rem;margin:0 0 4px;text-align:center}
.favorita p{text-align:center;color:var(--niebla);font-size:.85rem;margin:0 0 12px}
.elegir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.elegir button{background:none;border:2px solid transparent;border-radius:10px;padding:0;overflow:hidden;aspect-ratio:765/1024;max-width:100%}
.elegir button img{width:100%;height:100%;object-fit:cover;display:block;opacity:.75}
.elegir button[aria-pressed="true"]{border-color:var(--aire)}
.elegir button[aria-pressed="true"] img{opacity:1}
.pie{text-align:center;color:var(--niebla);font-size:.7rem;margin-top:28px;line-height:1.5}

@media (prefers-reduced-motion:reduce){.mini,.aura{animation:none}}

.opinion .rotulo{font-size:.62rem}
.escena.zoom{z-index:5}

/* ---------- luces vivas ---------- */
.frente .luz{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.1;pointer-events:none;
  animation:pulso var(--dur,4s) ease-in-out infinite;animation-delay:var(--ret,0s)}
.frente .l0{--dur:3.7s;--ret:0s}.frente .l1{--dur:5.3s;--ret:-1.8s}.frente .l2{--dur:4.4s;--ret:-3.1s}
@keyframes pulso{0%,100%{opacity:.08}50%{opacity:var(--max,.9)}}
@keyframes llama{0%{opacity:.35}12%{opacity:.85}22%{opacity:.5}34%{opacity:1}47%{opacity:.6}58%{opacity:.9}71%{opacity:.45}84%{opacity:.95}100%{opacity:.35}}
body[data-tribu="fuego"] .frente .luz{animation-name:llama;--dur:2.3s}
body[data-tribu="fuego"] .frente .l1{--dur:1.9s}body[data-tribu="fuego"] .frente .l2{--dur:2.8s}
body[data-tribu="aire"] .frente .luz{--max:.7}
body[data-tribu="tierra"] .frente .luz{--max:1}
.frente .magia{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- acabados ---------- */
.acabados{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.acabados button{background:rgba(255,255,255,.05);border:1px solid var(--linea);border-radius:999px;padding:7px 12px;font-size:.78rem;font-weight:700}
.acabados button[aria-pressed="true"]{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 18%,transparent)}
.carta[data-acabado="magia"] .holo{opacity:.22}
.carta[data-acabado="holograma"] .holo{opacity:.85;background:linear-gradient(115deg,transparent 18%,rgba(255,90,90,.5) 30%,rgba(255,220,80,.55) 38%,rgba(90,255,150,.55) 46%,rgba(80,200,255,.6) 54%,rgba(190,110,255,.6) 62%,transparent 76%);background-size:300% 300%;background-position:var(--hx,50%) var(--hy,50%)}
.carta[data-acabado="holograma"] .frente > img:first-child{filter:saturate(1.25) contrast(1.08)}
.carta[data-acabado="cromo"] .holo{opacity:.55;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.7) 45%,rgba(180,200,230,.5) 52%,transparent 70%);background-size:240% 240%;background-position:var(--hx,50%) var(--hy,50%)}
.carta[data-acabado="cromo"] .frente > img:first-child{filter:contrast(1.25) saturate(.75) brightness(1.06)}
.carta[data-acabado="cromo"] .brillo{opacity:1}
.carta[data-acabado="resina"] .holo{opacity:.3;mix-blend-mode:soft-light}
.carta[data-acabado="resina"] .frente > img:first-child{filter:saturate(1.15) brightness(1.04) hue-rotate(-8deg)}
.carta[data-acabado="resina"] .frente::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 30%,transparent 75%,rgba(0,0,0,.25));pointer-events:none}
.carta[data-acabado="original"] .luz,.carta[data-acabado="original"] .magia{display:none}
.carta[data-acabado="original"] .holo{opacity:0}
.carta[data-acabado="original"] .brillo{opacity:.35}
@media (prefers-reduced-motion:reduce){.frente .luz{animation:none;opacity:.5}}

/* ---------- carta privada (dentro de la funda) ---------- */
.privada{position:absolute;left:0;right:0;top:5%;bottom:5%;transform-style:preserve-3d;will-change:transform;z-index:1;touch-action:none}
.pcara{position:absolute;inset:0;border-radius:4%/3%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(90% 60% at 50% 0%,#3a2463 0%,#170f33 55%,#0b0820 100%);
  border:1px solid #c9a95c;box-shadow:inset 0 0 0 4px #0b0820,inset 0 0 0 5px rgba(201,169,92,.55);
  padding:7% 8% 6% 7%;display:flex;flex-direction:column;gap:1.4cqw;color:#f3ecff}
.pdorso{transform:rotateY(180deg);padding:7% 7% 6% 8%}
.sello{width:11cqw;height:11cqw;margin:0 auto;border-radius:50%;display:grid;place-items:center;color:#2a1a06;
  background:radial-gradient(circle at 35% 30%,#ffe7a8,#c9a95c 55%,#7a5a24);box-shadow:0 0 18px rgba(255,214,130,.45)}
.sello svg{width:55%;height:55%}
.ptitulo{font-family:var(--display);font-weight:800;text-align:center;font-size:5.6cqw;letter-spacing:.08em;margin:0;color:#ffe3a3}
.psub{font-size:2.3cqw;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#b7a6d9;margin:-.6cqw 0 1cqw}
.protulo{font-size:2.4cqw;letter-spacing:.18em;text-transform:uppercase;color:#d8c38a;margin:1.2cqw 0 0;display:flex;align-items:center;gap:2cqw}
.protulo::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(216,195,138,.6),transparent)}
.protulo.desafio{color:#f0a3c4}.protulo.desafio::after{background:linear-gradient(90deg,rgba(240,163,196,.6),transparent)}
.plista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.3cqw}
.plista li{font-size:2.85cqw;line-height:1.32;color:#c9bde6}
.plista b{display:block;color:#fff;font-weight:800;font-size:3.1cqw}
.ptexto{font-size:2.9cqw;line-height:1.38;color:#d4c9ee;margin:0}
.pdorso .fila{font-size:3cqw}
.pfrase{font-family:var(--display);font-size:3.7cqw;line-height:1.35;text-align:center;color:#ffe3a3;margin:auto 0 0;text-wrap:balance}
.privada .holo{opacity:.18;mix-blend-mode:color-dodge}
/* lengüeta que asoma por el costado */
.lengueta{position:absolute;top:50%;right:-6%;width:6%;height:17%;transform:translateY(-50%);display:grid;place-items:center;
  border-radius:0 3cqw 3cqw 0;color:#2a1a06;background:linear-gradient(90deg,#7a5a24,#e9cf86 45%,#b08c43);box-shadow:2px 0 8px rgba(0,0,0,.5);cursor:grab}
.lengueta{z-index:2}
.lengueta::after{content:"";position:absolute;inset:-35% -150% -35% -80%} /* zona de toque más grande */
.lengueta svg{width:70%}
.lengueta.abierta{background:linear-gradient(90deg,#3f7a52,#9fe3b1 55%,#5aa874);box-shadow:0 0 14px rgba(140,255,180,.6)}
.lengueta.choque{animation:choque .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes choque{10%,90%{translate:-1px 0}20%,80%{translate:2px 0}30%,50%,70%{translate:-3px 0}40%,60%{translate:3px 0}}
.candado{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:12px;border-radius:14px;
  border:1px solid #c9a95c;background:linear-gradient(180deg,rgba(201,169,92,.22),rgba(201,169,92,.08));color:#ffe3a3;font-weight:800;font-size:.9rem}
.candado svg{width:18px;height:18px}
.aviso{margin:10px 0 0;text-align:center;font-size:.82rem;color:#ffe3a3;min-height:1.2em}
@media (prefers-reduced-motion:reduce){.lengueta.choque{animation:none}}

/* ---------- ranura y grosor de la privada ---------- */
.aura{transform:translateZ(-70px)}
.sombra{transform:translateZ(-70px)}
.canto.pared{background:#07040f;right:1.5%;border-radius:4.5% 0 0 4.5%/3.4% 0 0 3.4%}
.pcanto{position:absolute;inset:0;border-radius:4%/3%;background:linear-gradient(90deg,#3a2463,#c9a95c 92%,#e9cf86)}
.lengueta.estalla{animation:estalla .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes estalla{0%{scale:1}35%{scale:1.9;filter:brightness(2.2)}100%{scale:1}}

/* ---------- explosión y cartel ---------- */
.explosion{position:fixed;inset:0;width:100%;height:100%;z-index:80;pointer-events:none}
.cartel-liberado{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));
  background:rgba(3,4,14,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:aparece .45s ease-out}
.cartel-caja{max-width:340px;text-align:center;border:1px solid #c9a95c;border-radius:20px;padding:26px 22px 20px;
  background:radial-gradient(120% 90% at 50% 0%,#3a2463,#120b2a 70%);box-shadow:0 0 60px rgba(255,214,130,.35);animation:salta .6s cubic-bezier(.2,1.5,.4,1)}
.cartel-sello{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;color:#203a28;
  background:radial-gradient(circle at 35% 30%,#d9ffe4,#7fd99a 55%,#2f7a48);box-shadow:0 0 30px rgba(140,255,180,.6)}
.cartel-sello svg{width:56%}
.cartel-titulo{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.3;color:#ffe3a3;margin:0 0 6px;text-wrap:balance}
.cartel-gracias{color:#c9bde6;font-size:.88rem;margin:0}
@keyframes aparece{from{opacity:0}}
@keyframes salta{from{scale:.6;opacity:0}}

/* ---------- panel del desafío ---------- */
.panel-desafio,.invitacion{margin-top:16px;border:1px solid #6b5630;border-radius:16px;padding:16px;background:linear-gradient(180deg,rgba(58,36,99,.55),rgba(12,8,30,.85));display:flex;flex-direction:column;gap:12px}
.invitacion{margin:14px 0 4px;border-color:var(--acento)}
.panel-desafio:empty{display:none}
.panel-desafio h2,.invitacion h2{font-family:var(--display);font-size:1.08rem;margin:0;color:#ffe3a3;display:flex;align-items:center;gap:8px;text-wrap:balance}
.panel-desafio h2 svg{width:18px;height:18px;flex:none}
.explica{margin:0;color:#c9bde6;font-size:.86rem;line-height:1.45}
.inv-eyebrow{margin:0;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acento)}
.requisito p{margin:0 0 8px;font-size:.84rem;color:#c9bde6;line-height:1.4}
.requisito strong{color:#fff}
.casillas{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.casillas li{width:62px;padding:8px 4px;border-radius:12px;border:1px dashed #6b5630;text-align:center;display:flex;flex-direction:column;gap:3px}
.casillas b{font-family:var(--display);font-size:1.1rem;color:#6b5630}
.casillas span{font-size:.62rem;color:#a99bc9;letter-spacing:.04em}
.casillas li.lleno{border-style:solid;border-color:#c9a95c;background:rgba(201,169,92,.14)}
.casillas li.lleno b{color:#ffe3a3}
.casillas li.recien{animation:salta .6s cubic-bezier(.2,1.5,.4,1)}
.faltan{margin:0;font-size:.8rem;color:#ffe3a3}
.vivo{color:#9fe3b1}.vivo::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#9fe3b1;margin-right:5px;animation:respira 2s infinite}
.panel-desafio label,.invitacion label{font-size:.75rem;color:var(--niebla);display:flex;flex-direction:column;gap:6px}
.panel-desafio input,.invitacion input:not([type=checkbox]),.invitacion select{font:inherit;color:var(--tinta);background:rgba(255,255,255,.05);border:1px solid var(--linea);border-radius:10px;padding:10px;font-size:.9rem}
.compartir{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.compartir .principal{grid-column:1/-1;margin:0;text-align:center;text-decoration:none;background:#25d366;color:#05210f}
.link-invitacion{margin:0;font-size:.72rem;color:var(--niebla);word-break:break-all;user-select:all}
.demo{border-top:1px dashed var(--linea);padding-top:10px}
.demo summary{font-size:.75rem;color:var(--niebla);cursor:pointer}
.demo-fila{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.demo-fila .boton{font-size:.74rem;padding:8px 10px}
#form-inv{display:flex;flex-direction:column;gap:10px}
.inv-fecha{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.consent{flex-direction:row!important;align-items:flex-start;gap:8px!important;font-size:.76rem!important;line-height:1.4}
.consent input{margin-top:2px;width:18px;height:18px;flex:none}
.invitacion .principal{margin:0;text-align:center;text-decoration:none}
.candado:disabled{opacity:.6;cursor:default}
@media (prefers-reduced-motion:reduce){.cartel-liberado,.cartel-caja,.casillas li.recien,.lengueta.estalla{animation:none}}

/* ---------- barra de prueba fija ---------- */
.barra-demo{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  background:rgba(8,6,22,.88);border-top:1px solid #6b5630;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.barra-demo button{background:rgba(201,169,92,.14);border:1px solid #c9a95c;color:#ffe3a3;border-radius:999px;padding:8px 13px;font-size:.78rem;font-weight:800}
.barra-etq{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--niebla);margin-right:2px}
body.con-barra .envoltura{padding-bottom:84px}

/* ---------- borde del cofre ---------- */
.borde{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.borde i{position:absolute;display:block;background:linear-gradient(180deg,#5b4a2b,#d9c48c 35%,#f1e2ae 50%,#c9b27a 65%,#4d3e22)}
.canto.pared{right:0;border-radius:4.5%/3.4%;background:#07040f}


/* ---------- explosión: carga, temblor y cartel de logro ---------- */
.envoltura{position:relative}
.sonido{position:absolute;top:12px;right:max(16px,env(safe-area-inset-right,0px));width:38px;height:38px;border-radius:50%;border:1px solid var(--linea);background:rgba(255,255,255,.05);font-size:1rem;z-index:3}
.lengueta.cargando{animation:carga .65s cubic-bezier(.5,0,1,1) forwards}
@keyframes carga{
  0%{translate:0 -50%;filter:brightness(1)}
  20%{translate:-1px -50%}30%{translate:1px -50%}40%{translate:-2px -50%}50%{translate:2px -50%}
  60%{translate:-3px -50%;filter:brightness(1.6)}70%{translate:3px -50%}80%{translate:-4px -50%}90%{translate:4px -50%}
  100%{translate:0 -50%;filter:brightness(2.6) drop-shadow(0 0 14px #ffe7a0)}}
.lengueta{translate:0 -50%;transform:none}
@keyframes choque{10%,90%{translate:-1px -50%}20%,80%{translate:2px -50%}30%,50%,70%{translate:-3px -50%}40%,60%{translate:3px -50%}}
@keyframes estalla{0%{scale:1}35%{scale:1.9;filter:brightness(2.2)}100%{scale:1}}
body.temblor .envoltura{animation:temblor .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes temblor{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,3px)}40%,60%{transform:translate(6px,-3px)}}
.cartel-logro{margin:0 0 6px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:#9fe3b1}
.cartel-titulo{background:linear-gradient(100deg,#ffe3a3 30%,#fffbe8 45%,#ffe3a3 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 2.4s linear infinite}
@keyframes brillo{from{background-position:120% 0}to{background-position:-120% 0}}
.cartel-sello{position:relative}
.cartel-sello .orbita{position:absolute;inset:-14px;animation:gira 3s linear infinite}
.cartel-sello .orbita i{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff4c8;box-shadow:0 0 10px #ffd66e}
.cartel-sello .orbita i:nth-child(1){top:0;left:50%}.cartel-sello .orbita i:nth-child(2){bottom:8%;left:8%}.cartel-sello .orbita i:nth-child(3){bottom:8%;right:8%}
@keyframes gira{to{rotate:360deg}}
.cartel-caja .principal{animation:latido 1.6s ease-in-out infinite .9s}
@keyframes latido{50%{scale:1.04;box-shadow:0 0 24px rgba(255,214,130,.45)}}
@media (prefers-reduced-motion:reduce){.lengueta.cargando,body.temblor .envoltura,.cartel-titulo,.cartel-sello .orbita,.cartel-caja .principal{animation:none}}

/* ---------- sesión ---------- */
.sesion:empty{display:none}
.sesion{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.sesion-pide{margin:0;font-size:.82rem;color:var(--niebla)}
.sesion-pide.resalta{color:#ffe3a3;animation:latido 1s ease-in-out 2}
.sesion-boton{min-height:44px}
.sesion-chip{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--niebla);border:1px solid var(--linea);border-radius:999px;padding:4px 6px 4px 4px}
.sesion-chip img{width:26px;height:26px;border-radius:50%}
.sesion-chip b{color:var(--tinta)}
.sesion-salir{background:none;border:0;color:var(--acento);font-size:.78rem;font-weight:700;padding:4px 8px}
.favorita .sesion{margin-bottom:12px}

.texto-legal h2{font-family:var(--display);font-size:1.05rem;margin:22px 0 6px}
.texto-legal p,.texto-legal li{color:var(--niebla);font-size:.9rem;line-height:1.6}
.texto-legal b{color:var(--tinta)}
.texto-legal ul{padding-left:18px}

[hidden]{display:none!important}

.ayuda-mouse{margin:10px 0 0;text-align:center;font-size:.74rem;color:var(--niebla)}

/* ---------- cursor: que se note qué hace cada gesto ---------- */
@media (pointer:fine){
  .escena{cursor:grab}
  .escena.arrastrando,.escena.arrastrando .lengueta{cursor:grabbing}
  .escena.moviendo,.escena.moviendo .lengueta{cursor:move}
}