/* ============ DANNYSFILMS — universo fotográfico ============ */
:root {
  --fondo: #050507; --plata: #E4E6EC; --humo: rgba(228, 230, 236, .62); --tenue: rgba(228, 230, 236, .45);
  --ambar: #E9B872; --ambar2: #B8843F; --cine: #7CC8E4; --linea: rgba(255, 255, 255, .13);
  --f-wide: 'Syncopate', 'Michroma', 'Orbitron', 'Helvetica Neue', Arial, sans-serif;
  --f-tit: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --f-ser: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --vw: 176px;
  --seg-top: env(safe-area-inset-top, 0px); --seg-bot: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--plata); font-family: var(--f-tit); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img { max-width: 100%; }

#cielo { position: fixed; inset: 0; z-index: 0; display: block; }
/* grano de película + viñeta */
#grano { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen; }
#grano::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55) 100%); mix-blend-mode: normal; }
#universo { position: fixed; inset: 0; z-index: 1; perspective: 1100px; overflow: hidden; user-select: none; -webkit-user-select: none; }

/* ---------- Ventanas flotantes ---------- */
.ventana { position: absolute; left: 0; top: 0; width: var(--vw); padding: 0; border: 0; background: none; text-align: center;
  will-change: transform, opacity; transform-origin: center; touch-action: none; }
.ventana.lejos { filter: saturate(.6) brightness(.7); }
.ventana .marco { display: block; position: relative; border-radius: 6px; overflow: hidden; background: #111217;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 22px 50px rgba(0, 0, 0, .65), 0 0 40px rgba(124, 200, 228, .10);
  transition: box-shadow .3s, border-color .3s, transform .3s; }
.ventana .marco::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, transparent 32%, transparent 70%, rgba(233, 184, 114, .08) 100%); }
.ventana .marco img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .6s; }
.ventana .marco .vacia { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-wide); font-size: 9px; letter-spacing: .3em; color: var(--tenue); text-transform: uppercase; }
.ventana:hover .marco, .ventana:focus-visible .marco { border-color: rgba(233, 184, 114, .8); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 26px 60px rgba(0, 0, 0, .7), 0 0 50px rgba(233, 184, 114, .28); }
.ventana:hover .marco img { transform: scale(1.06); }
.ventana:focus-visible { outline: none; }
.ventana.pulsada .marco { transform: scale(1.06); box-shadow: 0 0 70px rgba(233, 184, 114, .5); }

/* ventana de una foto: retrato, con el nombre chico abajo */
.ventana.foto .marco { aspect-ratio: 4 / 5; }
.ventana .nombre { display: block; margin-top: 9px; font-family: var(--f-wide); font-weight: 400; font-size: 8.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--humo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }

/* Galería Expo: ventana grande, etiqueta arriba y título abajo */
.ventana.expo { width: calc(var(--vw) * 2.15); }
.ventana.expo .etiqueta { display: block; margin-bottom: 9px; font-family: var(--f-wide); font-size: 8.5px; letter-spacing: .4em; text-transform: uppercase; color: var(--ambar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 14px rgba(233, 184, 114, .5); }
.ventana.expo .etiqueta::before, .ventana.expo .etiqueta::after { content: ''; display: inline-block; width: 18px; height: 1px; background: currentColor; vertical-align: middle; margin: 0 10px; opacity: .7; }
.ventana.expo .marco { aspect-ratio: 16 / 10; border-radius: 8px; border-color: rgba(255, 255, 255, .28); }
.ventana.expo .marco .contador { position: absolute; top: 9px; right: 9px; z-index: 2; font-family: var(--f-wide); font-size: 8px; letter-spacing: .18em; padding: 5px 8px; border-radius: 3px; background: rgba(5, 5, 7, .7); border: 1px solid rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(4px); }
.ventana.expo .marco .tira { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; padding: 2px; background: rgba(5, 5, 7, .55); }
.ventana.expo .marco .tira i { flex: 1; aspect-ratio: 1; background-size: cover; background-position: center; opacity: .9; }
.ventana.expo .titulo { display: block; margin-top: 10px; font-family: var(--f-tit); font-weight: 300; font-size: 15.5px; letter-spacing: .06em; color: #fff; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
@media (max-width: 700px) { .ventana.expo { width: calc(var(--vw) * 1.7); } .ventana.expo .titulo { font-size: 13.5px; } }

/* ---------- HUD ---------- */
.hud-top { position: fixed; z-index: 20; left: 0; right: 0; top: 0; padding: calc(12px + var(--seg-top)) 16px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.marca { display: flex; align-items: center; gap: 11px; border: 0; background: none; padding: 6px 4px; text-align: left; }
.marca-ojo { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(228, 230, 236, .8); position: relative; flex: none;
  background: radial-gradient(circle at 50% 50%, #FFF1D6 0, var(--ambar) 22%, rgba(233, 184, 114, 0) 42%), conic-gradient(from 20deg, #2a2c33, #8a8e99, #2a2c33, #8a8e99, #2a2c33); box-shadow: 0 0 18px rgba(233, 184, 114, .35); }
.marca-txt { display: flex; flex-direction: column; gap: 2px; }
.marca-txt b { font-family: var(--f-wide); font-weight: 700; font-size: 12.5px; letter-spacing: .28em; color: #fff; }
.marca-txt small { font-family: var(--f-tit); font-weight: 300; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); }
.hud-edit { display: flex; align-items: center; gap: 8px; background: rgba(5, 5, 7, .6); border: 1px solid rgba(233, 184, 114, .5); border-radius: 99px; padding: 8px 13px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ambar); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hud-edit i { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 10px var(--ambar); animation: late 1.6s infinite; }
@keyframes late { 50% { opacity: .35; } }
.hud-bottom { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 0 12px calc(14px + var(--seg-bot)); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.pista { margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); text-align: center; transition: opacity .6s; }
.hud-botones { display: flex; gap: 8px; pointer-events: auto; flex-wrap: wrap; justify-content: center; }
.hud-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(8, 9, 13, .68); font-weight: 400; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--plata); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hud-btn span { font-size: 15px; }
.hud-btn.principal { background: linear-gradient(135deg, #F6D9A6, var(--ambar) 50%, var(--ambar2)); color: #1a1204; border-color: transparent; box-shadow: 0 0 24px rgba(233, 184, 114, .4); font-weight: 500; }
body.abierto .hud-bottom, body.abierto .hud-top { opacity: 0; pointer-events: none; }
body.abierto .hud-bottom *, body.abierto .hud-top * { pointer-events: none; }

/* ---------- Intro ---------- */
#intro { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: radial-gradient(ellipse at center, rgba(20, 22, 30, .78), rgba(3, 3, 4, .97) 72%); transition: opacity 1s, transform 1s; }
#intro.fuera { opacity: 0; transform: scale(1.18); pointer-events: none; }
.intro-ojo { width: 120px; height: 120px; border-radius: 50%; position: relative; margin-bottom: 28px; border: 2px solid rgba(228, 230, 236, .5);
  background: radial-gradient(circle, #FFF3DA 0, #F0C27A 14%, rgba(233, 184, 114, .2) 30%, transparent 44%); box-shadow: 0 0 60px rgba(233, 184, 114, .3), inset 0 0 30px rgba(0, 0, 0, .8); animation: respira 3.4s ease-in-out infinite; }
.intro-ojo i { position: absolute; left: 50%; top: 50%; width: 46px; height: 92px; margin: -46px 0 0 -23px; border-radius: 40% 40% 50% 50%; background: linear-gradient(180deg, #D4D7DF, #55596A); transform-origin: 50% 50%; opacity: .85; clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); }
.intro-ojo i:nth-child(1) { transform: rotate(0deg) translateY(-30px); } .intro-ojo i:nth-child(2) { transform: rotate(60deg) translateY(-30px); } .intro-ojo i:nth-child(3) { transform: rotate(120deg) translateY(-30px); }
.intro-ojo i:nth-child(4) { transform: rotate(180deg) translateY(-30px); } .intro-ojo i:nth-child(5) { transform: rotate(240deg) translateY(-30px); } .intro-ojo i:nth-child(6) { transform: rotate(300deg) translateY(-30px); }
@keyframes respira { 50% { box-shadow: 0 0 90px rgba(124, 200, 228, .35), inset 0 0 30px rgba(0, 0, 0, .8); } }
#intro h1 { font-family: var(--f-wide); font-weight: 700; font-size: clamp(26px, 7vw, 54px); line-height: 1; margin: 0 0 14px; letter-spacing: .3em; padding-left: .3em; color: #fff; text-shadow: 0 0 30px rgba(255, 255, 255, .25); }
#intro h1 span { font-weight: 400; color: var(--ambar); }
#intro p { font-family: var(--f-ser); font-style: italic; font-size: 20px; color: var(--humo); margin: 0 0 30px; letter-spacing: .04em; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 26px; border-radius: 99px; border: 0; font-weight: 500; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  background: linear-gradient(135deg, #F6D9A6, var(--ambar) 50%, var(--ambar2)); color: #1d1405; box-shadow: 0 6px 24px rgba(233, 184, 114, .3); }
.btn:disabled { opacity: .5; }
.btn-sec { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 15px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--plata); backdrop-filter: blur(8px); }
.btn-sec:disabled { opacity: .4; }
.btn-sec.peligro { border-color: rgba(255, 110, 110, .4); color: #FF9C9C; }
.cerrar { position: absolute; top: calc(12px + var(--seg-top)); right: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(8, 9, 13, .6); font-size: 17px; color: #fff; backdrop-filter: blur(8px); }

/* ---------- Visor de una foto ---------- */
#visor { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(56px + var(--seg-top)) 16px calc(20px + var(--seg-bot)); background: rgba(3, 3, 5, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); touch-action: auto; }
.visor-fig { margin: 0; max-width: min(92vw, 720px); text-align: center; animation: aparece .5s cubic-bezier(.2, .9, .25, 1.05); }
.visor-fig img { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); max-width: 100%; border-radius: 4px; box-shadow: 0 40px 100px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .15); object-fit: contain; }
.visor-fig figcaption { margin-top: 18px; font-family: var(--f-wide); font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--humo); }
.visor-edit { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
@keyframes aparece { from { opacity: 0; transform: translateY(30px) scale(.94); } }

/* ---------- Galería Expo (panorama) ---------- */
#expo { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #050507; touch-action: auto; animation: aparece .45s cubic-bezier(.2, .9, .25, 1.05); }
#expo::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(233, 184, 114, .10), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(124, 200, 228, .08), transparent 50%); }
.expo-head { position: relative; flex: none; padding: calc(18px + var(--seg-top)) 70px 14px 22px; }
.expo-head small { display: block; font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--ambar); }
.expo-head h2 { margin: 6px 0 0; font-family: var(--f-tit); font-weight: 200; font-size: clamp(22px, 5vw, 38px); letter-spacing: .04em; line-height: 1.1; color: #fff; }
.expo-n { display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); }
.expo-edit { flex: none; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 22px 12px; }
.expo-progreso { font-size: 12px; letter-spacing: .1em; color: var(--ambar); }
.expo-panorama { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 14px calc(30px + var(--seg-bot)); column-count: 2; column-gap: 10px; }
@media (min-width: 700px) { .expo-panorama { column-count: 3; padding: 6px 22px 40px; column-gap: 14px; } }
@media (min-width: 1100px) { .expo-panorama { column-count: 4; } }
.expo-panorama .cuadro { display: block; width: 100%; padding: 0; border: 0; background: #0e0f14; margin: 0 0 10px; break-inside: avoid; border-radius: 4px; overflow: hidden; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); animation: aparece .5s both; }
.expo-panorama .cuadro img { display: block; width: 100%; height: auto; min-height: 60px; transition: transform .6s; }
.expo-panorama .cuadro:hover img { transform: scale(1.04); }
.expo-panorama .cuadro .num { position: absolute; left: 8px; bottom: 8px; font-family: var(--f-wide); font-size: 8px; letter-spacing: .2em; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 6px #000; }
.expo-panorama .cuadro.portada::after { content: 'PORTADA'; position: absolute; top: 8px; left: 8px; font-family: var(--f-wide); font-size: 7.5px; letter-spacing: .2em; padding: 4px 7px; border-radius: 3px; background: rgba(233, 184, 114, .9); color: #1a1204; }
.expo-vacia { column-span: all; text-align: center; padding: 60px 20px; font-family: var(--f-ser); font-style: italic; font-size: 20px; color: var(--tenue); }

/* ---------- Lupa (foto grande dentro de la galería) ---------- */
#lupa { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: rgba(2, 2, 3, .96); touch-action: pan-y; }
#lupa img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; animation: aparece .3s; }
.lupa-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(8, 9, 13, .55); font-size: 30px; line-height: 1; color: #fff; }
.lupa-nav.prev { left: 12px; } .lupa-nav.next { right: 12px; }
.lupa-pie { position: absolute; left: 0; right: 0; bottom: calc(16px + var(--seg-bot)); display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-family: var(--f-wide); font-size: 9px; letter-spacing: .3em; color: var(--humo); }
.lupa-edit { display: inline-flex; gap: 8px; }
@media (max-width: 700px) { .lupa-nav { width: 44px; height: 44px; font-size: 26px; opacity: .8; } }

/* ---------- Hojas (lista, acceso, formulario) ---------- */
#explorar, #acceso, #forma { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding: calc(10px + var(--seg-top)) 0 0; background: rgba(3, 3, 5, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); touch-action: auto; }
@media (min-width: 700px) { #explorar, #acceso, #forma { align-items: center; padding: 20px; } }
.hoja { width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; overflow: hidden;
  background: linear-gradient(180deg, #15161c, #0a0b0f); border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; box-shadow: 0 -20px 80px rgba(0, 0, 0, .7); animation: sube .4s cubic-bezier(.2, .9, .25, 1.05); }
@media (min-width: 700px) { .hoja { border-radius: 20px; border-bottom: 1px solid rgba(255, 255, 255, .14); } }
.hoja.chica { width: min(440px, 100%); }
@keyframes sube { from { opacity: 0; transform: translateY(60px); } }
.hoja-head { position: relative; padding: 20px 64px 14px 22px; border-bottom: 1px solid var(--linea); flex: none; }
.hoja-head small { font-family: var(--f-wide); font-size: 9px; letter-spacing: .4em; text-transform: uppercase; color: var(--ambar); }
.hoja-head h2 { margin: 5px 0 0; font-family: var(--f-tit); font-weight: 300; font-size: 22px; letter-spacing: .04em; }
.hoja-head .cerrar { top: 14px; right: 14px; width: 40px; height: 40px; }
.hoja-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 22px calc(26px + var(--seg-bot)); overscroll-behavior: contain; }
.hoja-sub { margin: 0 0 14px; color: var(--humo); font-size: 14.5px; font-weight: 300; }
.hoja form { display: flex; flex-direction: column; gap: 10px; }
.hoja input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); font-size: 16px; font-weight: 300; letter-spacing: .04em; outline: none; }
.hoja input:focus { border-color: var(--ambar); box-shadow: 0 0 0 3px rgba(233, 184, 114, .15); }
.hoja label { display: flex; flex-direction: column; gap: 6px; }
.hoja label span { font-family: var(--f-wide); font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--tenue); }
.hoja .btn { margin-top: 6px; }
.recado { margin: 12px 0 0; min-height: 1.2em; font-size: 13.5px; color: #FF9C9C; }
.recado.bien { color: #9FE1CB; }
.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.tipo { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); text-align: left; }
.tipo b { font-weight: 500; font-size: 14px; letter-spacing: .04em; } .tipo small { font-size: 11.5px; color: var(--tenue); font-weight: 300; }
.tipo.activo { border-color: var(--ambar); background: rgba(233, 184, 114, .1); box-shadow: 0 0 0 1px var(--ambar) inset; }

/* lista de explorar */
.lista { display: flex; flex-direction: column; gap: 6px; }
.lista button { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 8px; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, .03); text-align: left; }
.lista button:hover { border-color: rgba(255, 255, 255, .15); }
.lista .mini { width: 54px; height: 54px; border-radius: 6px; object-fit: cover; background: #15161c; }
.lista .lt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lista .lt small { font-family: var(--f-wide); font-size: 8px; letter-spacing: .3em; text-transform: uppercase; color: var(--ambar); }
.lista .lt b { font-weight: 300; font-size: 15px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista .ln { font-size: 11px; letter-spacing: .15em; color: var(--tenue); text-transform: uppercase; }
.lista .orden { display: flex; gap: 4px; }
.lista .orden button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); font-size: 13px; }
.lista .orden button:disabled { opacity: .3; }

#toast { position: fixed; z-index: 90; left: 50%; bottom: calc(96px + var(--seg-bot)); transform: translate(-50%, 20px); background: rgba(14, 15, 20, .96); border: 1px solid rgba(233, 184, 114, .45); color: #fff; padding: 12px 20px; border-radius: 99px; font-size: 13px; letter-spacing: .06em; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; max-width: calc(100% - 30px); text-align: center; }
#toast.ver { opacity: 1; transform: translate(-50%, 0); }
.trabajando { opacity: .55; pointer-events: none; }