/* ═════════════ VERSIÓN NOCHE ═════════════
   Se carga después de estilos.css y solo cambia lo necesario. */

:root {
  --fondo: #05070d;
  --fondo-2: #0e1320;
  --linea: rgba(170, 190, 230, .14);
  --suave: #8f96a6;
  --brillo: #cfe0ff;
}

body { background: var(--fondo); }

/* Cielo (canvas a pantalla completa, detrás de todo) */
.cielo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }

.nav.con-fondo { background: rgba(5, 7, 13, .62); }
.pieza__marco, .tarjeta__img, .foto, .captura { box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .9); }
.pieza__marco::after { box-shadow: inset 0 0 0 1px rgba(207, 224, 255, .08); }
.boton { box-shadow: 0 0 0 rgba(207, 224, 255, 0); transition: transform .2s, box-shadow .4s, background .2s, color .2s; }
.boton:hover { box-shadow: 0 0 24px rgba(207, 224, 255, .12); }
.etiqueta { color: #9fb0d0; }
.categoria, .fotografia, .datos, .datos > div { border-color: var(--linea); }

/* Inicio: sin video, el cielo es el protagonista */
.hero { align-items: center; }
.hero h1 { text-shadow: 0 0 40px rgba(207, 224, 255, .08); }

/* Frase central con un leve brillo de luz de luna */
.manifiesto .pinta.on { text-shadow: 0 0 30px rgba(207, 224, 255, .1); }

/* ── Final: contacto sobre el paisaje ── */
.final { position: relative; padding-bottom: clamp(220px, 38vh, 420px); overflow: hidden; }
.final .contacto { position: relative; z-index: 2; }
.final .pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; border-top: 0; color: #6d7487; padding-bottom: 76px; }
.paisaje { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(300px, 62vh, 640px); z-index: 1; pointer-events: none; }
.paisaje svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; transform: translateY(var(--py, 0px)); }
.paisaje .resplandor {
  position: absolute; left: -10%; right: -10%; bottom: 18%; height: 60%;
  background: radial-gradient(ellipse at 50% 100%, rgba(80, 115, 165, .14), transparent 65%);
}

/* Luciérnagas */
.luciernaga {
  position: absolute; width: 4px; height: 4px; border-radius: 50%; z-index: 3;
  width: 3px; height: 3px; background: #f3efb8; box-shadow: 0 0 6px 1px rgba(246, 241, 168, .5), 0 0 16px 4px rgba(200, 230, 120, .12);
  animation: volar var(--dv) ease-in-out infinite alternate, titilar var(--dt) ease-in-out infinite;
  animation-delay: var(--d), var(--d);
}
@keyframes volar { to { transform: translate(var(--tx), var(--ty)); } }
@keyframes titilar { 0%, 100% { opacity: 0; } 45%, 60% { opacity: .7; } }

/* ── Controles de sonido y animación ── */
.controles {
  position: fixed; left: var(--margen); bottom: 20px; z-index: 25;
  display: flex; gap: 8px;
}
.control {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 14px;
  border-radius: 99px; border: 1px solid var(--linea); color: var(--suave);
  background: rgba(5, 7, 13, .55); backdrop-filter: blur(10px);
  font: 500 13px var(--sans); cursor: pointer; transition: color .2s, border-color .2s, box-shadow .3s;
}
.control:hover { color: var(--texto); border-color: rgba(207, 224, 255, .4); }
.control[aria-pressed="true"] { color: var(--texto); }
.control__ondas { display: flex; align-items: center; gap: 2px; height: 14px; }
.control__ondas i { display: block; width: 2px; height: 3px; border-radius: 2px; background: currentColor; transition: height .3s; }
#ctl-sonido[aria-pressed="true"] { box-shadow: 0 0 24px rgba(207, 224, 255, .18); }
#ctl-sonido[aria-pressed="true"] .control__ondas i { animation: onda 1.1s ease-in-out infinite; }
#ctl-sonido[aria-pressed="true"] .control__ondas i:nth-child(2) { animation-delay: -.3s; }
#ctl-sonido[aria-pressed="true"] .control__ondas i:nth-child(3) { animation-delay: -.6s; }
#ctl-sonido[aria-pressed="true"] .control__ondas i:nth-child(4) { animation-delay: -.9s; }
@keyframes onda { 0%, 100% { height: 3px; } 50% { height: 14px; } }
.control__estrella { font-size: 14px; line-height: 1; transition: opacity .2s; }
#ctl-animacion[aria-pressed="false"] .control__estrella { opacity: .35; }

/* Invitación a activar el sonido: un pulso suave las primeras veces */
#ctl-sonido.invita { animation: invita 2.4s ease-in-out 3; }
@keyframes invita { 50% { box-shadow: 0 0 0 6px rgba(207, 224, 255, .08), 0 0 30px rgba(207, 224, 255, .25); color: var(--texto); } }

@media (max-width: 720px) {
  .controles { bottom: 14px; }
  .control { height: 38px; padding: 0 12px; }
  .control__texto { display: none; }
  .final .pie { flex-direction: row; justify-content: space-between; }
}

/* Con la animación apagada, todo queda quieto */
.sin-animacion .luciernaga { animation: none; opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .luciernaga { animation: none; opacity: .5; }
}