:root {
  --ol: #4f3a73; --ol2: #7d66a8; --dark: #2a2045;
  --lav: #d9cdfa; --lav2: #b9a6ef; --lav3: #8f76d6; --lavbg: #e6dcfd;
  --cream: #fff6e9; --cream2: #f7e6d3;
  --pink: #ffb8d2; --pink2: #f58fb4; --pink3: #ffdce9;
  --lil: #d4bdf7; --lil2: #a98be6; --lil3: #ece2ff;
  --mint: #bdf0d8; --mint2: #7fd3ac; --mint3: #e2fbef;
  --sky: #b8e6ff; --sky2: #7cc6ec;
  --yel: #ffeaa0; --yel2: #f6c85f;
  --u: 3;
  --px: calc(var(--u) * 1px);
  --f-title: 'Press Start 2P', ui-monospace, monospace;
  --f-body: 'Pixelify Sans', ui-rounded, system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--f-body);
  color: var(--ol);
  background-color: var(--lavbg);
  background-image:
    radial-gradient(#fff6c8 1.6px, transparent 1.8px),
    radial-gradient(#ffd3e6 1.4px, transparent 1.6px),
    linear-gradient(#e2d6fd, #f3dcf0);
  background-size: 46px 46px, 46px 46px, 100% 100%;
  background-position: 0 0, 23px 23px, 0 0;
  overflow: hidden;
  -webkit-font-smoothing: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
kbd {
  font-family: var(--f-title); font-size: .7em;
  background: var(--cream); border: 2px solid var(--ol); border-bottom-width: 4px;
  padding: .25em .45em; margin: 0 .15em; display: inline-block; line-height: 1;
}
.ico { image-rendering: pixelated; display: inline-block; vertical-align: middle; }

/* ---------- caja pixel (bordes con esquinas "mordidas") ---------- */
.pbox {
  --b: 3px;
  --inner: var(--pink3);
  position: relative;
  background: var(--box-bg, #fff);
  margin: var(--b);
  box-shadow:
    var(--b) 0 0 0 var(--ol), calc(var(--b) * -1) 0 0 0 var(--ol),
    0 var(--b) 0 0 var(--ol), 0 calc(var(--b) * -1) 0 0 var(--ol),
    inset 0 0 0 var(--b) var(--inner),
    calc(var(--b) * 2) calc(var(--b) * 3) 0 0 rgba(74, 51, 85, .18);
}
.btn {
  font-family: var(--f-title); font-size: 11px; letter-spacing: .02em;
  background: var(--cream); border: 0; padding: .7em 1em;
  box-shadow: 3px 0 0 0 var(--ol), -3px 0 0 0 var(--ol), 0 3px 0 0 var(--ol), 0 -3px 0 0 var(--ol), 0 6px 0 0 var(--ol2);
  margin: 3px; transition: transform .06s steps(2);
}
.btn:hover, .btn:focus-visible { background: var(--yel); outline: none; }
.btn:active { transform: translateY(3px); box-shadow: 3px 0 0 0 var(--ol), -3px 0 0 0 var(--ol), 0 3px 0 0 var(--ol), 0 -3px 0 0 var(--ol); }

/* ---------- layout de escritorio ---------- */
#app { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 28px 2px; }
.brand { display: flex; align-items: baseline; gap: 18px; }
.logo {
  font-family: var(--f-title); font-size: 20px; color: #ffc0d8;
  text-shadow: 3px 0 var(--ol), -3px 0 var(--ol), 0 3px var(--ol), 0 -3px var(--ol), 3px 3px var(--ol), -3px 3px var(--ol), 3px -3px var(--ol), -3px -3px var(--ol), 0 6px var(--lav3);
  letter-spacing: 2px;
}
.tagline { font-size: 17px; font-weight: 600; color: var(--ol2); }
.sound-btns { display: flex; gap: 12px; }
.sound-btns .btn { font-size: 10px; }
.sound-btns .btn[aria-pressed="true"] { background: #ffdcea; }

.stage { display: flex; align-items: center; justify-content: center; min-height: 0; }
.frame { position: relative; padding: 0; }
.screen {
  position: relative; flex: none; overflow: hidden;
  width: 1280px; height: 768px; background: #b3c0f5;
  box-shadow:
    0 0 0 4px #fff, 0 0 0 9px var(--lav2), 0 0 0 11px #fff, 0 0 0 15px var(--lav3), 0 0 0 17px var(--ol),
    12px 16px 0 17px rgba(79, 58, 115, .16);
}
.corner { position: absolute; z-index: 2; width: 12px; height: 12px; background: #ffe390; box-shadow: 0 0 0 3px var(--ol), 0 -9px 0 -3px #fff6c8, 0 9px 0 -3px #fff6c8, 9px 0 0 -3px #fff6c8, -9px 0 0 -3px #fff6c8; transform: rotate(45deg); }
.corner.tl { left: -22px; top: -22px; } .corner.tr { right: -22px; top: -22px; }
.corner.bl { left: -22px; bottom: -22px; } .corner.br { right: -22px; bottom: -22px; }
#world { display: block; width: 100%; height: 100%; image-rendering: pixelated; outline: none; }

.hints { display: flex; gap: 30px; justify-content: center; padding: 10px 0 6px; font-size: 15px; font-weight: 600; color: var(--ol2); }
@keyframes nudge { 50% { transform: translateX(3px); } }

/* ---------- cintas con nombres sobre el mapa ---------- */
#ribbons { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ribbon {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto;
  display: flex; align-items: center; gap: calc(var(--px) * 2.5); white-space: nowrap;
  border: 0; padding: calc(var(--px) * 1.5) calc(var(--px) * 5); color: #8a3f6f;
  background: linear-gradient(#ffe6f1 0 50%, #ffd1e5 50%);
  font-size: max(12px, calc(var(--px) * 6)); font-weight: 600; line-height: 1;
  box-shadow: 0 max(2px, var(--px)) 0 #d983ad, 0 calc(max(2px, var(--px)) * -1) 0 #d983ad, 0 calc(var(--px) * 2.5) 0 rgba(79, 58, 115, .18);
  transition: transform .12s steps(2);
}
.ribbon::before, .ribbon::after {
  content: ''; position: absolute; top: calc(var(--px) * 2.5); width: calc(var(--px) * 7); height: 100%; z-index: -1;
  background: #f7b3d2; box-shadow: 0 max(2px, var(--px)) 0 #d983ad;
}
.ribbon::before { left: calc(var(--px) * -5); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); }
.ribbon::after { right: calc(var(--px) * -5); clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }
.ribbon .ico { width: calc(var(--px) * 6); height: calc(var(--px) * 6); }
.ribbon .r-label, .ribbon kbd { display: none; }
.ribbon .r-label { font-weight: 400; color: #a0689a; font-size: .9em; }
.ribbon kbd { font-size: max(7px, calc(var(--px) * 3)); background: #fff3c2; border-width: max(1px, calc(var(--px) * .5)); }
.ribbon:hover, .ribbon:focus-visible, .ribbon.hot { transform: translate(-50%, calc(-100% - var(--px) * 2)); outline: none; z-index: 2; }
.ribbon:hover .r-label, .ribbon:focus-visible .r-label, .ribbon.hot .r-label { display: inline; }
.ribbon.near kbd { display: inline-block; animation: bob .6s steps(2) infinite; }

/* ---------- diálogo en el mapa ---------- */
.dialog {
  --b: max(2px, var(--px));
  position: absolute; z-index: 4; left: calc(var(--px) * 10); right: calc(var(--px) * 10); bottom: calc(var(--px) * 8);
  min-height: calc(var(--px) * 44); padding: calc(var(--px) * 9) calc(var(--px) * 12);
  font-size: max(16px, calc(var(--px) * 8)); line-height: 1.45; cursor: pointer;
}
.dialog-text { margin: 0; white-space: pre-wrap; }
.dialog { --inner: #e9e0ff; }
.dialog.with-portrait { padding-left: calc(var(--px) * 58); }
.dialog .portrait {
  position: absolute; left: calc(var(--px) * 8); top: 50%; transform: translateY(-50%);
  width: calc(var(--px) * 42); height: calc(var(--px) * 42); image-rendering: pixelated;
  background: linear-gradient(#b9c9ff, #d7c6fa); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 0 calc(var(--px) * 2.5) #fff, 0 0 0 calc(var(--px) * 3.5) var(--lav3);
}
.dialog.cat .portrait { object-fit: contain; padding: calc(var(--px) * 6); background: linear-gradient(#fff3c2, #ffdcea); }
.more { position: absolute; right: calc(var(--px) * 8); bottom: calc(var(--px) * 5); color: var(--pink2); animation: bob .6s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }

/* ---------- transición ---------- */
#fade { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background-color: #ffc6dd;
  background-image: radial-gradient(#fff 18%, transparent 20%), radial-gradient(#ffe3ef 18%, transparent 20%);
  background-size: calc(var(--px) * 24) calc(var(--px) * 24); background-position: 0 0, calc(var(--px) * 12) calc(var(--px) * 12); }

/* ---------- pantalla de título ---------- */
.title-screen {
  position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 246, 252, .88), rgba(217, 205, 250, .78) 70%);
  transition: opacity .45s steps(6);
}
.title-screen.out { opacity: 0; pointer-events: none; }
.title-inner { text-align: center; position: relative; padding: 0 5%; }
.title-portrait {
  width: calc(var(--px) * 48); height: calc(var(--px) * 48); image-rendering: pixelated; margin-bottom: calc(var(--px) * 6);
  background: linear-gradient(#b9c9ff, #ffd6e8); border-radius: 50%;
  box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 0 calc(var(--px) * 3) #fff, 0 0 0 calc(var(--px) * 4.5) var(--lav3);
  animation: float 2.4s steps(4) infinite .3s;
}
.title-screen h1 {
  font-family: var(--f-title); font-weight: 400; margin: 0 0 calc(var(--px) * 8);
  font-size: calc(var(--px) * 20); line-height: 1.25; color: #ffc0d8; letter-spacing: calc(var(--px) * 1);
  text-shadow:
    var(--px) 0 var(--ol), calc(var(--px) * -1) 0 var(--ol), 0 var(--px) var(--ol), 0 calc(var(--px) * -1) var(--ol),
    calc(var(--px) * 2) 0 var(--ol), calc(var(--px) * -2) 0 var(--ol), 0 calc(var(--px) * 2) var(--ol), 0 calc(var(--px) * -2) var(--ol),
    calc(var(--px) * 2) calc(var(--px) * 2) var(--ol), calc(var(--px) * -2) calc(var(--px) * 2) var(--ol), calc(var(--px) * 2) calc(var(--px) * -2) var(--ol), calc(var(--px) * -2) calc(var(--px) * -2) var(--ol),
    0 calc(var(--px) * 5) var(--lil2);
  animation: float 2.4s steps(4) infinite;
}
@keyframes float { 50% { transform: translateY(calc(var(--px) * -2)); } }
.subtitle { font-size: calc(var(--px) * 9); font-weight: 600; margin: 0 0 calc(var(--px) * 14); color: var(--ol); }
.press { font-family: var(--f-title); font-size: calc(var(--px) * 6); margin: 0 0 calc(var(--px) * 4); animation: blink 1s steps(1) infinite; }
.title-inner small { font-size: calc(var(--px) * 6); color: var(--ol2); }
@keyframes blink { 50% { opacity: 0; } }
.title-sparkles i {
  position: absolute; width: calc(var(--px) * 3); height: calc(var(--px) * 3); background: var(--yel2);
  box-shadow: 0 calc(var(--px) * -3) var(--yel), 0 calc(var(--px) * 3) var(--yel), calc(var(--px) * 3) 0 var(--yel), calc(var(--px) * -3) 0 var(--yel);
  animation: blink 1.4s steps(1) infinite;
}
.title-sparkles i:nth-child(1) { left: -8%; top: 4%; }
.title-sparkles i:nth-child(2) { right: -6%; top: 18%; animation-delay: .3s; }
.title-sparkles i:nth-child(3) { left: 4%; bottom: 10%; animation-delay: .7s; }
.title-sparkles i:nth-child(4) { right: 2%; bottom: 30%; animation-delay: .5s; }
.title-sparkles i:nth-child(5) { left: 46%; top: -14%; animation-delay: 1s; }
.title-sparkles i:nth-child(6) { right: 26%; bottom: -8%; animation-delay: .2s; }

/* ============================================================
   HABITACIONES
   ============================================================ */
.room {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  background: var(--scene) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  font-size: max(15px, calc(var(--px) * 6.5)); line-height: 1.4;
}
.room > * { position: relative; z-index: 1; image-rendering: auto; }
.room .pbox { --b: max(2px, var(--px)); }
.room .btn { font-size: max(9px, calc(var(--px) * 4.2)); }
.room h2, .room h3, .room h4 { font-family: var(--f-title); font-weight: 400; margin: 0; line-height: 1.5; }
.room h3 { font-size: max(11px, calc(var(--px) * 5.5)); }
.room h4 { font-size: max(9px, calc(var(--px) * 4)); color: var(--ol2); margin-bottom: .6em; }
.room dl { margin: 0; }
.room dt { font-family: var(--f-title); font-size: max(8px, calc(var(--px) * 3.4)); color: var(--ol2); margin-top: .7em; }
.room dd { margin: .15em 0 0; font-weight: 600; }

.room-bar { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--px) * 6) calc(var(--px) * 8) calc(var(--px) * 3); }
.plaque { display: flex; align-items: center; gap: calc(var(--px) * 4); padding: calc(var(--px) * 3) calc(var(--px) * 6); --inner: var(--yel); background: var(--cream); }
.plaque .ico { width: calc(var(--px) * 9); height: calc(var(--px) * 9); }
.plaque-name { font-family: var(--f-title); font-size: max(10px, calc(var(--px) * 5)); }
.plaque small { color: var(--ol2); font-weight: 600; }
.btn-exit kbd { font-size: .8em; }
.room-body { flex: 1; min-height: 0; overflow-y: auto; padding: calc(var(--px) * 4) calc(var(--px) * 10) calc(var(--px) * 14); outline: none; scrollbar-color: var(--pink2) transparent; scrollbar-width: thin; }

/* imágenes y placeholders */
.media { display: block; width: 100%; height: auto; object-fit: cover; background: var(--lil3); }
.ph {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--px) * 3);
  background: repeating-conic-gradient(var(--c1, var(--pink3)) 0 25%, var(--c2, #fff) 0 50%) 0 0 / calc(var(--px) * 12) calc(var(--px) * 12);
  font-family: var(--f-title); font-size: max(8px, calc(var(--px) * 3.6)); color: var(--ol);
  image-rendering: pixelated;
}
.ph span { background: #fff; padding: .5em .7em; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); }
.ph .ph-ico { width: calc(var(--px) * 14); height: calc(var(--px) * 14); }
.detail-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--px) * 6); }
.detail-arrows { display: flex; align-items: center; gap: calc(var(--px) * 3); }
.counter { font-family: var(--f-title); font-size: max(9px, calc(var(--px) * 4)); background: #fff; padding: .5em .7em; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); }
.room--dark .counter { background: var(--cream); color: var(--ol); }
.btn-sq { padding: .7em .8em; }

/* galería reutilizable */
.gallery-main { box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); background: #fff; }
.thumbs { display: flex; gap: calc(var(--px) * 4); margin-top: calc(var(--px) * 6); flex-wrap: wrap; }
.thumb { width: calc(var(--px) * 22); padding: 0; border: 0; background: none; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); opacity: .7; }
.thumb.on, .thumb:hover { opacity: 1; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 0 calc(max(2px, var(--px)) * 2.5) var(--yel2); }
.thumb .ph span { display: none; }
.thumb .ph .ph-ico { width: calc(var(--px) * 8); height: calc(var(--px) * 8); }

/* talk box (diálogo reutilizable) */
.talk { padding: calc(var(--px) * 8) calc(var(--px) * 10) calc(var(--px) * 6); cursor: pointer; min-height: calc(var(--px) * 44); display: flex; flex-direction: column; justify-content: space-between; }
.talk-text { margin: 0; font-size: 1.12em; }
.talk--portrait { padding-left: calc(var(--px) * 46); }
.talk .portrait { position: absolute; left: calc(var(--px) * 8); top: calc(var(--px) * 8); width: calc(var(--px) * 32); height: calc(var(--px) * 32); image-rendering: pixelated; background: linear-gradient(#b9c9ff, #ffd6e8); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 0 calc(var(--px) * 2) #fff, 0 0 0 calc(var(--px) * 3) var(--lav3); }
.talk-foot { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--px) * 4); }
.talk .more { position: static; }
.talk-dots { display: flex; gap: calc(var(--px) * 2); }
.talk-dots i { width: calc(var(--px) * 3); height: calc(var(--px) * 3); background: var(--lil); }
.talk-dots i.on { background: var(--pink2); }

/* ---------- CASTILLO / about ---------- */
.about { max-width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(var(--px) * 10); align-items: start; }
.card { --box-bg: var(--cream); --inner: var(--pink); padding: calc(var(--px) * 8); }
.card-head { display: flex; justify-content: space-between; font-family: var(--f-title); font-size: max(8px, calc(var(--px) * 3.6)); background: var(--pink2); color: #fff; padding: .8em 1em; margin: calc(var(--px) * -2) calc(var(--px) * -2) calc(var(--px) * 7); }
.card-main { display: grid; grid-template-columns: 42% 1fr; gap: calc(var(--px) * 8); }
.card-photo { box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 0 calc(max(2px, var(--px)) * 3) #fff, 0 0 0 calc(max(2px, var(--px)) * 4) var(--ol); margin: calc(var(--px) * 3); }
.card-data > div { border-bottom: max(2px, var(--px)) dashed var(--pink); padding-bottom: .4em; }
.card-data dt { margin-top: .5em; }
.card-sub { font-family: var(--f-title); font-size: max(8px, calc(var(--px) * 3.6)); margin: calc(var(--px) * 9) 0 calc(var(--px) * 4); color: var(--ol2); }
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--px) * 4); text-align: center; }
.badge { display: inline-grid; place-items: center; width: calc(var(--px) * 16); height: calc(var(--px) * 16); background: #fff; border-radius: 50%; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), inset 0 calc(var(--px) * -2) 0 var(--lil3); }
.badge .ico { width: calc(var(--px) * 9); height: calc(var(--px) * 9); }
.badges li:hover .badge { animation: bob .5s steps(2) infinite; background: var(--yel); }
.badges small { display: block; font-size: .8em; margin-top: .2em; font-weight: 600; }
.about-side { display: flex; flex-direction: column; gap: calc(var(--px) * 8); }
.stats { padding: calc(var(--px) * 7) calc(var(--px) * 9); --inner: var(--lil3); }
.stats h3, .tools h3 { font-size: max(9px, calc(var(--px) * 4)); margin-bottom: .6em; color: var(--ol2); }
.stat { display: grid; grid-template-columns: 38% 1fr; align-items: center; gap: calc(var(--px) * 4); margin: calc(var(--px) * 2) 0; font-weight: 600; }
.bar {
  height: calc(var(--px) * 5); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - var(--px)), #fff calc(10% - var(--px)) 10%),
    linear-gradient(90deg, var(--mint2) 0 calc(var(--v) * 10%), var(--lil3) 0);
}
.tools { padding: calc(var(--px) * 7) calc(var(--px) * 9); --inner: var(--mint3); }
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 4); }
.chip { background: var(--mint3); padding: .2em .7em; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); font-weight: 600; }

/* ---------- CINE ---------- */
.room--dark { color: var(--cream); }
.room--dark .pbox, .room--dark .btn { color: var(--ol); }
.marquee {
  position: relative; text-align: center; margin: 0 auto calc(var(--px) * 12); max-width: 70%;
  background: var(--dark); color: var(--yel); padding: calc(var(--px) * 9) calc(var(--px) * 8);
  box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 0 calc(var(--px) * 5) var(--pink2), 0 0 0 calc(var(--px) * 6) var(--ol);
  margin-top: calc(var(--px) * 6);
}
.marquee::before, .marquee::after {
  content: ''; position: absolute; left: 0; right: 0; height: calc(var(--px) * 3);
  background: radial-gradient(circle, #fff7b0 45%, transparent 50%) 0 0 / calc(var(--px) * 8) 100%;
  animation: chase .6s steps(1) infinite;
}
.marquee::before { top: calc(var(--px) * 2); }
.marquee::after { bottom: calc(var(--px) * 2); animation-delay: .3s; }
@keyframes chase { 50% { background-position: calc(var(--px) * 4) 0; } }
.marquee h2 { font-size: max(16px, calc(var(--px) * 11)); letter-spacing: calc(var(--px) * 1); text-shadow: 0 calc(var(--px) * 1.5) #e5a24f; }
.marquee p { margin: .3em 0 0; font-family: var(--f-title); font-size: max(8px, calc(var(--px) * 3.6)); color: var(--pink); }
.posters { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--px) * 14) calc(var(--px) * 16); max-width: 90%; margin: 0 auto; padding: calc(var(--px) * 4); }
.poster { background: none; border: 0; padding: 0; text-align: center; color: var(--cream); }
.poster-frame {
  display: block; position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--yel2);
  box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 0 calc(var(--px) * 4) var(--yel2), 0 0 0 calc(var(--px) * 5) var(--ol);
  transition: transform .15s steps(3);
}
.poster-frame .media { height: 100%; }
.poster:hover .poster-frame, .poster:focus-visible .poster-frame { transform: translateY(calc(var(--px) * -3)); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 0 calc(var(--px) * 4) var(--yel), 0 0 0 calc(var(--px) * 5) var(--ol), 0 0 calc(var(--px) * 12) calc(var(--px) * 3) rgba(255, 234, 160, .5); }
.poster:focus-visible { outline: none; }
.poster-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--px) * 5); padding: 10%;
  background: linear-gradient(var(--c2) 0 55%, var(--c1) 55%);
  color: var(--ol);
}
.poster-ph::before { content: ''; position: absolute; inset: calc(var(--px) * 4); border: max(2px, var(--px)) dashed rgba(74, 51, 85, .35); }
.poster-ph .ph-ico { width: calc(var(--px) * 18); height: calc(var(--px) * 18); }
.poster-ph-title { font-family: var(--f-title); font-size: max(9px, calc(var(--px) * 4.4)); line-height: 1.5; }
.poster-ph-sub { font-size: .8em; font-weight: 600; opacity: .7; letter-spacing: .2em; }
.poster-genre { position: absolute; top: calc(var(--px) * 4); right: calc(var(--px) * 4); background: var(--pink2); color: #fff; font-size: .72em; font-weight: 600; padding: .1em .5em; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); }
.plate { display: block; margin: calc(var(--px) * 9) auto 0; background: var(--cream); color: var(--ol); padding: .5em .6em; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 calc(var(--px) * 2) 0 max(2px, var(--px)) var(--ol2); max-width: 94%; }
.plate strong { display: block; font-size: .95em; }
.plate small { font-size: .8em; color: var(--ol2); font-weight: 600; }

/* sala */
.screen-wrap { display: grid; grid-template-columns: 9% 1fr 9%; align-items: stretch; margin: 0 auto calc(var(--px) * 10); max-width: 74%; }
.curtain-side { background: repeating-linear-gradient(90deg, #962f58 0 var(--px), #b8466f var(--px) calc(var(--px) * 4), #d25e88 calc(var(--px) * 4) calc(var(--px) * 7), #e982a6 calc(var(--px) * 7) calc(var(--px) * 8)); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); }
.curtain-side.l { border-radius: 0 0 60% 0; }
.curtain-side.r { border-radius: 0 0 0 60%; }
.screen169 { aspect-ratio: 16/9; background: #000; position: relative; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 calc(var(--px) * 20) rgba(255, 246, 200, .25); }
.screen169 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lite { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: #000; }
.lite img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lite-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: calc(var(--px) * 12); color: var(--ol); background: var(--yel); width: calc(var(--px) * 26); height: calc(var(--px) * 18);
  display: grid; place-items: center; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 calc(var(--px) * 3) 0 max(2px, var(--px)) var(--ol);
}
.lite:hover .lite-play { background: var(--pink); }
.tv-off { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; }
.noise {
  position: absolute; inset: -20%;
  background: repeating-conic-gradient(#3a2a4f 0 25%, #4b3a72 0 50%) 0 0 / calc(var(--px) * 4) calc(var(--px) * 4);
  animation: noise .25s steps(2) infinite; opacity: .9; image-rendering: pixelated;
}
@keyframes noise { 50% { transform: translate(calc(var(--px) * 2), calc(var(--px) * 2)); } }
.tv-msg { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--px) * 4); color: var(--yel); }
.tv-msg .ico { width: calc(var(--px) * 16); height: calc(var(--px) * 16); }
.tv-msg span { font-family: var(--f-title); font-size: max(10px, calc(var(--px) * 6)); animation: blink 1.2s steps(1) infinite; }
.tv-msg small { color: var(--pink); }
.sala-info { display: grid; grid-template-columns: 1fr 1.4fr; gap: calc(var(--px) * 10); max-width: 84%; margin: 0 auto; }
.ficha { padding: calc(var(--px) * 8); --box-bg: var(--cream); --inner: var(--yel); }
.ficha dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--px) * 6); }
.sinopsis { padding: calc(var(--px) * 8) calc(var(--px) * 10); --inner: var(--pink3); }
.sinopsis p { margin: 0; }

/* ---------- BOUTIQUE ---------- */
.shop-head { display: flex; justify-content: center; margin-bottom: calc(var(--px) * 8); }
.shop-sign { padding: calc(var(--px) * 4) calc(var(--px) * 10); font-family: var(--f-title); font-size: max(10px, calc(var(--px) * 5)); display: flex; align-items: center; gap: calc(var(--px) * 4); --inner: var(--mint); }
.shop-sign .ico { width: calc(var(--px) * 10); height: calc(var(--px) * 10); }
.shop-sign small { font-family: var(--f-body); font-size: .8em; color: var(--ol2); }
.rack { position: relative; max-width: 78%; margin: 0 auto calc(var(--px) * 18); padding-top: calc(var(--px) * 4); }
.rod { height: calc(var(--px) * 4); background: linear-gradient(#fff 0 30%, #c9bcd6 30% 70%, var(--ol2) 70%); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); margin: 0 calc(var(--px) * -4); }
.rack::before, .rack::after { content: ''; position: absolute; top: 0; bottom: calc(var(--px) * -8); width: calc(var(--px) * 3); background: var(--ol2); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); }
.rack::before { left: calc(var(--px) * -6); }
.rack::after { right: calc(var(--px) * -6); }
.rack-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--px) * 9); padding: 0 calc(var(--px) * 6); margin-top: calc(var(--px) * -7); }
.garment { position: relative; background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.garment .hook { width: calc(var(--px) * 16); height: calc(var(--px) * 14); position: relative; z-index: 1; }
.garment-card { display: block; width: 100%; margin-top: calc(var(--px) * -3); background: #fff; padding: calc(var(--px) * 3); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), calc(var(--px) * 3) calc(var(--px) * 3) 0 max(2px, var(--px)) rgba(74, 51, 85, .18); }
.garment:hover, .garment:focus-visible { animation: swing .9s ease-in-out; outline: none; }
.garment:hover .garment-card, .garment:focus-visible .garment-card { box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 0 calc(var(--px) * 3) var(--pink2); }
@keyframes swing { 20% { transform: rotate(3deg); } 45% { transform: rotate(-2deg); } 70% { transform: rotate(1deg); } 100% { transform: rotate(0); } }
.tag { font: inherit; }
.garment .tag {
  position: static; transform: none; animation: none; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; text-align: left;
  margin-top: calc(var(--px) * 4); align-self: flex-end; margin-right: calc(var(--px) * 3); max-width: 90%;
  background: var(--cream); padding: .35em .6em; font-size: .85em; line-height: 1.2;
  box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), calc(var(--px) * 2) calc(var(--px) * 2) 0 max(2px, var(--px)) rgba(74, 51, 85, .15);
}
.garment .tag b { font-family: var(--f-title); font-size: .65em; font-weight: 400; color: var(--pink2); margin: 0 0 .2em; }

/* probador */
.probador-main { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 12); align-items: start; }
.probador .gallery { width: 80%; margin: 0 auto; }
.label-tag { --box-bg: var(--cream); --inner: var(--cream2); padding: calc(var(--px) * 16) calc(var(--px) * 10) calc(var(--px) * 10); }
.tag-hole { position: absolute; top: calc(var(--px) * 5); left: 50%; width: calc(var(--px) * 7); height: calc(var(--px) * 7); margin-left: calc(var(--px) * -3.5); border-radius: 50%; background: var(--mint3); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); }
.tag-brand { display: block; text-align: center; font-family: var(--f-title); font-size: max(7px, calc(var(--px) * 3)); letter-spacing: .1em; color: var(--pink2); margin-bottom: calc(var(--px) * 5); border-bottom: max(2px, var(--px)) dashed var(--ol2); padding-bottom: calc(var(--px) * 4); }
.label-tag h3 { text-align: center; }
.label-tag p { margin: calc(var(--px) * 6) 0 0; }
.care { display: flex; justify-content: center; gap: calc(var(--px) * 6); margin-top: calc(var(--px) * 8); }
.care .ico { width: calc(var(--px) * 8); height: calc(var(--px) * 8); opacity: .8; }

/* ---------- BIBLIOTECA ---------- */
.shelf-unit { background: var(--wood2, #a8795c); padding: calc(var(--px) * 6) calc(var(--px) * 6) 0; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); max-width: 66%; margin: calc(var(--px) * 2) auto 0; background: #a8795c; }
.shelf { background: #6e4a3c; box-shadow: inset 0 calc(var(--px) * 3) 0 rgba(0, 0, 0, .18); margin-bottom: calc(var(--px) * 6); }
.books { display: flex; align-items: flex-end; justify-content: center; height: calc(var(--px) * 72); padding: 0 calc(var(--px) * 6); gap: calc(var(--px) * 1.5); overflow: hidden; }
.plank { height: calc(var(--px) * 5); background: linear-gradient(#e7bf9c 0 40%, #d9aa88 40%); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); position: relative; z-index: 1; }
.book {
  height: var(--h); width: calc(var(--px) * 26); flex: none; border: 0; padding: calc(var(--px) * 5) 0; position: relative;
  background: linear-gradient(90deg, rgba(255, 255, 255, .45) 0 12%, transparent 12% 82%, rgba(74, 51, 85, .18) 82%), var(--c);
  box-shadow: 0 0 0 max(2px, var(--px)) var(--ol);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  transition: transform .12s steps(2);
}
.book--deco { width: calc(var(--px) * var(--w)); padding: 0; opacity: .85; }
.spine-band { position: absolute; left: 0; right: 0; top: 12%; height: calc(var(--px) * 3); background: var(--yel2); box-shadow: 0 max(1px, calc(var(--px) * .5)) 0 var(--ol), 0 calc(max(1px, calc(var(--px) * .5)) * -1) 0 var(--ol); }
.spine-title { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-title); font-size: max(8px, calc(var(--px) * 3.6)); color: var(--ol); background: var(--c2); padding: calc(var(--px) * 3) calc(var(--px) * 1.5); margin-top: calc(var(--px) * 8); max-height: 70%; overflow: hidden; box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) var(--ol); }
.spine-year { font-size: .72em; font-weight: 600; }
.book:not(.book--deco):hover, .book:not(.book--deco):focus-visible { transform: translateY(calc(var(--px) * -8)); outline: none; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), 0 0 0 calc(var(--px) * 3) var(--yel); }
.lib-hint { max-width: 50%; margin: calc(var(--px) * 12) auto 0; padding: calc(var(--px) * 5) calc(var(--px) * 8); text-align: center; --inner: var(--lil3); }
.lib-hint .ico { width: calc(var(--px) * 7); height: calc(var(--px) * 7); margin-right: .3em; }

/* libro abierto */
.spread { display: grid; grid-template-columns: 1fr 1fr; max-width: 94%; margin: 0 auto; background: var(--c); padding: calc(var(--px) * 5); box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), calc(var(--px) * 4) calc(var(--px) * 5) 0 max(2px, var(--px)) rgba(74, 51, 85, .25); }
.page { background: var(--cream); padding: calc(var(--px) * 10); position: relative; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); min-height: calc(var(--px) * 120); }
.page-l { background: linear-gradient(90deg, var(--cream) 85%, var(--cream2)); }
.page-r { background: linear-gradient(90deg, var(--cream2), var(--cream) 15%); }
.page-l .media, .page-l .ph { box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); }
.page-turn { display: flex; justify-content: center; align-items: center; gap: calc(var(--px) * 4); margin-top: calc(var(--px) * 6); font-weight: 600; }
.subject { font-family: var(--f-title); font-size: max(7px, calc(var(--px) * 3.2)); color: var(--pink2); }
.page-r h3 { margin: .4em 0 .2em; }
.page-r dl { display: flex; gap: calc(var(--px) * 12); border-bottom: max(2px, var(--px)) dashed var(--lil2); padding-bottom: calc(var(--px) * 4); }
.page-r p { margin-top: calc(var(--px) * 6); }
.page-num { position: absolute; bottom: calc(var(--px) * 5); left: 0; right: 0; text-align: center; color: var(--ol2); font-weight: 600; }

/* ---------- BOSQUE ---------- */
.forest { position: relative; }
.petals { position: absolute; inset: calc(var(--px) * -40) 0 0; pointer-events: none; z-index: 0; overflow: hidden; }
.petals i {
  position: absolute; top: -5%; width: calc(var(--px) * 3); height: calc(var(--px) * 2); background: #ffc6dc;
  box-shadow: var(--px) var(--px) 0 #f59bbd;
  animation: fall var(--t) linear var(--d) infinite;
}
@keyframes fall { to { transform: translate(var(--x), 110vh) rotate(360deg); } }
.fireflies { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fireflies i {
  position: absolute; width: calc(var(--px) * 2); height: calc(var(--px) * 2); background: #fff6a8; border-radius: 50%;
  box-shadow: 0 0 calc(var(--px) * 4) calc(var(--px) * 1.5) rgba(255, 246, 168, .6);
  animation: drift var(--t) ease-in-out var(--d) infinite alternate, flicker 1.6s steps(2) var(--d) infinite;
}
@keyframes drift { to { transform: translate(calc(var(--px) * 18), calc(var(--px) * -14)); } }
@keyframes flicker { 50% { opacity: .2; } }
.forest-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--px) * 6); margin: calc(var(--px) * 2) 0 calc(var(--px) * 10); position: relative; }
.forest-head h2 { font-size: max(15px, calc(var(--px) * 9)); color: #ffffff; letter-spacing: calc(var(--px) * 2); text-shadow: var(--px) 0 #3f9b77, calc(var(--px) * -1) 0 #3f9b77, 0 var(--px) #3f9b77, 0 calc(var(--px) * -1) #3f9b77, 0 calc(var(--px) * 2.5) #2f7a5c; }
.forest-head p { flex-basis: 100%; text-align: center; margin: 0; color: #2f6b52; font-weight: 600; text-shadow: 0 var(--px) rgba(255,255,255,.8); }
.leaf-rule { width: calc(var(--px) * 30); height: max(2px, var(--px)); background: linear-gradient(90deg, transparent, #3f9b77 30%, #3f9b77 70%, transparent); position: relative; }
.leaf-rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--px) * 5); height: calc(var(--px) * 3); margin: calc(var(--px) * -1.5) 0 0 calc(var(--px) * -2.5); background: #9fe0a8; border-radius: 50% 0; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--px) * 14) calc(var(--px) * 16); max-width: 70%; margin: 0 auto; padding-bottom: calc(var(--px) * 10); position: relative; }
.note {
  position: relative; border: 0; padding: calc(var(--px) * 5) calc(var(--px) * 5) calc(var(--px) * 6); text-align: left; color: #3d3a2e;
  background: linear-gradient(#fffdf3, #f8f1dc); transform: rotate(var(--r));
  box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) #c9b98f, calc(var(--px) * 2) calc(var(--px) * 3) 0 rgba(30, 50, 40, .25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.note:hover, .note:focus-visible { outline: none; transform: rotate(0) translateY(calc(var(--px) * -3)); box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) #c9b98f, calc(var(--px) * 3) calc(var(--px) * 6) 0 rgba(30, 50, 40, .22), 0 0 calc(var(--px) * 16) rgba(255, 246, 200, .55); }
.note-tape { position: absolute; top: calc(var(--px) * -4); left: 50%; width: calc(var(--px) * 22); height: calc(var(--px) * 7); margin-left: calc(var(--px) * -11); background: rgba(190, 230, 200, .8); transform: rotate(-3deg); }
.note .find-media { box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) #c9b98f; }
.note-body { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--px) * 4); align-items: center; margin-top: calc(var(--px) * 4); }
.note-ico { grid-row: span 2; width: calc(var(--px) * 11); height: calc(var(--px) * 11); display: grid; place-items: center; background: #e6f4e0; border-radius: 50%; box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) #9fc49a; }
.note-ico .ico { width: calc(var(--px) * 6); height: calc(var(--px) * 6); }
.note strong { line-height: 1.15; }
.note small { color: #6f8a66; font-weight: 600; font-size: .82em; }
.room--bosque .glow { --inner: #e6f4e0; }
.critter { position: absolute; right: calc(var(--px) * 14); bottom: calc(var(--px) * 10); background: none; border: 0; padding: 0; z-index: 2; }
.critter img { width: calc(var(--px) * 28); height: calc(var(--px) * 20); image-rendering: pixelated; display: block; }
.critter:hover img { animation: bob .4s steps(2) infinite; }
.critter.hop img { animation: hop .4s steps(4); }
@keyframes hop { 50% { transform: translateY(calc(var(--px) * -8)); } }
.bubble { position: absolute; right: 60%; bottom: 105%; white-space: nowrap; background: #fff; color: var(--ol); padding: .4em .7em; font-weight: 600; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol), calc(var(--px) * 2) calc(var(--px) * 2) 0 max(2px, var(--px)) rgba(0,0,0,.15); animation: pop2 .2s steps(3); }
@keyframes pop2 { from { transform: scale(.5); } }
.find-media { display: block; }
/* biblioteca: muñequitos y mangas en los estantes */
.trinket { align-self: flex-end; width: auto; height: calc(var(--px) * 22); image-rendering: pixelated; margin: 0 calc(var(--px) * 2); flex: none; filter: drop-shadow(var(--px) 0 0 rgba(0,0,0,.15)); }
.manga-stack { align-self: flex-end; display: flex; flex-direction: column-reverse; align-items: center; flex: none; margin: 0 calc(var(--px) * 2); }
.manga-stack i { display: block; width: calc(var(--px) * 20); height: calc(var(--px) * 4); background: var(--c); box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) var(--ol); margin-top: max(1px, calc(var(--px) * .5)); }
.manga-stack i:nth-child(2) { transform: translateX(calc(var(--px) * 1)); } .manga-stack i:nth-child(3) { transform: translateX(calc(var(--px) * -1)); }
.manga-stack .trinket { height: calc(var(--px) * 14); margin-bottom: max(1px, calc(var(--px) * .5)); }
.find-ico { position: absolute; top: calc(var(--px) * -7); left: calc(var(--px) * -7); z-index: 1; width: calc(var(--px) * 15); height: calc(var(--px) * 15); display: grid; place-items: center; background: var(--lil3); border-radius: 50%; box-shadow: 0 0 0 max(2px, var(--px)) var(--ol); }
.find-ico .ico { width: calc(var(--px) * 8); height: calc(var(--px) * 8); }
.find-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(var(--px) * 12); align-items: start; }
.find-stage .gallery-main { background: var(--cream); }
.find-stage .thumb { background: var(--cream); }
.glow { padding: calc(var(--px) * 12) calc(var(--px) * 10) calc(var(--px) * 10); --box-bg: var(--cream); --inner: var(--mint3); }
.glow::after { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: 0 0 calc(var(--px) * 24) rgba(189, 240, 216, .5); }
.find-ico.big { top: calc(var(--px) * -9); left: auto; right: calc(var(--px) * 8); width: calc(var(--px) * 18); height: calc(var(--px) * 18); }
.glow small { font-weight: 600; color: var(--ol2); }
.glow h3 { margin: .2em 0 .5em; }
.glow p { margin: 0; }

/* ---------- CABINA (pantalla digital) ---------- */
.booth-room { display: grid; place-items: center; min-height: calc(var(--px) * 300); padding-top: calc(var(--px) * 4); }
.device {
  width: 90%; font-size: 1.12em; padding: calc(var(--px) * 7); background: linear-gradient(#ffc4dc, #f7a8c9);
  border-radius: calc(var(--px) * 12);
  box-shadow: 0 0 0 max(2px, var(--px)) #9c3a66, inset 0 calc(var(--px) * 2) 0 #ffe3ef, inset 0 calc(var(--px) * -3) 0 #e088b0, calc(var(--px) * 4) calc(var(--px) * 6) 0 rgba(120, 50, 90, .2);
}
.device-screen {
  border-radius: calc(var(--px) * 6); overflow: hidden; color: #3d2f66;
  background: linear-gradient(160deg, #f3fff9, #e6ecff 60%, #f6e8ff);
  box-shadow: 0 0 0 max(2px, var(--px)) #9c3a66, inset 0 0 0 calc(var(--px) * 2) rgba(255, 255, 255, .7);
  background-image: repeating-linear-gradient(transparent 0 calc(var(--px) * 2), rgba(80, 60, 120, .035) calc(var(--px) * 2) calc(var(--px) * 3)), linear-gradient(160deg, #f3fff9, #e6ecff 60%, #f6e8ff);
}
.device-status { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--px) * 3) calc(var(--px) * 7); background: #3d2f66; color: #fff3c2; font-family: var(--f-title); font-size: max(8px, calc(var(--px) * 3.4)); }
.device-status .ico { width: calc(var(--px) * 5); height: calc(var(--px) * 5); margin-right: .3em; }
.device-signal { display: flex; align-items: flex-end; gap: calc(var(--px) * 1); height: calc(var(--px) * 5); }
.device-signal i { width: calc(var(--px) * 1.5); background: #9fe3cf; }
.device-signal i:nth-child(1) { height: 30%; } .device-signal i:nth-child(2) { height: 55%; } .device-signal i:nth-child(3) { height: 80%; } .device-signal i:nth-child(4) { height: 100%; }
.device-body { display: grid; grid-template-columns: 38% 1fr; gap: calc(var(--px) * 10); align-items: center; padding: calc(var(--px) * 18) calc(var(--px) * 16) calc(var(--px) * 20); }
.device-hero { text-align: center; }
.device-portrait { width: calc(var(--px) * 72); height: calc(var(--px) * 72); image-rendering: pixelated; border-radius: 50%; background: linear-gradient(#b9c9ff, #ffd6e8); box-shadow: 0 0 0 max(2px, var(--px)) #3d2f66, 0 0 0 calc(var(--px) * 3) #fff, 0 0 0 calc(var(--px) * 4) #f07fb2; }
.device-hero h2 { font-size: max(16px, calc(var(--px) * 11)); color: #f07fb2; margin: calc(var(--px) * 6) 0 calc(var(--px) * 3); text-shadow: 0 calc(var(--px) * 1) #3d2f66; letter-spacing: calc(var(--px) * .5); }
.device-hero .talk-text { margin: 0; font-size: 1em; font-weight: 600; min-height: 3.2em; }
.contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--px) * 5); }
.contacts li { display: flex; align-items: center; gap: calc(var(--px) * 3); }
.contact {
  flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--px) * 5);
  padding: calc(var(--px) * 5.5) calc(var(--px) * 7); color: #3d2f66; text-decoration: none; background: #fff; border-radius: calc(var(--px) * 5);
  box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) #c9b6ec, 0 calc(var(--px) * 1.5) 0 #d9c9f7;
  transition: transform .1s steps(2);
}
.contact:hover, .contact:focus-visible { outline: none; background: #fff3f8; transform: translateX(calc(var(--px) * 2)); box-shadow: 0 0 0 max(1px, calc(var(--px) * .5)) #f07fb2, 0 calc(var(--px) * 1.5) 0 #f7b3cc; }
.c-ico { display: grid; place-items: center; width: calc(var(--px) * 17); height: calc(var(--px) * 17); background: var(--c); border-radius: calc(var(--px) * 4); }
.c-ico .ico { width: calc(var(--px) * 8); height: calc(var(--px) * 8); }
.c-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.c-label { font-family: var(--f-title); font-size: max(7px, calc(var(--px) * 3.2)); color: #b8577f; }
.c-val { font-weight: 600; font-size: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-go { color: #f07fb2; opacity: 0; }
.contact:hover .c-go, .contact:focus-visible .c-go { opacity: 1; animation: nudge .5s steps(2) infinite; }
.btn-copy { font-size: max(7px, calc(var(--px) * 3)) !important; padding: .6em .6em; }
.links { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 4); margin: calc(var(--px) * 5) 0 0; }
.links a { color: var(--ol); font-weight: 600; }
.credits { margin: 0; padding-left: 1.1em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- modo noche en la página ---------- */
html.is-night body { background-color: #3a3170; background-image: radial-gradient(#fff6c8 1.4px, transparent 1.7px), radial-gradient(#b9a6ef 1.2px, transparent 1.5px), linear-gradient(#2f2766, #4b3b82); }
html.is-night .tagline, html.is-night .hints { color: #e6dcff; }
html.is-night .screen { box-shadow: 0 0 0 4px #fff, 0 0 0 9px #7d66c8, 0 0 0 11px #fff, 0 0 0 15px #5a47a8, 0 0 0 17px #2a2045, 0 0 40px 20px rgba(255, 230, 170, .12); }
body { transition: background-color .8s; }