/* ============================================================
   LA MESA DE INVITADOS — ajustes sobre la hoja de la biblioteca.
   La portada no lleva cartas: el recorte en transparente flota en
   grande sobre el nombre fantasma (Anton, como el ghost del
   archivo pero mayor), y debajo va el slider del archivo como
   filtro de la A a la Z. La carta .gk solo vive en la ficha.
   Se carga DESPUÉS de books.css a propósito.
   ============================================================ */

/* ── la mesa ──
   Todo el conjunto (cabecera + escenario + quién es + slider) cabe
   en un alto de 900px: el slider es LA navegación y debe verse. */
.pag-inv .lib{padding-top:1.8rem;padding-bottom:2.6rem}
.mesa{position:relative;margin-top:.9rem}

/* el nombre fantasma detrás de los recortes */
.mesa-ghost{
  position:absolute;left:0;right:0;top:clamp(.4rem,2.5vw,1.8rem);
  text-align:center;z-index:0;pointer-events:none;user-select:none;
}
.mesa-ghost span{
  display:inline-block;font-family:"Anton",var(--font-d);font-weight:400;
  line-height:.85;letter-spacing:.02em;text-transform:uppercase;
  color:rgba(255,255,255,.06);white-space:nowrap;
}

/* rescoldo cálido bajo los pies del invitado */
.mesa-glow{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:min(640px,74vw);height:clamp(110px,16vw,200px);border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,95,0,.2), transparent);
  filter:blur(26px);z-index:0;pointer-events:none;
}

/* el escenario hereda .bshelf de books.css (máscara en los bordes).
   La medida fija de los recortes es la ALTURA (94% del escenario):
   así ninguna cabeza se corta por arriba aunque la foto sea estrecha,
   y todos los invitados miden lo mismo de pie. */
.pag-inv{--mesa-h:clamp(340px,30vw,430px)}
.pag-inv .bshelf{height:var(--mesa-h);margin-top:0;z-index:1}
.pag-inv .bs-info{min-height:0;margin-top:.5rem}

/* el recorte, de pie sobre el suelo común (anclado abajo).
   El borde inferior del recorte es un corte recto de tijera: sin carta
   que lo tape, se funde con un degradado para que la figura se apague
   en vez de terminar en una línea. */
.gsb{position:absolute;left:50%;bottom:2%;cursor:pointer;will-change:transform,filter}
.gsb img{
  display:block;height:calc(var(--mesa-h)*.94);width:auto;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.6));
  mask-image:linear-gradient(to bottom,#000 82%,transparent 99%);
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 99%);
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
/* sombra de contacto: asienta al invitado en el suelo */
.gsb::before{
  content:"";position:absolute;left:10%;right:10%;bottom:1%;height:7%;
  background:radial-gradient(50% 50%, rgba(0,0,0,.5), transparent 70%);
  filter:blur(8px);
}

/* ── slider A-Z: las piezas del archivo, con letras donde los años ── */
.pag-inv .g-controls{margin-top:.8rem;width:min(880px,90vw)}
.pag-inv .gs-year{font-size:.78rem}
.pag-inv .gs-year.is-current{font-weight:700}

/* ── la carta (solo en la ficha) ── */
.gk{
  position:relative;width:100%;aspect-ratio:3/4;
  border-radius:18px;overflow:hidden;cursor:pointer;
  container-type:inline-size;
  background:
    radial-gradient(95% 55% at 50% 110%, rgba(255,95,0,.24), rgba(255,95,0,0) 62%),
    linear-gradient(165deg,#1c212c 0%,#12151c 52%,#0c0e13 100%);
  border:1px solid rgba(255,255,255,.09);
  transition:transform .42s cubic-bezier(.3,.9,.3,1),border-color .3s,box-shadow .35s;
}
.gk:hover,.gk:focus-visible{
  transform:translateY(-10px);
  border-color:rgba(255,95,0,.55);
  box-shadow:0 34px 60px -22px rgba(0,0,0,.65), 0 18px 60px -18px rgba(255,95,0,.28);
}
/* el isologo en marca de agua: el fueguito solo, sin texto (el nombre ya
   vive en el pie y en el fantasma; la casilla no se sobrecarga) */
.gk-flama{
  position:absolute;left:50%;top:5%;transform:translateX(-50%);
  width:58cqw;height:auto;color:rgba(255,255,255,.06);
  pointer-events:none;user-select:none;
}
.gk-foto{
  position:absolute;left:2%;right:2%;top:12%;bottom:0;
  display:flex;align-items:flex-end;justify-content:center;
}
.gk-foto img{
  max-width:94%;max-height:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 20px 32px rgba(0,0,0,.55));
  transition:transform .5s cubic-bezier(.3,.9,.3,1);
}
.gk:hover .gk-foto img{transform:scale(1.035)}
.gk-velo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(6,8,11,.9) 4%, rgba(6,8,11,.3) 22%, transparent 42%);
}
.gk-eps{
  position:absolute;top:4.5%;left:6%;
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-m);font-size:4.4cqw;letter-spacing:.12em;
  color:rgba(255,255,255,.52);
}
.gk-eps::before{
  content:"";width:.5em;height:.5em;border-radius:50%;
  background:var(--accent);opacity:.7;
}
.gk-pie{
  position:absolute;left:5%;right:5%;bottom:5.5%;
  text-align:center;
}
.gk-pie b{
  display:block;font-weight:700;font-size:8cqw;line-height:1.12;
  letter-spacing:-.01em;color:#fff;text-wrap:balance;
}
.gk-pie span{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:1.6cqw;font-size:4.6cqw;font-weight:500;color:var(--muted);
}

/* ── momentos destacados: frases con su minuto, directas al player ── */
.mo-lista{display:grid;gap:.55rem}
.mo{
  display:block;position:relative;padding:1rem 1.25rem 1.05rem 2.7rem;
  border-radius:14px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  transition:border-color .2s,background .2s;
}
.mo::before{
  content:"«";position:absolute;left:1rem;top:.35rem;
  font-size:2rem;font-weight:700;color:rgba(255,95,0,.4);
}
.mo:hover{border-color:rgba(255,122,46,.45);background:rgba(255,255,255,.06)}
.mo-q{display:block;font-size:.98rem;font-weight:500;line-height:1.55;color:var(--ink)}
.mo-m{
  display:block;margin-top:.45rem;font-weight:600;font-size:.72rem;
  letter-spacing:.08em;color:rgba(255,255,255,.4);transition:color .2s;
}
.mo:hover .mo-m{color:var(--accent-text)}

/* ── ficha (encima de las clases bv de la biblioteca) ── */
.pag-inv .bv-cover{aspect-ratio:auto;filter:none}
.pag-inv .bv-cover .gk{cursor:default}
.pag-inv .bv-cover .gk:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.09)}
.pag-inv .bv-rel .gk{width:100%}

/* ── móvil ── */
@media (max-width:900px){
  .pag-inv{--mesa-h:clamp(300px,84vw,390px)}
  .mesa-glow{bottom:4%}
  .pag-inv .g-controls{flex-wrap:wrap;gap:.8rem;justify-content:center}
  /* aire a los lados para que el pulgar no se recorte en los extremos */
  .pag-inv .g-slider{flex:1 1 100%;order:3;padding:0 1.6rem}
  /* el nombre fantasma no cabe con dignidad en una pantalla estrecha: fuera */
  .mesa-ghost{display:none}
  /* aire entre el header y la cabecera, y entre el texto y el invitado */
  .pag-inv .lib{padding-top:2.4rem}
  .mesa{margin-top:1.6rem}
  /* en un carril tan corto las letras chocan entre sí: solo se muestra la actual */
  .pag-inv .gs-year{display:none;font-size:.72rem}
  .pag-inv .gs-year.is-current{display:block}
}
@media (prefers-reduced-motion:reduce){
  .gk,.gk-foto img{transition:none}
}