/* ================================ */
/* SECCIÓN: Lanzamiento Próximo    */
/* ================================ */

.info-section {
  padding: calc(var(--spacing)*4) 0;      /* Espaciado vertical amplio */
  text-align: center;                     /* Centra todo el contenido */
  background: #f9f9f9;                    /* Fondo gris claro */
}

.info-section h2 {
  font-size: 2rem;                        /* Tamaño grande para el título */
  margin-bottom: var(--spacing);         /* Espacio inferior */
}

.info-section h2 span:first-child {
  color: var(--color-primary);           /* Primer fragmento en azul principal */
}

.info-section h2 span:last-child {
  color: var(--color-secondary);         /* Segundo fragmento en color secundario (amarillo) */
}

.info-subtitle {
  font-size: 1rem;                        /* Subtítulo de tamaño medio */
  margin-bottom: calc(var(--spacing)*1.5); /* Espacio inferior */
  color: var(--color-dark);              /* Texto en color oscuro */
}

.info-details {
  display: flex;                          /* Diseño en línea con flexbox */
  justify-content: center;               /* Centra horizontalmente los ítems */
  gap: calc(var(--spacing)*2);           /* Espaciado entre ítems */
  margin-bottom: var(--spacing);         /* Margen inferior general */
  flex-wrap: wrap;                        /* Permite que los ítems salten a otra línea si no caben */
}

.info-item {
  display: flex;                          /* Contenedor en columna */
  flex-direction: column;                /* Organiza íconos y textos verticalmente */
  align-items: center;                   /* Centra horizontalmente cada ítem */
  gap: 0.5rem;                            /* Espaciado entre ícono y texto */
}

.info-item .icon {
  font-size: 1.75rem;                    /* Tamaño grande del ícono */
  color: var(--color-primary);          /* Color azul para los íconos */
}

.info-item span {
  font-size: 0.95rem;                    /* Tamaño del texto descriptivo */
}

/* ================================ */
/* CONTADOR DE TIEMPO (COUNTDOWN)  */
/* ================================ */

.countdown {
  display: flex;                          /* Flexbox para alinear los contadores */
  justify-content: center;               /* Centrado horizontal */
  gap: var(--spacing);                   /* Espacio entre cada bloque */
  margin-top: var(--spacing);            /* Margen superior */
  flex-wrap: wrap;                        /* Adaptación a pantallas pequeñas */
}

.countdown div {
  background: var(--color-white);        /* Fondo blanco para cada bloque */
  border-radius: 8px;                    /* Bordes redondeados */
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1.5); /* Espaciado interno */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* Sombra suave para dar profundidad */
  text-align: center;                    /* Centra el texto */
  min-width: 70px;                       /* Ancho mínimo para mantener la forma */
}

.countdown span {
  display: block;                        /* Cada número ocupa su propia línea */
  font-size: 2rem;                       /* Tamaño grande del número */
  font-weight: bold;                     /* Negrita para destacar */
}

.countdown small {
  display: block;                        /* Texto de unidad en línea propia */
  margin-top: calc(var(--spacing)/2);   /* Espacio entre número y texto */
  color: #666;                           /* Gris para suavizar el texto */
  font-size: 0.875rem;                   /* Tamaño ligeramente más pequeño */
}