:root { --ink: #ffffff; --muted: rgba(255, 255, 255, 0.7); --glass: transparent; --glass-edge: rgba(255, 255, 255, 0.18); --theme: #0798c4; --safe-t: max(12px, env(safe-area-inset-top, 0px)); --safe-r: max(16px, env(safe-area-inset-right, 0px)); --safe-b: max(12px, env(safe-area-inset-bottom, 0px)); --safe-l: max(16px, env(safe-area-inset-left, 0px)); --hud-top: max(72px, calc(var(--safe-t) + 52px)); --hud-bottom: max(120px, calc(var(--safe-b) + 108px)); --wordmark-size: clamp(4.5rem, 19vw, 7.75rem); --wordmark-lh: 0.86; --wordmark-prefix: 0.5; --wordmark-height: calc( var(--wordmark-size) * (var(--wordmark-prefix) * var(--wordmark-lh) + var(--wordmark-lh)) ); --type: 16px; --type-sm: 14px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; min-height: 100dvh; min-height: 100lvh; min-height: 100vh; min-height: -webkit-fill-available; overflow-x: hidden; background-color: var(--theme); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { position: relative; overflow: hidden; color: var(--ink); font-family: Figtree, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.35; background-color: var(--theme); } body[data-room="colmado"] { --theme: #0798c4; } body[data-room="secador"] { --theme: #bf471a; } body[data-room="orocovis"] { --theme: #6b4f2a; } body[data-room="abuela"], body[data-room="tierra"], body[data-room="raices"], body[data-room="campo"] { --theme: #6b4f2a; } body[data-room="barberia"] { --theme: #c42818; } body[data-room="limpieza"] { --theme: #0a7382; } body[data-room="galeria"] { --theme: #1f7045; } body[data-room="malecon"] { --theme: #0e5f96; } body[data-room="colmado"][data-era="hoy"] { --theme: #0f295b; } body[data-room="secador"][data-era="hoy"] { --theme: #092d4a; } body[data-room="orocovis"][data-era="hoy"] { --theme: #24180c; } body[data-room="abuela"][data-era="hoy"], body[data-room="tierra"][data-era="hoy"], body[data-room="raices"][data-era="hoy"], body[data-room="campo"][data-era="hoy"] { --theme: #24180c; } body[data-room="barberia"][data-era="hoy"] { --theme: #8a1e12; } body[data-room="limpieza"][data-era="hoy"] { --theme: #1a3a40; } body[data-room="galeria"][data-era="hoy"] { --theme: #1e4e5a; } body[data-room="malecon"][data-era="hoy"] { --theme: #061e42; } img { display: block; max-width: 100%; } button, input, a { font: inherit; color: inherit; } a { text-decoration: none; } /* Photo stack is absolute so it cannot steal Safari 26's toolbar sample (a full-viewport position:fixed layer with a solid background-color beats , then Liquid Glass lenses the photo instead of the hex). */ .safari-shell { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; background-color: transparent; } /* Safari 26 reads background-color on a qualifying fixed/sticky strip. visibility:hidden is still sampled; opacity:0 / display:none / z-index:-1 are not. */ #theme-probe { position: fixed; top: 0; left: 0; width: 100%; height: 12px; min-height: 12px; z-index: 2147483646; pointer-events: none; visibility: hidden; background-color: var(--theme); } /* Phone / iOS 26 Safari: at scrollY=0 the chrome samples a solid root color (gold / white / black bars). After a non-zero scroll, it composites real photo pixels through Liquid Glass. Keep a short runway, bleed the plate past the visual viewport, lock scroll there. body { overflow: hidden } blocks that path. */ @media screen and (max-width: 650px), screen and (max-height: 500px) and (pointer: coarse) { :root { --safari-top-bleed: 62px; --safari-bottom-bleed: 136px; --safari-scroll-offset: 62px; --hud-top: max(56px, calc(var(--safe-t) + 44px)); --hud-bottom: max(112px, calc(var(--safe-b) + 100px)); } html { height: auto !important; min-height: calc(100dvh + var(--safari-scroll-offset) + var(--safari-bottom-bleed)) !important; overflow-x: auto !important; overflow-y: scroll !important; overscroll-behavior: none; padding: 0; } body { height: auto !important; min-height: calc(100dvh + var(--safari-scroll-offset) + var(--safari-bottom-bleed)) !important; overflow: visible !important; padding: 0; overscroll-behavior: none; } #theme-probe { display: none !important; } .safari-shell { position: relative; inset: auto; z-index: 2; width: 100%; height: 100dvh; min-height: 100dvh; margin: var(--safari-scroll-offset) 0 0; overflow: visible; background-color: transparent; transform: none; } .hero-stack { position: relative; inset: auto; width: 100%; height: calc(100dvh + var(--safari-top-bleed) + var(--safari-bottom-bleed)); min-height: calc(100dvh + var(--safari-top-bleed) + var(--safari-bottom-bleed)); margin-top: calc(-1 * var(--safari-top-bleed)); overflow: visible; background-color: transparent; transform: none; } .plate-img { display: block; width: 100%; height: calc(100dvh + var(--safari-top-bleed) + var(--safari-bottom-bleed)); object-fit: cover; object-position: 50% 50%; pointer-events: none; } .hero, .hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; overflow: hidden; background-color: transparent; transform: none; } /* Keep the dim gradient off the pixels Safari frosts in the status bar and bottom toolbar. The veil sitting in that strip is extra haze on Pro Max. */ .hero__veil { top: var(--safari-top-bleed); right: 0; bottom: var(--safari-bottom-bleed); left: 0; height: auto; background: linear-gradient( to bottom, transparent 0, transparent 28%, rgba(0, 0, 0, 0.18) 72%, transparent 100% ); } .hero { background-size: cover; background-position: 50% 50%; } .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; } #yt-host { left: 8px; top: 8px; bottom: auto; width: 160px; height: 90px; } .dock { left: 16px; right: 16px; width: auto; bottom: max(24px, var(--safe-b)); background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } @media (display-mode: standalone) { :root { --safari-top-bleed: 0px; --safari-bottom-bleed: 0px; --safari-scroll-offset: 0px; } html, body { height: 100%; min-height: 100dvh; overflow: hidden; padding: 0; } #theme-probe { display: none !important; } .safari-shell, .hero-stack { position: fixed; inset: 0; width: 100%; height: 100%; min-height: 100%; margin: 0; } } .hero-stack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; background-color: transparent; } .hero { position: absolute; inset: 0; background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position: center top; opacity: 0; transition: opacity 0.7s ease; } .hero.is-on { opacity: 1; } .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; pointer-events: none; } .plate-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; pointer-events: none; } .hero[data-scene="colmado"] { background-image: url("../assets/colmado.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="secador"] { background-image: url("../assets/salon.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="barberia"] { background-image: url("../assets/barberia.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="limpieza"] { background-image: url("../assets/limpieza.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="galeria"] { background-image: url("../assets/galeria.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="malecon"] { background-image: url("../assets/malecon.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="colmado-hoy"] { background-image: url("../assets/colmado-hoy.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="secador-hoy"] { background-image: url("../assets/salon-hoy.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="barberia-hoy"] { background-image: url("../assets/barberia-hoy.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="limpieza-hoy"] { background-image: url("../assets/limpieza-hoy.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="galeria-hoy"] { background-image: url("../assets/galeria-hoy.jpg?v=74"); background-position: 50% 0%; } .hero[data-scene="malecon-hoy"] { background-image: url("../assets/malecon-hoy.jpg?v=74"); background-position: 50% 0%; } .hero__veil { position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0, rgba(0, 0, 0, 0.1) 140px, transparent 32%, rgba(0, 0, 0, 0.38) calc(100% - 160px), transparent 100% ); pointer-events: none; } .wordmark { transition: opacity 0.35s ease; } #yt-host { position: fixed; left: 0; bottom: 0; width: 480px; height: 270px; overflow: hidden; opacity: 0.01; pointer-events: none; z-index: 0; } #yt-host iframe { width: 240px !important; height: 135px !important; } html[data-lite] .plate-img, html[data-lite] #hero-b { display: none !important; } html[data-lite] #yt-host, html[data-lite] #yt-host iframe { width: 160px !important; height: 90px !important; } html[data-lite] .wordmark { font-family: Georgia, "Times New Roman", serif; } .clock { position: fixed; z-index: 20; left: var(--safe-l); top: var(--safe-t); max-width: 16rem; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); line-height: 1.25; } .clock p { margin: 0; } .clock__hi { font-size: var(--type-sm); letter-spacing: 0.04em; text-transform: lowercase; color: #fff; } .clock__time { margin-top: 2px; font-size: var(--type); font-weight: 500; } .clock__date { margin-top: 4px; font-size: var(--type-sm); color: rgba(255, 255, 255, 0.6); } .presence { position: fixed; z-index: 20; left: 50%; top: var(--safe-t); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); } .presence__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #22e36a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 10px rgba(34, 227, 106, 1), 0 0 18px rgba(34, 227, 106, 0.65); } .presence__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22e36a; animation: ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; } body[data-era="hoy"] .presence__dot, body[data-era="hoy"] .presence__dot::after { background: #e8b45a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 10px rgba(232, 180, 90, 1), 0 0 18px rgba(232, 180, 90, 0.65); } .presence__n { font-variant-numeric: tabular-nums; } .presence__label { color: rgba(255, 255, 255, 0.7); } .links { position: fixed; z-index: 20; left: auto; right: var(--safe-r); top: var(--safe-t); width: max-content; height: auto; display: flex; align-items: center; gap: 4px; pointer-events: none; } .links a { pointer-events: auto; } .pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 8px 14px 8px 12px; border-radius: 999px; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5)); } .pill__label { white-space: nowrap; max-width: min(46vw, 16rem); overflow: hidden; text-overflow: ellipsis; } .pill:hover { opacity: 0.8; } .pill:active { transform: scale(0.95); } .pill__go { display: inline-flex; opacity: 0.5; transform: rotate(-45deg); transition: opacity 0.15s ease; } .pill:hover .pill__go { opacity: 0.9; } .pill--icon { width: 28px; padding: 0; justify-content: center; } #lista-link { padding-right: 6px; } .center { position: fixed; z-index: 3; left: 0; right: 0; top: var(--hud-top); bottom: var(--hud-bottom); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: clamp(2px, 2.4dvh, 22px) 24px 0; text-align: center; pointer-events: none; overflow: visible; } .center a { pointer-events: auto; } .wordmark { margin: 0; width: min(36rem, calc(100% - 48px)); min-width: 0; line-height: 0; overflow: visible; } .wordmark svg { display: block; width: 100%; height: auto; overflow: visible; color: #fff; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.5)); } .wordmark text { fill: #fff; fill-opacity: 1; stroke: none; font-family: Fraunces, "Times New Roman", serif; font-optical-sizing: none; } .wordmark__pre { font-size: 90px; font-weight: 500; letter-spacing: 0.04em; font-variation-settings: "opsz" 144, "wght" 500; } .wordmark__name { font-size: 180px; font-weight: 600; letter-spacing: -0.03em; font-variation-settings: "opsz" 144, "wght" 600; } /* Sized for the rooms currently shipped, not the full six. Centre with a real gap and let it wrap, so the row stays centred as rooms come back. */ .rooms { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(8px, 1.6vw, 24px); margin-top: 18px; width: 100%; max-width: 46rem; } .rooms a { flex: 0 0 auto; white-space: nowrap; min-height: 40px; padding: 8px 7px; font-size: clamp(0.62rem, 1.45vw, 0.84rem); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); } .rooms a:hover, .rooms a.is-on { color: #fff; } .rooms a.is-on { box-shadow: inset 0 -2px 0 #fff; } .eras { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; } .eras a { min-height: 32px; padding: 6px 4px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); } .eras a:hover, .eras a.is-on { color: #fff; } .eras a.is-on { box-shadow: inset 0 -2px 0 #fff; } body[data-era="hoy"] .eras a.is-on { color: #f6e2b8; box-shadow: inset 0 -2px 0 #f3d5a0; } body[data-room="colmado"] .rooms a, body[data-room="orocovis"] .rooms a, body[data-room="abuela"] .rooms a, body[data-room="tierra"] .rooms a, body[data-room="raices"] .rooms a, body[data-room="campo"] .rooms a, body[data-room="secador"] .rooms a, body[data-room="barberia"] .rooms a, body[data-room="limpieza"] .rooms a { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); } body[data-room="colmado"] .eras a, body[data-room="orocovis"] .eras a, body[data-room="abuela"] .eras a, body[data-room="tierra"] .eras a, body[data-room="raices"] .eras a, body[data-room="campo"] .eras a, body[data-room="secador"] .eras a, body[data-room="barberia"] .eras a, body[data-room="limpieza"] .eras a { color: rgba(255, 255, 255, 0.72); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); } body[data-room="colmado"] .rooms a:hover, body[data-room="colmado"] .rooms a.is-on, body[data-room="secador"] .rooms a:hover, body[data-room="secador"] .rooms a.is-on, body[data-room="barberia"] .rooms a:hover, body[data-room="barberia"] .rooms a.is-on, body[data-room="limpieza"] .rooms a:hover, body[data-room="limpieza"] .rooms a.is-on, body[data-room="colmado"] .eras a:hover, body[data-room="colmado"] .eras a.is-on, body[data-room="secador"] .eras a:hover, body[data-room="secador"] .eras a.is-on, body[data-room="barberia"] .eras a:hover, body[data-room="barberia"] .eras a.is-on, body[data-room="limpieza"] .eras a:hover, body[data-room="limpieza"] .eras a.is-on { color: #fff; } body[data-room="colmado"] .rooms a.is-on, body[data-room="secador"] .rooms a.is-on, body[data-room="barberia"] .rooms a.is-on, body[data-room="limpieza"] .rooms a.is-on, body[data-room="colmado"] .eras a.is-on, body[data-room="secador"] .eras a.is-on, body[data-room="barberia"] .eras a.is-on, body[data-room="limpieza"] .eras a.is-on { font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); } body[data-era="hoy"][data-room="colmado"] .eras a.is-on, body[data-era="hoy"][data-room="secador"] .eras a.is-on, body[data-era="hoy"][data-room="barberia"] .eras a.is-on, body[data-era="hoy"][data-room="limpieza"] .eras a.is-on { color: #f6e2b8; } .dock { position: fixed; z-index: 20; left: 0; right: 0; bottom: max(16px, var(--safe-b)); display: flex; flex-direction: column; align-items: center; padding: 0 max(16px, var(--safe-r)) 0 max(16px, var(--safe-l)); } .player { position: relative; isolation: isolate; overflow: visible; display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; width: 100%; max-width: 36rem; min-width: 0; box-sizing: border-box; padding: 12px 20px 12px 12px; border-radius: 999px; background: linear-gradient( 165deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0.05) 100% ); border: 1px solid var(--glass-edge); backdrop-filter: blur(42px) saturate(1.85); -webkit-backdrop-filter: blur(42px) saturate(1.85); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.06); } .vinyl { position: relative; width: 80px; height: 80px; flex: none; overflow: hidden; border-radius: 50%; } .cover { width: 80px; height: 80px; object-fit: cover; object-position: center; border-radius: 50%; } .vinyl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); pointer-events: none; } body.is-playing .cover { animation: spin 8s linear infinite; } .meta { flex: 1 1 0%; width: 0; min-width: 0; max-width: 100%; overflow: hidden; } .station { margin: 0 0 1px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .title { margin: 0; display: block; max-width: 100%; font-size: var(--type); font-weight: 500; line-height: 1.25; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } a.title:hover { text-decoration: underline; text-underline-offset: 3px; } .artist { margin: 0; font-size: var(--type-sm); line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .seek-wrap { position: relative; margin-top: 6px; min-width: 0; height: 26px; } .seek { appearance: none; position: absolute; left: 0; right: 0; top: 0; width: 100%; min-width: 0; height: 8px; margin: 0; background: transparent; cursor: pointer; } .seek:disabled { cursor: default; opacity: 0.55; } .seek::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); } .seek::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } .seek::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); } .seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; } .times { position: absolute; left: 0; right: 0; top: 10px; margin: 0; font-size: var(--type-sm); line-height: 1.2; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6); text-align: left; } .controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; flex: 0 0 auto; width: max-content; margin-left: auto; } .icon-btn, .play { appearance: none; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; } .icon-btn { width: 36px; height: 36px; border-radius: 50%; color: rgba(255, 255, 255, 0.8); } .icon-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } .icon-btn.is-on { color: #fff; background: rgba(255, 255, 255, 0.22); } .play { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #111; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); } .play:hover { transform: scale(1.05); } body.is-playing .play .ico-play, body:not(.is-playing) .play .ico-pause { display: none; } body.is-muted .ico-vol, body:not(.is-muted) .ico-muted { display: none; } .vol { position: relative; flex: none; display: grid; place-items: center; } .vol.is-open #btn-volume { color: #fff; background: rgba(255, 255, 255, 0.22); } .vol-pop { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 40; width: 44px; height: 132px; margin-left: -22px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: linear-gradient( 165deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0.05) 100% ); border: 1px solid var(--glass-edge); backdrop-filter: blur(42px) saturate(1.85); -webkit-backdrop-filter: blur(42px) saturate(1.85); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.06); } .vol-pop[hidden] { display: none; } .vol-rail { position: relative; width: 28px; height: 100px; cursor: ns-resize; touch-action: none; } .vol-rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 99px; background: rgba(255, 255, 255, 0.22); pointer-events: none; } .vol-fill { position: absolute; left: 50%; bottom: 0; width: 4px; height: var(--vol, 100%); margin-left: -2px; border-radius: 99px; background: #fff; pointer-events: none; } .vol-knob { position: absolute; left: 50%; bottom: var(--vol, 100%); width: 14px; height: 14px; margin: 0 0 -7px -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); pointer-events: none; } :focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .noscript { position: fixed; bottom: 8rem; left: 20px; right: 20px; z-index: 30; margin: 0; padding: 10px 12px; background: #111; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } } .dbg { position: fixed; z-index: 40; left: var(--safe-l); bottom: calc(8vh + 7.5rem); width: min(22rem, calc(100vw - 2 * var(--safe-l))); max-height: 36vh; overflow: hidden; display: flex; flex-direction: column; border-radius: 12px; background: rgba(8, 10, 12, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: rgba(255, 255, 255, 0.88); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; line-height: 1.35; } .dbg[hidden] { display: none !important; } .dbg__bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 4px 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .dbg__x { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; width: 28px; height: 28px; font-size: 16px; } .dbg__body { margin: 0; padding: 0 10px 10px; overflow: auto; white-space: pre-wrap; word-break: break-word; } @media (max-width: 640px) { .pill__label, .pill__go { display: none; } #lista-link { width: 28px; padding: 0; justify-content: center; } .center { padding-left: 16px; padding-right: 16px; } .wordmark { width: min(36rem, calc(100% - 32px)); } :root { --wordmark-size: clamp(3.15rem, 15vw, 5.25rem); --hud-top: max(58px, calc(var(--safe-t) + 40px)); --hud-bottom: max(108px, calc(var(--safe-b) + 92px)); } .rooms { gap: clamp(10px, 5vw, 28px); max-width: none; justify-content: center; } .rooms a { padding: 8px 2px; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.4); } .vinyl, .cover { width: 64px; height: 64px; } .player { padding: 10px 14px 10px 10px; gap: 12px; } .icon-btn { width: 32px; height: 32px; } .play { width: 40px; height: 40px; } } @media (max-width: 360px) { .rooms a { padding: 8px 1px; letter-spacing: 0.01em; font-size: 0.56rem; } } @media (max-height: 520px) { :root { --hud-top: max(36px, calc(var(--safe-t) + 18px)); --hud-bottom: max(88px, calc(var(--safe-b) + 80px)); --wordmark-size: clamp(2.4rem, 12vh, 4.5rem); } .clock__hi, .clock__date { display: none; } .presence__label { display: none; } .vinyl, .cover { width: 56px; height: 56px; } .player { padding: 8px 12px 8px 8px; gap: 10px; } .center { padding-top: 0; } .wordmark { width: min(20rem, 52vw); } .rooms { margin-top: 6px; } .eras { margin-top: 2px; } } @media (prefers-reduced-motion: reduce) { .cover, .presence__dot::after { animation: none !important; } } @media (pointer: coarse) and (orientation: portrait) and (max-width: 480px) { .hero { background-size: cover; background-position: 50% 50%; transform: none; } .hero[data-scene="colmado"], .hero[data-scene="colmado-hoy"] { background-position: 50% 55%; } .hero[data-scene="secador"], .hero[data-scene="secador-hoy"] { background-position: 50% 48%; } .hero[data-scene="barberia"], .hero[data-scene="barberia-hoy"] { background-position: 50% 52%; } .hero[data-scene="limpieza"], .hero[data-scene="limpieza-hoy"] { background-position: 42% 50%; } .hero[data-scene="galeria"], .hero[data-scene="galeria-hoy"] { background-position: 50% 48%; } .hero[data-scene="malecon"], .hero[data-scene="malecon-hoy"] { background-position: 48% 50%; } .hero[data-scene="colmado"] .hero__photo, .hero[data-scene="colmado-hoy"] .hero__photo { object-position: 50% 55%; } .hero[data-scene="secador"] .hero__photo, .hero[data-scene="secador-hoy"] .hero__photo { object-position: 50% 48%; } .hero[data-scene="barberia"] .hero__photo, .hero[data-scene="barberia-hoy"] .hero__photo { object-position: 50% 52%; } .hero[data-scene="limpieza"] .hero__photo, .hero[data-scene="limpieza-hoy"] .hero__photo { object-position: 42% 50%; } .hero[data-scene="galeria"] .hero__photo, .hero[data-scene="galeria-hoy"] .hero__photo { object-position: 50% 48%; } .hero[data-scene="malecon"] .hero__photo, .hero[data-scene="malecon-hoy"] .hero__photo { object-position: 48% 50%; } } /* Last so later unscoped .hero-stack / .plate-img rules cannot collapse the phone bleed. Theme hex on html/body is what Safari frosts into the top/bottom glow (Barbería de noche #8a1e12). */ @media screen and (max-width: 650px), screen and (max-height: 500px) and (pointer: coarse) { html, body { background-color: #000 !important; background-image: none !important; height: auto !important; min-height: calc(100dvh + var(--safari-scroll-offset) + var(--safari-bottom-bleed)) !important; overflow-x: hidden !important; overflow-y: scroll !important; } .safari-shell { position: relative !important; inset: auto !important; z-index: 2; width: 100%; height: 100dvh !important; min-height: 100dvh !important; margin: var(--safari-scroll-offset) 0 0 !important; overflow: visible !important; background-color: #000 !important; } .hero-stack { position: relative !important; inset: auto !important; width: 100% !important; height: calc(100dvh + var(--safari-top-bleed) + var(--safari-bottom-bleed)) !important; min-height: calc(100dvh + var(--safari-top-bleed) + var(--safari-bottom-bleed)) !important; margin-top: calc(-1 * var(--safari-top-bleed)) !important; overflow: visible !important; background-color: #000 !important; } .plate-img { display: block !important; width: 100% !important; height: calc(100dvh + var(--safari-top-bleed) + var(--safari-bottom-bleed)) !important; object-fit: cover !important; object-position: var(--plate-focus, 50% 50%) !important; } .hero, .hero[data-scene], .hero[data-scene="barberia"], .hero[data-scene="barberia-hoy"] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-color: transparent !important; background-size: cover !important; background-position: 50% 50% !important; transform: none !important; } .hero__photo { object-fit: cover !important; object-position: var(--plate-focus, 50% 50%) !important; } .hero__veil { top: var(--safari-top-bleed) !important; right: 0 !important; bottom: var(--safari-bottom-bleed) !important; left: 0 !important; height: auto !important; background: linear-gradient( to bottom, transparent 0, transparent 28%, rgba(0, 0, 0, 0.18) 72%, transparent 100% ) !important; } } /* Focal crop for the plate stack. --plate-focus is set per scene by player.js (phones crop the width hard, so the crop is centred on the subject rather than the geometric middle). Declared last so it wins over the phone block. */ .plate-img, .hero__photo { object-position: var(--plate-focus, 50% 50%); }