/* --- ESTILOS BASE --- */
body { 
    background: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: "VT323", monospace;
    margin: 0;
    text-align: center;
    overflow: hidden;
  }
  
  /* Contenedor general */
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
  }
  
  /* --- CONTADOR PRINCIPAL --- */
  .contador {
    font-size: 5vh;
    color: rgba(255, 255, 255, 0.548);
    z-index: 99;
    margin-top: 5.5vh;
    animation: movementTextUpDown 0.05s ease-in-out infinite;
  }
  .p {
    font-size: 45px;
    color: rgba(255, 255, 255, 0.445);
    z-index: 99;
    animation: movementTextUpDown 0.05s ease-in-out infinite;
  }
  
  .contadorRojo {
    margin-top: 5.5vh;
    opacity: 0.6;
    font-size: 5vh;
    z-index: -1;
    position: absolute;
    color: rgba(255, 0, 0, 0.678);
    animation: movementTextLeft 0.05s ease-in-out infinite;
  }
  
  .contadorAzul {
    margin-top: 5.5vh;
    opacity: 0.6;
    font-size: 5vh;
    z-index: -1;
    position: absolute;
    color: rgba(0, 0, 255, 0.644);
    animation: movementTextRight 0.05s ease-in-out infinite;
    
  }
  
  /* --- EFECTO DE MOVIMIENTO --- */
  @keyframes movementTextUpDown {
    0% { transform: translateY(0); }
    50% { transform: translateY(1.5%); }
    100% { transform: translateY(-1.5%); }
  }
  
  @keyframes movementTextRight {
    0% { transform: translateX(0.2%); }
    50% { transform: translateX(1.7%); }
    100% { transform: translateX(0.2%); }
  }
  
  @keyframes movementTextLeft {
    0% { transform: translateX(-0.2%); }
    50% { transform: translateX(-1.7%); }
    100% { transform: translateX(-0.2%); }
  }
  
  .mensajeEnDia{
    margin: 2vw;
    font-size: 3vh;
    opacity: 0.3;
    animation: aparecer2 2s ease forwards;
  }
  .mensajeEnCodigo{
    font-size: 2vh;
    margin: 1vh;
    opacity: 0.055;
  }
  /* --- MENSAJE FINAL --- */
  .mensajeFinal {
    display: none; /* se muestra al terminar el contador */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "VT323", monospace;
    color: rgba(187, 0, 0, 0.685);
    animation: aparecer 2s ease forwards;
    margin: 5vw;
  }
  
  .mensajeFinal h1 {
    font-size: 5rem;
    margin: 0;
    text-shadow: 0 0 15px rgb(126, 0, 0);
    animation: movementTextUpDown 0.05s ease-in-out infinite;
    animation: movementTextRight 0.05s ease-in-out infinite;
    animation: movementTextLeft 0.05s ease-in-out infinite;
  }
  
  .mensajeFinal h2 {
    font-size: 2rem;
    margin-top: 10px;
    opacity: 0.8;
    color: rgba(0, 4, 255, 0.678); text-shadow: 0 0 15px rgba(0, 21, 255, 0.425);
    
  }
  .mensajeFinal p {
    font-size: 2rem;
    margin-top: 10vh;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.678);
    text-shadow: 0 0 15px rgb(255, 255, 255);
  }
  
  
  /* Animación de aparición suave */
  @keyframes aparecer {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  
  @keyframes aparecer2 {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 0.1; transform: scale(1); }
  }

  /* --- MEDIA QUERIES --- */
  @media (max-width: 1024px) {
    .contador, .contadorRojo, .contadorAzul { font-size: 8vw; }
    .mensajeFinal h1 { font-size: 6vw; }
    .mensajeFinal h2 { font-size: 3vw; }
    .mensajeFinal p { font-size: 2.5vw; }
    .mensajeEnCodigo{
        font-size: 3vh;
        margin: 1vh;
        opacity: 0.055;
      }
      .mensajeEnDia{
        margin: 2vw;
        font-size: 5vh;
        opacity: 0.3;
        animation: aparecer2 2s ease forwards;
      }
  }
  
  @media (max-width: 768px) {
    .contador, .contadorRojo, .contadorAzul { font-size: 7vw; }
    .mensajeFinal h1 { font-size: 9.5vw; }
    .mensajeFinal p { font-size: 3.5vw; }
    .mensajeEnDia{font-size: 1.7vh; opacity: 0.3; margin: 15px;}
    .mensajeEnCodigo{
        font-size: 3vh;
        margin: 1vh;
        opacity: 0.055;
      }
      .mensajeEnDia{
        margin: 2vw;
        font-size: 4vh;
        opacity: 0.3;
        animation: aparecer2 2s ease forwards;
      }
  } 
  
  @media (max-width: 480px) {
    .contador, .contadorRojo, .contadorAzul { font-size: 7vw; }
    .mensajeFinal h1 { font-size: 9.5vw; }
    .mensajeFinal h2 { font-size: 5.5vw; }
    .mensajeFinal p { font-size: 4.8vw; }
    .mensajeEnDia{font-size: 1vh; opacity: 0.3; margin: 15px;}
    .mensajeEnCodigo{
        font-size: 2vh;
        margin: 1vh;
        opacity: 0.055;
      }
      .mensajeEnDia{
        margin: 2vw;
        font-size: 3vh;
        opacity: 0.3;
        animation: aparecer2 2s ease forwards;
      }
  }