/* ============================================================
   LORE DEL DESIERTO — misión de supervivencia (portada)
   ------------------------------------------------------------
   Una noche que dura días, una nave rota, un refugio con una luz
   y, en el horizonte, un volcán que mira. Todo lo que se ve del
   paisaje es un dibujo vectorial (nada que descargar) más un
   lienzo con brasas, estrellas y arena que pinta desierto.js.

   Sin JavaScript se ve el paisaje y el texto, quieto. Con "reducir
   movimiento" tampoco se mueve nada.
   ============================================================ */

.dz {
  --dz-lava: #ff6a1f;
  --dz-lava-2: #ffb347;
  --dz-sangre: #d1260a;
  --dz-noche: #07050a;
  --dz-noche-2: #120a10;
  --dz-hueso: #f3e6d2;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dz-noche);
  color: var(--dz-hueso);
  border-block: 1px solid rgba(255, 106, 31, 0.35);
  box-shadow: 0 -30px 80px -40px rgba(255, 106, 31, 0.45), 0 30px 80px -40px rgba(255, 106, 31, 0.35);
}
/* la web da a todas las <section> un relleno arriba y abajo: aquí el paisaje llega hasta el borde */
section.dz { padding: 0; }

/* ---------- cinta de aviso, arriba del todo de la web ---------- */
.dz-cinta {
  position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1rem;
  padding: 0.55rem 1rem; text-decoration: none; color: #1a0f05; overflow: hidden;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  background: repeating-linear-gradient(-45deg, #ffc94d 0 14px, #17110a 14px 28px);
  background-size: 40px 40px;
  animation: dz-cinta-corre 3s linear infinite;
}
.dz-cinta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 7, 4, 0.9), rgba(12, 7, 4, 0.78) 50%, rgba(12, 7, 4, 0.9)); }
.dz-cinta > * { position: relative; }
.dz-cinta strong { color: #ffc94d; }
.dz-cinta span { color: #f3e6d2; }
.dz-cinta em { font-style: normal; color: #ff8a43; border-bottom: 1px solid currentColor; }
.dz-cinta:hover em { color: #ffd2a0; }
@keyframes dz-cinta-corre { to { background-position: 40px 0; } }
.dz-baliza { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #ff3b1f; box-shadow: 0 0 0 0 rgba(255, 59, 31, 0.8), 0 0 14px #ff3b1f; animation: dz-baliza 1.2s ease-out infinite; }
@keyframes dz-baliza { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 31, 0.8), 0 0 14px #ff3b1f; } 100% { box-shadow: 0 0 0 14px rgba(255, 59, 31, 0), 0 0 14px #ff3b1f; } }

/* ---------- el paisaje ---------- */
.dz-portada { position: relative; min-height: clamp(560px, 66vw, 760px); display: flex; flex-direction: column; justify-content: flex-start; }
.dz-escena { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dz-cielo {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 74% 62%, rgba(255, 90, 20, 0.34), transparent 70%),
    radial-gradient(40% 30% at 74% 40%, rgba(209, 38, 10, 0.28), transparent 70%),
    linear-gradient(180deg, #030204 0%, #09050b 38%, #1a0a0c 72%, #2a0f0a 100%);
}
.dz-escena svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dz-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.dz-vineta { position: absolute; inset: 0; z-index: 3; background: radial-gradient(120% 100% at 60% 70%, transparent 40%, rgba(0, 0, 0, 0.75) 100%), linear-gradient(90deg, rgba(3, 2, 4, 0.85) 0%, rgba(3, 2, 4, 0.35) 38%, transparent 62%); }
.dz-destello { position: absolute; inset: 0; z-index: 4; background: radial-gradient(70% 70% at 74% 48%, rgba(255, 200, 120, 0.7), rgba(255, 90, 20, 0.25) 45%, transparent 72%); opacity: 0; mix-blend-mode: screen; }
.dz.es-ruge .dz-destello { animation: dz-ruge 1.6s ease-out; }
@keyframes dz-ruge { 0% { opacity: 0; } 10% { opacity: 1; } 18% { opacity: 0.35; } 26% { opacity: 0.9; } 100% { opacity: 0; } }
.dz.es-ruge .dz-escena svg { animation: dz-tiembla 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes dz-tiembla { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 1px, 0); } 30%, 50%, 70% { transform: translate3d(-3px, -1px, 0); } 40%, 60% { transform: translate3d(3px, 1px, 0); } }

/* piezas del dibujo */
.dz-aura { animation: dz-pulso 4.5s ease-in-out infinite; transform-origin: 1196px 272px; transform-box: view-box; }
@keyframes dz-pulso { 0%, 100% { opacity: 0.75; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.08); } }
.dz-crater { animation: dz-pulso 2.6s ease-in-out infinite; transform-origin: 1196px 272px; transform-box: view-box; }
.dz-rio { stroke-dasharray: 6 12; animation: dz-fluye 2.4s linear infinite; }
.dz-rio.b { animation-duration: 3.1s; } .dz-rio.c { animation-duration: 3.8s; }
@keyframes dz-fluye { to { stroke-dashoffset: -72; } }
.dz-humo { animation: dz-humo 14s ease-in-out infinite alternate; }
.dz-humo.b { animation-duration: 19s; animation-delay: -6s; }
@keyframes dz-humo { from { transform: translate3d(-14px, 4px, 0); } to { transform: translate3d(18px, -8px, 0); } }
.dz-ojo { fill: #ffd27a; filter: url(#dzBrillo); animation: dz-parpadea 7s ease-in-out infinite; transform-origin: 1196px 146px; transform-box: view-box; }
@keyframes dz-parpadea { 0%, 44%, 52%, 100% { opacity: 0.95; transform: scaleY(1); } 48% { transform: scaleY(0.1); opacity: 0.6; } 75% { opacity: 1; } }
.dz.es-ruge .dz-ojo { opacity: 1; animation: none; fill: #fff2a8; }
.dz-pelo { animation: dz-llama 3.2s ease-in-out infinite alternate; transform-origin: 1196px 130px; transform-box: view-box; }
.dz-pelo.b { animation-delay: -1.4s; animation-duration: 3.8s; }
@keyframes dz-llama { from { transform: skewX(-4deg) scaleY(0.97); opacity: 0.7; } to { transform: skewX(5deg) scaleY(1.04); opacity: 1; } }
.dz-fuego { transform-origin: 40px 62px; animation: dz-fuego 0.6s ease-in-out infinite alternate; }
.dz-fuego.b { animation-duration: 0.45s; animation-delay: -0.2s; }
@keyframes dz-fuego { from { transform: scale(0.9, 0.85) skewX(-5deg); } to { transform: scale(1.08, 1.15) skewX(6deg); } }
.dz-humo-nave { animation: dz-sube 7s ease-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.dz-humo-nave.b { animation-delay: -2.4s; } .dz-humo-nave.c { animation-delay: -4.6s; }
@keyframes dz-sube { 0% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; } 15% { opacity: 0.8; } 100% { transform: translate3d(34px, -150px, 0) scale(1.9); opacity: 0; } }
.dz-luz-ref { animation: dz-vela 3.4s ease-in-out infinite alternate; }
@keyframes dz-vela { from { opacity: 0.8; } to { opacity: 1; } }
.dz-baliza-svg { animation: dz-parpadeo 1.4s steps(1, end) infinite; }
@keyframes dz-parpadeo { 50% { opacity: 0.15; } }
.dz-fogata { transform-origin: 700px 592px; animation: dz-fuego 0.5s ease-in-out infinite alternate; transform-box: fill-box; }

/* ---------- el titular, encima del cielo ---------- */
.dz-titular { position: relative; z-index: 5; width: 100%; padding-block: clamp(1.4rem, 3vw, 2.4rem) clamp(14rem, 30vw, 20rem); }
.dz-titular > * { max-width: min(100%, 620px); }
.dz-etiqueta { display: inline-flex; align-items: center; gap: 0.7em; margin: 0 0 0.9rem; padding: 0.35rem 0.8rem 0.35rem 0.6rem; border-radius: 99px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #ffc9a0; background: rgba(209, 38, 10, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 106, 31, 0.55), 0 0 28px -8px rgba(255, 70, 20, 0.8); }
.dz-titular h2 {
  margin: 0; font-family: var(--font-display); font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance;
  color: #fff3e0; text-shadow: 0 0 40px rgba(255, 106, 31, 0.55), 0 4px 0 rgba(0, 0, 0, 0.6);
}
.dz-titular h2 span { display: block; background: linear-gradient(100deg, #ffe27a 0%, #ff9a2b 30%, #ff4a1a 60%, #ffb347 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 22px rgba(255, 90, 20, 0.7)); text-shadow: none; animation: dz-oro 6s linear infinite; }
@keyframes dz-oro { to { background-position: -220% 0; } }
.dz-lead { margin: 1.1rem 0 0; font-size: clamp(1.02rem, 2.4vw, 1.22rem); line-height: 1.6; color: #e9dcc9; text-shadow: 0 2px 12px #000; }
.dz-lead strong { color: #ffb347; }
.dz-lead em { font-style: normal; color: #ff7a5a; font-weight: 600; }
.dz-estado { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.dz-estado li { display: grid; gap: 0.05rem; padding: 0.5rem 0.85rem; border-radius: 10px; background: rgba(8, 5, 8, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dz-estado small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #9d8f80; }
.dz-estado b { font-size: 0.92rem; color: #fff3e0; }
.dz-estado li.es-mal { box-shadow: inset 0 0 0 1px rgba(255, 70, 40, 0.6), 0 0 20px -8px rgba(255, 70, 40, 0.8); }
.dz-estado li.es-mal b { color: #ff8a6a; }
.dz-estado li.es-aviso b { color: #ffc94d; }

/* ---------- el cuerpo: tres mensajes, la misión y la pregunta ---------- */
.dz-cuerpo { position: relative; z-index: 5; padding-block: clamp(1.8rem, 4vw, 3rem) clamp(2.4rem, 5vw, 4rem); background: linear-gradient(180deg, #1a0a0c 0%, var(--dz-noche) 28%); }
.dz-cuerpo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #ff6a1f 30%, #ffe27a 50%, #ff6a1f 70%, transparent); box-shadow: 0 0 24px 2px rgba(255, 106, 31, 0.8); }
.dz-mensajes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin: 0; padding: 0; list-style: none; }
.dz-msg {
  position: relative; display: grid; gap: 0.5rem; align-content: start; padding: 1.3rem 1.3rem 1.4rem; border-radius: 14px; overflow: hidden;
  background: linear-gradient(170deg, rgba(255, 106, 31, 0.1), transparent 55%), linear-gradient(180deg, #170d10, #0c0709);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 31, 0.28), 0 24px 44px -30px #000;
  transition: transform 0.35s var(--ease, ease), box-shadow 0.35s;
}
.dz-msg::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, var(--dz-tono, rgba(255, 106, 31, 0.3)), transparent); pointer-events: none; }
.dz-msg:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--dz-tono-borde, rgba(255, 150, 60, 0.7)), 0 30px 50px -26px var(--dz-tono-borde, rgba(255, 106, 31, 0.6)); }
.dz-msg.es-refugio { --dz-tono: rgba(255, 179, 71, 0.32); --dz-tono-borde: rgba(255, 179, 71, 0.7); }
.dz-msg.es-diosa { --dz-tono: rgba(255, 70, 20, 0.4); --dz-tono-borde: rgba(255, 90, 40, 0.8); }
.dz-msg.es-ultima { --dz-tono: rgba(209, 38, 10, 0.4); --dz-tono-borde: rgba(255, 60, 40, 0.8); }
.dz-msg-ico { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; font-size: 1.6rem; border-radius: 12px; background: #0b0709; box-shadow: inset 0 0 0 2px var(--dz-tono-borde, #ff9a2b), 0 0 26px -6px var(--dz-tono-borde, #ff9a2b); }
.dz-msg-ico svg { width: 1.9rem; height: 1.9rem; display: block; }
.dz-msg h3 { margin: 0.3rem 0 0; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.03em; text-transform: uppercase; color: #fff3e0; }
.dz-msg p { margin: 0; line-height: 1.6; color: #d9cdbb; }

.dz-mision { display: grid; gap: 1.2rem 2rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; margin-top: clamp(1.6rem, 4vw, 2.6rem); padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: 16px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
@media (max-width: 860px) { .dz-mision { grid-template-columns: minmax(0, 1fr); } }
.dz-mision h3 { margin: 0 0 0.7rem; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ff9a5a; }
.dz-lista { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; counter-reset: dz; }
.dz-lista li { position: relative; padding: 0.6rem 0.8rem 0.6rem 2.8rem; border-radius: 10px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); counter-increment: dz; line-height: 1.45; }
.dz-lista li::before { content: counter(dz); position: absolute; left: 0.7rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -0.75rem; display: grid; place-items: center; font-family: var(--font-display); font-size: 0.95rem; color: #1a0f05; background: linear-gradient(180deg, #ffe27a, #ff9a2b); border-radius: 6px; }
.dz-lista li.es-peligro::before { content: "!"; background: linear-gradient(180deg, #ff9a7a, #d1260a); color: #fff; }
.dz-pregunta { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 4.4vw, 2.6rem); line-height: 1.05; text-transform: uppercase; text-wrap: balance; color: #fff3e0; text-shadow: 0 0 30px rgba(255, 90, 20, 0.6); }
.dz-pregunta span { color: #ff8a43; }
.dz-pregunta.es-parpadeo { animation: dz-luz 6s steps(1, end) infinite; }
@keyframes dz-luz { 0%, 92%, 96%, 100% { opacity: 1; } 93% { opacity: 0.55; } 95% { opacity: 0.8; } }
.dz-botones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.1rem; }

/* ---------- aparecer al llegar (con plan B si el JS no llega) ---------- */
.js .dz-rev { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease, ease), transform 0.9s var(--ease, ease); transition-delay: calc(var(--i, 0) * 0.1s); animation: dz-plan-b 0.01s 3.5s forwards; }
.js .dz-rev.dz-visto { opacity: 1; transform: none; animation: none; }
@keyframes dz-plan-b { to { opacity: 1; transform: none; } }
.dz-titular .dz-rev { animation-delay: calc(0.4s + var(--i, 0) * 0.15s); }

@media (max-width: 760px) {
  /* en el movil el texto va arriba y el paisaje abajo, sin pisarse */
  .dz-portada { min-height: 0; }
  .dz-escena { top: auto; height: 560px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .dz-titular { padding-bottom: 580px; }
  .dz-vineta { background: radial-gradient(120% 100% at 60% 70%, transparent 30%, rgba(0, 0, 0, 0.65) 100%); }
  .dz-cinta { font-size: 0.68rem; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-cinta, .dz-baliza, .dz-aura, .dz-crater, .dz-rio, .dz-humo, .dz-ojo, .dz-pelo, .dz-fuego, .dz-humo-nave, .dz-luz-ref, .dz-baliza-svg, .dz-fogata,
  .dz-titular h2 span, .dz-pregunta.es-parpadeo, .dz.es-ruge .dz-destello, .dz.es-ruge .dz-escena svg { animation: none !important; }
  .js .dz-rev { opacity: 1; transform: none; transition: none; animation: none; }
  .dz-lienzo { display: none; }
}

.dz-botones .btn { padding: 0.9em 1.3em; font-size: 0.82rem; }
.dz-mision > div:last-child { min-width: 0; }


/* ============================================================
   OXÍGENO Y NUEVO EVENTO DE LORE
   ============================================================ */
.dz-cinta-t { font-variant-numeric: tabular-nums; color: #ff6a4a; letter-spacing: 0.08em; padding: 0.1rem 0.5rem; border-radius: 6px; background: rgba(255, 59, 31, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 90, 60, 0.6); }

/* el medidor de oxígeno, en el titular */
.dz-ox { margin-top: 0.9rem; max-width: 460px; padding: 0.8rem 1rem 0.9rem; border-radius: 12px; background: rgba(8, 4, 6, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 70, 40, 0.55), 0 0 34px -10px rgba(255, 60, 30, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: dz-alarma 2.4s ease-in-out infinite; }
@keyframes dz-alarma { 50% { box-shadow: inset 0 0 0 1px rgba(255, 110, 70, 0.95), 0 0 46px -6px rgba(255, 60, 30, 1); } }
.dz-ox-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.dz-ox-et { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #ffb9a0; }
.dz-ox-et sub { font-size: 0.7em; }
.dz-ox-estado { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ff5a3a; animation: dz-parpadeo 1.2s steps(1, end) infinite; }
.dz-ox-barra { margin-top: 0.55rem; padding: 4px; border-radius: 6px; background: #050203; box-shadow: inset 0 1px 4px #000, 0 0 0 1px rgba(255, 255, 255, 0.1); }
.dz-ox-segs { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.dz-ox-segs i { display: block; height: 16px; border-radius: 2px; background: #1c1214; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.dz-ox-barra:not(.js-ox) .dz-ox-segs i:nth-child(-n+4), .dz-ox-segs i.on { background: linear-gradient(180deg, #ff9a7a, #ff3b1f 55%, #a81a08); box-shadow: 0 0 10px rgba(255, 59, 31, 0.85); }
.dz-ox-segs i.ultimo { animation: dz-parpadeo 0.8s steps(1, end) infinite; }
.dz-ox-barra.es-vacio { box-shadow: inset 0 1px 4px #000, 0 0 0 1px rgba(255, 59, 31, 0.6); }
.dz-ox-pie { margin: 0.55rem 0 0; font-size: 0.85rem; color: #d9cdbb; }
.dz-ox-cuenta { font-variant-numeric: tabular-nums; font-weight: 700; color: #ff7a5a; letter-spacing: 0.06em; }

/* el nuevo evento de lore */
.dz-evento { position: relative; overflow: hidden; margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); padding: clamp(1.8rem, 4.5vw, 3rem) clamp(1rem, 4vw, 2.6rem) clamp(1.4rem, 3.5vw, 2.2rem); border-radius: 18px; text-align: center; isolation: isolate;
  background: radial-gradient(90% 120% at 50% 0%, rgba(209, 38, 10, 0.4), transparent 68%), radial-gradient(60% 80% at 100% 100%, rgba(90, 120, 200, 0.14), transparent 70%), linear-gradient(180deg, #1c0a0d, #080406);
  box-shadow: inset 0 0 0 1px rgba(255, 70, 40, 0.6), 0 30px 70px -34px rgba(255, 60, 30, 0.85); }
.dz-evento::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(-45deg, #ffc94d 0 12px, #17110a 12px 24px); opacity: 0.9; }
.dz-evento::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px); }
.dz-evento-et { display: inline-flex; align-items: center; gap: 0.7em; margin: 0; padding: 0.4rem 0.9rem; border-radius: 99px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #ffc9a0; background: rgba(209, 38, 10, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 106, 31, 0.6), 0 0 26px -6px rgba(255, 70, 20, 0.9); }
.dz-evento-pre { margin: 1rem 0 0; font-size: 0.95rem; letter-spacing: 0.04em; color: #b7a99a; font-style: italic; }
.dz-evento-titulo { margin: 0.5rem 0 0; font-family: var(--font-display); font-size: clamp(2.1rem, 7.4vw, 4.8rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; }
.dz-q { color: #fff3e0; }
.dz-o { display: inline-block; margin: 0 0.3em; padding: 0.15em 0.55em; font-size: 0.34em; line-height: 1.2; vertical-align: 0.9em; color: #a99a8b; letter-spacing: 0.12em; border-radius: 99px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.4); }
.dz-lado.es-venganza { background: linear-gradient(100deg, #ffe27a, #ff8a2b 40%, #ff3b1f 80%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 22px rgba(255, 70, 20, 0.85)); animation: dz-oro 5s linear infinite; }
.dz-lado.es-derrota { color: #aab6d4; text-shadow: 0 0 26px rgba(120, 150, 230, 0.6), 0 2px 0 #000; animation: dz-glitch 5.5s steps(1, end) infinite; }
@keyframes dz-glitch { 0%, 91%, 95%, 100% { transform: none; text-shadow: 0 0 26px rgba(120, 150, 230, 0.6), 0 2px 0 #000; } 92% { transform: translateX(-3px); text-shadow: 3px 0 #ff3b1f, -3px 0 #4fd0ff; } 93% { transform: translateX(3px) skewX(-6deg); text-shadow: -3px 0 #ff3b1f, 3px 0 #4fd0ff; } 94% { transform: translateX(-1px); } }

.dz-cuenta { display: flex; justify-content: center; gap: clamp(0.4rem, 1.8vw, 0.9rem); margin-top: clamp(1.2rem, 3vw, 1.8rem); }
.dz-cuenta[hidden], .dz-evento-estado[hidden], .dz-evento-tz[hidden] { display: none; }
.dz-cr { display: grid; justify-items: center; gap: 0.25rem; min-width: clamp(3.8rem, 17vw, 6.4rem); padding: clamp(0.6rem, 2vw, 1rem) 0.5rem 0.5rem; border-radius: 12px; background: linear-gradient(180deg, #170b0e, #0a0507); box-shadow: inset 0 0 0 1px rgba(255, 106, 31, 0.4), inset 0 -18px 30px -22px rgba(255, 70, 40, 0.7), 0 14px 26px -18px #000; }
.dz-cr b { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3.8rem); line-height: 1; font-variant-numeric: tabular-nums; color: #fff3e0; text-shadow: 0 0 22px rgba(255, 90, 40, 0.8); }
.dz-cr b.tic { animation: dz-tic 0.5s ease-out; }
@keyframes dz-tic { 0% { transform: translateY(-14%); opacity: 0.2; filter: blur(3px); } 100% { transform: none; opacity: 1; filter: none; } }
.dz-cr small { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #9d8f80; }
.dz-cr:last-child b { color: #ff7a5a; }
.dz-evento-cuando { margin: clamp(1rem, 2.4vw, 1.4rem) 0 0; font-size: clamp(0.98rem, 2.6vw, 1.15rem); color: #ffd9a8; }
.dz-evento-tz { margin: 0.3rem 0 0; font-size: 0.9rem; color: #b7a99a; }
.dz-evento-tz span { color: #fff3e0; font-weight: 600; }
.dz-evento-estado { margin: 1.2rem 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.6rem); text-transform: uppercase; color: #ff7a5a; text-shadow: 0 0 30px rgba(255, 60, 30, 0.9); animation: dz-parpadeo 1.2s steps(1, end) infinite; }
.dz-evento .dz-botones { justify-content: center; margin-top: 1.2rem; }
.dz-evento-nota { max-width: 54ch; margin: 1rem auto 0; font-size: 0.84rem; line-height: 1.55; color: #8f8276; }
.dz-evento.es-ahora { box-shadow: inset 0 0 0 2px #ff5a3a, 0 0 80px -10px rgba(255, 60, 30, 1); animation: dz-alarma 1.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .dz-ox, .dz-ox-estado, .dz-ox-segs i.ultimo, .dz-lado, .dz-cr b.tic, .dz-evento-estado, .dz-evento.es-ahora { animation: none !important; }
}