/* El cielo: portada con objetos 3D flotando, encima de todo lo demás. */
.cielo {
  --cielo-tinta: #ffffff;
  position: fixed; inset: 0; z-index: 5000;
  overflow: hidden;
  background: linear-gradient(180deg, #7392ac 0%, #8eaac0 38%, #b3c5d3 72%, #cdd8df 100%);
  transition: opacity .9s ease;
  user-select: none; -webkit-user-select: none;
}
.cielo.saliendo { opacity: 0; pointer-events: none; transition: opacity .95s cubic-bezier(.4, 0, .2, 1) .2s; }
.cielo.entrando { opacity: 0; transition: none; }
.cielo canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  touch-action: manipulation;
  opacity: 0; transition: opacity .6s ease;
}
.cielo.listo canvas { opacity: 1; }

/* nubes que cruzan despacio */
.nubes { position: absolute; inset: 0; pointer-events: none; contain: strict; }
.nube {
  position: absolute; left: 0;
  animation: deriva linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes deriva {
  from { transform: translate3d(-110%, 0, 0); }
  to   { transform: translate3d(110vw, 0, 0); }
}

/* textos */
.cielo-marca {
  position: absolute; z-index: 2; margin: 0;
  top: 22px; left: max(24px, env(safe-area-inset-left, 0px));
  pointer-events: none;
  color: var(--cielo-tinta);
  text-shadow: 0 1px 18px rgba(40, 70, 100, .25);
}
.cielo-marca h1 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 650; font-stretch: 116%;
  letter-spacing: -0.02em; line-height: 1;
}
.cielo-marca .vol { color: #fff3a8; }
.cielo-pista {
  position: absolute; z-index: 2; margin: 0;
  left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  text-align: center; pointer-events: none;
  font: 400 15px/1.4 var(--f-ui);
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 12px rgba(40, 70, 100, .35);
}

/* cartelito al pasar el mouse */
/* como los créditos de sus videos: etiqueta finita, barra rosa y el nombre en negrita angosta */
.cielo-cartel {
  position: fixed; left: 0; top: 0; z-index: 3;
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 2px;
  min-width: 150px;
  color: #fff;
  /* sin fondo: una sombra suave para que se lea sobre el cielo y los objetos */
  text-shadow: 0 1px 2px rgba(25, 45, 70, .55), 0 2px 14px rgba(25, 45, 70, .45);
  pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
}
.cielo-cartel .etq { font: 300 14px/1 var(--f-ui); letter-spacing: .01em; }
.cielo-cartel .barra { height: 9px; background: #f7a6d6; box-shadow: 0 1px 8px rgba(25, 45, 70, .3); }
.cielo-cartel strong {
  grid-column: 1 / -1;
  font: 750 26px/1.02 var(--f-ui); font-stretch: 78%;
  letter-spacing: -0.015em; white-space: nowrap;
}
.cielo-cartel strong::first-letter { text-transform: uppercase; }
.cielo-cartel.on { opacity: 1; }

/* botones para teclado: aparecen solo al navegar con Tab */
.cielo-teclas {
  position: absolute; z-index: 4;
  left: 50%; bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 32px);
  clip-path: inset(50%); opacity: 0;
}
.cielo-teclas:focus-within { clip-path: none; opacity: 1; }
.cielo-teclas button {
  border: 0; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .88); color: #23313d;
  font: 500 14px/1 var(--f-ui);
}
.cielo-teclas button:focus-visible { outline: 2px solid #fff3a8; outline-offset: 3px; }

/* tarjeta que abre cada objeto */
.cielo-modal {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 30px 28px 26px;
  border: 0; border-radius: 20px;
  background: rgba(252, 250, 246, .94);
  color: #1f2429;
  box-shadow: 0 30px 80px rgba(30, 60, 90, .3);
  font: 16px/1.55 var(--f-ui);
  user-select: text; -webkit-user-select: text;
}
.cielo-modal[open] { animation: aparece .35s cubic-bezier(.2, .9, .3, 1.2); }
.cielo-modal::backdrop {
  background: rgba(90, 120, 150, .5);
}
@keyframes aparece { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.cielo-modal h2 {
  margin: 0 36px 12px 0;
  font: 400 28px/1.15 var(--f-hand);
  color: #d6336c;
}
.cielo-modal p { margin: 0 0 12px; }
.cielo-modal p:last-child { margin-bottom: 0; }
.cielo-modal .sub { color: #5d6670; font-size: 15px; }
.cielo-x {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .06); color: #1f2429;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.cielo-x:hover { background: rgba(0, 0, 0, .11); }
.cielo-x:focus-visible { outline: 2px solid #d6336c; outline-offset: 2px; }
.cielo-video {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: #000;
  margin: 4px 0 12px;
}
.cielo-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cielo-link { color: #1f2429; font-size: 14px; text-underline-offset: 4px; }

/* la lectora también flota en el cielo */
.stage {
  background: linear-gradient(180deg, #7392ac 0%, #8eaac0 38%, #b3c5d3 72%, #cdd8df 100%);
}
.stage > .nubes { z-index: 0; }
/* mientras se ve el cielo, las nubes de abajo no se mueven */
.en-cielo .stage .nube { animation-play-state: paused; }
.stage .brand, .stage .sound, .stage .foot { text-shadow: 0 1px 14px rgba(40, 70, 100, .35); }
.stage .brand h1, .stage .brand .brand-nombre, .stage .sound, .stage .foot p, .stage .linkish { color: #fff; }
.stage .linkish { text-decoration-color: rgba(255, 255, 255, .55); }
.stage .linkish:hover { text-decoration-color: #fff; }
.stage .disc-shadow {
  box-shadow: calc(var(--lift) * 10px) calc(6px + var(--lift) * 22px) calc(14px + var(--lift) * 30px) rgba(35, 60, 85, .38);
}
.stage .tray { filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(35, 60, 85, .45)); }
.stage .drawer:not(.open) { box-shadow: none; }
.stage .player { box-shadow: 0 24px 60px rgba(35, 60, 85, .4), inset 0 1px 0 rgba(255,255,255,.05); }

/* la cajita del álbum, junto a los discos */
.album-caja {
  position: absolute; z-index: 1150;
  left: max(40px, env(safe-area-inset-left, 0px)); top: 50%;
  width: clamp(150px, 15vw, 220px);
  display: grid; gap: 10px; padding: 0;
  border: 0; background: none; cursor: pointer; text-align: left; color: #fff;
  transform: translateY(-50%) rotate(-4deg);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.3);
}
.album-caja:hover { transform: translateY(-52%) rotate(-1.5deg) scale(1.04); }
.album-caja-tapa {
  position: relative; display: block; aspect-ratio: 1;
  border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .5) inset, 0 18px 40px rgba(35, 60, 85, .45), 0 2px 6px rgba(35, 60, 85, .3);
}
.album-caja-tapa img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* brillo del plástico del estuche y la bisagra */
.album-caja-tapa::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7%;
  background: linear-gradient(90deg, rgba(255,255,255,.45), rgba(255,255,255,.12) 60%, rgba(0,0,0,.25));
}
.album-caja-tapa::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.14) 100%);
}
.album-caja-txt { display: grid; gap: 1px; text-shadow: 0 1px 12px rgba(40, 70, 100, .4); }
.album-caja-txt strong { font-weight: 750; font-stretch: 112%; font-size: 16px; letter-spacing: -0.01em; }
.album-caja-txt span { font: 400 16px/1.2 var(--f-hand); color: #fff3a8; }
.album-caja:focus-visible { outline: 2px solid #fff3a8; outline-offset: 6px; border-radius: 6px; }
@media (max-width: 759px) {
  .album-caja {
    left: 50%; top: calc(var(--u) * 156 + 62px);
    width: max-content;
    grid-template-columns: 50px auto; align-items: center; gap: 10px;
    padding: 6px 16px 6px 6px; border-radius: 12px;
    background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 8px 22px rgba(35, 60, 85, .2);
    transform: translateX(-50%) rotate(-2deg);
  }
  .album-caja:hover { transform: translateX(-50%) rotate(-1deg) scale(1.03); }
  .album-caja-tapa { width: 50px; }
  .album-caja.activo .album-caja-tapa { outline-width: 2px; outline-offset: 2px; }
  .album-caja-txt strong { font-size: 13px; white-space: nowrap; }
  .album-caja-txt span { font-size: 14px; white-space: nowrap; }
}

.album-caja.activo .album-caja-tapa { outline: 3px solid #fff3a8; outline-offset: 3px; }

/* reproductor: blanco, moderno y con brillitos pegados */
.stage .player {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  padding: 14px;
  color: #23313d;
  box-shadow: 0 24px 60px rgba(35, 60, 85, .28), 0 2px 8px rgba(35, 60, 85, .1);
}
/* stickers: estrellitas y un corazón en las esquinas */
.stage .player::before, .stage .player::after {
  content: ""; position: absolute; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 2px 3px rgba(35, 60, 85, .25));
}
.stage .player::before {
  top: -14px; right: 18px; width: 30px; height: 30px; transform: rotate(14deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 L12.2 7.8 L20 10 L12.2 12.2 L10 20 L7.8 12.2 L0 10 L7.8 7.8Z' fill='%23f7a6d6'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.stage .player::after {
  bottom: -12px; left: -10px; width: 34px; height: 34px; transform: rotate(-16deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28.6S2.6 20.5 2.6 11.4C2.6 7 5.9 4 9.8 4c2.7 0 5 1.5 6.2 3.8C17.2 5.5 19.5 4 22.2 4c3.9 0 7.2 3 7.2 7.4 0 9.1-13.4 17.2-13.4 17.2z' fill='%23f7a6d6' stroke='%23e47fbd' stroke-width='1.6'/%3E%3Cellipse cx='9.6' cy='10' rx='3' ry='1.9' fill='%23fff' opacity='.8' transform='rotate(-35 9.6 10)'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.stage .lcd { position: relative; }
.stage .lcd::before {
  content: ""; position: absolute; top: 6px; right: 84px; width: 12px; height: 12px; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 L12.2 7.8 L20 10 L12.2 12.2 L10 20 L7.8 12.2 L0 10 L7.8 7.8Z' fill='%239fd0f2'/%3E%3C/svg%3E") center / 100% no-repeat; pointer-events: none;
}
.stage .player .controls::after {
  content: ""; width: 16px; height: 16px; align-self: center; margin-left: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 L12.2 7.8 L20 10 L12.2 12.2 L10 20 L7.8 12.2 L0 10 L7.8 7.8Z' fill='%23c9d3dc'/%3E%3C/svg%3E") center / 100% no-repeat;
  filter: drop-shadow(0 1px 2px rgba(35, 60, 85, .25));
}
/* pantallita de texto: vidrio celeste clarito en vez del verde viejo */
.stage .lcd {
  background: linear-gradient(135deg, #f1f6fb, #e4eef7);
  color: #3f6e9a;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(63, 110, 154, .12);
}
.stage .lcd::after { display: none; }
.stage .lcd .lcd-label { color: #e47fbd; opacity: 1; }
.stage .screen { background: #f3f6f9; border-radius: 14px; box-shadow: none; }
.stage .screen-art canvas { filter: drop-shadow(0 8px 16px rgba(35, 60, 85, .25)); }
.stage .screen-msg { background: linear-gradient(rgba(243,246,249,0) 30%, rgba(243,246,249,.95) 75%); }
.stage .screen.has-msg .screen-msg { background: none; }
.stage .screen-msg p { color: #4a5a6e; }
.stage .now-title { color: #23313d; }
.stage .now-artist { color: #7d8a98; }
/* botones en cápsula */
.stage .player .btn {
  min-height: 36px; padding: 0 16px; border-radius: 999px;
  background: #f3f6f9; border: 1px solid transparent; color: #23313d;
  font-weight: 650; box-shadow: none;
  transition: background .15s, color .15s, transform .15s;
}
.stage .player .btn:hover { background: #ffe0f1; color: #b0478a; border-color: transparent; }
.stage .player .btn:active { transform: scale(.97); }
.stage .player .btn.solid { background: #e47fbd; color: #fff; }
.stage .player .btn.ghost { background: none; border: 1px solid #e3e9ef; }
.stage .player .btn.ghost:hover { background: #ffe0f1; border-color: #ffe0f1; }
.stage .player .btn:focus-visible { outline: 2px solid #e47fbd; outline-offset: 2px; }
.stage .screen-msg .btn.solid { background: #e47fbd; color: #fff; border-color: #e47fbd; border-radius: 999px; }

/* el botón para volver, en la lectora */
.foot-links { display: flex; gap: 20px; align-items: flex-end; }

@media (max-width: 759px) {
  .cielo-marca { top: 16px; left: max(16px, env(safe-area-inset-left, 0px)); }
  .cielo-pista { font-size: 14px; padding: 0 16px; }
  .foot-links { flex-direction: column; align-items: flex-end; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .nube { animation-duration: 600s !important; }
  .cielo-modal[open] { animation: none; }
}

/* redes de Ángela: botoncitos de vidrio, arriba en el cielo y abajo en los discos */
.redes {
  position: fixed; z-index: 5500;
  top: 18px; right: max(20px, env(safe-area-inset-right, 0px));
  display: flex; gap: 10px;
}
body:not(.en-cielo) .redes {
  top: auto; right: auto;
  left: max(24px, env(safe-area-inset-left, 0px));
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  z-index: 1400;
}
.redes a {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; text-decoration: none;
  /* círculo transparente con borde fino */
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 255, 255, .85);
  box-shadow: 0 2px 10px rgba(40, 70, 100, .2), inset 0 0 6px rgba(40, 70, 100, .08);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), background .2s, color .2s, box-shadow .2s;
}
.redes svg { width: 21px; height: 21px; filter: drop-shadow(0 1px 2px rgba(40, 70, 100, .35)); }
/* brillito arriba a la izquierda, como una burbuja */
.redes a::before {
  content: ""; position: absolute; top: 6px; left: 9px;
  width: 11px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .75); transform: rotate(-30deg);
  pointer-events: none;
  display: none;
}
.redes a:hover, .redes a:focus-visible {
  transform: translateY(-3px) scale(1.06);
  color: #e47fbd;
  background: #fff; border-color: #fff;
  box-shadow: 0 8px 22px rgba(228, 127, 189, .3);
}
body:not(.en-cielo) .redes a:hover, body:not(.en-cielo) .redes a:focus-visible { transform: translateY(-3px) scale(1.06); }
.redes a:focus-visible { outline: 2px solid #ffe0f1; outline-offset: 3px; }
@media (max-width: 759px) {
  .redes { top: 14px; right: max(14px, env(safe-area-inset-right, 0px)); gap: 7px; }
  .redes a { width: 36px; height: 36px; }
  .redes svg { width: 18px; height: 18px; }
  .redes a::before { top: 5px; left: 7px; width: 9px; height: 5px; }
  body:not(.en-cielo) .redes { left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .redes a { transition: none; } }

/* ---------- shows: cielo de fondo y una hoja de cuaderno manteca ---------- */
.shows {
  position: fixed; inset: 0; z-index: 5400;
  display: grid; place-items: center; align-content: center;
  padding: 72px 16px 32px;
  overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #7392ac 0%, #8eaac0 38%, #b3c5d3 72%, #cdd8df 100%);
  opacity: 0; transition: opacity .35s ease;
}
.shows.abierto { opacity: 1; }
.shows > .nubes { position: fixed; }
.shows-volver {
  position: relative; z-index: 2; margin-top: 22px;
  border: 0; background: none; cursor: pointer; padding: 6px 0;
  color: #fff; font: 600 15px/1 var(--f-ui);
  text-shadow: 0 1px 12px rgba(40, 70, 100, .4);
}
.shows-volver:hover { text-decoration: underline; text-underline-offset: 4px; }
.shows-volver { display: inline-flex; align-items: center; gap: 8px; }
.shows-volver .nubecita { flex: none; filter: drop-shadow(0 1px 4px rgba(40, 70, 100, .35)); transition: transform .3s cubic-bezier(.2, .9, .3, 1.4); }
.shows-volver:hover .nubecita { transform: translateX(-3px); }
/* sin marco amarillo: con teclado, solo se subraya */
.shows-volver:focus { outline: none; }
.shows-volver:focus-visible { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.shows:focus { outline: none; }

.hoja {
  --renglon: 40px;
  position: relative; z-index: 1;
  width: min(580px, 100%);
  padding: 34px 30px 30px 74px;
  box-sizing: border-box;
  color: #2b3442;
  background:
    /* margen rojo */
    linear-gradient(90deg, transparent 56px, rgba(226, 110, 120, .55) 56px, rgba(226, 110, 120, .55) 58px, transparent 58px),
    /* renglones */
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--renglon) - 1px), rgba(110, 150, 190, .38) calc(var(--renglon) - 1px), rgba(110, 150, 190, .38) var(--renglon)),
    #f6e9bd;
  background-position: 0 0, 0 34px, 0 0;
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .6) inset, 0 30px 70px rgba(35, 60, 85, .35), 0 3px 8px rgba(35, 60, 85, .18);
  transform: rotate(-1.2deg) translateY(16px);
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.15);
}
.shows.abierto .hoja { transform: rotate(-1.2deg); }
/* agujeritos de carpeta */
.hoja::before {
  content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 16px;
  background: radial-gradient(circle at 8px 50%, #a9bccb 0 7px, rgba(0, 0, 0, .08) 7.5px, transparent 8.5px) 0 0 / 16px 120px repeat-y;
  background-position: 0 30px;
  pointer-events: none;
}
.hoja-cabeza { height: calc(var(--renglon) * 2); display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.hoja-cabeza h2 {
  margin: 0; line-height: 1;
  font: 400 34px/1 var(--f-hand); color: #1f2a3a;
  transform: rotate(-1.5deg);
}
.hoja-sub {
  margin: 0 0 4px;
  font: 400 30px/1 "Reenie Beanie", var(--f-hand); color: #e47fbd;
}
.hoja-lista { list-style: none; margin: 0; padding: 0; }
.hoja-lista li {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  grid-template-rows: var(--renglon) var(--renglon);
}
.hoja-lista .dia { font: 400 25px/1 var(--f-hand); color: #1f2a3a; padding-bottom: 6px; }
.hoja-lista .donde {
  grid-column: 1 / -1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 400 27px/1 "Reenie Beanie", var(--f-hand); color: #4a5a6e; padding-bottom: 7px;
}
.hoja-lista .entradas {
  align-self: end; justify-self: end; padding-bottom: 6px;
  font: 400 26px/1 "Reenie Beanie", var(--f-hand); color: #e0609f;
  text-decoration: underline; text-decoration-color: rgba(224, 96, 159, .5);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  white-space: nowrap;
  transition: color .15s, text-decoration-color .15s;
}
.hoja-lista a.entradas:hover { color: #c2397f; text-decoration-color: currentColor; }
.hoja-lista a.entradas:focus-visible { outline: 2px solid #e0609f; outline-offset: 4px; border-radius: 4px; }
.hoja-lista .ya-fue .dia { text-decoration: line-through; text-decoration-color: #e47fbd; text-decoration-thickness: 3px; color: #8a8f96; }
.hoja-lista .ya-fue .donde { color: #9aa2ab; }
.hoja-lista .ya-fue .entradas { text-decoration: none; color: #b0478a; }
.hoja-mas {
  display: inline-block; margin-top: 14px;
  font: 400 24px/1 "Reenie Beanie", var(--f-hand); color: #3f6e9a;
  text-decoration: underline; text-decoration-color: rgba(63, 110, 154, .4); text-underline-offset: 5px;
}
.hoja-mas:hover { color: #e47fbd; text-decoration-color: currentColor; }
.hoja-mas:focus-visible { outline: 2px solid #3f6e9a; outline-offset: 4px; border-radius: 4px; }
/* mientras está la hoja, las redes siguen arriba a la derecha */
.en-shows .redes { top: 18px; right: max(20px, env(safe-area-inset-right, 0px)); left: auto; bottom: auto; }

@media (max-width: 759px) {
  .shows { padding: 64px 12px 24px; }
  .shows-volver { font-size: 14px; }
  .hoja { --renglon: 36px; padding: 26px 16px 24px 50px; background-position: 0 0, 0 26px, 0 0; }
  .hoja { background-image:
    linear-gradient(90deg, transparent 38px, rgba(226, 110, 120, .55) 38px, rgba(226, 110, 120, .55) 40px, transparent 40px),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--renglon) - 1px), rgba(110, 150, 190, .38) calc(var(--renglon) - 1px), rgba(110, 150, 190, .38) var(--renglon)); }
  .hoja::before { left: 10px; width: 14px; }
  .hoja-cabeza h2 { font-size: 26px; }
  .hoja-sub { font-size: 24px; }
  .hoja-lista .dia { font-size: clamp(15px, 4.6vw, 19px); }
  .hoja-lista .donde { font-size: clamp(18px, 5.6vw, 22px); }
  .hoja-lista .entradas { font-size: clamp(19px, 5.6vw, 22px); }
}
@media (prefers-reduced-motion: reduce) {
  .shows, .hoja { transition: none; }
}

/* aviso: no es el sitio oficial */
.aviso {
  position: fixed; z-index: 5500;
  top: 22px; left: 50%; transform: translateX(-50%);
  max-width: calc(100vw - 32px); box-sizing: border-box;
  margin: 0; padding: 7px 16px 8px;
  border-radius: 999px;
  text-align: center;
  color: #fff; font: 400 13.5px/1.3 var(--f-ui);
  text-shadow: 0 1px 8px rgba(40, 70, 100, .35);
  background: linear-gradient(150deg, rgba(255, 255, 255, .32), rgba(120, 160, 200, .18) 60%, rgba(255, 255, 255, .2));
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 18px rgba(40, 70, 100, .15);
  pointer-events: none;
}
.aviso strong { font-weight: 800; font-stretch: 85%; letter-spacing: .02em; }
.aviso span { color: #ffd0ea; }
/* en los discos, arriba está la lectora: el aviso va abajo al centro */
body:not(.en-cielo) .aviso { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(95, 128, 158, .62); }
.en-shows .aviso { top: 22px; bottom: auto; }
@media (max-width: 1180px) {
  .aviso { top: 72px; font-size: 12.5px; }
  .en-shows .aviso { top: 72px; }
}
@media (max-width: 759px) {
  .aviso { top: 60px; padding: 6px 12px 7px; font-size: 11.5px; width: max-content; }
  .en-shows .aviso { top: 60px; }
  body:not(.en-cielo) .aviso { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* sin JavaScript: una hoja simple con la info */
.sin-js {
  position: fixed; inset: 0; z-index: 9000; overflow-y: auto;
  padding: 40px 24px; box-sizing: border-box;
  background: linear-gradient(180deg, #7392ac, #cdd8df); color: #fff;
  font: 16px/1.5 var(--f-ui);
}
.sin-js h2 { margin: 0 0 12px; font-size: 28px; }
.sin-js p { max-width: 60ch; }
.sin-js a { color: #ffe0f1; }

/* ---------- celular: que nada se pise ---------- */
@media (max-width: 759px) {
  /* en el cielo, las redes van abajo al centro (arriba está el nombre) */
  .en-cielo .redes { top: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
  .en-shows .redes { top: 14px; bottom: auto; left: auto; right: max(14px, env(safe-area-inset-right, 0px)); transform: none; }
  /* en los discos, columna a la derecha debajo del sonido */
  body:not(.en-cielo) .redes {
    top: 56px; bottom: auto; left: auto; right: max(10px, env(safe-area-inset-right, 0px));
    flex-direction: column; gap: 6px; transform: none;
  }
  body:not(.en-cielo) .redes a { width: 34px; height: 34px; }
  body:not(.en-cielo) .redes svg { width: 17px; height: 17px; }
  /* el aviso ya se ve en el cielo; en los discos no entra sin tapar el reproductor */
  body:not(.en-cielo) .aviso { display: none; }
  /* abajo: solo los links, en una línea */
  .stage .foot .mini-brand { display: block; font-size: 16px; white-space: nowrap; }
  .stage .foot { justify-content: space-between; align-items: baseline; }
  .foot-links { flex-direction: row; align-items: baseline; gap: 12px; }
  .stage .foot .linkish { font-size: 13.5px; white-space: nowrap; }
}

/* ---------- lista de discos: panel blanco, como el reproductor ---------- */
.stage .drawer {
  top: 12px; bottom: 12px; right: 12px; height: auto;
  width: min(400px, calc(100% - 24px));
  background: #fff; color: #23313d;
  border: 0; border-radius: 24px;
  transform: translateX(calc(100% + 24px));
}
.stage .drawer.open { transform: none; box-shadow: 0 30px 70px rgba(35, 60, 85, .3), 0 2px 8px rgba(35, 60, 85, .1); }
.stage .drawer-head { padding-top: 22px; }
.stage .drawer h2 { color: #23313d; font-weight: 750; font-stretch: 112%; letter-spacing: -0.02em; }
.stage .drawer h2::after { content: " ✦"; color: #f7a6d6; }
.stage .drawer .x {
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: #f3f6f9; color: #23313d; font-size: 22px;
}
.stage .drawer .x:hover { background: #ffe0f1; color: #b0478a; }
/* cada disco: una tarjetita */
.stage .disc-list { gap: 6px; }
.stage .disc-list li {
  border: 0; border-radius: 16px; padding: 8px 10px;
  background: #f6f9fb;
  transition: background .15s, transform .15s;
}
.stage .disc-list li:hover { background: #fff0f7; transform: translateX(-2px); }
.stage .disc-list canvas { filter: drop-shadow(0 3px 6px rgba(35, 60, 85, .2)); }
.stage .disc-list b { color: #23313d; }
.stage .disc-list span, .stage .add label, .stage .hint { color: #7d8a98; }
.stage .hint code { color: #23313d; }
/* botones en cápsula, igual que el reproductor */
.stage .drawer .btn {
  min-height: 32px; padding: 0 14px; border-radius: 999px;
  background: #fff; border: 1px solid #e3e9ef; color: #23313d;
  font-weight: 650; box-shadow: none;
  transition: background .15s, color .15s, border-color .15s;
}
.stage .drawer .btn:hover { background: #ffe0f1; border-color: #ffe0f1; color: #b0478a; }
.stage .drawer .btn.solid { background: #e47fbd; border-color: #e47fbd; color: #fff; min-height: 40px; padding: 0 20px; }
.stage .drawer .btn.solid:hover { background: #d76aab; border-color: #d76aab; color: #fff; }
.stage .drawer .btn:disabled { opacity: 1; background: transparent; border-color: transparent; color: #b0478a; }
.stage .drawer .btn:focus-visible { outline: 2px solid #e47fbd; outline-offset: 2px; }
/* el formulario en su propia tarjeta */
.stage .add { margin-top: 18px; padding: 18px 16px 16px; border-radius: 20px; background: #f6f9fb; }
.stage .add h3 { color: #23313d; }
.stage .add input {
  min-height: 42px; border-radius: 12px;
  background: #fff; border: 1px solid #e3e9ef; color: #23313d;
}
.stage .add input::placeholder { color: #a9b4bf; }
.stage .add input:focus { outline: 2px solid #f7a6d6; outline-offset: 0; border-color: #f7a6d6; }
.stage .form-err { color: #c0306e; }
@media (max-width: 759px) {
  .stage .drawer { top: 8px; bottom: 8px; right: 8px; width: calc(100% - 16px); border-radius: 20px; }
}
/* con la lista abierta, el aviso y las redes no se ponen encima */
body:has(.drawer.open) .aviso, body:has(.drawer.open) .redes { display: none; }

/* ---------- globo de ayuda de la lectora: cápsula moderna ---------- */
.stage .tip {
  padding: 9px 16px 10px 32px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #23313d;
  font: 600 14px/1.25 var(--f-ui); font-stretch: 96%;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 28px rgba(35, 60, 85, .22), 0 2px 6px rgba(35, 60, 85, .12);
}
/* puntito rosa que late */
.stage .tip::after {
  content: ""; position: absolute; left: 14px; top: calc(50% - 4px);
  width: 8px; height: 8px; border-radius: 50%;
  background: #e47fbd;
  box-shadow: 0 0 0 0 rgba(228, 127, 189, .55);
  animation: latido-tip 1.8s ease-out infinite;
}
@keyframes latido-tip {
  0% { box-shadow: 0 0 0 0 rgba(228, 127, 189, .55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(228, 127, 189, 0); }
}
/* la colita, del mismo blanco y sin borde */
.stage .tip::before {
  width: 10px; height: 10px; border: 0; border-radius: 2px;
  background: rgba(255, 255, 255, .9);
}
.stage .tip[data-side="right"]::before { left: -4px; top: calc(50% - 5px); }
.stage .tip[data-side="below"]::before { top: -4px; left: calc(50% - 5px); }
.stage .tip[data-side="below"] { max-width: 260px; text-align: left; }
@media (max-width: 759px) {
  .stage .tip { font-size: 13px; padding: 8px 14px 9px 28px; }
  .stage .tip::after { left: 12px; }
}
@media (prefers-reduced-motion: reduce) { .stage .tip::after { animation: none; } }

/* bandeja blanca: la sombra del frente y el aro de "soltalo" en rosa */
.stage .casing::after { background: linear-gradient(rgba(60, 85, 110, .28), rgba(60, 85, 110, 0)); }
.stage .tray .ring { stroke: #e47fbd; }

/* el nombre lleva al inicio */
.cielo-marca, .brand { pointer-events: auto; }
.ir-home { color: inherit; text-decoration: none; cursor: pointer; }
.ir-home:hover { opacity: .85; }
.ir-home:focus-visible { outline: 2px solid #fff3a8; outline-offset: 4px; border-radius: 4px; }
.foot .mini-brand.ir-home { pointer-events: auto; }

/* en la hoja de shows el nombre sigue arriba a la izquierda y lleva al inicio */
.shows-marca { position: fixed; z-index: 3; }
.shows-marca .ir-home { font-size: clamp(22px, 2.6vw, 36px); font-weight: 650; font-stretch: 116%; letter-spacing: -0.02em; line-height: 1; }
@media (max-width: 759px) { .shows { padding-top: 104px; } }

/* ---------- pista del perfume: como los textos de su video ---------- */
.cielo-modal.pista {
  width: min(640px, calc(100vw - 32px));
  padding: 30px 34px 26px;
  background: #050505; color: #f2a7c8;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(20, 30, 45, .55);
}
.cielo-modal.pista .cielo-x { background: rgba(242, 167, 200, .12); color: #f2a7c8; }
.cielo-modal.pista .cielo-x:hover { background: rgba(242, 167, 200, .22); }
.cielo-modal.pista .cielo-x:focus-visible { outline-color: #f2a7c8; }
.pista-cab {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 2px;
  width: min(220px, 60%); margin: 0 0 22px; color: #fff;
}
.pista-etq { font: 300 14px/1 var(--f-ui); }
.pista-barra { grid-column: 1 / -1; height: 9px; width: 70%; background: #f7a6d6; }
.pista-cab strong { grid-column: 1 / -1; font: 750 26px/1.05 var(--f-ui); font-stretch: 78%; letter-spacing: -0.015em; }
.pista-frase {
  margin: 0; min-height: 4.2em;
  font: 600 clamp(22px, 4.2vw, 31px)/1.18 "Fira Sans Extra Condensed", "Archivo Narrow", var(--f-ui);
  color: #f2a7c8; text-align: center; text-wrap: balance;
}
.pista-frase .comilla { font-size: .8em; vertical-align: .35em; margin: 0 .08em; }
/* letra capitular adornada, como en el video */
.pista-frase .capitular {
  display: inline-block; vertical-align: -.12em;
  margin-right: .04em; padding: .02em .1em 0;
  padding: .06em .14em .02em;
  font: 900 1.4em/1 "Playfair Display", Georgia, serif;
  color: #050505;
  background:
    radial-gradient(circle at 50% 50%, rgba(5,5,5,.28) 0 1.6px, transparent 2px) 0 0 / 7px 7px,
    #f2a7c8;
  box-shadow: inset 0 0 0 2px #f2a7c8, inset 0 0 0 3px rgba(5,5,5,.5);
  border-radius: 1px;
  animation: pal-in .5s ease both;
}
.pista-frase .pal { display: inline-block; animation: pal-in .45s ease both; }
@keyframes pal-in { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } }
.pista-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.pista-cuenta { font: 300 13px/1 var(--f-ui); color: rgba(242, 167, 200, .6); letter-spacing: .04em; }
.pista-otra {
  border: 0; background: none; cursor: pointer; padding: 4px 0;
  font: 400 26px/1 "Reenie Beanie", var(--f-hand); color: #f2a7c8;
  text-decoration: underline; text-decoration-color: rgba(242, 167, 200, .45);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.pista-otra:hover { color: #fff; text-decoration-color: currentColor; }
.pista-otra:focus-visible { outline: 2px solid #f2a7c8; outline-offset: 4px; border-radius: 4px; }
@media (max-width: 759px) {
  .cielo-modal.pista { padding: 24px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pista-frase .pal, .pista-frase .capitular { animation: none; }
}

/* ---------- el dije: espejo con mensaje de labial ---------- */
.labial {
  position: fixed; inset: 0; z-index: 5400;
  overflow: hidden; touch-action: none; cursor: crosshair;
  /* atrás, el mismo cielo del sitio: se ve por el espejo de la foto */
  background: linear-gradient(180deg, #7392ac 0%, #8eaac0 38%, #b3c5d3 72%, #cdd8df 100%);
  opacity: 0; transition: opacity .35s ease;
}
.labial.abierto { opacity: 1; }
.labial > .nubes { position: absolute; }
.labial-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* la foto del pasto con flores, con el espejo recortado */
.labial-pasto {
  position: absolute; inset: 0; pointer-events: none;
  background: url("../img/espejo-pasto.webp?v=2") center / cover no-repeat;
}
.labial .shows-marca { z-index: 3; }
.labial .shows-marca .ir-home { color: #fff; text-shadow: 0 1px 10px rgba(20, 50, 20, .55); }
.labial .shows-marca .vol { color: #fff3a8; }
.labial-pista {
  position: absolute; margin: 0; transform: translate(-50%, -50%); white-space: nowrap;
  text-align: center; pointer-events: none;
  font: 400 30px/1 "Reenie Beanie", var(--f-hand); color: #fff;
  text-shadow: 0 1px 8px rgba(40, 70, 100, .45);
  transition: opacity .6s;
  animation: titila 2.4s ease-in-out infinite;
}
.labial-pista.off { opacity: 0; animation: none; }
@keyframes titila { 50% { opacity: .45; } }
.labial-listo {
  position: absolute; margin: 0; transform: translate(-50%, -50%) scale(.6);
  pointer-events: none;
  font-size: 34px; color: #fff; text-shadow: 0 0 12px rgba(120, 170, 220, .9);
  opacity: 0; transition: opacity .5s, transform .5s cubic-bezier(.2, .9, .3, 1.5);
}
.labial-listo.on { opacity: 1; transform: translate(-50%, -50%); }
.labial-botones {
  position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; gap: 12px; z-index: 2;
}
.labial .shows-volver { margin: 0; color: #fff; padding: 8px 16px; border-radius: 999px; background: rgba(30, 70, 25, .5); }
.en-labial .redes, .en-labial .aviso { display: none; }
@media (max-width: 759px) {
  .labial-pista { font-size: 24px; }
  .labial-botones { flex-direction: column; align-items: center; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .labial-pista { animation: none; } }

/* mientras el cielo tapa todo, lo de abajo no se pinta (ahorra placa de video) */
.cielo-tapa .stage { visibility: hidden; }
.cielo-tapa .stage .nube, .en-shows .cielo .nube, .en-labial .cielo .nube { animation-play-state: paused; }

/* ---------- cinta de frases abajo del cielo ---------- */
.cinta {
  position: absolute; z-index: 2; left: 0; right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  overflow: hidden; pointer-events: none;
  /* que entre y salga suave por los costados */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta-pista {
  display: flex; width: max-content;
  animation: cinta var(--dur, 60s) linear infinite;
  will-change: transform;
}
.cinta-tira {
  display: flex; align-items: center; flex: none;
  white-space: nowrap;
  font: 300 12.5px/1 var(--f-ui); letter-spacing: .06em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(40, 70, 100, .3);
}
/* todo en minúscula y de corrido: un espacio común entre verso y verso */
.cinta-tira { text-transform: lowercase; }
.cinta-tira span { padding-right: .35em; }
@keyframes cinta { to { transform: translate3d(-50%, 0, 0); } }
/* el texto de ayuda sube un poquito para dejarle lugar */
.cielo-pista { bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
.en-shows .cinta-pista, .en-labial .cinta-pista, .cielo[hidden] .cinta-pista { animation-play-state: paused; }
@media (max-width: 759px) {
  .cinta-tira { font-size: 11px; }
  .en-cielo .redes { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .cinta-pista { animation-duration: calc(var(--dur, 60s) * 3); } }

/* ---------- el perfume: compu retro en un campo de flores ---------- */
.compu {
  position: fixed; inset: 0; z-index: 5400;
  overflow: hidden;
  background: linear-gradient(180deg, #7392ac 0%, #8eaac0 38%, #b3c5d3 72%, #cdd8df 100%);
  opacity: 0; transition: opacity .35s ease;
}
.compu.abierto { opacity: 1; }
.compu:focus { outline: none; }
.compu > .nubes { position: absolute; }
.compu .shows-marca .ir-home { color: #fff; }
.brillos { position: absolute; inset: 0; } /* sin z-index: así el brillito agarrado puede pasar por delante de la compu */
.brillo {
  position: absolute; display: block; z-index: 1;
  transform: translate(-50%, -50%) rotate(var(--giro, 0deg));
  cursor: grab; touch-action: none;
  filter: drop-shadow(0 2px 6px rgba(40, 80, 140, .3));
  animation: brilla 3s ease-in-out infinite;
  transition: filter .2s;
}
.brillo svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.brillo:hover { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)); }
.brillo.agarrado {
  cursor: grabbing; z-index: 6; animation: none;
  transform: translate(-50%, -50%) rotate(calc(var(--giro, 0deg) + 15deg)) scale(1.35);
  filter: drop-shadow(0 10px 14px rgba(40, 80, 140, .35)) drop-shadow(0 0 8px rgba(255, 255, 255, .8));
}
.brillo.soltado { animation: soltar .5s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes brilla {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--giro, 0deg)) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) rotate(calc(var(--giro, 0deg) + 12deg)) scale(.82); opacity: .75; }
}
@keyframes soltar { 0% { transform: translate(-50%, -50%) rotate(var(--giro, 0deg)) scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .brillo { animation: none; } }

/* la colina: foto de pasto sin cielo; la compu se apoya en la punta */
.compu {
  --colw: max(100vw, 760px);                         /* ancho de la foto */
  --colh: min(calc(var(--colw) / 3.39), 34vh);       /* cuánto se ve de alto */
  --S: min(600px, 88vw, 72vh);                       /* tamaño de la escena de la compu */
  --mx: .39;                                         /* centro del monitor dentro de la escena */
}
.colina {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--colh); z-index: 1;
  background: url("../img/colina.webp") top center / var(--colw) auto no-repeat;
  pointer-events: none;
}
.escena {
  position: absolute; z-index: 2;
  width: var(--S); aspect-ratio: 1;
  /* centro del monitor sobre la punta (que está al 49,3 % de la foto) */
  left: calc(50% - var(--colw) * .007 - var(--S) * var(--mx));
  /* la base (al 74,5 % de la escena) se hunde un poquito en el pasto de la punta */
  top: calc(100% - var(--colh) + var(--colw) * .00726 + var(--S) * .03 - var(--S) * .745);
}
.cable { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.cable path { transition: d .45s cubic-bezier(.3, 1.3, .5, 1); filter: drop-shadow(0 3px 2px rgba(40, 70, 100, .3)); }

/* el monitor: plástico crema, como el de la foto */
.monitor { position: absolute; left: 3%; top: 4%; width: 72%; z-index: 1; }
.monitor-marco {
  position: relative;
  padding: 11% 7.5% 4%;
  border-radius: 4.5% / 5%;
  background: linear-gradient(160deg, #f6f4ec 0%, #ebe8dc 55%, #dcd8ca 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9), inset 0 -6px 14px rgba(120, 110, 80, .18),
    0 30px 50px rgba(30, 60, 40, .35), 0 6px 14px rgba(30, 60, 40, .2);
}
.monitor-marca {
  position: absolute; top: 4.2%; left: 7.5%;
  font: 650 clamp(11px, 2.1vw, 15px)/1 var(--f-ui); color: #7d7a70; letter-spacing: .01em;
}
.monitor-pantalla {
  position: relative; aspect-ratio: 4 / 3.15; overflow: hidden;
  border-radius: 7% / 9%;
  background: #141a17;
  box-shadow: inset 0 0 0 3px #d6d2c3, inset 0 0 0 5px #bcb7a6, inset 0 8px 24px rgba(0,0,0,.6);
}
/* reflejo del vidrio */
.vidrio {
  position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  background:
    linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 35%),
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
}
.crt {
  position: absolute; inset: 2.2%; z-index: 2; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 9% 8% 7%;
  /* fósforo: negro apenas rosado, más claro al centro */
  background: radial-gradient(110% 95% at 50% 45%, #1a0d14 0%, #0b0609 55%, #030203 100%);
  border-radius: 7% / 9%;
  transform-origin: 50% 50%;
}
/* líneas de tubo, la banda de refresco que baja y un poco de grano */
.crt::before {
  content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(247,166,214,0), rgba(247,166,214,.06) 50%, rgba(247,166,214,0));
  animation: refresco 6s linear infinite;
}
@keyframes refresco { to { transform: translateY(430%); } }
.crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  animation: titileo 3.2s steps(3) infinite;
}
@keyframes titileo { 0%, 100% { opacity: 1; } 40% { opacity: .85; } 70% { opacity: .95; } }
/* barrita de arriba, como una ventana vieja */
.crt-barra {
  position: absolute; left: 6%; right: 6%; top: 5.5%;
  display: flex; justify-content: space-between; align-items: center;
  font: 700 clamp(9px, 1.5vw, 12px)/1 var(--f-lcd); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(247, 166, 214, .55);
  text-shadow: 0 0 6px rgba(247, 166, 214, .45);
}
.crt-rec { color: #f7a6d6; animation: rec 1.6s steps(2) infinite; }
@keyframes rec { 50% { opacity: .25; } }
/* el texto brilla como fósforo, con un toque de corrimiento de color */
.compu-frase {
  font-size: clamp(15px, 3.1vw, 25px); min-height: 0;
  color: #ffc0e0;
  text-shadow:
    0 0 2px rgba(255, 192, 224, .9),
    0 0 10px rgba(247, 120, 190, .55),
    0 0 26px rgba(247, 120, 190, .25),
    -1px 0 0 rgba(255, 70, 120, .35), 1px 0 0 rgba(90, 200, 255, .25);
}
.compu-frase .capitular { box-shadow: inset 0 0 0 2px #f2a7c8, inset 0 0 0 3px rgba(5,5,5,.5), 0 0 14px rgba(247, 120, 190, .55); text-shadow: none; }
.compu-frase .cursor {
  display: inline-block; width: .5em; height: .95em; margin-left: .12em; vertical-align: -.12em;
  background: #ffc0e0; box-shadow: 0 0 10px rgba(247, 120, 190, .7);
  animation: cursor 1s steps(2) infinite;
}
@keyframes cursor { 50% { opacity: 0; } }
.compu-pie { display: flex; justify-content: flex-end; align-items: center; margin-top: 6%; }
.compu-pie .pista-otra { font-size: clamp(17px, 3vw, 24px); color: #ffc0e0; text-shadow: 0 0 8px rgba(247, 120, 190, .6); }
/* vidrio abombado: más oscuro y curvo en los bordes, con un reflejo */
.vidrio {
  border-radius: 7% / 9%;
  background:
    radial-gradient(60% 35% at 28% 18%, rgba(255,255,255,.14), rgba(255,255,255,0) 70%),
    linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 30%),
    radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,.6);
}

/* prender / apagar como un tubo viejo */
.escena[data-estado="apagada"] .crt { visibility: hidden; }
.escena[data-estado="apagando"] .crt { animation: crt-apagar .5s cubic-bezier(.6, 0, .9, .4) forwards; }
.escena[data-estado="prendiendo"] .crt { animation: crt-prender .7s cubic-bezier(.2, .8, .3, 1) both; }
.escena[data-estado="cortada"] .crt { animation: crt-corte .26s steps(3) forwards; }
@keyframes crt-apagar {
  0% { transform: scale(1, 1); filter: brightness(1); }
  55% { transform: scale(1, .012); filter: brightness(4); }
  100% { transform: scale(0, .012); filter: brightness(6); opacity: 0; }
}
@keyframes crt-prender {
  0% { transform: scale(0, .012); filter: brightness(6); opacity: 0; }
  35% { transform: scale(1, .012); filter: brightness(4); opacity: 1; }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
@keyframes crt-corte {
  0% { filter: brightness(2); }
  50% { filter: brightness(.3); transform: translateX(2%); }
  100% { opacity: 0; }
}

.monitor-panel { display: flex; align-items: center; justify-content: flex-end; gap: 4%; margin-top: 3.5%; }
.rejilla {
  margin-right: auto; width: 24%; height: 7px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #cfcabb 0 3px, transparent 3px 6px);
}
.led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #6f6a5c; box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
  transition: background .2s, box-shadow .2s;
}
.escena[data-estado="prendida"] .led, .escena[data-estado="prendiendo"] .led { background: #7be08a; box-shadow: 0 0 8px #7be08a; }
.escena[data-enchufe="si"][data-estado="apagada"] .led { background: #ffb84d; box-shadow: 0 0 6px rgba(255, 184, 77, .8); }
.power {
  width: clamp(30px, 6vw, 42px); height: clamp(22px, 4vw, 28px);
  border-radius: 6px; border: 1px solid #c8c3b3; cursor: pointer;
  background: linear-gradient(#fbfaf5, #e4e0d2);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c3bdab;
  position: relative;
}
.power::after {
  /* símbolo de encendido */
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  transform: translate(-50%, -45%); border: 1.6px solid #8b867a; border-top-color: transparent; border-radius: 50%;
}
.power::before { content: ""; position: absolute; left: 50%; top: 22%; width: 1.6px; height: 6px; background: #8b867a; transform: translateX(-50%); z-index: 1; }
.power.apretado { animation: apretar .18s ease; }
@keyframes apretar { 50% { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #c3bdab; } }
.power:focus-visible, .enchufe:focus-visible { outline: 2px solid #e47fbd; outline-offset: 3px; }
.monitor-base {
  width: 86%; height: clamp(18px, 4vw, 30px); margin: 0 auto;
  background: linear-gradient(#e2ded0, #cbc6b6);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 22px rgba(30, 60, 40, .3);
}

/* zapatilla y enchufe */
.zapatilla {
  position: absolute; right: 2%; top: 87%; width: 22%; height: 7%;
  display: flex; align-items: center; justify-content: flex-end; gap: 9%; padding-right: 8%;
  background: linear-gradient(#ffffff, #e9e7df); border-radius: 8px;
  box-shadow: 0 6px 10px rgba(30, 60, 20, .35), inset 0 1px 0 #fff;
  transform: rotate(-4deg); z-index: 1;
}
.zap-tecla { position: absolute; left: 7%; width: 16%; height: 52%; border-radius: 3px; background: #f7a6d6; box-shadow: inset 0 -2px 0 #e47fbd; }
.zap-boca { width: 14%; aspect-ratio: 1; border-radius: 50%; background: #d8d5cb; box-shadow: inset 0 2px 3px rgba(0,0,0,.25); }
.enchufe {
  position: absolute; left: 82.5%; top: 85.2%;
  width: 7.5%; height: 6.5%; padding: 0;
  border: 0; border-radius: 6px 9px 9px 6px; cursor: grab;
  background: linear-gradient(#f7f5ee, #dcd8ca);
  box-shadow: 0 4px 8px rgba(30, 60, 20, .35), inset 0 1px 0 #fff;
  transform: rotate(-4deg); z-index: 2;
  transition: left .45s cubic-bezier(.3, 1.3, .5, 1), top .45s cubic-bezier(.3, 1.3, .5, 1), transform .45s;
}
.enchufe:hover { filter: brightness(1.04); }
.enchufe-patas { position: absolute; right: -14%; top: 25%; width: 16%; height: 50%; border-top: 2px solid #b9b9b9; border-bottom: 2px solid #b9b9b9; }
.escena[data-enchufe="no"] .enchufe { left: 75%; top: 79%; transform: rotate(-28deg); }
.nota-enchufe {
  position: absolute; right: 0; top: 96%; margin: 0; white-space: nowrap;
  font: 400 22px/1 "Reenie Beanie", var(--f-hand); color: #fff;
  padding: 5px 12px 6px; border-radius: 999px; background: rgba(60, 90, 120, .45);
  opacity: 0; transition: opacity .3s;
}
.nota-enchufe.on { opacity: 1; }

.compu .shows-volver {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; z-index: 3;
  padding: 8px 16px; border-radius: 999px; background: rgba(60, 90, 120, .35);
}
.en-compu .redes, .en-compu .aviso { display: none; }
.en-compu .cielo .nube { animation-play-state: paused; }
@media (max-width: 759px) {
  .compu { --S: min(84vw, 70vh); --mx: .40; }
  .monitor { width: 78%; left: 1%; }
  .compu-pie .pista-cuenta { display: none; }
  .nota-enchufe { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .escena .crt { animation-duration: .01s !important; }
  .crt::after, .crt::before, .crt-rec, .compu-frase .cursor { animation: none; }
}