/* Cartel de neón animado de "La Otra Mirada" (página /LOM).
   Todo queda dentro de .lom-neon: no toca estilos del resto del sitio.
   Imágenes en ../img/lom-neon/ (achicadas al tamaño en que se muestran). */
.lom-neon{--pared:#07030c;
  --pared-luz:#12051b;
  --neon-rosa:#ff2bd6;
  --neon-violeta:#8a3dff;
  --parpado-a:#841af6; --parpado-b:#9a13fa;
  --ojo-fondo:#0b0224;
  --texto-suave:#8f6fa8;
  --fuente-ui:"Space Mono", ui-monospace, Menlo, Consolas, monospace;}
.lom-neon{position:relative; display:block; width:min(100%,1100px); max-width:100%; aspect-ratio:1599/984;
  border:0; padding:0; background:none; cursor:pointer;
  container-type:inline-size; overflow-x:clip;                 
  -webkit-tap-highlight-color:transparent;}
.lom-neon:focus-visible{outline:2px solid var(--neon-rosa); outline-offset:6px; border-radius:12px}
.lom-neon .escena{position:absolute; inset:0; display:block; transform-origin:50% 56%;
  will-change:transform,opacity;}
.lom-neon .escena > span{position:absolute; inset:0; display:block; pointer-events:none}
.lom-neon .capa{position:absolute; display:block; background:center / 100% 100% no-repeat}
.lom-neon .g-l1{left:12.695%;top:13.618%;width:76.923%;height:44.817%;transform-origin:47.72% 89.80%;background-image:url("../img/lom-neon/tubo-l1.webp")}
.lom-neon .halos .g-l1{left:9.694%;top:8.740%;width:82.927%;height:54.573%;transform-origin:47.89% 82.68%;background-image:url("../img/lom-neon/halo-l1.webp")}
.lom-neon .g-l2{left:11.257%;top:44.106%;width:67.355%;height:39.939%;transform-origin:53.85% 100.76%;background-image:url("../img/lom-neon/tubo-l2.webp")}
.lom-neon .halos .g-l2{left:8.255%;top:39.228%;width:73.358%;height:49.695%;transform-origin:53.54% 90.80%;background-image:url("../img/lom-neon/halo-l2.webp")}
.lom-neon .g-a{left:75.922%;top:59.959%;width:13.759%;height:24.695%;transform-origin:-206.35% 98.77%;background-image:url("../img/lom-neon/tubo-a.webp")}
.lom-neon .halos .g-a{left:72.921%;top:55.081%;width:19.762%;height:34.451%;transform-origin:-128.49% 84.96%;background-image:url("../img/lom-neon/halo-a.webp")}
.lom-neon .g-w1{left:0.063%;top:37.805%;width:13.821%;height:26.016%;transform-origin:49.32% 46.09%;background-image:url("../img/lom-neon/tubo-w1.webp")}
.lom-neon .halos .g-w1{left:0.000%;top:32.927%;width:16.886%;height:35.772%;transform-origin:40.74% 47.16%;background-image:url("../img/lom-neon/halo-w1.webp")}
.lom-neon .g-w2{left:89.056%;top:38.720%;width:10.882%;height:25.102%;transform-origin:52.29% 46.15%;background-image:url("../img/lom-neon/tubo-w2.webp")}
.lom-neon .halos .g-w2{left:86.054%;top:33.841%;width:13.946%;height:34.858%;transform-origin:62.33% 47.23%;background-image:url("../img/lom-neon/halo-w2.webp")}
.lom-neon .g-e1{left:10.194%;top:28.963%;width:5.191%;height:8.841%;transform-origin:50.00% 50.01%;background-image:url("../img/lom-neon/tubo-e1.webp")}
.lom-neon .halos .g-e1{left:7.192%;top:24.085%;width:11.194%;height:18.598%;transform-origin:50.00% 50.00%;background-image:url("../img/lom-neon/halo-e1.webp")}
.lom-neon .g-e2{left:6.942%;top:60.366%;width:6.504%;height:10.772%;transform-origin:50.00% 50.00%;background-image:url("../img/lom-neon/tubo-e2.webp")}
.lom-neon .halos .g-e2{left:3.940%;top:55.488%;width:12.508%;height:20.528%;transform-origin:50.00% 50.00%;background-image:url("../img/lom-neon/halo-e2.webp")}
.lom-neon .g-e3{left:87.742%;top:61.484%;width:5.253%;height:9.553%;transform-origin:50.01% 50.00%;background-image:url("../img/lom-neon/tubo-e3.webp")}
.lom-neon .halos .g-e3{left:84.740%;top:56.606%;width:11.257%;height:19.309%;transform-origin:50.00% 50.00%;background-image:url("../img/lom-neon/halo-e3.webp")}
.lom-neon .g-e4{left:72.608%;top:12.093%;width:7.317%;height:14.329%;transform-origin:50.00% 50.00%;background-image:url("../img/lom-neon/tubo-e4.webp")}
.lom-neon .halos .g-e4{left:69.606%;top:7.215%;width:13.321%;height:24.085%;transform-origin:50.00% 50.00%;background-image:url("../img/lom-neon/halo-e4.webp")}
.lom-neon .escena > .ojo{transform-origin:49.41% 53.86%}
.lom-neon .halos .capa{opacity:.55}
.lom-neon .apagado .capa{filter:brightness(.15) saturate(.45)}
.lom-neon .escena > .resplandor{inset:-12% 0;
  background:radial-gradient(ellipse 48% 34% at 50% 47%, color-mix(in srgb, var(--neon-violeta) 30%, transparent), transparent 100%);}
.lom-neon .escena > .niebla{inset:-8% 0; overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);}
.lom-neon .niebla i{position:absolute; top:0; left:0; width:200%; height:100%;
  background:url("../img/lom-neon/niebla.webp") 0 0 / 50% 100% repeat-x;
  opacity:.2;}
.lom-neon .niebla i + i{top:-20%; height:140%; opacity:.14; transform:scaleY(-1)}
.lom-neon .mota{position:absolute; width:var(--s); height:var(--s); border-radius:50%;
  background:#ffe1f8; box-shadow:0 0 5px 1px rgba(255,90,220,.6);
  opacity:0; animation:lom-flota var(--d) linear var(--dl) infinite; will-change:transform,opacity;}
@keyframes lom-flota{0%{transform:translate3d(0,0,0); opacity:0}
  12%{opacity:var(--o)}
  55%{opacity:calc(var(--o) * .3)}
  80%{opacity:var(--o)}
  100%{transform:translate3d(var(--dx),var(--dy),0); opacity:0}}
.lom-neon .escena > .ojo, .lom-neon .apertura{clip-path:polygon(41.28% 37.20%, 42.46% 35.47%, 43.64% 34.17%, 44.83% 33.08%, 46.01% 32.21%, 47.19% 31.58%, 48.38% 31.21%, 49.56% 31.10%, 50.75% 31.25%, 51.93% 31.67%, 53.11% 32.34%, 54.30% 33.25%, 55.48% 34.38%, 56.66% 35.74%, 57.85% 37.50%, 56.66% 39.14%, 55.48% 40.38%, 54.30% 41.41%, 53.11% 42.24%, 51.93% 42.83%, 50.75% 43.19%, 49.56% 43.29%, 48.38% 43.14%, 47.19% 42.74%, 46.01% 42.11%, 44.83% 41.24%, 43.64% 40.16%, 42.46% 38.87%)}
.lom-neon .ojo > span, .lom-neon .guino > span, .lom-neon .apertura > span, .lom-neon .mirada > span, .lom-neon .pupila-pos > span{position:absolute; inset:0; display:block}
.lom-neon .ojo > .parpado{inset:30% 0 55% 0;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--parpado-a) 80%, #000) 0%, var(--parpado-a) 38%,
     var(--neon-rosa) 47%, #ffd0f2 49.5%, var(--neon-rosa) 52%, var(--parpado-b) 60%, color-mix(in srgb, var(--parpado-b) 70%, var(--neon-rosa)) 100%);}
.lom-neon .guino{transform-origin:49.7% 37.2%}
.lom-neon .apertura{background:
    radial-gradient(ellipse 7.5% 3.4% at 49.7% 44.2%, color-mix(in srgb, var(--neon-rosa) 42%, transparent), transparent 100%),
    radial-gradient(ellipse 9.5% 7.5% at 49.7% 36.6%, #24096a 0%, #12043c 45%, var(--ojo-fondo) 100%);
  transform-origin:49.7% 37.2%;}
.lom-neon .aura{background:
    radial-gradient(ellipse 4.3% 7% at 49.72% 37.6%, transparent 68%, rgba(255,255,255,.45) 74%, color-mix(in srgb, var(--neon-rosa) 55%, transparent) 84%, transparent 100%),
    radial-gradient(ellipse 7.6% 12.3% at 49.72% 37.6%, color-mix(in srgb, var(--neon-violeta) 70%, transparent) 38%, color-mix(in srgb, var(--neon-violeta) 26%, transparent) 62%, transparent 100%);}
.lom-neon .iris{background:
    radial-gradient(ellipse 3.13% 5.08% at 49.72% 37.6%, transparent 0 80%, #fff 86% 100%),
    linear-gradient(to bottom, var(--parpado-a) 33.5%, var(--neon-violeta) 36.4%, var(--neon-rosa) 41.4%);
  -webkit-mask-image:radial-gradient(ellipse 3.13% 5.08% at 49.72% 37.6%, #000 96%, transparent 100%);
          mask-image:radial-gradient(ellipse 3.13% 5.08% at 49.72% 37.6%, #000 96%, transparent 100%);}
.lom-neon .pupila{background:radial-gradient(ellipse 1.3% 2.11% at 49.72% 37.6%, var(--ojo-fondo) 0 86%, transparent 100%);
  transform-origin:49.72% 37.6%;}
.lom-neon .vidrio{background:
    radial-gradient(ellipse 5.2% 2.6% at 47.2% 33.2%, rgba(205,170,255,.3), transparent 100%),
    radial-gradient(ellipse 2.2% .75% at 45.2% 34.4%, rgba(255,215,248,.42), transparent 100%);}
.lom-neon .brillo{background:radial-gradient(ellipse .69% 1.12% at 50.75% 35.5%, #fff 0 55%, rgba(255,255,255,0) 100%)}
.lom-neon .reflejo-ojo{opacity:0; background:radial-gradient(ellipse 2.6% 1.7% at 53.6% 40.6%, rgba(255,120,225,.85), transparent 100%)}
.lom-neon .escena > .destello{opacity:0;
  background:radial-gradient(ellipse 11% 19% at 82.74% 72.87%, color-mix(in srgb, var(--neon-rosa) 70%, transparent), color-mix(in srgb, var(--neon-violeta) 22%, transparent) 50%, transparent 75%);}
.lom-neon .glint{position:absolute; left:76.26%; top:19.26%; width:11%; aspect-ratio:1; opacity:0;
  transform:translate(-50%,-50%) scale(0);
  background:
    radial-gradient(circle, #fff 0 3%, rgba(255,190,245,.7) 7%, rgba(255,43,214,.25) 16%, transparent 30%),
    linear-gradient(to right, transparent, rgba(255,235,252,.95) 50%, transparent) center / 100% 3% no-repeat,
    linear-gradient(to bottom, transparent, rgba(255,235,252,.95) 50%, transparent) center / 3% 100% no-repeat;}
.lom-neon .nucleo{position:absolute; left:78.3%; top:66.57%; width:4.6%; aspect-ratio:1; opacity:0;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, #fff 0 16%, rgba(255,205,246,.9) 28%, rgba(255,43,214,.45) 50%, transparent 72%);}
.lom-neon .rayo{position:absolute; left:78.3%; top:66.57%; width:3.2%; height:.42%; border-radius:2px; opacity:0;
  transform-origin:0 50%; transform:translate(0,-50%) scaleX(0);
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,150,235,.75) 60%, #fff);}
.lom-neon .guitarra{position:absolute; left:92.87%; top:23.88%; width:14.65%; aspect-ratio:462/953; opacity:0;
  transform:translate(-50%,-50%) rotate(-22deg);}
.lom-neon .guitarra i{position:absolute; inset:0; background-position:center; background-size:100% 100%; background-repeat:no-repeat}
.lom-neon .gt-sana{background-image:url("../img/lom-neon/guitarra-sana.webp")}
.lom-neon .gt-mastil{background-image:url("../img/lom-neon/guitarra-mastil.webp"); opacity:0; transform-origin:50% 24%}
.lom-neon .gt-cuerpo{background-image:url("../img/lom-neon/guitarra-cuerpo.webp"); opacity:0; transform-origin:50% 72%}
.lom-neon .pow{position:absolute; left:87.24%; top:60.98%; width:17%; aspect-ratio:1; opacity:0;
  transform:translate(-50%,-50%) scale(0); background:url("../img/lom-neon/pow.svg") center / contain no-repeat;}
.lom-neon .nota{position:absolute; left:87.24%; top:60.98%; width:7%; aspect-ratio:2/3; opacity:0;
  transform:translate(-50%,-50%) scale(.3); background:center / contain no-repeat;}
.lom-neon .nota.c{background-image:url("../img/lom-neon/nota-corchea.svg")}
.lom-neon .nota.s{aspect-ratio:5/6; width:8.6%; background-image:url("../img/lom-neon/nota-doble.svg")}
.lom-neon .glint.g2{left:54.28%; top:32.32%; width:6.5%}
.lom-neon.quieto .mota{animation:none; opacity:0}
.lom-neon.espera .on .capa, .lom-neon.espera .halos .capa, .lom-neon.espera .ojo, .lom-neon.espera .resplandor, .lom-neon.espera .niebla, .lom-neon.espera .polvo{opacity:0}
.lom-neon:not(.visible) .mota{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.lom-neon .mota{animation:none !important}}