/* ======================== */
/* SECCIÓN: Navbar (barra de navegación superior) */
/* ======================== */

.navbar {
  background: var(--color-primary);            /* Fondo azul oscuro definido en variables */
  padding: calc(var(--spacing)*0.75) 0;        /* Espaciado vertical ajustado */
}

.navbar__content {
  display: flex;                               /* Usa flexbox para distribuir elementos */
  justify-content: space-between;              /* Espacio entre logo y contador */
  align-items: center;                         /* Centra verticalmente los elementos */
  gap: var(--spacing);                         /* Espacio entre elementos hijos */
}

.navbar__logo img {
  height: 40px;                                /* Altura fija del logo */
  display: block;                              /* Elimina espacio adicional bajo la imagen */
}

/* ======================== */
/* CONTADOR DE LANZAMIENTO */
/* ======================== */

.navbar__launch-area {
  display: flex;                                /* Flexbox para agrupar texto y contador */
  align-items: center;                          /* Centra verticalmente */
  gap: calc(var(--spacing)*0.75);               /* Espacio entre texto y contador */
  color: var(--color-white);                    /* Texto en blanco */
}

.navbar__launch-text {
  font-size: 0.85rem;                           /* Tamaño pequeño del texto */
  font-weight: bold;                            /* Negrita */
  white-space: nowrap;                          /* Evita que el texto se divida en varias líneas */
}

.navbar__countdown {
  display: flex;                                /* Distribuye los bloques de tiempo en línea */
  gap: calc(var(--spacing)*0.5);                /* Espaciado entre cada unidad de tiempo */
}

.navbar__countdown-item {
  text-align: center;                           /* Centra el contenido dentro del bloque */
  line-height: 1.1;                             /* Altura de línea ajustada */
  border: 1px solid rgba(255, 255, 255, 0.7);    /* Borde blanco semi-transparente */
  border-radius: 4px;                           /* Bordes ligeramente redondeados */
  padding: calc(var(--spacing)*0.3) calc(var(--spacing)*0.5); /* Espaciado interno */
  min-width: 45px;                              /* Ancho mínimo para que no se colapsen */
}

.navbar__countdown-item span {
  display: block;                               /* El número va en su propia línea */
  font-size: 1.1rem;                            /* Tamaño del número */
  font-weight: bold;                            /* Negrita para destacar */
  font-family: 'Courier New', Courier, monospace; /* Tipografía de dígitos tipo consola */
}

.navbar__countdown-item small {
  display: block;                               /* Texto de unidad (días, hrs, etc.) en línea propia */
  font-size: 0.6rem;                            /* Tamaño pequeño */
  text-transform: uppercase;                    /* Convierte a mayúsculas */
  opacity: 0.8;                                 /* Ligera transparencia */
}