/* La escena de fondo (cielo + suelo + compañero) y la hoja de contenido que se
   le superpone abajo. Ver arte/LEEME.md ("Fondo") y arte/vista-fondo.html. */

.escena {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
}
.escena-alta {
  height: clamp(280px, 47.5vh, 360px);
}
.escena-baja {
  height: 200px;
}

.escena-cielo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.escena-cielo.is-current {
  opacity: 1;
  z-index: 0;
}
.escena-cielo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.escena-chip {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  background: var(--chip);
  color: var(--chip-texto);
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.escena-companero {
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: 150px;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
}
.escena-baja .escena-companero {
  width: 92px;
  /* Igual que en .escena-entrada-companeros: tiene que quedar por encima de la
     franja de 26px donde se superpone la hoja. */
  bottom: 30px;
}
.escena-companero .companion-view {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.escena-globo {
  position: absolute;
  left: 50%;
  bottom: 196px;
  transform: translateX(-50%);
  max-width: 250px;
  z-index: 2;
  background: var(--globo);
  color: var(--texto);
  border-radius: 18px;
  padding: var(--space-3) var(--space-4);
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: var(--shadow);
}
.escena-globo p {
  margin: 0;
}
.escena-globo::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: 0;
  border-top-color: var(--globo);
}
.escena-baja .escena-globo {
  bottom: 120px;
  max-width: 220px;
  font-size: 0.9rem;
}

/* Fila de los 4 compañeros parados en la escena de la bienvenida. Sin wrap: se
   fuerza un ancho que entra en una sola fila incluso en un teléfono angosto
   (probado desde 320px), para que nunca una fila de más quede tapada por la
   hoja de abajo. */
.escena-entrada-companeros {
  position: absolute;
  left: 0;
  right: 0;
  /* La hoja se superpone 26px sobre la escena (ver .hoja): tiene que quedar
     por encima de esa franja, si no la tapa. */
  bottom: 34px;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
}
.escena-entrada-companeros .companion-view {
  flex-shrink: 0;
  width: 70px;
  min-width: 70px;
  max-width: 70px;
  margin-bottom: 0;
}

/* La hoja de contenido: se superpone ~26px sobre la escena, con las esquinas de
   arriba redondeadas y una rayita de agarre (decorativa, sin interacción). */
.hoja {
  position: relative;
  z-index: 1;
  background: var(--hoja);
  border-radius: 26px 26px 0 0;
  margin: -26px calc(-1 * var(--space-4)) 0;
  padding: var(--space-5) var(--space-4) 0;
}
.hoja-agarre {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  margin: 0 auto var(--space-4);
  background: var(--texto-suave);
  opacity: 0.35;
}