/* ─────────────────────────────────────────────────────────────────────
 * Wonderland · TU BARAJA (compartido)
 * Rejilla de las dos procedencias + lector (naipe en papel crema con su
 * registro de viaje). FUENTE ÚNICA: lo usan la madriguera y la fiesta.
 * Antes la madriguera llevaba su propia copia inline y las dos páginas
 * llegaron a contar conceptos distintos; ya no.
 * La página solo tiene que poner #barajaSection > #barajaGrid y cargar
 * wonderland-viajera.js (que inyecta el lector) + html2canvas.
 * Clases namespaced (.viajera-lector / .vl-*) para no chocar con nada.
 * ───────────────────────────────────────────────────────────────────── */

/* ── El carrusel dentro del carrusel ──────────────────────────────────
 * La madriguera y la fiesta traen su propia `.cards-grid`: un flex con
 * `overflow-x:auto` que fija `width:240px` a cada hijo directo. Cuando
 * dentro metemos nuestro `.cards-grid-h` (que ya scrollea por su cuenta),
 * ese contenedor se quedaba encajado en 240px: las cartas salían cortadas
 * a media altura y el scroll no llegaba a ninguna parte.
 * Si la rejilla de fuera lleva dentro un carrusel, se aparta: ni scroll,
 * ni máscara de desvanecido, ni ancho impuesto. Vale igual para los nimbos,
 * que usan el mismo patrón. */
.cards-grid:has(> .cards-grid-h){
  display:block; overflow:visible;
  -webkit-mask-image:none; mask-image:none;
}
.cards-grid > .cards-grid-h{ width:auto; flex:1 1 auto; }

/* Rejilla de TU BARAJA · card-nimbo con miniatura de la carta */
#barajaGrid .cards-grid-h{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:0.4rem; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:rgba(201,168,76,0.25) transparent; }
#barajaGrid .card-nimbo{ flex:0 0 auto; width:210px; scroll-snap-align:start; display:flex; flex-direction:column; }
#barajaGrid .vj-thumb{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; border-radius:4px; margin-bottom:0.9rem; border:0.9px solid rgba(201,168,76,0.28); }
@media (max-width:768px){ #barajaGrid .card-nimbo{ width:180px; } }

/* ── Las dos procedencias · misma carta, distinta luz ─────────────────
 * La ilustración NO cambia: es la misma carta, y si la pintáramos distinta
 * volverían a ser dos barajas. La diferencia es de materia:
 *   ♡ la encontraste → tiene cuerpo: filete de oro, más presente.
 *   ♥ te encontró    → es luz: sin filete, un halo suave alrededor.
 *   ♡♥ las dos       → cuerpo y luz a la vez. Es la mejor historia de la
 *                      baraja y hasta ahora no se premiaba con nada. */
#barajaGrid .card-nimbo[data-enc="1"] .vj-thumb{
  border:1px solid rgba(201,168,76,0.55);
}
#barajaGrid .card-nimbo[data-mesa="1"]:not([data-enc="1"]) .vj-thumb{
  border-color:transparent;
  box-shadow:0 0 22px rgba(201,168,76,0.20);
}
#barajaGrid .card-nimbo[data-enc="1"][data-mesa="1"] .vj-thumb{
  border:1px solid rgba(232,213,163,0.7);
  box-shadow:0 0 26px rgba(201,168,76,0.28);
}
#barajaGrid .card-nimbo[data-enc="1"][data-mesa="1"] .card-nimbo-label{
  color:var(--gold-light,#e8d5a3);
}

/* Cartas sin arte todavía (las que reparte la mesa) · mismo marco azul y
   mismo tamaño que las ilustradas, con el naipe beige dentro. La baraja se
   ve pareja: unas traen acuarela, otras traen papel. */
#barajaGrid .vj-thumb-digital{
  /* MISMA caja que la miniatura ilustrada: heredamos de .vj-thumb el ancho,
     el aspect-ratio 3/4 y el margen inferior. Lo único que cambia es que
     dentro hay papel en vez de acuarela. */
  display:flex; align-items:stretch; justify-content:stretch; padding:9px;
  background:linear-gradient(165deg,#12212f 0%,#0d1a26 60%,#101d2a 100%);
}
#barajaGrid .vj-mini{
  position:relative; width:100%; height:100%; padding:1.4rem 0.75rem;
  background:linear-gradient(160deg,#fdf6e3,#efe4c9);
  border:1px solid rgba(138,111,62,0.45); border-radius:2px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.5rem; overflow:hidden;
}
#barajaGrid .vj-mini::after{
  content:''; position:absolute; inset:5px;
  border:1px solid rgba(138,111,62,0.2); border-radius:1px; pointer-events:none;
}
/* Los índices de las esquinas · como en las cartas de verdad */
#barajaGrid .vj-mini-esq{
  position:absolute; font-size:0.72rem; line-height:1; color:#8a6f3e; opacity:0.75;
}
#barajaGrid .vj-mini-esq.arriba{ top:0.7rem; left:0.75rem; }
#barajaGrid .vj-mini-esq.abajo{ bottom:0.7rem; right:0.75rem; transform:rotate(180deg); }
#barajaGrid .vj-mini-nombre{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:1rem; line-height:1.15; color:#2e2410; text-align:center;
}
#barajaGrid .vj-mini-verso{
  font-family:'IM Fell English',serif; font-style:italic;
  font-size:0.72rem; line-height:1.45; color:rgba(58,46,24,0.7); text-align:center;
}

/* Lector · naipe en papel crema */
.viajera-lector{ position:fixed; inset:0; z-index:140; display:none; padding:2.4rem 1rem; overflow-y:auto; background:rgba(8,16,24,0.9); backdrop-filter:blur(7px); }
.viajera-lector.open{ display:block; }
.viajera-lector .vl-inner{ width:100%; max-width:388px; margin:0 auto; }

/* ── EL NAIPE, CON SUS DOS CARAS ──────────────────────────────────────
   Gira SOLO la carta, no la ficha entera: un naipe tiene dos caras, el
   resto de la ficha no. La física lleva el QR en el dorso; la digital
   lleva su viaje. Mismo tamaño, mismo sitio, misma proporción — el cielo
   ES el dorso del naipe, no una ventana aparte. */
.viajera-lector .vl-naipe{
  width:min(82vw,320px); margin:0.4rem auto 0.5rem;
  perspective:1400px;
}
.viajera-lector .vl-naipe-giro{
  position:relative; width:100%; aspect-ratio:3/4;
  transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.65,.02,.28,1);
}
.viajera-lector .vl-naipe-giro.girada{ transform:rotateY(180deg); }
.viajera-lector .vl-naipe-giro > *{
  position:absolute; inset:0; width:100%; height:100%;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:6px;
}
.viajera-lector .vl-cara-frente{ cursor:pointer; object-fit:cover; box-shadow:0 16px 42px rgba(0,0,0,0.5); }
.viajera-lector .vl-cara-dorso{ transform:rotateY(180deg); overflow:hidden; }
.viajera-lector .vl-cara-dorso .mapa-luces{
  width:100%; height:100%; padding:0; border-radius:6px;
  display:flex; flex-direction:column;
}
.viajera-lector .vl-cara-dorso .ml-svg{ flex:1 1 auto; height:100%; }
/* El pie del mapa, encima del propio cielo · no roba alto a la carta */
.viajera-lector .vl-cara-dorso .ml-pie{
  position:absolute; left:0; right:0; bottom:0.5rem; margin:0;
  text-shadow:0 1px 6px rgba(13,26,38,0.9);
}
.viajera-lector .vl-girar{
  font-family:'Cinzel',serif; font-size:0.52rem; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(138,111,62,0.6);
  text-align:center; margin:0 0 1rem; cursor:pointer;
}
.viajera-lector .vl-girar:hover{ color:#8a6f3e; }
/* El eslabón de la luz tocada · fuera del naipe, del derecho y legible */
.viajera-lector .vl-eslabon{
  margin:0.8rem auto 0; max-width:300px;
  padding-top:0.8rem; border-top:1px dashed rgba(138,111,62,0.3);
}
.viajera-lector .vl-eslabon .ml-sitio{
  font-family:'Cinzel',serif; font-size:0.58rem; letter-spacing:0.2em;
  text-transform:uppercase; color:#8a6f3e; margin:0 0 0.4rem;
}
.viajera-lector .vl-eslabon .ml-verso{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1rem; line-height:1.4; color:#2e2410; margin:0 0 0.4rem;
}
.viajera-lector .vl-eslabon .ml-firma{
  font-family:'IM Fell English',serif; font-style:italic;
  font-size:0.78rem; color:rgba(58,46,24,0.6); margin:0;
}
/* Al fotografiar la carta para compartirla, el naipe va por su cara buena. */
.viajera-lector .vl-carta.exportando .vl-naipe-giro{ transform:none !important; }
.viajera-lector .vl-carta{ position:relative; width:100%; background:linear-gradient(160deg,#fdf6e3,#efe4c9); border:1.6px solid rgba(138,111,62,0.55); border-radius:8px; padding:2.1rem 2rem 1.9rem; text-align:center; box-shadow:0 26px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(138,111,62,0.12); }
.viajera-lector .vl-frame{ position:absolute; inset:11px; border:0.9px solid rgba(138,111,62,0.4); border-radius:4px; pointer-events:none; }
.viajera-lector .vl-x{ position:absolute; top:0.5rem; right:0.7rem; z-index:2; background:transparent; border:none; cursor:pointer; font-family:'Cinzel',serif; font-size:0.8rem; line-height:1; color:rgba(138,111,62,0.55); padding:0.3rem 0.4rem; }
.viajera-lector .vl-x:hover{ color:#8a6f3e; }
.viajera-lector .vl-tag{ font-family:'Cinzel',serif; font-size:0.55rem; letter-spacing:0.3em; text-transform:uppercase; color:rgba(138,111,62,0.8); display:block; margin-bottom:1rem; }
.viajera-lector .vj-img{ width:min(82vw,320px); height:auto; display:block; margin:0.4rem auto 1.2rem; border-radius:6px; box-shadow:0 16px 42px rgba(0,0,0,0.5); }
.viajera-lector .vj-titulo{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300; font-size:clamp(1.9rem,5vw,2.3rem); line-height:1.1; color:#2e2410; margin-bottom:0.2rem; }
.viajera-lector .vj-lugar{ font-family:'IM Fell English',serif; font-style:italic; font-size:0.88rem; color:rgba(58,46,24,0.6); text-align:center; margin-top:0.2rem; }
.viajera-lector .vl-orn{ margin:1.4rem auto 1rem; display:flex; align-items:center; justify-content:center; gap:0.7rem; color:#8a6f3e; }
.viajera-lector .vl-orn .l{ width:40px; height:0; border-top:0.8px solid rgba(138,111,62,0.5); }
.viajera-lector .vj-diario{ text-align:left; border-top:1px solid rgba(138,111,62,0.2); padding-top:1.2rem; }
.viajera-lector .vd-linea{ margin-bottom:1.1rem; }
.viajera-lector .vd-firma{ font-family:'Cinzel',serif; font-size:0.5rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(138,111,62,0.75); }
.viajera-lector .vd-verso{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.9rem; color:rgba(46,36,16,0.8); line-height:1.5; margin-top:0.15rem; }
.viajera-lector .vd-vacio{ font-family:'IM Fell English',serif; font-style:italic; color:rgba(58,46,24,0.45); text-align:center; }
.viajera-lector .vj-despedida{ margin-top:1.4rem; font-family:'IM Fell English',serif; font-style:italic; font-size:0.82rem; line-height:1.55; color:rgba(58,46,24,0.6); text-align:center; }
.viajera-lector .vj-despedida a{ color:#8a6f3e; text-decoration:none; border-bottom:1px solid rgba(138,111,62,0.4); }
.viajera-lector .vl-firma{ font-family:'Cinzel',serif; font-size:0.58rem; letter-spacing:0.28em; text-transform:uppercase; color:rgba(138,111,62,0.85); margin-top:1.2rem; }
.viajera-lector .vl-firma .num{ color:#8a6f3e; }
.viajera-lector .vl-acciones{ margin-top:1.5rem; display:flex; flex-direction:column; gap:0.2rem; }
.viajera-lector .vl-btn{ font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:0.24em; text-transform:uppercase; padding:0.85rem 1.4rem; cursor:pointer; border:1px solid var(--gold,#c9a84c); background:transparent; color:var(--gold,#c9a84c); transition:all .3s ease; }
.viajera-lector .vl-btn:hover{ background:rgba(201,168,76,0.06); }
.viajera-lector .vl-btn-primario{ background:var(--gold,#c9a84c); color:#152430; }
.viajera-lector .vl-micro{ font-family:'IM Fell English',serif; font-style:italic; font-size:0.76rem; line-height:1.5; color:rgba(245,238,220,0.45); text-align:center; margin:0.35rem auto 1rem; max-width:340px; }
.viajera-lector .vl-carta.exportando{ box-shadow:none !important; background:#fdf6e3 !important; }

/* Soltarla en el mundo · el gesto que mueve la carta física.
   Va arriba del todo de las acciones porque es lo único que actúa sobre el
   objeto: compartir y descargar solo mueven la imagen. */
.viajera-lector .vl-soltar{ margin-bottom:1.4rem; padding-bottom:1.2rem; border-bottom:1px dashed rgba(201,168,76,0.18); }
/* El título de la sección · antes era un botón que solo abría el desplegable
   y parecía la acción. Ahora dice lo que es y no se puede pulsar. */
.viajera-lector .vl-soltar-titulo{
  font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--gold,#c9a84c);
  text-align:center; margin:0 0 0.6rem;
}
.viajera-lector .vl-soltar-caja{ margin-top:0.9rem; display:flex; flex-direction:column; gap:0.7rem; }
.viajera-lector .vl-btn-ubi{ background:var(--gold,#c9a84c); color:#152430; font-size:0.66rem; padding:0.95rem 1.4rem; }
.viajera-lector .vl-btn-ubi:hover{ background:var(--gold-light,#e8d5a3); }
.viajera-lector .vl-ubi-estado{ font-family:'IM Fell English',serif; font-style:italic; font-size:0.8rem; line-height:1.5; color:rgba(245,238,220,0.5); text-align:center; margin:0; min-height:1rem; }
.viajera-lector .vl-ubi-estado.ok{ color:var(--gold-light,#e8d5a3); }
.viajera-lector .vl-pista{ width:100%; padding:0.85rem 1rem; background:rgba(13,26,38,0.5); border:1px solid rgba(201,168,76,0.25); color:var(--cream,#faf6ef); font-family:'IM Fell English',serif; font-style:italic; font-size:0.92rem; line-height:1.6; resize:vertical; }
.viajera-lector .vl-pista:focus{ outline:none; border-color:var(--gold,#c9a84c); }
.viajera-lector .vl-pista::placeholder{ color:rgba(245,238,220,0.32); }
.viajera-lector .vl-soltar-msg{ font-family:'IM Fell English',serif; font-style:italic; font-size:0.82rem; line-height:1.5; text-align:center; margin:0; min-height:1rem; color:rgba(245,238,220,0.5); }
.viajera-lector .vl-soltar-msg.ok{ color:var(--gold-light,#e8d5a3); }
.viajera-lector .vl-soltar-msg.error{ color:#d97a7a; }


/* ── ESPERÁNDOTE · LA CARTA PARTIDA EN DIAGONAL ───────────────────────
   El cuarto estado, el mismo que en /encuentros y con el mismo dibujo:
   alguien te la escondió en un sitio y todavía no has ido a por ella.

   Ni de un desconocido (lleva tu nombre) ni tuya del todo (no la has
   tenido en la mano). Se parte en diagonal como se parten los naipes de
   verdad: la mitad encendida, la mitad dormida.

   Dos capas de la misma imagen — debajo la dormida, encima la viva
   recortada al triángulo de arriba a la izquierda — y el filo dorado
   sobre el corte, para que se lea como un tajo hecho a propósito y no
   como una imagen a medio cargar. */
#barajaGrid .card-nimbo.esperando{ position:relative }
#barajaGrid .card-nimbo.esperando .vj-thumb{
  filter:grayscale(1) brightness(0.42) contrast(0.8);
  opacity:0.55;
}
#barajaGrid .card-nimbo.esperando::before{
  content:; position:absolute; left:0; right:0; top:0;
  aspect-ratio:3/4; border-radius:4px; pointer-events:none;
  background-image:var(--arte); background-size:cover; background-position:center;
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
#barajaGrid .card-nimbo.esperando::after{
  content:; position:absolute; left:0; right:0; top:0;
  aspect-ratio:3/4; border-radius:4px; pointer-events:none;
  background:linear-gradient(to bottom left,
    transparent calc(50% - 0.5px), rgba(232,213,163,0.9) 50%, transparent calc(50% + 0.5px));
}
/* La marca y la voz también se encienden · es lo que tienes pendiente. */
#barajaGrid .card-nimbo.esperando .card-nimbo-label{ color:rgba(232,213,163,0.95) }
#barajaGrid .card-nimbo.esperando .card-nimbo-apertura{ color:rgba(232,213,163,0.75) }