:root {
  --crema: #f6f1e6;
  --crema-escritorio: #f3ecff;
  --violeta: #b388ff;
  --violeta-hondo: #7e57c2;
  --tinta: #3d3350;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--crema);
}
body {
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--tinta);
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Escena: el arte aprobado, sin tocar ---------- */
.escena {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--crema);
}
.escena picture.arte-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
.escena img.arte {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}
/* Móvil: imagen a pantalla completa (cover), sin franjas laterales;
   la barra de controles se eliminó a petición de Iam (24 oct):
   los pétalos siguen cayendo con viento fijo y la ráfaga sale al tocar. */
/* Móvil: cover puro con el arte alto. Sin JS para encajar, sin fondo
   difuminado: el arte alto (1290x3198) llena cualquier pantalla vertical
   sin recortar el texto, porque el texto está centrado con márgenes de
   ondas arriba y abajo.
   Excepción solo CSS, sin JS: en pantallas anchas y bajas
   (alto/ancho menor de 1.67, como un SE con barras), el cover recortaría
   la línea superior e inferior, así que ahí se usa contain para que el
   texto quede completo, aunque queden franjas a los lados. Nunca se
   recorta el wordmark. */
/* Sin excepción contain: en el iPhone real de Iam, con la barra de
   Safari arriba, la relación ancho/alto cruza el umbral y el contain
   encoge la imagen con franjas crema a los lados, que es justo lo que
   Iam rechazó el 24 oct a las 2:47 pm. Cover siempre en móvil. */

/* ---------- Capa de pétalos 3D ---------- */
#lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: pointer;
  z-index: 2;
}


.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}