.enoc.is-grande { --enoc-lado-grande: 320px; --enoc-escala-grande: 5; max-width: min(680px, calc(100% - 20px)); }
.enoc.is-grande .enoc__cuerpo { position: relative; width: var(--enoc-lado-grande); height: var(--enoc-lado-grande); }
.enoc.is-grande .enoc__figura { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.enoc.is-grande .enoc__gif { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.enoc.is-grande .enoc__respaldo { width: 100%; height: 100%; font-size: 24px; }
.enoc.is-grande .enoc__animacion { position: absolute; right: 0; bottom: 0; transform: scale(var(--enoc-escala-grande)); transform-origin: bottom right; }
.enoc.is-grande .enoc__globo { max-width: 340px; }

.enoc.is-grande .enoc__globo { align-self: flex-start; margin-top: 12px; }
@media (max-width: 760px) {
  .enoc.is-grande { --enoc-lado-grande: 192px; --enoc-escala-grande: 3; }
}
@media (max-height: 500px) {
  .enoc.is-grande { --enoc-lado-grande: 128px; --enoc-escala-grande: 2; }
}
@media (max-height: 280px) {
  .enoc.is-grande { --enoc-lado-grande: 64px; --enoc-escala-grande: 1; }
}
.enoc__animacion { display: none; width: 64px; height: 64px; background-repeat: no-repeat; filter: drop-shadow(1px 2px 1px #0005); }
.enoc__cuerpo { position: relative; }
.enoc__glitch-secuencia { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; }
.enoc__glitch-secuencia.is-activa { display: block; }
.enoc__glitch-paso { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; opacity: 0; }
.enoc__glitch-secuencia.is-activa .enoc__glitch-paso--1 { animation: enoc-glitch-paso-1 260ms steps(2, end) both; }
.enoc__glitch-secuencia.is-activa .enoc__glitch-paso--2 { animation: enoc-glitch-paso-2 380ms steps(3, end) 170ms both; }
.enoc__glitch-secuencia.is-activa .enoc__glitch-paso--3 { animation: enoc-glitch-paso-3 520ms steps(4, end) 360ms both; }
@keyframes enoc-glitch-paso-1 {
  0% { opacity: 0; transform: translateX(-9px); clip-path: inset(0 55% 0 0); filter: saturate(2) hue-rotate(35deg); }
  35% { opacity: 1; transform: translateX(5px); clip-path: inset(12% 0 48% 0); }
  70% { opacity: .35; transform: translateX(-3px); clip-path: inset(58% 0 8% 0); }
  100% { opacity: 0; transform: translateX(8px); clip-path: inset(0 70% 0 0); }
}
@keyframes enoc-glitch-paso-2 {
  0% { opacity: 0; transform: translateX(11px) skewX(-5deg); clip-path: inset(0 0 75% 0); filter: hue-rotate(100deg) saturate(1.8); }
  30% { opacity: 1; transform: translateX(-6px) skewX(4deg); clip-path: inset(22% 0 18% 0); }
  65% { opacity: .45; transform: translateX(4px); clip-path: inset(68% 0 0 0); }
  100% { opacity: 0; transform: translateX(-12px); clip-path: inset(0 0 0 76%); }
}
@keyframes enoc-glitch-paso-3 {
  0% { opacity: 0; transform: translateX(-12px); clip-path: inset(0 80% 0 0); filter: contrast(1.7) saturate(1.5); }
  25% { opacity: .75; transform: translateX(7px); clip-path: inset(8% 0 63% 0); }
  55% { opacity: 1; transform: translateX(-2px); clip-path: inset(0); }
  100% { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
}
.enoc__gif { display: none; width: 64px; height: 64px; object-fit: contain; image-rendering: auto; }
.enoc-con-gif .enoc__gif { display: block; }
.enoc-con-gif .enoc__animacion,
.enoc-con-gif .enoc__figura,
.enoc-con-gif .enoc__respaldo { display: none; }
.enoc-con-hoja .enoc__animacion { display: block; }
.enoc-con-hoja .enoc__figura, .enoc-con-hoja .enoc__respaldo { display: none; }
.enoc-pausado .enoc__animacion { animation-play-state: paused; }
.enoc-hoja-reposo { background-image: url("iconos/enoc/enoc-reposo-hoja.png"); background-size: 2048px 64px; animation: enoc-hoja-reposo 4s steps(32, end) infinite; }
@keyframes enoc-hoja-reposo { from { background-position: 0 0; } to { background-position: -2048px 0; } }
.enoc-hoja-hablando { background-image: url("iconos/enoc/enoc-hablando-hoja.png"); background-size: 512px 64px; animation: enoc-hoja-hablando 1s steps(8, end) infinite; }
@keyframes enoc-hoja-hablando { from { background-position: 0 0; } to { background-position: -512px 0; } }
.enoc-hoja-atento { background-image: url("iconos/enoc/enoc-atento-hoja.png"); background-size: 512px 64px; animation: enoc-hoja-atento 1s steps(8, end) infinite; }
@keyframes enoc-hoja-atento { from { background-position: 0 0; } to { background-position: -512px 0; } }
.enoc-hoja-alerta { background-image: url("iconos/enoc/enoc-alerta-hoja.png"); background-size: 768px 64px; animation: enoc-hoja-alerta 1.5s steps(12, end) 1; }
@keyframes enoc-hoja-alerta { from { background-position: 0 0; } to { background-position: -768px 0; } }
.enoc-hoja-ocioso { background-image: url("iconos/enoc/enoc-ocioso-hoja.png"); background-size: 1024px 64px; animation: enoc-hoja-ocioso 2s steps(16, end) 1; }
@keyframes enoc-hoja-ocioso { from { background-position: 0 0; } to { background-position: -1024px 0; } }
@media (prefers-reduced-motion: reduce) {
  .enoc__animacion { animation: none; background-position: -128px 0; }
  .enoc__glitch-secuencia.is-activa .enoc__glitch-paso { animation: none; }
  .enoc__glitch-secuencia.is-activa .enoc__glitch-paso--3 { opacity: 1; }
}