/* Fuentes opcionales por si deseas aplicarlas en otros lugares */
.press-start-2p-regular {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-unique {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 100;
  }
  
  .tac-one-regular {
    font-family: "Tac One", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  /* Reseteo básico */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Ajustes generales del body:
     - min-height: 100vh para ocupar toda la pantalla
     - justify-content & align-items para centrar vertical y horizontal
  */
  body {
    font-family: "Tac One", sans-serif; /* Fuente principal: Tac One */
    background-color: #FFCB05;         /* Fondo amarillo */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;                 /* Centrado vertical */
    text-align: center;
    color: #000;                       /* Texto negro por defecto */
    padding: 10px 20px;
  }
  
  /* Logo */
  .logo {
    width: 100%;
    max-width: 320px;
    margin-bottom: 10px;
  }
  
  /* Texto de "Próximamente..." */
  .proximamente {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #080808; /* Negro */
  }
  
  /* Contenedor principal del contador */
  #countdown {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  /* Cajitas para cada unidad de tiempo */
  .time-box {
    background-color: #000;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
    min-width: 70px;
  }
  
  /* Valores del contador */
  .time-value {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
  }
  
  /* Etiquetas (Días, Horas, Min, Seg) */
  .time-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-top: 4px;
    display: block;
  }
  
  /* Separador (dos puntos) */
  .time-separator {
    font-size: 2.4rem;
    font-weight: bold;
  }
  
  /* Sección de contacto */
  .contact-container {
    margin-bottom: 10px;
  }
  
  .contact-text {
    font-size: 1.3rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #000; /* Negro */
  }
  
  .contact-button {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .contact-button:hover {
    background-color: #333;
  }
  
  /* Estilos responsivos hasta 768px */
  @media (max-width: 768px) {
    .proximamente {
      font-size: 2rem;
    }
    .time-value,
    .time-separator {
      font-size: 2.2rem;
    }
    .time-box {
      padding: 14px 18px;
      min-width: 65px;
    }
    #countdown {
      margin-bottom: 18px;
    }
    .contact-text {
      font-size: 1.2rem;
    }
    .contact-button {
      padding: 12px 24px;
      font-size: 1rem;
    }
  }
  
  /* Estilos responsivos hasta 480px (móviles) */
  /* Aquí aumentamos significativamente tamaños y espaciados
     para que se vea "mucho más grande" en pantallas pequeñas */
  @media (max-width: 480px) {
    .logo {
      /* Aún más grande en móvil */
      max-width: 500px;
      margin-bottom: 15px;
    }
    .proximamente {
      font-size: 2.6rem; /* Más grande */
      margin-bottom: 15px;
    }
    #countdown {
      margin-bottom: 20px;
      gap: 14px; /* Aumentamos el espacio entre cajas */
    }
    .time-box {
      padding: 16px 20px;
      min-width: 70px;
    }
    .time-value,
    .time-separator {
      font-size: 3rem; /* Mucho más grande */
    }
    .time-label {
      font-size: 1.1rem; /* Más grande para la etiqueta */
    }
    .contact-container {
      margin-bottom: 15px;
    }
    .contact-text {
      font-size: 1.6rem; /* Más grande */
      margin-bottom: 12px;
    }
    .contact-button {
      padding: 14px 28px;
      font-size: 1.2rem;
    }
  }