:root {
      --bg: #0a0a0a;
      --accent: #0073ff;
      --aura-1: rgba(155, 0, 255, 0.3);
      --aura-2: rgba(0, 255, 229, 0.2);
      --display: 'Montserrat', sans-serif; /* Cambiada de Unbounded a Montserrat */
  --mono: 'Space Mono', monospace;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      cursor: none;
    }

    body,
    html {
      background: var(--bg);
      color: #fff;
      font-family: 'Space Mono', monospace;
      height: 100vh;
      width: 100%;
      overflow: hidden;
    }

    /* --- CAPAS DE FONDO (ORDEN DE Z-INDEX) --- */

    /* 1. Video de fondo */
    .video-bg {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      opacity: 0.4;
      /* Ajusta qué tan oscuro quieres el video */
      filter: saturate(0.5) brightness(0.6);
    }

    /* 2. Capa de Aurora (color dinámico) */
    .aurora {
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at 20% 30%, var(--aura-1), transparent 40%),
        radial-gradient(circle at 80% 70%, var(--aura-2), transparent 40%);
      mix-blend-mode: screen;
      z-index: 2;
      pointer-events: none;
    }

    /* 3. Matriz de puntos LED (Canvas) */
    #dot-grid {
      position: fixed;
      inset: 0;
      z-index: 3;
      opacity: 0.7;
      pointer-events: none;
    }

    /* 4. Textura de rejilla monitor (Opcional pero recomendado para efecto LED) */
    .led-overlay {
      position: fixed;
      inset: 0;
      z-index: 4;
      background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 3px 3px;
      pointer-events: none;
    }

    /* --- CONTENIDO PRINCIPAL (Z-INDEX 10) --- */
    .hero {
      position: relative;
      z-index: 10;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 6vh 5vw;
      text-align: center;
    }

   .hero-prox {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.5em; /* Muy expandido para contrastar con la fecha apretada */
  color: var(--accent);
  font-weight: 400;
}

    /* LOGO */
    .logo-img {
      /* Aumentamos el máximo a 500px o 600px para 4K */
      width: clamp(120px, 18vw, 550px);
      height: auto;
      filter: drop-shadow(0 0 20px var(--aura-1));
      transition: width 0.3s ease;
    }

    /* TEXTO CENTRAL */
    .center-block {
      display: flex;
      flex-direction: column;
      gap: 5px;
      gap: clamp(10px, 4vh, 40px);
    }

    .tagline {
      display: flex;
      flex-direction: column;
      /* Esto fuerza el salto de línea */
      align-items: center;
      gap: 0;
      /* Espacio entre las dos líneas de texto */
      margin-bottom: clamp(15px, 3vh, 30px);
    }

    .tagline-line {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-weight: 300;
      /* Mantenemos el peso ligero para que se vea elegante */
      text-transform: lowercase;
      line-height: 1;
      font-size: clamp(1.8rem, 4.5vw, 4.5rem);
      letter-spacing: -0.02em;
      display: block;

      /* --- NUEVO: EFECTO GLOW CIAN --- */
      color: #fff;
      /* Texto blanco puro */

      /* Múltiples capas para un resplandor profundo:
     1. Brillo interno nítido (blanco)
     2. Resplandor medio (cian suave)
     3. Aura externa difusa (cian intenso) */
      text-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        /* Brillo núcleo blanco */
        0 0 20px rgba(0, 255, 229, 0.5),
        /* Glow medio Cian */
        0 0 30px rgba(0, 255, 229, 0.3),
        /* Aura externa Cian */
        0 0 40px rgba(0, 255, 229, 0.1);
      /* Difusión final */

      /* Añadimos una transición suave por si quieres animarlo después */
      transition: text-shadow 0.3s ease, color 0.3s ease;
    }

    .year-big {
      font-family: 'Unbounded', sans-serif;
      font-weight: 900;
      font-size: clamp(4rem, 16vw, 15rem);
      line-height: 0.8;
      color: rgba(255, 255, 255, 0.1);
      margin-top: 10px;
    }

    /* FOOTER */
    .footer-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .manifesto {
      text-align: left;
      max-width: 280px;
      font-size: 0.75rem;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.6);
    }

    .manifesto-title {
      display: block;
      font-family: var(--display);
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      line-height: 1.1;
      color: #fff;
      margin-bottom: 8px;
    }

    .date-display {
      text-align: right;
    }

    .date-main {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4.5vw, 3.8rem);
  text-transform: uppercase;
  
  /* Look Brutalista: Letras casi tocándose */
  letter-spacing: -0.06em; 
  line-height: 0.85;
  
  color: #fff;
  display: block;
  margin-top: 5px;
  
  
}


    /* AJUSTES PARA LAPTOP (IMPORTANTE) */
    @media (max-height: 780px) {
      .hero {
        padding: 4vh 5vw;
      }

      .hero-prox {
        font-size: 0.8rem;
        letter-spacing: 0.3em;
        margin-bottom: 4px;
      }

      .logo-img {
        width: 140px;
      }

      .tagline {
        font-size: clamp(1.6rem, 3.5vw, 2.8rem);
        line-height: 1;
      }

      .tagline-line {
    /* Suavizamos el glow para pantallas pequeñas */
    text-shadow: 
      0 0 8px rgba(255, 255, 255, 0.7),
      0 0 15px rgba(0, 255, 229, 0.4);
      }

      .year-big {
        font-size: 8rem;
      }

      .center-block {
        gap: 0;
      }
    }


    /* Pantallas 4K / UHD +3000px */
    @media (min-width: 3000px) {
      .logo-img {
        width: 500px;
        /* Tamaño imponente para 4K */
      }

      .center-block {
        gap: 40px;
      }

      .hero-prox {
        font-size: 2.5rem;
        letter-spacing: 0.6em;
        margin-bottom: 25px;
      }



      .tagline {
        font-size: 8rem;
        /* Agranda el texto central */
        line-height: 1.1;
      }

      .year-big {
        font-size: 22rem;
        /* El año como fondo masivo */
      }

      .footer-row {
        padding: 0 100px;
        /* Más aire a los costados */
      }

      .manifesto {
        max-width: 600px;
        font-size: 1.5rem;
      }

      .date-main {
        font-size: 5rem;
      }
    }







    /* MÓVIL */
    @media (max-width: 768px) {
      .hero {
        padding: 5vh 6vw;
      }

      .logo-img {
        width: clamp(150px, 42vw, 210px);
      }

      .footer-row {
        flex-direction: column;
        align-items: center;
        gap: 22px;
        width: 100%;
      }

      .manifesto {
        text-align: center;
        max-width: 320px;
        font-size: 0.78rem;
      }

      .manifesto-title {
        display: block;
        font-family: var(--display);
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.08em;
        line-height: 1.1;
        color: #fff;
        margin-bottom: 8px;
      }

      .date-display {
        text-align: center;
      }
    }



/*         Definición de la animación de entrada               */
@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(20px); /* Empieza un poco más abajo */
    filter: blur(5px); /* Toque extra de suavidad */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Aplicamos estado inicial invisible a los elementos que queremos animar */
.logo-img, .hero-prox, .tagline-line, .year-big, .manifesto, .date-main {
  opacity: 0;
  animation: reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --- ESCALONAMIENTO (Staggered Delay) --- */
/* Cada elemento aparece un poco después que el anterior */

.logo-img { animation-delay: 0.2s; }

.tagline-line:nth-child(1) { animation-delay: 0.5s; }
.tagline-line:nth-child(2) { animation-delay: 0.7s; }

.year-big { animation-delay: 1s; }

.manifesto { animation-delay: 1.3s; }

.hero-prox { animation-delay: 1.5s; }
.date-main { animation-delay: 1.7s; }


/* ---                   EFECTO DE ENTRADA PARA EL VIDEO            --- */
@keyframes videoReveal {
  0% {
    opacity: 0;
    filter: saturate(0) brightness(0) blur(20px);
    transform: scale(1.1); /* Efecto de zoom out sutil al entrar */
  }
  100% {
    opacity: 0.4; /* Tu opacidad original */
    filter: saturate(0.5) brightness(0.6) blur(0);
    transform: scale(1);
  }
}

.video-bg {
  position: fixed; 
  inset: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* Aplicamos la animación */
  animation: videoReveal 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}





    /*         CURSOR PERSONALIZADO         */
    /* --- ESCÁNER DE MALLA CIAN --- */
    #custom-cursor {
      position: fixed;
      width: 25px;
      /* Más grande para que parezca un escáner */
      height: 25px;
      border: 1px solid rgba(0, 255, 229, 0.4);
      /* Anillo Cian sutil */
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%) scale(1);
      transition: transform 0.2s ease, border-color 0.2s ease, width 0.2s, height 0.2s;
      mix-blend-mode: screen;
      /* Se integra con el fondo */
    }

    /* Efecto al mover rápido o hacer click */
    #custom-cursor.active {
      transform: translate(-50%, -50%) scale(1.4);
      border-color: rgba(54, 154, 230, 0.8);
      /* Cambia a naranja al interactuar */
      border-width: 2px;
    }



    /* --- EFECTO LIQUIDO --- */
@keyframes radarPulse {
  0% { transform: scale(0.2); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

.wave-dodge {
  position: fixed;
  top: 50%; left: 50%;
  width: 150vmax; height: 150vmax; /* Círculo gigante */
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(0, 255, 229, 0.2) 30%,
    transparent 60%
  );
  mix-blend-mode: multiply;
  animation: radarPulse 6s cubic-bezier(0.15, 0, 0.3, 1) infinite;
}