/* ═══ La entrada: acceso flotante a la sala (trabajo.html) ═══
   Un ticket de cine abajo a la izquierda, con una miniatura que va
   cambiando de rollo. Aparece al pasar el hero, se esconde en el pie
   y se puede cerrar (no vuelve en esa visita). La derecha es de WhatsApp.
   ═══════════════════════════════════════════════════════════════ */
.entrada{
  position:fixed;left:var(--gutter);bottom:22px;z-index:58;
  display:flex;align-items:center;gap:14px;
  padding:8px 12px 8px 8px;color:var(--cream);text-decoration:none;
  background:rgba(14,12,9,.92);border:1px solid var(--line-hard);border-radius:8px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8), 0 0 60px -30px rgba(240,180,41,.35);
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}
.entrada.en{opacity:1;transform:none;pointer-events:auto}
.entrada.fuera{opacity:0;transform:translateY(24px);pointer-events:none}
/* perforaciones de película en el borde superior e inferior */
.entrada::before,.entrada::after{
  content:"";position:absolute;left:10px;right:10px;height:4px;
  background:repeating-linear-gradient(90deg, transparent 0 6px, rgba(242,234,220,.16) 6px 12px, transparent 12px 16px);
}
.entrada::before{top:2px}.entrada::after{bottom:2px}
@media (hover:hover) and (pointer:fine){
  .entrada:hover{border-color:rgba(240,180,41,.55)}
  .entrada:hover .ent-mini img{opacity:1}
  .entrada:hover .ent-ir{transform:translateX(3px)}
}
.entrada:active{transform:scale(.98)}

.ent-mini{position:relative;width:72px;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#000;flex:none;box-shadow:0 0 0 1px rgba(242,234,220,.1)}
.ent-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity 600ms var(--ease-out)}
.ent-mini img.en{opacity:.92}
.ent-mini::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.18) 2px 3px);pointer-events:none}
.ent-txt{display:grid;gap:3px;line-height:1.15;min-width:0}
.ent-txt .slate{font-size:.6rem;letter-spacing:.22em;display:flex;align-items:center;gap:8px}
.ent-txt .slate i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:ent-pulso 1.6s steps(2) infinite}
@keyframes ent-pulso{50%{opacity:.3}}
.ent-txt b{font-family:var(--struct);font-variation-settings:'wdth' 100,'wght' 600;font-size:.92rem;white-space:nowrap}
.ent-ir{color:var(--gold);font-family:var(--say);font-size:1.2rem;line-height:1;transition:transform var(--t-ui) var(--ease-out);margin-left:2px}
.ent-x{
  position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--ink-3);border:1px solid var(--line-hard);color:var(--cream-dim);
  transition:color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.ent-x:hover{color:var(--cream)}
.ent-x:active{transform:scale(.9)}
.ent-x svg{width:9px;height:9px}

@media (max-width:600px){
  .entrada{left:12px;right:12px;bottom:12px;padding:8px 10px 8px 8px;gap:12px;border-radius:10px}
  .ent-mini{width:64px}
  .ent-txt b{white-space:normal;font-size:.88rem}
  .ent-x{top:-8px;right:-6px}
}
@media (prefers-reduced-motion:reduce){
  .entrada,.ent-mini img,.ent-ir{transition:none}
  .ent-txt .slate i{animation:none}
}