/* Propuesta visual. Solo se carga en esta copia de prueba. */
body:not(.entry-mode) {
  background: radial-gradient(ellipse at 70% 0%, #e9dbaf 0%, transparent 55%), linear-gradient(140deg, #ebeae4, #dddcd6);
  background-attachment: fixed;
}
body:not(.entry-mode) #main { position: relative; isolation: isolate; }
body:not(.entry-mode) #main::before {
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: -1;
  inset: 9px max(7px, calc((100% - 1400px)/2)) 7px;
  border-radius: 19px;
  border: 1px solid rgba(255,255,255,.85);
  background: linear-gradient(130deg, rgba(255,255,255,.62), rgba(255,255,255,.30));
  box-shadow: 0 10px 36px rgba(41,35,16,.09), inset 0 1px 0 #fff8;
  backdrop-filter: blur(14px);
  transform-origin: var(--menu-origin-x, 50%) var(--menu-origin-y, 100%);
}
body:not(.entry-mode) #main.menu-opening::before { animation: menu-glass-in 500ms cubic-bezier(.22,.73,.3,1) both; }
body:not(.entry-mode) #main > .catalog-app { background: transparent; }
.menu-word { display: inline-block; max-width: 100%; }
.menu-letter { display: inline-block; animation: menu-letter-in 180ms ease-out var(--delay) both; }
.menu-block { animation: menu-block-in 370ms cubic-bezier(.2,.75,.25,1) var(--block-delay) backwards; }
.menu-block :is(img, video) { animation: menu-media-in 420ms ease-out calc(var(--block-delay) + 35ms) backwards; }
@keyframes menu-block-in {
  0% { opacity: 0; transform: translateY(15px) scale(.973); }
  72% { opacity: 1; transform: translateY(-1px) scale(1.004); }
  100% { opacity: 1; transform: none; }
}
@keyframes menu-media-in {
  from { opacity: .35; filter: blur(2px); }
  to { opacity: 1; filter: none; }
}
@keyframes menu-glass-in {
  0% { opacity: .58; transform: scale(.035,.02); border-radius: 48%; }
  55% { opacity: 1; transform: translateX(2px) scale(1.015,1.025); border-radius: 23px; }
  70% { transform: translateX(-2px) scale(.994,.992); }
  84% { transform: translateX(1px) scale(1.003,1.004); }
  100% { opacity: 1; transform: scale(1); border-radius: 19px; }
}
@keyframes menu-letter-in {
  from { opacity: 0; transform: translateY(.26em); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: none; }
}
@media(prefers-reduced-motion: reduce) {
  body:not(.entry-mode) #main.menu-opening::before, .menu-letter, .menu-block, .menu-block :is(img, video) { animation: none; }
}

.menu-readable { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }