/* ==========================================================================
   SENDA — estilos del botiquin que se abre por baldas.
   Adaptado del despiece de BRASA. La seccion mide 480vh y dentro lleva un
   bloque pegado que ocupa la pantalla entera.
   ========================================================================== */

.baldas{
  position:relative;
  height:480vh;                 /* el recorrido de scroll de la animacion */
  background:var(--verde);
}
.baldas .pegado{
  position:sticky;top:0;
  height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.escena{
  position:relative;
  width:min(94vw, 46vh);
  height:82vh;
  max-width:520px;
}
.escena canvas{
  width:100%;height:100%;
  display:block;
  border-radius:var(--radio);
}

/* ------------------------------------------------------------- etiquetas */
.etiquetas{position:absolute;inset:0;pointer-events:none}
.eti{
  position:absolute;
  display:flex;align-items:center;gap:.6rem;
  opacity:0;transition:opacity .32s ease, transform .32s ease;
  pointer-events:none;
  text-decoration:none;
}
.eti.dentro{opacity:1;transform:none;pointer-events:auto}
.eti.izq{right:calc(100% + .9rem);flex-direction:row-reverse;transform:translateX(10px)}
.eti.der{left:calc(100% + .9rem);transform:translateX(-10px)}
.eti .chip{
  background:var(--papel);color:var(--verde);           /* 10,70 */
  font-family:'Supreme',sans-serif;
  font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;
  padding:.55rem .9rem;border-radius:var(--radio);
  white-space:nowrap;
  border:1px solid var(--laton);
}
.eti:hover .chip{background:var(--laton-claro);color:var(--verde);text-decoration:none} /* 6,45 */

/* Una linea fina desde la etiqueta hasta el borde de la escena. */
.eti::before{
  content:'';width:.9rem;height:1px;background:var(--laton-claro);flex:none;
}

.cargando{
  position:absolute;inset:auto 0 1rem;text-align:center;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--laton-claro);                              /* 6,45 sobre verde */
}

/* -------------------------------------------------------------- en movil */
@media (max-width:820px){
  /* Las etiquetas no caben a los lados: pasan a ir dentro, sobre la foto,
     con pastilla propia para que el contraste no dependa del fotograma. */
  .escena{width:min(88vw,340px);height:74vh}
  .eti.izq{right:auto;left:.6rem;flex-direction:row;transform:translateX(-8px)}
  .eti.der{left:auto;right:.6rem;flex-direction:row-reverse;transform:translateX(8px)}
  .eti::before{display:none}
  .eti .chip{font-size:.66rem;padding:.45rem .7rem;white-space:normal;max-width:9.5rem}
  .baldas{height:420vh}
}