@import url('marca.css');

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg); min-height:100dvh;
  font:15px/1.55 var(--font-body);
  -webkit-tap-highlight-color:transparent;
}
/* el barrido del tubo: la casa entera vive detras de un CRT */
body::after{
  content:''; position:fixed; inset:0; z-index:99; pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0 2px, var(--scanline) 2px 3px);
  mix-blend-mode:overlay;
}

/* ---------------------------------------------------------------- barra */
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem; border-bottom:1px solid var(--border-dim);
  position:sticky; top:0; z-index:5; background:var(--bg);
}
.marca{
  margin:0; font:400 .72rem/1 var(--font-pixel); letter-spacing:.08em;
  text-transform:lowercase; color:var(--fg);
}
.indicadores{display:flex; gap:.6rem; align-items:center}
.dato{
  font:400 1.05rem/1 var(--font-term); letter-spacing:.06em;
  color:var(--fg-muted); border:1px solid var(--border-dim);
  padding:.24rem .6rem; font-variant-numeric:tabular-nums;
}
#creditos{color:var(--fg)}

/* ---------------------------------------------------------------- acciones */
main{max-width:1100px; margin:0 auto; padding:1.1rem}
.acciones{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.4rem}
.boton{
  font:inherit; color:var(--fg); cursor:pointer; background:var(--bg);
  border:1px solid var(--border-dim); border-radius:0;
  padding:.6rem 1rem; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  transition:background .12s, border-color .12s, color .12s;
}
.boton:hover:not(:disabled){background:var(--ed-red-10); border-color:var(--border)}
.boton:active:not(:disabled){background:var(--ed-red-20)}
.boton:disabled{color:var(--fg-disabled); border-color:var(--ed-red-20); cursor:not-allowed}
.boton .etiqueta{font:400 .62rem/1.4 var(--font-pixel); letter-spacing:.02em}
.boton .sub{font:400 1rem/1 var(--font-term); color:var(--fg-muted); letter-spacing:.04em}
.primario{border-color:var(--border)}
.oro{border-color:var(--border-dim)}
.fantasma{background:transparent; flex-direction:row; align-items:center; border-color:var(--ed-red-20)}
.chico{padding:.35rem .7rem; font-size:.8rem}

/* ---------------------------------------------------------------- baraja */
.baraja{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.vacio{color:var(--fg-muted); text-align:center; padding:3rem 1rem;
  font:400 1.1rem/1.5 var(--font-term)}
.vacio.oculta,.oculta{display:none !important}

/* ---------------------------------------------------------------- la carta */
/* EL REPARTO DEL DEDO. Arriba y abajo es del navegador (recorrer la galeria);
   de lado a lado es nuestro (voltear el naipe). `pan-y` dice exactamente eso, y
   es lo que el codigo de gestos ya daba por hecho. Con `none` la galeria dejaba
   de recorrerse con el dedo encima de una carta —o sea, casi siempre—; con
   `auto` el navegador se lleva el arrastre a media gesta. El unico sitio donde
   el dedo es todo nuestro es la lupa: ahi se rasca y no hay nada que recorrer.
   Mientras se ordena, el scroll lo frena el touchmove del JS — a esas alturas
   cambiar touch-action ya no sirve, porque el navegador decidio de quien era el
   gesto en el primer contacto.
   El callout y el user-select apagan el menu del pulsado largo, que en tactil se
   come el gesto de ordenar. */
.carta{
  perspective:1100px; touch-action:pan-y;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.carta.modo-lupa, .carta.modo-lupa .carta-cuerpo{touch-action:none}
/* la imagen es la que dispara "guardar imagen" y el arrastre nativo */
.carta img{-webkit-user-drag:none; user-drag:none; pointer-events:none}
.carta-cuerpo{
  position:relative; aspect-ratio:2/3; cursor:pointer;
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.8,.25,1);
}
.carta.volteada .carta-cuerpo{transform:rotateY(180deg)}
.cara{
  position:absolute; inset:0; overflow:hidden; backface-visibility:hidden;
  border:1px solid var(--border-dim); background:var(--bg-elev);
}
.cara.reverso{transform:rotateY(180deg)}
.cara img{width:100%; height:100%; object-fit:cover; display:block}

/* la costra */
.rasca{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.modo-lupa .carta-cuerpo{cursor:grab}
.modo-lupa .carta-cuerpo:active{cursor:grabbing}
.pista{
  position:absolute; inset:0; display:grid; place-content:center; gap:.2rem;
  text-align:center; pointer-events:none; color:var(--fg);
  font:400 1.05rem/1 var(--font-term); letter-spacing:.2em; text-transform:uppercase;
  transition:opacity .35s ease;
}
.pista span{font-size:1.4rem; letter-spacing:0}
.carta.revelada .rasca,.carta.revelada .pista{opacity:0; pointer-events:none}

/* ---------------------------------------------------------------- el reverso
   Mismo grabado siempre; lo que cambia es el codigo de la receta y los ANILLOS,
   uno por mano por la que paso la carta. Una recien abierta no tiene ninguno. */
.reverso{
  --h:0; --tinte:var(--ed-red);
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, var(--ed-red-10) 3px 4px),
    repeating-linear-gradient(0deg, transparent 0 3px, var(--ed-red-05) 3px 4px),
    var(--bg);
  /* OJO: nada de position aqui — .cara es absolute con inset:0 y ponerle
     relative la despega, dejando el reverso del alto de su contenido. Los
     anillos se anclan al .sello, que si es relative. */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem;
}
.sello{
  position:relative; width:58%; aspect-ratio:1; display:grid; place-content:center;
  border:1px solid var(--border-dim);
}
.sello::before{
  content:''; position:absolute; inset:14%;
  border:1px solid var(--ed-red-20);
  background:repeating-conic-gradient(from var(--giro,0deg),
    transparent 0 6deg, var(--ed-red-05) 6deg 12deg);
}
.sello b{
  position:relative; font:400 .9rem/1 var(--font-pixel);
  letter-spacing:.06em; color:var(--fg-strong);
}
/* los anillos: uno por dueño anterior, dibujados hacia afuera del sello */
.anillos{position:absolute; inset:-14%; pointer-events:none}
.anillos i{
  position:absolute; inset:0; border:1px solid var(--ed-red-40);
  border-radius:50%; transform:scale(var(--s));
}
.reverso .serie{font:400 .95rem/1 var(--font-term); letter-spacing:.14em; color:var(--fg-muted)}
.reverso .manos{
  font:400 .95rem/1 var(--font-term); letter-spacing:.1em; color:var(--fg);
}

/* pie */
.carta-pie{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:.4rem; font:400 1rem/1 var(--font-term); color:var(--fg-muted);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.carta.volteada .carta-pie{opacity:1; pointer-events:auto}
.carta-pie button{
  font:inherit; background:none; border:0; color:var(--fg-muted);
  cursor:pointer; padding:.15rem .3rem; letter-spacing:.08em;
}
.carta-pie button:hover{color:var(--fg-strong)}
/* el pase del minuto: mientras cuenta, el botón ES el reloj — apagado y sin saltar */
.carta-pie .botar.cerrada{opacity:.45; cursor:default; font-variant-numeric:tabular-nums}
.carta-pie .botar.cerrada:hover{color:var(--fg-muted)}
.marca-unica{color:var(--fg); letter-spacing:.12em}

/* ---------------------------------------------------------------- apertura */
.apertura{position:fixed; inset:0; z-index:20; overflow:auto; background:var(--bg); padding:1.1rem}
.apertura-cabeza{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem;
  font:400 .62rem/1.6 var(--font-pixel); letter-spacing:.04em; color:var(--fg);
}
.apertura-cartas{display:grid; gap:.9rem; max-width:900px; margin:0 auto;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* ---------------------------------------------------------------- lupa */
.lupa{position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:0}
.lupa-fondo{position:absolute; inset:0; background:var(--bg)}
/* La ALTURA manda y la proporcion la da la imagen (--ar desde JS): se encuadra
   arriba-abajo, sin estirar. En pantalla estrecha el ancho pone el tope. */
.lupa-carta{position:relative; height:100dvh; width:auto;
  aspect-ratio:var(--ar, 2/3); max-width:100dvw}
.lupa-carta .carta{height:100%}
/* El recorte de `cover` es simetrico, y esta coleccion no lo es: su centro de
   masa vive en el 46,9%. Esto lo compensa moviendo la imagen a la derecha lo
   que el sujeto esta corrido a la izquierda. Va en object-position y no en
   transform porque `cover` recorta el contenido A LA CAJA: mover la caja no
   descubre mas imagen, deja un hueco negro. El porcentaje lo pone el JS, que es
   quien sabe cuanto sobrante hay; si la imagen se ve entera, el foco es 50% y
   no pasa nada. La costra NO se mueve: cubre la carta entera. */
.modo-lupa .cara img{object-position:var(--foco, 50%) center}
.lupa-carta .carta-cuerpo{aspect-ratio:auto; height:100%}
.lupa-carta .cara{border:0}
/* La lupa ya no APARECE: viene del hueco de su miniatura, y vuelve a el (ver
   volarLupa en app.js). Cuando una cosa desaparece en un sitio y sale en otro,
   el ojo la trata como dos cosas; cuando viaja, como una sola. `crece` queda de
   red, para cuando no hay hueco del que salir. */
.lupa.sin-vuelo .lupa-carta .carta{animation:crece .25s cubic-bezier(.2,.9,.3,1)}
@keyframes crece{from{opacity:0; transform:scale(.94)}}
/* mientras vuela no recibe el dedo: un toque a mitad de camino dejaria la carta
   a medio viaje */
.lupa.volando{pointer-events:none}
/* Con el aumento puesto el pie estorba: tapa justo el borde de abajo, que es
   por donde se navega. Y el cursor dice lo que se puede hacer. */
body.acercado .lupa-carta .carta-pie{opacity:0; pointer-events:none}
/* con el marco crecido, lo que sobresale se recorta contra la pantalla. Solo
   mientras hay aumento: un overflow permanente aplanaria el 3D del volteo, que
   vive en la misma cadena. */
body.acercado .lupa{overflow:hidden}
body.acercado .modo-lupa .carta-cuerpo{cursor:move}
.lupa-carta .carta-pie{
  position:absolute; left:0; right:0; bottom:0; margin:0; z-index:3;
  gap:1.6rem; font-size:1.1rem; padding:1.4rem 1rem .8rem;
  background:linear-gradient(transparent, rgba(0,0,0,.9));
}
.lupa-carta .carta-pie button{color:var(--fg)}
.lupa-carta .sello{width:min(52%, 34dvh)}
.lupa-carta .sello b{font-size:clamp(1rem, 3.4dvh, 1.8rem)}
.lupa-carta .reverso{gap:1.2rem; padding-bottom:4rem}

.modo-galeria .carta-cuerpo:active,.modo-apertura .carta-cuerpo:active{filter:brightness(1.25)}

/* ---------------------------------------------------------------- paneles */
.panel{position:fixed; inset:0; z-index:30; background:var(--bg); overflow:auto; padding:1.1rem}
.panel-caja{max-width:920px; margin:1.5rem auto; border:1px solid var(--border-dim); padding:1.2rem}
.panel-caja.angosta{max-width:520px}
.panel-cabeza{display:flex; justify-content:space-between; align-items:center; gap:1rem}
.panel-cabeza h2{margin:0; font:400 .68rem/1.6 var(--font-pixel); color:var(--fg)}
.nota{color:var(--fg-muted); font:400 1.05rem/1.45 var(--font-term); max-width:56ch}
.curaduria{display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); margin-top:.9rem}
.cur{border:1px solid var(--border-dim); overflow:hidden; background:var(--bg-elev)}
.cur img{width:100%; aspect-ratio:1; object-fit:cover; display:block}
.cur .barra-ret{height:3px; background:var(--ed-red-10)}
.cur .barra-ret i{display:block; height:100%; background:var(--fg)}
.cur small{display:block; padding:.3rem .4rem; font:400 .9rem/1.2 var(--font-term); color:var(--fg-muted)}

.recetas{margin-top:1.4rem}
.recetas h3{font:400 .6rem/1.6 var(--font-pixel); color:var(--fg); margin:0 0 .5rem}
.receta{position:relative; display:flex; gap:.5rem; align-items:baseline;
  padding:.35rem .5rem; background:var(--bg-elev); margin-bottom:.25rem; overflow:hidden}
.receta i{position:absolute; inset:0 auto 0 0; background:var(--ed-red-10)}
.receta b,.receta code,.receta span{position:relative}
.receta b{font:400 1rem/1 var(--font-term); min-width:2.6rem; font-variant-numeric:tabular-nums}
.receta code{color:var(--fg); font:400 .95rem/1 var(--font-term)}
.receta span{font:400 .95rem/1.3 var(--font-term); color:var(--fg-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}

/* ---------------------------------------------------------------- la mesa */
.qr-caja{background:#f6f0f2; padding:.9rem; margin:.9rem auto; max-width:290px}
.qr-pie{text-align:center; color:var(--fg-muted); font:400 1rem/1.35 var(--font-term); margin-top:.4rem}
.qr-pie code{color:var(--fg); word-break:break-all}
.mesa-fila{display:flex; gap:.9rem; align-items:center; margin:.9rem 0}
.mesa-fila img{width:92px; aspect-ratio:2/3; object-fit:cover; border:1px solid var(--border-dim)}
.mesa-fila div{font:400 1.05rem/1.4 var(--font-term)}
.mesa-fila b{color:var(--fg); display:block; font:400 .58rem/1.8 var(--font-pixel)}
.elegir{display:grid; gap:.4rem; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); margin:.7rem 0}
.elegir button{padding:0; border:1px solid transparent; background:none; cursor:pointer; overflow:hidden}
.elegir button img{width:100%; aspect-ratio:2/3; object-fit:cover; display:block}
.elegir button.puesta{border-color:var(--border)}
.pie-mesa{display:flex; gap:.5rem; justify-content:flex-end; margin-top:.9rem}

/* ---------------------------------------------------------------- aviso */
.aviso{
  position:fixed; left:50%; bottom:1.2rem; transform:translate(-50%,150%);
  background:var(--bg); border:1px solid var(--border); color:var(--fg);
  padding:.55rem 1rem; font:400 1.05rem/1.3 var(--font-term); letter-spacing:.04em;
  z-index:60; transition:transform .28s cubic-bezier(.2,.9,.3,1); max-width:88vw; text-align:center;
}
.aviso{visibility:hidden}
.aviso.visible{transform:translate(-50%,0); visibility:visible}

/* ---------------------------------------------------------------- la del MAS
   Sin imagen y sin texto: un signo. Es la unica instruccion de la casa, y con
   la baraja vacia queda ella sola en la pantalla. */
.carta-mas .cara.mas{
  display:grid; place-content:center;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, var(--ed-red-05) 3px 4px),
    var(--bg);
  border-color:var(--border);
}
.carta-mas .cara.mas b{font:400 2.2rem/1 var(--font-term); color:var(--fg)}
.carta-mas .carta-cuerpo{transition:filter .15s}
.carta-mas:active .carta-cuerpo{filter:brightness(1.5)}
/* El + de una galeria: el mismo signo, pero lleva el giro de SU codigo — la
   misma rueda con la que se firma cada sobre. Se lee de quien es sin una
   palabra, que es como se dicen las cosas aqui. */
.carta-mas-suya .cara.mas{
  background:
    repeating-conic-gradient(from var(--giro,0deg),
      transparent 0 6deg, var(--ed-red-05) 6deg 12deg),
    var(--bg);
}
/* El reloj del + gratis va COLGADO al pie, no en el flujo: si entra en la
   columna, el signo y el reloj se centran juntos y el + se sube — queda corrido
   respecto a los demas +, que no llevan reloj. El signo se queda en su sitio
   pase lo que pase debajo. */
.carta-mas-suya .serie{
  position:absolute; left:0; right:0; bottom:11%; text-align:center;
  font:400 .95rem/1 var(--font-term); letter-spacing:.12em; color:var(--fg-muted);
  font-variant-numeric:tabular-nums;
}
.carta-mas-suya.cerrada{opacity:.35}
.carta-mas-suya.cerrada .cara{border-color:var(--ed-red-20)}

/* el mazo de categorias: cada sobre es tambien una carta */
#sobres{display:grid; place-items:center}
.mazo{
  position:relative; z-index:1; max-width:min(92vw, 760px);
  grid-template-columns:repeat(auto-fit,minmax(140px,180px)); justify-content:center;
}
 /* el sello de la categoria usa el grabado del dorso, pero aqui NO hay carta de
   dos caras: sin quitarle el giro queda de espaldas y backface la esconde. */
.carta-sobre .cara.reverso{transform:none; cursor:pointer}
.carta-sobre .carta-cuerpo{transform-style:flat}
.carta-sobre.cerrada{opacity:.35}
.carta-sobre.cerrada .cara{border-color:var(--ed-red-20)}
.carta-sobre:not(.cerrada):active .carta-cuerpo{filter:brightness(1.4)}
.carta-sobre .serie{font-size:1.1rem; letter-spacing:.1em}

/* la oferta de pago: tres cifras, nada mas */
.precios{display:flex; gap:.6rem; justify-content:center; margin:1rem 0}
.precio{
  font:400 1.2rem/1 var(--font-term); color:var(--fg); background:var(--bg);
  border:1px solid var(--border-dim); padding:.9rem 1.1rem; cursor:pointer;
}
.precio:hover{border-color:var(--border); background:var(--ed-red-10)}

/* el unico texto de la casa: que puerta es cada sobre */
.carta-sobre .rotulo{
  font:400 1.05rem/1 var(--font-term); letter-spacing:.1em;
  color:var(--fg); text-transform:lowercase;
}
.carta-sobre .serie{color:var(--fg-muted)}

/* la pista de la costra, en la paleta de la casa */
.pista{color:var(--fg)}

/* cada galeria en su bloque; el filete lleva el color de su codigo */
.galeria{margin-top:1.6rem}
/* la cola: la puerta a lo que todavia no se tiene. Sin filete ni titulo — no es
   una galeria, es lo que hay despues de todas. */
.cola{margin-top:2.6rem}
.cola .filete, .cola .titulo{display:none}
/* La galeria desplegada no es otra pantalla: es esta, con mas sitio. El filete
   se enciende para que se sepa cual esta abierta sin una palabra. */
.galeria.desplegada .filete{opacity:1; box-shadow:0 0 12px var(--ed-red-40)}
.carta-galeria.abierta .cara.mas{border-color:var(--border); background:
  repeating-linear-gradient(90deg, transparent 0 3px, var(--ed-red-10) 3px 4px),
  var(--bg)}
.galeria .filete{
  display:block; height:1px; margin:0 0 .9rem;
  background:hsl(var(--giro, 340) 100% 45%); opacity:.5;
}

/* el titulo de la galeria: lo unico que se nombra */
.titulo{
  margin:0 0 .8rem; font:400 .62rem/1.6 var(--font-pixel);
  letter-spacing:.06em; color:var(--fg); text-transform:lowercase;
}
.apertura-cabeza .titulo{margin:0}

/* la carta que abre una galeria: su cuenta y la palabra */
.carta-galeria .cara.mas{
  display:grid; place-content:center; gap:.3rem; text-align:center;
  background:repeating-linear-gradient(90deg, transparent 0 3px, var(--ed-red-05) 3px 4px), var(--bg);
  border-color:var(--border);
}
.carta-galeria .cara.mas b{font:400 1.6rem/1 var(--font-term); color:var(--fg)}
.carta-galeria .cara.mas span{font:400 1rem/1 var(--font-term); color:var(--fg-muted); letter-spacing:.1em}
.carta-galeria:active .carta-cuerpo{filter:brightness(1.4)}

/* arrastrando para ordenar */
body.ordenando{user-select:none}
/* El peso de la levantada va en el CUERPO, no en la .carta: la .carta queda
   libre para el translate que la lleva pegada al dedo, y el cuerpo ya tiene su
   propia transicion (la del volteo) que hace el despegue sin un keyframe mas. */
.carta.agarrada{position:relative; z-index:9}
.carta.agarrada .carta-cuerpo{transform:scale(1.06)}
.carta.agarrada.volteada .carta-cuerpo{transform:rotateY(180deg) scale(1.06)}
.carta.agarrada .cara{border-color:var(--border)}
/* lo que se atenua es la mesa, no la que se levanto */
body.ordenando .carta:not(.agarrada){opacity:.5; transition:opacity .18s ease}

/* el nombre de la categoria, en el sobre */
.carta-sobre .titulo-cat{
  font:400 .58rem/1.4 var(--font-pixel); letter-spacing:.04em;
  color:var(--fg-strong); text-transform:lowercase;
}
.carta-sobre .sello{width:44%}
.carta-sobre .cara.reverso{gap:.4rem}

/* la costra ya se deshizo sola en el canvas: el opacity es solo el remate */
.carta.revelada .rasca{transition:opacity .28s ease .05s}
.carta.revelada .pista{transition:opacity .2s ease}

/* ---------------------------------------------------------------- materia
   El peso del naipe: mientras gira se acerca al ojo y al final asienta. Va en
   .carta (no en .carta-cuerpo, que ya lleva el rotateY) para que cada uno
   tenga su propia curva sin pelearse por la misma propiedad. */
@keyframes peso{
  0%{transform:scale(1)}
  38%{transform:scale(1.045)}
  72%{transform:scale(.985)}
  100%{transform:scale(1)}
}
.carta.girando{animation:peso 520ms cubic-bezier(.3,.7,.3,1)}

/* la llegada de una carta nueva: no aparece, entra */
@keyframes llega{
  from{opacity:0; transform:translateY(9%) scale(.94)}
  to{opacity:1; transform:none}
}
.carta.nueva{animation:llega 420ms cubic-bezier(.2,.9,.3,1) backwards}

/* El aviso es lo unico que habla: que se escriba, no que aparezca. Se abre en
   una linea y el texto sale detras, como una terminal imprimiendo. */
.aviso{
  transform:translate(-50%,0); clip-path:inset(0 50% 0 50%);
  transition:clip-path .26s cubic-bezier(.2,.9,.3,1), visibility 0s linear .3s;
}
.aviso.visible{clip-path:inset(0 0 0 0); transition-delay:0s; visibility:visible}
.aviso::before{
  content:'> '; color:var(--fg-muted);
}

/* ================================================================= el sobre
   Vive fuera de los paneles porque tiene que volar POR ENCIMA de los dos: nace
   sobre el mazo (#sobres, z30) y aterriza sobre la apertura (z20). */
.sobre{
  position:fixed; inset:0; z-index:35;
  display:grid; place-items:center;
  pointer-events:none; perspective:1400px;
}
.sobre.oculta{display:none !important}

/* capa 1 — el viaje (translate+scale) y, al final, el pliegue */
.sobre-caja{
  width:min(54vw, 36dvh); aspect-ratio:2/3;
  transform-style:preserve-3d; will-change:transform;
}
/* capa 2 — el peso: se acerca al ojo a mitad de giro */
.sobre-peso{width:100%; height:100%; transform-style:preserve-3d; will-change:transform}
/* capa 3 — el giro */
.sobre-giro{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; will-change:transform;
}
/* Cuatro capas y no una: viaje, peso, giro y solapa se SOLAPAN en el tiempo, y
   solapados es justo lo que los hace materiales. Compartiendo elemento tendrian
   que compartir curva. Misma doctrina que el volteo (§materia). */

.sobre-cara{position:absolute; inset:0; backface-visibility:hidden}
/* la frente lleva DENTRO un .cara.reverso identico al de la carta tocada: por
   eso hereda .carta-sobre, para que le apliquen sus mismos selectores. El
   relevo carta->sobre no tiene costura porque no hay nada que igualar. */
/* OJO: sin overflow:hidden en el dorso. Cualquier overflow distinto de visible
   aplana el contexto 3D y la solapa se veria como una calcomania. */
.sobre-dorso{
  transform:rotateY(180deg); transform-style:preserve-3d;
  border:1px solid var(--border-dim);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, var(--ed-red-05) 3px 4px),
    var(--bg);
}
/* La boca: la ranura iluminada, no una banda pegada. Un arco que se abre desde
   el borde de la abertura y se apaga hacia abajo — la luz que entra por la
   ranura cuando la solapa cede. Apagada hasta que la solapa termina de abrir. */
.sobre-boca{
  /* un óvalo cerrado DENTRO de su caja (15-sep): antes el degradado nacía en el
     borde de arriba de la caja y ese filo recto, casi de lado a lado, se leía
     como una banda —un rectángulo de luz—. La luz que entra por la ranura no
     tiene esquinas. */
  position:absolute; left:14%; right:14%; top:24%; height:26%;
  background:radial-gradient(ellipse 50% 50% at 50% 42%,
    var(--ed-red-40) 0%, var(--ed-red-20) 38%, transparent 72%);
  opacity:0; will-change:opacity;
}

/* LOS PLIEGUES. Un rectangulo vacio no se lee como sobre: lo que lo dice son
   los dobleces. Se dibujan los tres que quedan cerrados —los dos laterales y
   el de abajo—, cada uno como una diagonal fina; el cuarto es la solapa, que
   tiene su propio elemento porque gira. Con esto el dorso pasa de ser un marco
   vacio a ser papel doblado cuatro veces. */
.sobre-dorso::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  /* OJO con el sentido (15-sep, cazado por ed: «un cuadrado debajo extraño»): en un
     degradado «hacia una esquina» la línea del 50 % pasa por las OTRAS dos esquinas.
     Con el sentido al revés cada diagonal unía los puntos medios de los bordes y el
     dorso dibujaba un rombo —un cuadrado girado— en vez de los pliegues de papel,
     que van de cada esquina al centro. */
  background:
    linear-gradient(to top right, transparent calc(50% - .5px),
      var(--ed-red-20) 50%, transparent calc(50% + .5px)) left top / 50% 50% no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .5px),
      var(--ed-red-20) 50%, transparent calc(50% + .5px)) right top / 50% 50% no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .5px),
      var(--ed-red-20) 50%, transparent calc(50% + .5px)) left bottom / 50% 50% no-repeat,
    linear-gradient(to top right, transparent calc(50% - .5px),
      var(--ed-red-20) 50%, transparent calc(50% + .5px)) right bottom / 50% 50% no-repeat;
}
/* y la linea de la abertura: donde apoya la solapa cuando esta cerrada */
.sobre-dorso::after{
  content:''; position:absolute; left:0; right:0; top:34%; height:1px;
  background:var(--ed-red-10); pointer-events:none;
}

/* LA SOLAPA es un triangulo, no un rectangulo: es la forma que tiene la de un
   sobre de verdad, y es lo que hace que al abrirse se lea como papel que cede y
   no como una tapa. Gira sobre el borde superior; el translateZ(.5px) la
   despega del dorso para que cerradas no parpadeen (z-fighting en GPU movil). */
.sobre-solapa{
  position:absolute; left:-1px; right:-1px; top:-1px; height:35%;
  background:linear-gradient(var(--bg-elev), var(--bg));
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:50% 0; transform:translateZ(.5px);
  will-change:transform;
}
/* el filo del triangulo, que es el borde del papel */
.sobre-solapa::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .7px),
      var(--ed-red-40) 50%, transparent calc(50% + .7px)) left / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - .7px),
      var(--ed-red-40) 50%, transparent calc(50% + .7px)) right / 50% 100% no-repeat;
}

/* la capa de GPU solo mientras hay movimiento: un will-change permanente en
   seis cartas deja seis texturas vivas en un telefono de gama media */
.animando{will-change:transform, opacity}
/* el telon del mazo cae y sube; hoy aparecia de golpe */
#sobres-fondo{will-change:opacity}

@media (prefers-reduced-motion: reduce){
  .carta.girando, .carta.nueva{animation:none}
  .aviso{transition-duration:.01ms}
  .carta-cuerpo{transition-duration:.01ms}
  /* el sobre no existe con el movimiento reducido: el JS no lo llega a crear.
     Este bloque es el cinturon por si quedara uno vivo de una sesion anterior. */
  .sobre{display:none !important}
  /* la lupa abre y cierra directo, sin perder informacion */
  .lupa.sin-vuelo .lupa-carta .carta{animation:none}
}

/* ------------------------------------------------------------- los montones */
/* Un monton es una carta mas: mismo tamano, misma rejilla, mismo sitio en la
   fila. La unica diferencia es que se le ven las cartas apiladas detras — la
   pila dice "esto son varias" antes de que nadie lea el numero. */
.carta-monton .carta-cuerpo{position:relative}
.carta-monton .carta-cuerpo::before,
.carta-monton .carta-cuerpo::after{
  content:''; position:absolute; inset:0; z-index:-1;
  border:1px solid var(--border-dim); background:var(--bg-elev);
  transition:transform .18s cubic-bezier(.2,.8,.25,1);
}
.carta-monton .carta-cuerpo::before{transform:translate(3px,-3px)}
.carta-monton .carta-cuerpo::after {transform:translate(6px,-6px)}
/* abierto, la pila se separa: el monton dice que dejo salir lo que tenia */
.carta-monton.abierto .carta-cuerpo::before{transform:translate(5px,-5px)}
.carta-monton.abierto .carta-cuerpo::after {transform:translate(10px,-10px)}

.carta-monton .cara.mas{
  display:grid; place-content:center; gap:.3rem; text-align:center; padding:.4rem;
  background:repeating-linear-gradient(90deg, transparent 0 3px, var(--ed-red-05) 3px 4px), var(--bg);
  border-color:var(--border);
}
.carta-monton.abierto .cara.mas{border-color:var(--border); background:
  repeating-linear-gradient(90deg, transparent 0 3px, var(--ed-red-10) 3px 4px), var(--bg)}
.carta-monton .cara.mas b{font:400 1.6rem/1 var(--font-term); color:var(--fg)}
.carta-monton:active .carta-cuerpo{filter:brightness(1.4)}

/* el nombre se edita tocandolo: ni dialogo ni campo aparte. Los tres puntos del
   vacio son la unica pista, y son visuales. */
.carta-monton .titulo-grupo{
  font:400 .58rem/1.4 var(--font-pixel); letter-spacing:.04em;
  color:var(--fg); text-transform:lowercase; outline:none;
  min-width:2ch; max-width:100%; word-break:break-word; cursor:text;
}
.carta-monton .titulo-grupo:empty::before{content:'···'; color:var(--fg-disabled)}
.carta-monton .titulo-grupo:focus{
  color:var(--fg); box-shadow:0 1px 0 hsl(var(--giro,340) 100% 45%);
}

/* Lo de dentro se despliega DEBAJO y a lo ancho: en su sitio, empujando al
   resto hacia abajo. Es lo que hace la galeria en la vista principal, un
   escalon mas abajo — el mismo gesto, nada nuevo que aprender. La sangria de la
   izquierda es lo unico que dice "esto cuelga de aquello". */
.nido{
  grid-column:1/-1; display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  padding:.9rem 0 .9rem .9rem; margin:-.2rem 0 .2rem;
  border-left:1px solid var(--border-dim);
}
.nido:empty{display:none}

/* ------------------------------------- fundir, meter, sacar: solo se resalta */
/* La levantada deja pasar el puntero: si no, lo unico que hay bajo el dedo es
   ella misma y no se puede saber sobre QUE se esta sosteniendo. */
.carta.agarrada{pointer-events:none}
/* la de arriba se inclina cuando hay algo debajo que la acepta: el gesto ya no
   es "poner al lado", es "dejar caer dentro" */
body.fundiendo .carta.agarrada .carta-cuerpo{transform:rotate(3deg)}

/* dos cartas que se van a fundir: la de debajo crece y enciende su borde */
.carta.funde .carta-cuerpo{
  transform:scale(1.04);
  box-shadow:0 0 0 1px hsl(var(--giro,340) 100% 50%), 0 0 18px var(--ed-red-40);
  transition:transform .16s cubic-bezier(.2,.8,.25,1), box-shadow .16s;
}
/* un monton (o la puerta) que admite lo que viene: abre la pila, dice "cabe" */
.carta.admite .carta-cuerpo{
  box-shadow:0 0 0 1px hsl(var(--giro,340) 100% 50%), 0 0 18px var(--ed-red-40);
}
.carta-monton.admite .carta-cuerpo::before{transform:translate(5px,-5px)}
.carta-monton.admite .carta-cuerpo::after {transform:translate(10px,-10px)}

/* --------------------------------------------------- la seleccion multiple */
/* Una sumada esta LEVANTADA, no en la mano: el mismo despegue de la agarrada y
   su borde encendido, pero sin z-index — la que manda sigue siendo una sola. */
.carta.sumada .carta-cuerpo{transform:scale(1.06)}
.carta.sumada .cara{border-color:hsl(var(--giro,340) 100% 50%)}
.carta.sumada .carta-cuerpo{box-shadow:0 0 0 1px hsl(var(--giro,340) 100% 45%)}
/* con la mesa atenuada, las sumadas se quedan encendidas: son las que vienen */
body.ordenando .carta.sumada{opacity:1}
/* las pasajeras van pegadas a la lider y no deben atrapar el puntero: si lo
   hicieran, el blanco de debajo seria una de ellas */
body.ordenando .carta.sumada{pointer-events:none}

/* ------------------------------------ el menu del pulsado largo, apagado */
/* Estaba apagado solo en la carta. Desde que el pulsado largo SELECCIONA, el
   dedo pasa medio segundo quieto todo el rato, y caer en el hueco entre dos
   cartas —o en el borde de un monton abierto— bastaba para que el menu saliera
   y se llevara el gesto. La galeria entera queda sin callout y sin seleccion de
   texto; el unico sitio donde el menu sigue vivo es el rotulo que se escribe. */
#galerias, #galerias *{
  -webkit-touch-callout:none;
  user-select:none; -webkit-user-select:none;
}
.carta-monton .titulo-grupo{
  -webkit-touch-callout:default;
  user-select:text; -webkit-user-select:text;
}

/* -------------------------------------------- la respiracion de lo elegido */
/* Una carta seleccionada esta ESPERANDO: espera a que se sumen las demas, o a
   que la lleven a algun sitio. Un latido muy lento y muy corto la mantiene
   viva sin llamar la atencion — si se notara, seria un aviso, y aqui no se
   avisa de nada. 3,2 s es mas lento que una respiracion tranquila a proposito:
   el ojo lo registra sin mirarlo. */
@media (prefers-reduced-motion: no-preference){
  @keyframes respira{
    0%,100%{ transform:scale(1.06) }
    50%    { transform:scale(1.075) }
  }
  .carta.sumada .carta-cuerpo{ animation:respira 3.2s ease-in-out infinite }
}

/* el pie legal: una línea, abajo del todo, sin pedir atención — solo existe
   cuando la página legal está completa */
.pie-legal{display:block; text-align:center; margin:3rem 0 1.5rem; font:400 .95rem/1 var(--font-term);
  color:var(--fg-muted); opacity:.5; text-decoration:none; letter-spacing:.08em}
.pie-legal:hover{opacity:1; color:var(--fg-strong)}
/* el portal de retirada en el reverso: discreto hasta que se arma */
.carta-pie .reportar{opacity:.5}
.carta-pie .reportar.armado{opacity:1; color:var(--ed-red)}

/* EL PÍXEL QUE ASOMABA BAJO LA COSTRA (ed, 15-sep). La costra y la imagen miden
   exactamente lo mismo, pero sus bordes caen en coordenadas fraccionarias (y=88,25;
   alto 246,2) y el compositor las pinta como capas distintas: en un píxel de borde
   cubierto al 75 %, la imagen entra al 75 % y la costra encima al 75 % — y asoma un
   ~19 % de la imagen. No se ve en headless (pinta por software) y sí en la GPU de ed.
   La cura no depende del compositor: mientras hay costra, la imagen se recorta 1 px
   por dentro, así su borde queda entero debajo de la costra. Al revelarse, vuelve. */
.carta:not(.revelada) .frente:has(.rasca) img{clip-path:inset(1px)}

/* ------------------------------------------------------------- el tutorial
   Una galería más, al final: la «?» se ve como el + y las lecciones como
   reversos de carta — el mismo papel, con una sola idea cada una. */
.tutorial{margin-top:1.4rem}
.tutorial .filete, .tutorial .titulo{display:none}
.carta-tutorial.abierta .cara.mas{border-color:var(--border)}
.carta-leccion .cara.leccion{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.45rem; padding:.7rem .6rem; text-align:center;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, var(--ed-red-05) 3px 4px),
    var(--bg);
}
.carta-leccion .glifo{font:400 2rem/1 var(--font-term); color:var(--fg-strong)}
.carta-leccion b{font:400 1.05rem/1.1 var(--font-term); letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg)}
.carta-leccion p{margin:0; font:400 .78rem/1.35 var(--font-body); color:var(--fg-muted)}
/* se reparten como las cartas de un sobre: una tras otra */
.tutorial.desplegada .carta-leccion{animation:leccion .38s cubic-bezier(.2,.8,.25,1) both;
  animation-delay:calc(var(--i) * 45ms)}
@keyframes leccion{from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .tutorial.desplegada .carta-leccion{animation:none} }