/* ================= Publicidad TV · ATUSALUD ================= App web para Amazon Fire TV (navegador / Fully Kiosk). Lienzo fijo de 1920x1080 escalado para llenar la pantalla. */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; background: #000; overflow: hidden; font-family: "Segoe UI", "Roboto", system-ui, sans-serif; cursor: none; /* oculta el cursor en el TV */ } /* Lienzo 1920x1080 centrado y escalado por JS (--scale) */ #stage { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--scale, 1)); transform-origin: center center; background: #000; overflow: hidden; } /* ---- Fondo de video (boomerang en loop) ---- */ .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; will-change: opacity; transform: translateZ(0); /* fuerza capa GPU (Silk/TVs) */ backface-visibility: hidden; } .bg.activo { opacity: 1; } /* ---- Velo oscuro sobre el fondo ---- */ #velo { position: absolute; inset: 0; background: #000; opacity: .5; z-index: 5; pointer-events: none; } /* ---- Capa de contenido ---- */ #content { position: absolute; inset: 0; z-index: 10; pointer-events: none; } .slide { position: absolute; inset: 0; } .el { position: absolute; /* Resplandor abierto y disperso (ahora es real, no simulado) */ text-shadow: 0 0 90px rgba(0,0,0,.95), 0 0 60px rgba(0,0,0,.85), 0 0 36px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.6), 0 8px 40px rgba(0,0,0,.8); will-change: transform, opacity; } .el img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); } /* ---- Piezas de la segunda vía (fotos ya compuestas) ---- A sangre y sin sombra: la pieza YA viene diseñada, el player no la decora. `cover` sobre un lienzo 16:9 con archivos 16:9 no recorta nada; está para que un redondeo de un píxel no deje una franja del fondo asomando en el borde. */ img.medio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; } /* ---- MODO LITE (TVs y sticks de gama baja) ---- Se activa con (auto-detección o ?lite=1 en app.js). Quita lo que más cuesta en CPU/GPU débil: sombras multicapa, filters y el crossfade de videos (corte directo = un solo decoder a la vez). */ body.lite .el { text-shadow: 0 3px 12px rgba(0,0,0,.85); /* una sola sombra ligera */ } body.lite .el img { filter: none; } body.lite .bg { transition: none; } /* ---- Overlay de arranque (fallback autoplay) ---- */ #tap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; z-index: 100; font-size: 42px; letter-spacing: 2px; cursor: pointer; } #tap[hidden] { display: none; } /* ---- Botón único de sonido ---- Discreto por defecto (es cartelería: nadie debe verlo desde la mesa) y bien grande al enfocarlo, porque en un Fire TV se llega con el D-pad del control, no con el dedo. Vive FUERA de #stage: ahí lo escalaría el transform del lienzo y en una pantalla chica quedaría ilegible. */ #audio-btn { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 2px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 600 17px/1 system-ui, Segoe UI, Roboto, sans-serif; cursor: pointer; opacity: .35; backdrop-filter: blur(6px); transition: opacity .2s ease, transform .2s ease, border-color .2s ease, background .2s ease; } #audio-btn[hidden] { display: none; } #audio-btn:hover, #audio-btn:focus-visible { opacity: 1; outline: none; transform: scale(1.06); border-color: rgba(255,255,255,.85); background: rgba(0,0,0,.78); } /* Con el sonido activo se queda algo más visible: hay que poder notar de un vistazo que esta TV está sonando, sobre todo si hay varias en el local. */ #audio-btn[aria-pressed="true"] { opacity: .6; border-color: rgba(120,220,150,.6); } #audio-btn[aria-pressed="true"]:hover, #audio-btn[aria-pressed="true"]:focus-visible { opacity: 1; } /* El icono cambia de tachado a ondas según el estado */ #audio-btn .sonando { display: none; } #audio-btn[aria-pressed="true"] .mudo { display: none; } #audio-btn[aria-pressed="true"] .sonando { display: inline; } /* Aviso de que el navegador pide un toque para devolver el sonido tras recargar */ #audio-btn.pendiente { opacity: .9; border-color: rgba(245,166,35,.8); animation: latido 2.4s ease-in-out infinite; } /* El foco DEBE verse también en estado `pendiente`, y ahí más que nunca: es el único momento en que hay que encontrar el botón a propósito, y en una Fire TV se llega con el D-pad desde el otro lado del local. Antes `.pendiente` (misma especificidad, declarado después) pisaba al `:focus-visible` y la única señal de foco era un 6% de escala. */ #audio-btn.pendiente:focus-visible, #audio-btn.pendiente:hover { opacity: 1; border-color: #fff; box-shadow: 0 0 0 4px rgba(245,166,35,.55); animation: none; /* el latido distrae cuando ya lo tenés enfocado */ } @keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,.45); } 50% { box-shadow: 0 0 0 10px rgba(245,166,35,0); } } @media (prefers-reduced-motion: reduce) { #audio-btn, #audio-btn.pendiente { transition: none; animation: none; } }